/* Fontes, tokens e tipografia base.
 *
 * O vocabulário do resto: cores nos dois temas, escalas de tipografia e de
 * espaçamento, e os elementos de texto. Quem quiser mudar a identidade do
 * sistema mexe aqui, e em nenhum outro lugar.
 *
 * Parte de estilo/. A folha foi dividida por assunto em 03/08/2026: 915 linhas
 * num arquivo só obrigavam a rolar por tudo para achar qualquer coisa.
 *
 * Ligadas por <link> múltiplo, e NÃO por @import: @import encadeia downloads —
 * o navegador só descobre o segundo arquivo depois de baixar o primeiro. */

/* `hidden` VENCE qualquer `display` declarado aqui.
 *
 * `[hidden] { display: none }` é regra do NAVEGADOR, com especificidade (0,1,0)
 * — a mesma de qualquer classe. Folha de autor sempre vence a do navegador, e
 * por isso um `.campo-caixa { display: flex }` faz `elemento.hidden = true` não
 * esconder NADA. O código fica certo, a tela fica errada, e nada acusa.
 *
 * Este projeto já tinha consertado isso cinco vezes, uma classe por vez
 * (`.area`, `.entrada`, `.quem`, `.lateral`, `.paginacao`). Duas outras
 * passaram: a caixa de consentimento do hotsite e as ações da câmera, que
 * apareciam com `hidden` marcado — "Tirar a foto" visível antes de haver
 * câmera.
 *
 * Consertar caso a caso é consertar depois de alguém ver. A regra global fecha
 * a classe inteira, e `!important` é necessário porque é exatamente contra
 * declarações de autor que ela precisa ganhar.
 *
 * As regras específicas que já existem continuam lá: são inofensivas e removê-las
 * só criaria risco de regressão sem ganho. */
[hidden] {
  display: none !important;
}

/* ============================================================== as fontes

   Servidas pelo PRÓPRIO binário, nunca de fora.

   O sistema não faz nenhuma requisição externa, e isso não é estilo: uma fonte
   buscada no Google entregaria a ele o endereço de rede de cada eleitor NO
   INSTANTE DO VOTO. E a urna precisa poder funcionar em rede isolada.

   As duas famílias são variáveis — um arquivo cobre todos os pesos, em vez de
   um arquivo por peso.

   Dois subconjuntos por família. O latino cobre todo o português; o estendido
   custa 95 KB e cobre nomes como Łukasz, Öztürk, Škoda. Nome de eleitor vem da
   população real, e uma letra caindo na fonte de reserva no meio do cadastro de
   quem vota é feio no lugar errado. O navegador baixa só o que a página usar.

   Licenças em fontes/LICENCA-*.txt. SIL OFL-1.1 exige que o texto viaje junto. */

