/* Paleta: identidade Eleições 2026 (TSE, Identidadevisual/). As cores das portas A/B/C
   ficam em comum.js (COR_LETRA) e são as v2 das peças de sinalização: não mudar aqui. */
:root {
  --amarelo: #FCC537; --amarelo-claro: #FEE149; --amarelo-escuro: #EAB832; --laranja: #EF9A3E;
  --azul-claro: #478BAD; --azul: #6486A7; --azul-escuro: #576C96; --navy: #042B5A;
  --verde: #98BD31; --verde-escuro: #557372; --branco: #FFFFFF;
  --texto: var(--navy); --texto-suave: #4A5F7A; --linha: #DCE3EC; --campo: #F4F7FA;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--amarelo); color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.45;
}
header.topo { background: var(--amarelo); color: var(--navy); padding: 16px 16px 10px; display: flex; align-items: center; gap: 12px; }
header.topo .marca { font-weight: 900; font-size: 24px; letter-spacing: .5px; line-height: 1; }
header.topo .marca small { display: block; font-weight: 800; font-size: 12px; letter-spacing: 1.5px; color: var(--azul-claro); margin-top: 4px; }
header.topo .onde { margin-left: auto; text-align: right; font-weight: 700; font-size: 14px; }
header.topo.equipe { background: var(--navy); color: var(--amarelo); }
header.topo.equipe .marca small { color: var(--branco); }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
h1 { font-size: 30px; margin: 8px 0 4px; line-height: 1.1; color: var(--navy); font-weight: 900; }
p.sub { margin: 0 0 16px; color: var(--navy); }
form.consulta { background: var(--branco); border-radius: 14px; padding: 16px; box-shadow: 0 2px 6px rgba(4,43,90,.15); }
label { display: block; font-weight: 800; font-size: 14px; margin: 10px 0 4px; color: var(--navy); }
input[type=text], input[type=password], input[type=search] {
  width: 100%; font: inherit; font-size: 18px; padding: 12px; border: 2px solid var(--linha); border-radius: 8px; background: var(--campo); color: var(--navy);
}
input::placeholder { color: #8A9AAE; }
input:focus { outline: none; border-color: var(--azul-claro); background: var(--branco); }
button.principal {
  width: 100%; margin-top: 14px; font: inherit; font-weight: 900; font-size: 18px; padding: 14px;
  background: var(--navy); color: var(--branco); border: 0; border-radius: 8px; cursor: pointer;
}
button.principal:disabled { opacity: .5; }
button.secundario { font: inherit; font-size: 14px; font-weight: 800; padding: 8px 12px; background: var(--branco); border: 2px solid var(--navy); border-radius: 8px; color: var(--navy); cursor: pointer; }
.dica { font-size: 14px; color: var(--texto-suave); margin: 6px 0 0; }
.aviso { background: var(--amarelo-claro); border-left: 5px solid var(--amarelo-escuro); color: var(--navy); padding: 10px 12px; border-radius: 8px; margin: 14px 0; font-size: 15px; }
.aviso.erro { background: var(--branco); border-color: var(--laranja); }
.aviso.info { background: var(--branco); border-color: var(--azul-claro); }
.aviso a { color: var(--azul-claro); font-weight: 700; }
#resultado { margin-top: 18px; }
.cartao { background: var(--branco); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 6px rgba(4,43,90,.15); border-top: 8px solid var(--cor); }
.cartao-letra { display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--cor); color: var(--cor-texto); }
.cartao-letra .letra { font-size: 72px; font-weight: 900; line-height: 1; width: 84px; text-align: center; }
.cartao-letra .rotulo { opacity: .85; }
.cartao-linha { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; padding: 14px 16px; }
/* 02/10: ênfase em porta e grupo de mesas; a seção específica do eleitor não aparece */
.cartao-grupo { padding: 14px 16px 4px; }
.cartao-grupo .rotulo { color: var(--azul); margin-top: 8px; }
.cartao-grupo .rotulo:first-child { margin-top: 0; }
.enorme { font-size: 44px; font-weight: 900; line-height: 1; color: var(--navy); }
.cartao-letra .medio { opacity: .9; font-weight: 700; }
.nota-secao { margin: 10px 16px 14px; padding: 10px 12px; background: var(--amarelo-claro); border-left: 5px solid var(--amarelo-escuro); border-radius: 8px; font-size: 15px; color: var(--navy); font-weight: 600; }
.nota-secao a { color: var(--navy); font-weight: 800; white-space: nowrap; }
.rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
.cartao-linha .rotulo { color: var(--azul); }
.grande { font-size: 26px; font-weight: 900; line-height: 1.1; }
.medio { font-size: 16px; font-weight: 800; line-height: 1.3; }
.cartao-eleitor { padding: 12px 16px 0; font-size: 15px; color: var(--navy); }
.cartao-eleitor b { font-size: 18px; }
ol.passos { list-style: none; counter-reset: passo; padding: 0 16px; margin: 16px 0; background: var(--branco); border-radius: 14px; box-shadow: 0 2px 6px rgba(4,43,90,.15); }
ol.passos li { counter-increment: passo; display: grid; grid-template-columns: 36px 1fr; gap: 4px 10px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
ol.passos li:last-child { border-bottom: 0; }
ol.passos li::before { content: counter(passo); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--navy); color: var(--amarelo); font-weight: 900; display: flex; align-items: center; justify-content: center; }
ol.passos li b { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--azul); }
ol.passos li span { font-size: 16px; color: var(--navy); }
.mapa { background: var(--branco); border-radius: 14px; padding: 8px; box-shadow: 0 2px 6px rgba(4,43,90,.15); }
.mapa svg { width: 100%; height: auto; display: block; }
.nota { font-size: 15px; background: var(--branco); border-left: 5px solid var(--verde); border-radius: 8px; padding: 10px 12px; color: var(--navy); }
footer { max-width: 640px; margin: 24px auto; padding: 0 16px 32px; font-size: 13px; color: var(--navy); }
footer a { color: var(--navy); font-weight: 700; }
.lista-equipe { list-style: none; padding: 0; margin: 12px 0; }
.lista-equipe li { background: var(--branco); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; cursor: pointer; border-left: 6px solid var(--linha); }
.lista-equipe li .nome { font-weight: 900; color: var(--navy); }
.lista-equipe li .meta { font-size: 14px; color: var(--texto-suave); grid-column: 1; }
.lista-equipe li .letra-mini { font-size: 22px; font-weight: 900; padding: 2px 10px; border-radius: 6px; grid-row: span 2; }
.faixa-equipe { background: var(--verde-escuro); color: var(--branco); font-size: 13px; font-weight: 700; padding: 6px 16px; text-align: center; }
@media (max-width: 400px) {
  .cartao-linha { grid-template-columns: 1fr 1fr; }
  .cartao-linha > :last-child { grid-column: span 2; }
}
@media print { header.topo, form, footer, button { display: none; } body { background: #FFF; } }

/* Marca de turno da lista do TRE diferente de "OK" (ex.: VT), na página da equipe */
.marca-turno { background: var(--laranja); color: var(--branco); font-weight: 700; padding: 1px 7px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
#bloco-titulo { margin-top: 6px; }

/* ---- v3 ---- */
/* Estimativa de espera (eleitor), abaixo da nota da preferencial */
.espera { margin-top: 14px; background: var(--branco); border-left: 5px solid var(--azul-claro); border-radius: 8px; padding: 12px 14px; color: var(--navy); }
.espera .rotulo { color: var(--azul); }
.espera-grande { font-size: 30px; font-weight: 900; line-height: 1.1; margin: 4px 0 8px; }
.espera p { margin: 6px 0 0; font-size: 14px; color: var(--texto-suave); }
.espera-barra { height: 10px; background: var(--campo); border-radius: 5px; overflow: hidden; }
.espera-barra span { display: block; height: 100%; border-radius: 5px; }
.espera.velha { border-left-color: var(--laranja); }
.espera-aviso { color: var(--navy) !important; font-weight: 700; }
/* Fila no Ring 3 (equipe) e painel do admin */
.painel { background: var(--branco); border-radius: 14px; padding: 16px; box-shadow: 0 2px 6px rgba(4,43,90,.15); margin: 16px 0; }
.painel h2 { font-size: 20px; margin: 0 0 6px; color: var(--navy); font-weight: 900; }
.zona-fila { display: grid; grid-template-columns: 48px 1fr 92px; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.zona-fila:last-of-type { border-bottom: 0; }
.zona-fila .letra-mini { font-size: 24px; font-weight: 900; text-align: center; padding: 6px 0; border-radius: 8px; }
.zona-fila input[type=range] { width: 100%; accent-color: var(--navy); }
.zona-fila .pct { font-size: 22px; font-weight: 900; text-align: right; }
.zona-fila .meta { grid-column: 2 / 4; font-size: 13px; color: var(--texto-suave); }
.zona-fila .meta b { color: var(--navy); }
.estado-ok { color: var(--verde-escuro); font-weight: 700; }
.estado-erro { color: #B5451B; font-weight: 700; }
.interruptor { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 18px; color: var(--navy); padding: 10px 0; }
.interruptor input { width: 28px; height: 28px; accent-color: var(--navy); }
.cofre { font-size: 14px; color: var(--texto-suave); }
.cofre input[type=password] { margin-top: 6px; }
.header-admin { background: var(--verde-escuro) !important; color: var(--branco) !important; }
.header-admin .marca small { color: var(--amarelo) !important; }
.badge-caderno { display: inline-block; background: var(--navy); color: var(--amarelo); font-weight: 900; padding: 1px 8px; border-radius: 6px; font-size: 13px; white-space: nowrap; }