:root {
  --fundo: #fbf6f3;
  --cartao: #ffffff;
  --borda: #eadfd8;
  --texto: #1f1b19;
  --suave: #6d625c;
  --destaque: #b3261e;
  --lula: #c62828;
  --lula-claro: #f6d4d1;
  --flavio: #1f5fbf;
  --flavio-claro: #d3e0f5;
  --neutro: #a8a29e;
  --ok: #1b8a5a;
  --sombra: 0 1px 2px rgba(60, 30, 20, .06), 0 4px 16px rgba(60, 30, 20, .05);
  --raio: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #161312;
    --cartao: #211d1b;
    --borda: #3a3330;
    --texto: #f2ece8;
    --suave: #b3a9a3;
    --destaque: #ef6b5f;
    --lula: #ef5350;
    --lula-claro: #4a2523;
    --flavio: #5b8fe0;
    --flavio-claro: #1f2f4a;
    --neutro: #78716c;
    --ok: #4cc38a;
    --sombra: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2 { margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1rem; }
a { color: var(--destaque); }

.topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  padding: 16px clamp(16px, 3vw, 32px);
  border-bottom: 1px solid var(--borda);
  background: var(--cartao);
  position: sticky; top: 0; z-index: 1000;
}
.marca { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.logo { width: 32px; height: 32px; border-radius: 8px; background: var(--destaque) url(/favicon.svg) center/cover; }
.marca h1 { font-size: 1.25rem; }
.marca p { margin: 0; color: var(--suave); font-size: .85rem; }

.abas { display: flex; gap: 4px; background: var(--fundo); padding: 4px; border-radius: 10px; border: 1px solid var(--borda); }
.abas button {
  border: 0; background: transparent; color: var(--suave);
  padding: 8px 14px; border-radius: 7px; font: inherit; font-weight: 600; cursor: pointer;
}
.abas button[aria-selected="true"] { background: var(--cartao); color: var(--texto); box-shadow: var(--sombra); }
.ao-vivo { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--destaque); }
.ao-vivo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulso 1.6s infinite; }
.ao-vivo[hidden] { display: none; }
@keyframes pulso { 50% { opacity: .25; } }

.controles { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; }
.controles label { display: grid; gap: 2px; font-size: .75rem; color: var(--suave); }
select, .botao {
  font: inherit; font-size: .9rem; padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--borda); background: var(--cartao); color: var(--texto);
}
.botao { cursor: pointer; font-weight: 600; }
.botao.primario { background: var(--destaque); border-color: var(--destaque); color: #fff; }
.botao:focus-visible, select:focus-visible, .abas button:focus-visible, .tabela tr:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }

main { padding: 20px clamp(16px, 3vw, 32px) 8px; display: grid; gap: 16px; max-width: 1500px; margin: 0 auto; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px; box-shadow: var(--sombra); }
.kpi .rotulo { font-size: .8rem; color: var(--suave); display: flex; align-items: center; gap: 6px; }
.kpi .valor { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .det { font-size: .82rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.kpi.lula .valor { color: var(--lula); }
.kpi.flavio .valor { color: var(--flavio); }
.barra { height: 6px; border-radius: 3px; background: var(--borda); overflow: hidden; margin-top: 8px; }
.barra > span { display: block; height: 100%; background: var(--destaque); }
.ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.ponto.lula { background: var(--lula); }
.ponto.flavio { background: var(--flavio); }

.fonte { margin: -4px 0 0; font-size: .82rem; color: var(--suave); }
.fonte strong { color: var(--texto); }

.grade { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); min-width: 0; }
.mapa-cartao { padding: 0; overflow: hidden; }
.mapa-titulo { padding: 14px 16px 10px; }
.mapa-titulo p, .dica { margin: 2px 0 0; font-size: .82rem; color: var(--suave); }
#mapa { height: min(68vh, 620px); background: var(--fundo); }
.leaflet-tile-pane { filter: grayscale(.85) contrast(.95) brightness(1.04); }
@media (prefers-color-scheme: dark) { .leaflet-tile-pane { filter: grayscale(1) invert(.9) brightness(.9) contrast(.9); } }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px 14px; font-size: .8rem; color: var(--suave); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.escala { width: 160px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--flavio), var(--neutro), var(--lula)); }

