/* ── A APARÊNCIA DA TELA DE ENTRADA (José, 28/08/2026) ──────────────────────
 *
 *   "Foco no visual, todo o resto é nosso."
 *   "qualquer elemento visual que você usar de lá, não deixe apenas na pasta
 *    de lá, traga para a nossa, assim evitamos que uma mudança lá toque na
 *    nossa página."
 *
 * ⚠ CÓPIA LOCAL, DE PROPÓSITO. O desenho veio da homologação
 * (homolog.saaseduca.com.br/fda-entrar.css), mas o arquivo é NOSSO a partir
 * daqui: nada nesta tela busca nada de lá. Se aquele servidor mudar, sumir ou
 * cair, esta tela não sente. O preço é que uma melhoria de lá não chega
 * sozinha — e é o preço certo para a porta de entrada de 1.273 alunos.
 *
 * ⚠ AS 16 VARIÁVEIS ABAIXO vinham do `fda-tokens.css` de lá, que NÃO trouxemos
 * (ele carrega o tema inteiro e brigaria com os nossos quatro temas, que moram
 * no `layout.php`). Então só o necessário foi trazido, e ESCOPADO em `.porta`:
 * assim nenhuma outra tela da casa herda espaçamento ou raio de outro sistema.
 * Treze vieram medidas do arquivo dele; três não existiam lá e estão marcadas.
 */
