:root {
  --fundo: #0b1220; --card: #111a2e; --card2: #16213a; --linha: #23304d; --texto: #e5ecf6; --suave: #8b9bb8;
  --a22: #60a5fa; --a26: #fbbf24; --sobe: #f87171; --desce: #34d399; --destaque: #fbbf24;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 Inter, system-ui, sans-serif; }
a { color: var(--a26); }
.topo { position: sticky; top: 0; z-index: 5; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 12px 20px; background: rgba(11, 18, 32, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.marca { display: flex; gap: 10px; align-items: center; color: var(--texto); text-decoration: none; }
.marca .selo { background: var(--destaque); color: #111; font-weight: 800; border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.marca b { display: block; font-size: 16px; } .marca small { color: var(--suave); font-size: 12px; }
.sel { display: flex; flex-direction: column; font-size: 11px; color: var(--suave); gap: 3px; }
select, input { background: var(--card2); color: var(--texto); border: 1px solid var(--linha); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 14px; }
#f-mun { min-width: 260px; }
main { max-width: 1240px; margin: 0 auto; padding: 18px 20px 40px; }
.carregando { padding: 60px; text-align: center; color: var(--suave); }
h1 { font-size: 26px; margin: 4px 0 2px; letter-spacing: -.01em; } .sub { color: var(--suave); margin: 0 0 16px; }
h2 { font-size: 18px; margin: 28px 0 10px; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kpi { background: var(--card); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; }
.kpi span { color: var(--suave); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.kpi .par { display: flex; align-items: baseline; gap: 8px; margin: 6px 0 2px; flex-wrap: wrap; }
.kpi .v22 { color: var(--a22); font-weight: 700; font-size: 16px; } .kpi .v26 { color: var(--a26); font-weight: 800; font-size: 24px; }
.kpi .seta { color: var(--suave); }
.delta { font-weight: 700; font-size: 13px; border-radius: 6px; padding: 1px 7px; display: inline-block; }
.delta.sobe { color: var(--sobe); background: rgba(248, 113, 113, .12); } .delta.desce { color: var(--desce); background: rgba(52, 211, 153, .12); } .delta.zero { color: var(--suave); }
.kpi small { color: var(--suave); font-size: 12px; }
.leg { display: flex; gap: 14px; color: var(--suave); font-size: 13px; margin: 6px 0 0; }
.leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.card { background: var(--card); border: 1px solid var(--linha); border-radius: 14px; padding: 14px; }
.barras { display: grid; gap: 10px; }
.bz { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }
.bz b { font-size: 14px; } .bz small { color: var(--suave); display: block; font-size: 11px; }
.trilhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tr { font-size: 11px; color: var(--suave); }
.tr .b { height: 9px; border-radius: 4px; margin: 3px 0; }
.tr .b22 { background: var(--a22); } .tr .b26 { background: var(--a26); }
.abas { display: flex; gap: 6px; margin: 26px 0 10px; flex-wrap: wrap; align-items: center; }
.abas button { background: var(--card2); color: var(--suave); border: 1px solid var(--linha); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.abas button.ativo { background: var(--destaque); color: #111; border-color: var(--destaque); font-weight: 700; }
.abas .esp { flex: 1; }
.btn { background: none; color: var(--texto); border: 1px solid var(--suave); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.rolavel { overflow-x: auto; border: 1px solid var(--linha); border-radius: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--linha); text-align: right; white-space: nowrap; }
th { background: var(--card2); color: var(--suave); font-weight: 600; position: sticky; top: 0; cursor: pointer; user-select: none; }
th.g { text-align: center; border-left: 1px solid var(--linha); cursor: default; }
td.t, th.t { text-align: left; white-space: normal; min-width: 180px; }
td.sep, th.sep { border-left: 1px solid var(--linha); }
tr:hover td { background: rgba(255, 255, 255, .03); }
.c22 { color: var(--a22); } .c26 { color: var(--a26); }
.tag { font-size: 10px; font-weight: 700; border-radius: 5px; padding: 1px 6px; margin-left: 6px; background: var(--card2); color: var(--suave); border: 1px solid var(--linha); }
.tag.nova { color: var(--desce); } .tag.extinta { color: var(--sobe); }
.nota { color: var(--suave); font-size: 12px; margin: 8px 2px; }
.rodape { max-width: 1240px; margin: 0 auto; padding: 16px 20px 30px; color: var(--suave); font-size: 12px; }
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .trilhos { grid-template-columns: 1fr; gap: 4px; }
  .bz { grid-template-columns: 80px 1fr; }
  #f-mun { min-width: 0; width: 100%; } .sel { width: 100%; }
}