/* Estilo das páginas de acesso e admin (mesmos tons da página principal). */
:root {
  --fundo: #E7ECF0; --cartao: #FFFFFF; --tinta: #1C2833; --suave: #687684; --linha: #D5DCE2;
  --rede: #3F74C9; --aviso: #B86A00; --erro: #B3261E; --ok: #2E9E68; --raio: 14px;
}
@media (prefers-color-scheme: dark) {
  :root { --fundo: #12181E; --cartao: #1D252D; --tinta: #E6ECF1; --suave: #93A1AE; --linha: #2C3640;
          --aviso: #E9A23B; --erro: #F2867C; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo); color: var(--tinta); line-height: 1.45; font-size: 16px;
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
:focus-visible { outline: 3px solid var(--rede); outline-offset: 2px; }
a { color: inherit; }
h1 { font-size: 1.5rem; margin: 0 0 8px; }
h2 { font-size: 1.125rem; margin: 0 0 12px; }
p { margin: 0 0 16px; }
.suave { color: var(--suave); }
.caixa { max-width: 420px; margin: 12vh auto 0; padding: 28px 24px; background: var(--cartao); border-radius: var(--raio); }
@media (max-width: 480px) { .caixa { margin: 24px 16px; } }
.botao, button {
  font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; padding: 12px 22px; cursor: pointer; border: 2px solid var(--tinta);
  background: var(--tinta); color: var(--fundo); text-decoration: none; min-height: 48px;
}
.botao.secundario, button.secundario { background: transparent; color: var(--tinta); }
button.pequeno { min-height: 36px; padding: 6px 14px; font-size: .875rem; }
button.perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
.largo { width: 100%; }
input, select {
  font: inherit; color: var(--tinta); background: var(--fundo); border: 2px solid var(--linha);
  border-radius: 10px; padding: 10px 12px; min-height: 48px; width: 100%;
}
input:focus, select:focus { border-color: var(--rede); outline: none; }
label { display: block; font-size: .875rem; color: var(--suave); margin-bottom: 4px; }
.campo { margin-bottom: 14px; }
.codigo { font-size: 2rem; letter-spacing: .3em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.mensagem { min-height: 1.5em; font-size: .9375rem; }
.mensagem.erro { color: var(--erro); } .mensagem.ok { color: var(--ok); }
.ou { text-align: center; color: var(--suave); margin: 16px 0; font-size: .875rem; }