/* ==========================================================================
   Raio-X — identidade "Aurora Territorial".
   Sem framework e sem build: este arquivo cobre tokens de cor, tipografia
   display, selos de nivel, graficos, layout e o <details>.
   Regra herdada: nada aqui recalcula valor. Lacuna nunca vira zero.
   ========================================================================== */
:root {
  --areia: #0b1220;
  --vidro: rgba(255, 255, 255, 0.06);
  --vidro-borda: rgba(255, 255, 255, 0.12);
  --tinta: #f8fafc;
  --tinta-media: #cbd5e1;
  --tinta-fraca: #94a3b8;
  --coral: #ff6b5a;
  --ambar: #f6a15c;
  --azul: #60a5fa;
  --roxo: #c084fc;
  --nivel-municipio: #34d399;
  --nivel-provincia: #60a5fa;
  --nivel-ccaa: #c084fc;
  --nivel-nacional: #fbbf24;
  --nivel-sem: #94a3b8;
  --raio: 22px;
  --sombra: 0 30px 70px -30px rgba(0, 0, 0, 0.75);
}

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

body.rx {
  /* O tema herda variaveis claras do portal.css; no tema escuro elas precisam ser
     escuras tambem nos componentes antigos (graficos, tabelas, cartoes). */
  --superficie-1: rgba(255,255,255,0.06);
  --superficie-2: rgba(255,255,255,0.04);
  --superficie-3: rgba(255,255,255,0.05);
  --borda: rgba(255,255,255,0.12);
  --borda-forte: rgba(255,255,255,0.20);
  --tinta-clara: var(--tinta-fraca);
  margin: 0;
  background:
    radial-gradient(1200px 620px at 12% -8%, rgba(255, 107, 90, 0.22), transparent 62%),
    radial-gradient(900px 520px at 88% 4%, rgba(96, 165, 250, 0.18), transparent 58%),
    radial-gradient(1000px 700px at 50% 100%, rgba(192, 132, 252, 0.14), transparent 62%),
    var(--areia);
  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; }

/* O portal.css pinta hover de link e summary com --marca-escura (verde
   escuro). No fundo escuro isso some; no tema escuro o hover usa os acentos do tema. */
body.rx a:hover { color: var(--coral); }
body.rx summary:hover { color: var(--ambar); }
body.rx .rx-btn.rx-btn--primary:hover { color: #1b0b07; }
body.rx .rx-btn.rx-btn--ghost:hover { color: var(--tinta); }
body.rx .clima-seletor a[aria-current="true"]:hover { color: #1b0b07; }
body.rx .rx-kpi:hover .rx-kpi__valor,
body.rx .rx-dim:hover .rx-dim__valor { color: var(--tinta); }

/* ---------- cabecalho do site no tema escuro ---------- */
body.rx .cabecalho-site {
  background: rgba(11, 18, 32, 0.72);
  border-bottom: 1px solid var(--vidro-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); }
body.rx .marca__sigla { background: linear-gradient(135deg, var(--coral), var(--ambar)); color: #1b0b07; }
body.rx .nav a { color: var(--tinta-media); }
body.rx .nav a:hover { color: var(--tinta); }
body.rx .nav a[aria-current="page"] { color: var(--coral); }
body.rx .cabecalho-site .wrap { padding-block: 0.9rem; }

body.rx .rodape {
  background: transparent;
  border-top-color: var(--vidro-borda);
  color: var(--tinta-fraca);
}
body.rx .rodape p { color: var(--tinta-fraca); }

/* ---------- 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); font-weight: 600;
}
.rx-h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.08; margin: 0.35rem 0 0.5rem; }
.rx-lede { color: var(--tinta-fraca); max-width: 62ch; margin: 0; line-height: 1.6; }

/* ---------- superficies de vidro ---------- */
body.rx .rx-card { height: 100%; }
.rx-card--cobertura { display: flex; flex-direction: column; }
.rx-card--cobertura .detalhes { margin-top: auto; }
.rx-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* ---------- HERO ---------- */
.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.85; }
.rx-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,18,32,0.15) 0%, rgba(11,18,32,0.62) 52%, rgba(11,18,32,0.97) 100%),
    linear-gradient(105deg, rgba(255,107,90,0.42) 0%, rgba(246,161,92,0.16) 42%, transparent 72%);
}
.rx-hero__credito {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  padding: 0.22rem 0.55rem; border-radius: 999px;
  font-size: 0.66rem; color: rgba(255,255,255,0.82);
  background: rgba(11,18,32,0.55); border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  text-decoration: none;
}
.rx-hero__credito a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rx-hero__credito a:hover { color: #fff; }
.rx-hero__credito:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.rx-hero__body { padding: clamp(1.75rem, 4vw, 3.25rem); display: grid; gap: 1.15rem; }
.rx-hero__titulo { 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: var(--tinta-media); font-size: 0.95rem; }
.rx-hero__meta strong { color: var(--tinta); font-weight: 600; }
.rx-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.35rem; }

