/* ══════════════════════════════════════════════════════════════════
   MGL · componentes comunes del inicio institucional y de los reportes (T-022).
   Una sola definición: dominio (D-43), cifra destacada (D-44), sello con su globo
   (D-48), tablas y el bloque «Fuentes y corte». Solo lee tokens.
   ══════════════════════════════════════════════════════════════════ */

.icono { width: var(--icono-tamano); height: var(--icono-tamano); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* dominio: cada bloque toma el color de su dato (D-43) */
.dominio-neutro { --dominio-fondo: var(--dominio-neutro-fondo); --dominio-acento: var(--dominio-neutro-acento); }
.dominio-lengua { --dominio-fondo: var(--dominio-lengua-fondo); --dominio-acento: var(--dominio-lengua-acento); }
.dominio-oferta { --dominio-fondo: var(--dominio-oferta-fondo); --dominio-acento: var(--dominio-oferta-acento); }
.dominio-diferencia { --dominio-fondo: var(--dominio-diferencia-fondo); --dominio-acento: var(--dominio-diferencia-acento); }

/* cifra destacada (D-44) */
.cifra-panel {
  display: flex; flex-direction: column; min-width: 0; padding: var(--e-3) var(--e-3) var(--e-2);
  background: var(--dominio-fondo); border-top: var(--cifra-filete-dominio) solid var(--dominio-acento);
}
.cifra-panel p { margin: 0; max-width: none; }
.cifra-panel-rotulo { font-size: var(--t-nota); line-height: var(--i-nota); font-weight: 700; color: var(--texto-2); }
.cifra-panel-valor { display: flex; align-items: center; gap: var(--e-2); margin: var(--e-1) 0; }
.cifra-icono { width: var(--cifra-icono); height: var(--cifra-icono); color: var(--dominio-acento); }
.cifra-panel-valor .valor { font-size: var(--cifra-destacada); line-height: 1; font-weight: 800; white-space: nowrap; }
.cifra-panel-contexto { font-size: var(--t-nota); line-height: var(--i-nota); color: var(--texto-2); }
.cifra-panel-pie { padding-top: var(--e-2); }
.cifra-panel--sin-valor .valor { padding: var(--e-1) 0; font-size: var(--t-control); line-height: var(--i-control); font-weight: 700; white-space: normal; }
.cifra-panel--pendiente { border-top: var(--cifra-filete-pendiente); }

/* ══════════════ Modernización (T-120 F0; direccion-modernizacion.md §5.4) ══════════════
   Una pieza por función: hoja, cifra, estado, calificador y el pie de la figura. El color va al dato
   (la barra y el punto de la ceja), nunca a la tarjeta (M1). */

/* hoja: blanca, filete y sombra; radio 12. Si toda la hoja es clicable, un solo enlace con ::after */
.hoja, .cifra { background: var(--superficie); border: var(--hoja-borde); border-radius: var(--hoja-radio); box-shadow: var(--hoja-sombra); }
.hoja--clicable { position: relative; transition: border-color var(--duracion-corta) var(--curva), transform var(--duracion-corta) var(--curva-entrada); }
.hoja--clicable:active { transform: var(--hoja-pulsada); }
.hoja--clicable:has(a:focus-visible) { outline: var(--foco-anillo); box-shadow: var(--foco-interior); }
.hoja-enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hoja-enlace:focus-visible { outline: none; background: none; box-shadow: none; }

/* cifra en tres tamaños: ceja (punto, nombre y periodo), valor, rótulo, barra, contexto, fuente y estado */
.cifra { --cifra-dominio: var(--texto); --cifra-tam: var(--inst-t-cifra-m); position: relative; display: flex; flex-direction: column; gap: var(--cifra-hueco); min-width: 0; padding: var(--hoja-relleno-tarjeta); }
.cifra--l { --cifra-tam: var(--inst-t-cifra-l); }
.cifra--s { --cifra-tam: var(--inst-t-cifra-s); }
.cifra--lengua { --cifra-dominio: var(--dato-lengua); }
.cifra--escuela { --cifra-dominio: var(--dato-escuela); }
.cifra--no-llega { --cifra-dominio: var(--clases-sin); }   /* sin clases en su lengua: el ocre de la casa, 6,71:1 */
.cifra p { margin: 0; max-width: none; }
.cifra-ceja { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-2); color: var(--texto-3); font-size: var(--inst-t-meta); line-height: var(--inst-i-meta); }
.cifra-ceja-nombre { display: inline-flex; align-items: center; gap: var(--e-2); min-width: 0; color: var(--texto-2); font-weight: 700; }
.cifra-punto { flex: none; width: var(--cifra-punto); height: var(--cifra-punto); border-radius: 50%; background: var(--cifra-dominio); }
.cifra-valor { color: var(--texto); font-size: var(--cifra-tam); line-height: var(--inst-i-cifra); font-weight: 800; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.cifra--no-llega .cifra-valor { color: var(--cifra-dominio); }
.cifra-valor--sin { color: var(--texto-2); font-size: var(--inst-t-cifra-s); font-weight: 700; }
.cifra-rotulo { font-size: var(--inst-t-cuerpo); line-height: var(--inst-i-cuerpo); font-weight: 700; }
.cifra-barra { display: block; width: 100%; height: var(--cifra-barra-alto); border-radius: var(--cifra-barra-radio); }
.cifra-barra-pista, .cifra-barra .barra-pista { fill: var(--dato-pista); }
.cifra-barra-relleno, .cifra-barra .barra-relleno { fill: var(--cifra-dominio); }
.cifra-contexto { color: var(--texto-2); font-size: var(--inst-t-meta); line-height: var(--inst-i-meta); }
.cifra .cifra-fuente { margin-top: var(--e-2); }   /* sigue al contenido a 16 px; sin anclarse abajo, que dejaba huecos (QA D8) */
.cifra-fuente { color: var(--texto-3); font-size: var(--inst-t-meta); line-height: var(--inst-i-meta); }
.cifra > .estado, .cifra > .calificador { align-self: flex-start; }
.cifra--cargando { min-height: var(--cifra-alto-m); background: var(--fondo-esqueleto); }
.cifra--l.cifra--cargando { min-height: var(--cifra-alto-l); }
.cifra--s.cifra--cargando { min-height: var(--cifra-alto-s); }
/* franja de cifras: 3 o 4 por fila, sin huecos (M7) */
.franja { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cifra-franja-min)), 1fr)); gap: var(--e-4); margin: 0; padding: 0; list-style: none; }

