/* ═══════════════════════════════════════════════════════════════════
   Portal InFi — sistema de diseño

   Punto de partida: la especificación de identidad visual InFI
   (Bitácora Web - Guia funcional y UI-UX.md). La paleta, la tipografía y
   la escala de 4px se conservan sin cambios.

   Lo que este archivo agrega es la capa de oficio que la especificación no
   cubría, porque describía un observatorio de texto y no un producto de
   series numéricas:

     · tres capas de superficie en vez de blanco sobre papel
     · elevación ligada al nivel de interacción, no decorativa
     · escala tipográfica con más contraste entre extremos
     · tokens de movimiento
     · modo oscuro con la misma semántica de rol
     · densidad ajustable
     · estados de carga, vacío, error y foco tratados como primera clase

   Todo color se declara por ROL, nunca por valor literal fuera de :root.
   Si un componente escribe un hex, está mal.
   ═══════════════════════════════════════════════════════════════════ */

/* ═════════════════════════ 1. TOKENS ═══════════════════════════ */

:root {
  /* ── marca, invariante entre temas ── */
  --petrol-500: #0F5C5A;
  --petrol-600: #0B4644;
  --petrol-400: #2C7C79;
  --petrol-300: #4FA8A0;

  /* ── señales semánticas (base InFi) ── */
  --azul: #3B6D8C;
  --ocre: #B6781E;
  --ladrillo: #B34A43;
  --hoja: #4D7A57;

  /* ── tipografía ── */
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala con más contraste entre extremos que la original.
     El paso corto (12→13.5→15) sostiene la densidad de datos;
     el paso largo (19→26→34) da jerarquía real a los titulares. */
  --t-micro: 10.5px;   /* versalitas, etiquetas de eje */
  --t-meta: 12px;      /* metadatos, chips */
  --t-cuerpo: 13.5px;  /* interfaz y cuerpo corto */
  --t-fila: 15px;      /* títulos de fila o tarjeta */
  --t-bloque: 19px;    /* título de bloque */
  --t-pagina: 26px;    /* título de página */
  --t-cifra: 34px;     /* KPI protagonista */

  /* Escala EDITORIAL, exclusiva de la portada (`#/inicio`).
     La escala de arriba está calibrada para densidad de datos y su tope son
     los 34px de un KPI: en una primera pantalla a sangre completa ese tamaño
     se lee como un widget, no como una entrada. Estos dos pasos existen sólo
     para esa página; ninguna vista de datos los usa, y siguen respetando la
     regla de peso —500 como máximo, nunca 700. */
  --t-display: clamp(38px, 5.2vw, 64px);
  --t-lead: clamp(16px, 1.5vw, 20px);

  --lh-apretado: 1.25;
  --lh-normal: 1.52;
  --lh-lectura: 1.65;

  /* ── espaciado, escala de 4px ── */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;  --e-5: 20px;
  --e-6: 24px;  --e-7: 32px;  --e-8: 40px;  --e-9: 48px;  --e-10: 64px;

  /* ── radios ── */
  --r-chico: 6px;    /* input, botón compacto */
  --r-medio: 10px;   /* fila, elemento secundario */
  --r-grande: 14px;  /* panel */
  --r-pildora: 999px;

  /* ── movimiento ── */
  --m-rapido: 130ms;
  --m-normal: 180ms;
  --m-vista: 240ms;
  --m-curva: cubic-bezier(.22, .61, .36, 1);

  /* ── densidad, ajustable por el usuario ── */
  --densidad: 1;
  --alto-fila: calc(38px * var(--densidad));
  --pad-panel: calc(22px * var(--densidad));

  --lateral: 248px;
  --contenido-max: 1400px;
}

/* ── tema claro ── */

:root,
[data-tema="claro"] {
  color-scheme: light;

  /* superficies, de la más profunda a la más elevada */
  --sup-0: #F4F4F0;   /* fondo de página */
  --sup-1: #FFFFFF;   /* panel */
  --sup-2: #FFFFFF;   /* elemento elevado: menú, globo */
  --sup-hundida: #EEF0EB;  /* zona secundaria, pista de control */
  --sup-hover: #F7F7F3;

  /* texto */
  --tx-1: #18211F;    /* principal */
  --tx-2: #5A6561;    /* secundario */
  --tx-3: #8A9591;    /* pistas y metadatos de tercer nivel */
  --tx-invertido: #FFFFFF;

  /* marca */
  --marca: var(--petrol-500);
  --marca-fuerte: var(--petrol-600);
  --marca-suave: #D8E9E3;
  --marca-tenue: #EAF3F0;

  /* bordes */
  --borde: rgba(24, 33, 31, .10);
  --borde-fuerte: rgba(24, 33, 31, .18);
  --borde-marca: rgba(15, 92, 90, .38);

  /* señales: color de trazo, fondo suave, texto legible sobre ese fondo */
  --sig-info: var(--azul);
  --sig-info-bg: #E6EDF2;
  --sig-info-tx: #2A5170;

  --sig-atencion: var(--ocre);
  --sig-atencion-bg: #F8F0E0;
  --sig-atencion-tx: #7E520F;

  --sig-critico: var(--ladrillo);
  --sig-critico-bg: #F8E9E7;
  --sig-critico-tx: #8A342E;

  --sig-positivo: var(--hoja);
  --sig-positivo-bg: #E6EEE8;
  --sig-positivo-tx: #35563D;

  /* elevación: 4 niveles ligados al nivel de interacción */
  --el-0: none;
  --el-1: 0 1px 2px rgba(24, 33, 31, .05);
  --el-2: 0 1px 2px rgba(24, 33, 31, .05), 0 4px 14px rgba(24, 33, 31, .06);
  --el-3: 0 2px 6px rgba(24, 33, 31, .07), 0 12px 32px rgba(24, 33, 31, .10);
  --el-foco: 0 0 0 2px var(--sup-1), 0 0 0 4px var(--borde-marca);

  /* gráficos */
  --g-reja: rgba(24, 33, 31, .07);
  --g-eje: rgba(24, 33, 31, .16);
  --g-fondo-serie: #C9CFCA;   /* series de contexto, sin protagonismo */
  --g-velo: rgba(24, 33, 31, .04);
  /* Cabecera de tabla. Era casi negra con texto claro: un bloque muy pesado
     encima de cada tabla, y con las tablas contables ocupando media pantalla
     el efecto se acumulaba. Ahora es la superficie hundida con texto
     secundario fuerte, y el peso lo lleva el filete inferior. */
  --tabla-cab: #EAEDE7;
  --tabla-cab-tx: #4A5551;

  /* ── escala categórica ──
     Las cuatro series protagonistas (petróleo, azul, ocre, ladrillo) son la
     regla para COMPARAR. Pero una composición —un donut de ingresos, una
     apilada de cartera— tiene más categorías que cuatro, y hasta ahora se
     resolvía ciclando la paleta con módulo: la quinta porción salía del mismo
     color que la primera dentro del mismo gráfico, y la leyenda quedaba
     ambigua.

     Esta escala extiende la familia de marca hasta ocho pasos distinguibles
     por tono Y por luminosidad, para que se lean también en escala de grises.
     Más de ocho categorías no se colorean: se agregan en «Otros». */
  --cat-1: #0F5C5A;
  --cat-2: #3B6D8C;
  --cat-3: #B6781E;
  --cat-4: #B34A43;
  --cat-5: #4FA8A0;
  --cat-6: #6E5A9B;
  --cat-7: #4D7A57;
  --cat-8: #8A8F7A;

  /* ── escala secuencial de marca ──
     Para intensidad sobre una sola magnitud: coropléticos y capas censales.
     Vivía escrita a mano dentro de `mapa-manzanos.js`, que es un módulo de
     vista y por tanto no debería declarar color. */
  --seq-1: #DCEFEB;
  --seq-2: #A9D8D2;
  --seq-3: #6DBBB2;
  --seq-4: #278C86;
  --seq-5: #0F5C5A;
}

/* ── tema oscuro ── */
/* No es el claro invertido: las superficies suben en luminosidad al elevarse,
   y el petróleo se aclara para mantener contraste sobre fondo oscuro. */

[data-tema="oscuro"] {
  color-scheme: dark;

  --sup-0: #111716;
  --sup-1: #1A2220;
  --sup-2: #232D2B;
  --sup-hundida: #151C1B;
  --sup-hover: #202927;

  --tx-1: #E9EEEC;
  --tx-2: #9FADA9;
  --tx-3: #74817D;
  --tx-invertido: #0E1413;

  --marca: var(--petrol-300);
  --marca-fuerte: #6FBFB7;
  --marca-suave: rgba(79, 168, 160, .16);
  --marca-tenue: rgba(79, 168, 160, .08);

  --borde: rgba(233, 238, 236, .10);
  --borde-fuerte: rgba(233, 238, 236, .20);
  --borde-marca: rgba(79, 168, 160, .45);

  --sig-info: #6FA3C4;
  --sig-info-bg: rgba(111, 163, 196, .14);
  --sig-info-tx: #9CC3DC;

  --sig-atencion: #D9A24B;
  --sig-atencion-bg: rgba(217, 162, 75, .14);
  --sig-atencion-tx: #E3BC7C;

  --sig-critico: #D9756D;
  --sig-critico-bg: rgba(217, 117, 109, .14);
  --sig-critico-tx: #E59A94;

  --sig-positivo: #74A57F;
  --sig-positivo-bg: rgba(116, 165, 127, .14);
  --sig-positivo-tx: #9AC0A3;

  --el-0: none;
  --el-1: 0 1px 2px rgba(0, 0, 0, .30);
  --el-2: 0 1px 2px rgba(0, 0, 0, .30), 0 4px 14px rgba(0, 0, 0, .28);
  --el-3: 0 2px 6px rgba(0, 0, 0, .36), 0 12px 32px rgba(0, 0, 0, .42);
  --el-foco: 0 0 0 2px var(--sup-1), 0 0 0 4px var(--borde-marca);

  --g-reja: rgba(233, 238, 236, .07);
  --g-eje: rgba(233, 238, 236, .18);
  --g-fondo-serie: #4A5551;
  --g-velo: rgba(233, 238, 236, .04);
  --tabla-cab: #141B1A;
  --tabla-cab-tx: #9FADA9;

  /* La escala categórica sube en luminosidad sobre fondo oscuro; no es la
     clara invertida, igual que el resto del tema. */
  --cat-1: #4FA8A0;
  --cat-2: #6FA3C4;
  --cat-3: #D9A24B;
  --cat-4: #D9756D;
  --cat-5: #8FD6CE;
  --cat-6: #A794D4;
  --cat-7: #74A57F;
  --cat-8: #B3B79E;

  /* Sobre fondo oscuro la intensidad crece hacia el claro, no hacia el negro:
     una escala que se oscurece desaparecería contra la superficie. */
  --seq-1: #17403E;
  --seq-2: #21605C;
  --seq-3: #2F857E;
  --seq-4: #4FA8A0;
  --seq-5: #8FD6CE;
}

/* Ya no hay bloque `prefers-color-scheme`.

   El tema dejó de heredarse del sistema operativo: `data-tema` lo escribe
   siempre el script en línea de index.html antes del primer pintado, con
   «oscuro» por omisión. Duplicar los tokens oscuros en una consulta de medios
   además del selector de arriba dejaba dos fuentes de verdad para el mismo
   color, que es exactamente lo que este archivo prohíbe. */


/* ═════════════════════════ 2. BASE ════════════════════════════ */

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

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

body {
  margin: 0;
  background: var(--sup-0);
  color: var(--tx-1);
  font-family: var(--font-ui);
  font-size: var(--t-cuerpo);
  font-weight: 400;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv05' 1, 'cv08' 1;  /* l con cola, I con serifas */
  transition: background var(--m-normal) var(--m-curva),
              color var(--m-normal) var(--m-curva);
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: var(--lh-apretado); }

a { color: var(--marca); text-decoration: none; }
a:hover { color: var(--marca-fuerte); text-decoration: underline; text-underline-offset: 2px; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

svg { display: block; }

::selection { background: var(--marca-suave); color: var(--tx-1); }

/* Foco visible de 2px en marca, separado del borde. Nunca se elimina. */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: var(--r-chico);
}

/* Números comparables siempre tabulares. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.versalita {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--tx-2);
}

.meta { font-size: var(--t-meta); color: var(--tx-2); }
.tx3 { color: var(--tx-3); }

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

.salto-contenido {
  position: absolute; top: -60px; left: var(--e-4); z-index: 100;
  background: var(--sup-1); color: var(--marca);
  padding: var(--e-3) var(--e-4); border-radius: var(--r-medio);
  box-shadow: var(--el-3); transition: top var(--m-normal);
}
.salto-contenido:focus { top: var(--e-4); }

/* ═══════════════════════ 3. ESTRUCTURA ════════════════════════ */

.app { display: flex; min-height: 100vh; }
.principal { flex: 1 1 auto; min-width: 0; }

.envoltura {
  max-width: var(--contenido-max);
  margin: 0 auto;
  padding: var(--e-7) clamp(20px, 3.2vw, 44px) var(--e-10);
}

/* ── ritmo vertical de una vista ──

   El espacio entre los bloques de una vista lo decide LA VISTA, no cada
   componente por su cuenta.

   Antes cada uno traía su propio margen inferior —cabecera 32, bloque 48,
   banda 0, panel 0, ficha 0— y el resultado dependía de qué componente
   quedara arriba. Funcionaba de casualidad: mientras todo iba envuelto en un
   `.bloque`, ese 48 sostenía la página. En cuanto un panel o una banda quedó
   suelto en el primer nivel, los elementos se tocaron.

   Con `gap` hay una sola fuente de ritmo y ningún componente nuevo puede
   romperlo por olvidarse de declarar un margen. */
.vista {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
  animation: entrada var(--m-vista) var(--m-curva);
}
/* Se neutralizan los márgenes propios para que no se sumen al `gap`.

   La clase va repetida a propósito. Varios componentes declaran su margen más
   abajo en este archivo y, a igual especificidad, gana el último: `.procedencia`
   sumaba 20 px, `.sd-seccion` 64 y `.comex__metodologia` 24. Duplicar la clase
   sube la especificidad a (0,2,0) y zanja el asunto sin recurrir a `!important`.

   El alcance es deliberadamente `> *`: sólo el PRIMER nivel de la vista. Una
   `.procedencia` anidada dentro del pie de un panel conserva su margen, porque
   ahí sí lo necesita. */
.vista.vista > * { margin-block: 0; }

@keyframes entrada {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ── actualización en curso ──
   Un cambio de filtro conserva el contenido anterior hasta tener el nuevo, que
   es lo correcto: evita el pantallazo. Pero sin ninguna señal parecía que el
   control no había respondido. Esto aparece solo si la espera supera los
   220 ms, y no reemplaza ni mueve nada. */
#contenido { position: relative; }
#contenido[data-actualizando] > .vista {
  opacity: .55;
  pointer-events: none;
  transition: opacity var(--m-rapido) var(--m-curva);
}
#contenido[data-actualizando]::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  z-index: 5; border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--marca) 40%, var(--marca) 60%, transparent 100%);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: progreso 1.1s var(--m-curva) infinite;
}
@keyframes progreso {
  from { background-position: -40% 0; }
  to { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento la señal sigue existiendo: barra fija, no animada. */
  #contenido[data-actualizando]::before {
    animation: none; background: var(--marca-suave); background-size: 100% 100%;
  }
}

/* ═════════════════════ 4. BARRA LATERAL ═══════════════════════ */
/* Navegación, no contenido: una sola superficie, un solo borde, sin sombras
   fuertes ni separadores entre ítems. No debe pesar más que los datos.

   Tres estados con el mismo DOM: expandido, contraído (68 px, solo iconos con
   globo propio) y panel móvil. El ancho se resuelve con un token, así que la
   rejilla del contenido lo acompaña sin cálculos duplicados. */

