/* ---- PALETA DE CORES E VARIÁVEIS DO PROJETO ---- */
:root {
    --agiliza-bg-dark: #1A1A1D;
    --agiliza-bg-medium: #1F1F23;
    --agiliza-bg-light: #24252A;
    --agiliza-border: #3A3A40;
    --agiliza-text-primary: #EAEAEA;
    --agiliza-text-secondary: #A8A8B3;
    --agiliza-text-headings: #FFFFFF;

    --fumec-orange: #FF6600;
    --fumec-orange-hover: #E05A00;
    --rgb-fumec-orange: 255, 102, 0;

    --border-radius-sm: 0.3rem;
    --border-radius-md: 0.8rem;
}

/* ---- CONFIGURAÇÕES GLOBAIS ---- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%; /* Garante que o body ocupe toda a altura */
    width: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--agiliza-bg-dark);
    color: var(--agiliza-text-primary);
    overflow: hidden; /* Proíbe o scroll em qualquer tamanho de tela */
    -webkit-tap-highlight-color: transparent; /* Remove o brilho azul no clique em mobile */
}

/* ------------------------------------------- */
/* ---- LAYOUT PARA DESKTOP (TELA GRANDE) ---- */
/* ------------------------------------------- */

.login-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    position: relative;
    padding: 1rem;
}

.login-box {
    width: 100%;
    max-width: 1100px;
    height: 700px;
    display: flex;
    background: var(--agiliza-bg-medium);
    border-radius: var(--border-radius-md);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
    z-index: 10;
    animation: slideUp 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.login-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.5rem;
}

.form-panel { flex-basis: 55%; }
.welcome-panel {
    flex-basis: 45%;
    background: linear-gradient(145deg, var(--fumec-orange-hover), var(--fumec-orange));
    text-align: center;
    align-items: center;
    color: var(--agiliza-text-headings);
}

/* ---- ESTILOS DOS PAINÉIS (Resto do CSS para Desktop) ---- */
/* O resto do seu CSS original (de .welcome-panel .logo-container até @keyframes move)
   permanece exatamente o mesmo. Cole ele aqui. Vou omití-lo para focar na mudança da responsividade. */

/* [COLE SEU CSS DESDE '.welcome-panel .logo-container' ATÉ '@keyframes move' AQUI] */

.welcome-panel .logo-container{width:80px;height:80px;background-color:rgba(255,255,255,.15);border:2px solid #fff;border-radius:50%;display:flex;justify-content:center;align-items:center;margin-bottom:1.5rem}.welcome-panel .logo-icon{font-size:2.5rem;color:#fff}.welcome-panel h1{font-size:2.2rem;font-weight:700}.welcome-panel h1 span{font-weight:400}.welcome-panel p{font-size:1rem;font-weight:300;max-width:300px;opacity:.9;margin-top:1rem;line-height:1.6}.form-wrapper{width:100%;max-width:350px;margin:0 auto}.form-title{font-size:1.8rem;font-weight:600;color:var(--agiliza-text-headings);margin-bottom:.5rem}.form-subtitle{font-size:.95rem;color:var(--agiliza-text-secondary);margin-bottom:2rem}.input-group{position:relative;margin-bottom:1.5rem}.input-icon{position:absolute;top:50%;left:15px;transform:translateY(-50%);color:var(--agiliza-text-secondary);font-size:.9rem}.input-group input{width:100%;padding:.9rem 1rem .9rem 2.5rem;background:var(--agiliza-bg-light);border:1px solid var(--agiliza-border);border-radius:var(--border-radius-sm);color:var(--agiliza-text-primary);font-size:1rem;transition:all .3s ease}.input-group input::placeholder{color:var(--agiliza-text-secondary);opacity:.7}.input-group input:focus{outline:none;border-color:var(--fumec-orange);background:var(--agiliza-bg-medium);box-shadow:0 0 0 3px rgba(var(--rgb-fumec-orange),.2)}.form-options{display:flex;justify-content:flex-end;margin-bottom:1.5rem;font-size:.85rem}.form-options a{color:var(--agiliza-text-secondary);text-decoration:none;transition:color .3s ease}.form-options a:hover{color:var(--fumec-orange)}.btn-login{width:100%;padding:.9rem;background:var(--fumec-orange);border:none;border-radius:var(--border-radius-sm);color:#fff;font-size:1rem;font-weight:600;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:.5rem;transition:all .3s ease}.btn-login:hover,.btn-login:active{background:var(--fumec-orange-hover);box-shadow:0 5px 15px rgba(var(--rgb-fumec-orange),.3);transform:translateY(-3px)}.login-alert-danger{background-color:rgba(229,62,62,.1);color:#e53e3e;padding:.8rem 1rem;border-left:3px solid #e53e3e;border-radius:var(--border-radius-sm);margin-bottom:1.5rem;font-size:.9rem}.invalid-feedback{color:#e53e3e;font-size:.8rem;margin-top:-1rem;margin-bottom:1rem;padding-left:.2rem}.footer-note{text-align:center;font-size:.8rem;color:var(--agiliza-text-secondary);margin-top:2rem;opacity:.7}.shape{position:absolute;border-radius:50%;filter:blur(100px);z-index:1}.shape-1{width:300px;height:300px;background:rgba(var(--rgb-fumec-orange),.2);top:-50px;right:-50px;animation:move 20s infinite alternate}.shape-2{width:250px;height:250px;background:rgba(49,130,206,.1);bottom:0;left:-80px;animation:move 25s infinite alternate-reverse}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes move {
    from { transform: translate(0, 0) rotate(0deg); }
    to { transform: translate(100px, 50px) rotate(90deg); }
}


