/* ============================================================================
   SINPRF/RS — Sistema de Votação Online
   Folha de estilo única · CSS puro, sem build, sem dependência externa
   v1.0 · substitui integralmente a style.css anterior
   ----------------------------------------------------------------------------
   Ordem: 1 tokens · 2 aliases legados · 3 base · 4 layout · 5 nav mobile
          6 tipografia · 7 cards e métricas · 8 badges e tags · 9 botões
          10 formulários · 11 tabelas · 12 alertas · 13 modais e confirmação
          14 votação · 15 resultados · 16 estados (loading/vazio/erro)
          17 utilitários · 18 responsivo · 19 dark mode · 20 impressão
   ========================================================================= */

/* ==== 1. TOKENS ========================================================== */
:root {
  /* --- Marca: azul-marinho + ouro do site www.sinprfrs.org.br (escala slate e amarelo do site) --- */
  --navy-900:#020618;  /* fundo do site: sidebar, telas de acesso, modo assembleia */
  --navy-800:#0F172B;  /* texto dos botões ouro, superfícies escuras */
  --navy-700:#1D293D;  /* PRIMÁRIA — 14,5:1 no branco */
  --navy-600:#314158;
  --navy-500:#62748E;  /* barras secundárias, dados */
  --navy-100:#E8EEF6;
  --navy-050:#F1F5F9;
  --navy-borda:#DDE3EC;
  --sigilo-texto:#314158;  /* corpo do painel de sigilo sobre --navy-050 */

  --ouro-700:#8A5A00;  /* texto/ícone ouro sobre fundo claro — 5,4:1 */
  --ouro-500:#F0B100;  /* ACENTO e botão principal (texto --navy-800) — nunca como texto no branco */
  --ouro-400:#FDC700;
  --ouro-100:#FEF6D6;
  --ouro-050:#FFFBEB;

  /* --- Semânticas --- */
  --ok-700:#0A5637;
  --ok-600:#0C6B45;   /* sucesso, voto registrado, quórum, vencedora — 5,3:1 */
  --ok-100:#E9F5EF;
  --ok-borda:#BDE3CE;
  --ok-050:#F3FAF6;

  --perigo-700:#8C2A1E;
  --perigo-600:#B3261E; /* destrutivo, irreversível — 6,4:1 */
  --perigo-100:#FFF3EF;
  --perigo-borda:#F0CFC6;

  --info-700:#173F7D;
  --info-600:#1B4F9C;
  --info-100:#E7EEF9;
  --info-borda:#C6D6EE;

  --atencao-700:var(--ouro-700);
  --atencao-100:var(--ouro-100);
  --atencao-borda:#F6DFAE;

  /* --- Neutros --- */
  --n-000:#FFFFFF;
  --n-050:#F8FAFC;   /* cabeçalho de tabela, rodapé de modal */
  --n-100:#F1F5F9;   /* fundo da página */
  --n-200:#E8EDF3;   /* divisores internos, trilha de barra */
  --n-300:#DDE3EC;   /* bordas */
  --n-400:#C3CDDA;   /* borda de input, marcador inativo */
  --n-500:#90A1B9;   /* SÓ desabilitado/decorativo — nunca texto útil */
  --n-600:#45556C;   /* texto secundário — 7,5:1 ✓ AA */
  --n-700:#314158;   /* corpo secundário — 10,4:1 */
  --n-800:#1D293D;   /* rótulos, corpo forte */
  --n-900:#0F172B;   /* texto principal — 17,8:1 */

  /* --- Superfícies (a chave do dark mode) --- */
  --fundo:var(--n-100);
  --superficie:var(--n-000);
  --superficie-2:var(--n-050);
  --borda:var(--n-300);
  --borda-forte:var(--n-400);
  --divisor:var(--n-200);
  --texto:var(--n-900);
  --texto-2:var(--n-700);
  --texto-3:var(--n-600);

  /* --- Escala tipográfica (1.20 modular, ancorada em 16px) --- */
  --fs-1:12px;  /* micro-rótulo, badge */
  --fs-2:13px;  /* metadado, legenda */
  --fs-3:14px;  /* interface: botão, célula, label */
  --fs-4:15px;  /* corpo compacto */
  --fs-5:16px;  /* CORPO PADRÃO — mínimo para leitura do votante */
  --fs-6:19px;  /* título de card, opção de voto */
  --fs-7:22px;  /* título de seção */
  --fs-8:26px;  /* título de página (h1) */
  --fs-9:32px;  /* valor de métrica */
  --fs-10:44px; /* número de projeção */

  --peso-normal:400;
  --peso-medio:600;
  --peso-forte:700;
  --peso-extra:800;

  --lh-apertado:1.25;  /* títulos */
  --lh-normal:1.45;
  --lh-solto:1.6;      /* corpo longo */
  --track-titulo:-.4px;
  --track-caps:.9px;

  /* --- Escala de espaçamento (base 4) --- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:48px; --sp-9:64px;

  /* --- Raios (4 degraus, fim do 4/6/8/10/12 aleatório) --- */
  --r-1:6px;   /* badge, chip */
  --r-2:9px;   /* botão, input */
  --r-3:14px;  /* card, opção de voto */
  --r-4:20px;  /* folha inferior, modal */
  --r-pill:999px;

  /* --- Elevação (3 degraus com intenção) --- */
  --elev-1:0 1px 2px rgba(2,6,24,.06);              /* repouso */
  --elev-2:0 6px 18px -10px rgba(2,6,24,.22);       /* destaque/hover */
  --elev-3:0 24px 60px -28px rgba(2,6,24,.45);      /* sobreposto */
  --foco:0 0 0 3px rgba(29,41,61,.28);
  --foco-perigo:0 0 0 3px rgba(179,38,30,.26);

  /* --- Alvos de toque --- */
  --toque:44px;
  --toque-conforto:52px;

  --transicao:.15s ease;
  --largura-sidebar:248px;
}

/* ==== 2. ALIASES LEGADOS =================================================
   Mantidos para que as telas antigas não quebrem durante a migração.
   Meta: remover este bloco quando nenhum arquivo usar mais os nomes velhos. */
:root {
  --azul:var(--navy-700);
  --azul-claro:var(--navy-500);
  --azul-escuro:var(--navy-900);
  --verde:var(--ok-600);
  --verde-escuro:var(--ok-600);
  --amarelo:var(--ouro-500);
  --vermelho:var(--perigo-600);
  --cinza-1:var(--n-100);
  --cinza-2:var(--n-300);
  --cinza-3:var(--n-500);
  --cinza-4:var(--n-600);
  --sombra:var(--elev-1);
}

/* ==== FONTE =============================================================
   Inter, a mesma do SIGES. Arquivos auto-hospedados em /fonts (sem CDN);
   variável, pesos 100 a 900. Licença SIL Open Font. */
@font-face {
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/inter-latin-ext.woff2') format('woff2');
  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:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+00??,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;
}

