/* sistema.css — la lámina del sistema (EST-1, 26-oct-2026; norma de toda PR de interfaz, RUMBO §5 D5.1).
 *
 * No cambia el lenguaje de la casa (Instrument Serif + Inter + JetBrains Mono, marino #1f4068, raya tricolor): lo ordena.
 * La guía viva está en /_estilo#sistema. Solo actúa sobre las clases e1-* y sobre lo que va dentro de un contenedor .e1:
 * una página que no las usa se pinta igual que antes.
 * 1. Escala: texto en pasos de 1 px (12 rótulo · 13 nota · 14 dato · 15 lectura) y titulares y cifras en serif con una
 *    relación fija de 1,25 (20 · 25 · 32 · 40 · 50). Interlíneas múltiplos de 4 px. En el móvil, titulares y cifras bajan
 *    un paso de la misma escala.
 * 2. Tres niveles: CIFRA (serif, cifras tabulares, tinta o marino si lleva a su detalle) / RÓTULO (12 px, 600, mayúsculas
 *    espaciadas, gris 2) / NOTA (13 px, gris 3: la base y la ventana de la cifra). La lectura, 15 px en tinta, a 68 ch.
 *    Dos pesos: 400 y 600.
 * 3. Ritmo: la rejilla de 4/8 px de tokens.css (--sp-1 … --sp-12).
 * 4. Filetes en vez de cajas: ni fondos tintados ni tarjetas dentro de tarjetas. Los colores son los tokens de la casa, y
 *    por eso el modo oscuro funciona igual.
 * 5. Revelado progresivo: bloques plegados con su cifra en la línea, salvo el primero; textos fijos en una línea plegable;
 *    índice fijo (escritorio) y saltos (móvil); pestañas de ficha; tablas que en el móvil pasan a filas legibles.
 */
:root {
    --e1-12: 0.75rem;   --e1-13: 0.8125rem; --e1-14: 0.875rem;  --e1-15: 0.9375rem;
    --e1-20: 1.25rem;   --e1-25: 1.5625rem; --e1-32: 2rem;      --e1-40: 2.5rem;    --e1-50: 3.125rem;
    --e1-lh-12: 1rem;   --e1-lh-13: 1.25rem; --e1-lh-14: 1.25rem; --e1-lh-15: 1.5rem;
    --e1-lh-20: 1.5rem; --e1-lh-25: 1.75rem; --e1-lh-32: 2.25rem; --e1-lh-40: 2.75rem; --e1-lh-50: 3.25rem;
    --e1-tinta: var(--color-texto);          /* 17,4:1 */
    --e1-gris-2: var(--color-texto-2);       /* rótulos: 7,0:1 */
    --e1-gris-3: var(--color-texto-3);       /* notas: 5,3:1 */
    --e1-marino: var(--color-acento);        /* enlaces, cifra que lleva a su detalle, lo seleccionado */
    --e1-filete: var(--color-borde);
    --e1-filete-2: var(--color-borde-fuerte);
    --e1-subrayado: var(--color-acento-borde);
    --e1-medida: 68ch;                       /* prosa: 45-75 caracteres por línea */
    --e1-indice: 11rem;                      /* la columna del índice de la página */
    --e1-cab: 60px;                          /* alto de la cabecera fija de la web (por encima de 640 px) */
}