.porta {
  --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;
  --r-caixa:12px; --r-ctrl:8px; --r-pilula:999px;
  --t-micro:12px; --t-meta:13px; --t-corpo:15px; --t-forte:17px;

  /* estas três não estavam no tokens dele — derivadas das nossas cores */
  --rubro-txt:#F08A7E;              /* vermelho legível sobre fundo escuro;
                                       o nosso --rubro (#8C1C13) some no preto */
  --desvio:14px;                    /* já tem fallback no próprio CSS */
  --ic-aviso:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F08A7E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E");
}

/* ===========================================================================
   fda-entrar.css — a fachada da forja.

   A tela de entrar era um cartão de `max-width:420px` encostado no canto
   superior esquerdo de uma tela de 1440x900, com tudo terminando a 311px do
   fim da dobra. E vinha com o cabeçalho
   INTERNO do sistema em cima (logo clicável, "← Voltar"), que é navegação de
   quem já entrou — para quem está do lado de fora, é enfeite que ocupa a faixa
   mais valiosa da página.

   Esta folha desenha a porta: metade marca, metade acesso. Não é enfeite —
   é o que essa tela precisa carregar, e que hoje não cabia em lugar nenhum:

     · quem entra aqui (equipe e aluno usam a MESMA porta, e ninguém dizia isso);
     · as duas saídas de quem não consegue entrar, com o mesmo peso visual —
       52% dos alunos NÃO têm e-mail cadastrado, então o WhatsApp da secretaria
       não é o plano B, é o único plano da maioria;
     · a entrada pelo celular, que era um link de 12px sublinhado.

   ⚠ NADA DE COR NOVA. Tudo sai dos tokens das quatro paletas (fda-layout.css)
   e das escalas (fda-tokens.css). A tela funciona em qualquer tema porque não
   escreve um valor de cor sequer — pela mesma razão que o painel de gestão
   declara a própria escala de DADO e não toca na de MARCA.

   Carregada só por /entrar (e por /esqueci, se um dia usar a mesma porta).
   =========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   1 · A CASCA
   `pagina_inicio(..., $porta = true)` já não imprime o <header>, mas o
   `<div class="corpo">` e o `<main class="miolo">` continuam abrindo — é o que
   mantém o `pagina_fim()` fechando as mesmas duas tags de sempre. Aqui só se
   desfaz o recuo e o teto de 1120px que valem para tela de DENTRO.
   ═══════════════════════════════════════════════════════════════════════════ */
body.porta{ overflow-x:hidden }
body.porta .corpo{ max-width:none; display:block }
body.porta .miolo{ max-width:none; margin:0; padding:0; animation:none }

.porta-tela{
  display:grid;
  grid-template-columns:1fr;
  min-height:100vh;
  min-height:100dvh;   /* no celular, a barra do navegador não corta a tela */
}

/* ═══════════════════════════════════════════════════════════════════════════
   2 · A METADE DA MARCA
   Só existe a partir de 1000px. Abaixo disso a mesma matéria vira uma tarja
   curta no topo: no celular, área nobre gasta com atmosfera é área roubada do
   formulário — e é no celular que a maioria dos 1.269 alunos entra.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠ GRADE DE DUAS FAIXAS, E NÃO `space-between` (medido em 4 larguras, 27/08).
   Com três irmãos soltos num `space-between`, a logo colava no topo e o vazio
   entre ela e o título CRESCIA com a tela: 257px em 1440x900, 346px em 1080 de
   altura. E o conteúdo ficava grudado na borda esquerda — em 2560px o título
   começava a 72px da esquerda e sobravam 790px de nada à direita.

   Agora são duas faixas: a de cima toma o espaço que sobrar e centraliza o
   dito nela; a de baixo é do rodapé. As duas dividem a MESMA coluna de 540px,
   centrada na metade — é o que faz o conjunto ficar composto em vez de
   encostado, em qualquer largura. O fundo continua sangrando de ponta a ponta:
   quem se centraliza é o CONTEÚDO, não a atmosfera. */
.porta-marca{
  display:none;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:var(--e7) clamp(var(--e6),5vw,72px);
  grid-template-rows:1fr auto;
  justify-items:center;
  row-gap:var(--e6);
}
.porta-dito{ align-self:center; width:100%; max-width:540px }
.porta-dito > .porta-logo{ margin-bottom:var(--e6) }

/* A brasa do fundo. Duas manchas de calor, uma quente embaixo e uma dourada
   ao alto — as mesmas duas do <body>, mas concentradas e mais fortes, porque
   aqui elas são o assunto e não o pano de fundo. */
.porta-marca::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background:
    /* A VINHETA vem primeiro porque é a camada de cima: sem ela a brasa se
       espalha até os quatro cantos e o painel fica com brilho de tela, não com
       luz de oficina. Ela também é o que segura o contraste do título — a
       tinta clara cai justamente sobre a parte mais escurecida. */
    radial-gradient(132% 108% at 26% 68%, transparent 44%, rgba(0,0,0,.40) 100%),
    /* O FEIXE. Uma faixa de luz atravessando de cima à direita, como a janela
       alta de um galpão. É o que dá profundidade à metade de cima, que era
       preto liso. */
    linear-gradient(203deg, rgba(var(--liq-tint),.055) 0%, transparent 46%),
    /* AS BRASAS. A forte embaixo à esquerda (a boca da forja), uma que lambe a
       costura à direita, e duas fracas para o preto nunca ficar chapado. */
    radial-gradient(86% 58% at 18% 106%, rgba(var(--liq-acento),.44), transparent 66%),
    radial-gradient(52% 62% at 104% 62%, rgba(var(--liq-acento),.18), transparent 62%),
    radial-gradient(60% 46% at 88% -10%, rgba(var(--liq-acento),.17), transparent 64%),
    radial-gradient(46% 38% at 6% 10%,   rgba(var(--liq-acento),.08), transparent 70%);
}

/* O FOLE. A brasa de uma forja não fica parada — ela respira quando o fole
   sopra. É a única animação grande da tela: 14 segundos, e a diferença entre
   o pico e o vale é pequena de propósito. Quem olhar de frente vai reparar;
   quem estiver digitando a senha, não. */
.porta-marca::after{
  content:"";
  position:absolute; z-index:-1;
  left:-30%; right:2%; bottom:-50%;
  height:92%;
  background:radial-gradient(closest-side, rgba(var(--liq-acento),.72), transparent 72%);
  filter:blur(34px);
  opacity:.62;
  animation:porta-fole 14s ease-in-out infinite;
}
@keyframes porta-fole{
  0%,100%{ opacity:.50; transform:scale(1)      translateY(0)    }
  50%    { opacity:.82; transform:scale(1.055)  translateY(-12px) }
}

