:root {
  /* Branco e oliva: fora do mapa, só verde-oliva, cinza, preto e branco. Fundo branco acinzentado com os cartões brancos,
     superfícies e bordas em cinza neutro, texto preto e o oliva na marca e nas ações. O mapa continua com a escala de cores dele (app.js).
     A paleta anterior (linho e musgo) está guardada em docs/paleta-anterior/. */
  --tinta: #111111;
  --grafite: #333333;
  --nardo: #8a8a8a;
  --cinza-claro: #e3e3e3;
  --branco-suave: #ffffff;
  --superficie: #ededed;
  /* Os nomes "verde" ficaram: agora são o oliva. "Sol" era o ocre dos detalhes e virou oliva e cinza. */
  --verde: #556b2f;
  --verde-vivo: #6b8239;
  --verde-escuro: #3f5022;
  --verde-claro: #ececec;
  --sol: #556b2f;
  --sol-escuro: #3f5022;
  --sol-claro: #ededed;
  --texto: var(--tinta);
  --texto-suave: #5e5e5e;
  --fundo: #f6f6f6;
  --cartao: #ffffff;
  --borda: #e3e3e3;
  --elevado: #ffffff;
  --hover: #e6e6e6;
  --placeholder: #8a8a8a;
  --icone-apagado: #b5b5b5;
  --sobre-verde: #ffffff;
  --verde-claro-hover: #e2e2e2;
  --verde-claro-borda: #d6d6d6;
  --sem-dado-fundo: #efefef;
  --vidro: rgba(255, 255, 255, 0.95);
  --borda-vidro: rgba(227, 227, 227, 0.9);
  --sombra-rgb: 17, 17, 17;
  /* Cartão de destaque (ex.: "o que é o Mapin" no Meu Mapin): oliva escuro, texto branco. */
  --cartao-verde: #3f5022;
  --sobre-cartao-verde: #ffffff;
  --sobre-cartao-verde-suave: #e2e6d8;
  --mancha: #e2e2e2;
  /* Mapa do Sul e Sudeste da página inicial: terra e mar. */
  --regiao-terra: var(--mancha);
  --regiao-vizinho: #f0f0f0;
  --regiao-raso: #ececec;
  --regiao-mar: var(--cartao);
  /* Rótulos das notas fora do mapa: preto = atenção, cinza = regular, oliva = bom. Ponto/barra usa a cor cheia;
     o rótulo ("Regular"...) vai numa etiqueta de fundo claro com o texto escuro (≥ 4,5:1). */
  --ruim: #111111;
  --ruim-fundo: #e3e3e3;
  --medio: #8a8a8a;
  --medio-texto: #4a4a4a;
  --medio-fundo: #f0f0f0;
  --bom: var(--verde);
  --bom-fundo: #ececec;
  --foco: var(--verde);

  /* Os ícones dos temas são todos oliva sobre cinza (antes, uma cor por tema). */
  --tema-saude: var(--verde);      --tema-saude-fundo: var(--superficie);
  --tema-educacao: var(--verde);   --tema-educacao-fundo: var(--superficie);
  --tema-infra: var(--verde);      --tema-infra-fundo: var(--superficie);
  --tema-seguranca: var(--verde);  --tema-seguranca-fundo: var(--superficie);
  --tema-ambiente: var(--verde);   --tema-ambiente-fundo: var(--superficie);
  --tema-renda: var(--verde);      --tema-renda-fundo: var(--superficie);

  /* Topo e botão principal: no claro, o topo é da cor da página e a ação é oliva; o noturno os deixa pretos. */
  --topo-fundo: var(--fundo);
  --topo-texto: var(--texto);
  --topo-suave: var(--texto-suave);
  --topo-borda: var(--borda);
  --topo-borda-forte: #c7c7c7;
  --topo-hover: var(--hover);
  --topo-marca: var(--verde);
  --topo-controle: var(--superficie);
  --acao: var(--verde);
  --acao-forte: var(--verde-escuro);
  --sobre-acao: #ffffff;

  /* Fraunces nos títulos (serifa de traço macio), Figtree no texto. */
  --fonte-titulo: "Fraunces", Georgia, serif;
  /* Cantos assimétricos, como seixos: ícones, números dos passos e a nota geral. */
  --forma-seixo: 42% 58% 46% 54% / 52% 44% 56% 48%;
  --raio: 22px;
  --raio-pequeno: 12px;
  --sombra: 0 1px 2px rgba(var(--sombra-rgb), 0.05), 0 6px 20px rgba(var(--sombra-rgb), 0.08);
  --sombra-leve: 0 1px 2px rgba(var(--sombra-rgb), 0.05), 0 2px 8px rgba(var(--sombra-rgb), 0.05);
  --altura-topo: 68px;
  /* Largura do conteúdo das páginas (topo, página inicial, busca, imóveis, fontes, relatório): centralizado, com folga. */
  --largura-pagina: min(1440px, 100% - 64px);
  --largura-lateral: 440px;
}

/* Modo noturno: tema.js põe data-tema="escuro" no <html> (pela escolha salva ou pelo tema do sistema).
   É o preto e oliva: a página continua branca e cinza, e o topo, os botões principais e os filtros ativos ficam
   pretos. O oliva claro marca o logo e o menu no topo preto. */
:root[data-tema="escuro"] {
  --topo-fundo: #111111;
  --topo-texto: #f5f5f5;
  --topo-suave: #b5b5b5;
  --topo-borda: #111111;
  --topo-borda-forte: #4a4a4a;
  --topo-hover: rgba(255, 255, 255, 0.1);
  --topo-marca: #aebd7c;
  --topo-controle: #262626;
  --acao: #111111;
  --acao-forte: #333333;
  --sobre-acao: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  height: 100vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -0.01em; }
button { font: inherit; color: inherit; }

.icone {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Troca de página ---------- */
/* Entre as páginas do site (index, fontes, relatório, Meu Mapin) e entre as páginas por cima do mapa (app.js): o topo
   fica parado e o conteúdo troca numa vez só, a página velha sai rápido e a nova entra subindo de leve (sem as duas
   transparentes uma sobre a outra). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 90ms ease-in both mapin-sai; }
::view-transition-new(root) { animation: 230ms cubic-bezier(.2, .7, .3, 1) 80ms both mapin-entra; }
::view-transition-group(topo), ::view-transition-old(topo), ::view-transition-new(topo) { animation-duration: .2s; }
@keyframes mapin-sai { to { opacity: 0; } }
@keyframes mapin-entra { from { opacity: 0; transform: translateY(10px); } }
/* O topo da página à mostra tem o nome "topo" (fica fora da fusão do conteúdo). O nome só pode estar num elemento
   desenhado por vez: os topos das páginas escondidas não contam, e o do mapa, que fica por baixo das outras, só vale
   com todas elas fechadas (ou quando o endereço abre o mapa: pagina-inicial.js). */
body.pagina > .inicio-topo,
.inicio > .inicio-topo, .busca-pagina > .inicio-topo, .imoveis-pagina > .inicio-topo,
.inicio[hidden] ~ .busca-pagina[hidden] ~ .imoveis-pagina[hidden] ~ .topo-mapa > .inicio-topo,
[data-pagina-inicial="mapa"] .topo-mapa > .inicio-topo { view-transition-name: topo; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Topo ---------- */
.topo {
  display: grid;
  /* A coluna da marca e da cidade não encolhe: o nome da cidade (Florianópolis, Belo Horizonte) aparece inteiro. */
  grid-template-columns: minmax(max-content, 1fr) minmax(260px, 560px) 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--topo-fundo);
  color: var(--topo-texto);
  border-bottom: 1px solid var(--topo-borda);
  position: relative; z-index: 10;
}
.marca {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none; justify-self: start;
}
.marca-logo { width: auto; height: 34px; flex: none; display: block; }
.marca-nome { font-family: var(--fonte-titulo); font-size: 25px; font-weight: 600; letter-spacing: -0.01em; color: var(--topo-texto); }
.marca-cidade {
  font-size: 13px; font-weight: 700; color: var(--sol-escuro);
  padding: 2px 10px; border-radius: 999px; background: var(--sol-claro);
}

.inicio-cidade:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.rotulo-curto { display: none; }
.cidade-uf { font-size: 12px; font-weight: 700; color: var(--verde); }
.cidade-seta { transition: transform .15s; }
[aria-expanded="true"] > .cidade-seta { transform: rotate(180deg); }

.busca {
  position: relative;
  display: flex;
  height: 44px;
  padding: 4px;
  background: var(--superficie);
  border: 2px solid transparent;
  border-radius: 999px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.busca:hover { background: var(--hover); }
.busca:focus-within { border-color: var(--verde); background: var(--elevado); box-shadow: 0 0 0 4px var(--verde-claro); }
.busca-icone {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  fill: none; stroke: var(--texto-suave); stroke-width: 2.2; stroke-linecap: round;
  pointer-events: none;
}
.busca input {
  flex: 1; min-width: 0;
  padding: 0 12px 0 38px;
  border: none; outline: none;
  background: transparent;
  color: var(--texto);
  font: inherit; font-size: 15px; font-weight: 600;
}
.busca input::placeholder { color: var(--placeholder); font-weight: 500; }
.busca button {
  padding: 0 20px;
  border: none;
  border-radius: 999px;
  background: var(--acao);
  color: var(--sobre-acao);
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.busca button:hover { background: var(--acao-forte); }
.busca button:active { transform: scale(.97); }
.busca button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }

/* Lista suspensa da busca: cartão claro logo abaixo do campo. */
.sugestoes {
  position: absolute; top: calc(100% + 8px); left: -2px; right: -2px; z-index: 20;
  margin: 0; padding: 6px; list-style: none;
  max-height: min(420px, 60vh); overflow-y: auto;
  background: var(--elevado);
  border: 1px solid var(--borda);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(var(--sombra-rgb), 0.16);
}
.sugestoes[hidden] { display: none; }
.sugestao {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 14px;
  cursor: pointer;
}
.sugestao[aria-selected="true"] { background: var(--verde-claro); }
.sugestao-icone {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 12px;
  background: var(--superficie); color: var(--verde);
}
.sugestao[aria-selected="true"] .sugestao-icone { background: var(--elevado); }
.sugestao-icone .icone { width: 17px; height: 17px; stroke-width: 2.2; }
.sugestao-texto { display: flex; flex-direction: column; min-width: 0; }
.sugestao-rotulo { color: var(--texto); font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugestao-detalhe { color: var(--texto-suave); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugestao-dica { padding: 10px 12px; color: var(--texto-suave); font-size: 14px; }

.topo-acoes { justify-self: end; display: flex; align-items: center; gap: 8px; }
/* Menu do topo: link para o relatório em PDF (no celular, só o ícone) */
.topo-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--verde); color: var(--sobre-verde);
  font-size: 13px; font-weight: 800; white-space: nowrap; text-decoration: none;
  transition: background .15s;
}
.topo-link:hover { background: var(--verde-escuro); }
.topo-link:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.topo-link .icone { width: 15px; height: 15px; }
.botao-tema {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: var(--topo-controle); color: var(--topo-texto);
  cursor: pointer;
  transition: background .15s;
}
.botao-tema:hover { background: var(--topo-hover); }
.botao-tema:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.botao-tema .icone { width: 18px; height: 18px; }
.botao-tema .sol, [data-tema="escuro"] .botao-tema .lua { display: none; }
[data-tema="escuro"] .botao-tema .sol { display: block; color: var(--topo-marca); }

.selo-dados {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--superficie);
  font-size: 13px; font-weight: 700; color: var(--texto-suave);
  white-space: nowrap;
  cursor: help;
}
.selo-dados .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--nardo); box-shadow: 0 0 0 3px rgba(138,138,138,.2); }
.selo-dados.com-dados { background: var(--verde-claro); color: var(--verde-escuro); }
.selo-dados.com-dados .ponto { background: var(--verde); box-shadow: 0 0 0 3px rgba(85,107,47,.22); }

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--largura-lateral);
  min-height: 0;
}
.mapa-area { position: relative; min-height: 0; }
#mapa { position: absolute; inset: 0; background: var(--cinza-claro); }

.lateral {
  overflow-y: auto;
  scroll-behavior: smooth;
  background: var(--cartao);
  border-left: 1px solid var(--borda);
}

/* ---------- Painéis sobre o mapa ---------- */
.painel-mapa, .controle-mapas {
  background: var(--vidro);
  border: 1px solid var(--borda-vidro);
  border-radius: 20px;
  box-shadow: var(--sombra);
  backdrop-filter: blur(6px);
}
.painel-mapa {
  position: absolute;
  left: 16px; top: 16px;
  z-index: 5;
  width: 272px;
  padding: 16px;
  font-size: 14px;
}
.painel-titulo, .controle-titulo {
  display: block;
  font-size: 14px; font-weight: 800;
  color: var(--texto);
  margin: 0 0 8px;
}
.painel-mapa select {
  width: 100%;
  height: 40px;
  padding: 0 34px 0 14px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e8a5a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  color: var(--texto);
  font: inherit; font-weight: 700;
  appearance: none;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.painel-mapa select:hover { background-color: var(--hover); }
.painel-mapa select:focus-visible { outline: none; border-color: var(--foco); background-color: var(--elevado); }
.legenda { margin-top: 14px; }
/* Escala contínua: a barra é um degradê com as cores dos bairros; o traço marca a média da cidade. */
.legenda-barra { position: relative; height: 12px; border-radius: 999px; }
.legenda-media {
  position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px;
  border-radius: 2px; background: var(--tinta); box-shadow: 0 0 0 2px var(--elevado);
}
.legenda-rotulos { display: flex; justify-content: space-between; gap: 8px; color: var(--texto-suave); font-size: 13px; margin-top: 6px; }
.legenda-rotulos strong { color: var(--texto); font-weight: 800; font-variant-numeric: tabular-nums; }
.legenda-nota { display: flex; align-items: center; gap: 6px; color: var(--texto-suave); font-size: 13px; margin-top: 4px; }
.legenda-media-amostra { width: 3px; height: 12px; border-radius: 2px; background: var(--tinta); }
.legenda-sem-dado { display: flex; align-items: center; gap: 6px; color: var(--texto-suave); font-size: 13px; margin-top: 6px; }
.legenda-sem-dado span {
  width: 16px; height: 10px; border-radius: 3px; border: 1px solid var(--borda);
  background: repeating-linear-gradient(-45deg, #96999b 0 1.5px, var(--sem-dado-fundo) 1.5px 4px);
}
.legenda-dica {
  color: var(--texto-suave); font-size: 13px; margin-top: 12px; padding: 10px 12px; line-height: 1.45;
  border-radius: 12px; background: var(--superficie);
}

/* ---------- Painel lateral: elementos comuns ---------- */
.sobretitulo {
  display: inline-block;
  margin: 0 0 10px; padding: 3px 12px;
  border-radius: 999px; background: var(--verde-claro);
  font-size: 13px; font-weight: 800;
  color: var(--verde-escuro);
}
.rotulo-secao {
  margin: 0 0 10px;
  font-size: 16px; font-weight: 800;
  color: var(--texto);
}
.texto { margin: 0 0 10px; color: var(--texto-suave); line-height: 1.55; }

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--superficie);
  font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.selo i { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- Boas-vindas ---------- */
.intro {
  position: relative; overflow: hidden;
  margin: 16px 16px 0; padding: 24px 22px 24px;
  border-radius: 28px;
  background: var(--cartao-verde);
  color: var(--sobre-cartao-verde);
}
/* Seixo de sol no canto: só decoração. */
.intro::after {
  content: ""; position: absolute; right: -34px; top: -38px;
  width: 124px; height: 112px; border-radius: var(--forma-seixo);
  background: var(--sol);
}
.intro > * { position: relative; z-index: 1; }
.intro .sobretitulo { background: rgba(255, 255, 255, .14); color: var(--sobre-cartao-verde); }
.intro h2 { font-family: var(--fonte-titulo); font-size: 28px; line-height: 1.15; margin: 0 0 10px; font-weight: 600; letter-spacing: -0.015em; max-width: 300px; }
.intro p:last-child { margin: 0; color: var(--sobre-cartao-verde-suave); line-height: 1.55; }
.intro .aviso-dados { background: var(--superficie); color: var(--grafite); }

.passos {
  list-style: none; margin: 16px 16px 0; padding: 0;
  display: grid; gap: 8px;
}
.passos li {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 14px;
  border-radius: var(--raio);
  background: var(--superficie);
}
.passos .num {
  flex: none; width: 34px; height: 34px; border-radius: var(--forma-seixo);
  background: var(--sol); color: var(--sobre-verde);
  display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-size: 17px; font-weight: 600;
}
.passos strong { display: block; font-weight: 800; }
.passos span:not(.num) { color: var(--texto-suave); }

.secao { padding: 24px 16px 0; }
.secao:last-child { padding-bottom: 28px; }
.secao > .rotulo-secao { padding: 0 6px; }
.atalhos {
  list-style: none; margin: 0; padding: 4px;
  border: 1px solid var(--borda); border-radius: 20px;
  background: var(--elevado); overflow: hidden;
  box-shadow: var(--sombra-leve);
}
.atalhos li + li { margin-top: 2px; }
.atalho {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px;
  border: none; border-radius: 14px; background: none; text-align: left;
  cursor: pointer;
  transition: background .12s;
}
a.atalho { color: inherit; text-decoration: none; }
.atalho:hover { background: var(--branco-suave); }
.atalho:hover > .icone:last-child { color: var(--verde); transform: translateX(2px); }
.atalho:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.atalho-texto { flex: 1; min-width: 0; }
.atalho-texto strong { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atalho-texto small { color: var(--texto-suave); font-size: 13px; }
.atalho-icone {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 12px;
  background: var(--verde-claro); color: var(--verde);
}
.atalho > .icone:last-child { width: 16px; height: 16px; color: var(--icone-apagado); transition: transform .15s, color .15s; }

/* ---------- Bairro ---------- */
.painel-barra {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  min-height: 55px;
  padding: 10px 20px;
  background: var(--vidro);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borda);
}
.voltar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 10px; margin-left: -6px;
  border: none; border-radius: 999px; background: var(--superficie);
  color: var(--texto); font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: background .12s;
}
.voltar .icone { width: 16px; height: 16px; }
.voltar:hover { background: var(--verde-claro); color: var(--verde-escuro); }
.voltar:focus-visible { outline: 2px solid var(--foco); }

.bairro-cabecalho { padding: 24px 28px 20px; }
.bairro-cabecalho h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.bairro-cabecalho .meta { margin: 6px 0 0; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.resumo-frase { margin: 14px 0 0; line-height: 1.6; color: var(--texto); }

.resumo {
  display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center;
  margin: 0 20px 12px;
  padding: 18px 20px;
  border: 1px solid var(--borda); border-radius: 28px;
  background: var(--elevado);
  box-shadow: var(--sombra-leve);
}
.nota-geral { display: flex; flex-direction: column; gap: 2px; padding-right: 20px; border-right: 1px solid var(--borda); }
.nota-rotulo { font-size: 14px; font-weight: 800; color: var(--texto-suave); white-space: nowrap; }
.nota-valor { font-family: var(--fonte-titulo); font-size: 46px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.nota-valor small { font-size: 16px; font-weight: 700; color: var(--texto-suave); letter-spacing: 0; margin-left: 2px; }
.nota-status { align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 800; color: var(--texto-suave); }
.nota-status.bom { color: var(--verde-escuro); background: var(--bom-fundo); }
.nota-status.medio { color: var(--medio-texto); background: var(--medio-fundo); }
.nota-status.ruim { color: var(--ruim); background: var(--ruim-fundo); }
.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.barras li { display: grid; grid-template-columns: 96px 1fr 30px; align-items: center; gap: 10px; }
.barras li > span:first-child { color: var(--texto-suave); font-weight: 600; white-space: nowrap; }
.barra { position: relative; height: 8px; border-radius: 999px; background: var(--cinza-claro); }
.barra i { display: block; height: 100%; border-radius: 999px; }
.barras strong { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- Blocos de tema ---------- */
.bloco { padding: 18px 28px; border-top: 1px solid var(--borda); }
.resumo + .bloco { border-top: none; }
.bloco-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bloco-topo h3 { margin: 0; flex: 1; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600; transition: color .12s; }
.bloco-icone {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: var(--forma-seixo);
  background: var(--superficie); color: var(--grafite);
}
.bloco-icone .icone { width: 19px; height: 19px; stroke-width: 2.1; }
.bloco[data-bloco="Saúde"] .bloco-icone { background: var(--tema-saude-fundo); color: var(--tema-saude); }
.bloco[data-bloco="Educação"] .bloco-icone { background: var(--tema-educacao-fundo); color: var(--tema-educacao); }
.bloco[data-bloco="Infraestrutura"] .bloco-icone { background: var(--tema-infra-fundo); color: var(--tema-infra); }
.bloco[data-bloco="Segurança"] .bloco-icone { background: var(--tema-seguranca-fundo); color: var(--tema-seguranca); }
.bloco[data-bloco="Meio ambiente e terreno"] .bloco-icone { background: var(--tema-ambiente-fundo); color: var(--tema-ambiente); }
.bloco[data-bloco="Renda e população"] .bloco-icone { background: var(--tema-renda-fundo); color: var(--tema-renda); }

/* Blocos recolhíveis: começam fechados, o topo inteiro abre e fecha */
.recolhivel > summary { cursor: pointer; list-style: none; user-select: none; }
.recolhivel > summary::-webkit-details-marker { display: none; }
.recolhivel > summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 4px; border-radius: 12px; }
.recolhivel:not([open]) > summary { margin-bottom: 0; }
.recolhivel > summary:hover h3 { color: var(--verde); }
.bloco-seta {
  flex: none; width: 9px; height: 9px; margin: 0 6px 3px 2px;
  border-right: 2.5px solid var(--texto-suave); border-bottom: 2.5px solid var(--texto-suave);
  border-radius: 1px;
  transform: rotate(45deg); transition: transform .2s;
}
.recolhivel[open] > summary .bloco-seta { transform: translateY(3px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .bloco-seta { transition: none; } }
.destaque-ponto {
  margin: 4px 16px 8px; padding: 18px 16px;
  border-top: none; border-radius: 22px;
  background: var(--verde-claro);
}
.destaque-ponto + .bloco { border-top: none; }
.destaque-ponto .bloco-icone { background: var(--verde); color: var(--sobre-verde); }
.destaque-ponto .linha { border-color: var(--verde-claro-borda); }

.linha {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--borda);
}
.bloco-topo + .linha { border-top: none; }
.linha-rotulo { color: var(--texto-suave); }
.linha-valor { text-align: right; }
.linha-valor strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.comparacao { display: block; font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.comparacao.acima { color: var(--bom); }
.comparacao.abaixo { color: var(--ruim); }

.lista-locais { margin: -4px 0 8px; padding: 0 0 0 16px; font-size: 14px; color: var(--texto-suave); }
.lista-locais li { margin: 2px 0; }
.lista-locais li::marker { color: var(--verde); }

details.explica { margin-top: 10px; font-size: 14px; }
details.explica summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px 4px 6px; border-radius: 999px;
  background: var(--verde-claro);
  color: var(--verde-escuro); font-weight: 800; cursor: pointer; list-style: none;
  transition: background .12s;
}
details.explica summary:hover { background: var(--verde-claro-hover); }
details.explica summary::-webkit-details-marker { display: none; }
details.explica summary::before {
  content: "?"; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--verde); color: var(--sobre-verde); font-size: 12px; font-weight: 800;
}
details.explica[open] summary::before { content: "−"; }
details.explica summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
details.explica p { margin: 10px 0 0; line-height: 1.6; color: var(--texto-suave); }
.fonte { padding: 10px 12px; border-radius: 12px; background: var(--superficie); font-size: 13px; }
.fonte span { display: block; font-weight: 800; color: var(--texto); margin-bottom: 2px; }

/* ---------- Mapa ---------- */
/* Tooltip do bairro sob o mouse: posicionado com transform (GPU), sem relayout a cada movimento. */
.dica-mapa {
  position: absolute; top: 0; left: 0; z-index: 650;
  pointer-events: none;
  background: var(--elevado); color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: 14px; padding: 8px 12px;
  font-size: 13px; line-height: 1.45; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(var(--sombra-rgb), 0.18);
  opacity: 0; transition: opacity .12s;
  will-change: transform;
}
.dica-mapa strong { font-size: 14px; font-weight: 800; }
.dica-mapa b { font-weight: 800; }
.dica-mapa.visivel { opacity: 1; }

/* O canvas do mapa recebe foco ao ser clicado e o navegador desenhava o contorno de foco (uma linha
   na borda). Mostramos o contorno só para quem navega pelo teclado, onde ele é útil. */
#mapa canvas:focus, #mapa canvas:focus-visible { outline: none; }
body.teclado #mapa canvas:focus { outline: 3px solid var(--foco); outline-offset: -3px; }
@media (hover: none) { .dica-mapa { display: none; } }

.icone-local {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 2.5px solid #fff; border-radius: 50%;
  background: #3a5690; color: #fff;
  box-shadow: 0 2px 6px rgba(var(--sombra-rgb), .3);
  cursor: pointer;
  transition: box-shadow .12s;
}
/* Nada de transform/transition de transform aqui: o MapLibre posiciona o marcador pelo transform a cada
   quadro, e qualquer um dos dois faz o marcador atrasar ou pular ao arrastar o mapa. */
.icone-local:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 2px 8px rgba(var(--sombra-rgb), .35); }
.icone-local .icone { width: 13px; height: 13px; stroke-width: 2.6; }
.icone-local.tipo-hospital, .icone-local.tipo-ubs, .icone-local.tipo-upa { background: #a8412f; }
.icone-local.tipo-upa { background: #7e2e20; }
.icone-pino svg { display: block; width: 32px; height: 40px; filter: drop-shadow(0 3px 4px rgba(var(--sombra-rgb),.35)); }
.icone-pino path { fill: var(--verde); stroke: #fff; stroke-width: 2; }
.icone-pino circle { fill: #fff; }

.maplibregl-map { font-family: "Figtree", sans-serif; }
.maplibregl-popup-content { border-radius: 14px; padding: 8px 14px; font-size: 14px; font-weight: 600; box-shadow: var(--sombra); }
.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 16px 16px 0 0; }
.maplibregl-ctrl-top-right .maplibregl-ctrl + .maplibregl-ctrl { margin-top: 8px; }
.maplibregl-ctrl-group { border-radius: 14px !important; overflow: hidden; box-shadow: var(--sombra) !important; border: 1px solid var(--borda); }
.maplibregl-ctrl-group button { width: 34px; height: 34px; }
.maplibregl-ctrl-attrib { font-size: 11px; }
.sem-webgl { padding: 24px; text-align: center; color: var(--texto-suave); }

/* ---------- Controles do mapa ---------- */
.controle-mapas { padding: 14px; width: 216px; font-size: 14px; }
.controle-alternar {
  display: flex; align-items: center; width: 100%;
  padding: 0 0 10px; border: none; background: none;
  font-size: 14px; font-weight: 800;
  color: var(--texto); cursor: pointer; text-align: left;
}
.controle-alternar::after {
  content: ""; margin-left: auto; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s;
}
.controle-alternar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.controle-mapas.fechado { width: auto; padding: 10px 14px; }
.controle-mapas.fechado .controle-alternar { padding: 0; gap: 12px; }
.controle-mapas.fechado .controle-alternar::after { transform: rotate(-45deg); }
.controle-mapas.fechado .controle-corpo { display: none; }
.bases {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px;
  padding: 3px; margin-bottom: 14px;
  background: var(--superficie); border-radius: 14px;
}
.bases button {
  padding: 7px 4px;
  border: none; border-radius: 11px;
  background: transparent;
  font-size: 13px; font-weight: 700; color: var(--texto-suave);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bases button:hover { color: var(--texto); }
.bases button[aria-pressed="true"] { background: var(--elevado); color: var(--verde-escuro); font-weight: 800; box-shadow: 0 1px 3px rgba(var(--sombra-rgb),.12); }
.bases button:focus-visible, .controle-cidade:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.controle-mapas input[type="range"] { width: 100%; accent-color: var(--verde); margin: 0; }

.maplibregl-ctrl-group button.controle-cidade { display: grid; place-items: center; color: var(--texto); }
.maplibregl-ctrl-group button.controle-cidade .icone { width: 15px; height: 15px; }
.maplibregl-ctrl-group button.controle-cidade:hover { background: var(--branco-suave); }

/* ---------- Transição do painel lateral ---------- */
.lateral.entrando > * { animation: entrar .3s cubic-bezier(.2, .8, .3, 1.1) both; }
.lateral.entrando > *:nth-child(2) { animation-delay: .04s; }
.lateral.entrando > *:nth-child(3) { animation-delay: .08s; }
.lateral.entrando > *:nth-child(n+4) { animation-delay: .12s; }
@keyframes entrar {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lateral.entrando > * { animation: none; }
}

/* ---------- Página inicial ---------- */
/* Cobre o mapa (que carrega por baixo) e rola sozinha; com ela aberta, a página de trás não rola. */
.com-inicio, .com-inicio body { overflow: hidden; }
.inicio {
  position: fixed; inset: 0; z-index: 100;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--fundo);
  display: flex; flex-direction: column;
}
.inicio[hidden] { display: none; }
/* Antes de o app.js abrir a página do endereço (pagina-inicial.js): a inicial não pisca por cima do mapa, da busca ou dos imóveis. */
[data-pagina-inicial] .inicio { display: none; }
[data-pagina-inicial="busca"] #busca-pagina[hidden], [data-pagina-inicial="imoveis"] #imoveis-pagina[hidden] { display: block !important; }
.inicio > main { flex: 1; }
.inicio-topo, .inicio-hero, .inicio-secao, .inicio-rodape { width: var(--largura-pagina); margin-inline: auto; }

.inicio-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; color: var(--topo-texto); }
/* No noturno o topo é preto de ponta a ponta: a faixa passa da largura da página sem mexer no layout. */
:root[data-tema="escuro"] .inicio-topo { border-image: conic-gradient(var(--topo-fundo) 0 0) fill 0 / / 0 100vmax; }
.inicio-nav { display: flex; align-items: center; gap: 6px; }
.inicio-nav a {
  padding: 8px 14px; border-radius: 999px;
  color: var(--topo-suave); font-size: 14px; font-weight: 700; text-decoration: none;
  transition: background .15s, color .15s;
}
.inicio-nav a:hover { background: var(--topo-hover); color: var(--topo-texto); }
.inicio a:focus-visible, .inicio button:focus-visible, .inicio-topo a:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.inicio-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: 56px;
  padding: 40px 0 72px;
}
.inicio-hero h1 {
  margin: 4px 0 18px;
  font-family: var(--fonte-titulo);
  font-size: clamp(38px, 5vw, 66px); line-height: 1.02; font-weight: 600; letter-spacing: -0.025em;
}
.inicio-hero h1 span { color: var(--verde); font-style: italic; font-weight: 500; }
.inicio-lead { margin: 0; max-width: 580px; font-size: 18px; line-height: 1.6; color: var(--texto-suave); }
.inicio-pergunta { margin: 36px 0 12px; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 500; }

/* O mesmo formulário do topo, maior. */
.inicio-busca { max-width: 640px; }
.inicio .busca {
  height: 62px; padding: 6px;
  background: var(--cartao); border-color: var(--borda);
  box-shadow: var(--sombra);
}
.inicio .busca:hover { background: var(--cartao); border-color: var(--icone-apagado); }
.inicio .busca:focus-within { border-color: var(--verde); box-shadow: 0 0 0 5px var(--verde-claro), var(--sombra); }
.inicio .busca-icone { left: 20px; width: 20px; height: 20px; }
.inicio .busca input { padding-left: 46px; font-size: 17px; }
.inicio .busca button { padding: 0 28px; font-size: 16px; }

.inicio-exemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 14px; }
.inicio-exemplos span { color: var(--texto-suave); font-weight: 600; }
.inicio-exemplos button {
  padding: 5px 12px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--cartao); color: var(--texto); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.inicio-exemplos button:hover { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro); }
