/**
 * login.css — estilos compartilhados pelas 5 telas de auth (login, cadastro,
 * recuperar/redefinir/atualizar senha) + manutencao.php (6 telas no total).
 * Card centralizado (.login-container), cabeçalho de 3 faixas (logo/globo/
 * corpo — ver .login-brand-band/.login-lang-band abaixo, testado e aprovado
 * primeiro em authlogin.php), formulário, botões, e os padrões de link
 * secundário usados nas várias telas.
 *
 * manutencao.php ainda usa a versão antiga de 1 faixa só (.login-header) —
 * não migrou pro cabeçalho de 3 faixas por estar fora do escopo pedido até
 * agora (ver comentário logo abaixo de .login-header).
 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    /* dvh sobrescreve vh em navegadores compatíveis: usa a altura real e
       dinâmica da viewport (sem a barra de endereço do mobile), evitando o
       espaço vazio no topo do card visto por Gilmar em celulares reais —
       100vh sozinho é calculado pela altura MÁXIMA da viewport (barra
       recolhida), maior que a área visível no carregamento (barra visível),
       o que empurra o card centralizado para baixo do topo da tela. */
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f4f8;
    font-family: 'Segoe UI', sans-serif;
}

/* Globo seletor de idioma: movido para stdapp.css (compartilhado com central.css) */

.login-container {
    border-radius: var(--PnBorderRadius);
    border: var(--PnBorder);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.login-header {
    background: #1a2744;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ===== Cabeçalho dividido em 2 faixas (testado em authlogin.php, aprovado por
   Gilmar e replicado em 2026-07-08 pras outras 4 telas de auth: cadastro,
   recuperar/redefinir/atualizar senha — todas usam .login-brand-band/
   .login-lang-band agora). .login-header abaixo permanece intocada e em uso
   só em manutencao.php (única tela de auth que ainda não migrou pro padrão
   novo — fora do escopo pedido até agora). ===== */

/* Faixa 1 — marca (logo), mesma cor do rodapé (.rodape-marca em stdapp.css)
   para criar o efeito de espelhamento topo/rodapé. Padding vertical reduzido
   (ajuste 2026-07-08b) — só o "respiro" ao redor do logo diminuiu, o logo em
   si (.login-logo) não foi alterado. Linha divisória sutil (ajuste 2026-07-08c)
   marcando a transição pra faixa 2. */
.login-brand-band {
    background: #111d3a;
    padding: 10px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Faixa 2 — seletor de idioma, tom intermediário entre o escuro do topo/rodapé
   e o branco do corpo. Gradiente radial (mesma estrutura elíptica de
   2026-07-08d — raio 65% largura / 200% altura, mantendo o texto de dica na
   metade escura). Tons ajustados em 2026-07-08f pra um efeito bem mais
   dramático (pedido de Gilmar): centro mantido em #111d3a (já era o tom mais
   escuro da paleta); borda MUITO mais clara, #5b8fd9 (ainda azul — matiz
   ~215°, entre a família marinho do topo/rodapé e o azul de botões/links
   --BtnCorPadrao/--BtnCorHover do projeto — não é cinza nem branco). Sozinho,
   #5b8fd9 é claro demais pro texto claro (#d7e3f4) manter 4.5:1 nele (contraste
   cairia pra ~2.5:1) — ver correção abaixo em .lang-globe-hint. */