/* ==== 3. BASE ============================================================ */
*, *::before, *::after { box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  font-family:"Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  font-size:var(--fs-5);
  line-height:var(--lh-normal);
  color:var(--texto);
  background:var(--fundo);
  -webkit-font-smoothing:antialiased;
}

a { color:var(--navy-700); text-decoration:none; font-weight:var(--peso-medio); }
a:hover { color:var(--navy-600); text-decoration:underline; }

/* Foco visível em TUDO que recebe foco — antes existia só em input */
:where(a, button, .btn, input, select, textarea, summary, [tabindex]):focus-visible {
  outline:3px solid var(--navy-700);
  outline-offset:2px;
  box-shadow:none;
  border-radius:var(--r-1);
}

img { max-width:100%; height:auto; }
hr { border:0; border-top:1px solid var(--divisor); margin:var(--sp-6) 0; }

/* Pular para o conteúdo — acessibilidade de teclado */
.pular-link {
  position:absolute; left:-9999px; top:var(--sp-2);
  background:var(--navy-700); color:#fff; padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-2); z-index:9999; font-weight:var(--peso-forte);
}
.pular-link:focus { left:var(--sp-2); }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==== 4. LAYOUT ========================================================== */
.layout { display:flex; min-height:100vh; }

.sidebar {
  width:var(--largura-sidebar); flex:none;
  background:var(--navy-900); color:#fff; border-right:1px solid var(--navy-700);
  padding:var(--sp-6) 0;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column;
}
.sidebar .marca { padding:0 var(--sp-5) var(--sp-4); }
.sidebar .marca h1 {
  margin:0; font-size:var(--fs-6); font-weight:900;
  letter-spacing:.3px; line-height:1;
}

