/* public/assets/css/components/toast.css
   Componente: avisos flotantes (toasts) en la esquina superior derecha.
   Sustituyen a los <div class="alert"> sueltos dentro de cada vista: los
   mensajes flash de sesion (error_message/success_message/warning_message/
   info_message) se recogen una sola vez en el layout (main.php) y se pintan
   aqui via components/toast.js, con auto-cierre pasado un tiempo estimado
   segun la longitud del mensaje. Reutiliza los colores de alerta de base.css. */

.app-toast-container {
    position: fixed;
    /* Justo debajo de la cabecera sticky, nunca tapandola. */
    top: calc(var(--app-header-height) + 14px);
    right: var(--app-space-md);
    left: var(--app-space-md);
    /* Por encima de cualquier overlay de la app (modal.css/confirm.css usan
       4000): un toast debe verse siempre nitido, nunca atenuado por el
       fondo oscuro de un modal abierto detras. */
    z-index: 5000;
    display: flex;
    flex-direction: column;
    gap: var(--app-space-sm);
    width: auto;
    pointer-events: none;
}
@media (min-width: 481px) {
    .app-toast-container { right: 20px; left: auto; width: min(360px, calc(100vw - 32px)); }
}
.app-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--app-space-sm);
    padding: var(--app-space-md) var(--app-space-md);
    border-radius: var(--app-radius-md);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
    border-left: 4px solid var(--app-text-muted);
    animation: app-toast-entrada .3s ease forwards;
}
.app-toast.app-toast-saliendo { animation: app-toast-salida .25s ease forwards; }
.app-toast-success { border-left-color: var(--app-success); }
.app-toast-error { border-left-color: var(--app-danger); }
.app-toast-warning { border-left-color: var(--app-warning); }
.app-toast-info { border-left-color: var(--app-info); }

.app-toast-icono {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-on-primary);
    font-size: var(--app-text-2xs);
    font-weight: 700;
}
.app-toast-success .app-toast-icono { background: var(--app-success); }
.app-toast-error .app-toast-icono { background: var(--app-danger); }
.app-toast-warning .app-toast-icono { background: var(--app-warning); }
.app-toast-info .app-toast-icono { background: var(--app-info); }

.app-toast-texto { flex: 1 1 auto; min-width: 0; font-size: var(--app-text-sm); font-weight: 600; line-height: 1.4; color: var(--app-text); }
.app-toast-cerrar { flex: 0 0 auto; border: none; background: none; cursor: pointer; color: var(--app-text-muted); font-size: var(--app-text-lg); line-height: 1; padding: 0; }
.app-toast-cerrar:hover { color: var(--app-text); }

@keyframes app-toast-entrada {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes app-toast-salida {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(28px); }
}

/* En el login la cabecera esta oculta (body.auth-login-page .app-header),
   asi que los toasts no necesitan bajar para dejarle sitio. */
body.auth-login-page .app-toast-container { top: 20px; }