.inicio-ver-mapa {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 22px;
  color: var(--verde); font-weight: 800; text-decoration: none;
}
.inicio-ver-mapa:hover { text-decoration: underline; text-underline-offset: 3px; }
.inicio-ver-mapa .icone { transition: transform .15s; }
.inicio-ver-mapa:hover .icone { transform: translateX(3px); }

/* Silhueta dos bairros sobre uma mancha de terra, com um seixo de sol no canto. */
.inicio-silhueta { position: relative; display: block; padding: 8%; }
.inicio-silhueta::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  background: var(--mancha);
}
.inicio-silhueta::after {
  content: ""; position: absolute; right: 2%; top: 4%;
  width: 22%; aspect-ratio: 1.1; border-radius: var(--forma-seixo);
  background: var(--sol);
}
.inicio-silhueta svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: 560px; overflow: visible; }
/* Cor misturada com a mancha (e não transparência): assim o que está atrás não suja o verde. --tom vem do app.js. */
.inicio-silhueta path {
  fill: color-mix(in srgb, var(--verde) var(--tom), var(--mancha));
  stroke: var(--mancha); stroke-width: 3; stroke-linejoin: round;
}
.inicio-silhueta path.sol { fill: color-mix(in srgb, var(--sol) var(--tom), var(--mancha)); }
.inicio-silhueta path:hover { --tom: 100%; }

.inicio-secao { padding: 64px 0; border-top: 1px solid var(--borda); }
.inicio-secao h2 { margin: 0 0 8px; font-family: var(--fonte-titulo); font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.inicio-secao-lead { margin: 0; color: var(--texto-suave); font-size: 16px; }

.inicio-temas {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px;
}
.inicio-temas li { padding: 26px; border-radius: 28px; background: var(--cartao); }
.inicio-temas h3 { margin: 16px 0 6px; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; }
.inicio-temas p { margin: 0; color: var(--texto-suave); line-height: 1.55; }
.inicio-tema-icone { display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--forma-seixo); }
.inicio-tema-icone .icone { width: 22px; height: 22px; }
.tema-saude .inicio-tema-icone { background: var(--tema-saude-fundo); color: var(--tema-saude); }
.tema-educacao .inicio-tema-icone { background: var(--tema-educacao-fundo); color: var(--tema-educacao); }
.tema-seguranca .inicio-tema-icone { background: var(--tema-seguranca-fundo); color: var(--tema-seguranca); }
.tema-infra .inicio-tema-icone { background: var(--tema-infra-fundo); color: var(--tema-infra); }
.tema-renda .inicio-tema-icone { background: var(--tema-renda-fundo); color: var(--tema-renda); }
.tema-ambiente .inicio-tema-icone { background: var(--tema-ambiente-fundo); color: var(--tema-ambiente); }

.inicio-passos {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.inicio-passos li { padding: 26px; border-radius: 28px; background: var(--superficie); }
.inicio-passos .num {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--forma-seixo);
  background: var(--sol); color: var(--sobre-verde);
  font-family: var(--fonte-titulo); font-size: 24px; font-weight: 600;
}
.inicio-passos li:nth-child(2) .num { border-radius: 56% 44% 52% 48% / 44% 56% 46% 54%; }
.inicio-passos li:nth-child(3) .num { border-radius: 48% 52% 40% 60% / 58% 46% 54% 42%; }
.inicio-passos h3 { margin: 16px 0 6px; font-size: 19px; font-weight: 700; }
.inicio-passos p { margin: 0; color: var(--texto-suave); line-height: 1.55; }

/* Mesmo cartão verde do painel de boas-vindas. */
.inicio-secao.inicio-dados {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  margin-bottom: 64px; padding: 48px;
  border: none; border-radius: 40px;
  background: var(--cartao-verde);
  color: var(--sobre-cartao-verde);
}
.inicio-dados p { margin: 0; max-width: 680px; color: var(--sobre-cartao-verde-suave); line-height: 1.6; }
.inicio-botao-secundario {
  flex: none; padding: 14px 26px; border-radius: 999px;
  background: var(--superficie); color: var(--texto); font-weight: 700; text-decoration: none;
  transition: transform .15s;
}
.inicio-botao-secundario:hover { transform: translateY(-1px); }
.inicio .inicio-botao-secundario:focus-visible { outline-color: var(--sobre-cartao-verde); }

.inicio-rodape {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 24px 0 32px; border-top: 1px solid var(--borda);
  color: var(--texto-suave); font-size: 14px;
}
.inicio-rodape a { color: var(--verde); font-weight: 700; text-decoration: none; }

@media (max-width: 900px) {
  .inicio-hero { grid-template-columns: 1fr; gap: 0; padding: 16px 0 48px; }
  .inicio-silhueta { display: none; }
  .inicio-passos { grid-template-columns: 1fr; }
  .inicio-secao { padding: 48px 0; }
  .inicio-secao.inicio-dados { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
}
@media (max-width: 600px) {
  .inicio-topo, .inicio-hero, .inicio-secao, .inicio-rodape { width: calc(100% - 32px); }
  .inicio-nav a { display: none; }
  .inicio-lead { font-size: 16px; }
  .inicio-secao h2 { font-size: 25px; }
  .inicio .busca { height: 56px; }
  .inicio .busca button { padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .inicio-ver-mapa .icone, .inicio-botao-secundario { transition: none; }
}

/* ---------- Telas médias ---------- */
@media (max-width: 1100px) {
  :root { --largura-lateral: 380px; }
  .topo { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; padding: 0 16px; }
  .marca-cidade { display: none; }
}

/* ---------- Celular ---------- */
@media (max-width: 820px) {
  body { height: auto; display: block; }
  .topo {
    grid-template-columns: 1fr auto;
    grid-template-areas: "marca selo" "busca busca";
    row-gap: 12px; padding: 12px 16px;
  }
  .topo-acoes { grid-area: selo; }
  .selo-dados { padding: 4px 10px; font-size: 12px; }
  .botao-tema { width: 32px; height: 32px; }
  .topo-link { padding: 0; width: 32px; height: 32px; justify-content: center; }
  .topo-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .busca { grid-area: busca; }
  .layout { display: block; }
  .mapa-area { height: 58vh; }
  .lateral { border-left: none; border-top: 1px solid var(--borda); overflow: visible; }
  .painel-mapa { width: 190px; left: 10px; top: 10px; padding: 12px; border-radius: 16px; }
  .legenda-dica { display: none; }
  .maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 10px 10px 0 0; }
  .controle-mapas { width: 156px; padding: 12px; }
  .bases { grid-template-columns: 1fr; }
  .bairro-cabecalho { padding-left: 16px; padding-right: 16px; }
  .intro { margin: 12px 12px 0; }
  .passos { margin: 12px 12px 0; }
  .secao { padding-left: 12px; padding-right: 12px; }
  .bloco { padding-left: 16px; padding-right: 16px; }
  .destaque-ponto { margin-left: 12px; margin-right: 12px; }
  .resumo { margin: 0 12px 12px; grid-template-columns: 1fr; gap: 14px; }
  .nota-geral { flex-direction: row; align-items: baseline; gap: 10px; padding: 0 0 12px; border-right: none; border-bottom: 1px solid var(--borda); }
  .painel-barra { position: static; padding: 10px 16px; }
}

.marca-antigo {
  display: inline-block; margin-left: 4px; padding: 0 7px;
  border-radius: 999px; background: var(--sol-claro);
  font-size: 11px; font-weight: 800; color: var(--sol-escuro); vertical-align: 1px;
}
.selo.sem-nota, .sem-nota { color: var(--texto-suave); font-weight: 500; }
.explica-notas { grid-column: 1 / -1; margin-top: 4px; font-size: 14px; }
.lista-criterios { margin: 8px 0; padding-left: 18px; color: var(--texto-suave); font-size: 14px; line-height: 1.5; }
.lista-criterios li { margin-bottom: 4px; }
.lista-criterios small { white-space: nowrap; }
.tag-sus {
  display: inline-block; margin-left: 4px; padding: 0 7px;
  border-radius: 999px; background: var(--verde-claro);
  font-size: 11px; font-weight: 800; color: var(--verde-escuro); vertical-align: 1px;
}
.carregando { margin: 2px 0 10px; font-size: 14px; color: var(--texto-suave); }
.carregando::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px; vertical-align: -1px;
  border: 2.5px solid var(--borda); border-top-color: var(--verde); border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .carregando::before { animation: none; } }
/* Sem os números da API (fora do ar ou página aberta como arquivo). */
.aviso-dados {
  margin: 16px 0 0; padding: 12px 14px;
  border-radius: 14px;
  background: var(--sol-claro); font-size: 14px; line-height: 1.45; color: var(--sol-escuro); font-weight: 600;
}
.legenda-estado { margin-top: 0; padding: 0; background: none; }
.subtitulo-ponto { margin: 14px 0 2px; font-size: 14px; font-weight: 800; color: var(--texto); }
.lista-locais small { color: var(--texto-suave); }

/* Locais de outro bairro perto da divisa: na lista, marcador vazado; no mapa, menores e apagados. */
.vizinhos-titulo { margin: -2px 0 2px 16px; font-size: 12px; font-weight: 800; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.lista-vizinhos li { list-style: circle; }
.lista-vizinhos li::marker { color: var(--nardo); }
.link-bairro {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700;
  color: var(--verde); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.link-bairro:hover { color: var(--verde-escuro); }
.em-outro-bairro { color: var(--medio-texto); }
.icone-local.vizinho { width: 22px; height: 22px; border-width: 2px; opacity: .6; }
.icone-local.vizinho:hover { opacity: 1; }
.icone-local.vizinho .icone { width: 10px; height: 10px; }
.popup-vizinho { color: var(--medio-texto); }
.popup-detalhe { font-weight: 500; font-size: 13px; color: var(--texto-suave); }
.popup-restricao { display: inline-block; margin-top: 4px; font-weight: 600; font-size: 12px; color: var(--medio-texto); }

/* ---------- Comparar dois bairros ---------- */
/* A: contorno cheio no mapa e marcador cheio aqui; B: tracejado nos dois. */
.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.cmp-abrir {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 8px 16px 8px 12px;
  border: 2px solid var(--verde-claro); border-radius: 999px; background: var(--elevado);
  font-size: 14px; font-weight: 800; color: var(--verde-escuro); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.cmp-abrir .icone { width: 16px; height: 16px; color: var(--verde); }
.cmp-abrir:hover { background: var(--verde-claro); border-color: var(--verde); }
.cmp-abrir:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cmp-x { color: var(--sol); font-weight: 800; }

.cmp-escolha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center;
  margin: 0 28px 16px;
}
.cmp-campo {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 0 0 0 10px; height: 42px;
  border: 2px solid transparent; border-radius: 14px; background: var(--superficie);
}
.cmp-campo:focus-within { border-color: var(--verde); background: var(--elevado); }
.cmp-campo select {
  flex: 1; min-width: 0; height: 100%; padding: 0 6px 0 0;
  border: none; background: none; font: inherit; font-weight: 700; color: var(--texto); cursor: pointer;
}
.cmp-campo select:focus-visible { outline: none; }
.cmp-letra {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--tinta); color: var(--cartao); font-size: 12px; font-weight: 800;
}
.cmp-letra.cmp-b, .cmp-nome.cmp-b .cmp-letra { background: var(--elevado); color: var(--tinta); border: 1.5px dashed var(--tinta); }
.cmp-trocar {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: none; border-radius: 50%; background: var(--verde-claro); color: var(--verde-escuro); cursor: pointer;
}
.cmp-trocar .icone { width: 16px; height: 16px; }
.cmp-trocar:hover:not(:disabled) { background: var(--verde-claro-hover); }
.cmp-trocar:disabled { opacity: .4; cursor: default; }
.cmp-trocar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Linhas: rótulo | A | B. O cabeçalho fica preso logo abaixo da barra de voltar ao rolar. */
.cmp-cabecalho, .cmp-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) 112px 112px; gap: 12px; align-items: center;
}
.cmp-cabecalho {
  position: sticky; top: 55px; z-index: 1;
  padding: 10px 28px;
  background: var(--vidro); backdrop-filter: blur(8px);
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
}
.cmp-dica { font-size: 12px; line-height: 1.35; color: var(--texto-suave); }
.cmp-nome {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: center;
  min-width: 0; padding: 4px 0; margin: -4px 0;
  border: none; border-radius: var(--raio-pequeno); background: none; text-align: left; cursor: pointer;
}
.cmp-nome:hover strong { text-decoration: underline; text-underline-offset: 2px; }
.cmp-nome:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cmp-nome strong {
  font-size: 14px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cmp-nome small { grid-column: 2; font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.cmp-placar { margin: 0; padding: 14px 28px; line-height: 1.6; }

.cmp-grupo .bloco-topo { margin-bottom: 4px; }
.cmp-grupo .bloco-icone { background: var(--verde-claro); color: var(--verde); }
.cmp-linha { padding: 9px 0; border-top: 1px solid var(--borda); }
.bloco-topo + .cmp-linha { border-top: none; }
.cmp-rotulo { color: var(--texto-suave); line-height: 1.3; }
.cmp-valor { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-valor strong { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-barra { height: 6px; border-radius: 999px; background: var(--cinza-claro); overflow: hidden; }
.cmp-barra i { display: block; height: 100%; border-radius: 999px; background: var(--icone-apagado); }
.cmp-valor.vence strong { color: var(--bom); }
.cmp-valor.vence .cmp-barra i { background: var(--bom); }

@media (max-width: 1100px) {
  .cmp-cabecalho, .cmp-linha { grid-template-columns: minmax(0, 1fr) 96px 96px; gap: 10px; }
}
@media (max-width: 820px) {
  .cmp-escolha { margin: 0 16px 16px; }
  .cmp-cabecalho { top: 0; padding: 10px 16px; }
  .cmp-placar { padding: 14px 16px; }
  .cmp-cabecalho, .cmp-linha { grid-template-columns: minmax(0, 1fr) 88px 88px; gap: 8px; }
}
@media (max-width: 380px) {
  .cmp-escolha { grid-template-columns: 1fr; }
  .cmp-trocar { justify-self: center; transform: rotate(90deg); }
}

/* ---------- Página de transparência (transparencia.html) ---------- */
body.pagina { height: auto; min-height: 100vh; display: block; }
body.pagina .topo { height: var(--altura-topo); grid-template-columns: 1fr auto; position: sticky; top: 0; z-index: 10; }
a.selo-dados { text-decoration: none; cursor: pointer; transition: background .15s; }
a.selo-dados:hover { background: var(--hover); }
a.selo-dados.com-dados:hover { background: var(--verde-claro-hover); }
a.selo-dados:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.selo-dados .icone { width: 14px; height: 14px; }

.doc { width: var(--largura-pagina); margin: 0 auto; padding: 0 0 64px; }
.doc a { color: var(--verde-escuro); }
.doc a:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 2px; }
.doc-intro { padding: 40px 0 8px; max-width: 720px; }
.doc-intro h1 { margin: 0 0 12px; font-family: var(--fonte-titulo); font-size: 40px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
.doc-intro p { margin: 0 0 10px; color: var(--texto-suave); font-size: 15px; line-height: 1.6; }
.doc-intro p strong { color: var(--texto); }
.doc-intro .sobretitulo { color: var(--verde-escuro); font-size: 13px; }

.doc-secao { padding-top: 40px; }
.doc-secao h2 { margin: 0 0 10px; font-family: var(--fonte-titulo); font-size: 26px; font-weight: 600; }
.doc-lista { margin: 0; padding-left: 18px; color: var(--texto-suave); line-height: 1.6; max-width: 760px; }
.doc-lista li { margin-bottom: 8px; }
.doc-lista strong { color: var(--texto); }
.doc-api { list-style: none; padding: 0; }
.doc-api code { font-size: 13px; padding: 2px 8px; border-radius: 8px; background: var(--verde-claro); margin-right: 6px; }

.doc-resumo {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-top: 24px;
}
.doc-resumo > .carregando, .doc-resumo > .aviso-dados { grid-column: 1 / -1; }
.resumo-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; background: var(--elevado);
  border: 1px solid var(--borda); border-radius: 20px;
  box-shadow: var(--sombra-leve);
}
.resumo-rotulo { font-size: 14px; font-weight: 700; color: var(--texto-suave); }
.resumo-item > strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; }
.resumo-item small { color: var(--texto-suave); font-size: 12px; line-height: 1.45; }

.doc-duas-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.doc-duas-datas > div { padding: 18px; border-radius: 20px; background: var(--verde-claro); }
.doc-duas-datas p { margin: 6px 0 0; color: var(--texto-suave); line-height: 1.55; }

.fontes-tema { margin: 28px 0 10px; }
.fontes-tema:first-child { margin-top: 16px; }
.fontes-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.fonte-cartao {
  display: flex; flex-direction: column;
  padding: 18px; background: var(--elevado);
  border: 1px solid var(--borda); border-radius: 20px;
  box-shadow: var(--sombra-leve);
}
.fonte-cartao.calculado { border-style: dashed; }
.fonte-cartao h3 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.35; }
.fonte-cartao h3 a { color: var(--texto); text-decoration: none; }
.fonte-cartao h3 a:hover { color: var(--verde-escuro); text-decoration: underline; }
.fonte-orgao { margin: 2px 0 10px; font-size: 13px; color: var(--texto-suave); }
.fonte-usa { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.fonte-dados { margin: auto 0 0; }
.fonte-dados > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--borda); font-size: 14px;
}
.fonte-dados dt { color: var(--texto-suave); }
.fonte-dados dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.fonte-dados dd small { display: block; font-size: 12px; color: var(--texto-suave); }
.fonte-cuidado, .fonte-alerta {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 12px;
  font-size: 13px; line-height: 1.5;
}
.fonte-cuidado { background: var(--medio-fundo); color: var(--medio-texto); }
.fonte-alerta { background: var(--ruim-fundo); color: var(--ruim); }
.fonte-registro { margin: 10px 0 0; font-size: 11px; color: var(--texto-suave); overflow-wrap: anywhere; }
.fontes-nota { margin-top: 20px; font-size: 13px; }

.status {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 800; white-space: nowrap;
}
.status-ok { background: var(--bom-fundo); color: var(--verde-escuro); }
.status-aviso { background: var(--medio-fundo); color: var(--medio-texto); }
.status-falha { background: var(--ruim-fundo); color: var(--ruim); }
.resumo-item .status { font-size: 15px; padding: 2px 10px; }

.hist { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--elevado); margin-bottom: 8px; box-shadow: var(--sombra-leve); }
.hist summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; cursor: pointer; list-style: none;
}
.hist summary::-webkit-details-marker { display: none; }
.hist summary::before {
  content: "+"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde-escuro); font-weight: 800;
}
.hist[open] summary::before { content: "−"; }
.hist summary:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; border-radius: var(--raio); }
.hist-data { font-weight: 800; font-variant-numeric: tabular-nums; }
.hist-gatilho { flex: 1; color: var(--texto-suave); font-size: 13px; }
.hist-tabela { overflow-x: auto; padding: 0 16px 12px; }
.hist table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hist th, .hist td { padding: 8px 12px 8px 0; border-top: 1px solid var(--borda); text-align: left; vertical-align: top; }
.hist thead th { border-top: none; font-size: 13px; font-weight: 800; color: var(--texto-suave); }
.hist tbody th { font-weight: 500; }
.hist .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-msg { color: var(--texto-suave); font-size: 12px; min-width: 200px; }
.hist-msg span { display: block; }

/* Link para esta página a partir do site */
.fonte a.ver-fontes { display: inline-block; margin-top: 4px; color: var(--verde-escuro); font-weight: 800; }

@media (max-width: 820px) {
  body.pagina .topo { height: auto; grid-template-areas: "marca selo"; position: static; }
  .doc { width: calc(100% - 32px); padding: 0 0 48px; }
  .doc-intro { padding-top: 28px; }
  .doc-intro h1 { font-size: 26px; }
  .doc-resumo { grid-template-columns: 1fr 1fr; }
  .doc-duas-datas { grid-template-columns: 1fr; }
  .fontes-grade { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .doc-resumo { grid-template-columns: 1fr; }
}

/* ---------- Relatório do endereço (relatorio.html) ---------- */
.rel-intro { max-width: 760px; }
.busca.rel-busca { height: 56px; margin-top: 22px; background: var(--elevado); border-color: var(--borda); box-shadow: var(--sombra-leve); }
.busca.rel-busca:focus-within { border-color: var(--verde); }
.busca.rel-busca input { font-size: 16px; }
#estado:not(:empty) { margin-top: 20px; max-width: 760px; }
.rel-resultados { padding: 16px; background: var(--elevado); border: 1px solid var(--borda); border-radius: 20px; }
.rel-resultados .atalho { width: 100%; text-align: left; background: none; border: none; cursor: pointer; }

.rel { max-width: 900px; margin: 28px 0 0; scroll-margin-top: calc(var(--altura-topo) + 12px); }
.rel-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.rel-acoes p { margin: 0; font-size: 13px; color: var(--texto-suave); }
.rel-botao {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--elevado); color: var(--texto);
  font-weight: 800; cursor: pointer;
  transition: background .15s, transform .1s;
}
.rel-botao:hover { background: var(--hover); }
.rel-botao:active { transform: scale(.97); }
.rel-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.rel-botao.principal { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); }
.rel-botao.principal:hover { background: var(--acao-forte); }

/* A folha: parece um documento na tela e vira as páginas do PDF na impressão. */
.rel-folha {
  padding: 40px 44px;
  background: var(--cartao);
  border: 1px solid var(--borda); border-radius: 24px;
  box-shadow: var(--sombra);
}
.rel-capa { padding-bottom: 22px; border-bottom: 3px solid var(--verde); }
.rel-capa-marca { display: flex; align-items: center; gap: 8px; }
.rel-capa-marca span { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; color: var(--verde-escuro); }
.rel-capa-marca small {
  margin-left: 4px; padding: 2px 10px; border-radius: 999px;
  background: var(--sol-claro); color: var(--sol-escuro); font-size: 12px; font-weight: 800;
}
.rel-endereco { margin: 18px 0 4px; font-family: var(--fonte-titulo); font-size: 34px; line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }
.rel-local { margin: 0; font-size: 16px; font-weight: 600; color: var(--texto-suave); }
.rel-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 16px 0 0; font-size: 13px; }
.rel-meta div { display: flex; gap: 6px; }
.rel-meta dt { color: var(--texto-suave); }
.rel-meta dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.rel-secao { padding-top: 30px; }
.rel-titulo { margin: 0 0 14px; font-family: var(--fonte-titulo); font-size: 23px; font-weight: 600; }
.rel-texto { margin: 0 0 14px; color: var(--texto-suave); line-height: 1.6; }
.rel-obs { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--texto-suave); }
.rel-fonte { margin: 8px 0 0; font-size: 12px; color: var(--texto-suave); }
.rel-fonte span { margin-right: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }

.rel-resumo {
  display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: center;
  padding: 20px 22px; border: 1px solid var(--borda); border-radius: 20px;
}
.rel-posicao { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.rel-resumo .barras li { grid-template-columns: 110px 1fr 30px; }

.rel-destaques { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.rel-destaques > div { padding: 16px 18px; border-radius: 18px; }
.rel-fortes { background: var(--bom-fundo); }
.rel-atencao { background: var(--ruim-fundo); }
.rel-destaques h4 { margin: 0 0 8px; font-size: 14px; font-weight: 800; }
.rel-fortes h4 { color: var(--verde-escuro); }
.rel-atencao h4 { color: var(--ruim); }
.rel-destaques ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.rel-destaques li + li { margin-top: 3px; }
.rel-destaques p { margin: 0; font-size: 14px; color: var(--texto-suave); }

.rel-mapa { margin: 0 0 14px; }
.rel-mapa-imagem { position: relative; overflow: hidden; border-radius: 18px; border: 1px solid var(--borda); background: var(--cinza-claro); }
.rel-mapa-imagem img { display: block; width: 100%; height: auto; }
.rel-mapa figcaption { margin-top: 6px; font-size: 12px; color: var(--texto-suave); }
.rel-marcador, .rel-numero {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--tinta); color: #fff;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.rel-marcador {
  position: absolute; transform: translate(-50%, -50%);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  background: #111111;
}
.rel-pino { position: absolute; transform: translate(-50%, -100%); color: #556b2f; line-height: 0; }
.rel-pino .icone { width: 38px; height: 38px; fill: #556b2f; stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }

.rel-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.rel-tabela th, .rel-tabela td { padding: 9px 10px 9px 0; border-top: 1px solid var(--borda); text-align: left; vertical-align: top; }
.rel-tabela thead th { border-top: none; padding-top: 0; font-size: 12px; font-weight: 800; color: var(--texto-suave); }
.rel-tabela tbody th { font-weight: 600; color: var(--texto-suave); }
.rel-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rel-tabela small { display: block; font-size: 12px; color: var(--texto-suave); }
.rel-tabela td:last-child, .rel-tabela th:last-child { padding-right: 0; }
.rel-perto td:first-child { width: 34px; }
.rel-perto tbody th { color: var(--texto); font-weight: 700; white-space: nowrap; }
.rel-chave-valor tbody th { width: 34%; }
/* Serviço de outro bairro: o nome do bairro ao lado, na cor de "atenção" (mesma ideia do painel do mapa). */
.rel-outro-bairro { font-size: 12px; font-weight: 800; color: var(--medio-texto); white-space: nowrap; }
.rel-subtitulo { margin: 16px 0 6px; font-size: 12px; font-weight: 800; color: var(--texto-suave); }
.rel-vizinhos tbody th { width: 34%; }
.rel-cmp { font-size: 12px; font-weight: 800; color: var(--texto-suave); white-space: nowrap; }
.rel-cmp.bom { color: var(--bom); }
.rel-cmp.ruim { color: var(--ruim); }

.rel-tema { padding: 18px 0 6px; border-top: 1px solid var(--borda); }
.rel-tema:first-of-type { border-top: none; }
.rel-tema-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.rel-tema-topo h4 { flex: 1; margin: 0; font-size: 17px; font-weight: 800; }
.rel-icone {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--forma-seixo);
  background: var(--superficie); color: var(--grafite);
}
.rel-tema[data-tema="saude"] .rel-icone { background: var(--tema-saude-fundo); color: var(--tema-saude); }
.rel-tema[data-tema="educacao"] .rel-icone { background: var(--tema-educacao-fundo); color: var(--tema-educacao); }
.rel-tema[data-tema="infraestrutura"] .rel-icone { background: var(--tema-infra-fundo); color: var(--tema-infra); }
.rel-tema[data-tema="seguranca"] .rel-icone { background: var(--tema-seguranca-fundo); color: var(--tema-seguranca); }
.rel-tema[data-tema="ambiente"] .rel-icone { background: var(--tema-ambiente-fundo); color: var(--tema-ambiente); }
.rel-tema[data-tema="renda"] .rel-icone { background: var(--tema-renda-fundo); color: var(--tema-renda); }
.rel-selo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--superficie); font-size: 13px; font-weight: 800; white-space: nowrap;
}
.rel-selo i { width: 8px; height: 8px; border-radius: 50%; }
.rel-selo.bom { background: var(--bom-fundo); color: var(--verde-escuro); }
.rel-selo.medio { background: var(--medio-fundo); color: var(--medio-texto); }
.rel-selo.ruim { background: var(--ruim-fundo); color: var(--ruim); }

