/* Adaptadores del panel: la hoja del chrome no comparte estas clases con el host. */
main.mu-content{max-width:1100px;padding:24px 16px 40px;margin:0 auto;min-width:0}
main.mu-content>*{min-width:0;max-width:100%}.tabs,.analysis-subtabs{display:none!important}
/* Las secciones longform SON cards. Vivienda y Obras Públicas emitían
   `section.longform-sec` sin la clase `.card` y su contenido quedaba directo
   sobre el fondo, mientras Fonasa —la misma vista, el mismo layout— sí la trae:
   eran 7 secciones, las únicas del sitio en esa situación. La cáscara se da
   acá y no agregando la clase en el markup: el chrome viste el contenido
   envuelto sin tocar el HTML ni el JS del host (§5.9). */
#contenido :is(.card,.longform-sec){padding:16px;border-radius:12px;min-width:0;max-width:100%;box-shadow:none}
#contenido .longform-sec:not(.card){background:var(--white);border:1px solid var(--line);position:relative}
/* En las secciones sectoriales la fuente se lee al expandir, igual que en las
   cards de análisis: acá abajo es un párrafo largo que compite con el gráfico.
   El chevrón lo inyecta monitor.js con el mismo trazo que el de las cards. */
#contenido .longform-sec:not([data-an]) .longform-source{display:none}
#contenido .longform-sec:not([data-an]){cursor:pointer}
/* El botón «Ver» del rango personalizado sobra desde que elegir en los
   selectores aplica solo (monitor.js). Se esconde, no se borra: el listener
   dispara su click para reusar la guarda A<B del host. */
#contenido #camb-rGo{display:none}

/* ── Rigidez legal ───────────────────────────────────────────────────────── */
/* Solo el encabezado va en mono. El cuerpo es texto y cifras que se leen, y la
   familia del sitio ya trae `tnum`, así que las columnas numéricas siguen
   alineadas sin necesidad de la monoespaciada. */
/* El host pone TODA celda en mono con una regla global `td{font-family:...}`,
   así que hay que alcanzar a todas las del cuerpo, no solo a las `.mono`. */
#contenido .gl-tab tbody td{font-family:'Hanken Grotesk',system-ui,sans-serif}
/* Partida, capítulo y programa son texto: van a la izquierda. El host alinea
   toda celda a la derecha con la misma regla global, pero marca las columnas
   numéricas con `style="text-align:right"` inline, que le gana a esto — así que
   alcanza con volcar el resto a la izquierda y las cifras se quedan donde están.
   Vale también para el encabezado, para que cada título siga a su columna. */
#contenido .gl-tab :is(thead th,tbody td){text-align:left}
/* Histórico: una sola línea entre la tabla y el paginador. La que sobra es la
   del paginador, no la de la última fila: el paginador OCULTA filas en vez de
   sacarlas, así que `tr:last-child` apunta a una fila invisible y el borde que
   se ve es el de la última fila visible, que CSS no puede seleccionar. Quitar
   el borde superior del paginador es determinista y deja la línea de cierre de
   la tabla, que es la que corresponde.
   Desde 2026-09-23 el host se lo quita a TODOS los paginadores, no solo a los
   de .gl-tab, y además los saca de los contenedores con scroll —así que este ya
   no es hermano de la tabla—. La regla queda por si una hoja vieja repone el
   borde. */
#contenido .gl-tab + .paginador{border-top:0}
/* La parte que coincide con la búsqueda va en negrita (§5.2.1), como en las
   sugerencias del header. */
#contenido .gl-tab tbody td b{font-weight:600}
/* El conteo se acerca a la tabla que describe: eran 56px —22 del párrafo, 16 del
   contenedor con scroll y 18 de la tabla— y quedan 28. */
#contenido .mu-table-scroll:has(> .gl-tab){margin-top:28px}
#contenido table.gl-tab{margin-top:0}
/* La nota se movió al tooltip del título (monitor.js): su globo va en la familia
   del sitio y más ancho que los 260px del resto, porque son tres líneas. */
#contenido .meth-foot[data-mu-movida]{display:none}
/* §5.10 — el globo se ancla al ENCABEZADO, no al ícono. Anclado al ícono se
   salía por la derecha en cuanto el título se acercaba al borde: medido, el
   documento crecía a 876px en un viewport de 768. Con el h2 como contenedor,
   `left:0` lo alinea con el título y `max-width:100%` lo topa al ancho de la
   card, así que no puede desbordar en ningún ancho. Abre hacia abajo y la
   flecha se da vuelta para seguirlo. */
