/* ===========================================================================
   Monitor IPoM — sobreescrituras deliberadas de la hoja del host
   ===========================================================================

   Este archivo SÍ toca clases de la página envuelta (`.dashboard`, `.card`,
   `.hm`…), y por eso está excluido a propósito del chequeo de colisión: acá la
   intersección con el host no es un accidente, es el objetivo. Todo lo que
   está acá lleva su razón escrita; sin la razón, el siguiente lo «limpia».

   Se enlaza DESPUÉS del `<style>` del host, así que gana por orden sin necesidad
   de `!important` ni de inflar la especificidad.
   =========================================================================== */

/* ── El contenido envuelto adopta el contenedor de la norma (§5.9.2) ─────── */
/* El `.dashboard` del panel medía 1132px contra los 1100 del header y del
   footer: el contenido quedaba 32px más ancho que el chrome y arrancaba a la
   izquierda del wordmark. Se ve, y no es obvio de dónde viene. Y el padding
   pasa a 16/24 para no romper §4.2 en ninguna vista. */
body.mon-page .dashboard,
body.mon-page #contenido > .card {
  max-width: var(--page);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 640px) {
  body.mon-page .dashboard,
  body.mon-page #contenido > .card { padding-left: 24px; padding-right: 24px; }
}
/* En corredor y crecimiento el `.card` de nivel superior ES la página: pierde su
   caja para no dibujar una tarjeta de ancho completo dentro de otra. */
body.mon-page #contenido > .card {
  background: none; border: 0; border-radius: 0;
  padding-top: 24px; padding-bottom: 24px;
}
@media (min-width: 640px) {
  body.mon-page #contenido > .card { padding-top: 32px; padding-bottom: 32px; }
}

/* Radio de tarjeta: 12px es el de la norma (§4); el panel traía 10. */
body.mon-page .dashboard .card,
body.mon-page .chart-card,
body.mon-page .resumen-box,
body.mon-page .iframe-card,
body.mon-page .kpi-card { border-radius: 12px; }

/* ── Contraste AA del texto secundario (§2.1) ──────────────────────────── */
/* El panel usa #6B7280, que da 4.43:1 sobre el gris de página y NO pasa AA. El
   valor de la norma, #626A78, sube a ~5:1 sin mover el tono. Las apariciones
   inline las reescribe el ensamblador; estas son las que vienen por clase. `.desc` NO está en la lista: ya venía en #374151, que
   da 9,6:1 — pasarlo a --muted sería aclarar un texto que ya pasaba. */
body.mon-page .card-label,
body.mon-page .card-sub,
body.mon-page .chart-sub,
body.mon-page .section-desc,
body.mon-page .stat-sub,
body.mon-page .foot,
body.mon-page .kpi-label,
body.mon-page .filter-group label,
body.mon-page .panel .sub,
body.mon-page .move .q,
body.mon-page .hm .hcol-label { color: var(--muted); }

/* ── Bloques anchos inyectados por el host (§5.14) ──────────────────────── */
/* El mapa de temas es una grilla de 10 filas × 12 años: en un teléfono no entra
   en su tarjeta. Scrollea DENTRO del padding lateral, sin márgenes negativos
   (§4.2) — con márgenes negativos quedaría una franja donde se ve pasar el
   contenido por debajo. */