.lateral { display: grid; gap: 4px; }
.tabela-rolagem { overflow: auto; max-height: min(68vh, 640px); margin-top: 8px; }
.tabela-rolagem.larga { max-height: 520px; }
.tabela { width: 100%; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.tabela th { position: sticky; top: 0; background: var(--cartao); text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 7px 8px; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela td.n, .tabela th.n { text-align: right; white-space: nowrap; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover, .tabela tbody tr.ativo { background: var(--fundo); }
.tabela .nome { font-weight: 600; }
.tabela .sub { display: block; color: var(--suave); font-size: .75rem; font-weight: 400; }
.tabela .lula { color: var(--lula); font-weight: 600; }
.tabela .flavio { color: var(--flavio); font-weight: 600; }
.tabela .vazio { color: var(--suave); text-align: center; padding: 24px 8px; cursor: default; }
.tabela tfoot td { font-weight: 700; border-top: 2px solid var(--borda); }

details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
details summary::before { content: "▸"; color: var(--suave); }
details[open] summary::before { content: "▾"; }

#evolucao svg { width: 100%; height: auto; display: block; margin-top: 8px; }
#evolucao .eixo { stroke: var(--borda); }
#evolucao text { fill: var(--suave); font-size: 11px; }
#evolucao .rot-lula { fill: var(--lula); font-weight: 700; font-size: 12px; }
#evolucao .rot-flavio { fill: var(--flavio); font-weight: 700; font-size: 12px; }
.aviso { color: var(--suave); font-size: .9rem; padding: 18px 0 6px; }

.popup h3 { margin: 0 0 2px; font-size: .95rem; }
.popup p { margin: 0 0 6px; color: #555; font-size: .78rem; }
.popup table { border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.popup td { padding: 2px 8px 2px 0; }
.popup .lula { color: #c62828; font-weight: 700; }
.popup .flavio { color: #1f5fbf; font-weight: 700; }

.visao-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 12px; }
.alternador { display: flex; gap: 4px; background: var(--fundo); padding: 4px; border-radius: 10px; border: 1px solid var(--borda); }
.alternador button { border: 0; background: transparent; color: var(--suave); padding: 6px 12px; border-radius: 7px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.alternador button[aria-pressed="true"] { background: var(--cartao); color: var(--texto); box-shadow: var(--sombra); }
.alternador button:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 14px; }
.card-local {
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio); padding: 14px 16px;
  display: grid; gap: 10px; align-content: start;
}
.card-local:hover, .card-local.ativo { border-color: var(--destaque); }
.card-local:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
.card-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.card-cab strong { font-size: 1.02rem; line-height: 1.25; }
.card-cab span, .card-sub, .card-horas, .card-secoes { font-size: .75rem; color: var(--suave); }
.card-cab span { white-space: nowrap; }
.card-sub { margin-top: -8px; }
.card-cand { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--borda); }
.card-cand .nomec { font-size: .78rem; font-weight: 600; }
.card-cand .num { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.card-cand .det { font-size: .72rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.card-cand .lula { color: var(--lula); }
.card-cand .flavio { color: var(--flavio); }
.card-prog { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; color: var(--suave); }
.card-prog strong { font-size: 1.05rem; color: var(--ok); font-variant-numeric: tabular-nums; }
.card-local .barra { margin-top: -4px; }
.card-local .barra > span { background: var(--ok); }
.card-status { font-size: .8rem; font-weight: 600; color: var(--ok); }
.card-status.espera { color: var(--suave); }

a.marca { color: inherit; text-decoration: none; }
a.botao { text-decoration: none; display: inline-flex; align-items: center; }
.ponto.cinza { background: var(--neutro); }
.lateral-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lateral-cab .botao { padding: 4px 10px; font-size: .8rem; }
.busca { font: inherit; font-size: .9rem; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--borda); background: var(--fundo); color: var(--texto); margin-top: 6px; width: 100%; }
.busca:focus-visible { outline: 2px solid var(--destaque); outline-offset: 1px; }
.kpi.ativo { border-color: var(--destaque); }
.mapa-mundo { height: min(70vh, 640px); }
.separado { margin-top: 16px; }
.tabela-rolagem.curta { max-height: 260px; }

.rodape { padding: 16px clamp(16px, 3vw, 32px) 32px; color: var(--suave); font-size: .8rem; max-width: 1500px; margin: 0 auto; }
.rodape p { margin: 4px 0; }

@media (max-width: 980px) {
  .grade { grid-template-columns: 1fr; }
  #mapa { height: 420px; }
  .tabela-rolagem { max-height: 420px; }
}
@media (max-width: 560px) {
  .topo { position: static; }
  .abas { width: 100%; }
  .abas button { flex: 1; padding: 8px 6px; }
  .controles { width: 100%; }
  .controles label { flex: 1; }
  .kpi .valor { font-size: 1.5rem; }
}