/*
 * Veriko landing · documento legal (pantalla). UNA SOLA HOJA para todo documento legal (R-36).
 *
 * Es la hoja de `lr_legal_document()` (partials/r/legal-document.php), la plantilla única que pinta:
 *   - /privacy y /terms, en español e inglés (hoy, vía `lr_legal_page()` en partials/r/legal.php);
 *   - los documentos del Centro de confianza (hub), en la fase 2: el hub arma el MISMO arreglo de
 *     datos que /privacy y /terms y llama a la MISMA función. No lleva hoja propia: si el hub
 *     necesita algo que aquí no existe, se añade aquí, y llega a los tres sitios a la vez.
 * Sustituye a `legal.css` (retirada). La hoja de papel y de PDF es su pareja,
 * `legal-document-print.css`, que describe el mismo diseño sin fondo ni sombra.
 *
 * Tratamiento A, elegido por el owner el 2026-10-03: una hoja blanca sobre fondo neutro, con
 * membrete (marca, tipo, título, datos y acciones), cuerpo en serifa (Source Serif 4,
 * autohospedada: ver fonts.css) a 66 caracteres de línea, índice fijo a la izquierda en escritorio
 * y desplegable «Contenido» en celular, y un pie con el responsable y la fecha. Exploración y
 * razones: docs/design/bakeoff/centro-confianza/README-documentos.md (rama del Centro de
 * confianza).
 *
 * Va DESPUÉS de home.css (que trae `.btn`, `.brandmark` y la base) y usa sólo tokens (R-15; candado
 * LandingTokensTest: cero valores hexadecimales en este archivo, tampoco en los comentarios). Los
 * `--doc-*` son variables de DISEÑO (familias y medidas), nunca colores. La fuente es del mismo
 * origen (R-27): esta hoja no pide nada a otro host.
 *
 * Lo de la fase 2 vive aquí ya, apagado: el interruptor «Ver cambios de esta versión», la huella,
 * la ruta, el chip de nivel y el enlace al historial. Se encienden cuando el arreglo de datos trae
 * `cambios`, `huella`, `ruta`, `nivel` o `historial`; sin ellos la plantilla no emite su marcado y
 * estas reglas no tocan nada. Ver la cabecera de legal-document.php.
 */

.doc {
  --doc-serif: 'Source Serif 4', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --doc-sans: var(--font-family);
  --doc-font-body: var(--doc-serif);
  --doc-size: 1.0625rem;            /* 17 px: la serifa pide medio punto más que la sans a igual lectura */
  --doc-leading: 1.7;
  --doc-medida: 66ch;
  --gutter: var(--space-5);
  background: var(--color-surface-sunken);
  padding: var(--space-4) 0 var(--space-12);
}
.doc, .doc * { box-sizing: border-box; }

/* El índice fijo del celular ocupa 48 px bajo la barra: el destino de un ancla baja lo mismo. Se
   extiende el `scroll-padding-top` del documento (primitives.css), no un margen por sección. */
html { scroll-padding-top: calc(var(--nav-h) + 48px + var(--space-4)); }
@media (min-width: 960px) { html { scroll-padding-top: calc(var(--nav-h) + var(--space-4)); } }

/* ── Accesibilidad básica ────────────────────────────────────────────────────────────────── */
.doc-saltar {
  position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-toast);
  padding: var(--space-3) var(--space-4); background: var(--color-text-primary); color: var(--color-text-inverse);
  border-radius: var(--radius-md); font-weight: var(--font-semibold);
}
.doc-saltar:focus { top: calc(var(--nav-h) + var(--space-2)); }
.doc .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* La vista es una hoja de lectura: el JS puede ocultar lo que sólo sirve con él. */
.doc [hidden] { display: none !important; }
/* Cabecera y pie corridos del PDF: en pantalla no existen. */
.doc-corrido-cab, .doc-corrido-pie { display: none; }

/* ── Ruta («Centro de confianza › …»): la trae el hub; /privacy y /terms no la llevan ────── */
.doc-ruta { max-width: 1120px; margin: 0 auto var(--space-3); padding: 0 var(--space-5); }
.doc-ruta ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none;
  font-size: var(--text-sm); color: var(--color-text-secondary); }