/* El ancho cambia de golpe, sin animar.

   Animar `width` acá saldría caro y se vería peor: la barra es `sticky` y el
   contenido ocupa el resto de la fila, así que cada cuadro de la animación
   recalcularía el layout de la página entera y dispararía el `ResizeObserver`
   de todos los gráficos ECharts sesenta veces por segundo. Lo que sí se anima
   es la opacidad de las etiquetas, que no toca el layout. */
.lateral {
  width: var(--lateral);
  flex: 0 0 var(--lateral);
  background: var(--sup-1);
  border-right: 1px solid var(--borde);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

/* ── cabecera de marca ── */

.lateral__marca {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-4) var(--e-3) var(--e-3) var(--e-4);
}

/* ── lockup de marca ──
   Isotipo del archivo oficial + nombre compuesto en Inter. El logotipo original
   es una caja muy ancha de trazos partidos: a tamaño de barra lateral compite
   con el isotipo y obliga a recortar la bajada. El nombre tipográfico da un
   bloque compacto, legible y estable en los dos temas. */
.marca {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 1 1 auto; border-radius: var(--r-chico);
  color: inherit;
}
.marca:hover { text-decoration: none; }
.marca:hover .marca__infi { color: var(--marca); }

/* Proporción bloqueada: se fija el alto y el ancho se deduce. Nunca se deforma
   ni se le pone caja: su silueta ya es la forma. */
.marca__iso {
  height: 26px; width: auto; flex: 0 0 auto;
  display: block;
}

.marca__texto {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}

.marca__nombre {
  font-size: 17px; line-height: 1.15; letter-spacing: -.012em;
  white-space: nowrap;
}
.marca__producto { font-weight: 400; color: var(--tx-2); }
.marca__infi {
  font-weight: 600; color: var(--tx-1);
  transition: color var(--m-rapido);
}
.marca__sub {
  font-size: 10.5px; line-height: 1.3; color: var(--tx-3);
  letter-spacing: .005em; white-space: nowrap;
}

.lateral__contraer { flex: 0 0 auto; }

/* ── navegación ── */

.lateral__nav {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--e-2) var(--e-3) var(--e-4);
  display: flex; flex-direction: column; gap: 2px;
}
.lateral__nav::-webkit-scrollbar { width: 8px; }
.lateral__nav::-webkit-scrollbar-thumb {
  background: var(--borde-fuerte); border-radius: 4px;
  border: 2px solid var(--sup-1);
}

.nav__grupo { display: flex; flex-direction: column; }
.nav__grupo--suelto { margin-bottom: var(--e-2); }
.nav__grupo + .nav__grupo { margin-top: var(--e-1); }

.nav__titulo {
  display: flex; align-items: center; gap: var(--e-2);
  width: 100%; padding: var(--e-2) 10px;
  border-radius: var(--r-chico); color: var(--tx-3);
  transition: color var(--m-rapido), background var(--m-rapido);
}
.nav__titulo:hover { color: var(--tx-2); background: var(--sup-hover); }
.nav__titulo .versalita { flex: 1 1 auto; text-align: left; color: inherit; }
.nav__titulo-chevron {
  display: inline-flex; transition: transform var(--m-normal) var(--m-curva);
}
.nav__grupo[data-abierto="0"] .nav__titulo-chevron { transform: rotate(-90deg); }

/* Plegado real: sin altura, sin foco alcanzable, sin lectura por voz.

   La rejilla de una sola pista sólo colapsa si tiene UN hijo con `min-height: 0`
   y `overflow: hidden`. Por eso los destinos van envueltos en `.nav__items`:
   como hijos directos, `0fr` achicaba únicamente la primera fila y el grupo
   plegado seguía ocupando el alto de todos sus destinos. */
.nav__lista {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--m-normal) var(--m-curva);
}
.nav__items { min-height: 0; overflow: hidden; }
.nav__grupo[data-abierto="0"] .nav__lista { grid-template-rows: 0fr; }
.nav__grupo[data-abierto="0"] .nav__items { visibility: hidden; }

.nav__item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px; border-radius: var(--r-medio);
  font-size: var(--t-cuerpo); color: var(--tx-1);
  text-align: left; width: 100%; position: relative;
  transition: background var(--m-rapido), color var(--m-rapido);
}
.nav__item:hover { background: var(--sup-hover); text-decoration: none; }
.nav__ico { display: inline-flex; flex: 0 0 20px; justify-content: center;
  color: var(--tx-2); transition: color var(--m-rapido); }
.nav__item:hover .nav__ico { color: var(--tx-1); }
.nav__etiqueta {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav__item[aria-current="page"] {
  background: var(--marca-suave); color: var(--marca); font-weight: 500;
}
.nav__item[aria-current="page"] .nav__ico { color: var(--marca); }
.nav__item[aria-current="page"]::before {
  content: ""; position: absolute; left: -6px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 2px 2px 0; background: var(--marca);
}

/* ── señal de frescura ──
   Lleva FORMA además de color, y texto para lectores de pantalla: un dominio
   vencido no puede distinguirse solo por el tono del punto. */
.nav__estado { flex: 0 0 8px; width: 8px; height: 8px; }
.nav__estado--al_dia {
  border-radius: 50%; background: var(--sig-positivo);
}
.nav__estado--por_vencer {
  border-radius: 50%; border: 1.5px solid var(--sig-atencion);
}
.nav__estado--vencido {
  background: var(--sig-critico);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

/* Globo del estado contraído. Reemplaza al `title` nativo, que aparece con casi
   un segundo de retraso y no se puede estilizar. */
.nav__globo {
  display: none; position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  padding: 5px 10px; border-radius: var(--r-chico);
  background: var(--sup-2); color: var(--tx-1);
  border: 1px solid var(--borde); box-shadow: var(--el-2);
  font-size: var(--t-meta); white-space: nowrap;
  pointer-events: none; opacity: 0; z-index: 70;
  transition: opacity var(--m-rapido);
}

/* ── pie ── */

.lateral__pie {
  margin-top: auto; padding: var(--e-3) var(--e-4) var(--e-4);
  border-top: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: var(--e-2);
}
.lateral__acciones { display: flex; gap: var(--e-1); }
.lateral__meta {
  display: flex; flex-direction: column; gap: 1px;
  font-size: var(--t-meta); color: var(--tx-3); padding-left: 2px;
}
.lateral__meta .versalita { color: var(--tx-3); }

/* ══ estado contraído en escritorio ══ */

@media (min-width: 861px) {
  :root[data-menu="contraido"] { --lateral: 68px; }

  [data-menu="contraido"] .lateral__marca {
    flex-direction: column; gap: var(--e-2); padding: var(--e-4) 0 var(--e-3);
  }
  [data-menu="contraido"] .marca { justify-content: center; }
  [data-menu="contraido"] .marca__texto { display: none; }
  [data-menu="contraido"] .nav__titulo { display: none; }
  [data-menu="contraido"] .nav__etiqueta { display: none; }
  [data-menu="contraido"] .lateral__nav { padding-inline: 14px; }
  [data-menu="contraido"] .nav__item { justify-content: center; padding: 9px 0; }
  [data-menu="contraido"] .nav__grupo + .nav__grupo {
    margin-top: var(--e-2); padding-top: var(--e-2);
    border-top: 1px solid var(--borde);
  }
  /* Con el grupo plegado el ítem activo quedaría invisible: contraído siempre
     muestra todos los destinos, que para eso hay solo dieciséis. */
  [data-menu="contraido"] .nav__grupo[data-abierto="0"] .nav__lista {
    grid-template-rows: 1fr;
  }
  [data-menu="contraido"] .nav__grupo[data-abierto="0"] .nav__items {
    visibility: visible;
  }
  [data-menu="contraido"] .nav__estado {
    position: absolute; top: 6px; right: 8px;
  }
  [data-menu="contraido"] .nav__item[aria-current="page"]::before { display: none; }
  [data-menu="contraido"] .nav__globo { display: block; }
  [data-menu="contraido"] .nav__item:hover .nav__globo,
  [data-menu="contraido"] .nav__item:focus-visible .nav__globo { opacity: 1; }
  [data-menu="contraido"] .lateral__pie { padding-inline: 14px; }
  [data-menu="contraido"] .lateral__acciones { flex-direction: column; }
  [data-menu="contraido"] .lateral__meta { display: none; }
}

/* ═════════════════════ 5. CABECERA Y BLOQUES ══════════════════ */

/* Sin margen propio: el ritmo entre bloques lo da el `gap` de `.vista`. */
.cabecera { margin-bottom: 0; }
.cabecera__fila {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e-3) var(--e-4);
}
.cabecera__titulo {
  font-size: var(--t-pagina); letter-spacing: -.014em;
  display: flex; align-items: center; gap: var(--e-3);
}
.cabecera__acciones {
  margin-left: auto; display: flex; gap: var(--e-2); align-items: center;
}
.cabecera__bajada {
  color: var(--tx-2); font-size: var(--t-cuerpo);
  line-height: var(--lh-lectura); max-width: 78ch;
  margin: var(--e-3) 0 0;
}

.bloque { margin-bottom: 0; }
.bloque__cabecera {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e-2) var(--e-4); margin-bottom: var(--e-4);
}
.bloque__titulo {
  font-size: var(--t-bloque); letter-spacing: -.008em;
  display: flex; align-items: center; gap: var(--e-2);
}
.bloque__nota {
  font-size: var(--t-meta); color: var(--tx-2);
  max-width: 72ch; line-height: 1.5;
}
.bloque__acciones { margin-left: auto; display: flex; gap: var(--e-2); align-items: center; }

.rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--e-6); }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* ═══════════════════════ 6. PANEL ═════════════════════════════ */

.panel {
  background: var(--sup-1);
  border-radius: var(--r-grande);
  box-shadow: var(--el-2);
  padding: var(--pad-panel);
  min-width: 0;
  transition: box-shadow var(--m-normal) var(--m-curva);
}
.panel--plano { box-shadow: var(--el-1); border-radius: var(--r-medio); }
.panel--contorno {
  box-shadow: none; border: 1px solid var(--borde); background: transparent;
}
.panel--hundido { background: var(--sup-hundida); box-shadow: none; }

.panel__cabecera {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e-2) var(--e-3); margin-bottom: var(--e-4);
}
.panel__titulo { font-size: var(--t-fila); }
.panel__sub { font-size: var(--t-meta); color: var(--tx-2); }
.panel__acciones { margin-left: auto; display: flex; gap: var(--e-2); align-items: center; }

/* ══════════════════════ 7. CHIPS ══════════════════════════════ */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-pildora);
  font-size: var(--t-meta); line-height: 1.5; white-space: nowrap;
  background: var(--sup-hundida); color: var(--tx-2);
  border: 1px solid transparent;
  transition: background var(--m-rapido), border-color var(--m-rapido), color var(--m-rapido);
}
.chip__punto {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 6px;
}

/* El color nunca es el único canal: el chip siempre lleva texto. */
.chip--al_dia     { background: var(--sig-positivo-bg); color: var(--sig-positivo-tx); }
.chip--por_vencer { background: var(--sig-atencion-bg); color: var(--sig-atencion-tx); }
.chip--vencido    { background: var(--sig-critico-bg);  color: var(--sig-critico-tx); }
.chip--sin_datos  { background: var(--sup-hundida);     color: var(--tx-3); }
.chip--info       { background: var(--sig-info-bg);     color: var(--sig-info-tx); }
.chip--marca      { background: var(--marca-suave);     color: var(--marca); }

.chip--boton { cursor: pointer; }
.chip--boton:hover { background: var(--sup-hover); border-color: var(--borde-fuerte); }
.chip--activo {
  background: var(--marca-suave); color: var(--marca);
  border-color: var(--borde-marca); font-weight: 500;
}
.chip--quitable { padding-right: 4px; }
.chip__quitar {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  color: inherit; opacity: .55;
  transition: opacity var(--m-rapido), background var(--m-rapido);
}
.chip__quitar:hover { opacity: 1; background: rgba(0, 0, 0, .08); }

/* ═════════════════ 8. BANDA DE CIFRAS ═════════════════════════ */
/* Banda con divisores tenues. La especificación prohíbe explícitamente
   el dashboard lleno de tarjetas KPI idénticas en fila. */

.banda {
  background: var(--sup-1);
  border-radius: var(--r-grande);
  box-shadow: var(--el-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  overflow: hidden;
}
.cifra {
  padding: var(--e-5) var(--pad-panel);
  border-left: 1px solid var(--borde);
  min-width: 0; position: relative;
  transition: background var(--m-rapido);
}
.cifra:first-child { border-left: none; }
.cifra--interactiva { cursor: pointer; }
.cifra--interactiva:hover { background: var(--sup-hover); }

.cifra__etiqueta {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: var(--e-2);
}
.cifra__valor {
  font-size: 27px; font-weight: 500;
  letter-spacing: -.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.cifra__numero { color: var(--tx-1); }

/* La unidad va claramente subordinada al número: es el contexto, no el dato.
   Con la escala nueva la unidad carga la magnitud —«Bs millones»—, así que
   necesita más presencia que antes pero nunca la del número. */
.cifra__unidad {
  font-size: 12.5px; font-weight: 500;
  color: var(--tx-2); letter-spacing: 0;
  white-space: nowrap;
}

/* ── jerarquía dentro de la banda ──
   Una cifra protagonista por banda. No se rompe la regla del sistema: siguen
   siendo divisores tenues y una sola superficie, sin tarjetas sueltas. Lo que
   cambia es el peso relativo, que es lo que hace ejecutiva la lectura. */
.cifra--principal {
  background: var(--marca-tenue);
}
.cifra--principal .cifra__valor { font-size: var(--t-cifra); }
.cifra--principal .cifra__numero { color: var(--tx-1); }
.cifra--principal .cifra__etiqueta { color: var(--marca); }
.cifra--principal .cifra__unidad { font-size: var(--t-cuerpo); }
/* Filete de marca al borde superior: señala cuál es la cifra que manda sin
   encerrarla en una caja. */
.cifra--principal::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: var(--marca);
}
.cifra__pie {
  margin-top: var(--e-3); display: flex; flex-wrap: wrap;
  gap: var(--e-2) var(--e-3); align-items: center;
}
.cifra__var {
  font-size: var(--t-meta); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 3px;
}
.cifra__var--sube { color: var(--sig-positivo-tx); }
.cifra__var--baja { color: var(--sig-critico-tx); }
.cifra__var--neutro { color: var(--tx-2); }
.cifra__fecha { font-size: var(--t-meta); color: var(--tx-3); }
.cifra--rancia .cifra__valor { color: var(--tx-2); }
.cifra__chispa { margin-top: var(--e-3); height: 30px; }

/* ═════════════════════ 8bis. FICHA DE ENTIDAD ═════════════════ */
/* Perfil de una entidad. Reemplaza los cuatro sistemas paralelos que había:
   `perfil-fondo__*`, `fiscal-indicador__ficha`, `resumen-fila` y `sd-ficha`.
   Superficie única y divisores tenues, igual que la banda: la jerarquía la da
   el peso de la cifra, no una caja por métrica. */

.ficha {
  background: var(--sup-1);
  border-radius: var(--r-grande);
  box-shadow: var(--el-2);
  overflow: hidden;
}

.ficha__cabecera {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-5) var(--pad-panel);
  border-bottom: 1px solid var(--borde);
}
.ficha__sigla {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center; border-radius: var(--r-medio);
  background: var(--marca-suave); color: var(--marca);
  font-size: 15px; font-weight: 600; letter-spacing: .03em;
}
.ficha__identidad { min-width: 0; flex: 1 1 auto; }
.ficha__sobre { color: var(--marca); display: block; }
.ficha__nombre {
  font-size: var(--t-bloque); line-height: 1.2; margin-top: 2px;
  letter-spacing: -.01em; overflow-wrap: anywhere;
}
.ficha__contexto {
  display: block; margin-top: 4px;
  color: var(--tx-2); font-size: var(--t-meta);
}
.ficha__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ficha__acciones { display: flex; gap: var(--e-2); }