.rel-criterios { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--texto-suave); }
.rel-criterios li + li { margin-top: 4px; }
.rel-criterios strong { color: var(--texto); }
.rel-fontes { margin: 0 0 12px; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.rel-folha a { color: var(--verde-escuro); overflow-wrap: anywhere; }

.rel-aviso { margin-top: 32px; padding: 16px 18px; border-radius: 16px; background: var(--superficie); font-size: 12px; line-height: 1.55; color: var(--texto-suave); }
.rel-aviso p { margin: 0; }
.rel-aviso p + p { margin-top: 6px; }
.rel-aviso strong { color: var(--texto); }

/* Link para o relatório a partir do ponto escolhido no mapa (app.js) */
.link-relatorio {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 8px 16px 8px 12px; border: 2px solid var(--acao); border-radius: 999px;
  background: var(--acao); color: var(--sobre-acao);
  font-size: 14px; font-weight: 800; text-decoration: none;
}
.link-relatorio:hover { background: var(--acao-forte); border-color: var(--acao-forte); }
.bairro-cabecalho .cmp-abrir { margin-right: 6px; }
.link-relatorio:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.link-relatorio .icone { width: 16px; height: 16px; }

@media (max-width: 820px) {
  .busca.rel-busca { height: 52px; }
  .busca.rel-busca button { padding: 0 14px; }
  .rel { margin-top: 20px; }
  .rel-folha { padding: 24px 18px; border-radius: 18px; }
  .rel-endereco { font-size: 25px; }
  .rel-resumo { grid-template-columns: 1fr; gap: 14px; }
  .rel-resumo .nota-geral { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 10px; padding: 0 0 12px; border-right: none; border-bottom: 1px solid var(--borda); }
  .rel-destaques { grid-template-columns: 1fr; }
  .rel-tabela { font-size: 13px; }
  .rel-perto tbody th { white-space: normal; }
}
/* No celular, a coluna da média sai (a comparação "melhor/pior que a média" fica). Só na tela: o PDF tem largura de celular. */
@media screen and (max-width: 820px) {
  .rel-tabela .rel-media { display: none; }
}

/* ---------- Impressão / PDF ---------- */
/* Sai só a folha do relatório, sempre no tema claro, em A4. */
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  :root, :root[data-tema] {
    color-scheme: light;
    --tinta: #111111; --grafite: #333333; --texto: #111111; --texto-suave: #4a4a4a;
    --fundo: #ffffff; --cartao: #ffffff; --elevado: #ffffff; --superficie: #f3f3f3; --borda: #e3e3e3; --cinza-claro: #e3e3e3;
    --verde: #556b2f; --verde-escuro: #3f5022; --verde-claro: #ececec; --sobre-verde: #ffffff;
    --sol-claro: #f3f3f3; --sol-escuro: #3f5022;
    --ruim: #111111; --ruim-fundo: #e3e3e3; --medio: #8a8a8a; --medio-texto: #4a4a4a; --medio-fundo: #f0f0f0;
    --bom: #556b2f; --bom-fundo: #ececec;
    --acao: #556b2f; --acao-forte: #3f5022; --sobre-acao: #ffffff;
    --topo-fundo: #ffffff; --topo-texto: #111111; --topo-suave: #4a4a4a; --topo-borda: #e3e3e3; --topo-marca: #556b2f;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body.pagina { background: #fff; font-size: 12px; }
  body.pagina .topo, body.pagina .inicio-topo, .rel-intro, #estado, .rel-acoes { display: none !important; }
  .doc { width: auto; padding: 0; }
  .rel { max-width: none; margin: 0; }
  .rel-folha { padding: 0; border: none; border-radius: 0; box-shadow: none; }
  .rel-endereco { font-size: 26px; }
  .rel-secao { padding-top: 20px; }
  .rel-titulo { font-size: 17px; }
  .rel-tabela { font-size: 11.5px; }
  .rel-tabela th, .rel-tabela td { padding: 6px 8px 6px 0; }
  .rel-resumo, .rel-destaques > div, .rel-mapa, .rel-tema-topo, .rel-tabela tr, .rel-aviso { break-inside: avoid; }
  .rel-tema-topo, .rel-titulo { break-after: avoid; }
  .rel-tema { break-inside: avoid; }
  .rel-folha a { color: inherit; text-decoration: none; }
}

/* No celular, o nome da região vai curto ("G. São Paulo"); o completo fica no title e no aria-label do botão. */
@media (max-width: 600px) {
  .rotulo-longo { display: none; }
  .rotulo-curto { display: inline; }
}

/* ---------- Cidades: seletor, filtro por estado, mapa e cards (cidades.js) ---------- */
.inicio-silhueta[hidden], .inicio-regiao[hidden], .inicio-cidades[hidden] { display: none; }

/* Página inicial: a cidade e a busca numa pílula só. A cidade é a parte verde da esquerda. */
.inicio-busca {
  display: flex; align-items: center; gap: 6px;
  padding: 6px; border: 2px solid var(--borda); border-radius: 999px;
  background: var(--cartao); box-shadow: var(--sombra);
  transition: border-color .15s, box-shadow .15s;
}
.inicio-busca:focus-within { border-color: var(--verde); box-shadow: 0 0 0 5px var(--verde-claro), var(--sombra); }
.inicio-busca .busca,
.inicio-busca .busca:hover,
.inicio-busca .busca:focus-within { flex: 1; min-width: 0; height: 50px; padding: 0; border: none; background: none; box-shadow: none; }
.inicio-busca .busca-icone { left: 14px; }
.inicio-busca .busca input { padding-left: 42px; }
.inicio-cidade {
  flex: none; display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 14px 0 16px;
  border: none; border-radius: 999px;
  background: var(--verde-claro); color: var(--verde-escuro);
  text-align: left; cursor: pointer;
  transition: background .15s;
}
.inicio-cidade:hover { background: var(--verde-claro-hover); }
.inicio-cidade-texto { display: flex; flex-direction: column; line-height: 1.1; }
.inicio-cidade-texto small { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.inicio-cidade-texto strong { font-size: 17px; font-weight: 800; }
.inicio-cidade > .icone:first-child { width: 20px; height: 20px; }
.inicio-cidade .cidade-seta { margin-left: 18px; }
.inicio-cidade-trocar { display: none; font-size: 14px; font-weight: 800; color: var(--verde); }

/* Bolinhas dos temas: cheia com dado, tracejada sem fonte oficial, cinza enquanto não se sabe. */
.cidade-temas { display: inline-flex; gap: 5px; }
.cidade-tema { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tema); flex: none; }
.cidade-tema.tema-saude { --tema: var(--tema-saude); }
.cidade-tema.tema-educacao { --tema: var(--tema-educacao); }
.cidade-tema.tema-seguranca { --tema: var(--tema-seguranca); }
.cidade-tema.tema-infra { --tema: var(--tema-infra); }
.cidade-tema.tema-ambiente { --tema: var(--tema-ambiente); }
.cidade-tema.sem-dado { background: none; border: 1.5px dashed var(--icone-apagado); }
.cidade-tema.desconhecido { background: var(--cinza-claro); }

.cidades-estados { display: flex; flex-wrap: wrap; gap: 8px; }
.cidades-estado {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 8px 0 14px;
  border: 1px solid var(--borda); border-radius: 999px;
  background: var(--cartao); font-size: 14px; font-weight: 800; cursor: pointer;
}
.cidades-estado:hover { border-color: var(--verde); }
.cidades-estado[aria-pressed="true"] { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); }
.cidades-estado-total {
  min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--superficie); color: var(--texto-suave); font-size: 11px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.cidades-estado[aria-pressed="true"] .cidades-estado-total { background: rgba(255, 255, 255, .22); color: inherit; }
.cidades-estado-lista { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--texto-suave); }
.cidades-estado-lista select {
  height: 34px; padding: 0 10px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--cartao); color: var(--texto); font: inherit; font-weight: 700;
}

/* ---- Mapa do Sul e Sudeste (no lugar da silhueta) ---- */
.inicio-regiao {
  position: relative; justify-self: end; width: min(100%, 470px);
  aspect-ratio: var(--proporcao, 4 / 5);
  border: 1px solid var(--borda); border-radius: 28px;
  background: var(--regiao-mar); overflow: hidden;
}
.regiao-desenho { position: absolute; inset: 0; width: 100%; height: 100%; }
.regiao-terra path { stroke-linejoin: round; }
.regiao-terra .raso { fill: none; stroke: var(--regiao-raso); stroke-width: 1.6; }
.regiao-terra .principal { fill: var(--regiao-terra); }
.regiao-terra .vizinho { fill: var(--regiao-vizinho); }
.regiao-terra .divisa { fill: none; stroke: var(--regiao-mar); stroke-width: .3; }
.regiao-siglas text {
  fill: var(--icone-apagado); opacity: .8; font-family: var(--fonte-titulo); font-size: 5px; font-weight: 600;
  letter-spacing: .12em; text-anchor: middle; dominant-baseline: middle;
}
.regiao-siglas .vizinho { font-size: 3.2px; opacity: .5; }
.regiao-siglas .nome {
  font-family: inherit; font-size: 1.6px; letter-spacing: .05em; text-transform: uppercase; opacity: 1;
}
.regiao-siglas .oceano { font-style: italic; font-size: 2.7px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.regiao-cidade {
  position: absolute; display: flex; align-items: center; gap: 6px;
  padding: 2px 4px; border: none; border-radius: 8px; background: none;
  color: var(--texto); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transform: translate(-9px, -50%); /* o centro do ponto cai na coordenada da cidade */
}
.regiao-cidade:hover .regiao-nome, .regiao-cidade:focus-visible .regiao-nome { text-decoration: underline; text-underline-offset: 3px; }
.regiao-cidade:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.regiao-ponto {
  flex: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 0 2px var(--cartao);
}
.regiao-cidade.lado-esq { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -50%); }
.regiao-cidade.lado-cima, .regiao-cidade.lado-baixo { flex-direction: column; gap: 3px; transform: translate(-50%, calc(-100% + 9px)); }
.regiao-cidade.lado-cima { flex-direction: column-reverse; }
.regiao-cidade.lado-baixo { transform: translate(-50%, -9px); }
.regiao-cidade.atual { font-weight: 800; }
.regiao-cidade.atual .regiao-ponto {
  width: 15px; height: 15px; background: var(--verde-escuro);
  box-shadow: 0 0 0 2.5px var(--cartao), 0 0 0 9px color-mix(in srgb, var(--sol) 55%, transparent);
}
.regiao-cidade.atual { transform: translate(-11px, -50%); }
.regiao-cidade.sem-dados { cursor: default; }
.regiao-legenda {
  position: absolute; left: 16px; bottom: 16px; right: 16px; margin: 0;
  display: flex; align-items: center; gap: 10px; width: fit-content; max-width: calc(100% - 32px);
  padding: 9px 16px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--elevado); color: var(--texto-suave); font-size: 13px; font-weight: 600;
}

/* ---- Seletor ---- */
.seletor-cidade {
  position: fixed; z-index: 210;
  top: var(--seletor-topo, 72px); bottom: var(--seletor-base, auto); left: var(--seletor-esquerda, 12px);
  width: min(420px, calc(100vw - 24px));
  max-height: var(--seletor-altura, 600px);
  display: flex; flex-direction: column;
  background: var(--elevado); color: var(--texto);
  border: 1px solid var(--borda); border-radius: 22px;
  box-shadow: 0 18px 48px rgba(var(--sombra-rgb), 0.2);
  overflow: hidden;
}
.seletor-cidade[hidden], .seletor-cidade-fundo[hidden] { display: none; }
.seletor-cidade-fundo { position: fixed; inset: 0; z-index: 205; }
.seletor-cidade-cabeca { display: none; }
.seletor-cidade-busca { position: relative; display: flex; align-items: center; margin: 16px 16px 0; }
.seletor-cidade-busca .icone { position: absolute; left: 15px; color: var(--texto-suave); pointer-events: none; }
.seletor-cidade-busca input {
  width: 100%; height: 44px; padding: 0 14px 0 42px;
  border: 2px solid var(--borda); border-radius: 999px; outline: none;
  background: var(--cartao); color: var(--texto); font: inherit; font-size: 15px; font-weight: 600;
}
.seletor-cidade-busca input:focus { border-color: var(--verde); }
.seletor-cidade-busca input::placeholder { color: var(--placeholder); font-weight: 500; }
.seletor-cidade-estados:not(:empty) { margin: 12px 16px 0; }
.seletor-cidade-estados .cidades-estado { height: 30px; padding-left: 12px; font-size: 13px; }
.seletor-cidade-estados .cidades-estados { gap: 6px; }
.seletor-cidade-lista { overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px 10px; }
.seletor-cidade-lista ul { list-style: none; margin: 0; padding: 0; }
.seletor-cidade-grupo {
  margin: 14px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave);
}
.seletor-cidade-item {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 112px 18px; align-items: center; gap: 12px;
  padding: 10px; border: none; border-radius: 12px; background: none; text-align: left; cursor: pointer;
}
.seletor-cidade-item:hover, .seletor-cidade-item:focus-visible { background: var(--hover); outline: none; }
.seletor-cidade-item[aria-current="true"] { background: var(--verde-claro); }
.seletor-cidade-item[aria-current="true"] .icone { color: var(--verde); }
.seletor-cidade-item.sem-dados { cursor: default; }
.seletor-cidade-item.sem-dados .seletor-cidade-nome strong { font-weight: 600; }
.seletor-cidade-nome { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.seletor-cidade-nome strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seletor-cidade-regioes { font-size: 13px; color: var(--texto-suave); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.seletor-cidade-outra {
  margin: 14px 4px 4px; padding: 14px 16px; border-radius: 14px;
  background: var(--superficie); color: var(--texto-suave); font-size: 13px; line-height: 1.45;
}
.seletor-cidade-outra strong { display: block; margin-bottom: 2px; color: var(--texto); font-size: 15px; }
.seletor-cidade-aviso {
  margin: 0 16px 10px; padding: 10px 14px; border-radius: 12px;
  background: var(--sol-claro); color: var(--sol-escuro); font-size: 13px; font-weight: 600;
}
.seletor-cidade-aviso[hidden] { display: none; }
.seletor-cidade-rodape {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 18px 14px; border-top: 1px solid var(--borda); font-size: 13px;
}
.seletor-cidade-rodape summary { color: var(--verde); font-weight: 800; cursor: pointer; }
.seletor-cidade-rodape p { margin: 6px 0 0; color: var(--texto-suave); line-height: 1.45; }
.seletor-cidade-dica { flex: none; color: var(--texto-suave); font-weight: 600; }

/* No celular, uma folha que sobe de baixo, por cima de tudo. */
@media (max-width: 600px) {
  .seletor-cidade-fundo { background: rgba(var(--sombra-rgb), .35); }
  .seletor-cidade {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 85vh; border-radius: 24px 24px 0 0; border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: folha-sobe .2s ease-out;
  }
  .seletor-cidade-cabeca { display: flex; align-items: center; justify-content: space-between; padding: 22px 18px 0; }
  .seletor-cidade-cabeca::before {
    content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
    border-radius: 3px; background: var(--icone-apagado);
  }
  .seletor-cidade-cabeca h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; }
  .seletor-cidade-fechar { border: none; background: none; color: var(--verde); font-weight: 800; font-size: 14px; cursor: pointer; padding: 6px; }
  .seletor-cidade-estados:not(:empty) { overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
  .seletor-cidade-estados .cidades-estados { flex-wrap: nowrap; }
  .seletor-cidade-estados .cidades-estado { flex: none; }
  .seletor-cidade-item { grid-template-columns: minmax(0, 1fr) auto 18px; }
  .seletor-cidade-item .seletor-cidade-regioes { display: none; }
  .seletor-cidade-dica { display: none; }
}
@keyframes folha-sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .seletor-cidade { animation: none; } .cidade-seta { transition: none; } }

/* ---- Página inicial: "Em qual cidade?" ---- */
.inicio-cidades { display: grid; gap: 22px; }
.inicio-cidades-cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.inicio-cidades-cabeca h2 { margin: 0 0 6px; }
.inicio-cidades-busca { position: relative; display: flex; align-items: center; flex: 0 1 300px; }
.inicio-cidades-busca .icone { position: absolute; left: 16px; color: var(--texto-suave); pointer-events: none; }
.inicio-cidades-busca input {
  width: 100%; height: 48px; padding: 0 16px 0 44px;
  border: 1.5px solid var(--borda); border-radius: 999px; outline: none;
  background: var(--cartao); color: var(--texto); font: inherit; font-size: 15px;
}
.inicio-cidades-busca input:focus { border-color: var(--verde); box-shadow: 0 0 0 4px var(--verde-claro); }
.inicio-cidades-lista { display: grid; gap: 10px; }
.inicio-cidades-estado {
  margin: 10px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-suave);
}
.inicio-cidades-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
}
.cidade-card {
  position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4px;
  padding: 22px 22px 20px; border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--cartao); text-align: left; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cidade-card:hover { border-color: var(--verde); box-shadow: var(--sombra-leve); }
.cidade-card:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cidade-card[aria-current="true"] { border: 2px solid var(--verde); padding: 21px 21px 19px; }
.cidade-card.sem-dados { cursor: default; }
.cidade-card.sem-dados:hover { border-color: var(--borda); box-shadow: none; }
.cidade-card-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.cidade-card-topo strong { font-family: var(--fonte-titulo); font-size: 24px; font-weight: 600; line-height: 1.15; }
.cidade-card-selo {
  flex: none; padding: 3px 10px; border-radius: 999px;
  background: var(--sol-claro); color: var(--sol-escuro); font-size: 12px; font-weight: 800;
}
.cidade-card-selo.sem-dados { background: var(--superficie); color: var(--texto-suave); }
.cidade-card-regioes { color: var(--texto-suave); font-size: 14px; font-weight: 600; }
.cidade-card-temas {
  display: flex; flex-direction: column; gap: 9px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--borda);
}
.cidade-card-rotulo { color: var(--texto-suave); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.cidade-card-temas .cidade-temas { gap: 7px; }
.cidade-card-temas .cidade-tema { width: 13px; height: 13px; }
.cidade-card-frase { color: var(--texto-suave); font-size: 13px; font-weight: 600; }
.cidade-card[aria-current="true"] .cidade-card-frase { color: var(--verde); }
.cidade-card-seta { display: none; }
.inicio-cidades-vazio { margin: 0; color: var(--texto-suave); }
.inicio-cidades-aviso {
  margin: 0; justify-self: start; padding: 10px 16px; border-radius: 12px;
  background: var(--sol-claro); color: var(--sol-escuro); font-size: 14px; font-weight: 600;
}
.inicio-cidades-aviso[hidden] { display: none; }
.inicio-cidades-legenda { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; color: var(--texto-suave); font-size: 13px; }
.inicio-cidades-legenda > span { display: inline-flex; align-items: center; gap: 7px; }
.inicio-cidades-legenda .cidade-tema { width: 11px; height: 11px; }
.inicio-cidades-como summary { color: var(--verde); font-weight: 800; font-size: 15px; cursor: pointer; }
.inicio-cidades-como p { max-width: 70ch; margin: 8px 0 0; color: var(--texto-suave); }

@media (max-width: 1100px) {
  .inicio-cidades-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .inicio-regiao { display: none; }
  .inicio-cidades-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Celular: cidade e busca empilhadas; os cards viram uma lista simples, agrupada por estado. */
@media (max-width: 600px) {
  .inicio-busca { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; }
  .inicio-busca:focus-within { box-shadow: none; }
  .inicio-cidade { height: 56px; border-radius: 16px; padding: 0 18px; }
  .inicio-cidade .cidade-seta { display: none; }
  .inicio-cidade-trocar { display: inline; margin-left: auto; }
  .inicio-busca .busca,
  .inicio-busca .busca:hover,
  .inicio-busca .busca:focus-within { display: grid; height: auto; gap: 10px; }
  .inicio-busca .busca input {
    height: 56px; padding-left: 48px; border: 2px solid var(--borda); border-radius: 999px; background: var(--cartao);
  }
  .inicio-busca .busca input:focus { border-color: var(--verde); }
  .inicio-busca .busca-icone { top: 28px; left: 18px; }
  .inicio-busca .busca button { height: 50px; }

  .inicio-cidades-cabeca { flex-direction: column; align-items: stretch; }
  .inicio-cidades-busca { flex: none; }
  .inicio-cidades-filtro { overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
  .inicio-cidades-filtro .cidades-estados { flex-wrap: nowrap; }
  .inicio-cidades-filtro .cidades-estado { flex: none; }
  .inicio-cidades-cards {
    grid-template-columns: 1fr; gap: 0;
    border: 1px solid var(--borda); border-radius: 16px; background: var(--cartao); overflow: hidden;
  }
  .inicio-cidades-cards li + li { border-top: 1px solid var(--borda); }
  .cidade-card, .cidade-card[aria-current="true"] {
    flex-direction: row; align-items: center; gap: 10px;
    padding: 14px 16px; border: none; border-radius: 0; background: none;
  }
  .cidade-card[aria-current="true"] { background: var(--verde-claro); }
  .cidade-card-topo { flex: 1; min-width: 0; justify-content: flex-start; }
  .cidade-card-topo strong { font-family: inherit; font-size: 16px; font-weight: 700; }
  .cidade-card-regioes, .cidade-card-temas { display: none; }
  .cidade-card-selo { padding: 2px 8px; font-size: 11px; }
  .cidade-card-seta { display: flex; color: var(--texto-suave); }
  .cidade-card.sem-dados .cidade-card-seta { visibility: hidden; }
}

/* ---------- Topo e busca do mapa ---------- */
/* O topo é o da página inicial (.inicio-topo); a cidade e a busca ficam numa pílula sobre o mapa, acima do painel. */
.topo-mapa { position: relative; z-index: 10; background: var(--topo-fundo); border-bottom: 1px solid var(--topo-borda); }
.mapa-busca {
  position: absolute; left: 16px; top: 16px; z-index: 7;
  width: min(600px, calc(100% - 96px));
  gap: 4px; padding: 4px;
}
.mapa-busca .inicio-cidade { height: 44px; gap: 8px; padding: 0 12px 0 14px; }
.mapa-busca .inicio-cidade-texto strong { font-size: 15px; }
.mapa-busca .inicio-cidade .cidade-seta { margin-left: 4px; }
.mapa-busca .busca,
.mapa-busca .busca:hover,
.mapa-busca .busca:focus-within { height: 44px; }
.mapa-busca .busca input { font-size: 15px; }
.mapa-area .painel-mapa { top: 84px; }

@media (max-width: 820px) {
  .mapa-busca { left: 10px; top: 10px; width: calc(100% - 64px); }
  .mapa-area .painel-mapa { top: 70px; }
}
/* Celular: a pílula continua uma só (na página inicial ela empilha), sem o "Cidade" e sem o botão Buscar (o teclado
   tem a tecla de buscar). */
@media (max-width: 600px) {
  .mapa-busca {
    flex-direction: row; align-items: center; gap: 2px; padding: 3px;
    border: 2px solid var(--borda); border-radius: 999px; background: var(--cartao); box-shadow: var(--sombra);
  }
  .mapa-busca:focus-within { box-shadow: 0 0 0 4px var(--verde-claro), var(--sombra); }
  .mapa-busca .inicio-cidade { height: 40px; max-width: 46%; gap: 4px; padding: 0 8px 0 10px; border-radius: 999px; }
  .mapa-busca .inicio-cidade > .icone:first-child, .mapa-busca .inicio-cidade-texto small,
  .mapa-busca .inicio-cidade-trocar, .mapa-busca .cidade-uf { display: none; }
  .mapa-busca .inicio-cidade .cidade-seta { display: block; width: 16px; height: 16px; margin-left: 0; }
  .mapa-busca .inicio-cidade-texto { min-width: 0; }
  .mapa-busca .inicio-cidade-texto strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .mapa-busca .busca,
  .mapa-busca .busca:hover,
  .mapa-busca .busca:focus-within { display: flex; height: 40px; }
  .mapa-busca .busca input { height: auto; padding-left: 34px; border: none; border-radius: 0; background: none; font-size: 15px; }
  .mapa-busca .busca-icone { top: 50%; left: 10px; }
  .mapa-busca .busca button { display: none; }
  .mapa-area .painel-mapa { top: 66px; }
}

/* ---------- Busca personalizada (#/busca, busca.js) ---------- */
/* Página própria por cima do mapa, como a inicial. Cada critério é um cartão com o nível (Essencial, Importante,
   Tanto faz) e uma régua com o traço da média da cidade; à direita, o mapa pintado pelo resultado e a lista. */
.com-busca, .com-busca body { overflow: hidden; }
.busca-pagina {
  position: fixed; inset: 0; z-index: 100;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--fundo);
  --quase: color-mix(in srgb, var(--medio) 55%, var(--cartao));
}
.busca-pagina[hidden], .busca-pagina [hidden] { display: none !important; }
.busca-pagina a:focus-visible, .busca-pagina button:focus-visible, .busca-pagina select:focus-visible,
.busca-pagina input:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.inicio-nav a[aria-current="page"] { color: var(--topo-texto); box-shadow: inset 0 -2.5px 0 var(--topo-marca); border-radius: 0; }

.busca-folha-de-papel {
  width: var(--largura-pagina); margin: 4px auto 48px; padding: 28px 24px 22px;
  background: var(--cartao); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
}
.busca-cabecalho {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding-bottom: 18px; border-bottom: 1px solid var(--borda);
}
.busca-cabecalho h1 { margin: 0; font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; line-height: 1.1; }
.busca-voltar { display: none; }
.busca-cidade {
  padding: 3px 12px; border-radius: 999px;
  background: var(--verde-claro); color: var(--verde-escuro); font-size: 12.5px; font-weight: 700;
}
.busca-perfil { margin: 0 0 0 auto; color: var(--texto-suave); font-size: 12.5px; font-weight: 600; }
.busca-perfil span {
  margin-left: 6px; padding: 4px 12px; border-radius: 999px;
  background: var(--sol-claro); color: var(--sol-escuro); font-weight: 700;
}
.busca-lead { flex-basis: 100%; margin: 0; color: var(--texto-suave); font-size: 14px; }
.busca-abrir-criterios, .busca-alca, .busca-limpar-folha, .busca-ver-bairros, .busca-vistas { display: none; }

.busca-colunas {
  display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 32px; margin-top: 24px; align-items: start;
}
.busca-criterios-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.busca-criterios h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600; }

.busca-link {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--verde); font-size: inherit; font-weight: 700; text-align: left;
}
.busca-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Cartão de um critério */
.criterios { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.criterio { padding: 12px 14px; border: 1px solid var(--borda); border-radius: 14px; background: var(--elevado); --cor: var(--verde); }
.criterio.nivel-i { --cor: var(--medio); }
.criterio-cabeca { display: flex; align-items: center; gap: 10px; }
.criterio-sigla {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--superficie); color: var(--texto); font-size: 12px; font-weight: 800;
}
.criterio-sigla.tema-saude { background: var(--tema-saude-fundo); color: var(--tema-saude); }
.criterio-sigla.tema-educacao { background: var(--tema-educacao-fundo); color: var(--tema-educacao); }
.criterio-sigla.tema-seguranca { background: var(--tema-seguranca-fundo); color: var(--tema-seguranca); }
.criterio-sigla.tema-ambiente { background: var(--tema-ambiente-fundo); color: var(--tema-ambiente); }
.criterio-sigla.tema-renda { background: var(--tema-renda-fundo); color: var(--tema-renda); }
.criterio-sigla.tema-infra { background: var(--tema-infra-fundo); color: var(--tema-infra); }
.criterio-nome { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; }
.criterio.nivel-t .criterio-nome { color: var(--texto-suave); }
.criterio-nivel {
  display: inline-flex; align-items: center; gap: 3px; flex: none;
  height: 26px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--verde); color: var(--sobre-verde); font-size: 12px; font-weight: 700;
}
.criterio.nivel-i .criterio-nivel { background: var(--medio); color: #111111; }
.criterio.nivel-t .criterio-nivel { background: var(--superficie); color: var(--texto-suave); }
.criterio-nivel .icone { width: 14px; height: 14px; stroke-width: 2.4; }
.criterio.nivel-t .criterio-corpo, .criterio.nivel-t .criterio-endereco { display: none; }

.criterio-endereco {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 8px;
  margin-top: 10px; padding: 3px 6px 3px 12px;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--cartao);
}
.criterio-endereco:focus-within { border-color: var(--verde); }
.criterio-endereco:has(.criterio-sugestoes:not([hidden])) { border-radius: 16px; }
.criterio-endereco > .icone { width: 16px; height: 16px; color: var(--verde); }
.criterio-endereco input {
  min-width: 0; height: 28px; padding: 0; border: 0; outline: none; background: none;
  color: var(--texto); font: inherit; font-size: 13px; font-weight: 600;
}
.criterio-endereco input::placeholder { color: var(--placeholder); font-weight: 500; }
.criterio-endereco button {
  padding: 4px 8px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--verde); font-size: 12.5px; font-weight: 700;
}
.criterio-endereco button:hover { background: var(--hover); }
.criterio-endereco-aviso { grid-column: 1 / -1; margin: 0 0 4px; color: var(--ruim); font-size: 12px; font-weight: 600; }
.criterio-endereco-aviso:empty { display: none; }
.criterio-endereco-aviso.dica { color: var(--texto-suave); }
/* Sugestões do endereço: na própria caixa do critério (a lista de critérios rola no celular e cortaria um menu solto). */
.criterio-sugestoes {
  grid-column: 1 / -1; margin: 2px -2px 6px -8px; padding: 4px; list-style: none;
  max-height: 220px; overflow-y: auto;
  border-top: 1px solid var(--borda);
}
.criterio-sugestoes[hidden] { display: none; }
.criterio-sugestao { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; cursor: pointer; }
.criterio-sugestao strong { font-size: 13px; font-weight: 700; color: var(--texto); }
.criterio-sugestao small { font-size: 12px; color: var(--texto-suave); }
.criterio-sugestao[aria-selected="true"], .criterio-sugestao:hover { background: var(--verde-claro); }

.criterio-corpo { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px; margin-top: 12px; }
.criterio-valor {
  min-width: 112px; padding: 0; border: 0; background: none; cursor: default;
  color: var(--texto); font-size: 13.5px; font-weight: 700; text-align: left;
}
/* A régua: o preenchimento vai até o centro do botão de arrastar (que anda 100% - 18px). */
.criterio-regua { position: relative; height: 20px; }
.criterio-regua input {
  position: relative; z-index: 1; display: block; width: 100%; height: 20px; margin: 0;
  background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.criterio-regua input::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--cor) calc(9px + (100% - 18px) * var(--p)), var(--borda) 0);
}
.criterio-regua input::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--cor) calc(9px + (100% - 18px) * var(--p)), var(--borda) 0);
}
.criterio-regua input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px;
  border: 3px solid var(--cor); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(var(--sombra-rgb), .25);
}
.criterio-regua input::-moz-range-thumb {
  box-sizing: border-box; width: 18px; height: 18px;
  border: 3px solid var(--cor); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(var(--sombra-rgb), .25);
}
.criterio-media {
  position: absolute; top: 1px; left: calc(9px + (100% - 18px) * var(--m)); width: 2px; height: 18px; margin-left: -1px;
  background: var(--texto); border-radius: 1px; pointer-events: none;
}
.criterio-explica {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; margin: 2px 0 0;
  color: var(--texto-suave); font-size: 12px;
}
.criterio-legenda-media { white-space: nowrap; }
.criterio-legenda-media::before {
  content: ""; display: inline-block; width: 2px; height: 11px; margin-right: 6px; vertical-align: -1px; background: var(--texto);
}

