/**
 * Incremento visual 5 (docs/24-incremento-visual-5-dialogos-feedback-diseno.md
 * sección 7.13/8.3) — apariencia del sistema de feedback no bloqueante.
 * Archivo propio, separado de dialog.css (un panel podría cargar
 * diálogos sin toasts o viceversa). La animación hereda
 * --transition-duration-base, ya anulada bajo prefers-reduced-motion en
 * tokens.css — sin una segunda regla @media redundante aquí.
 */

#feedback-region {
  position: fixed;
  top: calc(var(--space-md) + env(safe-area-inset-top, 0px));
  right: var(--space-md);
  z-index: 900;
  max-width: min(360px, calc(100vw - 2 * var(--space-md)));
  max-height: min(80vh, calc(100vh - 2 * var(--space-md)));
  overflow-y: auto;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  min-width: 240px;
  background: var(--surface-bg);
  color: var(--text-primary);
  border-radius: 8px;
  padding: var(--space-sm) var(--space-md);
  pointer-events: auto;
  overflow-wrap: anywhere;
  border-left: 4px solid transparent;
  transition: opacity var(--transition-duration-base) ease, transform var(--transition-duration-base) ease;
}

.toast.toast-success { border-left-color: var(--state-success-fg); }
.toast.toast-info { border-left-color: var(--text-secondary); }
.toast.toast-warning {
  background: var(--feedback-warning-bg);
  color: var(--feedback-warning-text);
  border-left-color: var(--feedback-warning-text);
}
.toast.toast-error { border-left-color: var(--state-danger-fg); }

/* Incremento visual 6 (docs/25 sección D.8) — icono de severidad, un color
   explícito por nivel, verificado ≥3:1 contra el fondo real de cada toast
   (D.8.2). */
.toast-success .toast-icon { color: var(--state-success-fg); }
.toast-info .toast-icon { color: var(--text-secondary); }
.toast-warning .toast-icon { color: var(--feedback-warning-text); }
.toast-error .toast-icon { color: var(--state-danger-fg); }

/* Entrada (nunca salida) de toast — el estado inicial que la transición ya
   declarada en .toast anima al retirarse (sección E.6). */
.toast-enter {
  opacity: 0;
  transform: translateY(-8px);
}

.toast-message {
  margin: 0;
  flex: 1;
  overflow-wrap: anywhere;
}

.toast-close {
  min-height: 44px;
  min-width: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.toast-close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}