/* ═══════════════════════════════════════════════════════════════════════════════
   option-list.css — GEMELO VANILLA de `OptionList`, estilo FILAS (2026-08-21)

   FUENTE ÚNICA: `catalogo-cd/components/OptionList.jsx`. Cada regla de aquí es la MISMA
   de allí, con el MISMO selector. Si difieren, manda el kit.

   ⛔ POR QUÉ NACE. Nunca ha existido, y hasta hoy ninguna pantalla de HTML plano podía
   montar una lista de opciones del catálogo sin traducir React a mano. La primera que la
   necesita es la resolución de avisos de Finanzas › Facturación, donde el motivo pasó de
   texto libre a **vocabulario cerrado**: un puñado de desenlaces legítimos por tipo de
   aviso, uno de los cuales se elige. Eso es exactamente una OptionList y nada más.

   ⛔ QUÉ NO SE COPIA, Y SE DICE EN VOZ ALTA: el estilo **SEGMENTADO** (`.exds-ol-seg*`).
   No es un olvido — no hay ninguna superficie de HTML plano que lo monte hoy, y un gemelo
   que copia reglas que nadie ejercita es superficie que envejece sin que nadie lo note.
   Cuando aparezca el primer caso se trae entero, con su ejemplo.

   ⛔ EL INDICADOR ES UN RADIO, NUNCA UNA PALOMITA. La palomita está reservada a selección
   múltiple; aquí se elige UNA. Y la selección la marca **el punto**, no un gris distinto:
   el fondo del elegido es el MISMO `--color-bg-subtle` del hover (Ricardo, 2026-07-31).

   ⛔ LA CASCADA DE ENTRADA — papel 4 del lenguaje de movimiento, ritmo 30 ms, techo 180 ms
   (6 turnos). La regla `nth-child(n+7)` NO es «un techo por si acaso»: sin ella las
   opciones de la 6.ª en adelante caen al retardo 0 y entran **de golpe junto con la
   primera, adelantándose a las de en medio**. Con cualquier lista de 6+ el orden se ve
   invertido. Se enciende con `data-anim="true"`; sin el atributo no hay animación.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── estilo FILAS ── full-bleed dentro del cuerpo del cajón (cancela su relleno 18/22) ── */
.exds-ol { margin: 2px -18px -22px; border-top: 1px solid var(--color-border-subtle); }

/* ⛔ EL MODIFICADOR QUE LE DICE DÓNDE VIVE (2026-08-21) — `data-sangrado="ninguno"`.
   La regla de arriba lleva **el relleno de UN anfitrión concreto tecleado dentro**
   (`-18px` / `-22px`: el cuerpo del cajón del cotizador). Montarla en cualquier otra caja
   —la de resolución de un aviso, que tiene relleno 16— la desborda 2 px por cada lado y se
   come 22 px por abajo. Es el mismo hueco que el handoff de Facturación declaró abierto
   para `Acordeon` y `RegistroActividad`: *piezas que traen relleno propio y no saben dónde
   viven*. Aquí se cierra con la vía barata: un atributo que apaga la sangría, no una
   segunda pieza. Sin el atributo, la pieza se comporta EXACTAMENTE como antes. */
.exds-ol[data-sangrado="ninguno"] { margin: 2px 0 0; }

.exds-ol-opt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 0;
  border-top: 1px solid var(--color-border-subtle); background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-sans); transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease); }
.exds-ol-opt:first-child { border-top: 0; }
/* hover CANON (= dk-row, CardSelector, tabla) */
.exds-ol-opt:hover:not([disabled]) { background: var(--color-bg-subtle); }
.exds-ol-opt[aria-checked="true"] { background: var(--color-bg-subtle); }
.exds-ol-opt:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: -2px; }  /* foco AA (piso) */
.exds-ol-opt[disabled] { opacity: .5; cursor: default; }
.exds-ol-label { flex: 1; font: 500 var(--fs-body, 14px) var(--font-sans); color: var(--fg1); }
.exds-ol-opt[aria-checked="true"] .exds-ol-label { font-weight: 600; }

/* indicador = Radio del catálogo (anillo 20px · marcado = relleno ink + punto blanco 9px) */
.exds-ol-disc { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--color-border-default);
  background: var(--color-surface); display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--motion-fast) var(--ease-default), border-color var(--motion-fast) var(--ease-default); }
.exds-ol-disc::after { content: ""; width: 9px; height: 9px; border-radius: var(--radius-pill); background: var(--fg-inverse);
  transform: scale(0); transition: transform var(--motion-fast) var(--ease-emphasis); }
.exds-ol-opt[aria-checked="true"] .exds-ol-disc { border-color: var(--color-action-ink); background: var(--color-action-ink); }
.exds-ol-opt[aria-checked="true"] .exds-ol-disc::after { transform: scale(1); }

/* ── entrada en cascada (papel 4 + modificador ESCALONADO) ── */
@keyframes exds-ol-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.exds-ol[data-anim="true"] .exds-ol-opt { animation: exds-ol-in var(--motion-base, 250ms) var(--ease-emphasis) backwards; }
.exds-ol[data-anim="true"] .exds-ol-opt:nth-child(2)   { animation-delay: 30ms; }
.exds-ol[data-anim="true"] .exds-ol-opt:nth-child(3)   { animation-delay: 60ms; }
.exds-ol[data-anim="true"] .exds-ol-opt:nth-child(4)   { animation-delay: 90ms; }
.exds-ol[data-anim="true"] .exds-ol-opt:nth-child(5)   { animation-delay: 120ms; }
.exds-ol[data-anim="true"] .exds-ol-opt:nth-child(6)   { animation-delay: 150ms; }
.exds-ol[data-anim="true"] .exds-ol-opt:nth-child(n+7) { animation-delay: 180ms; }   /* TECHO */

/* ⛔ REDUCIR MOVIMIENTO: se apaga el viaje, NO el cambio de estado. La opción se sigue
   marcando y desmarcando — lo que desaparece es el recorrido. */
@media (prefers-reduced-motion: reduce) {
  .exds-ol[data-anim="true"] .exds-ol-opt { animation: none; }
  .exds-ol-opt, .exds-ol-disc, .exds-ol-disc::after { transition-duration: .01ms; }
}