/* Design do dashboard. Referências: NYT graphics (hierarquia por
   tipografia; serifa no título, sans nos rótulos), WSJ (contenção
   institucional), ProPublica (invisibilidade do chrome; links azuis;
   "be ruthless in the cause of clarity"). Paleta de dados = a mesma do
   mapa (Editorial profundo). */
:root {
  --pt: #8F1D21;            /* vinho PT */
  --ad: #27568B;            /* azul adversário */
  --outros: #B08A3E;        /* ocre terceiros */
  --renda: #174E4A;         /* verde-petróleo renda */
  --fundo: #ffffff;
  --txt: #121212; --sub: #555;
  --borda: #e2e2e2;
  --link: #326891;          /* azul de link, convenção de notícia */
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--txt);
  font-family: var(--sans); line-height: 1.55; font-size: 15px; }
code, .num { font-variant-numeric: tabular-nums; }
h1, h2 { font-family: var(--serif); font-weight: 700; }
h1 { font-size: 30px; line-height: 1.18; margin: 10px 0 10px;
  letter-spacing: 0; }
h2 { font-size: 20px; margin: 0 0 8px; }
h3 { font-size: 14.5px; margin: 0 0 6px; }
p.sub, .sub { color: var(--sub); }
a { color: var(--link); }
small { color: var(--sub); }

