/* ═══════════════════════════════════════
   ▓ COMPONENTE · AvisoLlegada — gemelo vanilla ▓
   v1.1 · 2026-10-28 (la pila se corre con un cajón abierto). v1.0 · 2026-10-27. Ficha: `design-system/COMPONENTE_AVISO_LLEGADA.md`
   Kit: `catalogo-cd/components/AvisoLlegada.jsx`

   La tarjeta blanca que aparece junto a la campana, bajo la barra superior, cuando llega una
   notificación que pide algo a la persona. Un solo eje izquierdo; ícono de 16 px en la línea
   del título; el color del ícono sube por nivel (tinta · ámbar · rojo).

   `DECISION-FUENTE: Ricardo, 2026-10-27 — «a2»` sobre
   plans/decisiones/_decision_tarjeta_notificacion_alineacion_2026-10-27.html (versión A2) y
   `DECISION-FUENTE: Ricardo, 2026-10-27 — «Obviando que vamos a rediseñar la tarjeta como tal, te doy visto bueno en el punto 1 del visual. Es decir, la tarjeta que aparece al llegar.»`
   sobre plans/decisiones/_decision_aviso_llegada_notificacion_2026-10-27.html.

   REQUISITOS DEL ANFITRIÓN:
     1. Los tokens del canon (`colors_and_type.css`).
     2. `box-sizing: border-box`.
     3. Las hojas de `button` y `menu` (la tarjeta MONTA Button y Menu; aquí no se redibujan).
   ═══════════════════════════════════════ */

/* LA PILA — el hueco donde se apilan las tarjetas: arriba a la derecha, 8 px bajo la barra superior de 64.
   Ancho 380 (en pantallas angostas, el ancho menos 24). No recibe clics: sólo sus tarjetas. */
.exds-avl-pila {
  position: fixed;
  top: calc(var(--space-16, 64px) + var(--space-2, 8px));
  right: var(--space-3, 12px);
  z-index: var(--z-aviso, 1300);
  width: min(380px, calc(100vw - var(--space-6, 24px)));
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  pointer-events: none;
  font-family: var(--font-sans, "Inter", -apple-system, "system-ui", sans-serif);
}

/* v1.1 (2026-10-28): con un cajon lateral abierto, la pila se corre a la izquierda del cajon (su ancho + 12) para no taparlo; el cajon ya abierto se detecta con data-open. DECISION-FUENTE: Ricardo, 2026-10-28 — «Puntos 8 y 9 se descartan. lo demas se acepta. El punto 8 no solo se descarta del catálogo, sino que es una idea que se descarta totalmente del diseño final que llegara a prod.» (cosecha de la carga de bancos, invento 8 de la hoja) */
.exds-avl-pila { transition: right var(--motion-slow, 400ms) var(--ease-default, cubic-bezier(0.32, 0.72, 0, 1)); }
:root:has(.exds-cajon[data-open="true"]) .exds-avl-pila { right: calc(var(--w-cajon, 420px) + var(--space-3, 12px)); }
@media (prefers-reduced-motion: reduce) { .exds-avl-pila { transition: none; } }

/* LA TARJETA — superficie blanca, borde sutil, sombra y radio del desplegable del shell.
   Relleno 18 en los cuatro lados; un solo eje izquierdo; la × queda en la segunda columna. */
.exds-avl {
  --exds-avl-c: var(--color-action-ink, #21272C);
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-0-5, 2px);
  align-items: start;
  width: 100%;
  padding: var(--space-4-5, 18px);
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border-subtle, #E5E7EB);
  border-radius: var(--radius-md, 10px);
  box-shadow: var(--shadow-md, 0 4px 12px -2px rgba(15, 20, 25, 0.06));
  text-align: left;
  animation: exds-avl-in var(--motion-slow, 400ms) var(--ease-settle, cubic-bezier(0.22, 1, 0.36, 1)) both;
}
:where(.exds-avl) p { margin: 0; }

/* ESCALA DE COLOR DEL ÍCONO (D8) — tinta: todavía no vence · ámbar: vencido · rojo: vencido y urgente.
   Sólo el ícono lleva color; el texto no. */
.exds-avl[data-nivel="ambar"] { --exds-avl-c: var(--color-warning-deep, #B05B00); }
.exds-avl[data-nivel="rojo"] { --exds-avl-c: var(--color-error-deep, #D61005); }

.exds-avl-cab {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, 8px);
  min-width: 0;
}
.exds-avl-ic {
  display: flex;
  align-items: center;
  flex: none;
  height: 20px;
  color: var(--exds-avl-c, #21272C);
}
.exds-avl-ic svg { width: 16px; height: 16px; }
.exds-avl-ttl {
  min-width: 0;
  font-size: var(--fs-body, 14px);
  font-weight: 600;
  line-height: 20px;
  color: var(--fg1, #0F1419);
  cursor: pointer;
}

/* LA × — como en el Banner: su trazo (no su caja de 32) queda a 18 px del borde derecho, igual que el texto del
   izquierdo; la caja entera sigue siendo el área de clic. */
.exds-avl-x {
  margin: -6px -8px -6px 0;
  color: var(--fg3, #5C6B7A);
}
.exds-avl-x svg { width: 16px; height: 16px; }

.exds-avl-det {
  grid-column: 1 / -1;
  margin-top: var(--space-1, 4px);
  font-size: var(--fs-body-sm, 13px);
  line-height: 20px;
  color: var(--fg2, #4B5563);
}
.exds-avl-dato {
  grid-column: 1 / -1;
  margin-top: var(--space-0-5, 2px);
  font-size: var(--fs-caption, 12px);
  line-height: 18px;
  color: var(--fg3, #5C6B7A);
  font-variant-numeric: tabular-nums;
}

/* LOS BOTONES — 16 px después del texto, 14 entre sí. */
.exds-avl-acc {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 8px) var(--space-3-5, 14px);
  margin-top: var(--space-4, 16px);
}

/* «Recuérdame en…» sobre el Menu: el menú se ancla al borde derecho del botón. */
.exds-avl-recordar { position: relative; display: inline-flex; }

/* ESTADO «LISTO» — cambia en su lugar (sin botones ni dato): el ícono pasa a verde y la tarjeta se va sola. */
.exds-avl[data-estado="listo"] { --exds-avl-c: var(--color-accent-green, #0B8F6B); }

/* SALIDA — el gesto de salida del Toast, hacia arriba (la tarjeta nace junto a la campana). */
.exds-avl[data-cerrando="true"] {
  animation: exds-avl-out var(--motion-fast, 120ms) var(--ease-exit, cubic-bezier(0.4, 0, 1, 1)) forwards;
}
@keyframes exds-avl-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); filter: blur(2px); }
  to   { opacity: 1; transform: none;                          filter: blur(0); }
}
@keyframes exds-avl-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px) scale(0.98);   filter: blur(1px); }
}

/* SIN MOVIMIENTO — la tarjeta aparece y se va de golpe; apagar el recorrido no deja sin señal:
   la tarjeta misma es la señal. */
@media (prefers-reduced-motion: reduce) {
  .exds-avl { animation: none !important; }
  .exds-avl[data-cerrando="true"] { opacity: 0; }
}