/* Tema ESCURO do portal.
 *
 * ⚠️ As cores são as MESMAS do `mn_design` (design.md), copiadas do esquema
 * escuro gerado. Não é preguiça: elas já passam no gate de contraste do
 * repositório, que confere 28 pares contra o mínimo 4,5:1 da WCAG AA. Inventar
 * uma paleta aqui criaria um segundo conjunto de cores sem gate nenhum — e
 * escuro é onde o contraste falha com mais facilidade, porque cinza médio sobre
 * preto "parece" legível para quem enxerga bem.
 *
 * ⚠️ Nada aqui depende de COR sozinha para comunicar estado. Cor é reforço; o
 * portador é sempre texto ou forma.
 */

:root {
  --superficie: #191210;
  --superficie-alta: #241c19;
  --superficie-mais-alta: #2f2521;
  --texto: #f1dfd8;
  --texto-secundario: #d8c2ba;
  --primaria: #ffb59d;
  --sobre-primaria: #5e1600;
  --erro: #ffb4ab;
  --sobre-erro: #690005;
  --contorno: #a08d86;

  --espaco-1: 0.25rem;
  --espaco-2: 0.5rem;
  --espaco-3: 0.75rem;
  --espaco-4: 1rem;
  --espaco-5: 1.5rem;
  --espaco-6: 2rem;
  --coluna-maxima: 40rem;
}

/* ⚠️ Respeita quem pediu menos movimento no sistema. Um painel de operação é
 * usado por horas; animação não pedida ali é cansaço acumulado. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: var(--espaco-5);
  background: var(--superficie);
  color: var(--texto);
  /* Pilha do sistema: nenhuma fonte externa, porque a CSP proíbe buscar
   * qualquer coisa fora deste serviço — e uma fonte de CDN seria a primeira
   * exceção a abrir na política. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* ⚠️ `rem` e nunca `px` no tamanho do texto: em `px`, aumentar a fonte do
   * sistema não faz nada, e quem precisa de texto grande fica sem saída. */
  font-size: 1rem;
  line-height: 1.6;
}

main {
  max-width: var(--coluna-maxima);
  margin: 0 auto;
}

h1 {
  font-size: 1.5rem;
  margin: 0 0 var(--espaco-2);
}

.discreto {
  color: var(--texto-secundario);
  font-size: 0.875rem;
}

.cartao {
  background: var(--superficie-alta);
  border: 1px solid var(--contorno);
  border-radius: 0.75rem;
  padding: var(--espaco-5);
  margin-top: var(--espaco-5);
}

label {
  display: block;
  margin-bottom: var(--espaco-1);
  font-weight: 600;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: var(--espaco-3);
  margin-bottom: var(--espaco-4);
  background: var(--superficie-mais-alta);
  color: var(--texto);
  border: 1px solid var(--contorno);
  border-radius: 0.5rem;
  font-size: 1rem;
}

button {
  /* ⚠️ 44px de altura mínima: é o alvo de toque que a WCAG 2.2 pede, e vale
   * também para quem usa o painel com tremor ou num aparelho pequeno. */
  min-height: 2.75rem;
  padding: var(--espaco-3) var(--espaco-5);
  background: var(--primaria);
  color: var(--sobre-primaria);
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

/* ⚠️ Foco VISÍVEL e com folga. O contorno padrão do navegador some em vários
 * temas escuros; sem ele, quem navega por teclado não sabe onde está. */
:focus-visible {
  outline: 3px solid var(--primaria);
  outline-offset: 2px;
}

.erro {
  color: var(--erro);
  border-left: 4px solid var(--erro);
  padding-left: var(--espaco-3);
}

h2 {
  font-size: 1.125rem;
  margin: 0 0 var(--espaco-3);
}

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

.acao-de-sair {
  margin-top: var(--espaco-5);
}

.aviso-do-rodape {
  margin-top: var(--espaco-5);
}

/* Só para leitor de tela: some da vista sem sair da árvore de acessibilidade. */
.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}