/* ==========================================================================
   panel-norma.css · El CONTENIDO del panel con los valores de la norma
   monitor-ui, tomados de ui/monitor_ui.css del monitor DT (§5.4 tablas,
   §5.5 KPIs, §5.6 secciones y badges).

   Por qué es un archivo aparte y no se editó la hoja del panel: esa hoja viaja
   DENTRO de dashboard.built_vf.html, que es el artefacto que DecideChile
   embebe en su sitio. Lo embebido no lleva chrome y no tiene por qué seguir la
   norma del sitio; tocar su hoja cambiaría las dos cosas a la vez. Este archivo
   se emite DESPUÉS de la del panel y SOLO en las páginas de _site/.

   Por qué mapea los selectores del panel en vez de renombrar su markup: el
   panel trae `table.cuadro1`, `.kpi`, `.an-card`; la norma habla de
   `.data-table`, `.kpi-card`, `.card`. Renombrar obligaría a tocar el JS del
   panel, que engancha por clase. Acá se traducen los VALORES.

   Lo que NO se toca:
   · La PALETA. Los tokens del panel ya son los de la norma —--border = --line
     = #E5E7EB, --text-muted = --muted = #626A78, --ingresos = --primary =
     #266FE0, --superavit = --ok, --deficit = --err— así que unificar no cambió
     un solo color. Se verificó token por token antes de escribir esto.
   · Las escalas de color del heatmap: son dataviz y tienen su propia norma.
   · La tipografía MONOESPACIADA de las celdas numéricas. La norma no la pide
     —sus tablas son listados de texto— pero acá las celdas son cifras
     comparables columna a columna, y mono + tabular-nums es lo que las alinea.
     Desvío consciente, anotado en MONITOR.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   §5.4 Tablas — lo primero es que no desborden la página
   -------------------------------------------------------------------------- */
/* Las 7 tablas del panel cuelgan de un <div> sin clase y ninguna tenía
   envoltorio con scroll: la de Ingresos se salía 212px a 320 y las de Gastos
   hasta 515px, arrastrando a la PÁGINA ENTERA en horizontal. Una sola regla y
   ninguna queda sin envolver por olvido; es la forma de la norma, con los
   selectores de acá. */
:where(div, section, figure):has(> table.cuadro1),
:where(div, section, figure):has(> table.min-tabla),
:where(div, section, figure):has(> table.heatmap) { overflow-x: auto; }

/* Encabezados iguales en las tres tablas. Antes cada una tenía el suyo:
   `cuadro1` a 13px sin fondo, `min-tabla` a 11px en 600 sobre gris,
   `heatmap` a 11px centrado. Los tres pasan al th de §5.4: mono 10px,
   versalitas, sobre --bg. */
table.cuadro1 th,
table.min-tabla th,
table.heatmap th {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 10px 6px;
  /* El th no envuelve: un encabezado partido en dos líneas desalinea la fila
     entera y en una tabla de cifras eso se lee como un error de dato. */
  white-space: nowrap;
}
table.cuadro1 td,
table.min-tabla td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
@media (min-width: 768px) {
  table.cuadro1 th, table.min-tabla th, table.heatmap th,
  table.cuadro1 td, table.min-tabla td { padding: 12px 8px; }
}
/* La sangría de la jerarquía de `cuadro1` se recalcula sobre el padding nuevo:
   estaba escrita contra los 10px viejos y con 6 quedaba pegada al borde. */
/* `.subtotal` va junto a `.item`: «Ingresos tributarios netos» tiene que
   alinearse con los demás conceptos del cuadro, no medio paso adentro. */
table.cuadro1 tr.item td.lbl,
table.cuadro1 tr.subtotal td.lbl { padding-left: 10px; }
table.cuadro1 tr.child td.lbl { padding-left: 24px; }
/* Las hijas del desglose, en un gris más claro que el cuerpo: se leen como
   segundo plano de la fila que las agrupa. */
