/* ===========================================================================
   Monitor IPoM — chrome del sitio (monitor-ui, perfil estático · modo envoltura)
   ===========================================================================

   TODAS las clases de este archivo llevan el prefijo `mon-`. No es cosmético:
   este CSS conviive en la misma página con la hoja de estilo de un dashboard que
   ya define `card`, `kpi-card`, `kpi-grid`, `kpi-icon`, `kpi-label`, `kpi-value`,
   `btn`, `header`, `footer`, `section-title`, `section-tag` y `section-desc`
   (verificado con src/verificar_colision.py, que falla el build si alguna clase
   de acá aparece también en el host). Seis de esos ocho nombres son exactamente
   la lista de colisión conocida de monitor-ui §5.9.1, y el síntoma —el menú
   heredando la tipografía de los chips del panel— solo aparece en la página
   envuelta, así que un QA que mira una ficha y un listado no lo encuentra nunca.

   Los tokens de §2 sí van en `:root` con sus nombres canónicos: ninguna de las
   cuatro páginas envueltas usa custom properties (usan hex literales), así que
   no hay conflicto, y deja el camino abierto para que el cuerpo migre a tokens.
   =========================================================================== */

/* Variable font pedida como rango: hace falta para el peso 440 de la franja de
   IA (§5.1.1). Con solo las instancias estáticas 400 y 500 el navegador redondea
   a 500 — +25% donde se pedía +10%. El 500 del menú también viene de acá: sin la
   cara cargada, `font-weight:500` cae al 400, que es el defecto vigente de MMP. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@200..800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --primary: #266FE0;
  --blue-dark: #184D9B;
  --blue-light: #E7F0FF;
  --ink: #171B21;
  --muted: #626A78;      /* NO #6B7280: ese da 4.43:1 sobre --bg y no pasa AA (§2.1) */
  --line: #E5E7EB;
  --bg: #F5F5F5;
  --ok: #10B981;
  --warn: #F59E0B;
  --err: #EF4444;
  --violet: #8B5CF6;
  --cyan: #06B6D4;
  --footer: #121212;
  --radius-card: 12px;
  --radius-chip: 8px;
  --header-h: 64px;      /* token y no 64 literal: si el header cambia de alto,
                            las subpestañas sticky del host se arreglan en un lugar */
  --page: 1100px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
html { scrollbar-gutter: stable; }

body.mon-page {
  margin: 0;
  padding: 0;                       /* corredor/crecimiento traen padding:24px en body */
  background: var(--bg);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1;  /* cifras tabulares en todo el sitio */
}

.mon-contenedor {
  max-width: var(--page);
  margin: 0 auto;
  padding-left: 16px;               /* §4.2: 16 en móvil, 24 desde 640. Nadie lo rompe */
  padding-right: 16px;
}
@media (min-width: 640px) {
  .mon-contenedor { padding-left: 24px; padding-right: 24px; }
}

.mon-page :focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link (§7). MM no lo tiene; acá es obligatorio. */
.mon-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: var(--primary);
  padding: 10px 16px; border-radius: 0 0 var(--radius-chip) 0;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.mon-skip:focus { left: 0; }

/* ── Franja de divulgación de IA (§5.1.1) ──────────────────────────────── */
/* La franja declara que el corpus se procesó con IA, no la frescura del dato:
   quien mira una cifra sacada con IA tiene que saberlo MIENTRAS la mira. La
   frescura se fue al pie (§5.3.1). No es sticky; el header sí. */