.ficha__cuerpo { display: flex; flex-wrap: wrap; }
.ficha__metricas {
  flex: 1 1 380px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.ficha__metrica {
  padding: var(--e-4) var(--pad-panel);
  border-left: 1px solid var(--borde); min-width: 0;
}
.ficha__metricas .ficha__metrica:first-child { border-left: none; }

/* La cifra que define a la entidad, con el mismo tratamiento que la cifra
   protagonista de una banda: se distingue por peso y aire, no por una caja. */
.ficha__metrica--principal {
  flex: 0 0 auto; min-width: 220px;
  border-left: none; background: var(--marca-tenue);
  position: relative;
}
.ficha__metrica--principal::before {
  content: ""; position: absolute; inset-block: 0; left: 0; width: 2px;
  background: var(--marca);
}
.ficha__metrica--principal .ficha__valor { font-size: var(--t-cifra); }
.ficha__metrica--principal .ficha__etiqueta { color: var(--marca); }

.ficha__etiqueta {
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px; color: var(--tx-3);
}
.ficha__valor {
  font-size: 21px; font-weight: 500; line-height: 1.1;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
}
.ficha__numero { color: var(--tx-1); }
.ficha__unidad { font-size: var(--t-meta); font-weight: 500; color: var(--tx-2); }
.ficha__sub {
  display: block; margin-top: 5px;
  font-size: var(--t-meta); color: var(--tx-3);
}

.ficha__pie {
  padding: var(--e-3) var(--pad-panel);
  border-top: 1px solid var(--borde);
  background: var(--sup-hundida);
  font-size: var(--t-meta); color: var(--tx-3);
}

@media (max-width: 760px) {
  .ficha__cabecera { flex-wrap: wrap; }
  .ficha__chips, .ficha__acciones { justify-content: flex-start; width: 100%; }
  .ficha__metrica--principal { min-width: 100%; }
  .ficha__metrica { border-left: none; border-top: 1px solid var(--borde); }
}

/* ═════════════════ 9. LECTURA DEL CORTE ═══════════════════════ */

.lectura { display: flex; flex-direction: column; gap: var(--e-4); }
.lectura p {
  margin: 0; font-size: 14px; line-height: var(--lh-lectura);
  max-width: 80ch; color: var(--tx-1);
}
.lectura p strong { font-weight: 500; }
.lectura p .num { color: var(--tx-1); }

.nota, .advertencia {
  display: flex; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-medio);
  font-size: 13px; line-height: 1.55; max-width: 92ch;
}
.nota { background: var(--sup-hundida); color: var(--tx-2); }
.advertencia { background: var(--sig-atencion-bg); color: var(--sig-atencion-tx); }
.critico { background: var(--sig-critico-bg); color: var(--sig-critico-tx); }
.nota .ico, .advertencia .ico, .critico .ico { flex: 0 0 16px; margin-top: 1px; }
.nota a, .advertencia a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ═════════════════ 10. CONTROLES ══════════════════════════════ */

.controles {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  align-items: center; margin-top: var(--e-5);
}
.controles__separador {
  width: 1px; align-self: stretch; background: var(--borde); margin: 0 var(--e-1);
}

.segmentado {
  display: inline-flex; background: var(--sup-hundida);
  border-radius: var(--r-pildora); padding: 3px; gap: 2px;
  position: relative;
}
.segmentado button {
  padding: 5px 13px; border-radius: var(--r-pildora);
  font-size: var(--t-meta); color: var(--tx-2);
  white-space: nowrap; position: relative; z-index: 1;
  transition: color var(--m-rapido);
}
.segmentado button:hover { color: var(--tx-1); }
.segmentado button[aria-pressed="true"] {
  color: var(--marca); font-weight: 500;
  background: var(--sup-1); box-shadow: var(--el-1);
}

.boton {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--r-chico);
  font-size: 13px; white-space: nowrap;
  transition: background var(--m-rapido), border-color var(--m-rapido),
              color var(--m-rapido), box-shadow var(--m-rapido);
}
.boton--primario { background: var(--marca); color: var(--tx-invertido); }
.boton--primario:hover { background: var(--marca-fuerte); }
.boton--secundario {
  background: var(--sup-1); border: 1px solid var(--borde-fuerte); color: var(--marca);
}
.boton--secundario:hover { border-color: var(--marca); background: var(--marca-tenue); }
.boton--terciario { color: var(--marca); padding: 7px 9px; }
.boton--terciario:hover { background: var(--marca-tenue); }
.boton--peligro { color: var(--sig-critico-tx); }
.boton[disabled] { opacity: .45; cursor: not-allowed; }

.boton-icono {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-chico);
  color: var(--tx-2);
  transition: background var(--m-rapido), color var(--m-rapido);
}
.boton-icono:hover { background: var(--sup-hover); color: var(--tx-1); }
.boton-icono[aria-pressed="true"] { background: var(--marca-suave); color: var(--marca); }

.campo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  background: var(--sup-1); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-chico); padding: 6px 10px;
  transition: border-color var(--m-rapido), box-shadow var(--m-rapido);
  color: var(--tx-2);
}
.campo:focus-within {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-tenue);
}
.campo input, .campo select {
  border: none; outline: none; background: none;
  font: inherit; font-size: var(--t-cuerpo); color: var(--tx-1);
  min-width: 0;
}
.campo input { width: 100%; }
.campo select { cursor: pointer; padding-right: var(--e-1); }
.campo--busqueda { min-width: 250px; flex: 1 1 250px; max-width: 400px; }
.campo--relleno {
  background: var(--marca-suave); border-color: var(--borde-marca); color: var(--marca);
}
.campo--relleno select { color: var(--marca); font-weight: 500; }
.campo__limpiar { color: var(--tx-3); display: grid; place-items: center; }
.campo__limpiar:hover { color: var(--tx-1); }

/* ═════════════════════ 11. GRÁFICOS ═══════════════════════════ */

.grafico-caja { position: relative; }
.grafico {
  width: 100%; display: block; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}
.grafico--zoom { cursor: crosshair; }
.grafico--arrastrando { cursor: col-resize; }

.g-reja { stroke: var(--g-reja); stroke-width: 1; shape-rendering: crispEdges; }
.g-cero { stroke: var(--g-eje); stroke-width: 1; shape-rendering: crispEdges; }
.g-eje-tx {
  font-size: var(--t-micro); fill: var(--tx-3);
  font-variant-numeric: tabular-nums;
}
.g-eje-titulo { font-size: var(--t-micro); fill: var(--tx-3); letter-spacing: .06em; }
.g-linea { fill: none; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.g-linea--tenue { stroke-width: 1.1; opacity: .55; }
.g-area { stroke: none; }
.g-banda { stroke: none; opacity: .10; }
.g-guia { stroke: var(--marca); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.g-punto { stroke: var(--sup-1); stroke-width: 2; pointer-events: none; }
.g-barra { transition: opacity var(--m-rapido); }
.g-barra:hover { opacity: .78; }
.g-seleccion { fill: var(--marca); opacity: .10; pointer-events: none; }
.g-captura { fill: transparent; }
.g-etiqueta-fin {
  font-size: var(--t-meta); font-weight: 500;
  font-variant-numeric: tabular-nums; paint-order: stroke;
  stroke: var(--sup-1); stroke-width: 3px; stroke-linejoin: round;
}
.g-ref-linea { stroke-dasharray: 4 4; stroke-width: 1; }
.g-ref-tx { font-size: var(--t-micro); }
.g-celda { transition: opacity var(--m-rapido); }
.g-celda:hover { opacity: .7; }

/* animación de entrada de las series; se desactiva con reduced-motion */
.g-anim { animation: trazo var(--m-vista) var(--m-curva) both; }
@keyframes trazo { from { opacity: 0; } to { opacity: 1; } }

.leyenda {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4);
  margin-top: var(--e-4); padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
}
.leyenda__item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-meta); color: var(--tx-2);
  padding: 2px 6px; margin: -2px -6px; border-radius: var(--r-chico);
  transition: background var(--m-rapido), color var(--m-rapido), opacity var(--m-rapido);
}
.leyenda__item--clicable { cursor: pointer; }
.leyenda__item--clicable:hover { background: var(--sup-hover); color: var(--tx-1); }
.leyenda__item[aria-pressed="false"] { opacity: .40; }
.leyenda__item[aria-pressed="false"] .leyenda__marca { background: var(--tx-3) !important; }
.leyenda__marca { width: 14px; height: 3px; border-radius: 2px; flex: 0 0 14px; }
.leyenda__marca--guion {
  background: none !important;
  border-top: 3px dashed currentColor; height: 0;
}
.leyenda__valor {
  font-variant-numeric: tabular-nums; color: var(--tx-1); font-weight: 500;
}
.leyenda__nota { color: var(--tx-3); }

.globo {
  position: absolute; pointer-events: none; z-index: 40;
  background: var(--sup-2); border: 1px solid var(--borde);
  border-radius: var(--r-medio); box-shadow: var(--el-3);
  padding: var(--e-3); font-size: var(--t-meta);
  min-width: 190px; max-width: 300px;
  opacity: 0; transform: translateY(2px);
  transition: opacity var(--m-rapido), transform var(--m-rapido);
}
.globo[data-visible="1"] { opacity: 1; transform: none; }
.globo__fecha {
  font-weight: 500; margin-bottom: var(--e-2);
  padding-bottom: var(--e-2); border-bottom: 1px solid var(--borde);
  color: var(--tx-1);
}
.globo__fila {
  display: flex; align-items: center; gap: var(--e-2);
  justify-content: space-between; padding: 2px 0;
}
.globo__marca { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 8px; }
.globo__nombre {
  flex: 1 1 auto; color: var(--tx-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.globo__valor { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--tx-1); }
.globo__pie {
  margin-top: var(--e-2); padding-top: var(--e-2);
  border-top: 1px solid var(--borde); color: var(--tx-3); font-size: 11px;
}

.zoom-aviso {
  position: absolute; top: var(--e-2); right: var(--e-2); z-index: 20;
  display: flex; gap: var(--e-2); align-items: center;
}

/* ═════════════════════ 12. TABLAS ═════════════════════════════ */

.tabla-caja {
  overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--borde); border-radius: var(--r-medio);
  background: var(--sup-1);
  scrollbar-width: thin; scrollbar-color: var(--borde-fuerte) transparent;
}
.tabla-caja::-webkit-scrollbar { height: 8px; }
.tabla-caja::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 4px; }

table.tabla {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
/* Cabecera: antes era casi negra (#17201E) con texto claro, un bloque muy
   pesado encima de cada tabla. Ahora es la superficie hundida con texto fuerte y
   un filete inferior marcado. Pesa mucho menos y sigue leyéndose como cabecera. */
.tabla thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--tabla-cab);
  text-align: left; padding: 10px 13px;
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tabla-cab-tx);
  border-bottom: 1px solid var(--borde-fuerte); white-space: nowrap;
}
.tabla th.der, .tabla td.der { text-align: right; }
.tabla th.cen, .tabla td.cen { text-align: center; }
.tabla tbody td {
  padding: 9px 13px; min-height: var(--alto-fila);
  border-bottom: 1px solid var(--borde);
  transition: background var(--m-rapido);
}

/* ── color de fila ──
   Se retiró la cebra de `nth-child(even)`. En una tabla densa agregaba ruido y,
   sobre todo, competía con los fondos que SÍ significan algo: fila agregada,
   fila seleccionada, nivel contable. Ahora el relleno está reservado a lo
   semántico y a la fila bajo el cursor; el resto se separa con un filete. */
.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr.clicable { cursor: pointer; }
.tabla tbody tr:hover td { background: var(--sup-hover); }
.tabla tbody tr.destacada td {
  background: var(--marca-suave);
  box-shadow: inset 3px 0 0 var(--marca);
}
.tabla tbody tr.destacada:hover td { background: var(--marca-suave); }
.tabla tbody tr.agregado td {
  background: var(--sup-hundida); color: var(--tx-1); font-weight: 500;
  border-top: 1px solid var(--borde-fuerte);
}

/* Ausencia de dato: gris terciario, nunca un cero. Un cero es un valor. */
.tabla tbody td.sin-dato { color: var(--tx-3); }

.tabla__ordenable {
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 4px;
  transition: color var(--m-rapido);
}
.tabla__ordenable:hover { color: var(--marca); }
.tabla__flecha {
  display: inline-flex; opacity: .35;
  transition: opacity var(--m-rapido);
}
.tabla__ordenable[data-activo] { color: var(--marca); }
.tabla__ordenable[data-activo] .tabla__flecha { opacity: 1; }
.tabla__nombre { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.tabla__nombre > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla__pie td {
  font-weight: 500; border-top: 1px solid var(--borde-fuerte);
  background: var(--sup-hundida);
}
.tabla-reporte {
  max-height: 72vh; overflow: auto; border-radius: var(--r-medio);
  background: var(--sup-1); border: 1px solid var(--borde);
  scrollbar-gutter: stable;
}
.tabla-reporte .tabla { min-width: 700px; table-layout: fixed; }
.tabla-reporte .tabla thead th {
  height: 68px; padding: 10px 14px 11px; vertical-align: bottom;
  border-right: 1px solid color-mix(in srgb, var(--tabla-cab-tx) 14%, transparent);
}
.tabla-reporte .tabla th:first-child,
.tabla-reporte .tabla td:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--sup-1);
  min-width: 0; width: auto;
  box-shadow: 1px 0 0 var(--borde), 12px 0 18px -20px rgba(0,0,0,.65);
}
.tabla-reporte .tabla th:not(:first-child),
.tabla-reporte .tabla td:not(:first-child) {
  min-width: 0; white-space: nowrap; border-left: 1px solid var(--borde);
}
.tabla-reporte .tabla thead th:first-child {
  z-index: 4; background: var(--tabla-cab); color: var(--tabla-cab-tx);
}
.tabla-reporte .tabla tbody td {
  min-height: 42px; padding: 10px 14px; vertical-align: middle;
  color: var(--tx-1); background: var(--sup-1);
}
.tabla-reporte .tabla tbody tr:hover td {
  background: color-mix(in srgb, var(--marca-tenue) 42%, var(--sup-1));
}
.tabla-reporte .tabla tr[data-nivel="1"] td {
  background: color-mix(in srgb, var(--marca-tenue) 72%, var(--sup-1));
  color: var(--tx-1); border-top: 2px solid var(--borde-marca); font-weight: 650;
}
.tabla-reporte .tabla tr[data-nivel="1"] td:first-child {
  background: color-mix(in srgb, var(--marca-tenue) 72%, var(--sup-1));
}
.tabla-reporte .tabla tr[data-nivel="2"] td {
  background: color-mix(in srgb, var(--sup-hundida) 72%, var(--sup-1));
  color: var(--tx-1); font-weight: 600;
}
.tabla-reporte .tabla tr[data-nivel="2"] td:first-child {
  background: color-mix(in srgb, var(--sup-hundida) 72%, var(--sup-1));
}
.tabla-reporte .tabla tr[data-nivel="3"] td:first-child { font-weight: 500; }
.tabla-reporte .tabla tr[data-nivel="4"] td:first-child { color: var(--tx-2); }
.tabla-reporte__cab-principal,
.tabla-reporte__cab-secundaria,
.tabla-reporte__entidad-codigo,
.tabla-reporte__entidad-nombre,
.tabla-reporte__entidad-unidad { display: block; }
.tabla-reporte__cab-principal { font-size: 11px; }
.tabla-reporte__cab-secundaria {
  margin-top: 4px; color: color-mix(in srgb, var(--tabla-cab-tx) 68%, transparent);
  font-size: 9px; font-weight: 500; letter-spacing: .04em; text-transform: none;
}
.tabla-reporte__entidad-codigo {
  color: var(--marca); font-size: 10px; font-weight: 700; letter-spacing: .12em;
}
.tabla-reporte__entidad-nombre {
  margin-top: 4px; overflow: hidden; color: var(--tabla-cab-tx);
  font-size: 11px; font-weight: 600; letter-spacing: 0; line-height: 1.2;
  text-transform: none; text-overflow: ellipsis; white-space: nowrap;
}
.tabla-reporte__entidad-unidad {
  margin-top: 3px; color: color-mix(in srgb, var(--tabla-cab-tx) 62%, transparent);
  font-size: 9px; font-weight: 500; letter-spacing: .03em; text-transform: none;
}
.tabla-reporte__valor { font-size: 12.5px; font-weight: 550; }
.tabla-reporte__valor--cero,
.tabla-reporte__valor--ausente { color: var(--tx-3) !important; font-weight: 400; }
.tabla-reporte__utilidades {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.tabla-reporte__niveles { display: flex; flex-wrap: wrap; gap: 6px; }
.tabla-reporte__buscar { min-width: min(100%, 300px); }
.cuenta-arbol {
  display: block; width: 100%; min-width: 0; text-align: left; color: inherit; font: inherit;
  line-height: 1.35; white-space: normal; overflow-wrap: anywhere;
}
.cuenta-arbol--hoja { cursor: default; }
.cuenta-arbol:hover { color: var(--marca); }
.num--negativa { font-weight: 600; }

@media (max-width: 760px) {
  .tabla-reporte .tabla th:first-child,
  .tabla-reporte .tabla td:first-child { position: static; box-shadow: none; }
  .tabla-reporte .tabla thead th { height: 62px; }
}

/* Variante de dos columnas para cuadros jerárquicos del Sector Externo. */
.tabla-reporte--externo { max-height: 560px; }
.tabla-reporte--externo .tabla { min-width: 680px; }
.tabla-reporte--externo .tabla th:first-child,
.tabla-reporte--externo .tabla td:first-child {
  min-width: 480px; width: auto;
}
.tabla-reporte--externo .tabla th:not(:first-child),
.tabla-reporte--externo .tabla td:not(:first-child) {
  min-width: 150px; width: 150px;
}

/* barra en celda: comparar magnitudes sin salir de la tabla */
.barra-celda {
  position: relative; display: flex; justify-content: flex-end;
  align-items: center; min-width: 72px; height: 100%;
}
.barra-celda__relleno {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: 18px; border-radius: 3px; background: var(--marca-suave); z-index: 0;
  transition: width var(--m-normal) var(--m-curva);
}
.barra-celda__texto { position: relative; z-index: 1; padding: 0 5px; }

/* barra divergente: para variaciones con signo */
.barra-div { position: relative; height: 18px; min-width: 90px; }
.barra-div__eje { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--borde-fuerte); }
.barra-div__relleno { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; }