.busca-adicionar-botao {
  width: 100%; height: 42px; margin-top: 12px; cursor: pointer;
  border: 1.5px dashed var(--icone-apagado); border-radius: 999px; background: none;
  color: var(--verde); font-size: 13.5px; font-weight: 700;
}
.busca-adicionar-botao:hover { border-color: var(--verde); background: var(--verde-claro); }
.busca-adicionar-lista {
  display: grid; gap: 2px; margin: 8px 0 0; padding: 6px; list-style: none;
  border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--elevado); box-shadow: var(--sombra-leve);
}
.busca-adicionar-lista button {
  width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 600; text-align: left;
}
.busca-adicionar-lista button:hover { background: var(--hover); }
.busca-extras { margin: 8px 2px 0; color: var(--texto-suave); font-size: 12px; }
.busca-extras:empty { display: none; }
.criterio-sem-fonte { margin-top: 14px; padding: 10px 14px; border-radius: var(--raio-pequeno); background: var(--superficie); }
.criterio-sem-fonte s { color: var(--texto-suave); font-size: 13px; font-weight: 700; }
.criterio-sem-fonte p { margin: 2px 0 0; color: var(--texto-suave); font-size: 12px; }
.criterio-sem-fonte a { color: var(--verde); font-weight: 700; text-decoration: none; }
.criterio-sem-fonte a:hover { text-decoration: underline; }
.busca-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; font-size: 13px; }
.busca-copiar {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--elevado); font-size: 13px; font-weight: 700;
}
.busca-copiar:hover { border-color: var(--verde); }
.busca-copiar .icone { width: 16px; height: 16px; }
.busca-limpar { color: var(--texto-suave); font-weight: 600; }
.busca-copiar-aviso { color: var(--verde); font-weight: 700; }

/* Menu do nível */
.busca-menu {
  position: fixed; z-index: 130; width: 270px; padding: 6px;
  border: 1px solid var(--borda); border-radius: var(--raio-pequeno); background: var(--elevado); box-shadow: var(--sombra);
}
.busca-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; cursor: pointer;
  border: 0; border-radius: 9px; background: none; text-align: left;
}
.busca-menu button:hover, .busca-menu button:focus-visible { background: var(--hover); outline: none; }
.busca-menu button[aria-checked="true"] { background: var(--sol-claro); }
.busca-menu strong { display: block; font-size: 13.5px; }
.busca-menu small { display: block; color: var(--texto-suave); font-size: 12px; }
.busca-menu .icone { margin-left: auto; width: 16px; height: 16px; }
.menu-ponto { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--verde); }
.busca-menu .nivel-i .menu-ponto { background: var(--medio); }
.busca-menu .nivel-t .menu-ponto { background: var(--icone-apagado); }

/* Mapa e resumo */
/* O mapa cresce com a tela (mais da metade da coluna) e com a altura da janela; o resumo fica com o resto. */
.busca-topo-resultado { display: grid; grid-template-columns: minmax(240px, 1.25fr) minmax(240px, 1fr); gap: 24px; align-items: start; }
.busca-mapa-caixa { padding: 14px; border: 1px solid var(--borda); border-radius: 16px; background: var(--regiao-vizinho); }
#busca-mapa { display: block; width: 100%; height: auto; max-height: max(360px, min(680px, 100vh - 280px)); }
#busca-mapa path { fill: var(--regiao-terra); stroke: var(--cartao); stroke-width: 1.6; stroke-linejoin: round; transition: fill .2s; }
#busca-mapa .cat-atende path { fill: var(--verde); }
#busca-mapa .cat-quase path { fill: var(--quase); }
#busca-mapa a:hover path, #busca-mapa a:focus-visible path { stroke: var(--texto); stroke-width: 3; }
#busca-mapa a:focus-visible { outline: none; }
.busca-mapa-extra { pointer-events: none; }
.busca-mapa-raio { fill: none; stroke: var(--texto); stroke-width: 2.5; stroke-dasharray: 12 9; opacity: .7; }
.busca-mapa-ponto { fill: var(--texto); stroke: var(--cartao); stroke-width: 4; }
.busca-mapa-rotulo {
  fill: var(--texto); font-size: 26px; font-weight: 700; text-anchor: middle;
  paint-order: stroke; stroke: var(--regiao-vizinho); stroke-width: 6; stroke-linejoin: round;
}
.busca-mapa-numero circle { fill: var(--elevado); stroke: var(--verde); stroke-width: 3; }
.busca-mapa-numero text { fill: var(--verde); font-size: 22px; font-weight: 800; text-anchor: middle; }

.busca-total { display: flex; align-items: center; gap: 14px; margin: 0; }
.busca-total strong { font-family: var(--fonte-titulo); font-size: 64px; font-weight: 600; line-height: .9; }
.busca-total span { font-size: 15px; font-weight: 700; line-height: 1.3; }
.busca-total-quase { margin: 8px 0 0; color: var(--texto-suave); font-size: 14px; }
.busca-legenda { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.busca-legenda li { display: flex; align-items: center; gap: 10px; }
.busca-legenda strong { margin-left: auto; }
.amostra { flex: none; width: 15px; height: 15px; border-radius: 4px; background: var(--regiao-terra); }
.amostra.cat-atende { background: var(--verde); }
.amostra.cat-quase { background: var(--quase); }
.amostra.cat-ponto { width: 10px; height: 10px; margin: 0 2.5px; border-radius: 50%; background: var(--texto); }
.busca-ordenar { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--borda); }
.busca-ordenar label { display: block; margin-bottom: 6px; color: var(--texto-suave); font-size: 12.5px; font-weight: 600; }
.busca-ordenar select {
  width: 100%; height: 38px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--elevado);
  color: var(--texto); font: inherit; font-size: 13.5px; font-weight: 700;
}
.busca-ordenar p { margin: 6px 0 0; color: var(--texto-suave); font-size: 12px; }
.busca-comparar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 10px;
  margin-top: 18px; padding: 10px 16px; border-radius: 22px;
  background: var(--acao); color: var(--sobre-acao); font-size: 14px; font-weight: 700; text-decoration: none;
}
.busca-comparar:hover { background: var(--acao-forte); }
.busca-comparar small { flex-basis: 100%; text-align: center; font-size: 11.5px; font-weight: 500; opacity: .85; }

.busca-pagina[data-estado="vazia"] .busca-ordenar { display: none; }
/* Enquanto os dados dos bairros carregam (quem chega por um link ou de outra página), os critérios e o resultado
   esperam invisíveis e aparecem prontos, sem montar na frente da pessoa. */
.busca-colunas, .busca-cidade { transition: opacity .25s ease-out; }
.busca-pagina[data-estado="carregando"] .busca-colunas, .busca-pagina[data-estado="carregando"] .busca-cidade { opacity: 0; }

/* Lista de resultados */
.busca-bloco-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 10px; }
.busca-bloco-titulo h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600; }
.busca-bloco-titulo span { color: var(--texto-suave); font-size: 13px; font-weight: 600; white-space: nowrap; }
.resultados { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.resultado { padding: 14px 18px; border: 1px solid var(--borda); border-radius: 14px; background: var(--elevado); }
.resultado.primeiro { border: 1.5px solid var(--verde); }
.resultado-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.resultado-posicao {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--verde); color: var(--sobre-verde); font-size: 12.5px; font-weight: 800;
}
.resultado-nome { color: var(--texto); font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; text-decoration: none; }
.resultado-nome:hover { text-decoration: underline; text-underline-offset: 3px; }
.resultado-nota { color: var(--texto-suave); font-size: 12.5px; }
.resultado-resumo { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.resultado-resumo.tudo { background: var(--verde-claro); color: var(--verde-escuro); }
.resultado-resumo.parte { background: var(--medio-fundo); color: var(--medio-texto); }
.resultado-celulas { display: flex; gap: 16px; margin: 12px 0 0; padding: 0; list-style: none; }
.resultado-celulas ul { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0; padding: 0; list-style: none; }
.grupo-importantes { padding-left: 16px; border-left: 1px solid var(--borda); }
.resultados.com-grupos .primeiro .grupo::before {
  content: "essenciais"; display: block; margin-bottom: 6px; color: var(--texto-suave); font-size: 11px; font-weight: 700;
}
.resultados.com-grupos .primeiro .grupo-importantes::before { content: "importantes"; }
.celula { display: flex; align-items: flex-start; gap: 7px; min-width: 76px; }
.celula-marca {
  display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde);
}
.celula-marca .icone { width: 11px; height: 11px; stroke-width: 3; }
.celula.falha .celula-marca { background: var(--ruim-fundo); color: var(--ruim); }
.celula-texto { display: flex; flex-direction: column; line-height: 1.25; }
.celula-texto small { color: var(--texto-suave); font-size: 11px; font-weight: 600; }
.celula-texto strong { font-size: 14px; }
.celula.falha strong { color: var(--ruim); }
.busca-nenhum, .busca-aviso { margin: 0; padding: 16px; border-radius: var(--raio-pequeno); background: var(--superficie); color: var(--texto-suave); }
.busca-aviso { margin-top: 24px; }
.busca-resultado > .busca-link { margin-top: 12px; font-size: 13.5px; }

.quase { padding: 0 18px; border: 1px solid var(--borda); border-radius: 14px; background: var(--elevado); }
.quase ul { margin: 0; padding: 0; list-style: none; }
.quase li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.quase-ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--quase); }
.quase-nome { color: var(--texto); font-size: 15px; font-weight: 700; text-decoration: none; }
.quase-nome:hover { text-decoration: underline; text-underline-offset: 3px; }
.quase-importantes { color: var(--texto-suave); font-size: 12.5px; }
.quase-falta { display: flex; align-items: flex-start; gap: 8px; width: 250px; margin-left: auto; }
.quase-falta > .icone {
  width: 18px; height: 18px; margin-top: 1px; padding: 4px; border-radius: 50%;
  background: var(--ruim-fundo); color: var(--ruim); stroke-width: 3;
}
.quase-falta strong { display: block; color: var(--ruim); font-size: 13.5px; }
.quase-falta small { display: block; color: var(--texto-suave); font-size: 11.5px; }
.quase-rodape {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 0; color: var(--texto-suave); font-size: 12.5px;
}

.busca-vazia { margin-top: 24px; padding: 28px; border-radius: 16px; background: var(--superficie); text-align: center; }
.busca-vazia h2 { margin: 0 0 4px; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; }
.busca-vazia p { margin: 0; color: var(--texto-suave); }
.busca-perfis { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.busca-perfis button {
  padding: 8px 16px; border: 1px solid var(--borda); border-radius: 999px; background: var(--elevado); cursor: pointer;
  font-size: 14px; font-weight: 700;
}
.busca-perfis button:hover { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro); }
.busca-fontes { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: 12px; }
.busca-fontes a { color: var(--verde); font-weight: 700; text-decoration: none; }

/* Entradas: atalho na página inicial e link no topo do mapa */
.inicio-busca-personalizada {
  display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 10px; margin-top: 16px;
  padding: 8px 16px; border-radius: 999px; background: var(--sol-claro); color: var(--sol-escuro);
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.inicio-busca-personalizada strong { font-weight: 800; }
.inicio-busca-personalizada:hover { background: color-mix(in srgb, var(--sol) 40%, var(--sol-claro)); }
.inicio-busca-personalizada .icone { width: 16px; height: 16px; }
.inicio-imoveis-atalho { margin-top: 10px; background: var(--tema-renda-fundo); color: var(--tema-renda); } /* azul-petróleo, a cor do modo Aluguel */
.inicio-imoveis-atalho:hover { background: color-mix(in srgb, var(--tema-renda) 18%, var(--tema-renda-fundo)); }

/* Seção "Imóveis para alugar" da página inicial: dois cartões, procurar e anunciar */
.inicio-imoveis-cartoes {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px;
}
.inicio-imoveis-cartoes li { display: flex; flex-direction: column; align-items: flex-start; padding: 26px; border-radius: 28px; background: var(--cartao); }
.inicio-imoveis-cartoes h3 { margin: 0 0 6px; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; }
.inicio-imoveis-cartoes p { margin: 0 0 18px; color: var(--texto-suave); line-height: 1.55; }
.inicio-imoveis-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 10px 18px; border-radius: 999px;
  background: var(--verde-claro); color: var(--verde-escuro); font-weight: 700; text-decoration: none;
}
.inicio-imoveis-link:hover { background: var(--verde-claro-hover); }
.inicio-imoveis-link .icone { width: 16px; height: 16px; }

@media (max-width: 1100px) {
  .busca-topo-resultado { grid-template-columns: minmax(200px, 1fr) minmax(220px, 1fr); }
  .quase-falta { width: 100%; margin-left: 20px; }
}

/* Celular: os resultados vêm primeiro; os critérios ficam numa folha que sobe. */
@media (max-width: 820px) {
  .busca-folha-de-papel { width: 100%; margin: 0; padding: 0 16px 32px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .busca-topo { width: calc(100% - 32px); padding: 14px 0 6px; }
  .busca-topo .inicio-nav a { display: none; }
  .busca-cabecalho { gap: 6px 10px; padding-bottom: 0; border-bottom: 0; }
  .busca-voltar { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -6px; border-radius: 50%; color: var(--texto); }
  .busca-cabecalho h1 { font-size: 21px; }
  .busca-cidade, .busca-lead { display: none; }
  .busca-abrir-criterios {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 46px; margin: 14px 0 6px; padding: 0 18px;
    border: 0; border-radius: 999px; background: var(--acao); color: var(--sobre-acao); cursor: pointer;
    font-size: 14.5px; font-weight: 700;
  }
  .busca-abrir-criterios small { margin-left: auto; font-size: 12.5px; font-weight: 600; opacity: .85; }
  .busca-colunas { display: block; margin-top: 12px; }

  .busca-criterios {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0; background: var(--cartao); box-shadow: 0 -8px 30px rgba(var(--sombra-rgb), .2);
    transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s;
  }
  .busca-criterios.aberta { transform: none; visibility: visible; transition: transform .25s ease; }
  .busca-pagina.com-folha::after { content: ""; position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, .35); }
  .busca-alca { display: block; width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 2px; background: var(--icone-apagado); }
  .busca-limpar-folha { display: inline; color: var(--texto-suave); font-size: 13px; font-weight: 600; }
  .busca-acoes .busca-limpar { display: none; }
  .busca-ver-bairros {
    position: sticky; bottom: 0; display: block; width: 100%; height: 48px; margin-top: 16px; cursor: pointer;
    border: 0; border-radius: 999px; background: var(--acao); color: var(--sobre-acao); font-size: 15px; font-weight: 700;
    box-shadow: 0 -6px 12px var(--cartao);
  }
  /* Na folha, cada critério mostra só o limite; tocar nele abre a régua. */
  .criterio:not(.expandido) .criterio-regua, .criterio:not(.expandido) .criterio-explica { display: none; }
  .criterio-corpo { grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
  .criterio-valor { cursor: pointer; color: var(--texto-suave); font-weight: 600; }
  .criterio:not(.expandido) .criterio-valor::after { content: "ajustar"; margin-left: 8px; color: var(--verde); font-size: 12px; font-weight: 700; }

  /* Mapa e resumo numa grade só: contador e Lista/Mapa no topo, o mapa logo abaixo. */
  .busca-topo-resultado { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; }
  .busca-resumo { display: contents; }
  .busca-total { grid-column: 1; grid-row: 1; gap: 10px; }
  .busca-total-quase { order: 1; }
  .busca-mapa-caixa { order: 2; grid-column: 1 / -1; }
  .busca-legenda { order: 3; }
  .busca-ordenar { order: 4; }
  .busca-comparar { order: 5; }
  .busca-total strong { font-size: 44px; }
  .busca-total span { font-size: 13.5px; }
  .busca-vistas { display: inline-flex; grid-column: 2; grid-row: 1; padding: 3px; border-radius: 999px; background: var(--superficie); }
  .busca-vistas button {
    padding: 5px 14px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    color: var(--texto-suave); font-size: 13px; font-weight: 600;
  }
  .busca-vistas button[aria-pressed="true"] { background: var(--acao); color: var(--sobre-acao); font-weight: 700; }
  .busca-total-quase, .busca-legenda, .busca-ordenar, .busca-comparar { grid-column: 1 / -1; }
  .busca-pagina[data-vista="lista"] .busca-mapa-caixa,
  .busca-pagina[data-vista="lista"] .busca-legenda,
  .busca-pagina[data-vista="lista"] .busca-comparar,
  .busca-pagina[data-vista="lista"] .busca-total-quase,
  .busca-pagina[data-vista="lista"] .busca-ordenar { display: none; }
  .busca-pagina[data-vista="mapa"] .busca-resultado { display: none; }
  .busca-pagina[data-vista="mapa"] .busca-mapa-caixa { justify-self: center; width: 100%; max-width: 360px; margin-top: 12px; }
  .busca-pagina[data-estado="vazia"] .busca-vistas { display: none; }

  .resultado { padding: 12px 14px; }
  .resultado-cabeca { padding-bottom: 8px; border-bottom: 0; }
  .resultado-nome { font-size: 18px; }
  .resultado-resumo { flex-basis: 100%; margin-left: 0; padding: 0; background: none !important; }
  .resultado-celulas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; margin-top: 4px; }
  .grupo, .resultado-celulas ul { display: contents; }
  .grupo-importantes { padding: 0; border: 0; }
  .resultados.com-grupos .primeiro .grupo::before { display: none; }
  .celula { min-width: 0; }
  .quase { padding: 0 14px; }
  .quase-falta { margin-left: 20px; }
  .quase-rodape { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .busca-criterios, .busca-criterios.aberta, #busca-mapa path { transition: none; }
}

/* ---------- Painel: escondido, rápido ou expandido (app.js, aplicarPainel) ---------- */
/* Expandido: 2/3 da tela, deixando pelo menos 420 px de mapa. Escondido: o mapa fica com a largura toda. */
@media (min-width: 821px) {
  .layout[data-painel="expandido"] { grid-template-columns: minmax(0, 1fr) min(66.667%, calc(100% - 420px)); }
  .layout[data-painel="escondido"] { grid-template-columns: minmax(0, 1fr); }
  .layout[data-painel="escondido"] .lateral { display: none; }
}
.lateral { container-type: inline-size; }

.painel-controles { display: flex; gap: 6px; margin-left: auto; }
.painel-botao {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px 0 10px;
  border: none; border-radius: 999px; background: var(--superficie);
  color: var(--texto); font-size: 14px; font-weight: 700; white-space: nowrap;
  cursor: pointer; transition: background .12s;
}
.painel-botao:hover { background: var(--hover); }
.painel-botao.destaque { background: var(--acao-forte); color: var(--sobre-acao); }
.painel-botao.destaque:hover { background: var(--acao); }
.painel-botao.so-icone { width: 34px; padding: 0; justify-content: center; }
.painel-botao .icone { width: 17px; height: 17px; }
.painel-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.aba-painel {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  width: 300px; padding: 14px 16px 16px;
  background: var(--vidro); border: 1px solid var(--borda-vidro); border-radius: 20px;
  box-shadow: var(--sombra); backdrop-filter: blur(6px);
}
.aba-sobre { margin: 0 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--verde); }
.aba-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.aba-nome { font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600; line-height: 1.15; min-width: 0; }
.aba-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

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

/* ---------- Nota: posição entre os bairros e média da cidade nas barras ---------- */
.nota-posicao { margin-top: 8px; font-size: 12.5px; white-space: nowrap; font-weight: 700; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.barra-media {
  position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px;
  border-radius: 1px; background: var(--tinta); box-shadow: 0 0 0 1.5px var(--elevado);
}
.barras-coluna { min-width: 0; }
.barras-legenda { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; color: var(--texto-suave); }
.barras-legenda b { width: 2px; height: 12px; border-radius: 1px; background: var(--tinta); }

/* ---------- Em resumo ---------- */
.em-resumo { padding: 6px 28px 10px; }
.em-resumo h3 { margin: 0 0 10px; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600; }
.em-resumo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.em-resumo li { position: relative; padding-left: 30px; line-height: 1.45; }
.em-resumo li strong { font-weight: 800; }
.em-resumo li > span:last-child { color: var(--texto-suave); font-size: 14px; }
.em-resumo:not(.compacto) li > span:last-child { display: block; }
.em-resumo li::before {
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 12px; font-weight: 900;
}
.em-resumo li.forte::before { content: "✓"; background: var(--bom-fundo); color: var(--bom); }
.em-resumo li.atencao::before { content: "!"; background: var(--medio-fundo); color: var(--medio-texto); }
.em-resumo.compacto { padding: 16px 20px; border: 1px solid var(--borda); border-radius: 28px; background: var(--elevado); box-shadow: var(--sombra-leve); }
.em-resumo.compacto h3 { font-size: 17px; }
.em-resumo.compacto ul { gap: 7px; }
.em-resumo.compacto li { font-size: 14px; }

/* ---------- Ponto clicado ---------- */
.ponto-clicado { margin: 10px 20px 14px; padding: 16px 18px; border-radius: 22px; background: var(--verde-claro); }
.ponto-topo { display: flex; align-items: center; gap: 8px; color: var(--verde-escuro); }
.ponto-topo h3 { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ponto-mais { border: none; background: none; padding: 2px 4px; color: var(--verde-escuro); font-size: 14px; font-weight: 700; cursor: pointer; }
.ponto-mais::after { content: " ›"; }
.ponto-mais:hover { text-decoration: underline; }
.ponto-mais:focus-visible { outline: 2px solid var(--foco); border-radius: 6px; }
.ponto-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.ponto-numero { display: flex; flex-direction: column; min-width: 0; }
.ponto-numero span { font-size: 12px; font-weight: 700; color: var(--verde-escuro); }
.ponto-numero strong { font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ponto-numero small { font-size: 12px; color: var(--texto-suave); line-height: 1.35; }
.ponto-clicado .carregando, .ponto-clicado .texto { margin: 10px 0 0; }
.ponto-clicado.completo .ponto-numeros { grid-template-columns: 1fr; gap: 8px; }
.ponto-clicado.completo .ponto-numero { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; }
.ponto-clicado.completo .ponto-numero strong { grid-row: 1; grid-column: 2; font-size: 17px; }
.ponto-clicado.completo .ponto-numero small { grid-column: 1 / -1; }
.ponto-clicado .linha { border-color: var(--verde-claro-borda); }
.ponto-clicado.vazio .texto { margin-top: 8px; font-size: 14px; }
.nota-ponto { margin: 10px 0 0; font-size: 12px; color: var(--texto-suave); line-height: 1.5; }

/* "Ver mais" que abre dentro de um bloco (serviços do ponto, locais, geologia) */
details.mais { margin-top: 10px; font-size: 14px; }
details.mais summary { display: inline-flex; align-items: center; gap: 4px; color: var(--verde-escuro); font-weight: 800; cursor: pointer; list-style: none; }
details.mais summary::-webkit-details-marker { display: none; }
details.mais summary::after { content: "›"; font-size: 16px; line-height: 1; transition: transform .15s; }
details.mais[open] summary::after { transform: rotate(90deg); }
details.mais summary:hover { text-decoration: underline; }
details.mais summary:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
details.mais .lista-locais { margin-top: 0; }

/* ---------- Ações e rodapé da rápida ---------- */
.acoes-bairro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 28px 18px; }
.acoes-bairro .cmp-abrir, .acoes-bairro .link-relatorio { margin: 0; }
.rodape-rapida {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 28px 24px; border-top: 1px solid var(--borda); font-size: 14px;
}
.abrir-completa {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 0;
  border: none; background: none; color: var(--verde-escuro); font-size: 15px; font-weight: 800; cursor: pointer;
}
.abrir-completa .icone { width: 16px; height: 16px; }
.abrir-completa:hover { text-decoration: underline; }
.abrir-completa:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 6px; }
.rodape-rapida .ver-fontes { color: var(--texto-suave); font-weight: 700; text-decoration: none; }
.rodape-rapida .ver-fontes:hover { color: var(--verde-escuro); }

/* ---------- Análise completa (painel expandido) ---------- */
.completa { display: grid; gap: 14px; padding: 12px 32px 24px; }
.completa-cabecalho { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.completa-titulo { min-width: 0; }
.completa-titulo h2 { display: inline; margin: 0 14px 0 0; font-family: var(--fonte-titulo); font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; }
.completa-titulo .sobretitulo { display: table; margin-bottom: 6px; }
.completa-titulo .meta { display: inline; margin: 0; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.completa .acoes-bairro { padding: 0; }
.completa-faixa { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) minmax(250px, 320px); gap: 20px; align-items: stretch; }
.completa-faixa .resumo, .completa-faixa .ponto-clicado { margin: 0; }
.completa-faixa .resumo { padding: 14px 18px; row-gap: 10px; }
.completa-faixa .nota-valor { font-size: 40px; }
.completa-faixa .explica-notas { margin-top: 0; }
.completa-faixa .ponto-clicado { border-radius: 28px; }

.temas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.cartao-tema {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--borda); border-radius: 24px; background: var(--elevado);
}
.cartao-tema { gap: 10px; }
.tema-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 2px; }
.tema-rodape details { margin-top: 0; }
.tema-rodape details[open] { flex-basis: 100%; }
.tema-topo { display: flex; align-items: center; gap: 10px; }
.tema-topo h3 { flex: 1; min-width: 0; margin: 0; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600; }
.tema-pos { font-size: 13px; font-weight: 700; color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tema-analise { margin: 0; color: var(--texto-suave); line-height: 1.5; font-size: 14px; }
.tema-analise strong { color: var(--texto); font-weight: 800; }
.tema-saude .bloco-icone { background: var(--tema-saude-fundo); color: var(--tema-saude); }
.tema-educacao .bloco-icone { background: var(--tema-educacao-fundo); color: var(--tema-educacao); }
.tema-infraestrutura .bloco-icone { background: var(--tema-infra-fundo); color: var(--tema-infra); }
.tema-seguranca .bloco-icone { background: var(--tema-seguranca-fundo); color: var(--tema-seguranca); }
.tema-ambiente .bloco-icone { background: var(--tema-ambiente-fundo); color: var(--tema-ambiente); }
.tema-renda .bloco-icone { background: var(--tema-renda-fundo); color: var(--tema-renda); }
.cartao-tema .linha { padding: 6px 0; font-size: 14px; }
.cartao-tema .linha-valor .comparacao { display: inline; margin-left: 6px; }
.medida-nota { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-suave); }
.medida-nota strong { color: var(--texto); font-weight: 800; }

