/* ═══════════════════════════════════════
   ▓ PATRÓN · Cajón de ayuda — gemelo vanilla ▓
   v2.1 · 2026-09-23. Ficha: `design-system/PATRON_CENTRO_AYUDA.md`
   Kit: `catalogo-cd/components/CajonAyuda.jsx`
   Handoff: `plans/handoff/cajones_laterales/02_ayuda_1b/README.md`

   ⛔ v2.1 — CUATRO DIVERGENCIAS DE COHERENCIA CERRADAS (ronda de verificación 2026-09-23):
     1. `.exds-cay-campos`/`-campo-k`/`-campo-v` ahora siguen la receta «Tu acceso» de D2
        (gap 16×6, sin relleno de celda, valor 500) — antes tenían su propia receta vieja.
     2. `.exds-cay-det-texto` sube de 1.55 a 1.6 (A.2), como ya lo hizo su gemela
        `.exds-cajon-det-texto`.
     3. `.exds-cay-lista` retira su margen negativo (R9): gemelo y kit ya dicen lo mismo.
     4. `.exds-cay-rel-t`, dentro de `.exds-cay-rel`, se recorta con elipsis (R3/§5).
   Ver el detalle de cada una junto a su regla, más abajo.

   ⛔ v2.0 — CANON DEL PAQUETE DE CAJONES LATERALES, APROBADO ENTERO. `DECISION-FUENTE:
   Ricardo, 2026-09-22 — «el diseño del handoff y sus reglas son exactamente lo que quiero.
   No necesitas volver a preguntármelas»` (sobre `plans/handoff/cajones_laterales/`).
   RETIRA, con esta sola cita, TRES decisiones puntuales anteriores que el paquete nuevo
   sustituye entero (no una a una — el paquete se aprobó como conjunto):
     1. La tabla rótulo/valor de los estados (Ricardo, 2026-09-04, opción A): vuelve un
        bloque por estado, pastilla ENCIMA de su párrafo, a todo el ancho (§B/Z2 del
        paquete). El defecto que motivó la tabla (34% menos alto) se acepta a cambio de la
        gramática única de los tres cajones — no es un error revivido, es la contraparte
        de una decisión más grande.
     2. El título del artículo bajado al cuerpo, con la procedencia en la barra (Ricardo,
        2026-09-05): el paquete devuelve el título a la cabecera (con elipsis) y RETIRA la
        procedencia por completo (R9: «nada de rótulo de procedencia en el artículo»).
     3. Los relacionados a sangre con margen negativo: el cuerpo ya no pone relleno propio
        (R9), así que la sangre la da `width:100%` a secas — el calc/margen negativo sobra.
   Ver `PATRON_CENTRO_AYUDA.md` v0.6 para el detalle y las citas completas de cada una.

   ⛔ v1.1 — LAS BADGES DE LOS ESTADOS SE ESTIRABAN AL ANCHO DEL CAJÓN. `DECISION-FUENTE:
   Ricardo, 2026-09-04 — «las badges ocupan todo el ancho del cajón, esto NO debe
   suceder. La badge debe corresponder 1:1 a la que hay en la lista y en catálogo. En
   ambas instancias la badge se ajusta al ancho del texto que contiene»`. Causa:
   `.exds-cay-estado` es `display:grid` de una columna, que blockifica el `inline-flex`
   del Badge y lo estira por `justify-items: stretch` (el default de la rejilla).
   Corregido con `justify-self: start` en el badge — ver la nota junto a
   `.exds-cay-estado > .exds-badge`, más abajo. Y el vacío del cajón ya no es texto
   suelto: `ejemplo.html` monta `EmptyState` (`.exds-estado`), como su propia ficha ya
   lo declaraba en Composición. Ver `patrones/cajon-lateral/cajon-lateral.css` v1.5.

   ⛔ ESTA HOJA ES SÓLO LO QUE ES **PROPIO** DEL CENTRO DE AYUDA. El marco, la pila de
   dos niveles, la flecha de volver, la banda de grupo, la fila, el despliegue y los
   tres grises viven en `patrones/cajon-lateral/` y NO se repiten aquí.
   DECISION-FUENTE: Ricardo, 2026-08-24 — «se cosecha UNA VEZ la concha; cada cajón es
   después una composición».

   DOS NIVELES EN UN MISMO CAJÓN, y el porqué es de tamaño: el RESUMEN de la fila
   contesta la pregunta en cuatro líneas sin sacarte de la lista; el ARTÍCULO COMPLETO
   trae la regla de negocio, cuatro estados y su «qué hacer» — eso ya no es el detalle
   de una fila, es un DOCUMENTO, y metido en el acordeón haría que la lista midiera
   cuatro pantallas de alto.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. `patrones/cajon-lateral/` (hoja y conducta) y los componentes `Search` y `Badge`.
   ═══════════════════════════════════════ */