.punto-estado {
  width: 7px; height: 7px; border-radius: 50%;
  flex: 0 0 7px; display: inline-block;
}
.punto-estado--al_dia { background: var(--sig-positivo); }
.punto-estado--por_vencer { background: var(--sig-atencion); }
.punto-estado--vencido { background: var(--sig-critico); }
.punto-estado--sin_datos { background: var(--tx-3); }

/* ═════════════ 13. PROCEDENCIA Y ESTADOS ══════════════════════ */

.procedencia {
  margin-top: var(--e-5); padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
  font-size: 11.5px; color: var(--tx-3); line-height: 1.55;
}
.procedencia strong { font-weight: 500; color: var(--tx-2); }
.procedencia details { margin-top: var(--e-2); }
.procedencia summary {
  cursor: pointer; color: var(--tx-2);
  display: inline-flex; align-items: center; gap: 4px;
}
.procedencia summary:hover { color: var(--marca); }
.procedencia ul { margin: var(--e-2) 0 0; padding-left: 16px; }
.procedencia li { margin-bottom: 3px; }

.vacio {
  padding: var(--e-9) var(--e-5); text-align: center; color: var(--tx-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
}
.vacio__ico { color: var(--tx-3); opacity: .6; }
.vacio__titulo { font-size: var(--t-fila); color: var(--tx-2); font-weight: 500; }
.vacio__texto { font-size: var(--t-meta); max-width: 44ch; line-height: 1.55; }

/* Esqueletos en vez de spinner: la página aparece con su forma final. */
.esqueleto {
  background: linear-gradient(90deg, var(--sup-hundida) 25%,
    var(--sup-hover) 37%, var(--sup-hundida) 63%);
  background-size: 400% 100%;
  animation: brillo 1.4s ease-in-out infinite;
  border-radius: var(--r-chico);
}
@keyframes brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.esqueleto--titulo { height: 30px; width: 220px; }
.esqueleto--linea { height: 12px; }
.esqueleto--cifra { height: 34px; width: 110px; }
.esqueleto--grafico { height: 280px; border-radius: var(--r-medio); }

.error-caja {
  background: var(--sig-critico-bg); color: var(--sig-critico-tx);
  border-radius: var(--r-medio); padding: var(--e-4) var(--e-5);
  font-size: 13px; line-height: 1.6;
  display: flex; gap: var(--e-3); align-items: flex-start;
}
.error-caja code {
  font-family: var(--font-mono); font-size: 11.5px;
  background: rgba(0, 0, 0, .07); padding: 1px 5px; border-radius: 4px;
}

/* ═══════════════ 14. MENÚ MÓVIL Y VELO ════════════════════════ */

.menu-movil {
  display: none;
  position: fixed; top: var(--e-3); left: var(--e-3); z-index: 60;
  /* 44 px: objetivo táctil mínimo. Antes eran 38. */
  width: 44px; height: 44px; border-radius: var(--r-medio);
  background: var(--sup-1); box-shadow: var(--el-2);
  border: 1px solid var(--borde);
  place-items: center; color: var(--tx-1);
}
.velo {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 14, 13, .45);
  backdrop-filter: blur(1px);
}

/* ═════════════════════ 15. UTILIDADES ═════════════════════════ */

.fila { display: flex; align-items: center; gap: var(--e-3); }
.fila--sep { justify-content: space-between; }
.pila { display: flex; flex-direction: column; gap: var(--e-3); }
/* `.campo--busqueda` declara `flex: 1 1 250px` pensando en filas de controles,
   donde 250 px es un ANCHO base. Dentro de una pila el eje principal es el
   vertical, así que ese mismo valor se leía como alto y el buscador crecía a
   250 px absorbiendo todo el espacio sobrante del panel. Un campo de
   formulario nunca debe estirarse a lo alto. */
.pila > .campo { flex: 0 0 auto; }
.crece { flex: 1 1 auto; min-width: 0; }

/* Reglas comunes del sistema de iconos. El tamaño y el grosor los resuelve
   `icono()` en nucleo.js; acá solo va lo que depende del contexto de layout. */
.ico {
  flex: 0 0 auto;
  vertical-align: -.125em;   /* asienta el icono sobre la línea base del texto */
}
[disabled] .ico, :disabled .ico { color: var(--tx-3); }

/* ═════════════════ 16. SISTEMA DE DISEÑO ══════════════════════ */
/* Estilos propios de la vista que documenta el sistema. */

.sd-seccion { margin-bottom: var(--e-10); scroll-margin-top: var(--e-6); }
.sd-muestras { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.sd-rejilla-color {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--e-3);
}
.sd-color {
  border-radius: var(--r-medio); overflow: hidden;
  border: 1px solid var(--borde); background: var(--sup-1);
}
.sd-color__muestra { height: 54px; }
.sd-color__pie { padding: var(--e-2) var(--e-3); }
.sd-color__nombre { font-size: var(--t-meta); font-weight: 500; }
.sd-color__var { font-family: var(--font-mono); font-size: 10.5px; color: var(--tx-3); }

.sd-tipo { display: flex; flex-direction: column; gap: var(--e-4); }
.sd-tipo__fila {
  display: grid; grid-template-columns: 130px 1fr; gap: var(--e-4);
  align-items: baseline; padding-bottom: var(--e-3);
  border-bottom: 1px solid var(--borde);
}

.sd-ficha {
  border: 1px solid var(--borde); border-radius: var(--r-medio);
  padding: var(--e-4); background: var(--sup-1);
}
.sd-ficha__titulo {
  font-size: var(--t-meta); font-weight: 500;
  margin-bottom: var(--e-3); color: var(--tx-2);
}
.sd-nota-uso {
  font-size: var(--t-meta); color: var(--tx-2);
  line-height: 1.55; max-width: 74ch; margin: var(--e-2) 0 var(--e-4);
}
.sd-mal, .sd-bien {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-meta); font-weight: 500;
}
.sd-bien { color: var(--sig-positivo-tx); }
.sd-mal { color: var(--sig-critico-tx); }

.sd-indice {
  display: flex; flex-wrap: wrap; gap: var(--e-2);
  margin-bottom: var(--e-7);
}

.sd-elev {
  display: grid; place-items: center; height: 76px;
  background: var(--sup-1); border-radius: var(--r-medio);
  font-size: var(--t-meta); color: var(--tx-2);
}

/* ═══════════════════════ 17. MÓVIL ════════════════════════════ */

@media (max-width: 1120px) {
  .col-3 { grid-column: span 6; }
  .col-4, .col-5 { grid-column: span 6; }
}

@media (max-width: 980px) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
}

/* El corte del panel móvil coincide con el de portal.js (`esMovil`): si los dos
   valores se separan, el menú puede quedar oculto y sin botón que lo abra. */
@media (max-width: 860px) {
  .menu-movil { display: grid; }
  .velo[data-abierto="1"] { display: block; }
  .lateral {
    position: fixed; z-index: 55; left: 0; top: 0;
    width: min(288px, 84vw); flex-basis: auto;
    transform: translateX(-100%);
    transition: transform var(--m-vista) var(--m-curva);
    box-shadow: var(--el-3);
  }
  .lateral[data-abierto="1"] { transform: none; }
  /* Objetivos táctiles cómodos: en móvil se navega con el pulgar. */
  .nav__item { padding: 11px 12px; }
  .nav__titulo { padding: 10px 12px; }
  .boton-icono { width: 44px; height: 44px; }
  .envoltura { padding: 68px var(--e-4) var(--e-9); }

  /* Solo se reducen los niveles superiores de la escala. */
  :root { --t-pagina: 21px; --t-cifra: 26px; --t-bloque: 17px; }

  .rejilla { gap: var(--e-5); }
  .banda { grid-template-columns: 1fr 1fr; }
  .cifra { padding: var(--e-4); }
  .cifra:nth-child(odd) { border-left: none; }
  .cifra:nth-child(n+3) { border-top: 1px solid var(--borde); }
  .panel { padding: var(--e-4); }
  .tabla-caja { margin: 0; padding: 0; }
  .cabecera__acciones { margin-left: 0; width: 100%; }
  .controles { gap: var(--e-2); }
}

@media (max-width: 460px) {
  .banda { grid-template-columns: 1fr; }
  .cifra { border-left: none; }
  .cifra + .cifra { border-top: 1px solid var(--borde); }
  .sd-tipo__fila { grid-template-columns: 1fr; gap: var(--e-2); }
}

/* ═══════════════ 18. MOVIMIENTO REDUCIDO ══════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .esqueleto { animation: none; background: var(--sup-hundida); }
}

/* ═══════════════════════ 19. IMPRESIÓN ════════════════════════ */

@media print {
  .lateral, .menu-movil, .cabecera__acciones,
  .bloque__acciones, .controles, .zoom-aviso { display: none !important; }
  body { background: #fff; color: #000; }
  .panel, .banda { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .bloque { break-inside: avoid; }
  a::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
}

/* ═══════════ 20. COMPONENTES DE LAS VISTAS REDISEÑADAS ════════════ */

/* contenedor de un gráfico ECharts */
/* Envoltura del gráfico: lienzo del motor + pista de interacción.
   `figure`/`figcaption`, que es lo que son. */
.grafico {
  margin: 0; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.grafico-ec { width: 100%; min-width: 0; }
.grafico-ec:focus-visible { outline: 2px solid var(--marca); outline-offset: 3px; }

/* La pista del zoom era un `title` nativo sobre el área de datos: el globo del
   sistema tapaba el tooltip justo al leer valores. Acá es texto discreto,
   siempre visible y fuera del trazado. */
.grafico__pista {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--t-micro); color: var(--tx-3);
  letter-spacing: .01em;
}
@media (hover: none) {
  /* Sin ratón la pista no aplica: en táctil el zoom es por gesto. */
  .grafico__pista { display: none; }
}

/* ── selector buscable de entidades ── */

.selector { position: relative; min-width: min(100%, 340px); }
.selector__desplegable { position: relative; }
.selector__desplegable > summary { list-style: none; }
.selector__desplegable > summary::-webkit-details-marker { display: none; }
.selector__disparador {
  min-height: 46px; width: 100%; padding: 7px 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-medio);
  background: var(--sup-1); box-shadow: var(--el-1);
  transition: border-color var(--m-rapido), box-shadow var(--m-rapido),
    background var(--m-rapido);
}
.selector__disparador:hover { border-color: var(--borde-marca); background: var(--sup-hover); }
.selector__desplegable[open] > .selector__disparador {
  border-color: var(--marca); box-shadow: var(--el-foco); background: var(--sup-1);
}
.selector__rotulo { color: var(--tx-2); }
.selector__resumen {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--tx-1); font-size: var(--t-cuerpo); font-weight: 500;
}
.selector__resumen--vacio { color: var(--tx-3); font-weight: 400; }
.selector__conteo {
  min-width: 28px; padding: 2px 7px; border-radius: var(--r-pildora);
  background: var(--sup-hundida); color: var(--tx-2);
  font-size: var(--t-micro); text-align: center;
}
.selector__chevron {
  display: inline-flex; color: var(--tx-3);
  transition: transform var(--m-rapido);
}
.selector__desplegable[open] .selector__chevron { transform: rotate(180deg); }
.selector__menu {
  position: absolute; left: 0; top: calc(100% + 7px); z-index: 80;
  width: min(440px, calc(100vw - 48px)); padding: 12px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-grande);
  background: var(--sup-2); box-shadow: var(--el-3);
}
.selector__busqueda { width: 100%; margin-bottom: 10px; background: var(--sup-1); }
.selector__lista {
  max-height: min(390px, 48vh); overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--borde); border-radius: var(--r-medio);
  background: var(--sup-1); scrollbar-width: thin;
}
.selector__nivel + .selector__nivel { border-top: 1px solid var(--borde); }
.selector__nivel > summary { list-style: none; }
.selector__nivel > summary::-webkit-details-marker { display: none; }
.selector__grupo {
  position: sticky; top: 0; z-index: 2;
  min-height: 38px; padding: 8px 11px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--sup-hundida);
  border-bottom: 1px solid var(--borde);
  color: var(--tx-1); font-size: var(--t-meta); font-weight: 600;
  cursor: pointer;
}
.selector__grupo::before {
  content: '›'; color: var(--tx-3); margin-right: 6px;
  transition: transform var(--m-rapido);
}
.selector__nivel[open] > .selector__grupo::before { transform: rotate(90deg); }
.selector__grupo > span:first-child { flex: 1; }
.selector__grupo-conteo {
  color: var(--tx-3); font-size: var(--t-micro); font-weight: 500;
}
.selector__item {
  display: flex; align-items: center; gap: var(--e-2);
  width: 100%; min-height: 39px; padding: 7px 11px 7px 16px;
  font-size: var(--t-cuerpo); text-align: left;
  border-bottom: 1px solid var(--borde);
  transition: background var(--m-rapido);
}
.selector__item:last-child { border-bottom: none; }
.selector__item:hover:not([disabled]) { background: var(--sup-hover); }
.selector__item[disabled] { opacity: .45; cursor: not-allowed; }
.selector__item--sel { background: var(--marca-tenue); color: var(--marca); }
.selector__marca {
  position: relative; width: 16px; flex: 0 0 16px; display: grid; place-items: center;
  color: var(--marca);
}
.selector__marca::before {
  content: ''; width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid var(--borde-fuerte); position: absolute;
}
.selector__item--sel .selector__marca::before {
  border-color: var(--marca); background: var(--marca-suave);
}
.selector__marca .ico { position: relative; z-index: 1; }
.selector__codigo {
  color: var(--tx-3); font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
}
.selector__pie {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 10px; min-height: 28px;
}
.selector__seleccion {
  min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}

