/* Dias agradáveis por município — cores só por variáveis; escuro duplicado (preferência do sistema e escolha manual). */
:root {
  --fundo: #f7f6f2;
  --cartao: #ffffff;
  --texto: #1c1c1a;
  --texto-2: #5b5a55;
  --borda: #dedcd5;
  --destaque: #1d4ed8;
  --pilula: #ecebe5;
  --pilula-ativa: #1c1c1a;
  --pilula-ativa-texto: #ffffff;
  --sem-dado: #e4e2dc;
  --contorno: rgba(28, 28, 26, 0.45);
  --realce: #1c1c1a;
  --rampa-0: #eef2ff;
  --rampa-1: #0b1f8f;
  --barra: #3b5bdb;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.08);
  --raio: 10px;
  --fonte: "IBM Plex Sans", system-ui, sans-serif;
  --fonte-titulo: "Source Serif 4", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #141413;
    --cartao: #1e1e1c;
    --texto: #ecebe6;
    --texto-2: #a9a79f;
    --borda: #34332f;
    --destaque: #8fa8ff;
    --pilula: #2a2a27;
    --pilula-ativa: #ecebe6;
    --pilula-ativa-texto: #141413;
    --sem-dado: #45443f;
    --contorno: rgba(236, 235, 230, 0.35);
    --realce: #ffffff;
    --rampa-0: #1d2030;
    --rampa-1: #a9bcff;
    --barra: #8fa8ff;
    --sombra: none;
  }
}
:root[data-theme="dark"] {
  --fundo: #141413;
  --cartao: #1e1e1c;
  --texto: #ecebe6;
  --texto-2: #a9a79f;
  --borda: #34332f;
  --destaque: #8fa8ff;
  --pilula: #2a2a27;
  --pilula-ativa: #ecebe6;
  --pilula-ativa-texto: #141413;
  --sem-dado: #45443f;
  --contorno: rgba(236, 235, 230, 0.35);
  --realce: #ffffff;
  --rampa-0: #1d2030;
  --rampa-1: #a9bcff;
  --barra: #8fa8ff;
  --sombra: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 16px/1.55 var(--fonte); }
a { color: var(--destaque); }
.conteiner { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.tema-switch-v2 { position: absolute; top: 12px; right: 16px; display: flex; gap: 4px; z-index: 5; }
.tema-switch-v2__btn { border: 1px solid var(--borda); background: var(--cartao); color: var(--texto); border-radius: 999px; padding: 4px 10px; font: 13px var(--fonte); cursor: pointer; }
.tema-switch-v2__btn[aria-pressed="true"] { background: var(--pilula-ativa); color: var(--pilula-ativa-texto); }

.cabecalho { padding: 56px 0 8px; }
.sobrelinha { margin: 0; color: var(--destaque); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
h1 { font-family: var(--fonte-titulo); font-size: clamp(30px, 6vw, 48px); line-height: 1.1; margin: 8px 0 12px; }
h2 { font-family: var(--fonte-titulo); font-size: 24px; margin: 0 0 6px; }
h3 { font-size: 16px; margin: 20px 0 6px; }
.subtitulo { max-width: 68ch; margin: 0 0 8px; font-size: 17px; }
.fonte-linha, .desc, .ressalva { color: var(--texto-2); font-size: 14px; margin: 4px 0; max-width: 72ch; }

.controles { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 18px 0 12px; }
.pilulas { display: flex; flex-wrap: wrap; gap: 4px; }
.pilula { border: 0; background: var(--pilula); color: var(--texto); border-radius: 999px; padding: 6px 14px; font: 500 14px var(--fonte); cursor: pointer; }
.pilula[aria-pressed="true"] { background: var(--pilula-ativa); color: var(--pilula-ativa-texto); }
.pilula-nota { font-weight: 400; font-size: 12px; opacity: .8; }
.busca { flex: 1 1 220px; }
.busca input { width: 100%; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--cartao); color: var(--texto); font: 15px var(--fonte); }

.mapa-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .mapa-grade { grid-template-columns: minmax(0, 1fr); } }
.mapa-area { position: relative; margin: 0; background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px; box-shadow: var(--sombra); }
#mapa-canvas { display: block; width: 100%; touch-action: manipulation; cursor: crosshair; }
.mapa-dica { position: absolute; pointer-events: none; background: var(--cartao); color: var(--texto); border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.15); max-width: 240px; }
figcaption { padding: 4px 8px 4px; }
.legenda { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-2); flex-wrap: wrap; }
.legenda-barra { height: 10px; flex: 1 1 160px; max-width: 320px; border-radius: 5px; }
.legenda-chave { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; background: var(--sem-dado); }

.painel { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); min-height: 120px; }
.painel-vazio { color: var(--texto-2); margin: 0; }
.painel h2 { font-size: 22px; margin: 0; }
.painel .uf { color: var(--texto-2); font-weight: 400; }
.numero { font-family: var(--fonte-titulo); font-size: 44px; font-weight: 700; line-height: 1; margin: 12px 0 2px; }
.numero small { font: 400 15px var(--fonte); color: var(--texto-2); }
.meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; align-items: end; height: 90px; margin: 14px 0 4px; }
.mes { background: var(--barra); border-radius: 2px 2px 0 0; min-height: 1px; position: relative; }
.mes.vazio { background: var(--sem-dado); }
.meses-rotulo { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; font-size: 11px; color: var(--texto-2); text-align: center; }
.painel dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; margin: 12px 0 0; }
.painel dt { color: var(--texto-2); }
.painel dd { margin: 0; }
.aviso { background: var(--pilula); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-top: 10px; }

.cartao { background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; margin: 20px 0; box-shadow: var(--sombra); }
.tabela-rola { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borda); white-space: nowrap; }
.tabela td.n, .tabela th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tbody tr { cursor: pointer; }
.tabela tbody tr:hover { background: var(--pilula); }
.ranking { columns: 2 260px; padding-left: 28px; font-size: 15px; margin: 12px 0 0; }
.ranking li { break-inside: avoid; padding: 2px 0; }
.ranking button { background: none; border: 0; padding: 0; color: var(--destaque); font: inherit; cursor: pointer; text-align: left; }
.metodologia li { margin: 4px 0; }
.rodape { color: var(--texto-2); font-size: 13px; padding: 12px 0 40px; }