/* sistema-visual.css — el sistema visual del rediseño (DIS-2, REDISENO-3NOV, 3-nov-2026; SISTEMA_VISUAL.md y las maquetas).
 * Rejilla de 12 columnas con dos anchos (datos a 12 columnas; prosa a 8 y su lectura en las 4 de la derecha), cabecera
 * compacta (.cab), fila de cifras con base (.cf), índice lateral (.idx), secciones numeradas (.sec), el gráfico de la casa
 * (.gf), la tabla densa (.td), los hechos «K de N» (.hechos), las N primeras (.top), el chip tipográfico (.chip), el aviso en
 * una línea (.linea-aviso) y la procedencia. Claro y oscuro con los mismos tokens (tokens.css, bloque DIS-2).
 * TODO va dentro de .sv: una página que no lleva .sv (hoy, todas) se pinta igual. Varias clases (.chip, .campo, .migas,
 * .rotulo, .nota, .procedencia, .sec, .gf-*…) ya existen en las hojas de antes con otro sentido: dentro de .sv mandan
 * estas, que pesan una clase más. Sin estilos en línea en las plantillas: las anchuras de las barras van en SVG (macros de
 * _componentes.html) y los altos de los gráficos, en clases o en la hoja de la página. */

/* ── Base dentro de .sv (el reinicio de márgenes, con :where: no pesa más que la regla de cada componente) ───────────────────────────────────────────────────────────────────────────── */
.sv { font-variant-numeric: tabular-nums; }
.sv :where(.h1, .h2, .rotulo, .sec-sub, .gf-titulo, .gf-base, .gf-fuente, .gf-leyenda, .cf p, .hechos > .hecho p, .hechos > .hecho .t, .hechos > .hecho .kn, .linea-aviso, .top, .idx ol, .procedencia dl, .procedencia dd) { margin: 0; }
.sv .gf { margin: 0; }
.sv .gf-lienzo svg { display: block; }

/* ── Rejilla: .pagina (ancho) y .rejilla (12 columnas) ─────────────────────────────────────────────── */
/* Una página del sistema (« sv» en <body>): la cabecera del sitio, la subnavegación y el pie van al mismo ancho y con el
   mismo margen que .pagina, para que el logo y el contenido empiecen en la misma línea */