/* ceja, definición («Definición ▸» o «¿Qué cuenta? ▸»), leyenda y pie de la cifra: comunes al inicio y a la Mesa (T-120 F2) */
.cifra-definicion { position: static; }   /* el panel se ancla a su hoja (.cifra), no al resumen: no sale de ella (QA F2, 3) */
.cifra-definicion > summary { display: inline-flex; align-items: center; white-space: nowrap; min-height: var(--objetivo-minimo); padding: 0 var(--e-1); color: var(--accion); font-weight: 700; cursor: pointer; list-style: none; text-decoration: underline; text-underline-offset: 3px; }
.cifra-definicion > summary::-webkit-details-marker { display: none; }
.cifra-definicion > summary::after { content: "▸"; margin-left: var(--e-1); text-decoration: none; }
.cifra-definicion[open] > summary::after { content: "▾"; }
.cifra-definicion[open] .definicion-lista { position: absolute; left: var(--e-2); right: var(--e-2); z-index: 5; padding: var(--e-3); background: var(--superficie); border: var(--hoja-borde); border-radius: var(--inst-radio-interior); box-shadow: var(--hoja-sombra); }
.definicion-lista { display: grid; gap: var(--e-1); margin: 0; color: var(--texto); font-size: var(--inst-t-meta); line-height: var(--inst-i-meta); }
.definicion-lista div { display: grid; grid-template-columns: var(--definicion-rotulo) minmax(0, 1fr); gap: var(--e-2); }
.definicion-lista dt { color: var(--texto-2); font-weight: 700; }
.definicion-lista dd { margin: 0; }
.cifra-leyenda { font-size: var(--inst-t-meta); line-height: var(--inst-i-meta); font-weight: 700; }
.cifra-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-1) var(--e-2); }
.cifra-periodo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-2); }
.cifra-pie .cifra-fuente { margin: 0; }
.cifra-enlace { display: inline-flex; align-items: center; min-height: 24px; font-size: var(--inst-t-meta); font-weight: 700; }   /* T-134: 2.5.8 */
/* tramas de las figuras (patrones de reportes/_tramas.html): comunes al inicio, la Mesa y los reportes */
.tramas { position: absolute; width: 0; height: 0; overflow: hidden; }
.trama-fondo { fill: var(--superficie); }
.trama-linea { fill: var(--focos-isla-trama); }
.trama-linea-clara { fill: var(--superficie); }