/* Uma medida: rótulo e valor; embaixo, a faixa da posição entre os bairros e a comparação com a cidade. */
.medidas { display: grid; gap: 10px; }
.medida {
  display: grid; grid-template-columns: 120px auto minmax(0, 1fr);
  grid-template-areas: "rotulo rotulo valor" "faixa pos cidade";
  align-items: center; column-gap: 12px; row-gap: 3px;
  font-size: 14px;
}
.medida-rotulo { grid-area: rotulo; min-width: 0; }
.medida-valor { grid-area: valor; justify-self: end; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.medida .faixa { grid-area: faixa; }
.medida-pos { grid-area: pos; font-size: 12px; font-weight: 700; color: var(--texto-suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.medida-cidade { grid-area: cidade; justify-self: end; font-size: 12px; color: var(--texto-suave); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.medida-cidade b { font-weight: 800; }
.medida.compacta { grid-template-columns: minmax(0, 1fr) 72px auto auto; grid-template-areas: "rotulo faixa pos valor"; }
.medidas:has(.compacta) { gap: 9px; }
.lado-melhor { color: var(--bom); }
.lado-pior { color: var(--ruim); }
.lado-media { color: var(--medio-texto); }

/* Faixa da posição: à esquerda o pior bairro, à direita o melhor, com marcas nos terços. */
.faixa {
  position: relative; display: block; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--cinza-claro) calc(33.33% - 1px), transparent 0 calc(33.33% + 1px),
    var(--cinza-claro) 0 calc(66.67% - 1px), transparent 0 calc(66.67% + 1px), var(--cinza-claro) 0);
}
.faixa i {
  position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border: 2px solid var(--elevado); border-radius: 50%; background: var(--medio);
}
.faixa i.lado-melhor { background: var(--bom); }
.faixa i.lado-pior { background: var(--ruim); }

/* A faixa de cima e a grade se ajeitam à largura do painel (que muda com a tela). */
@container (max-width: 1080px) {
  .completa-faixa { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .completa-faixa .ponto-clicado { grid-column: 1 / -1; }
}
@container (max-width: 700px) {
  .completa { padding: 16px; }
  .completa-faixa { grid-template-columns: minmax(0, 1fr); }
  .completa-titulo h2 { display: block; font-size: 30px; }
  .completa-titulo .meta { display: block; margin-top: 4px; }
}

/* ---------- Celular: o painel fica embaixo do mapa, sem esconder ---------- */
@media (max-width: 820px) {
  .painel-controles [data-painel-acao="esconder"] { display: none; }
  .aba-painel { display: none; }
  .em-resumo, .acoes-bairro, .rodape-rapida { padding-left: 16px; padding-right: 16px; }
  .ponto-clicado { margin-left: 12px; margin-right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .painel-botao, details.mais summary::after { transition: none; }
}

/* =======================================================================================
   Conta opcional (#130): botão do topo, janela de entrar, aviso de salvo e a página Meu Mapin.
   Desenho: docs/prototipos/conta/. Uma conta que só guarda: nada do mapa depende dela.
   ===================================================================================================== */

/* Uma cor por tema (barras, avisos, mudanças) e por tipo de item do histórico. */
.cor-saude { --cor: var(--tema-saude); --cor-fundo: var(--tema-saude-fundo); }
.cor-educacao { --cor: var(--tema-educacao); --cor-fundo: var(--tema-educacao-fundo); }
.cor-infraestrutura { --cor: var(--tema-infra); --cor-fundo: var(--tema-infra-fundo); }
.cor-seguranca { --cor: var(--tema-seguranca); --cor-fundo: var(--tema-seguranca-fundo); }
.cor-ambiente { --cor: var(--tema-ambiente); --cor-fundo: var(--tema-ambiente-fundo); }
.cor-renda { --cor: var(--tema-renda); --cor-fundo: var(--tema-renda-fundo); }
.cor-bairro { --cor: var(--ruim); --cor-fundo: var(--ruim-fundo); }
.cor-comparacao { --cor: var(--verde); --cor-fundo: var(--verde-claro); }
.cor-busca { --cor: var(--sol-escuro); --cor-fundo: var(--sol-claro); }
.cor-relatorio { --cor: var(--tema-educacao); --cor-fundo: var(--tema-educacao-fundo); }

/* ---------- Topo: "Entrar" ou o menu "Meu Mapin" ---------- */
.conta-topo { position: relative; display: flex; flex: none; }
.conta-entrar, .conta-botao {
  display: inline-flex; align-items: center; gap: 7px; height: 38px;
  border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.conta-entrar { padding: 0 16px 0 13px; border: 1.5px solid var(--topo-borda-forte); background: transparent; color: var(--topo-texto); }
.conta-entrar:hover { background: var(--topo-hover); }
.conta-entrar .icone { width: 17px; height: 17px; }
.conta-botao { padding: 0 10px 0 4px; border: 1px solid var(--borda); background: var(--elevado); color: var(--texto); }
.conta-botao:hover { background: var(--hover); }
.conta-botao > .icone { width: 16px; height: 16px; color: var(--texto-suave); transition: transform .15s; }
.conta-botao[aria-expanded="true"] > .icone { transform: rotate(180deg); }
.conta-entrar:focus-visible, .conta-botao:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.conta-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--verde); color: var(--sobre-verde); font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700;
}
.conta-avatar.sem-conta { background: var(--ruim-fundo); color: var(--ruim); }
.conta-avatar .icone { width: 15px; height: 15px; fill: currentColor; }
.conta-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 250px; padding: 6px;
  border: 1px solid var(--borda); border-radius: 16px; background: var(--elevado);
  box-shadow: 0 16px 40px rgba(var(--sombra-rgb), 0.16);
}
.conta-menu[hidden] { display: none; }
.conta-menu-quem { display: flex; flex-direction: column; margin: 0 0 4px; padding: 8px 10px 10px; border-bottom: 1px solid var(--borda); }
.conta-menu-quem strong { font-size: 14px; }
.conta-menu-quem small { color: var(--texto-suave); font-size: 12px; line-height: 1.35; }
.conta-menu a, .conta-menu button {
  display: block; width: 100%; padding: 8px 10px; border: none; border-radius: 10px; background: none;
  color: var(--texto); font-size: 14px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
}
.conta-menu a:hover, .conta-menu button:hover, .conta-menu a:focus-visible, .conta-menu button:focus-visible { background: var(--hover); outline: none; }
.conta-menu .conta-menu-entrar { color: var(--verde-escuro); }

/* No topo das páginas à parte, o menu da conta fica só com o avatar até as telas largas. */
@media (max-width: 1500px) { .topo .conta-botao-nome { display: none; } }

/* No mapa, no celular, o topo é apertado: só o ícone ou o avatar. */
@media (max-width: 820px) {
  .topo .conta-entrar { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .topo .conta-entrar span, .topo .conta-botao-nome, .topo .conta-botao > .icone { display: none; }
  .topo .conta-botao { height: 32px; padding: 0; border: none; background: none; }
}
@media (max-width: 600px) {
  /* O selo "Dados oficiais" fica só com o ponto colorido (o texto segue no title e para leitores de tela): sobra
     lugar para a marca e para o botão da conta. */
  .topo .selo-dados { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 0; }
  .conta-botao-nome, .conta-botao > .icone { display: none; }
  .conta-botao { padding: 0; border: none; background: none; }
}

/* ---------- Janela "Entrar ou criar conta" ---------- */
.com-janela, .com-janela body { overflow: hidden; }
dialog.entrar {
  width: min(900px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0;
  border: none; border-radius: 28px; background: var(--elevado); color: var(--texto);
  box-shadow: 0 30px 80px rgba(var(--sombra-rgb), 0.3); overflow: hidden;
}
dialog.entrar[open] { display: grid; grid-template-columns: 350px minmax(0, 1fr); animation: entrar-surge .2s ease-out; }
dialog.entrar::backdrop { background: rgba(17, 17, 17, 0.42); }
@keyframes entrar-surge { from { opacity: 0; transform: translateY(10px); } }
.entrar-lado {
  position: relative; display: flex; flex-direction: column; gap: 20px; padding: 36px 36px 28px; overflow: hidden;
  background: var(--cartao-verde); color: var(--sobre-cartao-verde);
}
.entrar-silhueta { position: absolute; right: -60px; bottom: 30px; width: 260px; height: auto; opacity: .16; pointer-events: none; }
.entrar-silhueta path { fill: var(--sobre-cartao-verde); stroke: var(--cartao-verde); stroke-width: 1; }
.entrar-logo .icone { width: 38px; height: 38px; color: var(--sobre-cartao-verde-suave); stroke-width: 1.6; }
.entrar-lado-titulo { position: relative; margin: 10px 0 8px; font-family: var(--fonte-titulo); font-size: 27px; line-height: 1.22; font-weight: 600; }
.entrar-vantagens { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.entrar-vantagens li { display: grid; grid-template-columns: 38px 1fr; column-gap: 14px; align-items: center; }
.entrar-vantagens span {
  grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.1); color: var(--sobre-cartao-verde);
}
.entrar-vantagens .icone { width: 17px; height: 17px; }
.entrar-vantagens strong { font-size: 14px; }
.entrar-vantagens small { color: var(--sobre-cartao-verde-suave); font-size: 13px; }
.entrar-lado-rodape { position: relative; margin: auto 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.16); color: var(--sobre-cartao-verde-suave); font-size: 13px; line-height: 1.5; }

.entrar-corpo { position: relative; padding: 44px 56px 30px; overflow-y: auto; }
.entrar-alca { display: none; }
.entrar-fechar {
  position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 38px; height: 38px;
  border: none; border-radius: 50%; background: var(--superficie); color: var(--texto); cursor: pointer;
}
.entrar-fechar:hover { background: var(--hover); }
.entrar-corpo h2 { margin: 0 0 6px; font-family: var(--fonte-titulo); font-size: 31px; line-height: 1.15; font-weight: 600; color: var(--verde-escuro); }
.entrar-lead { margin: 0 0 26px; color: var(--texto-suave); font-size: 14px; }
.entrar-google {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 52px;
  border: 1.5px solid var(--borda); border-radius: 14px; background: var(--elevado);
  font-size: 15px; font-weight: 800; cursor: pointer; transition: border-color .15s, background .15s;
}
.entrar-google:hover { border-color: var(--verde); background: var(--cartao); }
/* Google desligado no servidor (sem o id do cliente OAuth): o botão continua, apagado, e explica ao clicar. */
.entrar-google.desligado { opacity: .55; }
.icone-google { width: 22px; height: 22px; flex: none; }
.entrar-ou { display: flex; align-items: center; gap: 14px; margin: 28px 0 18px; color: var(--texto-suave); font-size: 13px; }
.entrar-ou::before, .entrar-ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }
.entrar-form label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 800; }
.entrar-campo {
  display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px;
  border: 1.5px solid var(--borda); border-radius: 14px; background: var(--elevado); transition: border-color .15s, box-shadow .15s;
}
.entrar-campo:focus-within { border-color: var(--verde); box-shadow: 0 0 0 4px var(--verde-claro); }
.entrar-campo .icone { color: var(--texto-suave); }
.entrar-campo input { flex: 1; min-width: 0; border: none; outline: none; background: none; color: var(--texto); font: inherit; font-size: 16px; }
.entrar-enviar {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; margin-top: 16px;
  border: none; border-radius: 14px; background: var(--acao); color: var(--sobre-acao);
  font-size: 16px; font-weight: 800; cursor: pointer; transition: background .15s;
}
.entrar-enviar:hover { background: var(--acao-forte); }
.entrar-enviar:disabled { opacity: .6; cursor: progress; }
.entrar-aviso { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--ruim-fundo); color: var(--texto); font-size: 14px; line-height: 1.5; }
.entrar-aviso.fora { background: var(--sol-claro); }
.entrar-aviso[hidden] { display: none; }
.entrar-aviso a { color: var(--verde-escuro); font-weight: 800; }
.entrar-senha { display: flex; gap: 10px; margin: 16px 0 0; color: var(--texto-suave); font-size: 13px; line-height: 1.5; }
.entrar-senha .icone { width: 15px; height: 15px; margin-top: 2px; }
.entrar-termos { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: 13px; line-height: 1.5; }
.entrar-confira-icone { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; background: var(--verde-claro); color: var(--verde-escuro); }
.entrar-confira-acoes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--borda); }
.entrar-link { padding: 4px 0; border: none; background: none; color: var(--verde-escuro); font-size: 14px; font-weight: 800; cursor: pointer; }
.entrar-link:disabled { color: var(--texto-suave); font-weight: 700; cursor: default; }
dialog.entrar button:focus-visible, dialog.entrar a:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* No celular, a janela vira uma folha que sobe de baixo, com o mapa ao fundo. */
@media (max-width: 760px) {
  dialog.entrar { width: 100%; max-width: 100%; max-height: 92%; margin: auto 0 0; border-radius: 26px 26px 0 0; }
  dialog.entrar[open] { display: block; overflow-y: auto; animation: entrar-sobe .22s ease-out; }
  @keyframes entrar-sobe { from { transform: translateY(40px); opacity: .6; } }
  .entrar-lado { display: none; }
  .entrar-corpo { padding: 14px 24px 28px; }
  .entrar-alca { display: block; width: 44px; height: 5px; margin: 0 auto 18px; border-radius: 999px; background: var(--cinza-claro); }
  .entrar-fechar { top: 14px; right: 14px; width: 34px; height: 34px; }
  .entrar-corpo h2 { font-size: 27px; padding-right: 36px; }
}
@media (prefers-reduced-motion: reduce) { dialog.entrar[open] { animation: none; } }

/* ---------- Aviso rápido embaixo da tela e convite para entrar ---------- */
.conta-aviso {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: calc(100% - 32px); padding: 12px 18px;
  border-radius: 16px; background: var(--cartao-verde); color: var(--sobre-cartao-verde);
  box-shadow: 0 16px 40px rgba(var(--sombra-rgb), 0.25); font-size: 14px; font-weight: 700;
}
.conta-aviso[hidden] { display: none; }
.conta-aviso > span { display: inline-flex; align-items: center; gap: 8px; }
.conta-aviso .icone { width: 16px; height: 16px; color: var(--sol); }
.conta-aviso button, .conta-aviso a {
  padding: 0; border: none; background: none; color: var(--sol); font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer;
}
.conta-aviso.convite { left: 24px; transform: none; display: block; width: 340px; padding: 18px 20px; border-radius: 20px; font-weight: 500; }
.convite p { margin: 0; color: var(--sobre-cartao-verde-suave); font-size: 14px; }
.convite .convite-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; color: var(--sobre-cartao-verde); font-size: 15px; font-weight: 800; }
.convite .convite-titulo .icone { width: 18px; height: 18px; fill: var(--sol); stroke: var(--sol); }
.convite-botoes { display: flex; align-items: center; gap: 22px; margin-top: 16px; }
.conta-aviso .convite-entrar { padding: 10px 34px; border-radius: 999px; background: var(--sol); color: var(--sobre-verde); }
.conta-aviso .convite-depois { color: var(--sobre-cartao-verde); }
.conta-aviso button:focus-visible, .conta-aviso a:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 600px) {
  .conta-aviso.convite { left: 16px; right: 16px; width: auto; bottom: 16px; }
}

/* ---------- Coração: salvar bairro, comparação e busca ---------- */
.botao-salvar {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px;
  border: 2px solid var(--verde-claro); border-radius: 999px; background: var(--elevado);
  font-size: 14px; font-weight: 800; color: var(--verde-escuro); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.botao-salvar .icone { width: 16px; height: 16px; color: var(--ruim); }
.botao-salvar:hover { background: var(--verde-claro); border-color: var(--verde); }
.botao-salvar[aria-pressed="true"] { background: var(--verde-claro); border-color: var(--verde-claro); }
.botao-salvar[aria-pressed="true"] .icone { fill: var(--ruim); }
.botao-salvar:disabled { opacity: .5; cursor: default; background: var(--elevado); }
.botao-salvar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.cmp-salvar { margin: -4px 28px 16px; }
.busca-salvar { height: 38px; padding: 0 16px 0 12px; border-width: 1px; border-color: var(--borda); font-size: 13px; font-weight: 700; color: var(--texto); }
@media (max-width: 820px) { .cmp-salvar { margin-left: 16px; margin-right: 16px; } }

/* ---------- Meu Mapin: página ---------- */
body.conta-pagina { background: var(--fundo); }
.mm-nav-topo { margin-right: 4px; }
.mm-nav-topo a[aria-current] { background: var(--sol-claro); color: var(--texto); }
@media (max-width: 1000px) { .mm-nav-topo { display: none; } }

.mm { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - var(--altura-topo)); }
.mm-lateral {
  position: sticky; top: var(--altura-topo); display: flex; flex-direction: column; gap: 18px;
  height: calc(100vh - var(--altura-topo)); padding: 26px 18px 18px; overflow-y: auto;
  border-right: 1px solid var(--borda); background: var(--fundo);
}
.mm-perfil { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.mm-perfil strong { display: block; font-size: 15px; }
.mm-perfil small { color: var(--texto-suave); font-size: 13px; }
.mm-avatar {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--verde); color: var(--sobre-verde); font-family: var(--fonte-titulo); font-size: 22px; font-weight: 700;
}
.mm-avatar.sem-conta { background: var(--ruim-fundo); color: var(--ruim); }
.mm-avatar .icone { width: 20px; height: 20px; fill: currentColor; }
.mm-nav { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mm-nav-conta { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda); }
.mm-nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: none; border-radius: 12px;
  background: none; color: var(--texto); font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.mm-nav-item > span:first-of-type { flex: 1; }
.mm-nav-item .icone { width: 18px; height: 18px; color: var(--texto-suave); }
.mm-nav-item:hover { background: var(--hover); }
.mm-nav-item[aria-current] { background: var(--verde-claro); color: var(--verde-escuro); font-weight: 800; }
.mm-nav-item[aria-current] .icone { color: var(--verde-escuro); }
.mm-nav-item:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; }
.mm-contagem { color: var(--texto-suave); font-size: 13px; font-weight: 600; }
.mm-selo-novo { padding: 1px 9px; border-radius: 999px; background: var(--sol-claro); color: var(--sol-escuro); font-size: 12px; font-weight: 800; }
.mm-lateral-rodape { margin-top: auto; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 16px; background: var(--cartao); }
.mm-lateral-rodape p { margin: 0; color: var(--texto-suave); font-size: 13px; line-height: 1.5; }
.mm-lateral-rodape .mm-lateral-rodape-titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--verde-escuro); font-size: 14px; font-weight: 800; }
.mm-lateral-rodape .icone { width: 15px; height: 15px; }

.mm-conteudo { min-width: 0; padding: 30px 36px 64px; outline: none; }
.mm-conteudo a:focus-visible, .mm-conteudo button:focus-visible, .mm-conteudo input:focus-visible, .mm-conteudo select:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.mm-cabeca { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.mm-cabeca h1 { margin: 0 0 6px; font-family: var(--fonte-titulo); font-size: 38px; line-height: 1.1; font-weight: 600; color: var(--verde-escuro); }
.mm-cabeca p { margin: 0; max-width: 640px; color: var(--texto-suave); font-size: 15px; }
.mm-cabeca-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mm-aviso-api { margin: -10px 0 22px; padding: 10px 14px; border-radius: 12px; background: var(--sol-claro); font-size: 14px; }
.mm-atalhos { display: none; }
.mm-sobretitulo { margin: 0 0 4px; color: var(--sol-escuro); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mm-meta { margin: 2px 0 0; color: var(--texto-suave); font-size: 13px; }
.mm-link { padding: 0; border: none; background: none; color: var(--verde-escuro); font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap; }
.mm-link:hover { text-decoration: underline; }
.mm-link.perigo { color: var(--ruim); }
.mm-link:disabled { opacity: .5; cursor: default; }
.mm-texto-vazio { margin: 6px 0; color: var(--texto-suave); font-size: 14px; line-height: 1.55; }
.mm-texto-vazio a { color: var(--verde-escuro); font-weight: 800; }
.mm-nota-rodape { margin-top: 20px; color: var(--texto-suave); font-size: 13px; }
.mm-nota-rodape a { color: var(--verde-escuro); font-weight: 700; }
.mm-x { color: var(--sol); font-weight: 800; }

.mm-cartao, .mm-continuar, .mm-bairro, .mm-comparacao, .mm-busca-salva, .mm-detalhe {
  border: 1px solid var(--borda); border-radius: 20px; background: var(--elevado); box-shadow: var(--sombra-leve);
}
.mm-cartao { padding: 20px 22px; }
.mm-cartao h2, .mm-secao h2, .mm-detalhe h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600; color: var(--verde-escuro); }
.mm-secao { margin-top: 30px; outline: none; }
.mm-secao-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.mm-secao-cabeca h2 { margin-right: auto; }
.mm-duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 26px; }

/* Botões */
.mm-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1.5px solid var(--borda); border-radius: 12px; background: var(--elevado); color: var(--texto);
  font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s;
}
.mm-botao:hover { background: var(--hover); }
.mm-botao .icone { width: 16px; height: 16px; }
.mm-botao.principal { border-color: var(--acao); background: var(--acao); color: var(--sobre-acao); }
.mm-botao.principal:hover { background: var(--acao-forte); border-color: var(--acao-forte); }
.mm-botao.claro { border-color: var(--verde-claro); background: var(--verde-claro); color: var(--verde-escuro); }
.mm-botao.claro:hover { background: var(--verde-claro-hover); }
.mm-botao.perigo { border-color: var(--ruim); color: var(--ruim); background: var(--elevado); }
.mm-botao.perigo:hover { background: var(--ruim-fundo); }
.mm-botao:disabled { opacity: .5; cursor: default; }
.mm-botao.pequeno { min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; }
.mm-botao.largo { width: 100%; }

/* Nota geral (mesmas cores do mapa) */
.mm-nota {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; flex: none;
  border-radius: 50%; background: var(--verde-escuro); color: var(--sobre-verde); font-size: 15px; font-weight: 800;
}
.mm-nota.medio { background: var(--medio); color: #111111; }
.mm-nota.ruim { background: var(--ruim); color: #fff; }
.mm-nota.sem { background: var(--sem-dado-fundo); color: var(--texto-suave); }
.mm-nota.grande { min-width: 48px; height: 48px; font-size: 18px; }

/* Vazio */
.mm-vazio { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border: 1.5px dashed var(--borda); border-radius: 20px; }
.mm-vazio-icone { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--verde-claro); color: var(--verde-escuro); }
.mm-vazio strong { display: block; margin-bottom: 4px; font-size: 16px; }
.mm-vazio p { margin: 0 0 12px; color: var(--texto-suave); font-size: 14px; line-height: 1.55; }

/* Continuar de onde parou */
.mm-continuar { display: flex; align-items: center; gap: 22px; padding: 14px 22px 14px 14px; }
.mm-continuar-mapa { flex: none; display: block; border-radius: 14px; overflow: hidden; }
.mm-mini { display: block; width: 128px; height: 80px; background: var(--superficie); }
.mm-mini path { fill: var(--cartao); stroke: var(--icone-apagado); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.mm-mini path.destaque { fill: var(--verde); stroke: var(--verde-escuro); }
.mm-mini.sem-mapa { display: grid; place-items: center; color: var(--verde); }
.mm-mini.sem-mapa .icone { width: 26px; height: 26px; }
.mm-continuar-texto { flex: 1; min-width: 0; }
.mm-continuar-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0; }
.mm-continuar-linha strong { font-family: var(--fonte-titulo); font-size: 25px; font-weight: 600; color: var(--verde-escuro); }
.mm-continuar-linha span { color: var(--texto-suave); font-size: 14px; }
.mm-continuar .mm-botao { min-height: 46px; padding: 0 22px; }

/* Bairros salvos */
.mm-bairros { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mm-bairro { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px; }
.mm-bairro header { display: flex; align-items: flex-start; gap: 8px; }
.mm-bairro header > div { flex: 1; min-width: 0; }
.mm-bairro h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; line-height: 1.2; }
.mm-bairro h3 a { color: var(--verde-escuro); text-decoration: none; }
.mm-bairro h3 a:hover { text-decoration: underline; }
.mm-bairro header p { margin: 2px 0 0; color: var(--texto-suave); font-size: 13px; }
.mm-coracao {
  display: grid; place-items: center; width: 34px; height: 38px; padding: 0; flex: none;
  border: none; border-radius: 10px; background: none; color: var(--ruim); cursor: pointer;
}
.mm-coracao .icone { width: 19px; height: 19px; fill: currentColor; }
button.mm-coracao:hover { background: var(--ruim-fundo); }
.mm-barras { display: grid; gap: 3px; margin: 0; }
.mm-barra { display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; }
.mm-barra dt { color: var(--texto-suave); }
.mm-barra dd { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 8px; margin: 0; }
.mm-barra strong { font-size: 12px; text-align: right; }
.mm-trilho { display: block; height: 6px; border-radius: 999px; background: var(--superficie); overflow: hidden; }
.mm-trilho i { display: block; height: 100%; border-radius: 999px; background: var(--cor, var(--verde)); }
.mm-anotacao {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-top: auto; padding: 7px 10px; border: none; border-radius: 10px;
  background: var(--sol-claro); color: var(--sol-escuro); font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
}
.mm-anotacao span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-anotacao .icone { width: 14px; height: 14px; }
.mm-anotacao.vazia { background: none; color: var(--texto-suave); font-weight: 600; }
.mm-anotacao.vazia:hover { background: var(--hover); }
.mm-anotar, .mm-renomear { display: flex; gap: 6px; margin-top: auto; }
.mm-anotar input, .mm-renomear input {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1.5px solid var(--verde); border-radius: 10px;
  background: var(--elevado); color: var(--texto); font: inherit; font-size: 14px;
}
.mm-renomear { margin: 0; }

/* Relatórios (lista curta do início) */
.mm-lista-rel { margin: 0; padding: 0; list-style: none; }
.mm-lista-rel li + li { border-top: 1px solid var(--borda); }
.mm-lista-rel a { display: flex; align-items: center; gap: 12px; padding: 11px 2px; color: inherit; text-decoration: none; }
.mm-lista-rel a:hover strong { text-decoration: underline; }
.mm-lista-rel a > .icone { width: 34px; height: 34px; padding: 8px; flex: none; border-radius: 10px; background: var(--superficie); color: var(--texto-suave); }
.mm-lista-rel a > span:not(.mm-situacao) { flex: 1; min-width: 0; }
.mm-lista-rel strong { display: block; font-size: 15px; }
.mm-lista-rel small { color: var(--texto-suave); font-size: 13px; }
.mm-situacao {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px; flex: none;
  background: var(--verde-claro); color: var(--verde-escuro); font-size: 12px; font-weight: 800; white-space: nowrap;
}
.mm-situacao .icone { width: 13px; height: 13px; }
.mm-situacao.mudou { background: var(--sol-claro); color: var(--sol-escuro); }
.mm-situacao.sem { background: var(--superficie); color: var(--texto-suave); font-weight: 600; }

/* Novidades e avisos */
.mm-novidades { display: grid; gap: 10px; }
.mm-novidade { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 16px; background: var(--elevado); }
.mm-novidade:first-child { background: var(--sol-claro); border-color: transparent; }
.mm-novidade-icone { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--cor-fundo); color: var(--cor); }
.mm-novidade-icone .icone { width: 17px; height: 17px; }
.mm-novidade-texto { flex: 1; min-width: 0; }
.mm-novidade-texto > strong { display: block; font-size: 15px; }
.mm-novidade-texto small { color: var(--texto-suave); font-size: 13px; }
.mm-novidade-detalhe { margin: 10px 0 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.6; }
.mm-novidade-detalhe s { color: var(--texto-suave); }
.mm-novidade-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.mm-novidade-acoes small { color: var(--texto-suave); font-size: 12px; }

/* Relatórios: ferramentas, lista e o que mudou */
.mm-ferramentas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.mm-busca, .mm-select select {
  height: 44px; border: 1px solid var(--borda); border-radius: 999px; background: var(--elevado); color: var(--texto); font: inherit; font-size: 14px;
}
.mm-busca { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; max-width: 320px; padding: 0 16px; }
.mm-busca:focus-within { border-color: var(--verde); }
.mm-busca .icone { width: 17px; height: 17px; color: var(--texto-suave); }
.mm-busca input { flex: 1; min-width: 0; border: none; outline: none !important; background: none; color: var(--texto); font: inherit; font-size: 14px; }
.mm-select select { padding: 0 34px 0 16px; font-weight: 700; cursor: pointer; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 13px center; background-size: 5px 5px; background-repeat: no-repeat; }
.mm-select select:disabled { opacity: 1; cursor: default; }
.mm-ferramentas .mm-botao { height: 44px; margin-left: auto; }
.mm-rel-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.mm-rel-tabela { padding: 8px 14px 10px; }
.mm-rel-titulos, .mm-rel-abrir { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 140px; gap: 12px; align-items: center; }
.mm-rel-titulos { padding: 12px 12px; border-bottom: 1px solid var(--borda); color: var(--texto-suave); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mm-rel-titulos span:last-child { padding-right: 40px; }
.mm-rel-lista { margin: 0; padding: 0; list-style: none; }
.mm-rel { position: relative; display: flex; align-items: center; gap: 4px; border-radius: 14px; }
.mm-rel + .mm-rel { border-top: 1px solid var(--borda); }
.mm-rel.aberto { background: var(--verde-claro); border-color: transparent; box-shadow: inset 4px 0 0 var(--verde); }
.mm-rel.aberto + .mm-rel { border-top-color: transparent; }
.mm-rel-abrir { flex: 1; min-width: 0; padding: 14px 12px; border: none; background: none; color: inherit; text-align: left; cursor: pointer; }
.mm-rel-endereco strong { display: block; font-size: 15px; }
.mm-rel-endereco small, .mm-rel-data small { display: flex; align-items: center; gap: 4px; color: var(--texto-suave); font-size: 13px; }
.mm-rel-endereco .icone { width: 13px; height: 13px; }
.mm-rel-data { font-size: 14px; font-weight: 600; }
.mm-rel .mm-situacao { justify-self: start; }
.mm-detalhe { position: sticky; top: calc(var(--altura-topo) + 20px); display: grid; gap: 12px; padding: 20px; }
.mm-detalhe h2 { font-size: 24px; }
.mm-detalhe-onde { margin: -8px 0 4px; color: var(--texto-suave); font-size: 14px; }
.mm-mudanca { padding: 14px 16px; border: 1px solid var(--borda); border-radius: 14px; background: var(--elevado); }
.mm-mudanca p { margin: 0; }
.mm-mudanca-tema { display: flex; align-items: center; gap: 8px; color: var(--cor); font-size: 13px; font-weight: 800; }
.mm-mudanca-tema i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); }
.mm-mudanca-nome { margin: 4px 0 6px !important; font-size: 14px; font-weight: 700; }
.mm-mudanca-nome small { display: block; color: var(--texto-suave); font-size: 12px; font-weight: 600; }
.mm-mudanca-valores { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.mm-mudanca-valores s { color: var(--texto-suave); font-family: var(--fonte-titulo); font-size: 17px; }
.mm-mudanca-valores strong { font-family: var(--fonte-titulo); font-size: 20px; }
.mm-mudanca-valores small { margin-left: auto; color: var(--texto-suave); font-size: 12px; }
.mm-sem-mudanca { display: flex; gap: 8px; margin: 2px 0; color: var(--texto-suave); font-size: 13px; line-height: 1.5; }
.mm-sem-mudanca .icone { width: 15px; height: 15px; margin-top: 2px; color: var(--verde); }
.mm-detalhe-mais { margin: 0; color: var(--texto-suave); font-size: 13px; }
.mm-detalhe .mm-botao { min-height: 48px; }
.mm-detalhe-nota { margin: 0; color: var(--texto-suave); font-size: 12px; line-height: 1.5; }

/* Menu "…" */
.mm-menu-lugar { position: relative; flex: none; }
.mm-mais { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--texto-suave); cursor: pointer; }
.mm-mais:hover, .mm-mais[aria-expanded="true"] { background: var(--hover); color: var(--texto); }
.mm-menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 230px; padding: 6px;
  border: 1px solid var(--borda); border-radius: 14px; background: var(--elevado); box-shadow: 0 16px 40px rgba(var(--sombra-rgb), 0.16);
}
.mm-menu a, .mm-menu button {
  display: block; width: 100%; padding: 9px 10px; border: none; border-radius: 9px; background: none;
  color: var(--texto); font-size: 14px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer;
}
.mm-menu a:hover, .mm-menu button:hover { background: var(--hover); }
.mm-menu .perigo { color: var(--ruim); }

/* Comparações: barras espelhadas */
.mm-comparacoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.mm-comparacao { display: flex; flex-direction: column; padding: 18px 18px 16px; }
.mm-comparacao h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600; color: var(--verde-escuro); }
.mm-comparacao-lados { display: flex; justify-content: space-between; gap: 10px; margin: 16px 0 10px; }
.mm-comparacao-lados > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mm-comparacao-lados strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-espelhos { display: grid; gap: 2px; margin-bottom: 16px; }
.mm-espelho { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: end; gap: 6px; font-size: 12px; }
.mm-espelho-valor { padding-bottom: 1px; color: var(--texto-suave); font-weight: 700; }
.mm-espelho-valor:last-child { text-align: right; }
.mm-espelho-barras { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; }
.mm-espelho-tema { grid-column: 1 / -1; color: var(--texto-suave); font-size: 11px; text-align: center; line-height: 1.3; }
.mm-espelho-lado { display: flex; height: 7px; border-radius: 999px; background: var(--superficie); overflow: hidden; }
.mm-espelho-lado.lado-a { justify-content: flex-end; }
.mm-espelho-lado i { display: block; height: 100%; border-radius: 999px; background: var(--cor); }
.mm-espelho-lado.perde i { opacity: .38; }
.mm-comparacao-acoes { display: flex; gap: 8px; margin-top: auto; }