body.sv { --ancho-pagina: var(--pagina); --margen-izq: max(var(--margen), env(safe-area-inset-left, 0px)); --margen-der: max(var(--margen), env(safe-area-inset-right, 0px)); }
.sv .pagina { max-width: var(--pagina); margin: 0 auto; padding: 0 max(var(--margen), env(safe-area-inset-right, 0px)) 0 max(var(--margen), env(safe-area-inset-left, 0px)); }
.sv .rejilla { display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr)); column-gap: var(--medianil); row-gap: 0; }
.sv .rejilla > * { min-width: 0; }
.sv .c12 { grid-column: span 12; } .sv .c8 { grid-column: span 8; } .sv .c6 { grid-column: span 6; } .sv .c4 { grid-column: span 4; } .sv .c3 { grid-column: span 3; }
.sv .c-lectura { grid-column: span 8; max-width: var(--lectura); }
.sv .c-lado { grid-column: span 4; }
@media (max-width: 1023px) { .sv :is(.c12, .c8, .c-lectura) { grid-column: span 8; } .sv :is(.c6, .c4, .c3, .c-lado) { grid-column: span 4; } }
@media (max-width: 767px) { .sv :is(.c12, .c8, .c6, .c4, .c3, .c-lectura, .c-lado) { grid-column: span 4; } }
.sv .dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.sv .tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
@media (max-width: 1023px) { .sv .tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sv :is(.dos, .tres) { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }

/* ── Cabecera de página (.cab): migas · rótulo · H1 en una línea · una línea de entradilla · acciones ── */
.sv .cab { padding: var(--sp-4) 0 var(--sp-3); border-bottom: 1px solid var(--color-borde-fuerte); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-6); align-items: end; }
.sv .cab > * { min-width: 0; }
.sv .cab .migas { grid-column: 1 / -1; margin: 0; font-size: var(--fs-nota); color: var(--color-texto-3); }
.sv .cab .migas a { color: var(--color-texto-3); }
.sv .rotulo { font-size: var(--fs-rotulo); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-2); }
.sv .rotulo b { color: var(--color-acento); font-weight: 600; }
.sv .h1 { font-family: var(--fuente-serif); font-weight: 400; font-size: var(--fs-h1); line-height: 1.12; letter-spacing: -0.01em; color: var(--color-texto-fuerte); text-wrap: balance; overflow-wrap: anywhere; }
.sv .h1 em { font-style: italic; color: var(--color-aviso); }
.sv .entradilla { color: var(--color-texto-2); font-size: var(--fs-cuerpo); line-height: 1.5; max-width: var(--lectura); margin-top: var(--sp-1); }
.sv .entradilla details { display: inline; }
.sv .entradilla summary { display: inline; cursor: pointer; color: var(--color-acento); list-style: none; }
.sv .entradilla summary::-webkit-details-marker { display: none; }
.sv .entradilla details[open] summary { display: none; }
.sv .perimetro { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; font-size: var(--fs-nota); color: var(--color-texto-2); margin-top: var(--sp-2); }
.sv .perimetro b { color: var(--color-texto); font-weight: 500; }
.sv .cab-acc { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.sv .cab-acc-fila { display: contents; }   /* en el PC no existe: sus botones van en la misma fila que se parte */
.sv .cab-meta { grid-column: 1 / -1; display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-nota); color: var(--color-texto-3); }
@media (max-width: 767px) {
    .sv .cab { grid-template-columns: minmax(0, 1fr); }
    .sv .cab .migas li:not(:nth-last-child(-n+2)) { display: none; }
    .sv .rotulo .opc { display: none; }
    .sv .entradilla { font-size: 14px; }
    .sv .cab-acc { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .sv .cab-acc::-webkit-scrollbar { display: none; }
    .sv .cab-acc > * { flex: 0 0 auto; }
    /* El botón principal (.con-principal), en su fila y entero: dentro de la fila que se desliza quedaba «Ver ›» (revisión de la PR 3) */
    .sv .cab-acc.con-principal { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
    .sv .cab-acc.con-principal > .boton-primario { flex: 1 1 100%; justify-content: center; }
    .sv .cab-acc-fila { display: flex; flex: 1 1 100%; gap: var(--sp-2); min-width: 0; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .sv .cab-acc-fila::-webkit-scrollbar { display: none; }
    .sv .cab-acc-fila > * { flex: 0 0 auto; }
}
/* Una fila que se desliza (acciones, segmentados, índice en píldoras): gf.js pone data-desliza="mas" mientras queda algo a
   la derecha y el borde se funde, para que se vea que sigue (defecto de las maquetas: «CS…» cortado sin aviso) */
.sv [data-desliza="mas"]::after { content: "›"; position: sticky; right: 0; z-index: 1; flex: 0 0 32px; align-self: stretch; display: grid; place-items: center end; margin-left: -32px; padding-right: 2px; background: linear-gradient(90deg, transparent, var(--color-fondo) 60%); color: var(--color-acento); font-size: 22px; line-height: 1; pointer-events: none; }

/* ── Controles: segmentado (.seg), mando con rótulo (.mando), campo (.campo, el select o el input) ───── */
.sv .seg { display: inline-flex; max-width: 100%; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-m); overflow: hidden; overflow-x: auto; scrollbar-width: none; background: var(--color-superficie); }
.sv .seg::-webkit-scrollbar { display: none; }
.sv .seg button { flex: 0 0 auto; height: 36px; padding: 0 12px; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--color-texto-2); cursor: pointer; white-space: nowrap; }
.sv .seg button + button { border-left: 1px solid var(--color-borde); }
.sv .seg button:hover { color: var(--color-acento); }
.sv .seg button[aria-pressed="true"] { background: var(--color-acento); color: var(--color-sobre-acento); }
.sv .seg a { flex: 0 0 auto; display: inline-flex; align-items: center; height: 36px; padding: 0 12px; font-size: 14px; color: var(--color-texto-2); text-decoration: none; white-space: nowrap; }
.sv .seg a + a { border-left: 1px solid var(--color-borde); }
.sv .seg a:hover { color: var(--color-acento); }
.sv .seg a[aria-current] { background: var(--color-acento); color: var(--color-sobre-acento); }
.sv .cuenta { border-color: var(--color-borde-fuerte); border-radius: var(--radio-m); }
.sv .cuenta .cuenta-opcion { min-height: 36px; font-size: 14px; }
.sv .cuenta .cuenta-opcion + .cuenta-opcion { border-left-color: var(--color-borde); }
.sv .mandos { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: flex-end; min-width: 0; }
.sv .mando { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 100%; }
.sv .mando > span { font-size: var(--fs-rotulo); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-3); }
.sv .campo { display: inline-block; flex-direction: initial; gap: 0; height: 36px; max-width: 100%; min-width: 0; padding: 0 10px; border: 1px solid var(--color-borde-control); border-radius: var(--radio-m); background-color: var(--color-superficie); color: var(--color-texto); font: inherit; font-size: 14px; }
.sv select.campo { appearance: none; -webkit-appearance: none; padding-right: 28px; background-image: linear-gradient(45deg, transparent 50%, var(--color-texto-2) 50%), linear-gradient(135deg, var(--color-texto-2) 50%, transparent 50%); background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
@media (pointer: coarse) { .sv .seg button, .sv .seg a, .sv .campo { height: var(--toque); } .sv .cuenta .cuenta-opcion { min-height: var(--toque); } }

/* ── Fila de cifras (.cf): 4-7 cifras con base, filetes en vez de cajas. .cf-hero: la primera, más ancha ── */
.sv .cf { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; margin: var(--sp-4) 0; border-top: 1px solid var(--color-borde-fuerte); border-bottom: 1px solid var(--color-borde); }
.sv .cf.cf-hero { grid-template-columns: minmax(0, 1.5fr); grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
.sv .cf > div { min-width: 0; padding: var(--sp-3) var(--sp-4); border-left: 1px solid var(--color-borde); }
.sv .cf > div:first-child { border-left: 0; padding-left: 0; }
.sv .cf .r { display: flex; gap: 6px; align-items: center; font-size: var(--fs-rotulo); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-3); }
.sv .cf .v { margin-top: 2px; font-size: var(--fs-cifra); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-texto-fuerte); font-variant-numeric: proportional-nums; overflow-wrap: break-word; }
.sv .cf .v a { color: var(--color-acento); text-decoration: none; }
.sv .cf .v a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.sv .cf .v small { margin-left: 2px; font-size: max(13px, 0.5em); font-weight: 500; letter-spacing: 0; color: var(--color-texto-2); }
.sv .cf .b { margin-top: 2px; font-size: var(--fs-nota); line-height: 1.35; color: var(--color-texto-2); }
.sv .cf .hero .v { font-size: clamp(28px, 2.9vw, var(--fs-hero)); color: var(--color-acento); }
@media (max-width: 767px) {
    .sv .cf, .sv .cf.cf-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; }
    .sv .cf > div { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; }
    .sv .cf > div:nth-child(odd) { border-left: 0; padding-left: 0; }
    .sv .cf > div:nth-child(even) { padding-left: var(--sp-3); }
    .sv .cf .v { font-size: 24px; }
    .sv .cf > .hero { grid-column: 1 / -1; padding-right: 0; }
    .sv .cf > .hero ~ div:nth-child(odd) { border-left: 1px solid var(--color-borde); padding-left: var(--sp-3); }
    .sv .cf > .hero ~ div:nth-child(even) { border-left: 0; padding-left: 0; }
    .sv .cf .hero .v { font-size: 32px; }
}

