/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVIDADE VERTICAL DAS TELAS DE AUTENTICAÇÃO
   Login (`login.css`) e Recuperar Senha (`password_reset_form_custom.css`).

   ── O problema que este arquivo resolve ──────────────────────────────────
   As duas telas foram escritas com espaçamentos fixos (padding 60px, título
   2.1rem, campos com 24px entre si) e com UM único ponto de quebra:
   `@media (max-width: 991px)`. Só que o defeito relatado não é de largura —
   é de ALTURA. Um notebook de 15" tem 1366px de largura (nunca dispara o
   991px) e sobra pouco mais de 600px de altura útil depois da barra do
   navegador.

   Medido no dev em 07/08/2026: a tela de login precisa de **881px** de altura
   para caber inteira, e o botão "Entrar" fica em 561px. Isto é o que acontece
   nas configurações reais de um 15":

   | Tela do notebook          | Altura útil | Login (881px)   |
   |---------------------------|-------------|-----------------|
   | 1366×768                  | ~625px      | falta 256px     |
   | 1920×1080 a 125% (padrão) | ~730px      | falta 151px     |
   | 1920×1080 a 100%          | ~945px      | cabe            |

   A tela de Recuperar Senha é uma cópia da de login e tem o mesmo defeito
   (745px de conteúdo).

   ── Como resolve ─────────────────────────────────────────────────────────
   Todo espaçamento vertical vira variável, e as variáveis encolhem por
   faixa de ALTURA de viewport. Nada é escondido enquanto houver espaço: a
   compressão é progressiva e só no último degrau algum enfeite sai de cena.

   ── Por que um arquivo só ────────────────────────────────────────────────
   `login.css` e `password_reset_form_custom.css` são quase idênticos (mesma
   estrutura, prefixos diferentes: `.login-*` e `.reset-*`). Corrigir dentro
   de cada um significaria escrever a mesma regra duas vezes e, na próxima
   tela de autenticação, uma terceira — e é assim que uma delas fica para
   trás. Aqui a regra existe uma vez e vale para as duas famílias de classe.
   Tela de autenticação nova: inclua este arquivo e use um dos dois prefixos.

   Carregado DEPOIS do CSS da tela, nos 4 templates de `templates/accounts/`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Os botões de ajuste ───────────────────────────────────────────────────
   Valores de partida = exatamente o que as telas já usavam hoje. Em tela
   alta, portanto, este arquivo não muda um pixel do visual aprovado. */
:root {
    --auth-pad-y: 60px;          /* respiro acima/abaixo das duas colunas */
    --auth-pad-x: 48px;
    --auth-titulo: 2.1rem;
    --auth-titulo-reset: 2rem;
    --auth-subtitulo-mb: 32px;
    --auth-campo-gap: 24px;      /* distância entre CPF, Senha e captcha */
    --auth-input-pad-y: 14px;    /* altura interna de cada input */
    --auth-btn-pad-y: 14px;
    --auth-rodape-mt: 36px;
    --auth-rodape-pt: 24px;
    --auth-rodape-logo: 42px;
    --auth-divisor-my: 26px;
    --auth-logo-topo: 48px;
    --auth-logo-topo-mb: 26px;

    /* Coluna do banner (esquerda) */
    --auth-banner-logo: 48px;
    --auth-banner-logo-mb: 48px;
    --auth-banner-h1: 2.6rem;
    --auth-banner-h1-mb: 20px;
    --auth-banner-p: 1.05rem;
    --auth-badges-mt: 40px;
    --auth-badges-gap: 20px;
    --auth-badge-caixa: 44px;
}

/* ── Ligação: as duas famílias de classe passam a ler os botões acima ───── */

.login-banner,
.login-form-area,
.reset-banner,
.reset-form-area {
    padding: var(--auth-pad-y) var(--auth-pad-x);
}

/* Coluna do formulário */
.form-title { font-size: var(--auth-titulo); }
.reset-title-custom { font-size: var(--auth-titulo-reset); }

