/* A cara do porteiro. Um arquivo, todas as portas: a tela do RA e da senha, a
   do código de seis dígitos, a cerimônia da chave de acesso, os avisos de link
   vencido e a página inicial.

   Era escura (#0f1115) desde o começo, por gosto de quem escreveu, e virou
   clara em 20/08/2026 por decisão do Borbolla: a tela preta estava dificultando
   o acesso de gente de verdade. A paleta daqui é a MESMA das telas do estágio
   (fundo ardósia claro, azul #0369a1), e isso é de propósito: quem sai do
   módulo e cai no porteiro não pode sentir que mudou de sistema.

   Vale para todos os módulos que entram por aqui, e não só para o estágio: são
   quatro telas num arquivo só, e manter duas aparências custaria mais do que
   vale. */

:root {
  /* color-scheme fica em light, e não em "light dark": com os dois, o navegador
     pinta de escuro o que ELE desenha (a lista do select, o calendário, a barra
     de rolagem) quando o aparelho está no modo noturno, e a tela volta a ficar
     meio preta sem ninguém ter pedido. */
  color-scheme: light;

  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface2: #f8fafc;
  --border: #e2e8f0;
  /* O CAMPO se anuncia por três coisas ao mesmo tempo, e não por uma só:
     contorno firme, área com cor própria dentro do cartão branco, e marca-texto
     amarelo enquanto se escreve. Desenho escolhido pelo Borbolla em 20/08/2026,
     depois de ver seis tratamentos lado a lado: contorno leve não diz que ali
     tem algo para preencher.

     O contorno em #64748b dá 4,76 de contraste contra o branco, bem acima dos
     3,00 que a norma pede para contorno que identifica um componente. */
  --border-campo: #64748b;
  --campo-fundo: #f1f5f9;
  /* Amarelo de marca-texto, e não um realce discreto: quem escreve precisa ver
     de relance em qual campo está. A tinta escura por cima dá 14 de contraste,
     e a moldura azul continua marcando o foco para quem não distingue o
     amarelo. */
  --campo-escrevendo: #fef08a;
  --text: #0f172a;
  --text-muted: #64748b;
  --accent: #0369a1;
  --accent-hover: #075985;
  --accent-soft: rgba(3, 105, 161, .08);
  --danger: #b91c1c;
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Sem 100vh e sem centralizar na vertical. No celular, 100vh é MAIOR que a
     área que se enxerga, e conteúdo centralizado salta quando o teclado abre.
     O cartão nasce perto do topo, com respiro que cresce em tela grande. */
  display: flex;
  justify-content: center;
  padding: clamp(16px, 5vh, 56px) 16px 72px;
  font: 17px/1.6 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

main {
  width: 100%;
  max-width: 34rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 28px 24px 32px;
  text-align: center;
}

h1 {
  /* 40px fixos ocupavam quatro linhas num aparelho estreito. Agora o título
     acompanha a largura da tela e para de crescer no computador. */
  font-size: clamp(23px, 6.5vw, 32px);
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 12px;
}

.mut { color: var(--text-muted); font-size: 15px; }

a { color: var(--accent); }

button {
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 13px 22px;
  min-height: 48px;
  margin-top: 8px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:hover { background: var(--accent-hover); }
button:disabled { opacity: .55; cursor: default; }

/* Foco visível de verdade, e não só a moldura pálida do navegador: aqui entra
   gente que navega pelo teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* ── Telas de formulário (login prata) ──────────────────────────────────────
   Escopo próprio (main.form) para não mexer nas telas de cerimônia da chave.
   O que manda aqui é o que o dedo alcança: campo alto, letra que nunca cai
   abaixo de 16px e botão que ocupa a largura toda. */
main.form { max-width: 26rem; text-align: left; }
main.form h1 { font-size: clamp(21px, 6vw, 27px); margin: 0 0 10px; }
main.form .mut { font-size: 15px; line-height: 1.55; }
main.form label {
  display: block; margin: 20px 0 6px;
  font-size: 14px; font-weight: 600; color: var(--text);
}
main.form input {
  font: inherit;
  /* max(1rem, 16px), e não 16px seco: abaixo de 16 o iPhone amplia a página
     sozinho quando o dedo toca no campo, e a partir daí tudo fica maior que a
     tela. O max protege também de quem diminui a letra da raiz. */
  font-size: max(1rem, 16px);
  width: 100%;
  padding: 13px 15px;
  min-height: 48px;
  border: 1px solid var(--border-campo);
  border-radius: 11px;
  background: var(--campo-fundo);
  color: var(--text);
  -webkit-appearance: none;
}
main.form input::placeholder { color: #64748b; }
main.form input:focus {
  outline: none;
  background: var(--campo-escrevendo);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
/* O navegador pinta o campo preenchido por ele com um fundo próprio, e no
   Chrome esse fundo vence o nosso. Sem isto, o campo que o gerenciador de
   senhas preenche aparece azulado no meio dos outros. */
main.form input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  box-shadow: 0 0 0 100px var(--campo-fundo) inset;
}
main.form input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--campo-escrevendo) inset, 0 0 0 3px var(--accent-soft);
}
main.form button { width: 100%; margin-top: 26px; }
main.form button:active { transform: translateY(1px); }
main.form p { margin: 0; }
main.form a { color: var(--accent); }

/* O aviso de erro existia no HTML e não tinha estilo nenhum: aparecia como
   texto solto, do mesmo tamanho do resto, e passava despercebido. */
main.form .aviso {
  margin: 0 0 4px;
  padding: 12px 14px;
  border-radius: 11px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--danger);
  font-size: 15px;
}