/** * Archivo: assets/css/shared/toast.css * Sistema: Allage - Sistema de Toasts (avisos) Global * Versión: 1.0.0 * Fecha: 04 Julio 2026 * * DESCRIPCIÓN: * Sistema de avisos tipo "toast" compartido entre admin y frontend. * Sustituye la dependencia del `.notice` de wp-admin (que no tiene estilos * en el frontend público) por un contenedor fijo propio, siempre visible, * independiente del contenedor de la página. Emitido por * LTNAllageGlobal.utils.showNotice() (assets/js/global.js). * * CLASES DISPONIBLES: * - .ltn-toast-container : Apilador fijo (top-right). Se crea una vez en . * - .ltn-toast : Aviso individual (se apilan como hijos). * - .ltn-toast--success : Variante verde (éxito) * - .ltn-toast--error : Variante roja (error) * - .ltn-toast--warning : Variante amarilla (advertencia) * - .ltn-toast--info : Variante azul (información, por defecto) * - .ltn-toast-message : Texto del aviso * - .ltn-toast-close : Botón (X) de cierre manual * - .ltn-toast--out : Estado de salida (dispara la animación de cierre) * * NOTA z-index: 10050 supera el overlay de modales (.ltn-modal-overlay = 10000 * en modals.css) para que los avisos se vean por encima. No existe variable * --ltn-z-*; modals.css también usa el literal, se mantiene la misma práctica. */ /* =========================================== CONTENEDOR APILADOR =========================================== */ .ltn-toast-container { position: fixed; top: var(--ltn-spacing-lg); right: var(--ltn-spacing-lg); z-index: 10050; /* > .ltn-modal-overlay (10000) */ display: flex; flex-direction: column; gap: var(--ltn-spacing-sm); max-width: 360px; width: calc(100% - (var(--ltn-spacing-lg) * 2)); /* El contenedor no captura clics: la página sigue siendo usable */ pointer-events: none; } /* =========================================== TOAST INDIVIDUAL =========================================== */ .ltn-toast { /* Cada toast sí es interactivo (cerrar, seleccionar texto) */ pointer-events: auto; display: flex; align-items: flex-start; gap: var(--ltn-spacing-sm); padding: var(--ltn-spacing-sm) var(--ltn-spacing-md); border-radius: var(--ltn-border-radius); border-left: 4px solid var(--ltn-info); background: var(--ltn-info-bg); color: var(--ltn-info-text); box-shadow: var(--ltn-shadow-md); font-size: 14px; line-height: 1.4; animation: ltn-toast-in 0.25s ease-out; } .ltn-toast-message { flex: 1 1 auto; word-break: break-word; } /* =========================================== BOTÓN DE CIERRE (X) =========================================== */ .ltn-toast-close { flex: 0 0 auto; margin-left: var(--ltn-spacing-xs); padding: 0; width: 20px; height: 20px; line-height: 20px; text-align: center; background: transparent; border: none; color: inherit; font-size: 18px; cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease; } .ltn-toast-close:hover { opacity: 1; } /* =========================================== VARIANTES (bg / text / border desde variables.css) =========================================== */ .ltn-toast--success { background: var(--ltn-success-bg); color: var(--ltn-success-text); border-left-color: var(--ltn-success); } .ltn-toast--error { background: var(--ltn-error-bg); color: var(--ltn-error-text); border-left-color: var(--ltn-error); } .ltn-toast--warning { background: var(--ltn-warning-bg); color: var(--ltn-warning-text); border-left-color: var(--ltn-warning); } .ltn-toast--info { background: var(--ltn-info-bg); color: var(--ltn-info-text); border-left-color: var(--ltn-info); } /* =========================================== ANIMACIONES (entrada / salida) =========================================== */ @keyframes ltn-toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes ltn-toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* Estado de salida: lo añade el JS antes de eliminar el nodo */ .ltn-toast--out { animation: ltn-toast-out 0.25s ease-in forwards; } /* =========================================== RESPONSIVE =========================================== */ @media (max-width: 480px) { .ltn-toast-container { top: var(--ltn-spacing-sm); right: var(--ltn-spacing-sm); left: var(--ltn-spacing-sm); width: auto; max-width: none; } }