/* ==========================================================================
   Raio-X — identidade "Rojo y Gualda" (tema claro).
   Vermelho #A31621 de marca, gualda #F1BF00 decorativo e âmbar #B07A00
   como mistura segura para texto e barras. Sem framework e sem build: este
   arquivo cobre tokens de cor, tipografia display, selos de nivel, graficos,
   layout e o <details>.
   Exceções escuras conscientes: scrim do hero com foto, crédito da foto e
   tooltips de gráfico (contraste do texto sobre imagem).
   Regra herdada: nada aqui recalcula valor. Lacuna nunca vira zero.
   ========================================================================== */
:root {
  color-scheme: light;
  /* Tema claro "Rojo y Gualda": papel creme, vermelho de marca e gualda
     decorativa. Os nomes herdados do tema Aurora ficam como alias para que
     nenhum componente (nem o JS que lê as variáveis) precise mudar. */
  --papel: #FDFAF4;
  --areia: #FDFAF4;
  --vidro: #FFFFFF;
  --vidro-borda: #E8DDCB;
  --tinta: #2A211C;
  --tinta-media: #5C5048;
  --tinta-fraca: #6E6259;
  --coral: #A31621;
  --rojo: #A31621;
  --rojo-forte: #7A0F1A;
  --rojo-suave: #FBEAEC;
  --ambar: #B07A00;
  --ambar-texto: #7A4208;
  --gualda: #F1BF00;
  --gualda-tinta: #3D2A00;
  --gualda-suave: #FEF6DC;
  --azul: #1D5FA8;
  --roxo: #6B3FA0;
  --verde: #17703F;
  --nivel-municipio: #1D5FA8;
  --nivel-provincia: #0F6E7A;
  --nivel-ccaa: #6B3FA0;
  --nivel-nacional: #8A6100;
  --nivel-sem: #5C6672;
  --municipio-suave: #E7EFF9;
  --provincia-suave: #E2F1F2;
  --ccaa-suave: #F0EAF9;
  --nacional-suave: #FBF0DA;
  --sem-suave: #F2EFE9;
  --raio: 22px;
  --sombra: 0 1px 2px rgba(58, 40, 28, 0.06), 0 18px 40px -24px rgba(58, 40, 28, 0.28);
}

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

body.rx {
  /* Tokens de superficie claros: o documento e papel, os cartoes sao brancos. */
  --superficie-1: #FFFFFF;
  --superficie-2: #FBF7EF;
  --superficie-3: #F7F0E4;
  --borda: #E8DDCB;
  --borda-forte: #D3C3A9;
  --tinta-clara: var(--tinta-fraca);
  margin: 0;
  background:
    radial-gradient(1200px 620px at 12% -8%, rgba(163, 22, 33, 0.07), transparent 62%),
    radial-gradient(900px 520px at 88% 4%, rgba(241, 191, 0, 0.12), transparent 58%),
    radial-gradient(1000px 700px at 50% 100%, rgba(241, 191, 0, 0.07), transparent 62%),
    var(--papel);
  color: var(--tinta);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.rx-display { font-family: "Instrument Serif", "Fraunces", ui-serif, Georgia, serif; font-weight: 400; letter-spacing: -0.015em; }

/* Anel de foco do tema: o `--foco` legado é âmbar acastanhado e some sobre
   papel. Vermelho de marca tem 7,5:1 sobre o documento. Nunca removemos o anel:
   só trocamos a cor e mantemos a espessura/offset do portal.css. */
body.rx :focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
body.rx .rx-hero :focus-visible { outline-color: var(--gualda); }
body.rx .burocracia :focus-visible { outline-color: var(--rojo); }

/* O portal.css pinta hover de link e summary com --marca-escura (verde
   escuro). No tema claro o hover usa os acentos do tema, que continuam
   legíveis sobre papel. */
body.rx a:hover { color: var(--rojo-forte); }
body.rx summary:hover { color: var(--ambar-texto); }
body.rx .rx-btn.rx-btn--primary:hover { background: var(--rojo-forte); color: #fff; }
body.rx .rx-btn.rx-btn--ghost:hover { background: var(--superficie-2); color: var(--tinta); }
body.rx .clima-seletor a[aria-current="true"]:hover { color: #fff; }
body.rx .rx-kpi:hover .rx-kpi__valor,
body.rx .rx-dim:hover .rx-dim__valor { color: var(--tinta); }

/* ---------- cabecalho do site no tema claro ---------- */
body.rx .cabecalho-site {
  background: rgba(253, 250, 244, 0.9);
  border-bottom: 1px solid var(--borda);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  position: sticky; top: 0; z-index: 60;
}
body.rx .marca__texto > span:first-child { color: var(--tinta); }
body.rx .marca__sub { color: var(--tinta-fraca); }
/* Sigla da marca: vermelho cheio, texto branco e filete gualda na base.
   O inset evita mudar a caixa da marca (nada de layout). */
body.rx .marca__sigla { background: var(--rojo); color: #fff; box-shadow: inset 0 -3px 0 var(--gualda); }
body.rx .nav a { color: var(--tinta-media); }
body.rx .nav a:hover { background: var(--superficie-2); color: var(--tinta); }
body.rx .nav a[aria-current="page"] { background: var(--rojo-suave); color: var(--rojo-forte); }
body.rx .cabecalho-site .wrap { padding-block: 0.9rem; }

body.rx .rodape {
  background: var(--superficie-1);
  border-top-color: var(--borda);
  color: var(--tinta-media);
}
body.rx .rodape p { color: var(--tinta-media); }

/* ---------- estrutura ---------- */
.rx-wrap { width: min(1240px, calc(100% - 2.5rem)); margin-inline: auto; }
.rx-section { margin-block: clamp(2.5rem, 5vw, 4.5rem); }
.rx-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ambar-texto); font-weight: 600;
}
.rx-h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.08; margin: 0.35rem 0 0.5rem; overflow-wrap: anywhere; }
.rx-lede { color: var(--tinta-media); max-width: 62ch; margin: 0; line-height: 1.6; }

/* ---------- superficies de cartao ---------- */
body.rx .rx-card { height: 100%; }
.rx-card--cobertura { display: flex; flex-direction: column; }
.rx-card--cobertura .detalhes { margin-top: auto; }
.rx-card {
  background: var(--superficie-1);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  min-width: 0;
}

/* ---------- HERO ----------
   Exceção do tema: o hero tem foto e o scrim escuro fica, porque é ele que
   garante contraste. Tudo o que está desenhado dentro dele (título, meta,
   CTAs, KPIs) continua claro e é declarado explicitamente abaixo. */
.rx-hero { position: relative; border-radius: 30px; overflow: hidden; isolation: isolate; min-height: 420px; display: grid; align-items: end; }
.rx-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.92; }
.rx-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,18,32,0.00) 0%, rgba(11,18,32,0.08) 38%, rgba(11,18,32,0.60) 55%, rgba(11,18,32,0.86) 72%, rgba(11,18,32,0.95) 100%),
    linear-gradient(105deg, rgba(163,22,33,0.42) 0%, rgba(241,191,0,0.16) 42%, transparent 72%);
}
/* Crédito da foto: legenda discreta no rodapé do herói. Fica no fluxo (o
   template o deixa por último dentro de .rx-hero), abaixo do corpo, para não
   disputar espaço com o H1 nem cobrir o eyebrow em 320 px. */
