/*
  Mapa de CT&I do Estado do Rio de Janeiro — SECTI-RJ

  Tokens de cor e tipografia ficam isolados aqui: trocar a identidade é mexer
  neste bloco, e não espalhado pelo CSS.

  A paleta de 2026-10-19 vem de duas fontes, e a SECTI é a dona do projeto:

  - Manual de Identidade Visual do GovRJ (ago/2022): azul Pantone 3015 C
    (#005a92, o acento) e ouro Pantone 117 C (#bc9d32, o realce);
  - portal da SECTI (secti.rj.gov.br): azul-marinho #003366 (cabeçalho e
    rodapé, `--noite`), fundo cinza #f5f5f5, texto #333333, borda #d1d9e0 e a
    família tipográfica, Open Sans.

  Antes eram areia, verde-petróleo e laranja (redesenho de 21/09/2026). O verde
  (#427842) e o preto do manual não entram: o site não tem estado de sucesso
  nem fundo preto que peçam essas cores.

  As nove cores de grupo derivam da paleta Okabe-Ito, escolhida por manter
  distinção nas formas comuns de daltonismo. Nenhuma informação depende só de
  cor: precisão usa forma, e a lista repete tudo em texto (RN-27). Elas não
  mudam com a identidade: ali a cor é dado, não decoração.

  Três valores da marca precisaram de um derivado, porque reprovam em WCAG AA
  (RNF-09) justamente nos usos desenhados:

  - o ouro #bc9d32 dá 2,62:1 como texto sobre branco. Ele fica como SUPERFÍCIE,
    recebendo texto escuro (4,82:1 com #333333). Quando precisa ser texto ou
    traço, entra `--foco`, o mesmo ouro escurecido até 4,96:1 sobre branco;
  - o cinza do manual, #a0a0a0, dá 2,61:1 sobre branco como traço de campo. A
    borda forte é o cinza do portal, #737373 (4,74:1 sobre branco, 4,35:1 sobre
    o fundo);
  - o cinza secundário do portal, #737373, dá menos de 4,5:1 sobre o fundo
    cinza. O texto secundário é #666666 (5,27:1).

  Todos os pares vivos desta folha estão travados em
  `tests/Sistema/ContrasteTest.php`, que lê os tokens daqui — trocar um valor
  por um que reprove derruba o pipeline em vez de sair calado para produção.
*/
:root {
  --tinta: #333333;
  --tinta-suave: #666666;
  --noite: #003366;
  --noite-2: #00407d;
  --fundo: #f5f5f5;
  --superficie: #ffffff;
  --superficie-2: #fafafa;
  --borda: #d1d9e0;
  --borda-forte: #737373;
  --acento: #005a92;
  --acento-claro: #e1edf5;
  --acento-no-escuro: #7fc0ea;
  --realce: #bc9d32;
  --foco: #846e23;

  --ressalva-fundo: #f9f4e0;
  --ressalva-borda: #bc9d32;
  --ressalva-tinta: #5b451a;

  --alerta: #8a4b12;
  --perigo: #9c2c1e;

  --grupo-conectividade: #0072b2;
  --grupo-conhecimento: #00806b;
  --grupo-ecossistema: #b24f00;
  --grupo-fomento: #a3407c;
  --grupo-formacao: #9a6b00;
  --grupo-governanca: #2b7fb8;
  --grupo-industria: #7a3f26;
  --grupo-infraestrutura: #4f45a0;
  --grupo-saude: #9c2c1e;
  --grupo-patrimonio: #6b4e9e;

  --raio: 6px;
  --raio-cartao: 18px;
  --sombra-cartao: 0 14px 34px rgba(0, 51, 102, 0.10), 0 2px 6px rgba(0, 51, 102, 0.05);
  --escala-texto: 1;
}

:root[data-texto="grande"] { --escala-texto: 1.2; }

* { box-sizing: border-box; }

html { font-size: calc(100% * var(--escala-texto)); }

/*
  A fonte é servida por este site (VR-05, decidida em 2026-09-21).

  Open Sans, a mesma família do portal da SECTI (secti.rj.gov.br): o Mapa é um
  projeto da secretaria e passa a ter a mesma voz tipográfica. Desde 2026-10-19;
  antes era Nunito Sans, humanista de terminais arredondados, escolhida pelas
  peças do redesenho de 21/09/2026. Open Sans também é humanista, mas de
  terminais retos e um pouco mais larga, o que pede conferir as telas com texto
  denso (feito na troca).

  **Servida daqui, e não de CDN.** A CSP não declara `font-src`, então ela cai em
  `default-src 'self'` e arquivo de fonte de terceiro é bloqueado pelo navegador.
  Isso é feição, não obstáculo: buscar fonte em CDN entregaria o endereço de rede
  de cada visitante a mais um terceiro, contra a RNF-08, e o mapa inteiro foi
  construído para não pedir nada a ninguém sem autorização.

  **Licença conferida:** SIL Open Font License 1.1, que permite redistribuir e
  servir. O texto está em `public/assets/fontes/OFL.txt`, versionado junto — num
  portal de governo, fonte sem a licença ao lado é passivo.

  **Só os dois recortes latinos**, e o `latin` sozinho cobre o português inteiro:
  ã, ç, õ, ê e os demais acentos ficam todos abaixo de U+00FF. São 48 KB no caso
  comum. Os recortes cirílico e vietnamita do arquivo de origem ficaram de fora.

  `swap` porque texto invisível esperando fonte é pior que texto na fonte do
  sistema por um instante. A pilha do sistema continua embaixo como reserva de
  verdade, não como formalidade.
*/
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fontes/open-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fontes/open-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--fundo);
}

h1, h2, h3 {
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;
  text-wrap: balance;
}

a { color: var(--acento); }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/*
  Conteúdo para leitor de tela.
  A tela do mapa não comporta um título grande, mas precisa de um h1: sem ele,
  quem navega por cabeçalhos não encontra o começo do conteúdo.
*/
.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
  O sprite fica com tamanho zero de propósito.

  Um `<svg>` sem width e height declarados ocupa o tamanho padrão de
  substituição, 300×150, e como ele é o primeiro elemento do body isso empurra
  a página inteira para baixo da dobra — foi exatamente o que aconteceu no
  painel administrativo em 20/09. Invisível não é o mesmo que sem espaço.
