/* ==========================================================================
   Portal Raio-X Espanha — folha única, sem build.
   Paleta de contraste alto. Estado nunca depende só de cor: todo selo tem
   texto e os avisos são frases completas.
   ========================================================================== */

:root {
  /* Marca e tinta (contraste calculado sobre #fff / #f4f7f8). */
  --marca: #0d5c63;
  --marca-escura: #0a4448;
  --marca-clara: #e6f4f4;
  --tinta: #0f172a;
  --tinta-media: #475569;
  --tinta-clara: #5b6779;
  --fundo: #f4f7f8;
  --branco: #ffffff;

  /* Superfícies e réguas. */
  --superficie-1: #ffffff;
  --superficie-2: #f8fafb;
  --superficie-3: #eef4f5;
  --borda: #d7e0e3;
  --borda-forte: #b6c4ca;
  --borda-suave: #eaf0f2;

  /* Estado de interface (nunca codifica dado). */
  --foco: #b45309;
  --erro: #991b1b;
  --erro-fundo: #fef2f2;
  --erro-borda: #fca5a5;
  --alerta: #92400e;
  --alerta-fundo: #fffbeb;
  --alerta-borda: #fcd34d;
  --ok: #166534;
  --ok-fundo: #f0fdf4;
  --ok-borda: #86efac;

  /* Séries de dado: um acento para dado, cinza para cromado. */
  --dado-1: #0d5c63;
  --dado-2: #b45309;
  --dado-3: #1d4ed8;
  --dado-4: #7c3aed;
  --dado-5: #64748b;
  --referencia: #64748b;
  --grade: #e2e8f0;

  /* Espaçamento (4, 8, 12, 16, 24, 32, 48, 64). */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-12: 3rem;
  --esp-16: 4rem;

  --raio: 0.85rem;
  --sombra: 0 1px 2px rgba(15, 23, 42, 0.05);
}

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

/* O atributo hidden precisa vencer os display: grid/flex das classes. */
[hidden] {
  display: none !important;
}

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

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

h1,
h2,
h3,
h4 {
  color: var(--tinta);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

p {
  margin: 0 0 0.75rem;
}

ul,
ol {
  margin: 0 0 0.75rem;
  padding-left: 1.25rem;
}

a {
  color: var(--marca-escura);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--marca);
}

/* Foco sempre visível e com contraste sobre fundo claro e escuro. */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

.burocracia :focus-visible {
  outline-color: #fbbf24;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  background: var(--tinta);
  color: var(--branco);
  padding: 0.7rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
  font-weight: 700;
  text-decoration: none;
}

.pular:focus {
  top: 0;
  color: var(--branco);
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ---------- Cabeçalho ---------- */
.cabecalho-site {
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 30;
}

.cabecalho-site__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  min-height: 64px;
  padding-block: 0.45rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--tinta);
  font-weight: 800;
  line-height: 1.1;
}

.marca__sigla {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.55rem;
  background: var(--marca);
  color: var(--branco);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.marca__texto {
  display: flex;
  flex-direction: column;
}

.marca__sub {
  color: var(--tinta-clara);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 0.65rem;
  border-radius: 0.45rem;
  color: var(--tinta-media);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.nav a:hover {
  background: var(--marca-clara);
  color: var(--marca-escura);
}

.nav a[aria-current="page"] {
  background: var(--marca-clara);
  color: var(--marca-escura);
}

/* ---------- Página ---------- */
.pagina {
  padding-block: 1rem 3rem;
}

.trilha {
  font-size: 0.82rem;
  color: var(--tinta-media);
  margin-block: 0.25rem 0.85rem;
}

.trilha a {
  font-weight: 600;
}

.heroi__sobre {
  color: #c9e9eb;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.botao--primario {
  background: var(--branco);
  color: var(--marca-escura);
  border-color: var(--branco);
}

.botao--primario:hover {
  background: #e8f7f8;
  color: var(--marca-escura);
}

.botao--contorno {
  background: var(--branco);
  border-color: var(--marca);
  color: var(--marca-escura);
}

.botao--contorno:hover {
  background: var(--marca-clara);
}

.botao--discreto {
  background: var(--branco);
  border-color: var(--borda);
  color: var(--tinta-media);
}

.botao--discreto:hover {
  border-color: var(--marca);
  color: var(--marca-escura);
}

.botao:disabled,
.botao[aria-disabled="true"] {
  border-color: var(--borda);
  background: var(--superficie-2);
  color: var(--tinta-clara);
  cursor: not-allowed;
}

/* ---------- Cartões ---------- */
.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
  overflow: hidden;
}

.cartao__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--borda-suave);
}

.cartao__topo h3 {
  margin: 0;
  font-size: 1.05rem;
}

.cartao__corpo {
  padding: 1rem 1.1rem;
}

.resumo-cobertura {
  color: var(--tinta-media);
  font-size: 0.76rem;
  font-weight: 600;
}

/* ---------- Layout de duas colunas ---------- */
.layout {
  display: grid;
  gap: 1.25rem;
}

/* Sem isto, a tabela de largura mínima expande a coluna do grid e o
   documento inteiro passa a rolar na horizontal. O scroll é só da tabela. */
.layout > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }

  .lateral {
    position: sticky;
    top: 84px;
  }
}

.secao-titulo {
  font-size: 1.35rem;
  margin-top: 0.5rem;
}

.secao-ajuda {
  color: var(--tinta-media);
  font-size: 0.88rem;
  max-width: 78ch;
}

/* ---------- Selos de cobertura ---------- */
.selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 0.35rem;
  padding: 0.12rem 0.3rem;
  font-size: 0; /* etiqueta compacta: a letra vem de ::after */
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
  transition: font-size 0.12s ease, padding 0.12s ease;
}
.selo::after { font-size: 0.7rem; line-height: 1; }
.selo--municipio::after { content: "M"; }
.selo--provincia::after { content: "P"; }
.selo--ccaa::after { content: "C"; }
.selo--nacional::after { content: "N"; }
.selo--misto::after { content: "V"; }
.selo--sem::after { content: "S"; }
.selo:hover,
.selo:focus-within {
  font-size: 0.7rem;
  padding: 0.12rem 0.42rem;
}
.selo:hover::after,
.selo:focus-within::after { content: none; }
/* Na legenda explicativa o texto completo é necessário. */
.legenda .selo,
.legenda .selo:hover {
  font-size: 0.7rem;
  padding: 0.12rem 0.42rem;
}
.legenda .selo::after { content: none; }

.selo--municipio {
  background: #e6f4f4;
  border-color: #5ba9ae;
  color: #0a4448;
}

.selo--provincia {
  background: #eef2ff;
  border-color: #818cf8;
  color: #312e81;
}

.selo--ccaa {
  background: #fff7ed;
  border-color: #fb923c;
  color: #8a2c0d;
}

.selo--nacional {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #334155;
}

.selo--sem {
  background: #f8fafc;
  border: 1px dashed #64748b;
  color: #334155;
}

.selo-nota {
  display: block;
  margin-top: 0.25rem;
  color: #8a2c0d;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
}