.rx-hero__credito {
  position: static;
  justify-self: start;
  margin: 0 clamp(1.75rem, 4vw, 3.25rem) 1rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  font-size: 0.64rem; color: rgba(255,255,255,0.74);
  line-height: 1.4; text-align: left;
  text-decoration: none;
}
.rx-hero__credito a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rx-hero__credito a:hover { color: #fff; }
/* Se o template mover o crédito para dentro do corpo, ele continua legenda:
   o corpo já tem o preenchimento lateral, então sobram só a margem e o tom. */
.rx-hero__body .rx-hero__credito {
  margin: 0.25rem 0 0;
  max-width: none;
  font-size: 0.64rem;
}
.rx-hero__credito:hover { color: #fff; }
.rx-hero__body { padding: clamp(1.75rem, 4vw, 3.25rem); display: grid; gap: 1.15rem; min-width: 0; }
.rx-hero__titulo { color: #fff; font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 0.95; margin: 0; }
.rx-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: rgba(255,255,255,0.82); font-size: 0.95rem; min-width: 0; }
.rx-hero__meta span { min-width: 0; overflow-wrap: anywhere; }
.rx-hero__meta strong { color: #fff; font-weight: 600; }
/* O eyebrow nasce no hero (sobre o scrim): gualda, não âmbar de texto. */
.rx-hero .rx-eyebrow { color: var(--gualda); }
.rx-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.35rem; }
/* CTA secundário sobre a foto: vidro claro, texto claro. */
body.rx .rx-hero .rx-btn--ghost {
  border-color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.12);
  color: #fff;
}
body.rx .rx-hero .rx-btn--ghost:hover {
  border-color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.rx-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.3rem; border-radius: 999px;
  font-weight: 600; font-size: 0.92rem; text-decoration: none;
  border: 1px solid transparent; transition: transform .18s ease, opacity .18s ease;
}
.rx-btn:hover { transform: translateY(-1px); }
/* Botão com texto dentro: cor sólida. O gradiente coral→âmbar reprova
   contraste com qualquer cor de texto que se coloque em cima. */
.rx-btn--primary { background: var(--rojo); color: #fff; }
.rx-btn--ghost { border-color: var(--borda-forte); color: var(--tinta); background: var(--superficie-1); }

/* KPIs do hero — vidro sobre imagem (exceção: o hero é escuro). */
.rx-hero__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 0.85rem; margin-top: 0.5rem; }
.rx-kpi {
  display: grid; gap: 0.3rem; padding: 1rem 1.15rem; border-radius: 18px;
  background: var(--superficie-1); border: 1px solid var(--borda);
  text-decoration: none; color: inherit; min-width: 0;
  transition: background .18s ease, border-color .18s ease;
}
a.rx-kpi:hover { background: var(--superficie-2); border-color: var(--borda-forte); }
.rx-kpi__rotulo { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-media); }
.rx-kpi__valor { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.rx-kpi__unidade { font-size: 0.85rem; color: var(--tinta-fraca); font-weight: 500; margin-left: 0.15rem; }
.rx-kpi__meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; align-items: center; font-size: 0.72rem; color: var(--tinta-fraca); min-width: 0; }
.rx-kpi__alerta { font-size: 0.7rem; color: var(--ambar-texto); overflow-wrap: anywhere; }

