:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f3f2ee;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #6f6d68;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --accent: #2a78d6;
  --nodata: #dcdbd5;

  /* Candidato A (vermelho) e B (azul): 5 faixas 0-20, 21-40, 41-60, 61-80, 81-100 */
  --a1: #fbe0df; --a2: #f4aba9; --a3: #e66767; --a4: #c23b3a; --a5: #8a2323;
  --b1: #dbe9fb; --b2: #9ec5f4; --b3: #5598e7; --b4: #256abf; --b5: #104281;
  --a: #d63b3a; --b: #2a78d6;
  /* demais candidatos do 1º turno (aqua) */
  --c1: #d3f1e5; --c2: #8ad8b8; --c3: #1baf7a; --c4: #137f59; --c5: #0a4f37; --c: #1baf7a;
  /* abstenção no mapa (âmbar, claro → escuro) */
  --d1: #fdecc8; --d2: #f8cd7e; --d3: #eaa53a; --d4: #c27a12; --d5: #7f4f08;
  --neutral-mid: #e9e8e3;

  --good: #0ca30c; --good-ink: #006300; --warning: #fab219; --critical: #d03b3b;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321;
    --ink: #ffffff; --ink-2: #c3c2b7; --muted: #9a988f; --grid: #2c2c2a; --axis: #383835;
    --border: rgba(255, 255, 255, 0.10); --nodata: #3a3a37;
    --a1: #4a1f1f; --a2: #7d2c2c; --a3: #b83f3e; --a4: #e06363; --a5: #f6a8a7;
    --b1: #172a45; --b2: #1c4a85; --b3: #2f6fc4; --b4: #5c9be8; --b5: #a9cbf6;
    --a: #e66767; --b: #3987e5; --neutral-mid: #383835; --good-ink: #0ca30c;
    --c1: #12352a; --c2: #175c45; --c3: #199e70; --c4: #4cc79a; --c5: #a3e6cb; --c: #199e70;
    --d1: #3d2c0c; --d2: #6e4b12; --d3: #a8711d; --d4: #dd9a36; --d5: #f6cd85;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #232321;
  --ink: #ffffff; --ink-2: #c3c2b7; --muted: #9a988f; --grid: #2c2c2a; --axis: #383835;
  --border: rgba(255, 255, 255, 0.10); --nodata: #3a3a37;
  --a1: #4a1f1f; --a2: #7d2c2c; --a3: #b83f3e; --a4: #e06363; --a5: #f6a8a7;
  --b1: #172a45; --b2: #1c4a85; --b3: #2f6fc4; --b4: #5c9be8; --b5: #a9cbf6;
  --a: #e66767; --b: #3987e5; --neutral-mid: #383835; --good-ink: #0ca30c;
  --c1: #12352a; --c2: #175c45; --c3: #199e70; --c4: #4cc79a; --c5: #a3e6cb; --c: #199e70;
  --d1: #3d2c0c; --d2: #6e4b12; --d3: #a8711d; --d4: #dd9a36; --d5: #f6cd85;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* iOS/Android: não aumentar o texto sozinho ao girar o aparelho (tabelas desalinham) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--page); color: var(--ink); font: 14px/1.45 var(--font); }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 18px; }
h2 { font-size: 15px; }
h3 { font-size: 14px; margin-top: 16px; }
a { color: var(--accent); }
code { font-size: 12px; background: var(--surface-2); padding: 1px 4px; border-radius: 4px; word-break: break-all; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.num { font-variant-numeric: tabular-nums; }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { flex: 1 1 380px; min-width: 0; }
.brand h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status { font-size: 12px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status .msg { overflow: hidden; text-overflow: ellipsis; }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; flex: none; } /* flex: none: não achata na barra */
.status .dot.live:not(.sim) { background: var(--good); box-shadow: 0 0 0 3px rgba(12, 163, 12, .25); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 25%, transparent); }
.status .dot.sim { background: var(--warning); }
.status .st-txt { display: contents; }
/* pulso do "ao vivo" (verde) e da simulação (amarelo): a onda sai da bolinha e some */
.status .dot.live { flex: none; --pulso: var(--good); animation: pulso-vivo 1.6s ease-out infinite; }
.status .dot.sim { --pulso: var(--warning); }
@keyframes pulso-vivo {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulso) 60%, transparent); opacity: 1; }
  50% { opacity: .55; }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--pulso) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulso) 0%, transparent); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .status .dot { animation: none !important; } }
.badge { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); }

.tabs { display: flex; gap: 4px; }
.tabs button, .seg button {
  font: inherit; font-size: 13px; color: var(--ink-2); background: transparent; border: 1px solid transparent;
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); border-color: var(--border); font-weight: 600; }
.tabs button:hover, .seg button:hover { background: var(--surface-2); }

main { max-width: 1400px; margin: 0 auto; padding: 16px 24px 48px; }
.tab[hidden] { display: none; }

.panel { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; margin-bottom: 16px; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

.progress-row { margin: 4px 0 16px; }
.progress-label { margin-bottom: 6px; }
.progress-label strong { font-size: 18px; }
.progress { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--border); }
#progress-bar { height: 100%; width: 0; background: var(--ink-2); transition: width .6s ease; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
@media (max-width: 640px) { .cards { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: grid; gap: 4px; position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.card .nome { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.card .nome .num-cand { font-size: 12px; color: var(--muted); font-weight: 500; }
.card .pct { font-size: 34px; font-weight: 600; line-height: 1.1; }
.card .votos { color: var(--ink-2); }
.card .linha { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--grid); padding-top: 6px; margin-top: 4px; }
.card .linha b { color: var(--ink); }
.lider-tag { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); white-space: nowrap; }

.proj-hero { font-size: 20px; font-weight: 600; margin: 4px 0 12px; }
.proj-hero .sub { display: block; font-size: 13px; font-weight: 400; color: var(--ink-2); margin-top: 4px; }
.proj-bar { position: relative; height: 28px; display: flex; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface); }
.proj-bar > div { height: 100%; display: flex; align-items: center; padding: 0 8px; color: #fff; font-weight: 600; font-size: 13px; white-space: nowrap; }
.proj-bar > .mid, .proj-bar > .ic { padding: 0; }
.proj-bar .mid { position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--surface); opacity: 1; }
.proj-bar .ic { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 3px, transparent 3px 7px); border-left: 1px solid rgba(255,255,255,.8); border-right: 1px solid rgba(255,255,255,.8); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.kpi { border-top: 1px solid var(--grid); padding-top: 8px; }
.kpi .k { font-size: 12px; color: var(--muted); }
.kpi .v { font-size: 18px; font-weight: 600; }

