:root{
  --fundo:#eceef1;
  --papel:#ffffff;
  --tinta:#1a1d24;
  --suave:#5f6672;
  --linha:#dde0e5;
  --lula:#d42a3c;
  --flavio:#1e4fd6;
  --confirma:#21a35a;
  --corrige:#f08c1c;
  --vazio:#d3d6dc;
  --contorno:#ffffff;
  --sombra:0 1px 2px rgba(20,24,32,.06),0 6px 20px rgba(20,24,32,.06);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fundo:#121419; --papel:#1b1e25; --tinta:#eef0f4; --suave:#98a0ad; --linha:#2b2f38;
    --lula:#f04456; --flavio:#4a7dff; --vazio:#30343d; --contorno:#121419;
    --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fundo:#121419; --papel:#1b1e25; --tinta:#eef0f4; --suave:#98a0ad; --linha:#2b2f38;
  --lula:#f04456; --flavio:#4a7dff; --vazio:#30343d; --contorno:#121419;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--fundo);color:var(--tinta);font:400 16px/1.45 "Schibsted Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--flavio);outline-offset:2px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

/* faixa de simulação */
.simbanner{background:var(--corrige);color:#1a1100;text-align:center;font-weight:600;font-size:14px;padding:8px 16px}

/* topo */
.topo{background:var(--papel);border-bottom:1px solid var(--linha)}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:12px}
.urna{display:grid;grid-template-columns:repeat(3,9px);gap:3px;padding:6px;background:var(--tinta);border-radius:7px}
.urna i{width:9px;height:9px;border-radius:2px;background:var(--papel);opacity:.9}
.urna i:nth-child(7){background:#fff}
.urna i:nth-child(8){background:var(--corrige)}
.urna i:nth-child(9){background:var(--confirma)}
h1{font-size:20px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.sub{font-size:13px;color:var(--suave)}
.controles{display:flex;gap:8px;align-items:center}
.turnos{display:inline-flex;background:var(--fundo);border-radius:10px;padding:3px}
.turnos button{border:0;background:none;padding:8px 14px;border-radius:8px;font-weight:600;font-size:14px;color:var(--suave);cursor:pointer}
.turnos button[aria-selected="true"]{background:var(--papel);color:var(--tinta);box-shadow:var(--sombra)}
.icone{border:1px solid var(--linha);background:var(--papel);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;cursor:pointer}

main{padding-top:20px}
.bloco,.duelo,.espera,.compartilhar{background:var(--papel);border-radius:18px;box-shadow:var(--sombra)}
.bloco{padding:18px}
.bloco h2{font-size:17px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px}
.bloco-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.bloco-cab h2{margin-bottom:6px}
.nota{font-size:13px;color:var(--suave);margin-top:8px}

/* placar principal */
.duelo{padding:20px 22px 22px;margin-bottom:16px;overflow:hidden}
.status-linha{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:5px 12px 5px 10px;border-radius:999px;background:var(--fundo)}
.led{width:9px;height:9px;border-radius:50%;background:var(--suave)}
.pill.vivo{background:color-mix(in srgb,var(--confirma) 14%,transparent);color:var(--confirma)}
.pill.vivo .led{background:var(--confirma);animation:pulso 1.4s infinite}
.pill.fim .led{background:var(--tinta)}
@keyframes pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--confirma) 60%,transparent)}80%,100%{box-shadow:0 0 0 9px transparent}}
.atualizado{font-size:13px;color:var(--suave)}

.lados{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.lado{display:flex;align-items:center;gap:16px;min-width:0}
.lado.f{justify-content:flex-end;text-align:right}
.foto{width:96px;height:128px;object-fit:cover;object-position:top;border-radius:14px;background:var(--fundo);flex:none;border:3px solid transparent}
.lado.l .foto{border-color:var(--lula)}
.lado.f .foto{border-color:var(--flavio)}
.info{min-width:0}
.nome{font-size:clamp(18px,2.6vw,26px);font-weight:800;letter-spacing:-.015em;line-height:1.1}
.partido{font-size:13px;color:var(--suave);font-weight:600}
.pct{font-size:clamp(40px,7.5vw,84px);font-weight:900;letter-spacing:-.045em;line-height:.95;margin-top:6px}
.lado.l .pct{color:var(--lula)}
.lado.f .pct{color:var(--flavio)}
.votos{font-size:14px;color:var(--suave);margin-top:4px}
.vs{font-weight:800;color:var(--suave);font-size:18px}

.barra{position:relative;display:flex;height:22px;border-radius:999px;background:var(--vazio);margin-top:20px;overflow:visible}
.barra i{display:block;height:100%;transition:width .9s cubic-bezier(.3,.7,.2,1)}
.barra .bl{background:var(--lula);border-radius:999px 0 0 999px}
.barra .bf{background:var(--flavio);border-radius:0 999px 999px 0;margin-left:auto}
.barra::after{content:"";position:absolute;left:50%;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--tinta)}
.barra .meta{position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-size:11px;font-weight:700;color:var(--suave)}
.manchete{text-align:center;font-weight:700;font-size:clamp(15px,2vw,18px);margin-top:12px}

