/**
 * Login CSS - Estilos para a página de login
 */

/* ============================================
   PRELOADER - Tela de transição após login
   ============================================ */
.login-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #E5B318 0%, #14B8A6 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.login-preloader.active {
    opacity: 1;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.preloader-logo-wrapper {
    animation: preloaderPulse 1.6s ease-in-out infinite;
}

.preloader-logo {
    max-width: 120px;
    height: auto;
    object-fit: contain;
    display: block;
}

.preloader-logo-text {
    font-size: 42px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 2px;
    text-align: center;
}

/* Dots loading animation */
.preloader-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preloader-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    animation: preloaderDot 1.2s ease-in-out infinite;
}

.preloader-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.preloader-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes preloaderPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.06);
        opacity: 0.85;
    }
}

@keyframes preloaderDot {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.4;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Spinner para botão de login */
.spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVIDADE PARA TELAS PEQUENAS
   ============================================ */

/* Garantir que o formulário seja visível em telas pequenas */
@media (max-width: 768px) {
    html, body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: auto !important;
        min-height: 100vh !important;
        width: 100% !important;
        background-color: #F0FDFA !important; /* Fundo esverdeado em toda a tela */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Container principal - ocupar toda a tela */
    body > .flex {
        min-height: 100vh !important;
        height: auto !important;
        flex-direction: column !important;
        background-color: #F0FDFA !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Seção de login - ocupar toda a tela em mobile */
    .bg-\\[\\#F0FDFA\\] {
        width: 100% !important;
        min-height: 100vh !important;
        height: auto !important;
        padding: 2rem 1.5rem !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background-color: #F0FDFA !important;
        margin: 0 !important;
    }
    
    /* Garantir que o formulário não seja cortado */
    .max-w-\\[420px\\] {
        width: 100%;
        max-width: 100%;
        padding-bottom: 2rem; /* Espaço extra no final */
    }
    
    /* Garantir que o container principal permita scroll */
    .flex.flex-col {
        min-height: 100vh !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background-color: #F0FDFA !important;
        width: 100% !important;
    }
    
    /* Garantir que não haja overflow horizontal */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Telas muito pequenas - garantir visibilidade completa */
@media (max-width: 480px) {
    body {
        background-color: #F0FDFA !important;
    }
    
    .w-full.md\\:w-2\\/5 {
        width: 100% !important;
        padding: 1.5rem 1rem !important;
        min-height: 100vh !important;
        background-color: #F0FDFA !important;
    }
    
    /* Garantir que inputs e botões sejam acessíveis */
    input, button {
        min-height: 44px; /* Tamanho mínimo para touch */
    }
    
    /* Garantir espaço suficiente para scroll */
    .max-w-\\[420px\\] {
        padding-bottom: 3rem;
    }
}

/* Garantir centralização do logo no container branco */
@media (min-width: 768px) {
    /* Container branco com logo */
    .hidden.md\\:flex {
        position: relative;
    }
    
    /* Logo centralizado vertical e horizontalmente */
    .hidden.md\\:flex > div:first-child {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
}