/* ═══════════════════════════════════════
   ▓ PATRÓN · Lista de coincidencias — gemelo vanilla ▓
   v1.0 · 2026-09-06. Ficha: `design-system/PATRON_LISTA_COINCIDENCIAS.md`

   Resultados de una búsqueda, agrupados por tipo: rótulo de grupo + filas (icono/avatar +
   dos renglones + columna derecha con estado en pastilla y/o cifra). Vive DENTRO de un panel
   que ya lo contiene — no trae marco, borde ni sombra propios: eso es del anfitrión (la
   ventana `busqueda-global`, o el desplegable de contexto del asistente).

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. La pieza `RotuloGrupo` (`componentes/rotulo-grupo/rotulo-grupo.css`) para el rótulo
        de cada grupo — este patrón NO redeclara esa anatomía.
     4. La pieza `Badge` (`componentes/badge/badge.css`) para el estado de la fila, cuando
        lo hay — la regla dura: el estado PRINCIPAL de cualquier tabla va SIEMPRE en pastilla.
     5. La pieza `Avatar` (`componentes/avatar/avatar.css`) para la fila cuando el resultado
        es una IDENTIDAD (cliente/empresa) — la FORMA dice el tipo, así que esa fila no lleva
        además un tile de icono.

   COSECHADO DE PRODUCCIÓN: `exante-git/admin/js/backoffice/backoffice-2.js`
   (`renderCmdkResults`) y `admin/css/backoffice.css` (mismo bloque S19 que `busqueda-global`).
   Prefijo del catálogo: `exds-lc-*`.

   ⛔ EL REPARTO CON `busqueda-global` — declarado, no improvisado (ver README de esta
   carpeta y el de `componentes/busqueda-global/`): el CONTENEDOR de resultados y la
   ANIMACIÓN de su alto viven AQUÍ (es «la lista» que decide Ricardo el 2026-09-06), no en el
   componente que la aloja — el componente sólo pone el panel que la contiene.
   ═══════════════════════════════════════ */

/* El contenedor de resultados. SÓLO el alto se anima — las filas NO (ver el porqué en la
   ficha, §Movimiento: un gesto que se repite con cada tecla se acumula y se lee como
   lentitud). `overflow:hidden` es obligatorio para que la transición de `height` no muestre
   un recorte a medias del contenido. */
.exds-lc-results {
  transition: height var(--motion-fast, 120ms) var(--ease-default, cubic-bezier(0.32,0.72,0,1));
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .exds-lc-results { transition: none; }
}

/* La fila. `<a>` o `<button>` — crudo (ver ficha §Composición): layout de icono/avatar + dos
   renglones + columna derecha, sin estados propios de control más allá de hover/activo. */
.exds-lc-item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
}
/* Sólo el ACTIVO pinta fondo — nunca también el `:hover`. Con las dos señales a la vez
   (activo por teclado + hover por ratón) puede haber DOS filas marcadas al mismo tiempo, que
   es uno de los cuatro defectos que `gate_render.js` prohíbe en cualquier pantalla: el foco
   encendido en más de un sitio. El anfitrión mueve el activo también con el ratón
   (`mousemove`, no `mouseover`) para que la fila bajo el cursor SEA la activa — ver JS. */
.exds-lc-item.is-active { background: var(--color-bg-subtle, #F2F4F6); }

/* El icono de la fila — SÓLO para resultados que NO son una identidad (p. ej. una
   solicitud). Una identidad (cliente/empresa) monta `Avatar` en su lugar: la forma ya dice
   el tipo y un segundo icono repetiría el dato. */
.exds-lc-item-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-bg-subtle, #F2F4F6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg2, #4B5563);
  flex-shrink: 0;
}

.exds-lc-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.exds-lc-item-title {
  font: 600 13px var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  color: var(--fg1, #0F1419);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exds-lc-item-meta {
  font: 400 11px var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  color: var(--fg3, #5C6B7A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* La columna derecha: el estado en su pastilla (`Badge`) y, cuando la fila trae dinero, el
   importe alineado por su borde derecho. */
.exds-lc-item-der {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-2-5, 10px);
  flex-shrink: 0;
}
/* `min-width` en la pastilla es a propósito — ver ficha §La columna de cifras alinea por su
   borde derecho: sin él, un estado más largo («Captura iniciada») empuja el importe y la
   columna de cifras deja de alinear entre sí. La pastilla no empuja el importe: el importe
   reserva su propio ancho mínimo. */
.exds-lc-item-der .exds-badge { min-width: 74px; justify-content: center; }
.exds-lc-item-amount {
  font: 500 13px var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--fg1, #0F1419);
  font-variant-numeric: tabular-nums;
  min-width: 104px;
  text-align: right;
}