/* Selo da área administrativa — diferencia admin de votante sem trocar a marca */
.selo-area {
  display:inline-flex; align-items:center; gap:var(--sp-1); margin-top:var(--sp-2);
  background:var(--ouro-500); color:var(--navy-900);
  font-size:var(--fs-1); font-weight:var(--peso-extra);
  text-transform:uppercase; letter-spacing:var(--track-caps);
  padding:4px 9px; border-radius:var(--r-1);
}
.selo-area.votante { background:rgba(255,255,255,.14); color:#fff; }

.sidebar nav { flex:1; padding:var(--sp-3) 0; }
.sidebar nav a {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  min-height:var(--toque); padding:var(--sp-3) var(--sp-5);
  color:#CAD5E2; font-size:var(--fs-3); font-weight:var(--peso-medio);
  border-left:3px solid transparent;
}
.sidebar nav a:hover { background:rgba(255,255,255,.06); color:#fff; text-decoration:none; }
.sidebar nav a.ativo {
  background:rgba(255,255,255,.07); border-left-color:var(--ouro-500); color:#fff;
}
.sidebar nav .contador {
  background:var(--perigo-600); color:#fff; font-size:var(--fs-1);
  font-weight:var(--peso-extra); padding:2px 7px; border-radius:var(--r-pill);
}
.sidebar .rodape {
  padding:var(--sp-4) var(--sp-5) 0; border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-2);
}
.sidebar .rodape .nome { font-size:var(--fs-3); font-weight:var(--peso-forte); color:#fff; }
.sidebar .rodape .email { color:#90A1B9; margin:2px 0 var(--sp-2); }
.sidebar .rodape .perfil {
  display:inline-block; background:rgba(240,177,0,.18); color:var(--ouro-400);
  font-size:var(--fs-1); font-weight:var(--peso-extra);
  text-transform:uppercase; letter-spacing:.8px; padding:3px 8px; border-radius:var(--r-1);
}

.main { flex:1; min-width:0; padding:var(--sp-6) var(--sp-7) var(--sp-8); }

.topbar {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:var(--sp-5); flex-wrap:wrap; margin-bottom:var(--sp-6);
}
.topbar h1 { margin:0; font-size:var(--fs-8); font-weight:var(--peso-extra); letter-spacing:-.5px; }
.topbar .sub { font-size:var(--fs-3); color:var(--texto-3); margin-top:var(--sp-1); }
.topbar .acoes { display:flex; gap:var(--sp-3); flex-wrap:wrap; }

/* ==== 5. NAVEGAÇÃO MOBILE ================================================
   Correção do defeito mais grave: a sidebar de 64px que escondia navegação
   e "Sair". No mobile a sidebar sai do fluxo e viram-se dois componentes:
   uma barra inferior de destinos + uma gaveta lateral. Sem JS obrigatório
   para a barra; a gaveta precisa apenas alternar a classe .aberta. */
.topo-mobile { display:none; }
.barra-inferior { display:none; }

.botao-menu {
  width:var(--toque); height:var(--toque);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:none; border:0; border-radius:var(--r-3); cursor:pointer; padding:0;
}
.botao-menu span { display:block; width:20px; height:2px; background:#fff; border-radius:2px; }

.gaveta-fundo {
  position:fixed; inset:0; background:rgba(2,6,24,.55);
  z-index:998; opacity:0; pointer-events:none; transition:opacity var(--transicao);
}
.gaveta {
  position:fixed; top:0; bottom:0; right:0; width:min(290px, 84vw);
  background:var(--navy-900); z-index:999;
  padding:var(--sp-6) 0; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .24s cubic-bezier(.2,.9,.3,1);
  box-shadow:-20px 0 50px -20px rgba(0,0,0,.5);
}
.gaveta.aberta { transform:translateX(0); }
.gaveta.aberta + .gaveta-fundo,
.gaveta-fundo.aberta { opacity:1; pointer-events:auto; }
.gaveta .identidade { padding:0 var(--sp-5) var(--sp-5); border-bottom:1px solid rgba(255,255,255,.14); }
.gaveta .identidade .nome { font-size:var(--fs-5); font-weight:var(--peso-forte); color:#fff; }
.gaveta .identidade .cpf { font-size:var(--fs-2); color:#90A1B9; margin-top:2px; }
.gaveta nav { flex:1; padding:var(--sp-3) 0; }
.gaveta nav a {
  display:flex; align-items:center; gap:var(--sp-3);
  min-height:48px; padding:var(--sp-3) var(--sp-5);
  color:#E2E8F0; font-size:var(--fs-5); font-weight:var(--peso-medio);
  border-left:4px solid transparent;
}
.gaveta nav a.ativo { color:#fff; background:rgba(255,255,255,.1); border-left-color:var(--ouro-500); }
.gaveta .sair {
  min-height:48px; padding:0 var(--sp-5); display:flex; align-items:center; gap:var(--sp-2);
  color:var(--ouro-400); font-size:var(--fs-5); font-weight:var(--peso-forte);
  border-top:1px solid rgba(255,255,255,.14); padding-top:var(--sp-4);
}

/* ==== 6. TIPOGRAFIA DE CONTEÚDO ========================================== */
h1,h2,h3,h4 { line-height:var(--lh-apertado); letter-spacing:var(--track-titulo); text-wrap:pretty; margin:0; }
h1 { font-size:var(--fs-8); font-weight:var(--peso-extra); }
h2 { font-size:var(--fs-7); font-weight:var(--peso-forte); }
h3 { font-size:var(--fs-6); font-weight:var(--peso-forte); }
h4 { font-size:var(--fs-4); font-weight:var(--peso-forte); }
p { margin:0 0 var(--sp-3); line-height:var(--lh-solto); text-wrap:pretty; }

.rotulo-secao {
  font-size:var(--fs-1); font-weight:var(--peso-extra);
  text-transform:uppercase; letter-spacing:1.1px;
  color:var(--texto-3); margin-bottom:var(--sp-3);
}
.rotulo-secao.acao { color:var(--perigo-700); }
.rotulo-secao.espera { color:var(--ouro-700); }
.muted { color:var(--texto-3); font-size:var(--fs-2); }
.mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.5px; }

/* ==== 7. CARDS E MÉTRICAS ================================================ */
.card {
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--r-3); padding:var(--sp-5) var(--sp-6);
  box-shadow:var(--elev-1); margin-bottom:var(--sp-5);
}
.card > h3 { margin-bottom:var(--sp-4); }
.card-cabecalho {
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  margin:calc(var(--sp-5) * -1) calc(var(--sp-6) * -1) var(--sp-5);
  padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--divisor);
}
.card-plano { box-shadow:none; }
.card-destaque { border-top:4px solid var(--ouro-500); box-shadow:var(--elev-2); }

/* Cartão de ação obrigatória — hierarquia real no dashboard */
.card-acao {
  background:var(--superficie); border:1px solid var(--perigo-borda);
  border-left:5px solid var(--perigo-600); border-radius:var(--r-2);
  padding:var(--sp-5); box-shadow:var(--elev-2);
}
.card-acao .tipo {
  font-size:var(--fs-1); font-weight:var(--peso-extra); text-transform:uppercase;
  letter-spacing:var(--track-caps); color:var(--perigo-600); margin-bottom:var(--sp-2);
}
.card-acao.atencao { border-color:var(--atencao-borda); border-left-color:var(--ouro-500); }
.card-acao.atencao .tipo { color:var(--ouro-700); }

.grid-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:var(--sp-4); margin-bottom:var(--sp-6); }
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:var(--sp-4); }

.metric { background:var(--superficie); border:1px solid var(--borda); border-radius:var(--r-2); padding:var(--sp-4) var(--sp-5); }
.metric .label { font-size:var(--fs-1); font-weight:var(--peso-forte); text-transform:uppercase; letter-spacing:.7px; color:var(--texto-3); }
.metric .value { font-size:var(--fs-9); font-weight:var(--peso-extra); letter-spacing:-1px; color:var(--navy-700); line-height:1; margin:var(--sp-2) 0 2px; }
.metric .footer { font-size:var(--fs-2); color:var(--texto-3); }

/* ==== 8. BADGES E TAGS =================================================== */
.badge {
  display:inline-block; padding:4px 9px; border-radius:var(--r-1);
  font-size:var(--fs-1); font-weight:var(--peso-extra);
  text-transform:uppercase; letter-spacing:.7px; white-space:nowrap;
}
/* Todas dentro dos tokens — nenhuma cor solta de Tailwind */
.badge-rascunho  { background:var(--n-200);      color:var(--n-800); }
.badge-aberta    { background:var(--ok-100);     color:var(--ok-600); }
.badge-encerrada { background:var(--navy-100);   color:var(--navy-600); }
.badge-cancelada { background:var(--perigo-100); color:var(--perigo-700); }
.badge-secreto   { background:var(--navy-100);   color:var(--navy-600); }
.badge-nominal   { background:var(--ouro-100);   color:var(--ouro-700); }
.badge-publicado { background:var(--ok-100);     color:var(--ok-600); }
.badge-votou     { background:var(--ok-100);     color:var(--ok-600); }
.badge-erro      { background:var(--perigo-100); color:var(--perigo-700); }
.badge-pendente  { background:var(--ouro-100);   color:var(--ouro-700); }
.badge-enviada   { background:var(--ok-100);     color:var(--ok-600); }
.badge-suprimida { background:var(--n-200);      color:var(--n-800); }

.tag {
  display:inline-block; padding:4px 9px; background:var(--n-200); color:var(--n-800);
  border-radius:var(--r-pill); font-size:var(--fs-1); font-weight:var(--peso-forte);
}

/* Badge "Pendência" clicável: abre o detalhe das competências em aberto */
.btn-pendencia {
  display:inline-flex; align-items:center; gap:6px; min-height:0; padding:2px 4px 2px 0;
  background:none; border:0; border-radius:var(--r-1); color:var(--texto-2);
  font-size:var(--fs-2); font-weight:var(--peso-medio); white-space:normal; text-align:left;
}
.btn-pendencia:hover { background:var(--perigo-100); color:var(--perigo-700); }
.btn-pendencia .seta { color:var(--perigo-600); font-weight:var(--peso-extra); }
.pend-lista { list-style:none; margin:0 0 var(--sp-4); padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.pend-item {
  display:grid; grid-template-columns:minmax(150px, 180px) 1fr; gap:4px var(--sp-4); align-items:baseline;
  background:var(--superficie-2); border:1px solid var(--borda); border-left:4px solid var(--perigo-600);
  border-radius:var(--r-2); padding:var(--sp-3) var(--sp-4);
}
.pend-mes { font-weight:var(--peso-forte); color:var(--texto); }
.pend-motivo { color:var(--texto-2); font-size:var(--fs-3); line-height:var(--lh-normal); }
.pend-meta { grid-column:2; color:var(--texto-3); font-size:var(--fs-2); }
.pend-regra { border:1px solid var(--borda); border-radius:var(--r-2); padding:var(--sp-2) var(--sp-4); background:var(--superficie); }
.pend-regra summary { cursor:pointer; font-weight:var(--peso-forte); color:var(--navy-700); font-size:var(--fs-3); padding:var(--sp-1) 0; }
.pend-regra ul { margin:var(--sp-2) 0 0; padding-left:20px; color:var(--texto-2); font-size:var(--fs-3); line-height:var(--lh-normal); }
.pend-regra li { margin-bottom:4px; }
@media (max-width:560px) {
  .pend-item { grid-template-columns:1fr; }
  .pend-meta { grid-column:1; }
}
.linha-meta { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }

/* Indicador ao vivo — resolve "o admin não sabe se o número está fresco" */
.ao-vivo {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--superficie); border:1px solid var(--ok-borda);
  border-radius:var(--r-pill); padding:7px 14px 7px 12px;
  font-size:var(--fs-2); font-weight:var(--peso-forte); color:var(--ok-600);
}
.ao-vivo .ponto { width:9px; height:9px; border-radius:var(--r-pill); background:var(--ok-600); position:relative; }
.ao-vivo .ponto::after {
  content:""; position:absolute; inset:0; border-radius:var(--r-pill);
  background:var(--ok-600); animation:pulso 2s ease-out infinite;
}
.ao-vivo .horario { color:var(--texto-3); font-weight:var(--peso-medio); border-left:1px solid var(--borda); padding-left:10px; }
@keyframes pulso { 0%{opacity:1;transform:scale(1)} 70%,100%{opacity:0;transform:scale(2.6)} }
@media (prefers-reduced-motion:reduce) { .ao-vivo .ponto::after { animation:none; } }

/* ==== 9. BOTÕES ========================================================== */
button, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:var(--toque); padding:0 var(--sp-4);
  border:1px solid transparent; border-radius:var(--r-2);
  background:var(--navy-800); color:#fff;
  font-family:inherit; font-size:var(--fs-3); font-weight:var(--peso-forte);
  white-space:nowrap; cursor:pointer; transition:background var(--transicao), border-color var(--transicao);
}
button:hover, .btn:hover { background:var(--navy-600); color:#fff; text-decoration:none; }
/* Botão de destaque no padrão do site ("Área Restrita", "Saiba mais"): ouro com texto marinho */
.btn-destaque, .box-login button, .pauta-card .btn {
  background:var(--ouro-500); color:var(--navy-800); letter-spacing:.3px;
  box-shadow:0 10px 15px -3px rgba(240,177,0,.2), 0 4px 6px -4px rgba(240,177,0,.2);
}
.btn-destaque:hover, .box-login button:hover, .pauta-card .btn:hover { background:var(--ouro-400); color:var(--navy-800); }
button:disabled, .btn[aria-disabled="true"] {
  background:var(--n-200); color:var(--n-500); border-color:transparent; cursor:not-allowed;
}

.btn-secondary { background:var(--superficie); color:var(--n-800); border-color:var(--borda); }
.btn-secondary:hover { background:var(--superficie); color:var(--n-900); border-color:var(--borda-forte); }
.btn-success { background:var(--ok-600); }
.btn-success:hover { background:var(--ok-700); }
.btn-warning { background:var(--ouro-500); color:var(--navy-900); }
.btn-warning:hover { background:var(--ouro-400); color:var(--navy-900); }

/* Destrutivo: fantasma em repouso, sólido no hover — pesa sem gritar na barra */
.btn-danger { background:var(--perigo-100); color:var(--perigo-600); border-color:var(--perigo-borda); }
.btn-danger:hover { background:var(--perigo-600); color:#fff; border-color:var(--perigo-600); }
.btn-danger-solido { background:var(--perigo-600); color:#fff; }
.btn-danger-solido:hover { background:var(--perigo-700); }

.btn-bloco { width:100%; min-height:var(--toque-conforto); font-size:var(--fs-5); }
.btn-sm { min-height:36px; padding:0 var(--sp-3); font-size:var(--fs-2); } /* nunca em alvo primário do votante */
.btn-icone { width:var(--toque); padding:0; }

/* Estado ocupado, aplicável a qualquer botão via aria-busy */
button[aria-busy="true"], .btn[aria-busy="true"] { pointer-events:none; opacity:.75; }
button[aria-busy="true"]::before, .btn[aria-busy="true"]::before {
  content:""; width:14px; height:14px; border-radius:var(--r-pill);
  border:2px solid currentColor; border-top-color:transparent; animation:girar .7s linear infinite;
}
@keyframes girar { to { transform:rotate(360deg); } }

.barra-acoes {
  display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center;
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--r-2); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-5);
}
.barra-acoes .empurra { flex:1; }  /* separa construtivo de destrutivo */
.barra-acoes .rotulo-secao { margin:0 var(--sp-1) 0 0; }

/* Barra de salvamento fixa — para formulários longos de múltiplos cartões
   (Configurações). Resolve o botão que parecia pertencer só ao último card. */
.barra-salvar {
  position:sticky; bottom:0; z-index:6;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); flex-wrap:wrap;
  background:color-mix(in srgb, var(--superficie) 96%, transparent);
  border:1px solid var(--borda); border-radius:var(--r-2);
  padding:var(--sp-3) var(--sp-5);
  box-shadow:0 -8px 24px -14px rgba(2,6,24,.3);
}
.barra-salvar .acoes { display:flex; gap:var(--sp-3); flex-wrap:wrap; }

/* ==== 10. FORMULÁRIOS ==================================================== */
label { display:block; font-size:var(--fs-2); font-weight:var(--peso-forte); color:var(--n-800); margin:var(--sp-4) 0 var(--sp-1); }
label .opcional { font-weight:var(--peso-normal); color:var(--texto-3); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="date"], input[type="datetime-local"], input[type="search"],
select, textarea {
  width:100%; min-height:var(--toque); padding:0 var(--sp-3);
  font-family:inherit; font-size:var(--fs-4); color:var(--texto);
  background:var(--superficie); border:1px solid var(--borda-forte); border-radius:var(--r-2);
}
textarea { padding:var(--sp-3); resize:vertical; min-height:96px; line-height:var(--lh-normal); }
input::placeholder, textarea::placeholder { color:var(--n-500); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--navy-700); box-shadow:var(--foco); }