.mon-ia {
  background: var(--ink);
  color: #FAFAFA;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .02em;
  font-weight: 440;
}
.mon-ia > .mon-contenedor {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-top: 7px; padding-bottom: 7px;
}
.mon-ia img, .mon-ia svg { width: 15px; height: 15px; flex: none; }
.mon-ia a {
  color: inherit;
  text-decoration: underline;        /* en una franja de una línea, sin subrayado
                                        el nombre no se lee como enlace */
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.mon-ia a:hover { text-decoration-thickness: 2px; }

/* ── Header (§5.1) ─────────────────────────────────────────────────────── */
.mon-header {
  position: sticky; top: 0; z-index: 20;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
/* HIJO DIRECTO, no descendiente. El panel del menú vive dentro de `.mon-header`,
   así que con `.mon-header .mon-contenedor` esta regla se le aplicaba también a
   sus barras: el `<nav>` del menú se volvía una fila flex de 64px de alto, los
   cuatro enlaces salían uno al lado del otro encogidos y desbordando la pantalla
   (medido a 375px: el último enlace terminaba en 370 con el contenido acabando en
   359). Es la misma clase de trampa de especificidad de §5.9.1, pero
   autoinfligida — y solo se veía con el menú abierto, que es justo lo que un QA
   de screenshots no abre. */
.mon-header > .mon-contenedor {
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
}

.mon-marca {
  display: inline-flex; flex-direction: column; justify-content: center;
  text-decoration: none; color: var(--ink); line-height: 1.05;
  min-height: 44px;                  /* target táctil */
}
.mon-marca-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary);
}
.mon-marca-nombre { font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
@media (max-width: 380px) { .mon-marca-nombre { font-size: 16px; } }

/* ── Marca con asset propio ────────────────────────────────────────────────
   El logo trae el nombre y el «by Unholster» dibujados, así que acá NO se
   apila nada: la columna del wordmark tipográfico pasa a fila para dejar el
   icono al lado. `.mon-marca-eyebrow` / `-nombre` siguen definidos arriba a
   propósito: son el respaldo si el SVG no existe. */
.mon-marca:has(.mon-marca-logo) { flex-direction: row; align-items: center; gap: 9px; }

.mon-marca-logo {
  display: block; width: auto; height: 32px;   /* 381×130 → ~94px de ancho */
  max-width: 100%;
}
/* En el teléfono la marca es MÁS grande que en escritorio, y no es un descuido.
   Bajo 1024px el header pierde sus cuatro píldoras y —desde que el selector de
   idioma baja al pie— le queda la marca y la hamburguesa: el ancho que sobra es
   de la identidad. A 40,5px el wordmark mide ~119px de los 320 más angostos, así
   que la fila cierra con aire (119 + 38 del icono + 9 de hueco + 44 del botón +
   32 de canaleta = 242 de 320).
   El icono crece con él y no por separado: 38/40,5 es la misma proporción que
   30/32 en escritorio, así que el bloque de marca se ve igual en las dos
   maquetas en vez de cambiar de balance al cruzar el corte.
   Los medios píxeles no son un descuido: el par salió de bajar un 12% el 46/43
   con que se probó primero, que se veía pesado en la barra de 64px, y 40,5 es
   ese 12% sin redondear a un número que corriera la proporción.
   El pie y el modal traen su propio alto con más especificidad, así que esta
   regla no los toca. */
@media (max-width: 1023px) { .mon-marca-logo { height: 40.5px; } }

/* El wordmark es negro sobre transparente y el pie es oscuro: sin invertir
   saldría invisible. `invert` respeta el alfa, así que el negro pasa a blanco
   y el fondo transparente sigue transparente. */
.mon-footer-marca .mon-marca-logo { height: 40px; filter: invert(1); }
/* El icono del pie va BLANCO ENTERO, sin el azul de marca. `brightness(0)`
   lleva cualquier color a negro conservando el alfa y `invert(1)` lo sube a
   blanco, así que el resultado no depende de los colores del archivo de origen
   ni se desincroniza si el icono cambia. Alcanza al SVG estático y al Lottie
   que chrome.js monta encima, porque cuelgan los dos de este contenedor.
   Va más grande, al talle del wordmark de 40px que acompaña. */
.mon-footer-marca .mon-marca-icono {
  width: 36px; height: 36px;
  filter: brightness(0) invert(1);
}
/* Como en la cabecera: el pie apila en columna para el wordmark tipográfico,
   pero con el logo dibujado hay que pasar a fila para dejar el icono al lado. */
.mon-footer-marca:has(.mon-marca-logo) {
  flex-direction: row; align-items: center; gap: 11px;
}

/* Caja del Lottie. Sin `min-height` ni fondo: si el JS no corre, el span queda
   vacío y no deja un hueco reservado junto al logo. */
.mon-marca-icono {
  display: inline-flex; flex: 0 0 auto; position: relative;
  width: 30px; height: 30px;     /* el dibujo es denso: bajo 30px se empasta */
}
.mon-marca-icono > img,
.mon-marca-icono-anim { display: block; width: 100%; height: 100%; }
.mon-marca-icono svg { display: block; width: 100%; height: 100%; }

/* El Lottie se monta ENCIMA del estático y recién cuando ya está dibujado se
   apaga el de abajo (clase que pone chrome.js). Los dos ocupan la misma celda,
   así que el ancho de la cabecera no salta en el cambio. */
.mon-marca-icono-anim { position: absolute; inset: 0; }
.mon-marca-icono-lista > img { visibility: hidden; }

/* Proporcional al wordmark de 40,5px del teléfono (ver `.mon-marca-logo`). */
@media (max-width: 1023px) { .mon-marca-icono { width: 38px; height: 38px; } }

/* ── Portada de fondo en el hero de la home ───────────────────────────────
   La foto en DOS capas: grises abajo, velo blanco PLANO encima. En una sola
   capa con `linear-gradient(...), url(...)` el velo funciona pero la foto no se
   puede pasar a grises —un `filter` sobre el elemento teñiría también el
   texto—, así que el gris dependería de que el archivo ya viniera desaturado.
   Con `grayscale(1)` acá, cualquier foto que entre al contrato sale en grises.
   El velo no es decorativo: sin él el texto oscuro cae hasta 1,3:1 sobre las
   sombras del mueble. Su opacidad es `brand.portada.velo`. */
.mon-hero[data-portada]::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--mon-hero-foto, none);
  background-size: cover; background-position: center;
  filter: grayscale(1);
}
.mon-hero[data-portada]::after {
  content: ''; position: absolute; inset: 0;
  background: rgb(255 255 255 / var(--mon-hero-velo, .8));
}
/* La variante liviana hasta 960 CSS px: bajar los 1426px de ancho completo a un
   teléfono son ~298 kB de más por una imagen que igual se recorta. Se CAMBIA el
   archivo, no se quita la foto: la identidad de la home no depende del ancho. */
@media (max-width: 960px) {
  .mon-hero[data-portada]::before {
    background-image: var(--mon-hero-foto-960, var(--mon-hero-foto, none));
  }
}
/* El contenido va SOBRE las dos capas; sin esto el velo lo tapa. */
.mon-hero > .mon-contenedor { position: relative; z-index: 1; }

.mon-nav { display: none; margin-left: auto; gap: 4px; }
/* `lg` y no `md`: las cuatro etiquetas de este monitor son largas
   («Reuniones de Política Monetaria») y entre 768 y 1024 desbordan (§5.1). */
@media (min-width: 1024px) { .mon-nav { display: flex; } }

.mon-pill {
  font-family: inherit;              /* explícito a propósito: es justo lo que pisa
                                        la hoja del host (§5.2) */
  font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: normal;
  border-radius: 6px; padding: 8px 12px;
  color: var(--muted); text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.mon-pill:hover { color: var(--primary); background: var(--bg); }
.mon-pill[aria-current="page"] { color: var(--primary); background: var(--blue-light); }

/* Acciones móviles (§5.1.4): el grupo vive FUERA del nav de escritorio, que se
   esconde bajo 1024px y se llevaría el selector de idioma con él. */
.mon-acciones { margin-left: auto; display: flex; align-items: center; gap: 4px; }
@media (min-width: 1024px) { .mon-acciones { margin-left: 12px; } }

.mon-icono-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: var(--radius-chip);
  color: var(--ink); cursor: pointer; font-family: inherit;
}
.mon-icono-btn:hover { background: var(--bg); }
.mon-icono-btn svg { width: 18px; height: 18px; }

