/* ═══════════════════════════════════════
   ▓ PATRÓN · Cajón de notificaciones — gemelo vanilla ▓
   v1.0 · 2026-08-24. Ficha: `design-system/PATRON_CAJON_NOTIFICACIONES.md`
   Kit: `catalogo-cd/components/CajonNotificaciones.jsx`
   Handoff: `plans/design_handoff_cajon_notificaciones/`

   ⛔ ESTA HOJA ES SÓLO LO QUE ES **PROPIO** DE NOTIFICACIONES. El marco, la banda
   de grupo, la fila, el despliegue, el título, el subtítulo, la rejilla de campos
   y el hueco vacío viven en `patrones/cajon-lateral/` y NO se repiten aquí.
   `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».`

   LAS REGLAS QUE NO SE NEGOCIAN, del handoff:
     · EL PUNTO TRABAJA DOBLE. Su COLOR dice de qué es la notificación; su
       PRESENCIA dice que no la has abierto. Todas llevan punto: no hay filas sin él.
     · CUATRO FAMILIAS Y NADA MÁS: verde · naranja · rojo · azul. El gris se fusionó
       con el azul.
     · NINGÚN TEXTO DE COLOR. La única semántica es el punto. El texto vive en tres
       grises: título --fg1, cuerpo --fg2, origen/folio y hora --fg3.
     · SIN ÍCONOS EN LA FILA. Ni glifos por familia, ni cuadros de tinte, ni avatares.
       Los únicos SVG son el chevrón, la estrella y los tres de la cabecera.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. `patrones/cajon-lateral/` (hoja y conducta) y el componente `Dot`.
     4. `componentes/celda-cruce/` (hoja y conducta) — la estrella dentro de la celda
        del punto es esa PIEZA, no CSS de este patrón. Sin su hoja, la estrella no
        aparece: no se ve un defecto de estilo, se ve una fila sin control.
   ═══════════════════════════════════════ */

/* ── LA COLUMNA DE LA DERECHA — hora ARRIBA, chevrón ABAJO ───────────────────
   El chevrón sólo aparece si la notificación TRAE detalle. Una flecha que no
   abre nada es una promesa incumplida en cada fila que la lleve.

   ⛔ EL CHEVRÓN VA ANCLADO A LA ESQUINA INFERIOR DERECHA, no colgando de la hora.
   DECISION-FUENTE: Ricardo, 2026-08-24 — «creo que el chevron en este caso esta mal
   acomodado, para mí tendría que estar anclado a esquina inferior derecha».

   La columna SE ESTIRA al alto de la fila y reparte sus dos hijos a los extremos.
   Sin esto la columna medía lo que medían sus hijos y se quedaba arriba: en una
   fila de 101px, el chevrón caía a 49px del fondo — flotando a media altura, sin
   apoyarse en nada. *Dos elementos que no tocan ningún borde no forman una columna:
   forman un bloque suelto que el ojo lee como un descuido.*

   Anclado abajo, además, el chevrón queda en la esquina que el ojo ya visita al
   terminar de leer la fila — y sube y baja con el alto del texto sin que nadie
   teclee una separación. */