/* Buscas salvas */
.mm-legenda { display: flex; gap: 14px; margin: 0 auto 0 4px; padding: 0; list-style: none; color: var(--texto-suave); font-size: 13px; }
.mm-legenda li { display: flex; align-items: center; gap: 6px; }
.mm-legenda li::before { content: ""; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--verde); background: var(--verde-claro); }
.mm-legenda li.nivel-i::before { border-color: var(--medio); background: var(--sol-claro); }
.mm-buscas { display: grid; gap: 12px; }
.mm-busca-salva { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 16px 18px; }
.mm-busca-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--verde-claro); color: var(--verde-escuro); }
.mm-busca-nome { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.mm-busca-nome h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; color: var(--verde-escuro); }
.mm-busca-nome small { color: var(--texto-suave); font-size: 13px; }
.mm-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mm-etiquetas li { padding: 4px 10px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-escuro); font-size: 12px; font-weight: 700; }
.mm-etiquetas li.nivel-i { background: var(--sol-claro); color: var(--sol-escuro); }
.mm-busca-resultado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.mm-busca-resultado strong { font-size: 15px; }
.mm-busca-novo { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--sol-claro); color: var(--sol-escuro); font-size: 12px; font-weight: 800; }
.mm-busca-novo.saiu { background: var(--superficie); color: var(--texto-suave); }
.mm-busca-novo .icone { width: 13px; height: 13px; }
.mm-busca-acoes { display: flex; align-items: center; gap: 6px; }
.mm-busca-acoes .mm-botao { min-height: 46px; }

/* Histórico */
.mm-chave { position: relative; display: inline-flex; align-items: center; gap: 16px; cursor: pointer; }
.mm-cabeca .mm-chave { height: 46px; padding: 0 14px 0 18px; border: 1px solid var(--borda); border-radius: 999px; background: var(--elevado); font-size: 14px; font-weight: 800; }
.mm-chave input { position: absolute; opacity: 0; width: 44px; height: 26px; right: 14px; margin: 0; cursor: pointer; }
.mm-chave-linha input { right: 0; }
.mm-chave i { position: relative; width: 44px; height: 26px; flex: none; border-radius: 999px; background: var(--cinza-claro); transition: background .15s; }
.mm-chave i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.mm-chave input:checked + i { background: var(--verde); }
.mm-chave input:checked + i::after { transform: translateX(18px); }
.mm-chave input:focus-visible + i { outline: 2px solid var(--foco); outline-offset: 2px; }
.mm-chave input:disabled, .mm-chave input:disabled + i { opacity: .5; cursor: default; }
.mm-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.mm-filtros button { height: 38px; padding: 0 16px; border: 1px solid var(--borda); border-radius: 999px; background: var(--elevado); font-size: 14px; font-weight: 700; cursor: pointer; }
.mm-filtros button:hover { background: var(--hover); }
.mm-filtros button[aria-pressed="true"] { border-color: var(--acao-forte); background: var(--acao-forte); color: var(--sobre-acao); }
.mm-hist-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.mm-hist-lista { padding: 10px 14px; }
.mm-hist-lista ul { margin: 0; padding: 0; list-style: none; }
.mm-hist-dia { margin: 12px 8px 4px !important; font-family: inherit !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .05em; text-transform: uppercase; color: var(--sol-escuro) !important; }
.mm-hist { display: grid; grid-template-columns: 50px 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 12px; }
.mm-hist:hover, .mm-hist:focus-within { background: var(--superficie); }
.mm-hist time { color: var(--texto-suave); font-size: 13px; }
.mm-hist-icone { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--borda); border-radius: 50%; color: var(--cor); }
.mm-hist-icone .icone { width: 16px; height: 16px; }
.mm-hist-texto strong { display: block; font-size: 15px; font-weight: 700; }
.mm-hist-texto small { color: var(--texto-suave); font-size: 13px; }
.mm-hist .mm-link, .mm-hist-tirar { opacity: 0; }
.mm-hist:hover .mm-link, .mm-hist:hover .mm-hist-tirar, .mm-hist:focus-within .mm-link, .mm-hist:focus-within .mm-hist-tirar { opacity: 1; }
@media (hover: none) { .mm-hist .mm-link, .mm-hist-tirar { opacity: 1; } }
.mm-hist-tirar { display: grid; place-items: center; width: 30px; height: 30px; border: none; border-radius: 50%; background: var(--elevado); color: var(--texto-suave); cursor: pointer; }
.mm-hist-tirar .icone { width: 14px; height: 14px; }
.mm-hist-prazo { display: flex; align-items: center; gap: 8px; margin: 10px 8px 4px; padding-top: 12px; border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: 13px; }
.mm-hist-prazo .icone { width: 15px; height: 15px; }
.mm-hist-lado { display: grid; gap: 18px; }
.mm-vistos { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.mm-vistos li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 28px auto; align-items: center; gap: 10px; }
.mm-vistos a { color: var(--texto); font-weight: 700; text-decoration: none; }
.mm-vistos a:hover { text-decoration: underline; }
.mm-vistos .mm-trilho { margin-top: 5px; height: 5px; }
.mm-vistos .mm-trilho i { background: var(--verde); }
.mm-vistos small { color: var(--texto-suave); font-size: 12px; }
.mm-vistos .mm-botao .icone { width: 13px; height: 13px; color: var(--ruim); }
.mm-coracao.cheio { width: auto; height: auto; justify-self: end; padding-right: 8px; }
.mm-pausado h2 { display: flex; align-items: center; gap: 10px; font-family: inherit; font-size: 15px; font-weight: 800; color: var(--texto); }
.mm-pausado h2 .icone { width: 16px; height: 16px; color: var(--texto-suave); }
.mm-pausado p { margin: 10px 0 0; color: var(--texto-suave); font-size: 14px; line-height: 1.6; }
.mm-pausado.ativo { border-color: var(--medio); background: var(--sol-claro); }

/* Conta e acessos */
.mm-conta-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.mm-conta-coluna { display: grid; gap: 18px; }
.mm-conta-grade .mm-cartao h2 { margin-bottom: 12px; }
.mm-dados { margin: 0; }
.mm-dado { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borda); font-size: 14px; }
.mm-dado dt { color: var(--texto-suave); }
.mm-dado dd { margin: 0; font-weight: 700; }
.mm-verificado { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-escuro); font-size: 11px; }
.mm-verificado .icone { width: 11px; height: 11px; }
.mm-chaves { display: grid; gap: 14px; margin-top: 12px; }
.mm-chave-linha { display: flex; justify-content: space-between; }
.mm-chave-linha strong { display: block; font-size: 14px; }
.mm-chave-linha small { color: var(--texto-suave); font-size: 12px; }
.mm-privacidade-botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.mm-privacidade-botoes .mm-botao { flex: 1 1 180px; min-height: 46px; }
.mm-aparelhos, .mm-entradas { margin: 0; padding: 0; list-style: none; }
.mm-aparelhos li { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.mm-aparelhos li > span:nth-child(2) { flex: 1; min-width: 0; }
.mm-aparelhos strong, .mm-entradas strong { display: block; font-size: 15px; }
.mm-aparelhos small, .mm-entradas small { color: var(--texto-suave); font-size: 13px; }
.mm-aparelho-icone { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--superficie); color: var(--texto-suave); }
.mm-entradas li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--borda); font-size: 14px; }
.mm-entradas time { font-weight: 700; }
.mm-entradas .nao-usado strong { color: var(--ruim); }

/* Meu Mapin em telas menores */
@media (max-width: 1240px) {
  .mm-rel-grade, .mm-hist-grade { grid-template-columns: minmax(0, 1fr); }
  .mm-detalhe { position: static; }
  .mm-hist-lado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 1100px) {
  .mm { grid-template-columns: 236px minmax(0, 1fr); }
  .mm-conteudo { padding: 26px 24px 56px; }
  .mm-duas, .mm-conta-grade { grid-template-columns: minmax(0, 1fr); }
  .mm-busca-salva { grid-template-columns: 46px minmax(0, 1fr); }
  .mm-busca-resultado { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; }
  .mm-busca-acoes { grid-column: 2; }
}
/* Celular: a lateral vira uma fila de atalhos rolável logo abaixo do título. */
@media (max-width: 820px) {
  .mm { display: block; }
  .mm-lateral { display: none; }
  .mm-conteudo { padding: 20px 16px 48px; }
  .mm-cabeca { margin-bottom: 12px; }
  .mm-cabeca h1 { font-size: 30px; }
  .mm-atalhos { display: flex; gap: 8px; margin: 0 -16px 20px; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .mm-atalhos a {
    flex: none; padding: 7px 14px; border: 1px solid var(--borda); border-radius: 999px; background: var(--elevado);
    color: var(--texto); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap;
  }
  .mm-atalhos a[aria-current] { border-color: var(--verde-claro); background: var(--verde-claro); color: var(--verde-escuro); }
  .mm-atalhos span { color: var(--texto-suave); font-weight: 600; }
  .mm-continuar { flex-wrap: wrap; gap: 12px 16px; padding: 14px; }
  .mm-continuar-mapa { display: none; }
  .mm-continuar-linha strong { font-size: 22px; }
  .mm-continuar .mm-nota { display: none; }
  .mm-bairros { display: flex; margin: 0 -16px; padding: 2px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; }
  .mm-bairro { flex: 0 0 min(250px, 78%); scroll-snap-align: start; }
  .mm-ferramentas .mm-busca { max-width: none; flex-basis: 100%; }
  .mm-ferramentas .mm-botao { margin-left: 0; }
  .mm-rel-titulos { display: none; }
  .mm-rel-abrir { grid-template-columns: minmax(0, 1fr) auto; }
  .mm-rel-data { grid-column: 1; grid-row: 2; font-size: 13px; }
  .mm-rel .mm-situacao { grid-column: 2; grid-row: 1 / span 2; }
  .mm-hist-lado { grid-template-columns: minmax(0, 1fr); }
  .mm-hist { grid-template-columns: 40px 34px minmax(0, 1fr) auto; }
  .mm-hist .mm-link { display: none; }
  .mm-busca-salva { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mm-busca-icone { display: none; }
  .mm-busca-resultado, .mm-busca-acoes { grid-column: 1; }
  .mm-busca-acoes .mm-botao { flex: 1; }
  .mm-novidade { flex-wrap: wrap; }
  .mm-novidade-acoes { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding-left: 46px; }
  .mm-cabeca-acoes { width: 100%; }
  .mm-dado { grid-template-columns: 100px minmax(0, 1fr); }
  .mm-dado > :nth-child(3) { grid-column: 2; justify-self: start; }
}

/* ---------- Abas do bairro: Resumo, um tema por aba e, depois do traço, as Opiniões (app.js) ---------- */
.abas-bairro {
  position: relative; display: flex; align-items: center; gap: 2px;
  margin: 0 28px 16px; overflow-x: auto; scrollbar-width: none;
  box-shadow: inset 0 -1px var(--borda);
}
.abas-bairro::-webkit-scrollbar { display: none; }
.aba-bairro {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px 11px; border: none; border-bottom: 3px solid transparent; background: none;
  color: var(--texto-suave); font: inherit; font-size: 14.5px; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.aba-bairro:hover { color: var(--texto); }
.aba-bairro[aria-selected="true"] { color: var(--verde-escuro); border-bottom-color: var(--verde); }
.aba-bairro:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; border-radius: 8px 8px 0 0; }
.aba-bairro .icone { width: 17px; height: 17px; }
.abas-traco { flex: none; width: 1px; height: 22px; margin: 0 8px; background: var(--borda); }
.aba-total { padding: 1px 7px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-escuro); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.completa .abas-bairro { margin: 4px 0 0; }
.completa .aba-conteudo { display: grid; gap: 14px; }
.tema-unico { padding: 0 28px 24px; }
.completa .tema-unico { padding: 0; max-width: 760px; }

/* Fora do Resumo, a nota fica no topo, com o aviso de que só usa dado oficial. */
.bairro-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nota-do-topo { display: flex; align-items: center; gap: 10px; margin: 0; text-align: right; }
.nota-do-topo span { display: flex; flex-direction: column; font-size: 13px; font-weight: 800; line-height: 1.3; white-space: nowrap; }
.nota-do-topo small { font-size: 12px; font-weight: 500; color: var(--texto-suave); }
.nota-do-topo b {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--verde-escuro); color: var(--sobre-verde);
}
.nota-do-topo b.medio { background: var(--medio); color: #111111; }
.nota-do-topo b.ruim { background: var(--ruim); color: #fff; }
/* Painel estreito: as abas rolam de lado; o esmaecido na borda mostra que há mais. */
@container (max-width: 760px) { .abas-bairro { mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); } }
@container (max-width: 520px) { .nota-do-topo span { display: none; } .nota-do-topo b { width: 42px; height: 42px; font-size: 18px; } }
/* ---------- Opiniões (opinioes.js): separadas dos dados, nunca na nota ---------- */
/* Cada modo da #129 tem uma cor: Viagem ocre, Aluguel azul-petróleo, Residência musgo. */
.modo-viagem { --modo: var(--tema-infra); --modo-fundo: var(--tema-infra-fundo); }
.modo-aluguel { --modo: var(--tema-renda); --modo-fundo: var(--tema-renda-fundo); }
.modo-residencia { --modo: var(--tema-ambiente); --modo-fundo: var(--tema-ambiente-fundo); }

.opinioes { position: relative; display: grid; gap: 16px; padding: 0 28px 28px; }
.completa .opinioes { padding: 0 0 8px; }
.opinioes .carregando { margin: 0; }

.op-link { padding: 2px 0; border: none; background: none; color: var(--verde-escuro); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-align: left; }
.op-link:hover { text-decoration: underline; }
.op-link .icone { width: 15px; height: 15px; vertical-align: -3px; margin-left: 2px; }
.op-link:focus-visible, .op-filtro:focus-visible, .op-escrever:focus-visible, .op-acao:focus-visible, .op-vistas button:focus-visible {
  outline: 2px solid var(--foco); outline-offset: 2px;
}

.op-aviso, .op-exemplo {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 12px 16px; border-radius: 14px; font-size: 14.5px; font-weight: 500;
}
.op-aviso { background: var(--superficie); border: 1px solid var(--borda); }
.op-aviso > .icone { color: var(--texto-suave); }
.op-aviso .op-link { margin-left: auto; white-space: nowrap; }
.op-aviso-curto { display: none; }
.op-exemplo { background: var(--sol-claro); color: var(--sol-escuro); font-size: 13.5px; }
.op-exemplo[hidden] { display: none; }
.op-exemplo strong { font-weight: 800; }

/* Resumo do topo: estrelas, quem recomendaria e o que dizem de cada assunto. */
.op-resumo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.5fr); align-items: start; }
.op-resumo > div { min-width: 0; padding: 0 20px; }
.op-resumo > div:first-child { padding-left: 0; }
.op-resumo > div:last-child { padding-right: 0; }
.op-resumo > div + div { border-left: 1px solid var(--borda); }
.op-media { display: flex; align-items: center; gap: 14px; }
.op-media > strong { font-family: var(--fonte-titulo); font-size: 52px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.op-media p { margin: 4px 0 0; font-size: 14px; color: var(--texto-suave); }
.op-distribuicao { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.op-distribuicao li { display: grid; grid-template-columns: 10px 12px minmax(0, 1fr) 26px; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.op-distribuicao li > span:last-child { text-align: right; }
.op-distribuicao .icone { width: 11px; height: 11px; fill: var(--sol); stroke: var(--sol); }
.op-dist-barra { height: 6px; border-radius: 999px; background: var(--cinza-claro); overflow: hidden; }
.op-dist-barra i { display: block; height: 100%; border-radius: 999px; background: var(--sol); }
.op-resumo-recomendam > strong { display: block; margin-top: 4px; font-family: var(--fonte-titulo); font-size: 36px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.op-resumo-recomendam p { margin: 6px 0 12px; font-size: 14px; color: var(--texto-suave); line-height: 1.45; }
.op-rotulo { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--sol-escuro); }
.op-resumo-assuntos ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 9px; }
.op-resumo-assuntos li { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(70px, 1.2fr) 74px; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; }
.op-resumo-assuntos li b { text-align: right; font-size: 13.5px; white-space: nowrap; }
.op-sem { margin: 0 0 10px; font-size: 14px; color: var(--texto-suave); }

.op-barra { display: flex; height: 8px; border-radius: 999px; background: var(--cinza-claro); overflow: hidden; }
.op-barra i { height: 100%; }
.op-barra i.bom { background: var(--bom); }
.op-barra i.regular { background: var(--medio); }
.op-barra i.ruim { background: var(--ruim); }
.nivel-bom { color: var(--bom); }
.nivel-regular { color: var(--medio-texto); }
.nivel-ruim { color: var(--ruim); }

.op-estrelas { display: inline-flex; gap: 2px; flex: none; }
.op-estrelas .icone { width: 17px; height: 17px; fill: var(--cinza-claro); stroke: var(--cinza-claro); stroke-width: 1.5; }
.op-estrelas i.cheia .icone { fill: var(--sol); stroke: var(--sol); }
.op-media .op-estrelas .icone { width: 19px; height: 19px; }

.op-chip-modo {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
  border-radius: 999px; background: var(--modo-fundo); color: var(--modo);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.op-chip-modo .icone { width: 14px; height: 14px; }
.op-quando-curto { display: none; }

/* Filtros de quem fala e o botão de escrever */
.op-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.op-filtro {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 15px;
  border: 1.5px solid var(--borda); border-radius: 999px; background: var(--elevado);
  color: var(--texto); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.op-filtro:hover { background: var(--hover); }
.op-filtro .icone { width: 15px; height: 15px; }
.op-filtro[aria-pressed="true"] { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro); font-weight: 700; }
.op-filtro[class*="modo-"][aria-pressed="true"] { border-color: var(--modo); background: var(--modo-fundo); color: var(--modo); }
.op-escrever {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin-left: auto; padding: 0 20px;
  border: none; border-radius: 14px; background: var(--acao-forte); color: var(--sobre-acao);
  font: inherit; font-size: 14.5px; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.op-escrever:hover { background: var(--acao); }
.op-escrever .icone { width: 17px; height: 17px; }
.op-flutuante { display: none; }

/* Cartão de uma opinião */
.op-lista { display: grid; gap: 12px; }
.op-cartao { padding: 16px 18px 12px; border: 1px solid var(--borda); border-radius: 22px; background: var(--elevado); }
.op-cartao-topo { display: flex; align-items: flex-start; gap: 12px; }
.op-avatar {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde-escuro); font-family: var(--fonte-titulo); font-weight: 600;
}
.op-quem { flex: 1; min-width: 0; }
.op-quem p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.op-quem strong { font-size: 15px; font-weight: 800; }
.op-quem .op-data { margin-top: 2px; font-size: 13px; color: var(--texto-suave); }
.op-texto { margin: 12px 0 10px; font-size: 14.5px; line-height: 1.6; }
.op-niveis { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.op-niveis li { padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.op-niveis li.nivel-bom { background: var(--bom-fundo); color: var(--verde-escuro); }
.op-niveis li.nivel-regular { background: var(--medio-fundo); }
.op-niveis li.nivel-ruim { background: var(--ruim-fundo); }
.op-dado {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 8px 12px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--cartao);
  font-size: 13px; color: var(--grafite); line-height: 1.45;
}
.op-dado .icone { width: 16px; height: 16px; color: var(--verde); }
.op-dado-curto { display: none; }
.op-cartao-rodape { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--borda); }
.op-acao {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px; border: none; border-radius: 8px; background: none;
  color: var(--texto-suave); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.op-acao:hover { color: var(--texto); background: var(--hover); }
.op-acao .icone { width: 16px; height: 16px; }
.op-acao[aria-pressed="true"] { color: var(--verde-escuro); }
.op-acao[aria-pressed="true"] .icone { fill: var(--verde-claro); }

.op-vazio { display: grid; justify-items: center; gap: 12px; padding: 28px 20px; border: 1.5px dashed var(--borda); border-radius: 22px; text-align: center; }
.op-vazio p { max-width: 480px; margin: 0; font-size: 14.5px; color: var(--texto-suave); line-height: 1.55; }
.op-vazio strong { display: block; margin-bottom: 2px; color: var(--texto); font-weight: 800; }
.op-vazio .op-escrever { margin: 0; }
.op-vazio-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--forma-seixo); background: var(--verde-claro); color: var(--verde-escuro); }
.op-rodape { margin: 0; font-size: 13px; color: var(--texto-suave); }
.op-rodape a { color: var(--verde-escuro); font-weight: 700; }

/* Opiniões | Opinião × dado */
.op-vistas-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.op-vistas-linha p { margin: 0; font-size: 13px; color: var(--texto-suave); }
.op-vistas { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borda); }
.op-vistas button {
  padding: 7px 26px; border: none; border-radius: 999px; background: none;
  color: var(--texto-suave); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.op-vistas button[aria-pressed="true"] { background: var(--elevado); color: var(--verde-escuro); box-shadow: var(--sombra-leve); }

/* Opinião × dado oficial: uma linha por assunto */
.op-cmp-cabeca, .op-cmp-linha { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(170px, 1.15fr) minmax(190px, 1.45fr) 132px; gap: 20px; align-items: center; }
.op-cmp-cabeca { padding: 0 14px 10px; border-bottom: 1px solid var(--borda); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); }
.op-cmp-cabeca span:last-child { text-align: right; }
.op-cmp-lista { list-style: none; margin: 0; padding: 0; }
.op-cmp-linha { padding: 14px; border-bottom: 1px solid var(--borda); }
.op-cmp-linha.nao-batem { border-radius: 16px; border-bottom-color: transparent; background: var(--medio-fundo); }
.op-cmp-assunto { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.op-cmp-assunto strong { font-weight: 700; }
.op-assunto-icone { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--borda); border-radius: 50%; background: var(--elevado); color: var(--grafite); }
.op-cmp-rotulo { display: none; }
.op-cmp-quem .op-barra { height: 9px; }
.op-diz { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 13px; color: var(--texto-suave); }
.op-diz b { font-weight: 800; }
.op-oficial { display: grid; gap: 1px; min-width: 0; }
.op-oficial-valor { font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.op-oficial span { font-size: 13px; color: var(--grafite); }
.op-oficial small { font-size: 12px; color: var(--texto-suave); }
.op-oficial .op-oficial-sem { font-size: 14px; font-style: italic; color: var(--texto-suave); }
.op-cmp-batem { display: grid; justify-items: end; gap: 4px; text-align: right; }
.op-cmp-batem small { font-size: 12px; font-weight: 600; color: var(--sol-escuro); line-height: 1.35; }
.op-selo {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--texto-suave);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.op-selo .icone { width: 14px; height: 14px; }
.op-selo.batem { border-color: transparent; background: var(--bom-fundo); color: var(--verde-escuro); }
.op-selo.nao-batem { border-color: var(--medio); background: var(--elevado); color: var(--texto); }
.op-cmp-nota { margin: 14px 0 0; font-size: 13px; color: var(--texto-suave); line-height: 1.55; }

/* No painel estreito (análise rápida, celular): tudo em uma coluna e cada assunto vira um cartão. */
@container (max-width: 760px) {
  .op-resumo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 18px; }
  .op-resumo > .op-resumo-assuntos { grid-column: 1 / -1; padding: 16px 0 0; border-left: none; border-top: 1px solid var(--borda); }
  .op-resumo > div:nth-child(2) { padding-right: 0; }
  .op-cmp-cabeca { display: none; }
  .op-cmp-lista { display: grid; gap: 12px; }
  .op-cmp-linha {
    grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "assunto batem" "quem quem" "dado dado";
    gap: 10px 12px; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 20px; background: var(--elevado);
  }
  .op-cmp-linha.nao-batem { border-color: var(--medio); }
  .op-cmp-assunto { grid-area: assunto; grid-column: 1 / 2; white-space: nowrap; }
  .op-cmp-assunto .op-assunto-icone { width: auto; height: auto; border: none; background: none; }
  .op-cmp-batem { grid-area: batem; }
  .op-cmp-quem, .op-cmp-dado { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; }
  .op-cmp-quem { grid-area: quem; }
  .op-cmp-quem .op-barra { grid-column: 2; grid-row: 1; }
  .op-cmp-quem .op-diz { grid-column: 2; margin-top: 0; }
  .op-cmp-dado { grid-area: dado; align-items: start; }
  .op-cmp-rotulo { display: block; font-size: 12px; color: var(--texto-suave); }
  .op-cmp-quem .op-cmp-rotulo { grid-row: 1 / span 2; }
  .op-oficial-valor { font-family: inherit; font-size: 14px; font-weight: 800; }
}
@container (max-width: 520px) {
  .op-resumo { grid-template-columns: minmax(0, 1fr); }
  .op-resumo > div:nth-child(2) { padding: 16px 0 0; border-left: none; border-top: 1px solid var(--borda); }
  .op-resumo-recomendam { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .op-resumo-recomendam > strong { font-size: 28px; }
  .op-resumo-recomendam p { margin: 0 0 8px; }
  .op-aviso { font-size: 13.5px; }
  .op-aviso-longo { display: none; }
  .op-aviso-curto { display: inline; }
  .op-aviso .op-link { display: none; }
  .op-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
  .op-filtros .op-filtro { height: 34px; padding: 0 12px; font-size: 13px; }
  .op-cartao { padding: 14px 14px 10px; }
  .op-quando-longo, .op-dado-longo { display: none; }
  .op-quando-curto, .op-dado-curto { display: inline; }
  .op-cmp-linha { grid-template-columns: 84px minmax(0, 1fr); }
  .op-cmp-quem, .op-cmp-dado { grid-template-columns: 84px minmax(0, 1fr); }
  .op-cmp-assunto { font-size: 14px; }
}
/* No celular o botão de escrever flutua na aba; o da linha dos filtros sai. */
@media (max-width: 820px) {
  .opinioes { padding: 0 16px 24px; }
  .abas-bairro { margin: 0 16px 14px; }
  .tema-unico { padding: 0 12px 20px; }
  .op-filtros .op-escrever { display: none; }
  .op-flutuante {
    display: inline-flex; position: sticky; bottom: 16px; justify-self: end; z-index: 5;
    height: 48px; padding: 0 22px; border-radius: 999px; box-shadow: 0 6px 18px rgba(var(--sombra-rgb), .3);
  }
}

/* ---------- Escrever e denunciar (diálogos) ---------- */
.op-dialogo {
  width: min(1060px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0;
  border: none; border-radius: 26px; background: var(--cartao); color: var(--texto);
  box-shadow: 0 24px 70px rgba(var(--sombra-rgb), .35); overflow: auto; overscroll-behavior: contain;
}
.op-dialogo::backdrop { background: rgba(17, 17, 17, .45); }
.op-dialogo fieldset { min-width: 0; margin: 0 0 20px; padding: 0; border: none; }
.op-dialogo legend { padding: 0; }
.op-dialogo a { color: var(--verde-escuro); font-weight: 700; }
.op-form { position: relative; padding: 32px 36px 26px; }
.op-fechar {
  position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 40px; height: 40px;
  border: none; border-radius: 50%; background: var(--superficie); color: var(--texto); cursor: pointer;
}
.op-fechar:hover { background: var(--hover); }
.op-form h2 { margin: 0 56px 6px 0; font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; line-height: 1.15; }
.op-form-lead { margin: 0 0 22px; color: var(--texto-suave); font-size: 15px; }
.op-form-celular, .op-progresso, .op-form-passos, .op-so-celular { display: none; }
.op-form-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
.op-form-rotulo { display: block; margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.op-form-rotulo-linha { display: flex; width: 100%; justify-content: space-between; align-items: baseline; }
.op-form-rotulo-linha small { font-size: 13px; font-weight: 500; color: var(--texto-suave); }
.op-dialogo input[type="radio"], .op-dialogo input[type="checkbox"] { accent-color: var(--verde); }
.op-dialogo :is(button, select, textarea, input):focus-visible,
.op-dialogo label:has(> input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Como conhece: os três modos */
.op-modos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.op-modo {
  position: relative; display: grid; gap: 8px; padding: 13px 14px; border: 1.5px solid var(--borda); border-radius: 16px;
  background: var(--elevado); cursor: pointer;
}
.op-modo:hover { border-color: var(--modo); }
.op-modo input { position: absolute; opacity: 0; pointer-events: none; }
.op-modo-icone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--modo-fundo); color: var(--modo); }
.op-modo-texto { font-size: 13px; color: var(--texto-suave); }
.op-modo-texto strong { font-size: 15.5px; font-weight: 800; color: var(--texto); }
.op-modo-longo { display: none; }
.op-modo-marca { position: absolute; top: 10px; right: 10px; display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--modo); color: var(--elevado); }
.op-modo-marca .icone { width: 14px; height: 14px; stroke-width: 3; }
.op-modo:has(input:checked) { border-color: var(--modo); box-shadow: 0 0 0 1px var(--modo); }
.op-modo:has(input:checked) strong { color: var(--modo); }
.op-modo:has(input:checked) .op-modo-marca { display: grid; }
.op-dialogo .op-modo:has(> input:focus-visible) { outline: none; }
.op-modo:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }

.op-quando { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 14px; }
.op-quando > span { font-weight: 700; color: var(--texto-suave); }
.op-select {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px;
  border: 1px solid var(--borda); border-radius: 12px; background: var(--elevado); font-weight: 600;
}
.op-select select { appearance: none; padding: 0 22px 0 0; border: none; background: none; color: var(--texto); font: inherit; font-size: 14.5px; cursor: pointer; }
.op-select select:disabled { color: var(--texto-suave); cursor: default; }
.op-select .icone { position: absolute; right: 10px; width: 16px; height: 16px; pointer-events: none; color: var(--texto-suave); }
.op-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.op-check input { width: 17px; height: 17px; margin: 0; }

.op-geral { margin-top: 20px; }
.op-geral-linha { display: flex; align-items: center; gap: 16px; }
.op-estrelas-escolha { display: inline-flex; gap: 4px; }
.op-estrelas-escolha label { cursor: pointer; }
.op-estrelas-escolha input { position: absolute; opacity: 0; pointer-events: none; }
.op-estrelas-escolha .icone { width: 32px; height: 32px; fill: var(--cinza-claro); stroke: var(--cinza-claro); stroke-width: 1.2; transition: fill .1s, stroke .1s; }
.op-estrelas-escolha:has(input[value="1"]:checked) label:nth-child(-n+1) .icone,
.op-estrelas-escolha:has(input[value="2"]:checked) label:nth-child(-n+2) .icone,
.op-estrelas-escolha:has(input[value="3"]:checked) label:nth-child(-n+3) .icone,
.op-estrelas-escolha:has(input[value="4"]:checked) label:nth-child(-n+4) .icone,
.op-estrelas-escolha:has(input[value="5"]:checked) label:nth-child(-n+5) .icone,
.op-estrelas-escolha:hover label:hover .icone,
.op-estrelas-escolha:hover label:has(~ label:hover) .icone { fill: var(--sol); stroke: var(--sol); }
.op-estrelas-escolha:hover label:hover ~ label .icone { fill: var(--cinza-claro); stroke: var(--cinza-claro); }
.op-estrelas-rotulo { font-size: 15px; font-weight: 700; }

/* Assuntos: bom, regular ou ruim, e pula o que não sabe */
.op-assuntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.op-assuntos li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.op-assunto-nome { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; }
.op-assunto-nome .icone { color: var(--texto-suave); }
.op-niveis-escolha { display: inline-flex; gap: 6px; }
.op-niveis-escolha input { position: absolute; opacity: 0; pointer-events: none; }
.op-niveis-escolha span {
  display: grid; place-items: center; width: 72px; height: 32px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--elevado); color: var(--texto-suave); font-size: 13px; font-weight: 600; cursor: pointer;
}
.op-niveis-escolha label:hover span { border-color: var(--nardo); }
.op-niveis-escolha .nivel-bom input:checked + span { border-color: transparent; background: var(--bom-fundo); color: var(--verde-escuro); font-weight: 800; }
.op-niveis-escolha .nivel-regular input:checked + span { border-color: transparent; background: var(--medio-fundo); color: var(--medio-texto); font-weight: 800; }
.op-niveis-escolha .nivel-ruim input:checked + span { border-color: transparent; background: var(--ruim-fundo); color: var(--ruim); font-weight: 800; }
.op-niveis-escolha label:has(input:focus-visible) span { outline: 2px solid var(--foco); outline-offset: 2px; }
.op-dialogo .op-niveis-escolha label:has(> input:focus-visible) { outline: none; }