#contenido h2.meth-h:has(.tip.gl-tip){position:relative}
#contenido .tip.gl-tip{position:static}
#contenido .tip.gl-tip .tip-globo{font-family:'Hanken Grotesk',system-ui,sans-serif;
  left:0;right:auto;top:calc(100% + 9px);bottom:auto;
  width:max-content;max-width:min(420px,100%);white-space:normal;line-height:1.5}
#contenido .tip.gl-tip .tip-globo::before,#contenido .tip.gl-tip .tip-globo::after{
  top:auto;bottom:100%;left:18px;border-top-color:transparent}
#contenido .tip.gl-tip .tip-globo::before{border-bottom-color:var(--line)}
#contenido .tip.gl-tip .tip-globo::after{border-bottom-color:var(--white);margin-top:0;margin-bottom:-1.5px}
#contenido .section-tag{font-size:10px;letter-spacing:.14em;color:var(--blue-dark)}
#contenido .meth-h,#contenido .longform-sec h2{font-size:22px;font-weight:600}
/* El título de una card no tenía estilo: caía en el 18,72px/700 por defecto del
   navegador, mientras los h2 de sección iban a 22/600 y la guía de Metodología
   a 23/700. Una sola escala: 22 la sección, 18 la card, 16 la card interna,
   todas en el peso 600 del sistema. */
#contenido :is(.card,.longform-sec,article) h3{font-size:18px;font-weight:600;line-height:1.3;margin:0 0 8px}
#contenido :is(.card,.longform-sec,article) h4{font-size:16px;font-weight:600;line-height:1.3;margin:0 0 6px}
#contenido .meth-p,#contenido .longform-sub{font-size:13px;font-weight:300;color:var(--muted)}
#contenido .card-label,#contenido .kpi-label{font:10px/14px 'JetBrains Mono',monospace;letter-spacing:.1em;color:var(--muted)}
#contenido .kpi-label{min-height:28px}#contenido .kpi-grid{gap:16px;grid-template-columns:minmax(0,1fr)}
/* min-width: 0 evita que una cifra larga fuerce el ancho. container-type SOLO en la grilla. */
#contenido .kpi-grid>.kpi{min-width:0;container-type:inline-size;padding:16px}
#contenido .kpi-grid .kpi-value{font-size:clamp(20px,13cqi,38px);font-weight:800;line-height:1.05}
#contenido .kpi-delta.up{color:var(--positive)}#contenido .kpi-delta.down{color:var(--negative)}
#contenido .grid{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
#contenido .grid>div{min-width:0}.mu-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0;margin:16px 0}
#contenido table{width:100%;border-collapse:collapse;min-width:580px;font-size:14px}
#contenido table th{font:10px/14px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);padding:10px 6px;background:var(--bg);border-bottom:1px solid var(--line);white-space:nowrap}
#contenido table td{padding:10px 6px;border-bottom:1px solid var(--line);font-size:13px;font-weight:400;font-variant-numeric:tabular-nums}
#contenido table td:first-child{font-family:inherit;font-weight:400}#contenido table th:first-child{text-align:left}
:where(#contenido table tbody tr){background:var(--white)}#contenido table tr:hover{background:var(--bg)}
#contenido table a{font-weight:500}#contenido .longform{max-width:100%}#contenido .longform-chart{max-width:100%}
#contenido .an-grid{gap:16px}#contenido .an-card{min-width:0;border-radius:16px;padding:20px}#contenido .an-title{font-weight:600;font-size:18px}
/* El selector de distribución vive en la fila del título, alineado a la
   derecha. El título puede encogerse (min-width:0) y el control no, para que
   el que envuelve sea el texto y no el control. */
/* El control se alinea horizontalmente con el título: los dos centrados en la
   misma fila. Y el aire se aprieta — el título pegado a su bajada y la bajada
   al gráfico— porque la fila de 44px del control ya daba suficiente respiro. */
#contenido .an-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:0}
#contenido .an-card .an-chart{margin-top:6px}
#contenido .an-title .an-open{min-width:0;text-align:left}
#contenido .an-title .an-composition-controls{margin:0;flex:none}
#contenido .an-title .an-composition-controls select{width:auto;max-width:260px}
/* El enlace a la metodología de la distribución no va en la mini-card: compite
   con el gráfico y repite lo que ya se llega desde «Fuentes de los datos» del
   pie. Se oculta SOLO en la card; el mismo texto sigue disponible al expandirla,
   que es donde se lee la metodología completa. */
#contenido .an-card .an-composition-reading + p{display:none}
/* En pantalla angosta el control no cabe al lado del título: a 320px el título
   quedaba en seis renglones y el control se salía 17px de la card. La fila
   envuelve y el control pasa a ocupar el ancho completo debajo, que es como se
   lee un control de formulario en el teléfono. */
@media(max-width:639px){
  #contenido .an-title{flex-wrap:wrap}
  #contenido .an-title .an-composition-controls{width:100%}
  #contenido .an-title .an-composition-controls .dd{width:100%;max-width:100%}
  #contenido .an-title .an-composition-controls .dd>summary{width:100%;justify-content:space-between}
}
/* Dos cards que comparten fila miden lo mismo. La regla va sobre la CARD y no
   sobre cada grilla: así cubre cualquier contenedor, presente o futuro, que
   traiga `align-items:start` — que es lo que hacía `.an-grid` en la hoja del
   host y dejaba las cards de análisis con hasta 72px de diferencia en la misma
   fila. Solo alcanza a las cards: los layouts de contenido + barra lateral
   (`.cad-reading`) y las etiquetas sobre línea de base no se tocan, ahí estirar
   sería el error. El chevrón de `.an-more` ya va absoluto contra el borde
   inferior, así que la altura extra no lo despega de la esquina. */
#contenido :is(.an-card,.card,.kpi-card){align-self:stretch}

/* ── Controles del contenido envuelto ─────────────────────────────────────
   §3 — un control no hereda la tipografía por sí solo. Las píldoras de período,
   los años de la línea de tiempo y varios botones salían en Arial, que es el
   default del navegador para form controls. */
#contenido :is(button,select,input,textarea,summary,option){font-family:inherit}

/* §4 — la escala de radios es card 12, chip/badge/botón 8. En la misma barra de
   filtros convivían 4, 5, 6, 7 y 99px. */
#contenido :is(.chip,.tg,.btn,.pg-nav,.pg-num,.seg-op,.sector-controls button){border-radius:8px}
#contenido .dd>summary{border-radius:8px}
/* La opción del panel no lleva borde: el host se lo pone con
   `.sector-controls button{border:1px solid …}`, que alcanza a todos los
   botones de esa barra, opciones incluidas. Antes no se notaba porque las
   opciones se tocaban entre sí y los bordes se leían como separadores; con el
   panel ya padeado, cada opción aparecía dentro de su propio recuadro. */
#contenido .dd .dd-op{border-radius:6px;border:0}

/* Un dropdown propio que hace de selector se lee como el <select> nativo: mismo
   alto, radio y tipografía. Sin esto quedaban dos familias —selects de 44px en
   Cambios, disparadores de 32 en Vivienda— haciendo el mismo trabajo.
   `.dd-frase` queda fuera a propósito: ese va embebido en una oración y hereda
   su tamaño, que es justamente para lo que existe (el .select-texto de Monitor
   Municipios es el mismo patrón). */
#contenido :is(.dd:not(.dd-frase),label .dd)>summary,
#contenido .sector-controls>button{
  min-height:44px;display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--ink);
  background:var(--white);border:1px solid var(--line);padding:9px 14px;
  transition:border-color .15s ease}
