:root {
  --bg: #f4f5f7;
  --card: #ffffff;
  --ink: #16191f;
  --ink-2: #4a5160;
  --ink-3: #7b8394;
  --line: #e2e5ea;
  --accent: #1e40af;
  --accent-2: #e8eefc;
  --ok: #0b6e4f;
  --map-bg: #b9d3ea;
  --mar: #b9d3ea;
  --pais: #ebe7dd;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1216; --card: #171b21; --ink: #e8eaee; --ink-2: #b4bac5; --ink-3: #868e9c; --line: #2a3039;
    --accent: #6d8ff0; --accent-2: #1b2440; --ok: #3ccf97; --map-bg: #102a43; --mar: #102a43; --pais: #2a2d33;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1216; --card: #171b21; --ink: #e8eaee; --ink-2: #b4bac5; --ink-3: #868e9c; --line: #2a3039;
  --accent: #6d8ff0; --accent-2: #1b2440; --ok: #3ccf97; --map-bg: #102a43; --mar: #102a43; --pais: #2a2d33;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
button, select, input { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
[hidden] { display: none !important; }

/* ---------- topo ---------- */
.topo { display: grid; grid-template-columns: auto minmax(220px, 1fr) auto; gap: 20px; align-items: center; padding: 8px 20px; background: var(--card); border-bottom: 1px solid var(--line); }
.marca { display: flex; gap: 10px; align-items: center; }
.marca img { border-radius: 5px; flex: none; }
.marca h1 { font-size: 17px; }
.sub { color: var(--ink-3); font-size: 12px; }
.br-progresso { max-width: 520px; width: 100%; justify-self: center; }
.br-linha { display: flex; align-items: baseline; gap: 8px; }
.br-pct { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.br-rot { color: var(--ink-2); font-size: 13px; }
.barra { height: 7px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 3px 0; }
.barra > div { height: 100%; width: 0; background: var(--ok); transition: width .6s; }
.br-det { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crono { display: flex; align-items: center; gap: 8px; }
.crono svg { width: 38px; height: 38px; transform: rotate(-90deg); flex: none; }
.crono-fundo { fill: none; stroke: var(--line); stroke-width: 4; }
.crono-arco { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 0; transition: stroke-dashoffset .2s linear; }
.crono b { font-size: 18px; font-variant-numeric: tabular-nums; display: block; line-height: 1; }
.crono small { color: var(--ink-3); font-size: 11px; line-height: 1.2; display: block; }
label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
select, input { text-transform: none; letter-spacing: 0; font-size: 14px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }

.atualizacao { color: var(--ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.final-tag { font-size: 12px; font-weight: 700; color: var(--ok); text-align: right; line-height: 1.15; text-transform: uppercase; letter-spacing: .04em; }
.atualizacao span[title] { cursor: help; }

/* ---------- mapa ---------- */
main { padding: 12px 20px; }
.mapa-col { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* busca de município flutuando sobre o mapa */
.mapa-col > .nav-local { position: absolute; top: 20px; left: 20px; z-index: 6; right: 70px; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.mapa-col > .nav-local > * { pointer-events: auto; }
.mapa-col > .nav-local .busca-mun { flex: 0 1 230px; }
.mapa-col > .nav-local .filtro span { display: none; }
.filtro select { height: 34px; border-radius: 999px; padding: 0 10px; box-shadow: var(--shadow); max-width: 220px; cursor: pointer; }
.mapa-col > .nav-local .busca-mun input { box-shadow: var(--shadow); }
.nav-local { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.busca-mun { flex: 0 1 240px; min-width: 150px; }
.busca-mun input { width: 100%; height: 34px; border-radius: 999px; padding: 0 14px; }

.mapa-wrap { position: relative; border-radius: 10px; background: var(--map-bg); overflow: hidden; min-height: 360px; touch-action: none; user-select: none; -webkit-user-select: none; }
#mapa, #linhas, #destaque { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#destaque { pointer-events: none; }
.mapa-wrap.movendo #destaque { visibility: hidden; }
#mapa { cursor: grab; }
#mapa.arrastando { cursor: grabbing; }
#mapa.clicavel { cursor: pointer; }
#linhas { pointer-events: none; overflow: visible; }
#linhas line { stroke: var(--ink); stroke-width: 1; opacity: .55; }
#linhas circle { fill: var(--ink); }
#rotulos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mapa-wrap.movendo #rotulos, .mapa-wrap.movendo #linhas { visibility: hidden; }
.chip-uf { position: absolute; transform: translate(-50%, -50%); background: rgba(255, 255, 255, .78); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; pointer-events: auto; cursor: pointer; box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.chip-uf span { font-weight: 500; color: var(--ink-2); margin-left: 3px; }
.chip-uf.hover, .chip-uf:hover { border-color: #f97316; box-shadow: 0 0 0 2px #f97316; }
.cartao.hover { border-color: #f97316; box-shadow: 0 0 0 2px #f97316; }
.rot-bairro.hover { color: #fff; text-shadow: 0 0 3px #c2410c, 0 0 2px #c2410c, 0 0 1px #000; outline: 2px solid #f97316; outline-offset: 2px; border-radius: 4px; }
.cartao { position: absolute; width: 178px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(15, 23, 42, .22); border-radius: 8px; padding: 4px 7px; font-size: 11.5px; line-height: 1.3; font-variant-numeric: tabular-nums; pointer-events: auto; cursor: pointer; }
.cartao-bairro { width: 208px; }
.cartao-capital .t b::before { content: "★ "; color: #b45309; }
.cartao-uf .t b { font-size: 12.5px; }
#linhas line { stroke: #0f172a; opacity: .85; stroke-width: 1.2; }
#linhas circle { fill: #0f172a; }
.cartao .t { display: flex; justify-content: space-between; gap: 6px; }
.cartao .t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao .t span { color: var(--ink-3); white-space: nowrap; }
.cartao .l { display: grid; grid-template-columns: 8px 1fr auto auto; gap: 4px; align-items: center; }
.cartao .l i { width: 8px; height: 8px; border-radius: 2px; }
.cartao .l em { font-style: normal; font-weight: 700; }
.cartao .l small { color: var(--ink-3); font-size: 10.5px; }
.cartao .l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-pais { position: absolute; transform: translate(-50%, -50%); font-size: 12px; font-style: italic; letter-spacing: .06em; color: #6b6355; text-transform: uppercase; white-space: nowrap; pointer-events: none; text-shadow: 0 0 2px rgba(255,255,255,.8); }
.rot-bairro { position: absolute; transform: translate(-50%, -50%); font-size: 11px; line-height: 1.15; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 0 3px rgba(0, 0, 0, .75), 0 0 1px rgba(0, 0, 0, .9); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rot-bairro small { display: block; font-weight: 600; font-size: 10.5px; }

.tooltip { position: absolute; pointer-events: none; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 8px; padding: 7px 10px; font-size: 12px; max-width: 280px; z-index: 8; font-variant-numeric: tabular-nums; }
.tooltip b { display: block; font-size: 13px; }
.tooltip .tipo { color: var(--ink-3); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.tooltip .l { display: flex; align-items: center; gap: 6px; }
.tooltip .l i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.tooltip .l em { font-style: normal; font-weight: 700; margin-left: auto; padding-left: 8px; }
.tooltip .acao { color: var(--accent); font-weight: 600; margin-top: 3px; display: block; }
.mapa-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--ink-2); background: color-mix(in srgb, var(--map-bg) 85%, transparent); z-index: 6; }
.zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 5; }
.zoom button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: 17px; box-shadow: var(--shadow); }
.legenda { position: absolute; left: 10px; bottom: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12px; max-width: 46%; max-height: 42%; overflow: auto; z-index: 5; box-shadow: var(--shadow); }
.legenda:empty { display: none; }
.legenda .item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.legenda .item i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
.legenda small { color: var(--ink-3); display: block; margin-top: 2px; white-space: normal; }
.btn-legenda { display: none; }
.nivel-mapa { position: absolute; left: 10px; top: 52px; z-index: 5; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--ink-2); white-space: nowrap; box-shadow: var(--shadow); pointer-events: none; max-width: calc(100% - 120px); overflow: hidden; text-overflow: ellipsis; }
.nivel-mapa b { color: var(--ink); }
.carregando { position: absolute; bottom: 10px; right: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 12px; color: var(--ink-2); z-index: 7; }

/* ---------- popup de detalhes (lateral; no celular vira painel de baixo) ---------- */
.popup { position: absolute; top: 10px; right: 54px; bottom: 10px; width: 360px; max-width: calc(100% - 64px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); z-index: 9; display: flex; flex-direction: column; overflow: hidden; }
.popup .alca { display: none; }
.popup .fechar { position: absolute; top: 8px; right: 8px; border: 0; background: var(--bg); width: 30px; height: 30px; border-radius: 99px; font-size: 14px; cursor: pointer; color: var(--ink-2); z-index: 2; }
#popupConteudo { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.p-topo { padding: 12px 16px 10px; border-bottom: 1px solid var(--line); flex: none; }
.p-corpo { padding: 10px 16px 14px; overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
.p-tipo { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); font-weight: 700; }
.p-local { font-size: 12px; color: var(--ink-3); }
.p-topo h2 { font-size: 19px; margin: 1px 0; padding-right: 30px; }
.p-pct { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.p-pct strong { font-size: 24px; }
.p-pct span { color: var(--ink-2); font-size: 12px; }
.p-acoes { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 600; font-size: 13px; }
.btn.prim { background: var(--accent); border-color: var(--accent); color: #fff; }
.painel-vazio { color: var(--ink-3); padding: 24px; text-align: center; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.kpi { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; min-width: 0; }
.kpi .r { font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .v { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .d { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secao-t { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin: 10px 0 6px; display: flex; justify-content: space-between; }
.cands { display: flex; flex-direction: column; gap: 7px; }
.cand { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; }
.cand .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cand .nm small { font-weight: 400; color: var(--ink-3); margin-left: 4px; }
.cand .pc { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.cand .bar { grid-column: 1 / -1; height: 5px; background: var(--line); border-radius: 99px; overflow: hidden; }
.cand .bar i { display: block; height: 100%; border-radius: 99px; }
.cand .vt { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 99px; font-weight: 600; margin-left: 4px; vertical-align: 1px; }
.chip.eleito { background: var(--ok); color: #fff; }
.chip.t2 { background: #b45309; color: #fff; }
.chip.mat { background: #1d4ed8; color: #fff; }
.aviso { background: var(--accent-2); border-radius: 8px; padding: 7px 10px; font-size: 13px; margin: 8px 0; }
.dica { color: var(--ink-3); font-size: 12px; margin-top: 8px; }
.mini-barra { height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 3px; }
.mini-barra i { display: block; height: 100%; background: var(--ok); }
.ver-mais { border: 0; background: none; color: var(--accent); font-weight: 600; cursor: pointer; padding: 6px 0; }

/* ---------- barra da disputa (abaixo do mapa) ---------- */


.erro { color: #d92d20; }

/* ---------- desktop (>= 1220px): tudo em uma tela, sem rolagem da página ---------- */
@media (min-width: 1220px) {
  html, body { height: 100%; overflow: hidden; }
  body { display: flex; flex-direction: column; }
  .topo { flex: none; }
  main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .mapa-col { flex: 1; min-height: 0; }
  .mapa-wrap { flex: 1; min-height: 0; }
  /* altura fixa: o mapa não "pula" quando os dados da barra chegam */
  .barra-disputa { height: 100px; min-height: 0; flex: none; overflow: hidden; }
}
@media (min-width: 1220px) and (max-height: 760px) {
  .sub, .crono small { display: none; }
  .topo { padding-top: 6px; padding-bottom: 6px; }
  main { padding-top: 8px; padding-bottom: 8px; }
  .barra-disputa { height: 90px; }
}

.btn-menu, .menu-mobile, .chip-filtro { display: none; }

/* ---------- tablet grande (1025–1219px): mesmo desenho do desktop, com rolagem ---------- */
@media (max-width: 1219px) and (min-width: 1025px) {
  .topo { grid-template-columns: 1fr auto; }
  .br-progresso { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .mapa-wrap { height: 64vh; }
  .barra-disputa { grid-template-columns: 1fr; }
}

/* ---------- celular e tablet (até 1024px): formato de aplicativo, o mapa é a tela ---------- */
@media (max-width: 1024px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { font-size: 15px; }
  /* faixa fina no topo, por cima do mapa */
  .topo { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
    padding: calc(6px + env(safe-area-inset-top)) 10px 6px; background: color-mix(in srgb, var(--card) 94%, transparent); border-bottom: 1px solid var(--line); }
  .marca h1 { font-size: 15px; white-space: nowrap; }
  .marca img { width: 20px; height: 20px; }
  .sub, .br-det, .br-rot, .crono small, .atualizacao, .final-tag { display: none; }
  .br-progresso { flex: 1; min-width: 0; max-width: none; }
  .br-linha { gap: 4px; }
  .br-pct { font-size: 16px; }
  .br-pct::after { content: " " attr(data-rot); font-size: 12px; font-weight: 500; color: var(--ink-2); }
  .barra { height: 5px; margin: 2px 0 0; }
  .crono { gap: 4px; }
  .crono svg { width: 28px; height: 28px; }
  .crono b { font-size: 14px; }
  .btn-menu { display: block; border: 1px solid var(--line); background: var(--card); border-radius: 10px; width: 40px; height: 40px; font-size: 20px; flex: none; }
  /* o mapa ocupa a tela toda */
  #abaApuracao { position: fixed; inset: 0; padding: 0; }
  .mapa-col { height: 100%; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--map-bg); gap: 0; }
  .mapa-wrap { position: absolute; inset: 0; height: auto; min-height: 0; border-radius: 0; }
  .zoom { top: calc(64px + env(safe-area-inset-top)); }
  .zoom #zoomIn, .zoom #zoomOut { display: none; } /* no toque, aproxima com dois dedos */
  .zoom button { width: 42px; height: 42px; font-size: 19px; }
  .nivel-mapa { top: calc(108px + env(safe-area-inset-top)); left: 10px; transform: none; font-size: 12px; max-width: calc(100% - 70px); }
  /* cargo e eleição à vista no mapa: tocar abre os filtros */
  .chip-filtro { display: block; position: absolute; top: calc(64px + env(safe-area-inset-top)); left: 10px; z-index: 6; max-width: calc(100% - 70px); border: 1px solid var(--accent); background: var(--card); color: var(--accent); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* legenda aberta fica ACIMA do botão (o botão continua visível para fechar); tocar nela também fecha */
  .legenda { display: none; left: 10px; right: 10px; max-width: none; bottom: calc(196px + env(safe-area-inset-bottom)); max-height: 38%; z-index: 7; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
  .legenda.aberta { display: block; }
  .btn-legenda { display: block; position: absolute; right: 10px; left: auto; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 8; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 8px 14px; font-weight: 600; box-shadow: var(--shadow); font-size: 13px; }
  .carregando { top: calc(110px + env(safe-area-inset-top)); bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }
  /* cartões semitransparentes (o mapa aparece por trás) com linhas escuras até o lugar */
  .cartao { width: 146px; background: rgba(255, 255, 255, .7); border-color: rgba(15, 23, 42, .25); box-shadow: none; font-size: 11px; padding: 3px 6px; }
  #linhas line { stroke: #0f172a; opacity: .9; stroke-width: 1.3; }
  #linhas circle { fill: #0f172a; }
  .chip-uf { background: rgba(255, 255, 255, .78); font-size: 12px; padding: 3px 9px; }
  /* barra compacta por cima do mapa, embaixo (tocar abre os detalhes) */
  .barra-disputa { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 15; height: auto; min-height: 0;
    grid-template-columns: 1fr; gap: 4px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .9); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0, 0, 0, .15); cursor: pointer; }
  /* menu de opções (☰) */
  /* filtros do celular: painel compacto logo abaixo do topo, com o mapa visível atrás (tocar fora fecha) */
  .menu-mobile { display: block; position: fixed; top: calc(58px + env(safe-area-inset-top)); left: 8px; right: 8px; z-index: 40; background: var(--card);
    border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px 10px; box-shadow: 0 0 0 100vmax rgba(15, 23, 42, .28), 0 10px 30px rgba(0, 0, 0, .25); max-height: 78vh; overflow: auto; }
  .menu-mobile[hidden] { display: none; }
  .menu-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .menu-cab b { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
  .fechar-menu { border: 0; background: var(--bg); width: 32px; height: 32px; border-radius: 99px; font-size: 14px; }
  #menuConteudo .nav-local { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
  #menuConteudo .busca-mun { grid-column: 1 / -1; width: 100%; }
  #menuConteudo .filtro { font-size: 11px; gap: 2px; }
  #menuConteudo .filtro:nth-of-type(2) { grid-column: span 1; }
  #menuConteudo .filtro select { max-width: none; width: 100%; height: 42px; font-size: 15px; border-radius: 10px; }
  #menuConteudo .busca-mun input { height: 44px; font-size: 16px; }
  /* detalhes em painel de baixo */
  /* o painel inteiro rola com o dedo (cabeçalho, números e candidatos), sem travar */
  .popup { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; max-height: 70vh; border-radius: 16px 16px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom); z-index: 25; display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
  #popupConteudo { display: block; }
  .p-corpo { overflow: visible; }
  .popup .fechar { position: sticky; top: 8px; float: right; margin: 8px 8px 0 0; }
  .popup .alca { display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--line); margin: 8px auto 0; flex: none; }
  .popup .fechar { width: 36px; height: 36px; top: 10px; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .tooltip { display: none !important; }
}
/* tablet (600–1024 px): o painel de baixo usa a largura com números em 3 colunas e fica mais baixo */
@media (min-width: 600px) and (max-width: 1024px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .popup { max-height: 52vh; left: 50%; right: auto; transform: translateX(-50%); width: min(720px, 100%); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cartao { background: rgba(23, 27, 33, .72); border-color: rgba(255, 255, 255, .2); }
  :root:not([data-theme="light"]) .chip-uf { background: rgba(23, 27, 33, .8); }
  :root:not([data-theme="light"]) #linhas line { stroke: #f1f5f9; }
  :root:not([data-theme="light"]) #linhas circle { fill: #f1f5f9; }
}
@media (max-width: 1024px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cartao { background: rgba(23, 27, 33, .72); border-color: rgba(255, 255, 255, .2); }
  :root:not([data-theme="light"]) .chip-uf { background: rgba(23, 27, 33, .8); }
  :root:not([data-theme="light"]) .barra-disputa { background: rgba(23, 27, 33, .92); }
  :root:not([data-theme="light"]) #linhas line { stroke: #f1f5f9; }
  :root:not([data-theme="light"]) #linhas circle { fill: #f1f5f9; }
}
/* painel: o mesmo lugar na eleição anterior */
.antes { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.antes div { display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; color: var(--ink-2); }
.antes i { width: 8px; height: 8px; border-radius: 2px; }
.antes span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.antes small { color: var(--ink-3); }
.antes b { font-variant-numeric: tabular-nums; color: var(--ink); }
.secao-t .ver-mais { padding: 0; font-size: 11px; text-transform: none; letter-spacing: 0; }
/* sugestões da busca (cidades e estados) */
.busca-mun { position: relative; }
.sugestoes { position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 240px; z-index: 30; margin: 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); max-height: 320px; overflow: auto; }
.sugestoes li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.sugestoes li small { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; }
.sugestoes li.ativa, .sugestoes li:hover { background: var(--accent-2); }
@media (max-width: 1024px) { .sugestoes { position: static; margin-top: 6px; max-height: none; box-shadow: none; } .sugestoes li { padding: 12px 10px; font-size: 16px; } }
/* aviso rápido (ex.: "link copiado") */
.aviso-flutuante { position: fixed; left: 50%; bottom: 120px; transform: translate(-50%, 20px); background: #0f172a; color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; }
.aviso-flutuante.visivel { opacity: 1; transform: translate(-50%, 0); }
/* celular: a barra de baixo mostra que dá para tocar e ver os detalhes */
@media (max-width: 1024px) {
  .barra-disputa::after { content: "detalhes ›"; position: absolute; top: 8px; right: 12px; font-size: 11px; font-weight: 700; color: var(--accent); }
}
/* celular pequeno (até 360 px, ex.: iPhone SE): topo numa linha só, sem cobrir os botões do mapa */
@media (max-width: 360px) {
  .marca h1 { font-size: 13.5px; }
  .marca img { width: 18px; height: 18px; }
  .br-pct { font-size: 14px; }
  .br-pct::after { content: none; }
  .topo { gap: 6px; }
  .btn-menu { width: 36px; height: 36px; font-size: 18px; }
}
/* legenda compacta (recolhível no computador) */
.legenda { max-width: 270px; }
.legenda .leg-tit { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; padding: 0 0 3px; font-weight: 700; font-size: 12px; cursor: pointer; text-align: left; color: inherit; }
.legenda .leg-tit span { color: var(--ink-3); }
.legenda.recolhida .leg-corpo { display: none; }
.legenda .ver-mais { padding: 2px 0; font-size: 12px; }
@media (max-width: 1024px) { .legenda { max-width: none; } .legenda .leg-tit span { display: none; } }
/* aviso de "sem conexão" (dados salvos no aparelho) */
.sem-conexao { position: fixed; top: 0; left: 0; right: 0; z-index: 70; background: #b45309; color: #fff; font-size: 13px; font-weight: 600; text-align: center; padding: calc(4px + env(safe-area-inset-top)) 12px 4px; }

/* ---------- barra de baixo (moderna): lugar · números da votação · colocados ---------- */
.barra-disputa { display: grid; grid-template-columns: minmax(170px, 230px) auto minmax(0, 1fr); gap: 18px; align-items: center; min-height: 88px; }
.bd-local { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.bd-local small { color: var(--ink-3); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-local .nome { font-weight: 800; font-size: 17px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-local .apurado { font-size: 12px; color: var(--ink-2); }
.bd-local .apurado b { font-size: 15px; color: var(--ink); }
.bd-local .barra { margin: 2px 0; }
/* números da votação: valor grande, nome e uma frase mínima */
.bd-numeros, .numeros { display: grid; grid-template-columns: repeat(4, auto); gap: 6px; }
.numeros { grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
.num { background: var(--bg); border-radius: 10px; padding: 5px 10px; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: baseline; }
.num b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.num span { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.num small { grid-column: 1 / -1; font-size: 10.5px; color: var(--ink-3); line-height: 1.15; white-space: nowrap; }
.bd-numeros .num { padding: 4px 9px; }
.p-linha { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
/* colocados: posição em destaque, nome, partido, % grande e barra própria */
.bd-cands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.bd-cands.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bd-cands.n1 { grid-template-columns: minmax(0, 1fr); }
.bd-cand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; min-width: 0;
  background: var(--bg); border-radius: 12px; padding: 7px 10px 6px; }
.bd-cand .pos { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.bd-cand .info { min-width: 0; }
.bd-cand .nm { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-cand .nm em { font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #fff; background: var(--ok); border-radius: 99px; padding: 1px 6px; margin-left: 4px; vertical-align: 2px; }
.bd-cand .sub { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-cand .val { text-align: right; font-variant-numeric: tabular-nums; }
.bd-cand .val b { font-size: 20px; font-weight: 800; display: block; line-height: 1.05; }
.bd-cand .val small { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.bd-cand .trilho { grid-column: 1 / -1; height: 5px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 5px; }
.bd-cand .trilho i { display: block; height: 100%; border-radius: 99px; }
.bd-vazio { grid-column: 1 / -1; color: var(--ink-3); text-align: center; }
.cand .pos { color: var(--ink-3); font-weight: 700; margin-right: 5px; }
/* botão principal do painel: compartilhar */
.p-acoes { margin-top: 10px; }
.btn-compartilhar { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 0; border-radius: 12px; padding: 11px 16px; cursor: pointer;
  background: linear-gradient(135deg, #16a34a, #0b6e4f); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 4px 14px rgba(11, 110, 79, .35); }
.btn-compartilhar svg { width: 18px; height: 18px; }
.btn-compartilhar:hover { filter: brightness(1.08); }
/* tablet grande: barra em duas linhas */
@media (max-width: 1219px) and (min-width: 1025px) {
  .barra-disputa { grid-template-columns: minmax(0, 1fr) auto; }
  .bd-cands { grid-column: 1 / -1; }
}
/* celular e tablet: barra compacta por cima do mapa */
@media (max-width: 1024px) {
  .barra-disputa { grid-template-columns: 1fr; gap: 6px; }
  .bd-local { flex-direction: row; align-items: baseline; gap: 8px; padding-right: 70px; }
  .bd-local > small, .bd-local .barra { display: none; }
  .bd-local .nome { font-size: 15px; }
  .bd-local .apurado { margin-left: auto; white-space: nowrap; }
  .bd-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .bd-numeros .num { padding: 3px 6px; display: block; }
  .bd-numeros .num b { font-size: 13px; display: block; }
  .bd-numeros .num span { font-size: 10.5px; }
  .bd-numeros .num small { display: none; }
  .bd-cands { gap: 5px; }
  .bd-cand { grid-template-columns: auto minmax(0, 1fr); padding: 5px 7px 4px; column-gap: 6px; }
  .bd-cand .pos { width: 22px; height: 22px; font-size: 10.5px; grid-row: 1 / 3; }
  .bd-cand .nm { font-size: 12px; }
  .bd-cand .sub, .bd-cand .val small { display: none; }
  .bd-cand .val { grid-column: 2; text-align: left; }
  .bd-cand .val b { font-size: 15px; }
  .bd-cand .trilho { margin-top: 3px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .num, :root:not([data-theme="light"]) .bd-cand { background: #1f242c; }
}
/* computador até 1700 px: números em 2×2 para sobrar espaço aos nomes dos colocados */
@media (min-width: 1025px) and (max-width: 1700px) {
  .bd-numeros { grid-template-columns: repeat(2, auto); gap: 4px; }
  .bd-numeros .num { padding: 2px 8px; }
  .bd-numeros .num b { font-size: 14px; }
  .bd-numeros .num small { font-size: 10px; }
}
/* celular: selo "eleito" vira um ✔ (o selo cobria o nome) */
@media (max-width: 1024px) {
  .bd-cand .nm em { font-size: 0; padding: 0; background: none; margin-left: 2px; }
  .bd-cand .nm em::after { content: "✔"; font-size: 11px; color: var(--ok); }
}
/* cartão compacto do estado (quando o completo não cabe): sigla + 2 primeiros */
.cartao-mini { width: 118px; padding: 2px 6px 3px; font-size: 10.5px; line-height: 1.3; }
.cartao-mini b { font-size: 11px; }
.cartao-mini .l { grid-template-columns: 7px 1fr auto; }
.cartao-mini .l i { width: 7px; height: 7px; }