.chart { width: 100%; height: 260px; position: relative; }
.chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .axis text { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart .axis text.hora { font-size: 10px; opacity: .85; } /* horário sob o % das urnas */
.chart .empty { fill: var(--muted); font-size: 13px; }
.legend-inline { display: flex; gap: 12px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.legend-inline span { display: inline-flex; align-items: center; gap: 4px; }
.legend-inline i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--c); }
.legend-inline i.dash { border-top-style: dashed; }

.seg { display: flex; flex-wrap: wrap; gap: 2px; background: var(--surface-2); border-radius: 8px; padding: 2px; border: 1px solid var(--border); }
.seg button { padding: 4px 10px; font-size: 12px; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; border-color: var(--border); }

.map-wrap { position: relative; height: 620px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
/* celular: legenda e detalhe do local abaixo do mapa (sobre o mapa, cobriam metade dele) */
@media (max-width: 640px) {
  .map-wrap { height: auto; overflow: visible; border: 0; background: none; border-radius: 0; }
  .map-wrap #map, .map-wrap #map1, .map-wrap #map22 { position: relative; inset: auto; height: 420px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface-2); }
  .map-wrap .map-legend { position: static; margin-top: 8px; max-width: none; }
  .map-wrap .map-info { position: static; width: auto; max-width: none; max-height: none; margin-top: 8px; box-shadow: none; }
}
#map { position: absolute; inset: 0; }
.map-legend { position: absolute; left: 10px; bottom: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; max-width: calc(100% - 20px); }
.map-legend .row { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.map-legend .sw { width: var(--w, 46px); height: 12px; }
.map-legend .lbls { display: flex; gap: 2px; color: var(--muted); font-size: 11px; }
.map-legend .lbls span { width: var(--w, 46px); text-align: center; white-space: nowrap; }
.map-legend .ttl { font-weight: 600; color: var(--ink); }
.map-info { position: absolute; right: 10px; top: 10px; width: 340px; max-width: calc(100% - 20px); max-height: calc(100% - 20px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.map-info .close { float: right; background: none; border: 0; font-size: 18px; cursor: pointer; color: var(--muted); line-height: 1; }
.map-info table { width: 100%; }

.tooltip { position: fixed; z-index: 50; pointer-events: none; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.15); max-width: 280px; }
.tooltip .t { font-weight: 600; margin-bottom: 4px; }
/* dica em forma de tabela (rótulo + colunas de valores) */
.tooltip:has(.tg) { max-width: min(470px, calc(100vw - 20px)); }
.tooltip .tg { display: grid; grid-template-columns: auto auto auto; gap: 3px 14px; align-items: baseline; margin: 2px 0 6px; }
.tooltip .tg.tg4 { grid-template-columns: auto auto auto auto; }
.tooltip .tg .h { color: var(--muted); font-size: 11px; text-align: right; }
.tooltip .tg .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tooltip .tg > span:nth-child(n) { white-space: nowrap; }
.tooltip .tg-res { padding-top: 5px; border-top: 1px solid var(--grid); margin-bottom: 4px; }
.tooltip .r { display: flex; justify-content: space-between; gap: 12px; }
.tooltip .sw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; background: var(--c); }

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: 12px; border-bottom: 1px solid var(--axis); padding: 6px 8px; white-space: nowrap; cursor: default; position: sticky; top: 0; background: var(--surface); }
table.data th[data-sort] { cursor: pointer; }
table.data th[data-sort]:hover { color: var(--ink); }
table.data td { padding: 6px 8px; border-bottom: 1px solid var(--grid); white-space: nowrap; }
table.data td.n, table.data th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.click { cursor: pointer; }
table.data tr.click:hover td { background: var(--surface-2); }
.mini-bar { display: inline-flex; width: 90px; height: 8px; border-radius: 2px; overflow: hidden; vertical-align: middle; background: var(--nodata); gap: 1px; }
.mini-bar span { display: block; height: 100%; }

.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); white-space: nowrap; }
.chip.ok { color: var(--good-ink); }
.chip.divergente { color: var(--critical); border-color: var(--critical); }
.chip.defasado { color: var(--ink-2); }
.chip.sem { color: var(--muted); }
.chip.pendente { color: var(--muted); }

.lead { color: var(--ink-2); max-width: 900px; margin: 0 0 12px; }
.ver-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.breadcrumb { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; }
.breadcrumb button { font: inherit; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; }
.breadcrumb span.sep { color: var(--muted); }
.unit-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; padding: 12px; background: var(--surface-2); border-radius: 8px; margin-bottom: 12px; }
.diff-list { font-size: 12px; color: var(--critical); }
.diff-list div { white-space: normal; }

.prose { max-width: 900px; }
.prose h2 { margin-top: 20px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-2); padding: 8px 12px; border-radius: 6px; color: var(--ink) !important; overflow-x: auto; }

.maplibregl-ctrl-attrib { font-size: 10px; }

@media (max-width: 640px) {
  .topbar { padding: 10px 16px; position: static; }
  .brand { flex: 1 1 100%; }
  h1 { font-size: 16px; }
  /* 5 abas não cabem numa linha: a barra rola sozinha, sem arrastar a página */
  .tabs { width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; padding: 6px 8px; white-space: nowrap; }
  /* status: no celular a linha quebra em vez de cortar a hora e o selo de simulação */
  .status { flex-wrap: wrap; white-space: normal; overflow: visible; row-gap: 2px; }
  .status .msg { white-space: normal; }
  main { padding: 12px 16px 40px; }
  .card .pct { font-size: 28px; }
}
.link-btn { font: inherit; font-size: 12px; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; }
.map-info .r { display: flex; justify-content: space-between; gap: 12px; }
.map-info .t { font-weight: 600; margin-bottom: 4px; }
.map-info .sw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; background: var(--c); }