.form-subtitle,
.reset-subtitle-custom { margin-bottom: var(--auth-subtitulo-mb); }

/* O espaço entre os campos vem do `mb-4` do Bootstrap no login e do
   `.reset-field` no recuperar senha — o `!important` é para vencer o
   `!important` que o próprio Bootstrap põe nas utilitárias de margem. */
.login-form-wrapper .mb-4,
.reset-form-wrapper .mb-4 { margin-bottom: var(--auth-campo-gap) !important; }
.reset-field { margin-bottom: var(--auth-campo-gap); }

.input-wrap input,
.reset-input-wrap input { padding: var(--auth-input-pad-y) 0; }

.btn-login-chamados,
.btn-reset-custom { padding: var(--auth-btn-pad-y) 20px; }

.reset-logo-top {
    height: var(--auth-logo-topo);
    margin-bottom: var(--auth-logo-topo-mb);
}

.divider-custom { margin: var(--auth-divisor-my) 0; }

.login-extra-footer {
    margin-top: var(--auth-rodape-mt);
    padding-top: var(--auth-rodape-pt);
}
.sutra-logo-wrap img { height: var(--auth-rodape-logo); }

/* Coluna do banner */
.brand-hero .logo-brand,
.reset-logo-brand { margin-bottom: var(--auth-banner-logo-mb); }

.brand-hero .logo-brand img,
.reset-logo-brand img { height: var(--auth-banner-logo); }

.brand-hero h1,
.reset-brand-hero h1 {
    font-size: var(--auth-banner-h1);
    margin-bottom: var(--auth-banner-h1-mb);
}

.brand-hero p,
.reset-brand-hero p { font-size: var(--auth-banner-p); }

.banner-badges-grid {
    margin-top: var(--auth-badges-mt);
    gap: var(--auth-badges-gap);
}

.badge-icon-box {
    width: var(--auth-badge-caixa);
    height: var(--auth-badge-caixa);
}

/* ══ DEGRAU 1 — até 900px de altura ════════════════════════════════════════
   Notebook grande ou janela não maximizada. Aperto leve, imperceptível. */
@media (max-height: 900px) {
    :root {
        --auth-pad-y: 44px;
        --auth-titulo: 1.9rem;
        --auth-titulo-reset: 1.85rem;
        --auth-subtitulo-mb: 26px;
        --auth-campo-gap: 20px;
        --auth-rodape-mt: 28px;
        --auth-rodape-pt: 20px;
        --auth-divisor-my: 20px;
        --auth-banner-logo-mb: 36px;
        --auth-banner-h1: 2.35rem;
        --auth-badges-mt: 32px;
        --auth-logo-topo-mb: 20px;
    }
}

/* ══ DEGRAU 2 — até 800px de altura ════════════════════════════════════════
   1920×1080 a 125% de escala (o padrão do Windows em 15" Full HD). */
@media (max-height: 800px) {
    :root {
        --auth-pad-y: 28px;
        --auth-titulo: 1.7rem;
        --auth-titulo-reset: 1.65rem;
        --auth-subtitulo-mb: 20px;
        --auth-campo-gap: 15px;
        --auth-input-pad-y: 12px;
        --auth-btn-pad-y: 12px;
        --auth-rodape-mt: 20px;
        --auth-rodape-pt: 16px;
        --auth-rodape-logo: 34px;
        --auth-divisor-my: 16px;
        --auth-logo-topo: 40px;
        --auth-logo-topo-mb: 16px;
        --auth-banner-logo: 42px;
        --auth-banner-logo-mb: 28px;
        --auth-banner-h1: 2.1rem;
        --auth-banner-h1-mb: 14px;
        --auth-banner-p: 0.98rem;
        --auth-badges-mt: 24px;
        --auth-badges-gap: 14px;
        --auth-badge-caixa: 38px;
    }

    /* Escolha de conteúdo, não só de espaço: quem sai aqui é o logo grande
       do rodapé (enfeite), e o contato apenas encolhe. Para quem não
       consegue entrar, o e-mail de suporte vale mais que um logo — e a
       marca já está no banner ao lado e no topo da tela. */
    .login-extra-footer .sutra-logo-wrap,
    .reset-logo-bottom { display: none; }

    .login-extra-footer .sutra-contact-block,
    .reset-contact-custom {
        font-size: 0.72rem;
        line-height: 1.35;
        margin-bottom: 8px;
    }
}