/* O texto, com o filtro marcando o trecho por trás da caixa */
.op-texto-caixa { position: relative; border: 1.5px solid var(--verde); border-radius: 16px; background: var(--elevado); }
.op-texto-caixa textarea, .op-texto-marcas {
  margin: 0; padding: 16px 18px 32px; font: inherit; font-size: 15px; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: break-word; letter-spacing: normal;
}
.op-texto-caixa textarea {
  position: relative; z-index: 1; display: block; width: 100%; min-height: 200px; resize: vertical;
  border: none; border-radius: 16px; background: transparent; color: var(--texto);
}
.op-texto-caixa textarea::placeholder { color: var(--placeholder); }
.op-texto-caixa textarea:focus-visible { outline: none; }
.op-texto-caixa:focus-within { box-shadow: 0 0 0 3px var(--verde-claro); }
.op-texto-marcas { position: absolute; inset: 0; overflow: hidden; color: transparent; pointer-events: none; }
.op-texto-marcas mark { border-radius: 3px; background: var(--ruim-fundo); color: transparent; box-shadow: 0 2px 0 -0.5px var(--ruim); }
.op-contador { position: absolute; right: 16px; bottom: 9px; z-index: 2; font-size: 12px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.op-filtro-aviso { display: grid; gap: 8px; margin-top: 10px; }
.op-filtro-aviso[hidden] { display: none; }
.op-filtro-aviso p { display: flex; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--ruim-fundo); font-size: 13.5px; line-height: 1.45; }
.op-filtro-aviso .icone { color: var(--ruim); margin-top: 1px; }
.op-filtro-aviso strong { display: block; color: var(--ruim); font-size: 14.5px; font-weight: 800; }

.op-texto-caixa + .op-filtro-aviso + .op-form-rotulo, .op-filtro-aviso[hidden] + .op-form-rotulo { margin-top: 20px; }
.op-aparece { display: grid; gap: 8px; }
.op-aparece label {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--elevado); font-size: 13.5px; color: var(--texto-suave); cursor: pointer;
}
.op-aparece label strong { color: var(--texto); font-size: 15px; font-weight: 800; }
.op-aparece label:has(input:checked) { border-color: transparent; background: var(--verde-claro); }
.op-aparece input { width: 18px; height: 18px; margin: 0; flex: none; }
.op-regras { margin: 12px 0 14px; }
.op-publicar {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 50px;
  border: none; border-radius: 14px; background: var(--acao-forte); color: var(--sobre-acao);
  font: inherit; font-size: 16px; font-weight: 800; cursor: pointer;
}
.op-publicar:hover { background: var(--acao); }
.op-publicar[aria-disabled="true"] { opacity: .6; }
.op-publicar-status { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--superficie); font-size: 13.5px; line-height: 1.45; }
.op-publicar-status:empty { display: none; }
.op-publicar-status.falta { background: var(--ruim-fundo); color: var(--ruim); font-weight: 600; }
.op-form-nota { margin: 12px 0 0; font-size: 13px; color: var(--texto-suave); text-align: center; }

/* Denunciar */
.op-denuncia { width: min(500px, calc(100vw - 32px)); }
.op-denuncia h2 { display: flex; align-items: center; gap: 10px; }
.op-denuncia h2 .icone { width: 24px; height: 24px; color: var(--ruim); }
.op-citacao { margin: 16px 0 18px; padding: 10px 14px; border-left: 3px solid var(--nardo); border-radius: 4px 12px 12px 4px; background: var(--superficie); }
.op-citacao p { margin: 0; font-size: 14px; font-style: italic; }
.op-citacao footer { margin-top: 3px; font-size: 12.5px; color: var(--texto-suave); }
.op-denuncia legend { margin-bottom: 10px; font-size: 14.5px; color: var(--grafite); }
.op-motivos { display: grid; gap: 8px; }
.op-motivos label {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--elevado); font-size: 14.5px; font-weight: 500; cursor: pointer;
}
.op-motivos label:has(input:checked) { border-color: var(--ruim); background: var(--ruim-fundo); font-weight: 700; }
.op-motivos input { width: 18px; height: 18px; margin: 0; accent-color: var(--ruim); }
.op-denuncia textarea {
  display: block; width: 100%; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 12px;
  background: var(--elevado); color: var(--texto); font: inherit; font-size: 14px; resize: vertical;
}
.op-denuncia .op-form-nota { text-align: left; }

/* No celular: tela cheia, um passo por vez (como conhece e nota; assuntos; texto) */
@media (max-width: 600px) {
  .op-dialogo { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .op-dialogo-escrever .op-form { display: flex; flex-direction: column; min-height: 100%; padding: 14px 18px 18px; }
  .op-dialogo-escrever .op-form-topo { margin-bottom: 22px; }
  .op-dialogo-escrever .op-fechar { top: 10px; left: 10px; right: auto; background: none; }
  .op-dialogo-escrever h2, .op-dialogo-escrever .op-form-lead, .op-so-desktop { display: none; }
  .op-form-celular { display: flex; justify-content: center; align-items: center; min-height: 26px; margin: 4px 0 12px; font-size: 14.5px; }
  .op-form-celular strong { font-weight: 800; }
  .op-passo-numero { position: absolute; right: 18px; font-size: 13px; color: var(--texto-suave); }
  .op-progresso { display: block; height: 4px; border-radius: 999px; background: var(--cinza-claro); }
  .op-progresso i { display: block; height: 100%; border-radius: 999px; background: var(--verde); transition: width .2s; }
  .op-so-celular { display: block; }
  .op-form-pergunta { margin: 0 0 16px; font-family: var(--fonte-titulo); font-size: 26px; font-weight: 600; line-height: 1.2; }
  .op-form-dica { margin: 26px 0 0; font-size: 13.5px; color: var(--texto-suave); }
  .op-form-colunas { display: block; flex: 1; }
  .op-dialogo-escrever[data-passo="1"] fieldset:not([data-passo="1"]),
  .op-dialogo-escrever[data-passo="2"] fieldset:not([data-passo="2"]),
  .op-dialogo-escrever[data-passo="3"] fieldset:not([data-passo="3"]) { display: none; }
  .op-modos { grid-template-columns: 1fr; }
  .op-modo { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 16px; }
  .op-modo-texto { display: grid; }
  .op-modo-curto { display: none; }
  .op-modo-longo { display: inline; }
  .op-modo-marca { top: 50%; right: 16px; margin-top: -11px; }
  .op-quando { margin-top: 26px; }
  .op-quando > span { flex-basis: 100%; color: var(--texto); }
  .op-select { flex: 1; }
  .op-select select { width: 100%; }
  .op-geral { margin-top: 26px; }
  .op-assuntos li { flex-wrap: wrap; }
  .op-niveis-escolha span { width: 68px; }
  .op-form-passos { display: flex; gap: 10px; margin-top: 18px; }
  .op-passo-voltar {
    display: inline-flex; align-items: center; gap: 6px; height: 52px; padding: 0 16px;
    border: 1px solid var(--borda); border-radius: 14px; background: var(--elevado); color: var(--texto); font: inherit; font-weight: 700;
  }
  .op-continuar { flex: 1; height: 52px; border: none; border-radius: 14px; background: var(--acao-forte); color: var(--sobre-acao); font: inherit; font-size: 16px; font-weight: 800; }
  .op-dialogo-escrever[data-passo="1"] .op-passo-voltar, .op-dialogo-escrever[data-passo="3"] .op-form-passos .op-continuar { display: none; }
  .op-denuncia .op-form { padding: 26px 18px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .op-estrelas-escolha .icone, .op-progresso i { transition: none; }
}

/* ---------- Regras das opiniões (regras.html) ---------- */
.regras-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.regras-cartao { padding: 20px 22px; border: 1px solid var(--borda); border-radius: 22px; background: var(--elevado); }
.regras-cartao h2 { margin: 0 0 12px; font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.regras-cartao.pode h2 { color: var(--verde-escuro); }
.regras-cartao.nao-pode h2 { color: var(--ruim); }
.regras-cartao ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.regras-cartao li { position: relative; padding-left: 28px; line-height: 1.5; }
.regras-cartao li::before { position: absolute; left: 2px; top: 0; font-weight: 900; }
.regras-cartao.pode li::before { content: "✓"; color: var(--verde); }
.regras-cartao.nao-pode li::before { content: "✕"; color: var(--ruim); }
.regras-filtro { padding: 20px 24px; border-radius: 22px; background: var(--superficie); }
.regras-filtro h2 { margin: 0 0 6px; font-size: 20px; }
.regras-filtro p { margin: 0; color: var(--texto-suave); line-height: 1.6; max-width: 760px; }
.regras-subtitulo { margin: 26px 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sol-escuro); }
.regras-passos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; margin: 0 0 16px; padding: 0; }
.regras-passos li { position: relative; display: grid; gap: 2px; padding-top: 30px; font-size: 14px; }
.regras-passos li::before {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--verde); background: var(--fundo);
}
.regras-passos li.feito::before { background: var(--verde); }
.regras-passos li:not(:last-child)::after { content: ""; position: absolute; top: 10px; left: 18px; right: 0; height: 2px; background: var(--borda); }
.regras-passos strong { font-weight: 800; }
.regras-passos span { font-size: 13px; color: var(--texto-suave); padding-right: 12px; }

/* ---------- Suas opiniões (suas-opinioes.html): uma seção do Meu Mapin ---------- */
.conta { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - var(--altura-topo)); }
.conta-lado { display: flex; flex-direction: column; gap: 18px; padding: 26px 16px 20px; border-right: 1px solid var(--borda); }
.conta-perfil { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.conta-perfil strong { display: block; font-size: 15px; }
.conta-perfil small { display: block; font-size: 13px; color: var(--texto-suave); }
/* Só o avatar grande do perfil: o do botão "Meu Mapin" do topo é o .conta-avatar de 30 px, lá em cima. */
.conta-perfil .conta-avatar {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--verde-escuro); color: var(--sobre-verde); font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600;
}
.conta-perfil .conta-avatar.vazio { background: var(--verde-claro); color: var(--verde-escuro); }
.conta-menu { display: grid; gap: 2px; }
.conta-menu hr { width: calc(100% - 16px); margin: 10px 8px; border: none; border-top: 1px solid var(--borda); }
.conta-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  color: var(--texto); font-size: 15px; font-weight: 600; text-decoration: none;
}
.conta-item span { flex: 1; }
.conta-item .icone { color: var(--texto-suave); }
.conta-item b { font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.conta-item b.novo { padding: 1px 8px; border-radius: 999px; background: var(--sol-claro); color: var(--sol-escuro); font-weight: 700; }
.conta-item small { font-size: 12px; color: var(--texto-suave); }
.conta-item[aria-disabled="true"] { color: var(--texto-suave); cursor: default; }
.conta-item.ativo { background: var(--verde-claro); color: var(--verde-escuro); font-weight: 800; }
.conta-item.ativo .icone { color: var(--verde-escuro); }
.conta-item:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.conta-seus-dados { margin-top: auto; padding: 14px 16px; border: 1px solid var(--borda); border-radius: 16px; background: var(--elevado); font-size: 13px; color: var(--texto-suave); }
.conta-seus-dados p { margin: 0; line-height: 1.5; }
.conta-seus-dados p:first-child { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--verde-escuro); }
.conta-seus-dados .icone { width: 16px; height: 16px; }

.suas { max-width: 1100px; padding: 26px 32px 48px; }
.suas > .op-exemplo { margin-bottom: 18px; }
.suas h1 { margin: 0; font-family: var(--fonte-titulo); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.suas-lead { margin: 4px 0 22px; color: var(--texto-suave); }
.suas > .op-publicar-status { margin: -8px 0 18px; }
.suas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.suas-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.suas-lista a.op-escrever { text-decoration: none; }
.suas-opiniao { padding: 16px 20px 14px; border: 1px solid var(--borda); border-radius: 22px; background: var(--elevado); }
.suas-opiniao header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.suas-opiniao h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 21px; font-weight: 600; }
.suas-opiniao header .op-estrelas { margin-left: auto; }
.suas-opiniao-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 13.5px; }
.suas-meta { color: var(--texto-suave); }
.suas-acoes { display: flex; gap: 4px; margin-left: auto; }
.suas-acoes .op-acao { padding: 6px; }
.suas-situacao { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.suas-situacao .icone { width: 14px; height: 14px; }
.suas-situacao.publicada { background: var(--bom-fundo); color: var(--verde-escuro); }
.suas-situacao.edicao { background: var(--medio-fundo); color: var(--medio-texto); }
.suas-situacao.analise { background: var(--superficie); color: var(--texto-suave); border: 1px solid var(--borda); }
.suas-texto { margin: 10px 0 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suas-motivo { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--medio-fundo); color: var(--medio-texto); font-size: 13.5px; }
.suas-motivo a { color: var(--verde-escuro); font-weight: 800; text-decoration: none; white-space: nowrap; }
.suas-motivo a:hover { text-decoration: underline; }
.suas-lado { display: grid; gap: 16px; }
.suas-cartao { padding: 18px 20px; border: 1px solid var(--borda); border-radius: 22px; background: var(--elevado); }
.suas-cartao h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600; line-height: 1.25; }
.suas-cartao-lead { margin: 4px 0 10px; font-size: 13px; color: var(--texto-suave); }
.suas-sem { margin: 8px 0 0; font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; }
.suas-sugestoes { list-style: none; margin: 0; padding: 0; }
.suas-sugestoes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--borda); }
.suas-sugestoes strong { display: block; font-size: 15px; }
.suas-sugestoes small { font-size: 12.5px; color: var(--texto-suave); }
.suas-escrever { padding: 7px 16px; border-radius: 10px; background: var(--verde-claro); color: var(--verde-escuro); font-size: 14px; font-weight: 800; text-decoration: none; }
.suas-escrever:hover { background: var(--verde-claro-hover); }
.suas-nome { display: flex; justify-content: space-between; align-items: baseline; margin: 10px 0 0; }
.suas-aviso-util { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--borda); font-size: 14px; font-weight: 600; cursor: pointer; }
.suas-aviso-util span { flex: 1; }
.suas-aviso-util .icone { color: var(--texto-suave); }
.suas-lgpd { display: flex; gap: 10px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--borda); font-size: 13px; color: var(--texto-suave); line-height: 1.5; }
.suas-lgpd .icone { width: 16px; height: 16px; margin-top: 2px; }
.interruptor {
  appearance: none; position: relative; flex: none; width: 40px; height: 22px; margin: 0; border-radius: 999px;
  background: var(--cinza-claro); cursor: pointer; transition: background .15s;
}
.interruptor::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--elevado); box-shadow: 0 1px 2px rgba(var(--sombra-rgb), .3); transition: transform .15s;
}
.interruptor:checked { background: var(--verde); }
.interruptor:checked::after { transform: translateX(18px); }
.interruptor:disabled { opacity: .6; cursor: default; }
.interruptor:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

@media (max-width: 1000px) {
  .suas-colunas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .regras-grade { grid-template-columns: 1fr; }
  .regras-passos { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .regras-passos li:nth-child(2)::after { display: none; }
  .conta { display: block; }
  .conta-lado { padding: 16px; border-right: none; border-bottom: 1px solid var(--borda); }
  .conta-menu { display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; }
  .conta-menu hr, .conta-seus-dados { display: none; }
  .conta-item { flex: none; padding: 8px 12px; font-size: 14px; }
  .conta-item[aria-disabled="true"] { display: none; }
  .suas { padding: 20px 16px 40px; }
  .suas h1 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .interruptor, .interruptor::after { transition: none; }
}

/* ---------- Várias cidades: temas sem dado, nota com menos temas e segurança pública ---------- */
/* "calculada com 4 de 5 temas": a nota geral existe mesmo faltando um tema. */
.nota-temas { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--texto-suave); cursor: help; }
/* Tema sem fonte na cidade: a barra fica vazia e o rótulo diz "sem dado" (o motivo está no título). */
.barras li.sem-dado-tema { cursor: help; }
.barra-sem-dado { color: var(--texto-suave); font-size: 12.5px; font-style: italic; }
.legenda-motivos { margin-top: 8px; }
.legenda-motivos p { margin: 0 0 6px; }
.legenda-motivos p:last-child { margin-bottom: 0; }
.sem-dado-lista { margin: 0; padding: 0 0 0 18px; color: var(--texto-suave); line-height: 1.5; font-size: 14px; }
/* Critério da busca personalizada que a cidade não tem: sem nível nem régua, só o motivo. */
.criterio.criterio-sem-dado { border-style: dashed; background: transparent; }
.criterio-sem-dado .criterio-nome { color: var(--texto-suave); }
.criterio-sem-dado-selo { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--superficie); color: var(--texto-suave); font-size: 12px; font-weight: 800; white-space: nowrap; }
.criterio-sem-dado-motivo { margin: 8px 0 0; color: var(--texto-suave); font-size: 13px; line-height: 1.45; }
/* Segurança pública (PM, delegacia, Guarda, Bombeiros): serviço para localizar, fora das notas. Discreto: menor e cinza. */
.icone-local.tipo-seguranca { width: 22px; height: 22px; border-width: 2px; background: #5f6b7a; opacity: .85; }
.icone-local.tipo-seguranca .icone { width: 11px; height: 11px; }
.icone-local.tipo-seguranca:hover { opacity: 1; }

/* ---------- Imóveis (#/imoveis e #/imovel/{id}, anuncios.js) ---------- */
/* Página própria por cima do mapa, como a busca personalizada (reaproveita a folha, o cabeçalho e a lista dela).
   Anúncio é conteúdo de pessoas (ADR 0019): os dados oficiais do endereço ficam num bloco à parte, com a fonte. */
.com-imoveis, .com-imoveis body { overflow: hidden; }
.imoveis-pagina {
  position: fixed; inset: 0; z-index: 100;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--fundo);
}
.imoveis-pagina[hidden], .imoveis-pagina [hidden] { display: none !important; }
.imoveis-pagina a:focus-visible, .imoveis-pagina button:focus-visible, .imoveis-pagina select:focus-visible {
  outline: 2px solid var(--foco); outline-offset: 2px;
}
.imoveis-pagina .busca-voltar { display: none; }
.imoveis-pagina .icone { width: 16px; height: 16px; }

.imoveis-anunciar, .imovel-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border: 1.5px solid var(--verde); border-radius: 999px;
  background: var(--elevado); color: var(--verde-escuro); font: inherit; font-size: 14px; font-weight: 700;
}
.imoveis-anunciar { margin-left: auto; }
.imovel-botao.primario { background: var(--acao); color: var(--sobre-acao); }
.imoveis-anunciar:disabled, .imovel-botao:disabled { opacity: .55; cursor: not-allowed; }
.imoveis-aviso-conta { display: block; margin-top: 4px; color: var(--texto-suave); font-size: 12.5px; }
.imoveis-exemplo { margin-top: 18px; }

/* Filtros: preço e quartos, e os oficiais (o diferencial) em destaque */
.imoveis-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.imoveis-filtro-select select, .imoveis-ordem select {
  height: 38px; padding: 0 14px; cursor: pointer;
  border: 1px solid var(--borda); border-radius: 999px; background: var(--elevado);
  color: var(--texto); font: inherit; font-size: 13.5px; font-weight: 700;
}
.imoveis-filtro-oficial {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; cursor: pointer;
  border: 1.5px dashed var(--verde-claro-borda); border-radius: 999px; background: var(--elevado);
  color: var(--verde-escuro); font: inherit; font-size: 13.5px; font-weight: 700;
}
.imoveis-filtro-oficial:hover { background: var(--verde-claro); }
.imoveis-filtro-oficial[aria-pressed="true"] { border-style: solid; border-color: var(--verde); background: var(--verde-claro); }
.imoveis-sem-carta { margin: 10px 0 0; color: var(--texto-suave); font-size: 13px; }

.imoveis-resumo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 22px 0 12px; }
.imoveis-total { margin: 0; font-size: 15px; font-weight: 700; }
.imoveis-total strong { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 600; }
.imoveis-total span { margin-left: 4px; color: var(--texto-suave); font-size: 13.5px; font-weight: 500; }
.imoveis-ordem { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--texto-suave); font-size: 12.5px; font-weight: 600; }
.imoveis-resumo .busca-vistas { display: none; }

.imoveis-colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.imoveis-cartoes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.imovel-cartao > a:not(.cmp-im-botao) {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 10px;
  border: 1px solid var(--borda); border-radius: 16px; background: var(--elevado); color: var(--texto); text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.imovel-cartao > a:not(.cmp-im-botao):hover { border-color: var(--verde); box-shadow: var(--sombra-leve); }
.imovel-cartao.com-risco > a:not(.cmp-im-botao) { border-color: color-mix(in srgb, var(--ruim) 45%, var(--borda)); }
.imovel-cartao-foto { overflow: hidden; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--superficie); }
.imovel-cartao-foto img, .imovel-cartao-foto .imovel-sem-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.imovel-cartao-corpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 2px; }
.imovel-preco strong { font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; color: var(--verde-escuro); }
.imovel-preco small { color: var(--texto-suave); font-size: 12.5px; }
.imovel-cartao-tipo { font-size: 14px; font-weight: 700; }
.imovel-cartao-bairro { display: flex; align-items: center; gap: 6px; color: var(--texto-suave); font-size: 13.5px; }
.imovel-nota-bairro {
  display: inline-grid; place-items: center; min-width: 32px; padding: 1px 7px; border-radius: 999px;
  background: var(--verde); color: var(--sobre-verde); font-size: 12px; font-weight: 800;
}
.imovel-etiquetas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.imovel-etiqueta {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  background: var(--superficie); color: var(--grafite); font-size: 12px; font-weight: 600;
}
.imovel-etiqueta .icone { width: 13px; height: 13px; }
.imovel-etiqueta.risco { background: var(--ruim-fundo); color: var(--ruim); font-weight: 800; }
.imovel-etiqueta.carregando { color: var(--texto-suave); font-weight: 500; }
.imoveis-ordem-honesta { margin: 12px 0 0; color: var(--texto-suave); font-size: 12px; }
/* Paginação da lista de imóveis: 10 por página, a página fica no endereço (?pagina=2) */
.imoveis-paginacao { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 20px 0 4px; }
.imoveis-paginacao-conta { margin: 0; color: var(--texto-suave); font-size: 13px; font-weight: 600; }
.imoveis-paginacao-botoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.imoveis-paginacao-botoes button {
  min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--elevado); color: var(--texto); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.imoveis-paginacao-botoes button:hover:not(:disabled):not([aria-current]) { background: var(--verde-claro); }
.imoveis-paginacao-botoes button[aria-current="page"] { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); cursor: default; }
.imoveis-paginacao-botoes button:disabled { color: var(--texto-suave); opacity: .45; cursor: default; }
.imoveis-paginacao-reticencias { display: grid; place-items: center; min-width: 20px; color: var(--texto-suave); }
.imoveis-ponto { fill: var(--texto-suave); stroke: var(--elevado); stroke-width: 3; opacity: .7; }


/* Mapa: silhueta dos bairros pela nota e um pino de preço por imóvel (vermelho quando há risco alto) */
.imoveis-mapa-caixa {
  position: sticky; top: 16px; padding: 14px; border: 1px solid var(--borda); border-radius: 16px; background: var(--regiao-vizinho);
}
.imoveis-mapa { display: block; width: 100%; height: auto; max-height: 560px; }
.imoveis-mapa-bairros path { fill: var(--regiao-terra); stroke: var(--cartao); stroke-width: 1.6; stroke-linejoin: round; }
.imoveis-mapa .nota-0, .imoveis-legenda-faixa .nota-0 { fill: #ece5d3; background: #ece5d3; }
.imoveis-mapa .nota-1, .imoveis-legenda-faixa .nota-1 { fill: #dce3cb; background: #dce3cb; }
.imoveis-mapa .nota-2, .imoveis-legenda-faixa .nota-2 { fill: #c6d6b5; background: #c6d6b5; }
.imoveis-mapa .nota-3, .imoveis-legenda-faixa .nota-3 { fill: #adc79c; background: #adc79c; }
.imoveis-mapa .nota-4, .imoveis-legenda-faixa .nota-4 { fill: #92b583; background: #92b583; }
.imoveis-pino rect { fill: var(--elevado); stroke: var(--verde); stroke-width: 2.5; }
.imoveis-pino path { fill: var(--verde); }
.imoveis-pino text { fill: var(--verde-escuro); font-size: 30px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
.imoveis-pino:hover rect, .imoveis-pino:focus-visible rect { fill: var(--verde); }
.imoveis-pino:hover text, .imoveis-pino:focus-visible text { fill: var(--sobre-verde); }
.imoveis-pino:focus-visible { outline: none; }
.imoveis-pino.com-risco rect { fill: var(--ruim); stroke: var(--ruim); }
.imoveis-pino.com-risco path { fill: var(--ruim); }
.imoveis-pino.com-risco text { fill: var(--elevado); }
.imoveis-mapa-legenda { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px; color: var(--texto-suave); font-size: 12px; }
.imoveis-mapa-legenda > span { display: flex; align-items: center; gap: 8px; }
.imoveis-legenda-faixa { display: inline-flex; gap: 2px; }
.imoveis-legenda-faixa i { width: 16px; height: 10px; border-radius: 3px; }

/* Sem foto: o desenho de uma sala, nas cores do site */
.imovel-sem-foto { display: block; background: var(--superficie); }
.imovel-sem-foto svg { display: block; width: 100%; height: 100%; }
.imovel-sem-foto .parede { fill: var(--mancha); }
.imovel-sem-foto .chao { fill: color-mix(in srgb, var(--sol-escuro) 35%, var(--mancha)); }
.imovel-sem-foto .janela { fill: color-mix(in srgb, var(--tema-educacao-fundo) 80%, var(--cartao)); stroke: var(--cartao); stroke-width: 2; }
.imovel-sem-foto .janela-traco { stroke: var(--cartao); stroke-width: 2; }
.imovel-sem-foto .sofa { fill: var(--verde-vivo); opacity: .75; }

/* Página do anúncio */
.imovel-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--texto-suave); font-size: 13px; }
.imovel-trilha a:not(.busca-voltar) { color: var(--verde); font-weight: 700; text-decoration: none; }
.imovel-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; margin-top: 16px; align-items: start; }
.imovel-galeria { display: grid; gap: 8px; }
.imovel-foto-principal { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; background: var(--superficie); }
.imovel-foto-principal img, .imovel-galeria.sem-fotos .principal { display: block; width: 100%; height: 100%; object-fit: cover; }
.imovel-galeria.sem-fotos { overflow: hidden; aspect-ratio: 16 / 10; border-radius: 16px; }
.imovel-fotos-total {
  position: absolute; right: 12px; bottom: 12px; padding: 4px 12px; border-radius: 999px;
  background: rgba(17, 17, 17, .78); color: #fff; font-size: 12.5px; font-weight: 700;
}
.imovel-miniaturas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.imovel-miniatura {
  flex: none; width: 88px; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px; background: var(--superficie);
}
.imovel-miniatura img { display: block; width: 100%; height: 100%; object-fit: cover; }
.imovel-miniatura[aria-pressed="true"] { border-color: var(--verde); }
.imovel-titulo { margin: 18px 0 2px; font-family: var(--fonte-titulo); font-size: 28px; font-weight: 600; line-height: 1.15; }
.imovel-endereco { margin: 0; color: var(--texto-suave); font-size: 14.5px; }
.imovel-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.imovel-selo {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  background: var(--superficie); color: var(--texto-suave); font-size: 12px; font-weight: 700;
}
.imovel-selo.ok { background: var(--verde-claro); color: var(--verde-escuro); }
.imovel-selo .icone { width: 13px; height: 13px; }
.imovel-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.imovel-chips li { padding: 5px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--elevado); font-size: 13px; font-weight: 600; }

.imovel-oficial { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--borda); }
.imovel-secao-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.imovel-secao-cabeca h2, .imovel-descricao h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; }
.imovel-secao-cabeca a { color: var(--verde); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.imovel-oficial-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.imovel-oficial-celula {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 8px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--borda); border-radius: 12px; background: var(--elevado);
}
.imovel-oficial-icone { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; }
.imovel-oficial-icone .icone { width: 15px; height: 15px; }
.imovel-oficial-icone.tema-educacao { background: var(--tema-educacao-fundo); color: var(--tema-educacao); }
.imovel-oficial-icone.tema-saude { background: var(--tema-saude-fundo); color: var(--tema-saude); }
.imovel-oficial-icone.tema-ambiente { background: var(--tema-ambiente-fundo); color: var(--tema-ambiente); }
.imovel-oficial-texto { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.imovel-oficial-texto small { overflow: hidden; color: var(--texto-suave); font-size: 11.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.imovel-oficial-celula strong { font-size: 15px; white-space: nowrap; }
.imovel-oficial-celula.risco { border-color: var(--ruim); background: var(--ruim-fundo); }
.imovel-oficial-celula.risco strong { color: var(--ruim); }
.imovel-oficial-celula.sem-dado strong { color: var(--texto-suave); font-weight: 600; }
.imovel-alerta-risco {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--ruim-fundo); color: var(--ruim); font-size: 13.5px;
}
.imovel-alerta-risco .icone { width: 18px; height: 18px; margin-top: 1px; }
.imovel-faixa-bairro {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; padding: 10px 14px;
  border-radius: 12px; background: var(--verde-claro); color: var(--verde-escuro); font-size: 13.5px; text-decoration: none;
}
.imovel-faixa-link { margin-left: auto; color: var(--verde); font-weight: 800; }
.imovel-faixa-bairro:hover .imovel-faixa-link, .imovel-opinioes:hover .imovel-faixa-link { text-decoration: underline; }
.imovel-nota { margin: 10px 0 0; color: var(--texto-suave); font-size: 12px; }
.imovel-nota a { color: var(--verde); font-weight: 700; }
.imovel-descricao { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--borda); }
.imovel-descricao p { margin: 10px 0 0; white-space: pre-line; font-size: 14.5px; line-height: 1.6; }