/* …con su fondo gris, que es lo que lo separa de los tres selectores. */
#contenido .sector-controls>button{background:var(--bg)}
#contenido .sector-controls>button:hover{background:var(--line)}
/* En móvil el botón comparte fila con «Desde» y «Hasta»: el padding de 14 lo
   dejaba 30px fuera del ancho disponible. */
@media(max-width:639px){#contenido .sector-controls>button{padding-left:10px;padding-right:10px;min-width:0}}
#contenido :is(.dd:not(.dd-frase),label .dd)>summary:hover,
#contenido :is(.dd:not(.dd-frase),label .dd)[open]>summary{border-color:var(--muted)}

/* Un .dd dentro de un <label> es un control con etiqueta, no un desplegable
   embebido en una oración: en Vivienda y Obras Públicas los cinco («Medida de
   los gráficos», «Desde», «Hasta», «Seleccionar serie») van dentro de un label
   en grilla. Los de verdad embebidos están en Cambios, dentro de un <span>
   —«Otro: de … a …»—, y esos sí heredan el tamaño del texto, que es para lo que
   existe `.dd-frase`. La etiqueta se lee como rótulo de formulario y no compite
   con el título de la card. */
#contenido label:has(>.dd){font-size:13px;font-weight:500;color:var(--muted);line-height:1.4}

/* §5.16 — el panel nunca es más angosto que su disparador: uno más angosto se
   lee como desprendido. El tope de 240px del host recortaba las opciones con
   «…» en un disparador de 284px —«Gasto ejecutado · según cobertura…»—, que
   además es un dato recortado sin avisar (§5.15). Y la opción usa el tamaño del
   disparador, no uno propio. */
/* Mismo hallazgo que en el menú del header: con el <details> cerrado, Chrome
   mantiene ::details-content con contención de layout y el panel absoluto sigue
   maquetado. No se pinta, pero ocupa caja: al devolverle el ancho del disparador
   aparecía fuera del padding lateral a 320px. Se apaga con `display`. */
#contenido .dd .dd-panel{display:none;min-width:100%}
#contenido .dd[open] .dd-panel{display:block}
#contenido .dd.dd-frase .dd-panel{max-width:min(420px,calc(100vw - 32px))}
/* §5.16 — el panel lleva padding propio y la opción su radio. Sin los dos, el
   resaltado de la opción activa va de borde a borde y se lee como una banda que
   cruza el panel, no como un ítem elegido; el radio de 6px quedaba invisible
   porque la opción tocaba el borde. Es el patrón de `.select-menu` / `.select-op`
   de Monitor Municipios: menú con padding 4, ítem con radio 6. Con los 4px del
   panel más los 12 de la opción, el texto queda a los 16px de `px-4` que pide la
   norma. */
#contenido .dd .dd-panel{padding:4px}
#contenido :is(.dd:not(.dd-frase),label .dd) .dd-op{font-size:14px;padding:8px 12px}

/* §5.6 y §5.16.2 — el select y el input son gemelos: mismo alto, radio y
   tipografía, y lo único propio del select es la flecha, que se dibuja acá
   porque la nativa cambia de forma en cada navegador y descuadra el padding
   derecho. Copiado de .select-caja / .input-caja de Monitor Municipios, cuyo
   comentario documenta este mismo defecto: «los inputs quedaban 9px más bajos
   que el selector y la fila se leía como dos controles de familias distintas».
   Acá era peor —select de 24px, input de 20— y ninguno llegaba al target de
   44px (§7), que es el que ya tienen las píldoras puestas al lado. */
/* El !important no es pereza: el JS del host escribe estos controles con estilo
   inline —`font:inherit;padding:2px 4px` en los dos selectores de período, y
   `font:inherit;border:1px solid currentColor;border-radius:4px` en el buscador
   de la tabla, que dentro de un <th> heredaba 10px de JetBrains Mono—. Contra un
   atributo style la especificidad no alcanza; solo se pisan las propiedades
   visuales, nunca el ancho ni el display, que son layout del host. */
#contenido :is(select,input[type=text],input[type=search]){
  /* La familia va explícita, no `inherit`: el buscador de la tabla vive dentro
     de un <th> en JetBrains Mono y heredaba la mono. El control es interfaz, no
     dato tabular. */
  font-family:'Hanken Grotesk',system-ui,sans-serif!important;font-size:14px!important;font-weight:500!important;
  color:var(--ink)!important;background-color:var(--white)!important;
  border:1px solid var(--line)!important;border-radius:8px!important;
  padding-block:9px!important;min-height:44px;max-width:100%;transition:border-color .15s ease}