/* AS FAGULHAS. Doze pontos que sobem e apagam. É o nome da escola desenhado
   com o que já existe — não é partícula por partícula ser bonito. Ficam
   pequenas (2px), lentas (11 a 19s) e translúcidas: atmosfera, não confete.
   Uma camada só, sem JavaScript, sem imagem, sem biblioteca. */
.porta-fagulhas{ position:absolute; inset:0; z-index:-1; pointer-events:none }
.porta-fagulhas::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.porta-fagulhas i{
  position:absolute; bottom:-24px;
  width:2px; height:2px; border-radius:50%;
  background:var(--incandescente);
  box-shadow:0 0 6px 1px rgba(var(--liq-acento),.65);
  opacity:0;
  animation:porta-sobe linear infinite;
}
@keyframes porta-sobe{
  0%       { opacity:0;   transform:translate3d(0,0,0) scale(.7) }
  12%      { opacity:.75 }
  70%      { opacity:.45 }
  100%     { opacity:0;   transform:translate3d(var(--desvio,14px),-88vh,0) scale(.35) }
}
/* Doze regras em vez de doze `style=` no HTML: a página fica limpa e o
   navegador guarda isto em cache junto com o resto da folha. */
.porta-fagulhas i:nth-child(1) { left: 8%; --desvio: 26px; animation-duration:14s; animation-delay:  0s }
.porta-fagulhas i:nth-child(2) { left:16%; --desvio:-18px; animation-duration:18s; animation-delay:2.4s }
.porta-fagulhas i:nth-child(3) { left:23%; --desvio: 34px; animation-duration:12s; animation-delay:6.1s; width:3px; height:3px }
.porta-fagulhas i:nth-child(4) { left:31%; --desvio:-30px; animation-duration:17s; animation-delay:1.2s }
.porta-fagulhas i:nth-child(5) { left:39%; --desvio: 12px; animation-duration:15s; animation-delay:8.7s }
.porta-fagulhas i:nth-child(6) { left:46%; --desvio: 40px; animation-duration:19s; animation-delay:4.3s }
.porta-fagulhas i:nth-child(7) { left:54%; --desvio:-22px; animation-duration:13s; animation-delay:10.5s }
.porta-fagulhas i:nth-child(8) { left:62%; --desvio: 28px; animation-duration:16s; animation-delay:3.1s; width:3px; height:3px }
.porta-fagulhas i:nth-child(9) { left:71%; --desvio:-14px; animation-duration:11s; animation-delay:7.8s }
.porta-fagulhas i:nth-child(10){ left:79%; --desvio: 32px; animation-duration:18s; animation-delay:5.6s }
.porta-fagulhas i:nth-child(11){ left:87%; --desvio:-26px; animation-duration:15s; animation-delay:12.2s }
.porta-fagulhas i:nth-child(12){ left:94%; --desvio: 18px; animation-duration:13s; animation-delay:9.4s }

/* A COSTURA DE METAL QUENTE entre as duas metades. É a assinatura da marca —
   o mesmo degradê rubro→brasa→incandescente→ouro da página pública — em 1px,
   com um brilho de 40px por trás. Substitui a borda cinza que separaria as
   colunas: uma linha que já diz de que casa é a tela. */
.porta-costura{
  position:absolute; top:0; bottom:0; right:-1px; width:1px; z-index:1;
  background:linear-gradient(180deg,
    transparent, var(--rubro) 14%, var(--brasa) 38%,
    var(--incandescente) 62%, var(--ouro) 82%, transparent);
}
.porta-costura::after{
  content:""; position:absolute; inset:-1px -20px;
  background:linear-gradient(180deg, transparent, rgba(var(--liq-acento),.22) 40%, transparent);
  filter:blur(14px);
}

/* ── conteúdo da metade da marca ─────────────────────────────────────────── */
.porta-logo{ display:block; width:clamp(150px,15vw,190px); height:auto }
.porta-titulo{
  font-family:var(--display);
  font-size:clamp(34px,3.4vw,50px);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.022em;
  text-wrap:balance;
  color:var(--osso);
  margin:0 0 var(--e4);
  max-width:15ch;
}
.porta-titulo b{ font-weight:700; color:var(--incandescente) }
.porta-linha{
  margin:0; max-width:44ch;
  color:var(--cinza-claro);
  font-size:var(--t-forte);
  line-height:1.55;
}