/* ── perfil ejecutivo de Fondos SAFI ── */

.perfil-fondo {
  overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--r-grande);
  background:
    radial-gradient(circle at 100% 0, var(--marca-suave), transparent 38%),
    var(--sup-1);
  box-shadow: var(--el-2);
}
.perfil-fondo__cabecera {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; border-bottom: 1px solid var(--borde);
}
.perfil-fondo__marca {
  width: 52px; height: 52px; flex: 0 0 52px;
  display: grid; place-items: center;
  border-radius: 16px; background: var(--marca); color: var(--sup-1);
  font-size: 18px; font-weight: 700; letter-spacing: .04em;
  box-shadow: var(--el-2);
}
.perfil-fondo__identidad { min-width: 0; flex: 1; }
.perfil-fondo__sobre { color: var(--marca); }
.perfil-fondo__nombre {
  margin-top: 3px; font-size: clamp(18px, 2vw, 24px); line-height: 1.2;
  overflow-wrap: anywhere;
}
.perfil-fondo__safi { margin-top: 5px; color: var(--tx-2); font-size: var(--t-meta); }
.perfil-fondo__chips {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px;
}
.perfil-fondo__cuerpo {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
}
.perfil-fondo__metricas {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
}
.perfil-fondo__metrica {
  min-width: 0; padding: 22px;
  border-right: 1px solid var(--borde);
}
.perfil-fondo__metrica-etiqueta { display: block; color: var(--tx-3); }
.perfil-fondo__metrica-valor {
  display: block; margin-top: 8px;
  font-size: clamp(19px, 2.1vw, 28px); line-height: 1.1;
  overflow-wrap: anywhere;
}
.perfil-fondo__metrica--principal .perfil-fondo__metrica-valor { color: var(--marca); }
.perfil-fondo__metrica-sub {
  display: block; margin-top: 7px; color: var(--tx-2);
  font-size: var(--t-meta); line-height: 1.35;
}
.perfil-fondo__rendimientos {
  padding: 18px 22px; background: color-mix(in srgb, var(--sup-hundida) 56%, transparent);
}
.perfil-fondo__rendimientos-titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 13px;
}
.perfil-fondo__tasas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.perfil-fondo__tasa {
  min-width: 0; padding: 11px 10px;
  border: 1px solid var(--borde); border-radius: var(--r-medio);
  background: var(--sup-1);
}
.perfil-fondo__tasa-plazo { display: block; color: var(--tx-2); font-size: var(--t-meta); }
.perfil-fondo__tasa-valor { display: block; margin-top: 4px; font-size: 16px; }
.perfil-fondo__tasa-fecha { display: block; margin-top: 2px; min-height: 16px; }
.perfil-fondo__tasa-pista {
  display: block; height: 3px; margin-top: 9px;
  overflow: hidden; border-radius: 3px; background: var(--sup-hundida);
}
.perfil-fondo__tasa-pista > span {
  display: block; height: 100%; border-radius: inherit; background: var(--marca);
}
.perfil-fondo__pie {
  display: flex; flex-wrap: wrap; gap: 18px 34px;
  padding: 12px 22px; border-top: 1px solid var(--borde);
  color: var(--tx-2); font-size: var(--t-meta);
}
.perfil-fondo__pie strong { color: var(--tx-1); font-weight: 600; }
.tabla-reporte--safi { max-height: 620px; }
.tabla-reporte--safi .tabla { min-width: 640px; }
.tabla-reporte--safi .tabla th:first-child,
.tabla-reporte--safi .tabla td:first-child { min-width: 420px; }
.tabla-reporte--safi .cuenta-codigo { display: block; margin: 2px 0 0 22px; }
.perfil-safi__grafico { display: flex; min-width: 0; }
.perfil-safi__grafico > .panel {
  width: 100%; height: 100%; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.perfil-safi__grafico .grafico { margin-top: auto; }

@media (max-width: 1120px) {
  .perfil-fondo__cuerpo { grid-template-columns: 1fr; }
  .perfil-fondo__metricas { border-bottom: 1px solid var(--borde); }
  .perfil-fondo__tasas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .perfil-fondo__cabecera { align-items: flex-start; flex-wrap: wrap; }
  .perfil-fondo__chips { width: 100%; justify-content: flex-start; }
  .perfil-fondo__metricas { grid-template-columns: 1fr; }
  .perfil-fondo__metrica { border-right: none; border-bottom: 1px solid var(--borde); }
  .perfil-fondo__tasas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ranking por subsistema ── */

.ranking { table-layout: fixed; }
.ranking thead th {
  padding: 10px 12px; color: var(--tx-2); background: var(--sup-hundida);
  border-bottom: 1px solid var(--borde-fuerte); letter-spacing: .07em;
}
.ranking tbody td {
  height: calc(38px * var(--densidad)); padding: 10px 12px;
  color: var(--tx-1); background: var(--sup-1);
}
.ranking tbody tr:hover td { background: var(--sup-hover); }
.ranking .tabla__nombre > span:first-child {
  overflow: visible; white-space: normal; line-height: 1.3;
}
.ranking td.der { font-weight: 600; }
.ranking__barra-col { width: 34%; min-width: 90px; }
.ranking__barra {
  display: block; height: 6px; border-radius: 4px;
  background: var(--sup-hundida); overflow: hidden;
}
.ranking__relleno {
  display: block; height: 100%; border-radius: 4px;
  background: var(--marca-suave);
  transition: width var(--m-normal) var(--m-curva);
}
tr.destacada .ranking__relleno { background: var(--marca); }

/* resumen explícito al seleccionar una fila: el ranking no toca el gráfico */
.resumen-fila {
  margin-top: var(--e-4); padding: var(--e-4);
  background: var(--sup-hundida); border-radius: var(--r-medio);
  display: flex; flex-direction: column; gap: var(--e-3);
}
.resumen-fila__cab {
  display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: baseline;
}
.resumen-fila__datos { display: flex; flex-wrap: wrap; gap: var(--e-4); }

/* ── alternativa tabular de un gráfico ── */

.alternativa { margin-top: var(--e-4); }
.alternativa > summary {
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-meta); color: var(--tx-2);
  padding: var(--e-2) 0;
}
.alternativa > summary:hover { color: var(--marca); }
.alternativa[open] > summary { margin-bottom: var(--e-2); }

/* ── rejilla de rankings paralelos ── */

.rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); align-items: start; }

