/* ═══════════════════════════════════════════════════════════════════════════
   ROADMAP — sección Ayuda: el menú de la barra superior, Reportes / Feedback y
   el Manual de uso (esqueleto estándar del equipo, capa 2).

   Este archivo NO define ni un color literal: todo sale de los tokens de
   style.css, así que el manual sigue el tema claro u oscuro de la app sin tener
   un conmutador propio. tests/manual.test.js lo verifica.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Menú Ayuda en la barra superior ──────────────────────────────────────── */
.ayuda { position: relative; display: flex; }
.ayuda-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 200px; padding: 5px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.ayuda-menu__titulo {
  padding: 6px 10px 4px; font-size: 9.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.ayuda-menu button {
  text-align: left; padding: 7px 10px; border-radius: 6px;
  font-size: 12.5px; color: var(--ink-2);
}
.ayuda-menu button:hover { background: var(--surface-2); color: var(--ink); }
.ayuda-menu button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* El foco de la banda usa el acento claro del azul; el menú es una superficie
   normal y vuelve al acento de siempre. */
.topbar .ayuda-menu :focus-visible { outline-color: var(--accent); }

/* ── Reportes / Feedback ──────────────────────────────────────────────────────
   La guía de integración pide el iframe directamente debajo del título, sin
   tarjeta, borde, padding ni fondo alrededor. El padding lateral e inferior es
   el margen de página de las demás vistas, no una caja. */
.ayuda-fb { flex: 1; min-height: 0; overflow: auto; padding: 0 20px 18px; display: flex; flex-direction: column; }
.ayuda-fb__mount { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* `color-scheme: light` no es un color: evita que el navegador le ponga un fondo
   blanco opaco al iframe cuando el sistema está en oscuro y el documento
   embebido no declara esquema. El fondo sigue siendo el de la página. */
.feedback-frame { display: block; width: 100%; border: 0; background: transparent; color-scheme: light; }

/* ── Manual: mapeo de tokens ──────────────────────────────────────────────────
   Lo único que cambia de una app a otra. Acá los tokens no llevan prefijo. */
.manual {
  --m-accent:      var(--accent);
  --m-on-accent:   var(--accent-ink);
  --m-accent-wash: var(--accent-soft);
  --m-text:        var(--ink);
  --m-text-muted:  var(--muted);
  --m-border:      var(--line);
  --m-surface:     var(--surface);
  --m-bg:          var(--surface-2);
  --m-page:        var(--bg);
  --m-radius:      var(--radius);
  --m-radius-sm:   var(--radius-sm);
  --m-shadow:      var(--shadow-lg);
  --m-scrim:       var(--scrim);
  /* Las dos variantes de aviso que no son el acento salen de la paleta de
     rubros, que ya tiene su versión para cada tema. */
  --m-info:        var(--r3);
  --m-info-wash:   var(--r3-s);
  --m-ojo:         var(--warn);
  --m-ojo-wash:    var(--r2-s);
  --m-mono:        "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Escala propia de tamaños y espacios: sin ella los valores se repiten a
     mano por todo el archivo. */
  --m-fs-xs: .75rem;   --m-fs-sm: .875rem;  --m-fs-base: 1rem;
  --m-fs-lg: 1.125rem; --m-fs-xl: 1.5rem;
  --m-sp-1: 4px;  --m-sp-2: 8px;  --m-sp-3: 12px;
  --m-sp-4: 16px; --m-sp-5: 24px; --m-sp-6: 32px;
  --m-lh-body: 1.65;  --m-lh-title: 1.25;
  --m-aside-w: 288px;
  /* Ancho del cajon del buscador y de la columna de texto.
     Esta app no tiene menu lateral, asi que el manual arranca pegado a la
     izquierda y usa ese espacio. A la derecha se RESERVA el ancho del cajon:
     cuando el buscador se abre, cae sobre ese hueco y el texto se sigue
     leyendo. La columna crece con la pantalla entre un minimo y un maximo
     de lectura comoda. */
  --m-buscador-w: 440px;
  --m-doc-w: clamp(78ch, calc(100vw - var(--m-aside-w) - var(--m-buscador-w) - 2 * var(--m-sp-5) - var(--m-sp-6) - var(--m-margen-max)), 128ch);
  /* Aire a la izquierda, para que el manual no quede pegado al borde: un
     centimetro y medio cuando la pantalla lo tiene. Se toma solo de lo que
     sobra despues de ubicar el contenido y el hueco del buscador, asi que en
     una pantalla chica se achica hasta cero antes que tapar el texto. */
  --m-margen-max: 56px;
  --m-margen: clamp(0px, calc(100vw - var(--m-aside-w) - var(--m-sp-6) - var(--m-doc-w) - var(--m-buscador-w) - 2 * var(--m-sp-5)), var(--m-margen-max));
}

/* ── Layout ─────────────────────────────────────────────────────────────────
 * El contenedor que scrollea es ESTE y tiene altura fija (la que le da la
 * grilla de .app): el índice pegajoso se mueve dentro de él. Entre este
 * contenedor y el índice no hay ningún otro ancestro con overflow, que es lo
 * que anularía el `position: sticky`. */
.manual { color: var(--m-text); }
.manual__scroll {
  flex: 1; min-height: 0; overflow: auto;
  padding: var(--m-sp-5) var(--m-sp-5) var(--m-sp-6);
  scroll-behavior: smooth;
}
.manual__contenido { max-width: calc(var(--m-aside-w) + var(--m-sp-6) + var(--m-doc-w)); margin: 0 0 0 var(--m-margen); }

.manual__layout {
  display: grid;
  grid-template-columns: var(--m-aside-w) minmax(0, 1fr);
  gap: var(--m-sp-6);
  /* SIN `align-items: start`, a propósito: las dos columnas tienen que ocupar
     todo el alto para que el índice tenga por dónde desplazarse. */
}

/* La columna del índice llega hasta abajo; el sticky va en la tarjeta de
 * adentro. Un elemento pegajoso se mueve DENTRO de su contenedor: si el
 * contenedor midiera lo mismo que él, no tendría recorrido. */
.manual__aside { min-width: 0; height: 100%; }

.manual__indice {
  position: sticky;
  top: 0;
  /* --m-alto lo mantiene manual.js con el alto visible del contenedor. */
  max-height: calc(var(--m-alto, 80vh) - var(--m-sp-5) - var(--m-sp-4));
  overflow-y: auto;
  padding: var(--m-sp-4);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  background: var(--m-surface);
}

.manual__indice-titulo {
  margin: 0 0 var(--m-sp-1);
  font-size: var(--m-fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--m-text-muted);
}
/* Rótulo de grupo: lo que lo hace leerse como encabezado son los márgenes
   asimétricos, mucho aire arriba y casi nada abajo. Eso lo ata al bloque que
   le sigue y lo despega del anterior. */
.manual__indice-grupo {
  margin: var(--m-sp-4) 0 var(--m-sp-1);
  padding: 0 var(--m-sp-2);
  font-size: var(--m-fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--m-text-muted);
}
.manual__indice ol { list-style: none; margin: 0; padding: 0; }
/* Cada entrada es una fila flex con gap: el número es una ficha de tamaño fijo
   separada del título, así "1 Qué es" y "10 Ciclos" alinean igual. */
.manual__indice a {
  display: flex; align-items: center; gap: var(--m-sp-2);
  padding: 6px var(--m-sp-2);
  border-radius: var(--m-radius-sm);
  color: var(--m-text-muted);
  font-size: var(--m-fs-sm); line-height: 1.3;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.manual__indice a:hover { background: var(--m-bg); color: var(--m-text); }
.manual__indice a.is-activo {
  background: var(--m-accent-wash);
  color: var(--m-accent);
  font-weight: 600;
}
.manual__indice-num {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 20px; width: 20px; height: 20px;
  border: 1px solid var(--m-border); border-radius: 50%;
  font-size: .6875rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.manual__indice a:hover .manual__indice-num { border-color: var(--m-text-muted); }
.manual__indice a.is-activo .manual__indice-num {
  background: var(--m-accent); border-color: var(--m-accent); color: var(--m-on-accent);
}

/* ── Encabezado, sobre el contenido ───────────────────────────────────────── */
.manual__hero {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--m-sp-4);
  margin-bottom: var(--m-sp-5);
  padding: var(--m-sp-5);
  border-radius: var(--m-radius);
  background: var(--m-accent-wash);
  border: 1px solid var(--m-border);
}
.manual__hero-texto { flex: 1 1 420px; min-width: 0; }
.manual__hero h1 { margin: 0 0 var(--m-sp-2); font-size: var(--m-fs-xl); line-height: var(--m-lh-title); }
.manual__hero p { margin: 0; max-width: 70ch; font-size: var(--m-fs-sm); line-height: var(--m-lh-body); color: var(--m-text-muted); }
.manual__hero .manual__hero-meta { margin-top: var(--m-sp-3); font-size: var(--m-fs-xs); }
.manual__hero-acciones { display: flex; gap: var(--m-sp-2); flex: 0 0 auto; }
.manual__hero-acciones .btn { background: var(--m-surface); }

/* ── Capítulos ────────────────────────────────────────────────────────────── */
.manual__doc { max-width: var(--m-doc-w); font-size: var(--m-fs-sm); }

.manual__cap {
  scroll-margin-top: var(--m-sp-4);
  margin-bottom: var(--m-sp-5);
  padding: var(--m-sp-5);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  background: var(--m-surface);
}
.manual__cap-head { display: flex; align-items: flex-start; gap: var(--m-sp-3); margin-bottom: var(--m-sp-4); }
.manual__cap-num {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--m-accent); color: var(--m-on-accent);
  font-weight: 600; font-size: var(--m-fs-sm); font-variant-numeric: tabular-nums;
}
.manual__cap h2 { margin: 0; font-size: var(--m-fs-lg); line-height: var(--m-lh-title); }
.manual__cap h3 {
  margin: var(--m-sp-5) 0 var(--m-sp-2);
  font-size: var(--m-fs-base); font-weight: 600; line-height: var(--m-lh-title);
}
.manual__cuerpo > h3:first-child { margin-top: 0; }
.manual__cap p, .manual__cap li { font-size: var(--m-fs-sm); line-height: var(--m-lh-body); }
.manual__cap p { margin: 0 0 var(--m-sp-3); }
.manual__cap p:last-child { margin-bottom: 0; }
.manual__cap ul, .manual__cap ol { margin: 0 0 var(--m-sp-3); padding-left: 22px; }
.manual__cap li { margin-bottom: var(--m-sp-2); }
.manual__cap a { color: var(--m-accent); text-decoration: underline; text-underline-offset: 2px; }
.manual__cap table { width: 100%; table-layout: auto; border-collapse: collapse; margin: 0 0 var(--m-sp-4); font-size: var(--m-fs-sm); }
.manual__cap th, .manual__cap td {
  text-align: left; vertical-align: top; padding: var(--m-sp-2) var(--m-sp-3);
  border-bottom: 1px solid var(--m-border); line-height: 1.5;
}
.manual__cap th { font-size: var(--m-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--m-text-muted); }
/* El encabezado de fila (la primera columna) se lee como dato, no como rótulo. */
.manual__cap tbody th { font-size: var(--m-fs-sm); text-transform: none; letter-spacing: 0; color: var(--m-text); white-space: nowrap; }
.manual__cap td ul { margin: 0; padding-left: 18px; }
.manual__cap td li { margin-bottom: 2px; }
.manual__tabla { overflow-x: auto; }

/* Quién ve el capítulo: dato de contexto, no de lectura. */
.manual__quien {
  display: inline-block; margin: var(--m-sp-2) 0 0;
  padding: 3px var(--m-sp-3); border-radius: 999px;
  background: var(--m-bg); border: 1px solid var(--m-border);
  color: var(--m-text-muted); font-size: var(--m-fs-xs); line-height: 1.4;
}
.manual__cap .manual__quien { font-size: var(--m-fs-xs); }

/* Separador de grupo en el cuerpo: el nombre del grupo entre dos líneas. Sin
   él, al bajar por el documento se pierde la referencia de dónde se está. */
.manual__rule { display: flex; align-items: center; gap: var(--m-sp-3); margin: var(--m-sp-6) 0 var(--m-sp-5); }
.manual__rule:first-child { margin-top: 0; }
.manual__rule::before, .manual__rule::after { content: ""; flex: 1; height: 1px; background: var(--m-border); }
.manual__rule span {
  font-size: var(--m-fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--m-text-muted);
}

.manual__estado { padding: var(--m-sp-6) var(--m-sp-4); text-align: center; color: var(--m-text-muted); font-size: var(--m-fs-sm); }

/* ═══ Los componentes del estándar ════════════════════════════════════════ */

/* 1. Aviso. Tres variantes; el emoji varía por instancia, no por variante.
 *    Se usan con cuentagotas: si todo resalta, nada resalta. */
.m-aviso {
  display: flex; gap: var(--m-sp-3); align-items: flex-start;
  margin: var(--m-sp-4) 0; padding: var(--m-sp-3) var(--m-sp-4);
  border: 1px solid var(--m-border); border-left-width: 4px;
  border-radius: var(--m-radius-sm);
  font-size: var(--m-fs-sm); line-height: var(--m-lh-body);
}
.m-aviso__ico { flex: 0 0 auto; font-size: 1.2rem; line-height: 1.3; }
.m-aviso p { margin: 0; }
.m-aviso p + p { margin-top: var(--m-sp-2); }
.m-aviso--tip  { border-left-color: var(--m-accent); background: var(--m-accent-wash); }
.m-aviso--info { border-left-color: var(--m-info);   background: var(--m-info-wash); }
.m-aviso--ojo  { border-left-color: var(--m-ojo);    background: var(--m-ojo-wash); }

/* 2. Tarjeta + grilla: para inventarios. Reflowea sin media query. */
.m-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--m-sp-4); margin: 0 0 var(--m-sp-4); }
.m-card { border: 1px solid var(--m-border); border-radius: var(--m-radius-sm); padding: var(--m-sp-4); background: var(--m-bg); }
.m-card__top { display: flex; align-items: center; gap: var(--m-sp-2); margin-bottom: var(--m-sp-2); }
.m-card h4 { margin: 0; font-size: var(--m-fs-sm); font-weight: 600; }
.manual__cap .m-card p { margin: 0 0 var(--m-sp-2); font-size: var(--m-fs-xs); color: var(--m-text-muted); line-height: 1.55; }
.manual__cap .m-card ul { margin: 0 0 var(--m-sp-2); padding-left: 18px; }
.manual__cap .m-card li { margin: 2px 0; font-size: var(--m-fs-xs); line-height: 1.5; }
.manual__cap .m-card > :last-child { margin-bottom: 0; }

