:root {
  --fundo: #0e1014;
  --painel: #14171d;
  --cartao: #191d24;
  --linha: #262b34;
  --grade: #232831;
  --texto: #e8eaee;
  --suave: #9aa2ad;
  --apagado: #6b7380;
  --lula: #ef4f5f;
  --flavio: #4d8dff;
  --neutro: #6b7280;
  --destaque: #f5c84c;
  --esq: 290px;
  --dir: 420px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--fundo); color: var(--texto);
  display: grid; height: 100dvh;
  grid-template-columns: var(--esq) 1fr var(--dir);
  grid-template-rows: auto 1fr;
  grid-template-areas: "topo topo topo" "esq centro dir";
}
button, select, input { font: inherit; color: inherit; }

.topo {
  grid-area: topo; display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; border-bottom: 1px solid var(--linha); background: var(--painel);
}
.marca strong { font-size: 16px; letter-spacing: -0.01em; }
.marca span { color: var(--suave); font-size: 13px; margin-left: 10px; }
.carga { margin: 0 0 0 auto; color: var(--suave); font-size: 12px; }
.abas { display: none; }

.esq, .dir { overflow-y: auto; background: var(--painel); scrollbar-gutter: stable; }
.esq { grid-area: esq; border-right: 1px solid var(--linha); padding: 6px 14px 24px; }
.dir { grid-area: dir; border-left: 1px solid var(--linha); padding: 10px 12px 24px; display: flex; flex-direction: column; gap: 10px; }
.centro { grid-area: centro; position: relative; min-height: 0; }
#mapa { position: absolute; inset: 0; }

h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); font-weight: 600; margin: 0 0 8px; }
h3 { font-size: 14px; margin: 0; font-weight: 650; }
h4 { font-size: 12px; margin: 14px 0 4px; color: var(--suave); font-weight: 600; }
.bloco { padding: 14px 0; border-bottom: 1px solid var(--linha); }
.bloco:last-child { border-bottom: 0; }
label { display: block; font-size: 12px; color: var(--suave); margin: 8px 0 4px; }
select, input[type=search] {
  width: 100%; padding: 7px 9px; background: var(--cartao); border: 1px solid var(--linha);
  border-radius: 8px;
}
select:disabled { opacity: .5; }
.ajuda { color: var(--suave); font-size: 12px; margin: 4px 0 8px; }
.link { background: none; border: 0; color: var(--flavio); padding: 0; margin-top: 10px; cursor: pointer; text-decoration: underline; font-size: 13px; }
.nota p { color: var(--suave); font-size: 12px; margin: 0; }
.nota em { color: var(--texto); font-style: normal; }

.janela { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.janela output { font-size: 20px; font-weight: 650; }
.janela span { color: var(--suave); }
.duplo { position: relative; height: 28px; }
.duplo input { position: absolute; inset: 0; width: 100%; pointer-events: none; appearance: none; background: none; margin: 0; }
.duplo input::-webkit-slider-thumb { pointer-events: auto; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--texto); border: 2px solid var(--fundo); cursor: grab; }
.duplo input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--texto); border: 2px solid var(--fundo); cursor: grab; }
.duplo::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--linha); }
.atalhos { display: flex; flex-wrap: wrap; gap: 6px; }
.atalhos button, .acoes button, .seg button, .tocar button {
  background: var(--cartao); border: 1px solid var(--linha); border-radius: 999px;
  padding: 4px 10px; font-size: 12px; cursor: pointer;
}
.atalhos button:hover, .acoes button:hover, .seg button:hover { border-color: var(--suave); }
fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { font-size: 12px; color: var(--suave); margin-bottom: 4px; padding: 0; }
fieldset label, .opcoes label { display: flex; align-items: center; gap: 8px; color: var(--texto); font-size: 13px; margin: 4px 0; cursor: pointer; }
fieldset label .n { margin-left: auto; color: var(--apagado); font-variant-numeric: tabular-nums; font-size: 12px; }
input[type=radio], input[type=checkbox] { accent-color: var(--texto); }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.seg { display: flex; gap: 4px; flex-shrink: 0; }
.seg button { white-space: nowrap; }
.seg button[aria-pressed=true], .tocar button[aria-pressed=true] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.acoes { display: flex; gap: 6px; margin-top: 6px; }
.onde { font-size: 17px; font-weight: 650; margin: 0; }
.sub { color: var(--suave); font-size: 12px; margin: 2px 0 10px; }
.placar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { border-radius: 10px; padding: 8px 10px; background: var(--painel); border: 1px solid var(--linha); }
.tile .nome { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.tile .nome::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.tile.lula .nome::before { background: var(--lula); }
.tile.flavio .nome::before { background: var(--flavio); }
.tile b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tile .num { font-size: 12px; color: var(--suave); font-variant-numeric: tabular-nums; }
.barra { position: relative; display: flex; gap: 2px; height: 8px; margin: 10px 0 4px; }
.barra i { display: block; border-radius: 4px; }
.barra i:first-child { background: var(--lula); }
.barra i:last-child { background: var(--flavio); }
.barra::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--texto); opacity: .6; }
.mini { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin: 8px 0 0; font-size: 12px; }
.mini dt { color: var(--suave); }
.mini dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.grafico { width: 100%; height: 190px; position: relative; }
.grafico.baixo { height: 110px; }
.grafico.quadrado { height: 260px; }
.grafico svg, .grafico canvas { display: block; width: 100%; height: 100%; }
.eixo text { fill: var(--apagado); font-size: 10px; font-variant-numeric: tabular-nums; }
.eixo path, .eixo line { stroke: var(--grade); }
.grade line { stroke: var(--grade); }
.grade path { display: none; }

