/* Radar Eleitoral — estilos. Tela toda e fluida, mobile-first, temas claro/escuro por prefers-color-scheme. */
:root {
  --fundo: #f4f5f8; --card: #ffffff; --texto: #1b1f27; --texto-2: #5b6473; --borda: #dde1e8;
  --primaria: #2553b8; --c13: #c8102e; --c22: #1f5fbf; --c13-fraca: #fbe9ec; --c22-fraca: #e8effb;
  --neutro: #e4e6ec; --cinza-mapa: #cfd3db; --c13-media: #e98a98; --c22-media: #8aa9e0;
  --ok: #2e8b57; --atencao: #d98c00; --ruim: #c8102e; --atencao-fundo: #fff4e0; --ruim-fundo: #fdeaea; --ok-fundo: #e6f4ec;
  --sombra: 0 1px 2px rgba(0,0,0,.06); --raio: 10px; --linha-par: #f7f8fa; --selecao: #fff6d6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #12151c; --card: #1b2029; --texto: #e8ebf0; --texto-2: #a0a8b6; --borda: #2d3440;
    --primaria: #6f9bef; --c13: #ff5a6e; --c22: #6f9bef; --c13-fraca: #3a1d23; --c22-fraca: #1d2a44;
    --neutro: #3a404c; --cinza-mapa: #2f3541; --c13-media: #a33a48; --c22-media: #3d5fa3;
    --ok: #5ccb8a; --atencao: #f0b44c; --ruim: #ff6b7a; --atencao-fundo: #3a2d12; --ruim-fundo: #3d1b20; --ok-fundo: #16301f;
    --sombra: none; --linha-par: #1f252f; --selecao: #3a3416;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--primaria); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
h2 { font-size: 1.25rem; margin: 0; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
h4 { font-size: .9rem; margin: .6rem 0 .2rem; }
.sec-titulo { margin: 1.2rem 0 .3rem; font-size: 1.05rem; }
.legenda { color: var(--texto-2); font-size: .85rem; margin: .2rem 0 .5rem; }
.legenda.inline { display: inline; } .legenda.nomargem { margin: 0; }
.aviso { padding: 1.6rem 1rem; text-align: center; color: var(--texto-2); }
.aviso b { color: var(--texto); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c13 { color: var(--c13); } .c22 { color: var(--c22); }
.sem-dados { color: var(--texto-2); font-style: italic; }

/* cabeçalho */
.topo { position: sticky; top: 0; z-index: 10; background: var(--card); border-bottom: 1px solid var(--borda); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .5rem 16px; }
.marca { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.1rem; color: var(--texto); }
.marca img { border-radius: 8px; display: block; }
.turnos { display: inline-flex; border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; background: var(--fundo); }
.turnos button { border: 0; background: none; padding: .35rem .85rem; font-weight: 600; color: var(--texto-2); font-size: .9rem; }
.turnos button[aria-checked="true"] { background: var(--primaria); color: #fff; }
.turno-nota { order: 4; width: 100%; margin: 0; font-size: .8rem; color: var(--texto-2); }
.bases { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; background: var(--fundo); padding-left: .6rem; }
.bases-rotulo { font-size: .8rem; color: var(--texto-2); white-space: nowrap; }
.bases button { border: 0; background: none; padding: .35rem .7rem; font-weight: 600; color: var(--texto-2); font-size: .85rem; white-space: nowrap; }
.bases { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; }
.turnos button { white-space: nowrap; }
@media (max-width: 719px) { .bases { order: 2; width: 100%; justify-content: space-between; border-radius: 10px; } }
.bases button[aria-checked="true"] { background: var(--texto-2); color: var(--card); }
.limiares button { padding: .35rem .55rem; }
.limiares button[aria-checked="true"] { background: var(--atencao); color: #fff; }
.bases-rotulo.pp { padding-right: .6rem; }
.modo-comp { display: inline-flex; border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; }
.modo-comp button { border: 0; background: var(--card); padding: .15rem .6rem; font-size: .8rem; color: var(--texto-2); font-weight: 600; }
.modo-comp button[aria-pressed="true"] { background: var(--primaria); color: #fff; }
.sobe { color: var(--ok); } .desce { color: var(--ruim); }
.pcts2 { display: grid; gap: .1rem; margin-top: .4rem; font-size: .78rem; color: var(--texto-2); line-height: 1.3; }
.pcts2 span.ativa { color: var(--texto); } .pcts2 b { font-variant-numeric: tabular-nums; }
.cand.c13 .pcts2 span.ativa b { color: var(--c13); } .cand.c22 .pcts2 span.ativa b { color: var(--c22); }
table.comp2 th { white-space: normal; min-width: 70px; }

.cenario { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; }
.cenario > * { flex: 1 1 420px; }
.cenario > * { min-width: 0; }
.g-cenario { height: 230px; }
.cenario table.dados td:first-child { white-space: nowrap; }
.cenario table.dados { font-size: .84rem; } .cenario table.dados .sub { font-size: .74rem; }
.busca { position: relative; flex: 1 1 220px; order: 3; width: 100%; }
.busca input { width: 100%; padding: .45rem .7rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); font-size: 16px; }
#busca-res { position: absolute; left: 0; right: 0; top: 100%; margin: .2rem 0 0; padding: 0; list-style: none; background: var(--card); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); max-height: 60vh; overflow: auto; z-index: 11; }
#busca-res li { padding: .5rem .8rem; cursor: pointer; display: flex; justify-content: space-between; gap: .5rem; }
#busca-res li:hover, #busca-res li.ativo { background: var(--fundo); }
#busca-res li .uf { color: var(--texto-2); }
#busca-res li.vazio { color: var(--texto-2); cursor: default; }
.atualizacao { margin-left: auto; display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--texto-2); white-space: nowrap; }
.atualizacao .erro { color: var(--ruim); }
#btn-atualizar { border: 1px solid var(--borda); background: var(--fundo); border-radius: 50%; width: 32px; height: 32px; font-size: 1.1rem; line-height: 1; }
#btn-atualizar.girando { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (min-width: 720px) { .busca { order: 0; flex: 0 1 420px; width: auto; } }

main { width: 100%; padding: .6rem 16px 1rem; display: grid; gap: 1rem; }
/* filhos de grid/flex não podem crescer além da tela (tabelas largas rolam dentro do .tabela-wrap) */
main > *, .graficos > *, .grade > *, .secao-grade > *, .candidatos > *, .lista > *, .cab-titulo { min-width: 0; }
footer { padding: 1rem 16px 2.5rem; color: var(--texto-2); font-size: .85rem; border-top: 1px solid var(--borda); }
footer summary { cursor: pointer; font-weight: 600; color: var(--texto); }
.como-funciona { margin-bottom: 1rem; }
.como-funciona p { margin: .5rem 0; }
@media (min-width: 1600px) { main, .topo, footer { padding-left: 24px; padding-right: 24px; } }

/* painéis empilhados (um por nível aberto) */
.painel { background: var(--card); border: 1px solid var(--borda); border-radius: 14px; padding: .9rem; box-shadow: var(--sombra); scroll-margin-top: 64px; }
.painel-uf { border-left: 5px solid var(--primaria); }
.painel-mun { border-left: 5px solid #e6a700; }
.painel-bairro { border-left: 5px solid var(--ok); }
.painel-secao { border-left: 5px solid var(--atencao); }
.painel-cab { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.cab-titulo { flex: 1 1 260px; }
.cab-titulo h2 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sub-uf { color: var(--texto-2); font-size: .9rem; font-weight: 400; }
.cab-resumo { color: var(--texto-2); font-size: .9rem; font-variant-numeric: tabular-nums; margin-top: .15rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.cab-resumo .c13, .cab-resumo .c22 { font-weight: 700; }
.cab-acoes { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.fechar { border: 1px solid var(--borda); background: var(--fundo); border-radius: 8px; width: 34px; height: 34px; font-size: 1rem; color: var(--texto-2); }
.fechar:hover { color: var(--ruim); border-color: var(--ruim); }

/* cartões (grade fluida: mais colunas em telas largas) */
.card { background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); padding: .9rem; }
.grade { display: grid; gap: .8rem; }
/* linhas de cartões: flex com crescimento — a última coluna sempre encosta na margem direita */
.grade.cards { display: flex; flex-wrap: wrap; margin-top: .6rem; }
.grade.cards > .card { flex: 1 1 280px; min-width: 0; }
.grade.cards > .card.comparativo { flex-basis: 100%; }

.candidatos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cand { border-radius: var(--raio); padding: .7rem .8rem; border: 1px solid var(--borda); }
.cand.c13 { border-left: 6px solid var(--c13); background: linear-gradient(90deg, var(--c13-fraca), var(--fundo) 60%); }
.cand.c22 { border-left: 6px solid var(--c22); background: linear-gradient(90deg, var(--c22-fraca), var(--fundo) 60%); }
.cand .numero { font-size: .8rem; font-weight: 700; display: inline-block; padding: 0 .4rem; border-radius: 4px; color: #fff; }
.cand.c13 .numero { background: var(--c13); } .cand.c22 .numero { background: var(--c22); }
.cand .nome { font-weight: 700; margin-top: .25rem; font-size: .95rem; line-height: 1.2; }
.cand .partido { color: var(--texto-2); font-size: .8rem; }
.cand .pct { font-size: clamp(1.05rem, 4.6vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin-top: .3rem; font-variant-numeric: tabular-nums; line-height: 1.1; overflow-wrap: anywhere; }
.cand .votos { color: var(--texto-2); font-size: .8rem; }
.cand.lider .pct::after { content: " ▲"; font-size: .9rem; vertical-align: middle; }
.vantagem { text-align: center; font-size: 1.05rem; margin: .5rem 0 .1rem; }
.vantagem.pequena { font-size: .9rem; text-align: left; margin: .3rem 0 0; }
.vant-empate { color: var(--texto-2); font-weight: 600; }
.barra { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--borda); margin: .6rem 0 .3rem; }
.barra span { display: block; height: 100%; }
.barra .b13 { background: var(--c13); } .barra .b22 { background: var(--c22); }
.barra.fina { height: 8px; margin: .3rem 0; }
.linha-meio { position: relative; }
.linha-meio::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--texto); opacity: .5; }

.progresso .num-grande { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.progresso .trilho { height: 10px; background: var(--borda); border-radius: 5px; overflow: hidden; margin: .4rem 0; }
.progresso .trilho span { display: block; height: 100%; background: var(--primaria); }
.oficial { font-size: .85rem; color: var(--texto-2); margin-top: .5rem; line-height: 1.5; }
.oficial b { color: var(--texto); }
.etiqueta { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--borda); }
.etiqueta.alta { background: var(--ok-fundo); color: var(--ok); border-color: transparent; }
.etiqueta.media { background: var(--atencao-fundo); color: var(--atencao); border-color: transparent; }
.etiqueta.baixa { background: var(--ruim-fundo); color: var(--ruim); border-color: transparent; }
.projecao .pcts { display: flex; justify-content: space-between; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.destaque-disc { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.destaque-disc .num-grande { font-size: 1.6rem; font-weight: 800; }

table.comp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: .3rem 0 .6rem; }
table.comp th, table.comp td { padding: .35rem .3rem; text-align: right; border-bottom: 1px solid var(--borda); font-size: .9rem; }
table.comp th:first-child, table.comp td:first-child { text-align: left; }
table.comp td.mini { width: 34%; }
table.comp tr.agora td { font-weight: 700; }
.comparativo ul { margin: .2rem 0; padding-left: 1.1rem; font-size: .9rem; }
.dois { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.dois > * { flex: 1 1 260px; min-width: 0; }
.cand-comp { border: 1px solid var(--borda); border-radius: var(--raio); padding: .6rem .8rem; background: var(--card); }
.cand-comp.c13 { border-left: 6px solid var(--c13); } .cand-comp.c22 { border-left: 6px solid var(--c22); }
.cand-comp .nome { font-weight: 700; }
.cand-comp .numero { font-size: .8rem; font-weight: 700; display: inline-block; padding: 0 .4rem; border-radius: 4px; color: #fff; }
.cand-comp.c13 .numero { background: var(--c13); } .cand-comp.c22 .numero { background: var(--c22); }
.cand-comp .num-grande { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: .2rem; }
.cand-comp.c13 .num-grande { color: var(--c13); } .cand-comp.c22 .num-grande { color: var(--c22); }
.comparativo li { margin: .2rem 0; }

/* linha de gráficos (o mapa é o maior) */
.graficos { display: grid; gap: .8rem; margin-top: .8rem; grid-template-columns: 1fr; }
.g-card { padding: .7rem .8rem; }
.g-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.g-cab h3 { margin: 0; }
.sel-metrica-wrap { font-size: .85rem; color: var(--texto-2); }
.sel-metrica { font: inherit; padding: .25rem .4rem; border: 1px solid var(--borda); border-radius: 6px; background: var(--card); color: var(--texto); }
.grafico { width: 100%; height: 240px; }
.g-mapa { height: 55vh; min-height: 320px; }
@media (min-width: 900px) and (max-width: 1199px) { /* 2 colunas: mapa e apuração ocupam a linha inteira */
  .graficos { grid-template-columns: 1fr 1fr; }
  .g-mapa-card, .g-apur-card { grid-column: 1 / -1; }
}
@media (min-width: 1200px) and (max-width: 1899px) { /* mapa à esquerda (3 linhas), 3 gráficos empilhados à direita */
  .graficos { grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(260px, auto); }
  .g-mapa-card { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-direction: column; }
  .g-mapa { flex: 1; height: auto; min-height: 520px; }
}
@media (min-width: 1900px) { /* 5 colunas numa linha só */
  .graficos { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .g-mapa-card { display: flex; flex-direction: column; }
  .g-mapa { flex: 1; height: auto; min-height: 440px; } .grafico { height: 440px; }
}

/* seção */
.secao-grade { display: flex; flex-wrap: wrap; gap: .8rem; }
.secao-grade > * { flex: 1 1 420px; min-width: 0; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; margin: .8rem 0; font-size: .92rem; }
.kv dt { color: var(--texto-2); } .kv dd { margin: 0; }
.motivos-lista { margin: .2rem 0; padding-left: 1.2rem; }

/* abas */
.abas { display: flex; flex-wrap: wrap; gap: .2rem; border-bottom: 1px solid var(--borda); margin: 1rem 0 .6rem; }
.abas button { background: none; border: 0; border-bottom: 3px solid transparent; padding: .5rem .8rem; color: var(--texto-2); white-space: nowrap; font-weight: 600; }
.abas button[aria-selected="true"] { color: var(--primaria); border-bottom-color: var(--primaria); }

/* tabelas */
.ferramentas { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: .4rem 0; }
.filtro { flex: 1 1 200px; max-width: 420px; padding: .4rem .6rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); color: var(--texto); font-size: 16px; }
.contagem { color: var(--texto-2); font-size: .85rem; }
.tabela-wrap { overflow: auto; -webkit-overflow-scrolling: touch; background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); max-height: 70vh; }
table.dados { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.dados th, table.dados td { padding: .45rem .55rem; border-bottom: 1px solid var(--borda); vertical-align: top; text-align: left; }
table.dados th { position: sticky; top: 0; background: var(--fundo); cursor: pointer; user-select: none; white-space: nowrap; font-size: .8rem; color: var(--texto-2); z-index: 1; }
table.dados th.num { text-align: right; }
table.dados th.ord-asc::after { content: " ▲"; font-size: .7em; } table.dados th.ord-desc::after { content: " ▼"; font-size: .7em; }
table.dados tbody tr:nth-child(even) { background: var(--linha-par); }
table.dados tr.link { cursor: pointer; } table.dados tr.link:hover { background: var(--c22-fraca); }
table.dados tbody tr.selecionada, table.dados tbody tr.selecionada:hover { background: var(--selecao); box-shadow: inset 4px 0 0 #e6a700; }
table.dados td.num { font-variant-numeric: tabular-nums; text-align: right; } /* mesma regra do th.num: cabeçalho e dados alinhados */
table.dados.fixa { table-layout: fixed; }
table.dados.fixa td, table.dados.fixa th { overflow-wrap: anywhere; }
table.dados th .sub, table.dados td .sub { white-space: normal; }
table.dados .sub { color: var(--texto-2); font-size: .78rem; display: block; }
table.dados a.nome { font-weight: 600; }
table.dados td.vazio { text-align: center; color: var(--texto-2); padding: 1.2rem; }
.mostrar-tudo { margin: .5rem; padding: .4rem .8rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--card); }
.par { white-space: nowrap; }

.badge { display: inline-block; font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; border: 0; background: var(--fundo); color: var(--texto-2); white-space: nowrap; vertical-align: middle; }
.badge.normal { background: var(--ok-fundo); color: var(--ok); }
.badge.atencao { background: var(--atencao-fundo); color: var(--atencao); }
.badge.discrepante { background: var(--ruim-fundo); color: var(--ruim); }
.badge.com-motivos { cursor: pointer; }
.badge.com-motivos::after { content: " ▾"; }
.motivos { display: none; margin: .3rem 0 0; padding-left: 1rem; font-size: .8rem; color: var(--texto); white-space: normal; min-width: 180px; }
td.aberto .motivos { display: block; }

.estrela { background: none; border: 0; font-size: 1.25rem; line-height: 1; color: var(--texto-2); padding: 0 .2rem; vertical-align: middle; }
.estrela[aria-pressed="true"] { color: #e6a700; }
.estrela:hover { transform: scale(1.15); }

/* discrepâncias e favoritos */
.disc-det { margin-top: 1rem; }
.disc-det summary { cursor: pointer; font-weight: 600; }
.lista { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.item { background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); padding: .7rem .9rem; border-left: 5px solid var(--ruim); }
.item .onde { font-weight: 600; }
.item .meta { color: var(--texto-2); font-size: .85rem; }
.item .cmp { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; font-size: .88rem; margin: .4rem 0; font-variant-numeric: tabular-nums; }
.item .cmp dt { color: var(--texto-2); } .item .cmp dd { margin: 0; }
.item ul { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.item.fav { border-left-color: #e6a700; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.item.fav .onde { flex: 1 1 140px; }
.item.fav .pcts { display: flex; gap: .8rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.item.fav .estrelas { color: var(--texto-2); font-size: .85rem; }
.item.fav .pend { color: var(--texto-2); font-style: italic; font-size: .85rem; }
#favoritos > .legenda { grid-column: 1 / -1; }

.online { margin-left: .6rem; font-size: .85rem; opacity: .85; white-space: nowrap; }

/* Tetra Tecnologia — bloco centralizado no rodapé */
.tetra-rodape { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; border-top: 1px solid var(--borda); padding: 1.2rem 0 1rem; margin-top: 1rem; }
/* igual ao .site-logo de tetratecnologia.com: "Tetra" 800, "Tecnologia" 500, marca 50px, azul #163A5F */
.tetra-marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #163A5F; font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; line-height: 1; }
.tetra-marca img { width: 50px; height: 50px; display: block; }
.tetra-marca b { font-weight: 500; }
@media (prefers-color-scheme: dark) { .tetra-marca { color: #fff; } }
@media (max-width: 900px) { .tetra-marca { font-size: 19px; } .tetra-marca img { width: 42px; height: 42px; } }
.tetra-frase { margin: 0; max-width: 720px; color: var(--texto-2); }
.tetra-frase b { color: var(--texto); }
.tetra-rodape .acoes { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.btn-tetra { display: inline-block; padding: .45rem .9rem; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: .9rem; white-space: nowrap; border: 1px solid transparent; }
.btn-tetra.whats { background: #25D366; color: #073b1c; }
.btn-tetra.mail { background: var(--card); color: var(--primaria); border-color: var(--borda); }
.btn-tetra.site { background: #163A5F; color: #fff; }
.btn-tetra:hover { text-decoration: none; filter: brightness(1.05); }
footer .fonte { text-align: center; margin-top: 1rem; }