/* ── Tipografía: tres niveles ─────────────────────────────────────────────────────────────────────────────── */
.e1 { font-size: var(--e1-15); line-height: var(--e1-lh-15); color: var(--e1-tinta); font-variant-numeric: tabular-nums; }
.e1 .e1-h1 { font-family: var(--fuente-serif); font-weight: 400; font-size: var(--e1-40); line-height: var(--e1-lh-40); letter-spacing: -0.015em; margin: 0; }
.e1 .e1-h2 { font-family: var(--fuente-seccion); font-weight: var(--peso-inter); font-size: calc(var(--e1-25) * var(--inter-k) + var(--inter-b)); line-height: calc(var(--e1-lh-25) * var(--inter-k) + var(--inter-b)); letter-spacing: -0.01em; margin: 0; }
.e1 .e1-h3 { font-family: var(--fuente-sans); font-weight: 600; font-size: var(--e1-15); line-height: var(--e1-lh-15); margin: 0; }
.e1-rotulo { font-family: var(--fuente-sans); font-size: var(--e1-12); line-height: var(--e1-lh-12); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e1-gris-2); }
.e1-nota { font-size: var(--e1-13); line-height: var(--e1-lh-13); color: var(--e1-gris-3); margin: 0; }
.e1-nota strong { color: var(--e1-tinta); font-weight: 600; }
.e1-nota a, .e1-linea a, .e1-linea-gris a { color: var(--e1-marino); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; text-decoration-color: var(--e1-subrayado); }
.e1-cifra { font-family: var(--fuente-cifra); font-weight: var(--peso-inter); font-size: calc(var(--e1-32) * var(--inter-k) + var(--inter-b)); line-height: calc(var(--e1-lh-32) * var(--inter-k) + var(--inter-b)); letter-spacing: -0.01em; color: var(--e1-tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.e1-cifra-clave { font-size: calc(var(--e1-50) * var(--inter-k) + var(--inter-b)); line-height: calc(var(--e1-lh-50) * var(--inter-k) + var(--inter-b)); }
.e1-prosa { max-width: var(--e1-medida); }

/* Una línea de notas: «A · B · C», que se parte entre piezas y no dentro */
.e1-linea { display: flex; flex-wrap: wrap; gap: 0 var(--sp-3); font-size: var(--e1-13); line-height: var(--e1-lh-13); color: var(--e1-gris-3); margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.e1-linea > * { position: relative; }
.e1-linea > * + *::before { content: "·"; position: absolute; left: calc(-1 * var(--sp-3) / 2 - 0.15em); color: var(--e1-gris-3); }
.e1-linea strong { color: var(--e1-tinta); font-weight: 600; }
/* Lo que no tiene dato: una línea gris con su rótulo, sin título de sección */
.e1-linea-gris { margin: 0; padding: var(--sp-3) 0; border-bottom: 1px solid var(--e1-filete); font-size: var(--e1-13); line-height: var(--e1-lh-13); color: var(--e1-gris-3); }
.e1-linea-gris .e1-rotulo { margin-right: var(--sp-2); }

/* ── Sección: título serif 25 y filete; su enlace de método a la derecha ─────────────────────────────────── */
.e1-sec { margin-top: var(--sp-12); scroll-margin-top: calc(var(--e1-cab) + 16px); }
.e1-sec-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap;
    padding-bottom: var(--sp-2); border-bottom: 1px solid var(--e1-filete-2); margin-bottom: var(--sp-4); }
.e1-sec-cab .e1-nota { white-space: nowrap; }
.e1-sec-cab a { font-size: var(--e1-13); }

/* ── Cifras con su base: rótulo, cifra y base en subcuadrícula (la misma línea base aunque un rótulo ocupe dos) ── */
.e1-cifras { display: grid; grid-template-columns: repeat(var(--e1-n, 6), minmax(0, 1fr)); grid-template-rows: auto auto auto; border-top: 1px solid var(--e1-tinta); margin: 0; }
.e1-cifras.e1-n3 { --e1-n: 3; } .e1-cifras.e1-n4 { --e1-n: 4; } .e1-cifras.e1-n5 { --e1-n: 5; }   /* sin estilos en línea: cuántas cifras */
.e1-c { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; padding: var(--sp-3) var(--sp-4); border-left: 1px solid var(--e1-filete); min-width: 0; }
.e1-c:first-child { border-left: 0; padding-left: 0; }
.e1-c-rot { margin: 0; display: flex; align-items: center; gap: var(--sp-1); min-height: 24px; }
.e1-c-valor { margin: 0; align-self: end; font-family: var(--fuente-cifra); font-weight: var(--peso-inter); font-size: calc(var(--e1-32) * var(--inter-k) + var(--inter-b)); line-height: calc(var(--e1-lh-32) * var(--inter-k) + var(--inter-b)); letter-spacing: -0.01em;
    color: var(--e1-tinta); white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums; }
a.e1-c-valor { color: var(--e1-marino); }
a.e1-c-valor:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.e1-c-base { margin: 0; font-size: var(--e1-13); line-height: var(--e1-lh-13); color: var(--e1-gris-3); }
.e1-c-base strong { color: var(--e1-tinta); font-weight: 600; }

/* ── Plegable de una línea: su título y su resumen (la primera frase) ────────────────────────────────────── */
.e1-pleg { border-top: 1px solid var(--e1-filete); }
.e1-pleg:last-of-type { border-bottom: 1px solid var(--e1-filete); }
.e1-pleg > summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: baseline; gap: var(--sp-1) var(--sp-3); flex-wrap: wrap;
    min-height: 40px; padding: var(--sp-2) 0 var(--sp-2) 1.375rem; box-sizing: border-box; }
.e1-pleg > summary::-webkit-details-marker { display: none; }
/* el chevrón, fuera del flujo: con un resumen de dos líneas no se queda solo en la primera */
.e1-pleg > summary::before { content: ""; position: absolute; left: 0.25rem; top: calc(var(--sp-2) + 0.55em); width: 0.45em; height: 0.45em;
    border-right: 1.5px solid var(--e1-marino); border-bottom: 1.5px solid var(--e1-marino); transform: rotate(-45deg); transition: transform var(--mov-rapido); }
.e1-pleg[open] > summary::before { transform: rotate(45deg); }
.e1-pleg > summary:focus-visible, .e1-bloque > summary:focus-visible { outline: 2px solid var(--e1-marino); outline-offset: 2px; }
.e1-pleg-t { font-size: var(--e1-14); line-height: var(--e1-lh-14); font-weight: 600; color: var(--e1-marino); }
.e1-pleg-r { font-size: var(--e1-13); line-height: var(--e1-lh-13); color: var(--e1-gris-3); }
.e1-pleg-n { margin-left: auto; font-size: var(--e1-13); color: var(--e1-gris-3); white-space: nowrap; }
.e1-pleg > :not(summary) { margin-bottom: var(--sp-4); }

/* «Seguir leyendo»: la continuación de un párrafo fijo, en la misma línea al abrirla */
.e1-mas > summary { list-style: none; cursor: pointer; display: inline; font-size: var(--e1-13); color: var(--e1-marino);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; text-decoration-color: var(--e1-subrayado); }
.e1-mas > summary::-webkit-details-marker { display: none; }
.e1-mas[open] > summary { display: none; }
.e1-parrafo { max-width: var(--e1-medida); }
.e1-parrafo > p, .e1-parrafo > .e1-mas, .e1-parrafo > .e1-mas > p { display: inline; margin: 0; }

/* ── Bloque de ficha plegado con su cifra en la línea (abierto solo el primero) ──────────────────────────── */
.e1-bloque { border-bottom: 1px solid var(--e1-filete); scroll-margin-top: calc(var(--e1-cab) + 56px); }
.e1-bloque > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.25rem minmax(min-content, max-content) minmax(0, 1fr) auto;
    align-items: baseline; column-gap: var(--sp-3); min-height: 48px; padding: var(--sp-3) 0; box-sizing: border-box; }