/* estado del indicador (ADR-0016 v2 §8): el texto dice el estado; el color acompaña */
.estado {
  display: inline-flex; align-items: center; flex: none; box-sizing: border-box; min-height: var(--estado-alto); max-width: 100%; padding: var(--e-0) var(--e-2);
  border: var(--estado-borde); border-radius: var(--estado-radio); background: var(--superficie); color: var(--texto);
  font: 700 var(--estado-texto)/var(--inst-i-titular) var(--fuente-ui); font-variant-numeric: lining-nums;   /* parte en dos líneas antes que salirse de su caja (QA D3) */
}
/* D-098: sin etiqueta de estado del dato en pantalla, reporte ni PDF (`estados.MOSTRAR_ESTADO_DATO`). El botón
   «Fuentes» lleva la misma clase y se queda: dice solo «Fuentes». */
.estado:not(.sello--boton) { display: none; }
.estado--provisional { border-color: var(--aviso); background: var(--aviso-suave); color: var(--aviso); }
.estado--registro { border-color: var(--oferta-acento); color: var(--oferta-acento); }
.estado--revision { border-style: dashed; border-color: var(--dif-p4); color: var(--dif-p4); }
.estado--contexto { border-color: var(--borde-control); background: var(--fondo-sutil); color: var(--texto-2); }
/* calificador del dato (no es un estado ni un botón): Dotación planificada, 2026 preliminar, Vista en prueba */
.calificador {
  display: inline-flex; align-items: center; flex: none; box-sizing: border-box; min-height: var(--estado-alto); max-width: 100%; padding: var(--e-0) var(--e-2);
  border: var(--calificador-borde); border-radius: var(--calificador-radio); background: var(--calificador-fondo); color: var(--calificador-texto);
  font: 700 var(--inst-t-meta)/var(--inst-i-titular) var(--fuente-ui); font-variant-numeric: lining-nums;
}
.marcas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; }

/* pie de la figura: una fila con la fuente a la izquierda y «Ver los datos ▸», CSV y «Cómo leer ▸» a la
   derecha; lo que se abre baja a todo el ancho, debajo (::details-content), sin mover los rótulos */
