/* ═══════════════════════════════════════════════════════════════════════════════
   ▓ COMPONENTE · Asistente — gemelo vanilla ▓
   v1.0 · 2026-08-24. Ficha: `design-system/COMPONENTE_ASISTENTE.md`

   FUENTE ÚNICA: `catalogo-cd/components/Asistente.jsx` — los OCHO kits que ese archivo
   exporta (`Asistente` · `Composer` · `Mensaje` · `AccionesMensaje` · `ChipContexto` ·
   `FilaContexto` · `ReferenciaRespuesta` · `IsotipoX`). Cada regla de aquí es la MISMA de
   allí, con las MISMAS medidas. Si difieren, manda el kit.

   El panel acoplado a la derecha que contiene el asistente de IA: en el portal responde
   dudas del cliente; en el backoffice es el asistente operativo del analista. Cabecera,
   área de conversación que hace scroll, y un pie con el compositor.

   ⛔ ESTA HOJA NO SE BASTA SOLA, Y ESO ES LO CORRECTO. El Asistente es un COMPUESTO: monta
   piezas del catálogo en vez de redibujarlas (GOBIERNO §1-ter-bis). Lo que NO vas a
   encontrar aquí, porque vive en su propia hoja y se carga aparte:

     · `componentes/iconbutton/iconbutton.css` — los botones de ícono. Aquí sólo se declara
       la MEDIDA de cada uso (`.exds-dk-tool`, `.exds-dk-send`, `.exds-dk-abtn`…); la forma,
       el press y el foco los pone `.exds-iconbtn`. **Sin esa hoja los botones salen crudos.**
     · `componentes/boton-copiar/boton-copiar.css` — el copiar de la fila de acciones.
     · `componentes/banner/banner.css` — el aviso de error del composer.
     · `componentes/estados/estados.css` — los cuatro vacíos del buscador y el sin-permiso.
     · El `.bolt-chip` de la familia Bolt para las acciones rápidas (ver el README: es la
       única dependencia que HOY no tiene carpeta de gemelo propia, y está declarada).

   *Una hoja que se bastara sola sería la señal de que reimplementó por dentro lo que ya
   existía — que es el Frankenstein un nivel más abajo: cada pantalla que la monte hereda
   el duplicado sin poder verlo desde fuera.*

   ⛔ AUDITORÍA DE RESETS DE FÁBRICA (la trampa de INC-718, §7 de la guía): se comprobó
   elemento por elemento que el marcado vanilla NO cambia el tipo respecto al kit. Los
   cinco `<button>` de aquí (`ctxadd`, `tool`, `send`, `row`, `lock-btn`) son `<button>`
   también en React; el chip es `<span>` en los dos; la burbuja es `<div>` en los dos. No
   hay ningún `div→button` que traiga un `text-align:center` de regalo. **Se dice porque
   ningún gate puede decirlo: no hay nada del lado del kit contra qué medir una ausencia.**

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. Las hojas de las piezas que monta, listadas arriba.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── MARCO ─────────────────────────────────────────────────────────────────────
   DOS FORMAS, y lo único que cambia entre ellas es el MARCO: cabecera, scroll y pie
   son idénticos. Es lo que evita que dentro de un mes alguien homologue dos
   asistentes que nunca fueron dos.
   El panel no flota: convive. Al cerrarse empuja de vuelta el contenido. */