/* ── Selector de idioma (§5.1.2 + §5.16) ───────────────────────────────── */
.mon-idioma { position: relative; }
.mon-idioma > summary {
  list-style: none; cursor: pointer;
  min-height: 44px; padding: 0 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
  border-radius: var(--radius-chip);
}
.mon-idioma > summary::-webkit-details-marker { display: none; }
.mon-idioma > summary:hover { background: var(--bg); }
.mon-idioma svg { width: 18px; height: 18px; flex: none; }
.mon-idioma .mon-chev { width: 12px; height: 12px; transition: transform .15s ease; }
.mon-idioma[open] .mon-chev { transform: rotate(180deg); }

/* Anclado bajo su disparador, alineado por el borde derecho porque vive en la
   mitad derecha del header (§5.16). Nunca centrado ni desprendido. */
/* Un <details> cerrado deja a sus hijos con `content-visibility: hidden`, no con
   `display: none`: siguen midiendo en `getBoundingClientRect()` y aparecen como
   falsos infractores en el chequeo de padding de §4.2 — y, peor, un panel
   `position: fixed` adentro puede llegar a maquetarse. Se apaga explícito. */
.mon-idioma:not([open]) > .mon-idioma-panel,
.mon-menu:not([open]) > .mon-menu-panel { display: none; }

.mon-idioma-panel {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: max(100%, 190px);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  padding: 4px 0; z-index: 40;
}
.mon-idioma-rotulo {
  display: block; padding: 8px 16px 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.mon-idioma-panel a {
  display: block; padding: 8px 16px;
  font-size: 13px; color: var(--ink); text-decoration: none;
}
.mon-idioma-panel a:hover { background: var(--bg); }
.mon-idioma-panel a[aria-current="true"] { color: var(--primary); font-weight: 600; }

/* ── Menú full-screen (§5.2) ────────────────────────────────────────────── */
.mon-menu { position: relative; }
@media (min-width: 1024px) { .mon-menu { display: none; } }
.mon-menu > summary { list-style: none; cursor: pointer; }
.mon-menu > summary::-webkit-details-marker { display: none; }

.mon-menu-panel {
  position: fixed; inset: 0; z-index: 50;
  background: #fff; display: flex; flex-direction: column;
}
/* La trampa del margen auto (§5.1.5), y no está en el panel sino en sus HIJOS:
   las barras del menú llevan `.mon-contenedor`, que trae `margin: 0 auto`. En un
   flex en COLUMNA un margen lateral `auto` ANULA el stretch, así que cada barra
   se encoge al ancho de su contenido y queda centrada. Medido antes del arreglo,
   en un viewport de 320px: la marca del menú quedaba en 76..193 en vez de
   arrancar en 16, y los cuatro enlaces desbordaban hasta 363px. Se resetean las
   dos propiedades; el menú solo existe bajo 1024px, así que perder el
   `max-width` no tiene efecto visible. */
.mon-menu-panel > .mon-contenedor { max-width: none; margin: 0; width: 100%; }
.mon-menu-barra {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);   /* divisoria a ancho completo de pantalla */
}
/* `padding-top/bottom` y no el atajo `padding`: el atajo pone el lateral en 0
   y se lleva los 16/24px que trae `.mon-contenedor` (misma especificidad,
   gana el que va después). */