/* QUEM ENTRA AQUI. O sistema tem uma porta só para equipe e aluno — o próprio
   `entrar.php` descobre qual é qual pelo CPF — e a tela nunca dizia isso. Quem
   é da equipe chegava aqui procurando "área do professor" e não achava. */
.porta-publicos{ list-style:none; margin:var(--e5) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:var(--e2) }
.porta-publicos li{
  display:inline-flex; align-items:center; gap:var(--e2);
  padding:7px 14px 7px 11px;
  border:1px solid rgba(var(--liq-tint),.16);
  border-radius:var(--r-pilula);
  background:rgba(var(--liq-tint),.05);
  color:var(--cinza-claro);
  font-size:var(--t-meta);
  line-height:1.3;
}
.porta-publicos svg{ width:15px; height:15px; flex:none; color:var(--incandescente) }
/* ⚠ ESTA LINHA CAI EM CIMA DA BRASA, que é a parte mais clara do painel — e
   a brasa ainda RESPIRA. Medida com `--cinza` sobre o fundo pintado dava 4,69:1
   no pico do fole: passa, mas sem folga nenhuma para o dia em que alguém
   aumentar o brilho. `--cinza-claro` sobe para 8,1:1 e encerra o assunto. */
.porta-rodape{ margin:0; width:100%; max-width:540px;
                color:var(--cinza-claro); font-size:var(--t-micro); line-height:1.6 }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · A METADE DO ACESSO
   ═══════════════════════════════════════════════════════════════════════════ */
.porta-acesso{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--e6) var(--e5) var(--e7);
  min-width:0;
}
.porta-caixa{
  width:100%; max-width:400px;
  animation:porta-entra .42s cubic-bezier(.22,.68,.24,1.01) both;
}
@keyframes porta-entra{
  from{ opacity:0; transform:translateY(12px) }
  to  { opacity:1; transform:none }
}

/* A tarja da marca no celular: logo + nome, e a mesma costura quente virada
   na horizontal. Some no computador, onde a metade da esquerda faz o serviço. */
.porta-tarja{
  display:flex; align-items:center; gap:var(--e3);
  padding-bottom:var(--e5); margin-bottom:var(--e5);
  border-bottom:1px solid rgba(var(--liq-tint),.12);
  position:relative;
}
.porta-tarja::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:64px;
  background:linear-gradient(90deg, var(--brasa), var(--incandescente), transparent);
}
.porta-tarja img{ width:112px; height:auto; flex:none }

.porta-olho{
  margin:0 0 var(--e2);
  font-size:var(--t-micro); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--incandescente);
}
/* O h1 do sistema é caixa-alta gravada em fonte de display; aqui ele é a
   primeira palavra que a pessoa lê na casa, e uma palavra só ("Entrar") em
   caixa-alta esticada fica gritada. */
.porta-caixa h1{
  font-family:var(--display);
  font-size:clamp(30px,4.6vw,38px); font-weight:700;
  text-transform:none; letter-spacing:-.022em; line-height:1.08;
  color:var(--osso); margin:0 0 var(--e2);
}
.porta-diz{ margin:0 0 var(--e5); color:var(--cinza-claro); font-size:var(--t-corpo); line-height:1.55 }
/* Dizer a MESMA frase duas vezes na mesma tela, a 30cm de distância uma da
   outra, não informa — ocupa. Na tela grande a metade da marca faz o serviço;
   no celular, onde ela não existe, esta é a única que diz para quem é a porta.
   Vale só para o eco: a instrução dos outros passos é única e sempre aparece. */
@media (min-width:1000px){
  .porta-diz-eco{ display:none }
  /* sem a linha de eco, o título encostaria no rótulo do primeiro campo */
  .porta-caixa h1{ margin-bottom:var(--e6) }
}