.doc-ruta li + li::before { content: "›"; margin-right: var(--space-2); color: var(--color-text-tertiary); }
.doc-ruta a { color: var(--color-text-link); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.doc-ruta a:hover { text-decoration: underline; }
.doc-ruta [aria-current] { color: var(--color-text-primary); }

/* ── Botones del membrete: los .btn del landing (home.css), con el alto táctil y el ícono ── */
.doc .btn { min-height: 44px; text-decoration: none; }
.doc .btn .ic { width: 16px; height: 16px; }
.doc .btn-sm.doc-btn--chico { min-height: 36px; font-size: var(--text-xs); }
@media (pointer: coarse) { .doc .btn-sm.doc-btn--chico { min-height: 44px; } }
.doc-acciones { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 639px) {
  .doc-acciones { display: grid; grid-template-columns: 1fr 1fr; }
  .doc-acciones .btn-primary { grid-column: 1 / -1; }
  .doc-acciones .btn { white-space: normal; text-align: center; line-height: 1.2; padding: var(--space-2) var(--space-3); }
}

/* ── Marco: índice a un lado y hoja al otro ──────────────────────────────────────────────── */
.doc-marco { max-width: 1120px; margin: 0 auto; }

/* ── La hoja ─────────────────────────────────────────────────────────────────────────────── */
.doc-hoja {
  min-width: 0; background: var(--color-surface); border-block: 1px solid var(--color-border);
  padding: var(--space-8) var(--space-5) var(--space-10);
}

/* ── Membrete: marca, tipo, título, datos y acciones ─────────────────────────────────────── */
.doc-membrete { padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 2px solid var(--color-text-primary); display: grid; gap: var(--space-5); }
.doc-membrete__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.doc-membrete__fila .brandmark { font-size: var(--text-xl); }
.doc-tipo { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.doc-nivel {
  display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--badge-radius);
  background: var(--color-success-light); color: var(--color-success-text); font-size: var(--text-xs); font-weight: var(--font-semibold);
}
/* Etiqueta de versión preliminar (sólo admin y owner; lo decide el servidor): una ceja gris de una
   línea, justo encima del título. Sin recuadro, sin color de alerta y sin ícono: se lee, pero no compite
   con el título. El gris es `--color-text-secondary` y no el terciario, que sobre el blanco de la hoja
   no llega al contraste mínimo a este tamaño. El membrete separa sus piezas con `--space-5`; el margen
   negativo la acerca al título hasta `--space-2`. */
.doc-borrador {
  margin: 0 0 calc(var(--space-2) - var(--space-5)); font-size: var(--text-xs); font-weight: var(--font-semibold);
  line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary);
}
.doc-membrete h1 {
  margin: 0; font-family: var(--doc-sans); font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: -0.02em; line-height: 1.12;
  color: var(--color-text-primary); text-wrap: balance;
}
.doc-meta { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); padding: var(--space-4) 0; border-block: 1px solid var(--color-border); }
/* Cada dato es una columna: el rótulo arriba y el valor abajo, así que si un rótulo largo ocupa dos
   renglones («Última actualización» en celular), los valores de la fila siguen alineados. */
.doc-meta > div { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.doc-meta dt { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); }
.doc-meta dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-primary); overflow-wrap: anywhere; }
.doc-lead { margin: 0 0 var(--space-8); font-family: var(--doc-serif); font-size: var(--text-base); line-height: 1.65; color: var(--color-text-secondary); max-width: var(--doc-medida); text-wrap: pretty; }

/* ── «Ver cambios de esta versión» (fase 2; interruptor sin JavaScript) ──────────────────── */
.doc-cambios { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6);
  padding: var(--space-3) var(--space-4); background: var(--color-surface-sunken); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.doc-switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-semibold); }
.doc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.doc-switch__pista {
  position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--radius-full);
  background: var(--color-text-tertiary); transition: background var(--transition-fast);
}
.doc-switch__pista::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform var(--transition-fast);
}
.doc-switch input:checked + .doc-switch__pista { background: var(--color-primary); }
.doc-switch input:checked + .doc-switch__pista::after { transform: translateX(16px); }
.doc-switch input:focus-visible + .doc-switch__pista { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.doc-cambios__n { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
.doc-cambios__n:empty { display: none; }
.doc-cambios__det { font-size: var(--text-sm); flex: 1 1 auto; }
.doc-cambios__det[open] { flex-basis: 100%; }
.doc-cambios__det summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text-link); font-weight: var(--font-semibold); }
.doc-cambios__det ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); color: var(--color-text-secondary); }
.doc-cambios__det li + li { margin-top: var(--space-1); }