/* sin filete: el pie es texto; a 16 px del cuerpo (interior de la hoja) */
.figura-pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-4); margin: var(--figura-pie-hueco) 0 0; }
.figura-pie .figura-fuente { flex: 1 1 18rem; margin: 0; max-width: none; color: var(--texto-3); font-size: var(--inst-t-meta); line-height: var(--inst-i-meta); }
/* un relleno de 4 px para que el anillo de foco (3 px y su interior de tinta) no muerda el texto (QA D10) */
.figura-pie-enlace, .figura-plegable > summary { display: inline-flex; align-items: center; min-height: var(--objetivo); padding: 0 var(--e-1); border-radius: var(--radio-control); color: var(--accion); font-size: var(--inst-t-meta); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.figura-plegable { display: contents; }
.figura-plegable > summary { order: 1; gap: var(--e-1); list-style: none; cursor: pointer; }
.figura-plegable > summary::-webkit-details-marker { display: none; }
.figura-plegable > summary::after { content: "▸"; text-decoration: none; }
.figura-plegable[open] > summary::after { content: "▾"; }
.figura-pie-enlace { order: 1; }
.figura-plegable::details-content { order: 2; flex: 1 1 100%; min-width: 0; }
.figura-plegable:not([open])::details-content { display: none; }
.figura-plegable[open]::details-content { padding-top: var(--e-2); }
/* sin ::details-content (navegadores anteriores a 2024): cada plegable baja entero, a todo el ancho */
@supports not selector(::details-content) {
  .figura-plegable { display: block; flex: 1 1 100%; }
}
@media (hover: hover) and (pointer: fine) {
  .hoja--clicable:hover { border-color: var(--hoja-borde-activo); }
}
@media (prefers-reduced-motion: reduce) {
  .hoja--clicable:active { transform: none; }
}

/* sello con sus fuentes en un globo (D-48): el globo nunca es la única vía; «Fuentes y corte» dice lo mismo */
.sello { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-nota); color: var(--texto-2); }
.sello-ico { width: var(--sello-icono); height: var(--sello-icono); }
.sello-fuente { position: relative; display: inline-flex; align-items: center; gap: var(--e-1); }
/* El sello de una figura es el estado de su indicador (.estado, D-m6) hecho botón: abre el globo de sus fuentes.
   Sin estado decidido, una etiqueta neutra «Fuentes». */
.sello--boton { cursor: help; }
.sello--boton:hover { text-decoration: underline; }
.sello--fuentes {
  height: var(--etiqueta-alto); padding: 0 var(--e-2);
  background: var(--superficie); border: 1px solid var(--borde-control); border-radius: var(--radio-etiqueta);
  color: var(--texto-2); font: 700 var(--estado-texto)/1 var(--fuente-ui);
}
.sello-globo {
  display: none; position: absolute; left: 0; bottom: 100%; z-index: 30;
  width: max-content; max-width: var(--sello-globo-ancho); padding: var(--e-2) var(--e-3);
  border-bottom: var(--sello-globo-puente) solid transparent; background: var(--tooltip-fondo); background-clip: padding-box;
  border-radius: var(--radio-control); color: var(--tooltip-texto); font-size: var(--t-nota); line-height: var(--i-nota); font-weight: 400;
}
/* En pantallas táctiles el sello conserva su dibujo, pero su área de toque llega a 44 px (T-029 B3): una capa
   transparente que no hace crecer la línea. */
@media screen and (max-width: 720px), screen and (pointer: coarse) {
  .sello--boton { position: relative; }
  .sello--boton::after { content: ""; position: absolute; inset: calc((var(--etiqueta-alto) - var(--tactil)) / 2) 0; }
}
.sello-fuente:hover .sello-globo, .sello-fuente:focus-within .sello-globo, .sello-fuente[data-abierto] .sello-globo { display: block; }
.sello-fuente[data-cerrado] .sello-globo { display: none; }
.sello-claves { display: none; }

/* tablas de trabajo */
.caja-tabla { position: relative; max-width: 100%; overflow-x: auto; }
/* pista de desplazamiento (armazon.js): el borde por donde la tabla sigue se desvanece */
.caja-tabla--sigue { -webkit-mask-image: linear-gradient(to right, black calc(100% - var(--pista-desplazamiento)), transparent); mask-image: linear-gradient(to right, black calc(100% - var(--pista-desplazamiento)), transparent); }
.caja-tabla--antes { -webkit-mask-image: linear-gradient(to left, black calc(100% - var(--pista-desplazamiento)), transparent); mask-image: linear-gradient(to left, black calc(100% - var(--pista-desplazamiento)), transparent); }
.caja-tabla--sigue.caja-tabla--antes { -webkit-mask-image: linear-gradient(to right, transparent, black var(--pista-desplazamiento), black calc(100% - var(--pista-desplazamiento)), transparent); mask-image: linear-gradient(to right, transparent, black var(--pista-desplazamiento), black calc(100% - var(--pista-desplazamiento)), transparent); }
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabla th, .tabla td { height: var(--tabla-fila-alto-densa); padding: var(--e-1) var(--e-3); text-align: left; vertical-align: middle; border-bottom: var(--tabla-fila-filete); }
.tabla thead th { border-bottom: var(--tabla-cabecera-filete); font-weight: 700; white-space: nowrap; vertical-align: bottom; }
.tabla tbody th { font-weight: 500; }
.tabla td.n { white-space: nowrap; }