.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); }
.rx-btn--primary { background: linear-gradient(120deg, var(--coral), var(--ambar)); color: #1b0b07; }
.rx-btn--ghost { border-color: var(--vidro-borda); color: var(--tinta); background: var(--vidro); }

/* KPIs do hero — vidro sobre imagem */
.rx-hero__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.85rem; margin-top: 0.5rem; }
.rx-kpi {
  display: grid; gap: 0.3rem; padding: 1rem 1.15rem; border-radius: 18px;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  text-decoration: none; color: inherit;
  transition: background .18s ease, border-color .18s ease;
}
a.rx-kpi:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); }
.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; }
.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.4rem; align-items: center; font-size: 0.72rem; color: var(--tinta-fraca); }
.rx-kpi__alerta { font-size: 0.7rem; color: var(--ambar); }

/* ---------- 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; }
.selo--municipio { color: var(--nivel-municipio); border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.12); }
.selo--provincia { color: var(--nivel-provincia); border-color: rgba(96,165,250,0.4); background: rgba(96,165,250,0.12); }
.selo--ccaa { color: var(--nivel-ccaa); border-color: rgba(192,132,252,0.4); background: rgba(192,132,252,0.12); }
.selo--nacional { color: var(--nivel-nacional); border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.12); }
.selo--misto { color: var(--ambar); border-color: rgba(246,161,92,0.45); background: rgba(246,161,92,0.12); }
.selo--sem { color: var(--nivel-sem); border-color: rgba(100,116,139,0.45); background: rgba(100,116,139,0.14); }
.selo-contexto {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tinta-fraca); border: 1px dashed rgba(148,163,184,0.4);
  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(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: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border: 1px solid var(--vidro-borda);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  overflow: hidden;
}
.rx-dim:hover { transform: translateY(-3px); border-color: rgba(255,107,90,0.5); }
.rx-dim::after {
  content: ""; position: absolute; inset: auto -30% -60% auto;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,90,0.22), 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: rgba(255,107,90,0.14); color: var(--coral);
  border: 1px solid rgba(255,107,90,0.28);
}
.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; }
.rx-dim--sem { opacity: 0.72; }
.rx-dim--sem .rx-dim__icone { background: rgba(100,116,139,0.16); color: var(--tinta-fraca); border-color: rgba(100,116,139,0.32); }

/* ---------- cobertura ---------- */
.rx-cob { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.07); }
.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(--vidro-borda);
  background: linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  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: rgba(255,255,255,0.045); }
details.cartao[open] > summary { border-bottom: 1px solid var(--vidro-borda); }
.dimensao__titulo { font-size: 1.08rem; margin: 0; font-weight: 650; letter-spacing: -0.01em; flex: 1 1 auto; }
.dimensao__resumo { font-size: 0.78rem; color: var(--tinta-fraca); }
.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: rgba(246,161,92,0.07); border-radius: 0 10px 10px 0; padding: 0.65rem 0.85rem; font-size: 0.85rem; color: var(--tinta-media); margin: 0; }

/* ---------- tabelas ---------- */
.tabela-scroll { overflow-x: auto; border-radius: 14px; border: 1px solid var(--vidro-borda); }
.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 rgba(255,255,255,0.06); }
.tabela thead th { background: rgba(255,255,255,0.05); 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); }
.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: rgba(255,107,90,0.1); color: var(--coral); 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(246, 161, 92, 0.26);
  border-color: color-mix(in srgb, var(--ambar) 26%, transparent);
  border-radius: 0.35rem;
  padding: 0.28rem 0.42rem;
  background: rgba(246, 161, 92, 0.07);
  background: color-mix(in srgb, var(--ambar) 7%, transparent);
  color: #f2d7b6;
  color: color-mix(in srgb, var(--ambar) 30%, var(--tinta));
  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: #f2d7b6;
  color: color-mix(in srgb, var(--ambar) 30%, var(--tinta));
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
}

.vazio { padding: 1.25rem; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px dashed rgba(148,163,184,0.35); }
.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(--vidro-borda); padding-top: 0.85rem; }
.detalhes > summary { cursor: pointer; font-size: 0.82rem; color: var(--ambar); font-weight: 600; }
.detalhes[open] > summary { margin-bottom: 0.7rem; }