.imovel-lateral { position: sticky; top: 16px; display: grid; gap: 12px; }
.imovel-custo { padding: 18px; border: 1px solid var(--borda); border-radius: 18px; background: var(--elevado); box-shadow: var(--sombra-leve); }
.imovel-custo dl { margin: 0; }
.imovel-custo dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14px; }
.imovel-custo dt { color: var(--texto-suave); }
.imovel-custo dd { margin: 0; font-weight: 700; }
.imovel-custo .imovel-total { align-items: baseline; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--borda); }
.imovel-total dt { color: var(--texto); font-weight: 800; }
.imovel-total dd { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; color: var(--verde-escuro); }
.imovel-custo-falta { display: flex; gap: 6px; margin: 8px 0 0; color: var(--medio-texto); font-size: 12.5px; }
.imovel-custo-falta .icone { width: 14px; height: 14px; margin-top: 1px; }
.imovel-garantia { margin: 8px 0 14px; color: var(--texto-suave); font-size: 12.5px; }
.imovel-custo .imovel-botao { width: 100%; height: 46px; margin-top: 8px; }
.imovel-anunciante {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--borda); border-radius: 16px; background: var(--elevado); font-size: 14px;
}
.imovel-anunciante small { display: block; color: var(--texto-suave); font-size: 12px; }
.imovel-avatar {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--sol-claro); color: var(--sol-escuro); font-family: var(--fonte-titulo); font-weight: 700;
}
.imovel-opinioes, .imovel-relatorio {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px;
  color: var(--texto); font-size: 13px; text-decoration: none;
}
.imovel-opinioes { border: 1px solid var(--borda); background: var(--superficie); }
.imovel-relatorio { background: var(--sol-claro); color: var(--sol-escuro); }
.imovel-opinioes strong, .imovel-relatorio strong { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.imovel-relatorio:hover strong { text-decoration: underline; }
.imovel-barra-celular { display: none; }

@media (max-width: 1000px) {
  .imoveis-colunas { grid-template-columns: minmax(0, 1fr); }
  .imoveis-mapa-caixa { position: static; }
  .imovel-colunas { grid-template-columns: minmax(0, 1fr); }
  .imovel-lateral { position: static; }
  .imovel-oficial-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Celular: lista ou mapa (um de cada vez), e na página do anúncio o preço e os botões presos embaixo. */
@media (max-width: 820px) {
  .imoveis-folha { padding-bottom: 96px; }
  .imoveis-pagina .busca-voltar { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -6px; border-radius: 50%; color: var(--texto); }
  .imoveis-filtros { flex-wrap: nowrap; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 4px; }
  .imoveis-filtros > * { flex: none; }
  .imoveis-resumo .busca-vistas { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--superficie); }
  .imoveis-ordem { flex-basis: 100%; margin-left: 0; }
  .imoveis-pagina[data-vista="lista"] .imoveis-mapa-caixa { display: none; }
  .imoveis-pagina[data-vista="mapa"] .imoveis-lista { display: none; }
  .imovel-cartao > a:not(.cmp-im-botao) { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .imovel-preco strong { font-size: 20px; }
  .imovel-galeria, .imovel-galeria.sem-fotos { margin: 0 -16px; }
  .imovel-foto-principal, .imovel-galeria.sem-fotos { border-radius: 0; }
  .imovel-miniaturas { padding: 0 16px 4px; }
  .imovel-titulo { font-size: 23px; }
  .imovel-oficial-grade { grid-template-columns: minmax(0, 1fr); }
  .imovel-custo .imovel-botao { display: none; }
  .imovel-barra-celular {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 105;
    display: flex; align-items: center; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--borda); background: var(--cartao); box-shadow: 0 -6px 18px rgba(var(--sombra-rgb), .12);
  }
  .imovel-barra-preco { display: flex; flex-direction: column; margin-right: auto; line-height: 1.15; }
  .imovel-barra-preco strong { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; color: var(--verde-escuro); }
  .imovel-barra-preco small { color: var(--texto-suave); font-size: 11px; }
  .imovel-barra-celular .imovel-botao { height: 42px; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .imovel-cartao > a:not(.cmp-im-botao) { transition: none; } }

/* ==============================================================================================
   Anunciar imóvel (anunciar.js), Meus anúncios (meu-mapin.js) e as contas de teste da janela de entrar (conta.js).
   Desenho: docs/prototipos/anunciar-imovel/ (telas 1, 2, 3, 6 e 7).
   ============================================================================================== */

/* Contas de teste: só aparecem quando a API diz que MAPIN_CONTAS_DE_TESTE=sim (desenvolvimento). */
.entrar-teste { margin: 18px 0 0; padding: 12px 14px; border: 1.5px dashed var(--sol-escuro); border-radius: 14px; background: var(--sol-claro); }
.entrar-teste[hidden] { display: none; }
.entrar-teste-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; color: var(--sol-escuro); font-size: 13px; font-weight: 800; }
.entrar-teste-titulo .icone { width: 15px; height: 15px; }
.entrar-teste-titulo small { font-weight: 500; }
.entrar-teste-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.entrar-teste-botoes button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border: 1.5px solid var(--sol-escuro); border-radius: 999px; background: var(--elevado); color: var(--texto);
  font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer;
}
.entrar-teste-botoes button:hover { background: var(--hover); }
.entrar-teste-botoes button:disabled { opacity: .55; cursor: default; }
.entrar-teste-botoes .icone { width: 15px; height: 15px; }

/* O fluxo de 3 passos */
.anunciar-sair { margin-left: auto; color: var(--texto-suave); font-size: 13.5px; font-weight: 700; text-decoration: none; }
.anunciar-sair:hover { color: var(--verde-escuro); text-decoration: underline; }
.anunciar-passos { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 0; padding: 0; list-style: none; }
.anunciar-passos li { display: flex; align-items: center; gap: 9px; color: var(--texto-suave); font-size: 14px; font-weight: 700; }
.anunciar-passo-n {
  display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--borda); border-radius: 50%;
  background: var(--elevado); font-size: 13px; font-weight: 800;
}
.anunciar-passo-n .icone { width: 14px; height: 14px; }
.anunciar-passos li.atual { color: var(--texto); }
.anunciar-passos li.atual .anunciar-passo-n { border-color: var(--acao); background: var(--acao); color: var(--sobre-acao); }
.anunciar-passos li.feito .anunciar-passo-n { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro); }

.anunciar-passo { margin-top: 22px; }
.anunciar-passo h2 { margin: 0; font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; line-height: 1.15; }
.anunciar-sobre { margin: 0 0 4px; color: var(--texto-suave); font-size: 14px; }
.anunciar-lead { margin: 6px 0 0; color: var(--texto-suave); font-size: 14.5px; }
.anunciar-colunas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 22px; }
.anunciar-form { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.anunciar-rotulo { display: block; margin-top: 10px; font-size: 14px; font-weight: 800; }
.anunciar-rotulo small { color: var(--texto-suave); font-weight: 500; }
.anunciar-dica { display: flex; gap: 6px; margin: 2px 0 0; color: var(--texto-suave); font-size: 12.5px; line-height: 1.45; }
.anunciar-dica .icone { width: 14px; height: 14px; margin-top: 2px; }
.anunciar-input, .anunciar-busca input, .anunciar-numero input, .anunciar-form textarea {
  width: 100%; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--borda); border-radius: 14px;
  background: var(--elevado); color: var(--texto); font: inherit; font-size: 15px;
}
.anunciar-form textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; }
.anunciar-input:focus, .anunciar-busca input:focus, .anunciar-numero input:focus, .anunciar-form textarea:focus {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent);
}
.anunciar-busca { position: relative; }
.anunciar-busca > .icone { position: absolute; left: 14px; top: 14px; width: 17px; height: 17px; color: var(--texto-suave); pointer-events: none; }
.anunciar-busca input { padding-left: 40px; }
.anunciar-sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--borda); border-radius: 16px; background: var(--elevado); box-shadow: var(--sombra);
}
.anunciar-sugestoes[hidden] { display: none; }
.anunciar-sugestoes button {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: 100%; padding: 9px 10px; border: none; border-radius: 10px;
  background: none; color: var(--texto); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
}
.anunciar-sugestoes button:hover, .anunciar-sugestoes button:focus-visible { background: var(--verde-claro); outline: none; }
.anunciar-sugestoes small { color: var(--texto-suave); font-size: 13px; }
.anunciar-escolhido, .anunciar-endereco-fixo {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 0; padding: 10px 14px; border-radius: 12px;
  background: var(--verde-claro); color: var(--verde-escuro); font-size: 14px;
}
.anunciar-escolhido .icone, .anunciar-endereco-fixo .icone { width: 16px; height: 16px; }
.anunciar-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; border: none; min-width: 0; }
.anunciar-opcoes.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.anunciar-opcoes legend { grid-column: 1 / -1; padding: 0; }
.anunciar-opcao {
  display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1.5px solid var(--borda); border-radius: 14px;
  background: var(--elevado); cursor: pointer;
}
.anunciar-opcao.marcada { border-color: var(--verde); background: var(--verde-claro); }
.anunciar-opcao input { margin-top: 3px; accent-color: var(--verde); }
.anunciar-opcao span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.anunciar-opcao small { color: var(--texto-suave); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.anunciar-acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.anunciar-voltar { padding: 8px 4px; border: none; background: none; color: var(--texto-suave); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.anunciar-voltar:hover { color: var(--verde-escuro); text-decoration: underline; }
.anunciar-erro {
  display: flex; gap: 8px; margin: 8px 0 0; padding: 12px 14px; border-radius: 12px;
  background: var(--ruim-fundo); color: var(--texto); font-size: 14px; line-height: 1.45;
}
.anunciar-erro[hidden] { display: none; }
.anunciar-erro .icone { width: 17px; height: 17px; margin-top: 1px; color: var(--ruim); }

.anunciar-lado { padding: 18px 20px; border: 1px solid var(--borda); border-radius: 22px; background: var(--elevado); }
.anunciar-lado h3 { margin: 0 0 12px; font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600; }
.anunciar-lado .imovel-oficial-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.anunciar-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.anunciar-chips button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px; border: 1.5px solid var(--borda); border-radius: 999px;
  background: var(--elevado); color: var(--texto); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.anunciar-chips button[aria-pressed="true"] { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-escuro); }
.anunciar-chips .icone { width: 14px; height: 14px; }
.anunciar-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.anunciar-grade.dois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.anunciar-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.anunciar-numero { position: relative; display: flex; align-items: center; }
.anunciar-numero input { padding-right: 40px; text-align: right; }
.anunciar-numero span { position: absolute; right: 14px; color: var(--texto-suave); font-size: 14px; pointer-events: none; }
.anunciar-numero span:first-child { left: 14px; right: auto; }
.anunciar-numero span:first-child + input { padding-left: 44px; padding-right: 14px; }
.anunciar-numero.estreito { max-width: 160px; }
.anunciar-stepper { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 6px; border: 1.5px solid var(--borda); border-radius: 14px; background: var(--elevado); }
.anunciar-stepper output { min-width: 24px; font-size: 16px; font-weight: 800; text-align: center; }
.anunciar-stepper button {
  display: grid; place-items: center; width: 30px; height: 30px; border: none; border-radius: 50%;
  background: var(--superficie); color: var(--texto); cursor: pointer;
}
.anunciar-stepper button:hover:not(:disabled) { background: var(--verde-claro); }
.anunciar-stepper button:disabled { opacity: .4; cursor: default; }
.anunciar-stepper .icone { width: 15px; height: 15px; }
.anunciar-itens { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; border: none; min-width: 0; }
.anunciar-itens legend { width: 100%; padding: 0; }
.anunciar-item { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.anunciar-item input { width: 18px; height: 18px; accent-color: var(--verde); }
.anunciar-custo .anunciar-campo + .anunciar-campo { margin-top: 8px; }
.anunciar-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--borda);
}
.anunciar-total span { font-size: 15px; font-weight: 800; }
.anunciar-total strong { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; color: var(--verde-escuro); }

.anunciar-fotos-cabeca { display: flex; justify-content: space-between; color: var(--texto-suave); font-size: 13px; }
.anunciar-fotos-cabeca .anunciar-rotulo { margin: 0; color: var(--texto); }
.anunciar-fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.anunciar-foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--superficie); }
.anunciar-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.anunciar-capa { position: absolute; left: 6px; top: 6px; padding: 2px 10px; border-radius: 999px; background: var(--tinta); color: var(--fundo); font-size: 12px; font-weight: 800; }
.anunciar-foto-acoes {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px; padding: 6px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}
.anunciar-foto-acoes button {
  display: grid; place-items: center; width: 28px; height: 28px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: #111111; cursor: pointer;
}
.anunciar-foto-acoes button:disabled { opacity: .35; cursor: default; }
.anunciar-foto-acoes .icone { width: 14px; height: 14px; }
.anunciar-foto.adicionar { border: 1.5px dashed var(--verde); background: transparent; }
.anunciar-foto.adicionar button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%;
  border: none; background: none; color: var(--verde-escuro); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.anunciar-foto.adicionar .icone { width: 22px; height: 22px; }
.anunciar-publicar { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borda); }
.anunciar-regras { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; font-size: 13.5px; }
.anunciar-regras li { display: flex; gap: 8px; }
.anunciar-regras .icone { width: 16px; height: 16px; margin-top: 2px; color: var(--verde-escuro); }
.anunciar-aceite { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 12px; font-size: 13.5px; cursor: pointer; }
.anunciar-aceite input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--verde); }
.imovel-botao.largo { width: 100%; height: 46px; }
.anunciar-porta { max-width: 560px; margin: 36px auto 0; padding: 28px; border: 1px solid var(--borda); border-radius: 22px; background: var(--elevado); text-align: center; }
.anunciar-porta h2 { margin: 0 0 10px; font-family: var(--fonte-titulo); font-size: 26px; font-weight: 600; }
.anunciar-porta p { margin: 0 0 12px; color: var(--texto-suave); font-size: 14.5px; line-height: 1.55; }
.anunciar-porta .anunciar-porta-nota { display: flex; justify-content: center; gap: 8px; font-size: 13px; }
.anunciar-porta .imovel-botao { margin-top: 6px; }

/* Meus anúncios (Meu Mapin) */
.mm-anuncios { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mm-anuncio { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 18px; padding: 14px; border: 1px solid var(--borda); border-radius: 22px; background: var(--elevado); }
.mm-anuncio-foto { overflow: hidden; align-self: start; aspect-ratio: 4 / 3; border-radius: 14px; background: var(--superficie); }
.mm-anuncio-foto img, .mm-anuncio-foto .imovel-sem-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-anuncio-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mm-anuncio h3 { margin: 0; font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; }
.mm-anuncio-onde { margin: 0; color: var(--texto-suave); font-size: 14px; }
.mm-anuncio-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13.5px; }
.mm-anuncio-total strong { font-size: 15px; }
.mm-situacao-anuncio { padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.mm-situacao-anuncio.ativo { background: var(--bom-fundo); color: var(--verde-escuro); }
.mm-situacao-anuncio.alugado { background: var(--superficie); color: var(--texto-suave); border: 1px solid var(--borda); }
.mm-situacao-anuncio.vencido { background: var(--medio-fundo); color: var(--medio-texto); }
.mm-anuncio-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mm-anuncio-confirma { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; padding: 10px 14px; border-radius: 12px; background: var(--ruim-fundo); font-size: 13.5px; }
.mm-nav-item[aria-disabled="true"] { color: var(--texto-suave); cursor: default; }
.mm-nav-item[aria-disabled="true"]:hover { background: none; }
.mm-nav-item small { font-size: 12px; color: var(--texto-suave); }

@media (max-width: 1000px) {
  .anunciar-colunas { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .imoveis-anunciar { display: inline-flex; height: 36px; padding: 0 14px; margin-left: auto; font-size: 13px; }
  .anunciar-passos { gap: 8px 14px; }
  .anunciar-passos li { font-size: 12.5px; }
  .anunciar-passos li:not(.atual) { font-size: 0; gap: 0; }
  .anunciar-passos li:not(.atual) .anunciar-passo-n { font-size: 13px; }
  .anunciar-passo h2 { font-size: 24px; }
  .anunciar-opcoes { grid-template-columns: minmax(0, 1fr); }
  .anunciar-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anunciar-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .anunciar-lado { padding: 16px; border-radius: 18px; }
  .anunciar-lado .imovel-oficial-grade { grid-template-columns: minmax(0, 1fr); }
  .anunciar-sair { display: none; }
  .mm-anuncio { grid-template-columns: minmax(0, 1fr); }
  .mm-anuncio-foto { max-width: 280px; }
}
.imoveis-anunciar, .imovel-botao { cursor: pointer; }
.mm-aviso-vence { display: inline-flex; align-items: center; gap: 5px; color: var(--medio-texto); font-weight: 700; }
.mm-aviso-vence .icone { width: 14px; height: 14px; }
.mm-nota-anuncios { margin: 16px 0 0; color: var(--texto-suave); font-size: 13px; line-height: 1.5; }

/* ==============================================================================================
   Mensagens dos anúncios (#235): o contador do topo e a página Mensagens do Meu Mapin (meu-mapin.js).
   Desenho: docs/prototipos/anunciar-imovel/ (telas 6 e 7).
   ============================================================================================== */
.conta-botao { position: relative; }
.conta-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--ruim); color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
}
.conta-botao > .conta-badge { position: absolute; left: 22px; top: -5px; box-shadow: 0 0 0 2px var(--cartao); }
.conta-badge.solta { margin-left: 6px; vertical-align: 1px; }

.mm-msgs { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
.mm-msgs-lista { min-width: 0; }
.mm-conversas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mm-conversa {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 16px; background: var(--elevado); color: var(--texto); text-decoration: none;
}
.mm-conversa:hover { border-color: var(--verde); }
.mm-conversa.aberta { border-color: var(--verde); background: var(--verde-claro); }
.mm-conversa:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.mm-conversa-capa { overflow: hidden; width: 52px; height: 52px; border-radius: 12px; background: var(--superficie); }
.mm-conversa-capa img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-conversa-sem-foto { display: grid; place-items: center; width: 100%; height: 100%; color: var(--texto-suave); }
.mm-conversa-texto { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.mm-conversa-texto strong { font-size: 14.5px; }
.mm-conversa.nao-lida .mm-conversa-texto strong { font-weight: 800; }
.mm-conversa-texto small { overflow: hidden; color: var(--texto-suave); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.mm-conversa-previa { overflow: hidden; color: var(--texto-suave); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.mm-conversa.nao-lida .mm-conversa-previa { color: var(--texto); font-weight: 700; }
.mm-conversa-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--texto-suave); font-size: 11.5px; white-space: nowrap; }

.mm-msgs-conversa { min-width: 0; }
.mm-chat { display: flex; flex-direction: column; min-height: 420px; border: 1px solid var(--borda); border-radius: 22px; background: var(--elevado); }
.mm-chat.vazio { align-items: center; justify-content: center; gap: 12px; padding: 40px 20px; color: var(--texto-suave); text-align: center; }
.mm-chat-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; border-bottom: 1px solid var(--borda); }
.mm-chat-voltar { display: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--texto); transform: scaleX(-1); }
.mm-chat-quem { display: flex; flex: 1 1 220px; flex-direction: column; min-width: 0; }
.mm-chat-quem strong { font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600; }
.mm-chat-quem small { color: var(--texto-suave); font-size: 12.5px; }
.mm-chat-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mm-denunciada { padding: 3px 11px; border-radius: 999px; background: var(--medio-fundo); color: var(--medio-texto); font-size: 12.5px; font-weight: 800; }
.mm-chat > .mm-anuncio-confirma { margin: 12px 18px 0; }
.mm-chat-golpe {
  display: flex; gap: 8px; margin: 12px 18px 0; padding: 10px 14px; border-radius: 12px;
  background: var(--sol-claro); color: var(--sol-escuro); font-size: 13px; line-height: 1.45;
}
.mm-chat-golpe .icone { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.mm-chat-msgs { display: flex; flex: 1; flex-direction: column; gap: 8px; max-height: 52vh; min-height: 220px; margin: 0; padding: 16px 18px; overflow-y: auto; list-style: none; }
.mm-chat-vazio { margin: auto; color: var(--texto-suave); font-size: 14px; }
.mm-msg { display: flex; flex-direction: column; gap: 3px; max-width: min(78%, 520px); padding: 9px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.mm-msg p { margin: 0; }
.mm-msg small { color: inherit; font-size: 11.5px; opacity: .7; }
.mm-msg.deles { align-self: flex-start; border-bottom-left-radius: 5px; background: var(--superficie); color: var(--texto); }
.mm-msg.minha { align-self: flex-end; border-bottom-right-radius: 5px; background: var(--verde); color: var(--sobre-verde); }
.mm-msg.escondida { border: 1.5px dashed var(--ruim); background: var(--ruim-fundo); color: var(--texto); }
.mm-msg-aviso { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; font-weight: 700; }
.mm-msg-aviso .icone { width: 15px; height: 15px; margin-top: 1px; flex: none; color: var(--ruim); }
.mm-chat-form { display: flex; align-items: flex-end; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--borda); }
.mm-chat-form textarea {
  flex: 1; min-height: 46px; max-height: 140px; padding: 11px 14px; border: 1.5px solid var(--borda); border-radius: 14px;
  background: var(--fundo); color: var(--texto); font: inherit; font-size: 15px; line-height: 1.4; resize: vertical;
}
.mm-chat-form textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 22%, transparent); }
.mm-chat-erro { margin: 0 18px 14px; padding: 10px 14px; border-radius: 12px; background: var(--ruim-fundo); font-size: 13.5px; }
.mm-chat-leitura { display: flex; gap: 8px; margin: 0; padding: 14px 18px; border-top: 1px solid var(--borda); color: var(--texto-suave); font-size: 13.5px; }
.mm-chat-leitura .icone { width: 16px; height: 16px; margin-top: 2px; flex: none; }

@media (max-width: 1000px) {
  .mm-msgs { grid-template-columns: minmax(0, 1fr); }
  /* No celular, uma coisa de cada vez: a lista ou a conversa (com o botão de voltar). */
  .mm-msgs.com-conversa .mm-msgs-lista { display: none; }
  .mm-msgs:not(.com-conversa) .mm-msgs-conversa { display: none; }
  .mm-chat-voltar { display: grid; }
  .mm-chat { border-radius: 18px; }
  .mm-chat-msgs { max-height: 58vh; }
  .mm-msg { max-width: 88%; }
}

/* ---------- Comparar imóveis (#/comparar-imoveis/{a}/{b}, comparar-imoveis.js) ---------- */
/* Botão "Comparar" do cartão (fora do <a> do cartão: link dentro de link é HTML inválido) e da página do anúncio. */
.cmp-im-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px; border: 1.5px dashed var(--verde-claro-borda); border-radius: 999px; background: var(--elevado);
  color: var(--verde-escuro); font-size: 13px; font-weight: 700; text-decoration: none;
}
.cmp-im-botao:hover { background: var(--verde-claro); }
.imovel-cartao .cmp-im-botao { margin: 6px 0 2px 10px; }
.imovel-custo .cmp-im-botao { width: 100%; height: 42px; margin-top: 8px; font-size: 14px; }

/* A tela: rótulo + 2 colunas; o topo (foto, título, endereço) fica fixo ao rolar */
.cmp-im-h1 { margin: 14px 0 4px; font-family: var(--fonte-titulo); font-size: 28px; font-weight: 600; line-height: 1.15; }
.cmp-im-lead { margin: 0 0 14px; color: var(--texto-suave); font-size: 14px; line-height: 1.5; }
.cmp-im-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 8px 0; border-top: 1px solid var(--borda); }
.cmp-im-bloco h2 + .cmp-im-linha { border-top: 0; }
.cmp-im-bloco { margin-top: 18px; }
.cmp-im-bloco h2 { margin: 0 0 4px; font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; }
.cmp-im-rotulo { padding-top: 4px; color: var(--texto-suave); font-size: 13.5px; line-height: 1.3; }
.cmp-im-valor {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 4px 8px; border-radius: 8px;
  font-size: 14px; overflow-wrap: anywhere;
}
.cmp-im-valor strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-im-valor small { color: var(--texto-suave); font-size: 12px; font-weight: 500; line-height: 1.3; }
.cmp-im-valor a { color: var(--verde); font-weight: 700; text-decoration: none; }
.cmp-im-valor a:hover { text-decoration: underline; }
.cmp-im-valor .imovel-nota-bairro { align-self: flex-start; }
.cmp-im-valor.vence { background: var(--bom-fundo); }
.cmp-im-valor.vence strong { color: var(--bom); }
.cmp-im-valor strong.risco { color: var(--ruim); }
.cmp-im-valor small.cmp-im-aviso { color: var(--medio-texto); font-weight: 700; }
.cmp-im-sem { color: var(--texto-suave); font-weight: 500; }
.cmp-im-nota { margin: 6px 0 0; color: var(--texto-suave); font-size: 12px; line-height: 1.45; }
.cmp-im-avisos { border-top: 0; padding-top: 0; }
.cmp-im-avisos .imovel-alerta-risco { margin: 8px 0 0; font-size: 12.5px; }
.cmp-im-topo {
  position: sticky; top: 0; z-index: 3; padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--borda);
  background: var(--cartao); box-shadow: 0 6px 12px -8px rgba(var(--sombra-rgb), .25);
}
.cmp-im-topo .cmp-im-valor { padding: 0; }
.cmp-im-coluna { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cmp-im-coluna .cmp-letra { position: absolute; top: 6px; left: 6px; z-index: 1; background: var(--tinta); color: var(--cartao); }
.cmp-im-coluna .cmp-letra.cmp-b { background: var(--elevado); color: var(--tinta); }
.cmp-im-foto { overflow: hidden; height: 132px; border-radius: 10px; background: var(--superficie); }
.cmp-im-foto img, .cmp-im-foto .imovel-sem-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmp-im-titulo { font-size: 14.5px; font-weight: 800; line-height: 1.25; }
.cmp-im-endereco { color: var(--texto-suave); font-size: 12.5px; line-height: 1.3; }
.cmp-im-ver { color: var(--verde); font-size: 13px; font-weight: 700; text-decoration: none; }
.cmp-im-ver:hover { text-decoration: underline; }
.cmp-im-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-im-acoes a, .cmp-im-valor .cmp-im-acoes a {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 999px;
  background: var(--elevado); color: var(--texto); font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.cmp-im-acoes a:hover { background: var(--verde-claro); border-color: var(--verde); text-decoration: none; }
.cmp-im-coluna.vazia { padding: 12px; border: 1.5px dashed var(--borda); border-radius: 12px; }
.cmp-im-coluna.vazia .cmp-letra { position: static; }
.cmp-im-explica { margin-top: 22px; }

/* Tela cortada em 2: a metade do imóvel escolhido e a metade da lista para escolher o outro */
.cmp-im-dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 14px; }
.cmp-im-metade.fixa { position: sticky; top: 8px; }
.cmp-im-metade .imovel-alerta-risco { margin: 8px 0 0; font-size: 12.5px; }
.cmp-im-escolha h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; }
.cmp-im-escolha h2 .cmp-letra.cmp-b { background: var(--elevado); color: var(--tinta); }
.cmp-im-escolha-dica { margin: 4px 0 0; color: var(--texto-suave); font-size: 13px; line-height: 1.4; }
.cmp-im-escolha .imoveis-filtros { margin-top: 12px; }
.cmp-im-escolha-lista { margin-top: 14px; }
.imovel-cartao.compacto > a:not(.cmp-im-botao) { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
.imovel-cartao.compacto .imovel-preco strong { font-size: 19px; }
.imovel-cartao.compacto .imovel-cartao-foto { aspect-ratio: 1 / 1; }
.cmp-im-faixa {
  display: none; align-items: center; gap: 6px 10px; margin: 10px 0 0; padding: 10px 14px; border-radius: 12px;
  background: var(--verde-claro); color: var(--verde-escuro); font-size: 13.5px;
}
.cmp-im-faixa a { margin-left: auto; color: var(--verde-escuro); font-weight: 800; }

@media (max-width: 820px) {
  .cmp-im-h1 { font-size: 22px; }
  .cmp-im-lead { font-size: 13px; }
  /* No celular as 2 colunas continuam lado a lado: o rótulo passa para uma linha própria, em cima delas */
  .cmp-im-linha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 8px; }
  .cmp-im-rotulo { grid-column: 1 / -1; padding-top: 0; font-size: 12.5px; font-weight: 700; }
  .cmp-im-topo .cmp-im-rotulo, .cmp-im-avisos .cmp-im-rotulo { display: none; }
  .cmp-im-valor { padding: 4px 6px; font-size: 13px; }
  .cmp-im-topo { background: var(--fundo); }
  .cmp-im-foto { height: 72px; }
  .cmp-im-titulo { font-size: 13px; }
  .cmp-im-endereco { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; }
  .cmp-im-acoes a { padding: 0 9px; }
}
/* Com a metade apertada, a lista ocupa a tela toda e o imóvel escolhido vira a faixa "Comparando com" */
@media (max-width: 720px) {
  .cmp-im-dividido { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cmp-im-dividido:not(.sem-referencia) .cmp-im-metade { display: none; }
  .cmp-im-faixa { display: flex; }
  .imovel-cartao.compacto > a:not(.cmp-im-botao) { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
}