@media (max-width: 980px) {
  .rankings { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* Móvil reorganiza, no comprime: los rankings se apilan y la barra baja de línea. */
  .ranking__barra-col { display: none; }
  .selector__menu { position: fixed; left: 12px; right: 12px; top: 72px; width: auto; }
  .selector__lista { max-height: min(58vh, 420px); }
  .resumen-fila { padding: var(--e-3); }
}

/* ── Cambiario ──────────────────────────────────────────────────── */

.regimen {
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:16px;
  align-items:center; margin:0; padding:17px 20px;
  border:1px solid color-mix(in srgb,var(--marca) 28%,var(--borde));
  border-radius:var(--r-grande);
  background:
    radial-gradient(circle at 94% 5%,color-mix(in srgb,var(--marca) 13%,transparent),transparent 34%),
    linear-gradient(135deg,color-mix(in srgb,var(--marca) 7%,var(--sup-1)),var(--sup-1));
}
.regimen__icono {
  width:42px; height:42px; display:grid; place-items:center; border-radius:12px;
  color:var(--marca); background:color-mix(in srgb,var(--marca) 12%,var(--sup-1));
  border:1px solid color-mix(in srgb,var(--marca) 20%,transparent);
}
.regimen__texto { display:grid; gap:3px; min-width:0; }
.regimen__texto strong { font-size:1rem; font-weight:650; }
.regimen__texto p {
  margin:1px 0 0; color:var(--tx-2); font-size:.82rem; line-height:1.45;
}
.cambiario__selector { min-width:min(360px,100%); }
.cambiario__selector select { min-width:260px; }
.cambiario__graficos-pares { align-items:stretch; }
.cambiario__graficos-pares > .panel { height:100%; }
.banda--cambiario { grid-template-columns:repeat(5,minmax(0,1fr)); }
.banda--cambiario .cifra { padding-inline:18px; }
.banda--cambiario .cifra__unidad { white-space:nowrap; }
/* El tamaño de la cifra lo decide el sistema, no la vista.
   Había acá un `font-size: clamp(24px,2.25vw,32px)` que venía de cuando la
   banda eran cinco cifras iguales que había que encoger para que entraran.
   Al declararse una protagonista, ese override le ganaba por orden de cascada
   y las cinco volvían a verse del mismo tamaño. */

/* La ficha de entidad de Cambiario usaba `.ficha-entidad__*`, un sistema propio
   con degradado, borde de marca y su propia retícula de métricas. Quedó
   reemplazada por `.ficha` del núcleo, compartida con el resto del Portal. */

/* El selector de entidad va sobre la ficha, que es lo que cambia al elegir. */
.cambiario__selector-fila { display:flex; margin-bottom:var(--e-4); }

@media (max-width:1100px) {
  .banda--cambiario { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .regimen { grid-template-columns:auto 1fr; padding:15px; }
  .regimen > .chip { grid-column:1/-1; justify-self:start; }
  .cambiario__selector, .cambiario__selector select { width:100%; min-width:0; }
  .cambiario__selector-fila { width:100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INFLACIÓN Y PRECIOS
   ═══════════════════════════════════════════════════════════════════════════ */

.precios__metodo {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin:6px 0 18px;
  padding:17px 20px;
  border:1px solid color-mix(in srgb,var(--marca) 28%,var(--borde));
  border-radius:var(--r-grande);
  background:
    radial-gradient(circle at 94% 5%,color-mix(in srgb,var(--marca) 13%,transparent),transparent 34%),
    linear-gradient(135deg,color-mix(in srgb,var(--marca) 7%,var(--sup-1)),var(--sup-1));
}
.precios__metodo-icono {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:var(--marca);
  background:color-mix(in srgb,var(--marca) 12%,var(--sup-1));
  border:1px solid color-mix(in srgb,var(--marca) 20%,transparent);
}
.precios__metodo-texto { display:grid; gap:2px; min-width:0; }
.precios__metodo-texto strong { font-size:1rem; font-weight:650; }
.precios__metodo-texto > span:last-child {
  color:var(--tx-2);
  font-size:var(--t-meta);
}

.precios__rankings,
.precios__mapa-grid { align-items:stretch; }
.precios__rankings > .panel,
.precios__mapa-grid > .panel { height:100%; }

/* ── Sector Externo ────────────────────────────────────────────────────── */
.comex__metodologia {
  display:grid;
  grid-template-columns:minmax(190px,.75fr) minmax(190px,.75fr) minmax(280px,1.5fr);
  gap:var(--e-5);
  align-items:center;
  margin-bottom:var(--e-6);
  padding:var(--e-4) var(--e-5);
  border:1px solid var(--borde);
  border-radius:var(--r-medio);
  background:linear-gradient(120deg,var(--sup-hundida),var(--superficie));
}
.comex__metodologia > div { display:flex; flex-direction:column; gap:4px; }
.comex__metodologia strong { font-size:var(--t-fila); font-weight:500; }
.comex__metodologia p {
  margin:0;
  color:var(--tx-2);
  font-size:var(--t-meta);
  line-height:1.5;
}
.comex__pares > .panel { height:100%; min-width:0; }
.comex__territorio-grid { align-items:stretch; }
.comex__territorio-grid > .panel { height:100%; min-width:0; }

/* Pareja gráfico + tabla: la tabla manda la altura y el gráfico queda con un
   vacío abajo tan alto como filas tenga la tabla. Se limita la tabla a la
   altura del gráfico —el paso «protagonista» de la escala— y se le da su propia
   barra de desplazamiento. La cabecera ya es `sticky`, así que al desplazar se
   sigue sabiendo qué columna se está leyendo. */
.comex__pares .tabla-caja,
.comex__territorio-grid .tabla-caja {
  max-height:410px;
  overflow:auto;
  overscroll-behavior:contain;
}
/* Cuando la tabla lleva buscador encima, ese control le suma alto al panel y
   la pareja vuelve a descuadrarse. El tope baja lo que ocupa el buscador para
   que los dos paneles cierren a la misma altura. */
.comex__pares .comex__buscar + div .tabla-caja,
.comex__territorio-grid .comex__buscar + div .tabla-caja { max-height:350px; }
.comex__pares .tabla-caja::-webkit-scrollbar,
.comex__territorio-grid .tabla-caja::-webkit-scrollbar { width:8px; height:8px; }
.comex__territorio-aviso {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin:6px 0 var(--e-5);
  padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--marca) 24%,var(--borde));
  border-radius:var(--r-medio);
  color:var(--tx-2);
  background:color-mix(in srgb,var(--marca) 6%,var(--superficie));
}
.comex__territorio-aviso > .ico { margin-top:2px; color:var(--marca); }
.comex__territorio-aviso > div { display:grid; gap:3px; min-width:0; }
.comex__territorio-aviso strong { color:var(--tx-1); font-size:var(--t-fila); }
.comex__territorio-aviso span {
  font-size:var(--t-meta);
  line-height:1.5;
}
.comex__buscar { width:min(100%,360px); margin-bottom:var(--e-3); }
.comex__buscar input { min-width:0; width:100%; }
/* Catálogo de productos del IPC: son cientos de filas y sin tope la tabla
   ocupaba varias pantallas. La cabecera ya es `sticky`, así que al desplazar
   se sigue sabiendo qué columna se está leyendo. */
.precios__catalogo .tabla-caja {
  max-height:560px;
  overflow:auto;
  overscroll-behavior:contain;
}
.precios__catalogo .tabla-caja::-webkit-scrollbar { width:8px; height:8px; }

.precios__alcance { margin-bottom:18px; }
.banda--precios { grid-template-columns:repeat(5,minmax(0,1fr)); }
.banda--precios .cifra { padding-inline:18px; }
.banda--precios .cifra__valor { font-size:clamp(23px,2.1vw,31px); }

.precios__destacados {
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.precios__destacados-grupo {
  display:grid;
  gap:2px;
  min-width:0;
}
.precios__destacados-grupo > .versalita {
  margin-bottom:7px;
  color:var(--tx-2);
}
.precios__producto-linea {
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  min-height:33px;
  padding:5px 0;
  border-bottom:1px solid var(--borde);
  font-size:var(--t-meta);
}
.precios__producto-linea:last-child { border-bottom:0; }
.precios__producto-linea strong { font-weight:600; white-space:nowrap; }
.precios__producto-pos {
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--tx-2);
  background:var(--sup-hundida);
  font-size:10px;
}
.precios__destacados-grupo--sube strong { color:var(--sig-critico-tx); }
.precios__destacados-grupo--baja strong { color:var(--sig-positivo-tx); }

.precios__cobertura {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin:6px 0 20px;
  padding:18px 20px;
  border:1px solid var(--borde);
  border-radius:var(--r-grande);
  background:var(--sup-1);
  box-shadow:var(--el-1);
}
.precios__cobertura-cifra {
  color:var(--marca);
  font-size:clamp(24px,2.4vw,34px);
  font-weight:700;
  letter-spacing:-.035em;
}
.precios__cobertura-texto { display:grid; gap:4px; min-width:0; }
.precios__cobertura-texto strong { font-size:.95rem; }
.precios__cobertura-texto span {
  color:var(--tx-2);
  font-size:var(--t-meta);
  line-height:1.45;
}

/* Monitor minorista: una quinta lectura de Precios, con navegación interna y
   contratos diferidos por sucursal/categoría. */
.minorista__navegacion {
  display:flex;
  margin:2px 0 var(--e-5);
}
.minorista__filtros {
  justify-content:flex-end;
  flex-wrap:wrap;
}
.minorista__filtros .campo select { max-width:320px; }
.minorista__alcance { margin-bottom:var(--e-5); }
.banda--minorista { grid-template-columns:repeat(4,minmax(0,1fr)); }
.banda--minorista .cifra { min-width:0; }
.minorista__buscar { width:min(100%,460px); }
.minorista__buscar input { width:100%; min-width:0; }
.minorista__contador { color:var(--tx-2); font-size:var(--t-meta); }
.minorista__resultados .tabla-caja {
  max-height:none;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
}
.minorista__resultados .tabla { min-width:820px; table-layout:fixed; }
.minorista__resultados .tabla th:first-child,
.minorista__resultados .tabla td:first-child { min-width:280px; }
.minorista__resultados .tabla td:first-child { line-height:1.35; }
.minorista__resultados .tabla th:nth-child(1),
.minorista__resultados .tabla td:nth-child(1) { width:34%; }
.minorista__resultados .tabla th:nth-child(2),
.minorista__resultados .tabla td:nth-child(2) { width:18%; }
.minorista__resultados .tabla th:nth-child(3),
.minorista__resultados .tabla td:nth-child(3) { width:12%; }
.minorista__resultados .tabla th:nth-child(4),
.minorista__resultados .tabla td:nth-child(4) { width:13%; }
.minorista__resultados .tabla th:nth-child(5),
.minorista__resultados .tabla td:nth-child(5) { width:10%; }
.minorista__resultados .tabla th:nth-child(6),
.minorista__resultados .tabla td:nth-child(6) { width:13%; }
.minorista__resultados .tabla-caja::-webkit-scrollbar { width:8px; height:8px; }
.minorista__paginacion {
  display:flex;
  justify-content:flex-end;
  gap:var(--e-2);
  padding-top:var(--e-3);
}

@media (max-width:1100px) {
  .banda--precios { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .banda--minorista { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .precios__rankings > .col-4 { grid-column:span 12; }
  .precios__mapa-grid > .col-7,
  .precios__mapa-grid > .col-5 { grid-column:span 12; }
  .comex__territorio-grid > .col-7,
  .comex__territorio-grid > .col-5 { grid-column:span 12; }
  .comex__metodologia { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  .banda--precios { grid-template-columns:1fr; }
  .banda--minorista { grid-template-columns:1fr; }
  .minorista__navegacion { overflow-x:auto; padding-bottom:4px; }
  .minorista__filtros { justify-content:flex-start; width:100%; }
  .minorista__filtros .campo { width:100%; }
  .minorista__filtros .campo select { width:100%; max-width:none; }
  .precios__metodo,
  .precios__cobertura { grid-template-columns:auto 1fr; padding:15px; }
  .precios__metodo > .chip,
  .precios__cobertura > .chip { grid-column:1/-1; justify-self:start; }
  .precios__cobertura-cifra { align-self:start; }
}
/* Finanzas públicas */
.fiscal-notas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fiscal-notas p{margin:0;padding:16px;border:1px solid var(--borde);border-radius:12px;background:var(--sup-1);color:var(--tx-2);line-height:1.5}
.fiscal-arbol{display:grid;gap:6px;max-height:460px;overflow:auto;padding-right:4px}
.fiscal-arbol__grupo{border:1px solid var(--borde);border-radius:10px;background:var(--sup-1)}
.fiscal-arbol__grupo summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:11px 13px;cursor:pointer;list-style-position:inside}
.fiscal-arbol__grupo summary span{color:var(--tx-2);font-variant-numeric:tabular-nums;text-align:right}
.fiscal-arbol__filas{border-top:1px solid var(--borde);padding:3px 13px 8px 31px}
.fiscal-arbol__subgrupo{border-bottom:1px solid color-mix(in srgb,var(--borde) 55%,transparent)}
.fiscal-arbol__subgrupo summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:8px 0;cursor:pointer}
.fiscal-arbol__subgrupo>.fiscal-arbol__filas{padding:0 0 7px 20px;border-top:0}
.fiscal-arbol__fila{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--borde) 55%,transparent);font-size:12px}
.fiscal-arbol__fila:last-child{border-bottom:0}
.fiscal-arbol__fila strong{font-weight:500;font-variant-numeric:tabular-nums}
@media(max-width:760px){.fiscal-notas{grid-template-columns:1fr}.fiscal-arbol{max-height:none}}

/* ═══════════════════════ ACTIVIDAD ECONÓMICA ═══════════════════════ */
.actividad__resultado-sectorial,
.actividad__pib-amplio { align-items:start; }
.actividad__ranking-amplio .grafico-ec { min-height:450px; }
.actividad__tabla-sectorial .tabla-caja {
  max-height:430px;
  overflow:auto;
  overscroll-behavior:contain;
}
.actividad__tabla-sectorial .tabla-caja::-webkit-scrollbar { width:8px; height:8px; }

.actividad-senales__familias {
  display:flex;
  align-items:center;
  margin:-8px 0 18px;
}
.actividad-senales__familias .segmentado { width:min(100%,520px); }
.actividad-senales__familias .segmentado button { flex:1 1 0; }
.actividad-senales__contexto {
  display:grid;
  grid-template-columns:minmax(300px,1.05fr) minmax(420px,.95fr);
  gap:28px;
  align-items:center;
  padding:22px 24px;
  border:1px solid var(--borde-marca);
  border-radius:var(--r-grande);
  background:linear-gradient(120deg,var(--marca-tenue),var(--sup-1) 62%);
  box-shadow:var(--el-2);
}
.actividad-senales__identidad { display:grid; gap:6px; min-width:0; }
.actividad-senales__identidad h2 {
  font-size:clamp(21px,2.3vw,28px);
  font-weight:620;
  letter-spacing:-.025em;
  line-height:1.1;
}
.actividad-senales__identidad p {
  margin:0;
  color:var(--tx-1);
  font-size:13px;
  line-height:1.45;
}
.actividad-senales__identidad small {
  max-width:72ch;
  color:var(--tx-2);
  font-size:10.5px;
  line-height:1.5;
}
.actividad-senales__controles {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  min-width:0;
  padding-left:22px;
  border-left:1px solid var(--borde);
}
.actividad-senales__control { display:grid; gap:6px; min-width:0; }
.actividad-senales__control .segmentado { width:100%; }
.actividad-senales__control .segmentado button { flex:1 1 auto; }
.actividad-senales__lectura {
  color:var(--marca);
  font-size:10.5px;
  font-weight:600;
}
.actividad-senales__contexto + .banda { grid-template-columns:repeat(3,minmax(0,1fr)); }
.actividad-senales__ranking .grafico-ec { min-height:300px; }

@media(max-width:980px) {
  .actividad-senales__contexto { grid-template-columns:1fr; gap:20px; }
  .actividad-senales__controles { padding:18px 0 0; border-top:1px solid var(--borde); border-left:0; }
}
@media(max-width:720px) {
  .actividad-senales__familias { margin-top:-4px; }
  .actividad-senales__familias .segmentado { width:100%; }
  .actividad-senales__contexto { padding:18px; }
  .actividad-senales__contexto + .banda { grid-template-columns:1fr; }
  .actividad-senales__contexto + .banda .cifra { border-top:1px solid var(--borde); border-left:0; }
  .actividad-senales__contexto + .banda .cifra:first-child { border-top:0; }
  .actividad-senales__control .segmentado { display:grid; grid-template-columns:1fr; }
}

/* ═══════════════════════════════ BBV ═══════════════════════════════ */
.bbv-grid{display:grid;gap:var(--e-6);align-items:start}
.bbv-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bbv-grid--catalogo{grid-template-columns:minmax(330px,.8fr) minmax(620px,1.7fr)}
.bbv-aviso{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;align-items:start;margin:0 0 22px;padding:15px 18px;border-left:4px solid var(--marca);border-radius:0 12px 12px 0;background:linear-gradient(90deg,var(--marca-tenue),var(--sup-1));color:var(--tx-2);font-size:13px;line-height:1.5}
.bbv-aviso strong{color:var(--tx-1);font-size:13px;white-space:nowrap}
.bbv-filtros{display:grid;grid-template-columns:1fr 1.4fr .75fr;gap:12px;margin:0 0 18px;padding:14px 16px;border:1px solid var(--borde);border-radius:14px;background:var(--sup-1);box-shadow:var(--el-1)}
.bbv-grid .panel{min-width:0;height:100%}
.banda--bbv .cifra__valor{font-size:clamp(22px,2.2vw,32px)}
.bbv-grid .tabla-caja{max-height:470px;overflow:auto}
.bbv-grid--catalogo>.panel:first-child .grafico-ec{min-height:470px}

@media(max-width:1100px){
  .bbv-grid--catalogo{grid-template-columns:1fr}
  .bbv-filtros{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
  .bbv-grid--2,.bbv-filtros{grid-template-columns:1fr}
  .bbv-aviso{grid-template-columns:1fr;gap:4px}
  .bbv-aviso strong{white-space:normal}
}

.fiscal-alcance{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 18px;border:1px solid var(--borde);border-radius:12px;background:linear-gradient(115deg,var(--marca-tenue),var(--sup-1) 64%)}
.fiscal-alcance>strong,.fiscal-alcance>div strong{display:block;color:var(--tx-1);font-size:14px;font-weight:650}
.fiscal-alcance>span,.fiscal-alcance>div span{display:block;margin-top:3px;color:var(--tx-2);font-size:11px}
.fiscal-alcance--filtros{align-items:center}
.fiscal-alcance--filtros>.controles{justify-content:flex-end;flex:0 1 auto;flex-wrap:wrap}
.fiscal-alcance--filtros>.controles .campo{min-width:170px}
.fiscal-alcance--deuda{align-items:flex-start}
.fiscal-alcance--deuda>p{max-width:68ch;margin:0;color:var(--tx-2);font-size:12px;line-height:1.55}
.fiscal-tabla-panel{display:flex;min-height:100%;flex-direction:column}
.fiscal-tabla-panel>.tabla-caja{max-height:470px;overflow:auto}
.fiscal-arbol--presupuesto{max-height:470px}
.fiscal-arbol--presupuesto .fiscal-arbol__grupo summary strong{color:var(--tx-1);font-size:12px}
.fiscal-arbol--presupuesto .fiscal-arbol__fila span{color:var(--tx-1)}
.fiscal-arbol--presupuesto .fiscal-arbol__fila strong{color:var(--tx-2)}
.bloque:has(.fiscal-alcance)+.banda{margin-top:calc(var(--e-6) * -1);margin-bottom:var(--e-9)}
@media(max-width:900px){.fiscal-alcance,.fiscal-alcance--deuda{align-items:flex-start;flex-direction:column}.fiscal-alcance--filtros>.controles{justify-content:flex-start;width:100%}.bloque__acciones>.controles{align-items:stretch;flex-direction:column}}

.fiscal-territorio__contexto{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:20px 22px;border:1px solid var(--borde);border-radius:16px;background:linear-gradient(125deg,var(--sup-1),var(--marca-tenue));box-shadow:var(--el-1)}
.fiscal-territorio__identidad{display:grid;gap:4px;min-width:230px}
.fiscal-territorio__identidad strong{font-size:22px;font-weight:600;letter-spacing:-.02em}
.fiscal-territorio__identidad>span:last-child{color:var(--tx-2);font-size:12px}
.fiscal-territorio__filtros{justify-content:flex-end}
.fiscal-territorio__navegacion{position:sticky;top:0;z-index:8;margin:10px 0 26px;padding:8px;border:1px solid var(--borde);border-radius:12px;background:color-mix(in srgb,var(--sup-0) 92%,transparent);backdrop-filter:blur(12px)}
.fiscal-territorio__navegacion .segmentado{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;border-radius:10px}
.fiscal-territorio__navegacion .segmentado button{min-height:34px;padding:6px 9px;white-space:normal;line-height:1.2}

.fiscal-comparador{overflow:hidden;margin-bottom:26px;border:1px solid var(--borde);border-radius:16px;background:var(--sup-1);box-shadow:var(--el-2)}
.fiscal-comparador__cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:22px 24px 18px;background:linear-gradient(115deg,var(--marca-tenue),var(--sup-1) 64%)}
.fiscal-comparador__cabecera>div:first-child{display:grid;gap:6px;max-width:760px}
.fiscal-comparador__cabecera h2{margin:0;font-size:24px;font-weight:650;letter-spacing:-.025em;line-height:1.15}
.fiscal-comparador__cabecera p{margin:0;color:var(--tx-2);font-size:12px;line-height:1.5}
.fiscal-comparador__unidad{display:grid;flex:0 0 auto;gap:3px;text-align:right}
.fiscal-comparador__unidad span{color:var(--tx-3);font-size:9px;font-weight:650;letter-spacing:.07em;text-transform:uppercase}
.fiscal-comparador__unidad strong{color:var(--marca);font-size:12px;font-weight:600}
.fiscal-comparador__filtros{display:grid;grid-template-columns:1fr 1.55fr 1fr .72fr;gap:10px;padding:14px 16px;border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);background:var(--sup-hundida)}
.fiscal-comparador__filtros .campo{min-width:0;background:var(--sup-1)}
.fiscal-comparador__kpis{display:grid;grid-template-columns:1.18fr repeat(3,1fr)}
.fiscal-comparador__kpi{position:relative;display:grid;align-content:center;min-height:112px;padding:17px 20px;border-right:1px solid var(--borde)}
.fiscal-comparador__kpi:last-child{border-right:0}
.fiscal-comparador__kpi span{color:var(--tx-2);font-size:10px;font-weight:650;letter-spacing:.055em;text-transform:uppercase}
.fiscal-comparador__kpi strong{margin:7px 0 4px;font-size:24px;font-weight:620;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.fiscal-comparador__kpi small{color:var(--tx-2);font-size:10px}
.fiscal-comparador__kpi--principal{background:linear-gradient(125deg,var(--marca-tenue),transparent)}
.fiscal-comparador__kpi--principal::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--marca)}

.fiscal-territorio__navegacion~.bloque .panel{display:flex;min-height:100%;flex-direction:column;border:1px solid var(--borde);box-shadow:var(--el-1)}
.fiscal-territorio__navegacion~.bloque .panel__cabecera{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:4px 12px;min-height:48px;margin-bottom:12px}
.fiscal-territorio__navegacion~.bloque .panel__titulo{font-size:14px;font-weight:650;letter-spacing:-.012em;line-height:1.25}
.fiscal-territorio__navegacion~.bloque .panel__sub{grid-column:1/-1;color:var(--tx-2);font-size:10.5px;font-weight:450;line-height:1.4}
.fiscal-territorio__navegacion~.bloque .panel>.grafico{margin-top:auto}