/* ── Cuerpo con índice lateral (.cuerpo, .idx) y secciones numeradas (.sec) ──────────────────────── */
.sv .cuerpo { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: var(--sp-10); align-items: start; }
.sv .cuerpo > * { min-width: 0; }
.sv .idx { position: sticky; top: calc(var(--cabecera-sitio) + 20px); font-size: var(--fs-nota); }
.sv .idx ol { list-style: none; padding: 0; border-left: 1px solid var(--color-borde); }
.sv .idx a { display: flex; gap: 8px; align-items: center; min-height: 32px; margin-left: -1px; padding: 6px 0 6px 12px; border-left: 2px solid transparent; color: var(--color-texto-2); line-height: 1.25; text-decoration: none; }
.sv .idx a b { color: var(--color-acento); font-weight: 600; font-variant-numeric: tabular-nums; }
.sv .idx a:hover, .sv .idx a[aria-current] { color: var(--color-texto-fuerte); border-left-color: var(--color-acento); }
.sv .idx-t { margin: 0 0 8px 12px; font-size: var(--fs-rotulo); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-3); }
.sv .sec { padding: var(--sp-8) 0; border-top: 1px solid var(--color-borde-fuerte); scroll-margin-top: calc(var(--cabecera-sitio) + 16px); }
.sv .sec:first-of-type { border-top: 0; padding-top: var(--sp-5); }
.sv .sec-cab { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 0 var(--sp-3); align-items: baseline; margin-bottom: var(--sp-4); }
.sv .sec-num { font-size: var(--fs-seccion); font-weight: 600; letter-spacing: -0.02em; color: var(--color-acento); }
.sv .h2 { font-family: var(--fuente-sans); font-size: var(--fs-seccion); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--color-texto-fuerte); }
.sv .sec-sub { grid-column: 2 / -1; margin-top: 2px; font-size: var(--fs-nota); color: var(--color-texto-2); }
.sv .sec-cab .chip { grid-column: 3; grid-row: 1; }
@media (max-width: 1023px) {
    .sv .cuerpo { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sv .idx { position: static; padding: 8px 0; border-bottom: 1px solid var(--color-borde); }
    .sv .idx ol { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border: 0; }
    .sv .idx ol::-webkit-scrollbar { display: none; }
    .sv .idx li { flex: 0 0 auto; }
    .sv .idx a { margin: 0; padding: 6px 10px; border: 1px solid var(--color-borde); border-radius: 999px; white-space: nowrap; }
    .sv .idx-t { display: none; }
    .sv .sec-cab { grid-template-columns: 36px minmax(0, 1fr); }
    .sv .sec-cab .chip { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 4px; }
}

/* ── Chip tipográfico (estado del registro, clase de un gráfico): texto y un punto; nunca color de juicio ── */
.sv .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--fs-rotulo); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texto-2); white-space: nowrap; }
.sv .chip:hover { border: 0; background: none; color: var(--color-texto-2); }
.sv .chip::before { content: ""; flex: none; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 2px; }
.sv .chip.pasa::before { background: var(--color-exito); border-color: var(--color-exito); border-radius: 50%; }
.sv .chip.hecho::before { background: var(--color-acento); border-color: var(--color-acento); border-radius: 50%; }
.sv .chip.nulo::before { border-radius: 50%; }
.sv .punto { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 6px; border-radius: 2px; vertical-align: -1px; }

