/* ═══════════════════════════════════════
   ▓ PATRÓN · Cajón lateral — gemelo vanilla ▓
   v1.0 · 2026-08-24. Ficha: `design-system/PATRON_CAJON_LATERAL.md`
   Kit: `catalogo-cd/components/Drawer.jsx`

   El ÚNICO marco lateral de Exante. Un solo cuerpo físico que persiste mientras su
   contenido cambia: cinco cajones (lateral, detalle, notificaciones, ayuda, ajustes)
   se montan DENTRO de esto, no al lado.

     · Desliza con `transform`. NUNCA con `width` — el "crecer" se intentó y no anima
       fiable dentro del grid real (la columna `auto` colapsa, `1fr` no interpola).
     · SIN VELO. No atenúa la página: se usa EN PARALELO con ella. Es el ejemplo de
       funcionalidad de Exante.
     · SIN SOMBRA. El borde izquierdo define el cajón; el cajón EMPUJA la pantalla en
       vez de flotar sobre ella (Ricardo, 2026-07-22, captura de producción).
     · UN SOLO ANCHO: 420. Lo que necesite más, es morph (Ricardo, 2026-08-12).

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. El EMPUJE lo hace la app, no esta hoja: el marco no sabe qué hay a su izquierda.
        Ver `README.md` § "El empuje".
     4. Si el cajón lleva BANDAS DE GRUPO, `componentes/banda-grupo/banda-grupo.css`
        (se mudó ahí el 2026-08-25 — ver la nota donde estaba).
   ═══════════════════════════════════════ */

/* ── EL MARCO ────────────────────────────────────────────────────────────────
   Un solo cuerpo físico que persiste mientras su contenido cambia. Desliza con
   transform; NUNCA con width (el "crecer" no anima fiable dentro del grid real).
   SIN SOMBRA: el borde izquierdo define el cajón, y el cajón empuja la pantalla
   en vez de flotar sobre ella (Ricardo, 2026-07-22). */
.exds-cajon {
  position: fixed;
  top: var(--shell-header-h, 64px);
  right: 0;
  bottom: 0;
  width: var(--w-cajon, 420px);
  max-width: 92vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #FFFFFF);
  border-left: 1px solid var(--color-border-subtle, #E5E7EB);
  box-shadow: none;
  transform: translateX(100%);
  transition: transform var(--motion-slow, 400ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
  z-index: var(--z-cajon, 900);
}
.exds-cajon[data-open="true"] { transform: translateX(0); }
.exds-cajon[hidden] { display: none !important; }

/* ── CABECERA — MEDIDA FIJA = alto de la topbar ──────────────────────────────
   El 64 no es un gusto: es la altura de la topbar, para que las dos divisorias
   caigan en el mismo eje. El contenido rico (monto, subtítulo) NO vive aquí:
   baja al cuerpo como primer bloque (Ricardo, 2026-07-24). */
.exds-cajon-head {
  display: flex;
  align-items: center;
  gap: var(--space-1-5, 6px);
  height: var(--drawer-head-h, 64px);
  padding: 0 var(--space-3, 12px) 0 var(--space-5, 20px);
  background: var(--color-surface, #FFFFFF);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
  flex-shrink: 0;
}
.exds-cajon-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--fs-body-lg, 16px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--fg1, #0F1419);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── EL BOTÓN DE CABECERA — UNA regla para TODOS ─────────────────────────────
   "La única condición es que todos los botones tengan el mismo diseño"
   (Ricardo, 2026-07-29). No es una regla de inventario: la cabecera lleva los
   botones que haga falta, pero son la MISMA pieza. Se escribe una vez.
   Cuando estaban escritos seis veces en el backoffice y cuatro en el portal,
   al juntarlos salieron cuatro derivas que nadie veía. */
.exds-cajon-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--drawer-btn-size, 32px);
  height: var(--drawer-btn-size, 32px);
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-sm, 6px);
  color: var(--fg3, #5C6B7A);
  cursor: pointer;
  transition: background-color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
              color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1)),
              transform var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-cajon-hbtn svg { width: 19px; height: 19px; flex-shrink: 0; }
