/* ═══════════════════════════════════════
   ▓ COMPONENTE · Fila que navega — gemelo vanilla ▓
   v1.0 · 2026-08-25. Ficha: `design-system/COMPONENTE_FILA_NAVEGA.md`
   Kit: `catalogo-cd/components/FilaNavega.jsx`

   EL RENGLÓN PULSABLE QUE VIVE DENTRO DE UN CONTENEDOR y que, al pulsarlo, te
   LLEVA a otra cosa. La «factura relacionada» del cajón de Facturación, el
   resultado del buscador, el renglón del menú de cuenta del portal.

   ⛔ NO ES LA FILA DE UNA PANTALLA DE LISTA. Ésa es `.exds-pl-row`
   (`PATRON_PANTALLA_LISTA.md`) y son piezas distintas por geometría, no por
   gusto: la de la lista va DE BORDE A BORDE del cromo, sin radio y con filete
   inferior —es una tabla—; ésta vive DENTRO de un contenedor que ya tiene
   relleno, lleva radio y no lleva filete —es un renglón—. *La prueba para
   elegir: ¿la fila toca los dos bordes del marco? Entonces es de la lista.*

   ⛔ TAMPOCO ES una fila que SELECCIONA (`.exds-ol-opt`, con su radio de opción)
   ni una que DESPLIEGA (`.exds-acc-h`, con su chevrón que gira). Las tres se
   parecen y hacen tres cosas: **navegar · elegir · abrir**. La afordancia lo
   dice: chevrón que APUNTA (navega) · marca de opción (elige) · chevrón que GIRA
   (abre).

   ⛔ CERO CAMBIO VISUAL EN FACTURACIÓN, que es la superficie de la que se
   cosecha. `DECISION-FUENTE: Ricardo, 2026-08-25 — «De acuerdo con todas tus
   recomendaciones, aplícalas.»` (decisión 3 de
   `_decision_recomendaciones_aplicadas_2026-08-25.html`).

   ⚠ LAS MEDIDAS SON PROVISIONALES. Son las de `.fxc-rel`, que es la regla que se
   cosecha — pero el sistema tiene HOY otras cinco reglas para lo mismo, con
   números distintos (ver la ficha § El censo). Homologarlas cambiaría píxeles en
   pantallas vivas, y esta cosecha se aprobó con cero cambio visual, así que la
   pregunta viaja aparte y NINGUNA de las cinco se ha tocado.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. Para el chevrón: la hoja de `patrones/pantalla-lista/` (monta
        `.exds-pl-chev`, que es el chevrón de fila del catálogo — aquí NO se
        redibuja).
     4. Si se usa la sangre (por defecto), que el contenedor tenga al menos
        `--space-2` (8px) de relleno lateral: el margen negativo lo compensa.
   ═══════════════════════════════════════ */

/* ── LA FILA ─────────────────────────────────────────────────────────────────
   Un botón crudo A PROPÓSITO: no es una acción con peso —no hay `Button` que
   corresponda— sino una FILA que navega. Meterla en una tarjeta sería la tercera
   caja anidada dentro del cajón, y cada marco se come el sitio del dato.

   ⛔ EL RADIO NO ES DECORACIÓN, ES LA FORMA DE LA BANDA DE HOVER. Un renglón que
   se pulsa y no responde al ratón se lee como texto; y la banda que responde
   tiene que tener forma de banda, no de rectángulo a filo.

   ⛔ EL RELLENO LATERAL Y EL MARGEN NEGATIVO SON LA MISMA CANTIDAD, y ése es todo
   el truco: la banda del hover se ensancha hasta el borde del contenedor y el
   TEXTO NO SE MUEVE de su columna. Si se cambia uno hay que cambiar el otro. */
.exds-filan {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2-5, 10px);
  padding: var(--space-2, 8px);
  margin-inline: calc(var(--space-2, 8px) * -1);
  border: 0;
  border-radius: var(--radius-md, 10px);
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--motion-fast, 120ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}

.exds-filan:hover { background: var(--color-bg-subtle, #F2F4F6); }
.exds-filan:focus-visible { outline: 2px solid var(--color-border-focus, #6E7378); outline-offset: 2px; }

/* SIN SANGRE · para un anfitrión que no tiene relleno lateral que compensar, o
   donde la banda del hover NO debe rebasar la columna del texto. */
.exds-filan[data-sangra="no"] { margin-inline: 0; }

/* `transition: none` y NO `0.01ms`: es el idioma que ya usa `pantalla-lista.css`
   para sus filas, y además el único que el lint de tokens no tiene que perdonar
   — «casi cero» es una duración inventada y hay que declararla; «ninguna» no es
   una duración. */
@media (prefers-reduced-motion: reduce) { .exds-filan { transition: none; } }