.mon-menu-nav { padding-top: 8px; padding-bottom: 8px; overflow-y: auto; flex: 1; }
.mon-menu-nav a {
  display: block; padding: 16px 0;
  font-size: 17px; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.mon-menu-nav a[aria-current="page"] { color: var(--primary); font-weight: 600; }
.mon-menu-pie { padding-top: 20px; padding-bottom: 28px; }
.mon-menu-pie img { height: 22px; opacity: .8; }

/* Keyframes SEPARADOS, no negociable: el mismo `animation-name` no re-dispara,
   `animationend` no llega nunca y el overlay queda pegado bloqueando clicks. */
@keyframes mon-menu-pop     { from { opacity: 0; transform: translateX(10px) } to { opacity: 1; transform: translateX(0) } }
@keyframes mon-menu-pop-out { to   { opacity: 0; transform: translateX(10px) } }
.mon-menu[open] > .mon-menu-panel { animation: mon-menu-pop .25s cubic-bezier(.34, 1.4, .64, 1); }
.mon-menu[open] > .mon-menu-panel.mon-saliendo { animation: mon-menu-pop-out .2s ease-in forwards; }

/* ── Hero (§5.7) ───────────────────────────────────────────────────────── */
/* Banda full-bleed FUERA del contenedor: el fondo llega a los bordes, el
   contenido va dentro del mismo padding lateral que el resto (§4.2). El
   `blue-light` queda como RESPALDO en `background`: si la foto no carga —o si
   algún día no hay foto en el contrato— la banda no sale blanca y sin
   identidad, sale como salía antes. */
.mon-hero {
  position: relative;
  background: var(--blue-light);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.mon-hero > .mon-contenedor { padding-top: 28px; padding-bottom: 28px; }
@media (min-width: 640px) { .mon-hero > .mon-contenedor { padding-top: 40px; padding-bottom: 36px; } }
/* `#141414` y no `primary`: el rótulo deja de ser azul. Medido sobre la foto
   velada, donde el peor fondo bajo este texto es rgb(228,228,228): `#141414` da
   14,49:1, `blue-dark` daba 6,42:1 y `primary` 3,73:1 —éste no pasaba el 4,5:1
   de AA para texto chico—. El token `--primary` NO se toca: el cambio es de
   este rótulo, no del color de marca. */
.mon-hero-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #141414; margin-bottom: 6px;
}
.mon-hero h1 {
  margin: 0;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.05; font-weight: 800;
  letter-spacing: -.5px; color: var(--ink);
}
.mon-hero h1 .mon-h1-2 { color: var(--primary); }
.mon-hero-bajada {
  margin: 12px 0 0; max-width: 62ch;
  font-size: 14px; font-weight: 300; line-height: 1.6; color: #141414;
}
.mon-hero-meta {
  margin-top: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: var(--muted);
}
.mon-hero-ctas { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
/* En el teléfono los dos CTA van en UNA línea, a mitad y mitad. Apilados se
   leían como dos decisiones seguidas en vez de como dos puertas al mismo nivel,
   y se comían 100px de alto justo donde el hero tiene que dejar ver que abajo
   hay contenido.
   `flex: 1 1 0` y no `auto`: con `auto` cada botón mide su texto y el par queda
   descentrado —«Ver corredor» contra «Ir a minutas» no miden lo mismo en ningún
   idioma—. Con base 0 se reparten la fila en dos mitades iguales y el texto va
   centrado, que es lo que los hace leer como un par.
   `min-width: 0` porque si no el mínimo automático de un item de flex es su
   ancho de contenido y el par volvería a desbordar en los idiomas de etiqueta
   larga (el alemán y el francés miden 18 caracteres contra los 12 del español).
   El apretón de padding y tipografía es para eso mismo: a 320px cada mitad son
   140px y «Zu den Protokollen» necesita 126 de esos 140. */
@media (max-width: 639px) {
  .mon-hero-ctas { flex-wrap: nowrap; gap: 8px; }
  .mon-hero-ctas .mon-btn {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 8px 10px; font-size: 12.5px; white-space: nowrap;
  }
}
/* `a:not(.mon-btn)` y no `a`: la regla de la banda es (0,1,1) y le ganaría a
   `.mon-btn-primary` (0,1,0), dejando los dos botones con color de enlace. */
.mon-hero a:not(.mon-btn) { color: var(--blue-dark); }
.mon-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 16px; border-radius: var(--radius-chip);
  font-family: inherit; font-weight: 600; font-size: 13px;
  text-decoration: none; transition: background .15s ease;
}
.mon-btn-primary { background: var(--primary); color: #fff; }
.mon-btn-primary:hover { background: var(--blue-dark); }
.mon-btn-ghost { background: #fff; border: 1px solid var(--line); color: #141414; }
.mon-btn-ghost:hover { background: var(--bg); }

/* ── Estados de datos (§5.8) ───────────────────────────────────────────── */
/* En estático no hay `loading.tsx` ni `error.tsx`; el equivalente es que la
   librería de gráficos no cargue o que una serie venga vacía. Un lienzo en
   blanco miente igual que una tabla vacía sin mensaje. */
.mon-vacio {
  display: flex; align-items: center; justify-content: center;
  min-height: 120px; padding: 24px;
  text-align: center; font-size: 14px; font-weight: 300; color: var(--muted);
}
.mon-vacio-caja {
  border: 1px solid var(--line); background: #fff;
  border-radius: var(--radius-card); margin: 16px 0;
}

/* ── Footer (§5.3) ─────────────────────────────────────────────────────── */
.mon-footer {
  margin-top: 48px;
  background: var(--footer);
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
}
/* El `padding-bottom` es la separación entre la línea de contacto y el fin de
   la página. Va acá y NO como `margin-bottom` de `.mon-contacto`: siendo el
   último hijo de un contenedor sin padding ni borde abajo, su margen colapsa
   hacia afuera, se escapa de la banda oscura y no separa nada. Como padding
   queda dentro del fondo del footer, que es donde se necesita. De paso despeja
   el botón flotante de «volver arriba», fijo abajo a la derecha, que desde
   768px caía justo encima de esta línea. */
.mon-footer > .mon-contenedor { padding-top: 44px; padding-bottom: 40px; }
.mon-footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) {
  .mon-footer-grid { grid-template-columns: repeat(12, 1fr); gap: 24px; }
  .mon-col-marca { grid-column: span 5; }     /* 5/4/3, la de MM */
  .mon-col-explorar { grid-column: span 4; }
  .mon-col-fuentes { grid-column: span 3; }
}
.mon-footer-marca {
  display: inline-flex; flex-direction: column; text-decoration: none;
  color: #fff; line-height: 1.05;
}
.mon-footer-marca .mon-marca-nombre { font-size: 24px; }

/* La marca del pie comparte fila con el selector de idioma, que en pantalla
   angosta baja acá desde el header. Los 14px de separación con la bajada están
   en la FILA y no en la marca: dentro de un flex el margen de un item cuenta
   para su alineación, así que con el margen en la marca el globo del selector
   quedaba 7px por encima del centro del wordmark.
   El `min-height` es el alto del wordmark: si el PNG no carga, la marca cae al
   respaldo tipográfico —que mide menos— y la bajada subiría, desalineándose de
   «Explorar». Con el piso puesto la maqueta no depende de que el asset llegue. */
.mon-marca-fila {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  min-height: 40px; margin-bottom: 14px;
}
/* Pegado al borde derecho de la fila. Junto al wordmark se leía como parte de
   la marca. En escritorio el contenedor va vacío —el selector sigue en el
   header— y `:empty` lo esconde, así que la regla solo actúa donde hay algo. */
.mon-footer-lang { margin-left: auto; }
.mon-footer-lang:empty { display: none; }
/* Sobre el fondo oscuro el disparador va en claro. El PANEL sigue siendo blanco
   con texto oscuro: es una lista de opciones, no parte del pie. */
.mon-footer-lang .mon-idioma > summary { color: rgba(255, 255, 255, .75); }
.mon-footer-lang .mon-idioma > summary:hover,
.mon-footer-lang .mon-idioma[open] > summary {
  color: #fff; background: rgba(255, 255, 255, .08);
}
/* `.mon-footer a` viene DESPUÉS en esta hoja y tiene la misma especificidad que
   `.mon-idioma-panel a`, así que sin esto los siete idiomas salían blancos
   sobre el panel blanco —invisibles— y a 14px en vez de 13. */
.mon-footer-lang .mon-idioma-panel a { color: var(--ink); font-size: 13px; }
.mon-footer-lang .mon-idioma-panel a:hover { color: var(--ink); background: var(--bg); }
.mon-footer-lang .mon-idioma-panel a[aria-current="true"] { color: var(--primary); }
/* Solo se invierte el eje VERTICAL: el pie es lo último de la página y hacia
   abajo no hay lugar. El `right: 0` de la regla base se conserva —el disparador
   está pegado a la derecha, así que el panel tiene que crecer hacia adentro. */
/* El alto lo acota chrome.js según el hueco que haya arriba o abajo del
   disparador, y por eso la lista scrollea adentro. Sin el scroll, acotar el alto
   solo recortaría opciones. */
.mon-footer-lang .mon-idioma-panel {
  top: auto; bottom: calc(100% + 6px);
  overflow-y: auto; overscroll-behavior: contain;
}
.mon-footer-bajada {
  font-size: 14px; font-weight: 300; line-height: 1.6;
  color: rgba(255, 255, 255, .6); max-width: 34ch; margin: 0;
}
.mon-col-titulo {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; line-height: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); margin: 0 0 14px;
}
.mon-footer ul { list-style: none; margin: 0; padding: 0; }
.mon-footer li + li { margin-top: 10px; }
.mon-footer a { color: rgba(255, 255, 255, .75); text-decoration: none; font-size: 14px; }
.mon-footer a:hover { color: var(--primary); }
.mon-col-fuentes a { color: rgba(255, 255, 255, .9); }
/* Sin regla ni sangría propia: separaba dos <ul> que se leen como UNA lista de
   fuentes, y con un solo enlace de metodología abajo la línea anunciaba un
   bloque que ya no existe. Los 10px son los mismos que hay entre dos <li>
   cualesquiera del pie, así que la lista queda con un solo ritmo.

   El selector nombra `.mon-footer` y no la clase sola: `.mon-footer ul` pone
   `margin: 0; padding: 0` y le gana por especificidad a una clase pelada. Eso
   ya pasaba antes —los `margin-top: 14px` y `padding-top: 12px` que había acá
   NUNCA se aplicaron, medido: 0px en los dos—, y por eso la línea gris salía
   pegada al ítem de arriba y al de abajo, sin aire de ningún lado. */
.mon-footer .mon-fuentes-links { margin-top: 10px; }

/* Frescura del dato (§5.3.1): mono 11px, apilada en columna, valores horneados
   en el build. Los `id` se conservan al mover el nodo — si el panel envuelto los
   escribe por `getElementById`, es el único camino que queda para refrescar sin
   rebuild. */
.mon-frescura {
  margin-top: 14px; display: flex; flex-direction: column; gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; color: rgba(255, 255, 255, .55);
}
.mon-frescura b { color: rgba(255, 255, 255, .9); font-weight: 600; }
.mon-punto {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); margin-right: 7px;
}