/* 3. Panel + columnas: para facetas paralelas del mismo tema. */
.m-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--m-sp-4); margin: 0 0 var(--m-sp-4); }
.m-panel { border: 1px solid var(--m-border); border-radius: var(--m-radius-sm); padding: var(--m-sp-4); background: var(--m-bg); }
.m-panel h4 { margin: 0 0 var(--m-sp-2); font-size: var(--m-fs-sm); font-weight: 600; }
.m-panel > :last-child { margin-bottom: 0; }

/* 4. Pasos: timeline con contadores de CSS, sin HTML extra. */
.manual__cap ol.m-pasos { counter-reset: paso; list-style: none; margin: 0 0 var(--m-sp-4); padding: 0; }
.manual__cap ol.m-pasos > li { position: relative; margin: 0; padding: 0 0 var(--m-sp-3) 46px; }
ol.m-pasos > li::before {
  counter-increment: paso; content: counter(paso);
  position: absolute; left: 0; top: -2px;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--m-accent); color: var(--m-on-accent);
  font-weight: 600; font-size: var(--m-fs-xs);
}
ol.m-pasos > li:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; top: 30px; bottom: 2px;
  width: 2px; background: var(--m-border);
}

/* 5. Acordeón: HTML nativo, teclado y accesibilidad gratis. */
details.m-faq {
  margin-bottom: var(--m-sp-2); padding: 2px var(--m-sp-4);
  border: 1px solid var(--m-border); border-radius: var(--m-radius-sm);
  background: var(--m-surface);
}
details.m-faq summary {
  display: flex; justify-content: space-between; gap: var(--m-sp-3);
  padding: var(--m-sp-3) 0; cursor: pointer; list-style: none;
  font-size: var(--m-fs-sm); font-weight: 600; line-height: 1.4;
}
details.m-faq summary::-webkit-details-marker { display: none; }
details.m-faq summary::after { content: "+"; color: var(--m-accent); font-size: 1.2rem; line-height: 1; }
details.m-faq[open] summary::after { content: "\2013"; }
.manual__cap details.m-faq p { margin: 0 0 var(--m-sp-3); color: var(--m-text-muted); }