/* ── LA ZONA DEL BUSCADOR — anclada y en gris ────────────────────────────────
   Fuera de lo que se desplaza: buscar es lo primero que se hace en una ayuda, y
   un buscador que se va con el scroll obliga a subir para volver a preguntar.
   DECISION-FUENTE: Ricardo, 2026-09-22/23 - paquete cajones laterales, A.1 (02_ayuda_1b).
   Relleno 12/20 sobre --color-bg-subtle, con su linea inferior: lo fijo va en gris y
   lo que se desplaza en blanco (R7). Antes esta zona no llevaba fondo ni linea. */
/* GATE-ALLOW: padding 12px 20px en vez de los 16px 20px del canon de zona · la barra del
   buscador es más angosta a propósito (README 02_ayuda_1b, «Medidas exactas»), no es una
   Z2/Z3 de la anatomía general. */
.exds-cay-busca {
  flex-shrink: 0;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  background: var(--color-bg-subtle, #F2F4F6);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
}

/* ── ENCABEZADO DE GRUPO — tipografia sola, sin banda (A.2) ──────────────────
   DECISION-FUENTE: Ricardo, 2026-09-22/23 - paquete cajones laterales, A.2. El primer
   grupo lleva 16 arriba (contra la zona del buscador, que ya trae su propio aire); los
   demas llevan 24 (el peldano entre grupos, el mismo que Ajustes). Nunca banda gris:
   se retiro el 2026-09-03 (BandaGrupo) y no vuelve. */
.exds-cay-grupo-h {
  margin: 0;
  padding: var(--space-6, 24px) var(--space-5, 20px) var(--space-2, 8px);
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.4;
  color: var(--fg1, #0F1419);
}
.exds-cay-grupo-h:first-child {
  padding-top: var(--space-4, 16px);
}

/* ── LA LISTA DE LA PORTADA — el PRIMER nivel de la pila ─────────────────────────────────
   ⛔ HOMOLOGADA 2026-09-02 A LA FILA DEL CAJÓN. `DECISION-FUENTE: Ricardo, 2026-09-02 —
   «A. Y esto no debería ser siquiera pregunta. La fila está hecha para el cajón.»`
   Hasta esa fecha montaba `Acordeon` en modo FAQ + `data-densidad="compacta"`
   (`patrones/acordeon-faq/`); ahora es `.exds-cajon-item`/`.exds-cajon-fila`/
   `.exds-cajon-desp` (`patrones/cajon-lateral/`), el mismo lenguaje que Notificaciones.
   Lo propio de Ayuda sigue siendo SÓLO lo que va DENTRO del resumen desplegado: el
   párrafo, la mini-tabla clave/valor y el botón «Ver el artículo». El marco, la fila, el
   filete a sangre y la apertura son del patrón.

   ⛔ RETIRADO 2026-09-23 (R9, paquete cajones laterales): `.exds-cay-lista` compensaba con
   margen negativo el `padding: 0 20px` de `.ha-home > #haGroups` (`backoffice.css:5724`).
   `DECISION-FUENTE: Ricardo, 2026-09-22 — «el diseño del handoff y sus reglas son exactamente
   lo que quiero»` — R9 del paquete: nada de márgenes negativos para llegar a sangre. Compensar
   un relleno ajeno restándolo aquí es la misma trampa con otro nombre: el anfitrión es quien
   tiene que no ponerlo, no el gemelo quien tiene que restárselo. El kit (`CajonAyuda.jsx`) nunca
   declaró esta clase — ahora gemelo y kit dicen lo mismo: nada.
   Producción monta `.ha-home > #haGroups { padding: 0 20px }`, que hoy dobla ese relleno.
   Lo que falta hacer en producción — quitarlo, para que la sangre real llegue sin él — se
   describe en `plans/cajon-lateral-pulido/lista_produccion.txt` › CENTRO DE AYUDA. Es también
   el nodo que `renderHome()` monta con `exdsCajon.lista()`; la clase sigue existiendo en el
   marcado como gancho, sin ninguna propiedad.
   Antes: `.exds-cay-lista { margin-inline: calc(-1 * var(--space-5, 20px)); }` */

/* El resumen desplegado (`.exds-cajon-desp-c`) NO trae relleno propio — lo pone quien
   monta, como en Notificaciones (`.exds-cnot-det`). El handoff de Ayuda mide 14/20/20/20
   con rowGap 12 (`.exds-cj-det` del prototipo); antes lo daba el modo compacto del
   acordeón (`padding-top:14 / bottom:20`, más el `padding-inline:20` de su cabecera y su
   cuerpo). Ahora lo trae esta clase entera, en un solo sitio. */
/* ⛔ MISMO AIRE QUE SU FAMILIA: 12 de relleno (Ricardo, 2026-09-02 · opción A).
   El cuerpo desplegado del cajón lateral bajó de `14/20/20` a `12px 20px` ese día, y §5-ter dice
   que los cajones son UNA familia: *«aunque tengan diferente estructura o contenido, sí deben
   ser consistentes con este nuevo diseño para que se vean parte de la misma familia»*.
   ⚠ **Se homologa el mismo día que el canon se movió, no «cuando toque».** Lo cazó el revisor
   antes de publicar: el de Facturación ya llevaba 12 y éste seguía en 14/20/20, así que abrir
   los dos en la misma pantalla enseñaba **2 px arriba y 8 abajo** de diferencia. *Ningún gate
   lo ve, porque todos miden cada familia contra SÍ MISMA — la 6ª forma de propagación de
   `GOBIERNO.md` §0-ter aplicada a familias hermanas.* */
/* GATE-ALLOW: relleno del CUERPO desplegado, no de una zona · mismo caso: el gate lo mide contra
   la zona (16/20) y esto es el cuerpo de una fila, que el canon fija en `12px 20px`
   (`.exds-cajon-det`, decision de Ricardo del 2026-09-02, opcion A). 2026-09-02 */
.exds-cay-det {
  display: grid;
  row-gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-5, 20px);
  /* LA SANGRÍA «B» (2026-10-05 · PATRON_CAJON_LATERAL.md LAT-C9, `DECLARACION-FUENTE: Ricardo, 2026-10-05 — «1 aprobada»`):
     el cuerpo de una fila abierta arranca un paso (`--space-3`) más adentro que el título — 20 + 12 = 32. */
  padding-left: calc(var(--space-5, 20px) + var(--space-3, 12px));
}
/* ⛔ Y CUANDO `.exds-cay-det` CUELGA DIRECTO DE `.exds-cajon-desp-c` (2026-09-23, ronda 2 ·
   hallazgo grave de fidelidad): ese contenedor YA trae su propio relleno 12/20 (arriba), así
   que el de `.exds-cay-det` se suma y la fila crece 24 de más (12 arriba + 12 abajo).
   Producción ya lo había resuelto por su cuenta — `admin/css/cajon-ayuda.css:91`,
   `DECISION-FUENTE` implícita del 2026-09-07 — y el canon no lo tenía: se añade aquí para
   que quien homologue producción copiando esta hoja no vuelva a sumarlo. */
.exds-cajon-desp-c > .exds-cay-det {
  padding: 0;
}
/* El cuerpo desplegado de la fila DEL COMPONENTE `CajonFila` (2026-09-04, ver
   COMPONENTE_CAJON_FILA.md): sin padding propio, porque ya cuelga dentro del
   `.exds-cajon-desp-c` que ese componente le da — un segundo padding lo duplicaria.
   `.exds-cay-det` de arriba ya NO la monta `ejemplo.html` (usa `.exds-cay-fila-det`
   en las filas de artículo): sigue viva porque producción la monta cruda —
   `admin/js/backoffice/help-center.js:619` — sin pasar por `CajonFila`. */
.exds-cay-fila-det {
  display: grid;
  row-gap: var(--space-3, 12px);
}
/* ⛔ 1.55 → 1.6 · 2026-09-23 (A.2, paquete cajones laterales). `DECISION-FUENTE: Ricardo,
   2026-09-22 — «el diseño del handoff y sus reglas son exactamente lo que quiero»`. Era el
   único 1.55 que quedaba en todo el canon de cajones — su gemela `.exds-cajon-det-texto`
   (cajon-lateral.css) ya subió a 1.6 el mismo día. Producción monta esta clase
   (`help-center.js`): ver `plans/cajon-lateral-pulido/lista_produccion.txt` › CENTRO DE AYUDA. */
.exds-cay-det-texto {
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.6;
  color: var(--fg2, #4B5563);
  text-wrap: pretty;
  /* `margin: 0` porque esta clase puede caer en un `<p>`, que trae 13px de fábrica del
     navegador. Homologado con `.exds-cajon-det-texto` el 2026-09-02. */
  margin: 0;
}
/* La mini-tabla clave/valor — opcional: sólo se pinta si el artículo trae `campos[]`.
   Hoy NINGÚN artículo de `ARTS` lo trae (es dato de contenido, no de diseño — no se
   inventó aquí; ver reporte). El soporte de render queda listo para cuando se puebla. */
/* ⛔ RECETA «TU ACCESO» · 2026-09-23 — RETIRA la del 2026-09-02 completa (0 de hueco y 6+6
   por celda). `DECISION-FUENTE: Ricardo, 2026-09-23 — decisión D2 (b) de
   `plans/decisiones/_decision_cajones_h1_y_lineas_2026-09-23.html`: una tabla rótulo→valor
   DENTRO del cuerpo de una fila abierta usa columna auto/minmax(0,1fr), 16 entre columnas,
   6 entre renglones, rótulo 12·400·1.4 --fg3 nowrap, valor 12·500·1.4 --fg1 tabular — SIN
   relleno propio de celda (el gap ya pone el aire). Es la MISMA receta que
   `.exds-caj-tabla`/`Drawer.jsx` ya aplican; aquí se declara aparte porque Ayuda no es
   `.exds-cjd`/`.exds-caj-tabla` y esa regla está scopeada a esas clases. La versión anterior
   (row-gap 0 + 6/6 de padding por celda, valor en 400) no seguía D2: le faltaba el gap de 6
   entre renglones y el valor no llevaba el peso 500 que distingue rótulo de valor. */
/* GATE-ALLOW: grid-template-columns auto minmax(0,1fr) en vez del 128px/1fr del canon ·
   receta «Tu acceso» de D2 (Ricardo, 2026-09-23): DENTRO de una fila abierta la columna
   de rótulo es auto, no el ancho fijo de Z2/Z3 de primer nivel. */
.exds-cay-campos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4, 16px);
  row-gap: var(--space-1-5, 6px);
}
.exds-cay-campo-k {
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  line-height: 1.4;
  color: var(--fg3, #5C6B7A);
  white-space: nowrap;
}
/* El valor va en 500 — es lo que lo distingue del rótulo (D2, receta «Tu acceso»); antes
   estaba en 400 y el rótulo y el valor sólo se distinguían por color. */
.exds-cay-campo-v {
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 500;
  font-size: var(--fs-caption, 12px);
  line-height: 1.4;
  color: var(--fg1, #0F1419);
  font-variant-numeric: tabular-nums;
}

/* ── EL ARTÍCULO — el segundo nivel de la pila (§ B del paquete 02_ayuda_1b) ──
   ⛔ EL CUERPO YA NO PONE RELLENO. DECISION-FUENTE: Ricardo, 2026-09-22/23 - paquete
   cajones laterales, R9/B. Cada zona (Z1, cada estado, cada relacionado) trae el suyo,
   para que las lineas lleguen a los dos bordes sin margenes negativos. RETIRA la version
   anterior (padding 20 fijo + grid row-gap 20), que exigia el margen negativo de abajo. */
.exds-cay-cuerpo { padding: 0; display: block; }

/* ⛔ EL TÍTULO DEL ARTÍCULO VUELVE A LA CABECERA — Y LA PROCEDENCIA SE RETIRA · 2026-09-23
   `DECISION-FUENTE: Ricardo, 2026-09-22/23 — paquete cajones laterales, § B (02_ayuda_1b):
   «Título del artículo | va en la cabecera: Drawer title=... No hay <h3> en el cuerpo» y
   R9 «Nada de rótulo de procedencia en el artículo».`

   RETIRA la decisión del 2026-09-05 completa: aquella bajaba el título al cuerpo (por
   miedo a que un título largo se partiera en la barra) y subía la procedencia (el grupo)
   a la barra. El paquete resuelve el mismo problema con `nowrap` + elipsis en la barra
   (medido: 312px de ancho para el título, `text-overflow:ellipsis`) — así los tres
   cajones (factura, ayuda, ajustes) comparten UNA sola cabecera sin casos especiales.
   Las clases `.exds-cay-titulo` y `.exds-cay-procedencia` quedan RETIRADAS: el kit ya no
   las declara (`CajonAyuda.jsx`) y el marcado no las monta (`ejemplo.html`). */
.exds-cay-art {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  padding: var(--space-5, 20px) var(--space-5, 20px) var(--space-4, 16px);
}

.exds-cay-intro {
  margin: 0;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.6;
  color: var(--fg2, #4B5563);
  text-wrap: pretty;
}

/* ── LOS ESTADOS DEL ARTÍCULO — un bloque por estado, pastilla ENCIMA ────────
   ⛔ NO VAN EN TARJETAS. En 420px una caja dentro de otra caja se come 32px de
   ancho útil y no aclara nada.
   DECISION-FUENTE: Ricardo, 2026-09-22/23 - paquete cajones laterales, § B/Z2 (02_ayuda_1b).
   RETIRA la tabla rótulo/valor del 2026-09-04 (opción A de aquella decisión): el paquete
   aprobado entero el 2026-09-22/23 vuelve a un bloque por estado, pastilla arriba y
   párrafo debajo a todo el ancho (380), con su propia línea a sangre — el 12/14 del
   relleno es ÓPTICO (arriba la pastilla ya trae su borde+caja; abajo la última línea de
   un párrafo a 1.6 deja poca tinta bajo el renglón), no se normaliza a 12/12 ni 14/14. */
.exds-cay-estados { display: block; }
.exds-cay-estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* la pastilla no se estira: mide el ancho de su texto */
  gap: var(--space-1-5, 6px);
  padding: var(--space-3, 12px) var(--space-5, 20px) 14px;
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
}
.exds-cay-estado > p {
  margin: 0;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.6;
  color: var(--fg2, #4B5563);
  text-wrap: pretty;
}
.exds-cay-hacer { font-weight: var(--fw-semibold, 600); color: var(--fg1, #0F1419); }

/* ── LOS RELACIONADOS, AL PIE ────────────────────────────────────────────────
   Reemplazan el artículo EN SU SITIO con el mismo desvanecido de la lista — no
   apilan una tercera pantalla. Van a sangre: el margen negativo los saca del
   relleno del cuerpo para que su línea recorra el cajón entero, como las de la
   lista. */
/* ── «VER EL ARTÍCULO» · el remate del resumen ────────────────────────────────────────
   ⛔ NO ES UNA FILA DE RELACIONADOS, aunque hasta el 2026-09-04 compartió su clase.
   `DECISION-FUENTE: Ricardo, 2026-09-04 — «el botón "ver artículo" de ayuda. Actualmente, su
    diseño de chevron y relleno gris hace que se confunda con abrir otra sección. Esto es un UX
    malo»`, y eligió la opción C de `plans/decisiones/_decision_ver_articulo_2026-09-04.html`:
   la misma pieza, sin fondo y alineada a la izquierda.

   El diagnóstico medido: montado como `.exds-cay-rel` ocupaba **418 px, exactamente lo mismo
   que la fila hermana que sí se despliega**, con su chevrón a la derecha y su gris al pasar por
   encima. Tres rasgos idénticos a los de una fila plegable, y lo que hace es empujar una
   segunda pantalla. *Cuando dos cosas que hacen lo contrario se ven igual, el usuario aprende
   pulsando — y aprender pulsando es el coste que paga por un diseño que no se explicó.*

   ⛔ Y por qué NO se toca `.exds-cay-rel`: esa clase es de las filas de artículos relacionados
   del pie, que SÍ son una lista y sí deben ir a sangre. Estaban compartiendo clase dos cosas
   distintas; se separan, que es la única forma de que cada una pueda cambiar sin arrastrar a la
   otra. */
.exds-cay-ver {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
  width: auto;                 /* abraza su texto: no es una fila, no llena el ancho */
  /* ⛔ `width:auto` NO BASTA DENTRO DE UNA REJILLA, y lo comprobé equivocándome: la primera
     versión de esta regla salió midiendo 378px —el ancho entero del cuerpo— porque el cuerpo
     desplegado es un `grid` y un hijo se estira a su columna por defecto. Es exactamente la
     forma 8 de `GOBIERNO.md` §0-ter, la que se escribió esta misma mañana por la pastilla del
     mismo cajón. *Escribir la regla de un defecto no vacuna contra cometerlo: sólo hace que se
     reconozca al medirlo.* Lo caza `gate_pieza_deformada.js`. */
  justify-self: start;
  align-self: start;
  margin: 0;
  padding: 0;
  border: 0;                   /* sin filete: el filete es de las filas */
  background: transparent;     /* y sin fondo al pasar por encima, por el mismo motivo */
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--fg1, #0F1419);  /* sin esto, el <button> hereda el negro por defecto del
                                   navegador y la flecha (currentColor) sale negra en vez
                                   del texto — 2026-09-23, ronda 2 (hallazgo menor). */
}
.exds-cay-ver:hover { background: transparent; }

/* ⛔ ES UN ENLACE, Y SE VE COMO UN ENLACE · 2026-09-05
   `DECISION-FUENTE: Ricardo, 2026-09-05 — «viendo ya montado el link para ver el artículo, el
   uso del chevrón me causa cierta confusión con los chevrones que se utilizan para abrir las
   otras filas del cajón. Recuerdo que había una opción donde la URL estaba subrayada y tenía
   una flecha del lado derecho. Vamos a sustituir por esa opción.»`

   El chevrón «›» es, en este cajón, el signo de ABRIR UNA FILA: aparece en cada renglón de la
   lista y en cada artículo relacionado. Usarlo aquí para algo que NO abre una fila —lleva a
   otra pantalla— le pide al mismo dibujo que signifique dos cosas dentro del mismo cajón.
   *Un signo que aparece diez veces con un significado no se puede pedir prestado para un
   undécimo distinto: gana la costumbre, no la intención.*
   El subrayado hace el trabajo que hacía el chevrón —decir «esto se pulsa»— con el signo que
   ya significa eso en todas partes, y no compite con nada del cajón. */
.exds-cay-ver .exds-cay-rel-t {
  color: var(--fg1, #0F1419);
  text-decoration: underline;
  text-decoration-color: var(--color-border-default, #D1D5DB);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--motion-fast, 120ms) var(--ease-default);
}
.exds-cay-ver:hover .exds-cay-rel-t { text-decoration-color: currentColor; }

/* ── LA FLECHA QUE SE ESTIRA · la pieza del catálogo, no una copia ───────────────────
   ⛔ ESTE BLOQUE NO DEFINE NADA: la flecha vive en `componentes/flecha/` desde el 2026-09-05,
   cosechada de producción, donde estaba desde el 2026-08-06 aprobada por Ricardo. Aquí sólo se
   ENGANCHA: el enlace suma `.exds-flecha-host` y la hoja del componente hace el resto.

   ⚠ LO QUE HABÍA AQUÍ, Y POR QUÉ SE RETIRA — la lección es sobre CITAS, no sobre flechas.
   Este archivo llegó a tener una flecha con OTRO mecanismo: `stroke-dasharray`/`stroke-dashoffset`,
   el del acordeón guiado, que DIBUJA el asta en vez de estirarla. Y a su lado, un
   `DECISION-FUENTE` con la frase de Ricardo del 2026-09-05 pidiendo *«una especie de flecha que
   se estiraba con un efecto en particular, en lugar de solo hacerse para adelante»*.

   La cita era suya y era real. **Lo que estaba mal era pegarla junto a una implementación que
   ella no autorizaba**: él pidió LA FLECHA QUE SE ESTIRA —la que ya existía en el cotizador— y
   se implementó la que estaba a mano en el catálogo. Él lo vio en cuanto la montó: *«La flecha
   no es a la que yo me refería»*.

   *Una cita colocada junto a la decisión equivocada no es un adorno: pasa a DEFENDERLA.* Lo
   midió el subagente que vino a corregirlo: se paró en seco, con razón, porque el archivo traía
   una decisión firmada por Ricardo que decía lo contrario de su encargo. **El obstáculo no fue
   el código: fue el comentario.**
   Regla que deja: al citar a Ricardo junto a una implementación, la cita tiene que autorizar
   ESA implementación, no el problema que la motivó. */
.exds-cay-ver svg { flex: none; }

.exds-cay-ver:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-border-focus, #6E7378);
  border-radius: var(--radius-sm, 6px);
}

.exds-cay-rel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3, 12px);
  /* ⛔ SIN CALC NI MARGEN NEGATIVO desde el 2026-09-22/23 (paquete cajones laterales, R9/
     trampa §6-2 de 02_ayuda_1b): el cuerpo (.exds-cay-cuerpo) ya no pone relleno propio,
     así que la sangre la da el 100% del contenedor a secas. RETIRA el calc(100% + 40px) +
     margin -20px del 2026-08-30/2026-09-04 (necesario cuando el cuerpo SÍ tenía padding:20). */
  width: 100%;
  margin: 0;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  text-align: left;
  border: 0;
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: background-color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-cay-rel:hover { background: var(--color-bg-subtle, #F2F4F6); }
.exds-cay-rel:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-border-focus, #6E7378);
}
.exds-cay-rel-t {
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: var(--fw-medium, 500);
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.35;
  color: var(--fg1, #0F1419);
}
/* ⛔ SE RECORTA CON PUNTOS SUSPENSIVOS · 2026-09-23. El título de un relacionado real mide
   más que los 353px disponibles («Qué tan grave es una coincidencia de prevención de lavado»,
   370px) y sin esto parte en dos renglones — la fila deja de medir 42.55 (R3, § 5 del handoff).
   Escapado al HIJO DIRECTO de `.exds-cay-rel`, no a la clase pelada: la misma clase vive en
   `.exds-cay-ver` (el remate «Ver el artículo»), que abraza su texto y NUNCA se trunca. */
.exds-cay-rel > .exds-cay-rel-t {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exds-cay-rel .exds-cajon-chev-r {
  transition: transform var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
              color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-cay-rel:hover .exds-cajon-chev-r {
  transform: translateX(2px);
  color: var(--fg3, #5C6B7A);
}

@media (prefers-reduced-motion: reduce) {
  .exds-cay-rel,
  .exds-cay-rel .exds-cajon-chev-r { transition: none; }
}