/* Exceção escopada: KPI DENTRO do hero com foto mantém vidro escuro e texto
   claro, porque o fundo ali é a foto com scrim. Fora do hero (caso da seção
   de cifras do raio-X) o KPI é cartão claro normal. */
body.rx .rx-hero .rx-hero__kpis a.rx-kpi {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #fff;
}
body.rx .rx-hero .rx-hero__kpis a.rx-kpi:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.32);
}
.rx-hero .rx-hero__kpis .rx-kpi__rotulo { color: rgba(255,255,255,0.78); }
.rx-hero .rx-hero__kpis .rx-kpi__valor { color: #fff; }
.rx-hero .rx-hero__kpis .rx-kpi__unidade,
.rx-hero .rx-hero__kpis .rx-kpi__meta { color: rgba(255,255,255,0.72); }
.rx-hero .rx-hero__kpis .rx-kpi__alerta { color: var(--gualda); }
body.rx .rx-hero .rx-hero__kpis .rx-kpi:hover .rx-kpi__valor { color: #fff; }

/* ---------- selos de nivel territorial ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.17rem 0.55rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid; white-space: nowrap;
}
.selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* ADR visual: etiqueta compacta (M/P/C/N/S) e palavra inteira no hover/focus. */
.selo { font-size: 0; padding: 0.12rem 0.32rem; 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; }
.legenda .selo, .legenda .selo:hover { font-size: 0.7rem; padding: 0.12rem 0.42rem; }
.legenda .selo::after { content: none; }
/* Cores por nivel territorial. Não colidem com o vermelho da marca; cada selo
   continua carregando o texto, então cor nenhuma é o único sinal. */
/* Nível territorial: contorno sólido + letra (M/P/C/N) + ponto.
   Estado/confiança: retângulo tracejado com preenchimento suave e sem ponto.
   As cores continuam as mesmas; a forma é que separa os dois tipos. */
.selo--municipio { color: var(--nivel-municipio); border-color: rgba(29,95,168,0.38); background: var(--municipio-suave); }
.selo--provincia { color: var(--nivel-provincia); border-color: rgba(15,110,122,0.38); background: var(--provincia-suave); }
.selo--ccaa { color: var(--nivel-ccaa); border-color: rgba(107,63,160,0.38); background: var(--ccaa-suave); }
.selo--nacional { color: var(--nivel-nacional); border-color: rgba(138,97,0,0.38); background: var(--nacional-suave); }
.selo--misto {
  color: var(--ambar-texto); border-color: rgba(176,122,0,0.45);
  background: var(--gualda-suave); border-style: dashed; border-radius: 0.35rem;
}
.selo--sem {
  color: var(--nivel-sem); border-color: var(--borda-forte);
  background: var(--sem-suave); border-style: dashed; border-radius: 0.35rem;
}
.selo--misto::before,
.selo--sem::before { content: none; }
.selo-contexto {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tinta-fraca); border: 1px dashed var(--borda-forte);
  border-radius: 6px; padding: 0.1rem 0.35rem;
}

/* ---------- graficos ---------- */
.rx-chart { position: relative; width: 100%; }
.rx-chart--radar { height: 380px; }
.rx-chart--clima { height: 340px; }
.rx-chart__fallback { color: var(--tinta-fraca); font-size: 0.85rem; padding: 1rem 0; }

/* ---------- grade de dimensoes ---------- */
.rx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 0.9rem; }
.rx-dim {
  position: relative; display: grid; gap: 0.55rem; padding: 1.25rem;
  border-radius: 18px; text-decoration: none; color: inherit;
  background: var(--superficie-1);
  border: 1px solid var(--borda);
  min-width: 0;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  overflow: hidden;
}
.rx-dim:hover { transform: translateY(-3px); border-color: var(--rojo); }
.rx-dim::after {
  content: ""; position: absolute; inset: auto -30% -60% auto;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(163,22,33,0.12), transparent 70%);
  opacity: 0; transition: opacity .25s ease;
}
.rx-dim:hover::after { opacity: 1; }
.rx-dim__topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.rx-dim__icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 13px;
  background: var(--rojo-suave); color: var(--rojo-forte);
  border: 1px solid rgba(163,22,33,0.22);
}
.rx-dim__icone svg { width: 20px; height: 20px; }
.rx-dim__nome { font-weight: 650; font-size: 1rem; letter-spacing: -0.01em; }
.rx-dim__ancora { font-size: 0.75rem; color: var(--tinta-fraca); }
.rx-dim__valor { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.rx-dim__valor small { font-size: 0.8rem; color: var(--tinta-fraca); font-weight: 500; margin-left: 0.2rem; }
/* Lacuna esperada: nada de opacity (sobre claro ela derruba o contraste do
   texto). O sinal é a borda tracejada e a cor neutra do ícone. */
.rx-dim--sem { border-style: dashed; border-color: var(--borda-forte); }
.rx-dim--sem .rx-dim__icone { background: var(--sem-suave); color: var(--nivel-sem); border-color: var(--borda-forte); }

/* ---------- cobertura ---------- */
.rx-cob { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--superficie-3); }
.rx-cob span { display: block; height: 100%; }
.rx-cob .m { background: var(--nivel-municipio); }
.rx-cob .p { background: var(--nivel-provincia); }
.rx-cob .c { background: var(--nivel-ccaa); }
.rx-cob .n { background: var(--nivel-nacional); }
.rx-cob .s { background: var(--nivel-sem); }
.rx-cob-legenda { display: flex; flex-wrap: wrap; gap: 0.35rem 1.15rem; list-style: none; padding: 0; margin: 0.85rem 0 0; font-size: 0.82rem; color: var(--tinta-media); }
.rx-cob-legenda li { display: inline-flex; align-items: center; gap: 0.4rem; }
.rx-cob-legenda i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ---------- <details> das dimensoes (contrato: .cartao) ---------- */
details.cartao {
  border-radius: 18px; border: 1px solid var(--borda);
  background: var(--superficie-1);
  margin-bottom: 0.75rem; overflow: hidden;
}
details.cartao > summary {
  list-style: none; cursor: pointer; padding: 1.05rem 1.35rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem;
}
details.cartao > summary::-webkit-details-marker { display: none; }
details.cartao > summary:hover { background: var(--superficie-2); }
details.cartao[open] > summary { border-bottom: 1px solid var(--borda); }
.dimensao__titulo { font-size: 1.08rem; margin: 0; font-weight: 650; letter-spacing: -0.01em; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dimensao__resumo { font-size: 0.78rem; color: var(--tinta-fraca); min-width: 0; overflow-wrap: anywhere; }
.dimensao__chevron {
  width: 8px; height: 8px; border-right: 2px solid var(--tinta-fraca); border-bottom: 2px solid var(--tinta-fraca);
  transform: rotate(45deg); transition: transform .2s ease; margin-left: 0.25rem;
}
details.cartao[open] .dimensao__chevron { transform: rotate(-135deg); }
.dimensao__corpo { padding: 1.35rem; display: grid; gap: 1rem; }
.dimensao__nota { font-size: 0.85rem; color: var(--tinta-media); margin: 0; }
.dimensao__aviso { border-left: 3px solid var(--ambar); background: var(--gualda-suave); border-radius: 0 10px 10px 0; padding: 0.65rem 0.85rem; font-size: 0.85rem; color: var(--ambar-texto); margin: 0; }

/* ---------- tabelas ---------- */
.tabela-scroll { overflow-x: auto; max-width: 100%; border-radius: 14px; border: 1px solid var(--borda); scrollbar-width: thin; scrollbar-color: var(--borda-forte) transparent; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.tabela caption { text-align: left; padding: 0.75rem 1rem; color: var(--tinta-fraca); font-size: 0.78rem; }
.tabela th, .tabela td { padding: 0.6rem 0.9rem; text-align: left; border-top: 1px solid var(--borda); }
.tabela thead th { background: var(--superficie-3); color: var(--tinta-media); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.tabela tbody th { font-weight: 550; color: var(--tinta); }
.tabela .num { font-variant-numeric: tabular-nums; color: var(--tinta-media); }

/* Primeira coluna fixa: em 320 px o rótulo da linha (mês ou dimensão) fica
   à vista enquanto os valores rolam. O fundo é opaco porque a célula passa
   por cima das demais; a sombra marca onde a coluna termina. */
@media screen {
  .tabela--clima thead th:first-child,
  .tabela--compacta:not(.tabela--comparador) thead th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--superficie-3);
    box-shadow: 1px 0 0 var(--borda);
  }
  .tabela--clima tbody th:first-child,
  .tabela--compacta:not(.tabela--comparador) tbody th:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--superficie-1);
    box-shadow: 1px 0 0 var(--borda);
  }
  /* A linha do mês selecionado mantém o realce também na coluna fixa. */
  .tabela--clima .clima-tabela__mes-atual th:first-child { background: var(--rojo-suave); }
}

