/* ═══════════════════════════════════════
   ▓ 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 {
  /* ⛔ LA MEDIDA, AÑADIDA 2026-09-01 — antes NO EXISTÍA EN NINGÚN SITIO.
     El <svg> del chevrón no trae width/height y esta hoja tampoco se los daba: en el
     cajón de notificaciones, donde su columna es una rejilla que se estira, el glifo
     salía a unos 54px (medido en vídeo: 30x17 de glifo) en vez de 15. Ricardo lo
     reportó el 2026-09-01 como "chevron gigante", y estaba en las DOS apps.

     POR QUÉ SE ESCAPÓ, que es lo que hay que recordar: el kit de React SÍ declara la
     medida, pero la lleva en una PROPIEDAD (Icono con size=15). Producción escribe el
     SVG a mano dentro de una cadena de JavaScript, y una propiedad no tiene traducción
     al copiarla a mano: se evapora sin dejar hueco. Por eso la medida pasa a vivir
     AQUÍ, en la hoja — donde viaja con la clase, la escriba quien la escriba.

     Y por qué ningún medidor lo vio: lint_icono_comprimible mide iconos con medida
     fija, y su denominador son "las reglas que fijan el ancho de un svg en px". Un
     icono sin ninguna medida no entra en ese denominador. Un medidor cuyo denominador
     son los que declaran no puede ver al que no declara nada. */
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  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; }
}