#contenido :is(input[type=text],input[type=search]){padding-inline:14px!important}
/* El hueco de la derecha es el del chevrón, que se dibuja a 12px del borde:
   iba como `padding-right` suelto y perdía contra el `padding` en atajo de
   la regla de arriba —misma !important, más especificidad—, así que el valor
   quedaba debajo de la flecha en todo <select> sin reemplazo por .dd. */
#contenido select{appearance:none;cursor:pointer;padding-inline:14px 38px!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626A78' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:14px 14px}
#contenido :is(select,input[type=text],input[type=search]):hover{border-color:var(--muted)}
#contenido :is(select,input[type=text],input[type=search]):focus-visible{outline:2px solid var(--primary);outline-offset:2px}
#contenido :is(input[type=text],input[type=search])::placeholder{font-weight:400;color:var(--muted)}
/* El padding de arriba es `!important` para ganarle a los `style` inline del
   host, y de paso pisaba el hueco que `.busca` reserva para su lupa: el
   placeholder quedaba encima del ícono. Se le devuelve. */
#contenido .busca :is(input[type=text],input[type=search]){padding-left:40px!important}

/* §5.6 — el título de sección va 18px / 22 desde 768, peso 600. Vivienda y
   Obras Públicas emitían un h2 sin clase a 24/700; el resto del sitio ya usaba
   .meth-h a 22/600. */