/* Lo que cambió, resaltado: tinte + barra + etiqueta de texto (nunca sólo color). La barra y el tinte del
   margen salen con box-shadow, que no mueve el texto ni cambia la caja del bloque. */
.doc:has(#doc-cambios:checked) [data-cambio],
.doc.doc--cambios [data-cambio] { background: var(--color-warning-light); box-shadow: -16px 0 0 var(--color-warning-light), -19px 0 0 var(--color-warning); }
.doc:has(#doc-cambios:checked) p[data-cambio],
.doc.doc--cambios p[data-cambio] { padding-block: var(--space-2); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.doc:has(#doc-cambios:checked) [data-cambio]::before,
.doc.doc--cambios [data-cambio]::before {
  content: attr(data-etiqueta); display: inline-block; margin-right: var(--space-2); padding: 2px var(--space-2);
  border: 1px solid var(--color-warning); border-radius: var(--radius-sm); color: var(--color-warning-text);
  font: var(--font-bold) var(--text-xs)/1.3 var(--doc-sans); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; background: var(--color-surface);
}
.doc:has(#doc-cambios:checked) div[data-cambio],
.doc.doc--cambios div[data-cambio] { background: none; }
.doc:has(#doc-cambios:checked) div[data-cambio]::before,
.doc.doc--cambios div[data-cambio]::before { display: block; width: max-content; margin: var(--space-2) 0 var(--space-2) var(--space-3); }
.doc:has(#doc-cambios:checked) tr[data-cambio],
.doc.doc--cambios tr[data-cambio] { box-shadow: none; }
.doc:has(#doc-cambios:checked) tr[data-cambio]::before,
.doc.doc--cambios tr[data-cambio]::before { content: none; }
.doc:has(#doc-cambios:checked) tr[data-cambio] td,
.doc.doc--cambios tr[data-cambio] td { background: var(--color-warning-light); box-shadow: none; }
.doc:has(#doc-cambios:checked) tr[data-cambio] td[data-etiqueta]::before,
.doc.doc--cambios tr[data-cambio] td[data-etiqueta]::before { display: inline-block; margin: 0 var(--space-2) 0 0; }

/* ── Índice: desplegable «Contenido» en celular, riel fijo en escritorio ─────────────────── */
.doc-indice { position: sticky; top: var(--nav-h); z-index: var(--z-topbar); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.doc-indice summary {
  display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--gutter, var(--space-4));
  font: var(--font-semibold) var(--text-sm)/1 var(--doc-sans); color: var(--color-text-primary); cursor: pointer; list-style: none;
}
.doc-indice summary::-webkit-details-marker { display: none; }
.doc-indice summary .ic { width: 18px; height: 18px; }
.doc-indice summary .doc-chev { margin-left: auto; transition: transform var(--transition-fast); }
.doc-indice details[open] .doc-chev { transform: rotate(180deg); }
.doc-indice ol {
  position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: var(--space-2) 0; list-style: none; counter-reset: indice;
  max-height: min(65vh, 440px); overflow-y: auto; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
}
.doc-indice li { counter-increment: indice; }
.doc-indice li a {
  display: flex; gap: var(--space-3); align-items: baseline; min-height: 44px; padding: var(--space-3) var(--gutter, var(--space-4));
  color: var(--color-text-secondary); text-decoration: none; font: var(--font-normal) var(--text-sm)/1.4 var(--doc-sans);
}
.doc-indice li a::before { content: counter(indice) "."; min-width: 1.6em; color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
.doc-indice li a:hover { color: var(--color-text-link-hover); background: var(--color-surface-sunken); }
.doc-indice li a[aria-current="location"] { color: var(--color-text-link); font-weight: var(--font-semibold); box-shadow: inset 3px 0 0 var(--color-primary); }

/* ── Secciones: número, título y enlace copiable ─────────────────────────────────────────── */
.doc-sec + .doc-sec { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.doc-sec h2 {
  display: flex; align-items: baseline; gap: var(--space-3); margin: 0 0 var(--space-3);
  font-family: var(--doc-sans); font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--color-text-primary); text-wrap: balance;
}
.doc-num { flex: none; font-variant-numeric: tabular-nums; color: var(--color-text-secondary); font-weight: var(--font-semibold); }
.doc-tit { min-width: 0; }
.doc-ancla {
  flex: none; display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 44px; height: 44px; margin: -12px 0 -12px auto;
  color: var(--color-text-secondary); border-radius: var(--radius-md); text-decoration: none; opacity: 0; transition: opacity var(--transition-fast);
}
.doc-ancla .ic { width: 16px; height: 16px; }
.doc-sec h2:hover .doc-ancla, .doc-ancla:focus-visible { opacity: 1; }
.doc-ancla:hover { color: var(--color-text-link); background: var(--color-surface-sunken); }
@media (hover: none) { .doc-ancla { opacity: .75; } }

/* ── Cuerpo del documento ─────────────────────────────────────────────────────────────────── */
.doc-cuerpo { font-family: var(--doc-font-body); font-size: var(--doc-size); line-height: var(--doc-leading); color: var(--color-text-primary); }
.doc-cuerpo p { margin: 0 0 var(--space-4); max-width: var(--doc-medida); text-wrap: pretty; }
.doc-cuerpo a { color: var(--color-text-link); text-underline-offset: 3px; text-decoration: underline; }
.doc-cuerpo strong { font-weight: var(--font-semibold); }
.doc-cuerpo ul, .doc-cuerpo ol { max-width: var(--doc-medida); margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.doc-cuerpo li + li { margin-top: var(--space-2); }

/* ── Tabla de transferencias (los nombres legal-table-wrap y legal-table vienen del texto) ── */
/* En celular la tabla se desplaza de lado DENTRO de su marco, con la primera columna fija y sombras que
   avisan de que hay más a los lados (sombras de desplazamiento, sin JavaScript): la página nunca se
   desborda, sólo se mueve el marco. El marco es enfocable y se mueve con las flechas
   (lr_legal_tabla_region(): role="region", tabindex="0" y un nombre del catálogo). */
.doc .legal-table-wrap {
  margin: var(--space-5) 0 var(--space-5); max-width: none; overflow-x: auto; border-top: 2px solid var(--color-text-primary); border-bottom: 1px solid var(--color-border-strong);
  background:
    linear-gradient(to right, var(--color-surface) 30%, transparent) 0 0 / 40px 100% no-repeat local,
    linear-gradient(to left, var(--color-surface) 30%, transparent) 100% 0 / 40px 100% no-repeat local,
    linear-gradient(to right, var(--color-border-strong), transparent) 0 0 / 14px 100% no-repeat scroll,
    linear-gradient(to left, var(--color-border-strong), transparent) 100% 0 / 14px 100% no-repeat scroll;
}
.doc .legal-table { width: 100%; min-width: 640px; border-collapse: collapse; font-family: var(--doc-sans); font-size: var(--text-sm); line-height: 1.5; font-variant-numeric: tabular-nums; }
.doc .legal-table th {
  padding: var(--space-3) var(--space-4); text-align: left; vertical-align: bottom; white-space: nowrap;
  font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-secondary); border-bottom: 1px solid var(--color-border-strong);
}
.doc .legal-table td { padding: var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); }
.doc .legal-table tbody tr:last-child td { border-bottom: 0; }
.doc .legal-table td:first-child { font-weight: var(--font-semibold); }
.doc .legal-table th:first-child { width: 30%; }
.doc .legal-table th:nth-child(3) { width: 24%; }
.doc .legal-table td:first-child, .doc .legal-table th:first-child { position: sticky; left: 0; background: var(--color-surface); box-shadow: 1px 0 0 var(--color-border); }
.doc .legal-table a { color: var(--color-text-link); }
/* En celular la columna fija no puede comerse la mitad del ancho: con el 30 % de una tabla de 640 px
   (192 px) sobre una pantalla de 335, la columna de al lado casi no tenía hueco donde leerse. Se
   estrecha y las demás conservan su ancho. */
@media (max-width: 719px) {
  .doc .legal-table th:first-child, .doc .legal-table td:first-child { width: 8.5rem; min-width: 8.5rem; max-width: 8.5rem; padding-inline: var(--space-3); }
  .doc .legal-table th:nth-child(2), .doc .legal-table td:nth-child(2) { min-width: 15rem; }
  .doc .legal-table th:nth-child(3), .doc .legal-table td:nth-child(3) { min-width: 9rem; }
}
/* La tabla de un documento redactado (el bloque `table` del cuerpo, `legal-table--datos`): de 1 a 8 columnas
   de texto cualquiera. Sin los anchos que la tabla de transferencias fija a su primera (30 %) y tercera
   columna (24 %): aquí cada columna se reparte según su contenido. En celular se desplaza dentro de su
   marco como la otra; en escritorio cabe entera. */
.doc .legal-table--datos { min-width: 30rem; }
.doc .legal-table--datos th:first-child, .doc .legal-table--datos th:nth-child(3) { width: auto; }
.doc .legal-table--datos td { overflow-wrap: anywhere; }
.doc .legal-table--datos td.nw { white-space: nowrap; }

/* ── Pie del documento: responsable, fecha y, en la fase 2, la huella ────────────────────── */
.doc-pie { margin-top: var(--space-10); padding-top: var(--space-5); border-top: 2px solid var(--color-text-primary); font-family: var(--doc-sans); font-size: var(--text-sm); color: var(--color-text-secondary); }
.doc-pie__datos { margin: 0; display: grid; gap: var(--space-4); }
.doc-pie dt { font-size: var(--text-xs); font-weight: var(--font-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.doc-pie dd { margin: 0; color: var(--color-text-primary); overflow-wrap: anywhere; }
.doc-pie code { display: block; font-family: var(--font-family-mono); font-size: var(--text-xs); line-height: 1.6; overflow-wrap: anywhere; color: var(--color-text-primary); margin-bottom: var(--space-2); }
.doc-pie__estado { display: block; margin-top: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-success-text); }
.doc-pie__estado[data-estado="mal"] { color: var(--color-danger-text); }
.doc-pie__nota { margin: var(--space-3) 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--color-text-secondary); max-width: 62ch; }

/* ── Aviso de copiado ─────────────────────────────────────────────────────────────────────── */
.doc-toast {
  position: fixed; left: 50%; bottom: var(--space-6); transform: translate(-50%, 16px); z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-lg); background: var(--color-text-primary); color: var(--color-text-inverse);
  font: var(--font-semibold) var(--text-sm)/1.3 var(--doc-sans); opacity: 0; pointer-events: none; transition: opacity var(--transition-normal), transform var(--transition-normal);
}
.doc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.doc-toast:empty { display: none; }

/* ── Celular y tableta: la barra del sitio ya lleva la marca, el membrete sólo dice el tipo ── */
@media (max-width: 959px) {
  .doc-membrete__fila .brandmark { display: none; }
  .doc-membrete__fila { justify-content: flex-start; }
}

/* ── Escritorio: índice a la izquierda de la hoja, centrada sobre el fondo neutro ─────────── */
@media (min-width: 960px) {
  .doc { --gutter: var(--space-3); padding: var(--space-6) 0 var(--space-16); }
  .doc-marco { display: grid; grid-template-columns: 232px minmax(0, 820px); gap: var(--space-8); justify-content: center; padding: 0 var(--space-5); }
  .doc-hoja {
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md); padding: var(--space-16) 72px var(--space-14);
  }
  .doc-membrete h1 { font-size: var(--text-4xl); }
  .doc-lead { font-size: var(--text-lg); }
  /* La columna de la fecha es la más ancha: su rótulo («Última actualización») no parte en dos. */
  .doc-meta { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, .9fr); }
  .doc-pie__datos { grid-template-columns: 1.4fr 1fr; }
  .doc-pie__huella { grid-column: 1 / -1; }
  .doc .legal-table { min-width: 0; }

  .doc-indice { top: calc(var(--nav-h) + var(--space-6)); align-self: start; background: transparent; border: 0; }
  .doc-indice summary { min-height: 0; padding: 0 0 var(--space-3); font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); cursor: default; }
  .doc-indice summary .ic { display: none; }
  .doc-indice ol { position: static; padding: 0; max-height: calc(100vh - var(--nav-h) - 120px); box-shadow: none; border: 0; background: transparent; }
  .doc-indice li a { min-height: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); }
  .doc-indice li a[aria-current="location"] { background: var(--color-surface); box-shadow: inset 3px 0 0 var(--color-primary); }
}
@media (min-width: 960px) and (max-width: 1119px) {
  .doc-marco { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); }
  .doc-hoja { padding-inline: var(--space-12); }
}
/* En escritorio el índice se ve siempre, aunque el <details> llegue cerrado (sin JS). */
@supports selector(::details-content) {
  @media (min-width: 960px) {
    .doc-indice__det::details-content { content-visibility: visible; display: block; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .doc *, .doc *::before, .doc *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}