/* ── El gráfico de la casa (.gf): huecos fijos (título = hallazgo · base · mandos · lienzo · leyenda y acciones · lectura
   plegada · fuente). Tamaños (D4): principal 400 px de alto (300 en el móvil), estándar 280 (220), mini 140 ─────── */
.sv .gf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.sv .gf-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--sp-6); align-items: end; margin-bottom: var(--sp-3); min-width: 0; }
.sv .gf-titulo { max-width: 80ch; font-size: var(--fs-grafico); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--color-texto-fuerte); text-wrap: balance; }
.sv .gf-base { grid-column: 1; font-size: var(--fs-nota); color: var(--color-texto-2); }
.sv .gf-mandos { grid-column: 1 / -1; margin-top: var(--sp-2); }
.sv .gf-lienzo { position: relative; width: 100%; min-width: 0; min-height: var(--alto, 320px); }
.sv .gf-lienzo svg { width: 100%; height: auto; font-family: var(--fuente-sans); }
.sv .gf-lienzo text { font-size: 13px; fill: var(--dato-texto); font-variant-numeric: tabular-nums; }
.sv .gf-lienzo .eje line, .sv .gf-lienzo .eje path { stroke: var(--dato-eje); shape-rendering: crispEdges; }
.sv .gf-lienzo .rejilla line { stroke: var(--dato-rejilla); shape-rendering: crispEdges; }
.sv .gf-lienzo .etq { fill: var(--color-texto); font-weight: 600; }
.sv .gf-lienzo .etq-2 { fill: var(--color-texto-2); }
.sv .gf-lienzo :focus-visible { outline: 2px solid var(--color-acento); outline-offset: 1px; }
.sv .gf-lienzo a { text-decoration: none; }
/* Barras que crecen desde la base al entrar en pantalla (gf_anual.js: .gf-espera fuera, .gf-visto dentro); con «reducir
   movimiento», ni espera ni transición */