.dica-campo { font-size:var(--fs-2); color:var(--texto-3); margin-top:var(--sp-1); }

/* Erro no próprio campo — antes só existia faixa genérica no topo */
.campo-erro input, .campo-erro select, .campo-erro textarea { border-color:var(--perigo-600); }
.campo-erro input:focus, .campo-erro select:focus, .campo-erro textarea:focus { box-shadow:var(--foco-perigo); }
.mensagem-erro {
  display:flex; align-items:flex-start; gap:6px; margin-top:var(--sp-1);
  font-size:var(--fs-2); font-weight:var(--peso-medio); color:var(--perigo-700);
}
.mensagem-erro::before { content:"!"; flex:none; width:16px; height:16px; border-radius:var(--r-pill); background:var(--perigo-600); color:#fff; font-weight:var(--peso-extra); font-size:11px; text-align:center; line-height:16px; }

.row { display:flex; gap:var(--sp-4); }
.row > * { flex:1; min-width:0; }
fieldset { border:0; padding:0; margin:0 0 var(--sp-5); }
legend { padding:0; font-size:var(--fs-4); font-weight:var(--peso-forte); color:var(--n-900); }

/* Tela de login — a única diferença admin/votante é o selo, não a marca */
.tela-login {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:var(--sp-4);
  background:radial-gradient(90% 70% at 50% 0%, var(--navy-700) 0%, var(--navy-900) 70%) var(--navy-900);
}
.box-login {
  width:100%; max-width:420px; background:var(--superficie);
  padding:var(--sp-7); border-radius:var(--r-4); box-shadow:var(--elev-3);
}
.box-login h1 { font-size:var(--fs-7); font-weight:var(--peso-extra); text-align:center; color:var(--navy-800); }
.box-login .sub { text-align:center; color:var(--texto-3); font-size:var(--fs-2); margin:var(--sp-1) 0 var(--sp-6); }
.box-login button { width:100%; min-height:var(--toque-conforto); margin-top:var(--sp-5); font-size:var(--fs-5); }
.box-login .footer-link { text-align:center; margin-top:var(--sp-4); font-size:var(--fs-3); }

/* ==== 11. TABELAS ======================================================== */
.tabela-envelope {
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--r-2); overflow:hidden; margin-bottom:var(--sp-5);
}
.tabela-envelope > .card-cabecalho { margin:0; }
.tabela-rolagem { overflow-x:auto; -webkit-overflow-scrolling:touch; }