body.mon-page #heatmap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Cuánto mide cada columna. El script del host las escribe como `minmax(var(…),
   1fr)`, así que el mínimo se decide acá y sobrevive a un giro de pantalla.

   28px por año: la celda muestra hasta dos cifras en mono 10px, que son 12px de
   tinta; con 28 quedan 8 de aire a cada lado y la columna se lee como una
   columna. Antes eran 12px —el `1fr` repartiendo 285px entre doce años— y el
   número salía pegado a sus dos bordes.

   112px para los temas y no 150: es la columna que se queda fija, así que cada
   píxel suyo es uno que el mapa no puede mostrar. A 375px deja 175px de mapa
   —seis años a la vista— contra los 137 que dejaba con 150. El nombre pasa a
   dos líneas, que entran en los 26px de alto de la fila. */
@media (max-width: 639px) {
  body.mon-page #heatmap { --hm-etq: 112px; --hm-col: 28px; }
  body.mon-page #heatmap .hrow-label {
    white-space: normal; font-size: 10px; line-height: 1.15;
  }
}

/* Los gráficos de Chart.js son responsive, pero sus contenedores traían altos
   fijos que en 320px dejan las etiquetas encimadas. */
@media (max-width: 480px) {
  body.mon-page .chart-wrap { height: 240px; }
  body.mon-page .chart-wrap.tall { height: 300px; }
  body.mon-page .wrap { height: 340px; }
}

/* ── Piezas que el chrome reemplaza ────────────────────────────────────── */
/* La caja azul del encabezado y la línea de contacto del cuerpo las quita el
   ensamblador (pasan al hero y al footer). Estas reglas son el cinturón por si
   una página trae una variante que el ensamblador no reconoció: mejor que no se
   vea a que se vea duplicada. */
body.mon-page #contenido > .card > .footer,
body.mon-page .dashboard > .footer { display: none; }

/* ── KPIs sin ícono (§5.5, corrección 1) ────────────────────────────────── */
/* El cuadrado de 36px a la derecha de la tarjeta se saca: no aporta lectura y
   le come ancho a la cifra, que es lo que la persona vino a ver. */
body.mon-page .card-icon,
body.mon-page .kpi-icon { display: none; }

/* ── Anchos fijos mayores que el viewport (§4.2, prohibición 2) ─────────── */
/* El selector de reunión del panel RPM viene con `width: 300px` y
   `min-width: 300px`: en un teléfono de 320px se sale de la página y el `<body>`
   empieza a scrollear en horizontal. Medido antes del arreglo: right=353 con
   clientWidth=320. Se suelta el mínimo y se le pone tope, no ancho fijo. */
body.mon-page .rpm-select {
  min-width: 0;
  width: 100%;
  max-width: 420px;
}

/* ── La fila de controles de la TPM, en UNA línea en el teléfono ────────── */
/* «Desde: [2015] | [Todos los años]» son cuatro cajas que a 375px se partían en
   dos filas: el par se lee como un control roto y le come 34px de alto a la
   card. Con `nowrap` no se parte nunca, y para que entre se aprieta —12px y
   padding 6/8, contra 13px y 7/12 del resto del sitio— en vez de esconder algo.
   La cuenta a 320px, que es el peor caso: 35 del rótulo + 60 del «Desde» + 9 de
   la divisoria + 122 del desplegable + 18 de huecos = 244 de los 256 que deja
   la card. Cabe, y el desplegable puede encogerse si el rótulo crece.

   El corte es 639px, el mismo que usa la maqueta de teléfono del panel. */
@media (max-width: 639px) {
  /* `min-width: 0` no es decorativo: la fila es a su vez un item del flex que la
     contiene, y sin esto su mínimo automático es su ancho de CONTENIDO —los 241px
     que suman los cuatro controles sin envolver—, así que no se dejaba encoger y
     se salía 23px de la card en un teléfono de 320. Con el mínimo suelto, la fila
     se ajusta a la card y el apretón lo paga el desplegable de años, que es el
     único que puede. */
  body.mon-page .tpm-controles { flex-wrap: nowrap; gap: 6px; min-width: 0; }
  body.mon-page .tpm-controles > label { font-size: 9px; letter-spacing: .3px; }
  /* La divisoria se va: son 9px —el pelo más sus márgenes— que en 218px de card
     valen más como texto del desplegable que como adorno. Los dos grupos siguen
     separados por el hueco de la fila. */
  body.mon-page .tpm-div { display: none; }
  body.mon-page .tpm-controles .mon-select > summary,
  body.mon-page .tpm-controles .mon-select-caja {
    font-size: 12px; padding: 6px 8px; gap: 6px;
  }
  /* El desplegable de años es el único que puede encogerse, y por eso pierde el
     mínimo de 140px: su rótulo va de «Todos los años» a «5 años seleccionados»
     según lo elegido, y es el que tiene que ceder si el texto crece. Los otros
     tres muestran un dato corto y fijo. */
  body.mon-page .tpm-controles .mon-select-caja {
    min-width: 0; flex: 0 1 auto; overflow: hidden;
  }
  /* `min-width: 0` sobre el valor además del contenedor: un item de flex no baja
     de su ancho de contenido sin esto, así que el `text-overflow` no llegaba a
     aplicarse nunca y lo que se desbordaba era la caja. */
  body.mon-page .tpm-controles .mon-select-valor {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ── Píldoras de leyenda en el teléfono (convención de monitorfiscal) ───── */
/* Los `.legend-item` son controles: prenden y apagan series. monitorfiscal ya
   fijó su geometría para las leyendas de su panel y acá se adopta la misma, que
   es de dónde salió la convención del borde-como-zona-clickeable:

     · padding lateral 6px (allá `PILDORA_PAD`), contra los 9 de escritorio
     · hueco símbolo → texto 6px, igualado al padding (`PILDORA_GAP`)
     · 8px entre píldoras de la misma fila (`PILDORA_SEP`)
     · 4px entre filas (`PILDORA_SEP_V`), no los 10 que había: con el mismo aire
       a los dos lados una leyenda de cuatro filas se lee como un bloque suelto
       en vez de como una lista

   El alto del target táctil no baja: 4px de padding vertical + 11px de línea +
   borde dan 21px de caja, y las píldoras van pegadas al gráfico, no a otro
   control. Lo que se recorta es ancho, que es lo que falta.

   El pliegue en dos filas —la otra mitad de la convención— lo arma chrome.js
   (sección 10), porque hay que MEDIR dónde envuelve cada fila. */
@media (max-width: 639px) {
  body.mon-page .legend-row { gap: 4px 8px; }
  body.mon-page .legend-item { padding: 4px 6px; gap: 6px; }
}

/* ── Los dos KPI del informe, lado a lado en el teléfono ────────────────── */
/* `.grid-2` del panel apila bajo 1000px, y para estos dos eso es plata tirada:
   son dos cifras de cuatro caracteres, no dos gráficos. Apiladas empujan el
   resto de la card fuera de la pantalla. Van lado a lado, con el rótulo
   partido en DOS líneas —«Índice de Precios al Consumidor (IPC)» son 37
   caracteres y en una sola no entra en media card de teléfono—.

   La regla es por `#kpiCards` y NO por `.grid-2`: la misma clase la usan las
   parejas de `.chart-card` más abajo, y dos gráficos lado a lado a 320px no se
   leen. Acá se pide para estos dos y para nadie más.

   Dos columnas SIEMPRE. Sin esto el par quedaba lado a lado bajo 640, apilado
   entre 640 y 1000 —donde `.grid-2` apila— y lado a lado otra vez arriba de
   1000: la misma pareja cambiando de forma tres veces al ensanchar. Entre 640 y
   1000 hay 270px por tarjeta y el rótulo entra igual, así que apilar ahí no
   compraba nada. */