table.cuadro1 tr.child td { color: #9CA3AF; }

/* El hover pasa de la CELDA a la FILA. Dos motivos: `cuadro1` no tenía hover
   —dos tablas hermanas que se comportan distinto— y, sobre todo, la columna
   pegajosa de abajo necesita heredar el color de su fila. Con el fondo puesto
   en el td, la primera celda se quedaba de otro color al pasar el mouse. */
table.cuadro1 tbody tr,
table.min-tabla tbody tr { background: var(--surface); }
table.cuadro1 tbody tr:hover,
table.min-tabla tbody tr:hover { background: var(--bg); }
table.min-tabla tr:hover td { background: transparent; }
/* La fila de total va SIN fondo y con la misma línea de 1px que el resto: la
   distinción la carga la tipografía (700 y un punto más grande, en la hoja del
   panel). Tuvo un #FAFAFA y una regla de 2px; las dos juntas la despegaban del
   cuerpo de la tabla como si fuera un bloque aparte, cuando es la suma de lo que
   tiene encima. Las declaraciones se dejan escritas —no borradas— porque esta
   hoja se carga DESPUÉS de la del panel y sin ellas cualquier fondo que aquella
   ponga volvería a asomar. */
table.cuadro1 tr.total { background: transparent; }
table.cuadro1 tr.total td { background: transparent; }

/* Primera columna fija en teléfono: es lo que hace usable una tabla ancha
   cuando el resto se desplaza. `background: inherit` y no un color fijo, para
   que la celda tome el de su fila y el hover no la deje pegada de otro tono. */
@media (max-width: 767px) {
  table.cuadro1 td:first-child,
  table.min-tabla td:first-child,
  table.heatmap td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    box-shadow: 1px 0 0 var(--border);
  }
  table.heatmap td:first-child { background: var(--surface); }
  table.cuadro1 th:first-child,
  table.min-tabla th:first-child,
  table.heatmap th:first-child {
    position: sticky;
    left: 0;
    background: var(--bg);
    box-shadow: 1px 0 0 var(--border);
    z-index: 1;
  }
}

/* --------------------------------------------------------------------------
   §5.6 Tarjetas
   -------------------------------------------------------------------------- */
/* Padding en dos pasos, como la norma: 28px fijos se comen 56 de 320 en un
   teléfono. Y `--border` en vez del rgba(0,0,0,.08) suelto de `.an-card`, que
   era el mismo gris escrito de otra forma. Sin sombra: las tarjetas de la
   norma se separan por borde, no por elevación. */
.card { padding: 16px; margin-bottom: 22px; }
/* El padding de abajo no es el de la norma (12px) sino la banda que la tarjeta
   de Análisis le reserva a su botón de ampliar: el botón mide 30px, se apoya a
   10 del borde, y sin esos ~44 se sienta encima de las etiquetas del eje X del
   mini-gráfico —que llegan hasta el canto—. El valor está también en la hoja
   del panel, que es la que viaja en el artefacto embebido; los dos tienen que
   moverse juntos.
   `box-shadow: none` se queda: las tarjetas de la norma se separan por borde y
   no por elevación. La elevación aparece SOLO al pasar por encima, que es la
   señal de «esto se puede abrir» —y esa regla (`.an-card:hover`, dos clases)
   le gana a esta sin que haya que repetirla acá. */
.an-card { border-color: var(--border); box-shadow: none; padding: 16px 16px 44px; }
@media (min-width: 768px) {
  .card { padding: 28px; }
  .an-card { padding: 18px 18px 46px; }
}

/* --------------------------------------------------------------------------
   §5.5 KPIs
   -------------------------------------------------------------------------- */
.kpi, .proj-card { padding: 14px; }
@media (min-width: 768px) { .kpi, .proj-card { padding: 24px; } }
/* El aire va DEBAJO del rótulo y no encima del valor: así el bloque tiene una
   sola medida en vez de dos que hay que sumar para saber la separación. */
.kpi .label { margin-bottom: 8px; }
.kpi .value { font-size: 26px; line-height: 1; margin-top: 0; white-space: nowrap; }

/* --------------------------------------------------------------------------
   §5.6 Títulos de sección y badges
   -------------------------------------------------------------------------- */
.section-title { font-size: 18px; }
@media (min-width: 768px) { .section-title { font-size: 22px; } }

.mod-deuda .meta-row .badge,
.mod-bonos .meta-row .badge,
.mod-intereses .meta .badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; line-height: 14px;
  text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 8px; border-radius: 6px;
  display: inline-flex; align-items: center;
}

/* --------------------------------------------------------------------------
   Grupos de control de las toolbars
   -------------------------------------------------------------------------- */
/* `.toolbar` ya envuelve, pero cada grupo de adentro —«Desde: [sel] Hasta:
   [sel]»— es un <span> con `display:inline-flex` escrito en un atributo
   `style` del propio markup del panel, y sin `flex-wrap` no parte nunca: a
   320px el grupo mide 350 y arrastraba la página entera 63px en horizontal.
   `!important` es la única forma de ganarle a un estilo inline, y este es el
   caso para el que existe: no hay una regla más específica que pueda pisarlo.
   Va acotado a los <span> con `style` dentro de `.toolbar` para no volverse
   una regla que se aplica a cualquier cosa. */