.sv .gf-barras { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sv .gf.gf-espera .gf-barras { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) { .sv .gf-barras { transition: none; } .sv .gf.gf-espera .gf-barras { transform: none; } }
.sv .gf-vacio { display: grid; place-items: center; min-height: inherit; font-size: 14px; color: var(--color-texto-2); }
/* Alto exacto reservado por el servidor (un SVG vacío con su altura, uno para el PC y otro para el móvil): el que dibuja el
   guion lo sustituye sin mover la página. Con él, el --alto del tamaño no manda */
.sv .gf-reserva { display: block; width: 100%; }
@media (max-width: 767px) { .sv .gf-reserva.pc { display: none; } }
@media (min-width: 768px) { .sv .gf-reserva.movil { display: none; } }
.sv .gf-lienzo:has(> .gf-reserva) { min-height: 0; }
.sv .gf-principal { --alto: 400px; }
.sv .gf-estandar { --alto: 280px; }
.sv .gf-mini { --alto: 140px; }
.sv .gf-pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-6); align-items: start; margin-top: var(--sp-2); min-width: 0; }
.sv .gf-leyenda { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); padding: 0; list-style: none; font-size: var(--fs-nota); color: var(--color-texto-2); }
.sv .gf-leyenda li { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.sv .gf-leyenda li.off { opacity: 0.45; }
.sv .gf-leyenda button { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.sv .gf-acc { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; align-items: center; }
.sv .gf-acc a, .sv .gf-acc button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 9px; border: 0; border-radius: var(--radio-s); background: transparent; font: inherit; font-size: var(--fs-nota); color: var(--color-texto-2); text-decoration: none; cursor: pointer; }
.sv .gf-acc a:hover, .sv .gf-acc button:hover { background: var(--color-fondo-hundido); color: var(--color-acento); }
.sv .gf-acc .icono { width: 14px; height: 14px; }
.sv .gf-aviso { font-size: var(--fs-nota); color: var(--color-texto-2); }
.sv .gf-lectura { grid-column: 1 / -1; margin-top: var(--sp-2); border-top: 1px solid var(--color-borde); }
.sv .gf-lectura > summary { display: flex; gap: var(--sp-4); align-items: center; min-height: var(--toque); list-style: none; cursor: pointer; font-size: var(--fs-nota); color: var(--color-texto-2); }
.sv .gf-lectura > summary::-webkit-details-marker { display: none; }
.sv .gf-lectura > summary b { font-weight: 500; color: var(--color-texto); }
.sv .gf-lectura > summary::after { content: "+"; margin-left: auto; font-size: 18px; color: var(--color-texto-3); }
.sv .gf-lectura[open] > summary::after { content: "–"; }
.sv .cuerpo-lectura { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4) var(--sp-8); padding: var(--sp-2) 0 var(--sp-4); font-size: 14px; color: var(--color-texto-2); }
.sv .cuerpo-lectura b { display: block; margin-bottom: 2px; color: var(--color-texto); }
.sv .cuerpo-lectura [data-panel="datos"] { grid-column: 1 / -1; }   /* los datos (una tabla, casi siempre), a todo el ancho */
.sv .gf-fuente { margin-top: var(--sp-2); font-size: var(--fs-nota); color: var(--color-texto-3); }
@media (max-width: 767px) {
    .sv .gf-principal { --alto: 300px; }
    .sv .gf-estandar { --alto: 220px; }
    .sv .gf-cab, .sv .gf-pie { grid-template-columns: minmax(0, 1fr); }
    .sv .gf-acc { justify-content: flex-start; }
    .sv .gf-lectura > summary span { display: none; }
}
/* El globo: uno por página, añadido al final de <body> por gf.js (fuera de .sv si .sv no es el <body>) */
.gf-globo { position: fixed; z-index: var(--z-popover); display: none; min-width: 140px; max-width: 300px; padding: 8px 10px; border: 1px solid var(--color-borde-fuerte); border-radius: var(--radio-m); background: var(--color-superficie); box-shadow: 0 8px 24px rgba(20, 24, 31, 0.14); color: var(--color-texto); font-family: var(--fuente-sans); font-size: 13px; line-height: 1.35; font-variant-numeric: tabular-nums; pointer-events: none; }
.gf-globo.ver { display: block; }
.gf-globo .t { display: block; font-size: 15px; font-weight: 600; color: var(--color-texto-fuerte); }
.gf-globo .f { display: flex; gap: 10px; justify-content: space-between; }
.gf-globo .f strong { font-weight: 600; }
.gf-globo .f i { display: inline-block; width: 10px; height: 2px; margin-right: 5px; vertical-align: 3px; }
.gf-globo .nota { display: block; margin-top: 4px; color: var(--color-texto-2); }

