/*
 * ConsultaCNES — folha de estilo única do site.
 * Sem etapa de build: este arquivo é servido como está.
 * Tema claro e escuro pelas variáveis abaixo; o atributo data-theme fica em <html>.
 */

:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --sunken: #eaf0f6;
  --line: #d5dee8;
  --text: #0e1a2b;
  --muted: #4a5a6e;
  --accent: #0b69b7;
  --accent-soft: #e2f0fc;
  --btn: #0b69b7;
  --btn-text: #ffffff;
  --ok: #0f6b3c;
  --ok-soft: #dcf2e5;
  --off: #8a3b12;
  --off-soft: #fbeadf;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0a111d;
  --surface: #111a2a;
  --sunken: #0d1522;
  --line: #243349;
  --text: #e6edf6;
  --muted: #9fb0c5;
  --accent: #6cbcf7;
  --accent-soft: #12283d;
  --btn: #3fa4f0;
  --btn-text: #04111d;
  --ok: #62d49b;
  --ok-soft: #0f2e1e;
  --off: #f2b48c;
  --off-soft: #3a2113;
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}

[hidden] { display: none !important; }

a { color: var(--accent); }
a:hover { color: var(--text); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, p { margin: 0; }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.pular {
  position: absolute; left: 8px; top: -60px; z-index: 10;
  padding: 10px 14px; border-radius: 8px;
  background: var(--btn); color: var(--btn-text); text-decoration: none;
}
.pular:focus { top: 8px; color: var(--btn-text); }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- Cabeçalho ---------- */

.topo { background: var(--surface); border-bottom: 1px solid var(--line); }
.topo .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 12px; padding-bottom: 12px; }

.marca {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--text); font-size: 18px; font-weight: 700; text-decoration: none;
}
.marca:hover { color: var(--text); }
.marca img { display: block; width: auto; height: 32px; }

.menu { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.menu a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px;
  color: var(--text); font-weight: 500; text-decoration: none;
}
.menu a:hover { background: var(--sunken); }
.menu a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.busca-topo { display: flex; flex: 1 1 240px; max-width: 340px; margin: 0; }

