/* =========================================================================== AVISOS FLOTANTES — el toast del sistema. =========================================================================== Ver src/core/toast.js para el porqué y para el inventario de las cinco implementaciones que este archivo reemplaza. NO va scopeado bajo ninguna clase de módulo, y es a propósito: el toast cuelga de y lo usan por igual los módulos con identidad propia y los que siguen en Tailwind. Por eso el prefijo es `gs-` —del sistema, como `shell-`— y por eso los tokens que consume tienen que estar en :root (core/tokens.css), no en un scope. =========================================================================== */ /* Abajo a la DERECHA, no al centro. Cuatro de las cinco implementaciones viejas lo ponían centrado abajo, justo encima de donde suelen estar los botones de acción de un modal: el aviso de que algo salió bien tapaba el siguiente click. A la derecha no compite con nada. `column-reverse` hace que el más nuevo quede ABAJO, pegado al borde, y los viejos suban. Así el que acaba de aparecer está siempre en el mismo lugar —el ojo no tiene que buscarlo— y la pila crece hacia adentro de la pantalla. */ #gs-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 260; display: flex; flex-direction: column-reverse; gap: 8px; /* El contenedor no intercepta clicks: es una columna transparente que cubre media pantalla. Cada toast SÍ los recibe (`pointer-events: auto`). */ pointer-events: none; /* Vive fuera de todo módulo, así que no hereda su tipografía. */ font-family: 'Segoe UI', -apple-system, system-ui, Roboto, Arial, sans-serif; } .gs-toast { pointer-events: auto; cursor: pointer; max-width: 380px; display: flex; align-items: center; gap: 9px; background: var(--navy-700, #001a41); color: #eaf1fb; border-radius: 10px; padding: 10px 15px; box-shadow: var(--e3, 0 20px 60px rgba(10, 25, 60, .28)); font-size: .8rem; font-weight: 600; line-height: 1.35; animation: gsToastIn .2s var(--curva, ease-out); } /* EL COLOR VA EN EL ÍCONO, NO EN EL FONDO. Las implementaciones viejas pintaban la pastilla entera de verde, ámbar o rojo, y sobre un fondo saturado el texto blanco de 12px pierde legibilidad justo cuando importa (el toast rojo es el que hay que leer). Fondo navy siempre, tono en el ícono: se distingue de reojo y se lee de frente. */ .gs-toast .material-symbols-outlined { flex: 0 0 auto; font-size: 18px; color: #74d3ad; } .gs-toast.wrn .material-symbols-outlined { color: #f0bb62; } .gs-toast.neg .material-symbols-outlined { color: #f2a1a1; } .gs-toast.saliendo { animation: gsToastOut .18s ease forwards; } @keyframes gsToastIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } @keyframes gsToastOut { to { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { /* Sin desplazamiento, pero el fundido queda: es lo que avisa que el cartel apareció. Y la de salida NO puede durar 0s — toast.js espera a que termine para sacar el nodo del DOM. */ @keyframes gsToastIn { from { opacity: 0; } to { opacity: 1; } } @keyframes gsToastOut { to { opacity: 0; } } }