/* ── AVISOS ──────────────────────────────────────────────────────────────── */
/* `.erro` e `.aviso-*` são a família da casa (ícone + tinta por papel); aqui
   elas só encostam no formulário e ganham o recuo da tela. */
.porta-caixa .erro,
.porta-caixa .aviso,
.porta-caixa .ok{ margin:0 0 var(--e4) }

/* AS DUAS SAÍDAS, quando a pessoa erra 3 vezes ou bate no muro. Era uma caixa
   VERDE (`.ok`) dizendo "não consegue entrar?" — verde é o que deu certo. E os
   dois caminhos vinham como parágrafo corrido, com o do WhatsApp em letra
   miúda no fim. Agora são duas ações do mesmo tamanho, cada uma com a linha
   que diz PARA QUEM ela funciona: das 40 pessoas que chegaram a 4+ tentativas
   em 35 dias, 15 tinham e-mail, 2 não tinham, e 23 digitavam um CPF que não é
   de ninguém — para essas, nenhuma senha nova resolve. */
.porta-socorro{
  border:1px solid rgba(var(--liq-tint),.18);
  border-left:3px solid var(--incandescente);
  border-radius:var(--r-caixa);
  background:rgba(var(--liq-tint),.05);
  padding:var(--e4);
  margin:0 0 var(--e4);
}
.porta-socorro > p{ margin:0 0 10px; color:var(--osso); font-size:var(--t-corpo); font-weight:600 }
.porta-saidas{ display:grid; gap:var(--e2) }
.porta-saida{
  display:flex; align-items:flex-start; gap:var(--e3);
  padding:11px var(--e3);
  border:1px solid rgba(var(--liq-tint),.16);
  border-radius:var(--r-ctrl);
  background:rgba(var(--liq-tint),.04);
  color:var(--osso); text-decoration:none;
  transition:border-color .18s, background .18s, transform .18s;
}
.porta-saida:hover,.porta-saida:focus-visible{
  border-color:rgba(var(--liq-acento),.55);
  background:rgba(var(--liq-acento),.10);
  color:var(--osso);
  transform:translateX(2px);
}
.porta-saida svg{ width:19px; height:19px; flex:none; margin-top:2px; color:var(--incandescente) }
.porta-saida b{ display:block; font-size:var(--t-corpo); font-weight:600; line-height:1.35 }
.porta-saida span{ display:block; margin-top:3px; color:var(--cinza); font-size:var(--t-micro); line-height:1.45 }

/* ── O FORMULÁRIO ────────────────────────────────────────────────────────── */
/* Sem `.cartao`: a caixa dentro da caixa não acrescenta nada quando a página
   inteira já é o formulário. Some a moldura, sobra o conteúdo. */
.porta-form{ margin:0 }
.porta-campo{ margin-bottom:var(--e4) }
.porta-campo-fim{ margin-bottom:0 }
.porta-campo > label{ margin:0 0 6px }
.porta-campo input{
  border-radius:var(--r-ctrl);
  padding:13px 14px;
  font-size:16px;   /* 16px trava o zoom automático do iOS ao focar o campo */
}
.porta-campo input::placeholder{ color:var(--cinza); opacity:.75 }

/* O rótulo à ESQUERDA e o atalho à DIREITA, na mesma linha. O "esqueci a
   senha" morava 4 blocos abaixo do botão Entrar, no meio de uma frase corrida
   com outros 5 links — o lugar dele é ao lado do campo que a pessoa não
   consegue preencher.

   ⚠ É GRADE, E NÃO UMA LINHA DE FLEX, POR CAUSA DO TAB. Escrito no HTML na
   ordem em que se vê (rótulo, link, campo), o link entrava na tabulação ENTRE
   o CPF e a senha. A grade deixa o HTML na ordem em que se USA — campo, depois
   link — e ainda assim desenha os dois lado a lado. Ordem visual e ordem de
   teclado são duas coisas, e quem manda na segunda é o HTML. */