.e1-bloque > summary::-webkit-details-marker { display: none; }
.e1-bloque > summary::before { content: ""; width: 0.5em; height: 0.5em; border-right: 1.5px solid var(--e1-marino); border-bottom: 1.5px solid var(--e1-marino);
    transform: rotate(-45deg); justify-self: center; align-self: center; transition: transform var(--mov-rapido); }
.e1-bloque[open] > summary::before { transform: rotate(45deg); }
.e1-bloque-t { max-width: 26rem; margin: 0; font-family: var(--fuente-seccion); font-weight: var(--peso-inter); font-size: calc(var(--e1-25) * var(--inter-k) + var(--inter-b)); line-height: calc(var(--e1-lh-25) * var(--inter-k) + var(--inter-b)); color: var(--e1-tinta); }
.e1-bloque-r { font-size: var(--e1-14); line-height: var(--e1-lh-14); color: var(--e1-gris-2); }
.e1-bloque-r strong { color: var(--e1-tinta); font-weight: 600; }
.e1-bloque-n { font-size: var(--e1-13); color: var(--e1-gris-3); white-space: nowrap; }
.e1-bloque[open] > summary .e1-bloque-r { color: var(--e1-gris-3); }
.e1-bloque-cuerpo { padding: 0 0 var(--sp-6); }