.cobertura {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

/* ---------- Avisos de qualidade ---------- */
.aviso-dado {
  display: block;
  margin-top: 0.35rem;
  border-radius: 0.35rem;
  padding: 0.3rem 0.42rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

.aviso-dado--instavel {
  background: var(--erro-fundo);
  border: 1px solid var(--erro-borda);
  color: #7f1d1d;
}

.aviso-dado--confianca {
  background: var(--alerta-fundo);
  border: 1px solid var(--alerta-borda);
  color: #78350f;
}

.qualidade-mini {
  display: block;
  margin-top: 0.2rem;
  color: var(--tinta-media);
  font-size: 0.75rem;
}

/* ---------- Tabelas ---------- */
.tabela-scroll {
  position: relative; /* contém a coluna sticky e evita overflow do documento */
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.tabela {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabela caption {
  padding: 0.6rem 1.1rem;
  color: var(--tinta-media);
  font-size: 0.82rem;
  text-align: left;
}

.tabela th,
.tabela td {
  padding: 0.72rem 0.8rem;
  border-top: 1px solid var(--borda-suave);
  text-align: left;
  vertical-align: top;
}

.tabela thead th {
  background: #f8fafb;
  border-top: 0;
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tabela tbody th {
  font-weight: 700;
  color: var(--tinta);
}

.tabela .num {
  font-variant-numeric: tabular-nums;
}

/* ---------- Grupos dentro da tabela (Habitação) ----------
   Agrupar é só leitura: as linhas continuam com valor, fonte, período e
   selo próprios. O cabeçalho de grupo usa <th scope="rowgroup">. */
.tabela .linha-grupo th {
  background: var(--marca-clara);
  border-top: 1px solid var(--borda);
  color: var(--marca-escura);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tabela .linha-grupo__rodape td {
  border-top: 0;
  background: #fbfcfd;
  padding-top: 0.55rem;
  padding-bottom: 0.7rem;
}

.grupo-nota,
.base-aluguel {
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.78rem;
  line-height: 1.45;
}

.grupo-nota + .base-aluguel {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--borda);
}

.base-aluguel {
  color: var(--tinta-clara);
}

.base-aluguel a {
  font-weight: 600;
}

.valor {
  display: block;
  color: var(--tinta);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.valor--nulo {
  color: var(--tinta-media);
  font-weight: 600;
}

.periodo {
  display: block;
  color: var(--tinta-media);
  font-size: 0.82rem;
}

.indicador {
  display: block;
}

.fonte {
  display: block;
  margin-top: 0.3rem;
  color: var(--tinta-clara);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

.fonte a {
  font-weight: 600;
}

/* ---------- Nota curta de período/vintage (comparador) ---------- */
.nota-dimensao {
  margin: 0.5rem 1.1rem 0.75rem;
  padding: 0.55rem 0.75rem;
  background: #f8fafb;
  border-left: 3px solid var(--marca);
  border-radius: 0 0.35rem 0.35rem 0;
  color: var(--tinta-media);
  font-size: 0.82rem;
  line-height: 1.45;
  max-width: 80ch;
}

@media (max-width: 600px) {
  .nota-dimensao {
    margin-inline: 0.9rem;
  }
}

/* ---------- Dimensão vazia (lacuna esperada) ---------- */
/* ---------- Legenda ---------- */
.legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.legenda li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--tinta-media);
  font-size: 0.82rem;
  line-height: 1.4;
}

.legenda .selo {
  flex: 0 0 auto;
}

.detalhes {
  margin-top: 0.5rem;
}

.detalhes summary {
  cursor: pointer;
  color: var(--marca-escura);
  font-size: 0.85rem;
  font-weight: 700;
  min-height: 44px;
  display: list-item;
  padding-block: 0.4rem;
}

.detalhes summary:hover {
  color: var(--marca);
}

.glossario {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--tinta-media);
  font-size: 0.82rem;
}

.glossario li {
  margin-bottom: 0.4rem;
}

.glossario strong {
  color: var(--tinta);
}

/* ---------- Cobertura lateral ---------- */
/* ---------- Burocracia (conteúdo separado) ---------- */
.burocracia {
  margin-top: 1.5rem;
  padding: clamp(1.1rem, 3vw, 1.5rem);
  border-radius: var(--raio);
  background: var(--tinta);
  color: #e2e8f0;
}

.burocracia h2 {
  color: var(--branco);
  font-size: 1.2rem;
  margin-bottom: 0.35rem;
}

.burocracia p {
  color: #cbd5e1;
  font-size: 0.9rem;
  max-width: 75ch;
  margin-bottom: 0;
}

.burocracia__etiqueta {
  display: inline-block;
  margin-bottom: 0.55rem;
  border: 1px solid #64748b;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  color: #e2e8f0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Avisos de página ---------- */
.aviso {
  border: 1px solid;
  border-radius: 0.65rem;
  padding: 0.9rem 1rem;
  margin-block: 1rem;
}

.aviso h2 {
  color: inherit;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.aviso p {
  margin-bottom: 0.5rem;
}

.aviso p:last-child {
  margin-bottom: 0;
}

.aviso--erro {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  color: #7f1d1d;
}

.aviso--atencao {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: #78350f;
}

.aviso--info {
  background: var(--marca-clara);
  border-color: #9fd0d3;
  color: var(--marca-escura);
}

.aviso__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.status {
  min-height: 1.5rem;
  color: var(--tinta-media);
  font-size: 0.88rem;
  margin-block: 0.5rem;
}

.feedback {
  color: var(--ok);
  font-size: 0.82rem;
  font-weight: 700;
  margin: 0;
}

/* ---------- Esqueleto de carregamento ---------- */
.carregando {
  display: grid;
  gap: 0.8rem;
  margin-block: 1rem;
}

.esqueleto {
  height: 6.5rem;
  border-radius: var(--raio);
  background: linear-gradient(90deg, #e7edef 25%, #f4f8f8 50%, #e7edef 75%);
  background-size: 200% 100%;
  animation: brilho 1.3s linear infinite;
  border: 1px solid var(--borda-suave);
}

@keyframes brilho {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* ---------- Controles e busca ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.campo label {
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 700;
}

.campo__ajuda {
  color: var(--tinta-media);
  font-size: 0.76rem;
}

input[type="search"],
select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border: 1px solid #7c899c;
  border-radius: 0.5rem;
  background: var(--branco);
  color: var(--tinta);
  font: inherit;
  font-size: 0.92rem;
}

input[type="search"]::placeholder {
  color: #5b6779;
  opacity: 1;
}

input[type="search"]:hover,
select:hover {
  border-color: var(--marca);
}

/* ---------- Chips de cidades ---------- */
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 0.7rem;
  padding: 0;
}

.chips:empty {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 38px;
  padding: 0.2rem 0.25rem 0.2rem 0.7rem;
  border: 1px solid #9fd0d3;
  border-radius: 999px;
  background: var(--marca-clara);
  color: var(--marca-escura);
  font-size: 0.84rem;
  font-weight: 700;
}

.chip__nivel {
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chip__remover {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--marca-escura);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.chip__remover:hover {
  background: #c7e6e8;
}

/* ---------- Resultados da busca ---------- */
.resultados {
  list-style: none;
  max-height: 18rem;
  margin: 0.4rem 0 0;
  padding: 0;
  overflow-y: auto;
  border: 1px solid var(--borda);
  border-radius: 0.6rem;
  background: var(--branco);
}

.resultados:empty {
  display: none;
}

.resultados li + li {
  border-top: 1px solid var(--borda-suave);
}

.resultado-cidade {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.resultado-cidade:hover {
  background: #eef7f7;
}

.resultado-cidade strong {
  display: block;
  font-size: 0.9rem;
}

.resultado-cidade span {
  display: block;
  color: var(--tinta-media);
  font-size: 0.76rem;
}

/* ---------- Comparador ---------- */
.tabela--comparador {
  min-width: 760px;
}

.tabela--comparador thead th,
.tabela--comparador tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 200px;
  background: var(--branco);
  box-shadow: 1px 0 0 var(--borda);
}

.tabela--comparador thead th:first-child {
  z-index: 3;
  background: #f8fafb;
}

.tabela--comparador thead th:not(:first-child) {
  min-width: 190px;
}

@media (max-width: 600px) {
  .tabela--comparador thead th,
  .tabela--comparador tbody th {
    min-width: 150px;
  }
}

.th-cidade {
  display: block;
  color: var(--tinta);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.th-cidade__sub {
  display: block;
  margin-top: 0.1rem;
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.celula__periodo {
  display: block;
  margin-top: 0.15rem;
  color: var(--tinta-media);
  font-size: 0.78rem;
}

.celula__fonte {
  display: block;
  margin-top: 0.3rem;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

.celula__fonte a {
  font-weight: 600;
}

.diferenca {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.3rem;
  margin-top: 0.35rem;
  border-radius: 0.35rem;
  padding: 0.22rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.35;
}

.diferenca--acima {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
}

.diferenca--abaixo {
  background: var(--alerta-fundo);
  border: 1px solid var(--alerta-borda);
  color: #7c2d12;
}

.diferenca--base {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-weight: 600;
}

.diferenca--nao {
  border: 1px dashed var(--referencia);
  background: transparent;
  color: var(--tinta-media);
  font-weight: 600;
}

.diferenca__vs {
  font-weight: 500;
}

/* ---------- Início ---------- */
.busca-inicio {
  max-width: 38rem;
  margin-top: 1rem;
}

.grade-cidades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

.cidade-link {
  display: block;
  min-height: 44px;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--borda);
  border-radius: 0.7rem;
  background: var(--branco);
  color: var(--tinta);
  text-decoration: none;
  box-shadow: var(--sombra);
}

.cidade-link:hover {
  border-color: var(--marca);
  color: var(--tinta);
}

.cidade-link strong {
  display: block;
  font-size: 0.95rem;
}

.cidade-link span {
  display: block;
  color: var(--tinta-media);
  font-size: 0.76rem;
}

.cidade-link__pop {
  margin-top: 0.2rem;
  color: var(--tinta-clara) !important;
  font-variant-numeric: tabular-nums;
}

.explicacao {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.25rem;
}

@media (min-width: 760px) {
  .explicacao {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.explicacao .cartao {
  margin: 0;
}

.explicacao h3 {
  font-size: 0.98rem;
}

.explicacao p {
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.86rem;
}

/* ---------- Rodapé ---------- */
.rodape {
  margin-top: 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--borda);
  background: var(--branco);
  color: var(--tinta-media);
  font-size: 0.78rem;
}

.rodape p {
  margin: 0 0 0.35rem;
}

/* ---------- Telas muito estreitas (até 360 px) ---------- */
@media (max-width: 400px) {
  .cabecalho-site__interno {
    align-items: flex-start;
  }

  .nav {
    width: 100%;
  }

  .nav a {
    padding-inline: 0.5rem;
    font-size: 0.84rem;
  }

  .cartao__topo,
  .cartao__corpo {
    padding-inline: 0.85rem;
  }

  .chip {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (forced-colors: active) {
  .selo,
  .aviso-dado,
  .diferenca {
    border: 1px solid CanvasText;
  }
}

@media print {
  /* Controles sticky não têm função no papel e cortam o conteúdo. */
  .cabecalho-site,
  .pular,
  .nav,
  .lateral,
  .rodape,
  .busca-inicio,
  .cmp-controle,
  .match-form,
  .match-enviar,
  .vagas-filtros,
  .vagas-busca,
  .vagas-territorio__acoes,
  .vagas-paginacao,
  .carregando {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .pagina {
    max-width: none;
    padding-block: 0;
  }

  .cartao,
  .cobertura-bloco,
  .kpi,
  .grafico,
  .vazio,
  .tabela-scroll {
    box-shadow: none;
    border: 1px solid #999;
  }

  /* Tabelas e legendas aparecem inteiras, sem scroll próprio. */
  .tabela-scroll {
    overflow: visible;
  }

  .tabela {
    min-width: 0;
  }

  .tabela--comparador thead th,
  .tabela--comparador tbody th {
    position: static;
    box-shadow: none;
  }

  .tabela caption,
  .cobertura-legenda,
  .grafico__nota,
  .fonte-dimensao {
    display: block;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }

  tr,
  .linha-vaga,
  .kpi,
  .grafico,
  .match-linha {
    break-inside: avoid;
  }
}

/* ==========================================================================
   Match por perfil — formulário, prioridades e resultado.
   Tudo escopado em .match-* para não alterar as telas existentes.
   ========================================================================== */

.match-form {
  margin-block: 1rem;
}

.match-grade {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 760px) {
  .match-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.match-form input[type="number"],
.match-form input[type="text"],
.match-form select {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  border: 1px solid #7c899c;
  border-radius: 0.5rem;
  background: var(--branco);
  color: var(--tinta);
  font: inherit;
  font-size: 0.92rem;
}

.match-form input[type="number"]:hover,
.match-form input[type="text"]:hover,
.match-form select:hover {
  border-color: var(--marca);
}

.match-form input[aria-invalid="true"] {
  border-color: var(--erro);
  background: var(--erro-fundo);
}

.match-grupo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.match-grupo legend {
  padding: 0;
  margin-bottom: 0.35rem;
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 700;
}

.match-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.match-opcao {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--borda);
  border-radius: 0.55rem;
  background: var(--branco);
  color: var(--tinta);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.match-opcao:hover {
  border-color: var(--marca);
  background: #f6fbfb;
}

.match-opcao:focus-within {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.match-opcao input {
  accent-color: var(--marca-escura);
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
}

/* ---------- Prioridades ---------- */
.match-dims {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  padding: 0;
}

.match-dim-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--borda);
  border-radius: 0.5rem;
  background: var(--branco);
  color: var(--tinta);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.match-dim-check:hover {
  border-color: var(--marca);
  background: #f6fbfb;
}

.match-dim-check input {
  accent-color: var(--marca-escura);
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  margin: 0;
}

.match-dim-check input:disabled + span {
  color: var(--tinta-clara);
}

.match-dim-check input:disabled {
  cursor: not-allowed;
}

.match-dim-check:focus-within {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.match-contador {
  margin-block: 0.75rem 0.25rem;
  color: var(--tinta-media);
  font-size: 0.82rem;
  font-weight: 600;
}

.match-ordem-area {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--borda-suave);
}

.match-ordem-area h3 {
  font-size: 1rem;
  margin-bottom: 0.2rem;
}

.match-vazio-ordem {
  margin: 0.5rem 0 0;
  color: var(--tinta-media);
  font-size: 0.84rem;
}

.match-prioridades {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
  padding: 0;
}

.match-prioridade {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--borda);
  border-radius: 0.55rem;
  background: #fbfcfd;
}

.match-posicao {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--marca);
  color: var(--branco);
  font-size: 0.8rem;
  font-weight: 800;
}

.match-prioridade__rotulo {
  flex: 1 1 9rem;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
}

.match-prioridade__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: auto;
}

.match-mover,
.match-remover {
  min-height: 44px;
  border: 1px solid #7c899c;
  border-radius: 0.45rem;
  background: var(--branco);
  color: var(--marca-escura);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.match-mover {
  width: 44px;
  padding: 0;
  font-size: 1.05rem;
  line-height: 1;
}

.match-remover {
  padding: 0.35rem 0.65rem;
  color: var(--erro);
  font-size: 0.8rem;
}

.match-mover:hover,
.match-remover:hover {
  border-color: var(--marca);
  background: var(--marca-clara);
}

.match-mover:disabled {
  color: #64748b;
  border-color: var(--borda);
  background: #f1f5f9;
  cursor: not-allowed;
}

.match-erro {
  margin: 0.45rem 0 0;
  color: #7f1d1d;
  font-size: 0.82rem;
  font-weight: 700;
}

.match-erro:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.match-enviar {
  display: grid;
  gap: 0.55rem;
  justify-items: start;
  margin-block: 1rem 1.5rem;
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--branco);
  box-shadow: var(--sombra);
}

.match-enviar .campo__ajuda,
.match-enviar__nota {
  margin: 0;
  max-width: 70ch;
  color: var(--tinta-media);
  font-size: 0.8125rem;
}

.match-dica {
  margin: 0.35rem 0 0;
  color: var(--tinta-media);
  font-size: 0.8125rem;
}

.match-enviar .status {
  margin: 0;
}

/* ---------- Resultado ---------- */
.match-resultado-area {
  margin-top: 1rem;
  scroll-margin-top: 84px;
}

.match-resultado-cabecalho {
  margin-bottom: 0.5rem;
}

.match-sobre {
  color: var(--marca-escura);
}

.match-desatualizado {
  margin-block: 0.5rem;
  border: 1px solid var(--alerta-borda);
  border-radius: 0.5rem;
  background: var(--alerta-fundo);
  color: #78350f;
  padding: 0.55rem 0.7rem;
  font-size: 0.84rem;
  font-weight: 700;
}

.match-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.match-resultados {
  display: grid;
  gap: 1rem;
}

@media (min-width: 980px) {
  .match-resultados {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.match-posicao-cidade {
  margin: 0 0 0.15rem;
  color: var(--marca-escura);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.match-local {
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.8rem;
}

.match-score {
  flex: 0 1 11rem;
  min-width: 8.5rem;
}

.match-score__numero {
  margin: 0;
  color: var(--marca-escura);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.match-score__numero strong {
  font-size: 2.2rem;
  letter-spacing: -0.03em;
}

.match-score__numero span {
  color: var(--tinta-media);
  font-size: 0.95rem;
  font-weight: 700;
}

.match-score__numero--nulo strong {
  color: var(--tinta-media);
}

.match-score__nota {
  margin: 0.3rem 0 0;
  color: var(--tinta-media);
  font-size: 0.75rem;
}

.match-selos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.55rem;
  padding: 0 1.1rem 0.85rem;
}

.match-confianca {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--borda);
  border-radius: 0.35rem;
  padding: 0.16rem 0.42rem;
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.match-nota-estimativa {
  margin: 0 1.1rem 0.85rem;
  border: 1px solid var(--alerta-borda);
  border-radius: 0.5rem;
  background: var(--alerta-fundo);
  color: #78350f;
  padding: 0.55rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.45;
}

.match-nota-estimativa strong {
  color: #7c2d12;
}

.match-comunidade-origem {
  margin: 0 1.1rem 0.85rem;
  border-left: 3px solid var(--marca);
  border-radius: 0 0.4rem 0.4rem 0;
  background: var(--marca-clara);
  color: var(--tinta);
  padding: 0.5rem 0.65rem;
  font-size: 0.82rem;
  line-height: 1.45;
}

.match-comunidade-origem strong {
  color: var(--marca-escura);
}

.match-grupo-tradeoff {
  padding: 0.75rem 1.1rem 0;
  border-top: 1px solid var(--borda-suave);
}

.match-grupo-tradeoff h4 {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
  color: var(--tinta);
}

.match-tradeoffs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.match-tradeoff {
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--borda-suave);
  border-radius: 0.45rem;
  background: #fbfcfd;
}

.match-tradeoff__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
}

.match-tradeoff__nome {
  font-size: 0.85rem;
  font-weight: 700;
}

.match-tradeoff__meta {
  margin: 0.2rem 0 0;
  color: var(--tinta-media);
  font-size: 0.75rem;
}

.match-estimativa {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--alerta-borda);
  border-radius: 0.3rem;
  background: var(--alerta-fundo);
  color: #7c2d12;
  padding: 0.1rem 0.3rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.match-vazio-grupo {
  margin: 0.25rem 0 0;
  color: var(--tinta-media);
  font-size: 0.8rem;
}

.match-aviso-tradeoff {
  margin: 0 1.1rem 0.85rem;
}

.match-aviso-tradeoff h4 {
  margin-bottom: 0.2rem;
  font-size: 0.9rem;
}

.match-aviso-tradeoff p {
  margin: 0;
  font-size: 0.8rem;
}

.match-detalhe {
  margin: 0.75rem 1.1rem 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--borda-suave);
}

.match-dimensoes-lista {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
  padding: 0;
}

.match-dim-linha {
  min-width: 0;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--borda-suave);
  border-radius: 0.5rem;
  background: #fbfcfd;
}

.match-dim-linha__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.match-dim-linha__nome {
  font-size: 0.86rem;
  font-weight: 700;
}

.match-dim-linha__peso {
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.match-dim-valor {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.match-dim-valor .match-barra {
  flex: 1 1 auto;
  margin-top: 0;
}

.match-barra {
  height: 0.55rem;
  margin-top: 0.3rem;
  overflow: hidden;
  border: 1px solid #cdd7dd;
  border-radius: 999px;
  background: #e2e8ee;
}

.match-barra > span {
  display: block;
  height: 100%;
  background: var(--marca);
}

.match-barra--dim > span {
  background: #3f7f86;
}

.match-barra--peso > span {
  background: #5ba9ae;
}

.match-barra--score > span {
  background: var(--marca-escura);
}

.match-barra__valor {
  flex: 0 0 auto;
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.match-dim-linha__selo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.match-dim-linha__origem {
  margin: 0.35rem 0 0;
  color: var(--tinta-media);
  font-size: 0.75rem;
  line-height: 1.4;
}

.match-sem-dado {
  margin: 0.35rem 0 0;
  border-left: 3px solid #94a3b8;
  padding-left: 0.5rem;
  color: var(--tinta-media);
  font-size: 0.78rem;
  line-height: 1.45;
}

.match-resultado__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.85rem 1.1rem 1rem;
  border-top: 1px solid var(--borda-suave);
  margin-top: 0.85rem;
}

/* ---------- Vetor de pesos ---------- */
.match-vetor {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin: 0.5rem 0 0;
  padding: 0;
}

.match-vetor__item {
  min-width: 0;
}

.match-vetor__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.match-vetor__nome {
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 700;
}

.match-vetor__peso {
  flex: 0 0 auto;
  color: var(--marca-escura);
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.match-vetor__meta {
  margin: 0.15rem 0 0;
  color: var(--tinta-media);
  font-size: 0.75rem;
}

.match-rodape-nota {
  margin-top: 1rem;
  color: var(--tinta-media);
  font-size: 0.8rem;
  max-width: 80ch;
}

/* ---------- Selos do resultado ---------- */
.selo--medido {
  background: var(--ok-fundo);
  border-color: var(--ok-borda);
  color: #14532d;
}

.selo--parcial {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: #7c2d12;
}

@media (max-width: 600px) {
  .match-selos,
  .match-nota-estimativa,
  .match-comunidade-origem,
  .match-grupo-tradeoff,
  .match-aviso-tradeoff,
  .match-detalhe,
  .match-resultado__acoes {
    margin-inline: 0.9rem;
  }

  .match-resultado__acoes,
  .match-grupo-tradeoff {
    padding-inline: 0;
  }

  .match-score {
    flex-basis: 100%;
  }
}

@media (max-width: 400px) {
  .match-opcoes {
    flex-direction: column;
    align-items: stretch;
  }

  .match-opcao {
    width: 100%;
  }

  .match-prioridade__acoes {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }

  .match-selos,
  .match-nota-estimativa,
  .match-comunidade-origem,
  .match-grupo-tradeoff,
  .match-aviso-tradeoff,
  .match-detalhe,
  .match-resultado__acoes {
    margin-inline: 0.8rem;
  }

  .match-resultado__acoes,
  .match-grupo-tradeoff {
    padding-inline: 0;
  }
}

.match-glossario {
  margin-top: 1rem;
}

@media (max-width: 400px) {
  .match-glossario .cartao__corpo {
    padding-inline: 0.85rem;
  }
}

/* ==========================================================================
   Vagas concretas — Fase 5 do redesenho.
   Lista em linhas de 3 níveis, filtros em barra compacta e paginação com
   salto de página. Sem cartão por oferta: cargo e empresa são o ponto de
   entrada. Contagem e cobertura ficam no topo da lista.
   ========================================================================== */

/* O cabeçalho fixo não disputa espaço com a barra de filtros sticky. */
body.pagina-vagas .cabecalho-site {
  position: static;
}

.vagas-cabecalho {
  margin-bottom: var(--esp-4);
}

.vagas-cabecalho h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.9rem, 4.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.vagas-cabecalho__sub {
  max-width: 62ch;
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.95rem;
}

/* ---------- Território consultado ---------- */
.vagas-territorio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--dado-1);
  border-radius: 0.7rem;
  background: var(--superficie-1);
}

.vagas-territorio__identidade {
  min-width: 0;
}

.vagas-territorio__sobre {
  margin: 0 0 0.15rem;
  color: var(--tinta-clara);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vagas-territorio__titulo-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0;
}

.vagas-territorio__nome {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.vagas-territorio__meta {
  margin: 0.25rem 0 0;
  color: var(--tinta-media);
  font-size: 0.8125rem;
}

.vagas-territorio__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.vagas-territorio__aviso {
  flex-basis: 100%;
  margin: 0.35rem 0 0;
  color: var(--alerta);
  font-size: 0.8125rem;
  font-weight: 600;
}

.vagas-busca {
  margin-bottom: var(--esp-3);
}

.vagas-busca .campo {
  max-width: 34rem;
}

/* ---------- Filtros: barra compacta e sticky ---------- */
.vagas-filtros {
  margin: 0 0 var(--esp-2);
  padding: var(--esp-2) 0;
  border-block: 1px solid var(--borda);
  background: var(--fundo);
}

@media (min-width: 760px) {
  .vagas-filtros {
    position: sticky;
    top: 0;
    z-index: 20;
  }
}

.vagas-filtros fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.vagas-filtros__campos {
  display: grid;
  gap: var(--esp-2) var(--esp-3);
  align-items: end;
}

@media (min-width: 760px) {
  .vagas-filtros__campos {
    grid-template-columns:
      minmax(10rem, 1.6fr) minmax(8rem, 1fr) minmax(7rem, 0.8fr) auto;
  }
}

.vagas-filtros__campo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.vagas-filtros__campo label {
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 700;
}

.vagas-filtros input[type="search"],
.vagas-filtros input[type="text"],
.vagas-filtros select {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border: 1px solid #7c899c;
  border-radius: 0.5rem;
  background: var(--branco);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
}

.vagas-filtros input[type="search"]:hover,
.vagas-filtros input[type="text"]:hover,
.vagas-filtros select:hover {
  border-color: var(--marca);
}

.vagas-filtros input::placeholder {
  color: var(--tinta-clara);
  opacity: 1;
}

.vagas-filtros__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.vagas-filtros__nota {
  margin: var(--esp-2) 0 0;
  color: var(--tinta-clara);
  font-size: 0.75rem;
  line-height: 1.5;
}

.vagas-nota-salarial {
  margin: var(--esp-2) 0 var(--esp-3);
  color: var(--tinta-media);
  font-size: 0.8125rem;
  line-height: 1.5;
  max-width: 72ch;
}

/* ---------- Cabeçalho do resultado ---------- */
.vagas-resultado-cabecalho {
  margin: var(--esp-4) 0 var(--esp-2);
}

.vagas-resultado-cabecalho h2 {
  margin: 0;
  font-size: 1.375rem;
}

.vagas-contagem {
  margin: 0.15rem 0 0;
  color: var(--tinta);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vagas-cobertura-pagina {
  margin: 0.15rem 0 0;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

/* ---------- Lista: linhas de 3 níveis ---------- */
.vagas-lista {
  border-top: 1px solid var(--borda);
}

.linha-vaga {
  padding: var(--esp-3) 0.25rem;
  border-bottom: 1px solid var(--borda-suave);
}

.linha-vaga:target {
  background: var(--marca-clara);
}

.linha-vaga__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.linha-vaga__cargo {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.linha-vaga__postos {
  flex: 0 0 auto;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.linha-vaga__meta {
  margin: 0.15rem 0 0;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.linha-vaga__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
}

.linha-vaga__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--borda);
  border-radius: 0.3rem;
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.linha-vaga__tag--salario {
  color: var(--tinta);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.linha-vaga__tag--nivel {
  padding: 0;
  border: 0;
  background: transparent;
}

.linha-vaga__tag--nivel .selo {
  white-space: normal;
}

.linha-vaga__tag--nivel .selo-nota {
  max-width: 46ch;
}

.linha-vaga__avisos {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.3rem;
  max-width: 62ch;
}

.linha-vaga__resumo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin: 0.4rem 0 0;
  max-width: 90ch;
  color: var(--tinta-media);
  font-size: 0.875rem;
  line-height: 1.5;
}

.linha-vaga__detalhes {
  margin-top: 0.1rem;
}

.linha-vaga__detalhes > summary {
  display: list-item;
  min-height: 44px;
  padding-block: 0.5rem;
  color: var(--marca-escura);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.linha-vaga__detalhes > summary:hover {
  color: var(--marca);
}

.linha-vaga__detalhes p {
  margin: 0.3rem 0 0;
  max-width: 82ch;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.linha-vaga__detalhes strong {
  color: var(--tinta);
}

.linha-vaga__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  margin-top: 0.35rem;
}

.linha-vaga__fonte {
  margin: 0;
}

.linha-vaga__sem-link {
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-weight: 600;
}

.linha-vaga__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  color: var(--marca-escura);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.linha-vaga__link:hover {
  color: var(--marca);
}

.botao__icone {
  flex: 0 0 auto;
}

/* ---------- Paginação com salto de página ---------- */
.vagas-paginacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--borda);
}

.vagas-paginacao__info {
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.vagas-paginacao__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.vagas-paginacao__salto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.vagas-paginacao__salto label {
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-weight: 700;
}

.vagas-paginacao__salto input {
  width: 6.5rem;
  min-height: 44px;
  padding: 0.5rem 0.6rem;
  border: 1px solid #7c899c;
  border-radius: 0.5rem;
  background: var(--branco);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.vagas-paginacao__salto input:hover {
  border-color: var(--marca);
}

/* ---------- Vazios ---------- */
.vagas-vazio {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}

.vagas-vazio__icone {
  flex: 0 0 auto;
  color: var(--marca);
}

.vagas-vazio h2 {
  margin: 0 0 0.25rem;
  font-size: 1.125rem;
}

.vagas-vazio p {
  max-width: 72ch;
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.875rem;
}

.vagas-vazio__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.vagas-vazio-inline {
  padding: var(--esp-3);
  border: 1px dashed var(--referencia);
  border-radius: 0.6rem;
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: 0.875rem;
}

/* ---------- Nota final ---------- */
.vagas-nota {
  margin-top: var(--esp-6);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--borda);
}

.vagas-nota h2 {
  margin: 0;
  font-size: 1rem;
}

.vagas-nota ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  max-width: 78ch;
  color: var(--tinta-media);
  font-size: 0.875rem;
  line-height: 1.55;
}

.vagas-nota li {
  margin-bottom: 0.35rem;
}

@media (max-width: 600px) {
  .vagas-filtros__acoes .botao,
  .vagas-vazio__acoes .botao,
  .vagas-paginacao__botoes .botao {
    flex: 1 1 auto;
  }

  .vagas-paginacao {
    align-items: stretch;
  }

  .vagas-paginacao__salto {
    width: 100%;
  }

  .vagas-paginacao__salto input {
    flex: 1 1 auto;
  }
}

@media (max-width: 400px) {
  .vagas-territorio__acoes {
    width: 100%;
  }

  .vagas-territorio__acoes .botao {
    flex: 1 1 auto;
  }

  .linha-vaga__postos {
    order: 2;
  }
}

/* ---------- Clima recente: contexto, nunca juízo de qualidade ---------- */
.selo-contexto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #6b4e16;
  border-radius: 0.35rem;
  background: #fdf6e3;
  color: #4a3306;
  padding: 0.16rem 0.42rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   Redesenho visual — Fase 0/1/2.
   Tokens acima; componentes abaixo. Nada aqui codifica dado com verde/vermelho:
   verde/vermelho continuam reservados a estado de interface. Cobertura é
   confiança (texto + régua), não alarme.
   ========================================================================== */

/* ---------- Tipografia mínima (12px) e números tabulares ---------- */
.heroi__sobre,
.marca__sub,
.selo,
.selo-contexto,
.fonte,
.aviso-dado,
.qualidade-mini,
.chip__nivel,
.burocracia__etiqueta,
.tabela thead th,
.tabela .linha-grupo th,
.th-cidade__sub,
.celula__fonte {
  font-size: 0.75rem;
}

.valor,
.kpi__valor,
.celula-valor,
.periodo,
.barra-h__numero,
.tabela .num,
.cobertura-legenda__contagem,
.resumo-dimensao__valor {
  font-variant-numeric: tabular-nums;
}

/* Alvos de toque: 44px também nos chips do comparador. */
.chip {
  min-height: 44px;
}

.chip__remover {
  width: 44px;
  height: 44px;
}

/* ---------- Selo de nível: texto + régua, sem 4 fundos pastel ---------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--dado-1);
  border-radius: 0.3rem;
  padding: 0.1rem 0.4rem;
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
}

.selo--municipio {
  border-left-color: var(--dado-1);
  color: var(--marca-escura);
}

.selo--provincia {
  border-left-color: var(--dado-3);
  color: #1e3a8a;
}

.selo--ccaa {
  border-left-color: var(--dado-2);
  color: #7c2d12;
}

.selo--nacional {
  border-left-color: var(--dado-5);
  color: #334155;
}

.selo--misto {
  border-left-color: var(--referencia);
  color: var(--tinta-media);
  font-style: italic;
}

.selo--sem {
  border: 1px dashed var(--referencia);
  background: transparent;
  color: var(--tinta-media);
}

.selo-contexto {
  border: 1px dashed var(--alerta);
  border-left-width: 3px;
  background: transparent;
  color: var(--alerta);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* ---------- Botões novos (fundo claro, sem herói escuro) ---------- */
.botao--marca {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--branco);
}

.botao--marca:hover {
  background: var(--marca-escura);
  border-color: var(--marca-escura);
  color: var(--branco);
}

.botao--linha {
  background: var(--superficie-1);
  border-color: var(--borda-forte);
  color: var(--marca-escura);
}

.botao--linha:hover {
  border-color: var(--marca);
  background: var(--marca-clara);
}

/* ---------- Home: hero compacto ---------- */
.inicio-heroi {
  border: 1px solid var(--borda);
  border-left: 4px solid var(--marca);
  border-radius: var(--raio);
  background: var(--superficie-1);
  padding: clamp(1rem, 3vw, 1.75rem);
  margin-bottom: var(--esp-6);
}

.inicio-heroi__sobre {
  margin: 0 0 var(--esp-2);
  color: var(--marca-escura);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inicio-heroi h1 {
  margin: 0 0 var(--esp-2);
  font-size: clamp(1.9rem, 5.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 24ch;
}

.inicio-heroi__sub {
  margin: 0 0 var(--esp-4);
  max-width: 52ch;
  color: var(--tinta-media);
  font-size: 1rem;
}

.inicio-heroi__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.inicio-heroi .busca-inicio {
  margin-top: 0;
}

.chips-confianca {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: var(--esp-4) 0 0;
  padding: 0;
  list-style: none;
}

.chips-confianca li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-weight: 600;
}

.chips-confianca svg {
  flex: 0 0 auto;
  color: var(--marca);
}

/* ---------- Home: capitais ---------- */
.capitais__cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
  flex-wrap: wrap;
}

.capitais__contagem {
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-weight: 600;
}

.capitais__controles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  align-items: flex-end;
  margin-block: var(--esp-3) var(--esp-2);
}

.capitais__controles .campo {
  min-width: min(100%, 20rem);
}

.capitais__acoes {
  margin-top: var(--esp-4);
}

.capitais__vazio {
  margin-top: var(--esp-4);
}

/* ---------- Home: como funciona ---------- */
.passos {
  display: grid;
  gap: var(--esp-4);
  margin: var(--esp-4) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

@media (min-width: 760px) {
  .passos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.passo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-3);
  align-items: start;
  border-top: 2px solid var(--marca);
  padding-top: var(--esp-3);
}

.passo__numero {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--marca-clara);
  color: var(--marca-escura);
  font-size: 0.875rem;
  font-weight: 800;
}

.passo h3 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
}

.passo p {
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.875rem;
}

/* ---------- Cidade: cabeçalho compacto ---------- */
.cabecalho-cidade {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-6);
  flex-wrap: wrap;
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--borda);
  margin-bottom: var(--esp-6);
}

.cabecalho-cidade h1 {
  margin: 0 0 0.15rem;
  font-size: clamp(1.9rem, 4.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.cabecalho-cidade__meta {
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.875rem;
}

.cabecalho-cidade__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

/* ---------- KPI ---------- */
.kpis {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--dado-1);
  border-radius: 0.7rem;
  background: var(--superficie-1);
  color: var(--tinta);
  text-decoration: none;
}

a.kpi:hover {
  border-color: var(--marca);
  background: var(--superficie-2);
}

.kpi__rotulo {
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.kpi__valor {
  color: var(--tinta);
  font-size: clamp(2.1rem, 4.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.kpi__numero {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.kpi__unidade {
  color: var(--tinta-media);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
}

.kpi__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

.kpi__alerta {
  margin-top: 0.15rem;
  color: var(--alerta);
  font-size: 0.75rem;
  font-weight: 700;
}

.kpis-ancora {
  margin-bottom: var(--esp-6);
}

/* ---------- Resumo das 11 dimensões ---------- */
.resumo-dimensoes {
  margin-bottom: var(--esp-6);
}

.resumo-dimensoes__intro {
  max-width: 72ch;
  color: var(--tinta-media);
  font-size: 0.875rem;
}

.resumo-dimensoes__lista {
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--borda);
}

.resumo-dimensao {
  border-bottom: 1px solid var(--borda-suave);
}

.resumo-dimensao__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nome valor"
    "ancora nivel"
    "estado estado";
  gap: 0.2rem var(--esp-3);
  align-items: center;
  min-height: 52px;
  padding: 0.6rem 0.25rem;
  color: var(--tinta);
  text-decoration: none;
}

@media (min-width: 900px) {
  .resumo-dimensao__link {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 0.9fr) auto minmax(0, 1fr);
    grid-template-areas: "nome ancora valor nivel estado";
  }
}

.resumo-dimensao__link:hover {
  background: var(--superficie-2);
}

.resumo-dimensao__nome {
  grid-area: nome;
  font-weight: 700;
}

.resumo-dimensao__ancora {
  grid-area: ancora;
  color: var(--tinta-media);
  font-size: 0.8125rem;
}

.resumo-dimensao__valor {
  grid-area: valor;
  justify-self: end;
  font-weight: 800;
  text-align: right;
}

@media (min-width: 900px) {
  .resumo-dimensao__valor {
    justify-self: start;
    text-align: left;
  }
}

.resumo-dimensao__nivel {
  grid-area: nivel;
  justify-self: end;
}

@media (min-width: 900px) {
  .resumo-dimensao__nivel {
    justify-self: start;
  }
}

.resumo-dimensao__estado {
  grid-area: estado;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

@media (min-width: 900px) {
  .resumo-dimensao__estado {
    text-align: right;
  }
}

/* ---------- Cobertura: barra empilhada única ---------- */
.cobertura-bloco {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-1);
  padding: var(--esp-4);
  margin-bottom: var(--esp-6);
}

.cobertura-bloco h2 {
  margin: 0 0 0.15rem;
  font-size: 1.125rem;
}

.cobertura-bloco__titulo {
  margin: 0 0 var(--esp-3);
  color: var(--tinta-media);
  font-size: 0.875rem;
}

.cobertura-barra {
  display: flex;
  width: 100%;
  height: 1.1rem;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie-3);
}

.cobertura-barra__segmento {
  flex-basis: 0;
  min-width: 2px;
  height: 100%;
}

.cobertura-barra__segmento--municipio {
  background: var(--dado-1);
}

.cobertura-barra__segmento--provincia {
  background: var(--dado-3);
}

.cobertura-barra__segmento--ccaa {
  background: var(--dado-2);
}

.cobertura-barra__segmento--nacional {
  background: var(--dado-5);
}

.cobertura-barra__segmento--sem {
  background: repeating-linear-gradient(
    135deg,
    var(--superficie-3),
    var(--superficie-3) 4px,
    var(--borda) 4px,
    var(--borda) 8px
  );
}

.cobertura-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--esp-4);
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
  color: var(--tinta-media);
  font-size: 0.8125rem;
}

.cobertura-legenda li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cobertura-legenda__chave {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
}

.cobertura-legenda__chave--municipio {
  background: var(--dado-1);
}

.cobertura-legenda__chave--provincia {
  background: var(--dado-3);
}

.cobertura-legenda__chave--ccaa {
  background: var(--dado-2);
}

.cobertura-legenda__chave--nacional {
  background: var(--dado-5);
}

.cobertura-legenda__chave--sem {
  border: 1px dashed var(--referencia);
}

.cobertura-legenda__contagem {
  color: var(--tinta);
  font-weight: 700;
}

/* ---------- Dimensão como <details> (sem sombra de cartão) ---------- */
details[data-dimensao] {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--borda);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

details[data-dimensao]:last-of-type {
  border-bottom: 1px solid var(--borda);
}

.dimensao__cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.15rem var(--esp-3);
  min-height: 56px;
  padding: 0.75rem 0.25rem;
  cursor: pointer;
  list-style: none;
}

.dimensao__cabecalho::-webkit-details-marker {
  display: none;
}

.dimensao__cabecalho:hover {
  background: var(--superficie-2);
}

.dimensao__titulo {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.dimensao__resumo {
  grid-column: 1;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

.dimensao__cabecalho > .selo {
  grid-row: 1;
  grid-column: 2;
}

.dimensao__chevron {
  grid-row: 1;
  grid-column: 3;
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid var(--tinta-media);
  border-bottom: 2px solid var(--tinta-media);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

details[open] .dimensao__chevron {
  transform: rotate(-135deg);
}

.dimensao__corpo {
  padding: 0 0.25rem var(--esp-4);
}

.dimensao__nota,
.dimensao__aviso {
  margin: 0 0 var(--esp-3);
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--marca);
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: 0.8125rem;
  max-width: 75ch;
}

.dimensao__aviso {
  border-left-color: var(--alerta);
  background: var(--alerta-fundo);
  color: #78350f;
}

.dimensao__detalhe {
  margin-top: var(--esp-3);
}

.dimensao__detalhe > summary {
  min-height: 44px;
  padding-block: 0.55rem;
  color: var(--marca-escura);
  font-weight: 700;
}

.dimensao__kpis {
  margin-bottom: var(--esp-3);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
  .dimensao__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Gráfico ---------- */
.grafico {
  margin: var(--esp-3) 0;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: 0.7rem;
  background: var(--superficie-3);
}

.grafico__titulo {
  display: block;
  color: var(--tinta);
  font-size: 0.9375rem;
  font-weight: 800;
}

.grafico__subtitulo {
  display: block;
  margin-top: 0.1rem;
  color: var(--tinta-media);
  font-size: 0.75rem;
}

.grafico__nota {
  margin: var(--esp-2) 0 0;
  color: var(--tinta-media);
  font-size: 0.75rem;
  max-width: 70ch;
}

/* ---------- Faixa P25–P75 + mediana ---------- */
.faixa {
  margin-top: var(--esp-4);
}

.faixa__trilho {
  position: relative;
  height: 1.5rem;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    transparent 42%,
    var(--grade) 42%,
    var(--grade) 58%,
    transparent 58%
  );
}

.faixa__intervalo {
  position: absolute;
  top: 50%;
  left: var(--faixa-p25, 0%);
  width: var(--faixa-largura, 0%);
  height: 0.7rem;
  transform: translateY(-50%);
  border-radius: 0.35rem;
  background: var(--faixa-cor, var(--dado-1));
  opacity: 0.85;
}

.faixa__mediana {
  position: absolute;
  top: 50%;
  left: var(--faixa-mediana, 0%);
  width: 3px;
  height: 1.4rem;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--tinta);
}

.faixa__eixo {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  color: var(--tinta-clara);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.faixa__valores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--esp-4);
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
  color: var(--tinta-media);
  font-size: 0.8125rem;
}

.faixa__valores strong {
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* ---------- Barras horizontais (comunidade) ---------- */
.barras {
  display: grid;
  gap: 0.45rem;
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
}

.barra-h {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-2);
  font-size: 0.875rem;
}

.barra-h__rotulo {
  color: var(--tinta);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.barra-h__trilho {
  display: block;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--superficie-1);
  border: 1px solid var(--borda);
  overflow: hidden;
}

.barra-h__valor {
  display: block;
  height: 100%;
  width: var(--barra, 0%);
  border-radius: 999px;
  background: var(--dado-1);
}

.barra-h__numero {
  color: var(--tinta);
  font-weight: 700;
  text-align: right;
  min-width: 3.5rem;
}

@media (max-width: 400px) {
  .barra-h {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .barra-h__trilho {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* ---------- Tabela compacta / metadados de célula ---------- */
.celula-meta {
  display: block;
  margin-top: 0.1rem;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

.tabela--compacta th,
.tabela--compacta td {
  padding: 0.55rem 0.6rem;
  font-size: 0.875rem;
}

.tabela--clima td.num,
.tabela--clima th[scope="row"] {
  vertical-align: baseline;
}

.porque {
  margin-top: 0.3rem;
}

.porque > summary {
  min-height: 44px;
  padding-block: 0.15rem;
  color: var(--marca-escura);
  font-size: 0.75rem;
  font-weight: 700;
}

.porque p {
  margin: 0.25rem 0 0;
  color: var(--tinta-media);
  font-size: 0.75rem;
  line-height: 1.45;
  max-width: 62ch;
}

.fonte-dimensao {
  margin: var(--esp-3) 0 0;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

.fonte-dimensao a {
  font-weight: 600;
}

/* ---------- Estado vazio (lacuna esperada) ---------- */
.vazio {
  padding: var(--esp-4);
  border: 1px dashed var(--referencia);
  border-radius: 0.7rem;
  background: var(--superficie-2);
  color: var(--tinta-media);
}

.vazio__titulo {
  margin: 0 0 0.25rem;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 700;
}

.vazio__texto {
  margin: 0;
  max-width: 65ch;
  font-size: 0.875rem;
}

.vazio--lacuna {
  border-style: dashed;
}

/* ---------- Cobertura na lateral / glossário ---------- */
.lateral .detalhes summary {
  min-height: 44px;
}

/* ---------- Ajustes de contraste do selo em tabela ---------- */
.tabela .cobertura .selo {
  white-space: normal;
}

/* ---------- 360px ---------- */
@media (max-width: 400px) {
  .inicio-heroi {
    padding: 0.9rem;
  }

  .inicio-heroi h1 {
    font-size: 1.75rem;
  }

  .cabecalho-cidade__acoes,
  .inicio-heroi__acoes {
    width: 100%;
  }

  .cabecalho-cidade__acoes .botao,
  .inicio-heroi__acoes .botao {
    flex: 1 1 100%;
  }

  .dimensao__titulo {
    font-size: 1.1rem;
  }

  .kpi {
    padding: 0.75rem 0.85rem;
  }
}

/* ==========================================================================
   Redesenho visual — Fase 3 (comparador).
   A diferença é neutra: azul = acima da base, âmbar = abaixo. Setas e sinal
   carregam a informação; a cor nunca significa bom/ruim.
   ========================================================================== */

.cmp-cabecalho {
  margin-bottom: var(--esp-3);
}

.cmp-cabecalho h1 {
  margin-bottom: 0.15rem;
}

.cmp-cabecalho__sub {
  max-width: 65ch;
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.95rem;
}

/* ---------- Barra de controle ---------- */
.cmp-controle {
  display: grid;
  gap: var(--esp-3);
  margin-block: var(--esp-4) var(--esp-4);
  padding: var(--esp-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-1);
}

@media (min-width: 1024px) {
  .cmp-controle {
    position: sticky;
    top: 64px;
    z-index: 20;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
  }
}

.cmp-controle__cidades {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cmp-controle__cidades legend {
  margin-bottom: 0.35rem;
  padding: 0;
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 800;
}

.cmp-controle__campos {
  display: grid;
  gap: var(--esp-3);
  align-items: end;
}

@media (min-width: 760px) {
  .cmp-controle__campos {
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  }
}

.cmp-controle__copiar {
  min-width: 0;
}

.cmp-controle__copiar .botao {
  width: 100%;
}

@media (min-width: 760px) {
  .cmp-controle__copiar .botao {
    width: auto;
  }
}

.cmp-check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--borda);
  border-radius: 0.55rem;
  background: var(--superficie-2);
  color: var(--tinta);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.cmp-check input {
  accent-color: var(--marca-escura);
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
}

.cmp-check:focus-within {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ---------- Resumo e achados ---------- */
.cmp-resultado {
  margin-top: var(--esp-4);
}

.cmp-resumo {
  margin-bottom: var(--esp-4);
}

.cmp-conclusao {
  margin: 0 0 0.35rem;
  font-size: clamp(1.25rem, 3.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  max-width: 42ch;
}

.cmp-achados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.cmp-chip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--dado-1);
  border-radius: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: var(--superficie-1);
  color: var(--tinta);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.cmp-chip__cidade {
  font-weight: 800;
}

.cmp-chip__vs {
  color: var(--tinta-clara);
  font-size: 0.75rem;
  font-weight: 600;
}

.cmp-chip--vazio {
  border-left-color: var(--referencia);
  border-style: dashed;
  color: var(--tinta-media);
  font-weight: 600;
}

.cmp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

.cmp-meta .cmp-chip {
  border-left-width: 1px;
  border-left-color: var(--borda);
  padding: 0.15rem 0.45rem;
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 600;
}

.cmp-meta .cmp-chip--meta {
  border-style: dashed;
}

.cmp-nota {
  max-width: 78ch;
  margin: 0 0 var(--esp-3);
  padding: 0.45rem 0.7rem;
  border-left: 3px solid var(--marca);
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* ---------- Gráficos ---------- */
.cmp-graficos {
  display: grid;
  gap: var(--esp-4);
  margin-block: var(--esp-4);
}

.cmp-grafico__area {
  overflow-x: auto;
}

.cmp-svg {
  display: block;
  width: 100%;
  max-width: 40rem;
  height: auto;
  margin-inline: auto;
}

.dp-grade {
  stroke: var(--grade);
  stroke-width: 1;
}

.dp-eixo-linha {
  stroke: var(--referencia);
  stroke-width: 1.5;
}

.dp-rotulo {
  fill: var(--tinta);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
}

.dp-eixo {
  fill: var(--tinta-media);
  font-family: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.dp-valor {
  fill: var(--tinta);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dp-ponto--estimado {
  stroke-dasharray: none;
}

.cmp-legenda-marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem var(--esp-3);
  margin: 0.35rem 0 0;
  color: var(--tinta-media);
  font-size: 0.75rem;
}

.cmp-legenda-marcas__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cmp-marca {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--dado-1);
}

.cmp-marca--vazada {
  background: var(--superficie-1);
  border: 2px solid var(--dado-5);
}

.cmp-marca--contexto {
  border-color: var(--dado-2);
}

.cmp-dados {
  margin-top: 0.6rem;
}

.cmp-dados summary {
  min-height: 44px;
  padding-block: 0.4rem;
  color: var(--marca-escura);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

/* Faixa P25–P75 por cidade */
.cmp-faixa {
  margin-top: var(--esp-3);
}

.cmp-faixa__eixo {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  color: var(--tinta-clara);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.cmp-faixa__linha {
  display: grid;
  grid-template-columns: minmax(4.5rem, 6.5rem) minmax(0, 1fr);
  gap: 0.25rem var(--esp-2);
  align-items: center;
  padding-block: 0.3rem;
}

.cmp-faixa__linha + .cmp-faixa__linha {
  border-top: 1px solid var(--borda-suave);
}

.cmp-faixa__nome {
  font-size: 0.84rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.cmp-faixa__linha .faixa__trilho {
  height: 1.3rem;
}

.cmp-faixa__valores {
  grid-column: 2;
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.cmp-faixa__valores strong {
  color: var(--tinta);
}

/* Small multiples e halteres */
.cmp-multiplos {
  display: grid;
  gap: var(--esp-3);
}

@media (min-width: 760px) {
  .cmp-multiplos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cmp-painel {
  min-width: 0;
  padding: var(--esp-3);
  border: 1px solid var(--borda);
  border-radius: 0.6rem;
  background: var(--superficie-1);
}

.cmp-painel h3 {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 800;
}

.cmp-painel__nota {
  margin: 0.35rem 0 0;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

.dumbbell__linha {
  stroke: var(--referencia);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}

.dumbbell__ponto--normal {
  fill: var(--dado-1);
}

.dumbbell__ponto--recente {
  fill: var(--superficie-1);
  stroke: var(--dado-2);
  stroke-width: 2.5;
}

.cmp-clima {
  margin-block: var(--esp-4);
}

/* ---------- Tabela compacta ---------- */
.tabela--comparador {
  min-width: 44rem;
}

.tabela--comparador td {
  vertical-align: top;
}

.tabela--comparador thead th:not(:first-child) {
  min-width: 11.5rem;
}

.celula-valor {
  display: block;
  color: var(--tinta);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.celula-valor--nulo {
  color: var(--tinta-media);
  font-weight: 600;
}

.celula-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  margin-top: 0.2rem;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

.celula-meta .celula__periodo,
.celula-meta .celula__fonte {
  margin: 0;
  font-size: 0.75rem;
}

.celula-meta .selo {
  font-size: 0.75rem;
  white-space: normal;
}

.celula-meta .selo-nota {
  display: none;
}

.celula-meta .cobertura {
  display: inline-flex;
}

.nao-marca {
  display: inline-grid;
  place-items: center;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: var(--referencia);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

.cmp-rodape {
  margin-top: var(--esp-3);
  padding: var(--esp-3);
  border: 1px dashed var(--referencia);
  border-radius: 0.6rem;
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: 0.8125rem;
}

.cmp-rodape__titulo {
  margin: 0 0 0.35rem;
  color: var(--tinta);
  font-size: 0.875rem;
  font-weight: 800;
}

.cmp-rodape__lista {
  margin: 0 0 0.35rem;
  padding-left: 0;
  list-style: none;
}

.cmp-rodape__lista li {
  margin-block: 0.2rem;
  line-height: 1.45;
}

.cmp-rodape__lista .nao-marca {
  margin-right: 0.35rem;
}

.cmp-rodape__lista strong {
  color: var(--tinta);
}

.cmp-rodape__nota {
  margin: 0;
  color: var(--tinta-clara);
  font-size: 0.75rem;
}

.cmp-metodo {
  margin-top: var(--esp-4);
}

.cmp-metodo summary {
  min-height: 44px;
  padding-block: 0.5rem;
  color: var(--marca-escura);
  font-weight: 700;
}

.cmp-metodo p {
  max-width: 72ch;
  margin: 0.25rem 0 0;
  color: var(--tinta-media);
  font-size: 0.8125rem;
}

/* A tabela rola dentro do container; o documento nunca rola na horizontal. */
.cmp-tabela-scroll {
  margin-top: var(--esp-4);
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 600px) {
  .cmp-controle {
    padding: 0.75rem;
  }

  .cmp-faixa__linha {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-faixa__valores {
    grid-column: 1;
  }

  .cmp-achados {
    display: grid;
  }

  .cmp-chip {
    width: 100%;
  }
}

/* ==========================================================================
   Redesenho visual — Fase 4 (match).
   Duas etapas visíveis, resultado em 1 gráfico + 1 destaque + 4 linhas.
   Nada aqui muda o contrato do formulário nem o vetor de pesos.
   ========================================================================== */

.match-heroi {
  margin-bottom: var(--esp-4);
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid var(--borda);
}

.match-heroi__sobre {
  margin: 0 0 0.25rem;
  color: var(--marca-escura);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.match-heroi h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.8rem, 4.8vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  max-width: 26ch;
}

.match-heroi__sub {
  max-width: 58ch;
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.95rem;
}

/* ---------- Progresso em 2 etapas ---------- */
.match-progresso {
  margin-block: var(--esp-3) var(--esp-4);
  padding: var(--esp-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-1);
}

.progresso {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etapa;
}

.progresso__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0.2rem 0.65rem 0.2rem 0.25rem;
  border-radius: 999px;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-weight: 600;
}

.progresso__item[aria-current="step"] {
  background: var(--marca-clara);
  color: var(--marca-escura);
  font-weight: 800;
}

.progresso__contador {
  margin: 0.4rem 0 0;
  color: var(--tinta-clara);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- Etapas e blocos ---------- */
.match-etapa {
  margin-block: var(--esp-4);
  padding: var(--esp-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-1);
}

@media (min-width: 760px) {
  .match-etapa {
    padding: var(--esp-4);
  }
}

.match-etapa__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
}

.match-etapa__topo h2 {
  margin: 0;
}

.match-etapa__intro {
  max-width: 68ch;
  margin-top: 0.35rem;
  color: var(--tinta-media);
  font-size: 0.875rem;
}

.match-etapa__intro p {
  margin: 0;
}

.match-bloco {
  margin-top: var(--esp-4);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--borda-suave);
}

.match-bloco h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.match-bloco .match-grade {
  margin-top: 0.5rem;
}

.match-grade--tres {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .match-grade--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.match-porque {
  margin-top: 0.5rem;
}

.match-porque summary {
  display: list-item;
  min-height: 44px;
  padding-block: 0.5rem;
  color: var(--marca-escura);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.match-porque summary:hover {
  color: var(--marca);
}

.match-porque p {
  max-width: 62ch;
  margin: 0.15rem 0 0;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.match-contador-area {
  margin-top: var(--esp-3);
}

.progresso-barra {
  height: 0.5rem;
  margin-top: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie-3);
}

.progresso-barra__valor {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--marca);
  transition: width 0.2s ease;
}

/* ---------- Resultado: ranking ---------- */
.match-ranking-area {
  margin-block: var(--esp-4);
}

.match-ranking__lista {
  display: grid;
  gap: 0.35rem;
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
}

.match-ranking__linha {
  display: grid;
  grid-template-columns: 1.5rem minmax(5.5rem, 9rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  min-height: 34px;
}

.match-ranking__pos {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--marca);
  color: var(--branco);
  font-size: 0.75rem;
  font-weight: 800;
}

.match-ranking__nome {
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.match-ranking__trilho {
  display: block;
  height: 0.85rem;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie-1);
}

.match-ranking__barra {
  display: block;
  width: var(--barra, 0%);
  height: 100%;
  border-radius: 999px;
  background: var(--dado-1);
}

.match-ranking__score {
  min-width: 3.5rem;
  color: var(--tinta);
  font-size: 0.95rem;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.match-ranking__de {
  color: var(--tinta-media);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ---------- Resultado: destaque ---------- */
.match-resultados {
  display: block;
}

.match-destaque {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--marca);
  border-radius: var(--raio);
  background: var(--superficie-1);
  box-shadow: var(--sombra);
}

.match-destaque__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem var(--esp-4);
  padding: var(--esp-4) var(--esp-4) 0.5rem;
}

.match-destaque__topo h3 {
  margin: 0 0 0.2rem;
  font-size: clamp(1.4rem, 4vw, 1.75rem);
}

.match-destaque__score {
  flex: 0 1 12rem;
  min-width: 9rem;
}

.match-score__legenda {
  margin: 0.15rem 0 0;
  color: var(--marca-escura);
  font-size: 0.75rem;
  font-weight: 700;
}

.match-destaque__tradeoffs {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4) 0;
}

@media (min-width: 760px) {
  .match-destaque__tradeoffs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.match-destaque .match-selos,
.match-destaque .match-nota-estimativa,
.match-destaque .match-comunidade-origem {
  margin-inline: var(--esp-4);
}

.match-destaque .match-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-top: var(--esp-3);
}

.match-destaque > .match-detalhe {
  margin: var(--esp-3) var(--esp-4) 0;
}

/* ---------- Resultado: linhas compactas 2–5 ---------- */
.match-linhas {
  display: grid;
  gap: 0.5rem;
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
}

.match-linha {
  border: 1px solid var(--borda);
  border-radius: 0.7rem;
  background: var(--superficie-1);
}

.match-linha__principal {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0.6rem 0.75rem 0.3rem;
}

.match-linha__pos {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--superficie-3);
  color: var(--marca-escura);
  font-size: 0.75rem;
  font-weight: 800;
}

.match-linha__cidade {
  margin: 0;
  min-width: 0;
  font-size: 1rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.match-linha__score {
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.match-linha__principal .selo {
  justify-self: start;
}

.match-linha__resumo {
  margin: 0;
  padding: 0 0.75rem 0.4rem;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.match-linha__resumo strong {
  color: var(--tinta);
}

.match-linha__nota {
  color: var(--tinta-clara);
  font-weight: 500;
}

.match-linha__sem {
  color: var(--tinta-clara);
  font-style: italic;
}

.match-linha__detalhe {
  padding: 0 0.75rem 0.6rem;
  border-top: 1px solid var(--borda-suave);
}

.match-linha__detalhe > summary {
  display: list-item;
  min-height: 44px;
  padding-block: 0.55rem;
  color: var(--marca-escura);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.match-linha__detalhe > summary:hover {
  color: var(--marca);
}

.match-linha__detalhe .match-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block: 0.35rem;
}

/* ---------- Vetor de pesos como details ---------- */
.match-vetor-area {
  margin-top: var(--esp-4);
  border-top: 1px solid var(--borda);
}

.match-vetor-detalhe > summary {
  display: list-item;
  min-height: 48px;
  padding-block: 0.75rem;
  color: var(--tinta);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.match-vetor-detalhe > summary:hover {
  color: var(--marca-escura);
}

.match-vetor-detalhe #vetor-explicacao {
  max-width: 72ch;
}

@media (max-width: 600px) {
  .match-ranking__linha {
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    gap: 0.25rem 0.5rem;
    padding-block: 0.25rem;
    border-bottom: 1px solid var(--borda-suave);
  }

  .match-ranking__trilho {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .match-ranking__score {
    font-size: 0.875rem;
  }

  .match-linha__principal {
    grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  }

  .match-linha__principal .selo {
    grid-column: 2 / -1;
    justify-self: start;
  }

  .match-destaque__score {
    flex-basis: 100%;
  }
}

@media (max-width: 400px) {
  .match-etapa {
    padding: 0.8rem;
  }

  .match-destaque__topo {
    padding: 0.9rem 0.9rem 0.5rem;
  }

  .match-destaque .match-selos,
  .match-destaque .match-nota-estimativa,
  .match-destaque .match-comunidade-origem,
  .match-destaque > .match-detalhe {
    margin-inline: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .progresso-barra__valor {
    transition: none;
  }
}

/* Chips de prioridade: seleção visível sem depender só da cor do checkbox. */
.match-dims {
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: 0.4rem;
}

.match-dim-check {
  min-height: 44px;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.match-dim-check:has(input:checked) {
  border-color: var(--marca);
  background: var(--marca-clara);
  color: var(--marca-escura);
}

.match-dim-check input:checked + span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Piso de 12px nos componentes do resultado do match. */
.selo-nota,
.match-confianca,
.match-score__nota,
.match-tradeoff__meta,
.match-estimativa,
.match-posicao-cidade {
  font-size: 0.75rem;
}

.match-destaque .match-selos .selo-nota {
  flex-basis: 100%;
}

/* ==========================================================================
   Página de cidade — paleta espanhola, faixa visual e blocos sombreados.
   Escopo: somente `.pagina-cidade`. Nenhum token de `:root` é alterado, então
   home, comparador, match e vagas continuam com a paleta original.
   A cor nunca é o único código de dado: barras têm valor textual e selo de
   nível; sem dado é trilho tracejado com a palavra "sem dado".
   ========================================================================== */

body:has(> main.pagina-cidade) {
  background: #fbf4e6;
}

.pagina-cidade {
  /* Paleta espanhola (terracota, açafrão, oliva, mediterrâneo, creme...). */
  --es-terracota: #a6402d;
  --es-acafrao: #c58b2a;
  --es-acafrao-texto: #8a5a12;
  --es-oliva: #5f6f4e;
  --es-mediterraneo: #2e6f8e;
  --es-creme: #fbf4e6;
  --es-marrom: #4a3428;
  --es-vermelho: #8c2f2a;
  --es-rosa: #b56576;

  /* Tokens reatribuídos só neste escopo. Texto sempre ≥4,5:1 sobre creme. */
  --marca: #a6402d;
  --marca-escura: #74291e;
  --marca-clara: #f6e3d7;
  --tinta: #3a2a20;
  --tinta-media: #5b4638;
  --tinta-clara: #6f5a4b;
  --fundo: #fbf4e6;
  --superficie-1: #fffbf2;
  --superficie-2: #f6eddd;
  --superficie-3: #efe3d0;
  --borda: #dcc9ae;
  --borda-forte: #bfa27c;
  --borda-suave: #eaddc8;
  --dado-1: #a6402d;
  --dado-2: #c58b2a;
  --dado-3: #2e6f8e;
  --dado-4: #5f6f4e;
  --dado-5: #8c2f2a;
  --referencia: #6f5a4b;
  --grade: #dcc9ae;
  --foco: #1f5e7a;

  background: var(--fundo);
}

/* ---------- Faixa visual: perfil + clima ---------- */
.faixa-visual {
  display: grid;
  gap: var(--esp-4);
  margin-bottom: var(--esp-6);
}

/* O climograma ganhou a largura toda; a faixa visual fica só com o perfil. */
.faixa-visual[data-unica="true"] {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
  .faixa-visual {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }

  .faixa-visual[data-unica="true"] {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cartao-visual {
  min-width: 0;
  margin: 0;
  padding: var(--esp-4);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie-1);
  box-shadow: 0 1px 2px rgba(74, 52, 40, 0.06),
    0 16px 32px -26px rgba(74, 52, 40, 0.45);
}

.cartao-visual__cabecalho {
  margin-bottom: var(--esp-3);
}

.cartao-visual__sobre {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--marca-escura);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cartao-visual h2 {
  margin: 0 0 0.2rem;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  color: var(--tinta);
}

.cartao-visual__sub {
  margin: 0;
  max-width: 62ch;
  color: var(--tinta-media);
  font-size: 0.85rem;
}

/* ---------- Perfil da cidade: 11 linhas ---------- */
.perfil-lista {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.perfil-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "rotulo valor"
    "trilho trilho"
    "nivel nivel";
  gap: 0.22rem 0.6rem;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--borda-suave);
}

.perfil-linha:last-child {
  border-bottom: 0;
}

.perfil-linha__rotulo {
  grid-area: rotulo;
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
}

.perfil-linha__trilho {
  grid-area: trilho;
  position: relative;
  display: block;
  height: 0.7rem;
  overflow: hidden;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--superficie-1);
}

.perfil-linha__trilho--sem {
  border-style: dashed;
  border-color: var(--referencia);
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 5px,
    rgba(111, 90, 75, 0.14) 5px,
    rgba(111, 90, 75, 0.14) 10px
  );
}

.perfil-linha__barra {
  position: relative;
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--es-terracota), var(--es-acafrao));
}

.perfil-linha__barra--zero {
  min-width: 0;
}

.perfil-linha__barra--zero::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--es-marrom);
  transform: translateY(-50%);
}

.perfil-linha__valor {
  grid-area: valor;
  justify-self: end;
  color: var(--tinta);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.perfil-linha__unidade {
  color: var(--tinta-media);
  font-size: 0.72rem;
  font-weight: 600;
}

.perfil-linha__sem {
  color: var(--tinta-clara);
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 700;
}

.perfil-linha__nivel {
  grid-area: nivel;
  justify-self: start;
}

.perfil-linha--sem .perfil-linha__rotulo {
  color: var(--tinta-media);
}

@media (min-width: 700px) {
  .perfil-linha {
    grid-template-columns:
      minmax(7.5rem, 10rem) minmax(5rem, 1fr) minmax(5.5rem, auto) auto;
    grid-template-areas: "rotulo trilho valor nivel";
    gap: 0.3rem 0.65rem;
  }

  .perfil-linha__nivel {
    justify-self: end;
  }
}

.perfil-dados {
  margin-top: var(--esp-3);
}

.perfil-dados > summary {
  min-height: 44px;
  padding-block: 0.55rem;
  color: var(--marca-escura);
  font-weight: 700;
}

/* ---------- Clima do mês: cartões com normal, recente e variação ---------- */
.clima-cartoes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 480px) {
  .clima-cartoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  .clima-cartoes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.clima-cartao {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--borda);
  border-top: 4px solid var(--clima-cor, var(--es-oliva));
  border-radius: 0.7rem;
  background: linear-gradient(
    180deg,
    var(--superficie-1) 0%,
    var(--superficie-2) 100%
  );
}

.clima-cartao--frio,
.clima-cartao--chuva {
  --clima-cor: var(--es-mediterraneo);
}

.clima-cartao--ameno {
  --clima-cor: var(--es-oliva);
}

.clima-cartao--quente {
  --clima-cor: var(--es-terracota);
}

.clima-cartao--sol {
  --clima-cor: var(--es-acafrao);
}

.clima-cartao--nublado {
  --clima-cor: #7a6a55;
}

.clima-cartao--sem {
  border-style: dashed;
  border-top-style: dashed;
  background: transparent;
}

.clima-cartao__topo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.clima-cartao__icone {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: var(--clima-cor);
}

.clima-cartao--sol .clima-cartao__icone {
  color: var(--es-acafrao-texto);
}

.clima-cartao__rotulo {
  color: var(--tinta-media);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.clima-cartao__valor {
  color: var(--tinta);
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.clima-cartao__valor--sem {
  color: var(--tinta-media);
  font-size: 1.05rem;
  font-style: italic;
}

.clima-cartao__nivel {
  color: var(--es-marrom);
  font-size: 0.8rem;
  font-weight: 700;
}

.clima-cartao__periodo {
  margin-top: auto;
  padding-top: 0.35rem;
  color: var(--tinta-clara);
  font-size: 0.7rem;
  line-height: 1.3;
}

/* ---------- Clima ao longo do ano: resumo, seletor e climograma ---------- */
.clima-ano {
  margin-bottom: var(--esp-6);
  scroll-margin-top: 5rem;
}

.clima-cobertura {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  margin: 0 0 var(--esp-3);
  padding: 0.45rem 0.65rem;
  border-left: 3px solid var(--es-mediterraneo);
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: 0.8rem;
  line-height: 1.4;
}

.clima-cobertura--difere {
  border-left-color: var(--es-acafrao-texto);
}

.clima-cobertura__rotulo {
  color: var(--tinta);
  font-weight: 800;
}

.clima-cobertura__texto {
  flex: 1 1 18ch;
}

.clima-anual {
  margin: 0 0 var(--esp-4);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--borda);
  border-radius: 0.7rem;
  background: var(--superficie-2);
}

.clima-anual__titulo {
  margin: 0 0 0.3rem;
  color: var(--marca-escura);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.clima-anual__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.55rem;
  margin: 0.1rem 0;
}

.clima-anual__rotulo {
  min-width: 10.5rem;
  color: var(--tinta-media);
  font-size: 0.78rem;
  font-weight: 700;
}

.clima-anual__valores {
  color: var(--tinta);
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.clima-anual__linha--recente .clima-anual__valores {
  color: var(--es-terracota);
}

.clima-anual__delta {
  margin: 0.35rem 0 0;
  color: var(--tinta-media);
  font-size: 0.75rem;
  line-height: 1.4;
}

.clima-anual__delta-rotulo {
  color: var(--tinta);
  font-weight: 700;
}

.clima-anual__delta-nota {
  color: var(--tinta-clara);
}

/* Seletor: navegação SSR, alvo de toque de 44 px e foco visível global. */
.clima-seletor {
  margin: 0 0 var(--esp-3);
}

.clima-seletor__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clima-seletor__mes {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--borda-forte);
  border-radius: 0.5rem;
  background: var(--superficie-1);
  color: var(--tinta);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.clima-seletor__mes:hover {
  background: var(--superficie-3);
  color: var(--tinta);
}

.clima-seletor__mes[aria-current="true"] {
  border-color: var(--es-terracota);
  background: var(--es-terracota);
  color: #fff;
}

.clima-seletor__mes[aria-current="true"]:hover {
  color: #fff;
}

.clima-grafico {
  display: grid;
  gap: var(--esp-3);
  margin: 0 0 var(--esp-3);
}

.clima-painel {
  min-width: 0;
  padding: 0.55rem 0.6rem 0.45rem;
  border: 1px solid var(--borda);
  border-radius: 0.7rem;
  background: var(--superficie-2);
}

.clima-painel__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.15rem 0.5rem;
  margin-bottom: 0.2rem;
}

.clima-painel__titulo {
  margin: 0;
  color: var(--tinta);
  font-size: 0.85rem;
}

.clima-painel__unidade {
  color: var(--tinta-clara);
  font-size: 0.7rem;
}

.clima-painel__area {
  position: relative;
}

.clima-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Rótulos do eixo y em HTML: não encolhem junto com o viewBox do SVG. */
.clima-eixo-y {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5.6%;
  pointer-events: none;
}

.clima-eixo-y__marca {
  position: absolute;
  right: 0.15rem;
  transform: translateY(-50%);
  color: var(--tinta-media);
  font-size: 0.55rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 700px) {
  .clima-eixo-y__marca {
    font-size: 0.65rem;
  }
}

.clima-destaque {
  fill: rgba(197, 139, 42, 0.14);
}

.clima-grade {
  stroke: var(--borda);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.clima-base {
  stroke: var(--borda-forte);
  stroke-width: 1.2;
}

.clima-barra--normal {
  fill: var(--superficie-1);
  stroke: var(--referencia);
  stroke-width: 1.2;
}

.clima-barra--recente {
  fill: var(--es-terracota);
}

.clima-linha {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clima-linha--normal {
  stroke: var(--es-mediterraneo);
}

.clima-linha--recente {
  stroke: var(--es-terracota);
}

.clima-ponto {
  stroke: var(--superficie-1);
  stroke-width: 1.2;
}

.clima-ponto--normal {
  fill: var(--es-mediterraneo);
}

.clima-ponto--recente {
  fill: var(--es-terracota);
}

.clima-meses {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin: 0.2rem 0 0;
  padding: 0 1.7% 0 5.6%;
  list-style: none;
}

.clima-meses__item {
  color: var(--tinta-clara);
  font-size: 0.58rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.clima-meses__item--atual {
  color: var(--es-terracota);
  font-weight: 800;
}

.clima-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0 0 var(--esp-2);
  padding: 0;
  list-style: none;
}

.clima-legenda__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--tinta-media);
  font-size: 0.75rem;
}

.clima-legenda__amostra {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 24px;
  height: 16px;
}

.clima-legenda__amostra::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 7px;
  height: 12px;
  border: 1.5px solid var(--referencia);
  border-radius: 1px;
  background: var(--superficie-1);
}

.clima-legenda__amostra::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 10px;
  width: 13px;
  border-top: 2.5px solid var(--es-mediterraneo);
  transform: rotate(-15deg);
}

.clima-legenda__amostra--recente::before {
  border-color: var(--es-terracota);
  background: var(--es-terracota);
}

.clima-legenda__amostra--recente::after {
  border-top-color: var(--es-terracota);
}

.clima-mes__titulo {
  margin: var(--esp-3) 0 0.15rem;
  color: var(--tinta);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
}

.clima-mes__ajuda {
  margin: 0 0 var(--esp-2);
  color: var(--tinta-media);
  font-size: 0.8rem;
}

.clima-cartao__recente,
.clima-cartao__delta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.5rem;
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--borda-suave);
}

.clima-cartao__recente-rotulo,
.clima-cartao__delta-rotulo {
  color: var(--tinta-clara);
  font-size: 0.68rem;
}

.clima-cartao__recente-valor,
.clima-cartao__delta-valor {
  color: var(--tinta);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.clima-vazio {
  margin-top: var(--esp-3);
}

.clima-tabela__mes-atual th,
.clima-tabela__mes-atual td {
  background: var(--marca-clara);
  font-weight: 700;
}

/* ---------- Blocos de dimensão com tinta por dimensão ---------- */
.pagina-cidade details[data-dim] {
  --dim-accent: var(--es-terracota);
  --dim-tint: #faede7;
  --dim-borda: #e8cdbf;
  margin: 0 0 0.9rem;
  border: 1px solid var(--dim-borda);
  border-left: 4px solid var(--dim-accent);
  border-radius: 0.8rem;
  background: var(--dim-tint);
  box-shadow: 0 1px 2px rgba(74, 52, 40, 0.06),
    0 12px 26px -22px rgba(74, 52, 40, 0.45);
}

.pagina-cidade details[data-dim]:last-of-type {
  border-bottom: 1px solid var(--dim-borda);
}

.pagina-cidade details[data-dim="clima"] {
  --dim-accent: var(--es-mediterraneo);
  --dim-tint: #edf4f7;
  --dim-borda: #c8dce5;
}

.pagina-cidade details[data-dim="habitacao"] {
  --dim-accent: var(--es-terracota);
  --dim-tint: #faede7;
  --dim-borda: #e8cdbf;
}

.pagina-cidade details[data-dim="custo_vida"] {
  --dim-accent: var(--es-acafrao-texto);
  --dim-tint: #fbf3de;
  --dim-borda: #ead9b2;
}

.pagina-cidade details[data-dim="emprego"] {
  --dim-accent: var(--es-oliva);
  --dim-tint: #eff2e9;
  --dim-borda: #d5ddc9;
}

.pagina-cidade details[data-dim="qualidade_vida"] {
  --dim-accent: #8a6a45;
  --dim-tint: #fcf7eb;
  --dim-borda: #e8dcc5;
}

.pagina-cidade details[data-dim="seguranca"] {
  --dim-accent: var(--es-vermelho);
  --dim-tint: #f8e9e6;
  --dim-borda: #e8c9c3;
}

.pagina-cidade details[data-dim="comunidade"] {
  --dim-accent: var(--es-rosa);
  --dim-tint: #faecef;
  --dim-borda: #ebcfd5;
}

.pagina-cidade details[data-dim="saude"] {
  --dim-accent: #2f6f6a;
  --dim-tint: #eaf3f1;
  --dim-borda: #c9deda;
}

.pagina-cidade details[data-dim="educacao"] {
  --dim-accent: #3f6e9e;
  --dim-tint: #edf2f8;
  --dim-borda: #cfdcea;
}

.pagina-cidade details[data-dim="tecido_produtivo"] {
  --dim-accent: #6b6355;
  --dim-tint: #f4f1ea;
  --dim-borda: #ded7ca;
}

.pagina-cidade details[data-dim] > .dimensao__cabecalho {
  padding: 0.8rem 0.9rem;
  border-radius: 0.7rem 0.7rem 0 0;
}

.pagina-cidade details[data-dim] > .dimensao__cabecalho:hover {
  background: rgba(255, 255, 255, 0.45);
}

.pagina-cidade details[data-dim] > .dimensao__corpo {
  padding: 0 0.9rem 0.9rem;
}

.pagina-cidade details[data-dim] .dimensao__nota {
  border-left-color: var(--dim-accent);
  background: rgba(255, 255, 255, 0.55);
}

/* ---------- KPIs com acento e fundo levemente tintado ---------- */
.pagina-cidade .kpi {
  border-left-color: var(--dim-accent, var(--es-terracota));
  background: linear-gradient(
    180deg,
    var(--superficie-1) 0%,
    var(--dim-tint, #faede7) 100%
  );
  box-shadow: 0 1px 2px rgba(74, 52, 40, 0.06);
}

.pagina-cidade .kpis-ancora .kpi:nth-child(1) {
  --dim-accent: var(--es-terracota);
  --dim-tint: #faede7;
}

.pagina-cidade .kpis-ancora .kpi:nth-child(2) {
  --dim-accent: #8a6a45;
  --dim-tint: #fcf7eb;
}

.pagina-cidade .kpis-ancora .kpi:nth-child(3) {
  --dim-accent: var(--es-vermelho);
  --dim-tint: #f8e9e6;
}

.pagina-cidade .kpis-ancora .kpi:nth-child(4) {
  --dim-accent: var(--es-oliva);
  --dim-tint: #eff2e9;
}

.pagina-cidade a.kpi:hover {
  border-color: var(--dim-accent, var(--es-terracota));
  background: var(--superficie-2);
}

.pagina-cidade .kpi__rotulo {
  color: var(--tinta-media);
}

.pagina-cidade .kpi__valor {
  color: var(--tinta);
}

.pagina-cidade .kpi--icone {
  position: relative;
  padding-right: 2.7rem;
}

.pagina-cidade .kpi__icone {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 1.55rem;
  height: 1.55rem;
  color: var(--dim-accent, var(--es-oliva));
  opacity: 0.9;
}

/* ---------- Habitação: faixa P25–P75 mais visível ---------- */
.pagina-cidade .faixa__trilho {
  background: linear-gradient(
    to bottom,
    transparent 38%,
    var(--grade) 38%,
    var(--grade) 62%,
    transparent 62%
  );
}

.pagina-cidade .faixa__intervalo {
  background: var(--es-terracota);
  opacity: 0.9;
}

.pagina-cidade .faixa__mediana {
  width: 6px;
  height: 1.8rem;
  background: var(--es-marrom);
  box-shadow: 0 0 0 2px var(--superficie-1);
}

/* ---------- Comunidade: barras açafrão/terracota com rótulo direto ---------- */
.pagina-cidade .barra-h__rotulo {
  color: var(--tinta);
}

.pagina-cidade .barra-h__trilho {
  border-color: var(--borda);
  background: var(--superficie-1);
}

.pagina-cidade .barra-h__valor {
  background: linear-gradient(90deg, var(--es-acafrao), var(--es-terracota));
}

.pagina-cidade .barra-h__numero {
  color: var(--es-marrom);
}

/* ---------- Impressão: a página continua legível no papel ---------- */
@media print {
  body:has(> main.pagina-cidade) {
    background: #fff;
  }

  .pagina-cidade {
    background: #fff;
  }

  .faixa-visual {
    display: block;
  }

  .cartao-visual,
  .pagina-cidade details[data-dim] {
    break-inside: avoid;
    box-shadow: none;
  }

  .clima-cartoes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clima-seletor {
    display: none;
  }

  .clima-painel {
    break-inside: avoid;
  }

  .clima-svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.clima-cartao__nota{display:block;margin-top:.35rem;font-size:.75rem;line-height:1.35;color:var(--tinta-clara)}