/* ═══════════════════════════════════════
   ▓ COMPONENTE · Combobox — gemelo vanilla ▓
   v1.0 · 2026-08-23. Ficha: `design-system/COMPONENTE_COMBOBOX.md`
   Kit: `catalogo-cd/components/Combobox.jsx`

   El campo en el que se puede **escribir Y elegir**: filtra una lista mientras se teclea, y
   deja una salida a texto libre («Otra…») para lo que la lista no contempla. Cosecha de
   PRODUCCIÓN (mi-exante, `.flf-wrap.flf-combobox`), aprobada por Ricardo el 2026-08-02.

   ⛔ ES UNA COMPOSICIÓN. El campo es el `Input` en su variante flotante
   (`componentes/input/`), el caret es un `IconButton` fantasma (`componentes/iconbutton/`) y
   el chevron sale de la fuente única de íconos. Lo ÚNICO propio de esta pieza es el ancla, la
   lista, sus filas, el separador y el giro del caret. Sin las hojas del Input y del
   IconButton, aquí no hay campo ni botón.

   ⛔ TRES MODOS EXCLUYENTES, y el tercero apaga la pieza:
     · `default`           — escribiendo y filtrando; hay lista y hay caret.
     · `catalog-selected`  — eligió del catálogo. **NO lleva verde ni palomita**
                             (Ricardo, 2026-08-02, decisión B): elegir de una lista es
                             VÁLIDO, no ÉXITO. El verde se reserva a los campos que de
                             verdad validan algo. El valor elegido habla por sí mismo.
     · `freeform`          — eligió «Otra…»: captura libre, **sin lista y sin caret**.
                             Volver atrás es cosa de la pantalla, no del componente.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. Los gemelos del Input y del IconButton.
   ═══════════════════════════════════════ */

/* ── EL ANCLA ────────────────────────────────────────────────────────────────
   La lista se posiciona contra ESTA caja y no contra el `<input>`: así cubre todo el ancho
   de la pieza, caret incluido, y no se queda corta por la derecha. */
.exds-combobox { position: relative; }

/* ── LA LISTA ────────────────────────────────────────────────────────────────
   Flota 4px por debajo del campo y se desplaza a partir de 240px de alto.

   `z-index: 20` la pone por encima del formulario y por DEBAJO de un cajón o un modal, que
   viven en la cuarentena de los 40+. Un desplegable de campo que tapa un modal es el defecto
   clásico de subir el z-index «por si acaso». */
.exds-combobox-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-default, #D1D5DB);
  border-radius: var(--radius-md, 10px);
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 20, 25, 0.12));
}

/* ── LAS FILAS ───────────────────────────────────────────────────────────────
   ⛔ NO LLEVAN PALOMITA NI MARCA DE ELEGIDA. Se pensó y se descartó: la fila elegida ya
   cierra la lista y su texto queda escrito en el campo, así que una palomita señalaría algo
   que el usuario tiene delante. `aria-selected` sí va, porque el lector de pantalla no ve el
   campo mientras recorre la lista. */
.exds-combobox-opt {
  padding: 8px 12px;
  font: 400 var(--fs-body, 14px)/1.3 var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  color: var(--fg1, #0F1419);
  cursor: pointer;
  border-radius: var(--radius-sm, 6px);
  user-select: none;
}

/* ⛔ EL RATÓN Y EL TECLADO PINTAN LO MISMO, y es deliberado: un resaltado para el ratón y
   otro para el teclado dejan dos filas «elegidas» a la vez en cuanto el usuario mezcla los
   dos, que es lo normal. Aquí `data-hl` es la única verdad y el hover la acompaña. */
.exds-combobox-opt:hover,
.exds-combobox-opt[data-hl="true"] { background: var(--color-bg-subtle, #F2F4F6); }

/* ── LA SALIDA · «Otra…» ─────────────────────────────────────────────────────
   Va un tono más apagado (`--fg3`) porque NO es una opción del catálogo: es la puerta para
   cuando ninguna lo es. Si tuviera el mismo peso que las demás, sería la decimoprimera
   marca de coche en una lista de diez. */
.exds-combobox-opt--other { color: var(--fg3, #5C6B7A); }

/* El separador que la despega del catálogo. Es lo que convierte «una opción más» en «otra
   cosa»: sin él, el tono apagado se lee como una opción deshabilitada. */
/* LINT-ALLOW: rol-color separador 1px con background · el único token de rol de divisor con el mismo valor (--color-hairline-strong) también es de rol borde, así que el lint lo marcaría igual; un separador es una línea rellena, no un borde */
.exds-combobox-sep {
  height: 1px;
  background: var(--color-border-default, #D1D5DB);
  margin: 4px 8px;
  list-style: none;
}

/* ── EL CARET ────────────────────────────────────────────────────────────────
   Gira 180° cuando la lista está abierta. `display: block` y `flex-shrink: 0` no son adorno:
   sin ellos la línea base del `<svg>` baila dentro del botón y el chevron se aplasta cuando
   el campo se estrecha. En el kit de React los pone `<Icono>` en línea; aquí, donde el `<svg>`
   se escribe a mano, tienen que estar en la hoja. Mismo valor en los dos sitios.

   ⛔ EL INTERRUPTOR ES `data-open`, no una clase. Es el mismo atributo en el kit y en el
   gemelo, así que el estado abierto no puede quedarse escrito de dos maneras distintas. */
.exds-combobox-caret {
  display: block;
  flex-shrink: 0;
  color: var(--fg3, #5C6B7A);
  transform: none;
  transition: transform var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-combobox-caret[data-open="true"] { transform: rotate(180deg); }

/* ⛔ Apagar el movimiento NO es dejar sin señal, y aquí la señal sobrevive entera: el chevron
   se queda apuntando hacia arriba —sin la vuelta— y la lista sigue abierta a la vista. Lo que
   se pierde es el viaje, no el estado. */
@media (prefers-reduced-motion: reduce) {
  .exds-combobox-caret { transition: none !important; }
}