.mon-footer-barra {
  display: flex; flex-direction: column; gap: 20px;
  padding-top: 32px; padding-bottom: 8px;
}
@media (min-width: 768px) {
  .mon-footer-barra { flex-direction: row; align-items: center; justify-content: space-between; }
}
.mon-redes { display: flex; gap: 10px; }
/* 36px de círculo con el ícono a 18. Queda por debajo del target táctil de
   44px que usa el resto del chrome: es una decisión de diseño pedida, y se
   compensa con los 10px de hueco entre uno y otro, que dejan la zona muerta
   suficiente para no tocar el vecino por error. */
.mon-redes a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .2);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .8);
  transition: transform .15s ease, color .15s ease;
}
.mon-redes a:hover { transform: translateY(-2px); color: #fff; }
.mon-redes svg { width: 18px; height: 18px; }
/* El logo que cierra el footer es el de DecideChile, no el de Unholster (§5.3).
   El asset del repo es azul sobre transparente y a #121212 queda apagado, así que
   sí lleva el filtro de inversión: brightness(0) lo hace negro e invert(1) lo
   deja blanco puro. Verificado abriendo el archivo (wordmark «DECIDECHILE by
   Unholster», 3136×966). */
.mon-sello img {
  height: 24px; width: auto; display: block;
  opacity: .8; transition: opacity .15s ease;
}
.mon-sello:hover img { opacity: 1; }
/* El filtro va SOLO sobre el fondo oscuro. El mismo sello aparece al pie del menú
   móvil, que es blanco: ahí `brightness(0) invert(1)` lo deja blanco sobre blanco
   —invisible— y en el screenshot de QA simplemente no había logo. Es el chequeo
   que pide §5.3: mirar el asset sobre el fondo real antes de decidir el filtro. */
.mon-footer .mon-sello img { filter: brightness(0) invert(1); }
.mon-menu-pie .mon-sello img { height: 22px; }
.mon-contacto {
  font-size: 10px; line-height: 14px; color: rgba(255, 255, 255, .5);
  margin: 24px 0 0; text-align: left;
}
@media (min-width: 768px) { .mon-contacto { text-align: right; } }
.mon-contacto a { color: rgba(255, 255, 255, .7); text-decoration: underline; font-size: inherit; }

/* ── Volver arriba (§5.14) ─────────────────────────────────────────────── */
/* `<button>` y no `<a href="#">`: el ancla ensucia el historial y deja un hash. */
.mon-arriba {
  position: fixed; right: 16px; z-index: 30;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  cursor: pointer; display: none; align-items: center; justify-content: center;
}
.mon-arriba.mon-visible { display: inline-flex; }
.mon-arriba svg { width: 18px; height: 18px; }

/* ── Movimiento reducido ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mon-menu[open] > .mon-menu-panel,
  .mon-menu[open] > .mon-menu-panel.mon-saliendo { animation: none; }
  .mon-redes a:hover { transform: none; }
  .mon-page * { scroll-behavior: auto !important; }
}

/* ── Dropdown propio para los <select> del host ────────────────────────────
   Un `<select>` nativo NO se puede abrir debajo del control: el sistema dibuja
   el popup ENCIMA, centrado en la opción elegida y con su propio look, y eso no
   se toca por CSS. Es el mismo motivo por el que el monitor de referencia lo
   reemplazó; `appearance: base-select` hace justo esto pero sólo existe en
   Chrome reciente, así que en el resto quedaba el popup del sistema.

   El `<select>` original NO se borra: viaja escondido dentro del `<details>` y
   sigue recibiendo y emitiendo `change`. Es lo que mantiene vivos los listeners
   del dashboard —y los eventos de analítica—, que no saben nada de esto. */
.mon-select { position: relative; display: inline-flex; flex: none; font-size: 13px; }
/* La caja del disparador se comparte con `.mon-select-caja`, que es la que usan
   los controles del host que NO son un <select> —un multiselect, por ejemplo— y
   por eso no pasan por el conversor. Una sola definición para los dos: si el
   aspecto se escribe dos veces, uno de los dos queda viejo. */
.mon-select > summary,
.mon-select-caja {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 13px; color: var(--ink);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  /* La cuenta del alto cierra con el `line-height` DECLARADO —18 + 7 + 7 + 1 +
     1 = 34— y no con el que salga de la métrica de la fuente, que descuadra la
     línea cuando el control convive con otros en la misma fila. */
  line-height: 18px; padding: 7px 12px; white-space: nowrap;
  transition: border-color .15s, box-shadow .15s;
}
.mon-select > summary::-webkit-details-marker { display: none; }
.mon-select > summary::marker { content: ''; }
.mon-select > summary:hover,
.mon-select-caja:hover,
.mon-select[open] > summary,
.mon-select-caja[aria-expanded="true"] { border-color: var(--primary); }
.mon-select > summary:focus-visible,
.mon-select-caja:focus-visible {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(38, 111, 224, .2);
}
/* El valor empuja al chevrón contra el borde derecho: así el control no cambia
   de forma según el largo de la opción elegida. */
.mon-select-valor { flex: 1; }
.mon-select-flecha { opacity: .55; flex: none; }
.mon-select[open] .mon-select-flecha,
.mon-select-caja[aria-expanded="true"] .mon-select-flecha { transform: rotate(180deg); opacity: 1; }

/* Cerrado, el panel no existe. Hace falta decirlo: un `<details>` cerrado
   esconde su contenido con `content-visibility`, que salta el pintado pero le
   deja la caja al elemento, y esa caja —`min-width: 100%` sobre un control
   pegado al borde derecho— empuja el ancho del documento. */
.mon-select:not([open]) .mon-select-pop { display: none; }
/* La CAJA lleva borde y radio; la LISTA scrollea adentro. Con todo en el mismo
   nodo, el desvanecido difuminaba también el borde y el panel se quedaba sin
   canto inferior. */
.mon-select-pop {
  position: absolute; left: 0; top: 100%; margin-top: 8px;
  z-index: 46; min-width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(23, 27, 33, .12);
  overflow: hidden;
}
.mon-select-lista { max-height: 320px; overflow-y: auto; padding: 6px 0; }
.mon-select-menu {
  position: absolute; left: 0; top: 100%; margin-top: 8px;
  z-index: 46; min-width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(23, 27, 33, .12);
  max-height: 320px; overflow-y: auto; padding: 6px 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.mon-select-menu::-webkit-scrollbar { width: 0; height: 0; }
/* Fila de opción del menú del host: mismo alto, tipografía y hover que las
   opciones del dropdown propio. */
.mon-select-fila {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--ink);
  transition: background .15s, color .15s;
}
.mon-select-fila:hover { background: #F6F8FB; color: var(--primary); }
/* Fila de acciones («Todos» / «Ninguno»), separada de las opciones. */
.mon-select-acciones {
  display: flex; gap: 12px; padding: 4px 16px 8px;
  border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.mon-select-accion {
  font-family: inherit; font-size: 11px; font-weight: 600;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--primary);
}
.mon-select-accion.mon-secundaria { color: var(--muted, #626A78); }
.mon-select-accion:hover { text-decoration: underline; }

/* Casilla de las opciones del menú del host. */
.mon-select-check { accent-color: var(--primary); width: 14px; height: 14px; cursor: pointer; flex: none; }

/* ── La fuente del dato, en un tooltip ─────────────────────────────────────
   Cada card terminaba con una línea «Fuente: …». Es trazabilidad, no
   contenido: se repite en casi todas, y al pie compite con lo que la card sí
   está diciendo. Pasa a un icono junto al título. No se borra: sigue ahí, a un
   hover, un click o un Tab de distancia.

   Acá el disparador SÍ es un <button> —a diferencia del icono del acordeón de
   la home, que va dentro de otro botón y no podía serlo—, así que también se
   abre al tocar en un teléfono, donde no hay hover. */
.mon-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.mon-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  /* 24px de caja para el dedo con un icono de 15: el área que se puede tocar
     no puede ser del tamaño del dibujo. */
  width: 24px; height: 24px; padding: 0;
  background: none; border: 0; border-radius: 999px;
  color: var(--muted, #626A78); cursor: help;
  transition: color .15s ease, background .15s ease;
}
.mon-info-btn:hover { color: var(--primary); background: var(--bg); }
.mon-info-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.mon-info-pop {
  position: absolute; top: calc(100% + 8px); left: -8px; z-index: 47;
  /* `max-width` en ch y no en px: es prosa, y lo que importa es cuántos
     caracteres por línea. Con tope de ventana para que en un teléfono no se
     salga y arrastre el ancho del documento. */
  max-width: min(46ch, calc(100vw - 48px)); width: max-content;
  background: #fff; color: #374151; border: 1px solid var(--line);
  font-family: inherit; font-size: 11.5px; font-weight: 400; line-height: 1.5;
  letter-spacing: normal; text-transform: none; text-align: left;
  padding: 10px 12px; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(23, 27, 33, .12);
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
}
.mon-info:hover .mon-info-pop,
.mon-info-btn:focus-visible + .mon-info-pop,
.mon-info-btn[aria-expanded="true"] + .mon-info-pop { opacity: 1; visibility: visible; }

/* ── Control segmentado ────────────────────────────────────────────────────
   Réplica del `.segmented` del monitor de referencia: pista BLANCA con borde y
   la opción elegida en gris. Es al revés de lo que uno espera de un segmentado
   —normalmente la elegida se levanta en blanco sobre gris— pero así está
   definido allá y así conviven los tres monitores.

   Los 34px de alto cierran exacto: 1 de borde + 3 de padding + 26 del botón +
   3 + 1. El botón mide 26 porque lleva `line-height: 18px` DECLARADO más 4 de
   padding vertical; sin ese line-height el alto queda a merced de la métrica de
   la fuente y deja de coincidir con los dropdowns, que miden lo mismo.

   Son `<button aria-pressed>` y no un checkbox: acá no hay un «encendido/
   apagado» sino dos alternativas con nombre propio. */
.mon-seg {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 11.2px;
  background: #fff; padding: 3px;
  flex-wrap: wrap; row-gap: 4px; max-width: 100%;
}
.mon-seg-op {
  border: none; background: transparent;
  padding: 4px 16px; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 18px; font-weight: 400;
  border-radius: 8px; white-space: nowrap; color: var(--muted, #626A78);
  transition: background .18s ease, color .18s ease;
}
.mon-seg-op:hover { color: var(--ink); background: #F7F8FA; }
.mon-seg-op[aria-pressed="true"] { background: #EFF1F4; color: var(--ink); font-weight: 600; }
.mon-seg-op:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* ── Pills que comparten caja con el selector ──────────────────────────────
   Mismo alto, mismo ancho y mismo borde, para que la fila de controles se lea
   como una sola familia. El ancho sale de una variable: si cambia el del
   selector, las pills cambian con él y no hay dos números que sincronizar. */
.mon-select-caja { min-width: var(--mon-select-ancho, 140px); }
.mon-select-pill { justify-content: center; }
/* El estado del toggle vive en `aria-pressed` —que es lo que anuncia un lector
   de pantalla— y el color cuelga de ahí, en vez de escribirse desde el JS. */
.mon-select-caja[aria-pressed="true"] {
  border-color: var(--primary); color: var(--primary);
  background: rgba(38, 111, 224, .07);
}
/* Sin barra de scroll a la vista: con la barra del sistema encima el panel se
   lee como una tabla, y en macOS aparece y desaparece según el gesto, así que
   la lista cambiaría de ancho sola. Se sigue pudiendo scrollear. */
.mon-select-lista { scrollbar-width: none; -ms-overflow-style: none; }
.mon-select-lista::-webkit-scrollbar { width: 0; height: 0; }

/* El desvanecido va como CAPA dentro de la caja y no como máscara sobre ella:
   difumina el contenido y deja el borde intacto. `pointer-events: none` para no
   comerse el clic de la última opción. */
.mon-select-pop::before, .mon-select-pop::after {
  content: ''; position: absolute; left: 0; right: 0; height: 42px;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.mon-select-pop::before { top: 0; background: linear-gradient(to bottom, #fff 20%, transparent); }
.mon-select-pop::after { bottom: 0; background: linear-gradient(to top, #fff 20%, transparent); }
.mon-select-pop[data-hay-antes]::before { opacity: 1; }
.mon-select-pop[data-hay-mas]::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mon-select-pop::before, .mon-select-pop::after { transition: none; }
}
/* Cerca del borde inferior abre hacia ARRIBA. Lo marca chrome.js al abrir. */
.mon-select-pop[data-arriba] { top: auto; bottom: 100%; margin: 0 0 8px; }

.mon-select-pop button {
  display: block; width: 100%; text-align: left;
  font-family: inherit; font-size: 12px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--ink); background: none; border: 0; border-radius: 0;
  padding: 8px 16px; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.mon-select-pop button:hover { background: #F6F8FB; color: var(--primary); }
/* Prefijada como el resto: el gate de §5.9.1 exige `mon-` en toda clase del
   chrome, y un `.active` pelado es justo el tipo de nombre que el host
   también podría usar. */
.mon-select-pop button.mon-activa { color: var(--primary); font-weight: 600; }

/* El <select> viaja escondido pero CON caja: sin caja hay navegadores que no
   disparan `change`, y de ese evento cuelga todo el dashboard. `select.` y no
   sólo la clase para ganarle a las reglas de elemento de las hojas del host,
   que le ponen padding, borde y a veces un `min-width` propio: con
   `box-sizing: border-box` esos 10px no caben en 1px y la caja terminaba
   midiendo decenas de píxeles, empujando el ancho del documento. */
select.mon-select-nativo {
  position: absolute; width: 1px; height: 1px;
  padding: 0; border: 0; min-width: 0; min-inline-size: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── Card de visualización expandible ─────────────────────────────────────
   Las cards de gráfico que van en dos columnas quedan a media caja, y hay
   visualizaciones —matrices, series largas— que a ese ancho no se leen. Ganan
   sombra al pasar por encima, para que se vea que responden, y un botón que
   las abre en grande.

   El gráfico NO se vuelve a crear en el modal: se MUEVE el nodo del canvas y
   se le pide a Chart.js que se redimensione. Recrearlo significaría duplicar
   su configuración —y sus filtros, y su estado— en dos lugares. */
/* `min-width: 0` es la otra mitad del arreglo: un item de grilla tiene
   `min-width: auto`, así que NO puede encogerse por debajo del ancho de su
   contenido. Si el canvas vuelve del modal con un ancho grande, la columna
   crece con él y le come el espacio a la de al lado. Con el mínimo en 0 la
   grilla manda sobre el contenido, no al revés.
   Va en la clase propia y NO en `.grid-2 > …`: el gate de §5.9.1 rechaza que el
   chrome se apoye en clases del host —su hoja se carga después y le ganaría—, y
   además así no importa cómo se llame la grilla que la contenga. */
.mon-expandible { position: relative; min-width: 0; transition: box-shadow .18s ease; }
.mon-expandible:hover { box-shadow: 0 6px 20px rgba(23, 27, 33, .10); }
.mon-expandir {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 32px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); color: var(--primary);
  cursor: pointer; box-shadow: 0 2px 6px rgba(23, 27, 33, .10);
  transition: border-color .15s ease, background .15s ease;
}
.mon-expandir:hover { border-color: var(--primary); background: var(--blue-light); }
.mon-expandir:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Modal de la visualización ampliada ───────────────────────────────────
   `display:none` mientras está cerrado y no sólo transparente: un contenedor
   fijo de pantalla completa con contenido dentro sigue capturando clicks y
   arrastrando el ancho del documento. */
.mon-modal { position: fixed; inset: 0; z-index: 60; display: none; }
.mon-modal[data-abierto] { display: flex; align-items: center; justify-content: center; padding: 24px; }
.mon-modal-fondo { position: absolute; inset: 0; background: rgba(23, 27, 33, .45); }
.mon-modal-caja {
  position: relative; background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(23, 27, 33, .28);
  width: min(1060px, 100%); max-height: calc(100vh - 48px);
  overflow: auto; padding: 26px 28px;
}
.mon-modal-cerrar {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; color: var(--muted, #626A78); cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.mon-modal-cerrar:hover { color: var(--ink); background: var(--bg); }
.mon-modal-cerrar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Cabecera: el título a la izquierda y los controles del gráfico a su derecha,
   con los 44px de reserva para la cruz de cerrar —que va en `position:absolute`,
   fuera del flujo— de modo que los controles caigan A SU IZQUIERDA y no debajo
   ni encima. Es la misma reserva que antes se pedía por separado en el título y
   en la bajada; acá se pide una sola vez, donde importa.

   `flex-wrap` en vez de un breakpoint: lo que decide si el control cabe al lado
   del título no es el tamaño de la pantalla sino cuánto mide el título en el
   idioma que toque —«Proyecciones Inflación a Diciembre» y su versión alemana
   no ocupan lo mismo—. Cuando no cabe, baja solo. */
.mon-modal-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 16px;
  padding-right: 44px; margin-bottom: 4px;
}
.mon-modal-titulo {
  font-size: 21px; font-weight: 700; letter-spacing: -.2px; margin: 0;
  flex: 1 1 260px; min-width: 0;
}
/* La bajada ya no reserva los 44px: queda por debajo de la banda de la cruz, y
   reservarlos le angostaba el texto sin que nada ocupara ese hueco. */
.mon-modal-bajada { font-size: 13.5px; font-weight: 300; color: var(--muted, #626A78); margin: 0 0 18px 0; }
/* Fila de controles del gráfico ampliado (chrome.js §9). Los que están acá son
   los MISMOS nodos que la card, movidos, y vuelven al cerrar: por eso esta
   maqueta no les toca el tamaño. Nada de `width:100%` ni de tipografía propia —
   un selector de año estirado al ancho del modal deja de leerse como un
   selector, y cualquier medida que se le imponga acá se la lleva puesta un
   instante al volver a su cabecera.

   Los hijos se reciben con la misma fila que tenían en la card, pero SIN
   nombrar su clase: el selector del host que se la daba era descendiente de su
   cabecera y acá ya no aplica, y nombrarla detendría el build por colisión
   (§5.9.1). `flex: none` es lo que conserva el ancho intrínseco.

   Van en la línea del TÍTULO y pegados a la derecha, igual que en la cabecera
   de la card de donde salieron: el mismo control en el mismo borde, así que el
   ojo no lo tiene que volver a buscar al ampliar. */
.mon-modal-controles {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: wrap; gap: 8px; flex: none;
}
.mon-modal-controles > * {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: none;
}
.mon-modal-cuerpo { min-height: 200px; }
/* Pie: fuente a la izquierda, marca a la derecha. */
.mon-modal-pie {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line);
}
.mon-modal-fuente {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; line-height: 1.5; color: var(--muted, #626A78); max-width: 70ch;
}
.mon-modal-marca { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.mon-modal-marca img.mon-marca-logo { height: 30px; width: auto; }
.mon-modal-marca .mon-marca-icono { width: 26px; height: 26px; }
@media (max-width: 640px) {
  .mon-modal[data-abierto] { padding: 12px; }
  .mon-modal-caja { padding: 20px 16px; }
  .mon-modal-pie { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ── Píldora «+N» de las leyendas plegadas ─────────────────────────────── */
/* La arma chrome.js (sección 10) con DOS clases: la del host, que le da la
   forma de píldora que ya tienen sus hermanas —no se copia acá, o quedarían dos
   definiciones que se desincronizan—, y esta, que es lo único que la distingue.
   Por eso el selector no nombra ninguna clase del host: si lo hiciera, el gate
   de colisión de src/verificar_colision.py detendría el build (§5.9.1).

   No lleva punto de color porque no representa una serie: es un control sobre
   la leyenda, y el azul de marca es lo que lo dice. */
.mon-leyenda-mas {
  color: var(--primary); font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.mon-leyenda-mas:hover { border-color: var(--primary); }