.fiscal-indicador{display:grid;grid-template-columns:minmax(260px,.8fr) 2fr;gap:18px;padding:18px;border:1px solid var(--borde);border-radius:14px;background:var(--sup-hundida)}
.fiscal-indicador__ficha{display:grid;align-content:center;gap:7px;padding:4px 12px 4px 2px;border-right:1px solid var(--borde)}
.fiscal-indicador__ficha strong{font-size:18px;font-weight:600;line-height:1.2}
.fiscal-indicador__ficha p{margin:0;color:var(--tx-2);font-size:12px;line-height:1.45}
.fiscal-indicador__unidad{color:var(--marca);font-size:11px;font-weight:600}
.fiscal-indicador__cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fiscal-indicador__cifras>div{display:grid;align-content:center;gap:4px;padding:13px;border:1px solid var(--borde);border-radius:10px;background:var(--sup-1)}
.fiscal-indicador__cifras span{color:var(--tx-3);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.fiscal-indicador__cifras strong{font-size:14px;font-weight:600}
.fiscal-indicador__cifras small{color:var(--tx-2);font-size:10px}

.fiscal-perfil{overflow:hidden;border:1px solid var(--borde);border-radius:16px;background:var(--sup-1);box-shadow:var(--el-2)}
.fiscal-perfil__cabecera{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:20px 22px 16px;border-bottom:1px solid var(--borde);background:linear-gradient(110deg,var(--marca-tenue),var(--sup-1))}
.fiscal-perfil__cabecera h2{margin:5px 0 0;font-size:23px;font-weight:600;letter-spacing:-.025em}
.fiscal-perfil__corte{color:var(--tx-2);font-size:11px}
.fiscal-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.fiscal-kpis--flujo{grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid var(--borde);border-radius:var(--r-grande);background:var(--sup-1);box-shadow:var(--el-2)}
.fiscal-kpis--flujo .fiscal-kpi{min-height:132px;border-bottom:0}
.fiscal-kpis--flujo .fiscal-kpi:nth-child(3){border-right:0}
.fiscal-kpis--flujo .fiscal-kpi__valor{font-size:clamp(27px,2.4vw,36px)}
.fiscal-kpi--resultado.fiscal-kpi--positivo{background:linear-gradient(125deg,var(--sig-positivo-bg),transparent 78%)}
.fiscal-kpi--resultado.fiscal-kpi--critico{background:linear-gradient(125deg,var(--sig-critico-bg),transparent 78%)}
.fiscal-kpi__estado{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.fiscal-kpi__estado--positivo{background:var(--sig-positivo-bg);color:var(--sig-positivo-tx)}
.fiscal-kpi__estado--critico{background:var(--sig-critico-bg);color:var(--sig-critico-tx)}
.fiscal-kpi{position:relative;display:grid;align-content:space-between;min-height:116px;padding:15px 17px;border-right:1px solid var(--borde);border-bottom:1px solid var(--borde);background:var(--sup-1)}
.fiscal-kpi:nth-child(4n){border-right:0}
.fiscal-kpi:nth-last-child(-n+4){border-bottom:0}
.fiscal-kpi::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--marca)}
.fiscal-kpi--positivo::before{background:var(--sig-positivo)}
.fiscal-kpi--critico::before{background:var(--sig-critico)}
.fiscal-kpi__etiqueta{padding-left:3px;color:var(--tx-2);font-size:10px;font-weight:600;letter-spacing:.055em;text-transform:uppercase}
.fiscal-kpi__valor{font-size:25px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fiscal-kpi__pie{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--tx-3);font-size:10px}
.fiscal-kpi__pie .positivo{color:var(--sig-positivo-tx);font-weight:600}
.fiscal-kpi__pie .negativo{color:var(--sig-critico-tx);font-weight:600}
.fiscal-cierre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;margin-bottom:24px;border:1px solid var(--borde);border-radius:14px;background:var(--sup-1)}
.fiscal-cierre .fiscal-kpi{border-bottom:0}
.fiscal-cierre .fiscal-kpi:last-child{border-right:0}

.fiscal-lectura{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:18px;margin:0 0 22px;padding:16px 18px;border-left:4px solid var(--marca);border-radius:0 12px 12px 0;background:linear-gradient(90deg,var(--marca-tenue),var(--sup-1));box-shadow:var(--el-1)}
.fiscal-lectura .versalita{padding-top:3px;color:var(--marca);white-space:nowrap}
.fiscal-lectura p{margin:0;color:var(--tx-2);font-size:13px;line-height:1.55}
.fiscal-matriz{overflow:hidden;border:1px solid var(--borde);border-radius:13px;background:var(--sup-1)}
.fiscal-matriz__utilidades{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 13px;border-bottom:1px solid var(--borde);background:var(--sup-hundida)}
.fiscal-matriz__utilidades>div:first-child{display:flex;align-items:center;gap:10px;color:var(--tx-3);font-size:11px}
.boton--xs{min-height:28px;padding:5px 8px;font-size:10px}
.fiscal-matriz__caja{max-height:690px;margin:0;overflow:auto}
.fiscal-matriz__tabla{min-width:1320px;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.fiscal-matriz__tabla th,.fiscal-matriz__tabla td{padding:9px 10px;border-right:1px solid color-mix(in srgb,var(--borde) 65%,transparent);border-bottom:1px solid var(--borde);color:var(--tx-1);font-size:11px;white-space:nowrap}
.fiscal-matriz__tabla thead th{position:sticky;top:0;z-index:4;background:var(--tabla-cab);color:var(--tabla-cab-tx);font-size:9px;font-weight:650;letter-spacing:.075em;text-transform:uppercase}
.fiscal-matriz__tabla th:first-child,.fiscal-matriz__tabla td:first-child{position:sticky;left:0;z-index:2;width:330px;min-width:330px;max-width:330px;white-space:normal}
.fiscal-matriz__tabla thead th:first-child{z-index:6;background:var(--tabla-cab)}
.fiscal-matriz__tabla td:first-child{background:var(--sup-1);box-shadow:8px 0 16px -16px rgba(10,24,21,.45)}
.fiscal-matriz__tabla tbody:last-child tr:last-child td{border-bottom:0}
.fiscal-matriz__tabla tbody tr:hover td,.fiscal-matriz__tabla tbody tr:hover td:first-child{background:var(--sup-hover)}
.fiscal-matriz__raiz td{font-weight:620;background:var(--sup-hundida)}
.fiscal-matriz__raiz td:first-child{background:var(--sup-hundida)}
.fiscal-matriz__nivel-2 td:first-child>span{display:block;padding-left:30px;color:var(--tx-1);font-weight:500}
.fiscal-matriz__nivel-3 td:first-child>span{display:block;padding-left:51px;color:var(--tx-2);font-size:10.5px}
.fiscal-matriz__toggle{display:flex;width:100%;align-items:center;gap:9px;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.fiscal-matriz__toggle>span{display:grid;width:18px;height:18px;flex:0 0 18px;place-items:center;border:1px solid var(--borde-fuerte);border-radius:5px;color:var(--marca);font-size:13px;line-height:1}
.fiscal-matriz__toggle strong{overflow:hidden;text-overflow:ellipsis;font:inherit}
.fiscal-matriz__grupo--contraido .fiscal-matriz__hija{display:none}
.fiscal-matriz__cuota{display:inline-flex;min-width:48px;justify-content:center;padding:3px 6px;border-radius:999px;background:var(--marca-tenue);color:var(--marca);font-size:10px;font-weight:650}
.fiscal-matriz__fila--acento td,.fiscal-matriz__fila--acento td:first-child{color:var(--marca);background:color-mix(in srgb,var(--marca-tenue) 70%,var(--sup-1))}
.fiscal-matriz__fila--resultado td{font-weight:650;border-top:1px solid var(--borde-fuerte)}
.fiscal-matriz__fila--total td,.fiscal-matriz__fila--total td:first-child{font-weight:700;background:var(--sup-hundida)}
.fiscal-ratios{max-height:620px;margin:0;border:1px solid var(--borde);border-radius:13px}
.fiscal-ratios__tabla{min-width:1200px}
.fiscal-ratios__tabla td{color:var(--tx-1)}
.fiscal-ratios__tabla thead th{position:sticky;top:0;z-index:3}
.fiscal-ratios__tabla th:first-child,.fiscal-ratios__tabla td:first-child{position:sticky;left:0;z-index:2;min-width:250px;background:var(--sup-1)}
.fiscal-ratios__tabla thead th:first-child{z-index:4;background:var(--tabla-cab)}
.fiscal-ratios__tabla td:first-child strong,.fiscal-ratios__tabla td:first-child small{display:block}
.fiscal-ratios__tabla td:first-child small{margin-top:3px;color:var(--tx-2);font-size:9.5px}
.fiscal-ratios__actual{background:var(--marca-tenue)!important;color:var(--marca);font-weight:700}
.fiscal-formulas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 24px}
.fiscal-formulas article{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 20px;padding:18px 20px;overflow:hidden;border:1px solid var(--borde);border-radius:14px;background:linear-gradient(120deg,var(--sup-1),var(--sup-hundida));box-shadow:var(--el-1)}
.fiscal-formulas article::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--marca)}
.fiscal-formulas .versalita{grid-column:1/-1;color:var(--marca)}
.fiscal-formulas strong{font-size:16px}
.fiscal-formulas p{grid-column:1/2;margin:0;color:var(--tx-2);font-size:11px;line-height:1.45}
.fiscal-formulas b{grid-column:2;grid-row:2/4;align-self:center;color:var(--marca);font-size:22px;font-weight:650;font-variant-numeric:tabular-nums}

@media(max-width:1050px){
  .fiscal-territorio__contexto{align-items:stretch;flex-direction:column}
  .fiscal-territorio__filtros{justify-content:flex-start}
  .fiscal-indicador{grid-template-columns:1fr}
  .fiscal-indicador__ficha{padding:0 0 14px;border-right:0;border-bottom:1px solid var(--borde)}
  .fiscal-indicador__cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fiscal-kpis,.fiscal-cierre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fiscal-kpis--flujo{grid-template-columns:1fr}
  .fiscal-kpi:nth-child(2n){border-right:0}
  .fiscal-kpi:nth-last-child(-n+4){border-bottom:1px solid var(--borde)}
  .fiscal-kpi:nth-last-child(-n+2){border-bottom:0}
  .fiscal-kpis--flujo .fiscal-kpi{border-right:0;border-bottom:1px solid var(--borde)}
  .fiscal-kpis--flujo .fiscal-kpi:last-child{border-bottom:0}
  .fiscal-lectura{grid-template-columns:1fr;gap:7px}
  .fiscal-formulas{grid-template-columns:1fr}
  .fiscal-territorio__navegacion .segmentado{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fiscal-comparador__cabecera{align-items:flex-start;flex-direction:column}
  .fiscal-comparador__unidad{text-align:left}
  .fiscal-comparador__filtros{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fiscal-comparador__kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fiscal-comparador__kpi:nth-child(2){border-right:0}
  .fiscal-comparador__kpi:nth-child(-n+2){border-bottom:1px solid var(--borde)}
}
@media(max-width:620px){
  .fiscal-territorio__contexto{padding:16px}
  .fiscal-territorio__filtros{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .fiscal-territorio__filtros .campo{min-width:0}
  .fiscal-indicador__cifras,.fiscal-kpis,.fiscal-cierre{grid-template-columns:1fr}
  .fiscal-kpi{border-right:0!important;border-bottom:1px solid var(--borde)!important}
  .fiscal-kpi:last-child{border-bottom:0!important}
  .fiscal-perfil__cabecera{align-items:start;flex-direction:column}
  .fiscal-matriz__utilidades{align-items:flex-start;flex-direction:column}
  .fiscal-matriz__tabla th:first-child,.fiscal-matriz__tabla td:first-child{width:245px;min-width:245px;max-width:245px}
  .fiscal-formulas article{grid-template-columns:1fr}
  .fiscal-formulas b{grid-column:1;grid-row:auto;font-size:19px}
  .fiscal-territorio__navegacion .segmentado{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fiscal-comparador__cabecera{padding:18px}
  .fiscal-comparador__filtros,.fiscal-comparador__kpis{grid-template-columns:1fr}
  .fiscal-comparador__kpi{border-right:0;border-bottom:1px solid var(--borde)}
  .fiscal-comparador__kpi:last-child{border-bottom:0}
}

/* ─────────────────────────────── Mapas ─────────────────────────────── */
.mapas__filtros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:flex-end;gap:12px;padding:16px 18px;
  border:1px solid var(--borde);border-radius:14px;background:var(--sup-1);
  box-shadow:var(--el-1)
}
.mapas__filtros>.campo{min-width:0}
.mapas__filtros>.segmentado{align-self:center;width:100%}
.mapas__filtros--perfil>.campo{max-width:420px}
.mapas__campo-municipio{grid-column:span 2}
.mapas__mapa-grid>.panel{height:100%;min-width:0}
.mapas__mapa-panel{overflow:hidden}
.mapas__mapa-panel>.grafico{margin-inline:-8px}
.mapas__hero{
  display:grid;grid-template-columns:minmax(260px,1.05fr) minmax(420px,1.95fr);
  gap:28px;align-items:center;padding:26px 28px;border:1px solid var(--borde-marca);
  border-radius:18px;background:linear-gradient(125deg,var(--marca-tenue),var(--sup-1) 58%);
  box-shadow:var(--el-2)
}
.mapas__hero-identidad{display:grid;gap:5px}
.mapas__hero-identidad h2{font-size:clamp(24px,3vw,34px);line-height:1.05;letter-spacing:-.035em}
.mapas__hero-identidad p{color:var(--tx-2);font-size:12px}
.mapas__hero-datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.mapas__hero-dato{display:grid;gap:7px;min-width:0;padding:6px 18px;border-left:1px solid var(--borde)}
.mapas__hero-dato strong{font-size:clamp(18px,2vw,26px);font-weight:630;letter-spacing:-.03em;white-space:nowrap}
.mapas__perfil-grid>.panel{height:100%}
.mapas__perfil-panel{padding:18px}
.mapas__metricas{display:grid;gap:16px}
.mapas__metrica{display:grid;gap:6px}
.mapas__metrica>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--tx-2);font-size:12px}
.mapas__metrica strong{color:var(--tx-1);font-size:13px;font-weight:620}
.mapas__barra{display:block;height:5px;overflow:hidden;border-radius:999px;background:var(--sup-hundida)}
.mapas__barra i{display:block;height:100%;border-radius:inherit;background:var(--marca)}
.mapas__nota-cobertura{display:grid;gap:6px;margin-top:18px;padding:15px;border-radius:11px;background:var(--sup-hundida);color:var(--tx-2);font-size:11px;line-height:1.5}
.mapas__nota-cobertura strong{color:var(--tx-1);font-size:12px}

/* Mapa urbano real: la capa censal se dibuja sobre cartografía y permanece
   montada mientras cambian los indicadores. */
.mapa-urbano{
  position:relative;height:610px;min-height:480px;overflow:hidden;border:1px solid var(--borde);
  border-radius:13px;background:var(--sup-hundida);isolation:isolate
}
.mapa-urbano__lienzo{position:absolute;inset:0}
.mapa-urbano__carga{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;
  background:color-mix(in srgb,var(--sup-1) 90%,transparent);color:var(--tx-2);
  font-size:12px;font-weight:600;transition:opacity .18s ease,visibility .18s ease
}
.mapa-urbano__carga::before{
  content:"";position:absolute;width:30px;height:30px;margin-top:-42px;border:3px solid var(--borde);
  border-top-color:var(--marca);border-radius:50%;animation:mapa-giro .75s linear infinite
}
.mapa-urbano__carga--oculta{visibility:hidden;opacity:0;pointer-events:none}
.mapa-urbano__carga--error{color:var(--sig-critico-tx)}
.mapa-urbano__carga--error::before{display:none}
@keyframes mapa-giro{to{transform:rotate(360deg)}}
.mapa-urbano__leyenda{
  position:absolute;left:14px;bottom:14px;z-index:4;width:min(390px,calc(100% - 82px));padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--borde-fuerte) 72%,transparent);border-radius:10px;
  background:color-mix(in srgb,var(--sup-1) 92%,transparent);box-shadow:var(--el-2);backdrop-filter:blur(10px)
}
.mapa-urbano__leyenda-cab{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:7px}
.mapa-urbano__leyenda-cab strong{overflow:hidden;color:var(--tx-1);font-size:11px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.mapa-urbano__leyenda-cab span,.mapa-urbano__rango{color:var(--tx-2);font-size:9.5px}
.mapa-urbano__escala{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:8px;overflow:hidden;border-radius:999px}
.mapa-urbano__escala i{display:block}
.mapa-urbano__rango{display:block;margin-top:6px;font-variant-numeric:tabular-nums}
.mapa-urbano .maplibregl-ctrl-group{
  overflow:hidden;border:1px solid var(--borde);border-radius:9px;background:var(--sup-1);box-shadow:var(--el-1)
}
.mapa-urbano .maplibregl-ctrl-group button{background-color:var(--sup-1)}
[data-tema="oscuro"] .mapa-urbano .maplibregl-ctrl-icon{filter:invert(1)}
.mapa-urbano .maplibregl-ctrl-attrib{color:var(--tx-2);background:color-mix(in srgb,var(--sup-1) 86%,transparent)}
.mapa-urbano .maplibregl-ctrl-attrib a{color:var(--marca)}
.mapa-popup .maplibregl-popup-content{
  min-width:230px;padding:13px 14px;border:1px solid var(--borde);border-radius:10px;
  background:var(--sup-1);color:var(--tx-1);box-shadow:var(--el-3)
}
.mapa-popup .maplibregl-popup-tip{border-top-color:var(--sup-1)!important;border-bottom-color:var(--sup-1)!important}
.mapa-popup__titulo{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--borde);font-size:12px;font-weight:650}
.mapa-popup__fila{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:3px 0;color:var(--tx-2);font-size:10.5px}
.mapa-popup__fila strong{color:var(--tx-1);font-weight:650;font-variant-numeric:tabular-nums;text-align:right}
.mapas__resumen-manzanos>.banda{margin-top:0}
.mapas__distribucion-manzanos{align-self:start}
.mapas__distribucion-manzanos .panel__cabecera{display:grid}
.mapas__distribucion-manzanos>.grafico{margin-inline:-6px}