.login-lang-band {
    background: radial-gradient(ellipse 65% 200% at center, #111d3a 0%, #5b8fd9 100%);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* Texto de dica do globo (.lang-globe-hint, cor padrão #94a3b8 em stdapp.css).
   A barra translúcida atrás do texto (2026-07-08f) foi removida em
   2026-07-08g a pedido de Gilmar — destoava do design. Trocada por
   text-shadow escuro, técnica mais discreta pra manter legibilidade sobre um
   fundo de brilho variável. IMPORTANTE (documentado com transparência): a
   fórmula de contraste da WCAG 1.4.3 é calculada só sobre cor sólida
   texto/fundo — text-shadow não entra nessa conta. Matematicamente, nenhuma
   cor de texto única atinge 4.5:1 nos DOIS extremos literais do gradiente ao
   mesmo tempo (centro #111d3a exige texto claro; borda #5b8fd9 exige texto
   escuro — são exigências opostas). Na prática, porém, o texto nunca renderiza
   sobre o extremo 100% literal: fica centralizado e, pela elipse esticada
   verticalmente (200% de altura, ver .login-lang-band acima), sua posição real
   corresponde a ~35–65% do percurso do gradiente mesmo nas traduções mais
   longas — contraste nessa faixa varia de ~7.4:1 (35%) a ~4.4:1 (65%, extremo
   mais pessimista, texto muito longo + tela estreita), valores confirmados
   por script, reforçados visualmente pelo text-shadow. Se for necessário
   fechar mesmo o extremo 100% literal
   dentro da fórmula estrita da WCAG, a opção seria reduzir um pouco o quanto a
   borda do gradiente clareia (ex.: #3f5fa0 fecha ~4.82:1 mesmo sem shadow,
   verificado por script) — não apliquei essa redução agora porque
   a claridade da borda foi um pedido explícito da rodada anterior; fica como
   opção em aberto se Gilmar preferir a garantia numérica estrita à
   claridade máxima da borda. */
.login-lang-band .lang-globe-hint {
    color: #d7e3f4;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Retângulo de fundo visível atrás de cada bandeira do leque (.lang-fan-flag,
   base em stdapp.css) vem do box-shadow — removido só aqui (override escopado
   via .login-lang-band, que existe nas 5 telas de auth com o cabeçalho novo
   — login/cadastro/recuperar/redefinir/atualizar — mas não em manutencao.php
   nem no menu lateral de central/questionário/resultado, que continuam com a
   regra base de stdapp.css intocada). Só a propriedade box-shadow foi
   alterada — nada mais (opacity/transform/posicionamento continuam
   exatamente como estavam). */
.login-lang-band .lang-fan-flag,
.login-lang-band .lang-fan.open .lang-fan-flag:hover {
    box-shadow: none;
}

/* Linha horizontal nítida sob o "U" (.fan-arc-bg, base em stdapp.css) nas
   telas de auth, ausente no menu lateral (.sidebar-globe-wrap). Causa: em
   AMBOS os contextos o .fan-arc-bg é idêntico — um anel de 360x200px,
   rgba(250,250,250,0.20) + blur, sem nenhum fade de opacidade embutido no
   próprio clip-path (é um recorte nítido, não um gradiente). No menu lateral
   isso não aparece porque TODO o .sidebar é escuro de cima a baixo — o anel
   estoura os limites de .sidebar-globe-wrap mas continua se sobrepondo a mais
   fundo escuro uniforme, sem nenhuma transição de cor visível. Nas telas de
   auth, .login-lang-band é uma faixa curta sanduichada entre o topo escuro e
   o .login-body BRANCO logo abaixo — o anel (200px de altura, bem maior que a
   faixa) estoura pra dentro do corpo branco, que sendo pintado depois (mais
   abaixo no HTML) cobre a parte que sobra com um corte reto exatamente na
   emenda das duas faixas — daí a linha nítida. Corrigido só aqui (não mexe no
   .fan-arc-bg base nem no menu lateral) com uma máscara radial que esmaece a
   opacidade do anel gradualmente a partir do centro (mesma origem do anel,
   50% 0% = topo/centro da caixa, onde fica o globo) até ficar totalmente
   transparente bem antes de chegar nos 200px de altura — o anel já desaparece
   sozinho, então não sobra nada pro .login-body cobrir com um corte visível. */
.login-lang-band .fan-arc-bg {
    -webkit-mask-image: radial-gradient(circle at 50% 0%, black 0%, black 45%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 0%, black 0%, black 45%, transparent 75%);
}

/* "Esconder bandeira ativa com o leque aberto": testado aqui, escopado a
   authlogin.php via .login-hide-active-flag-on-open — aprovado e replicado em
   2026-07-09 para TODAS as telas com globo, generalizado em stdapp.css
   (.lang-globe-wrapper:has(.lang-fan.open) .lang-active-flag), que já é
   compartilhado por esta tela também. Regra escopada removida daqui —
   redundante com a versão genérica, que produz o mesmo resultado. */

.login-body {
    background: #ffffff;
    padding: 32px 40px;
    text-align: center;
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 10px;
    color: #ffffff;
    font-size: 29px;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
}

.login-logo img {
    width: 47px;
    height: 47px;
    object-fit: contain;
}

h2 {
    color: var(--H2BGCor);
    font-size: 1.2rem;
    margin-bottom: 24px;
}

.error-message {
    background: #fdecea;
    color: #c62828;
    border: 1px solid #f5c6cb;
    border-radius: var(--InputBorderRadius);
    padding: 10px 14px;
    font-size: 0.875rem;
    margin-bottom: 16px;
    text-align: left;
}

form {
    text-align: left;
}

label {
    display: block;
    color: var(--LabelCor);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 4px;
    margin-top: 14px;
}

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: var(--InputBorder);
    border-radius: var(--InputBorderRadius);
    font-size: 0.95rem;
    transition: background-color 0.2s, border-color 0.2s;
    background-color: #fff;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
    background-color: var(--Input_Background_Cor_Ativo);
    border-color: var(--BtnCorHover);
    outline: none;
}

.password-container {
    position: relative;
}

.password-container input {
    padding-right: 40px;
}

/* Posicionamento absoluto com top/transform: o pai aqui (.password-container)
   não é flex, diferente do .senha-input-wrap em central.css — diferença
   intencional entre os dois arquivos, não duplicação a unificar. */
.toggle-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 0.9rem;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.toggle-eye:hover { color: var(--BtnCorHover); }

.senha-erros {
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
    min-height: 18px;
}

/* .senha-erro-item: movido para stdapp.css (valor unificado com central.css) */

.forgot-password {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--BtnCorHover);
    margin-top: 8px;
    text-decoration: none;
    font-weight: bold;
}