/* «Fuentes y corte»: una sola vez por página (D-48) */
.fuentes-corte { margin-top: var(--inst-ritmo-seccion); padding: var(--e-5); background: var(--superficie); border: 1px solid var(--filete-suave); border-top: var(--filete-cuadro); }
.fuentes-corte h2 { margin-bottom: var(--e-3); font-size: var(--inst-t-seccion); line-height: var(--i-h3); }
.fuentes-sub { margin: var(--e-4) 0 var(--e-2); font-size: var(--t-control); }
.fuentes-lista, .fuentes-avisos { display: grid; gap: var(--e-2); margin: 0; padding-left: 1.4em; line-height: var(--i-nota); max-width: var(--ancho-prosa); }
/* leyenda de los estados (D-m6): la columna de las píldoras mide lo que la más larga («Registro administrativo») */
.sellos-leyenda { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-2) var(--e-3); align-items: center; margin: 0; }
.sellos-leyenda div { display: contents; }
.sellos-leyenda dt { justify-self: start; }
.sellos-leyenda dd { margin: 0; line-height: var(--i-nota); }
.fuentes-nota { margin: var(--e-3) 0 0; font-size: var(--t-nota); color: var(--texto-2); }

@media (max-width: 720px) {
  .sellos-leyenda { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); }
  .sellos-leyenda div + div > dt { margin-top: var(--e-2); }
  .fuentes-corte { padding: var(--e-4); }
}
@media print {
  .cifra-panel { print-color-adjust: exact; -webkit-print-color-adjust: exact; break-inside: avoid; }
  .sello-globo { display: none; }
  .sello-claves { display: inline; font-size: var(--t-nota); color: var(--texto-2); }
  .figura-plegable > summary::after { content: none; }
  /* al imprimir una vista, «Cómo leer» sale abierto (D-39 en el papel) */
  .figura-plegable.como-leer::details-content { display: block; content-visibility: visible; }
  .hoja, .cifra { box-shadow: none; break-inside: avoid; }
}

/* Capa HB del mapa institucional (T-124): la intensidad de la clase sobre el color del idioma (.c-idioma-*).
   En una casilla, un velo del fondo del mapa encima del color; en el SVG de la hoja impresa, la opacidad del
   relleno. Es la misma mezcla que hace mapa.js en el lienzo. Vive aquí porque la usan el mapa y la hoja. */
.hb-alfa-0 { --hb-alfa: var(--mapa-hb-alfa-0); }
.hb-alfa-1 { --hb-alfa: var(--mapa-hb-alfa-1); }
.hb-alfa-2 { --hb-alfa: var(--mapa-hb-alfa-2); }
.hb-alfa-3 { --hb-alfa: var(--mapa-hb-alfa-3); }
.hb-alfa-4 { --hb-alfa: var(--mapa-hb-alfa-4); }
[class*="hb-alfa-"] {
  --hb-velo: color-mix(in srgb, var(--mapa-fondo) calc(100% - 100% * var(--hb-alfa)), transparent);
  background-image: linear-gradient(var(--hb-velo), var(--hb-velo));
  fill-opacity: var(--hb-alfa);
}

/* T-130: titulares y rótulos sin viudas. Solo en textos cortos: la prosa larga y las tablas no se tocan. Sin soporte, nada cambia. */
.cifra-rotulo, .mesa-cifra-rotulo, .accion-titulo, .tarjeta-titular, .rep-toponimo, .rep-subtitulo { text-wrap: balance; }
.cifra-contexto, .accion-nota, .inicio-entradilla, .tarjeta-subtitulo, .mesa-hallazgo-sub, .cifra-fuente { text-wrap: pretty; }