/*
 * Aiden UI · toast-stack
 * CSS module de Arc (registry/components/toast-stack/toast-stack.module.css) traducido a clases
 * .aui-toast-stack-<parte>, con las MISMAS variables de kit/foundation.css. El movimiento (muelle real en
 * Motion) se aproxima con transiciones CSS usando las curvas «spring» que ya trae foundation.css
 * (--duration-smooth/--ease-smooth, --duration-snappy/--ease-snappy, --duration-morph/--ease-morph), que son
 * la traducción `linear()` de motion-tokens.ts: nada que inventar aquí.
 *
 * Correspondencia: .viewport → -viewport · .list → -list · .item → -item · .card → -card · .content → -content ·
 * .icon/.glyph/.spinner → -icon/-glyph/-spinner · .copy/.title/.line/.description → -copy/-title/-line/-description ·
 * .actionSlot/.action → -action-slot/-action · .close → -close · .srOnly → -sr
 */
.aui-toast-stack-viewport { position: fixed; z-index: 100060; bottom: var(--space-6); width: min(22.5rem, calc(100% - var(--space-8))); pointer-events: none; }
.aui-toast-stack-viewport.aui-toast-stack-bottom-right { right: var(--space-6); }
.aui-toast-stack-viewport.aui-toast-stack-bottom-left { left: var(--space-6); }
.aui-toast-stack-viewport.aui-toast-stack-bottom-center { right: 0; left: 0; margin-inline: auto; }
.aui-toast-stack-viewport.aui-toast-stack-contained { position: absolute; z-index: 2; bottom: var(--space-4); }
.aui-toast-stack-viewport.aui-toast-stack-contained.aui-toast-stack-bottom-right { right: var(--space-4); }
.aui-toast-stack-viewport.aui-toast-stack-contained.aui-toast-stack-bottom-left { left: var(--space-4); }
@media (max-width: 30rem) { .aui-toast-stack-viewport:not(.aui-toast-stack-contained) { right: 0; bottom: var(--space-4); left: 0; margin-inline: auto; } }

.aui-toast-stack-list { position: relative; margin: 0; padding: 0; list-style: none; pointer-events: auto; transition: height var(--duration-smooth) var(--ease-smooth); }
.aui-toast-stack-list[data-morph] { transition: height var(--duration-morph) var(--ease-morph); }
.aui-toast-stack-item { position: absolute; right: 0; bottom: 0; left: 0; transform-origin: 50% 0; opacity: 0; will-change: transform, opacity; transition: transform var(--duration-smooth) var(--ease-smooth), opacity var(--duration-fast) var(--ease-standard); }
.aui-toast-stack-item[data-morph] { transition: transform var(--duration-morph) var(--ease-morph), opacity var(--duration-fast) var(--ease-standard); }
/* Entrada: animación con nombre (no transición) para que arranque en el mismo turno en que se inserta el
   nodo — una transición no anima la primera vez que se pinta un elemento. El valor final ya lo lleva la
   propiedad (transform/opacity puestos por JS); el «from» es la única parte que hace falta declarar. */
.aui-toast-stack-item[data-entering] { transition: none; animation: aui-toast-stack-enter var(--duration-smooth) var(--ease-smooth) both; }
@keyframes aui-toast-stack-enter { from { transform: translateY(var(--aui-ts-enter-y, 0px)); opacity: 0; } }
.aui-toast-stack-item[data-leaving] { transition: transform var(--duration-exit) var(--ease-standard), opacity var(--duration-exit) var(--ease-standard); pointer-events: none; }
.aui-toast-stack-item[data-leaving][data-swiped] { transition: opacity 220ms var(--ease-standard); }

.aui-toast-stack-card { position: absolute; inset: 0; overflow: hidden; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-raised); container-type: inline-size; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform var(--duration-snappy) var(--ease-snappy), opacity var(--duration-fast) linear, background-color var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard); }
.aui-toast-stack-card[data-dragging] { cursor: grabbing; transition: none; }
.aui-toast-stack-item[data-front="true"] .aui-toast-stack-card, .aui-toast-stack-item[data-expanded="true"] .aui-toast-stack-card { box-shadow: var(--shadow-floating); }
.aui-toast-stack-item[data-front="false"][data-expanded="false"] .aui-toast-stack-card { background: var(--surface-muted); }
.aui-toast-stack-card *, .aui-toast-stack-card *::before, .aui-toast-stack-card *::after { box-sizing: border-box; }