/* 6. Etiqueta del eje transversal. En ROADMAP el eje es el permiso que hace falta. */
.m-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--m-sp-2); border-radius: 999px;
  background: var(--m-surface); border: 1px solid var(--m-border);
  font-size: var(--m-fs-xs); font-weight: 600; white-space: nowrap;
  color: var(--m-text-muted);
}
.m-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* 7. Chip de interfaz — la regla de oro de la escritura.
 *    TODO lo que el lector lee literalmente en la pantalla va acá dentro.
 *    No se mezcla con <strong>: el chip es "esto está escrito en la pantalla",
 *    la negrita es "esto es importante". */
.m-ui {
  font-family: var(--m-mono); font-size: .83em; white-space: nowrap;
  padding: 1px 5px; border-radius: 4px;
  background: var(--m-bg); border: 1px solid var(--m-border);
}

/* Dentro de una tabla el chip SI parte en varios renglones: un mensaje largo en
   una sola linea le come el ancho a las demas columnas. */
.manual__cap td .m-ui, .manual__cap th .m-ui {
  white-space: normal; overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Lista de definiciones, para los enumerables cortos. */
.m-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--m-sp-2); margin: 0 0 var(--m-sp-4); }
.m-defs > div { border: 1px solid var(--m-border); border-radius: var(--m-radius-sm); padding: var(--m-sp-3); background: var(--m-bg); }
.m-defs dt { font-size: var(--m-fs-sm); font-weight: 600; margin-bottom: var(--m-sp-1); }
.m-defs dd { margin: 0; font-size: var(--m-fs-xs); color: var(--m-text-muted); line-height: 1.55; }