.exds-cajon-hbtn:hover:not(:disabled) {
  background: var(--color-bg-subtle, #F2F4F6);
  color: var(--fg1, #0F1419);
}
.exds-cajon-hbtn:active:not(:disabled) {
  background: var(--color-bg-subtle, #F2F4F6);
  transform: scale(.96);
}
/* Foco NEUTRO, nunca el color de acción: el ajuste del portal usaba el ink de acción
   con offset 1 y era la cuarta deriva de la lista. */
.exds-cajon-hbtn:focus-visible {
  outline: 2px solid var(--color-border-focus, #6E7378);
  outline-offset: 2px;
}

/* ── LA FLECHA DE VOLVER — abre hueco, no releva la cabecera ─────────────────
   Hay UNA sola cabecera. La flecha crece a su izquierda con la misma rejilla del
   acordeón y el título se corre con ella, en vez de saltar. Dos cabeceras que se
   cruzan hacen parpadear la aspa de cerrar. */
.exds-cajon-atras {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-cajon-atras[data-open="true"] { grid-template-columns: 1fr; }
.exds-cajon-atras-in { overflow: hidden; min-width: 0; display: flex; }

/* ── CUERPO ──────────────────────────────────────────────────────────────── */
.exds-cajon-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.exds-cajon-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.exds-cajon-pad { padding: var(--space-5, 20px) var(--space-5, 20px) var(--space-10, 40px); }

/* ── TABS SUBRAYADAS — 2 a 3 secciones pares y excluyentes ───────────────────
   Más de tres no caben en una fila de 420px sin cortarse: si hay siete, es un
   acordeón (PATRON_CAJON_LATERAL.md, tabla tabs-vs-acordeón). */
.exds-cajon-tabs {
  position: relative;
  display: flex;
  gap: var(--space-0-5, 2px);
  padding: 0 var(--space-3-5, 14px);
  border-bottom: 1px solid var(--color-border-subtle, #E5E7EB);
  flex-shrink: 0;
}
/* ⛔ LA GUARDA — un cajón de UNA sección monta la fila con `hidden` (así lo escribe el
   marcado canónico del README), y el `display:flex` de autor le ganaba al navegador: quedaba
   una banda vacía con su línea inferior bajo la cabecera. `.exds-cajon` ya se guarda así
   arriba (línea 50); a la fila de tabs se le olvidó. Medido el 2026-08-25. */
.exds-cajon-tabs[hidden] { display: none; }
.exds-cajon-tab {
  position: relative;
  /* inline-flex con las bases alineadas: es lo que permite que una pestaña lleve
     su contador al lado sin que el número se despegue del texto. Con una sola
     etiqueta se pinta igual que antes. */
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1-5, 6px);
  padding: 9px 12px 12px;
  border: 0;
  background: transparent;
  color: var(--fg3, #5C6B7A);
  cursor: pointer;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--fs-body-sm, 13px);
  white-space: nowrap;
  transition: color var(--motion-fast, 120ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-cajon-tab[aria-selected="true"] { color: var(--fg1, #0F1419); }

/* ── EL CONTADOR DE LA PESTAÑA · exds-tab-cuenta ─────────────────────────────
   ⛔ NO ES UNA SEGUNDA CLASE DE PESTAÑA: es la MISMA con un número al lado. Entra
   como OPCIÓN de la pestaña que ya existe, no como pieza nueva.
   DECISION-FUENTE: Ricardo, 2026-08-24 — «absorber en las pestañas que ya existen».
   Ficha: COMPONENTE_TABS.md § El contador.

   Lleva la cuenta de lo pendiente en esa pestaña (sin leer, por revisar, lo que sea).
   Con una sola etiqueta la pestaña se pinta EXACTAMENTE igual que antes: el
   inline-flex con las bases alineadas de arriba se puso el 24-ago precisamente para
   que el número no se despegue del texto, y sin número no cambia nada.

   ⛔ VA EN CIFRAS TABULARES, y no es un detalle: sin eso el número cambia de 12 a 11,
   la pestaña se estrecha y MUEVE LA SUBRAYADA que hay debajo — que es un indicador que
   sólo debería moverse cuando cambias de pestaña.

   El selector se escribe por aria-selected y NO por una clase, a propósito: así vale
   igual para la pestaña del cajón y para la del catálogo (COMPONENTE_TABS.md), que se
   llaman distinto y las dos declaran ese atributo. Una regla que sirve a las dos es lo
   que impide que el contador acabe existiendo dos veces con dos aspectos. */
.exds-tab-cuenta {
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: var(--fw-medium, 500);
  font-size: var(--fs-eyebrow, 11px);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-eyebrow, 0.12em);
  color: var(--fg4, #B8BDC7);
  transition: color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
[aria-selected="true"] .exds-tab-cuenta { color: var(--fg2, #4B5563); }
.exds-cajon-tab:focus-visible {
  outline: 2px solid var(--color-border-focus, #6E7378);
  outline-offset: -2px;
  border-radius: var(--radius-sm, 6px);
}
/* UN SOLO indicador que DESLIZA midiendo la activa — nunca un ::after por pestaña
   que salta (COMPONENTE_TABS.md, Ricardo 2026-07-24). */
.exds-cajon-ink {
  position: absolute;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-action-ink, #21272C);
}
.exds-cajon-ink[data-anim="true"] {
  transition: left var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)),
              width var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}

/* ── PAPEL 6 · CAMBIO DE CONTENIDO — sube+fade ───────────────────────────────
   Al activar el cajón y al cruzar de un panel a otro, el contenido entra
   subiendo con un fundido. El marco persiste y no cambia de medida: sólo cruza
   el contenido. El cajón entra en 400 y no en 200 — recorre media pantalla, y
   una superficie grande que va rápido se lee como un golpe (homologado 2026-08-06). */
@keyframes exds-cajon-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.exds-cajon-fx {
  animation: exds-cajon-in var(--motion-slow, 400ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)) both;
  /* display:flex + min-height:100% para que un hijo con "flex:1" (la pila de dos
     niveles del cajón de ayuda, .exds-cajon-pila) tenga un contexto flex del que
     estirarse. Sin esto, .exds-cajon-pila queda sin flex-container y sus panes
     position:absolute no aportan altura al padre → la pila mide 0x0 y desaparece
     entera (defecto medido 2026-08-26 al sincronizar el kit React con Claude Design,
     mismo bug en los dos gemelos porque la hoja es la misma prosa). Inerte para el
     resto de cajones: su contenido ya es en flujo. */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ── LA PILA DE DOS NIVELES — lista ↔ detalle dentro del MISMO cajón ─────────
   Para lo que no cabe en un despliegue: un artículo con su regla de negocio y
   sus estados es un documento, y metido en el acordeón haría que la lista
   midiera cuatro pantallas de alto. */
.exds-cajon-pila {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.exds-cajon-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: transform var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)),
              opacity var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
/* TRES estados, no dos, y el tercero es el que importa: el panel que ESPERA
   está fuera de cuadro pero OPACO. Si esperase apagado, al entrar tendría que
   encenderse mientras se mueve y el ojo lee dos cosas a la vez. Sólo el que se
   va se apaga — que es lo que dice "esto sigue ahí, detrás". */
.exds-cajon-pane[data-estado="frente"] { transform: none; opacity: 1; }
.exds-cajon-pane[data-estado="atras"]  { transform: translateX(-24px); opacity: 0; pointer-events: none; }
.exds-cajon-pane[data-estado="espera"] { transform: translateX(100%); opacity: 1; pointer-events: none; }

/* ── BANDA DE GRUPO · SE MUDÓ, 2026-08-25 · CERO CSS AQUÍ ────────────────────
   `.exds-cajon-banda` y `.exds-cajon-banda-marca` ya NO se escriben en esta hoja:
   viven en `componentes/banda-grupo/banda-grupo.css`, que es ahora su única
   fuente. **Ni un valor cambió** — la regla se movió de archivo, no de forma.

   Por qué se movió: aquí decía «no merece ficha propia: sale con tokens», y era
   cierto mientras su único anfitrión fuera este marco. El cajón de detalle de
   Facturación se monta en el OTRO marco (`DRAWER_TOPBAR`) y necesitaba la misma
   franja; para montarla habría tenido que cargar esta hoja entera, así que la
   volvió a dibujar con su propio nombre. *Una pieza que sólo se puede montar
   cargando el marco de otro no es una pieza: es una parte de ese marco.*

   ⛔ QUIEN MONTE ESTE CAJÓN CON BANDAS TIENE QUE CARGAR TAMBIÉN
   `componentes/banda-grupo/banda-grupo.css`. Está añadido a los REQUISITOS DEL
   ANFITRIÓN de la cabecera de esta hoja. */

/* ── PIE OPCIONAL ────────────────────────────────────────────────────────── */
.exds-cajon-foot {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
  padding: var(--space-3, 12px) var(--space-5, 20px) var(--space-3-5, 14px);
  background: var(--color-bg-subtle, #F2F4F6);
}

/* ═════════════════════════════════════════════════════════════════════════════
   EL VOCABULARIO DE LA FAMILIA — se escribe UNA vez, aquí

   ⛔ POR QUÉ ESTO VIVE EN LA CONCHA Y NO EN CADA CAJÓN. Los dos handoffs del
   23-ago declaran, con esas palabras, que notificaciones · ayuda · ajustes
   comparten "copiado token por token" la banda, la fila, el despliegue y los
   tres grises. Y aun así los escribieron con DOS prefijos distintos
   («exds-cn-*» y «exds-cj-*») y hasta con dos nombres para el mismo keyframe.
   *Dos implementaciones idénticas no son una pieza compartida: son dos piezas
   que hoy coinciden* — y coincidieron hasta que alguien tocó una.
   DECISION-FUENTE: Ricardo, 2026-08-24 — «NO los coseches por separado: se
   cosecha UNA VEZ la concha; cada cajón es después una composición».
   ═════════════════════════════════════════════════════════════════════════════ */

/* ── LA LISTA ────────────────────────────────────────────────────────────────
   Barra de desplazamiento fina: en 420px una barra de sistema se come el
   respiro derecho de todas las filas. */
.exds-cajon-lista::-webkit-scrollbar { width: 9px; }
.exds-cajon-lista::-webkit-scrollbar-thumb {
  background: var(--color-border-default, #D1D5DB);
  border-radius: var(--radius-pill, 999px);
  border: 3px solid var(--color-surface, #FFFFFF);
}

/* ── LA FILA ─────────────────────────────────────────────────────────────────
   Es un <button>: la fila entera se pulsa, no un enlace escondido dentro.
   Por defecto dos columnas —texto y lo de la derecha— y el texto arranca en el
   padding. La tercera columna es OPCIONAL y sólo la pide quien tiene un punto
   que mostrar: copiar una columna vacía sería copiar la forma sin la razón. */
.exds-cajon-fila {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: var(--space-3, 12px);
  width: 100%;
  padding: var(--space-3, 12px) var(--space-5, 20px);
  text-align: left;
  border: 0;
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: background-color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
/* Con columna de punto: 6px de celda y el hueco del canon para un punto pequeño.
   El punto trabaja doble —su COLOR dice de qué es, su PRESENCIA dice que no lo
   has abierto— y por eso tiene celda propia en vez de ir dentro del texto. */
.exds-cajon-fila[data-punto="true"] {
  grid-template-columns: var(--dot-sm, 6px) 1fr auto;
  column-gap: var(--dot-gap-sm, 10px);
}
.exds-cajon-fila:hover { background: var(--color-bg-subtle, #F2F4F6); }
.exds-cajon-fila:focus-visible {
  outline: 2px solid var(--color-border-focus, #6E7378);
  outline-offset: -2px;
}
.exds-cajon-item[data-abierto="true"] .exds-cajon-fila { background: var(--color-bg-subtle, #F2F4F6); }
.exds-cajon-item[data-abierto="true"] { background: var(--color-bg-subtle, #F2F4F6); }
/* Estado forzado — para enseñar el hover en una hoja fiel sin puntero encima.
   No es una excepción de estilo: pinta EXACTAMENTE lo mismo que «:hover», así
   que si el hover cambia, la demostración cambia con él. */
.exds-cajon-item[data-forzar="hover"] .exds-cajon-fila { background: var(--color-bg-subtle, #F2F4F6); }

/* ── EL CHEVRÓN — dos papeles que NO son el mismo ────────────────────────────
   «-d» DESPLIEGA (gira 180°) · «-r» AVANZA a otra pantalla (se corre 2px).
   Notificaciones los tenía fundidos en uno; separarlos es lo que permite que
   una lista mezcle filas que abren con filas que llevan a otro sitio. */
.exds-cajon-chev {
  align-self: center;
  color: var(--fg4, #B8BDC7);
  transition: transform var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)),
              color var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-cajon-fila:hover .exds-cajon-chev,
.exds-cajon-item[data-forzar="hover"] .exds-cajon-chev { color: var(--fg3, #5C6B7A); }
.exds-cajon-item[data-abierto="true"] .exds-cajon-chev-d {
  transform: rotate(180deg);
  color: var(--fg3, #5C6B7A);
}
.exds-cajon-fila:hover .exds-cajon-chev-r,
.exds-cajon-item[data-forzar="hover"] .exds-cajon-chev-r { transform: translateX(2px); }

/* ── EL DESPLIEGUE — el acordeón del catálogo, literal ───────────────────────
   «grid-template-rows: 0fr → 1fr» con el interior en «overflow:hidden» y
   «min-height:0». Es la única forma de animar "de 0 a lo que mida" sin saber
   cuánto mide. El contenido entra 60ms DESPUÉS: si entrara a la vez, se leería
   como que la caja empuja al texto en vez de abrirse para él.
   ⛔ Reloj de 250ms, no de 400: son cuatro líneas dentro de un cajón de 420px,
   no una tarjeta que cruza media pantalla. */
.exds-cajon-desp {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-cajon-item[data-abierto="true"] .exds-cajon-desp { grid-template-rows: 1fr; }
.exds-cajon-desp-in { overflow: hidden; min-height: 0; }
.exds-cajon-desp-c {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)),
              transform var(--motion-base, 250ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1));
}
.exds-cajon-item[data-abierto="true"] .exds-cajon-desp-c {
  opacity: 1;
  transform: none;
  transition-delay: 60ms;
}

/* ── SECCIÓN DENTRO DE UN CUERPO DESPLEGADO ──────────────────────────────────
   El ajuste fino que ordenó la vista, y son TRES cosas porque el peso solo no
   bastaba: rótulo en tinta, un límite, y proximidad.
   ⛔ La regla NO va a sangre: se queda dentro del padding del cuerpo. A sangre
   se confundiría con las líneas que separan las filas de la lista, que sí van
   a sangre — y entonces una sección parecería una fila más. */
.exds-cajon-sec:not(:first-child) {
  margin-top: var(--space-2, 8px);
  padding-top: var(--space-5, 20px);
  border-top: 1px solid var(--color-border-subtle, #E5E7EB);
}
/* El rótulo de sección va en --fg1, NO en --fg3. En gris compartía peldaño con
   los rótulos de campo y las pistas; a 11px en versalitas eso no alcanza para
   leerse como arranque de bloque. Y como es lo único en versalitas, en tinta no
   compite con el título de la fila. */
.exds-cajon-sec-rotulo {
  display: block;
  margin-bottom: var(--space-2-5, 10px);
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 600;
  font-size: var(--fs-eyebrow, 11px);
  letter-spacing: var(--tracking-eyebrow, 0.12em);
  text-transform: uppercase;
  color: var(--fg1, #0F1419);
}

/* ── EL TEXTO DE UNA FILA, Y EL DE SU DETALLE ────────────────────────────────
   ⛔ ESTAS OCHO CLASES ESTÁN AQUÍ PORQUE SE MIDIÓ QUE SON LA MISMA COSA. De las
   claves de estilo que los dos handoffs comparten, ONCE son idénticas byte a
   byte: la cabecera, sus botones, la lista, el bloque de texto, el texto del
   detalle, la rejilla de campos con su rótulo y su valor, y el hueco vacío.
   No es que se parezcan: es el mismo CSS escrito dos veces, en dos archivos,
   con dos prefijos. Se escribe una vez.

   Lo único que difiere entre los dos es el PESO del título — 600 mientras no
   has abierto la notificación, 500 en todo lo demás — y eso es un estado, no
   una pieza distinta. */
.exds-cajon-texto { min-width: 0; }

/* El «min-width:0» de arriba no es opcional: sin él, un hijo de rejilla no baja
   de su ancho de contenido y el recorte con puntos suspensivos NO ocurre — el
   título empuja la columna de la hora fuera del cajón en silencio. */
.exds-cajon-titulo {
  display: block;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: var(--fw-medium, 500);
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.35;
  color: var(--fg1, #0F1419);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: font-weight var(--motion-fast, 120ms) var(--ease-out, cubic-bezier(0.32, 0.72, 0, 1));
}
/* La SEGUNDA señal de «sin abrir», callada, para cuando el punto ya no está.
   Al abrir, el título baja de 600 a 500 pero SIGUE en --fg1: una notificación
   leída se sigue leyendo. Deja de pedir turno, no desaparece. */
.exds-cajon-titulo[data-sin-leer="true"] { font-weight: var(--fw-semibold, 600); }

.exds-cajon-sub {
  display: block;
  margin-top: var(--space-0-5, 2px);
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  line-height: 1.4;
  color: var(--fg3, #5C6B7A);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── EL DETALLE DESPLEGADO ─────────────────────────────────────────────────── */
.exds-cajon-det {
  display: grid;
  row-gap: var(--space-3, 12px);
  padding: var(--space-3-5, 14px) var(--space-5, 20px) var(--space-5, 20px);
}
.exds-cajon-det-texto {
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-body-sm, 13px);
  line-height: 1.55;
  color: var(--fg2, #4B5563);
  text-wrap: pretty;
}

/* Rejilla de dato: rótulo a la izquierda, valor a la derecha, los dos en 12px.
   El VALOR va en cifras tabulares y en tinta; el rótulo, en gris y sin cortar.
   Es la pareja que se repite en los tres cajones sin una sola diferencia. */
.exds-cajon-campos {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4, 16px);
  row-gap: var(--space-1-5, 6px);
}
.exds-cajon-campo-k {
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  line-height: 1.4;
  color: var(--fg3, #5C6B7A);
  white-space: nowrap;
}
.exds-cajon-campo-v {
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: var(--fw-medium, 500);
  font-size: var(--fs-caption, 12px);
  line-height: 1.4;
  color: var(--fg1, #0F1419);
  font-variant-numeric: tabular-nums;
}

/* ── EL HUECO ────────────────────────────────────────────────────────────────
   Donde va el estado vacío. La caja la pone el cajón; lo que dice dentro lo
   pone quien lo monta, porque el copy de un hueco es del dominio: «no tienes
   avisos» y «no hay artículos que coincidan» no se escriben igual. */
.exds-cajon-hueco { padding: var(--space-8, 32px) var(--space-5, 20px); }

/* ── MÓVIL ───────────────────────────────────────────────────────────────────
   A pantalla completa y sin empuje. El corte es 860px, que el canon nombra
   --bp-panel; va tecleado porque una consulta de medios no puede leer un token.
   Es lo que ya hace producción, y no toca el borde superior: el cajón sigue
   colgando de la topbar, que es quien decide su propia altura. */
@media (max-width: 860px) {
  .exds-cajon { width: 100vw; max-width: 100vw; }
}

/* ── MOVIMIENTO REDUCIDO ─────────────────────────────────────────────────────
   Apagar el movimiento NO es dejar sin señal: el cajón sigue apareciendo y
   desapareciendo, sólo que sin recorrido (INC-405). */
@media (prefers-reduced-motion: reduce) {
  .exds-cajon,
  .exds-cajon-hbtn,
  .exds-cajon-tab,
  .exds-tab-cuenta,
  .exds-cajon-atras,
  .exds-cajon-pane,
  .exds-cajon-fila,
  .exds-cajon-chev,
  .exds-cajon-desp,
  .exds-cajon-desp-c,
  .exds-cajon-titulo { transition: none; }
  .exds-cajon-ink[data-anim="true"] { transition: none; }
  .exds-cajon-fx { animation: none; }
}