.forgot-password:hover {
    text-decoration: underline;
}

button[type="submit"] {
    display: block;
    margin: 22px auto 0;
    min-width: 150px;
    padding: var(--BtnPadding);
    background-color: var(--BtnCorPadrao);
    color: var(--BtnCorFontePadrao);
    border: var(--BtnBorder);
    border-radius: var(--BtnBorderRadius);
    cursor: var(--BtnCursor);
    font-size: var(--BtnFontSize);
    font-weight: var(--BtnFontWeight);
    letter-spacing: 0.5px;
    transition: background-color 0.2s;
}

button[type="submit"]:hover:not(:disabled) {
    background-color: var(--BtnCorHover);
}

button[type="submit"]:disabled {
    background-color: #9e9e9e;
    cursor: not-allowed;
}

/* Botão-link "Voltar ao Login" — mesmo visual do botão no painel de sucesso */
.btn-link-voltar {
    display: inline-flex;
    align-items: center;
    padding: var(--BtnPadding);
    background-color: rgba(75, 192, 192, 1);
    color: #ffffff;
    border: var(--BtnBorder);
    border-radius: var(--BtnBorderRadius);
    font-size: var(--BtnFontSize);
    font-weight: var(--BtnFontWeight);
    text-decoration: none;
    white-space: nowrap;
    margin-left: 0;
    transition: background-color 0.2s;
}

.btn-link-voltar:hover {
    background-color: rgba(55, 172, 172, 1);
    color: #ffffff;
    text-decoration: none;
}

/* Botões lado a lado em recuperar_senha.php */
.recuperar-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 32px;
}

.recuperar-btns button[type="submit"] {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

/* Informativo e política (tela atualizar senha) */
.msg-info {
    font-size: 0.875rem;
    color: #555;
    margin-bottom: 16px;
    line-height: 1.4;
    text-align: left;
}

/* .politica e .senha-feedback: movidos para stdapp.css (compartilhado com central.css) */

/* Responsivo */
@media (max-width: 480px) {
    .login-container {
        margin: 20px 16px;
    }
    .login-header {
        padding: 16px 20px;
    }
    .login-brand-band {
        padding: 8px 20px;
    }
    .login-lang-band {
        padding: 12px 20px;
    }
    .login-body {
        padding: 24px 20px;
    }

    /* Botões de recuperar-senha.php: empilhados, compactos e centralizados */
    .recuperar-btns {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .recuperar-btns .btn-link-voltar,
    .recuperar-btns button[type="submit"] {
        width: auto;
        max-width: 100%;
        min-width: 180px;
        text-align: center;
    }

    /* Botões "Voltar ao login" / "Criar conta" (cadastro): empilhados, compactos e centralizados */
    .login-btn-row {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .login-btn-row .btn-link-voltar,
    .login-btn-row button[type="submit"] {
        width: auto;
        max-width: 100%;
        min-width: 180px;
        text-align: center;
    }

    /* .btn-link-voltar já é inline-flex; align-items:center (base) mas sem
       justify-content — sem isso, ícone+texto ficam à esquerda dentro da
       largura maior do botão em mobile (mesmo ajuste feito em .btn-salvar-senha
       no resultado.css). button[type="submit"] não tem ícone, então
       text-align:center acima já resolve. */
    .login-btn-row .btn-link-voltar {
        justify-content: center;
    }

    /* Badge flutuante do reCAPTCHA (Google injeta .grecaptcha-badge fixo na
       viewport, fora do nosso HTML) — em telas pequenas o formulário de
       cadastro tem mais campos, então "Criar conta" fica mais perto do
       rodapé da tela, onde o badge padrão (bottom:70px, definido acima)
       ainda encosta nele. Empurrando mais para cima só neste breakpoint. */
    .grecaptcha-badge {
        bottom: 100px !important;
    }
}

.login-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.login-btn-row button[type="submit"] {
    margin: 0;
    white-space: nowrap;
}

.login-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.login-link {
    color: var(--BtnCorHover);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.login-link:hover {
    text-decoration: underline;
}

/* Modal de ajuda: movido para stdapp.css (compartilhado com central.css e questionario.css) */

/* Afasta o badge fixo do reCAPTCHA invisível (canto inferior direito, injetado pelo script do Google) do rodapé da tela. */
.grecaptcha-badge {
    bottom: 70px !important;
}