/* ── Buscador ───────────────────────────────────────────────────────────────
   La pestaña va fija al borde derecho, a media altura y HORIZONTAL: lupa, la
   palabra Buscar y el atajo dentro de una tecla. Sin writing-mode. */
.buscador__tab {
  position: fixed; right: 0; top: 46%; z-index: 55;
  display: flex; align-items: center; gap: var(--m-sp-2);
  padding: var(--m-sp-3) var(--m-sp-3) var(--m-sp-3) var(--m-sp-4);
  border: 1px solid var(--m-border); border-right: 0;
  border-radius: var(--m-radius) 0 0 var(--m-radius);
  background: var(--m-surface); color: var(--m-text);
  font-size: var(--m-fs-sm); font-weight: 600; cursor: pointer;
  box-shadow: var(--shadow);
}
.buscador__tab:hover { background: var(--m-accent-wash); color: var(--m-accent); }
.buscador__lupa { flex: 0 0 auto; }
.buscador__kbd {
  font-family: var(--m-mono); font-size: var(--m-fs-xs); font-weight: 400;
  padding: 1px 6px; border: 1px solid var(--m-border); border-bottom-width: 2px;
  border-radius: 4px; background: var(--m-bg); color: var(--m-text-muted);
}

.buscador__velo { position: fixed; inset: 0; z-index: 80; background: var(--m-scrim); }