/* ── Tabla compacta: 14/20, filas de 32 px, cifras tabulares a la derecha, cabecera de rótulos ─────────── */
.e1-tabla { width: 100%; border-collapse: collapse; font-size: var(--e1-14); line-height: var(--e1-lh-14); font-variant-numeric: tabular-nums; }
.e1-tabla caption { caption-side: top; text-align: left; padding-bottom: var(--sp-1); font-size: var(--e1-13); line-height: var(--e1-lh-13); color: var(--e1-gris-3); }
.e1-tabla th { font-size: var(--e1-12); line-height: var(--e1-lh-12); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e1-gris-2);
    text-align: left; padding: 0 var(--sp-3) var(--sp-2) 0; border-bottom: 1px solid var(--e1-filete-2); vertical-align: bottom; }
.e1-tabla td { padding: 6px var(--sp-3) 6px 0; border-bottom: 1px solid var(--e1-filete); vertical-align: baseline; }
.e1-tabla .n { text-align: right; white-space: nowrap; }
.e1-tabla td:last-child, .e1-tabla th:last-child { padding-right: 0; }
.e1-tabla .sub { display: block; font-size: var(--e1-13); line-height: var(--e1-lh-13); color: var(--e1-gris-3); font-weight: 400; }
.e1-tabla-marco { overflow-x: auto; }

