/* ============================================================================
 * auth.css — corpo das quatro páginas de autenticação
 * /login · /forgot-password · /signup · /reset-password
 *
 * Consolida, sem alterar um valor sequer, os quatro blocos <style> que hoje
 * vivem dentro dos templates. Esta folha nasce INERTE: nenhum template a linka
 * no commit que a cria. Enquanto ninguém a carregar, ela não pode desmontar
 * nada — e é isso que permite escrevê-la inteira antes de mexer nas páginas.
 *
 * POR QUE ISTO É CORPO, E NÃO DECORAÇÃO
 * O corpo destas páginas não é o bloco local: é `static/css/public.css` MAIS o
 * bloco local, e o local só prevalece porque carrega depois. Para o cartão, os
 * campos e a mensagem de erro o `public.css` tem regra viva e a local vence por
 * ordem; para o wrapper, o botão, o ícone e o olho da senha o `public.css` não
 * tem regra NENHUMA, e sem o bloco esses elementos caem no default do preflight
 * do Tailwind. Remover ou reordenar não degrada cor — desmonta a página.
 * Medido, não suposto: `Bugs/DT-UI-Corpo-Auth-Sustentado-Pelo-Style-Local.md`.
 *
 * POR QUE A FOLHA ENTRA NO `{% block head %}` E NÃO NO BASE PÚBLICO
 * Duas razões independentes, e basta uma.
 * 1. ORDEM. O base público traz `public.css` e `site.css` ANTES de abrir o
 *    bloco de cabeça. Como o corpo de auth precisa vencer o `public.css` por
 *    ordem de carga — é assim que vence hoje —, a folha tem de entrar DEPOIS
 *    dos dois, e o único ponto depois deles é o bloco de cabeça da página.
 * 2. ALCANCE. O base serve nove páginas, das quais só quatro são de auth.
 *    Linkar no base carregaria esta folha em /about, /pricing e nas do
 *    Observatório, que não têm nenhum destes seletores.
 *
 * REGRA DE TRANSCRIÇÃO — vale para quem for editar depois
 * Os valores aqui são cópia literal, inclusive onde divergem entre páginas sem
 * motivo aparente: o olho da senha do login tem 42px de recuo e 10px de
 * afastamento, os do cadastro e da redefinição têm 44px e 8px. Isso NÃO é para
 * ser harmonizado nesta frente. Uniformizar valor é redesign, e redesign muda
 * pixel — o gate desta frente é diff ZERO por propriedade computada.
 *
 * TOKENS SEM CONSUMIDOR
 * O `:root` abaixo é a união dos quatro blocos, e vários tokens seguem sem
 * consumidor: estas páginas resolvem cor por hexadecimal literal em quase tudo.
 * Ficam como estão — limpeza de token morto é frente própria. Só `--text-muted`
 * saiu, junto com o cromo, por ser o único consumido exclusivamente por ele.
 *
 * O QUE ESTA FOLHA NÃO CARREGA
 * As fontes. O `<link>` do Google Fonts continua em cada template, acima do
 * bloco de cabeça, e não entra aqui — não é CSS do corpo.
 * ==========================================================================*/

/* ── TOKENS ──
   União dos quatro blocos. É o `:root` de signup.html e reset_password.html,
   que são idênticos entre si e superconjunto do de login.html e
   forgot_password.html: os 7 tokens daqueles estão todos contidos aqui, com os
   MESMOS valores. Os 4 a mais — --navy-light, --aqua, --error e --font-mono —
   não têm consumidor em nenhuma das quatro páginas. */