/* ---------- KPIs dentro de dimensao ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.7rem; }
.kpis .kpi, .kpis a.kpi {
  display: grid; gap: 0.25rem; padding: 0.85rem 1rem; border-radius: 14px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--vidro-borda);
  text-decoration: none; color: inherit;
}
.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; }
.kpi__unidade { font-size: 0.8rem; color: var(--tinta-fraca); }
.kpi__numero { display: flex; align-items: baseline; gap: 0.1rem; }
.kpi__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.7rem; color: var(--tinta-fraca); align-items: center; }
.kpi__alerta { font-size: 0.7rem; color: var(--ambar); }

/* ---------- faixa de aluguel ---------- */
.faixa__trilho { position: relative; height: 16px; border-radius: 999px; background: rgba(255,255,255,0.08); 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(255,107,90,0.55), rgba(246,161,92,0.85)); }
.faixa__mediana { position: absolute; left: var(--faixa-mediana); top: -5px; bottom: -5px; width: 3px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.16); }
.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: rgba(255,255,255,0.08); overflow: hidden; }
.barra-h__valor { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--coral), 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: rgba(255,255,255,0.05); border: 1px solid var(--vidro-borda);
}
.clima-seletor a:hover { border-color: rgba(255,107,90,0.55); color: var(--tinta); }
.clima-seletor a[aria-current="true"] { background: linear-gradient(120deg, var(--coral), var(--ambar)); color: #1b0b07; border-color: transparent; }
.clima-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(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: rgba(255,255,255,0.05); border: 1px solid var(--vidro-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(--vidro-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: rgba(255,107,90,0.12);
  color: var(--tinta);
}
body.rx .tabela .linha-grupo th {
  background: rgba(255,255,255,0.06);
  color: var(--tinta);
}
body.rx .tabela .linha-grupo__rodape td {
  background: rgba(255,255,255,0.03);
}
.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 traz a moldura clara; neste tema ele vira vidro. */
body.rx .cartao-visual {
  --superficie-1: rgba(255,255,255,0.06);
  --superficie-2: rgba(255,255,255,0.04);
  --superficie-3: rgba(255,255,255,0.10);
  --borda: rgba(255,255,255,0.12);
  --borda-forte: rgba(255,255,255,0.20);
  --marca-escura: var(--tinta);
  background: rgba(255,255,255,0.04);
  border-color: var(--vidro-borda);
  box-shadow: none;
  color: var(--tinta);
}
body.rx .cartao-visual h2 { color: var(--tinta); }
body.rx .cartao-visual__sobre { color: var(--ambar); }
body.rx .cartao-visual__sub { color: var(--tinta-fraca); }
.clima-barra--normal { fill: rgba(148,163,184,0.55); }
.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(--coral); }
.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: rgba(255,255,255,0.04); border: 1px solid var(--vidro-borda); }
.burocracia__etiqueta { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ambar); }
.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: rgba(255,255,255,0.06); border: 1px solid var(--vidro-borda); color: var(--tinta);
}
.campo input[type="search"]:focus { outline: 2px solid var(--coral); 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: #0f172a;
  border: 1px solid var(--vidro-borda); border-radius: 0.7rem;
  overflow: hidden;
}
body.rx .resultados li + li { border-top-color: var(--vidro-borda); }
body.rx .resultado-cidade { color: var(--tinta); background: transparent; }
body.rx .resultado-cidade:hover,
body.rx .resultado-cidade:focus-visible { background: rgba(255,255,255,0.08); }
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(--vidro-borda); color: var(--tinta); }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 1rem; top: 1rem; z-index: 999; background: #fff; color: #000; 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: rgba(11,18,32,0.78);
  border: 1px solid var(--vidro-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(--coral); border-color: rgba(255,107,90,0.55);
  background: rgba(255,107,90,0.12);
}
.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: rgba(11,18,32,0.94); border: 1px solid var(--vidro-borda);
  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(4,8,16,0.72); -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(100vw - 120px)); max-height: 86vh;
  background: #0f172a; border: 1px solid var(--vidro-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(--vidro-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(--vidro-borda); background: rgba(255,255,255,0.06);
  color: var(--tinta); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.rx-modal__fechar:hover { border-color: rgba(255,107,90,0.55); color: var(--coral); }
.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(11,18,32,0.94);
    border-top: 1px solid var(--vidro-borda);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 -12px 30px -24px rgba(0,0,0,0.9);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .rx-rail::-webkit-scrollbar { display: none; }
  .rx-rail__botao { flex: 0 0 auto; }
  .rx-rail__nome { display: none; }
  body.rx { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
}

@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; }