.toolbar > span[style] { flex-wrap: wrap !important; }

/* --------------------------------------------------------------------------
   Grillas de tarjetas
   -------------------------------------------------------------------------- */
/* `minmax(320px, 1fr)` obliga a la pista a medir 320 aunque el contenedor
   tenga 288: a 320px de viewport cada tarjeta de Análisis se salía 16px y
   arrastraba la página. `min(320px, 100%)` es el mismo layout en todos los
   anchos donde el mínimo cabe, y donde no cabe deja que la pista se encoja
   hasta el contenedor en vez de desbordarlo. La norma llega al mismo lugar
   declarando `minmax(0, 1fr)` de base y el auto-fit recién desde un
   breakpoint; acá se resuelve sin partir la regla en dos. */
.an-grid { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.mod-deuda .kpi-grid,
.mod-intereses .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.mod-bonos .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }

/* --------------------------------------------------------------------------
   Etiqueta y título de las cards
   -------------------------------------------------------------------------- */
/* La etiqueta pasa de mono azul en versalitas a Hanken Grotesk #171B21 semibold
   a 16px, en caja normal. Son los cuatro nombres que el panel le da al MISMO
   rol —el rótulo sobre el contenido de una card—, y se tratan juntos: dejar
   tres de una forma y uno de otra sería peor que no cambiar nada.
   Los 16px la dejan por encima de los 14px de la bajada, así que la card vuelve
   a tener un título y una descripción y no dos líneas del mismo peso.
   Hay que pisar cinco propiedades y no dos, porque el panel construye estas
   cuatro como rótulo mono: familia, tamaño, caja alta y el `letter-spacing` que
   la acompaña —un tracking de 0.1em pensado para versalitas de 10px abre
   demasiado un título de 16 en caja normal—. #171B21 sobre el blanco de la card
   da 15,8:1. */
.card h2,
.an-carrusel-titulo,
.chart-mini-label,
.proj-card .proj-title {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: #171B21;
}

/* El rótulo de las tarjetas de Análisis se queda en JetBrains Mono: es el único
   de los cinco que NO acompaña a un título propio —la tarjeta tiene su titular
   en `.an-headline`, no un <h2>—, así que ahí el rótulo sigue siendo una
   etiqueta y no el título del bloque. Tamaño, caja y color son los mismos que
   los otros cuatro para que la familia se lea como una decisión y no un olvido. */
.an-kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  /* 12px regular, más chico y más liviano que los otros rótulos: la mono pinta
     más ancha y más densa que la Hanken al mismo cuerpo, y acá el rótulo
     convive con el titular de la tarjeta (`.an-headline`, 17px bold), que es lo
     que tiene que leerse primero. Con 600 competía por la atención. */
  font-size: 12px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: #171B21;
}

/* La bajada de la card, a 14px y en gris. Antes iba a 18px y hacía de título;
   ese rol lo toma ahora la etiqueta de acá arriba, y esta línea vuelve a leerse
   como lo que es: la explicación de lo que la card muestra. #6b7280 sobre el
   blanco de la card da 5,0:1, que pasa AA para texto normal. */
.card .hint {
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}

/* --------------------------------------------------------------------------
   Selector dentro del encabezado de una card
   -------------------------------------------------------------------------- */
/* `.mf-select-bloque` es el aire que chrome.js le pone al desplegable cuando
   cuelga solo en el flujo de la card (el caso de «Temas destacados» antes de
   que su selector se mudara junto al título). Dentro de `.card-encabezado` ese
   margen se suma al de la propia fila y abre un hueco entre el título y la
   bajada. Va acá y no en la hoja del panel porque `.mf-*` es el espacio de
   nombres del chrome y el generador rechaza la página si el panel lo usa. */