/* Em tela estreita a coluna de rótulo (dimensão ou indicador) fica mais
   larga que o visor da tabela; presa à esquerda, ela esconderia os valores.
   Com largura fixa de 18% do mínimo da tabela (640 px) sobram ~80 px de
   valor em 320 px e a coluna fixa continua útil. Vale para a tabela do
   perfil e para a de clima/indicadores, que também têm rótulo largo. */
@media screen and (max-width: 600px) {
  .tabela--compacta:not(.tabela--comparador) {
    table-layout: fixed;
  }
  .tabela--compacta:not(.tabela--comparador) thead th:first-child {
    width: 18%;
  }
}
.tabela .valor { font-weight: 650; color: var(--tinta); }
.tabela .celula-meta, .tabela .periodo { display: block; font-size: 0.7rem; color: var(--tinta-fraca); }
.linha-grupo th { background: var(--rojo-suave); color: var(--rojo-forte); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.grupo-nota { font-size: 0.78rem; color: var(--tinta-fraca); margin: 0; }

/* ---------- avisos / vazio ---------- */
/* Frescor do snapshot de vagas (ADR-19), espelho de `telas-aurora.css`: esta
   é a folha que o raio-X carrega. Informativo — a oferta antiga continua
   aberta, então o valor não muda. Âmbar dessaturado (--ambar) com menos peso
   que o aviso de instabilidade, sem animação. */
body.rx .aviso-dado--frescor {
  display: block;
  margin-top: 0.35rem;
  border: 1px solid rgba(176, 122, 0, 0.26);
  border-color: color-mix(in srgb, var(--ambar) 26%, transparent);
  border-radius: 0.35rem;
  padding: 0.28rem 0.42rem;
  background: #FEF6DC;
  background: color-mix(in srgb, var(--gualda) 7%, var(--superficie-1));
  color: #7A4208;
  color: var(--ambar-texto);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Dentro dos cartões de KPI o aviso é ainda mais discreto: texto leve, sem
   caixa, para não roubar espaço nem hierarquia do número. */
body.rx .kpi .aviso-dado--frescor,
body.rx .rx-kpi .aviso-dado--frescor {
  margin-top: 0.2rem;
  border: 0;
  padding: 0;
  background: none;
  color: #7A4208;
  color: var(--ambar-texto);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
}
/* Dentro do KPI do hero (fundo escuro) o texto de aviso volta a ser claro. */
/* Dentro do KPI que fica DENTRO do hero (fundo escuro) o aviso volta a ser
   claro. O `__kpis` do raio-X vive fora do hero, sobre cartao branco, e ali
   vale o token escuro de aviso (--ambar-texto). */
body.rx .rx-hero .rx-hero__kpis .rx-kpi .aviso-dado--frescor { color: var(--gualda); }

.vazio { padding: 1.25rem; border-radius: 14px; background: var(--superficie-2); border: 1px dashed var(--borda-forte); }
.vazio__titulo { margin: 0 0 0.4rem; font-weight: 650; }
.vazio__texto { margin: 0; color: var(--tinta-fraca); font-size: 0.85rem; line-height: 1.6; }
.grafico__nota { font-size: 0.76rem; color: var(--tinta-fraca); margin: 0.6rem 0 0; line-height: 1.55; }
.detalhes { border-top: 1px solid var(--borda); padding-top: 0.85rem; }
.detalhes > summary { cursor: pointer; font-size: 0.82rem; color: var(--ambar-texto); font-weight: 600; }
.detalhes[open] > summary { margin-bottom: 0.7rem; }

/* ---------- KPIs dentro de dimensao ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 0.7rem; }
.kpis .kpi, .kpis a.kpi {
  display: grid; gap: 0.25rem; padding: 0.85rem 1rem; border-radius: 14px;
  background: var(--superficie-1); border: 1px solid var(--borda);
  text-decoration: none; color: inherit; min-width: 0;
}
.kpi__rotulo { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-fraca); }
.kpi__valor { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.kpi__unidade { font-size: 0.8rem; color: var(--tinta-fraca); }
.kpi__numero { display: flex; align-items: baseline; gap: 0.1rem; min-width: 0; }
.kpi__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.7rem; color: var(--tinta-fraca); align-items: center; min-width: 0; }
.kpi__alerta { font-size: 0.7rem; color: var(--ambar-texto); overflow-wrap: anywhere; }

/* ---------- faixa de aluguel ---------- */
.faixa__trilho { position: relative; height: 16px; border-radius: 999px; background: var(--superficie-3); margin-block: 0.85rem 0.4rem; }
.faixa__intervalo { position: absolute; left: var(--faixa-p25); width: var(--faixa-largura); top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(163,22,33,0.65), rgba(138,97,0,0.9)); }
/* A mediana era branca (sobre trilho escuro). Sobre trilho claro ela ficaria
   invisível: vermelho forte com halo claro. */
.faixa__mediana { position: absolute; left: var(--faixa-mediana); top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: var(--rojo-forte); box-shadow: 0 0 0 3px rgba(253,250,244,0.9); }
.faixa__eixo { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--tinta-fraca); }
.faixa__valores { display: flex; flex-wrap: wrap; gap: 1.15rem; list-style: none; padding: 0; margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--tinta-fraca); }
.faixa__valores strong { color: var(--tinta); }