:root {
  --navy: #00182A;
  --navy-light: #001F35;
  --sienna: #E76F51;
  --sienna-hover: #C95A3F;
  --aqua: #20C997;
  --text-white: #EDEDEF;
  --text-dim: #5A6478;
  --error: #EF4444;
  --font-ui: 'DM Sans', sans-serif;
  --font-brand: 'Manrope', sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* ── RESET ESCOPADO ──
   Regra idêntica nos quatro blocos; entra uma vez só. */
body { background: #00182A !important; color: #EDEDEF; font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }

/* ══════════════════════════════════════════════════════════════════════════
   LOGIN — /login
   3,25rem de topo, não os 9rem de antes: aqueles compensavam um cabeçalho
   `fixed` que não ocupava fluxo, e o cabeçalho canônico já reserva os 88px
   dele. Somados, davam 273px de vazio acima do cartão.
   ══════════════════════════════════════════════════════════════════════════ */
.login-wrap { max-width: 400px; margin: 0 auto; padding: 3.25rem 2rem 4rem; text-align: center; }
.login-icon { height: 64px; width: auto; display: block; margin: 0 auto 1.25rem; }
.login-sub { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: #9CA3AF; margin-bottom: 1.5rem; }
.login-form { background: #001F35; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.login-form label { display: block; font-size: .82rem; font-weight: 500; color: #8A94A6; margin-bottom: .4rem; }
.login-form input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: #00182A; color: #EDEDEF; font-size: .9rem; font-family: var(--font-ui); transition: all .15s; }
.login-form input::placeholder { color: #5A6478; }
.login-form input:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,.15); }
.login-error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 8px; padding: .75rem 1rem; font-size: .82rem; color: #EF4444; display: none; }
.login-btn { width: 100%; background: #E76F51; color: #FFFFFF; padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: filter .2s, transform .2s; display: inline-block; border: none; cursor: pointer; font-family: var(--font-ui); }
.login-btn:hover { filter: brightness(0.9); transform: translateY(-1px); }
.login-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; filter: none; }
.login-foot { font-size: .82rem; color: #5A6478; margin-top: 1.5rem; }
.login-foot a { color: #E76F51; text-decoration: none; font-weight: 500; }
.login-foot a:hover { filter: brightness(1.1); }
.login-version { font-size: .65rem; color: #5A6478; margin-top: .5rem; }
/* Rótulo com caixa de seleção (aceite dos Termos na conta da calculadora).
   `.login-form` no seletor para vencer `.login-form label` e `.login-form input`
   por especificidade, não por ordem: sem isto a caixa herdaria `width: 100%`. */
.login-form .login-check { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: 0; }
.login-form .login-check input { width: auto; padding: 0; margin-top: .15rem; }
.login-form a { color: #E76F51; }

/* ── Escolha de plano no cadastro da calculadora ──
   Dois cartões selecionáveis lado a lado dentro do fieldset; cada cartão é o
   <label> do radio. Reseta a moldura padrão do fieldset e trata a legenda como
   os demais rótulos do formulário (alinhada à esquerda). O cartão marcado ganha
   a borda e o fundo no acento `#E76F51`, o mesmo do botão "Criar conta".
   Container query no fieldset: empilha quando o formulário fica estreito
   (abaixo de ~400 px de largura). Os seletores levam `.login-form` para vencer
   `.login-form label`/`.login-form input` por especificidade, como `.login-check`. */
.login-plano { border: 0; padding: 0; margin: 0; min-inline-size: 0; container-type: inline-size; }
.login-plano legend { padding: 0; font-size: .82rem; font-weight: 500; color: #8A94A6; margin-bottom: .4rem; }
.login-plano-grade { display: flex; gap: .6rem; }
.login-form .login-plano-opcao {
  flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: 0; padding: .85rem; border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; background: #00182A; cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.login-form .login-plano-opcao input { width: auto; padding: 0; margin: .15rem 0 0; flex: none; accent-color: #E76F51; cursor: pointer; }
.login-plano-corpo { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.login-plano-titulo { font-size: .95rem; font-weight: 600; color: #EDEDEF; }
.login-plano-preco { font-size: .85rem; color: #EDEDEF; }
.login-plano-nota { font-size: .72rem; color: #8A94A6; line-height: 1.35; }
.login-plano-opcao:hover { border-color: rgba(231,111,81,.5); }
.login-plano-opcao:has(input:checked) { border-color: #E76F51; background: rgba(231,111,81,.1); }
.login-plano-opcao:has(input:focus-visible) { outline: 2px solid #E76F51; outline-offset: 2px; }
@container (max-width: 340px) { .login-plano-grade { flex-direction: column; } }

/* Responsivo do corpo — só a folga de topo: em tela estreita a barra ocupa
   proporcionalmente muito mais, e o cartão precisa começar antes. Declarado
   como `padding-top` e não como atalho para não mexer nas laterais nem na
   base, que não são desta frente. */
@media (max-width: 640px) {
  .login-wrap { padding-top: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ESQUECI MINHA SENHA — /forgot-password
   Mesmo raciocínio de topo do login; aqui os 9rem antigos somavam 323px de
   vazio acima do cartão.
   ══════════════════════════════════════════════════════════════════════════ */
.forgot-wrap { max-width: 400px; margin: 0 auto; padding: 3.25rem 2rem 4rem; text-align: center; }
.forgot-icon { height: 64px; width: auto; display: block; margin: 0 auto 1.25rem; }
.forgot-title { font-family: var(--font-brand); font-size: 1.75rem; font-weight: 800; color: #EDEDEF; margin-bottom: .5rem; }
.forgot-sub { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: #9CA3AF; margin-bottom: 1.5rem; }
.forgot-form { background: #001F35; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.forgot-form label { display: block; font-size: .82rem; font-weight: 500; color: #8A94A6; margin-bottom: .4rem; }
.forgot-form input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: #00182A; color: #EDEDEF; font-size: .9rem; font-family: var(--font-ui); transition: all .15s; }
.forgot-form input::placeholder { color: #5A6478; }
.forgot-form input:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,.15); }
.forgot-error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 8px; padding: .75rem 1rem; font-size: .82rem; color: #EF4444; display: none; }
.forgot-success { background: rgba(32,201,151,.08); border: 1px solid rgba(32,201,151,.3); border-radius: 8px; padding: .75rem 1rem; font-size: .85rem; color: #20C997; display: none; }
.forgot-btn { width: 100%; background: #E76F51; color: #FFFFFF; padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: filter .2s, transform .2s; display: inline-block; border: none; cursor: pointer; font-family: var(--font-ui); }
.forgot-btn:hover { filter: brightness(0.9); transform: translateY(-1px); }
.forgot-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; filter: none; }
.forgot-foot { font-size: .82rem; color: #5A6478; margin-top: 1.5rem; }
.forgot-foot a { color: #E76F51; text-decoration: none; font-weight: 500; }
.forgot-foot a:hover { filter: brightness(1.1); }

@media (max-width: 640px) {
  .forgot-wrap { padding-top: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CADASTRO — /signup
   Os 9rem antigos somavam 256px de vazio acima do cartão.
   O bloco do olho da senha e o do checklist NÃO estão aqui: são compartilhados
   com a redefinição e vivem nas seções COMPARTILHADOS e DIVERGENTES, no fim.
   ══════════════════════════════════════════════════════════════════════════ */
.signup-container { max-width: 480px; margin: 0 auto; padding: 3.25rem 2rem 2rem; text-align: center; }
.signup-container h1 { font-family: var(--font-brand); font-weight: 800; font-size: 2rem; line-height: 1.2; letter-spacing: -.025em; margin-bottom: .5rem; color: #EDEDEF; }
.signup-container .sub { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: #9CA3AF; margin-bottom: 1.5rem; }
.signup-form { background: #001F35; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.signup-form .form-group { display: flex; flex-direction: column; }
.signup-form label { display: block; font-size: .82rem; font-weight: 500; color: #8A94A6; margin-bottom: .4rem; font-family: var(--font-ui); }
.signup-form input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: #00182A; color: #EDEDEF; font-size: .9rem; font-family: var(--font-ui); transition: all .15s; }
.signup-form input::placeholder { color: #5A6478; }
.signup-form input:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,.15); }
.signup-error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 8px; padding: .75rem 1rem; font-size: .82rem; color: #EF4444; display: none; margin-bottom: 1rem; text-align: left; }
.signup-btn { width: 100%; background: #E76F51; color: #FFFFFF; padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: filter .2s, transform .2s; display: inline-block; border: none; cursor: pointer; font-family: var(--font-ui); text-align: center; margin-top: .5rem; }
.signup-btn:hover { filter: brightness(0.9); transform: translateY(-1px); }
.signup-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; filter: none; }
.signup-note { font-size: .78rem; color: #5A6478; margin-top: 1.25rem; text-align: center; font-family: var(--font-ui); }
.signup-note a { color: #E76F51; text-decoration: none; font-weight: 500; }
.signup-note a:hover { filter: brightness(1.1); }

@media (max-width: 640px) {
  .signup-container { padding: 1.5rem 1.2rem 3rem; }
  .signup-form { padding: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REDEFINIR SENHA — /reset-password
   Os 9rem antigos somavam 200px de vazio acima do título.
   Mesma exceção do cadastro: olho da senha e checklist estão no fim.
   ══════════════════════════════════════════════════════════════════════════ */
.reset-container { max-width: 480px; margin: 0 auto; padding: 3.25rem 2rem 2rem; text-align: center; }
.reset-container h1 { font-family: var(--font-brand); font-weight: 800; font-size: 2rem; line-height: 1.2; letter-spacing: -.025em; margin-bottom: .5rem; color: #EDEDEF; }
.reset-sub { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: #9CA3AF; margin-bottom: 1.5rem; }
.reset-form { background: #001F35; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.reset-form .form-group { display: flex; flex-direction: column; }
.reset-form label { display: block; font-size: .82rem; font-weight: 500; color: #8A94A6; margin-bottom: .4rem; font-family: var(--font-ui); }
.reset-form input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: #00182A; color: #EDEDEF; font-size: .9rem; font-family: var(--font-ui); transition: all .15s; }
.reset-form input::placeholder { color: #5A6478; }
.reset-form input:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,.15); }
.reset-error { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 8px; padding: .75rem 1rem; font-size: .82rem; color: #EF4444; display: none; margin-bottom: 1rem; text-align: left; }
.reset-success { background: rgba(32,201,151,.08); border: 1px solid rgba(32,201,151,.3); border-radius: 8px; padding: .75rem 1rem; font-size: .85rem; color: #20C997; display: none; margin-bottom: 1rem; text-align: left; }
.reset-invalid-token { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 8px; padding: 1.25rem 1.5rem; font-size: .9rem; color: #EF4444; text-align: center; }
.reset-invalid-token a { color: #E76F51; text-decoration: none; font-weight: 500; }
.reset-invalid-token a:hover { filter: brightness(1.1); }
.reset-btn { width: 100%; background: #E76F51; color: #FFFFFF; padding: 14px 32px; border-radius: 8px; font-weight: 600; font-size: .95rem; text-decoration: none; transition: filter .2s, transform .2s; display: inline-block; border: none; cursor: pointer; font-family: var(--font-ui); text-align: center; margin-top: .5rem; }
.reset-btn:hover { filter: brightness(0.9); transform: translateY(-1px); }
.reset-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; filter: none; }
.reset-foot { font-size: .82rem; color: #5A6478; margin-top: 1.25rem; text-align: center; }
.reset-foot a { color: #E76F51; text-decoration: none; font-weight: 500; }
.reset-foot a:hover { filter: brightness(1.1); }

@media (max-width: 640px) {
  .reset-container { padding: 1.5rem 1.2rem 3rem; }
  .reset-form { padding: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPARTILHADOS — sem escopo
   Declarações idênticas caractere a caractere entre as páginas que as têm.
   `.form-error` e o checklist existem em /signup e /reset-password;
   `.password-wrapper` existe também em /login.
   ══════════════════════════════════════════════════════════════════════════ */
.form-error { display: none; font-size: .75rem; color: #EF4444; margin-top: .35rem; font-family: var(--font-ui); }

.password-wrapper {
    position: relative;
}

/* O checklist de senha é idêntico em /signup e /reset-password.
   `li.valid` não existe em markup nenhum: é aplicada em runtime pelo JS. Se a
   regra se perder, o checklist para de colorir e a medição estática do estado
   inicial passa VERDE — por isso o instrumento de A/B força a classe. */
.password-checklist {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
    font-size: .8rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.password-checklist li {
    color: var(--text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .2s;
}

.password-checklist li .check-icon {
    display: inline-block;
    width: 14px;
    text-align: center;
    font-weight: 700;
    color: #C84B36;
    transition: color .2s;
}

.password-checklist li.valid {
    color: #EDEDEF;
}

.password-checklist li.valid .check-icon {
    color: #4ADE80;
}

/* ══════════════════════════════════════════════════════════════════════════
   DIVERGENTES — escopados pelo wrapper de primeiro nível
   O olho da senha diverge entre /login e as duas outras. Os valores ficam como
   estão: harmonizar é redesign, e o gate desta frente é diff ZERO.
   O escopo é o wrapper de primeiro nível, NUNCA `.form-group`: em /login o
   campo de senha está num `<div>` sem classe, e uma regra ancorada em
   `.form-group` não o alcançaria.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- /login --- */
.login-wrap .password-wrapper input { padding-right: 42px; }

.login-wrap .password-toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; padding: 6px; cursor: pointer;
  color: rgba(237, 237, 239, 0.55);
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.login-wrap .password-toggle:hover { color: #EDEDEF; }
.login-wrap .password-toggle:focus-visible { outline: 2px solid #E76F51; outline-offset: 1px; color: #EDEDEF; }

/* --- /signup e /reset-password --- */
.signup-container .password-wrapper input,
.reset-container .password-wrapper input {
    padding-right: 44px;
}

.signup-container .password-toggle,
.reset-container .password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color .15s, background .15s;
}

.signup-container .password-toggle:hover,
.reset-container .password-toggle:hover {
    color: #EDEDEF;
    background: rgba(255,255,255,.05);
}

.signup-container .password-toggle:focus-visible,
.reset-container .password-toggle:focus-visible {
    outline: 2px solid #E76F51;
    outline-offset: 1px;
}