/* porta.css — o que as DUAS telas de porta têm: entrar.html (o login) e
   trocar.html (a troca obrigatória da senha inicial).

   POR QUE UM ARQUIVO E NÃO UM <style> EM CADA. A Content-Security-Policy do app
   não tem 'unsafe-inline': o navegador ignora em silêncio todo <style> dentro
   da página, e a tela sairia sem cor e sem grade — o erro só aparece no
   console. Folha de estilo só vale se vier de /estatico/.

   OS DOIS ERAM QUASE O MESMO BLOCO, então ficou um só. O que diferia está no
   fim, atrás de `body.entrar` e `body.trocar` — largura do cartão, tamanho do
   título e respiro do parágrafo — para cada tela continuar exatamente com a
   cara que já tinha. As variáveis de aviso eram só de trocar.html; existir
   também no login não muda nada, porque nenhuma regra do login as usa. */
:root{--fundo:#f7f7f8;--papel:#fff;--texto:#111827;--fraco:#6b7280;--linha:#e5e7eb;--verde:#16a34a;
  --alerta:#dc2626;--alerta-fundo:#fee2e2;--aviso:#b45309;--aviso-fundo:#fef3c7}
@media (prefers-color-scheme: dark){
  :root{--fundo:#0b0d10;--papel:#15181d;--texto:#e5e7eb;--fraco:#9ca3af;--linha:#252a31;
    --verde:#4ade80;--alerta:#fca5a5;--alerta-fundo:#3f1212;--aviso:#fbbf24;--aviso-fundo:#3b2a06}
}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;display:grid;place-items:center;background:var(--fundo);
  color:var(--texto);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:24px}
form{background:var(--papel);border:1px solid var(--linha);border-radius:16px;padding:28px;
  width:100%}
p{color:var(--fraco);font-size:14px}
input{font:inherit;width:100%;padding:12px;border-radius:10px;border:1px solid var(--linha);
  background:var(--fundo);color:var(--texto);margin-bottom:12px}
button{font:inherit;font-weight:600;width:100%;padding:12px;border-radius:10px;border:0;
  background:var(--verde);color:#fff;cursor:pointer}
.erro{background:var(--alerta-fundo);color:var(--alerta);padding:10px;border-radius:10px;
  font-size:14px;margin-bottom:12px}

/* A porta de entrada */
body.entrar form{max-width:340px}
body.entrar h1{font-size:26px;margin:0 0 4px;letter-spacing:-.5px}
body.entrar p{margin:0 0 20px}

/* A troca obrigatória */
body.trocar form{max-width:360px}
body.trocar h1{font-size:24px;margin:0 0 4px;letter-spacing:-.5px}
body.trocar p{margin:0 0 18px;line-height:1.5}
.recado{background:var(--aviso-fundo);color:var(--aviso);padding:12px;border-radius:10px;
  font-size:13.5px;margin-bottom:16px;line-height:1.45}
.sair{background:none;color:var(--fraco);font-weight:400;font-size:13px;margin-top:10px}