/* ---------- barras horizontais (comunidade) ---------- */
.barras { list-style: none; padding: 0; margin: 0.85rem 0 0; display: grid; gap: 0.55rem; }
.barra-h { display: grid; grid-template-columns: minmax(96px, 150px) 1fr auto; gap: 0.7rem; align-items: center; font-size: 0.82rem; }
.barra-h__rotulo { color: var(--tinta-media); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h__trilho { height: 9px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; }
.barra-h__valor { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rojo), var(--ambar)); }
.barra-h__numero { font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 600; }

/* ---------- climograma ---------- */
.clima-seletor { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1rem 0; padding: 0; list-style: none; }
.clima-seletor a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 0.4rem 0.6rem; border-radius: 10px;
  font-size: 0.78rem; font-weight: 600; text-decoration: none;
  color: var(--tinta-media); background: var(--superficie-1); border: 1px solid var(--borda);
}
.clima-seletor a:hover { border-color: var(--rojo); color: var(--tinta); }
.clima-seletor a[aria-current="true"] { background: var(--rojo); color: #fff; border-color: var(--rojo); }
.clima-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); grid-auto-rows: 1fr; gap: 0.75rem; list-style: none; padding: 0; margin: 1rem 0 0; align-items: stretch; }
.clima-cartao {
  display: flex; flex-direction: column; gap: 0.4rem;
  height: 100%; padding: 1rem 1.05rem; border-radius: 16px;
  background: var(--superficie-1); border: 1px solid var(--borda);
}
.clima-cartao__topo { display: flex; align-items: center; gap: 0.5rem; min-height: 36px; }
body.rx .clima-cartao .clima-cartao__icone { width: 32px; height: 32px; color: var(--ambar); }
.clima-cartao__rotulo { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-fraca); white-space: nowrap; }
.clima-cartao__valor { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; overflow-wrap: normal; }
.clima-cartao__nivel { color: var(--tinta-media); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.clima-cartao__recente,
.clima-cartao__delta {
  display: grid; grid-template-columns: 1fr auto; gap: 0.5rem;
  align-items: baseline; margin: 0; padding-top: 0.45rem;
  border-top: 1px solid var(--borda);
}
.clima-cartao__recente-rotulo,
.clima-cartao__delta-rotulo { color: var(--tinta-fraca); font-size: 0.68rem; white-space: nowrap; }
.clima-cartao__recente-valor,
.clima-cartao__delta-valor { color: var(--tinta); font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.clima-cartao__nota { margin-top: auto; padding-top: 0.35rem; color: var(--tinta-fraca); font-size: 0.68rem; line-height: 1.4; }
.clima-cartoes__nota { margin: 0.65rem 0 0; color: var(--tinta-fraca); font-size: 0.7rem; line-height: 1.45; }
body.rx .clima-tabela__mes-atual th,
body.rx .clima-tabela__mes-atual td {
  background: var(--rojo-suave);
  color: var(--tinta);
}
body.rx .tabela .linha-grupo th {
  background: var(--rojo-suave);
  color: var(--rojo-forte);
}
body.rx .tabela .linha-grupo__rodape td {
  background: var(--superficie-2);
}
.clima-anual { display: grid; gap: 0.35rem; font-size: 0.88rem; color: var(--tinta-media); }
.clima-anual__rotulo { color: var(--tinta-fraca); margin-right: 0.4rem; }
.clima-anual__valores { color: var(--tinta); font-variant-numeric: tabular-nums; }
.clima-cobertura { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: var(--tinta-fraca); }
/* O bloco de clima herdado do v1 recebe de volta os tokens claros: ele precisa
   parecer um cartão do portal, não um bloco escuro. */
body.rx .cartao-visual {
  --superficie-1: #FFFFFF;
  --superficie-2: #FBF7EF;
  --superficie-3: #F7F0E4;
  --borda: #E8DDCB;
  --borda-forte: #D3C3A9;
  --marca-escura: var(--rojo-forte);
  background: var(--superficie-1);
  border-color: var(--borda);
  box-shadow: none;
  color: var(--tinta);
}
body.rx .cartao-visual h2 { color: var(--tinta); }
body.rx .cartao-visual__sobre { color: var(--ambar-texto); }
body.rx .cartao-visual__sub { color: var(--tinta-fraca); }
/* Cinza slate do tema escuro não atinge 3:1 sobre papel; cinza quente com mais
   corpo continua neutro e passa em contraste de gráfico. */
.clima-barra--normal { fill: rgba(110,98,89,0.78); }
.clima-barra--recente { fill: var(--coral); }
.clima-linha--normal { fill: none; stroke: var(--azul); stroke-width: 2; }
.clima-linha--recente { fill: none; stroke: var(--coral); stroke-width: 2; }
.perfil-linha__trilho--sem { background-image: repeating-linear-gradient(90deg, rgba(148,163,184,0.5) 0 6px, transparent 6px 12px); }
.perfil-linha__sem { color: var(--tinta-fraca); font-size: 0.78rem; }
.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;
}
.trilha { display: flex; gap: 0.4rem; font-size: 0.78rem; color: var(--tinta-fraca); margin-top: 1.25rem; }
.trilha a { color: var(--tinta-media); text-decoration: none; }
.trilha a:hover { color: var(--rojo-forte); }
.secao-titulo { font-size: 1.35rem; margin: 0 0 0.35rem; letter-spacing: -0.015em; }
.secao-ajuda { color: var(--tinta-fraca); font-size: 0.88rem; margin: 0 0 1rem; max-width: 60ch; }
.burocracia { padding: 1.5rem; border-radius: 20px; background: var(--superficie-1); border: 1px solid var(--borda); color: var(--tinta); }
.burocracia__etiqueta { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ambar-texto); }
/* O portal.css pinta `.burocracia` como bloco escuro (tinta de fundo, texto
   claro). No tema claro o bloco e cartao branco, entao os filhos que traziam
   cor clara fixa precisam da cor de texto normal; sem isso o paragrafo fica
   #cbd5e1 sobre branco (1,5:1) e o h2 branco sobre branco. */