.aui-toast-stack-content { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); font-family: var(--font-body); letter-spacing: var(--tracking-body); transition: opacity var(--duration-fast) var(--ease-standard); }
.aui-toast-stack-icon { position: relative; display: grid; width: 18px; height: 20px; flex: 0 0 auto; place-items: center; opacity: 1; transform: scale(1); color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard), opacity 120ms var(--ease-standard), transform var(--duration-snappy) var(--ease-snappy); }
.aui-toast-stack-icon[data-type="success"] { color: var(--success); }
.aui-toast-stack-icon[data-type="info"] { color: var(--accent); }
.aui-toast-stack-icon[data-type="warning"] { color: var(--warning); }
.aui-toast-stack-icon[data-type="error"] { color: var(--danger); }
.aui-toast-stack-icon[data-swap] { opacity: 0; transform: scale(.6); transition-duration: 120ms; }
.aui-toast-stack-icon svg { display: block; }
.aui-toast-stack-spinner { display: block; width: 15px; height: 15px; border: 1.75px solid currentColor; border-right-color: transparent; border-radius: var(--radius-pill); animation: aui-toast-stack-spin .8s linear infinite; }

.aui-toast-stack-copy { position: relative; min-width: 0; flex: 1; font-size: var(--text-sm); letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
.aui-toast-stack-title { position: relative; display: block; font-weight: 500; overflow: hidden; }
.aui-toast-stack-line, .aui-toast-stack-description { display: block; opacity: 1; transform: translateY(0); transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aui-toast-stack-line[data-swap], .aui-toast-stack-description[data-swap] { opacity: 0; transform: translateY(.3em); }
.aui-toast-stack-description { margin-top: 2px; color: var(--text-secondary); white-space: normal; }
.aui-toast-stack-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.aui-toast-stack-action-slot { display: flex; flex: none; justify-content: flex-end; align-items: center; margin-top: -4px; max-width: 0; overflow: hidden; opacity: 0; transition: max-width var(--duration-smooth) var(--ease-smooth), opacity var(--duration-fast) var(--ease-standard); }
.aui-toast-stack-action-slot[data-open] { max-width: 12rem; opacity: 1; }
.aui-toast-stack-action, .aui-toast-stack-close { flex: none; -webkit-appearance: none !important; appearance: none !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; box-shadow: none !important; background-image: none !important; text-transform: none !important; text-shadow: none !important; float: none !important; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--duration-spring) var(--ease-spring), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.aui-toast-stack-action { height: 28px !important; padding: 0 var(--space-3) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-pill) !important; background: var(--surface) !important; color: var(--foreground) !important; font-size: var(--text-sm) !important; font-weight: 500 !important; white-space: nowrap; }
.aui-toast-stack-close { display: grid !important; width: 28px !important; height: 28px !important; margin: -4px -2px 0 0 !important; place-items: center; border: 0 !important; border-radius: var(--radius-pill) !important; background: transparent !important; color: var(--text-muted) !important; }
@media (hover: hover) and (pointer: fine) {
  .aui-toast-stack-action:hover { border-color: var(--border-strong) !important; background: var(--surface-muted) !important; }
  .aui-toast-stack-close:hover { background: var(--surface-muted) !important; color: var(--foreground) !important; }
}
.aui-toast-stack-action:active, .aui-toast-stack-close:active { transform: scale(.96); transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
/* Carril estrecho: la acción baja debajo de la copia en vez de estrecharla. */
@container (max-width: 21rem) {
  .aui-toast-stack-content { flex-wrap: wrap; row-gap: var(--space-2); }
  .aui-toast-stack-action-slot { order: 1; flex-basis: 100%; justify-content: flex-start; margin-top: 0; padding-left: calc(18px + var(--space-3)); max-width: none; }
}

@keyframes aui-toast-stack-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .aui-toast-stack-list, .aui-toast-stack-item, .aui-toast-stack-card, .aui-toast-stack-icon,
  .aui-toast-stack-line, .aui-toast-stack-description, .aui-toast-stack-action-slot,
  .aui-toast-stack-action, .aui-toast-stack-close {
    transition-duration: var(--duration-instant) !important;
    transition-property: opacity !important;
    transition-timing-function: linear !important;
  }
  .aui-toast-stack-action:active, .aui-toast-stack-close:active { transform: none; }
  .aui-toast-stack-spinner { animation: none; }
  .aui-toast-stack-item[data-entering] { animation: aui-toast-stack-enter-reducido var(--duration-instant) linear both; }
  @keyframes aui-toast-stack-enter-reducido { from { opacity: 0; } }
}