/* ══ DEGRAU 3 — até 700px de altura ════════════════════════════════════════
   1366×768, que é a tela de 15" mais comum no parque de máquinas. */
@media (max-height: 700px) {
    :root {
        --auth-pad-y: 16px;
        --auth-titulo: 1.5rem;
        --auth-titulo-reset: 1.5rem;
        --auth-subtitulo-mb: 16px;
        --auth-campo-gap: 12px;
        --auth-input-pad-y: 10px;
        --auth-btn-pad-y: 11px;
        --auth-rodape-mt: 10px;
        --auth-rodape-pt: 9px;
        --auth-rodape-logo: 28px;
        --auth-logo-topo: 34px;
        --auth-logo-topo-mb: 12px;
        --auth-banner-logo: 38px;
        --auth-banner-logo-mb: 20px;
        --auth-banner-h1: 1.85rem;
        --auth-banner-p: 0.92rem;
        --auth-badges-mt: 18px;
        --auth-badge-caixa: 34px;
    }

    .form-subtitle,
    .reset-subtitle-custom { font-size: 0.88rem; }

    /* Aqui o contato finalmente sai, junto com o logo grande do rodapé. Os
       caminhos que resolvem sozinho — "Primeiro acesso?" e "Esqueceu a
       senha?" — ficam, porque estão acima e não são enfeite. */
    .login-extra-footer .sutra-contact-block,
    .reset-contact-custom,
    .login-extra-footer .sutra-logo-wrap,
    .reset-logo-bottom { display: none; }
}

/* ══ DEGRAU 4 — até 620px de altura ════════════════════════════════════════
   Netbook, janela dividida ao meio, notebook com muita barra aberta.
   Aqui o objetivo é só um: CPF, senha, verificação e o botão "Entrar"
   visíveis sem rolar. O resto é enfeite e pode sair. */
@media (max-height: 620px) {
    :root {
        --auth-pad-y: 16px;
        --auth-titulo: 1.3rem;
        --auth-titulo-reset: 1.3rem;
        --auth-subtitulo-mb: 12px;
        --auth-campo-gap: 10px;
        --auth-input-pad-y: 9px;
        --auth-btn-pad-y: 10px;
        --auth-banner-h1: 1.6rem;
        --auth-badges-mt: 12px;
    }

    .login-extra-footer,
    .reset-footer-custom,
    .divider-custom { display: none; }

    /* O banner perde os enfeites e fica só com a marca e a frase. */
    .banner-badges-grid { display: none; }
    .brand-hero p,
    .reset-brand-hero p { display: none; }
}

/* ══ Alturas mínimas: usar `svh` onde existir ══════════════════════════════
   `100vh` no celular conta a barra de endereço mesmo quando ela está
   recolhida, o que cria um pulo na rolagem. `100svh` mede a altura menor
   (barra visível) e resolve. Navegador que não conhece `svh` simplesmente
   ignora a segunda linha e continua com o `vh`. */
.login-container,
.reset-split {
    min-height: 100vh;
    min-height: 100svh;
}

/* ══ Largura: o card do celular também acompanha a altura ══════════════════
   Abaixo de 991px o banner some e o formulário vira um card branco com
   padding fixo de 40px. Em celular deitado isso volta a estourar. */
@media (max-width: 991px) and (max-height: 700px) {
    .login-form-wrapper,
    .reset-form-wrapper {
        padding: 20px 18px;
        border-radius: 16px;
    }
}