body.rx .burocracia h2 { color: var(--tinta); }
body.rx .burocracia p { color: var(--tinta-media); }
body.rx .burocracia .burocracia__etiqueta { border-color: var(--borda-forte); }
.legenda { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: 0.82rem; color: var(--tinta-fraca); }
.legenda li { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.glossario { padding-left: 1.1rem; font-size: 0.8rem; color: var(--tinta-fraca); line-height: 1.6; }
.campo label { display: block; font-size: 0.78rem; color: var(--tinta-media); margin-bottom: 0.3rem; }
.campo__ajuda { font-size: 0.75rem; color: var(--tinta-fraca); margin: 0 0 0.5rem; }
.campo input[type="search"] {
  width: 100%; padding: 0.7rem 0.9rem; border-radius: 12px; font-size: 0.9rem;
  background: var(--superficie-1); border: 1px solid var(--borda-forte); color: var(--tinta);
}
.campo input[type="search"]:focus { outline: 2px solid var(--rojo); outline-offset: 1px; }
.resultados { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.3rem; }
/* Sugestões da busca também no raio-X, que não carrega telas-aurora.css. */
body.rx .resultados {
  display: block; background: var(--superficie-1);
  border: 1px solid var(--borda); border-radius: 0.7rem;
  overflow: hidden;
}
body.rx .resultados li + li { border-top-color: var(--borda); }
body.rx .resultado-cidade { color: var(--tinta); background: transparent; }
body.rx .resultado-cidade:hover,
body.rx .resultado-cidade:focus-visible { background: var(--superficie-2); }
body.rx .resultado-cidade strong { color: var(--tinta); }
body.rx .resultado-cidade span { color: var(--tinta-fraca); }
.status { font-size: 0.78rem; color: var(--tinta-fraca); min-height: 1.2em; }
.botao { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.1rem; border-radius: 999px; text-decoration: none; font-size: 0.85rem; font-weight: 600; }
.botao--contorno { border: 1px solid var(--borda-forte); color: var(--tinta); }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 1rem; top: 1rem; z-index: 999; background: var(--superficie-1); color: var(--tinta); padding: 0.5rem 1rem; border-radius: 8px; }