.campo {
  width: 100%; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--sunken); color: var(--text);
  font: inherit; font-size: 15px;
}
.campo::placeholder { color: var(--muted); opacity: 1; }
.campo-p { min-height: 40px; padding: 0 12px; border-radius: 8px; width: 220px; max-width: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--sunken); color: var(--text); }
.btn-primario { border-color: transparent; background: var(--btn); color: var(--btn-text); }
.btn-primario:hover { background: var(--btn); color: var(--btn-text); filter: brightness(1.08); }
.btn-suave { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.btn-bloco { display: flex; width: 100%; min-height: 48px; }
/* Ícone de traço dentro de botão ou link: herda a cor do texto. */
.icone { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-tema { font-size: 14px; font-weight: 500; }

/* ---------- Página ---------- */

.pagina { flex: 1 0 auto; padding: 20px 0 56px; }
.pilha { display: flex; flex-direction: column; gap: 24px; }

.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.trilha li { display: flex; align-items: center; gap: 8px; }
.trilha li + li::before { content: "/"; }
.trilha [aria-current] { color: var(--text); }

.cabeca { display: flex; flex-direction: column; gap: 12px; }
.cabeca h1 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.resumo { max-width: 760px; font-size: 18px; color: var(--muted); text-wrap: pretty; }
.nota { font-size: 14px; color: var(--muted); }

/* ---------- Blocos ---------- */

.cartao { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; }
.cartao > h2, .secao > h2, .cartao-topo h2 { font-size: 19px; line-height: 1.3; font-weight: 600; }
.cartao > h2 { margin-bottom: 14px; }
.cartao-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.secao { display: flex; flex-direction: column; gap: 12px; }

.duas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.duas > .principal { flex: 999 1 560px; min-width: 0; }
.duas > .lateral { flex: 1 1 300px; min-width: 0; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.numero { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.rotulo { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.numero strong { font-family: var(--mono); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; }
.numero .texto { font-size: 18px; font-weight: 600; line-height: 1.55; }

.selo { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.selo-ativo { background: var(--ok-soft); color: var(--ok); }
.selo-inativo { background: var(--off-soft); color: var(--off); }

/* ---------- Tabelas e listas ---------- */

.rolagem { overflow-x: auto; }

.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th, .tabela td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tabela th:first-child, .tabela td:first-child { padding-left: 0; }
.tabela th:last-child, .tabela td:last-child { padding-right: 0; }
.tabela thead th { padding-top: 4px; padding-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--muted); vertical-align: middle; }
.tabela thead th.n { font-family: var(--sans); font-size: 13px; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela .n { text-align: right; font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.tabela a { font-weight: 600; text-decoration: none; }
.tabela a:hover { text-decoration: underline; }
.tabela .sub { display: block; font-size: 13px; color: var(--muted); }

.ordenar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0;
  border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.ordenar:hover, .ordenar[data-dir] { color: var(--accent); }
a.ordenar, .tabela th a.ordenar { color: var(--muted); font-weight: 600; text-decoration: none; }
a.ordenar:hover, a.ordenar[data-dir], .tabela th a.ordenar:hover, .tabela th a.ordenar[data-dir] { color: var(--accent); }

.alternar {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.alternar[data-dir] { border-color: transparent; background: var(--accent-soft); color: var(--accent); }

/* Filtro de situação (todos / ativos / desativados): links, um ativo por vez. */
.segmentos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.pilha > nav > .segmentos { margin-bottom: 0; }
.segmentos a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.segmentos a:hover { border-color: var(--accent); color: var(--accent); }
.segmentos a[aria-current] { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
.segmentos .n { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--muted); }
.segmentos a[aria-current] .n { color: var(--accent); }

.barra { height: 8px; min-width: 60px; border-radius: 4px; background: var(--sunken); }
.barra > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }

.linhas { margin: 0; padding: 0; list-style: none; }
.linhas li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.linhas li:last-child { border-bottom: 0; }
.linhas a { font-weight: 500; text-decoration: none; }
.linhas a:hover { text-decoration: underline; }
.linhas .n { font-family: var(--mono); font-size: 14px; color: var(--muted); white-space: nowrap; }

.linhas .com-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
.linhas .com-barra .barra { grid-column: 1 / -1; height: 6px; }

/* "Por tipo" como filtro: a linha inteira é o link. */
.tipos-filtro li { display: block; padding: 0; }
.tipos-filtro a.com-barra { padding: 10px 8px; margin: 0 -8px; border-radius: 8px; color: var(--text); font-weight: 400; }
.tipos-filtro a.com-barra:hover { background: var(--sunken); text-decoration: none; }
.tipos-filtro a.com-barra:hover > span:first-child { color: var(--accent); }
.tipos-filtro a[aria-current] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tipos-filtro a[aria-current] .n { color: var(--accent); }
.tipos-filtro a[aria-current]:hover { background: var(--accent-soft); }
.tipos-filtro .barra { display: block; }
#lista { scroll-margin-top: 16px; }

.colunas { margin: 0; padding: 0; list-style: none; column-width: 230px; column-gap: 36px; }
.colunas li { break-inside: avoid; border-bottom: 1px solid var(--line); }
.colunas a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; color: var(--text); font-size: 15px; text-decoration: none; }
.colunas a:hover { color: var(--accent); }
.colunas .n { font-family: var(--mono); font-size: 13px; color: var(--muted); }

.grade-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.grade-links a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); font-weight: 500; text-decoration: none;
}
.grade-links a:hover { border-color: var(--accent); color: var(--accent); }
.grade-links .n { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--muted); }

.pilulas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pilulas a {
  display: flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); font-weight: 500; text-decoration: none;
}
.pilulas a:hover { border-color: var(--accent); color: var(--accent); }
.pilulas .forte { color: var(--accent); font-weight: 600; }

.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px 32px; margin: 0; }
.dados div { display: flex; flex-direction: column; gap: 2px; }
.dados dt { font-size: 13px; color: var(--muted); }
.dados dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.paginacao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
.paginacao a, .paginacao span {
  display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 14px; text-decoration: none;
}
.paginacao a { background: var(--surface); color: var(--text); }
.paginacao a:hover { border-color: var(--accent); color: var(--accent); }
.paginacao [aria-current] { border-color: transparent; background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.paginacao .lacuna { border: 0; min-width: 20px; padding: 0; color: var(--muted); }

/* ---------- Home ---------- */

.pagina-cheia { padding-top: 0; }
.destaque { background: var(--surface); border-bottom: 1px solid var(--line); }
.destaque .wrap { display: flex; flex-direction: column; gap: 18px; padding-top: 56px; padding-bottom: 48px; }
.destaque h1 { font-size: clamp(36px, 6vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.destaque .resumo { max-width: 680px; font-size: 19px; }

.busca-grande { display: flex; flex-wrap: wrap; gap: 10px; max-width: 920px; margin: 6px 0 0; }
.busca-grande .campo { flex: 999 1 280px; min-width: 0; min-height: 60px; padding: 0 20px; border-width: 2px; border-radius: 14px; background: var(--bg); font-size: 18px; }
.busca-grande .btn { flex: 1 1 140px; min-height: 60px; border-radius: 14px; font-size: 18px; }

.busca-grande select.campo { flex: 1 1 190px; padding: 0 14px; font-size: 16px; }

.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.filtro { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.filtro label { font-size: 13px; font-weight: 600; color: var(--muted); }
.filtro .campo { background: var(--surface); }
.filtro-acoes { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; }
.filtro-acoes .nota { display: inline-flex; align-items: center; min-height: 44px; }

.exemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.exemplos button {
  min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer;
}
.exemplos button:hover { border-color: var(--accent); }

/* Buscas recentes (home): cada item é um link com um botão de remover ao lado. */
.recentes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.recentes ul { display: contents; margin: 0; padding: 0; list-style: none; }
.recentes li { display: inline-flex; align-items: stretch; min-height: 36px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden; }
.recentes li:hover { border-color: var(--accent); }
.recentes a { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 0 4px 0 14px; color: var(--accent); text-decoration: none; }
.recentes a > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recentes a .uf { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.recentes li button { width: 34px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.recentes li button:hover { background: var(--sunken); color: var(--text); }
.recentes-limpar { min-height: 36px; padding: 0 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.recentes-limpar:hover { color: var(--text); }

.home { display: flex; flex-direction: column; gap: 48px; padding-top: 40px; }
.home h2 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }

.itens { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px 32px; margin: 0; padding: 0; list-style: none; }
.itens li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); }
.itens strong { font-weight: 600; }
.itens span { font-size: 15px; color: var(--muted); }

.perguntas { display: flex; flex-direction: column; gap: 8px; max-width: 820px; }
.perguntas details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 20px; }
.perguntas summary { display: flex; align-items: center; min-height: 56px; font-weight: 600; cursor: pointer; }
.perguntas details p { margin: 0 0 18px; color: var(--muted); }

/* ---------- Ficha ---------- */

.ficha-topo { display: flex; flex-direction: column; gap: 14px; }
.ficha-topo .linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* O número CNES faz parte do título da ficha, numa linha própria abaixo do nome. */
.h1-cnes { display: block; margin-top: 8px; font-family: var(--mono); font-size: clamp(18px, 2.4vw, 22px); line-height: 1.2; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.btn-copiar { min-height: 40px; padding: 0 14px; border-radius: 8px; font-size: 14px; }
.cnes-caixa { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.cnes-caixa .valor { padding: 0 8px; font-family: var(--mono); font-size: 20px; font-weight: 500; }
.cnes-caixa .btn { min-height: 40px; min-width: 88px; padding: 0 14px; border-radius: 8px; font-size: 14px; }

.endereco { display: flex; flex-direction: column; gap: 2px; font-style: normal; }
.endereco strong { font-weight: 500; }

.horario { display: flex; flex-direction: column; gap: 4px; margin: 0 -10px; padding: 0; list-style: none; }
.horario li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; }
.horario .hoje { background: var(--accent-soft); font-weight: 600; }
.horario .n { font-family: var(--mono); font-size: 15px; text-align: right; }

.mapa { width: 100%; height: 300px; border: 0; border-radius: 10px; }

.aviso { padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--off-soft); color: var(--text); }

.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.grade-cartoes a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 56px; padding: 10px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  color: var(--text); font-weight: 600; text-decoration: none;
}
.grade-cartoes a:hover { border-color: var(--accent); color: var(--accent); }
.grade-cartoes .n { font-family: var(--mono); font-size: 14px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.grade-cartoes .sub { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }

.link-forte { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.links-linha { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 0; }

/* ---------- Gráficos ----------
 * Desenhados no servidor em HTML e SVG. As cores de série vêm de uma paleta
 * conferida para daltonismo e contraste nos dois temas; a ordem das séries
 * faz parte dessa conferência, então não troque uma cor isolada.
 * Texto nunca usa a cor da série: a identificação é a chave ao lado do rótulo.
 */

:root {
  --serie-0: #a3adba;
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  --nivel-1: #86b6ef;
  --nivel-2: #5598e7;
  --nivel-3: #2a78d6;
  --nivel-4: #1c5cab;
  --nivel-5: #104281;
  --grade: #e3e9f0;
  /* Texto dentro de cada nível: escuro ou branco, o que tiver mais contraste. */
  --tinta-1: #0e1a2b;
  --tinta-2: #0e1a2b;
  --tinta-3: #ffffff;
  --tinta-4: #ffffff;
  --tinta-5: #ffffff;
  /* Regiões no mosaico da home. Cada cor foi conferida contra as das regiões vizinhas. */
  --reg-norte: #eda100;        --reg-norte-tinta: #0e1a2b;
  --reg-nordeste: #2a78d6;     --reg-nordeste-tinta: #ffffff;
  --reg-centro-oeste: #e87ba4; --reg-centro-oeste-tinta: #0e1a2b;
  --reg-sudeste: #008300;      --reg-sudeste-tinta: #ffffff;
  --reg-sul: #4a3aa7;          --reg-sul-tinta: #ffffff;
}

[data-theme="dark"] {
  --tinta-1: #ffffff;
  --tinta-2: #ffffff;
  --tinta-3: #0e1a2b;
  --tinta-4: #0e1a2b;
  --tinta-5: #0e1a2b;
  --reg-norte: #c98500;        --reg-norte-tinta: #0e1a2b;
  --reg-nordeste: #3987e5;     --reg-nordeste-tinta: #0e1a2b;
  --reg-centro-oeste: #d55181; --reg-centro-oeste-tinta: #0e1a2b;
  --reg-sudeste: #008300;      --reg-sudeste-tinta: #ffffff;
  --reg-sul: #9085e9;          --reg-sul-tinta: #0e1a2b;
  --serie-0: #5b6a7f;
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
  --nivel-1: #184f95;
  --nivel-2: #256abf;
  --nivel-3: #3987e5;
  --nivel-4: #6da7ec;
  --nivel-5: #9ec5f4;
  --grade: #1c2a3e;
}

.serie-0 { background: var(--serie-0); fill: var(--serie-0); }
.serie-1 { background: var(--serie-1); fill: var(--serie-1); }
.serie-2 { background: var(--serie-2); fill: var(--serie-2); }
.serie-3 { background: var(--serie-3); fill: var(--serie-3); }
.serie-4 { background: var(--serie-4); fill: var(--serie-4); }
.nivel-1 { background: var(--nivel-1); fill: var(--nivel-1); }
.nivel-2 { background: var(--nivel-2); fill: var(--nivel-2); }
.nivel-3 { background: var(--nivel-3); fill: var(--nivel-3); }
.nivel-4 { background: var(--nivel-4); fill: var(--nivel-4); }
.nivel-5 { background: var(--nivel-5); fill: var(--nivel-5); }

.painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px; align-items: start; }
.painel > .larga { grid-column: 1 / -1; }

.grafico { margin: 0; min-width: 0; }
.grafico figcaption { margin-bottom: 16px; }
.grafico figcaption h3 { font-size: 17px; line-height: 1.3; font-weight: 600; }
.grafico figcaption p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.grafico > .nota { margin-top: 12px; }
.grafico + .grafico { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }

/* Barra dividida: 2px de respiro entre as partes, pontas arredondadas. */
.g-pilha { display: flex; gap: 2px; height: 20px; }
.g-pilha > span { flex: 1 1 0; min-width: 4px; }
.g-pilha > span:first-child { border-radius: 4px 0 0 4px; }
.g-pilha > span:last-child { border-radius: 0 4px 4px 0; }
.g-pilha > span:only-child { border-radius: 4px; }
.g-pilha-fina { height: 14px; align-self: center; }
.g-pilha > span:hover, .g-coluna:hover, .g-trilho:hover .g-barra { filter: brightness(1.12); }

.g-legenda { margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; }
.g-legenda li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 92px; align-items: center; gap: 4px 10px; padding: 5px 0; }
.g-legenda .n { font-family: var(--mono); font-size: 13px; text-align: right; }
.g-legenda .g-pct { color: var(--muted); }
.g-chave { width: 12px; height: 12px; border-radius: 3px; }
.g-chave-ponto { border-radius: 50%; }
.g-legenda-linha { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.g-legenda-linha li { display: inline-flex; gap: 7px; padding: 0; }
.g-legenda .n { white-space: nowrap; }

/* Gráfico com a legenda ao lado (mapa): empilha quando falta largura. */
.g-lado { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 32px; }
.g-lado > .g-lado-grafico { flex: 1 1 420px; max-width: 640px; min-width: 0; }
.g-lado > .g-lado-texto { flex: 1 1 220px; min-width: 0; }
.g-lado .g-legenda { margin-top: 0; }
.g-lado .g-legenda-linha { flex-direction: column; gap: 8px; }
.g-lado .nota { margin-top: 14px; }

/* Barras horizontais: no máximo 14px de espessura, valor na ponta. */
.g-barras { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 9px 12px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.g-barras li { display: contents; }
.g-barras .g-rotulo { min-width: 0; max-width: 220px; overflow-wrap: anywhere; }
.g-barras .g-rotulo a { font-weight: 500; text-decoration: none; }
.g-barras .g-rotulo a:hover { text-decoration: underline; }
.g-trilho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.g-barra { flex: 0 0 auto; min-width: 2px; height: 14px; border-radius: 0 4px 4px 0; }
.g-trilho .n { font-family: var(--mono); font-size: 13px; white-space: nowrap; }

/* Colunas por ano: escala à esquerda, linhas de grade finas, base sólida. */
.g-colunas { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 8px; }
.g-eixo { display: flex; flex-direction: column; justify-content: space-between; height: 180px; padding-top: 20px; font-family: var(--mono); font-size: 11px; line-height: 1; color: var(--muted); text-align: right; }
.g-eixo span { min-height: 11px; transform: translateY(-5px); }
.g-eixo span:last-child { transform: translateY(5px); }
.g-area { min-width: 0; }
.g-plano {
  display: flex; align-items: flex-end; gap: 2px; height: 180px; padding-top: 20px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(var(--grade), var(--grade)) 0 20px / 100% 1px no-repeat,
    linear-gradient(var(--grade), var(--grade)) 0 calc(20px + (100% - 20px) / 2) / 100% 1px no-repeat;
}
.g-vao { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; height: 100%; min-width: 0; }
.g-coluna { width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; }
.g-valor { position: absolute; left: 50%; transform: translate(-50%, -3px); font-family: var(--mono); font-size: 11px; line-height: 1; white-space: nowrap; }
.g-vao:first-child .g-valor { left: 0; transform: translate(0, -3px); }
.g-vao:last-child .g-valor { left: auto; right: 0; transform: translate(0, -3px); }
.g-anos { display: flex; gap: 2px; margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.g-anos span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }
.g-anos .g-ano-destaque { color: var(--text); font-weight: 600; }
.dados + .grafico { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }

/* Medidor: trilho num tom mais claro da mesma cor do preenchimento. */
.g-medidor { height: 12px; border-radius: 6px; background: var(--accent-soft); overflow: hidden; }
.g-medidor > span { display: block; height: 100%; border-radius: 6px 0 0 6px; background: var(--serie-1); }

/* Mapa de pontos e grade de densidade. */
.g-mapa { display: block; width: 100%; height: auto; }
.g-mapa .g-fundo { fill: var(--sunken); }
.g-mapa .g-alvo { fill: transparent; }
.g-mapa .g-ponto { stroke: var(--sunken); stroke-width: 2; }
.g-mapa g:hover .g-ponto { stroke: var(--text); }
.g-mapa rect[data-dica]:hover { stroke: var(--text); stroke-width: 1.5; }
.g-escala line { stroke: var(--text); stroke-width: 2; }
.g-escala text { fill: var(--text); font-family: var(--mono); font-size: 12px; paint-order: stroke; stroke: var(--sunken); stroke-width: 4px; stroke-linejoin: round; }

/* Mapa em mosaico (home): um quadrado por estado, 3px de respiro entre eles. */
.g-mosaico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; max-width: 330px; margin: 0; padding: 0; list-style: none; }
.g-mosaico a {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 6px;
  font-family: var(--mono); font-size: 13px; font-weight: 600; text-decoration: none;
}
.regiao-norte { background: var(--reg-norte); color: var(--reg-norte-tinta); }
.regiao-nordeste { background: var(--reg-nordeste); color: var(--reg-nordeste-tinta); }
.regiao-centro-oeste { background: var(--reg-centro-oeste); color: var(--reg-centro-oeste-tinta); }
.regiao-sudeste { background: var(--reg-sudeste); color: var(--reg-sudeste-tinta); }
.regiao-sul { background: var(--reg-sul); color: var(--reg-sul-tinta); }
.g-mosaico a:hover { filter: brightness(1.1); }
.g-legenda-regioes li { align-items: start; grid-template-columns: 12px minmax(0, 1fr) auto 44px; }
.g-legenda-regioes .g-chave { margin-top: 4px; }
.g-ufs { display: block; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--muted); }
.g-mosaico a:hover, .g-mosaico a:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.g-legenda-coluna li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
figure.cartao { padding: 22px 24px; }

/* Tabela de apoio de cada gráfico. */
.g-tabela { margin-top: 12px; font-size: 14px; }
.g-tabela summary { display: inline-flex; align-items: center; min-height: 32px; color: var(--muted); cursor: pointer; }
.g-tabela summary:hover { color: var(--text); }
.g-tabela .tabela { margin-top: 6px; }
.g-tabela .tabela th, .g-tabela .tabela td { padding-top: 6px; padding-bottom: 6px; }

/* Semana de atendimento na ficha: uma faixa de 24 horas por dia. */
.horario li.com-faixa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
.g-dia { position: relative; grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--sunken); }
.horario .hoje .g-dia { background: var(--surface); }
.g-dia > span { position: absolute; top: 0; bottom: 0; min-width: 2px; border-radius: 3px; background: var(--serie-1); }
.g-horas { display: flex; justify-content: space-between; margin: 6px 0 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* Dica que acompanha o ponteiro ou o foco (site.js). */
.dica {
  position: fixed; z-index: 50; max-width: 260px; padding: 6px 10px; border-radius: 8px;
  background: var(--text); color: var(--bg); font-size: 13px; line-height: 1.35;
  pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

/* ---------- Anúncios ----------
 * O espaço de cada bloco é reservado antes de o anúncio carregar, para o
 * conteúdo não pular. Bloco sem anúncio para mostrar some inteiro.
 */

.anuncio { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.anuncio-rotulo { font-size: 11px; line-height: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.anuncio ins.adsbygoogle, .anuncio-modelo { display: block; width: 100%; }

/* Faixa do topo: altura fixa (100 px no celular, 728 x 90 a partir de 800 px). */
.anuncio-topo { min-height: 120px; }
.anuncio-topo ins.adsbygoogle, .anuncio-topo .anuncio-modelo { height: 100px; }
@media (min-width: 800px) {
  .anuncio-topo { min-height: 110px; }
  .anuncio-topo ins.adsbygoogle, .anuncio-topo .anuncio-modelo { width: 728px; height: 90px; }
}

/* Bloco responsivo comum: o AdSense escolhe o tamanho; reserva a altura mais frequente. */
.anuncio-auto { min-height: 300px; }
.anuncio-auto .anuncio-modelo { height: 280px; }

ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.anuncio:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }

/* Fora de produção: caixa que só marca o lugar do anúncio. */
.anuncio-modelo {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--sunken);
  font-family: var(--mono); font-size: 13px; color: var(--muted);
}

/* ---------- Texto corrido (guia, fonte dos dados) ---------- */

.indice { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; }
.indice a { display: flex; align-items: center; min-height: 40px; font-weight: 500; text-decoration: none; }
.indice a:hover { text-decoration: underline; }

.artigo { max-width: 760px; padding: 32px clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 36px; font-size: 17px; line-height: 1.65; }
.artigo section { display: flex; flex-direction: column; gap: 12px; }
.artigo h2 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.artigo p { text-wrap: pretty; }
.artigo code { padding: 2px 6px; border-radius: 6px; background: var(--sunken); font-family: var(--mono); font-size: 0.94em; }
.artigo .tabela { font-size: 16px; line-height: 1.5; }
.artigo .tabela th[scope="row"] { font-weight: 600; }
.artigo .tabela td { color: var(--muted); }
.artigo ul { margin: 0; padding-left: 22px; }

.opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 12px; margin: 0; }
.opcoes div { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.opcoes dt { font-weight: 600; }
.opcoes dd { margin: 0; font-size: 15px; color: var(--muted); }

.busca-artigo { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; padding: 16px; border-radius: 12px; background: var(--sunken); }
.busca-artigo .campo { flex: 999 1 240px; min-width: 0; min-height: 52px; background: var(--surface); font-size: 16px; }
.busca-artigo .btn { flex: 1 1 120px; min-height: 52px; font-size: 16px; }

.passos { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.passos li { display: flex; gap: 14px; align-items: flex-start; counter-increment: passo; }
.passos li::before {
  content: counter(passo); flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: 15px; font-weight: 500;
}

.referencias { padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ---------- Rodapé ---------- */

.rodape { border-top: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--muted); }
.rodape .wrap { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; padding-bottom: 24px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.rodape nav a { display: inline-flex; align-items: center; min-height: 36px; color: var(--muted); }
.rodape nav a:hover { color: var(--text); }
.rodape p { max-width: 820px; }

/* ---------- Páginas antigas (sobre, contato, termos, privacidade, aviso legal) ----------
   Estas páginas ainda usam a marcação anterior (.section > .container > .content).
   As regras abaixo dão a elas a aparência nova sem alterar o texto. */

.pagina > header.section { display: block; }
.section .container, .hero .container { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 24px; }
.breadcrumb ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; }
.breadcrumb li:last-child a { color: var(--text); text-decoration: none; pointer-events: none; }
.content { font-size: 17px; line-height: 1.65; overflow-wrap: anywhere; }
.content h1 { margin: 0 0 16px; font-size: clamp(28px, 4vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; }
.content h2 { margin: 32px 0 10px; font-size: 22px; line-height: 1.25; font-weight: 600; }
.content h3 { margin: 22px 0 8px; font-size: 18px; font-weight: 600; }
.content p { margin: 0 0 14px; }
.content ul { margin: 0 0 14px; padding-left: 22px; }
.content li { margin: 4px 0; }
.content hr { margin: 20px 0; border: 0; border-top: 1px solid var(--line); }

/* ---------- Telas pequenas ---------- */

@media (max-width: 931px) {
  /* Na ficha, contato e horário vêm antes dos dados cadastrais quando as colunas empilham. */
  .ficha-corpo > .lateral { order: -1; }
}

@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .section .container, .hero .container { padding: 0 16px; }
  .cartao { padding: 18px 16px; }
  .busca-topo { max-width: none; }
  .campo-p { width: 100%; }
  .destaque .wrap { padding-top: 36px; padding-bottom: 32px; }
}

/* Em tela estreita o mapa encolhe pela metade: pontos e texto crescem para compensar. */
@media (max-width: 640px) {
  .g-mapa .g-ponto { r: 8px; stroke-width: 3; }
  .g-mapa .g-alvo { r: 22px; }
  .g-escala text { font-size: 20px; }
  .g-escala line { stroke-width: 3; }
}

@media (forced-colors: active) {
  .g-pilha > span, .g-barra, .g-coluna, .g-dia > span, .g-chave { forced-color-adjust: none; }
}

@media print {
  .topo, .rodape, .btn-tema, .busca-topo, .ferramentas, .paginacao, .anuncio { display: none; }
  body { background: #fff; color: #000; }
}