body.mon-page #kpiCards { grid-template-columns: 1fr 1fr; }

/* Piso de dos líneas para el rótulo, en todo el rango donde puede envolver.
   Bajo 1000px el del IPC (37 caracteres) envuelve y el de la TPM (29) no, así
   que sin el piso las dos cifras arrancan a alturas distintas y el par se ve
   desparejo — medido a 640px: 12px de diferencia. Arriba de 1000 los dos entran
   en una línea y el piso sobraría. */
@media (max-width: 999px) {
  body.mon-page #kpiCards .card-label { line-height: 1.35; min-height: 2.7em; }
  body.mon-page #kpiCards > .card > div { height: 100%; }
}

@media (max-width: 639px) {
  body.mon-page #kpiCards { gap: 10px; }
  body.mon-page #kpiCards > .card { padding: 14px 12px; }
  /* 8,5px y el `letter-spacing` a la mitad. El rótulo es JetBrains Mono, que es
     monoespaciada: cada carácter mide 0,6em más el tracking, así que el ancho de
     línea se calcula, no se adivina. En media tarjeta de 375px entran ~24
     caracteres y los 37 del IPC caen en dos líneas parejas. */
  body.mon-page #kpiCards .card-label { font-size: 8.5px; letter-spacing: .04em; }
}