.buscador__panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; flex-direction: column;
  width: min(var(--m-buscador-w), 100%);
  background: var(--m-surface); border-left: 1px solid var(--m-border);
  box-shadow: var(--m-shadow);
  transform: translateX(100%); transition: transform .24s ease;
}
.buscador.is-open .buscador__panel { transform: translateX(0); }

.buscador__head { display: flex; align-items: center; gap: var(--m-sp-2); padding: var(--m-sp-4); border-bottom: 1px solid var(--m-border); }
.buscador__input {
  flex: 1; min-width: 0; padding: var(--m-sp-2) var(--m-sp-3);
  border: 1px solid var(--m-border); border-radius: var(--m-radius-sm);
  font-size: var(--m-fs-sm); font-family: inherit; color: var(--m-text); background: var(--m-surface);
}
.buscador__input:focus { outline: 2px solid var(--m-accent); outline-offset: 1px; }
.buscador__cerrar { color: var(--m-text-muted); font-size: 1.3rem; line-height: 1; padding: 0 var(--m-sp-2); }
.buscador__contador { margin: 0; padding: var(--m-sp-2) var(--m-sp-4); font-size: var(--m-fs-xs); color: var(--m-text-muted); border-bottom: 1px solid var(--m-border); }
.buscador__cuerpo { flex: 1; overflow-y: auto; padding: var(--m-sp-4); }