.card-encabezado .mf-select-bloque { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   El toggle que en el teléfono se vuelve desplegable
   -------------------------------------------------------------------------- */
/* La hoja del panel esconde el <select> espejo mientras sea hijo directo del
   par —`.toolbar .ctrl > .seg-espejo`—, pero acá chrome.js se lo lleva adentro
   de su propio <details> y esa regla deja de alcanzarlo: lo que hay que mostrar
   u ocultar es el <details>, y `.mf-*` es espacio de nombres del chrome, así que
   la regla no puede vivir en la hoja del panel.
   El corte es el mismo 480px: por encima el toggle entra apretado y se lee
   mejor que un desplegable; por debajo no entra de ninguna forma. */
details.mf-select:has(> select.seg-espejo) { display: none; }
@media (max-width: 480px) {
  details.mf-select:has(> select.seg-espejo) { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   «Temas destacados»: la bajada, arriba del selector de período
   -------------------------------------------------------------------------- */
/* La hoja del panel ya ordena los tres bloques en el teléfono, pero ordena el
   `.titulo-select` del markup original; acá el control que se ve es el <details>
   que chrome.js inserta ANTES de él, y sin orden propio se iría al `order: 4`
   del respaldo, o sea al final de la card. Mismo lugar, mismo corte. */
@media (max-width: 639px) {
  #card-destacados .card-encabezado > .mf-select { order: 3; margin-bottom: 14px; }
}

/* --------------------------------------------------------------------------
   Filtros de Bonos: el control visible ocupa su columna
   -------------------------------------------------------------------------- */
/* Los cuatro filtros se reparten el ancho de la card (hoja del panel), pero el
   <select> que se estira ahí es el NATIVO, y en el sitio chrome.js lo esconde y
   pone su propio desplegable en su lugar. Así que el control que se ve seguía
   midiendo lo que mide «Todos»: cuatro cajas chicas dentro de cuatro columnas
   anchas. Se estira acá y no en la hoja del panel porque `.mf-*` es el espacio
   de nombres del chrome y el generador rechaza la página si el panel lo usa.
   `display: flex` además de `width`: `.mf-select` viene con `flex: none`. */
.mod-bonos .filter-group .mf-select { display: flex; width: 100%; }
.mod-bonos .filter-group .mf-select > summary { width: 100%; }
/* Y el <select> escondido NO se estira con ellos. `.mod-bonos .filter-group
   select { width: 100% }` de la hoja del panel es más específico que el
   `select.mf-select-nativo` del chrome, así que los cuatro <select> invisibles
   seguían midiendo 40px y asomando por el borde derecho de la página. Se le gana
   en el único lugar donde se puede nombrar a los dos: acá. */
.mod-bonos .filter-group select.mf-select-nativo {
  width: 1px; min-width: 0;
  /* El padding también: son 38px horizontales, y con `border-box` la caja no
     puede medir menos que su propio padding más el borde. Con `width: 1px` a
     secas seguía midiendo 40. */
  padding: 0; border: 0;
}

/* --------------------------------------------------------------------------
   §5.5 KPIs de los módulos embebidos (Bonos, Intereses, Deuda)
   -------------------------------------------------------------------------- */
/* Estos tres módulos entraron al panel como HTMLs sueltos y trajeron su PROPIA
   paleta, cálida: superficie #F3F2EE, texto #1A1A18/#6B6A65, borde
   rgba(0,0,0,.08), azul #2150E0. Al lado de los KPIs del resto del sitio
   —blancos, con borde y rótulo en versalitas— se leían como de otro producto:
   sin borde, con fondo beige y la etiqueta en minúsculas.
   Se los trae a §5.5, que es lo que ya usan los KPIs de las otras rutas.
   OJO con los tokens: dentro de `.mod-*` la variable `--border` vale
   rgba(0,0,0,.08), NO el #E5E7EB del panel; `--text` y `--surface` tampoco son
   los de afuera. Por eso acá se usan los del chrome —`--line`, `--ink`,
   `--muted`—, que los módulos no pisan (verificado token por token). */
.mod-deuda .kpi,
.mod-bonos .kpi,
.mod-intereses .kpi {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
}
@media (min-width: 768px) {
  .mod-deuda .kpi, .mod-bonos .kpi, .mod-intereses .kpi { padding: 24px; }
}
/* El rótulo, en versalitas mono como todos los demás. Conserva el `display:
   flex` que le pone el módulo, porque adentro lleva el punto de color de la
   moneda y sin eso el punto se va a su propia línea. */
.mod-deuda .kpi .label,
.mod-bonos .kpi .label,
.mod-intereses .kpi .label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px; line-height: 14px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.mod-deuda .kpi .value,
.mod-bonos .kpi .value,
.mod-intereses .kpi .value {
  font-size: 26px; font-weight: 800; line-height: 1;
  letter-spacing: -.01em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
/* La línea de abajo —«30 bonos», el nombre largo del fondo— es el `delta` de
   §5.5: 12px, no los 11 en mono que traía. Mono para una frase en prosa es la
   herramienta equivocada; se reserva para cifras. */
.mod-deuda .kpi .sub, .mod-bonos .kpi .sub, .mod-intereses .kpi .sub,
.mod-deuda .kpi .delta, .mod-bonos .kpi .delta, .mod-intereses .kpi .delta {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 12px; line-height: 1.4; color: var(--text-muted); margin-top: 6px;
}