/* -------------------------------------------------------------------------- */
/* ----           >>> MÁGICA DA RESPONSIVIDADE PARA APP <<<                ---- */
/* -------------------------------------------------------------------------- */

/* Estilos para Tablet e Celular (até 920px de largura) */
@media (max-width: 1400px) {

    /* Transforma o container em tela cheia */
    .login-page-container {
        padding: 0;
        align-items: flex-start; /* Alinha o conteúdo ao topo */
    }
    
    /* Remove o estilo de "caixa" e o faz ocupar todo o espaço */
    .login-box {
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        height: 100vh; /* Ocupa 100% da altura da tela */
        border-radius: 0;
        box-shadow: none;
        background: transparent; /* A caixa em si fica invisível */
        animation: none; /* Remove animação de slide-up da caixa */
    }

    /* Ajusta os painéis para preencher a tela verticalmente */
    .login-panel {
        flex-basis: auto; /* Reseta a base flex para que cresçam naturalmente */
        width: 100%;
        padding: 0 1.5rem; /* Adiciona padding lateral */
    }

    /* PAINEL DE BOAS-VINDAS (LARANJA) NO TOPO */
    .welcome-panel {
        order: -1; /* Joga para o topo da pilha flex */
        flex: 0 0 35%; /* Não cresce, não encolhe, base de 35% da altura */
        justify-content: flex-end; /* Alinha o conteúdo para baixo */
        padding-bottom: 2rem;
        background: var(--fumec-orange); /* Simplifica o gradiente */
        animation: fadeIn 0.8s ease-out; /* Nova animação */
    }

    .welcome-panel h1 {
        font-size: 1.8rem;
    }

    /* PAINEL DO FORMULÁRIO (RESTANTE DA TELA) */
    .form-panel {
        flex: 1 1 auto; /* Permite que o painel cresça e ocupe o espaço restante */
        justify-content: flex-start; /* Alinha ao topo */
        padding-top: 2rem;
        background-color: var(--agiliza-bg-dark); /* Fundo que combina com o body */
        animation: fadeIn 0.8s ease-out 0.2s; /* Nova animação com delay */
        animation-fill-mode: backwards; /* Garante que a animação comece invisível */
    }

    /* Faz o formulário ocupar toda a largura disponível */
    .form-wrapper {
        max-width: 100%;
    }
    
    .input-group input, .btn-login {
        /* Aumenta a altura dos inputs e botões para toque fácil */
        padding-top: 1rem;
        padding-bottom: 1rem;
        font-size: 1rem;
    }
    
    .btn-login:hover {
        /* Remove o efeito de subir no hover, não funciona bem no toque */
        transform: none;
    }

    /* Esconde as formas decorativas que não fazem sentido em um layout de app */
    .shape {
        display: none;
    }

    .footer-note {
        position: absolute; /* Posiciona o rodapé no final da tela */
        bottom: 1rem;
        left: 0;
        right: 0;
    }

    /* Nova animação para os painéis aparecerem suavemente */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}