/* ---------- trilha lateral de dimensoes + modal ---------- */
.rx-rail {
  display: none;
  position: fixed; left: 14px; top: 50%; transform: translateY(-50%);
  z-index: 65; flex-direction: column; gap: 6px; padding: 2px;
}
html.tem-js .rx-rail { display: flex; }
html.tem-js #secao-dimensoes { display: none; }
.rx-rail__botao {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  color: var(--tinta-media); background: var(--superficie-1);
  border: 1px solid var(--borda);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.rx-rail__botao:hover,
.rx-rail__botao:focus-visible,
.rx-rail__botao[aria-expanded="true"] {
  color: var(--rojo-forte); border-color: var(--rojo);
  background: var(--rojo-suave);
}
.rx-rail__icone { display: flex; width: 22px; height: 22px; }
.rx-rail__icone svg { width: 100%; height: 100%; }
.rx-rail__nome {
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 0.3rem 0.6rem; border-radius: 8px;
  background: var(--superficie-1); border: 1px solid var(--borda);
  box-shadow: var(--sombra);
  color: var(--tinta); font-size: 0.72rem; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
}
.rx-rail__botao:hover .rx-rail__nome,
.rx-rail__botao:focus-visible .rx-rail__nome,
.rx-rail__botao[aria-expanded="true"] .rx-rail__nome {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

.rx-modal { position: fixed; inset: 0; z-index: 100; display: grid; }
.rx-modal[hidden] { display: none; }
.rx-modal__fundo { position: absolute; inset: 0; background: rgba(42,33,28,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rx-modal__painel {
  position: relative; margin: auto; display: flex; flex-direction: column;
  width: min(820px, calc(100% - 2rem)); max-height: 86vh;
  background: var(--superficie-1); border: 1px solid var(--borda);
  border-radius: 24px; box-shadow: var(--sombra); overflow: hidden;
  will-change: transform, opacity;
}
.rx-modal__topo {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--borda);
}
.rx-modal__titulo { margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; }
.rx-modal__fechar {
  width: 44px; height: 44px; border-radius: 12px;
  border: 1px solid var(--borda-forte); background: var(--superficie-2);
  color: var(--tinta); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.rx-modal__fechar:hover { border-color: var(--rojo); color: var(--rojo-forte); }
.rx-modal__conteudo { overflow: auto; padding: 1rem 1.25rem 1.5rem; }
.rx-modal__conteudo .dimensao__cabecalho { pointer-events: none; }
.rx-modal__conteudo .dimensao__chevron { display: none; }
.rx-modal__conteudo .cartao { margin: 0; border: 0; background: transparent; padding: 0; }
body.rx-modal-aberto { overflow: hidden; }

/* Abaixo do desktop, a trilha vira uma barra inferior rolável; o modal e o
   comportamento dos botões continuam os mesmos. */
@media (max-width: 1399.98px) {
  .rx-rail {
    left: 0; right: 0; bottom: 0; top: auto; transform: none;
    flex-direction: row; justify-content: flex-start;
    gap: 6px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(253,250,244,0.96);
    border-top: 1px solid var(--borda);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 -12px 30px -24px rgba(58,40,28,0.35);
    overflow-x: auto; overflow-y: hidden;
    /* Barra fina e visível: a trilha de dimensões continua rolando, mas o
       usuário vê que há mais botões do que cabem na tela. */
    scrollbar-width: thin;
    scrollbar-color: var(--borda-forte) transparent;
    -webkit-overflow-scrolling: touch;
  }
  .rx-rail__botao { flex: 0 0 auto; }
  .rx-rail__nome { display: none; }
  body.rx { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
}

@media (max-width: 400px) {
  /* O título é a palavra mais longa do hero: com 2.6rem fixos ele empurra a
     faixa da grade e o documento ganha rolagem horizontal em 320 px. */
  .rx-hero__body { padding: 1.25rem; gap: 0.9rem; }
  .rx-hero__titulo { font-size: clamp(1.85rem, 9.2vw, 2.4rem); overflow-wrap: anywhere; }
  .rx-hero__credito {
    margin: 0 1.25rem 0.85rem;
    font-size: 0.6rem;
  }
  .rx-h2 { font-size: 1.4rem; }
  .rx-kpi { padding: 0.85rem 0.95rem; }
  .rx-kpi__valor { font-size: 1.55rem; }
  .rx-modal__painel { border-radius: 18px; }
  .rx-modal__topo { padding: 0.85rem 1rem; }
  .rx-modal__conteudo { padding: 0.85rem 1rem 1.25rem; }
  .dimensao__corpo { padding: 1rem; }
  details.cartao > summary { padding: 0.9rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Etiqueta compacta em qualquer contexto (inclusive .celula-meta .selo). */
body.rx .selo { font-size: 0; }
body.rx .selo::after { font-size: 0.7rem; }
body.rx .selo:hover,
body.rx .selo:focus-within { font-size: 0.7rem; }
body.rx .legenda .selo,
body.rx .legenda .selo:hover { font-size: 0.7rem; }
body.rx .legenda .selo::after { content: none; }

/* Menu do cabeçalho no tema claro: o painel precisa de fundo opaco para os
   links não se misturarem ao conteúdo. */
body.rx .cabecalho-site--menu-aberto .nav {
  background: var(--superficie-1);
  border-color: var(--borda);
  box-shadow: 0 18px 34px rgba(58, 40, 28, 0.18);
}

body.rx .cabecalho-site--menu-aberto .nav a {
  color: var(--tinta);
}

body.rx .cabecalho-site--menu-aberto .nav a[aria-current="page"] {
  background: var(--rojo-suave);
  color: var(--rojo-forte);
}

body.rx .cabecalho-site--menu-aberto .nav a:hover {
  background: var(--superficie-2);
}