.progresso{margin-top:18px;padding-top:16px;border-top:1px solid var(--linha)}
.prog-txt{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;margin-bottom:8px}
.prog-txt strong{font-size:18px}
#faltam{color:var(--suave)}
.prog-barra{height:8px;border-radius:999px;background:var(--vazio);overflow:hidden}
.prog-barra i{display:block;height:100%;width:0;background:var(--confirma);transition:width .9s ease}

/* contagem regressiva */
.espera{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;margin-bottom:16px;flex-wrap:wrap}
.espera h2{font-size:18px;font-weight:800;max-width:34ch;line-height:1.25}
.espera p{color:var(--suave);font-size:14px;margin-top:6px;max-width:60ch}
.relogio{display:flex;gap:8px}
.relogio div{background:var(--tinta);color:var(--papel);border-radius:10px;padding:8px 10px;text-align:center;min-width:62px}
.relogio b{display:block;font-size:28px;font-weight:800;line-height:1}
.relogio span{font-size:11px;opacity:.75}

.aviso{background:var(--papel);border-radius:14px;padding:12px 16px;font-size:14px;margin-bottom:16px;border-left:4px solid var(--corrige)}

/* grade principal */
.grade{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.lateral{display:flex;flex-direction:column;gap:16px}
@media (max-width:900px){.grade{grid-template-columns:1fr}}

.placar-estados{display:flex;gap:8px}
.chip{font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px}
.chip.l{background:color-mix(in srgb,var(--lula) 13%,transparent);color:var(--lula)}
.chip.f{background:color-mix(in srgb,var(--flavio) 13%,transparent);color:var(--flavio)}

#mapa{width:100%;height:auto;display:block;max-height:640px}
#mapa path{stroke:var(--contorno);stroke-width:1.3;stroke-linejoin:round;cursor:pointer;transition:fill .7s ease}
#mapa path.sel{stroke:var(--tinta);stroke-width:3}
#mapa path.pisca{animation:pisca 1.2s ease 2}
@keyframes pisca{50%{opacity:.35}}
#mapa text{font:700 14px "Schibsted Grotesk",sans-serif;pointer-events:none;text-anchor:middle;dominant-baseline:central;transition:fill .7s}

.legenda{margin-top:8px}
.escala{display:flex;height:12px;border-radius:6px;overflow:hidden}
.escala span{flex:1}
.escala-txt{display:flex;justify-content:space-between;font-size:12px;color:var(--suave);margin-bottom:4px}

/* tabela de candidatos */
.cands{width:100%;border-collapse:collapse}
.cands th{font-size:12px;font-weight:600;color:var(--suave);text-align:left;padding:0 0 8px;border-bottom:1px solid var(--linha)}
.cands td{padding:12px 0;border-bottom:1px solid var(--linha);vertical-align:middle}
.cands tr:last-child td{border-bottom:0}
.dir{text-align:right!important}
.c-cand{display:flex;align-items:center;gap:12px}
.c-cand img{width:52px;height:68px;object-fit:cover;object-position:top;border-radius:10px;background:var(--fundo);flex:none}
.c-nome{font-weight:800;font-size:16px;line-height:1.15}
.c-meta{font-size:12px;color:var(--suave);margin-top:2px}
.digitos{display:inline-flex;gap:3px;margin-top:6px}
.digitos b{width:22px;height:28px;display:grid;place-items:center;border:1.5px solid var(--tinta);border-radius:4px;font-size:16px;font-weight:800}
.c-votos{font-weight:600;font-size:15px;white-space:nowrap;padding-left:8px!important}
.c-pct{font-weight:900;font-size:22px;letter-spacing:-.02em;padding-left:12px!important;white-space:nowrap}
.c-pct small{display:block;font-size:12px;font-weight:600;color:var(--suave);letter-spacing:0}
.lider-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--confirma);color:#fff;margin-left:6px;vertical-align:2px}
.extra-row td{font-size:13px;color:var(--suave);padding:8px 0}

/* detalhe do estado */
.detalhe .d-linha{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 0;font-size:14px}
.detalhe .d-linha b{font-size:20px;font-weight:800}
.mini{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--vazio);margin:8px 0}
.mini i{display:block;height:100%}