/* A 320px la tarjeta baja a 120px y con el tracking de arriba el rótulo del IPC
   se iba a TRES líneas —medido—, dejando las dos tarjetas de alto distinto. Se
   recortan el padding y medio punto de tipografía, que es lo que hace entrar la
   línea larga («al Consumidor (IPC)», 19 caracteres) en los 100px que quedan. */
@media (max-width: 359px) {
  body.mon-page #kpiCards > .card { padding: 14px 10px; }
  body.mon-page #kpiCards .card-label { font-size: 8px; }
}

/* ── Las diez tarjetas temáticas, en carrusel en el teléfono ────────────── */
/* `.grid-5` cae a una columna bajo 600px: diez tarjetas apiladas son ~900px de
   alto y el gráfico que explican queda a una pantalla y media de distancia.
   Pasan a una FILA con scroll horizontal y dos tarjetas a la vista: el bloque
   pasa de diez altos a uno.

   Por `#thematicStats` y no por `.grid-5`, por lo mismo que los KPI: la clase la
   usan otras grillas del panel.

   `grid-auto-flow: column` necesita que `grid-template-columns` se apague
   explícitamente — la regla del panel pone `repeat(5, 1fr)` y con eso las
   tarjetas siguen entrando por filas y el scroll nunca aparece.

   El ancho es 44% y no 50%: con la mitad justa entran dos exactas y el carrusel
   no se anuncia. Con 44% asoma un pedazo de la tercera, que es lo único que
   dice «esto se desliza» sin agregar flechas ni puntos. */
@media (max-width: 639px) {
  body.mon-page #thematicStats {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* La barra se esconde: en el teléfono el gesto ya la reemplaza y en
       escritorio esta regla no corre. Se sigue pudiendo desplazar. */
    scrollbar-width: none;
    /* Aire abajo para que la sombra del foco no quede cortada contra el borde
       del contenedor con scroll. */
    padding-bottom: 2px;
  }
  body.mon-page #thematicStats::-webkit-scrollbar { width: 0; height: 0; }
  /* `proximity` y no `mandatory`: con diez tarjetas y dos a la vista, el
     obligatorio pelea con el impulso del dedo y el carrusel se siente trabado. */
  body.mon-page #thematicStats > .stat-card { scroll-snap-align: start; }
  body.mon-page #thematicStats > .stat-card {
    padding: 12px 10px;
    /* El nombre del tema es lo único que puede desbordar: «Incertidumbre» son
       13 caracteres y en una tarjeta de 110px quedan 77 de ancho útil. A 11px
       entra; el `overflow-wrap` es el cinturón por si mañana entra un tema con
       una palabra más larga —preferible partida que saliéndose de la caja. */
    overflow-wrap: anywhere;
  }
  body.mon-page #thematicStats .stat-card h4 { font-size: 11px; gap: 5px; }
  body.mon-page #thematicStats .stat-card .stat-val { font-size: 19px; }
  body.mon-page #thematicStats .stat-card .stat-sub { font-size: 9px; }
}