@media(max-width:1100px){
  .mapas__hero{grid-template-columns:1fr}
  .mapas__hero-dato:first-child{border-left:0}
  .mapas__perfil-grid>.col-3{grid-column:span 6}
  .mapas__mapa-grid>.col-9,.mapas__mapa-grid>.col-3{grid-column:span 12}
  .mapas__distribucion-manzanos>.grafico{max-width:720px}
}
@media(max-width:760px){
  .mapas__filtros{display:grid;grid-template-columns:1fr;padding:14px}
  .mapas__filtros>.campo,.mapas__filtros--perfil>.campo{width:100%;max-width:none;min-width:0}
  .mapas__campo-municipio{grid-column:auto}
  .mapas__filtros>.segmentado{width:100%}
  .mapas__hero{padding:20px}
  .mapas__hero-datos{grid-template-columns:1fr 1fr}
  .mapas__hero-dato{border-left:0;border-top:1px solid var(--borde);padding:14px 8px}
  .mapas__perfil-grid>.col-3{grid-column:span 12}
  .mapa-urbano{height:520px;min-height:420px}
  .mapa-urbano__leyenda{left:10px;bottom:10px;width:calc(100% - 68px);padding:9px 10px}
}

/* ═══════════════════ 21. INICIO (portada) ═════════════════════

   La única página del Portal que no es una vista de datos. Vive a sangre
   completa, con su propio ritmo vertical y la escala editorial `--t-display`
   / `--t-lead`. Nada de acá se reutiliza en las secciones: si un selector
   `.inicio-*` aparece fuera de esta sección, está mal puesto.

   El ancho lo libera el enrutador publicando `data-vista` en <html>. Es más
   barato y más predecible que márgenes negativos con `100vw`, que además
   fallarían por los 248 px de la barra lateral. */

:root[data-vista="inicio"] .envoltura { max-width: none; padding: 0; }
:root[data-vista="inicio"] .vista { gap: 0; }

.inicio {
  display: flex;
  flex-direction: column;
  /* Contexto de apilamiento propio: el campo del hero se posiciona contra
     esta caja y no contra el documento. */
  isolation: isolate;
}

.inicio-seccion {
  width: 100%;
  max-width: calc(var(--contenido-max) - 160px);
  margin: 0 auto;
  padding: clamp(72px, 9vw, 132px) clamp(20px, 3.2vw, 44px);
}

.inicio-rotulo {
  color: var(--marca);
  margin: 0 0 var(--e-4);
}

.inicio-titulo {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  letter-spacing: -.016em;
  line-height: var(--lh-apretado);
  color: var(--tx-1);
  margin: 0 0 var(--e-7);
  max-width: 20ch;
}

/* ── revelado al entrar en pantalla ──

   El retardo lo lleva `--i`, escrito por la vista sobre cada hermano. Un
   temporizador por nodo haría lo mismo con un coste que el compositor ya
   asume gratis. */
.revela {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--m-vista) var(--m-curva) calc(var(--i, 0) * 70ms),
    transform var(--m-vista) var(--m-curva) calc(var(--i, 0) * 70ms);
}
.revela[data-visible="1"] { opacity: 1; transform: none; }

/* ══════════════════════════ hero ══════════════════════════ */

.inicio-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--e-9) clamp(20px, 3.2vw, 44px) var(--e-10);
  overflow: hidden;
  /* Un degradado quieto, muy tenue. El movimiento de la portada vive en el
     titular: detrás no se mueve nada, y ese contraste es justamente lo que
     hace que el titular se lea como el gesto y no como un adorno más sobre un
     fondo que ya estaba animado. */
  background:
    radial-gradient(60% 44% at 50% 34%, var(--marca-tenue) 0%, transparent 70%),
    var(--sup-0);
}

.inicio-hero__centro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-4);
  max-width: 720px;
}

.inicio-hero__iso {
  width: auto; height: clamp(96px, 12vw, 148px);
  margin-bottom: var(--e-2);
  filter: drop-shadow(0 12px 34px var(--marca-tenue));
}

.inicio-hero__rotulo { color: var(--tx-3); margin: 0; }

.inicio-hero__titular {
  font-size: var(--t-display);
  font-weight: 500;
  letter-spacing: -.022em;
  line-height: 1.08;
  color: var(--tx-1);
  margin: 0;
  text-wrap: balance;
}
/* La segunda línea en cursiva y color de marca separa la promesa del sujeto
   sin recurrir a un peso que el sistema no admite. */
.inicio-hero__titular em {
  font-style: italic;
  color: var(--marca);
}

.inicio-hero__bajada {
  font-size: var(--t-lead);
  line-height: var(--lh-lectura);
  color: var(--tx-2);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

.inicio-hero__acciones {
  display: flex; flex-wrap: wrap; gap: var(--e-3);
  justify-content: center;
  margin-top: var(--e-3);
}
.inicio-hero__cta {
  font-size: 14px;
  padding: 11px 20px;
  border-radius: var(--r-medio);
}
.inicio-hero__cta.boton--secundario { box-shadow: var(--el-1); }

.inicio-hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%; bottom: var(--e-6);
  transform: translateX(-50%);
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-pildora);
  color: var(--tx-3);
  animation: inicio-latido 2.4s var(--m-curva) infinite;
}
.inicio-hero__scroll:hover { color: var(--marca); background: var(--marca-tenue); }

@keyframes inicio-latido {
  0%, 100% { transform: translate(-50%, 0); opacity: .55; }
  50% { transform: translate(-50%, 7px); opacity: 1; }
}

/* ═══════════════════════ qué es ═══════════════════════ */

.inicio-que { border-top: 1px solid var(--borde); }

.inicio-que__texto { max-width: 62ch; }

.inicio-parrafo {
  font-size: var(--t-lead);
  line-height: var(--lh-lectura);
  color: var(--tx-1);
  margin: 0 0 var(--e-5);
  text-wrap: pretty;
}
/* El primero es la definición: se lo deja respirar más. */
.inicio-parrafo:first-child {
  font-size: clamp(19px, 2vw, 25px);
  letter-spacing: -.012em;
}
.inicio-parrafo:not(:first-child) { color: var(--tx-2); }
.inicio-parrafo:last-child { margin-bottom: 0; }

.inicio-principios {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-7);
  margin: var(--e-9) 0 0;
  padding: 0;
}
.inicio-principio { border-top: 2px solid var(--marca); padding-top: var(--e-4); }
.inicio-principio__titulo {
  font-size: var(--t-fila); font-weight: 500; color: var(--tx-1);
  margin: 0 0 6px;
}
.inicio-principio__texto {
  font-size: var(--t-cuerpo); line-height: var(--lh-lectura);
  color: var(--tx-2); margin: 0;
}

/* ═══════════════════ qué contiene ═══════════════════ */

.inicio-contenido { background: var(--sup-hundida); max-width: none; }
.inicio-contenido > * {
  max-width: calc(var(--contenido-max) - 160px);
  margin-inline: auto;
}

.inicio-contenido__rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-6);
}

.inicio-dominio {
  display: flex; flex-direction: column;
  background: var(--sup-1);
  border: 1px solid var(--borde);
  border-top: 2px solid var(--borde-fuerte);
  border-radius: var(--r-grande);
  padding: var(--e-6);
  transition:
    border-top-color var(--m-normal) var(--m-curva),
    box-shadow var(--m-normal) var(--m-curva),
    transform var(--m-normal) var(--m-curva);
}
.inicio-dominio:hover {
  border-top-color: var(--marca);
  box-shadow: var(--el-2);
  transform: translateY(-2px);
}

.inicio-dominio__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-3); margin-bottom: var(--e-4);
}
.inicio-dominio__ico {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-medio);
  background: var(--marca-tenue); color: var(--marca);
}
.inicio-dominio__titulo {
  font-size: var(--t-bloque); font-weight: 500; color: var(--tx-1); margin: 0;
}
.inicio-dominio__pregunta {
  font-size: var(--t-cuerpo); color: var(--marca);
  margin: 4px 0 var(--e-3);
}
.inicio-dominio__texto {
  font-size: var(--t-cuerpo); line-height: var(--lh-lectura);
  color: var(--tx-2); margin: 0 0 var(--e-5);
  flex: 1 1 auto;
}

.inicio-dominio__destinos {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-top: 1px solid var(--borde); padding-top: var(--e-4);
}
.inicio-dominio__destino {
  font-size: var(--t-meta);
  color: var(--tx-2);
  padding: 4px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--r-pildora);
  transition:
    color var(--m-rapido) var(--m-curva),
    border-color var(--m-rapido) var(--m-curva),
    background var(--m-rapido) var(--m-curva);
}
.inicio-dominio__destino:hover {
  color: var(--marca); border-color: var(--borde-marca);
  background: var(--marca-tenue); text-decoration: none;
}

/* ═══════════════════ los dos proyectos ═══════════════════ */

.inicio-proyectos__bajada {
  font-size: var(--t-lead); line-height: var(--lh-lectura);
  color: var(--tx-2);
  margin: calc(var(--e-7) * -1 + 4px) 0 var(--e-7);
  max-width: 58ch;
}

.inicio-proyectos__rejilla {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-6);
}

.inicio-proyecto {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 300px;
  padding: var(--e-7);
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  background: var(--sup-1);
  color: inherit;
  overflow: hidden;
  --gx: 0; --gy: 0; --lx: 50%; --ly: 50%;
  transform:
    perspective(900px)
    rotateX(calc(var(--gx) * 1deg))
    rotateY(calc(var(--gy) * 1deg));
  transition:
    transform 260ms var(--m-curva),
    box-shadow var(--m-normal) var(--m-curva),
    border-color var(--m-normal) var(--m-curva);
}
.inicio-proyecto:hover {
  border-color: var(--borde-marca);
  box-shadow: var(--el-3);
  text-decoration: none;
}

/* Barrido: un realce que sigue al puntero. Va bajo el contenido y por encima
   de la superficie, nunca sobre el texto. */
.inicio-proyecto__barrido {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--m-normal) var(--m-curva);
  background: radial-gradient(
    46% 60% at var(--lx) var(--ly), var(--marca-tenue) 0%, transparent 72%);
}
.inicio-proyecto:hover .inicio-proyecto__barrido { opacity: 1; }

.inicio-proyecto__cuerpo { position: relative; flex: 1 1 auto; }

.inicio-proyecto__iso {
  display: block;
  height: 44px;
  margin-bottom: var(--e-5);
}
/* El isotipo de InFi conserva su degradado: va como imagen. */
.inicio-proyecto[data-proyecto="bitacora"] .inicio-proyecto__iso {
  width: 32px;
  background: url('marca/infi-isotipo.png') left center / contain no-repeat;
}
/* El logotipo de Greenworks es blanco sobre alfa: se usa de máscara y se tiñe
   con el color de texto, así funciona en los dos temas sin un segundo
   archivo. Misma técnica documentada en assets/marca/LEEME.md. */
.inicio-proyecto[data-proyecto="greenworks"] .inicio-proyecto__iso {
  width: 168px;
  background: var(--tx-1);
  -webkit-mask: url('marca/greenworks.png') left center / contain no-repeat;
  mask: url('marca/greenworks.png') left center / contain no-repeat;
}

.inicio-proyecto__marca { color: var(--tx-3); margin: 0 0 6px; }
.inicio-proyecto__titulo {
  font-size: clamp(21px, 2.2vw, 27px); font-weight: 500;
  letter-spacing: -.014em; color: var(--tx-1); margin: 0 0 var(--e-3);
}
.inicio-proyecto__texto {
  font-size: var(--t-cuerpo); line-height: var(--lh-lectura);
  color: var(--tx-2); margin: 0; max-width: 46ch;
}

.inicio-proyecto__pie {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: var(--e-6);
  font-size: var(--t-cuerpo); color: var(--marca);
}
.inicio-proyecto:hover .inicio-proyecto__pie { color: var(--marca-fuerte); }
.inicio-proyecto__pie .ico { transition: transform var(--m-normal) var(--m-curva); }
.inicio-proyecto:hover .inicio-proyecto__pie .ico { transform: translate(2px, -2px); }

/* ═══════════════════════ cierre ═══════════════════════ */

.inicio-cierre {
  border-top: 1px solid var(--borde);
  background: var(--sup-hundida);
  padding: var(--e-8) clamp(20px, 3.2vw, 44px);
  text-align: center;
}
.inicio-cierre__meta {
  font-size: var(--t-meta); color: var(--tx-2);
  margin: 0 0 6px;
  font-variant-numeric: tabular-nums;
}
.inicio-cierre__sep { margin: 0 8px; color: var(--tx-3); }
.inicio-cierre__nota {
  font-size: var(--t-meta); color: var(--tx-3);
  margin: 0 auto; max-width: 62ch;
  line-height: var(--lh-normal);
}

/* ── titular cinético ──

   Las letras se resuelven desde dígitos. El ancho de cada una lo fija
   `inicio-titular.js` tras medir el texto final: a partir de ahí ninguna
   sustitución mueve el bloque. Un dígito más ancho que su letra desborda su
   casilla en vez de empujar a las vecinas, y ese leve solape es parte del
   efecto. */

.cinetico { font-variant-numeric: tabular-nums; }
/* Caja por palabra: el corte de línea sigue cayendo entre palabras y nunca
   dentro de una, que es lo que romperían letras sueltas en `inline-block`. */
.cinetico__palabra { display: inline-block; white-space: nowrap; }
.cinetico__letra {
  display: inline-block;
  text-align: center;
  color: var(--tx-3);
  transition: color var(--m-normal) var(--m-curva);
}
.cinetico__letra[data-asentada="1"] { color: inherit; }

/* ═════════════════════ móvil ═════════════════════ */

@media (max-width: 860px) {
  /* El botón flotante del menú ocupa la esquina: el hero le deja el sitio. */
  .inicio-hero { padding-top: 72px; min-height: 92svh; }
  .inicio-seccion { padding: clamp(56px, 11vw, 80px) var(--e-4); }
  .inicio-contenido > * { padding-inline: 0; }
  .inicio-principios { grid-template-columns: 1fr; gap: var(--e-5); }
  .inicio-contenido__rejilla,
  .inicio-proyectos__rejilla { grid-template-columns: 1fr; }
  .inicio-proyecto { min-height: 0; padding: var(--e-6); }
  .inicio-proyectos__bajada { margin-top: calc(var(--e-6) * -1); }
  .inicio-hero__acciones { width: 100%; }
  .inicio-hero__cta { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 1080px) and (min-width: 861px) {
  .inicio-contenido__rejilla { grid-template-columns: 1fr 1fr; }
  .inicio-principios { grid-template-columns: 1fr 1fr; }
}

/* ═════════════════ movimiento reducido ═════════════════

   La sección 18 ya anula toda animación con `!important`; acá se desactiva
   además lo que no es animación sino transformación por puntero, que de otro
   modo seguiría siguiendo al cursor. */

@media (prefers-reduced-motion: reduce) {
  .revela { opacity: 1; transform: none; }
  .inicio-proyecto { transform: none; }
  .inicio-hero__scroll { animation: none; opacity: .8; }
}

/* En papel no hay pliegue ni observador que dispare: todo se muestra. */
@media print {
  .revela { opacity: 1 !important; transform: none !important; }
  .inicio-hero__scroll { display: none; }
  .inicio-hero { min-height: 0; page-break-after: always; }
}