.buscador__etiqueta { margin: 0 0 var(--m-sp-2); font-size: var(--m-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--m-text-muted); }
.buscador__chips { display: flex; flex-wrap: wrap; gap: var(--m-sp-2); margin-bottom: var(--m-sp-5); }
.buscador__chip {
  padding: 5px var(--m-sp-3); border: 1px solid var(--m-border); border-radius: 999px;
  background: var(--m-bg); color: var(--m-text); font-size: var(--m-fs-xs); cursor: pointer;
}
.buscador__chip:hover { background: var(--m-accent-wash); color: var(--m-accent); border-color: var(--m-accent); }
.buscador__indice { list-style: none; margin: 0; padding: 0; }
.buscador__indice a { display: block; padding: 5px 0; color: var(--m-text-muted); font-size: var(--m-fs-sm); text-decoration: none; }
.buscador__indice a:hover { color: var(--m-accent); }

.buscador__hit {
  display: block; width: 100%; text-align: left;
  margin-bottom: var(--m-sp-2); padding: var(--m-sp-3);
  border: 1px solid var(--m-border); border-radius: var(--m-radius-sm);
  background: var(--m-surface); cursor: pointer;
}
.buscador__hit:hover { border-color: var(--m-accent); background: var(--m-accent-wash); }
.buscador__donde { display: block; margin-bottom: var(--m-sp-1); font-size: var(--m-fs-xs); font-weight: 600; color: var(--m-accent); }
.buscador__frag { display: block; font-size: var(--m-fs-xs); line-height: 1.55; color: var(--m-text-muted); }
.buscador__frag mark { background: var(--m-accent-wash); color: var(--m-text); font-weight: 600; padding: 0 2px; }
.buscador__vacio { font-size: var(--m-fs-sm); color: var(--m-text-muted); }

/* Destello al llegar al pasaje. */
@keyframes m-destello {
  0%, 100% { background: transparent; }
  25%, 60% { background: var(--m-accent-wash); }
}
.buscador-destello { animation: m-destello 1.7s ease; border-radius: var(--m-radius-sm); }

/* ── Barra propia, solo en pantalla angosta ───────────────────────────────── */
.manual__topbar { display: none; }
.manual__velo { display: none; }

