/**
 * ============================================================================
 * Archivo: public/assets/css/components/toast.css
 * Descripción: Sistema de notificaciones flotantes no bloqueantes.
 * ============================================================================
 */
.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: 9999;
    pointer-events: none; /* Para que los clics pasen a través del contenedor */
}

.toast {
    background: var(--bg-elevated);
    border-left: 4px solid;
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 300px;
    max-width: 400px;
    pointer-events: auto; /* Reactivar clics en el toast en sí */
    transform: translateX(120%);
    opacity: 0;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

/* =========================================================
   COLORES DINÁMICOS DEL TOAST
   ========================================================= */
/* El mensaje de Éxito hereda el color del Tema (Aurora, Titanium, etc.) */
.toast-success { border-color: var(--accent-primary); }

/* Los de Error y Advertencia se mantienen en Rojo/Ámbar por estándar UI */
.toast-error { border-color: var(--status-error); }
.toast-warning { border-color: var(--status-warning); }

.toast-icon { margin-top: 2px; }

/* El ícono de Éxito hereda el color del Tema */
.toast-success .toast-icon { color: var(--accent-primary); }

/* Los íconos de Error y Advertencia se mantienen fijos */
.toast-error .toast-icon { color: var(--status-error); }
.toast-warning .toast-icon { color: var(--status-warning); }

.toast-content h4 {
    margin: 0 0 var(--space-1) 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 0.875rem;
}

.toast-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
}