/* ── Índice de la página (escritorio) y saltos (por debajo de 1.100 px) ──────────────────────────────────── */
.e1-marco { display: grid; grid-template-columns: var(--e1-indice) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.e1-indice { position: sticky; top: calc(var(--e1-cab) + var(--sp-6)); align-self: start; padding-top: var(--sp-1); max-height: calc(100vh - 120px); overflow: auto; }
.e1-indice .e1-rotulo { display: block; margin-bottom: var(--sp-2); }
.e1-indice ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--e1-filete-2); }
.e1-indice a { display: block; padding: 4px 0 4px var(--sp-3); margin-left: -1px; border-left: 2px solid transparent; font-size: var(--e1-13); line-height: var(--e1-lh-13); color: var(--e1-gris-2); text-decoration: none; }
.e1-indice a .n, .e1-saltos a .n { color: var(--e1-gris-3); margin-left: 0.3em; }
.e1-indice a:hover { color: var(--e1-tinta); }
.e1-indice a[aria-current="true"] { color: var(--e1-marino); border-left-color: var(--e1-marino); font-weight: 600; }
.e1-saltos { display: none; position: sticky; top: var(--e1-cab); z-index: 20; background: var(--color-fondo); border-bottom: 1px solid var(--e1-filete-2); }
.e1-saltos ol { display: flex; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.e1-saltos ol::-webkit-scrollbar { display: none; }
.e1-saltos a { display: flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: var(--e1-14); color: var(--e1-gris-2); text-decoration: none; border-bottom: 2px solid transparent; box-sizing: border-box; }
.e1-saltos a[aria-current="true"] { color: var(--e1-marino); border-bottom-color: var(--e1-marino); font-weight: 600; }
/* Barra de saltos también en el escritorio (páginas de tabla ancha: la tabla conserva todo el ancho) */
.e1-saltos-siempre { display: block; }
@media (max-width: 1100px) {
    .e1-marco { grid-template-columns: minmax(0, 1fr); }
    .e1-indice { display: none; }
    .e1-saltos { display: block; margin: 0 calc(-1 * var(--margen-lateral)); padding: 0 var(--margen-lateral); }
}

/* ── Pestañas de ficha: texto con filete inferior, la activa en marino; fijas al desplazarse ────────────── */
.e1-pestanas { position: sticky; top: var(--e1-cab); z-index: 20; display: flex; gap: var(--sp-8); margin: var(--sp-8) 0 0; background: var(--color-fondo);
    border-bottom: 1px solid var(--e1-filete-2); overflow-x: auto; scrollbar-width: none; }
.e1-pestanas a { display: inline-flex; align-items: baseline; gap: var(--sp-2); min-height: 44px; padding-top: 12px; box-sizing: border-box; white-space: nowrap;
    font-family: var(--fuente-seccion); font-weight: var(--peso-inter); font-size: calc(var(--e1-20) * var(--inter-k) + var(--inter-b)); line-height: calc(var(--e1-lh-20) * var(--inter-k) + var(--inter-b)); color: var(--e1-gris-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.e1-pestanas a .n { font-family: var(--fuente-sans); font-size: var(--e1-13); color: var(--e1-gris-3); }
.e1-pestanas a[aria-selected="true"], .e1-pestanas a[aria-current="page"] { color: var(--e1-tinta); border-bottom-color: var(--e1-marino); }
.e1-pestanas a:focus-visible { outline: 2px solid var(--e1-marino); outline-offset: 2px; }
.e1-panel { padding-top: var(--sp-4); scroll-margin-top: calc(var(--e1-cab) + 56px); }
.e1-js .e1-panel[hidden] { display: none; }

/* ── Móvil ───────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    /* Tablas → filas legibles: el nombre arriba, cada cifra con su rótulo en línea (el rótulo sale de data-r) */
    .e1-tabla.e1-filas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .e1-tabla.e1-filas, .e1-tabla.e1-filas tbody { display: block; }
    .e1-tabla.e1-filas tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--e1-filete); }
    .e1-tabla.e1-filas td { display: block; padding: 0; border: 0; flex: 0 1 auto; }
    .e1-tabla.e1-filas td:first-child { flex: 1 1 100%; font-weight: 600; }
    .e1-tabla.e1-filas td:first-child .sub { font-weight: 400; }
    .e1-tabla.e1-filas td[data-r]::before { content: attr(data-r); font-size: var(--e1-12); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--e1-gris-2); margin-right: 0.4em; }
    .e1-tabla.e1-filas td.n { text-align: left; }
    .e1-tabla.e1-filas td.n .sub { display: inline; margin-left: 0.3em; }
    .e1-tabla.e1-filas td.n .sub::before { content: "· "; }
}
@media (max-width: 1100px) {
    .e1-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .e1-c:nth-child(3n+1) { border-left: 0; padding-left: 0; }
    .e1-c:nth-child(n+4) { border-top: 1px solid var(--e1-filete); }
    .e1-bloque > summary { grid-template-columns: 1.25rem minmax(0, 1fr) auto; }
    .e1-bloque-r { grid-column: 2 / -1; }
}
@media (max-width: 640px) {
    :root { --e1-cab: 0px; }                 /* la cabecera de la web deja de ser fija */
    .e1 .e1-h1 { font-size: var(--e1-32); line-height: var(--e1-lh-32); }
    .e1 .e1-h2 { font-size: calc(var(--e1-20) * var(--inter-k) + var(--inter-b)); line-height: calc(var(--e1-lh-20) * var(--inter-k) + var(--inter-b)); }
    .e1-cifra, .e1-c-valor { font-size: calc(var(--e1-25) * var(--inter-k) + var(--inter-b)); line-height: calc(var(--e1-lh-25) * var(--inter-k) + var(--inter-b)); }
    .e1-cifra-clave { font-size: calc(var(--e1-40) * var(--inter-k) + var(--inter-b)); line-height: calc(var(--e1-lh-40) * var(--inter-k) + var(--inter-b)); }
    .e1-bloque-t { font-size: calc(var(--e1-20) * var(--inter-k) + var(--inter-b)); line-height: calc(var(--e1-lh-20) * var(--inter-k) + var(--inter-b)); }
    .e1-sec { margin-top: var(--sp-8); scroll-margin-top: 56px; }
    .e1-sec-cab .e1-nota { white-space: normal; }
    .e1-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .e1-cifras .e1-c { padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-left: 0; border-top: 1px solid var(--e1-filete); }
    .e1-cifras .e1-c:nth-child(-n+2) { border-top: 0; }
    .e1-cifras .e1-c:nth-child(2n) { padding-left: var(--sp-3); border-left: 1px solid var(--e1-filete); }
    a.e1-c-valor { min-height: 40px; display: inline-flex; align-items: center; }
    .e1-pestanas { gap: var(--sp-5); margin-left: calc(-1 * var(--margen-lateral)); margin-right: calc(-1 * var(--margen-lateral)); padding: 0 var(--margen-lateral); }
    .e1-panel, .e1-bloque { scroll-margin-top: 56px; }
    .e1-mas > summary { display: inline-flex; align-items: center; min-height: 40px; }
    .e1-parrafo > .e1-mas > summary { display: inline; min-height: 0; }
    /* Zonas táctiles de 40 px en lo que el sistema pinta dentro de .e1 */
    .e1 .migas a { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; }
    .e1 .pista-boton { width: 40px; height: 40px; margin: -8px; }
    .e1-tabla td a { display: inline-flex; align-items: center; min-height: 40px; }
}