/* ── Pantalla angosta: un solo breakpoint ─────────────────────────────────── */
@media (max-width: 960px) {
  .manual__topbar {
    display: flex; align-items: center; gap: var(--m-sp-3);
    margin-bottom: var(--m-sp-4); font-size: var(--m-fs-sm);
  }
  .manual__scroll { padding: var(--m-sp-4); }
  .manual__contenido { margin-left: 0; }
  .manual__layout { grid-template-columns: minmax(0, 1fr); gap: var(--m-sp-4); }

  /* El índice pasa a cajón deslizante. */
  .manual__aside { height: auto; }
  .manual__indice {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
    width: min(320px, 85vw); max-height: none; border-radius: 0;
    transform: translateX(-100%); transition: transform .24s ease;
  }
  .manual__aside.is-abierto .manual__indice { transform: translateX(0); }
  .manual__velo { display: block; position: fixed; inset: 0; z-index: 80; background: var(--m-scrim); }

  .buscador__tab { top: auto; bottom: var(--m-sp-5); }
  .manual__doc { max-width: none; }
}

/* ── Movimiento reducido ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .manual__scroll { scroll-behavior: auto; }
  .buscador-destello { animation: none; outline: 2px solid var(--m-accent); outline-offset: 2px; }
}

/* ── Impresión ────────────────────────────────────────────────────────────────
 * Un manual se imprime. La técnica es redefinir los tokens a monocromo —con
 * los colores del sistema, que en papel son negro sobre blanco— en vez de
 * escribir reglas nuevas para cada componente.
 *
 * ayuda.js marca <body> con .ayuda-manual mientras el manual está a la vista:
 * solo entonces se desarma el shell de la app para que el documento fluya en
 * varias páginas. Imprimir desde otra vista no cambia nada.
 */
@media print {
  .manual {
    --m-accent: CanvasText; --m-accent-wash: Canvas; --m-on-accent: Canvas;
    --m-text: CanvasText; --m-text-muted: CanvasText; --m-border: GrayText;
    --m-surface: Canvas; --m-bg: Canvas; --m-page: Canvas;
    --m-info: CanvasText; --m-info-wash: Canvas; --m-ojo: CanvasText; --m-ojo-wash: Canvas;
    color-scheme: light;
  }

  body.ayuda-manual, body.ayuda-manual .app { height: auto; overflow: visible; display: block; background: Canvas; }
  body.ayuda-manual .topbar, body.ayuda-manual .impbar,
  body.ayuda-manual #modalHost, body.ayuda-manual #drawerHost,
  body.ayuda-manual .toast, body.ayuda-manual .tip { display: none !important; }
  body.ayuda-manual .manual, body.ayuda-manual .manual__scroll { display: block; overflow: visible; height: auto; padding: 0; background: Canvas; }

  /* Fuera del papel: el índice, el buscador, los botones y el formulario de reportes. */
  .manual__aside, .manual__velo, .manual__topbar, .manual__hero-acciones,
  .buscador, .ayuda-menu, #viewFeedback { display: none !important; }

  .manual__contenido, .manual__doc { max-width: none; margin-left: 0; }
  .manual__layout { display: block; }
  .manual__hero { border: 0; padding: 0; }
  .manual__cap { break-inside: auto; border: 0; padding: 0; margin-bottom: var(--m-sp-5); }
  .manual__cap + .manual__cap, .manual__rule + .manual__cap { break-before: page; }
  .manual__rule { break-after: avoid; }
  .m-card, .m-panel, .m-aviso, details.m-faq, ol.m-pasos > li, .m-defs > div, .manual__cap-head { break-inside: avoid; }
  .manual__cap-num { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .manual__cap a { color: inherit; text-decoration: none; }

  /* Los acordeones se imprimen ABIERTOS. `details { open: true }` no es CSS
   * válido; lo que funciona es mostrar todo lo que no sea el summary. */
  details.m-faq > *:not(summary) { display: block !important; }
  details.m-faq::details-content { content-visibility: visible; height: auto; }
  details.m-faq summary::after { content: none; }
}