table { width:100%; border-collapse:collapse; background:var(--superficie); }
table th {
  background:var(--superficie-2); text-align:left; padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-1); font-weight:var(--peso-extra); color:var(--texto-3);
  text-transform:uppercase; letter-spacing:.7px; white-space:nowrap;
  border-bottom:1px solid var(--divisor);
}
table td { padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--divisor); font-size:var(--fs-3); vertical-align:middle; }
table tr:last-child td { border-bottom:0; }
tbody tr:hover { background:var(--superficie-2); }
table td.num, table th.num { text-align:right; font-variant-numeric:tabular-nums; }
table td .primario { font-size:var(--fs-4); font-weight:var(--peso-medio); color:var(--navy-700); }
table td .secundario { font-size:var(--fs-2); color:var(--texto-3); }

/* Coluna fixa para tabelas largas (Sindicalizados, Fila de e-mail) */
.tabela-rolagem.fixa-1a th:first-child, .tabela-rolagem.fixa-1a td:first-child {
  position:sticky; left:0; background:var(--superficie); z-index:1;
  box-shadow:1px 0 0 var(--divisor);
}
.tabela-rolagem.fixa-1a th:first-child { background:var(--superficie-2); }

.rodape-tabela {
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  flex-wrap:wrap; padding:var(--sp-3) var(--sp-4);
  background:var(--superficie-2); border-top:1px solid var(--divisor);
  font-size:var(--fs-2); color:var(--texto-3); font-weight:var(--peso-medio);
}
.paginacao { display:flex; gap:var(--sp-1); align-items:center; }
.paginacao a, .paginacao span {
  min-width:36px; min-height:36px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 var(--sp-2); border-radius:var(--r-1); font-size:var(--fs-2); font-weight:var(--peso-forte); color:var(--n-800);
}
.paginacao a:hover { background:var(--n-200); text-decoration:none; }
.paginacao .atual { background:var(--navy-700); color:#fff; }

.filtros {
  display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:flex-end;
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--r-2); padding:var(--sp-4); margin-bottom:var(--sp-4);
}
.filtros label { margin-top:0; }
.filtros .campo { flex:1 1 180px; }
.filtros .campo.busca { flex:2 1 260px; }

/* ==== 12. ALERTAS ======================================================== */
.alert {
  display:flex; gap:var(--sp-3); align-items:flex-start;
  padding:var(--sp-4); border-radius:var(--r-2); border:1px solid transparent;
  margin-bottom:var(--sp-4); font-size:var(--fs-3); line-height:var(--lh-normal);
}
.alert strong { display:block; font-size:var(--fs-4); margin-bottom:2px; }
.alert::before { flex:none; font-weight:var(--peso-extra); font-size:var(--fs-4); line-height:1.2; }
.alert-erro    { background:var(--perigo-100); border-color:var(--perigo-borda); color:var(--perigo-700); }
.alert-erro::before { content:"!"; }
.alert-sucesso { background:var(--ok-100); border-color:var(--ok-borda); color:var(--ok-700); }
.alert-sucesso::before { content:"✓"; }
.alert-info    { background:var(--info-100); border-color:var(--info-borda); color:var(--info-700); }
.alert-info::before { content:"i"; }
.alert-atencao { background:var(--atencao-100); border-color:var(--atencao-borda); color:var(--ouro-700); }
.alert-atencao::before { content:"!"; }

/* Alerta flutuante: para formulários longos, onde a faixa no topo não é vista */
.alertas-flutuantes {
  position:fixed; right:var(--sp-4); bottom:var(--sp-4); z-index:1100;
  width:min(400px, calc(100vw - var(--sp-7))); display:flex; flex-direction:column; gap:var(--sp-2);
}
.alertas-flutuantes .alert { box-shadow:var(--elev-3); margin:0; background:var(--superficie); }

/* ==== 13. MODAIS E CONFIRMAÇÃO ===========================================
   Um único padrão substitui todo alert()/confirm()/prompt().
   Gravidade em 3 níveis pela faixa superior:
     .grave (irreversível) · .aviso (dispara e-mail em massa) · .neutro    */