/* ── Tabla densa (.td): cabecera fija, filas de 36 px (44 con el dedo), cifras a la derecha, barra en celda; en el móvil
   sin tarjetas: las columnas .opc se pliegan en la fila desplegable (.td-resto) ─────────────────────────────── */
.sv .td-marco { position: relative; max-width: 100%; overflow: auto; border-top: 2px solid var(--color-borde-fuerte); }
.sv .td-marco.td-alto { max-height: 560px; }
.sv .td { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.sv .td :is(th, td) { height: 36px; padding: 0 10px; border-bottom: 1px solid var(--color-borde); text-align: left; vertical-align: middle; white-space: nowrap; }
.sv .td :is(th, td):first-child { padding-left: 0; }
.sv .td :is(th, td):last-child { padding-right: 0; }
.sv .td thead th { position: sticky; top: 0; z-index: 2; height: 34px; background: var(--color-fondo); font-size: var(--fs-rotulo); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-texto-3); }
.sv .td thead th button { display: inline-flex; gap: 4px; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.sv .td thead th[aria-sort] button::after { content: "↓"; font-size: 12px; color: var(--color-acento); }
.sv .td thead th[aria-sort="ascending"] button::after { content: "↑"; }
.sv .td .n { text-align: right; font-variant-numeric: tabular-nums; }
.sv .td .nombre { max-width: 34ch; white-space: normal; line-height: 1.25; }
.sv .td .nombre a { color: var(--color-texto); font-weight: 500; text-decoration: none; }
.sv .td .nombre a:hover { color: var(--color-acento); text-decoration: underline; }
.sv .td .nombre .corto { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.5em; overflow-wrap: break-word; }
.sv .td .n .sub { display: inline; margin-left: 6px; }
.sv .td .sub { display: block; max-width: 60ch; font-size: var(--fs-nota); font-weight: 400; letter-spacing: 0; text-transform: none; white-space: normal; color: var(--color-texto-3); }
.sv .td tbody tr:hover > * { background: var(--color-fondo-hundido); }
.sv .td-grupo th { height: 32px; padding-top: var(--sp-3); background: var(--color-fondo); font-size: var(--fs-rotulo); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-2); }
.sv .td-barra { display: inline-grid; grid-template-columns: var(--w, 120px) auto; gap: 8px; align-items: center; }
.sv .td-barra svg { display: block; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; }
.sv .td-barra .fondo { fill: var(--color-borde); }
.sv .td-barra .valor { fill: var(--dato-1); }
.sv .td-apilada { display: block; width: var(--w, 200px); height: 8px; }
.sv .td-resto { display: none; }
.sv .td-resto > td { padding: var(--sp-2) 0 var(--sp-3); white-space: normal; font-size: var(--fs-nota); color: var(--color-texto-2); }
.sv .td tr.abierta + .td-resto { display: table-row; }
.sv .td-mas { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--color-texto-3); cursor: pointer; }
.sv .td-mas:hover { background: var(--color-fondo-hundido); color: var(--color-acento); }
.sv .td-mas .icono { width: 16px; height: 16px; transition: transform var(--mov-rapido); }
.sv tr.abierta .td-mas .icono { transform: rotate(180deg); }
.sv .td-pie { display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; flex-wrap: wrap; min-height: var(--toque); margin-top: 2px; border-top: 1px solid var(--color-borde); font-size: var(--fs-nota); color: var(--color-texto-2); }
@media (max-width: 767px) {
    .sv .td :is(th, td).opc { display: none; }
    .sv .td :is(th, td) { height: 44px; padding: 0 6px; }
    .sv .td .nombre { max-width: 16ch; }
    .sv .td .sub { max-width: 24ch; }
    .sv .td-barra { --w: 40px; }
    .sv .td-apilada { --w: 56px; }
}
.sv .td .td-col-mas { width: 1%; text-align: right; }
@media (min-width: 768px) { .sv .td .td-col-mas.td-solo-movil { display: none; } }