*/
.icones-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/*
  Espessura e preenchimento aqui, uma vez só, e não em cada símbolo: o pacote
  público vem em grade de 64 e o da administração em grade de 24, então sem
  normalizar haveria dois pesos de traço na mesma tela. `currentColor` deixa o
  ícone herdar a cor do estado de quem o contém.
*/
.icone {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pular {
  position: absolute;
  left: -9999px;
  background: var(--superficie);
  padding: 0.75rem 1rem;
  z-index: 1000;
}
.pular:focus { left: 0; top: 0; }

/* ---------------------------------------------------------- cabeçalho */
.cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  background: var(--noite);
  color: #fff;
}
.cabecalho__marca { display: flex; align-items: center; gap: 0.7rem; }
.cabecalho__simbolo { width: 2.3rem; height: 2.3rem; color: var(--realce); stroke-width: 3; }
.cabecalho__titulo { color: #fff; text-decoration: none; display: block; }
.cabecalho__titulo strong { font-size: 1.05rem; letter-spacing: 0.01em; }
.cabecalho__titulo span { display: block; font-size: 0.8rem; color: #9fb4bb; }
.cabecalho__nav { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
.cabecalho__nav a {
  color: #dfe8ea;
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.cabecalho__nav a:hover { border-bottom-color: #55707c; }
.cabecalho__busca input { padding: 0.3rem 0.6rem; font-size: 0.9rem; width: 12rem; max-width: 100%; }

/*
  A página em que se está fica marcada por cor E por barra, nunca só por cor —
  mesma regra que o menu da administração segue em RF-96. O laranja dá 6,88:1
  sobre o azul-noite, então serve como texto e não só como enfeite.
*/
.cabecalho__nav a[aria-current="page"] {
  color: var(--realce);
  border-bottom-color: var(--realce);
  font-weight: 600;
}
/*
  Menu em abas, no estilo clássico: a aba ativa e a faixa de páginas logo abaixo
  têm a mesma cor e se emendam, como uma pasta. A página atual na faixa leva
  negrito E barra, nunca só cor (RF-96).
*/
.cabecalho { padding-bottom: 0; align-items: flex-end; row-gap: 0; }
.cabecalho__marca { padding-bottom: 0.7rem; }
.cabecalho__nav { align-items: flex-end; gap: 0.35rem; }
.cabecalho__nav .aba {
  color: #dfe8ea;
  background: var(--noite-2);
  border: 1px solid #1c4558;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
  position: relative;
  top: 1px;
}
.cabecalho__nav .aba:hover { background: #17445a; border-bottom: 0; }
.cabecalho__nav .aba--atual,
.cabecalho__nav .aba--atual:hover {
  background: #e3ecee;
  color: var(--noite);
  font-weight: 700;
  border-color: #e3ecee;
}
.cabecalho__nav .cabecalho__busca,
.cabecalho__nav .cabecalho__idioma,
.cabecalho__nav .botao-texto { margin-bottom: 0.5rem; margin-left: 0.6rem; }
.cabecalho__nav .cabecalho__idioma { margin-left: 0.6rem; }
.cabecalho__sub {
  flex: 0 0 calc(100% + 3rem);
  margin: 0 -1.5rem;
  padding: 0.55rem 1.5rem;
  background: #e3ecee;
  border-bottom: 1px solid #c3d3d8;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
}
.cabecalho__sub a {
  color: var(--noite);
  font-size: 0.92rem;
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 3px solid transparent;
}
@media (max-width: 48rem) {
  /* Abas numa linha só, coladas na faixa; busca, idioma e tamanho do texto sobem. */
  .cabecalho__nav { flex: 0 0 100%; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 0.35rem; }
  .cabecalho__nav .aba { order: 2; padding: 0.5rem 0.75rem; font-size: 0.85rem; }
  .cabecalho__nav .cabecalho__busca, .cabecalho__nav .cabecalho__idioma, .cabecalho__nav .botao-texto { order: 1; margin: 0 0.4rem 0 0; }
  .cabecalho__nav .cabecalho__busca { flex: 1 1 10rem; }
  .cabecalho__nav .cabecalho__busca input { width: 100%; }
  .cabecalho__marca { padding-bottom: 0.5rem; }
}
.cabecalho__sub a:hover { border-bottom-color: #9db6bf; }
.cabecalho__sub a[aria-current="page"] { font-weight: 700; border-bottom-color: #b85c0a; }
.botao-texto {
  background: transparent;
  border: 1px solid #55707c;
  color: #dfe8ea;
  border-radius: var(--raio);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.botao-texto[aria-pressed="true"] { background: #dfe8ea; color: var(--noite); }

/* ------------------------------------------------------------ ressalva */
.ressalva {
  margin: 0;
  padding: 0.5rem 1.25rem;
  background: var(--ressalva-fundo);
  border-bottom: 1px solid var(--ressalva-borda);
  color: var(--ressalva-tinta);
  font-size: 0.86rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  align-items: baseline;
}
.ressalva__base { color: #70572a; }
.ressalva__link { color: var(--ressalva-tinta); }

/* -------------------------------------------------------------- layout */
.mapa-layout {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr) 19rem;
  gap: 1px;
  background: var(--borda);
  min-height: calc(100vh - 8.5rem);
}
/* A área do mapa entra no mesmo teto do painel e dos resultados. Sem isso ela
   cresce além da janela, e a legenda, que se ancora no rodapé dela, cai abaixo
   da dobra — visível só para quem rolar, o que anula "permanentemente
   acessível" (RF-73). */
.painel, .resultados, .mapa-area { max-height: calc(100vh - 8.5rem); }
.painel, .resultados { background: var(--superficie); overflow-y: auto; }
.painel { padding: 1rem 1.1rem 2rem; }
/* `relative` por causa da legenda, que se ancora aqui e não no `#mapa`: dentro
   do mapa ela viraria filha de um contêiner que o Leaflet transforma e move. */
.mapa-area { position: relative; display: flex; flex-direction: column; background: var(--superficie-2); }
.mapa { flex: 1; min-height: 28rem; background: #dde8e5; }
/*
  Tela do mapa em janela larga: uma única barra de rolagem, a da página.

  Antes cada coluna tinha altura de janela e rolava por dentro (painel de filtros e lista de registros),
  além da rolagem da página, e eram três barras ao mesmo tempo. Agora a página rola como qualquer outra:
  à esquerda o painel de filtros com a altura que tiver, à direita o mapa, que fica grudado na janela
  enquanto o painel passa, e os registros em cartões embaixo, na largura toda. Abaixo de 75rem de largura
  o empilhamento de sempre continua (mapa, painel, registros).
*/
@media (min-width: 75.0625rem) {
  .mapa-layout {
    grid-template-columns: 20rem minmax(0, 1fr);
    grid-template-areas: "painel barra" "painel mapa" "resultados resultados";
    grid-template-rows: auto 1fr auto;   /* a altura que sobra do painel vai para a linha do mapa, não para a barra */
    min-height: 0;
  }
  .painel, .resultados, .mapa-area { max-height: none; }
  .painel, .resultados { overflow: visible; }
  .painel { grid-area: painel; }
  .resultados { grid-area: resultados; }
  /* O mapa gruda dentro da coluna, que tem a altura do painel; grudar direto na grade o faria
     continuar preso por cima dos registros que vêm depois. */
  .mapa-coluna { grid-area: mapa; }
  .mapa-topo { grid-area: barra; }
  .mapa-area {
    position: sticky;
    top: 4.25rem;
    height: calc(100dvh - 12.75rem);   /* 7,1rem de cabeçalho e ressalva + 4,7rem da barra de ações + folga */
  }
  .mapa { min-height: 0; }
  .cartoes { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
  .mapa-layout--sem-mapa { grid-template-areas: "painel barra" "painel resultados"; grid-template-rows: auto 1fr; }
}
.mapa-layout--sem-mapa { grid-template-columns: 20rem minmax(0, 1fr); }
.mapa-layout--sem-mapa .mapa-coluna { display: none; }
.mapa-topo { background: var(--superficie); min-width: 0; }
.mapa-layout--sem-mapa .cartoes { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }

.mapa-area__barra {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}
.contagem { margin: 0; font-size: 0.92rem; }
.mapa-area__acoes { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.acoes__rotulo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-left: 0.3rem;
}

/*
  Botão de limpar e trilha de filtros aplicados.
  Ficam junto ao mapa, e não no fundo do painel lateral: quem quer desfazer um
  recorte está olhando para o mapa, não para a lista de camadas.

  A variante `.botao--limpar` está declarada junto de `.botao`, e não aqui:
  as duas têm a mesma especificidade, então quem vem depois no arquivo ganha —
  daqui ela era sobrescrita pela base e o botão saía verde, com a cor da ação
  primária, em vez do âmbar de desfazer.
*/
.filtros-ativos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--acento-claro);
  border-bottom: 1px solid var(--borda);
  font-size: 0.83rem;
}
.filtros-ativos__rotulo { color: var(--tinta-suave); font-weight: 600; margin-right: 0.15rem; }
.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--superficie);
  border: 1px solid var(--acento);
  border-radius: 999px;
  padding: 0.1rem 0.25rem 0.1rem 0.6rem;
}
.filtro-chip button {
  border: 0;
  background: transparent;
  color: var(--acento);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25rem;
  border-radius: 999px;
}
.filtro-chip button:hover { background: var(--acento-claro); }

/* -------------------------------------------------------------- painel */
.painel h2 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.painel__busca { display: grid; gap: 0.35rem; margin-bottom: 1.25rem; }
.painel__busca label { font-size: 0.85rem; font-weight: 600; }
.painel__rotulo { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.3rem; }
.painel__recortes { margin-bottom: 1.25rem; }
.painel__esferas { border: 0; padding: 0; margin: 1rem 0 0; }
.painel__esferas legend { font-size: 0.85rem; font-weight: 600; padding: 0; }
.painel__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.painel__camadas-topo { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }

input[type="search"], select {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  font: inherit;
  background: var(--superficie);
  color: var(--tinta);
}

.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--acento);
  border-radius: var(--raio);
  background: var(--acento);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  text-decoration: none;
  cursor: pointer;
}
.botao--discreto { background: transparent; color: var(--acento); }

/*
  Exportação com a moldura laranja da proposta. O traço e o rótulo usam
  `--foco` (4,62:1 sobre areia), não o `--realce` puro, que como texto sobre
  claro fica em 2,16:1 e reprova em AA.
*/
.botao--acao { background: var(--superficie); color: var(--foco); border-color: var(--foco); }
.botao--acao:hover { background: #fdf3e6; }

/* Laranja como superfície, com texto escuro: 5,99:1. */
.botao--destaque { background: var(--realce); color: var(--tinta); border-color: var(--realce); font-weight: 600; }
.botao--destaque:hover { background: #f79c41; }

/* Desfazer não é ação primária: âmbar da ressalva, não o verde institucional. */
.botao--limpar { background: var(--ressalva-fundo); color: var(--ressalva-tinta); border-color: var(--ressalva-borda); }
.botao--limpar:hover { background: #f6ecd6; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  background: var(--superficie);
}
.chip input { margin: 0; }
.chip:has(input:checked) { background: var(--acento-claro); border-color: var(--acento); }

/* ------------------------------------------------------- árvore camadas */
.arvore { margin-top: 0.5rem; }
.arvore__grupo { border-top: 1px solid var(--borda); padding: 0.5rem 0; }
.arvore__grupo > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}
.arvore__conta { font-weight: 400; color: var(--tinta-suave); font-size: 0.82rem; }
.arvore__camada { display: flex; align-items: flex-start; gap: 0.4rem; padding: 0.3rem 0 0.3rem 0.5rem; }
.arvore__camada label { flex: 1; font-size: 0.88rem; cursor: pointer; display: flex; gap: 0.4rem; align-items: baseline; }
.arvore__cor { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.arvore__info, .arvore__alerta {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 0.15rem;
  color: var(--acento);
}
.arvore__alerta { color: var(--alerta); }
.arvore__detalhe {
  margin: 0.25rem 0 0.5rem 1.6rem;
  padding: 0.6rem 0.7rem;
  background: var(--superficie-2);
  border-left: 3px solid var(--borda-forte);
  font-size: 0.83rem;
}
.arvore__selos { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0 0.45rem; padding: 0; list-style: none; }
.arvore__sub { margin: 0.2rem 0 0.4rem 1.7rem; }
.arvore__sub label { font-size: 0.83rem; display: flex; gap: 0.35rem; align-items: baseline; }

/* A cor do selo indica o NÍVEL, nunca a dimensão — e o nível vem sempre
   escrito por extenso, porque cor sozinha não é informação acessível. */
.selo {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid;
}
.selo--alta { background: #e2f2e8; border-color: #4f8b63; color: #1f5433; }
.selo--media-alta { background: #eaf1e6; border-color: #6f9155; color: #3a4f28; }
.selo--media { background: #fdf3e0; border-color: #c9974a; color: #6b4a12; }
.selo--media-baixa { background: #fbeada; border-color: #c07a37; color: #6d3a0d; }
.selo--baixa { background: #f8e2dd; border-color: #b4574a; color: #7c2418; }
.selo--outro { background: var(--superficie-2); border-color: var(--borda-forte); color: var(--tinta-suave); }

/* ------------------------------------------------------------- legenda */
.legenda { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.5rem; }
.legenda li { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.83rem; }
.legenda__nota { font-size: 0.83rem; color: var(--tinta-suave); margin: 0; }
.legenda__amostra { flex: none; width: 1.6rem; height: 1.6rem; }
.painel__legenda { margin-top: 1.5rem; border-top: 1px solid var(--borda); padding-top: 1rem; }
.painel__contexto { margin-top: 1.5rem; border-top: 1px solid var(--borda); padding-top: 1rem; }
.painel__contexto select { margin-bottom: 0.5rem; }
.painel__opcao { display: flex; gap: 0.4rem; align-items: baseline; font-size: 0.88rem; margin-bottom: 0.4rem; cursor: pointer; }
.escala { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.25rem; font-size: 0.8rem; }
.escala li { display: flex; gap: 0.4rem; align-items: center; }
.escala__cor { width: 1.1rem; height: 0.8rem; border: 1px solid var(--borda-forte); flex: none; }

/* ----------------------------------------------------------- resultados */
.resultados { padding: 1rem 1.1rem 2rem; }
.resultados__topo { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.resultados__topo h2 { font-size: 0.95rem; margin: 0; }
.resultados__lista { font-size: 0.83rem; }
.cartoes { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.5rem; }
.cartao {
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  padding: 0.7rem 0.85rem;
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
}
.cartao__nome { font-size: 0.9rem; font-weight: 600; margin: 0 0 0.2rem; }
.cartao__nome button {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--acento); cursor: pointer; text-align: left;
}
.cartao__meta { margin: 0; font-size: 0.8rem; color: var(--tinta-suave); }
.cartao__precisao { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; margin-top: 0.3rem; }

/* Registros do recorte agrupados por área temática (mapa.js, desenharLista). */
.resultados__grupos { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.resultados__grupo { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
.resultados__grupo-resumo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  cursor: pointer;
  font-weight: 600;
}
.resultados__grupo-cor { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: none; background: var(--borda-forte); }
.resultados__grupo-nome { flex: 1; min-width: 0; }
.resultados__grupo-conta { font-weight: 400; font-size: 0.85rem; color: var(--tinta-suave); }
.resultados__grupo[open] > .resultados__grupo-resumo { border-bottom: 1px solid var(--borda); }
.resultados__grupo > .cartoes { margin: 0; padding: 0.75rem 0.9rem; }
.resultados__mais { margin: 0 0.9rem 0.9rem; }

/* --------------------------------------------------------------- ficha */
.ficha { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.ficha__titulo { margin: 0 0 0.25rem; font-size: 1.5rem; }
.ficha__camada { margin: 0 0 1.25rem; color: var(--tinta-suave); }
.ficha__bloco { margin: 0 0 1.5rem; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.1rem; }
.ficha__bloco h2 { font-size: 1rem; margin: 0 0 0.75rem; }
.ficha__dados { margin: 0; display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0.35rem 1rem; font-size: 0.92rem; }
.ficha__dados dt { font-weight: 600; color: var(--tinta-suave); }
.ficha__dados dd { margin: 0; }
/* O que o mapa ainda não registrou aparece como lacuna declarada, não como valor. */
.ficha__nao-informado { color: var(--tinta-suave); font-style: italic; }
.ficha__passos { margin: 0 0 0.75rem; padding-left: 1.3rem; display: grid; gap: 0.5rem; font-size: 0.95rem; }
.ficha__contatos { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.ficha__contatos .legenda__nota { display: inline; }
.ficha__tabela { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.75rem 0; display: block; overflow-x: auto; }
.ficha__tabela caption { text-align: left; font-weight: 600; color: var(--tinta-suave); padding-bottom: 0.35rem; }
.ficha__tabela th, .ficha__tabela td { text-align: left; vertical-align: top; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--borda); }
.ficha__tabela td:nth-child(3) { white-space: nowrap; }
.ficha__ressalvas { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.ficha__ressalvas li {
  background: var(--ressalva-fundo);
  border-left: 3px solid var(--ressalva-borda);
  color: var(--ressalva-tinta);
  padding: 0.5rem 0.7rem;
  font-size: 0.88rem;
}
/* Cabeçalho da ficha: faixa na cor do grupo temático e mapa de localização. */
.ficha__cabeca {
  display: grid; grid-template-columns: 1fr minmax(12rem, 17rem); gap: 1.25rem; align-items: center;
  background: var(--superficie); border: 1px solid var(--borda); border-top: 6px solid var(--cor-grupo, var(--acento));
  border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: 1.25rem 1.4rem; margin: 0 0 1.5rem;
}
.ficha__cabeca--conectividade { --cor-grupo: var(--grupo-conectividade); }
.ficha__cabeca--conhecimento { --cor-grupo: var(--grupo-conhecimento); }
.ficha__cabeca--ecossistema { --cor-grupo: var(--grupo-ecossistema); }
.ficha__cabeca--fomento { --cor-grupo: var(--grupo-fomento); }
.ficha__cabeca--formacao { --cor-grupo: var(--grupo-formacao); }
.ficha__cabeca--governanca { --cor-grupo: var(--grupo-governanca); }
.ficha__cabeca--industria { --cor-grupo: var(--grupo-industria); }
.ficha__cabeca--infraestrutura { --cor-grupo: var(--grupo-infraestrutura); }
.ficha__cabeca--saude { --cor-grupo: var(--grupo-saude); }
.ficha__cabeca--patrimonio { --cor-grupo: var(--grupo-patrimonio); }
.ficha__cabeca nav { font-size: 0.85rem; }
.ficha__grupo { margin: 0.6rem 0 0.1rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cor-grupo, var(--acento)); }
.ficha__cabeca .ficha__titulo { margin: 0 0 0.6rem; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; }
.ficha__etiquetas { list-style: none; padding: 0; margin: 0 0 0.75rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ficha__etiquetas li { background: var(--acento-claro); color: var(--tinta); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.8rem; }
.ficha__descricao { margin: 0; color: var(--tinta-suave); }
.ficha__cabeca-mapa { margin: 0; text-align: center; }
.ficha__cabeca-mapa figcaption { font-size: 0.78rem; color: var(--tinta-suave); margin-top: 0.3rem; }
.localizacao { width: 100%; height: auto; display: block; }
.localizacao__municipio { fill: #e7ece9; stroke: #fff; stroke-width: 1.2; }
.localizacao__municipio--destaque { fill: var(--cor-grupo, var(--acento)); stroke: var(--noite); stroke-width: 1.6; }
.localizacao__halo { fill: var(--realce); opacity: 0.35; }
.localizacao__ponto { fill: var(--realce); stroke: #fff; stroke-width: 3; }
@media (max-width: 40rem) {
  .ficha__cabeca { grid-template-columns: 1fr; }
  .ficha__cabeca-mapa { max-width: 16rem; justify-self: center; }
}
/* Único aviso que sobe ao topo da ficha: a unidade pode não estar funcionando. */
.ficha__aviso {
  background: var(--ressalva-fundo);
  border-left: 3px solid var(--ressalva-borda);
  color: var(--ressalva-tinta);
  padding: 0.6rem 0.8rem;
  margin: 0 0 1.5rem;
}
/* Bloco "O município" da ficha (Fase 32). */
.contexto h3 { font-size: 0.95rem; margin: 1.25rem 0 0.4rem; }
.contexto__destaques { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0.75rem 0 0; }
.contexto__destaques > div { background: var(--acento-claro); border-radius: var(--raio); padding: 0.6rem 0.75rem; }
.contexto__destaques dt { font-size: 0.8rem; color: var(--tinta-suave); }
.contexto__destaques dd { margin: 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta); }
.contexto__destaques dd.contexto__nota { font-size: 0.76rem; font-weight: 400; color: var(--tinta-suave); }
/* Economia: duas barras 100% empilhadas, município e estado, mesma escala. */
.setores__legenda { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.8rem; color: var(--tinta-suave); }
.setores__legenda li { display: flex; align-items: center; gap: 0.35rem; }
.setores__amostra { width: 0.8rem; height: 0.8rem; border-radius: 3px; }
.setores { display: grid; grid-template-columns: 1fr; gap: 0.15rem; margin: 0.5rem 0 0.75rem; }
.setores__nome { margin: 0.5rem 0 0; font-size: 0.85rem; font-weight: 600; }
/* Os 2px entre segmentos são a superfície: separam as fatias sem depender só da cor. */
.setores__barra { display: flex; gap: 2px; height: 1.9rem; border-radius: 6px; overflow: hidden; }
.setores__parte { display: flex; align-items: center; justify-content: center; min-width: 3px; color: #fff; font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.setores--servicos { background: #0072b2; }
.setores--industria { background: #b24f00; }
.setores--publica { background: #4f45a0; }
.setores--agro { background: #00806b; }
.barras .contexto__grupo--conectividade { background: var(--grupo-conectividade); }
.barras .contexto__grupo--conhecimento { background: var(--grupo-conhecimento); }
.barras .contexto__grupo--ecossistema { background: var(--grupo-ecossistema); }
.barras .contexto__grupo--fomento { background: var(--grupo-fomento); }
.barras .contexto__grupo--formacao { background: var(--grupo-formacao); }
.barras .contexto__grupo--governanca { background: var(--grupo-governanca); }
.barras .contexto__grupo--industria { background: var(--grupo-industria); }
.barras .contexto__grupo--infraestrutura { background: var(--grupo-infraestrutura); }
.barras .contexto__grupo--saude { background: var(--grupo-saude); }
.barras .contexto__grupo--patrimonio { background: var(--grupo-patrimonio); }
/* Transparência técnica: completa, mas recolhida e em tom menor. */
.ficha__detalhes { margin: 0 0 1.5rem; border-top: 1px solid var(--borda); padding-top: 0.75rem; font-size: 0.9rem; color: var(--tinta-suave); }
.ficha__detalhes summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.ficha__detalhes h3 { font-size: 0.9rem; margin: 1.1rem 0 0.4rem; color: var(--tinta-suave); }
.ficha__observacoes { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.ficha__fonte { border-top: 1px solid var(--borda); padding: 0.6rem 0; }
.ficha__fonte:first-child { border-top: 0; padding-top: 0; }
.ficha__fonte-papel { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-suave); margin: 0; }
.ficha__fonte-rotulo { margin: 0.1rem 0; }
.ficha__fonte-situacao { font-size: 0.82rem; color: var(--alerta); margin: 0; }
.ficha-modal { border: 1px solid var(--borda); border-radius: var(--raio); max-width: 42rem; width: 92%; padding: 0; }
.ficha-modal::backdrop { background: rgba(10, 30, 28, 0.55); }
.ficha-modal__corpo { padding: 1.25rem; }
.ficha-modal__fechar { position: absolute; top: 0.6rem; right: 0.7rem; }

/* --------------------------------------------------------------- geral */
.pagina { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.pagina h1 { font-size: 1.6rem; margin-top: 0; }
.pagina table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.pagina th, .pagina td { border: 1px solid var(--borda); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
.pagina th { background: var(--superficie-2); }
.pendente { background: var(--ressalva-fundo); border-left: 3px solid var(--ressalva-borda); padding: 0.6rem 0.8rem; color: var(--ressalva-tinta); }

/*
  Rodapé escuro, como na proposta: ele fecha a página e devolve a assinatura
  institucional. O texto vai em #c4d2d6 sobre o azul-noite (10,7:1) porque
  crédito de fonte e ressalva de ausência precisam ser lidos, não decorados.
*/
.rodape {
  padding: 1.6rem 1.5rem 2.2rem;
  background: var(--noite);
  border-top: 3px solid var(--realce);
  font-size: 0.82rem;
  color: #c4d2d6;
}
.rodape p, .rodape address { margin: 0 0 0.4rem; max-width: 70rem; }
.rodape address { font-style: normal; }
.rodape a { color: var(--acento-no-escuro); }
.carregando { color: var(--tinta-suave); font-size: 0.88rem; }
.aviso-noscript { margin: 1rem; padding: 0.8rem 1rem; background: var(--ressalva-fundo); border: 1px solid var(--ressalva-borda); }
.vazio { padding: 1rem; background: var(--superficie-2); border: 1px dashed var(--borda-forte); border-radius: var(--raio); font-size: 0.9rem; }

/* ------------------------------------------------------------ marcador */
.marcador-esquematico { stroke-dasharray: 6 4; }

/* ------------------------------------------------------------- celular */
/*
  O empilhamento começa em 75rem, e não em 62rem.

  As duas colunas laterais somam 43rem fixos. Em 62rem de janela sobrava algo
  como 320 px para o mapa — largura em que o mapa não serve para nada e em que
  a legenda sobre ele cobre a vista inteira. Abaixo de 75rem a coluna única
  entrega mais mapa do que as três colunas.
*/
@media (max-width: 75rem) {
  /*
    `minmax(0, 1fr)` e não `1fr`: uma faixa de grade tem largura mínima
    automática, então o `select` de município, que é largo por causa da opção
    "Todos os 92 municípios", empurrava a faixa além da tela e a página inteira
    ganhava 30 px de rolagem horizontal no celular. O zero devolve à faixa o
    direito de encolher o conteúdo.
  */
  .mapa-layout { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .painel, .resultados, .mapa-area { max-height: none; }
  .mapa { min-height: 24rem; }

  /*
    Numa coluna só, o mapa vem primeiro.

    Na ordem do documento o painel vem antes, o que está certo no desktop, onde
    os dois aparecem lado a lado. Empilhado, porém, ele é alto — nove grupos,
    camadas de contexto, legenda — e quem abre a página rola uma tela inteira de
    filtros antes de ver o território. Pior ainda com o modo desktop do
    navegador do celular, que entrega ~980 px de largura: cai aqui, mas com
    tudo pequeno, e o mapa fica longe.

    Os resultados vão para o fim, e não para o meio: a lista acompanha o recorte
    inteiro e chega a 28 mil pixels de altura no recorte inicial. Entre o mapa e
    o painel, ela deixaria os filtros inalcançáveis por rolagem.

    `order` muda só a apresentação. A ordem de tabulação e a leitura por leitor
    de tela continuam seguindo o documento, que é onde o painel vindo antes faz
    sentido: quem navega por teclado chega aos filtros sem atravessar o mapa.

    Isto atende metade da RF-13. A outra metade, o painel recolhível em folha
    inferior, continua pendente.
  */
  .mapa-topo, .mapa-coluna { order: 1; }
  .painel { order: 2; }
  .resultados { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Pedido de autorização para fundo de terceiro (RF-11).
   Fica no painel, no lugar onde a escolha foi feita, em vez de num diálogo
   que o navegador pode bloquear. */
.ctx-consentimento {
  margin-top: .5rem;
  padding: .7rem .8rem;
  border: 1px solid var(--ressalva-borda);
  border-left: 3px solid var(--alerta);
  background: var(--ressalva-fundo);
  color: var(--ressalva-tinta);
  border-radius: 3px;
}

.ctx-consentimento .legenda__nota {
  margin: 0 0 .6rem;
}

.ctx-consentimento__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
}

.ctx-consentimento__acoes .botao {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Anéis do agrupamento.

   O anel tem as cores das áreas temáticas que o agrupamento reúne, cada uma
   na sua proporção, e o número no miolo branco. Antes era um círculo de uma
   matiz só, do claro ao escuro, e a cor da legenda só aparecia depois de
   vários cliques, quando os pontos enfim se separavam.

   O tamanho é igual para todos de propósito, e não é descuido: círculo que
   cresce com o número vira ranking de município, proibido por RN-23 e RN-34.
   A contagem ainda mede por onde a varredura passou, não o que existe no
   território, e não aguenta virar escala.

   O número fica em tinta escura sobre branco (contraste acima de 12), seja
   qual for a cor do anel. O contorno escuro de 1px separa o anel do fundo
   claro do mapa mesmo quando a área é de cor clara.
   --------------------------------------------------------------------------- */
/* A classe dobrada não é enfeite: o `leaflet.css` carrega depois deste arquivo
   e declara `display: block` em `.leaflet-marker-icon`, que é o mesmo elemento
   e a mesma especificidade. */
.leaflet-marker-icon.marker-cluster {
  display: flex;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--tinta), 0 1px 4px rgba(18, 49, 47, .3);
}

.marker-cluster__anel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.marker-cluster__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64%;
  height: 64%;
  border-radius: 50%;
  background: var(--superficie);
  font-size: .75rem;
  font-weight: 700;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* Volta ao estado inteiro, no canto oposto ao zoom e à legenda. */
.mapa-volta {
  padding: .4rem .7rem;
  border: 2px solid rgba(0, 0, 0, .2);
  border-radius: 4px;
  background: var(--superficie);
  background-clip: padding-box;
  font: inherit;
  font-size: .85rem;
  color: var(--tinta);
  cursor: pointer;
}

.mapa-volta:hover { background-color: #f4f4f4; }
.mapa-volta:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Balão do agrupamento de pontos.

   Ao passar o mouse, o balão diz o que o agrupamento reúne: as áreas
   temáticas, com a cor do anel, ou os nomes, quando são poucos. A precisão
   vem resumida numa linha; a frase completa fica no balão de cada ponto.
   --------------------------------------------------------------------------- */
.leaflet-tooltip.balao-grupo__moldura {
  padding: 0;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--superficie);
  box-shadow: 0 6px 18px rgba(18, 49, 47, .18);
  /* O Leaflet deixa a largura no automático, e com quebra de linha liberada o
     conteúdo encolhe até o mínimo: "Instalação de referência" saía em três
     linhas. A largura mínima dá espaço para o rótulo mais longo. */
  white-space: normal;
  min-width: 16.5rem;
  max-width: 20rem;
}

/* A seta acompanha o lado em que o balão abriu (`encaixarBalao`). Quando ele
   desliza para caber, a seta deixa de apontar para o símbolo e some. */
.leaflet-tooltip-top.balao-grupo__moldura::before    { border-top-color: var(--borda-forte); }
.leaflet-tooltip-bottom.balao-grupo__moldura::before { border-bottom-color: var(--borda-forte); }
.leaflet-tooltip-left.balao-grupo__moldura::before   { border-left-color: var(--borda-forte); }
.leaflet-tooltip-right.balao-grupo__moldura::before  { border-right-color: var(--borda-forte); }
.leaflet-tooltip.balao-grupo__moldura--deslizado::before { display: none; }

.balao-grupo {
  padding: .55rem .7rem .5rem;
  color: var(--tinta);
}

.balao-grupo__total {
  margin: 0 0 .4rem;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
}

.balao-grupo__contexto {
  margin: -.2rem 0 .45rem;
  font-size: .8rem;
  color: var(--tinta-suave);
}

/* No balão de um ponto só, a frase de precisão é o conteúdo principal, e não
   um rodapé: é ela que diz o que aquele ponto permite afirmar. */
.balao-grupo__precisao {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  margin: 0;
  padding-top: .45rem;
  border-top: 1px solid var(--borda);
  font-size: .8rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}

.balao-grupo__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--borda);
}

.balao-grupo__lista li {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem 0;
  border-bottom: 1px solid var(--borda);
}

.balao-grupo__lista li:last-child {
  border-bottom: 0;
}

.balao-grupo__simbolo {
  flex: 0 0 auto;
  display: inline-flex;
  width: 20px;
  height: 20px;
}

.balao-grupo__simbolo svg {
  width: 20px;
  height: 20px;
}

.balao-grupo__rotulo {
  flex: 1 1 auto;
  font-size: .82rem;
  line-height: 1.3;
  color: var(--tinta);
}

.balao-grupo__numero {
  flex: 0 0 auto;
  min-width: 1.7rem;
  color: var(--acento);
  font-size: .95rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.balao-grupo__precisao-resumo {
  margin: .4rem 0 0;
  padding-top: .4rem;
  border-top: 1px solid var(--borda);
  font-size: .78rem;
  color: var(--tinta-suave);
}

.balao-grupo__dica {
  margin: .45rem 0 0;
  padding-top: .4rem;
  border-top: 1px solid var(--borda);
  font-size: .74rem;
  color: var(--tinta-suave);
}

/* ---------------------------------------------------------------------------
   Glossário
   --------------------------------------------------------------------------- */
.glossario__indice {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1.2rem 0 1.8rem;
  padding: .7rem .8rem;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 4px;
}

.glossario__indice a {
  padding: .25rem .6rem;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
  font-size: .85rem;
  text-decoration: none;
}

.glossario__indice a:hover,
.glossario__indice a:focus {
  border-color: var(--acento);
  background: var(--acento-claro);
}

.glossario__lista {
  margin: 0 0 2rem;
}

.glossario__lista dt {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
  padding-bottom: .2rem;
  border-bottom: 2px solid var(--acento-claro);
  font-weight: 600;
  color: var(--acento);
  scroll-margin-top: 1rem;
}

.glossario__lista dd {
  margin: .45rem 0 0;
  padding-left: 0;
  max-width: 58ch;
}

.glossario__valores {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
}

.glossario__valores li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .22rem 0;
  border-bottom: 1px solid var(--borda);
  max-width: 34rem;
}

.glossario__valores li:last-child {
  border-bottom: 0;
}

.glossario__contagem {
  margin-left: auto;
  padding: .02rem .4rem;
  border-radius: 10px;
  background: var(--superficie-2);
  color: var(--tinta-suave);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.glossario__nota {
  margin: 0 0 2rem;
  padding: .7rem .85rem;
  border-left: 3px solid var(--acento);
  background: var(--superficie-2);
  font-size: .9rem;
  max-width: 62ch;
}

/* O símbolo ao lado de cada classe de precisão é desenhado pelo mesmo caminho
   do mapa, via CSS, para não repetir o SVG em outro lugar. */
.simbolo-precisao {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.simbolo-precisao--endereco {
  background: currentColor;
  border-color: var(--superficie);
  box-shadow: 0 0 0 1.5px currentColor;
}

.simbolo-precisao--referencia {
  background: color-mix(in srgb, currentColor 85%, transparent);
}

.simbolo-precisao--municipal {
  background: color-mix(in srgb, currentColor 28%, transparent);
  border-style: dashed;
}

.simbolo-precisao--generalizada {
  background: color-mix(in srgb, currentColor 20%, transparent);
  border-style: dotted;
}

.simbolo-precisao--esquematica {
  border: 0;
  border-top: 3px dashed currentColor;
  border-radius: 0;
  height: 3px;
  width: 20px;
  align-self: center;
}

@media (max-width: 40rem) {
  .glossario__indice {
    flex-direction: column;
  }

  .glossario__indice a {
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Panorama do recorte, no alto da lista.

   As barras são HTML e CSS, sem biblioteca e sem script: a lista é a
   alternativa formal ao mapa, e uma leitura que dependesse de JavaScript
   deixaria de fora justamente quem depende dela.
   --------------------------------------------------------------------------- */
.panorama {
  margin: 0 0 2.5rem;
}

.panorama__aviso {
  margin: 0 0 1.2rem;
  padding: .7rem .85rem;
  border-left: 3px solid var(--alerta);
  background: var(--ressalva-fundo);
  color: var(--ressalva-tinta);
  font-size: .9rem;
  max-width: 68ch;
}

.panorama__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem;
}

.painel-grafico {
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--borda);
  border-radius: 4px;
  background: var(--superficie);
}

.painel-grafico--largo {
  grid-column: 1 / -1;
}

.painel-grafico h3 {
  margin: 0 0 .8rem;
  font-size: 1rem;
  color: var(--acento);
}

.painel-grafico__leitura {
  margin: .9rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--borda);
  font-size: .88rem;
  line-height: 1.45;
}

.painel-grafico__nota {
  margin: .6rem 0 0;
  font-size: .8rem;
  color: var(--tinta-suave);
  line-height: 1.4;
}

.painel-grafico__numerao {
  margin: .4rem 0 0;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  flex-wrap: wrap;
}

.painel-grafico__numerao strong {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.painel-grafico__numerao span {
  flex: 1 1 8rem;
  font-size: .88rem;
  color: var(--tinta-suave);
}

/* As barras */
.barras {
  margin: 0;
  padding: 0;
  list-style: none;
}

.barras li {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .22rem 0;
}

.barras__rotulo {
  font-size: .82rem;
  line-height: 1.25;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.barras__trilho {
  height: 12px;
  border-radius: 6px;
  background: var(--superficie-2);
  overflow: hidden;
}

.barras__preenchimento {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--acento);
  min-width: 2px;
}

.barras__valor {
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--tinta);
}

.barras__parte {
  color: var(--tinta-suave);
  font-size: .76rem;
}

/* A escala de precisão vai do mais firme ao mais reticente, e a barra
   acompanha: quanto menos a coordenada permite afirmar, mais apagada ela
   fica. Assim a leitura não depende só de ler o rótulo. */
.barras--precisao .barras__trilho--endereco .barras__preenchimento {
  background: var(--acento);
}

.barras--precisao .barras__trilho--referencia .barras__preenchimento {
  background: color-mix(in srgb, var(--acento) 75%, var(--superficie));
}

.barras--precisao .barras__trilho--municipal .barras__preenchimento {
  background: color-mix(in srgb, var(--acento) 45%, var(--superficie));
}

.barras--precisao .barras__trilho--generalizada .barras__preenchimento,
.barras--precisao .barras__trilho--esquematica .barras__preenchimento {
  background: color-mix(in srgb, var(--acento) 28%, var(--superficie));
}

.barras--precisao .barras__trilho--indefinida .barras__preenchimento {
  background: var(--borda-forte);
}

@media (max-width: 34rem) {
  .barras li {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "rotulo valor"
      "trilho trilho";
    gap: .15rem .5rem;
    padding: .35rem 0;
  }

  .barras__rotulo { grid-area: rotulo; }
  .barras__valor  { grid-area: valor; }
  .barras__trilho { grid-area: trilho; }
}

@media print {
  .barras__preenchimento {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ========================================================= entrada (home)

   A camada editorial. As regras do que ela pode fazer estão no
   docs/interface.md §2-A; aqui valem duas consequências visuais.

   Primeira: tudo é bloco de largura limitada e centralizado, porque texto
   corrido em coluna de 1440px não se lê. Segunda: nada nesta folha depende de
   JavaScript ou de imagem externa — a entrada precisa caber no orçamento de
   3 s em 4G junto com o resto (RNF-04, RE-05).
*/
/*
  A coluna de 68rem é feita por padding, e não por um filho centralizado com
  `margin-inline: auto`.

  Com margem automática, cada filho se centraliza sozinho dentro da seção, e aí
  um parágrafo mais estreito que o título deixa de alinhar com ele — os dois
  ficam centralizados em larguras diferentes e a borda esquerda serrilha. Com
  padding, a seção inteira tem uma margem só e todo filho começa no mesmo x,
  qualquer que seja a largura máxima dele.
*/
.abertura, .entradas, .apuracao, .fechamento {
  padding: 3.6rem clamp(1.5rem, calc((100% - 68rem) / 2), 50%);
}

.abertura {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--noite);
  color: #dfe8ea;
  padding-bottom: 2.5rem;
}

/*
  A malha do estado ao fundo.

  É o contorno real dos 92 municípios, gerado uma vez por `tools/malha-para-svg.php`
  a partir do mesmo GeoJSON que o mapa carrega, e não um desenho aproximado. Vem
  por `background-image` num pseudo-elemento, e não inline, por dois motivos: o
  arquivo de 19 KB fica em cache do navegador em vez de engordar o HTML de toda
  visita, e a opacidade se aplica só a ele, sem lavar o texto por cima.

  Só o contorno, sem pontos. O GeoJSON traz a coordenada de rótulo de cada
  município e seria fácil salpicar 92 pontinhos como nos mockups — que o leitor
  leria como registros, o que eles não são.
*/
.abertura::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 1.5rem;
  width: min(46%, 34rem);
  aspect-ratio: 1000 / 614;
  transform: translateY(-50%);
  background: url("/assets/img/malha-rj.svg") no-repeat center / contain;
  opacity: 0.45;
  pointer-events: none;
}

/*
  Abaixo de 62rem a malha sai.

  Ela sangrava para fora da direita e o estado aparecia cortado ao meio — lido
  assim vira rabisco, não território, e um contorno que ninguém reconhece só
  concorre com o texto ao lado. Inteira ou nenhuma.
*/
@media (max-width: 62rem) {
  .abertura::after { display: none; }
}
.abertura > * { position: relative; }
.abertura__texto { max-width: 46rem; }
.abertura__orgao {
  margin: 0 0 1.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa8b0;
}

/*
  A chamada é <p> e não <h1>: o h1 da página é o título completo do mapa, que
  fica oculto no topo. "O futuro tem endereço" é assinatura de campanha, não
  título de documento, e promovê-la a cabeçalho faria quem navega por estrutura
  ouvir um slogan no lugar do nome da coisa.
*/
.abertura__chamada {
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #fff;
  text-wrap: balance;
}
.abertura__apoio { margin: 0 0 1.8rem; font-size: 1.05rem; max-width: 42rem; color: #c4d2d6; }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0; }
.abertura__busca { margin: 0 0 1.4rem; max-width: 40rem; }
.abertura__busca label { display: block; margin-bottom: 0.4rem; color: #c4d2d6; }
.abertura__busca-linha { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.abertura__busca input { flex: 1 1 16rem; padding: 0.75rem 1rem; font-size: 1.1rem; }

.botao--grande { padding: 0.7rem 1.4rem; font-size: 1rem; }
.botao--contorno { background: transparent; color: #fff; border-color: #55707c; }
.botao--contorno:hover { background: rgba(255, 255, 255, 0.08); }

/* As contagens. `dl` porque cada uma é um rótulo e o seu valor. */
.contagens {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin: 2.5rem 0 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid #23414f;
}
.contagem-item dt { font-size: 0.85rem; color: #9fb4bb; order: 2; }
.contagem-item dd {
  margin: 0;
  order: 1;
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--realce);
  font-variant-numeric: tabular-nums;
}
.contagem-item { display: flex; flex-direction: column; }
.contagem-item dd span { font-size: 1.1rem; font-weight: 400; color: #9fb4bb; }
.abertura__nota { margin: 0; font-size: 0.86rem; color: #9fb4bb; max-width: 48rem; }
.abertura__nota a { color: var(--acento-no-escuro); }

/* ------------------------------------------------------ por onde começar */
.entradas { background: var(--fundo); }
.entradas h2, .apuracao h2, .fechamento h2 { margin: 0 0 0.7rem; font-size: 1.9rem; }
.entradas__apoio, .apuracao__apoio { margin: 0 0 2.2rem; color: var(--tinta-suave); max-width: 44rem; font-size: 1.02rem; }

.entradas__grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1rem;
}

/*
  A entrada é um bloco clicável inteiro, e não um título com um "explorar" ao
  lado: alvo grande é o que serve no celular e a quem tem pouca precisão de
  ponteiro. A borda esquerda engrossa no hover e no foco — movimento de cor
  sozinho não sinaliza nada para quem não a distingue.
*/
/*
  `--cor-area` é a cor do grupo, posta no elemento pela view. O `var(...)` traz
  o acento como reserva para o caso de um grupo novo aparecer sem mapeamento —
  cartão sem cor é feio, cartão sem borda parece quebrado.
*/
.entrada {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icone nome seta" "icone conta seta";
  column-gap: 0.8rem;
  align-items: center;
  height: 100%;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--borda);
  border-left: 5px solid var(--cor-area, var(--acento));
  border-radius: var(--raio-cartao);
  background: var(--superficie);
  box-shadow: var(--sombra-cartao);
  text-decoration: none;
  color: var(--tinta);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.entrada:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(11, 31, 42, 0.14), 0 3px 8px rgba(11, 31, 42, 0.06);
}

/*
  Traço colorido direto no branco, sem disco atrás.

  Eu tinha posto um disco na cor da área diluída a 14%, e sobre cartão branco
  ele simplesmente não aparece — ficava um halo que ninguém vê e que não serve
  para nada. As peças recebidas também não têm disco: o ícone é o traço.
  Aumentar o símbolo e engrossar o traço dá o peso que o disco ia dar.
*/
.entrada__icone {
  grid-area: icone;
  width: 2.3rem;
  height: 2.3rem;
  color: var(--cor-area, var(--acento));
  stroke-width: 4;
}
.entrada__nome { grid-area: nome; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.entrada__conta { grid-area: conta; font-size: 0.85rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }

/*
  A seta encosta no texto, não na borda.

  Com ela grudada na margem direita, o nome quebrava em duas linhas enquanto
  sobrava um vão vazio ao lado — a seta parecia de outro cartão. Alinhada ao
  fim do texto, ela devolve essa largura para o nome.

  Decorativa: o cartão inteiro é o link e o nome já diz o destino.
*/
.entrada::after {
  content: "→";
  grid-area: seta;
  font-size: 1.05rem;
  color: var(--cor-area, var(--acento));
  align-self: center;
}

/* --------------------------------------------- o levantamento, por dentro */
.apuracao { background: var(--superficie-2); }
.apuracao__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}
.apuracao__cartao {
  padding: 1.4rem 1.5rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
}
.apuracao__cartao h3 { margin: 0.2rem 0 0.8rem; font-size: 1rem; display: flex; align-items: center; gap: 0.45rem; }
.apuracao__icone { width: 1.35rem; height: 1.35rem; color: var(--acento); stroke-width: 3; }
.apuracao__cartao p { margin: 0 0 0.8rem; font-size: 0.9rem; color: var(--tinta-suave); }
.apuracao__cartao p:last-child { margin-bottom: 0; }

/*
  Declarado depois e com a classe do cartão junto porque `.apuracao__cartao p`
  tem uma especificidade a mais que `.apuracao__valor` sozinho e ganharia — o
  número saía do tamanho do corpo do texto.
*/
.apuracao__cartao .apuracao__valor {
  margin: 0;
  font-size: 2.2rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.apuracao__cartao .apuracao__valor span { font-size: 1rem; font-weight: 400; color: var(--tinta-suave); }

/* ------------------------------------------------------------ fechamento */
.fechamento { background: var(--superficie-2); }
.fechamento p { max-width: 44rem; color: var(--tinta-suave); }
.fechamento__acoes { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
.fechamento .botao--contorno { color: var(--acento); border-color: var(--acento); }
.fechamento .botao--contorno:hover { background: var(--acento-claro); }

@media (max-width: 40rem) {
  .abertura, .entradas, .apuracao, .fechamento { padding: 2.2rem 1.15rem; }
  .contagens { gap: 1.2rem 2rem; }
  .contagem-item dd { font-size: 2rem; }
  .abertura__acoes .botao, .fechamento__acoes .botao { flex: 1 1 100%; justify-content: center; }
}

/* ------------------------------------------------------- mapa da entrada */
.home-mapa { background: var(--superficie-2); padding: 3.6rem clamp(1.5rem, calc((100% - 68rem) / 2), 50%); }
.home-mapa h2 { margin: 0 0 0.7rem; font-size: 1.9rem; }
.home-mapa__apoio { margin: 0 0 1.5rem; color: var(--tinta-suave); max-width: 44rem; }

.home-mapa__moldura {
  position: relative;
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  overflow: hidden;
  background: #f4f8f7;
}

/*
  A altura é do contêiner, não do conteúdo: o Leaflet mede a caixa ao iniciar, e
  caixa de altura zero devolve um mapa de altura zero. Reservar o espaço antes
  também evita o pulo da página quando o mapa termina de carregar.
*/
.home-mapa__tela { height: clamp(20rem, 46vh, 30rem); }

/*
  Dois seletores de classe, e não um: o `leaflet.css` é injetado em tempo de
  execução e entra no `head` depois desta folha, então `.leaflet-container`
  ganharia de `.home-mapa__tela` no desempate por ordem e devolveria o cinza
  padrão. Aqui não falta mosaico nenhum para justificar cinza — o vazio em volta
  é mar e estado vizinho.
*/
.home-mapa__moldura .home-mapa__tela { background: #ebf1f5; }

/*
  O texto do mapa herda a fonte do site. O `leaflet.css` fixa Helvetica em
  `.leaflet-container` e entra no `head` depois desta folha; com `body` na frente
  o seletor ganha por especificidade, e não por ordem. Balões e rótulos herdam
  daqui. O tamanho continua o do Leaflet.
*/
body .leaflet-container { font-family: inherit; }

.home-mapa__acao { position: absolute; right: 1rem; bottom: 1rem; z-index: 500; }

/* O aviso ocupa o lugar do mapa, e só aparece quando o desenho falhou. */
.home-mapa__aviso {
  display: none;
  margin: 0;
  padding: 1rem 1.15rem;
  background: var(--ressalva-fundo);
  color: var(--ressalva-tinta);
  font-size: 0.9rem;
}
.home-mapa--erro .home-mapa__tela { display: none; }
.home-mapa--erro .home-mapa__aviso { display: block; }
.home-mapa__aviso--sempre { display: block; margin-top: 1rem; border-radius: var(--raio-cartao); }

/* --------------------------------------------------- legenda sobre o mapa

   O tratamento vem da proposta de 21/09: cartão claro sobre o mapa, marcador
   grande, seções separadas e bastante respiro. O conteúdo, não: a peça trazia
   quatro "tipos de registro" e nenhuma distinção de precisão. Aqui são as nove
   áreas, as cinco formas e as três faixas de agrupamento, que é o que a tela
   desenha de fato (RF-72, RF-73).
*/
.legenda-mapa {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 500;
  max-width: 26rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: 0 12px 32px rgba(11, 31, 42, 0.18);
}

/* Fechada, é só o título: uma pastilha no canto que não disputa com o mapa. */
.legenda-mapa:not([open]) { max-width: none; width: max-content; }

.legenda-mapa__titulo {
  cursor: pointer;
  padding: 0.7rem 0.95rem;
  font-weight: 700;
  font-size: 0.95rem;
  list-style-position: inside;
}
.legenda-mapa[open] .legenda-mapa__titulo { border-bottom: 1px solid var(--borda); }

/*
  A altura é limitada e o corpo rola. Com nove áreas, cinco precisões e três
  faixas, a legenda aberta chega a ser mais alta que o mapa em tela baixa, e aí
  ela escapa da moldura em vez de caber nela.
*/
.legenda-mapa__corpo {
  padding: 0.85rem 0.95rem 1rem;
  max-height: min(26rem, 55vh);
  overflow-y: auto;
}
.legenda-mapa__secao + .legenda-mapa__secao { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--borda); }
.legenda-mapa__secao h2 { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--tinta-suave); font-weight: 600; }

/* Duas colunas: nove áreas em coluna única faziam a legenda aberta ficar mais
   alta que o próprio mapa em tela de notebook. */
.legenda-grupos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.35rem 0.9rem;
  font-size: 0.83rem;
}
.legenda-grupos li { display: flex; gap: 0.55rem; align-items: center; }
.legenda-grupos__cor { flex: none; width: 0.85rem; height: 0.85rem; border-radius: 50%; }

.legenda-agrupamento { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; font-size: 0.83rem; }
.legenda-agrupamento li { display: flex; gap: 0.55rem; align-items: center; }

/* Repete o desenho do anel em vez de reusar `.marker-cluster`: aquela
   classe só vale junto de `.leaflet-marker-icon`, que traz posicionamento
   absoluto do Leaflet e soltaria a amostra da linha. As cores do anel são
   postas pelo `mapa.js`, com as das áreas do catálogo. */
.legenda-agrupamento__amostra {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--tinta);
}

.legenda-mapa .legenda__nota { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--borda); }

@media (max-width: 75rem) {
  /* Em coluna única a legenda volta para o fluxo: sobre um mapa de 24rem ela
     cobriria metade da vista, que é pior do que o olho ir e voltar. */
  .legenda-mapa {
    position: static;
    max-width: none;
    margin: 0.75rem 1rem 1rem;
    box-shadow: none;
  }
}

/* ------------------------------------------------- retrato em linhas

   Diagramação da proposta de 21/09: ícone, número grande com o rótulo embaixo,
   e a explicação à direita. Três colunas em tela larga; em tela estreita a
   explicação desce para baixo do número, e o ícone acompanha o número.
*/
.retrato { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }

.retrato__linha {
  display: grid;
  grid-template-columns: 4.2rem minmax(9rem, 14rem) 1fr;
  gap: 0 1.5rem;
  align-items: start;
  padding: 1.6rem 1.8rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
}

/* Mesmo tratamento dos cartões de área: disco diluído atrás do traço, senão o
   ícone some no branco do cartão. */
.retrato__icone {
  width: 3.4rem;
  height: 3.4rem;
  padding: 0.7rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--acento-claro);
  color: var(--acento);
  stroke-width: 3.5;
}

.retrato__valor { margin: 0; display: flex; flex-direction: column; }
.retrato__valor strong {
  font-size: 2.4rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.retrato__valor strong span { font-size: 1rem; font-weight: 400; color: var(--tinta-suave); }
.retrato__rotulo { font-weight: 600; font-size: 0.98rem; margin-top: 0.15rem; }

.retrato__nota { color: var(--tinta-suave); }
.retrato__nota p { margin: 0 0 0.7rem; font-size: 0.95rem; line-height: 1.55; }
.retrato__nota p:last-child { margin-bottom: 0; }
.retrato__nota h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--tinta); }

/* Sem número, a linha tem duas colunas e a explicação ocupa a que sobra. */
.retrato--criterios .retrato__linha { grid-template-columns: 4.2rem 1fr; align-items: center; }

.criterios { background: var(--fundo); padding: 3.6rem clamp(1.5rem, calc((100% - 68rem) / 2), 50%); }
.criterios h2 { margin: 0 0 1.6rem; font-size: 1.9rem; }

@media (max-width: 52rem) {
  .retrato__linha { grid-template-columns: 3.6rem 1fr; gap: 0 1.1rem; padding: 1.3rem 1.35rem; }
  /* A explicação passa para a linha de baixo, alinhada com o número e não com
     o ícone: recuo duplo em tela estreita come a largura útil do texto. */
  .retrato__nota { grid-column: 2; margin-top: 0.7rem; }
  .retrato__icone { width: 2.9rem; height: 2.9rem; padding: 0.6rem; }
  .retrato__valor strong { font-size: 2rem; }
}

/* ------------------------------------------- distribuição por regional */
.regionais { background: var(--superficie-2); padding: 3.6rem clamp(1.5rem, calc((100% - 68rem) / 2), 50%); }
.regionais h2 { margin: 0 0 0.7rem; font-size: 1.9rem; }

.barras--regionais {
  max-width: 52rem;
  padding: 1.6rem 1.8rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
}
.barras--regionais .barras__rotulo { font-weight: 600; }

.regionais__nota {
  margin: 1.2rem 0 0;
  max-width: 44rem;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

/* =============================================================== manual

   Página de uso, com as telas de verdade. Reusa a abertura, os botões e o
   fechamento da entrada; o que é próprio daqui são os passos numerados, as
   figuras e o bloco de limites.
*/
.abertura--manual { padding-bottom: 3.6rem; }
.abertura--manual::after { display: none; }

.passo { padding: 3.6rem clamp(1.5rem, calc((100% - 68rem) / 2), 50%); background: var(--superficie-2); }
.passo--claro { background: var(--fundo); }

/*
  O passo que trata dos símbolos é o único em azul-noite. Não é hierarquia de
  design: é o ponto em que o mapa deixa de ser bolinha e passa a declarar o que
  a posição permite afirmar, e quem pula essa parte lê o resto errado.
*/
.passo--destaque { background: var(--noite); color: #dfe8ea; }
.passo--destaque h2 { color: #fff; }
.passo--destaque .passo__ordem { color: var(--realce); }
.passo--destaque .destaques li { background: var(--noite-2); border-color: #23414f; }
.passo--destaque .destaques strong { color: #fff; }

.passo__ordem {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--foco);
}
.passo h2, .limites h2 { margin: 0 0 0.8rem; font-size: 1.9rem; }
.passo__texto { margin: 0 0 1.6rem; max-width: 46rem; font-size: 1.02rem; }
.passo__texto--forte { font-weight: 600; }

/* ---------------------------------------------------------- as telas */
.tela { margin: 0 0 1.6rem; }
.tela img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
  background: var(--superficie);
}
.tela figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--tinta-suave); }
.passo--destaque .tela figcaption { color: #9fb4bb; }

.tela-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.5rem; }
.tela-par--celular { grid-template-columns: repeat(auto-fit, minmax(14rem, 18rem)); }

/* ------------------------------------------------------- os destaques */
.destaques {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
}
.destaques li {
  padding: 1.2rem 1.35rem;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-cartao);
  font-size: 0.93rem;
}
.destaques strong { display: block; margin-bottom: 0.35rem; font-size: 1rem; color: var(--tinta); }

/* ---------------------------------------------------------- limites */
.limites { padding: 3.6rem clamp(1.5rem, calc((100% - 68rem) / 2), 50%); background: var(--ressalva-fundo); }
.limites h2 { color: var(--ressalva-tinta); }
.limites .passo__texto { color: var(--ressalva-tinta); }

.limites__lista {
  margin: 0;
  padding-left: 1.4rem;
  display: grid;
  gap: 1.2rem;
  max-width: 52rem;
}
.limites__lista li::marker { font-weight: 700; color: var(--foco); }
.limites__lista h3 { margin: 0 0 0.3rem; font-size: 1.1rem; color: var(--ressalva-tinta); }
.limites__lista p { margin: 0; color: var(--ressalva-tinta); }

@media (max-width: 52rem) {
  .passo, .limites { padding: 2.6rem 1.15rem; }
  .passo h2, .limites h2 { font-size: 1.6rem; }
}

/* ========================================================== impressão

   Existe por causa dos manuais, que viram PDF para formar pessoas. O resto do
   site também imprime melhor com estas regras, então elas não são escondidas
   atrás de uma classe.
*/
@media print {
  /*
    Navegação impressa é tinta gasta: ninguém clica em papel. A faixa de
    ressalva fica, e o motivo é o mesmo de ela existir na tela — quem recebe
    uma página solta precisa saber de que versão da base ela fala.
  */
  .pular,
  .cabecalho__nav,
  .cabecalho__sub,
  .botao,
  .abertura__acoes,
  .fechamento__acoes,
  .home-mapa__acao,
  .legenda-mapa { display: none; }

  /*
    Sem isto o navegador imprime as faixas coloridas em branco, e os blocos que
    dependem de cor para se distinguir — o azul-noite dos símbolos, o âmbar dos
    limites — viram texto solto no meio do documento.
  */
  .abertura, .passo, .passo--destaque, .limites, .criterios, .entradas, .apuracao, .regionais {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Cada passo começa numa página. Manual de treinamento se lê um por vez. */
  .passo, .limites, .criterios { break-before: page; }
  .abertura { break-after: avoid; }

  /* Nada de figura, cartão ou regra partido ao meio pela quebra de página. */
  .tela, .destaques li, .limites__lista li, .retrato__linha, .entrada { break-inside: avoid; }
  h2, h3 { break-after: avoid; }

  /* Captura de página inteira não cabe numa folha; limita pela altura. */
  .tela img { max-width: 100%; max-height: 14cm; width: auto; margin-inline: auto; }

  /*
    Link em papel perde o destino. O endereço vai impresso ao lado, com o
    domínio na frente para funcionar longe do site.
  */
  main a[href^="/"]::after {
    content: " (mapa.fanara.com.br" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }

  .passo, .limites, .criterios, .abertura, .fechamento { padding-inline: 0; }
  body { background: #fff; }
}

@page { margin: 1.6cm 1.4cm; }

/* ================================================================ matriz */
.matriz-pagina { max-width: 1400px; margin: 0 auto; padding: 32px 28px 40px; color: #17313d; }
.matriz-pagina h1 { margin: 0 0 8px; color: #003366; font-size: 31px; }
.matriz-pagina__lead { margin: 0 0 20px; color: #637681; }
.matriz-pagina__notice { margin-bottom: 18px; padding: 12px 14px; border-left: 4px solid #579dd5; border-radius: 6px; background: #eff6fa; color: #285865; font-size: 13px; }
.matriz-pagina__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.matriz-pagina__filters label { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: #55707b; }
.matriz-pagina__filters select { width: 100%; border: 1px solid #cbdcdf; border-radius: 8px; padding: 10px 11px; color: #294651; background: #fff; font: inherit; font-weight: 400; }
.matriz-pagina__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.matriz-card { overflow: hidden; border: 1px solid #d8e3e5; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(14, 47, 60, .08); }
.matriz-card__head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid #e4edef; }
.matriz-card__head h2, .matriz-pagina__side h2 { margin: 0; color: #153340; font-size: 18px; line-height: 1.25; }
.matriz-card__head p { margin: 5px 0 0; color: #71818a; font-size: 12px; }
.matriz-pagina__legend { display: flex; align-items: center; gap: 10px; color: #607681; font-size: 11px; white-space: nowrap; }
.matriz-pagina__legend span { display: inline-flex; align-items: center; gap: 4px; }
.matriz-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.matriz-pagina__table-wrap { max-height: 630px; overflow: auto; }
.matriz-tabela { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.matriz-tabela th, .matriz-tabela td { padding: 7px 4px; border-right: 1px solid #edf1f2; border-bottom: 1px solid #edf1f2; text-align: center; }
.matriz-tabela thead th { position: sticky; top: 0; z-index: 3; color: #fff; background: #123a4b; font-size: 11px; font-weight: 700; }
.matriz-tabela thead th:first-child { left: 0; z-index: 5; width: 190px; text-align: left; }
.matriz-tabela thead th { font-size: 10.5px; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
.matriz-tabela tbody th { position: sticky; left: 0; z-index: 2; background: #fff; font-size: 11.5px; line-height: 1.25; text-align: left; color: #29424d; font-weight: 700; }
.matriz-tabela td { padding: 0; font-weight: 800; color: #124653; }
.matriz-tabela td button { width: 100%; min-height: 34px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.matriz-tabela td button:hover, .matriz-tabela td button:focus-visible { outline: 2px solid #003366; outline-offset: -2px; }
.matriz-zero { background: #fff; }
.matriz-selected { position: relative; z-index: 1; box-shadow: inset 0 0 0 3px #003366; }
.matriz-g1 { background: #ecf3fa; }.matriz-g2 { background: #cfe2f1; }.matriz-g3 { background: #9dc4e3; }.matriz-g4 { background: #579dd5; }.matriz-g5 { background: #005a92; color: #fff !important; }
.matriz-pagina__source { padding: 12px 18px; border-top: 1px solid #e4edef; color: #71818a; font-size: 12px; }
.matriz-pagina__side { padding: 20px; position: sticky; top: 12px; }
.matriz-pagina__side h2 span { display: block; color: #55707b; font-size: 15px; font-weight: 600; }
.matriz-pagina__lista { max-height: 380px; margin: 14px 0 0; padding: 0; overflow: auto; list-style: none; border-top: 1px solid #e4edef; font-size: 13px; }
.matriz-pagina__lista li { padding: 7px 2px; border-bottom: 1px solid #edf1f2; }
.matriz-pagina__lista a { color: #0f5a66; text-decoration: none; }
.matriz-pagina__lista a:hover { text-decoration: underline; }
.matriz-pagina__vazio { margin-top: 14px; color: #637681; font-size: 13px; }
.matriz-pagina__baixar { margin-top: 12px; padding: 8px 12px; border: 1px solid #003366; border-radius: 8px; background: #fff; color: #003366; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.matriz-pagina__baixar:hover { background: #003366; color: #fff; }
.matriz-card__head .matriz-pagina__baixar { margin-top: 0; align-self: start; }
.matriz-pagina__resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.matriz-pagina__resumo div { padding: 12px 14px; border: 1px solid #d8e3e5; border-radius: 10px; background: #fff; }
.matriz-pagina__resumo dt { color: #637681; font-size: 12px; }
.matriz-pagina__resumo dd { order: -1; margin: 0; color: #003366; font-size: 26px; font-weight: 800; }
.matriz-pagina__resumo div { display: flex; flex-direction: column; }.matriz-pagina__eyebrow { margin-bottom: 8px; color: #13717b; font-size: 12px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.matriz-pagina__big { margin-top: 12px; font-size: 33px; font-weight: 800; }.matriz-pagina__big span { color: #71818a; font-size: 14px; font-weight: 600; }
.matriz-pagina__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }.matriz-pagina__metrics div { padding: 11px; border: 1px solid #e0eeee; border-radius: 10px; background: #f5f9f9; }.matriz-pagina__metrics b { display: block; color: #126c75; font-size: 18px; }.matriz-pagina__metrics span { color: #71818a; font-size: 11px; }
.matriz-pagina__side h3 { margin: 18px 0 8px; font-size: 13px; }.matriz-pagina__barrow { display: grid; grid-template-columns: 125px 1fr 30px; gap: 8px; align-items: center; margin: 8px 0; font-size: 11px; }.matriz-pagina__barrow > div { height: 9px; overflow: hidden; border-radius: 99px; background: #e6eeee; }.matriz-pagina__barrow i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8bd2d3, #087d88); }
.matriz-pagina__callout { margin-top: 18px; padding: 10px 12px; border-left: 4px solid #e9a46f; border-radius: 5px; background: #fff7ed; color: #684c37; font-size: 12px; }.matriz-pagina__button { display: block; margin-top: 18px; padding: 12px 14px; border-radius: 9px; background: #003366; color: #fff; text-align: center; font-weight: 750; text-decoration: none; }.matriz-pagina__button:hover { background: #14516b; color: #fff; }
.matriz-pagina__acompanhamento { margin: 10px 0 0; padding: 8px 10px; border-left: 4px solid #b45309; border-radius: 5px; background: #fffbeb; color: #78350f; font-size: 12px; }
.matriz-pagina__footer-chart { margin-top: 20px; padding: 18px 20px; }.matriz-pagina__footer-chart h2 { margin: 0 0 12px; font-size: 16px; }.matriz-pagina__bars { display: flex; align-items: end; gap: 12px; height: 180px; margin-top: 26px; padding: 0 10px; border-bottom: 1px solid #cdd9dc; }.matriz-pagina__bars > div { position: relative; flex: 1; min-width: 22px; border-radius: 7px 7px 0 0; background: linear-gradient(#178e96, #9bd6d6); }.matriz-pagina__bars span { position: absolute; top: -20px; width: 100%; text-align: center; color: #42616b; font-size: 11px; }.matriz-pagina__xlabels { display: flex; gap: 12px; padding: 7px 10px 0; color: #657780; font-size: 10px; }.matriz-pagina__xlabels span { flex: 1; min-width: 22px; overflow: hidden; text-align: center; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
.matriz-pagina__bars > div.matriz-bar-ativa { background: linear-gradient(#003366, #579dd5); }.matriz-pagina__status { margin: 14px 0 0; color: #607681; font-size: 12px; }
@media (max-width: 1000px) { .matriz-pagina { padding: 22px 16px; }.matriz-pagina__filters, .matriz-pagina__layout { grid-template-columns: 1fr; }.matriz-pagina__side { position: static; }.matriz-tabela { table-layout: auto; min-width: 760px; }.matriz-pagina__resumo dd { font-size: 20px; }.matriz-pagina__table-wrap { max-height: 500px; }.matriz-card__head { display: block; }.matriz-pagina__legend { margin-top: 10px; white-space: normal; } }

/*
  Tabela vira cartão no celular: cada linha é um cartão, e o nome da coluna
  (data-label, posto por tabelas.js) aparece acima de cada valor. O thead
  some da tela, mas continua para o leitor de tela.
*/
@media (max-width: 40rem) {
  table, tbody, tr, td, tbody th, caption { display: block; width: 100%; }
  table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table tbody tr {
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-cartao);
    background: var(--superficie);
  }
  table td, table tbody th { border: 0; padding: 0.25rem 0; text-align: left; white-space: normal; }
  table tbody th { font-weight: 700; }
  table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tinta-suave);
  }
}

/* A matriz é grade de cruzamento, não lista: fica fora do "tabela vira cartão"
   acima e rola na horizontal dentro do próprio quadro (PR #23). */
@media (max-width: 40rem) {
  table.matriz-tabela { display: table; width: 100%; }
  .matriz-tabela thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .matriz-tabela tbody { display: table-row-group; width: auto; }
  .matriz-tabela tr { display: table-row; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
  .matriz-tabela th, .matriz-tabela td { display: table-cell; width: auto; }
  .matriz-tabela tbody th { padding: 7px 4px; }
}

/* Matriz impressa ou salva em PDF: a tabela e o resumo, sem controles. */
@media print {
  .matriz-pagina__filters, .matriz-pagina__acoes, .matriz-pagina__side, .matriz-pagina__footer-chart, #baixar-celula { display: none; }
  .matriz-pagina__layout { display: block; }
  .matriz-pagina__table-wrap { overflow: visible; }
  .matriz-tabela { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Página do município (Fase 33): cabeçalho com bandeira e mapa, números em
   destaque, tira de posição, rosca de esferas. */
.bandeira { margin: 0; flex: none; }
.bandeira img { display: block; height: 5.2rem; width: auto; max-width: 9rem; object-fit: contain; border: 1px solid var(--borda); border-radius: 4px; box-shadow: 0 2px 8px rgba(11, 31, 42, 0.15); background: var(--superficie); }
.bandeira figcaption { max-width: 9rem; font-size: 0.66rem; line-height: 1.3; color: var(--tinta-suave); margin-top: 0.3rem; }
.contexto__cabeca { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 0.75rem; }
.contexto__cabeca .bandeira img { height: 2.6rem; }
.contexto__cabeca h2 { margin: 0; }
.municipio { max-width: 62rem; margin: 0 auto; padding: 0 1rem 2rem; }
.municipio__cabeca {
  display: grid; grid-template-columns: auto 1fr minmax(11rem, 16rem); gap: 1.4rem; align-items: center;
  background: var(--superficie); border: 1px solid var(--borda); border-top: 6px solid var(--acento);
  border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); padding: 1.3rem 1.5rem; margin: 0 0 1.25rem;
}
.municipio__eyebrow { margin: 0 0 0.15rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acento); }
.municipio__cabeca h1 { margin: 0 0 0.6rem; font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); line-height: 1.1; }
.municipio__mapa { margin: 0; }
.municipio__destaques { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); margin: 0 0 1.25rem; }
.municipio__destaque-cti { background: var(--noite) !important; }
.municipio__destaque-cti dt, .municipio__destaque-cti dd, .municipio__destaque-cti dd.contexto__nota { color: #fff; }
.municipio__destaque-cti dd.contexto__nota { opacity: 0.8; }
.municipio__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0 0 1.25rem; }
.municipio__bloco--larga { grid-column: span 2; }
.municipio__bloco--cheia { grid-column: 1 / -1; }
@media (max-width: 60rem) { .municipio__grade { grid-template-columns: 1fr; } .municipio__bloco--larga, .municipio__bloco--cheia { grid-column: auto; } }
.municipio__grade .municipio__bloco { margin: 0; }
.municipio__bloco { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio-cartao); padding: 1.1rem 1.3rem; margin: 0 0 1.25rem; }
.municipio__bloco h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.municipio__tiras { display: grid; gap: 1rem; }
.tira { margin: 0; }
.tira figcaption { font-size: 0.92rem; }
.tira__valor { display: block; font-size: 0.8rem; color: var(--tinta-suave); }
.tira svg { display: block; width: 100%; height: auto; }
.tira__eixo { stroke: var(--borda-forte); stroke-width: 1.5; }
.tira__ponto { fill: var(--tinta-suave); opacity: 0.35; }
.tira__haste { stroke: var(--realce); stroke-width: 2; }
.tira__destaque { fill: var(--realce); stroke: #fff; stroke-width: 3; }
.tira__rotulo { font-size: 11px; fill: var(--tinta-suave); }
.rosca { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: center; }
.rosca__grafico { width: 100%; height: auto; transform: rotate(0deg); }
.rosca__fundo { fill: none; stroke: var(--superficie-2, #eee); stroke-width: 6; }
.rosca__fatia { fill: none; stroke-width: 6; }
.rosca__total { font-size: 7.5px; font-weight: 700; fill: var(--tinta); }
.rosca__legenda-centro { font-size: 3.2px; fill: var(--tinta-suave); }
.rosca__legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.85rem; }
.rosca__amostra { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.45rem; vertical-align: -1px; }
.rosca__parte { color: var(--tinta-suave); font-size: 0.78rem; }
.rosca--1 { stroke: #2a78d6; background: #2a78d6; }
.rosca--2 { stroke: #eb6834; background: #eb6834; }
.rosca--3 { stroke: #1baf7a; background: #1baf7a; }
.rosca--4 { stroke: #4a3aa7; background: #4a3aa7; }
.rosca--5 { stroke: #e87ba4; background: #e87ba4; }
.rosca--6 { stroke: #eda100; background: #eda100; }
svg .rosca--1, svg .rosca--2, svg .rosca--3, svg .rosca--4, svg .rosca--5, svg .rosca--6 { background: none; }
.ponto-grupo { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-right: 0.5rem; vertical-align: -1px; background: var(--acento); }
.ponto-grupo.contexto__grupo--conectividade { background: var(--grupo-conectividade); }
.ponto-grupo.contexto__grupo--conhecimento { background: var(--grupo-conhecimento); }
.ponto-grupo.contexto__grupo--ecossistema { background: var(--grupo-ecossistema); }
.ponto-grupo.contexto__grupo--fomento { background: var(--grupo-fomento); }
.ponto-grupo.contexto__grupo--formacao { background: var(--grupo-formacao); }
.ponto-grupo.contexto__grupo--governanca { background: var(--grupo-governanca); }
.ponto-grupo.contexto__grupo--industria { background: var(--grupo-industria); }
.ponto-grupo.contexto__grupo--infraestrutura { background: var(--grupo-infraestrutura); }
.ponto-grupo.contexto__grupo--saude { background: var(--grupo-saude); }
.ponto-grupo.contexto__grupo--patrimonio { background: var(--grupo-patrimonio); }
.municipio__tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0 0 1rem; }
.municipio__tabela th, .municipio__tabela td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--borda); vertical-align: top; }
.municipio__tabela thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tinta-suave); }
.municipio__fontes { margin-top: 1rem; }
@media (max-width: 44rem) {
  .municipio__cabeca { grid-template-columns: 1fr; text-align: left; }
  .municipio__mapa { max-width: 15rem; }
  .rosca { grid-template-columns: 1fr; justify-items: center; }
  .municipio__tabela thead { display: none; }
  .municipio__tabela tr { display: block; border-bottom: 1px solid var(--borda); padding: 0.4rem 0; }
  .municipio__tabela td { display: block; border: 0; padding: 0.1rem 0; }
  .municipio__tabela td::before { content: attr(data-label) ": "; color: var(--tinta-suave); font-size: 0.78rem; }
  .municipio__tabela td:first-child::before { content: ""; }
}
@media print { .municipio__cabeca { box-shadow: none; } }

/* Fonte logo abaixo de cada gráfico (regra da curadoria). */
.fonte-grafico { margin: 0.4rem 0 0.6rem; font-size: 0.76rem; color: var(--tinta-suave); }
.fonte-grafico a { color: inherit; text-decoration: underline; }

/* Região de Governo (Fase 34). */
.localizacao__municipio--regiao { fill: color-mix(in srgb, var(--cor-grupo, var(--acento)) 30%, #fff); }
.regiao__municipios { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.regiao__municipios li { background: var(--acento-claro); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.85rem; }
.regiao__municipios li strong { color: var(--tinta); }
.barras .per-capita--municipio { background: var(--acento); }
.barras .per-capita--regiao { background: color-mix(in srgb, var(--acento) 55%, #fff); }
.barras .per-capita--estado { background: var(--tinta-suave); }

/* Espaçamento do bloco "O município" (ficha) e dos blocos da página do município:
   cada parte ganha respiro e uma linha divisória, para os gráficos não se embolarem. */
.contexto { padding: 1.5rem 1.6rem 1.7rem; }
.contexto__cabeca { margin-bottom: 1.25rem; }
.contexto h3, .municipio__bloco h3 {
  font-size: 1rem;
  margin: 2.5rem 0 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--borda);
}
.contexto__destaques { margin-top: 1.25rem; gap: 1rem; }
.contexto p, .municipio__bloco p { line-height: 1.55; }
.contexto .setores__legenda, .municipio__bloco .setores__legenda { margin: 1.1rem 0 0.75rem; }
.contexto .setores, .municipio__bloco .setores { margin: 0.5rem 0 1rem; gap: 0.3rem; }
.contexto .setores__nome, .municipio__bloco .setores__nome { margin-top: 0.85rem; }
.contexto .barras, .municipio__bloco .barras { margin-top: 1.1rem; }
.contexto .barras li, .municipio__bloco .barras li { padding: 0.32rem 0; }
.contexto .fonte-grafico, .municipio__bloco .fonte-grafico { margin: 0.9rem 0 0; line-height: 1.5; }
.contexto .fonte-grafico + .legenda__nota, .municipio__bloco .fonte-grafico + .legenda__nota { margin-top: 0.9rem; }
.municipio__bloco { padding: 1.4rem 1.5rem 1.6rem; }
.municipio__grade { gap: 1.5rem; margin-bottom: 1.5rem; }
.municipio__destaques + .fonte-grafico { margin-top: 0.9rem; }
.municipio > .fonte-grafico { margin-bottom: 0.4rem; }
.municipio__tiras { gap: 1.75rem; }
.regiao__municipios { margin-top: 1.1rem; gap: 0.5rem; }

/* Perfil econômico: lista compacta de cursos com vaga em cada linha da tabela. */
.lista-cursos { list-style: none; margin: 0; padding: 0; }
.lista-cursos li { margin: 0 0 .15rem; }

/*
  Perfil econômico: gráficos do fim da página. As três situações da oferta usam
  o verde-petróleo da marca (com curso do setor), o mesmo esmaecido (sem curso) e
  o marrom de alerta (lacuna), que se distinguem pela luminosidade e não só pelo
  tom. Cada segmento traz a contagem em texto e há tabela para leitor de tela.
*/
.grafico-perfil { margin: 1.5rem 0 2rem; padding: 0; }
.grafico-perfil h3 { margin: 0 0 .4rem; font-size: 1.05rem; }
.grafico-perfil__achado { margin: 0 0 .6rem; }
.grafico-perfil__lista { list-style: none; padding: 0; }
.grafico-perfil__lista li { margin: 0 0 .25rem; }
.grafico-perfil .nota { font-size: 0.8rem; color: var(--tinta-suave); }
.cobertura__legenda { list-style: none; padding: 0; margin: .5rem 0; display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: .8rem; color: var(--tinta-suave); }
.cobertura__legenda li { display: flex; align-items: center; gap: .35rem; }
.cobertura__amostra, .peso__amostra { width: .8rem; height: .8rem; border-radius: 3px; flex: none; }
.cobertura { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr; gap: .45rem .8rem; align-items: center; margin: .5rem 0 .75rem; }
.cobertura__nome { margin: 0; font-size: .85rem; font-weight: 600; }
.cobertura__nome .nota { font-weight: 400; margin-left: .2rem; }
.cobertura__trilho { min-width: 0; }
.cobertura__barra { display: flex; gap: 2px; height: 1.7rem; border-radius: 6px; overflow: hidden; }
.cobertura__parte { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-width: 1.7rem; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.cobertura--vaga { background: var(--acento); color: #fff; }
.cobertura--sem-vaga { background: color-mix(in srgb, var(--acento) 28%, #fff); color: var(--tinta); }
.cobertura--lacuna { background: var(--alerta); color: #fff; }
.peso { display: block; width: 100%; height: auto; margin: .25rem 0 .5rem; }
.peso__grade { stroke: var(--borda); stroke-width: 1; }
.peso__eixo { stroke: var(--borda-forte); stroke-width: 1; }
.peso__rotulo { font-size: 11px; fill: var(--tinta-suave); }
.peso__nome { font-size: 13px; font-weight: 600; fill: var(--tinta); }
.peso__estado-traco { stroke: var(--tinta); stroke-width: 2; }
.peso__ponto { fill: var(--acento); stroke: var(--superficie); stroke-width: 1.5; }
.peso__ponto--lacuna { fill: var(--alerta); }
.peso__amostra { background: var(--acento); border-radius: 50%; }
.peso__amostra--lacuna { background: var(--alerta); }
.peso__estado { width: 2px; height: .9rem; background: var(--tinta); flex: none; margin: 0 .3rem; }
@media (max-width: 36rem) {
  .cobertura { grid-template-columns: 1fr; gap: .1rem; }
  .cobertura__trilho { margin-bottom: .5rem; }
}

/* Balão dos gráficos do perfil: o #tip precisa ficar dentro de .graficos-perfil, que é onde o estilo vale. */
.graficos-perfil #tip { white-space: pre-line; position: fixed; z-index: 9; pointer-events: none; background: var(--noite); color: #fff; font-size: .82rem; line-height: 1.35; padding: .45rem .6rem; border-radius: 4px; max-width: min(320px, calc(100vw - 16px)); opacity: 0; transition: opacity .08s; }
.graficos-perfil .cobertura__parte[data-tip] { cursor: default; }
.graficos-perfil .cobertura__parte[data-tip]:hover { filter: brightness(1.15); }
.peso__alvo { fill: transparent; }
.peso__grupo { cursor: default; }
.peso__grupo:hover .peso__ponto { stroke: var(--tinta); }