.exds-cnot-derecha {
  display: grid;
  justify-items: end;
  align-self: stretch;
  align-content: space-between;
  row-gap: var(--space-1-5, 6px);
}
.exds-cnot-hora {
  flex: none;
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  line-height: 1.5;
  color: var(--fg3, #5C6B7A);
  /* Tabular obligatorio: sin esto la columna BAILA entre 09:15 y 10:42, y la
     lista entera tiembla al desplazarse. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── EL CUERPO Y EL ORIGEN ───────────────────────────────────────────────────
   El cuerpo se recorta a DOS líneas. Es lo que cabe sin que una notificación
   larga se coma tres filas de la lista; lo que no cabe está en el detalle. */
.exds-cnot-cuerpo {
  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-body-sm, 13px);
  line-height: 1.4;
  color: var(--fg2, #4B5563);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exds-cnot-meta {
  display: block;
  margin-top: var(--space-1, 4px);
  font-family: var(--font-sans, "Inter", -apple-system, system-ui, sans-serif);
  font-weight: 400;
  font-size: var(--fs-caption, 12px);
  line-height: 1.35;
  color: var(--fg3, #5C6B7A);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── EL DETALLE — sangrado bajo el texto, no bajo el punto ───────────────────
   36px = la celda del punto (6) + su hueco (10) + el relleno del cajón (20).
   Va tecleado porque es una suma de tres cosas y CSS no la puede hacer sin un
   calc() que diría menos que este comentario. */
.exds-cnot-det {
  display: grid;
  row-gap: var(--space-3, 12px);
  padding: 0 var(--space-5, 20px) var(--space-4, 16px) 36px;
}

/* ── EL CONTADOR DE LA PESTAÑA — SE ABSORBIÓ EN LA PESTAÑA EL 2026-08-23 ──────
   ⛔ AQUÍ YA NO ESTÁ, Y NO ES UNA OMISIÓN. No era una pieza de notificaciones ni una
   segunda clase de pestaña: es la MISMA pestaña con un número al lado, así que entró
   como OPCIÓN de la pestaña que ya existe (`.exds-tab-cuenta`, en
   `patrones/cajon-lateral/`, ficha `COMPONENTE_TABS.md` § El contador).
   DECISION-FUENTE: Ricardo, 2026-08-24 — «absorber en las pestañas que ya existen».

   Lo que este cajón pone dentro es el NÚMERO —las sin leer de esa pestaña—, que es lo
   único suyo: el aspecto es de la pestaña. */

/* ═════════════════════════════════════════════════════════════════════════════
   LA ESTRELLA DENTRO DE LA CELDA DEL PUNTO — SE MUDÓ AL CATÁLOGO EL 2026-08-23

   ⛔ AQUÍ YA NO HAY CSS DE LA ESTRELLA, Y NO ES UNA OMISIÓN: es la pieza
   COMPONENTE_CELDA_CRUCE.md, que este patrón MONTA. Un patrón consume piezas del
   canon, no las reimplementa — copiar su CSS no cuenta como consumirla
   (GOBIERNO.md §1-ter-bis, Ricardo 2026-08-23).

   Se cosechó porque no era de notificaciones: resuelve "quiero una acción por fila
   y no tengo ancho para ponerla al lado", que le pasa a cualquier lista. Ricardo
   aprobó promoverla el 2026-08-24.

   LO QUE ESTE PATRÓN APORTA, y es TODO lo que queda aquí de la estrella:
     1. Cargar la hoja de la pieza: componentes/celda-cruce/celda-cruce.css
     2. --cruce-baja: 6px  — bajar la celda a la línea óptica de la primera línea
        del título. Es del ANFITRIÓN porque depende de SU tipografía.
     3. Poner "exds-cruce-host" en la fila y los dos atributos de estado en el item:
          data-cruce-visto="true"    la notificación ya se leyó
          data-cruce-marcado="true"  está marcada como importante
        Son el mismo par de siempre con el vocabulario de la pieza. El vocabulario
        de NEGOCIO no se pierde: los eventos siguen llamándose exds:notif-leida y
        exds:notif-importante, que es lo que consume quien escucha.
   ═════════════════════════════════════════════════════════════════════════════ */
.exds-cnot-celda {
  /* Cae en la línea óptica de la primera línea del título, no en el borde de la caja. */
  --cruce-baja: 6px;
}

/* ⛔ NO HAY GUARDA DE MOVIMIENTO REDUCIDO EN ESTA HOJA, Y ES CORRECTO: después de las dos
   cosechas del 2026-08-23, lo que queda aquí —la hora, el cuerpo a dos líneas, el detalle
   sangrado— no se mueve. Las guardas viven con las piezas que sí se mueven: la celda de
   cruce trae la suya, el contador de la pestaña la suya, y el marco la del cajón lateral.
   *Una guarda que no protege nada envejece peor que su ausencia: el día que alguien añada
   una transición aquí, la verá escrita y creerá que ya está cubierta.* */