.tabela { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.tabela th { text-align: right; color: var(--suave); font-weight: 500; padding: 4px 6px; border-bottom: 1px solid var(--linha); }
.tabela td { text-align: right; padding: 5px 6px; border-bottom: 1px solid var(--grade); }
.tabela th:first-child, .tabela td:first-child { text-align: left; }

.lista { list-style: none; margin: 6px 0 0; padding: 0; max-height: 360px; overflow-y: auto; }
.lista li { border-bottom: 1px solid var(--grade); }
.lista button { all: unset; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; padding: 7px 4px; cursor: pointer; box-sizing: border-box; }
.lista button:hover, .lista button:focus-visible { background: var(--painel); }
.lista .t { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista .v { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.lista .s { grid-column: 1 / -1; font-size: 11px; color: var(--suave); }

.legenda {
  position: absolute; left: 12px; bottom: 28px; background: rgba(20, 23, 29, .92);
  border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; width: 230px; font-size: 11px;
}
.legenda .t { font-weight: 600; font-size: 12px; margin-bottom: 6px; }
.legenda .grad { height: 8px; border-radius: 4px; }
.legenda .ext { display: flex; justify-content: space-between; color: var(--suave); margin-top: 4px; }
.legenda .s { color: var(--apagado); margin-top: 6px; }
.tocar { position: absolute; left: 50%; transform: translateX(-50%); top: 12px; display: flex; gap: 8px; align-items: center; }
.tocar button { background: rgba(20, 23, 29, .92); padding: 6px 14px; font-size: 13px; }
.tocar output { background: rgba(20, 23, 29, .92); border: 1px solid var(--linha); border-radius: 999px; padding: 5px 12px; font-variant-numeric: tabular-nums; font-weight: 650; }
.tocar output:empty { display: none; }

.dica {
  position: fixed; pointer-events: none; z-index: 10; background: #0b0d10; border: 1px solid var(--linha);
  border-radius: 8px; padding: 6px 9px; font-size: 12px; max-width: 260px; box-shadow: 0 6px 20px #0008;
  font-variant-numeric: tabular-nums;
}
.dica b { font-weight: 650; }
.dica .l { color: var(--lula); } .dica .f { color: var(--flavio); }

.maplibregl-popup-content { background: #0b0d10; color: var(--texto); border: 1px solid var(--linha); border-radius: 10px; font: 12px/1.45 Inter, system-ui, sans-serif; padding: 10px 12px; min-width: 230px; }
.maplibregl-popup-tip { border-top-color: #0b0d10 !important; border-bottom-color: #0b0d10 !important; }
.maplibregl-popup-close-button { color: var(--suave); font-size: 16px; }
.pop b { display: block; font-size: 13px; margin-bottom: 2px; padding-right: 14px; }
.pop .sub { margin: 0 0 6px; }
.pop .l { color: var(--lula); font-weight: 650; } .pop .f { color: var(--flavio); font-weight: 650; }
.pop table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pop td { padding: 1px 0; } .pop td + td { text-align: right; }
.pop td:first-child { color: var(--suave); }
.maplibregl-ctrl-attrib { background: rgba(14, 16, 20, .8) !important; color: var(--apagado); }
.maplibregl-ctrl-attrib a { color: var(--suave); }

@media (max-width: 1100px) {
  :root { --esq: 250px; --dir: 360px; }
  .marca span { display: none; }
}
@media (max-width: 820px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "topo" "centro"; }
  .topo { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .abas { display: flex; gap: 4px; order: 3; width: 100%; }
  .abas button { flex: 1; background: var(--cartao); border: 1px solid var(--linha); border-radius: 8px; padding: 7px; cursor: pointer; }
  .abas button[aria-current=true] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
  .esq, .dir { grid-area: centro; border: 0; padding-left: 16px; padding-right: 16px; display: none; }
  body[data-aba=filtros] .esq { display: block; }
  body[data-aba=analise] .dir { display: flex; }
  body[data-aba=filtros] .centro, body[data-aba=analise] .centro { display: none; }
  .legenda { width: 200px; bottom: 30px; }
  .legenda .s { display: none; }
  .legenda .ext { font-size: 10px; }
  .tocar { top: 10px; }
}