#contenido .tit-fila h2{font-size:18px;font-weight:600}
@media(min-width:768px){#contenido .tit-fila h2{font-size:22px}}

/* El texto que presenta una sección se separa de su primera card. Vivienda y
   Obras Públicas dejaban el párrafo pegado (margin-bottom: 0); Cambios y Cadena
   ya usaban 22px, que es el valor que queda para las cinco vistas. */
#contenido .tit-fila+p{margin-bottom:22px}
/* …salvo cuando ese texto ya vive dentro de la card de entrada y es el último
   que lleva: ahí la separación la pone el padding de la card y los 22px
   quedaban como aire muerto bajo el último renglón. */
#contenido .vista-cab .tit-fila+p:last-child{margin-bottom:0}
#contenido .tg,#contenido button.chip{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#contenido .toggles{flex-wrap:wrap}.mu-pagination{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 20px;font:10px 'JetBrains Mono',monospace}.mu-pagination button{background:none;border:1px solid var(--line);font-family:inherit;min-width:44px;height:44px;border-radius:8px;cursor:pointer;color:var(--ink)}.mu-pagination button:disabled{opacity:.4;cursor:default}.mu-page-actions{display:flex;gap:8px;align-items:center}.mu-pagination select{width:auto;min-height:44px;font-size:12px}
.mu-wide-scroll{overflow-x:auto;max-width:100%;min-width:0}.mu-wide-grid{min-width:650px}
.mu-notice{border:1px solid var(--line);padding:16px;border-radius:12px;background:var(--white);font-size:13px;color:var(--muted);margin-bottom:16px}
#contenido .empty{font-size:14px;padding:24px;color:var(--muted)}
.an-overlay{z-index:80!important;overscroll-behavior:contain}.an-modal{max-width:calc(100vw - 32px)!important;overscroll-behavior:contain}.an-close{width:44px;height:44px}
/* §5.9 — <details> de contenido: card interna con chevrón a la derecha.
   Los plegables de la letra chica llegaban con el triángulo nativo del
   navegador: no es de la norma y se pierde a la izquierda del título. Se
   visten acá, en la hoja del chrome, y no marcando el HTML del host (§5.9):
   así alcanza a los 27 plegables del sitio sin tocar una línea de su markup.
   Quedan fuera los <details> que YA son un componente con su propio chevrón
   —el desplegable .dd, el selector de años, los plegables de sector y de
   cadena—, o mostrarían dos. */
#contenido details:not(.dd,.anios,.sector-det,.cad-det,.card){
  background:var(--white);border:1px solid var(--line);border-radius:10px;margin:16px 0}
#contenido details:not(.dd,.anios,.sector-det,.cad-det,.card)>summary{padding:14px 16px}
#contenido details:not(.dd,.anios,.sector-det,.cad-det,.card)>:not(summary){padding:0 16px 16px}
#contenido details:not(.dd,.anios,.sector-det,.cad-det)>summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}
#contenido details:not(.dd,.anios,.sector-det,.cad-det)>summary::-webkit-details-marker{display:none}
#contenido details:not(.dd,.anios,.sector-det,.cad-det)>summary::after{
  content:'';flex:none;width:9px;height:9px;margin-right:4px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
#contenido details:not(.dd,.anios,.sector-det,.cad-det)[open]>summary::after{
  transform:rotate(225deg) translate(-2px,-2px)}

@media(min-width:640px){main.mu-content{padding:40px 24px}}
@media(min-width:768px){#contenido :is(.card,.longform-sec){padding:28px}#contenido .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#contenido table td,#contenido table th{padding:12px 8px}}
@media(max-width:767px){#contenido .grid,#contenido .meth-grid,#contenido .an-grid,#contenido .mu-stack{grid-template-columns:minmax(0,1fr)!important}#contenido .an-card{padding:16px}#contenido .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}#contenido .chart-wrap{height:280px}#contenido .longform-sec h2,#contenido .meth-h{font-size:18px}#contenido .mu-table-scroll table th:first-child,#contenido .mu-table-scroll table td:first-child{position:sticky;left:0;background:inherit;box-shadow:1px 0 0 var(--line);max-width:150px;min-width:100px;white-space:normal!important}#contenido table td:first-child{z-index:1}#contenido table th:first-child{z-index:11;background:var(--bg)!important}.mu-page-count{display:none}#contenido .kpi-value{white-space:normal}#contenido [style*="min-width"]{min-width:0}#contenido .mu-wide-grid{min-width:650px!important}.cal-heat{overflow-x:auto}.node-title{overflow-wrap:anywhere}}