.exds-dk {
  display: flex;
  flex-direction: column;
  height: var(--exds-dk-h, 520px);
  width: var(--w-cajon, 420px);
  max-width: 100%;
  background: var(--color-surface, #FFFFFF);
  overflow: hidden;
}
.exds-dk[data-forma="acoplado"] { border-left: 1px solid var(--color-border-subtle, #EDEFF2); }
.exds-dk[data-forma="tarjeta"] {
  border: 1px solid var(--color-border-subtle, #EDEFF2);
  border-radius: var(--radius-lg, 14px);
}

/* UNA SOLA CABECERA (Ricardo 2026-07-29): 64px —el alto de TODOS los drawers, no uno
   propio de éste—, título + los botones que hagan falta, SIN isotipo y SIN «En línea».
   Va a ras de la topbar para que su divisoria caiga en el mismo eje que la de arriba. */
.exds-dk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  flex-shrink: 0;
  padding: 0 14px 0 20px;
  background: var(--color-surface, #FFFFFF);
  border-bottom: 1px solid var(--color-border-subtle, #EDEFF2);
}
.exds-dk-head-t {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 600;
  font-size: var(--fs-button-lg, 15px);
  letter-spacing: -0.01em;
  color: var(--fg1, #0F1419);
}
.exds-dk-head-x { width: 32px; height: 32px; border-radius: var(--radius-pill, 999px); color: var(--fg2, #3D4752); }

/* La barra de scroll se oculta a propósito: el panel es angosto y la barra le come
   ancho de lectura. El scroll sigue funcionando con rueda, teclado y arrastre. */
.exds-dk-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: none;
}
.exds-dk-scroll::-webkit-scrollbar { display: none; width: 0; }

/* ── TURNO DEL ASISTENTE y BURBUJA DEL USUARIO ─────────────────────────────────
   El hueco del avatar se apaga por atributo: una pieza que sabe encogerse sola es una
   pieza menos que explicar en su README. */
.exds-dk-msg-a { display: flex; gap: 11px; }
.exds-dk-msg-a[data-avatar="no"] { gap: 0; }
.exds-dk-msg-col { min-width: 0; flex: 1; }

.exds-dk-au { display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px; }
.exds-dk-who {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 600;
  font-size: var(--fs-caption, 12px);
  color: var(--fg2, #3D4752);
}
.exds-dk-sep {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  color: var(--fg4, #8A94A0);
}
/* La hora es RELATIVA, con la exacta en `title` y en `datetime` (legible por máquina,
   para auditoría). ⛔ Al implementar: el relativo DEBE recalcularse, o se vuelve mentira
   con la pestaña abierta. */
.exds-dk-when {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  color: var(--fg3, #5C6B7A);
}
.exds-dk-bd {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-body, 14px);
  line-height: 1.6;
  color: var(--fg1, #0F1419);
}

/* La ranura donde cuelgan las acciones del turno. El hueco interior lo pone
   `.exds-dk-acts`, que es de `AccionesMensaje`: aquí sólo se separa del cuerpo. */
.exds-dk-acts-slot { display: flex; gap: 2px; margin-top: 8px; }
.exds-dk-acts { display: flex; gap: 2px; }
/* La caja de 28 con radio pequeño: en una fila de acciones bajo un mensaje, el
   `IconButton` que abraza el ícono quedaría sin superficie de toque. Es la medida de
   ESTA fila, no del catálogo. */
.exds-dk-abtn { width: 28px; height: 28px; border-radius: var(--radius-sm, 6px); }

.exds-dk-msg-u { display: flex; justify-content: flex-end; gap: 11px; }
.exds-dk-msg-u[data-avatar="no"] { gap: 0; }
/* ⭐ Decisión #3 (Ricardo 2026-07-29): «sunken» es el DEFAULT — relleno fuerte SIN borde.
   A ese tono (~1.23:1 contra blanco) el relleno sostiene la silueta solo y el borde sobra.
   «subtle» (relleno claro + borde) queda para fondos que no sean blancos.
   ⛔ La combinación que NUNCA va es relleno claro SIN borde: ahí el globo se difumina. */
.exds-dk-ub {
  max-width: 86%;
  color: var(--fg1, #0F1419);
  border-radius: var(--radius-md, 10px);
  padding: 11px 15px;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-body, 14px);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  order: 1;
}
.exds-dk-ub[data-tono="sunken"] { background: var(--color-bg-sunken, #EFF1F4); border: 1px solid transparent; }
.exds-dk-ub[data-tono="subtle"] {
  background: var(--color-bg-subtle, #F7F8FA);
  border: 1px solid var(--color-border-subtle, #EDEFF2);
}
.exds-dk-uav { order: 2; flex-shrink: 0; }

/* ── CHIP DE CONTEXTO ──────────────────────────────────────────────────────────
   ⛔ NEUTRO A PROPÓSITO, y ése es el punto entero de la regla de color aquí: el volt se
   reserva a lo que la IA PRODUCE (las acciones rápidas). Si cada chip de contexto fuera
   volt, el volt dejaría de significar algo justo donde debe significarlo. *Un sustantivo
   que acota la pregunta no es la IA trabajando: es el usuario apuntando.* */
.exds-dk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 9px;
  border: 1px solid var(--color-border-default, #DDE1E7);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-surface, #FFFFFF);
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 500;
  font-size: var(--fs-caption, 12px);
  color: var(--fg1, #0F1419);
  white-space: nowrap;
}
.exds-dk-chip-ti { color: var(--fg3, #5C6B7A); display: inline-flex; }
.exds-dk-chip-x { width: 20px; height: 20px; border-radius: var(--radius-pill, 999px); }

/* ── BOTÓN DE CONTROL DEL COMPOSER ─────────────────────────────────────────────
   Añade el press del sistema. NO es el `IconButton` fantasma: la apariencia la compone
   la clase de cada uso (`.exds-dk-tool`, `.exds-dk-send`), y el conjunto es heterogéneo
   —íconos puros, un botón ícono+texto («Contexto») y uno de texto («Ir a Ayuda»)—. */
.exds-dk-ct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0, 0, .2, 1)),
              color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0, 0, .2, 1)),
              transform var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0, 0, .2, 1));
}
.exds-dk-ct:active:not(:disabled) { transform: scale(.97); }
.exds-dk-ct:focus-visible { outline: 2px solid var(--color-border-focus, #0F1419); outline-offset: 2px; }
.exds-dk-ct:disabled { cursor: not-allowed; }

/* ── EL PIE Y EL COMPOSER ──────────────────────────────────────────────────── */
.exds-dk-foot {
  border-top: 1px solid var(--color-border-subtle, #EDEFF2);
  padding: 12px 16px 14px;
  background: var(--color-bg-subtle, #F7F8FA);
  flex-shrink: 0;
}
/* Acciones rápidas: sólo en reposo y sin texto. Con texto escrito, cargando o en error
   desaparecen, porque el usuario ya eligió qué hacer. El chip es `.bolt-chip`, de la
   familia Bolt — aquí sólo va su fila. */
.exds-dk-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }

/* ⛔ EL `hidden` NO SE CUMPLE SOLO EN NADA QUE DECLARE `display`. Medido en Chromium el
   2026-08-24 mirando el estado de error: las acciones rápidas seguían a la vista con el
   atributo puesto. El navegador aplica `[hidden] { display:none }` desde su hoja de
   usuario-agente, con peso 0-0-0; cualquier clase de autor que diga `display` (aquí `flex`)
   le gana. *El atributo queda puesto, el lector de pantalla lo respeta y el ojo no — o sea
   que el marcado y la pantalla dicen cosas distintas.*

   Afecta a lo que declara `display` Y se apaga con `hidden`: la fila de acciones rápidas y la
   × de limpiar la búsqueda (que hereda `display:flex` de `.exds-iconbtn`). El contador
   «5 de 5» no hace falta declararlo: no declara `display`, así que su `hidden` funciona.
   Sin `!important`: clase + atributo pesa 0-2-0 y basta.

   ⭐ **Es la trampa de INC-718 en su tercera forma, y la más difícil de ver:** no es el tipo
   de elemento, es que el kit y el gemelo apagan las cosas por MECANISMOS distintos —React
   desmonta el nodo, el vanilla lo oculta— así que el defecto **no puede existir en el kit**
   y `gate_gemelos_conducta`, que compara CSS contra CSS, no tiene nada que comparar.
   Producción ya lo había pagado y lo tenía escrito con `!important` en dos sitios. */
.exds-dk-quick[hidden], .exds-dk-srch-x[hidden] { display: none; }

/* ⭐ EL FOCO PERTENECE A LA TARJETA, NO A LA CAJA DE TEXTO — regla general del sistema
   (Ricardo 2026-07-29, promovida a `COMPONENTE_FOCO.md` §3, tratamiento 3). Es un
   OSCURECIMIENTO del borde existente, nunca un `outline` adicional: sumar outline sobre
   el borde reproduce el doble delineado que ya se corrigió en las casillas del sistema.
   *En una entrada compuesta «aquí estás» es la tarjeta entera: el usuario salta entre el
   campo y sus botones sin salir de la misma tarea.* */
.exds-dk-composer {
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-default, #DDE1E7);
  /* ⛔ 20 → 6 EL 2026-08-26 · `lint_radio_caja`: «el radio lo decide el tamaño de la caja»
     (relleno ≤10 → 6). Con 10 px de relleno y un radio de 20, la esquina se comía el propio
     acolchado y la caja se leía como pastilla. Es la regla del canon aplicada, no un gusto:
     la decidió Ricardo el 2026-07-21 y esta pieza se le había escapado. */
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 20, 25, .04));
  padding: 10px;
  transition: border-color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0, 0, .2, 1)),
              box-shadow var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0, 0, .2, 1));
}
.exds-dk-composer:focus-within { border-color: var(--color-border-focus, #0F1419); }
/* El error es un ESTADO de la tarjeta, no un color escrito en el marcado. */
.exds-dk-composer[data-error="true"] { border-color: var(--color-error, #C0392B); }

/* ⛔ EL RESET LO COMPARTEN LOS DOS CAMPOS, en UNA regla con dos sujetos — no en dos reglas
   con los mismos valores. *Dos copias del mismo valor no son una medida compartida: son
   dos medidas que hoy coinciden.* */
.exds-dk-ta, .exds-dk-ta:focus,
.exds-dk-srch-in, .exds-dk-srch-in:focus { border: 0; outline: 0; box-shadow: none; }
.exds-dk-ta::placeholder, .exds-dk-srch-in::placeholder { color: var(--fg3, #5C6B7A); opacity: 1; }

/* ⛔ EL ANILLO INTERIOR SE APAGA CON PESO SUFICIENTE, Y NO ES UN DETALLE DE CASCADA.
   Medido en Chromium el 2026-08-24: el canon da anillo de foco a las cajas de texto con
   `input[type="text"]:focus` (peso 0-2-1), que le GANA a `.exds-dk-srch-in:focus` (0-2-0).
   Resultado: el buscador del popover salía con la caja SIN oscurecer y el input CON anillo —
   el doble delineado exacto que el tratamiento 3 de `COMPONENTE_FOCO.md` prohíbe, y que la
   propia ficha del Asistente promovió a regla general.

   ⭐ Y lo que enseña, que vale más que el arreglo: **el composer estaba bien por casualidad.**
   Su campo es un `textarea`, y `textarea:focus` pesa 0-1-1, o sea MENOS que la clase — así que
   allí el apagado ganaba solo. La misma construcción con un `input` falla. *Una regla que se
   cumple porque el selector del canon resultó ser más débil no está aplicada: está ocurriendo.*
   Familia de INC-718 un piso más arriba: el defecto depende del TIPO de elemento, y ningún gate
   de kit-contra-gemelo puede verlo porque los dos lados dicen lo mismo y los dos están mal.

   El foco pertenece al CONTENEDOR: la caja oscurece su borde, igual que el composer. */
.exds-dk-srch:focus-within { border-color: var(--color-border-focus, #6E7378); }
.exds-dk-srch .exds-dk-srch-in:focus,
.exds-dk-composer .exds-dk-ta:focus { outline: 0; box-shadow: none; }

/* Auto-crecimiento: anima SÓLO `height` (papel 2, misma duración y curva que el Expand del
   Acordeón; la propiedad difiere porque el acordeón va de cero a contenido y el campo va
   de un alto a otro). 40px en reposo → tope 120px y ahí hace scroll → regresa a 40 al
   vaciarse. El alto lo escribe `asistente.js`; la transición la pone esta regla. */
.exds-dk-ta {
  display: block;
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 120px;
  padding: 0 6px;
  background: transparent;
  resize: none;
  overflow-y: auto;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-body, 14px);
  line-height: 1.5;
  color: var(--fg1, #0F1419);
  transition: height var(--motion-base, 250ms) var(--ease-default, cubic-bezier(.4, 0, .2, 1));
}

/* Fila de herramientas: adjuntar (32) · más (32) · espaciador · enviar (40). */
.exds-dk-tools { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-left: 6px; }
.exds-dk-sp { flex: 1; }
.exds-dk-tool {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border-default, #DDE1E7);
  background: var(--color-surface, #FFFFFF);
  color: var(--fg2, #3D4752);
}
/* ⛔ ENVIAR y DETENER son el MISMO botón, no dos: mismo tamaño, misma posición, mismo
   fondo ink. Por eso el deshabilitado es un ESTADO de esta clase y no otra clase — si
   fueran dos, el botón «saltaría» al empezar a cargar. */
.exds-dk-send {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-button, 10px);
  border: 0;
  background: var(--color-action-ink, #0F1419);
  color: var(--fg-inverse, #FFFFFF);
  box-shadow: var(--relieve-btn, inset 0 1px 0 rgba(255, 255, 255, .12));
}
.exds-dk-send:disabled {
  border: 1px solid var(--color-border-subtle, #EDEFF2);
  background: var(--color-bg-subtle, #F7F8FA);
  color: var(--fg4, #8A94A0);
  box-shadow: none;
}

/* El aviso de error EMERGE del composer: traslape negativo detrás de la tarjeta. La PIEZA
   es el `Banner` del catálogo (variante `anchored`, `edge="top"`); esto es sólo dónde se
   posa. *Cuando un compuesto adopta una pieza del catálogo hay que quitarle lo que la
   pieza YA aporta* — por eso aquí no hay ni ícono, ni título, ni botón. */
.exds-dk-bannerpos { margin-top: -12px; padding-top: 18px; position: relative; z-index: 0; }

/* Disclaimer en UNA sola línea (Ricardo 2026-08-02). Sin `overflow:hidden` a propósito:
   la microcopia legal NUNCA se oculta. */
.exds-dk-disc {
  text-align: center;
  margin-top: 10px;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-micro, 10px);
  line-height: 1.4;
  color: var(--fg3, #5C6B7A);
  white-space: nowrap;
}

/* Estado SIN PERMISO: la cáscara la da `EmptyState` (`.exds-estado`); esto es el relleno
   de ESTE panel y la salida a Ayuda. */
.exds-dk-lock { padding: 24px 8px; }
.exds-dk-lock-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-button, 10px);
  border: 1px solid var(--color-border-default, #DDE1E7);
  background: var(--color-surface, #FFFFFF);
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 500;
  font-size: var(--fs-body-sm, 13px);
  color: var(--fg1, #0F1419);
}

/* ── FILA DE CONTEXTO ──────────────────────────────────────────────────────────
   El popover se ancla a ESTA fila, no al disparador (ver `.exds-dk-pop`). */
.exds-dk-ctxrow {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 2px 8px;
  opacity: 1;
}
/* CARGANDO: el contexto se CONGELA. No se oculta ni se borra: sigue a la vista, atenuado
   e inerte, porque es la premisa de la pregunta que se está respondiendo. */
.exds-dk-ctxrow[data-congelado="true"] { opacity: .5; }

/* El punteado señala «ranura por llenar», no un botón cualquiera. */
.exds-dk-ctxadd {
  height: 28px;
  padding: 0 11px 0 8px;
  gap: 5px;
  border: 1px dashed var(--color-border-default, #DDE1E7);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 500;
  font-size: var(--fs-caption, 12px);
  color: var(--fg2, #3D4752);
}
/* ⭐ ENCENDIDO mientras el panel está abierto: el punteado dice «aquí se agrega»; una vez
   abierto ya no invita, SOSTIENE. Borde `--fg3` (4.96:1 sobre el relleno) — decisión de
   Ricardo 2026-07-29, opción C: cumple WCAG 1.4.11 y por eso NO hay excepción que declarar. */
.exds-dk-ctxadd[data-abierto="true"] {
  border: 1px solid var(--fg3, #5C6B7A);
  background: var(--color-bg-subtle, #F7F8FA);
  color: var(--fg1, #0F1419);
}
/* En 5 de 5 NO abre y NO lanza error: un tope que se explica antes de chocarse. */
.exds-dk-ctxadd[data-lleno="true"] {
  border: 1px dashed var(--color-border-subtle, #EDEFF2);
  color: var(--fg4, #8A94A0);
}
.exds-dk-ctxfull {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 500;
  font-size: var(--fs-eyebrow, 11px);
  color: var(--fg3, #5C6B7A);
}

/* ── EL POPOVER DEL BUSCADOR ───────────────────────────────────────────────────
   ⭐ NACE COMPACTO Y CRECE HACIA ARRIBA (Ricardo 2026-07-29): el alto lo pone el contenido
   y el panel está anclado por abajo, así que crecer se lee hacia arriba. *El buscador
   revela lo que encontró en vez de reservarse el sitio por si acaso.* Lo único topado es
   la LISTA, para que ocho resultados no tapen la conversación.
   ⭐ Se ancla a la FILA, no al disparador, y el ancho está topado: si un chip cambia de
   largo y la fila envuelve, el panel no se sale de la tarjeta. Anclarlo al botón con un
   desplazamiento fijo ya se probó y se recortaba en cuanto crecía un chip — el caso NORMAL
   en una función cuya premisa es «hasta 5 elementos». */
.exds-dk-pop {
  position: absolute;
  left: 0;
  bottom: calc(100% + 6px);
  z-index: 10;
  width: min(390px, 100%);
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-default, #DDE1E7);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-modal, 0 12px 32px rgba(15, 20, 25, .16));
  overflow: hidden;
}
.exds-dk-pop-veil { position: fixed; inset: 0; z-index: 9; }
/* ⛔ EN FLUJO, no `position:absolute;inset:0` (Ricardo cazó el buscador que «no se abría»
   · 2026-08-02): el panel saca su ALTO de este contenido. Con el contenido absoluto el
   panel quedaba en alto 0 y sólo se veía un hilo. El morph SÓLO transforma —no fija
   alto—, así que el layout debe darlo el contenido. */
.exds-dk-pop-in { display: flex; flex-direction: column; }
.exds-dk-pop-top {
  flex-shrink: 0;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--color-border-subtle, #EDEFF2);
}
.exds-dk-srch {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border-control, #C9CFD8);
  border-radius: var(--radius-md, 10px);
}
.exds-dk-srch-ico { color: var(--fg3, #5C6B7A); display: inline-flex; }
.exds-dk-srch-in {
  flex: 1;
  min-width: 0;
  background: none;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-body, 14px);
  color: var(--fg1, #0F1419);
}
.exds-dk-srch-x { width: 20px; height: 20px; border-radius: var(--radius-sm, 6px); }
.exds-dk-pop-list { max-height: var(--exds-dk-lista, 272px); overflow-y: auto; padding: 6px 0; }

/* Los grupos son Clientes · Prospectos · Contratos (+ Expedientes): SIN el tipo, «Salinas»
   puede ser cliente, contrato y prospecto a la vez, y se elegiría a ciegas. */
.exds-dk-pop-grp {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 600;
  font-size: var(--fs-micro, 10px);
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--fg3, #5C6B7A);
  padding: 10px 14px 4px;
}
.exds-dk-pop-grp[data-primero="si"] { padding: 8px 14px 4px; }

/* Fila de resultado — hover/selección = SÓLO relleno, sin anillo (Ricardo 2026-07-27):
   evita el doble delineado. */
.exds-dk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 7px 14px;
  cursor: pointer;
  transition: background-color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0, 0, .2, 1));
}
.exds-dk-row:hover:not([aria-disabled="true"]) { background: var(--color-bg-subtle, #F7F8FA); }
.exds-dk-row[data-sel="true"] { background: var(--color-bg-subtle, #F7F8FA); }
/* Fila YA agregada: no hace nada al pulsarse. Previene duplicados sin explicar un error. */
.exds-dk-row[aria-disabled="true"] { opacity: .5; cursor: default; }

.exds-dk-row-ti { color: var(--fg3, #5C6B7A); display: inline-flex; }
.exds-dk-row-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.exds-dk-row-t1 {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 500;
  font-size: var(--fs-body-sm, 13px);
  color: var(--fg1, #0F1419);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exds-dk-row-t2 {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-eyebrow, 11px);
  color: var(--fg3, #5C6B7A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exds-dk-row-hint {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 500;
  font-size: var(--fs-eyebrow, 11px);
  color: var(--fg3, #5C6B7A);
}
.exds-dk-row-kbd {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 500;
  font-size: var(--fs-eyebrow, 11px);
  color: var(--fg3, #5C6B7A);
}
.exds-dk-pop-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  border-top: 1px solid var(--color-border-subtle, #EDEFF2);
  background: var(--color-bg-subtle, #F7F8FA);
}
.exds-dk-pop-n {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 500;
  font-size: var(--fs-eyebrow, 11px);
  color: var(--fg2, #3D4752);
}
.exds-dk-pop-k {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-eyebrow, 11px);
  color: var(--fg3, #5C6B7A);
}

/* ── REFERENCIA DE RESPUESTA ───────────────────────────────────────────────────
   Mecanismo CANÓNICO del Acordeón (`grid-template-rows` 0fr→1fr + contenido con 60ms de
   retraso). ⛔ DRAW-ALLOW declarado en la ficha: se reusa el MECANISMO, que es un token
   de movimiento, no una instancia de Acordeón montable envolviendo un textarea.
   El estado CERRADO se declara en la base: un gemelo que sólo recibe el estado abierto no
   sabe de dónde parte la animación. */
.exds-dk-ref {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-base, 250ms) var(--ease-default, cubic-bezier(.4, 0, .2, 1));
}
.exds-dk-ref[data-open="true"] { grid-template-rows: 1fr; }
.exds-dk-ref-inner { overflow: hidden; min-height: 0; }
.exds-dk-ref-body {
  opacity: 0;
  transform: translateY(-4px);
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 2px 8px;
  padding: 8px 10px;
  background: var(--color-bg-subtle, #F7F8FA);
  /* ⛔ 10 → 6 EL 2026-08-26 · `lint_radio_caja` (relleno 8 → 6). */
  border-radius: var(--radius-sm, 6px);
  transition: opacity var(--motion-base, 250ms) var(--ease-default, cubic-bezier(.4, 0, .2, 1)),
              transform var(--motion-base, 250ms) var(--ease-default, cubic-bezier(.4, 0, .2, 1));
}
.exds-dk-ref[data-open="true"] .exds-dk-ref-body { opacity: 1; transform: none; transition-delay: 60ms; }
.exds-dk-ref-ico { color: var(--fg3, #5C6B7A); display: inline-flex; }
.exds-dk-ref-eb {
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 600;
  font-size: var(--fs-micro, 10px);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg3, #5C6B7A);
  flex-shrink: 0;
}
.exds-dk-ref-tx {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  color: var(--fg2, #3D4752);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exds-dk-ref-x { width: 22px; height: 22px; border-radius: var(--radius-sm, 6px); }

/* ── MOVIMIENTO ────────────────────────────────────────────────────────────────
   Error del composer — papel 5. */
@keyframes exds-dk-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
/* ⛔ CURVA HOMOLOGADA 2026-08-25 — el gemelo iba ATRASADO respecto de las apps. Llevaba
   `--ease-default`, la curva que desacelera y ASIENTA, que es lo contrario de lo que hace
   una sacudida. Las dos copias de producción se corrigieron a `--ease-shake` el 2026-08-11
   (papel 5 de la matriz de movimiento, canonizado ese día en `colors_and_type.css`) y este
   archivo nació el 24-ago copiando el valor viejo. *La regla de oro dice que el handoff se
   acopla al catálogo; su única excepción es que el catálogo se haya quedado atrás, y ésta
   es exactamente esa: el token existe, el papel está declarado y las dos apps ya lo usan.*
   Ni la duración ni la distancia cambian. */
.exds-dk-shake { animation: exds-dk-shake var(--motion-shake, 380ms) var(--ease-shake, cubic-bezier(0.36, 0.07, 0.19, 0.97)); }

/* ⛔ `.exds-dk-dot` / `exds-dk-blink` — el typing NEUTRO quedó RETIRADO el 2026-07-31: el
   del asistente es VOLT y lo pinta `BoltTyping`. La regla se conserva porque el KIT la
   conserva, y este gemelo dice lo que el kit dice: retirarla de un solo lado abriría un
   diff que no es una diferencia real. Candidata a limpieza EN LOS DOS a la vez. */
@keyframes exds-dk-blink {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
.exds-dk-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill, 999px);
  background: var(--fg4, #8A94A0);
  animation: exds-dk-blink 1.2s infinite ease-in-out;
  display: inline-block;
}

/* PAPEL 4 (entrada de elemento): translateY + opacidad con la curva de rebote suave.
   ⛔ Nunca `scale`: la matriz de movimiento es cerrada y no admite un efecto inventado
   al vuelo. Marca el chip que acaba de MATERIALIZARSE desde el panel, para que entre
   animado en vez de saltar. */
@keyframes exds-chip-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.exds-chip-nuevo { animation: exds-chip-in var(--motion-base, 250ms) var(--ease-emphasis, cubic-bezier(.2, .8, .2, 1)); }

/* Apagar el movimiento NO es dejar sin señal (INC-405): el estado final de cada efecto de
   aquí ES la señal —el borde rojo del error, el chip presente, la referencia desplegada—,
   así que basta con quitar el recorrido. */
@media (prefers-reduced-motion: reduce) {
  .exds-dk-dot { animation: none; }
  .exds-dk-shake { animation: none; }
  .exds-chip-nuevo { animation: none; }
  .exds-dk-ct, .exds-dk-composer, .exds-dk-ta, .exds-dk-ref, .exds-dk-ref-body, .exds-dk-row { transition-duration: .01ms; }
  .exds-dk-ref[data-open="true"] .exds-dk-ref-body { transition-delay: 0ms; }
}