@font-face {
  font-family: "Lexend";
  src: url("/fontes/lexend-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lexend";
  src: url("/fontes/lexend-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fontes/sourcesans3-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fontes/sourcesans3-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Um sistema eleitoral é lido sob pressão, por gente cansada, às vezes em tela
   pequena. O que guia este estilo é contraste alto, alvo grande e nenhuma
   decoração que dispute atenção com a informação. */

:root {
  --tinta: #10131a;
  --papel: #f7f8fa;
  --cartao: #ffffff;
  --borda: #d3d8e0;
  --apagado: #5b6472;
  --acao: #14428c;
  /* A cor do texto que vai SOBRE --acao.
     Existe porque `color: #fff` fixo é o defeito: no tema escuro --acao é
     CLAREADO para se destacar do fundo, e branco sobre azul-claro dá 2.43:1 —
     bem abaixo do mínimo de 4.5:1. Medido em 03/08/2026: era a causa única das
     12 violações de contraste do sistema, todas no tema escuro.
     Cor de fundo que muda por tema exige cor de texto que mude junto. */
  --sobre-acao: #ffffff;
  --acao-clara: #e8eefa;
  --alerta: #96201a;
  --certo: #1a6b3c;
  --sombra: 0 1px 2px rgba(16, 19, 26, 0.08), 0 4px 12px rgba(16, 19, 26, 0.05);
  --raio: 10px;

  /* ===================================================== tipografia

     Lexend nos títulos, Source Sans 3 no corpo. Antes disto não havia
     font-family declarada em lugar nenhum — a interface inteira usava a pilha
     padrão do navegador.

     Os tamanhos são em `rem`, e nunca em `px`: quem aumenta a fonte do
     navegador está dizendo que precisa, e um sistema eleitoral que ignora essa
     configuração exclui exatamente quem mais depende dela.

     Escala FIXA, e não fluida com clamp(). O painel é tela densa, operada de
     perto e repetidamente, e quem opera memoriza posições — tamanho que muda
     com a largura da janela quebra essa memória sem ganho nenhum. Escala fluida
     serve a página de conteúdo, não a interface de trabalho.

     Os nomes dizem o PAPEL, não o valor: trocar --texto-titulo de 1.75 para
     1.875rem não deve obrigar a renomear nada. */
  --fonte-titulo: "Lexend", system-ui, -apple-system, sans-serif;
  --fonte-corpo: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --texto-titulo: 1.75rem;
  --texto-secao: 1.25rem;
  --texto-destaque: 1.0625rem;
  --texto-corpo: 1rem;
  --texto-apoio: 0.9375rem;
  --texto-miudo: 0.8125rem;

  --altura-titulo: 1.15;
  --altura-corpo: 1.6;
  --altura-apoio: 1.5;

  /* Três pesos, com papel definido. Mais que isso vira decisão a cada uso. */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;

  /* ===================================================== espaçamento

     Múltiplos de 4. Antes, cada valor era escolhido um a um, e o ritmo não
     fechava. Escala existe para a resposta de "quanto de espaço aqui?" ser
     escolher da lista, e não inventar. */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #eef1f6;
    --papel: #0e1116;
    --cartao: #171b22;
    --borda: #2c333e;
    --apagado: #9aa4b2;
    --acao: #7ba7f0;
    /* Azul claro pede texto ESCURO. Inverter o par junto com o fundo é a
       diferença entre um tema escuro que passa e um que só parece passar. */
    --sobre-acao: #0e1116;
    --acao-clara: #1b2740;
    --alerta: #ef8079;
    --certo: #6cc38f;
    --sombra: none;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: var(--texto-corpo);
  line-height: var(--altura-corpo);
  color: var(--tinta);
  background: var(--papel);
}

/* O atalho existe para quem navega por teclado: sem ele, cada carregamento
   custa uma travessia inteira da navegação antes de chegar ao conteúdo.
   Fica fora da tela até receber foco — escondê-lo com display:none o tiraria
   da ordem de foco e o tornaria inútil. */
.atalho {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 30;
  padding: 0.7rem 1rem;
  background: var(--acao);
  color: var(--sobre-acao);
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.15s;
}

.atalho:focus {
  top: 0;
}

.faixa {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
  background: var(--cartao);
  border-bottom: 1px solid var(--borda);
}

.marca {
  font-weight: var(--peso-forte);
  letter-spacing: 0.08em;
  font-size: var(--texto-miudo);
}

h1 {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-titulo);
  font-weight: var(--peso-forte);
  line-height: var(--altura-titulo);
  letter-spacing: -0.015em;
  margin: 0 0 var(--e2);
}
h2 {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-secao);
  font-weight: var(--peso-forte);
  line-height: var(--altura-titulo);
  margin: 0 0 var(--e4);
}
/* Texto que existe só para quem usa leitor de tela.

   `display: none` e `visibility: hidden` tirariam do leitor também. O recorte de
   um pixel é a forma que funciona em todos eles.

   Serve ao cabeçalho da coluna de ações: `<th>` vazio deixa a coluna sem nome, e
   quem navega a tabela por teclado ouve "coluna 4" em vez de "Detalhes". */
.oculto-visual {
  /* SEM `position: absolute`, e isso é o ponto.

     A receita clássica usa `absolute`. Dentro de uma tabela larga que vive num
     contêiner com `overflow-x: auto`, o elemento absoluto não tem ancestral
     posicionado — então o bloco que o contém passa a ser o documento, ele ESCAPA
     do contêiner que rola, e estica a página inteira. Medido: a 320px com texto
     a 200%, o documento ia a 789px e a página rolava na horizontal.

     Em fluxo, ocupando um pixel, ele não escapa de nada. */
  display: inline-block;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.apoio {
  color: var(--apagado);
  font-size: var(--texto-apoio);
  line-height: var(--altura-apoio);
  margin: var(--e1) 0 var(--e4);
}

/* ------------------------------------------------- movimento dispensável */

/* Movimento causa desconforto real em parte das pessoas, e o sistema
   operacional já sabe quem pediu para evitá-lo. Anular aqui é obedecer a um
   pedido que a pessoa já fez uma vez — não cabe repetir a pergunta. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.codigo {
  font:
    700 2.5rem/1 ui-monospace,
    Menlo,
    Consolas,
    monospace;
  letter-spacing: 0.35em;
  text-align: center;
  padding: 1rem;
}

.resumo-linha {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--borda);
}
.resumo-cargo {
  color: var(--apagado);
}

.barra {
  height: 0.5rem;
  background: var(--borda);
  border-radius: 999px;
  overflow: hidden;
}
.preenche {
  height: 100%;
  width: 0;
  background: var(--acao);
  transition: width 0.15s;
}

.protocolo {
  font:
    700 1.8rem/1.3 ui-monospace,
    Menlo,
    Consolas,
    monospace;
  letter-spacing: 0.12em;
  padding: 1rem;
  text-align: center;
  background: var(--acao-clara);
  border-radius: var(--raio);
}