.porta-senha{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  column-gap:var(--e3);
}
.porta-senha > label      { grid-area:1/1/2/2 }
.porta-senha > .porta-esqueci{ grid-area:1/2/2/3; justify-self:end }
.porta-senha > .porta-cx  { grid-area:2/1/3/3 }
.porta-senha > .porta-capslock{ grid-area:3/1/4/3 }
.porta-esqueci{
  font-size:var(--t-micro); color:var(--cinza-claro);
  text-decoration:none; border-bottom:1px solid rgba(var(--liq-tint),.28);
  padding-bottom:1px; white-space:nowrap;
}
.porta-esqueci:hover,.porta-esqueci:focus-visible{ color:var(--incandescente); border-bottom-color:var(--incandescente) }

/* O AVISO DO CAMPO. Fica colado no campo que ele critica — não lá em cima, no
   lugar do erro do servidor: erro de digitação se conserta olhando para o
   próprio campo, e um recado a 200px dali obriga a pessoa a procurar de qual
   dos dois ele fala.

   ⚠ O `[hidden]` PRECISA ESTAR ESCRITO. O atributo `hidden` do navegador vale
   `display:none`, mas PERDE para qualquer `display` que a gente declare — e
   aqui declaramos `flex`. É a mesma pegadinha que o `.btn[hidden]` do layout
   já teve de resolver. */
.porta-aviso-campo{
  display:flex; align-items:flex-start; gap:6px;
  margin:7px 0 0;
  color:var(--rubro-txt);
  font-size:var(--t-micro); line-height:1.45;
}
.porta-aviso-campo[hidden]{ display:none }
.porta-aviso-campo::before{
  content:""; flex:none; width:14px; height:14px; margin-top:1px;
  background:currentColor;
  -webkit-mask:var(--ic-aviso) center/contain no-repeat;
          mask:var(--ic-aviso) center/contain no-repeat;
}
:root{
  --ic-aviso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E");
}
/* A borda do campo acompanha o aviso — cor E espessura, porque quem não separa
   o vermelho do cinza precisa de um segundo sinal. */
.porta-campo input[aria-invalid="true"]{
  border-color:var(--rubro-txt);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--rubro-txt) 22%,transparent);
}

/* O BOTÃO ENQUANTO VAI. Trava e muda de rótulo — mas mantém a cor de sempre:
   `disabled` acinzentado aqui leria como "deu errado, o botão morreu", e o que
   está acontecendo é o contrário. */
.porta-entrar:disabled{ opacity:.82; cursor:progress }

/* MOSTRAR A SENHA. A tela onde mais gente falha no sistema (23 pessoas-dia
   bateram no muro de 6 tentativas em 35 dias) não tinha como conferir o que
   foi digitado. É um <button>, não um ícone clicável: entra na tabulação,
   anuncia o estado em `aria-pressed` e não rouba o foco do campo. */
.porta-cx{ position:relative }
.porta-cx input{ padding-right:52px }
.porta-olhinho{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0;
  background:none; border:0; border-radius:var(--r-ctrl);
  color:var(--cinza-claro); cursor:pointer;
  transition:color .18s, background .18s;
}
.porta-olhinho:hover{ color:var(--osso); background:rgba(var(--liq-tint),.08) }
.porta-olhinho svg{ width:20px; height:20px }
/* No dedo o alvo do olhinho cresce para os 44px da casa: ele não é `.btn`, e
   por isso a regra de `@media (pointer:coarse)` da folha de tokens não o pega. */
@media (pointer:coarse){ .porta-olhinho{ width:44px; height:44px } .porta-cx input{ padding-right:56px } }
.porta-olhinho .porta-olho-off{ display:none }
.porta-olhinho[aria-pressed="true"] .porta-olho-on { display:none }
.porta-olhinho[aria-pressed="true"] .porta-olho-off{ display:block }

/* CAPS LOCK. Metade dos "CPF ou senha incorretos" de um sistema qualquer é
   isto, e o navegador não avisa. Aparece só quando a tecla está presa e o
   cursor está no campo da senha. `role="status"` para o leitor de tela
   anunciar sem interromper a digitação. */
.porta-capslock{
  display:none;
  align-items:center; gap:7px;
  margin-top:7px;
  color:var(--incandescente);
  font-size:var(--t-micro); line-height:1.4;
}
.porta-capslock[data-ligado="1"]{ display:flex }
.porta-capslock svg{ width:14px; height:14px; flex:none }