/* ---- Monitor de conexão com o TSE ---- */
.conn { position: relative; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink);
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); cursor: default; white-space: nowrap; }
.conn > i { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.conn-ok > i { background: var(--good); }
.conn-warn > i { background: var(--warning); animation: pisca 0.7s steps(2, jump-none) infinite; }
.conn-down > i { background: var(--critical); }
.conn-down { border-color: var(--critical); }
@keyframes pisca { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.conn-ok > i { box-shadow: 0 0 0 0 rgba(12, 163, 12, .5); animation: pisca-verde 1.4s ease-in-out infinite; }
@keyframes pisca-verde {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(12, 163, 12, .55); }
  50% { opacity: .35; }
  70% { box-shadow: 0 0 0 7px rgba(12, 163, 12, 0); }
  100% { opacity: 1; box-shadow: 0 0 0 0 rgba(12, 163, 12, 0); }
}
@media (prefers-reduced-motion: reduce) { .conn > i { animation: none !important; } }
.conn-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 290px; white-space: normal;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-weight: 400;
  color: var(--ink-2); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.conn:hover .conn-pop, .conn:focus .conn-pop, .conn:focus-within .conn-pop { display: block; }
.conn-pop .r { display: flex; justify-content: space-between; gap: 12px; }
.conn-pop b { color: var(--ink); }

/* ---- 1º turno ---- */
.t1-grid { align-items: start; }
.t1-bars { display: grid; gap: 8px; }
.t1-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; font-size: 13px; }
.t1-bar .nm { font-weight: 600; }
.t1-bar .nm .muted { font-weight: 400; }
.t1-bar .vl { text-align: right; font-variant-numeric: tabular-nums; }
.t1-bar .track { grid-column: 1 / -1; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.t1-bar .track span { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.tag2t { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); margin-left: 6px; }
.t1-kpis { margin-top: 0; }
.map-ctrls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sel select { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); max-width: 220px; }
.sel select:disabled { opacity: .5; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#map1, #map22 { position: absolute; inset: 0; }

/* ---- Rodapé ---- */
.rodape { max-width: 1400px; margin: 0 auto; padding: 20px 24px 32px; border-top: 1px solid var(--border); text-align: center; color: var(--ink-2); font-size: 14px; }
.rodape p { margin: 4px 0; }
.rodape b { color: var(--ink); font-weight: 600; }
/* logos com altura proporcional ao texto, apoiados na linha de base */
.rodape img { display: inline-block; width: auto; mix-blend-mode: multiply; }
/* Claude: o "C" e as minúsculas na altura das letras do texto; Anthropic (caixa-alta pesada e larga parece maior que
   o texto na mesma altura): um pouco abaixo da altura das maiúsculas, para equilibrar com o texto */
.logo-claude { height: 0.95em; vertical-align: -0.09em; margin: 0 0.1em 0 0.15em; }
.logo-anthropic { height: 0.6em; vertical-align: 0.02em; margin: 0 0.15em; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rodape img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
}
:root[data-theme="dark"] .rodape img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
@media (max-width: 640px) { .rodape { padding: 16px; font-size: 13px; } }

/* ---- Fotos oficiais (TSE) ---- */
.card-top { display: flex; gap: 14px; align-items: center; }
.card-id { display: grid; gap: 4px; min-width: 0; }
.foto { width: 72px; height: auto; aspect-ratio: 161 / 225; object-fit: cover; border-radius: 8px; flex: none;
  border: 2px solid var(--c); background: var(--surface-2); }
.t1-bar.com-foto { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; }
.t1-bar.com-foto .track { grid-column: 2 / -1; }
.foto-mini { grid-row: span 2; width: 30px; height: auto; aspect-ratio: 161 / 225; object-fit: cover; border-radius: 4px; background: var(--surface-2); }
@media (max-width: 640px) { .foto { width: 60px; } }

/* ---- Matematicamente eleito ---- */
.eleito-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--good-ink); color: #fff; white-space: nowrap; }
.eleito-hero { color: var(--good-ink); }
.proj-matematico { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 13px; }
.proj-matematico:empty { display: none; }
.mat-row { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); }
.mat-row b { color: var(--ink); text-align: right; }
.mat-bar { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; margin: 4px 0 2px; }
.mat-bar span { display: block; height: 100%; background: var(--ink-2); }
.mat-bar.v span { background: color-mix(in srgb, var(--good) 70%, var(--ink-2)); }
.mat-etapa { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); margin-top: 6px; font-size: 12px; }
.mat-etapa b { color: var(--ink); }
/* ---- Virtualmente eleito: destaque na cor do candidato, sem comemoração ---- */
.eleito-hero.virtual { color: var(--good-ink); --c: var(--good-ink); } /* verde, como o matematicamente eleito */
.virtual-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; background: var(--good-ink); color: #fff; white-space: nowrap; }
.card.card-virtual { border-color: var(--good-ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--good-ink) 35%, transparent); }
.eleito-hero.virtual { display: inline-block; border-radius: 6px; }
/* no momento em que passa a virtualmente eleito: o título pisca 4 vezes (≈3 s) e fica fixo */
@media (prefers-reduced-motion: no-preference) {
  .eleito-hero.virtual.pisca { animation: fv-pisca .75s ease-in-out 4; }
}
@keyframes fv-pisca { 0%, 100% { background: transparent; color: var(--c); }
  50% { background: var(--c); color: #fff; box-shadow: 0 0 0 6px var(--c); } }

/* ---- Relógio: horário de Brasília ---- */
.relogio { display: grid; justify-items: end; line-height: 1.15; white-space: nowrap; }
.rel-hora { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rel-sub { font-size: 11px; color: var(--muted); }
@media (max-width: 640px) { .relogio { justify-items: start; } .rel-hora { font-size: 16px; } }

/* ---- Quadros do painel ---- */
.quadros .panel { margin-bottom: 0; }
.quadros { margin-bottom: 16px; }
.reg-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 150px; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--grid); font-size: 13px; }
.reg-row:last-child { border-bottom: 0; }
.reg-row .nm { font-weight: 600; }
.reg-row .vl { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.reg-bar { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
.reg-bar span { display: block; height: 100%; background: var(--ink-2); border-radius: 0 5px 5px 0; }
.lean { display: inline-flex; width: 80px; height: 8px; border-radius: 2px; overflow: hidden; gap: 1px; vertical-align: middle; background: var(--nodata); }
.lean span { display: block; height: 100%; }
.vazio { color: var(--muted); font-size: 13px; padding: 12px 0; }
.chart-uf svg { width: 100%; display: block; }
.chart-uf text { font-size: 11px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.chart-uf .zero { stroke: var(--axis); stroke-width: 1.5; }
.chart-uf .hit { fill: transparent; cursor: default; }
.chart-uf .hit:hover { fill: var(--surface-2); }
.destaques { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 640px) { .destaques { grid-template-columns: minmax(0, 1fr); } .reg-row { grid-template-columns: 90px minmax(0, 1fr) 110px; } }
.dest-col h3 { margin: 0 0 6px; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.dest-item { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--grid); }
.dest-item .mu { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dest-item b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ult-item { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12px; padding: 5px 0; border-bottom: 1px solid var(--grid); }
.ult-item .hr { color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.25; }
.ult-item .hr .dt { display: block; font-size: 11px; }
.ult-item .lc { min-width: 0; }
.ult-item .lc div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 360px) { .ult-item .lc div:first-child { white-space: normal; } }
.ult-item .vt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dot-c { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--c); margin-right: 3px; }
.uf-chips { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.uf-chips > span { white-space: nowrap; }

/* ---- Bandeiras (UFs: IBGE; Exterior e Brasil: TSE) ---- */
.flag { display: inline-block; width: 21px; height: 14px; object-fit: cover; border-radius: 2px; vertical-align: -2px; margin-right: 6px;
  box-shadow: 0 0 0 1px var(--border); background: var(--surface-2); }
.tooltip .flag, .map-info .flag { width: 18px; height: 12px; margin-right: 5px; }

/* ---- Logos de partido ---- */
.logo-partido { display: inline-block; height: 1.6em; width: auto; vertical-align: middle; margin-left: 2px; border-radius: 2px; }
.card .num-cand { display: inline-flex; align-items: center; gap: 4px; }
.card .logo-partido { height: 28px; }
.t1-bar .logo-partido { height: 1.35em; }

/* ---- Comemoração: matematicamente eleito ---- */
.celebracao { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  /* rgba antes de color-mix: Safari < 16.2 e Chrome < 111 ignoram color-mix; -webkit- para Safari < 18 */
  background: rgba(128, 128, 128, .45); background: color-mix(in srgb, var(--page) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: cel-fade .4s ease-out; }
.celebracao[hidden] { display: none; }
.cel-card { position: relative; width: min(440px, 100%); text-align: center; background: var(--surface); border-radius: 18px;
  border: 3px solid var(--cel-cor, var(--good)); box-shadow: 0 24px 80px rgba(0,0,0,.35); padding: 0 24px 24px; overflow: hidden;
  animation: cel-pop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.cel-faixa { margin: 0 -24px 18px; padding: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, #009c3b, #ffdf00 50%, #009c3b); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.cel-foto { display: block; margin: 0 auto; width: 128px; height: auto; aspect-ratio: 161 / 225; object-fit: cover; border-radius: 12px; border: 4px solid var(--cel-cor, var(--good));
  box-shadow: 0 0 0 6px rgba(128, 128, 128, .25); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cel-cor, var(--good)) 25%, transparent); animation: cel-brilho 1.6s ease-in-out infinite; }
.cel-selo { display: inline-block; margin-top: 16px; padding: 4px 12px; border-radius: 999px; background: var(--good-ink); color: #fff; font-size: 13px; font-weight: 700; }
.cel-nome { margin: 10px 0 4px; font-size: 30px; line-height: 1.1; }
.cel-sub { color: var(--ink-2); font-size: 15px; }
.cel-num { margin-top: 12px; font-size: 13px; color: var(--muted); }
.cel-fechar { margin-top: 18px; font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: 0; cursor: pointer; color: #fff;
  background: var(--cel-cor, var(--good)); }
.cel-fechar:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@keyframes cel-fade { from { opacity: 0; } }
@keyframes cel-pop { from { opacity: 0; transform: scale(.6) translateY(40px); } }
@keyframes cel-brilho { 50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--cel-cor, var(--good)) 10%, transparent); } }
@media (prefers-reduced-motion: reduce) { .celebracao, .cel-card, .cel-foto { animation: none !important; } }
#tabela-uf th, #tabela-uf-t1 th { white-space: normal; vertical-align: bottom; }
#tabela-uf .mini-bar { width: 70px; }

.progress-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.ultima-atu { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.ultima-atu b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ultima-atu { margin-left: 0; width: 100%; } }

/* ---- Guia de níveis do mapa (faixa acima do mapa) ---- */
.zoom-guia { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap;
  margin-bottom: 8px; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.zg-passos { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.zg-passos button { font: inherit; border: 1px solid transparent; background: none; color: var(--ink-2); padding: 2px 10px; border-radius: 999px; cursor: pointer; }
.zg-passos button:hover { background: var(--surface); }
.zg-passos button[aria-current="true"] { background: var(--ink); color: var(--surface); font-weight: 600; }
.zg-dica { font-size: 12px; color: var(--ink-2); }
.zg-dica b { color: var(--ink); }
@media (max-width: 640px) { .zg-passos { font-size: 12px; } }

/* ---- Votação no exterior por país ---- */
.flag-pais { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; vertical-align: -3px; margin-right: 7px; box-shadow: 0 0 0 1px var(--border); }
#tabela-paises td:first-child, #tabela-paises-t1 td:first-child { white-space: nowrap; }
#paises-panel .table-wrap, #paises-panel-t1 .table-wrap { max-height: 520px; overflow: auto; }

/* Saiba se o seu voto já foi apurado */
.coluna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.coluna > .panel { margin-bottom: 0; }
.grid-2 { margin-bottom: 16px; }
.chart-prob { height: 190px; }
.kpis { margin-top: 0; }
.sv-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; align-items: end; }
.sv-form > label { grid-column: span 2; }
.sv-form > .sv-cidade { grid-column: span 4; }
.sv-form.exterior > .sv-cidade { grid-column: span 2; }
.sv-form > label[hidden] { display: none; }
.sv-form .sv-botoes { grid-column: span 2; display: flex; gap: 6px; }
.sv-form .sv-botoes button[type=submit] { flex: 1; }
.sv-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; }
.sv-form select, .sv-form input { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 7px 8px; min-width: 0; width: 100%; box-sizing: border-box; }
.sv-form input:disabled, .sv-form select:disabled { opacity: .55; }
.sv-form button { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--ink); background: var(--ink); color: var(--surface); cursor: pointer; }
.sv-form button:disabled { opacity: .55; cursor: default; }
.sv-resultado:empty { display: none; }
.sv-resultado { margin-top: 14px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); font-size: 13px; }
.sv-status { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.sv-icone { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff; font-size: 15px; line-height: 1; }
.sv-ok .sv-icone { background: var(--good); }
.sv-esperando .sv-icone { background: var(--warning); }
.sv-nada .sv-icone { background: var(--muted); }
.sv-votos { display: grid; grid-template-columns: auto auto auto; justify-content: start; gap: 2px 16px; margin-top: 8px; font-variant-numeric: tabular-nums; }
.sv-votos .h { color: var(--muted); font-size: 12px; }

/* Localizar no mapa: UF › município › zona › local */
.map-busca { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.map-busca[hidden] { display: none; }
.map-busca .mb-rot { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.map-busca select { font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; min-width: 0; }
.map-busca #mb-uf { width: 82px; }
.map-busca #mb-mun { width: 190px; }
.map-busca #mb-zona { width: 100px; }
.map-busca #mb-local, .map-busca #mb-extlocal { flex: 1 1 220px; max-width: 420px; }
.map-busca #mb-pais { width: 170px; }
.map-busca #mb-cidade { width: 230px; }
.map-busca select[hidden] { display: none; }
.map-busca select:disabled { opacity: .55; }
.map-busca button { font: inherit; font-size: 13px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; }
@media (max-width: 640px) { .map-busca .mb-rot { width: 100%; } .map-busca #mb-mun, .map-busca #mb-local, .map-busca #mb-cidade, .map-busca #mb-extlocal { flex: 1 1 100%; max-width: none; } }
.mb-pino { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; background: var(--ink); border: 2px solid var(--surface); transform: rotate(-45deg); box-shadow: 0 1px 4px rgba(0,0,0,.35); }

/* Números digitados nos votos nulos (1º turno) */
#nulos-filtro #nulos-uf, #nulos2-filtro #nulos2-uf { width: 190px; }
#nulos-filtro #nulos-mun, #nulos2-filtro #nulos2-mun { width: 230px; }
#nulos-filtro #nulos-local, #nulos2-filtro #nulos2-local { flex: 1 1 260px; max-width: 460px; }
@media (max-width: 640px) { #nulos-filtro select, #nulos2-filtro select { flex: 1 1 100%; width: auto; max-width: none; } }
.nulos-tab td.dig { font-variant-numeric: tabular-nums; font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .05em; }
.nulos-tab td.barra { width: 40%; }
.nulos-tab .bar { height: 10px; border-radius: 0 4px 4px 0; background: var(--ink-2); opacity: .55; min-width: 2px; }

/* Telas de toque: campos com letra < 16 px fazem o Safari do iPhone dar zoom na página ao tocar */
@media (pointer: coarse) {
  select, input, textarea { font-size: 16px !important; }
  .seg button { padding: 8px 12px; } /* área de toque maior */
}

/* celular: 'Seu voto' em duas colunas (com letra de 16 px, cinco campos numa linha cortavam o texto) */
@media (max-width: 640px) {
  .sv-form { grid-template-columns: 1fr 1fr; }
  .sv-form > label, .sv-form.exterior > .sv-cidade { grid-column: span 1; }
  .sv-form > .sv-cidade, .sv-form .sv-botoes { grid-column: 1 / -1; }
  .sv-form.exterior > .sv-cidade { grid-column: 1 / -1; }
}
/* celular: região e número na mesma linha, barra inteira embaixo */
@media (max-width: 640px) {
  .reg-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .reg-row .vl { white-space: nowrap; }
  .reg-row .reg-bar { grid-column: 1 / -1; grid-row: 2; }
}
/* celular: tabela de nulos sem a coluna da barra (número, votos e % cabem na tela) */
@media (max-width: 640px) {
  .nulos-tab td.barra, .nulos-tab th:last-child { display: none; }
}
/* celular: tabelas mais compactas; nas largas (rolagem para o lado) a 1ª coluna fica fixa */
@media (max-width: 640px) {
  table.data th, table.data td { padding-left: 5px; padding-right: 5px; }
  .nulos-tab th, .nulos-tab td.dig { white-space: normal; }
  .nulos-tab { font-size: 12px; }
  .table-wrap table.data tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
  .table-wrap table.data thead tr > :first-child { z-index: 2; }
}

/* ---- Cidades e voto ---- */
.pf-resumo { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: 8px 0 14px; }
.pf-resumo .n { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pf-resumo .s { color: var(--ink-2); font-size: 13px; }
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1180px) { .pf-grid { grid-template-columns: minmax(0, 1fr); } }
.pf-mapa-wrap { position: relative; }
#pf-mapa { width: 100%; height: 540px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
@media (max-width: 640px) { #pf-mapa { height: 420px; } }
.pf-leg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); margin-top: 6px; }
.pf-leg .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.pf-h3 { font-size: 14px; margin: 0 0 8px; }
#pf-tabela tbody tr { cursor: pointer; }
#pf-tabela tbody tr:hover td, #pf-tabela tbody tr[aria-current="true"] td { background: var(--surface-2); }
.pf-ind { flex-wrap: wrap; margin-bottom: 10px; }
.pf-destaques { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 4px 0 8px; min-height: 52px; }
.pf-destaques .n { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-destaques .d { font-size: 13px; color: var(--ink-2); max-width: 300px; }
.pf-scatter-wrap { position: relative; }
#pf-scatter { width: 100%; height: 440px; display: block; }
@media (max-width: 640px) { #pf-scatter { height: 360px; } .pf-resumo .n { font-size: 28px; } }

.rodape-nota { display: flex; gap: 10px; align-items: flex-start; max-width: 980px; margin: 14px auto 0 !important; padding: 10px 14px;
  text-align: left; font-size: 13px; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.rodape-nota .ic { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--surface); font: 700 12px/18px var(--font); text-align: center; margin-top: 1px; }
.rodape .fontes-tit { max-width: 980px; margin: 20px auto 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: left; }
.rodape .fontes { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 28px; text-align: left; line-height: 1.45; }
.rodape .fontes h3 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.rodape .fontes ul { margin: 0; padding: 0; list-style: none; }
.rodape .fontes li { margin: 0 0 5px; padding-left: 12px; position: relative; color: var(--ink-2); }
.rodape .fontes li::before { content: ''; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--muted); }
.rodape .fontes a { color: inherit; }
@media (max-width: 800px) { .rodape .fontes { grid-template-columns: minmax(0, 1fr); } }

#pf-filtro #pf-uf { width: 190px; }
#pf-filtro #pf-cidade { width: 260px; }
.pf-ficha { border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; padding: 10px 14px; margin: -4px 0 14px; font-size: 13px; }
.pf-ficha .t { font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.pf-ficha .g { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 16px; }
.pf-ficha .g span { color: var(--muted); }
#pf-tabela td.cid, #pf-tabela th.cid { background: color-mix(in srgb, var(--warning) 14%, transparent); }

.pf-peso { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin-left: 8px; }
.pf-peso input { width: auto; }
#pf-tabela td.cor { white-space: nowrap; font-variant-numeric: tabular-nums; }

.pf-comp { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; }
.pf-comp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.pf-comp-head button { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; margin-left: auto; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 4px 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.pf-chip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 4px; margin: 0; }
#pf-comp-tab th, #pf-comp-tab td { white-space: nowrap; }
#pf-comp-tab td.melhor { font-weight: 700; }

#pf-mudancas tr.geral td, #cmp-perfil tr.geral td { border-bottom: 1px solid var(--axis); }

#pf-tabela th .fx, #pf-tabela td .fx { font-size: 11px; font-weight: 400; color: var(--muted); }
#pf-tabela td.cor { line-height: 1.2; }

/* Perfil: categorias de cor ou raça e de religião */
.pf-sub { margin-top: -4px; }
.pf-sub button { font-size: 12px; }
.pf-ficha .gh { grid-column: 1 / -1; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
tr.pf-grp td { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--surface-2); padding-top: 8px; cursor: default; }
.pf-sub[hidden] { display: none; }

/* Perfil: para onde o voto mudou */
#pf-mudancas th, #cmp-perfil th { vertical-align: bottom; line-height: 1.25; }
#pf-mudancas th.c, #cmp-perfil th.c { text-align: center; }
#pf-mudancas .fx, #cmp-perfil .fx { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 1px; }
#pf-mudancas td, #cmp-perfil td { vertical-align: middle; }
#pf-mudancas td.ext, #cmp-perfil td.ext { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
#pf-mudancas td.mini, #cmp-perfil td.mini { text-align: center; padding: 4px 10px; }
#pf-mudancas .pf-mini, #cmp-perfil .pf-mini { display: block; margin: 0 auto; overflow: visible; }
#pf-mudancas td.dif, #cmp-perfil td.dif { position: relative; min-width: 150px; white-space: nowrap; font-variant-numeric: tabular-nums; border-left: 1px solid var(--axis); }
#pf-mudancas td.dif .barra, #cmp-perfil td.dif .barra { display: block; height: 4px; border-radius: 2px; margin-bottom: 4px; opacity: .85; }
#pf-mudancas tr.top td, #cmp-perfil tr.top td { background: color-mix(in srgb, var(--warning) 9%, transparent); }
#pf-mudancas tr.top td.ind, #cmp-perfil tr.top td.ind { font-weight: 600; }
#pf-mudancas td.ind .pos, #cmp-perfil td.ind .pos { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 700; margin-right: 6px; vertical-align: 1px; }
#pf-mudancas tr.mais td, #cmp-perfil tr.mais td { text-align: center; padding: 8px; }
#pf-mudancas tr.mais button, #cmp-perfil tr.mais button { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; }
#pf-mudancas tr[hidden], #cmp-perfil tr[hidden] { display: none; }
#pf-mudancas-dest .d { max-width: 330px; }
#pf-mudancas-dest .n.fator { font-size: 16px; font-weight: 700; color: var(--ink); }
#pf-mudancas-dest .pos, #pf-mudancas td.ind .pos, #cmp-perfil td.ind .pos { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 700; margin-right: 6px; vertical-align: 2px; }
#pf-mudancas-dest { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; }
#pf-mudancas-dest .d { max-width: none; }
@media (max-width: 1000px) { #pf-mudancas-dest { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { #pf-mudancas-dest { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  #pf-mudancas th.ext, #pf-mudancas td.ext, #cmp-perfil th.ext, #cmp-perfil td.ext { display: none; }
  #pf-mudancas td.dif, #cmp-perfil td.dif { min-width: 0; white-space: normal; }
  #pf-mudancas td.mini, #cmp-perfil td.mini { padding: 4px; }
}
@media (max-width: 640px) {
  #pf-mudancas .pf-mini, #cmp-perfil .pf-mini { width: 90px; height: auto; }
  #pf-mudancas td.dif .fx, #cmp-perfil td.dif .fx { display: none; }
  #pf-mudancas td.dif, #cmp-perfil td.dif { white-space: nowrap; }
  #pf-mudancas td.ind, #cmp-perfil td.ind { white-space: normal; }
  #pf-mudancas tr.mais button, #cmp-perfil tr.mais button { white-space: normal; }
}
@media (max-width: 640px) {
  #pf-mudancas th .lg, #cmp-perfil th .lg { display: none; }
  #pf-mudancas tr.geral td, #cmp-perfil tr.geral td { white-space: normal; }
  #pf-mudancas th.c .fx, #cmp-perfil th.c .fx { display: none; }
}
/* folga para a onda do pulso (7px) não ser cortada pelo overflow da linha de status */
.status { padding-block: 7px; margin-block: -7px; }
.status .dot { margin-left: 7px; }

/* Perfil: por estado (roubos e furtos) */
.pf-estados { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .pf-estados { grid-template-columns: 1fr; } }
#pf-estados-svg { width: 100%; height: auto; display: block; }
#pf-estados-svg .tk { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
#pf-estados-svg .uf { font-size: 9px; font-weight: 700; fill: var(--ink); pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 2.5px; }
#pf-estados tr[aria-current="true"] td { background: var(--surface-2); font-weight: 600; }
#pf-estados-dest .n.fator { font-size: 14px; font-weight: 700; color: var(--ink); }

/* Perfil: todos os indicadores lado a lado */
.pf-mat-sel { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; font-size: 12px; }
.pf-mat-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pf-mat-g { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pf-mat-sel button { font: inherit; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.pf-mat-sel button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.pf-mat-acoes button { border-radius: 6px; }
.pf-lado { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pf-lado-c { font: inherit; text-align: left; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px 6px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-lado-c:hover { border-color: var(--ink-2); }
.pf-lado-c .t { font-size: 13px; font-weight: 600; }
.pf-lado-c .r { font-size: 11px; min-height: 30px; line-height: 1.35; }
.pf-lado-c canvas { width: 100%; height: 130px; display: block; margin-top: 2px; }
.pf-lado-c .x { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
#q-swing-uf .vt { fill: var(--muted); }
#q-swing-uf .vt2 { font-size: 10px; fill: var(--ink-2); }
#q-swing-uf .frase { fill: var(--ink-2); }
#q-swing-uf .grid line { stroke: var(--grid); stroke-width: 1; }
#q-swing-uf .axis text { fill: var(--muted); font-size: 10px; }
.map-legend button.sw { border: 0; padding: 0; cursor: pointer; border-radius: 2px; outline-offset: 1px; }
.map-legend button.sw:hover { outline: 2px solid var(--ink-2); }
.map-legend button.sw[aria-pressed="true"] { outline: 2px solid var(--ink); }
.map-legend .filtro-ativo { margin-top: 6px; font-weight: 600; color: var(--ink); }
.map-legend .dica { margin-top: 4px; font-size: 11px; }
.map-legend .link-btn { font-weight: 600; }
.pf-leg .pf-leg-f { font: inherit; font-size: 12px; color: var(--ink-2); background: none; border: 1px solid transparent; border-radius: 6px; padding: 1px 6px; cursor: pointer; }
.pf-leg .pf-leg-f:hover { border-color: var(--border); }
.pf-leg .pf-leg-f[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.pf-leg .filtro-ativo { font-weight: 600; color: var(--ink); }
.grid-2 > .panel { margin-bottom: 0; }
/* gráficos ao lado da Projeção: ocupam a altura da linha (mínimo legível) */
.coluna.graficos > .panel { flex: 1 1 0; display: flex; flex-direction: column; }
.coluna.graficos .chart { flex: 1 1 auto; height: auto; min-height: 170px; }
.coluna.graficos .chart-prob { min-height: 120px; }
@media (max-width: 900px) { .coluna.graficos .chart { height: 240px; flex: none; } .coluna.graficos .chart-prob { height: 180px; } }
.panel-estica { display: flex; flex-direction: column; }
.panel-estica .chart-ritmo { flex: 1 1 auto; height: auto; min-height: 90px; }
@media (max-width: 900px) { .panel-estica .chart-ritmo { height: 110px; flex: none; } }
.cards .card { position: relative; will-change: transform; }

/* Seu local de votação (2º turno) e Como votou a sua urna (1º turno) */
.sv-local { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.sv-local .t { font-weight: 600; }
.cv-tab td, .cv-tab th { white-space: nowrap; }
.cv-tab tr.sep td { border-top: 1px solid var(--axis); }
#como-votou .sv-form { max-width: 900px; }
.cv-tab { max-width: 760px; }
.map-busca .sel-curto { max-width: 150px; }
.nulos-cmp { max-width: 820px; }
.nulo-top { margin-right: 14px; white-space: nowrap; }
/* "conta" do matematicamente / virtualmente eleito: rótulo à esquerda, número à direita */
.proj-hero .conta { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 10px 0 4px; padding: 10px 12px; border-radius: 8px;
  background: var(--surface-2); font-size: 14px; font-weight: 400; color: var(--ink-2); max-width: 520px; }
.proj-hero .conta b { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.proj-hero .conta .det { grid-column: 1 / -1; font-size: 12px; color: var(--muted); margin: -2px 0 4px; }
.sv-form button.sv-limpar { background: var(--surface); color: var(--ink); border-color: var(--border); font-weight: 500; }
.sv-form button.sv-limpar:hover { border-color: var(--ink-2); }
.proj-matematico .defs { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; }
.proj-matematico .defs dt { font-weight: 600; color: var(--ink); }
.proj-matematico .defs dd { margin: 0; }
.proj-matematico .defs ul { margin: 2px 0 0; padding-left: 16px; }
@media (max-width: 640px) { .proj-matematico .defs { grid-template-columns: 1fr; } .proj-matematico .defs dd { margin-bottom: 4px; } }
/* cartões dos candidatos em telas estreitas: nome, número e etiqueta quebram em linhas, foto menor */
.card .nome { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 400px) {
  .card-top { gap: 10px; }
  .card .pct { font-size: 34px; }
}
/* aba 1º turno no formato do painel do 2º turno */
.t1-faixa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.t1-faixa b { font-size: 22px; }
#t1-regioes td.melhor { font-weight: 700; }
/* 1º turno: como foi a apuração */
.t1-reviver { display: grid; gap: 6px; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); }
.t1-reviver input[type=range] { width: 100%; accent-color: var(--ink); }
.t1-play-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.t1-play-linha label { flex: 1 1 auto; }
.t1-play { flex: none; width: 34px; height: 34px; border-radius: 50%; padding: 0; display: grid; place-items: center; font-size: 13px;
  background: var(--ink); color: var(--surface); border: 0; cursor: pointer; }
.t1-play:hover { opacity: .85; }
.t1-reg { display: grid; grid-template-columns: 120px 1fr 56px; gap: 8px; align-items: center; font-size: 13px; margin: 4px 0; }
.t1-reg .track { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.t1-reg .track span { display: block; height: 100%; background: var(--ink-2); }
.t1-reg b { text-align: right; }
#t1-evol { height: 240px; }
/* desempenho da projeção, ao fim da apuração */
.desemp { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; }
.desemp h3 { font-size: 14px; margin: 0 0 6px; }
.desemp ul { margin: 0 0 10px; padding-left: 18px; color: var(--ink-2); }
.desemp li { margin: 3px 0; }
.desemp-tab td, .desemp-tab th { white-space: nowrap; font-variant-numeric: tabular-nums; }
.desemp-tab tr.final td { font-weight: 700; border-top: 1px solid var(--axis); }

/* cabeçalho agrupado (Comparecimento | Abstenção) */
table.data thead tr.grupo th.c { text-align: center; border-bottom: 1px solid var(--grid); }
table.data thead th[rowspan] { vertical-align: bottom; }

/* Maiores comparecimentos e abstenções */
.rank-ctrls { display: flex; flex-wrap: wrap; gap: 6px; }
.rank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .rank-grid { grid-template-columns: minmax(0, 1fr); } }
.rank-grid h3 { margin: 0 0 6px; font-size: 13px; }
.rank-lista { list-style: none; margin: 0; padding: 0 6px 0 0; counter-reset: rk; max-height: 452px; overflow-y: auto; overscroll-behavior: contain; }
.rank-lista li { counter-increment: rk; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--grid); font-size: 12px; }
.rank-lista li::before { content: counter(rk); color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.rank-lista li.vazio { display: block; }
.rank-lista li.vazio::before { content: none; }
.rank-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-local { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rank-nota { margin: 8px 0 0; }

/* Evolução: momentos de maior e menor diferença entre os dois */
.hl-marca { cursor: default; }
.hl-marca .hl-rot { font-size: 10px; font-weight: 600; fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.hl-marca:hover circle { r: 6.5; }

.proj-hero .conta b.sem-virada { color: var(--good-ink); }


/* Para onde foram os votos do 1º turno */
.tf-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--ink-2); margin: 0 0 8px; }
.tf-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.tf-linha { display: grid; grid-template-columns: minmax(150px, 230px) minmax(0, 1fr) 110px; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--grid); }
.tf-nome { display: grid; line-height: 1.25; font-size: 13px; }
.tf-barra { display: flex; height: 22px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--surface-2); }
.tf-barra span { display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.tf-barra span.tf-claro { color: var(--ink); }
.tf-conf { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.tf-incerto { font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2); }
.tf-sep { margin: 12px 0 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
@media (max-width: 640px) { .tf-linha { grid-template-columns: minmax(0, 1fr) 80px; } .tf-barra { grid-column: 1 / -1; grid-row: 2; } }
.tf-info { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--ink); border-radius: 6px; }
.tf-info .ic { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--surface); font: 700 12px/18px var(--font); text-align: center; margin-top: 2px; }
.tf-info ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.tf-info b { color: var(--ink); }

/* ---- Ampliar quadro ---- */
.amp-btn { position: absolute; z-index: 20; padding: 3px 10px; font-size: 12px; font-weight: 600; border-radius: 999px; cursor: pointer;
  background: var(--ink); color: var(--surface); border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); opacity: .92; }
.amp-btn:hover { opacity: 1; }
.amp-overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px;
  background: color-mix(in srgb, var(--page) 55%, rgba(0, 0, 0, .55)); backdrop-filter: blur(2px); }
.amp-overlay[hidden] { display: none; }
.amp-caixa { width: min(1500px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-radius: 12px; }
.amp-caixa > .panel.ampliado { margin: 0; min-height: 0; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.amp-fechar { position: fixed; top: 14px; right: 18px; z-index: 41; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer;
  background: var(--ink); color: var(--surface); border: 0; }
body.com-ampliado { overflow: hidden; }
/* tamanhos dentro do quadro ampliado: ocupam a altura da tela (dvh acompanha a barra do navegador no celular),
   descontando o título e os controles do quadro */
.panel.ampliado .chart { height: calc(100dvh - 170px); min-height: 260px; flex: none; }
.panel.ampliado .chart-prob { height: calc(100dvh - 170px); }
.panel.ampliado .chart-ritmo { height: calc(100dvh - 210px); min-height: 200px; flex: none; }
.panel.ampliado .map-wrap { height: calc(100dvh - 190px); min-height: 320px; }
.panel.ampliado #pf-mapa { height: calc(100dvh - 210px); min-height: 320px; }
.panel.ampliado #pf-scatter { height: calc(100dvh - 260px); min-height: 300px; }
.panel.ampliado #t1-evol, .panel.ampliado #t1-ritmo { height: calc(50dvh - 120px); min-height: 200px; }
/* celular e tablet: o quadro ampliado cobre a tela inteira */
@media (max-width: 900px), (hover: none) {
  .amp-overlay { padding: 0; place-items: stretch; }
  .amp-caixa { width: 100%; max-height: none; height: 100dvh; border-radius: 0; }
  .amp-caixa > .panel.ampliado { min-height: 100%; border-radius: 0; border: 0; padding: 48px 12px 16px; }
  .amp-fechar { top: 8px; right: 10px; }
}
.panel.ampliado .pf-lado-c canvas { height: 220px; }
.panel.ampliado .table-wrap, .panel.ampliado .rank-lista { max-height: none; }
/* telas de toque: botão fixo de ampliar no canto de cada quadro */
.amp-fixo { position: absolute; top: -9px; right: -6px; z-index: 5; width: 28px; height: 28px; border-radius: 50%; padding: 0; font-size: 14px;
  background: var(--ink); color: var(--surface); border: 2px solid var(--page); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); cursor: pointer; }
.panel.ampliado > .amp-fixo { display: none; }
@media (hover: hover) { .amp-fixo { display: none; } }

/* bolinha verde pulsando ao lado de "2º turno" (Cidades e voto) enquanto a apuração está em andamento */
.pulso-verde { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; vertical-align: 1px;
  background: var(--good); --pulso: var(--good); animation: pulso-vivo 1.6s ease-out infinite; }
.pulso-verde[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pulso-verde { animation: none; } }

/* ---- 1º × 2º turno ---- */
.cmp-filtro { margin: 0; }
.cmp-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px 20px; margin-top: 8px; }
.cmp-tile { border: 1px solid var(--grid); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.cmp-tit { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.cmp-val { font-size: 17px; font-variant-numeric: tabular-nums; }
.cmp-val b { font-size: 21px; }
.cmp-val.pq { font-size: 14px; }
.cmp-val.pq b { font-size: 16px; }
.cmp-sub { font-size: 12px; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cmp-nota { grid-column: 1 / -1; margin: 0; }
#cmp-disp { width: 100%; height: 480px; display: block; }
@media (max-width: 640px) { #cmp-disp { height: 380px; } }
.panel.ampliado #cmp-disp { height: calc(100dvh - 240px); min-height: 300px; }
.pf-leg .sw.cmp-sw-virou { background: transparent; border: 1.5px solid var(--ink); box-sizing: border-box; }
#cmp-cresc tr.geral td { font-weight: 600; border-bottom: 1px solid var(--axis); }
#cmp-cresc tr.reg td { background: var(--surface-2); }
#cmp-cresc th { vertical-align: bottom; line-height: 1.25; }
#cmp-perfil tr.geral td { border-bottom: 1px solid var(--axis); }
#cmp-perfil td.dif .fx { white-space: normal; max-width: 260px; }
.cmp-link { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 13px; }
.pf-leg .cmp-sw-linha { display: inline-block; width: 16px; border-top: 1.5px dashed var(--ink-2); margin-right: 5px; vertical-align: 3px; }
#cmp-perfil-dest { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px 24px; }
#cmp-perfil-dest .n { font-size: 24px; }
#cmp-perfil-dest .n.fator { font-size: 15px; font-weight: 700; color: var(--ink); }
#cmp-perfil-dest .d { max-width: none; }
#cmp-perfil-dest .pos { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 700; margin-right: 6px; vertical-align: 2px; }
#cmp-cresc td .small { font-size: 11px; }
@media (max-width: 640px) {
  .cmp-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cmp-tile { padding: 8px; }
  .cmp-val { font-size: 14px; } .cmp-val b { font-size: 18px; }
  .cmp-val.pq { font-size: 13px; } .cmp-val.pq b { font-size: 14px; }
}

/* ---- 2026 × 2022 ---- */
.a22-momento { margin: 4px 0 8px; flex-wrap: wrap; }
.a22-momento button { position: relative; }
.dest-item .sub { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }

/* cartões de comparação (1º × 2º turno, 2026 × 2022): um momento por linha, o atual em destaque, a variação embaixo */
.cc { border: 1px solid var(--grid); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cc-tit { font-size: 13px; font-weight: 700; line-height: 1.3; margin-bottom: 2px; }
.cc-sub { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.cc-lin { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; }
.cc-rot { font-size: 11px; color: var(--muted); white-space: nowrap; }
.cc-v { text-align: right; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.cc-atual .cc-v { font-size: 21px; font-weight: 700; color: var(--ink); }
.cc-x { grid-column: 2; text-align: right; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cc-rod { margin-top: auto; padding-top: 6px; border-top: 1px solid var(--grid); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cc-pq .cc-v { font-size: 13px; white-space: normal; } .cc-pq .cc-atual .cc-v { font-size: 16px; }
@media (max-width: 640px) { .cc-atual .cc-v { font-size: 18px; } .cc-v { font-size: 14px; } }
/* aba com o ano embaixo do nome, menor e centralizado */
.tabs button.tab-ano { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding-top: 3px; padding-bottom: 3px; }
.tabs button.tab-ano .ano { font-size: 10px; font-weight: 400; color: var(--muted); }

.tooltip .tg .tg-mais { color: var(--ink); font-weight: 600; } .tooltip .tg .tg-menos { color: var(--muted); font-weight: 600; }

/* "Análises ▾": menu com as abas de análise */
.tab-grupo { position: relative; flex: none; }
.tabs button.tab-mais { white-space: nowrap; }
.tabs button.tab-mais .seta { font-size: 10px; margin-left: 2px; color: var(--muted); }
.tabs button.tab-mais.ativo { background: var(--surface-2); color: var(--ink); border-color: var(--border); font-weight: 600; }
/* com uma análise aberta, "Análises" fica como rótulo pequeno acima do nome da aba */
.tabs button.tab-mais .tab-mais-rot { display: none; }
.tabs button.tab-mais.ativo { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.1; padding-top: 3px; padding-bottom: 3px; }
.tabs button.tab-mais.ativo .tab-mais-rot { display: block; font-size: 10px; font-weight: 400; color: var(--muted); }
.tab-menu { position: fixed; z-index: 200; min-width: 220px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.tab-menu[hidden] { display: none; }
.tab-menu button { font: inherit; font-size: 13px; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  width: 100%; text-align: left; padding: 8px 12px; }
.tab-menu button:hover { background: var(--surface-2); }
.tab-menu button[aria-selected="true"] { background: var(--surface-2); color: var(--ink); border-color: var(--border); font-weight: 600; }
.tab-menu button.tab-ano { display: flex; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 5px; }
.tab-menu button.tab-ano .ano { font-size: 13px; color: inherit; }