/* painéis: o número manda. Fundo escuro no Raio-X; claro nos demais. */
.painel-topo { padding-top: var(--e-8); padding-bottom: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); border-bottom: var(--fio); }
[data-tema="escuro"] .painel-topo { border-bottom-color: #3B3733; }
.painel-topo h1 { max-width: 18ch; }
.painel-lead { max-width: 760px; margin: 0; color: var(--qmq-ink-2); }
.painel-regiao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); font-size: var(--t-apoio); }
.painel-regiao .btn { min-height: 40px; padding: var(--e-2) var(--e-4); font-size: var(--t-apoio); }
.painel-corpo { padding-top: var(--e-6); padding-bottom: var(--e-14); display: flex; flex-direction: column; gap: var(--e-6); }
.painel-bloco { display: flex; flex-direction: column; gap: var(--e-4); border-top: var(--fio); padding-top: var(--e-4); }
[data-tema="escuro"] .painel-bloco { border-top-color: #FBF7F0; }
.painel-bloco h2 { font-size: var(--t-h3); }
.bloco-cabeca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--e-2); }
.painel-grade-2 { display: grid; grid-template-columns: 1fr; gap: var(--e-6); }
@media (min-width: 1080px) { .painel-grade-2 { grid-template-columns: 1fr 1fr; } }
.kpis { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kpi { background: var(--qmq-bg-2); padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); border-top: 3px solid var(--qmq-ink); }
[data-tema="escuro"] .kpi { border-top-color: var(--qmq-acao); }
.kpi .kpi-rotulo { font-size: var(--t-apoio); color: var(--qmq-ink-2); }
.kpi .kpi-valor { font-family: var(--f-display); font-weight: 800; font-size: var(--t-numero); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi .kpi-apoio { font-size: var(--t-apoio); color: var(--qmq-ink-2); }
.kpi .nao-informado { font-size: var(--t-corpo); }
.comparacao { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-apoio); color: var(--qmq-ink-2); }
.comparacao b { color: var(--qmq-ink); }
/* barras do painel: o rótulo à esquerda, valor escrito à direita, cor do nível só no destaque */
.painel-barras { display: flex; flex-direction: column; gap: 10px; }
.painel-barras .barra-h { grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) 110px; }
@media (max-width: 719px) { .painel-barras .barra-h { grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) 96px; } }
.painel-barras .barra-rotulo { text-align: left; line-height: 1.2; }
.painel-barras .barra-trilho { background: var(--qmq-bg-2); height: 20px; }
[data-tema="escuro"] .painel-barras .barra-trilho { background: #3B3733; }
.painel-barras .barra-valor { background: var(--qmq-neutro); height: 100%; }
.painel-barras .barra-num { font-variant-numeric: tabular-nums; }
.painel-barras .barra-media { position: absolute; top: -4px; bottom: -4px; width: 2px; border-left: 2px dashed var(--qmq-ink); }
[data-tema="escuro"] .painel-barras .barra-media { border-left-color: #FBF7F0; }
.painel-barras .barra-trilho { position: relative; overflow: visible; }
.legenda-media { font-size: var(--t-apoio); color: var(--qmq-ink-2); display: inline-flex; align-items: center; gap: var(--e-2); }
.legenda-media i { width: 18px; border-top: 2px dashed currentColor; display: inline-block; }
.titulo-conclusao { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: var(--t-h3); line-height: 1.2; margin: 0; max-width: 40ch; }
.grafico-acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.grafico-acoes .btn { min-height: 40px; padding: var(--e-2) var(--e-4); font-size: var(--t-apoio); }
.responsaveis { display: flex; flex-direction: column; gap: var(--e-2); }
.responsaveis div { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-corpo); }
.responsaveis i { width: 14px; height: 14px; flex: none; }
.medidores { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
/* matriz Quem faz o quê */
.matriz table { min-width: 720px; }
.matriz th.th-uniao { color: var(--qmq-uniao); } .matriz th.th-estado { color: var(--qmq-estado); } .matriz th.th-municipio { color: var(--qmq-municipio); }
.matriz tbody th { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; font-size: var(--t-apoio); letter-spacing: 1px; vertical-align: top; }
.matriz td { vertical-align: top; }
.matriz td span { display: block; }
.matriz .gasto { display: block; margin-top: var(--e-2); font-family: var(--f-display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.matriz .gasto:empty { display: none; }
.matriz .gasto small { display: block; font-family: var(--f-texto); font-weight: 400; font-size: var(--t-apoio); color: var(--qmq-ink-2); }
/* mapa */
.mapa-seletor { display: flex; flex-direction: column; gap: var(--e-1); max-width: 520px; font-size: var(--t-apoio); font-weight: 700; }
.mapa-seletor select { font: inherit; font-size: var(--t-corpo); min-height: var(--toque); padding: var(--e-2) var(--e-4); border: 2px solid var(--qmq-ink); background: var(--qmq-bg); color: var(--qmq-ink); }
.mapa-grade { display: grid; grid-template-columns: 1fr; gap: var(--e-6); align-items: start; }
@media (min-width: 1080px) { .mapa-grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.mapa-figura { margin: 0; }
.mapa-svg svg { width: 100%; height: auto; display: block; }
.mapa-svg path { stroke: var(--qmq-bg); stroke-width: .8; transition: fill 300ms; cursor: pointer; }
.mapa-svg path:hover, .mapa-svg path:focus { stroke: var(--qmq-ink); stroke-width: 2; outline: none; }
.mapa-svg path.sem-dado { fill: url(#hachura); }
.mapa-svg path.escolhido { stroke: var(--qmq-acao); stroke-width: 3; }
.mapa-legenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin-top: var(--e-3); font-size: var(--t-apoio); }
.mapa-legenda span { display: inline-flex; align-items: center; gap: var(--e-1); }
.mapa-legenda i { width: 18px; height: 14px; display: inline-block; }
.mapa-balao { position: fixed; z-index: 60; background: var(--qmq-ink); color: #FBF7F0; padding: var(--e-2) var(--e-3); font-size: var(--t-apoio); pointer-events: none; max-width: 260px; }
.mapa-balao[hidden] { display: none; }
.mapa-listas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); }
.mapa-listas h2 { font-size: var(--t-apoio); letter-spacing: 1.5px; text-transform: uppercase; border-bottom: var(--fio); padding-bottom: var(--e-1); }
.mapa-listas ol { padding-left: 1.4em; margin: var(--e-2) 0 0; font-variant-numeric: tabular-nums; }
.mapa-listas li { display: flex; justify-content: space-between; gap: var(--e-2); border-bottom: var(--fio-fino); padding: var(--e-1) 0; }
.mapa-listas .apoio { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .mapa-svg path { transition: none; } }

/* ===== ajuste 13/10/2026 (pedido do Glauber): respiro e placar de jornal no lugar de cards ===== */
/* números grandes como placar: sem fundo, fio grosso em cima, fio fino embaixo, número gigante */
.kpis { gap: 0 var(--e-8); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-bottom: var(--fio-fino); }
.kpi { background: transparent; padding: var(--e-5) 0 var(--e-6); border-top: var(--fio); gap: var(--e-3); }
[data-tema="escuro"] .kpi { border-top-color: #FBF7F0; }
[data-tema="escuro"] .kpis { border-bottom-color: #3B3733; }
.kpi .kpi-rotulo { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; text-transform: uppercase; letter-spacing: 1.5px; font-size: var(--t-apoio); color: var(--qmq-ink); line-height: 1.25; }
.kpi .kpi-valor { font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -0.02em; line-height: .95; }
.kpi .kpi-apoio { line-height: 1.45; }
.kpi .comparacao { margin-top: var(--e-1); }
/* blocos e gráficos com respiro */
.painel-corpo { gap: var(--e-11); }
.painel-bloco { gap: var(--e-5); padding-top: var(--e-5); }
.painel-bloco h2 { font-size: var(--t-h2); }
.bloco-cabeca { align-items: baseline; }
.titulo-conclusao { margin: var(--e-2) 0 var(--e-5); line-height: 1.25; }
.painel-barras { gap: var(--e-4); }
.painel-barras .barra-h { grid-template-columns: minmax(130px, 220px) minmax(0, 1fr) 120px; column-gap: var(--e-4); min-height: 32px; }
@media (max-width: 719px) { .painel-barras .barra-h { grid-template-columns: minmax(104px, 128px) minmax(0, 1fr) 104px; column-gap: var(--e-3); } }
.painel-barras .barra-rotulo { line-height: 1.3; padding: 2px 0; }
.painel-barras .barra-trilho { height: 24px; }
.painel-barras .barra-num { font-size: var(--t-corpo); }
.grafico { display: flex; flex-direction: column; gap: var(--e-3); }
.grafico .tabela-dados { margin-top: var(--e-2); }
.grafico-acoes { gap: var(--e-3); margin-top: var(--e-2); padding-top: var(--e-4); border-top: var(--fio-fino); }
[data-tema="escuro"] .grafico-acoes { border-top-color: #3B3733; }
.grafico-acoes .fonte { flex: 1 1 100%; margin-top: var(--e-2); }
.grafico-acoes .tabela-dados { margin: 0; }
.legenda-media { margin-top: var(--e-1); }
.responsaveis { gap: var(--e-3); }
.medidores { gap: var(--e-8); }
.matriz td, .matriz th { padding-top: var(--e-4); padding-bottom: var(--e-4); line-height: 1.45; }
.matriz .gasto { margin-top: var(--e-3); font-size: 24px; }
.painel-lead { line-height: 1.55; }
.painel-topo { gap: var(--e-4); padding-bottom: var(--e-6); }
/* listas do mapa: uma coluna por vez, posição + nome + valor sem quebra */
.mapa-listas { grid-template-columns: 1fr; gap: var(--e-6); }
.mapa-listas h2 { font-size: var(--t-apoio); letter-spacing: 1.5px; text-transform: uppercase; border-bottom: var(--fio); padding-bottom: var(--e-2); margin: 0; }
.mapa-listas ol { list-style: none; padding: 0; margin: 0; counter-reset: pos; }
.mapa-listas li { counter-increment: pos; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: var(--e-3); align-items: baseline; padding: var(--e-3) 0; min-height: var(--toque); }
.mapa-listas li::before { content: counter(pos, decimal-leading-zero); font-family: var(--f-display); font-weight: 800; color: var(--qmq-ink-2); }
.mapa-listas li span { line-height: 1.3; }
.mapa-listas li b { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mapa-listas .apoio { margin-top: var(--e-2); }
@media (min-width: 1080px) { .mapa-grade { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--e-11); } }
.mapa-legenda { gap: var(--e-3) var(--e-5); margin-top: var(--e-5); }
.mapa-legenda i { width: 22px; height: 16px; }
.mapa-seletor { gap: var(--e-2); margin-bottom: var(--e-2); }
/* valor da barra nunca quebra; no celular a coluna do valor é automática */
.painel-barras .barra-num { white-space: nowrap; }
@media (max-width: 719px) { .painel-barras .barra-h { grid-template-columns: minmax(96px, 120px) minmax(0, 1fr) auto; } }

/* reserva de espaço enquanto o JSON carrega (evita salto de layout) */
[data-kpis]:empty { min-height: 420px; }
[data-grafico]:empty { min-height: 360px; }
@media (min-width: 720px) { [data-kpis]:empty { min-height: 300px; } }
.painel-topo h1 { min-height: 1.1em; }