/* ── Crecimiento del PIB: las cifras anuales ocupan la card entera ───────── */
/* En el panel, `.moves` es una grilla de `auto-fit` que reparte el ancho entre
   tantas columnas iguales como quepan. En un teléfono eso da UNA sola columna de
   tarjetas apiladas, o tres tan angostas que «2,2%» y su nota «parcial · 1er
   semestre» no entran. Acá se fija en DOS columnas que usan todo el ancho de la
   card —el padding lateral lo pone la card, acá no se toca nada—, y la que sobra
   cuando el total es impar se lleva una fila entera en vez de dejar un hueco.

   Esa última es la única que NO mide lo mismo que sus hermanas, y es a
   propósito: a 375px la alternativa es un hueco muerto del mismo tamaño.

   `:last-child:nth-child(odd)` y no `:nth-child(3)`: hoy son tres años (2026,
   2027 y 2028) pero la lista la arma el JS desde el IPoM vigente. Escrito así,
   el que quede colgando se estira sea el tercero o el quinto, y con un número
   par de años no se estira ninguno. */
@media (max-width: 639px) {
  body.mon-page .moves { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  /* El mínimo de 96px del panel le impide encogerse dentro de su columna. */
  body.mon-page .moves > .move { min-width: 0; }
  body.mon-page .moves > .move:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Crecimiento del PIB: el desplegable de período, bajo su disparador ──── */
/* Venía con `left:auto; right:0; min-width:240px` escrito en el markup: abría
   corrido hacia la izquierda y 30px más ancho que el botón, así que no se leía
   como el panel DE ese control sino como una capa suelta encima. §5.16 pide lo
   contrario —anclado al borde izquierdo del disparador y debajo—, que es lo que
   hacen los otros cinco desplegables del sitio.

   `width` y no `min-width`: el pedido es que midan lo mismo. Con `min-width` el
   panel crece si una opción es más larga y vuelve a desalinearse por la
   derecha. Las opciones son nombres de IPoM («Septiembre 2025»), que entran. */
body.mon-page #perMenu {
  left: 0; right: auto;
  min-width: 0; width: 100%;
}

/* ── La canaleta lateral se pone UNA vez ─────────────────────────────────── */
/* La hoja de la vista RPM estiliza el ELEMENTO `main` —`max-width: 1148px;
   padding: 40px 24px 80px`— y el ensamblador desenvuelve el `<main>` del host,
   así que esa regla termina cayendo sobre el `<main id="contenido">` del
   chrome. Resultado: 24px de canaleta ahí más los 16 del `.dashboard` de
   adentro, y las cards de RPM salían 48px más angostas que las de las otras
   tres vistas —medido a 375px: 295 contra 343— y arrancando 24px más adentro.

   El padding es del `.dashboard`, que es el contenedor de página de este
   monitor, y se pone una sola vez.

   Arriba pasa lo mismo y por eso se neutraliza también. Decía acá que el aire
   VERTICAL del host «se conserva: es suyo y no compite con nada», y sí competía:
   con las otras cuatro vistas. Los 40px de RPM son de su hoja; las otras cuatro
   sacan 16 del padding de su propio `.dashboard` —RPM no declara ninguno, se
   apoya en este archivo—, así que su primera card arrancaba 40px bajo el hero
   contra 16, y al cambiar de pestaña se veía el salto sin que el motivo esté en
   ninguna de las dos hojas por separado.

   Va por `#contenido` y no por la vista: cualquier hoja de host que mañana
   estilice `main` cae en la misma trampa, y acá queda cubierta de antemano. */
body.mon-page #contenido {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
/* Y el aire de arriba lo repone el contenedor de página, una vez y para todas.
   Las otras cuatro vistas ya declaran 16 en su propia hoja, así que este valor
   no las mueve; a RPM, que no lo declara, se lo da. Regla aparte y no sumado al
   bloque de arriba porque aquel lo comparte con `#contenido > .card`, que tiene
   su propio padding vertical (24/32) y no debe heredar este. */
body.mon-page .dashboard { padding-top: 16px; }