.modal-bg {
  position:fixed; inset:0; background:rgba(2,6,24,.55);
  display:flex; align-items:flex-start; justify-content:center;
  padding:var(--sp-6) var(--sp-4); overflow-y:auto; z-index:1000;
}
.modal {
  width:100%; max-width:560px; background:var(--superficie);
  border-radius:var(--r-3); box-shadow:var(--elev-3); overflow:hidden;
  animation:surge .2s ease both;
}
.modal.largo { max-width:760px; }
@keyframes surge { from { opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion:reduce) { .modal { animation:none; } }

.modal-faixa {
  display:flex; align-items:center; gap:9px; padding:var(--sp-3) var(--sp-6);
  font-size:var(--fs-1); font-weight:var(--peso-extra);
  text-transform:uppercase; letter-spacing:1px;
}
.modal-faixa.grave  { background:var(--perigo-600); color:#fff; }
.modal-faixa.aviso  { background:var(--ouro-500);   color:var(--navy-900); }
.modal-faixa.neutro { background:var(--navy-700);   color:#fff; }

.modal-corpo { padding:var(--sp-5) var(--sp-6) var(--sp-6); }
.modal-corpo h2 { font-size:var(--fs-7); font-weight:var(--peso-extra); margin-bottom:var(--sp-3); }
.modal-corpo > p { font-size:var(--fs-4); color:var(--texto-2); line-height:var(--lh-solto); }

/* Recapitulação de consequências — o que o confirm() nativo nunca mostrou */
.consequencias { border:1px solid var(--borda); border-radius:var(--r-2); padding:var(--sp-4); background:var(--superficie-2); }
.consequencias.grave { background:var(--perigo-100); border-color:var(--perigo-borda); }
.consequencias.aviso { background:var(--ouro-050);   border-color:var(--atencao-borda); }
.consequencias li { display:flex; gap:10px; align-items:flex-start; margin-bottom:var(--sp-2); font-size:var(--fs-3); color:var(--n-800); line-height:var(--lh-normal); }
.consequencias ul { list-style:none; margin:0; padding:0; }
.consequencias li::before {
  content:"○"; flex:none; width:20px; height:20px; border-radius:var(--r-pill);
  background:var(--n-200); color:var(--n-800);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:var(--peso-extra);
}
.consequencias li.perde::before { content:"✕"; background:var(--perigo-600); color:#fff; }
.consequencias li.ganha::before { content:"✓"; background:var(--ok-600); color:#fff; }

/* Trava por digitação, só para o nível .grave */
.trava-digitada input { font-family:ui-monospace, Menlo, monospace; font-weight:var(--peso-forte); letter-spacing:1px; }

.modal-actions {
  display:flex; justify-content:flex-end; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-6); background:var(--superficie-2); border-top:1px solid var(--divisor);
}

/* Folha inferior — confirmação no mobile, ao alcance do polegar */
.folha-bg { position:fixed; inset:0; background:rgba(2,6,24,.6); z-index:1000; }
.folha {
  position:fixed; left:0; right:0; bottom:0; z-index:1001;
  background:var(--superficie); border-radius:var(--r-4) var(--r-4) 0 0;
  padding:var(--sp-6) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.4);
  animation:sobe .26s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes sobe { from { transform:translateY(100%); } }
@media (prefers-reduced-motion:reduce) { .folha { animation:none; } }
.folha .puxador { width:44px; height:5px; border-radius:var(--r-pill); background:var(--borda); margin:0 auto var(--sp-4); }
.folha h2 { font-size:var(--fs-7); font-weight:var(--peso-extra); margin-bottom:var(--sp-2); }
.folha .btn { width:100%; min-height:var(--toque-conforto); font-size:var(--fs-5); margin-top:var(--sp-2); }

/* ==== 14. VOTAÇÃO ======================================================== */
.pauta-card {
  background:var(--superficie); border:1px solid var(--borda);
  border-radius:var(--r-3); padding:var(--sp-5); margin-bottom:var(--sp-4);
  box-shadow:var(--elev-1);
}
/* Exige ação: topo dourado + elevação. Arquivo: plano e recuado. */
.pauta-card.exige-acao { border-top:4px solid var(--ouro-500); box-shadow:var(--elev-2); }
.pauta-card.exige-acao h3 { font-size:var(--fs-6); }
.pauta-card.arquivo { background:var(--superficie-2); box-shadow:none; padding:var(--sp-4) var(--sp-5); }
.pauta-card.arquivo h3 { font-size:var(--fs-4); font-weight:var(--peso-medio); color:var(--n-800); }
.pauta-card h3 { margin-bottom:var(--sp-2); }
.pauta-card p { font-size:var(--fs-3); color:var(--texto-2); }
.pauta-card .btn { width:100%; min-height:var(--toque-conforto); font-size:var(--fs-5); margin-top:var(--sp-3); }

.prazo {
  display:flex; align-items:center; gap:var(--sp-2);
  background:var(--ouro-050); border:1px solid var(--atencao-borda);
  border-radius:var(--r-2); padding:9px var(--sp-3);
  font-size:var(--fs-2); font-weight:var(--peso-forte); color:var(--ouro-700);
}
.prazo.urgente { background:var(--perigo-100); border-color:var(--perigo-borda); color:var(--perigo-700); }

/* Progresso de etapas */
.etapas-progresso { display:flex; gap:var(--sp-2); margin:var(--sp-3) 0 7px; }
.etapas-progresso i { flex:1; height:6px; border-radius:var(--r-pill); background:var(--borda); }
.etapas-progresso i.feita, .etapas-progresso i.atual { background:var(--navy-700); }

/* Aviso de sigilo — dito ANTES do voto, não depois */
.painel-sigilo {
  display:flex; gap:var(--sp-3); align-items:flex-start;
  background:var(--navy-050); border:1px solid var(--navy-borda);
  border-radius:var(--r-3); padding:var(--sp-4);
}
.painel-sigilo .icone {
  flex:none; width:34px; height:34px; border-radius:10px;
  background:var(--navy-700); color:var(--ouro-500);
  display:flex; align-items:center; justify-content:center; font-size:17px;
}
.painel-sigilo strong { display:block; font-size:var(--fs-3); color:var(--navy-700); margin-bottom:3px; }
.painel-sigilo p { margin:0; font-size:var(--fs-2); color:var(--sigilo-texto); line-height:var(--lh-normal); }

/* Aviso de irreversibilidade — peso proporcional à consequência */
.aviso-irreversivel {
  display:flex; gap:var(--sp-3); align-items:flex-start;
  background:var(--perigo-100); border:1px solid var(--perigo-borda);
  border-radius:var(--r-3); padding:var(--sp-4); color:var(--perigo-700);
}
.aviso-irreversivel::before {
  content:"!"; flex:none; width:26px; height:26px; border-radius:var(--r-pill);
  background:var(--perigo-600); color:#fff; font-size:15px; font-weight:var(--peso-extra);
  display:flex; align-items:center; justify-content:center;
}
.aviso-irreversivel strong { display:block; font-size:var(--fs-4); margin-bottom:2px; }

/* Opção de voto — alvo de 64px, radio desenhado, sem depender de accent-color */
.opcao {
  display:flex; gap:var(--sp-4); align-items:center;
  min-height:64px; padding:var(--sp-4); margin-bottom:var(--sp-3);
  background:var(--superficie); border:2px solid var(--divisor); border-radius:var(--r-3);
  cursor:pointer; transition:border-color var(--transicao), background var(--transicao);
}
.opcao:hover { border-color:var(--navy-500); }
.opcao input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.opcao .marca {
  flex:none; width:26px; height:26px; border-radius:var(--r-pill);
  border:2px solid var(--borda-forte); background:var(--superficie);
  display:flex; align-items:center; justify-content:center;
}
.opcao label { margin:0; font-size:var(--fs-5); font-weight:var(--peso-medio); color:var(--texto); cursor:pointer; flex:1; line-height:var(--lh-apertado); }
.opcao.selecionada { background:var(--navy-050); border-color:var(--navy-700); box-shadow:var(--elev-2); }
.opcao.selecionada .marca { background:var(--navy-700); border-color:var(--navy-700); }
.opcao.selecionada .marca::after { content:""; width:10px; height:10px; border-radius:var(--r-pill); background:var(--ouro-500); }
.opcao:focus-within { outline:3px solid var(--navy-700); outline-offset:2px; }

/* Barra fixa de confirmação no mobile */
.barra-confirmar {
  position:sticky; bottom:0; z-index:5;
  background:color-mix(in srgb, var(--superficie) 96%, transparent);
  border-top:1px solid var(--borda);
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
  box-shadow:0 -8px 24px -12px rgba(2,6,24,.25);
}
.barra-confirmar .resumo { font-size:var(--fs-2); font-weight:var(--peso-medio); color:var(--texto-3); margin-bottom:var(--sp-2); min-height:18px; }

/* Comprovante de voto — substitui a faixa fina que sumia com o reload */
.comprovante {
  background:var(--navy-700); color:#fff; text-align:center;
  padding:var(--sp-7) var(--sp-5); border-radius:var(--r-3);
}
.comprovante .selo {
  width:112px; height:112px; margin:0 auto var(--sp-5);
  border-radius:var(--r-pill); background:var(--ouro-500); color:var(--navy-700);
  display:flex; align-items:center; justify-content:center;
  font-size:52px; font-weight:var(--peso-extra);
  box-shadow:0 0 0 10px rgba(240,177,0,.18);
  animation:selo .5s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes selo { from { transform:scale(.6); opacity:0; } }
@media (prefers-reduced-motion:reduce) { .comprovante .selo { animation:none; } }
.comprovante h2 { font-size:var(--fs-8); font-weight:var(--peso-extra); margin-bottom:var(--sp-2); }
.comprovante p { color:#CAD5E2; font-size:var(--fs-4); max-width:34ch; margin:0 auto var(--sp-6); }
.comprovante dl {
  margin:0; text-align:left; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r-3); padding:var(--sp-4);
}
.comprovante dl > div { display:flex; justify-content:space-between; gap:var(--sp-4); padding:11px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.comprovante dl > div:last-child { border-bottom:0; }
.comprovante dt { font-size:var(--fs-2); color:#CAD5E2; font-weight:var(--peso-medio); }
.comprovante dd { margin:0; font-size:var(--fs-3); font-weight:var(--peso-forte); }

/* ==== 15. RESULTADOS ===================================================== */
.resultado-item { margin-bottom:var(--sp-4); }
.resultado-item .label { display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-4); margin-bottom:7px; }
.resultado-item .label .texto { font-size:var(--fs-4); font-weight:var(--peso-medio); line-height:var(--lh-apertado); }
.resultado-item .label .numeros { font-size:var(--fs-2); font-weight:var(--peso-forte); color:var(--texto-2); white-space:nowrap; font-variant-numeric:tabular-nums; }
.resultado-item .barra { height:28px; background:var(--n-200); border-radius:var(--r-2); overflow:hidden; }
.resultado-item .barra .preenchido {
  height:100%; background:var(--navy-500); border-radius:var(--r-2);
  display:flex; align-items:center; justify-content:flex-end; padding:0 var(--sp-3);
  color:#fff; font-size:var(--fs-2); font-weight:var(--peso-extra); transition:width .5s ease;
}
.resultado-item.vencedora .label .texto { font-weight:var(--peso-extra); color:var(--ok-600); }
.resultado-item .barra .preenchido.vencedora { background:var(--ok-600); }

.quorum .cabecalho { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-2); }
.quorum .estado { display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-4); font-weight:var(--peso-extra); color:var(--ok-600); }
.quorum .estado.nao-atingido { color:var(--perigo-600); }
.quorum .trilha { height:14px; background:var(--n-200); border-radius:var(--r-pill); overflow:hidden; position:relative; }
.quorum .trilha i { display:block; height:100%; background:var(--ok-600); border-radius:var(--r-pill); }
.quorum .trilha .marca-minima { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--navy-900); }

/* Modo assembleia — projeção; herda tokens, só amplia escala */
.assembleia { background:var(--navy-900); color:#fff; padding:var(--sp-8) var(--sp-9); min-height:100vh; }
.assembleia h1 { font-size:var(--fs-10); letter-spacing:-1.2px; }
.assembleia .resultado-item .label .texto { font-size:var(--fs-8); color:#fff; }
.assembleia .resultado-item.vencedora .label .texto { color:var(--ouro-500); }
.assembleia .resultado-item .barra { height:44px; background:rgba(255,255,255,.09); }
.assembleia .resultado-item .barra .preenchido { background:var(--navy-500); }
.assembleia .resultado-item .barra .preenchido.vencedora { background:var(--ouro-500); }
.assembleia .numero-grande { font-size:66px; font-weight:var(--peso-extra); letter-spacing:-2.5px; line-height:1; }

/* ==== 16. ESTADOS: CARREGANDO · VAZIO · ERRO ============================= */
.esqueleto {
  background:linear-gradient(90deg, var(--n-200) 25%, var(--n-100) 37%, var(--n-200) 63%);
  background-size:400% 100%; animation:brilho 1.4s ease infinite;
  border-radius:var(--r-1); height:14px; margin-bottom:var(--sp-2);
}
.esqueleto.titulo { height:22px; width:60%; margin-bottom:var(--sp-3); }
.esqueleto.linha-curta { width:40%; }
.esqueleto.bloco { height:80px; border-radius:var(--r-2); }
@keyframes brilho { from { background-position:100% 0; } to { background-position:0 0; } }
@media (prefers-reduced-motion:reduce) { .esqueleto { animation:none; } }

.estado-vazio {
  text-align:center; padding:var(--sp-8) var(--sp-5);
  background:var(--superficie); border:1px dashed var(--borda-forte); border-radius:var(--r-3);
}
.estado-vazio .figura {
  width:56px; height:56px; margin:0 auto var(--sp-4); border-radius:var(--r-3);
  background:var(--navy-050); color:var(--navy-600);
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.estado-vazio h3 { font-size:var(--fs-6); margin-bottom:var(--sp-2); }
.estado-vazio p { color:var(--texto-2); font-size:var(--fs-3); max-width:46ch; margin:0 auto var(--sp-4); }
.estado-vazio.erro { border-color:var(--perigo-borda); background:var(--perigo-100); }
.estado-vazio.erro .figura { background:var(--perigo-600); color:#fff; }
.estado-vazio.erro h3 { color:var(--perigo-700); }

/* ==== 17. UTILITÁRIOS (poucos, nomeados pela escala) ===================== */
.pilha-2 > * + * { margin-top:var(--sp-2); }
.pilha-3 > * + * { margin-top:var(--sp-3); }
.pilha-4 > * + * { margin-top:var(--sp-4); }
.pilha-5 > * + * { margin-top:var(--sp-5); }
.flex { display:flex; gap:var(--sp-3); align-items:center; }
.flex-entre { display:flex; gap:var(--sp-4); align-items:center; justify-content:space-between; flex-wrap:wrap; }
.spacer { height:var(--sp-4); }
.nowrap { white-space:nowrap; }
.num-tab { font-variant-numeric:tabular-nums; }

/* Compatibilidade com páginas legadas ainda não redesenhadas
   (verificar.html, admin/esqueci-senha.html, admin/redefinir-senha.html, manuais) */
.wordmark { font-weight:var(--peso-extra); letter-spacing:-.5px; }
.wordmark .w-sin { color:var(--navy-700); }
.wordmark .w-prf { color:var(--ouro-700); }
.wordmark .w-rs  { color:var(--navy-500); }
.brand-logo { display:block; margin:0 auto var(--sp-3); }
.box-login .brand-logo { width:88px; height:auto; }
.box-login h1.wordmark { font-size:var(--fs-8); }
.sidebar .brand { display:flex; align-items:center; gap:10px; padding:0 var(--sp-5); margin-bottom:4px; }
.sidebar .brand img { width:42px; height:auto; flex:none; }
.sidebar .brand .wordmark { font-size:var(--fs-6); line-height:1; }
.sidebar .brand .wordmark .w-sin { color:#fff; }
.sidebar .brand .wordmark .w-prf { color:var(--ouro-500); }
.sidebar .brand .wordmark .w-rs  { color:rgba(255,255,255,.65); }
/* Brasão oficial ao lado do nome, na barra lateral e no topo mobile */
.marca .lockup { display:flex; align-items:center; gap:10px; }
.marca .logo { width:44px; height:44px; object-fit:contain; flex:none; }
.topo-mobile .marca .logo { width:34px; height:34px; }
/* "SINPRF/RS" em branco e peso 900, como no cabeçalho do site */
.marca .prf, .marca .uf { color:inherit; }
/* Assinatura horizontal (SINPRF Rio Grande do Sul) nas telas de acesso.
   Arquivo com fundo branco puro; multiply evita qualquer borda no cartão. */
.box-login .assinatura { display:block; width:min(270px, 80%); height:auto; margin:0 auto var(--sp-5); mix-blend-mode:multiply; }

/* Fotos de opção (eleições de chapas/candidatos) */
.opcao .foto-opcao {
  width:56px; height:70px; object-fit:cover; border-radius:var(--r-1);
  flex:none; border:1px solid var(--borda); background:var(--superficie-2);
}
@keyframes liveDot { 0%,100% { opacity:1; } 50% { opacity:.25; } }
.ponto-live { display:inline-block; width:10px; height:10px; background:#fff; border-radius:var(--r-pill); animation:liveDot 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce) { .ponto-live { animation:none; } }

/* Pílulas de resumo do diff de importação (espec. no protótipo de Sindicalizados) */
.pill-diff { display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:var(--r-2); min-width:104px; }
.pill-diff b { font-size:24px; font-weight:var(--peso-extra); letter-spacing:-.6px; line-height:1; }
.pill-diff span { font-size:var(--fs-1); font-weight:var(--peso-forte); text-transform:uppercase; letter-spacing:.6px; }
.amostras { list-style:none; margin:8px 0 0; padding:0; font-size:var(--fs-2); color:var(--texto-2); line-height:1.6; }
.amostras li { display:flex; gap:8px; }
.amostras li::before { content:"·"; color:var(--n-500); }

/* ==== 18. RESPONSIVO ====================================================
   Três pontos de quebra, em vez da única media query anterior.            */
@media (max-width:1024px) {
  .main { padding:var(--sp-5); }
  .grid-2 { grid-template-columns:1fr; }
}

@media (max-width:768px) {
  /* A sidebar SAI do fluxo — nunca mais uma faixa de 64px sem conteúdo */
  .sidebar { display:none; }
  .main { padding:var(--sp-4) var(--sp-4) 88px; }  /* espaço da barra inferior */

  .topo-mobile {
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
    position:sticky; top:0; z-index:20;
    background:var(--navy-900); color:#fff; padding:var(--sp-2) var(--sp-3);
  }
  .topo-mobile .marca { font-size:var(--fs-6); font-weight:900; letter-spacing:.3px; }
  .topo-mobile .voltar {
    width:var(--toque); height:var(--toque); display:flex; align-items:center; justify-content:center;
    background:none; border:0; color:#fff; font-size:22px; border-radius:var(--r-3);
  }

  .barra-inferior {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20;
    background:var(--superficie); border-top:1px solid var(--borda);
    padding:6px var(--sp-1) calc(10px + env(safe-area-inset-bottom));
  }
  .barra-inferior a {
    flex:1; min-height:48px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px;
    font-size:11px; font-weight:var(--peso-medio); color:var(--texto-3); border-radius:var(--r-3);
  }
  .barra-inferior a .icone { font-size:19px; line-height:1; }
  .barra-inferior a.ativo { color:var(--navy-700); background:var(--navy-050); font-weight:var(--peso-forte); }

  .topbar h1 { font-size:var(--fs-7); }
  .row { flex-direction:column; gap:var(--sp-3); }
  .card { padding:var(--sp-4); border-radius:var(--r-3); }
  .grid-cards { grid-template-columns:1fr 1fr; }
  .metric .value { font-size:var(--fs-8); }
  .modal-actions { flex-direction:column-reverse; }
  .modal-actions .btn, .modal-actions button { width:100%; min-height:var(--toque-conforto); }

  /* Tabela larga vira lista de fichas — sem JS, via data-rotulo nas células */
  .tabela-fichas thead { display:none; }
  .tabela-fichas tr {
    display:block; background:var(--superficie); border:1px solid var(--borda);
    border-radius:var(--r-2); padding:var(--sp-3) var(--sp-4); margin-bottom:var(--sp-3);
  }
  .tabela-fichas tbody tr:hover { background:var(--superficie); }
  .tabela-fichas td { display:flex; justify-content:space-between; gap:var(--sp-4); padding:6px 0; border:0; text-align:right; }
  .tabela-fichas td::before {
    content:attr(data-rotulo); flex:none; text-align:left;
    font-size:var(--fs-1); font-weight:var(--peso-extra); text-transform:uppercase;
    letter-spacing:.6px; color:var(--texto-3);
  }
  .tabela-fichas td:first-child { border-bottom:1px solid var(--divisor); padding-bottom:var(--sp-3); margin-bottom:var(--sp-2); }
  .tabela-fichas td:first-child::before { display:none; }
  .tabela-fichas td:first-child { display:block; text-align:left; font-size:var(--fs-4); font-weight:var(--peso-forte); }
}

@media (max-width:420px) {
  .grid-cards { grid-template-columns:1fr; }
  .comprovante { padding:var(--sp-6) var(--sp-4); }
}

/* ==== 19. TEMA ===========================================================
   Tema claro fixo no conteúdo; moldura (acesso, barra lateral) no azul-marinho
   do site. O tema escuro automático descaracterizava a identidade do SINPRF/RS. */
:root { color-scheme:light; }

/* ==== 20. IMPRESSÃO (ata e resultados) =================================== */
@media print {
  .sidebar, .barra-inferior, .topo-mobile, .barra-acoes, .barra-confirmar,
  .modal-bg, .folha, .folha-bg, .alertas-flutuantes { display:none !important; }
  body { background:#fff; color:#000; }
  .main { padding:0; }
  .card, .tabela-envelope { box-shadow:none; border-color:#999; break-inside:avoid; }
  .resultado-item .barra .preenchido { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
}