.porta-lembrar{
  display:flex; align-items:flex-start; gap:var(--e2);
  margin:var(--e4) 0 0;
  font-weight:400; text-transform:none; letter-spacing:0;
  color:var(--cinza-claro); font-size:var(--t-meta); line-height:1.45;
  cursor:pointer;
}
.porta-lembrar input{ width:auto; margin:1px 0 0; flex:none }

/* O botão ocupa a largura toda: é a única ação primária da tela, e num
   formulário de dois campos não há dúvida sobre o que ele faz. */
/* ⚠ TAMANHO E RAIO SÃO DA CASA, E NÃO SE DISPUTA (medido, 27/08). Escrever
   `font-size` e `border-radius` aqui não faz efeito: `body.tema-liquid-eagles
   .btn` tem dois seletores de classe e vence esta regra de um. E está certo
   que vença — a pílula de 14px é a assinatura do tema em TODOS os botões do
   sistema, e o botão da porta virar o único quadrado seria a tela destoar da
   casa que ela abre. O que muda aqui é o que o tema não decide: largura,
   altura de alvo e o brilho de brasa por baixo. */
.porta-entrar{
  width:100%;
  margin-top:var(--e5);
  min-height:50px;
  box-shadow:0 1px 0 rgba(var(--liq-tint),.22) inset, 0 6px 20px -6px rgba(var(--liq-acento),.55);
}
.porta-entrar:hover:not(:disabled){ box-shadow:0 1px 0 rgba(var(--liq-tint),.28) inset, 0 8px 26px -6px rgba(var(--liq-acento),.7) }

/* ── O OUTRO CAMINHO ─────────────────────────────────────────────────────── */
/* "Entrar pelo celular" é uma entrada SEM SENHA — o recurso mais moderno desta
   tela — e vivia como link sublinhado de 12px embaixo do formulário, com a
   mesma aparência do "matricule-se". Separado por um "ou", vira o que é: a
   segunda porta. */
.porta-ou{
  display:flex; align-items:center; gap:var(--e3);
  margin:var(--e5) 0;
  color:var(--cinza); font-size:var(--t-micro);
  letter-spacing:.12em; text-transform:uppercase;
}
.porta-ou::before,.porta-ou::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(var(--liq-tint),.20), transparent);
}
/* O cartão do segundo caminho fica um passo mais discreto que os do socorro:
   ele é uma OPÇÃO, e eles são a saída de quem está preso. */
.porta-ou + .porta-saida{ background:transparent }

/* ── O RODAPÉ DA TELA ────────────────────────────────────────────────────── */
/* Eram três parágrafos de 12px com SEIS links sublinhados, misturando dois
   assuntos que nada têm a ver: "não consigo entrar" e "ainda não tenho conta".
   Ficam separados, e o que é ajuda vira ajuda. */
.porta-pe{
  margin-top:var(--e6);
  padding-top:var(--e4);
  border-top:1px solid rgba(var(--liq-tint),.12);
  color:var(--cinza); font-size:var(--t-micro); line-height:1.7;
}
.porta-pe p{ margin:0 0 6px }
.porta-pe p:last-child{ margin-bottom:0 }
.porta-pe a{ color:var(--cinza-claro); text-decoration:none; border-bottom:1px solid rgba(var(--liq-tint),.26) }
.porta-pe a:hover,.porta-pe a:focus-visible{ color:var(--incandescente); border-bottom-color:var(--incandescente) }
.porta-voltar{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:var(--e4);
  color:var(--cinza); font-size:var(--t-micro); text-decoration:none;
}
.porta-pe .porta-voltar{ border-bottom:0 }
.porta-voltar svg{ width:13px; height:13px; flex:none }
.porta-voltar:hover,.porta-voltar:focus-visible{ color:var(--incandescente) }

/* ═══════════════════════════════════════════════════════════════════════════
   4 · OS PASSOS QUE NÃO SÃO O FORMULÁRIO
   Confirmar o nascimento, escolher entre os dois acessos, entrar pelo celular.
   Todos herdam a mesma coluna e o mesmo ritmo — a pessoa não muda de casa no
   meio do caminho.
   ═══════════════════════════════════════════════════════════════════════════ */