/* três blocos */
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
@media (max-width:900px){.tres{grid-template-columns:1fr}}
.regioes,.particip{list-style:none}
.regioes li{padding:8px 0;border-bottom:1px solid var(--linha);font-size:14px}
.regioes li:last-child{border:0}
.r-top{display:flex;justify-content:space-between;gap:8px}
.r-top span:first-child{font-weight:700}
.r-top .l{color:var(--lula);font-weight:700}
.r-top .f{color:var(--flavio);font-weight:700}
.particip li{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--linha);font-size:14px}
.particip li:last-child{border:0}
.particip b{font-size:17px}
.particip small{color:var(--suave);margin-left:6px}
.feed{list-style:none;max-height:300px;overflow:auto}
.feed li{padding:8px 0 8px 14px;border-left:2px solid var(--linha);position:relative;font-size:14px}
.feed li::before{content:"";position:absolute;left:-5px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--suave)}
.feed li.l::before{background:var(--lula)}
.feed li.f::before{background:var(--flavio)}
.feed li.ok::before{background:var(--confirma)}
.feed time{display:block;font-size:12px;color:var(--suave)}
.feed .vazio{color:var(--suave);border:0;padding-left:0}
.feed .vazio::before{display:none}

/* tabela de estados */
.ordenar{font-size:13px;color:var(--suave);display:flex;gap:8px;align-items:center}
.ordenar select{border:1px solid var(--linha);background:var(--papel);border-radius:8px;padding:6px 8px;font-size:13px}
.tabela-rolagem{overflow-x:auto;margin:0 -18px;padding:0 18px}
.estados{width:100%;border-collapse:collapse;min-width:640px;font-size:14px}
.estados th{font-size:12px;font-weight:600;color:var(--suave);text-align:left;padding:8px 8px 8px 0;border-bottom:1px solid var(--linha);white-space:nowrap}
.estados td{padding:9px 8px 9px 0;border-bottom:1px solid var(--linha);white-space:nowrap}
.estados tr{cursor:pointer}
.estados tbody tr:hover,.estados tbody tr.sel{background:var(--fundo)}
.e-nome b{display:inline-block;width:28px}
.e-nome span{color:var(--suave)}
.e-ap{display:flex;align-items:center;gap:8px}
.e-ap i{display:block;width:60px;height:5px;border-radius:3px;background:var(--vazio);overflow:hidden}
.e-ap i::after{content:"";display:block;height:100%;width:var(--w);background:var(--confirma)}
.e-l{color:var(--lula);font-weight:700;text-align:right}
.e-f{color:var(--flavio);font-weight:700}
.barra-col{width:30%}
.e-barra{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--vazio);min-width:120px}
.e-barra i{display:block;height:100%}
.seta{font-weight:700;font-size:13px}
.seta.l{color:var(--lula)}
.seta.f{color:var(--flavio)}
.virou{font-size:11px;font-weight:800;padding:2px 6px;border-radius:5px;background:var(--corrige);color:#1a1100;margin-left:6px}

/* compartilhar */
.compartilhar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 22px;flex-wrap:wrap}
.compartilhar p{font-weight:700}
.btn-zap{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#06301a;font-weight:800;text-decoration:none;padding:12px 18px;border-radius:12px}
.btn-zap:hover{filter:brightness(1.05)}

.rodape{padding:22px 16px 40px;font-size:13px;color:var(--suave);max-width:1200px}

#tip{position:fixed;z-index:20;pointer-events:none;background:var(--papel);color:var(--tinta);border:1px solid var(--linha);border-radius:12px;padding:10px 12px;font-size:13px;box-shadow:var(--sombra);opacity:0;transition:opacity .12s;min-width:210px}
#tip b{font-size:15px}
.tl{display:flex;justify-content:space-between;gap:14px;margin-top:4px}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}

/* celular */
@media (max-width:640px){
  .lados{grid-template-columns:1fr 1fr;gap:10px}
  .vs{display:none}
  .lado{flex-direction:column;align-items:flex-start;gap:8px}
  .lado.f{flex-direction:column-reverse;align-items:flex-end}
  .foto{width:72px;height:96px}
  .duelo{padding:16px}
  .relogio div{min-width:54px}
  .relogio b{font-size:22px}
  #mapa text{font-size:18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* números com largura fixa só onde mudam ao vivo (evita espaço antes de vírgula no texto corrido) */
.votos,.c-votos,.relogio b,.particip b{font-variant-numeric:tabular-nums}
.pct.zero,.c-pct.zero{opacity:.3}

/* brasileiros no exterior */
.ordenar input{border:1px solid var(--linha);background:var(--papel);color:var(--tinta);border-radius:8px;padding:6px 8px;font-size:13px;width:220px;max-width:55vw}
.paises .e-nome b{width:auto;margin-right:6px}
.paises .e-nome b::before{content:"▸";display:inline-block;width:14px;color:var(--suave);transition:transform .2s}
.paises tr.aberto .e-nome b::before{transform:rotate(90deg)}
.paises tr.cidade{cursor:default;font-size:13px}
.paises tr.cidade td:first-child{padding-left:20px}
.paises tr.cidade .e-nome b::before{content:none}
.paises tr.cidade .e-nome b{font-weight:600}