/* ── Posición de un valor en su grupo (.pos): punto y mediana en una pista de 110 px (SVG de la macro) ── */
.sv .pos-pista { display: inline-grid; grid-template-columns: 110px auto; gap: 8px; align-items: center; }
.sv .pos-pista svg { display: block; width: 110px; height: 14px; overflow: visible; }
.sv .pos-pista .pista-fondo { fill: var(--color-borde); }
.sv .pos-pista .mediana { fill: var(--color-texto-2); }
.sv .pos-pista .valor { fill: var(--dato-1); stroke: var(--color-fondo); stroke-width: 2; }

/* ── Hechos «K de N» en una fila (.hechos) ──────────────────────────────────────────────────────── */
.sv .hechos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.sv .hechos > .hecho { min-width: 0; padding-top: var(--sp-3); border-top: 1px solid var(--color-borde-fuerte); }   /* no .sv .hecho: el chip .chip.hecho no lleva filete */
.sv .hechos > .hecho .kn { font-size: var(--fs-cifra); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-acento); font-variant-numeric: proportional-nums; }
.sv .hechos > .hecho .kn small { margin-left: 6px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--color-texto-2); }
.sv .hechos > .hecho .t { margin-top: 2px; font-size: var(--fs-cuerpo); font-weight: 600; color: var(--color-texto-fuerte); }
.sv .hechos > .hecho p { margin-top: 4px; font-size: 14px; color: var(--color-texto-2); }
.sv .hechos > .hecho .meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-top: var(--sp-2); font-size: var(--fs-nota); }
@media (max-width: 767px) { .sv .hechos { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } }

/* ── Las N primeras con barra (.top) ─────────────────────────────────────────────────────────────── */
.sv .top { display: grid; gap: 2px; padding: 0; list-style: none; }
.sv .top li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 0 10px; align-items: center; min-height: 40px; border-bottom: 1px solid var(--color-borde); }
.sv .top .pos { font-size: var(--fs-nota); color: var(--color-texto-3); }
.sv .top .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-texto); font-weight: 500; text-decoration: none; }
.sv .top .nom:hover { color: var(--color-acento); }
.sv .top .val { text-align: right; font-size: 14px; font-weight: 600; }
.sv .top .val small { display: block; font-size: var(--fs-nota); font-weight: 400; color: var(--color-texto-3); }
.sv .top .bar { grid-column: 2 / 4; display: block; width: 100%; height: 5px; margin-bottom: 8px; }
.sv .top .bar .fondo { fill: var(--color-borde); }
.sv .top .bar .valor { fill: var(--dato-1); }

/* ── Nota, aviso en una línea y procedencia (la macro C.procedencia, en cuatro columnas) ─────────────── */
.sv .nota { font-size: var(--fs-nota); line-height: 1.45; color: var(--color-texto-2); }
.sv .linea-aviso { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: var(--sp-3) 0; padding-left: 12px; border-left: 2px solid var(--color-aviso-adorno); font-size: 14px; color: var(--color-texto-2); }
.sv .linea-aviso b { color: var(--color-texto); }
.sv .procedencia { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--color-borde-fuerte); font-size: var(--fs-nota); color: var(--color-texto-2); }
.sv .procedencia .procedencia-titulo { display: flex; gap: 6px; align-items: center; margin: 0 0 var(--sp-3); font-family: var(--fuente-sans); font-size: var(--fs-rotulo); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-3); }
.sv .procedencia dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.sv .procedencia dt { font-size: var(--fs-rotulo); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-texto-3); }
.sv .procedencia dd { margin-top: 2px; }
.sv .mono { font-family: var(--fuente-mono); font-size: 0.92em; }
@media (max-width: 767px) { .sv .oculto-movil { display: none; } }

/* ── Zonas táctiles de 40 px con el dedo, sin mover el flujo (relleno y margen negativo) ───────────── */
@media (pointer: coarse), (max-width: 767px) {
    .sv :is(.cab .migas a, .entradilla summary, .td td a, .td-pie a, .top .nom, .gf-leyenda button, .procedencia a, .linea-aviso a, .cf .v a, .cf .b a) { display: inline-block; padding: 12px 0; margin: -12px 0; }
    .sv :is(.entradilla summary, .cf .v a, .td td.n a) { min-width: var(--toque); padding-inline: 6px; margin-inline: -6px; text-align: center; }
    .sv .gf-acc :is(a, button) { height: var(--toque); }
    .sv .idx a { min-height: var(--toque); }
    .sv .td-mas { width: var(--toque); height: var(--toque); }
    .sv .td thead th button { min-height: var(--toque); }
}