/* ---------- topo ---------- */
header.topo { background: #fff; border-bottom: 1px solid var(--borda); }
.topo-inner { max-width: 1140px; margin: 0 auto; padding: 12px 18px 0;
  display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.topo-inner .marca { font-family: var(--serif); font-weight: 700;
  font-size: 17px; text-decoration: none; color: var(--txt);
  padding-bottom: 10px; }
.topo-inner .marca span { color: var(--sub); font-weight: 400; }
nav.abas { display: flex; gap: 20px; margin-left: auto; }
nav.abas a { padding: 0 0 9px; font-size: 13.5px; color: #333;
  text-decoration: none; border-bottom: 3px solid transparent; }
nav.abas a:hover { color: #000; }
nav.abas a.ativo { font-weight: 700; color: #000;
  border-bottom-color: #121212; }

main { max-width: 1140px; margin: 0 auto; padding: 22px 18px 60px; }

/* ---------- blocos ---------- */
.card { background: #fff; border: 1px solid var(--borda);
  border-radius: 3px; padding: 18px 20px; }
section.bloco { border-top: 1px solid var(--borda); padding: 20px 0; }
section.bloco:first-of-type { border-top: 0; }

.grid { display: grid; gap: 16px; }
@media (min-width: 880px) {
  .grid.c2 { grid-template-columns: 1fr 1fr; }
  .grid.c3 { grid-template-columns: repeat(3, 1fr); }
}

/* índice de seções (home) */
.indice { border-top: 1px solid var(--borda); }
.indice a { display: block; padding: 14px 2px; border-bottom: 1px solid
  var(--borda); text-decoration: none; color: inherit; }
.indice a:hover h2 { text-decoration: underline; }
.indice h2 { margin: 0 0 3px; font-size: 18px; }
.indice p { margin: 0; font-size: 13.5px; color: var(--sub); }

/* título de gráfico/tabela: convenção título factual + dek + fonte */
.fig-titulo { font-family: var(--serif); font-weight: 700;
  font-size: 18px; margin: 0 0 2px; }
.fig-dek { font-size: 13.5px; color: var(--sub); margin: 0 0 10px; }
.fig-fonte { font-size: 12px; color: #777; margin: 8px 0 0; }
.fig-fonte a { color: var(--link); }

/* pílulas de segmento (controle padrão de interativos de notícia) */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: #fff;
  border: 1px solid #ccc; border-radius: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: 6px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer; color: #333;
  border-radius: 2px; white-space: nowrap; font-family: inherit; }
.seg button.ativo { background: #121212; color: #fff; }
.seg button:disabled { color: #bbb; cursor: not-allowed; }

/* botões e links de ação */
.btn { display: inline-flex; align-items: baseline; gap: 6px;
  border: 1px solid #999; background: #fff; color: var(--txt);
  border-radius: 3px; padding: 7px 14px; font-size: 13px;
  font-weight: 600; cursor: pointer; text-decoration: none;
  font-family: inherit; }
.btn:hover { background: #f2f0eb; }
.btn.sec { border-color: #bbb; font-weight: 500; }
.btn.mini { padding: 4px 10px; font-size: 12px; }

/* tabelas */
table.dados { border-collapse: collapse; width: 100%; font-size: 13px; }
table.dados th { text-align: left; font-size: 11px; color: var(--sub);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 7px 9px;
  border-bottom: 2px solid #121212; white-space: nowrap;
  cursor: pointer; user-select: none; }
table.dados td { padding: 6px 9px; border-bottom: 1px solid #eee;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dados tr:hover td { background: #f5f3ee; cursor: pointer; }
table.dados tr.sel td { background: #f0e7e7; }

/* inputs */
input[type="search"], input[type="text"], select {
  font: inherit; font-size: 13.5px; padding: 7px 10px;
  border: 1px solid #bbb; border-radius: 3px; background: #fff;
  color: var(--txt); }
input[type="search"]:focus { outline: 2px solid var(--link); }

/* typeahead de município */
.busca-wrap { position: relative; }
.busca-wrap .sugestoes { position: absolute; top: 100%; left: 0; right: 0;
  z-index: 25; background: #fff; border: 1px solid #bbb; border-top: 0;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  max-height: 290px; overflow-y: auto; display: none; }
.busca-wrap .sugestoes div { padding: 8px 12px; font-size: 13.5px;
  cursor: pointer; }
.busca-wrap .sugestoes div:hover,
.busca-wrap .sugestoes div.foco { background: #f2f0eb; }
.busca-wrap .sugestoes small { margin-left: 6px; }

/* perfil (painel lateral / bottom sheet) */
#perfil { position: fixed; z-index: 40; top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw); background: #fff;
  border-left: 1px solid var(--borda);
  box-shadow: -6px 0 24px rgba(0,0,0,0.12); transform: translateX(105%);
  transition: transform .25s ease; overflow-y: auto; padding: 20px 22px; }
#perfil.aberto { transform: none; }
#perfil h2 { font-size: 19px; }
@media (max-width: 640px) {
  #perfil { top: auto; left: 0; width: 100%; max-height: 78vh;
    border-left: 0; border-top: 1px solid var(--borda);
    transform: translateY(105%);
    box-shadow: 0 -6px 24px rgba(0,0,0,0.16); }
  #perfil.aberto { transform: none; }
}
#perfil .fechar { position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border: 1px solid #ccc; border-radius: 50%;
  background: #fff; color: #333; cursor: pointer; font-size: 13px; }
.barra-prop { display: flex; height: 13px; margin: 6px 0 4px; }
.barra-prop i { display: block; height: 100%; }
.linha-kv { display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid #efefef; font-size: 13.5px; }
.linha-kv b { font-variant-numeric: tabular-nums; font-weight: 600; }
.legenda-cores { display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: #444; align-items: center; }
.legenda-cores .sw { display: inline-block; width: 10px; height: 10px;
  margin-right: 5px; vertical-align: -1px; }

/* downloads */
.ds-card { display: flex; flex-direction: column; gap: 10px; }
.ds-card .formatos { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-card details { border-top: 1px solid var(--borda); padding-top: 10px; }
.ds-card summary { cursor: pointer; font-size: 13px; font-weight: 600;
  color: #333; }
.ufs-grid { display: grid; grid-template-columns: repeat(auto-fill,
  minmax(84px, 1fr)); gap: 6px; margin-top: 10px; }
.ufs-grid a { font-size: 12.5px; text-align: center; padding: 5px 4px;
  border: 1px solid var(--borda); border-radius: 3px;
  text-decoration: none; color: var(--txt); }
.ufs-grid a:hover { background: #f2f0eb; }
.hash { font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 10.5px; color: #999; word-break: break-all; }
pre.cod { background: #f6f4ef; color: #1b1b1b; border: 1px solid
  var(--borda); border-radius: 3px; padding: 13px 15px; font-size: 12.5px;
  overflow-x: auto; line-height: 1.5; }

/* dicionário */
table.dic { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.dic th { text-align: left; padding: 5px 8px; color: var(--sub);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 2px solid #121212; }
table.dic td { padding: 5px 8px; border-bottom: 1px solid #eee;
  vertical-align: top; }
table.dic td:first-child { font-family: ui-monospace, Menlo, Consolas,
  monospace; font-size: 11.5px; white-space: nowrap; }

/* notas e avisos — sem cor de alerta; nota editorial padrão */
.aviso { border-left: 3px solid #999; background: #f7f6f2;
  padding: 10px 14px; font-size: 13.5px; }

footer.rodape { border-top: 1px solid var(--borda); margin-top: 44px;
  padding: 16px 18px; font-size: 12.5px; color: var(--sub); }
footer.rodape .rodape-inner { max-width: 1140px; margin: 0 auto; }
footer.rodape a { color: var(--link); }

/* gráficos */
.fig { overflow-x: auto; }
.fig svg { max-width: 100%; height: auto; }
#scatter { touch-action: pan-y; }
.carregando { color: var(--sub); font-size: 13px; padding: 30px 0;
  text-align: center; }
.spin { display: inline-block; width: 13px; height: 13px; border: 2px solid
  #ccc; border-top-color: #555; border-radius: 50%;
  animation: g 0.8s linear infinite; vertical-align: -2px; }
@keyframes g { to { transform: rotate(360deg); } }