.porta-passo{
  border:1px solid rgba(var(--liq-tint),.18);
  border-radius:var(--r-caixa);
  background:rgba(var(--liq-tint),.05);
  padding:var(--e5);
  margin-bottom:var(--e4);
}
.porta-passo > p:first-child{ margin-top:0 }
.porta-escolhas{ display:grid; gap:var(--e2); margin:var(--e5) 0 var(--e4) }
.porta-escolhas form{ margin:0 }
.porta-escolhas .btn{ width:100% }

/* O CÓDIGO DE 6 LETRAS. É para ser lido em voz alta e digitado no celular:
   dígito de largura fixa, espaçamento generoso e quebra em duas linhas antes
   de estourar a tela de 390px. */
.porta-codigo{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(30px,8vw,40px);
  font-weight:700;
  letter-spacing:.18em;
  line-height:1.2;
  color:var(--incandescente);
  margin:var(--e4) 0 var(--e2);
  overflow-wrap:anywhere;
  text-shadow:0 0 24px rgba(var(--liq-acento),.45);
}
.porta-conta{ margin:0; color:var(--cinza); font-size:var(--t-micro); line-height:1.5 }
.porta-alerta{ margin:var(--e4) 0 0; color:var(--cinza); font-size:var(--t-micro); line-height:1.55 }
.porta-passo-acoes{ display:flex; flex-wrap:wrap; gap:var(--e2); margin-top:var(--e5) }

/* ═══════════════════════════════════════════════════════════════════════════
   5 · A TELA GRANDE
   Um ponto de quebra, não onze. Em 1000px a segunda coluna passa a caber sem
   espremer o formulário abaixo dos 400px de leitura confortável.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1000px){
  .porta-tela{ grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr) }
  .porta-marca{ display:grid }
  .porta-tarja{ display:none }
  .porta-acesso{ padding:var(--e7) clamp(var(--e6),4.5vw,80px) }
  .porta-caixa{ max-width:420px }
}
/* ⚠ AQUI HAVIA UMA REGRA QUE ANCORAVA O FORMULÁRIO À ESQUERDA acima de 1500px,
   com a desculpa de "não sumir no meio do vazio". Ela fazia exatamente o
   contrário, e dá para medir: a sobra ao lado da caixa ia de 128/128 em 1440
   para 120/663 em 2560 — meio metro de vazio de um lado só. Coluna centrada
   não é indecisão; é o único arranjo que continua parecendo proposital quando
   a tela dobra de tamanho. A regra saiu. */

/* Na tela muito larga a caixa ganha um pouco de corpo — mas pouco: formulário
   de dois campos com mais de 460px começa a parecer esticado, e a distância
   entre o rótulo e o fim do campo vira viagem para o olho. */
@media (min-width:1700px){
  .porta-caixa{ max-width:460px }
  .porta-titulo{ font-size:clamp(38px,2.9vw,54px) }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6 · QUEM PEDIU MENOS
   O fole e as fagulhas são atmosfera; para quem marcou "reduzir movimento" no
   sistema operacional, a brasa fica acesa e PARADA. A tela não perde nada:
   o desenho é o mesmo, só não se mexe.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .porta-marca::after{ animation:none; opacity:.55 }
  .porta-fagulhas{ display:none }
  .porta-caixa{ animation:none }
  .porta-saida{ transition:none }
  .porta-saida:hover,.porta-saida:focus-visible{ transform:none }
}

/* Em tema claro (Colégio / Claro) o vidro escuro vira véu claro sozinho, pelo
   `--liq-tint`; o que NÃO se ajusta sozinho é o texto sobre a brasa forte da
   metade esquerda, que ali continua sendo um fundo escuro por desenho. */
@media (prefers-contrast:more){
  .porta-marca::after,.porta-fagulhas{ display:none }
  .porta-saida,.porta-socorro,.porta-passo,.porta-publicos li{ border-color:var(--escoria) }
}