fernotify 1.2.9 → 1.2.11

package/README.md

@@ -226,10 +226,12 @@ notify.toastQuestion('Nueva solicitud pendiente.');
 
 // Método genérico con opciones completas
 notify.toast('Mensaje aquí', {
-  type: 'success',          // 'success' | 'error' | 'warning' | 'info' | 'question'
+  type: 'success',          // 'success' | 'error' | 'warning' | 'info' | 'question' | 'loading'
   title: 'Título opcional',
   duration: 4000,           // ms hasta auto-cierre (0 = sin auto-cierre, default: 4000)
-  position: 'top-right'    // 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left'
+  position: 'top-right',   // 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left'
+  id: 'my-toast',          // ID para deduplicación (optional)
+  closeable: true           // false = oculta el botón × (default: true)
 });
 ```
 
@@ -241,6 +243,48 @@ notify.toast('Mensaje aquí', {
 - Animación de entrada/salida suave
 - Soporte completo de dark mode
 
+### Toast de carga 🔄
+
+Muestra un toast con spinner para operaciones asíncronas. Solo puede existir uno a la vez y no se puede cerrar manualmente; ciérralo con `closeToastLoading()`.
+
+```javascript
+async function fetchData() {
+  notify.toastLoading('Obteniendo datos...', 'Cargando');
+
+  try {
+    const res = await fetch('/api/data');
+    const data = await res.json();
+    notify.closeToastLoading();
+    notify.toastSuccess('Datos cargados correctamente');
+  } catch {
+    notify.closeToastLoading();
+    notify.toastError('No se pudieron cargar los datos');
+  }
+}
+
+fetchData();
+```
+
+```javascript
+// Firma completa
+notify.toastLoading(message?, title?, options?)
+notify.closeToastLoading()
+```
+
+### Deduplicación de toasts por ID
+
+Asigna un `id` a un toast para evitar duplicados. Si ya hay un toast visible con ese ID, se resetea su cuenta regresiva en lugar de crear uno nuevo.
+
+```javascript
+// Aunque el usuario haga clic muchas veces, solo existe un toast
+button.addEventListener('click', () => {
+  notify.toastError('Email o contraseña incorrectos', 'Error', {
+    id: 'login-error',
+    duration: 4000
+  });
+});
+```
+
 ### Personalización de Animaciones
 
 ```javascript

package/dist/notification-system.esm.js

@@ -45,6 +45,7 @@ var __rest = (this && this.__rest) || function (s, e) {
                 this._lastActiveElement = null;
                 this._currentLoadingPromise = null;
                 this._toastContainers = new Map();
+                this._toastInstances = new Map();
                 this.injectStyles();
                 this.loadBoxicons();
             }
@@ -408,6 +409,7 @@ var __rest = (this && this.__rest) || function (s, e) {
             .notify-toast-icon.warning  { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
             .notify-toast-icon.info     { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
             .notify-toast-icon.question { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }
+            .notify-toast-icon.loading  { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
 
             .notify-toast-content { flex: 1; min-width: 0; }
             .notify-toast-title {
@@ -416,11 +418,13 @@ var __rest = (this && this.__rest) || function (s, e) {
                 color: #1f2937;
                 margin-bottom: 2px;
                 line-height: 1.3;
+                cursor: default;
             }
             .notify-toast-message {
                 font-size: 13px;
                 color: #6b7280;
                 line-height: 1.5;
+                cursor: default;
             }
 
             .notify-toast-close {
@@ -443,6 +447,9 @@ var __rest = (this && this.__rest) || function (s, e) {
             }
             .notify-toast-close:hover { background: rgba(0,0,0,0.1); color: #374151; }
 
+            /* Sin botón de cierre: reducir padding derecho */
+            .notify-toast.notify-toast-no-close { padding-right: 14px; }
+
             .notify-toast-progress {
                 position: absolute;
                 bottom: 0;
@@ -456,12 +463,41 @@ var __rest = (this && this.__rest) || function (s, e) {
             .notify-toast-progress.warning  { background: #f59e0b; }
             .notify-toast-progress.info     { background: #3b82f6; }
             .notify-toast-progress.question { background: #8b5cf6; }
+            .notify-toast-progress.loading  { background: #6366f1; }
+
+            /* Spinner para toast de carga */
+            .notify-toast-spinner {
+                width: 18px;
+                height: 18px;
+                border: 2.5px solid rgba(255,255,255,0.35);
+                border-top-color: white;
+                border-radius: 50%;
+                animation: notification-spin 0.8s linear infinite;
+                flex-shrink: 0;
+            }
 
             .dark .notify-toast { background: #0f1724; box-shadow: 0 4px 24px rgba(0,0,0,0.35); }
             .dark .notify-toast-title   { color: #e6eef8; }
             .dark .notify-toast-message { color: #cbd5e1; }
             .dark .notify-toast-close   { background: rgba(255,255,255,0.06); color: #94a3b8; }
             .dark .notify-toast-close:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
+
+            /* Respeta la preferencia de movimiento reducido del sistema */
+            @media (prefers-reduced-motion: reduce) {
+                .notify-toast {
+                    transition: opacity 0.1s ease !important;
+                    transform: none !important;
+                }
+                .notify-toast.notify-toast-visible {
+                    transform: none !important;
+                }
+                .notify-toast-spinner {
+                    animation-duration: 1.5s !important;
+                }
+                .notify-toast-progress {
+                    transition: none !important;
+                }
+            }
         `;
                 document.head.appendChild(style);
             }
@@ -471,7 +507,8 @@ var __rest = (this && this.__rest) || function (s, e) {
                     'error': '<i class="bx bx-x" aria-hidden="true"></i>',
                     'warning': '<i class="bx bx-error" aria-hidden="true"></i>',
                     'info': '<i class="bx bx-info-circle" aria-hidden="true"></i>',
-                    'question': '<i class="bx bx-question-mark" aria-hidden="true"></i>'
+                    'question': '<i class="bx bx-question-mark" aria-hidden="true"></i>',
+                    'loading': '<div class="notify-toast-spinner" aria-hidden="true"></div>'
                 };
                 return icons[type] || icons.info;
             }
@@ -969,16 +1006,27 @@ var __rest = (this && this.__rest) || function (s, e) {
                 return `${mm}:${ss}`;
             }
             showToast(message, options = {}) {
-                var _a;
+                var _a, _b;
                 const type = options.type || 'info';
                 const title = (_a = options.title) !== null && _a !== void 0 ? _a : null;
                 const duration = typeof options.duration === 'number' ? options.duration : 4000;
                 const position = options.position || 'top-right';
                 const showProgress = options.showProgress !== false;
+                const toastId = (_b = options.id) !== null && _b !== void 0 ? _b : null;
+                const closeable = options.closeable !== false;
+                // Deduplicación: si ya existe un toast con este ID, resetear su cuenta regresiva
+                if (toastId !== null) {
+                    const existing = this._toastInstances.get(toastId);
+                    if (existing) {
+                        existing.reset(duration);
+                        return;
+                    }
+                }
                 let container = this._toastContainers.get(position);
                 if (!container || !document.body.contains(container)) {
                     container = document.createElement('div');
                     container.className = `notify-toast-container notify-toast-${position}`;
+                    container.setAttribute('aria-label', 'Notificaciones');
                     document.body.appendChild(container);
                     this._toastContainers.set(position, container);
                 }
@@ -986,6 +1034,20 @@ var __rest = (this && this.__rest) || function (s, e) {
                 const isCenter = position === 'top-center';
                 const toast = document.createElement('div');
                 toast.className = 'notify-toast';
+                if (!closeable) {
+                    toast.classList.add('notify-toast-no-close');
+                }
+                // Accesibilidad: role + aria-live según la urgencia del tipo
+                // role="alert" implica aria-live="assertive" + aria-atomic="true" → lector lo interrumpe
+                // role="status" implica aria-live="polite" + aria-atomic="true" → lector espera pausa
+                if (type === 'error' || type === 'warning') {
+                    toast.setAttribute('role', 'alert');
+                }
+                else {
+                    toast.setAttribute('role', 'status');
+                }
+                toast.setAttribute('aria-atomic', 'true');
+                toast.setAttribute('aria-live', type === 'error' || type === 'warning' ? 'assertive' : 'polite');
                 const iconEl = document.createElement('div');
                 iconEl.className = `notify-toast-icon ${type}`;
                 iconEl.innerHTML = this.getIcon(type);
@@ -1001,17 +1063,22 @@ var __rest = (this && this.__rest) || function (s, e) {
                 msgEl.className = 'notify-toast-message';
                 msgEl.textContent = message;
                 contentEl.appendChild(msgEl);
-                const closeBtn = document.createElement('button');
-                closeBtn.className = 'notify-toast-close';
-                closeBtn.setAttribute('aria-label', 'Cerrar notificación');
-                closeBtn.innerHTML = '&times;';
                 toast.appendChild(iconEl);
                 toast.appendChild(contentEl);
-                toast.appendChild(closeBtn);
+                if (closeable) {
+                    const closeBtn = document.createElement('button');
+                    closeBtn.className = 'notify-toast-close';
+                    closeBtn.setAttribute('aria-label', 'Cerrar notificación');
+                    closeBtn.innerHTML = '&times;';
+                    closeBtn.addEventListener('click', removeToast);
+                    toast.appendChild(closeBtn);
+                }
                 let progressEl = null;
                 if (duration > 0 && showProgress) {
                     progressEl = document.createElement('div');
                     progressEl.className = `notify-toast-progress ${type}`;
+                    progressEl.setAttribute('role', 'progressbar');
+                    progressEl.setAttribute('aria-hidden', 'true'); // decorativo: el timer no añade info que el usuario necesite leer
                     toast.appendChild(progressEl);
                 }
                 if (isBottom || isCenter) {
@@ -1024,19 +1091,34 @@ var __rest = (this && this.__rest) || function (s, e) {
                 let timerId = null;
                 let remaining = duration;
                 let timerStartedAt = 0;
-                const removeToast = () => {
+                function removeToast() {
                     if (dismissed)
-                        return;
+                        return Promise.resolve();
                     dismissed = true;
+                    // Si el foco estaba dentro del toast, sacarlo antes de que el nodo desaparezca
+                    // para evitar que el foco se pierda silenciosamente en el documento
+                    if (toast.contains(document.activeElement)) {
+                        try {
+                            document.activeElement.blur();
+                        }
+                        catch (e) { }
+                    }
                     toast.classList.remove('notify-toast-visible');
-                    setTimeout(() => {
-                        if (toast.parentNode)
-                            toast.parentNode.removeChild(toast);
-                    }, 300);
-                };
+                    return new Promise(resolve => {
+                        setTimeout(() => {
+                            if (toast.parentNode)
+                                toast.parentNode.removeChild(toast);
+                            resolve();
+                        }, 300);
+                    });
+                }
                 const startCountdown = (ms) => {
                     timerStartedAt = Date.now();
-                    timerId = setTimeout(removeToast, ms);
+                    timerId = setTimeout(() => {
+                        if (toastId !== null)
+                            this._toastInstances.delete(toastId);
+                        removeToast();
+                    }, ms);
                     if (progressEl) {
                         progressEl.style.transition = `width ${ms}ms linear`;
                         progressEl.style.width = '0%';
@@ -1060,7 +1142,46 @@ var __rest = (this && this.__rest) || function (s, e) {
                         return;
                     startCountdown(remaining);
                 };
-                closeBtn.addEventListener('click', removeToast);
+                const resetCountdown = (newDuration) => {
+                    if (dismissed)
+                        return;
+                    if (timerId !== null) {
+                        clearTimeout(timerId);
+                        timerId = null;
+                    }
+                    remaining = newDuration;
+                    if (newDuration > 0) {
+                        if (progressEl) {
+                            progressEl.style.transition = 'none';
+                            progressEl.style.width = '100%';
+                            // Forzar reflow para que la transición se aplique desde el inicio
+                            void progressEl.offsetWidth;
+                        }
+                        startCountdown(newDuration);
+                    }
+                    else if (progressEl) {
+                        progressEl.style.transition = 'none';
+                        progressEl.style.width = '100%';
+                    }
+                };
+                if (toastId !== null) {
+                    const silentDismiss = () => {
+                        if (dismissed)
+                            return;
+                        dismissed = true;
+                        if (timerId !== null)
+                            clearTimeout(timerId);
+                        if (toast.contains(document.activeElement)) {
+                            try {
+                                document.activeElement.blur();
+                            }
+                            catch (e) { }
+                        }
+                        if (toast.parentNode)
+                            toast.parentNode.removeChild(toast);
+                    };
+                    this._toastInstances.set(toastId, { reset: resetCountdown, dismiss: removeToast, _silentDismiss: silentDismiss });
+                }
                 requestAnimationFrame(() => {
                     requestAnimationFrame(() => {
                         toast.classList.add('notify-toast-visible');
@@ -1069,7 +1190,7 @@ var __rest = (this && this.__rest) || function (s, e) {
                         }
                     });
                 });
-                if (duration > 0) {
+                if (duration > 0 && closeable) {
                     toast.addEventListener('mouseenter', pauseCountdown);
                     toast.addEventListener('mouseleave', resumeCountdown);
                 }
@@ -1098,6 +1219,38 @@ var __rest = (this && this.__rest) || function (s, e) {
             toastQuestion(message, title, options = {}) {
                 this.showToast(message, Object.assign(Object.assign({}, options), { type: 'question', title: title !== null && title !== void 0 ? title : options.title }));
             }
+            /**
+             * Muestra un toast de carga con spinner.
+             * - No se puede cerrar manualmente (closeable: false por defecto).
+             * - No tiene cuenta regresiva (duration: 0 por defecto).
+             * - Solo puede existir uno a la vez (id '__loading__').
+             * Ciérralo con notify.closeToastLoading().
+             */
+            toastLoading(message = 'Cargando...', title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({ position: 'top-right' }, options), { type: 'loading', title: title !== null && title !== void 0 ? title : options.title, id: '__loading__', closeable: false, duration: 0, showProgress: false }));
+            }
+            /** Cierra el toast de carga activo (si existe). Devuelve una Promise que resuelve cuando la animación de salida termina (≈300 ms). */
+            closeToastLoading() {
+                const entry = this._toastInstances.get('__loading__');
+                if (entry) {
+                    this._toastInstances.delete('__loading__');
+                    return entry.dismiss();
+                }
+                return Promise.resolve();
+            }
+            /**
+             * Reemplaza el toast de carga activo por un toast de resultado en el mismo lugar,
+             * sin animación de salida/entrada — no hay solapamiento ni hueco visual.
+             * Si no existe un toast de carga activo, simplemente muestra un toast normal.
+             */
+            replaceToastLoading(message, options = {}) {
+                const entry = this._toastInstances.get('__loading__');
+                if (entry) {
+                    this._toastInstances.delete('__loading__');
+                    entry._silentDismiss();
+                }
+                this.showToast(message, options);
+            }
         }
         const notifyInstance = new NotificationSystem();
         const w = window;

package/dist/notification-system.esm.min.js

@@ -1 +1 @@
-"use strict";var __rest=this&&this.__rest||function(t,n){var e={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&n.indexOf(o)<0&&(e[o]=t[o]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(t);i<o.length;i++)n.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(t,o[i])&&(e[o[i]]=t[o[i]])}return e};!function(){if("undefined"!=typeof anime)t();else{const n=document.createElement("script");n.src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js",n.onload=t,n.onerror=()=>{console.error("FerNotify: No se pudo cargar anime.js. Por favor, cargalo manualmente.")},document.head.appendChild(n)}function t(){const t=new class{constructor(){this.currentNotification=null,this._lastActiveElement=null,this._currentLoadingPromise=null,this._toastContainers=new Map,this.injectStyles(),this.loadBoxicons()}loadBoxicons(){if(!document.querySelector('link[href*="boxicons"]')){const t=document.createElement("link");t.rel="stylesheet",t.href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css",document.head.appendChild(t)}}injectStyles(){const t=document.createElement("style");t.textContent="\n            .notification-overlay {\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background-color: rgba(0, 0, 0, 0.4);\n                backdrop-filter: blur(4px);\n                -webkit-backdrop-filter: blur(4px);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                z-index: 9999;\n                opacity: 0;\n                overflow: hidden;\n            }\n\n            .notification-box {\n                background: white;\n                border-radius: 16px;\n                padding: 40px 30px;\n                max-width: 500px;\n                width: 90%;\n                max-height: 80vh;\n                overflow: auto;\n                position: relative;\n                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n                text-align: center;\n                transform: scale(0.7);\n                opacity: 0;\n            }\n\n            .notification-content {\n                text-align: left;\n                margin-bottom: 18px;\n            }\n\n            .notification-close {\n                position: absolute;\n                top: 10px;\n                right: 10px;\n                width: 38px;\n                height: 38px;\n                border-radius: 8px;\n                border: none;\n                background: rgba(0,0,0,0.06);\n                color: #111827;\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                font-size: 18px;\n            }\n\n            .notification-close:hover {\n                background: rgba(0,0,0,0.09);\n            }\n\n            /* Form controls inside the modal */\n            .notification-box input,\n            .notification-box textarea,\n            .notification-box select {\n                width: 100%;\n                padding: 10px 12px;\n                border: 1px solid #e5e7eb;\n                border-radius: 8px;\n                background: #ffffff;\n                color: #111827;\n                font-size: 15px;\n                box-sizing: border-box;\n                transition: box-shadow 0.15s ease, border-color 0.15s ease;\n            }\n\n            .notification-box input:focus,\n            .notification-box textarea:focus,\n            .notification-box select:focus {\n                outline: none;\n                border-color: #6366f1;\n                box-shadow: 0 6px 24px rgba(99,102,241,0.12), 0 0 0 4px rgba(99,102,241,0.06);\n            }\n\n            .notification-box label { display: block; margin-bottom: 6px; color: #374151; font-weight: 600; }\n\n            /* Soporte para tema oscuro con clase .dark (Tailwind darkMode: 'class') */\n            /* Esto tiene prioridad sobre prefers-color-scheme para respetar la elección del usuario en la web */\n            .dark .notification-box { background: #0f1724 !important; color: #e6eef8 !important; }\n            .dark .notification-box input,\n            .dark .notification-box textarea,\n            .dark .notification-box select {\n                background: #0b1220 !important;\n                border: 1px solid rgba(255,255,255,0.06) !important;\n                color: #e6eef8 !important;\n            }\n            .dark .notification-box .notification-close { background: rgba(255,255,255,0.03) !important; color: #e6eef8 !important; }\n            .dark .notification-overlay { background-color: rgba(0,0,0,0.6) !important; }\n            .dark .notification-title { color: #e6eef8 !important; }\n            .dark .notification-message { color: #cbd5e1 !important; }\n\n            /* Forzar modo claro cuando NO hay clase .dark, ignorando prefers-color-scheme */\n            html:not(.dark) .notification-box { background: white !important; color: #111827 !important; }\n            html:not(.dark) .notification-box input,\n            html:not(.dark) .notification-box textarea,\n            html:not(.dark) .notification-box select {\n                background: #ffffff !important;\n                border: 1px solid #e5e7eb !important;\n                color: #111827 !important;\n            }\n            html:not(.dark) .notification-box .notification-close { background: rgba(0,0,0,0.06) !important; color: #111827 !important; }\n            html:not(.dark) .notification-overlay { background-color: rgba(0, 0, 0, 0.4) !important; }\n            html:not(.dark) .notification-title { color: #1f2937 !important; }\n            html:not(.dark) .notification-message { color: #6b7280 !important; }\n\n            .notification-icon {\n                width: 80px;\n                height: 80px;\n                border-radius: 50%;\n                margin: 0 auto 25px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 40px;\n                position: relative;\n            }\n\n            .notification-icon::before {\n                content: '';\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                border-radius: 50%;\n                opacity: 0.2;\n            }\n\n            .notification-icon.success {\n                background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n                color: white;\n            }\n\n            .notification-icon.success::before {\n                background: #10b981;\n            }\n\n            .notification-icon.error {\n                background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n                color: white;\n            }\n\n            .notification-icon.error::before {\n                background: #ef4444;\n            }\n\n            .notification-icon.warning {\n                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n                color: white;\n            }\n\n            .notification-icon.warning::before {\n                background: #f59e0b;\n            }\n\n            .notification-icon.info {\n                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n                color: white;\n            }\n\n            .notification-icon.info::before {\n                background: #3b82f6;\n            }\n            .notification-icon.question {\n                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n                color: white;\n            }\n\n            .notification-icon.question::before {\n                background: #3b82f6;\n            }\n\n            .notification-title {\n                font-size: 24px;\n                font-weight: 700;\n                color: #1f2937;\n                margin-bottom: 12px;\n                line-height: 1.3;\n            }\n\n            .notification-message {\n                font-size: 16px;\n                color: #6b7280;\n                line-height: 1.6;\n                margin-bottom: 30px;\n            }\n\n            .notification-button {\n                color: white;\n                border: none;\n                padding: 10px 14px;\n                border-radius: 8px;\n                font-size: 16px;\n                font-weight: 600;\n                cursor: pointer;\n                transition: all 0.3s ease;\n            }\n\n            .notification-button:hover {\n                transform: translateY(-2px);\n                filter: brightness(1.1);\n            }\n\n            .notification-button:active {\n                transform: translateY(0);\n            }\n\n            /* group container for multiple action buttons */\n            .notification-button-group {\n                display: flex;\n                gap: 12px;\n                justify-content: center;\n                flex-wrap: wrap;\n                margin-top: 10px;\n            }\n\n            .notification-icon-checkmark {\n                animation: checkmark-draw 0.6s ease-in-out;\n            }\n\n            .notification-icon-cross {\n                animation: cross-draw 0.5s ease-in-out;\n            }\n\n            @keyframes checkmark-draw {\n                0% {\n                    transform: scale(0) rotate(-45deg);\n                    opacity: 0;\n                }\n                50% {\n                    transform: scale(1.2) rotate(-45deg);\n                }\n                100% {\n                    transform: scale(1) rotate(0deg);\n                    opacity: 1;\n                }\n            }\n\n            @keyframes cross-draw {\n                0% {\n                    transform: scale(0) rotate(-180deg);\n                    opacity: 0;\n                }\n                50% {\n                    transform: scale(1.2) rotate(-90deg);\n                }\n                100% {\n                    transform: scale(1) rotate(0deg);\n                    opacity: 1;\n                }\n            }\n\n            /* Loading spinner styles */\n            .notification-loading-container {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n                margin: 0 auto;\n            }\n\n            .notification-spinner {\n                width: 60px;\n                height: 60px;\n                border: 5px solid rgba(99, 102, 241, 0.15);\n                border-top-color: #6366f1;\n                border-radius: 50%;\n                animation: notification-spin 1s linear infinite;\n                margin: 0 auto;\n            }\n\n            @keyframes notification-spin {\n                to {\n                    transform: rotate(360deg);\n                }\n            }\n\n            .notification-loading-text {\n                font-size: 14px;\n                color: #6b7280;\n                text-align: center;\n                margin-top: 12px;\n            }\n\n            .dark .notification-loading-text {\n                color: #cbd5e1;\n            }\n\n            /* ==================== Toast ==================== */\n            .notify-toast-container {\n                position: fixed;\n                z-index: 10000;\n                display: flex;\n                flex-direction: column;\n                gap: 10px;\n                pointer-events: none;\n                width: 360px;\n                max-width: calc(100vw - 40px);\n            }\n            .notify-toast-top-right  { top: 20px; right: 20px; }\n            .notify-toast-top-left   { top: 20px; left: 20px; }\n            .notify-toast-top-center { top: 20px; left: 50%; transform: translateX(-50%); }\n            .notify-toast-bottom-right { bottom: 20px; right: 20px; flex-direction: column-reverse; }\n            .notify-toast-bottom-left  { bottom: 20px; left: 20px; flex-direction: column-reverse; }\n\n            .notify-toast {\n                background: white;\n                border-radius: 12px;\n                padding: 14px 40px 14px 14px;\n                box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);\n                display: flex;\n                align-items: flex-start;\n                gap: 12px;\n                pointer-events: auto;\n                position: relative;\n                overflow: hidden;\n                opacity: 0;\n                transform: translateX(30px);\n                transition: opacity 0.25s ease, transform 0.25s ease;\n            }\n            .notify-toast-top-left .notify-toast,\n            .notify-toast-bottom-left .notify-toast { transform: translateX(-30px); }\n            .notify-toast-top-center .notify-toast { transform: translateY(-20px); }\n            .notify-toast.notify-toast-visible {\n                opacity: 1;\n                transform: translateX(0) translateY(0) !important;\n            }\n\n            .notify-toast-icon {\n                width: 36px;\n                height: 36px;\n                border-radius: 50%;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 20px;\n                flex-shrink: 0;\n                color: white;\n            }\n            .notify-toast-icon.success  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }\n            .notify-toast-icon.error    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }\n            .notify-toast-icon.warning  { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }\n            .notify-toast-icon.info     { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }\n            .notify-toast-icon.question { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }\n\n            .notify-toast-content { flex: 1; min-width: 0; }\n            .notify-toast-title {\n                font-size: 14px;\n                font-weight: 700;\n                color: #1f2937;\n                margin-bottom: 2px;\n                line-height: 1.3;\n            }\n            .notify-toast-message {\n                font-size: 13px;\n                color: #6b7280;\n                line-height: 1.5;\n            }\n\n            .notify-toast-close {\n                position: absolute;\n                top: 8px;\n                right: 8px;\n                width: 24px;\n                height: 24px;\n                border-radius: 6px;\n                border: none;\n                background: rgba(0,0,0,0.06);\n                color: #6b7280;\n                cursor: pointer;\n                font-size: 16px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                line-height: 1;\n                padding: 0;\n            }\n            .notify-toast-close:hover { background: rgba(0,0,0,0.1); color: #374151; }\n\n            .notify-toast-progress {\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                height: 3px;\n                width: 100%;\n                border-radius: 0 0 0 12px;\n            }\n            .notify-toast-progress.success  { background: #10b981; }\n            .notify-toast-progress.error    { background: #ef4444; }\n            .notify-toast-progress.warning  { background: #f59e0b; }\n            .notify-toast-progress.info     { background: #3b82f6; }\n            .notify-toast-progress.question { background: #8b5cf6; }\n\n            .dark .notify-toast { background: #0f1724; box-shadow: 0 4px 24px rgba(0,0,0,0.35); }\n            .dark .notify-toast-title   { color: #e6eef8; }\n            .dark .notify-toast-message { color: #cbd5e1; }\n            .dark .notify-toast-close   { background: rgba(255,255,255,0.06); color: #94a3b8; }\n            .dark .notify-toast-close:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }\n        ",document.head.appendChild(t)}getIcon(t){const n={success:'<i class="bx bx-check" aria-hidden="true"></i>',error:'<i class="bx bx-x" aria-hidden="true"></i>',warning:'<i class="bx bx-error" aria-hidden="true"></i>',info:'<i class="bx bx-info-circle" aria-hidden="true"></i>',question:'<i class="bx bx-question-mark" aria-hidden="true"></i>'};return n[t]||n.info}getDefaultTitle(t){return{success:"¡Éxito!",error:"Error",warning:"Advertencia",info:"Información",question:"Pregunta"}[t]||"Notificación"}getButtonGradient(t){const n={success:"linear-gradient(135deg, #10b981 0%, #059669 100%)",error:"linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",warning:"linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",info:"linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",question:"linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)"};return n[t]||n.info}getButtonShadow(t){const n={success:"rgba(16, 185, 129, 0)",error:"rgba(239, 68, 68, 0)",warning:"rgba(245, 159, 11, 0)",info:"rgba(59, 131, 246, 0)",question:"rgba(108, 99, 245, 0)"};return n[t]||n.info}show(t={}){if(this.currentNotification){const t=this.currentNotification;this.currentNotification=null;try{t&&t.parentNode&&t.parentNode.removeChild(t)}catch(t){}}const{type:n="info",title:e=this.getDefaultTitle(n),message:o="",buttonText:i="OK",buttonColor:a=null,onClose:r=null,timer:s=null,allowOutsideClick:c=!0,allowEscapeKey:l=!0,hideButton:d=!1,buttons:f=null}=t,u=!0===t.showCloseButton;try{document.body.style.overflow="hidden"}catch(t){}try{document.documentElement.style.overflow="hidden"}catch(t){}const p=document.createElement("div");p.className="notification-overlay",p.tabIndex=-1,p.setAttribute("role","dialog"),p.setAttribute("aria-modal","true"),p.style.pointerEvents="auto";const m=document.createElement("div");m.className="notification-box";const b=document.createElement("div");b.className=`notification-icon ${n}`,d&&"info"===n?(b.className="notification-loading-container",b.innerHTML='<div class="notification-spinner"></div>',b.style.background="transparent",b.style.boxShadow="none",b.style.width="100px",b.style.height="100px"):b.innerHTML=this.getIcon(n);const h=document.createElement("h3");h.className="notification-title",h.textContent=e;const g=document.createElement("p");g.className="notification-message",g.textContent=o;let x=null;if(t.html||t.content)if(x=document.createElement("div"),x.className="notification-content",t.html)try{x.innerHTML=t.html}catch(n){x.textContent=t.html}else t.content&&t.content instanceof HTMLElement&&x.appendChild(t.content);const y=()=>this.close(r);let w=null,v=null;if(!d)if(Array.isArray(f)&&f.length)v=document.createElement("div"),v.className="notification-button-group",f.forEach(t=>{const e=document.createElement("button");e.className="notification-button",e.textContent=t.text||"OK";const o=t.color||this.getButtonGradient(n),i=t.shadowColor||this.getButtonShadow(n);e.style.background=o,e.style.boxShadow=`0 4px 12px ${i}`,e.addEventListener("click",n=>{n.stopPropagation(),n.preventDefault();try{y().then(()=>{if("function"==typeof t.onClick)try{const n=t.onClick();n&&"function"==typeof n.then&&n.catch(t=>console.error(t))}catch(t){console.error(t)}}).catch(()=>{})}catch(t){console.error(t)}}),e.addEventListener("mouseenter",()=>{e.style.boxShadow=`0 6px 16px ${i}`}),e.addEventListener("mouseleave",()=>{e.style.boxShadow=`0 4px 12px ${i}`}),v.appendChild(e)});else if(t.onConfirm||t.onCancel||t.confirmText||t.cancelText){v=document.createElement("div"),v.className="notification-button-group";const e=t.cancelText||"Cancelar",o=t.confirmText||"Aceptar",i=document.createElement("button");i.className="notification-button",i.textContent=e;const a=t.cancelColor||"linear-gradient(135deg, #9ca3af 0%, #6b7280 100%)",r=t.cancelShadow||"rgba(107,114,128,0.25)";i.style.background=a,i.style.boxShadow=`0 4px 12px ${r}`,i.addEventListener("click",n=>{n.stopPropagation(),n.preventDefault(),y().then(()=>{try{if("function"==typeof t.onCancel){const n=t.onCancel();n&&"function"==typeof n.then&&n.catch(t=>console.error(t))}}catch(t){console.error(t)}}).catch(()=>{})}),i.addEventListener("mouseenter",()=>{i.style.boxShadow=`0 6px 16px ${r}`}),i.addEventListener("mouseleave",()=>{i.style.boxShadow=`0 4px 12px ${r}`});const s=document.createElement("button");s.className="notification-button",s.textContent=o;const c=t.confirmColor||this.getButtonGradient(n),l=t.confirmShadow||this.getButtonShadow(n);s.style.background=c,s.style.boxShadow=`0 4px 12px ${l}`,s.addEventListener("click",async n=>{n.stopPropagation(),n.preventDefault();try{if(await y(),"function"==typeof t.onConfirm){const n=t.onConfirm();n&&"function"==typeof n.then&&await n}}catch(t){console.error(t)}}),s.addEventListener("mouseenter",()=>{s.style.boxShadow=`0 6px 16px ${l}`}),s.addEventListener("mouseleave",()=>{s.style.boxShadow=`0 4px 12px ${l}`}),v.appendChild(i),v.appendChild(s)}else if(i){w=document.createElement("button"),w.className="notification-button",w.textContent=i;const t=a||this.getButtonGradient(n),e=this.getButtonShadow(n);w.style.background=t,w.style.boxShadow=`0 4px 12px ${e}`}let k=null;if(u&&(k=document.createElement("button"),k.setAttribute("aria-label","Cerrar"),k.className="notification-close",k.innerHTML="&times;",k.addEventListener("click",t=>{t.stopPropagation(),y()})),m.appendChild(b),x){const t="notify-desc-"+Date.now();x.id=t,p.setAttribute("aria-describedby",t),m.appendChild(x)}else m.appendChild(h),m.appendChild(g);k&&m.appendChild(k),v?m.appendChild(v):w&&m.appendChild(w),p.appendChild(m),document.body.appendChild(p);const E=p,C=new Promise(t=>{try{E._externalResolve=t}catch(t){}});try{const t=document.getElementById("notify-live");t&&(t.textContent=`${e}: ${o}`)}catch(t){}try{this._lastActiveElement=document.activeElement}catch(t){this._lastActiveElement=null}this.currentNotification=p;try{const t=m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])');t&&t.length?t[0].focus():w?w.focus():p.focus()}catch(t){try{p.focus()}catch(t){}}const N=t=>{if("Tab"!==t.key)return;const n=Array.from(m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])')).filter(t=>t instanceof HTMLElement&&null!==t.offsetParent);if(!n.length)return void t.preventDefault();const e=n[0],o=n[n.length-1];t.shiftKey||document.activeElement!==o?t.shiftKey&&document.activeElement===e&&(t.preventDefault(),o.focus()):(t.preventDefault(),e.focus())};E._focusTrap=N,document.addEventListener("keydown",N);const S=t.anim||{},T="number"==typeof S.overlayDuration?S.overlayDuration:150,L=S.overlayEasing||"easeOutQuad",j="number"==typeof S.boxDuration?S.boxDuration:200,O="number"==typeof S.boxDelay?S.boxDelay:50,_=S.boxEasing||"easeOutBack",D="number"==typeof S.boxStartScale?S.boxStartScale:.8,$="number"==typeof S.iconDuration?S.iconDuration:250,A="number"==typeof S.iconDelay?S.iconDelay:100,q="number"==typeof S.iconRotate?S.iconRotate:"success"===n?-90:"error"===n?90:0;if("number"==typeof S.overlayOpacity&&(p.style.backgroundColor=`rgba(0,0,0,${S.overlayOpacity})`),anime({targets:p,opacity:[0,1],duration:T,easing:L}),anime({targets:m,scale:[D,1],opacity:[0,1],duration:j,easing:_,delay:O}),anime({targets:b,scale:[0,1],rotate:[q,0],duration:$,easing:_,delay:A}),w){const t=this.getButtonShadow(n);w.addEventListener("mouseenter",()=>{w.style.boxShadow=`0 6px 16px ${t}`}),w.addEventListener("mouseleave",()=>{w.style.boxShadow=`0 4px 12px ${t}`}),w.addEventListener("click",t=>{t.stopPropagation(),t.preventDefault(),y().catch(()=>{})})}if(c&&p.addEventListener("click",t=>{m.contains(t.target)||y()}),s&&setTimeout(()=>{y()},s),l){const t=n=>{"Escape"===n.key&&(y(),document.removeEventListener("keydown",t))};E._escHandler=t,document.addEventListener("keydown",t)}return C}close(t=null){if(!this.currentNotification)return Promise.resolve();const n=this.currentNotification,e=n,o=n.querySelector(".notification-box");return this.currentNotification=null,anime({targets:o,scale:.8,opacity:0,duration:100,easing:"easeInQuad"}),new Promise(o=>{anime({targets:n,opacity:0,duration:100,easing:"easeInQuad",complete:()=>{try{e&&e._escHandler&&(document.removeEventListener("keydown",e._escHandler),e._escHandler=void 0)}catch(t){}try{e&&e._focusTrap&&(document.removeEventListener("keydown",e._focusTrap),e._focusTrap=void 0)}catch(t){}try{if(e&&"function"==typeof e._externalResolve){try{e._externalResolve()}catch(t){}e._externalResolve=void 0}}catch(t){}try{n&&n.parentNode&&n.parentNode.removeChild(n)}catch(t){try{n.remove()}catch(t){}}if(!this.currentNotification){try{document.body.style.overflow=""}catch(t){}try{document.documentElement.style.overflow=""}catch(t){}}try{this._lastActiveElement&&"function"==typeof this._lastActiveElement.focus&&this._lastActiveElement.focus()}catch(t){}this._lastActiveElement=null,t&&t(),o()}})})}success(t,n=null,e={}){this.show(Object.assign({type:"success",title:n||this.getDefaultTitle("success"),message:t},e))}error(t,n=null,e={}){this.show(Object.assign({type:"error",title:n||this.getDefaultTitle("error"),message:t},e))}warning(t,n=null,e={}){this.show(Object.assign({type:"warning",title:n||this.getDefaultTitle("warning"),message:t},e))}question(t,n=null,e={}){this.show(Object.assign({type:"question",title:n||this.getDefaultTitle("question"),message:t},e))}info(t,n=null,e={}){this.show(Object.assign({type:"info",title:n||this.getDefaultTitle("info"),message:t},e))}loading(t="Cargando...",n="Espera",e={}){const o=Object.assign({type:"info",title:n,message:t,hideButton:!0,allowOutsideClick:!1,allowEscapeKey:!1},e),i=this.show(o);return this._currentLoadingPromise=i,i}closeLoading(t=null){return this._currentLoadingPromise=null,this.close(t)}hide(t=null){return this.close(t)}hiden(t=null){return this.close(t)}_formatTime(t){const n=Math.max(0,Math.floor(t));return`${Math.floor(n/60).toString().padStart(2,"0")}:${(n%60).toString().padStart(2,"0")}`}showToast(t,n={}){var e;const o=n.type||"info",i=null!==(e=n.title)&&void 0!==e?e:null,a="number"==typeof n.duration?n.duration:4e3,r=n.position||"top-right",s=!1!==n.showProgress;let c=this._toastContainers.get(r);c&&document.body.contains(c)||(c=document.createElement("div"),c.className=`notify-toast-container notify-toast-${r}`,document.body.appendChild(c),this._toastContainers.set(r,c));const l=r.startsWith("bottom"),d="top-center"===r,f=document.createElement("div");f.className="notify-toast";const u=document.createElement("div");u.className=`notify-toast-icon ${o}`,u.innerHTML=this.getIcon(o);const p=document.createElement("div");if(p.className="notify-toast-content",i){const t=document.createElement("div");t.className="notify-toast-title",t.textContent=i,p.appendChild(t)}const m=document.createElement("div");m.className="notify-toast-message",m.textContent=t,p.appendChild(m);const b=document.createElement("button");b.className="notify-toast-close",b.setAttribute("aria-label","Cerrar notificación"),b.innerHTML="&times;",f.appendChild(u),f.appendChild(p),f.appendChild(b);let h=null;a>0&&s&&(h=document.createElement("div"),h.className=`notify-toast-progress ${o}`,f.appendChild(h)),l||d?c.appendChild(f):c.insertBefore(f,c.firstChild);let g=!1,x=null,y=a,w=0;const v=()=>{g||(g=!0,f.classList.remove("notify-toast-visible"),setTimeout(()=>{f.parentNode&&f.parentNode.removeChild(f)},300))},k=t=>{w=Date.now(),x=setTimeout(v,t),h&&(h.style.transition=`width ${t}ms linear`,h.style.width="0%")};b.addEventListener("click",v),requestAnimationFrame(()=>{requestAnimationFrame(()=>{f.classList.add("notify-toast-visible"),a>0&&k(a)})}),a>0&&(f.addEventListener("mouseenter",()=>{if(g||null===x)return;clearTimeout(x),x=null;const t=Date.now()-w;if(y=Math.max(0,y-t),h){const t=y/a*100;h.style.transition="none",h.style.width=`${t}%`}}),f.addEventListener("mouseleave",()=>{g||y<=0||k(y)}))}toast(t,n={}){if("string"==typeof t)this.showToast(t,n);else{const{message:n=""}=t,e=__rest(t,["message"]);this.showToast(n,e)}}toastSuccess(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"success",title:null!=n?n:e.title}))}toastError(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"error",title:null!=n?n:e.title}))}toastWarning(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"warning",title:null!=n?n:e.title}))}toastInfo(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"info",title:null!=n?n:e.title}))}toastQuestion(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"question",title:null!=n?n:e.title}))}},n=window;n.notify=t,n.Notification=t}}();const NotificationSystem=window.notify?.constructor||function(){throw new Error("NotificationSystem no se pudo cargar. Verifica que anime.js esté disponible.")};export default NotificationSystem;export{NotificationSystem};
+"use strict";var __rest=this&&this.__rest||function(t,n){var e={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&n.indexOf(o)<0&&(e[o]=t[o]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(t);i<o.length;i++)n.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(t,o[i])&&(e[o[i]]=t[o[i]])}return e};!function(){if("undefined"!=typeof anime)t();else{const n=document.createElement("script");n.src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js",n.onload=t,n.onerror=()=>{console.error("FerNotify: No se pudo cargar anime.js. Por favor, cargalo manualmente.")},document.head.appendChild(n)}function t(){const t=new class{constructor(){this.currentNotification=null,this._lastActiveElement=null,this._currentLoadingPromise=null,this._toastContainers=new Map,this._toastInstances=new Map,this.injectStyles(),this.loadBoxicons()}loadBoxicons(){if(!document.querySelector('link[href*="boxicons"]')){const t=document.createElement("link");t.rel="stylesheet",t.href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css",document.head.appendChild(t)}}injectStyles(){const t=document.createElement("style");t.textContent="\n            .notification-overlay {\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background-color: rgba(0, 0, 0, 0.4);\n                backdrop-filter: blur(4px);\n                -webkit-backdrop-filter: blur(4px);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                z-index: 9999;\n                opacity: 0;\n                overflow: hidden;\n            }\n\n            .notification-box {\n                background: white;\n                border-radius: 16px;\n                padding: 40px 30px;\n                max-width: 500px;\n                width: 90%;\n                max-height: 80vh;\n                overflow: auto;\n                position: relative;\n                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n                text-align: center;\n                transform: scale(0.7);\n                opacity: 0;\n            }\n\n            .notification-content {\n                text-align: left;\n                margin-bottom: 18px;\n            }\n\n            .notification-close {\n                position: absolute;\n                top: 10px;\n                right: 10px;\n                width: 38px;\n                height: 38px;\n                border-radius: 8px;\n                border: none;\n                background: rgba(0,0,0,0.06);\n                color: #111827;\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                font-size: 18px;\n            }\n\n            .notification-close:hover {\n                background: rgba(0,0,0,0.09);\n            }\n\n            /* Form controls inside the modal */\n            .notification-box input,\n            .notification-box textarea,\n            .notification-box select {\n                width: 100%;\n                padding: 10px 12px;\n                border: 1px solid #e5e7eb;\n                border-radius: 8px;\n                background: #ffffff;\n                color: #111827;\n                font-size: 15px;\n                box-sizing: border-box;\n                transition: box-shadow 0.15s ease, border-color 0.15s ease;\n            }\n\n            .notification-box input:focus,\n            .notification-box textarea:focus,\n            .notification-box select:focus {\n                outline: none;\n                border-color: #6366f1;\n                box-shadow: 0 6px 24px rgba(99,102,241,0.12), 0 0 0 4px rgba(99,102,241,0.06);\n            }\n\n            .notification-box label { display: block; margin-bottom: 6px; color: #374151; font-weight: 600; }\n\n            /* Soporte para tema oscuro con clase .dark (Tailwind darkMode: 'class') */\n            /* Esto tiene prioridad sobre prefers-color-scheme para respetar la elección del usuario en la web */\n            .dark .notification-box { background: #0f1724 !important; color: #e6eef8 !important; }\n            .dark .notification-box input,\n            .dark .notification-box textarea,\n            .dark .notification-box select {\n                background: #0b1220 !important;\n                border: 1px solid rgba(255,255,255,0.06) !important;\n                color: #e6eef8 !important;\n            }\n            .dark .notification-box .notification-close { background: rgba(255,255,255,0.03) !important; color: #e6eef8 !important; }\n            .dark .notification-overlay { background-color: rgba(0,0,0,0.6) !important; }\n            .dark .notification-title { color: #e6eef8 !important; }\n            .dark .notification-message { color: #cbd5e1 !important; }\n\n            /* Forzar modo claro cuando NO hay clase .dark, ignorando prefers-color-scheme */\n            html:not(.dark) .notification-box { background: white !important; color: #111827 !important; }\n            html:not(.dark) .notification-box input,\n            html:not(.dark) .notification-box textarea,\n            html:not(.dark) .notification-box select {\n                background: #ffffff !important;\n                border: 1px solid #e5e7eb !important;\n                color: #111827 !important;\n            }\n            html:not(.dark) .notification-box .notification-close { background: rgba(0,0,0,0.06) !important; color: #111827 !important; }\n            html:not(.dark) .notification-overlay { background-color: rgba(0, 0, 0, 0.4) !important; }\n            html:not(.dark) .notification-title { color: #1f2937 !important; }\n            html:not(.dark) .notification-message { color: #6b7280 !important; }\n\n            .notification-icon {\n                width: 80px;\n                height: 80px;\n                border-radius: 50%;\n                margin: 0 auto 25px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 40px;\n                position: relative;\n            }\n\n            .notification-icon::before {\n                content: '';\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                border-radius: 50%;\n                opacity: 0.2;\n            }\n\n            .notification-icon.success {\n                background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n                color: white;\n            }\n\n            .notification-icon.success::before {\n                background: #10b981;\n            }\n\n            .notification-icon.error {\n                background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n                color: white;\n            }\n\n            .notification-icon.error::before {\n                background: #ef4444;\n            }\n\n            .notification-icon.warning {\n                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n                color: white;\n            }\n\n            .notification-icon.warning::before {\n                background: #f59e0b;\n            }\n\n            .notification-icon.info {\n                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n                color: white;\n            }\n\n            .notification-icon.info::before {\n                background: #3b82f6;\n            }\n            .notification-icon.question {\n                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n                color: white;\n            }\n\n            .notification-icon.question::before {\n                background: #3b82f6;\n            }\n\n            .notification-title {\n                font-size: 24px;\n                font-weight: 700;\n                color: #1f2937;\n                margin-bottom: 12px;\n                line-height: 1.3;\n            }\n\n            .notification-message {\n                font-size: 16px;\n                color: #6b7280;\n                line-height: 1.6;\n                margin-bottom: 30px;\n            }\n\n            .notification-button {\n                color: white;\n                border: none;\n                padding: 10px 14px;\n                border-radius: 8px;\n                font-size: 16px;\n                font-weight: 600;\n                cursor: pointer;\n                transition: all 0.3s ease;\n            }\n\n            .notification-button:hover {\n                transform: translateY(-2px);\n                filter: brightness(1.1);\n            }\n\n            .notification-button:active {\n                transform: translateY(0);\n            }\n\n            /* group container for multiple action buttons */\n            .notification-button-group {\n                display: flex;\n                gap: 12px;\n                justify-content: center;\n                flex-wrap: wrap;\n                margin-top: 10px;\n            }\n\n            .notification-icon-checkmark {\n                animation: checkmark-draw 0.6s ease-in-out;\n            }\n\n            .notification-icon-cross {\n                animation: cross-draw 0.5s ease-in-out;\n            }\n\n            @keyframes checkmark-draw {\n                0% {\n                    transform: scale(0) rotate(-45deg);\n                    opacity: 0;\n                }\n                50% {\n                    transform: scale(1.2) rotate(-45deg);\n                }\n                100% {\n                    transform: scale(1) rotate(0deg);\n                    opacity: 1;\n                }\n            }\n\n            @keyframes cross-draw {\n                0% {\n                    transform: scale(0) rotate(-180deg);\n                    opacity: 0;\n                }\n                50% {\n                    transform: scale(1.2) rotate(-90deg);\n                }\n                100% {\n                    transform: scale(1) rotate(0deg);\n                    opacity: 1;\n                }\n            }\n\n            /* Loading spinner styles */\n            .notification-loading-container {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n                margin: 0 auto;\n            }\n\n            .notification-spinner {\n                width: 60px;\n                height: 60px;\n                border: 5px solid rgba(99, 102, 241, 0.15);\n                border-top-color: #6366f1;\n                border-radius: 50%;\n                animation: notification-spin 1s linear infinite;\n                margin: 0 auto;\n            }\n\n            @keyframes notification-spin {\n                to {\n                    transform: rotate(360deg);\n                }\n            }\n\n            .notification-loading-text {\n                font-size: 14px;\n                color: #6b7280;\n                text-align: center;\n                margin-top: 12px;\n            }\n\n            .dark .notification-loading-text {\n                color: #cbd5e1;\n            }\n\n            /* ==================== Toast ==================== */\n            .notify-toast-container {\n                position: fixed;\n                z-index: 10000;\n                display: flex;\n                flex-direction: column;\n                gap: 10px;\n                pointer-events: none;\n                width: 360px;\n                max-width: calc(100vw - 40px);\n            }\n            .notify-toast-top-right  { top: 20px; right: 20px; }\n            .notify-toast-top-left   { top: 20px; left: 20px; }\n            .notify-toast-top-center { top: 20px; left: 50%; transform: translateX(-50%); }\n            .notify-toast-bottom-right { bottom: 20px; right: 20px; flex-direction: column-reverse; }\n            .notify-toast-bottom-left  { bottom: 20px; left: 20px; flex-direction: column-reverse; }\n\n            .notify-toast {\n                background: white;\n                border-radius: 12px;\n                padding: 14px 40px 14px 14px;\n                box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);\n                display: flex;\n                align-items: flex-start;\n                gap: 12px;\n                pointer-events: auto;\n                position: relative;\n                overflow: hidden;\n                opacity: 0;\n                transform: translateX(30px);\n                transition: opacity 0.25s ease, transform 0.25s ease;\n            }\n            .notify-toast-top-left .notify-toast,\n            .notify-toast-bottom-left .notify-toast { transform: translateX(-30px); }\n            .notify-toast-top-center .notify-toast { transform: translateY(-20px); }\n            .notify-toast.notify-toast-visible {\n                opacity: 1;\n                transform: translateX(0) translateY(0) !important;\n            }\n\n            .notify-toast-icon {\n                width: 36px;\n                height: 36px;\n                border-radius: 50%;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 20px;\n                flex-shrink: 0;\n                color: white;\n            }\n            .notify-toast-icon.success  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }\n            .notify-toast-icon.error    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }\n            .notify-toast-icon.warning  { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }\n            .notify-toast-icon.info     { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }\n            .notify-toast-icon.question { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }\n            .notify-toast-icon.loading  { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }\n\n            .notify-toast-content { flex: 1; min-width: 0; }\n            .notify-toast-title {\n                font-size: 14px;\n                font-weight: 700;\n                color: #1f2937;\n                margin-bottom: 2px;\n                line-height: 1.3;\n                cursor: default;\n            }\n            .notify-toast-message {\n                font-size: 13px;\n                color: #6b7280;\n                line-height: 1.5;\n                cursor: default;\n            }\n\n            .notify-toast-close {\n                position: absolute;\n                top: 8px;\n                right: 8px;\n                width: 24px;\n                height: 24px;\n                border-radius: 6px;\n                border: none;\n                background: rgba(0,0,0,0.06);\n                color: #6b7280;\n                cursor: pointer;\n                font-size: 16px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                line-height: 1;\n                padding: 0;\n            }\n            .notify-toast-close:hover { background: rgba(0,0,0,0.1); color: #374151; }\n\n            /* Sin botón de cierre: reducir padding derecho */\n            .notify-toast.notify-toast-no-close { padding-right: 14px; }\n\n            .notify-toast-progress {\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                height: 3px;\n                width: 100%;\n                border-radius: 0 0 0 12px;\n            }\n            .notify-toast-progress.success  { background: #10b981; }\n            .notify-toast-progress.error    { background: #ef4444; }\n            .notify-toast-progress.warning  { background: #f59e0b; }\n            .notify-toast-progress.info     { background: #3b82f6; }\n            .notify-toast-progress.question { background: #8b5cf6; }\n            .notify-toast-progress.loading  { background: #6366f1; }\n\n            /* Spinner para toast de carga */\n            .notify-toast-spinner {\n                width: 18px;\n                height: 18px;\n                border: 2.5px solid rgba(255,255,255,0.35);\n                border-top-color: white;\n                border-radius: 50%;\n                animation: notification-spin 0.8s linear infinite;\n                flex-shrink: 0;\n            }\n\n            .dark .notify-toast { background: #0f1724; box-shadow: 0 4px 24px rgba(0,0,0,0.35); }\n            .dark .notify-toast-title   { color: #e6eef8; }\n            .dark .notify-toast-message { color: #cbd5e1; }\n            .dark .notify-toast-close   { background: rgba(255,255,255,0.06); color: #94a3b8; }\n            .dark .notify-toast-close:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }\n\n            /* Respeta la preferencia de movimiento reducido del sistema */\n            @media (prefers-reduced-motion: reduce) {\n                .notify-toast {\n                    transition: opacity 0.1s ease !important;\n                    transform: none !important;\n                }\n                .notify-toast.notify-toast-visible {\n                    transform: none !important;\n                }\n                .notify-toast-spinner {\n                    animation-duration: 1.5s !important;\n                }\n                .notify-toast-progress {\n                    transition: none !important;\n                }\n            }\n        ",document.head.appendChild(t)}getIcon(t){const n={success:'<i class="bx bx-check" aria-hidden="true"></i>',error:'<i class="bx bx-x" aria-hidden="true"></i>',warning:'<i class="bx bx-error" aria-hidden="true"></i>',info:'<i class="bx bx-info-circle" aria-hidden="true"></i>',question:'<i class="bx bx-question-mark" aria-hidden="true"></i>',loading:'<div class="notify-toast-spinner" aria-hidden="true"></div>'};return n[t]||n.info}getDefaultTitle(t){return{success:"¡Éxito!",error:"Error",warning:"Advertencia",info:"Información",question:"Pregunta"}[t]||"Notificación"}getButtonGradient(t){const n={success:"linear-gradient(135deg, #10b981 0%, #059669 100%)",error:"linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",warning:"linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",info:"linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",question:"linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)"};return n[t]||n.info}getButtonShadow(t){const n={success:"rgba(16, 185, 129, 0)",error:"rgba(239, 68, 68, 0)",warning:"rgba(245, 159, 11, 0)",info:"rgba(59, 131, 246, 0)",question:"rgba(108, 99, 245, 0)"};return n[t]||n.info}show(t={}){if(this.currentNotification){const t=this.currentNotification;this.currentNotification=null;try{t&&t.parentNode&&t.parentNode.removeChild(t)}catch(t){}}const{type:n="info",title:e=this.getDefaultTitle(n),message:o="",buttonText:i="OK",buttonColor:a=null,onClose:r=null,timer:s=null,allowOutsideClick:c=!0,allowEscapeKey:l=!0,hideButton:d=!1,buttons:f=null}=t,u=!0===t.showCloseButton;try{document.body.style.overflow="hidden"}catch(t){}try{document.documentElement.style.overflow="hidden"}catch(t){}const p=document.createElement("div");p.className="notification-overlay",p.tabIndex=-1,p.setAttribute("role","dialog"),p.setAttribute("aria-modal","true"),p.style.pointerEvents="auto";const m=document.createElement("div");m.className="notification-box";const b=document.createElement("div");b.className=`notification-icon ${n}`,d&&"info"===n?(b.className="notification-loading-container",b.innerHTML='<div class="notification-spinner"></div>',b.style.background="transparent",b.style.boxShadow="none",b.style.width="100px",b.style.height="100px"):b.innerHTML=this.getIcon(n);const g=document.createElement("h3");g.className="notification-title",g.textContent=e;const h=document.createElement("p");h.className="notification-message",h.textContent=o;let y=null;if(t.html||t.content)if(y=document.createElement("div"),y.className="notification-content",t.html)try{y.innerHTML=t.html}catch(n){y.textContent=t.html}else t.content&&t.content instanceof HTMLElement&&y.appendChild(t.content);const x=()=>this.close(r);let w=null,v=null;if(!d)if(Array.isArray(f)&&f.length)v=document.createElement("div"),v.className="notification-button-group",f.forEach(t=>{const e=document.createElement("button");e.className="notification-button",e.textContent=t.text||"OK";const o=t.color||this.getButtonGradient(n),i=t.shadowColor||this.getButtonShadow(n);e.style.background=o,e.style.boxShadow=`0 4px 12px ${i}`,e.addEventListener("click",n=>{n.stopPropagation(),n.preventDefault();try{x().then(()=>{if("function"==typeof t.onClick)try{const n=t.onClick();n&&"function"==typeof n.then&&n.catch(t=>console.error(t))}catch(t){console.error(t)}}).catch(()=>{})}catch(t){console.error(t)}}),e.addEventListener("mouseenter",()=>{e.style.boxShadow=`0 6px 16px ${i}`}),e.addEventListener("mouseleave",()=>{e.style.boxShadow=`0 4px 12px ${i}`}),v.appendChild(e)});else if(t.onConfirm||t.onCancel||t.confirmText||t.cancelText){v=document.createElement("div"),v.className="notification-button-group";const e=t.cancelText||"Cancelar",o=t.confirmText||"Aceptar",i=document.createElement("button");i.className="notification-button",i.textContent=e;const a=t.cancelColor||"linear-gradient(135deg, #9ca3af 0%, #6b7280 100%)",r=t.cancelShadow||"rgba(107,114,128,0.25)";i.style.background=a,i.style.boxShadow=`0 4px 12px ${r}`,i.addEventListener("click",n=>{n.stopPropagation(),n.preventDefault(),x().then(()=>{try{if("function"==typeof t.onCancel){const n=t.onCancel();n&&"function"==typeof n.then&&n.catch(t=>console.error(t))}}catch(t){console.error(t)}}).catch(()=>{})}),i.addEventListener("mouseenter",()=>{i.style.boxShadow=`0 6px 16px ${r}`}),i.addEventListener("mouseleave",()=>{i.style.boxShadow=`0 4px 12px ${r}`});const s=document.createElement("button");s.className="notification-button",s.textContent=o;const c=t.confirmColor||this.getButtonGradient(n),l=t.confirmShadow||this.getButtonShadow(n);s.style.background=c,s.style.boxShadow=`0 4px 12px ${l}`,s.addEventListener("click",async n=>{n.stopPropagation(),n.preventDefault();try{if(await x(),"function"==typeof t.onConfirm){const n=t.onConfirm();n&&"function"==typeof n.then&&await n}}catch(t){console.error(t)}}),s.addEventListener("mouseenter",()=>{s.style.boxShadow=`0 6px 16px ${l}`}),s.addEventListener("mouseleave",()=>{s.style.boxShadow=`0 4px 12px ${l}`}),v.appendChild(i),v.appendChild(s)}else if(i){w=document.createElement("button"),w.className="notification-button",w.textContent=i;const t=a||this.getButtonGradient(n),e=this.getButtonShadow(n);w.style.background=t,w.style.boxShadow=`0 4px 12px ${e}`}let k=null;if(u&&(k=document.createElement("button"),k.setAttribute("aria-label","Cerrar"),k.className="notification-close",k.innerHTML="&times;",k.addEventListener("click",t=>{t.stopPropagation(),x()})),m.appendChild(b),y){const t="notify-desc-"+Date.now();y.id=t,p.setAttribute("aria-describedby",t),m.appendChild(y)}else m.appendChild(g),m.appendChild(h);k&&m.appendChild(k),v?m.appendChild(v):w&&m.appendChild(w),p.appendChild(m),document.body.appendChild(p);const E=p,C=new Promise(t=>{try{E._externalResolve=t}catch(t){}});try{const t=document.getElementById("notify-live");t&&(t.textContent=`${e}: ${o}`)}catch(t){}try{this._lastActiveElement=document.activeElement}catch(t){this._lastActiveElement=null}this.currentNotification=p;try{const t=m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])');t&&t.length?t[0].focus():w?w.focus():p.focus()}catch(t){try{p.focus()}catch(t){}}const _=t=>{if("Tab"!==t.key)return;const n=Array.from(m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])')).filter(t=>t instanceof HTMLElement&&null!==t.offsetParent);if(!n.length)return void t.preventDefault();const e=n[0],o=n[n.length-1];t.shiftKey||document.activeElement!==o?t.shiftKey&&document.activeElement===e&&(t.preventDefault(),o.focus()):(t.preventDefault(),e.focus())};E._focusTrap=_,document.addEventListener("keydown",_);const N=t.anim||{},T="number"==typeof N.overlayDuration?N.overlayDuration:150,S=N.overlayEasing||"easeOutQuad",L="number"==typeof N.boxDuration?N.boxDuration:200,j="number"==typeof N.boxDelay?N.boxDelay:50,O=N.boxEasing||"easeOutBack",D="number"==typeof N.boxStartScale?N.boxStartScale:.8,A="number"==typeof N.iconDuration?N.iconDuration:250,$="number"==typeof N.iconDelay?N.iconDelay:100,P="number"==typeof N.iconRotate?N.iconRotate:"success"===n?-90:"error"===n?90:0;if("number"==typeof N.overlayOpacity&&(p.style.backgroundColor=`rgba(0,0,0,${N.overlayOpacity})`),anime({targets:p,opacity:[0,1],duration:T,easing:S}),anime({targets:m,scale:[D,1],opacity:[0,1],duration:L,easing:O,delay:j}),anime({targets:b,scale:[0,1],rotate:[P,0],duration:A,easing:O,delay:$}),w){const t=this.getButtonShadow(n);w.addEventListener("mouseenter",()=>{w.style.boxShadow=`0 6px 16px ${t}`}),w.addEventListener("mouseleave",()=>{w.style.boxShadow=`0 4px 12px ${t}`}),w.addEventListener("click",t=>{t.stopPropagation(),t.preventDefault(),x().catch(()=>{})})}if(c&&p.addEventListener("click",t=>{m.contains(t.target)||x()}),s&&setTimeout(()=>{x()},s),l){const t=n=>{"Escape"===n.key&&(x(),document.removeEventListener("keydown",t))};E._escHandler=t,document.addEventListener("keydown",t)}return C}close(t=null){if(!this.currentNotification)return Promise.resolve();const n=this.currentNotification,e=n,o=n.querySelector(".notification-box");return this.currentNotification=null,anime({targets:o,scale:.8,opacity:0,duration:100,easing:"easeInQuad"}),new Promise(o=>{anime({targets:n,opacity:0,duration:100,easing:"easeInQuad",complete:()=>{try{e&&e._escHandler&&(document.removeEventListener("keydown",e._escHandler),e._escHandler=void 0)}catch(t){}try{e&&e._focusTrap&&(document.removeEventListener("keydown",e._focusTrap),e._focusTrap=void 0)}catch(t){}try{if(e&&"function"==typeof e._externalResolve){try{e._externalResolve()}catch(t){}e._externalResolve=void 0}}catch(t){}try{n&&n.parentNode&&n.parentNode.removeChild(n)}catch(t){try{n.remove()}catch(t){}}if(!this.currentNotification){try{document.body.style.overflow=""}catch(t){}try{document.documentElement.style.overflow=""}catch(t){}}try{this._lastActiveElement&&"function"==typeof this._lastActiveElement.focus&&this._lastActiveElement.focus()}catch(t){}this._lastActiveElement=null,t&&t(),o()}})})}success(t,n=null,e={}){this.show(Object.assign({type:"success",title:n||this.getDefaultTitle("success"),message:t},e))}error(t,n=null,e={}){this.show(Object.assign({type:"error",title:n||this.getDefaultTitle("error"),message:t},e))}warning(t,n=null,e={}){this.show(Object.assign({type:"warning",title:n||this.getDefaultTitle("warning"),message:t},e))}question(t,n=null,e={}){this.show(Object.assign({type:"question",title:n||this.getDefaultTitle("question"),message:t},e))}info(t,n=null,e={}){this.show(Object.assign({type:"info",title:n||this.getDefaultTitle("info"),message:t},e))}loading(t="Cargando...",n="Espera",e={}){const o=Object.assign({type:"info",title:n,message:t,hideButton:!0,allowOutsideClick:!1,allowEscapeKey:!1},e),i=this.show(o);return this._currentLoadingPromise=i,i}closeLoading(t=null){return this._currentLoadingPromise=null,this.close(t)}hide(t=null){return this.close(t)}hiden(t=null){return this.close(t)}_formatTime(t){const n=Math.max(0,Math.floor(t));return`${Math.floor(n/60).toString().padStart(2,"0")}:${(n%60).toString().padStart(2,"0")}`}showToast(t,n={}){var e,o;const i=n.type||"info",a=null!==(e=n.title)&&void 0!==e?e:null,r="number"==typeof n.duration?n.duration:4e3,s=n.position||"top-right",c=!1!==n.showProgress,l=null!==(o=n.id)&&void 0!==o?o:null,d=!1!==n.closeable;if(null!==l){const t=this._toastInstances.get(l);if(t)return void t.reset(r)}let f=this._toastContainers.get(s);f&&document.body.contains(f)||(f=document.createElement("div"),f.className=`notify-toast-container notify-toast-${s}`,f.setAttribute("aria-label","Notificaciones"),document.body.appendChild(f),this._toastContainers.set(s,f));const u=s.startsWith("bottom"),p="top-center"===s,m=document.createElement("div");m.className="notify-toast",d||m.classList.add("notify-toast-no-close"),"error"===i||"warning"===i?m.setAttribute("role","alert"):m.setAttribute("role","status"),m.setAttribute("aria-atomic","true"),m.setAttribute("aria-live","error"===i||"warning"===i?"assertive":"polite");const b=document.createElement("div");b.className=`notify-toast-icon ${i}`,b.innerHTML=this.getIcon(i);const g=document.createElement("div");if(g.className="notify-toast-content",a){const t=document.createElement("div");t.className="notify-toast-title",t.textContent=a,g.appendChild(t)}const h=document.createElement("div");if(h.className="notify-toast-message",h.textContent=t,g.appendChild(h),m.appendChild(b),m.appendChild(g),d){const t=document.createElement("button");t.className="notify-toast-close",t.setAttribute("aria-label","Cerrar notificación"),t.innerHTML="&times;",t.addEventListener("click",E),m.appendChild(t)}let y=null;r>0&&c&&(y=document.createElement("div"),y.className=`notify-toast-progress ${i}`,y.setAttribute("role","progressbar"),y.setAttribute("aria-hidden","true"),m.appendChild(y)),u||p?f.appendChild(m):f.insertBefore(m,f.firstChild);let x=!1,w=null,v=r,k=0;function E(){if(x)return Promise.resolve();if(x=!0,m.contains(document.activeElement))try{document.activeElement.blur()}catch(t){}return m.classList.remove("notify-toast-visible"),new Promise(t=>{setTimeout(()=>{m.parentNode&&m.parentNode.removeChild(m),t()},300)})}const C=t=>{k=Date.now(),w=setTimeout(()=>{null!==l&&this._toastInstances.delete(l),E()},t),y&&(y.style.transition=`width ${t}ms linear`,y.style.width="0%")},_=t=>{x||(null!==w&&(clearTimeout(w),w=null),v=t,t>0?(y&&(y.style.transition="none",y.style.width="100%",y.offsetWidth),C(t)):y&&(y.style.transition="none",y.style.width="100%"))};if(null!==l){const t=()=>{if(!x){if(x=!0,null!==w&&clearTimeout(w),m.contains(document.activeElement))try{document.activeElement.blur()}catch(t){}m.parentNode&&m.parentNode.removeChild(m)}};this._toastInstances.set(l,{reset:_,dismiss:E,_silentDismiss:t})}requestAnimationFrame(()=>{requestAnimationFrame(()=>{m.classList.add("notify-toast-visible"),r>0&&C(r)})}),r>0&&d&&(m.addEventListener("mouseenter",()=>{if(x||null===w)return;clearTimeout(w),w=null;const t=Date.now()-k;if(v=Math.max(0,v-t),y){const t=v/r*100;y.style.transition="none",y.style.width=`${t}%`}}),m.addEventListener("mouseleave",()=>{x||v<=0||C(v)}))}toast(t,n={}){if("string"==typeof t)this.showToast(t,n);else{const{message:n=""}=t,e=__rest(t,["message"]);this.showToast(n,e)}}toastSuccess(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"success",title:null!=n?n:e.title}))}toastError(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"error",title:null!=n?n:e.title}))}toastWarning(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"warning",title:null!=n?n:e.title}))}toastInfo(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"info",title:null!=n?n:e.title}))}toastQuestion(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"question",title:null!=n?n:e.title}))}toastLoading(t="Cargando...",n,e={}){this.showToast(t,Object.assign(Object.assign({position:"top-right"},e),{type:"loading",title:null!=n?n:e.title,id:"__loading__",closeable:!1,duration:0,showProgress:!1}))}closeToastLoading(){const t=this._toastInstances.get("__loading__");return t?(this._toastInstances.delete("__loading__"),t.dismiss()):Promise.resolve()}replaceToastLoading(t,n={}){const e=this._toastInstances.get("__loading__");e&&(this._toastInstances.delete("__loading__"),e._silentDismiss()),this.showToast(t,n)}},n=window;n.notify=t,n.Notification=t}}();const NotificationSystem=window.notify?.constructor||function(){throw new Error("NotificationSystem no se pudo cargar. Verifica que anime.js esté disponible.")};export default NotificationSystem;export{NotificationSystem};

package/dist/notification-system.js

@@ -30,6 +30,7 @@ var __rest = (this && this.__rest) || function (s, e) {
                 this._lastActiveElement = null;
                 this._currentLoadingPromise = null;
                 this._toastContainers = new Map();
+                this._toastInstances = new Map();
                 this.injectStyles();
                 this.loadBoxicons();
             }
@@ -393,6 +394,7 @@ var __rest = (this && this.__rest) || function (s, e) {
             .notify-toast-icon.warning  { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
             .notify-toast-icon.info     { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
             .notify-toast-icon.question { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }
+            .notify-toast-icon.loading  { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
 
             .notify-toast-content { flex: 1; min-width: 0; }
             .notify-toast-title {
@@ -401,11 +403,13 @@ var __rest = (this && this.__rest) || function (s, e) {
                 color: #1f2937;
                 margin-bottom: 2px;
                 line-height: 1.3;
+                cursor: default;
             }
             .notify-toast-message {
                 font-size: 13px;
                 color: #6b7280;
                 line-height: 1.5;
+                cursor: default;
             }
 
             .notify-toast-close {
@@ -428,6 +432,9 @@ var __rest = (this && this.__rest) || function (s, e) {
             }
             .notify-toast-close:hover { background: rgba(0,0,0,0.1); color: #374151; }
 
+            /* Sin botón de cierre: reducir padding derecho */
+            .notify-toast.notify-toast-no-close { padding-right: 14px; }
+
             .notify-toast-progress {
                 position: absolute;
                 bottom: 0;
@@ -441,12 +448,41 @@ var __rest = (this && this.__rest) || function (s, e) {
             .notify-toast-progress.warning  { background: #f59e0b; }
             .notify-toast-progress.info     { background: #3b82f6; }
             .notify-toast-progress.question { background: #8b5cf6; }
+            .notify-toast-progress.loading  { background: #6366f1; }
+
+            /* Spinner para toast de carga */
+            .notify-toast-spinner {
+                width: 18px;
+                height: 18px;
+                border: 2.5px solid rgba(255,255,255,0.35);
+                border-top-color: white;
+                border-radius: 50%;
+                animation: notification-spin 0.8s linear infinite;
+                flex-shrink: 0;
+            }
 
             .dark .notify-toast { background: #0f1724; box-shadow: 0 4px 24px rgba(0,0,0,0.35); }
             .dark .notify-toast-title   { color: #e6eef8; }
             .dark .notify-toast-message { color: #cbd5e1; }
             .dark .notify-toast-close   { background: rgba(255,255,255,0.06); color: #94a3b8; }
             .dark .notify-toast-close:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }
+
+            /* Respeta la preferencia de movimiento reducido del sistema */
+            @media (prefers-reduced-motion: reduce) {
+                .notify-toast {
+                    transition: opacity 0.1s ease !important;
+                    transform: none !important;
+                }
+                .notify-toast.notify-toast-visible {
+                    transform: none !important;
+                }
+                .notify-toast-spinner {
+                    animation-duration: 1.5s !important;
+                }
+                .notify-toast-progress {
+                    transition: none !important;
+                }
+            }
         `;
                 document.head.appendChild(style);
             }
@@ -456,7 +492,8 @@ var __rest = (this && this.__rest) || function (s, e) {
                     'error': '<i class="bx bx-x" aria-hidden="true"></i>',
                     'warning': '<i class="bx bx-error" aria-hidden="true"></i>',
                     'info': '<i class="bx bx-info-circle" aria-hidden="true"></i>',
-                    'question': '<i class="bx bx-question-mark" aria-hidden="true"></i>'
+                    'question': '<i class="bx bx-question-mark" aria-hidden="true"></i>',
+                    'loading': '<div class="notify-toast-spinner" aria-hidden="true"></div>'
                 };
                 return icons[type] || icons.info;
             }
@@ -954,16 +991,27 @@ var __rest = (this && this.__rest) || function (s, e) {
                 return `${mm}:${ss}`;
             }
             showToast(message, options = {}) {
-                var _a;
+                var _a, _b;
                 const type = options.type || 'info';
                 const title = (_a = options.title) !== null && _a !== void 0 ? _a : null;
                 const duration = typeof options.duration === 'number' ? options.duration : 4000;
                 const position = options.position || 'top-right';
                 const showProgress = options.showProgress !== false;
+                const toastId = (_b = options.id) !== null && _b !== void 0 ? _b : null;
+                const closeable = options.closeable !== false;
+                // Deduplicación: si ya existe un toast con este ID, resetear su cuenta regresiva
+                if (toastId !== null) {
+                    const existing = this._toastInstances.get(toastId);
+                    if (existing) {
+                        existing.reset(duration);
+                        return;
+                    }
+                }
                 let container = this._toastContainers.get(position);
                 if (!container || !document.body.contains(container)) {
                     container = document.createElement('div');
                     container.className = `notify-toast-container notify-toast-${position}`;
+                    container.setAttribute('aria-label', 'Notificaciones');
                     document.body.appendChild(container);
                     this._toastContainers.set(position, container);
                 }
@@ -971,6 +1019,20 @@ var __rest = (this && this.__rest) || function (s, e) {
                 const isCenter = position === 'top-center';
                 const toast = document.createElement('div');
                 toast.className = 'notify-toast';
+                if (!closeable) {
+                    toast.classList.add('notify-toast-no-close');
+                }
+                // Accesibilidad: role + aria-live según la urgencia del tipo
+                // role="alert" implica aria-live="assertive" + aria-atomic="true" → lector lo interrumpe
+                // role="status" implica aria-live="polite" + aria-atomic="true" → lector espera pausa
+                if (type === 'error' || type === 'warning') {
+                    toast.setAttribute('role', 'alert');
+                }
+                else {
+                    toast.setAttribute('role', 'status');
+                }
+                toast.setAttribute('aria-atomic', 'true');
+                toast.setAttribute('aria-live', type === 'error' || type === 'warning' ? 'assertive' : 'polite');
                 const iconEl = document.createElement('div');
                 iconEl.className = `notify-toast-icon ${type}`;
                 iconEl.innerHTML = this.getIcon(type);
@@ -986,17 +1048,22 @@ var __rest = (this && this.__rest) || function (s, e) {
                 msgEl.className = 'notify-toast-message';
                 msgEl.textContent = message;
                 contentEl.appendChild(msgEl);
-                const closeBtn = document.createElement('button');
-                closeBtn.className = 'notify-toast-close';
-                closeBtn.setAttribute('aria-label', 'Cerrar notificación');
-                closeBtn.innerHTML = '&times;';
                 toast.appendChild(iconEl);
                 toast.appendChild(contentEl);
-                toast.appendChild(closeBtn);
+                if (closeable) {
+                    const closeBtn = document.createElement('button');
+                    closeBtn.className = 'notify-toast-close';
+                    closeBtn.setAttribute('aria-label', 'Cerrar notificación');
+                    closeBtn.innerHTML = '&times;';
+                    closeBtn.addEventListener('click', removeToast);
+                    toast.appendChild(closeBtn);
+                }
                 let progressEl = null;
                 if (duration > 0 && showProgress) {
                     progressEl = document.createElement('div');
                     progressEl.className = `notify-toast-progress ${type}`;
+                    progressEl.setAttribute('role', 'progressbar');
+                    progressEl.setAttribute('aria-hidden', 'true'); // decorativo: el timer no añade info que el usuario necesite leer
                     toast.appendChild(progressEl);
                 }
                 if (isBottom || isCenter) {
@@ -1009,19 +1076,34 @@ var __rest = (this && this.__rest) || function (s, e) {
                 let timerId = null;
                 let remaining = duration;
                 let timerStartedAt = 0;
-                const removeToast = () => {
+                function removeToast() {
                     if (dismissed)
-                        return;
+                        return Promise.resolve();
                     dismissed = true;
+                    // Si el foco estaba dentro del toast, sacarlo antes de que el nodo desaparezca
+                    // para evitar que el foco se pierda silenciosamente en el documento
+                    if (toast.contains(document.activeElement)) {
+                        try {
+                            document.activeElement.blur();
+                        }
+                        catch (e) { }
+                    }
                     toast.classList.remove('notify-toast-visible');
-                    setTimeout(() => {
-                        if (toast.parentNode)
-                            toast.parentNode.removeChild(toast);
-                    }, 300);
-                };
+                    return new Promise(resolve => {
+                        setTimeout(() => {
+                            if (toast.parentNode)
+                                toast.parentNode.removeChild(toast);
+                            resolve();
+                        }, 300);
+                    });
+                }
                 const startCountdown = (ms) => {
                     timerStartedAt = Date.now();
-                    timerId = setTimeout(removeToast, ms);
+                    timerId = setTimeout(() => {
+                        if (toastId !== null)
+                            this._toastInstances.delete(toastId);
+                        removeToast();
+                    }, ms);
                     if (progressEl) {
                         progressEl.style.transition = `width ${ms}ms linear`;
                         progressEl.style.width = '0%';
@@ -1045,7 +1127,46 @@ var __rest = (this && this.__rest) || function (s, e) {
                         return;
                     startCountdown(remaining);
                 };
-                closeBtn.addEventListener('click', removeToast);
+                const resetCountdown = (newDuration) => {
+                    if (dismissed)
+                        return;
+                    if (timerId !== null) {
+                        clearTimeout(timerId);
+                        timerId = null;
+                    }
+                    remaining = newDuration;
+                    if (newDuration > 0) {
+                        if (progressEl) {
+                            progressEl.style.transition = 'none';
+                            progressEl.style.width = '100%';
+                            // Forzar reflow para que la transición se aplique desde el inicio
+                            void progressEl.offsetWidth;
+                        }
+                        startCountdown(newDuration);
+                    }
+                    else if (progressEl) {
+                        progressEl.style.transition = 'none';
+                        progressEl.style.width = '100%';
+                    }
+                };
+                if (toastId !== null) {
+                    const silentDismiss = () => {
+                        if (dismissed)
+                            return;
+                        dismissed = true;
+                        if (timerId !== null)
+                            clearTimeout(timerId);
+                        if (toast.contains(document.activeElement)) {
+                            try {
+                                document.activeElement.blur();
+                            }
+                            catch (e) { }
+                        }
+                        if (toast.parentNode)
+                            toast.parentNode.removeChild(toast);
+                    };
+                    this._toastInstances.set(toastId, { reset: resetCountdown, dismiss: removeToast, _silentDismiss: silentDismiss });
+                }
                 requestAnimationFrame(() => {
                     requestAnimationFrame(() => {
                         toast.classList.add('notify-toast-visible');
@@ -1054,7 +1175,7 @@ var __rest = (this && this.__rest) || function (s, e) {
                         }
                     });
                 });
-                if (duration > 0) {
+                if (duration > 0 && closeable) {
                     toast.addEventListener('mouseenter', pauseCountdown);
                     toast.addEventListener('mouseleave', resumeCountdown);
                 }
@@ -1083,6 +1204,38 @@ var __rest = (this && this.__rest) || function (s, e) {
             toastQuestion(message, title, options = {}) {
                 this.showToast(message, Object.assign(Object.assign({}, options), { type: 'question', title: title !== null && title !== void 0 ? title : options.title }));
             }
+            /**
+             * Muestra un toast de carga con spinner.
+             * - No se puede cerrar manualmente (closeable: false por defecto).
+             * - No tiene cuenta regresiva (duration: 0 por defecto).
+             * - Solo puede existir uno a la vez (id '__loading__').
+             * Ciérralo con notify.closeToastLoading().
+             */
+            toastLoading(message = 'Cargando...', title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({ position: 'top-right' }, options), { type: 'loading', title: title !== null && title !== void 0 ? title : options.title, id: '__loading__', closeable: false, duration: 0, showProgress: false }));
+            }
+            /** Cierra el toast de carga activo (si existe). Devuelve una Promise que resuelve cuando la animación de salida termina (≈300 ms). */
+            closeToastLoading() {
+                const entry = this._toastInstances.get('__loading__');
+                if (entry) {
+                    this._toastInstances.delete('__loading__');
+                    return entry.dismiss();
+                }
+                return Promise.resolve();
+            }
+            /**
+             * Reemplaza el toast de carga activo por un toast de resultado en el mismo lugar,
+             * sin animación de salida/entrada — no hay solapamiento ni hueco visual.
+             * Si no existe un toast de carga activo, simplemente muestra un toast normal.
+             */
+            replaceToastLoading(message, options = {}) {
+                const entry = this._toastInstances.get('__loading__');
+                if (entry) {
+                    this._toastInstances.delete('__loading__');
+                    entry._silentDismiss();
+                }
+                this.showToast(message, options);
+            }
         }
         const notifyInstance = new NotificationSystem();
         const w = window;

package/dist/notification-system.min.js

@@ -1 +1 @@
-"use strict";var __rest=this&&this.__rest||function(t,n){var e={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&n.indexOf(o)<0&&(e[o]=t[o]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(t);i<o.length;i++)n.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(t,o[i])&&(e[o[i]]=t[o[i]])}return e};!function(){if("undefined"!=typeof anime)t();else{const n=document.createElement("script");n.src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js",n.onload=t,n.onerror=()=>{console.error("FerNotify: No se pudo cargar anime.js. Por favor, cargalo manualmente.")},document.head.appendChild(n)}function t(){const t=new class{constructor(){this.currentNotification=null,this._lastActiveElement=null,this._currentLoadingPromise=null,this._toastContainers=new Map,this.injectStyles(),this.loadBoxicons()}loadBoxicons(){if(!document.querySelector('link[href*="boxicons"]')){const t=document.createElement("link");t.rel="stylesheet",t.href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css",document.head.appendChild(t)}}injectStyles(){const t=document.createElement("style");t.textContent="\n            .notification-overlay {\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background-color: rgba(0, 0, 0, 0.4);\n                backdrop-filter: blur(4px);\n                -webkit-backdrop-filter: blur(4px);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                z-index: 9999;\n                opacity: 0;\n                overflow: hidden;\n            }\n\n            .notification-box {\n                background: white;\n                border-radius: 16px;\n                padding: 40px 30px;\n                max-width: 500px;\n                width: 90%;\n                max-height: 80vh;\n                overflow: auto;\n                position: relative;\n                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n                text-align: center;\n                transform: scale(0.7);\n                opacity: 0;\n            }\n\n            .notification-content {\n                text-align: left;\n                margin-bottom: 18px;\n            }\n\n            .notification-close {\n                position: absolute;\n                top: 10px;\n                right: 10px;\n                width: 38px;\n                height: 38px;\n                border-radius: 8px;\n                border: none;\n                background: rgba(0,0,0,0.06);\n                color: #111827;\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                font-size: 18px;\n            }\n\n            .notification-close:hover {\n                background: rgba(0,0,0,0.09);\n            }\n\n            /* Form controls inside the modal */\n            .notification-box input,\n            .notification-box textarea,\n            .notification-box select {\n                width: 100%;\n                padding: 10px 12px;\n                border: 1px solid #e5e7eb;\n                border-radius: 8px;\n                background: #ffffff;\n                color: #111827;\n                font-size: 15px;\n                box-sizing: border-box;\n                transition: box-shadow 0.15s ease, border-color 0.15s ease;\n            }\n\n            .notification-box input:focus,\n            .notification-box textarea:focus,\n            .notification-box select:focus {\n                outline: none;\n                border-color: #6366f1;\n                box-shadow: 0 6px 24px rgba(99,102,241,0.12), 0 0 0 4px rgba(99,102,241,0.06);\n            }\n\n            .notification-box label { display: block; margin-bottom: 6px; color: #374151; font-weight: 600; }\n\n            /* Soporte para tema oscuro con clase .dark (Tailwind darkMode: 'class') */\n            /* Esto tiene prioridad sobre prefers-color-scheme para respetar la elección del usuario en la web */\n            .dark .notification-box { background: #0f1724 !important; color: #e6eef8 !important; }\n            .dark .notification-box input,\n            .dark .notification-box textarea,\n            .dark .notification-box select {\n                background: #0b1220 !important;\n                border: 1px solid rgba(255,255,255,0.06) !important;\n                color: #e6eef8 !important;\n            }\n            .dark .notification-box .notification-close { background: rgba(255,255,255,0.03) !important; color: #e6eef8 !important; }\n            .dark .notification-overlay { background-color: rgba(0,0,0,0.6) !important; }\n            .dark .notification-title { color: #e6eef8 !important; }\n            .dark .notification-message { color: #cbd5e1 !important; }\n\n            /* Forzar modo claro cuando NO hay clase .dark, ignorando prefers-color-scheme */\n            html:not(.dark) .notification-box { background: white !important; color: #111827 !important; }\n            html:not(.dark) .notification-box input,\n            html:not(.dark) .notification-box textarea,\n            html:not(.dark) .notification-box select {\n                background: #ffffff !important;\n                border: 1px solid #e5e7eb !important;\n                color: #111827 !important;\n            }\n            html:not(.dark) .notification-box .notification-close { background: rgba(0,0,0,0.06) !important; color: #111827 !important; }\n            html:not(.dark) .notification-overlay { background-color: rgba(0, 0, 0, 0.4) !important; }\n            html:not(.dark) .notification-title { color: #1f2937 !important; }\n            html:not(.dark) .notification-message { color: #6b7280 !important; }\n\n            .notification-icon {\n                width: 80px;\n                height: 80px;\n                border-radius: 50%;\n                margin: 0 auto 25px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 40px;\n                position: relative;\n            }\n\n            .notification-icon::before {\n                content: '';\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                border-radius: 50%;\n                opacity: 0.2;\n            }\n\n            .notification-icon.success {\n                background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n                color: white;\n            }\n\n            .notification-icon.success::before {\n                background: #10b981;\n            }\n\n            .notification-icon.error {\n                background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n                color: white;\n            }\n\n            .notification-icon.error::before {\n                background: #ef4444;\n            }\n\n            .notification-icon.warning {\n                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n                color: white;\n            }\n\n            .notification-icon.warning::before {\n                background: #f59e0b;\n            }\n\n            .notification-icon.info {\n                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n                color: white;\n            }\n\n            .notification-icon.info::before {\n                background: #3b82f6;\n            }\n            .notification-icon.question {\n                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n                color: white;\n            }\n\n            .notification-icon.question::before {\n                background: #3b82f6;\n            }\n\n            .notification-title {\n                font-size: 24px;\n                font-weight: 700;\n                color: #1f2937;\n                margin-bottom: 12px;\n                line-height: 1.3;\n            }\n\n            .notification-message {\n                font-size: 16px;\n                color: #6b7280;\n                line-height: 1.6;\n                margin-bottom: 30px;\n            }\n\n            .notification-button {\n                color: white;\n                border: none;\n                padding: 10px 14px;\n                border-radius: 8px;\n                font-size: 16px;\n                font-weight: 600;\n                cursor: pointer;\n                transition: all 0.3s ease;\n            }\n\n            .notification-button:hover {\n                transform: translateY(-2px);\n                filter: brightness(1.1);\n            }\n\n            .notification-button:active {\n                transform: translateY(0);\n            }\n\n            /* group container for multiple action buttons */\n            .notification-button-group {\n                display: flex;\n                gap: 12px;\n                justify-content: center;\n                flex-wrap: wrap;\n                margin-top: 10px;\n            }\n\n            .notification-icon-checkmark {\n                animation: checkmark-draw 0.6s ease-in-out;\n            }\n\n            .notification-icon-cross {\n                animation: cross-draw 0.5s ease-in-out;\n            }\n\n            @keyframes checkmark-draw {\n                0% {\n                    transform: scale(0) rotate(-45deg);\n                    opacity: 0;\n                }\n                50% {\n                    transform: scale(1.2) rotate(-45deg);\n                }\n                100% {\n                    transform: scale(1) rotate(0deg);\n                    opacity: 1;\n                }\n            }\n\n            @keyframes cross-draw {\n                0% {\n                    transform: scale(0) rotate(-180deg);\n                    opacity: 0;\n                }\n                50% {\n                    transform: scale(1.2) rotate(-90deg);\n                }\n                100% {\n                    transform: scale(1) rotate(0deg);\n                    opacity: 1;\n                }\n            }\n\n            /* Loading spinner styles */\n            .notification-loading-container {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n                margin: 0 auto;\n            }\n\n            .notification-spinner {\n                width: 60px;\n                height: 60px;\n                border: 5px solid rgba(99, 102, 241, 0.15);\n                border-top-color: #6366f1;\n                border-radius: 50%;\n                animation: notification-spin 1s linear infinite;\n                margin: 0 auto;\n            }\n\n            @keyframes notification-spin {\n                to {\n                    transform: rotate(360deg);\n                }\n            }\n\n            .notification-loading-text {\n                font-size: 14px;\n                color: #6b7280;\n                text-align: center;\n                margin-top: 12px;\n            }\n\n            .dark .notification-loading-text {\n                color: #cbd5e1;\n            }\n\n            /* ==================== Toast ==================== */\n            .notify-toast-container {\n                position: fixed;\n                z-index: 10000;\n                display: flex;\n                flex-direction: column;\n                gap: 10px;\n                pointer-events: none;\n                width: 360px;\n                max-width: calc(100vw - 40px);\n            }\n            .notify-toast-top-right  { top: 20px; right: 20px; }\n            .notify-toast-top-left   { top: 20px; left: 20px; }\n            .notify-toast-top-center { top: 20px; left: 50%; transform: translateX(-50%); }\n            .notify-toast-bottom-right { bottom: 20px; right: 20px; flex-direction: column-reverse; }\n            .notify-toast-bottom-left  { bottom: 20px; left: 20px; flex-direction: column-reverse; }\n\n            .notify-toast {\n                background: white;\n                border-radius: 12px;\n                padding: 14px 40px 14px 14px;\n                box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);\n                display: flex;\n                align-items: flex-start;\n                gap: 12px;\n                pointer-events: auto;\n                position: relative;\n                overflow: hidden;\n                opacity: 0;\n                transform: translateX(30px);\n                transition: opacity 0.25s ease, transform 0.25s ease;\n            }\n            .notify-toast-top-left .notify-toast,\n            .notify-toast-bottom-left .notify-toast { transform: translateX(-30px); }\n            .notify-toast-top-center .notify-toast { transform: translateY(-20px); }\n            .notify-toast.notify-toast-visible {\n                opacity: 1;\n                transform: translateX(0) translateY(0) !important;\n            }\n\n            .notify-toast-icon {\n                width: 36px;\n                height: 36px;\n                border-radius: 50%;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 20px;\n                flex-shrink: 0;\n                color: white;\n            }\n            .notify-toast-icon.success  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }\n            .notify-toast-icon.error    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }\n            .notify-toast-icon.warning  { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }\n            .notify-toast-icon.info     { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }\n            .notify-toast-icon.question { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }\n\n            .notify-toast-content { flex: 1; min-width: 0; }\n            .notify-toast-title {\n                font-size: 14px;\n                font-weight: 700;\n                color: #1f2937;\n                margin-bottom: 2px;\n                line-height: 1.3;\n            }\n            .notify-toast-message {\n                font-size: 13px;\n                color: #6b7280;\n                line-height: 1.5;\n            }\n\n            .notify-toast-close {\n                position: absolute;\n                top: 8px;\n                right: 8px;\n                width: 24px;\n                height: 24px;\n                border-radius: 6px;\n                border: none;\n                background: rgba(0,0,0,0.06);\n                color: #6b7280;\n                cursor: pointer;\n                font-size: 16px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                line-height: 1;\n                padding: 0;\n            }\n            .notify-toast-close:hover { background: rgba(0,0,0,0.1); color: #374151; }\n\n            .notify-toast-progress {\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                height: 3px;\n                width: 100%;\n                border-radius: 0 0 0 12px;\n            }\n            .notify-toast-progress.success  { background: #10b981; }\n            .notify-toast-progress.error    { background: #ef4444; }\n            .notify-toast-progress.warning  { background: #f59e0b; }\n            .notify-toast-progress.info     { background: #3b82f6; }\n            .notify-toast-progress.question { background: #8b5cf6; }\n\n            .dark .notify-toast { background: #0f1724; box-shadow: 0 4px 24px rgba(0,0,0,0.35); }\n            .dark .notify-toast-title   { color: #e6eef8; }\n            .dark .notify-toast-message { color: #cbd5e1; }\n            .dark .notify-toast-close   { background: rgba(255,255,255,0.06); color: #94a3b8; }\n            .dark .notify-toast-close:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }\n        ",document.head.appendChild(t)}getIcon(t){const n={success:'<i class="bx bx-check" aria-hidden="true"></i>',error:'<i class="bx bx-x" aria-hidden="true"></i>',warning:'<i class="bx bx-error" aria-hidden="true"></i>',info:'<i class="bx bx-info-circle" aria-hidden="true"></i>',question:'<i class="bx bx-question-mark" aria-hidden="true"></i>'};return n[t]||n.info}getDefaultTitle(t){return{success:"¡Éxito!",error:"Error",warning:"Advertencia",info:"Información",question:"Pregunta"}[t]||"Notificación"}getButtonGradient(t){const n={success:"linear-gradient(135deg, #10b981 0%, #059669 100%)",error:"linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",warning:"linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",info:"linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",question:"linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)"};return n[t]||n.info}getButtonShadow(t){const n={success:"rgba(16, 185, 129, 0)",error:"rgba(239, 68, 68, 0)",warning:"rgba(245, 159, 11, 0)",info:"rgba(59, 131, 246, 0)",question:"rgba(108, 99, 245, 0)"};return n[t]||n.info}show(t={}){if(this.currentNotification){const t=this.currentNotification;this.currentNotification=null;try{t&&t.parentNode&&t.parentNode.removeChild(t)}catch(t){}}const{type:n="info",title:e=this.getDefaultTitle(n),message:o="",buttonText:i="OK",buttonColor:a=null,onClose:r=null,timer:s=null,allowOutsideClick:c=!0,allowEscapeKey:l=!0,hideButton:d=!1,buttons:f=null}=t,u=!0===t.showCloseButton;try{document.body.style.overflow="hidden"}catch(t){}try{document.documentElement.style.overflow="hidden"}catch(t){}const p=document.createElement("div");p.className="notification-overlay",p.tabIndex=-1,p.setAttribute("role","dialog"),p.setAttribute("aria-modal","true"),p.style.pointerEvents="auto";const m=document.createElement("div");m.className="notification-box";const b=document.createElement("div");b.className=`notification-icon ${n}`,d&&"info"===n?(b.className="notification-loading-container",b.innerHTML='<div class="notification-spinner"></div>',b.style.background="transparent",b.style.boxShadow="none",b.style.width="100px",b.style.height="100px"):b.innerHTML=this.getIcon(n);const h=document.createElement("h3");h.className="notification-title",h.textContent=e;const g=document.createElement("p");g.className="notification-message",g.textContent=o;let x=null;if(t.html||t.content)if(x=document.createElement("div"),x.className="notification-content",t.html)try{x.innerHTML=t.html}catch(n){x.textContent=t.html}else t.content&&t.content instanceof HTMLElement&&x.appendChild(t.content);const y=()=>this.close(r);let w=null,v=null;if(!d)if(Array.isArray(f)&&f.length)v=document.createElement("div"),v.className="notification-button-group",f.forEach(t=>{const e=document.createElement("button");e.className="notification-button",e.textContent=t.text||"OK";const o=t.color||this.getButtonGradient(n),i=t.shadowColor||this.getButtonShadow(n);e.style.background=o,e.style.boxShadow=`0 4px 12px ${i}`,e.addEventListener("click",n=>{n.stopPropagation(),n.preventDefault();try{y().then(()=>{if("function"==typeof t.onClick)try{const n=t.onClick();n&&"function"==typeof n.then&&n.catch(t=>console.error(t))}catch(t){console.error(t)}}).catch(()=>{})}catch(t){console.error(t)}}),e.addEventListener("mouseenter",()=>{e.style.boxShadow=`0 6px 16px ${i}`}),e.addEventListener("mouseleave",()=>{e.style.boxShadow=`0 4px 12px ${i}`}),v.appendChild(e)});else if(t.onConfirm||t.onCancel||t.confirmText||t.cancelText){v=document.createElement("div"),v.className="notification-button-group";const e=t.cancelText||"Cancelar",o=t.confirmText||"Aceptar",i=document.createElement("button");i.className="notification-button",i.textContent=e;const a=t.cancelColor||"linear-gradient(135deg, #9ca3af 0%, #6b7280 100%)",r=t.cancelShadow||"rgba(107,114,128,0.25)";i.style.background=a,i.style.boxShadow=`0 4px 12px ${r}`,i.addEventListener("click",n=>{n.stopPropagation(),n.preventDefault(),y().then(()=>{try{if("function"==typeof t.onCancel){const n=t.onCancel();n&&"function"==typeof n.then&&n.catch(t=>console.error(t))}}catch(t){console.error(t)}}).catch(()=>{})}),i.addEventListener("mouseenter",()=>{i.style.boxShadow=`0 6px 16px ${r}`}),i.addEventListener("mouseleave",()=>{i.style.boxShadow=`0 4px 12px ${r}`});const s=document.createElement("button");s.className="notification-button",s.textContent=o;const c=t.confirmColor||this.getButtonGradient(n),l=t.confirmShadow||this.getButtonShadow(n);s.style.background=c,s.style.boxShadow=`0 4px 12px ${l}`,s.addEventListener("click",async n=>{n.stopPropagation(),n.preventDefault();try{if(await y(),"function"==typeof t.onConfirm){const n=t.onConfirm();n&&"function"==typeof n.then&&await n}}catch(t){console.error(t)}}),s.addEventListener("mouseenter",()=>{s.style.boxShadow=`0 6px 16px ${l}`}),s.addEventListener("mouseleave",()=>{s.style.boxShadow=`0 4px 12px ${l}`}),v.appendChild(i),v.appendChild(s)}else if(i){w=document.createElement("button"),w.className="notification-button",w.textContent=i;const t=a||this.getButtonGradient(n),e=this.getButtonShadow(n);w.style.background=t,w.style.boxShadow=`0 4px 12px ${e}`}let k=null;if(u&&(k=document.createElement("button"),k.setAttribute("aria-label","Cerrar"),k.className="notification-close",k.innerHTML="&times;",k.addEventListener("click",t=>{t.stopPropagation(),y()})),m.appendChild(b),x){const t="notify-desc-"+Date.now();x.id=t,p.setAttribute("aria-describedby",t),m.appendChild(x)}else m.appendChild(h),m.appendChild(g);k&&m.appendChild(k),v?m.appendChild(v):w&&m.appendChild(w),p.appendChild(m),document.body.appendChild(p);const E=p,C=new Promise(t=>{try{E._externalResolve=t}catch(t){}});try{const t=document.getElementById("notify-live");t&&(t.textContent=`${e}: ${o}`)}catch(t){}try{this._lastActiveElement=document.activeElement}catch(t){this._lastActiveElement=null}this.currentNotification=p;try{const t=m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])');t&&t.length?t[0].focus():w?w.focus():p.focus()}catch(t){try{p.focus()}catch(t){}}const N=t=>{if("Tab"!==t.key)return;const n=Array.from(m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])')).filter(t=>t instanceof HTMLElement&&null!==t.offsetParent);if(!n.length)return void t.preventDefault();const e=n[0],o=n[n.length-1];t.shiftKey||document.activeElement!==o?t.shiftKey&&document.activeElement===e&&(t.preventDefault(),o.focus()):(t.preventDefault(),e.focus())};E._focusTrap=N,document.addEventListener("keydown",N);const T=t.anim||{},S="number"==typeof T.overlayDuration?T.overlayDuration:150,L=T.overlayEasing||"easeOutQuad",j="number"==typeof T.boxDuration?T.boxDuration:200,O="number"==typeof T.boxDelay?T.boxDelay:50,_=T.boxEasing||"easeOutBack",D="number"==typeof T.boxStartScale?T.boxStartScale:.8,$="number"==typeof T.iconDuration?T.iconDuration:250,A="number"==typeof T.iconDelay?T.iconDelay:100,q="number"==typeof T.iconRotate?T.iconRotate:"success"===n?-90:"error"===n?90:0;if("number"==typeof T.overlayOpacity&&(p.style.backgroundColor=`rgba(0,0,0,${T.overlayOpacity})`),anime({targets:p,opacity:[0,1],duration:S,easing:L}),anime({targets:m,scale:[D,1],opacity:[0,1],duration:j,easing:_,delay:O}),anime({targets:b,scale:[0,1],rotate:[q,0],duration:$,easing:_,delay:A}),w){const t=this.getButtonShadow(n);w.addEventListener("mouseenter",()=>{w.style.boxShadow=`0 6px 16px ${t}`}),w.addEventListener("mouseleave",()=>{w.style.boxShadow=`0 4px 12px ${t}`}),w.addEventListener("click",t=>{t.stopPropagation(),t.preventDefault(),y().catch(()=>{})})}if(c&&p.addEventListener("click",t=>{m.contains(t.target)||y()}),s&&setTimeout(()=>{y()},s),l){const t=n=>{"Escape"===n.key&&(y(),document.removeEventListener("keydown",t))};E._escHandler=t,document.addEventListener("keydown",t)}return C}close(t=null){if(!this.currentNotification)return Promise.resolve();const n=this.currentNotification,e=n,o=n.querySelector(".notification-box");return this.currentNotification=null,anime({targets:o,scale:.8,opacity:0,duration:100,easing:"easeInQuad"}),new Promise(o=>{anime({targets:n,opacity:0,duration:100,easing:"easeInQuad",complete:()=>{try{e&&e._escHandler&&(document.removeEventListener("keydown",e._escHandler),e._escHandler=void 0)}catch(t){}try{e&&e._focusTrap&&(document.removeEventListener("keydown",e._focusTrap),e._focusTrap=void 0)}catch(t){}try{if(e&&"function"==typeof e._externalResolve){try{e._externalResolve()}catch(t){}e._externalResolve=void 0}}catch(t){}try{n&&n.parentNode&&n.parentNode.removeChild(n)}catch(t){try{n.remove()}catch(t){}}if(!this.currentNotification){try{document.body.style.overflow=""}catch(t){}try{document.documentElement.style.overflow=""}catch(t){}}try{this._lastActiveElement&&"function"==typeof this._lastActiveElement.focus&&this._lastActiveElement.focus()}catch(t){}this._lastActiveElement=null,t&&t(),o()}})})}success(t,n=null,e={}){this.show(Object.assign({type:"success",title:n||this.getDefaultTitle("success"),message:t},e))}error(t,n=null,e={}){this.show(Object.assign({type:"error",title:n||this.getDefaultTitle("error"),message:t},e))}warning(t,n=null,e={}){this.show(Object.assign({type:"warning",title:n||this.getDefaultTitle("warning"),message:t},e))}question(t,n=null,e={}){this.show(Object.assign({type:"question",title:n||this.getDefaultTitle("question"),message:t},e))}info(t,n=null,e={}){this.show(Object.assign({type:"info",title:n||this.getDefaultTitle("info"),message:t},e))}loading(t="Cargando...",n="Espera",e={}){const o=Object.assign({type:"info",title:n,message:t,hideButton:!0,allowOutsideClick:!1,allowEscapeKey:!1},e),i=this.show(o);return this._currentLoadingPromise=i,i}closeLoading(t=null){return this._currentLoadingPromise=null,this.close(t)}hide(t=null){return this.close(t)}hiden(t=null){return this.close(t)}_formatTime(t){const n=Math.max(0,Math.floor(t));return`${Math.floor(n/60).toString().padStart(2,"0")}:${(n%60).toString().padStart(2,"0")}`}showToast(t,n={}){var e;const o=n.type||"info",i=null!==(e=n.title)&&void 0!==e?e:null,a="number"==typeof n.duration?n.duration:4e3,r=n.position||"top-right",s=!1!==n.showProgress;let c=this._toastContainers.get(r);c&&document.body.contains(c)||(c=document.createElement("div"),c.className=`notify-toast-container notify-toast-${r}`,document.body.appendChild(c),this._toastContainers.set(r,c));const l=r.startsWith("bottom"),d="top-center"===r,f=document.createElement("div");f.className="notify-toast";const u=document.createElement("div");u.className=`notify-toast-icon ${o}`,u.innerHTML=this.getIcon(o);const p=document.createElement("div");if(p.className="notify-toast-content",i){const t=document.createElement("div");t.className="notify-toast-title",t.textContent=i,p.appendChild(t)}const m=document.createElement("div");m.className="notify-toast-message",m.textContent=t,p.appendChild(m);const b=document.createElement("button");b.className="notify-toast-close",b.setAttribute("aria-label","Cerrar notificación"),b.innerHTML="&times;",f.appendChild(u),f.appendChild(p),f.appendChild(b);let h=null;a>0&&s&&(h=document.createElement("div"),h.className=`notify-toast-progress ${o}`,f.appendChild(h)),l||d?c.appendChild(f):c.insertBefore(f,c.firstChild);let g=!1,x=null,y=a,w=0;const v=()=>{g||(g=!0,f.classList.remove("notify-toast-visible"),setTimeout(()=>{f.parentNode&&f.parentNode.removeChild(f)},300))},k=t=>{w=Date.now(),x=setTimeout(v,t),h&&(h.style.transition=`width ${t}ms linear`,h.style.width="0%")};b.addEventListener("click",v),requestAnimationFrame(()=>{requestAnimationFrame(()=>{f.classList.add("notify-toast-visible"),a>0&&k(a)})}),a>0&&(f.addEventListener("mouseenter",()=>{if(g||null===x)return;clearTimeout(x),x=null;const t=Date.now()-w;if(y=Math.max(0,y-t),h){const t=y/a*100;h.style.transition="none",h.style.width=`${t}%`}}),f.addEventListener("mouseleave",()=>{g||y<=0||k(y)}))}toast(t,n={}){if("string"==typeof t)this.showToast(t,n);else{const{message:n=""}=t,e=__rest(t,["message"]);this.showToast(n,e)}}toastSuccess(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"success",title:null!=n?n:e.title}))}toastError(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"error",title:null!=n?n:e.title}))}toastWarning(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"warning",title:null!=n?n:e.title}))}toastInfo(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"info",title:null!=n?n:e.title}))}toastQuestion(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"question",title:null!=n?n:e.title}))}},n=window;n.notify=t,n.Notification=t}}();
+"use strict";var __rest=this&&this.__rest||function(t,n){var e={};for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&n.indexOf(o)<0&&(e[o]=t[o]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(t);i<o.length;i++)n.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(t,o[i])&&(e[o[i]]=t[o[i]])}return e};!function(){if("undefined"!=typeof anime)t();else{const n=document.createElement("script");n.src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js",n.onload=t,n.onerror=()=>{console.error("FerNotify: No se pudo cargar anime.js. Por favor, cargalo manualmente.")},document.head.appendChild(n)}function t(){const t=new class{constructor(){this.currentNotification=null,this._lastActiveElement=null,this._currentLoadingPromise=null,this._toastContainers=new Map,this._toastInstances=new Map,this.injectStyles(),this.loadBoxicons()}loadBoxicons(){if(!document.querySelector('link[href*="boxicons"]')){const t=document.createElement("link");t.rel="stylesheet",t.href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css",document.head.appendChild(t)}}injectStyles(){const t=document.createElement("style");t.textContent="\n            .notification-overlay {\n                position: fixed;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background-color: rgba(0, 0, 0, 0.4);\n                backdrop-filter: blur(4px);\n                -webkit-backdrop-filter: blur(4px);\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                z-index: 9999;\n                opacity: 0;\n                overflow: hidden;\n            }\n\n            .notification-box {\n                background: white;\n                border-radius: 16px;\n                padding: 40px 30px;\n                max-width: 500px;\n                width: 90%;\n                max-height: 80vh;\n                overflow: auto;\n                position: relative;\n                box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n                text-align: center;\n                transform: scale(0.7);\n                opacity: 0;\n            }\n\n            .notification-content {\n                text-align: left;\n                margin-bottom: 18px;\n            }\n\n            .notification-close {\n                position: absolute;\n                top: 10px;\n                right: 10px;\n                width: 38px;\n                height: 38px;\n                border-radius: 8px;\n                border: none;\n                background: rgba(0,0,0,0.06);\n                color: #111827;\n                display: inline-flex;\n                align-items: center;\n                justify-content: center;\n                cursor: pointer;\n                font-size: 18px;\n            }\n\n            .notification-close:hover {\n                background: rgba(0,0,0,0.09);\n            }\n\n            /* Form controls inside the modal */\n            .notification-box input,\n            .notification-box textarea,\n            .notification-box select {\n                width: 100%;\n                padding: 10px 12px;\n                border: 1px solid #e5e7eb;\n                border-radius: 8px;\n                background: #ffffff;\n                color: #111827;\n                font-size: 15px;\n                box-sizing: border-box;\n                transition: box-shadow 0.15s ease, border-color 0.15s ease;\n            }\n\n            .notification-box input:focus,\n            .notification-box textarea:focus,\n            .notification-box select:focus {\n                outline: none;\n                border-color: #6366f1;\n                box-shadow: 0 6px 24px rgba(99,102,241,0.12), 0 0 0 4px rgba(99,102,241,0.06);\n            }\n\n            .notification-box label { display: block; margin-bottom: 6px; color: #374151; font-weight: 600; }\n\n            /* Soporte para tema oscuro con clase .dark (Tailwind darkMode: 'class') */\n            /* Esto tiene prioridad sobre prefers-color-scheme para respetar la elección del usuario en la web */\n            .dark .notification-box { background: #0f1724 !important; color: #e6eef8 !important; }\n            .dark .notification-box input,\n            .dark .notification-box textarea,\n            .dark .notification-box select {\n                background: #0b1220 !important;\n                border: 1px solid rgba(255,255,255,0.06) !important;\n                color: #e6eef8 !important;\n            }\n            .dark .notification-box .notification-close { background: rgba(255,255,255,0.03) !important; color: #e6eef8 !important; }\n            .dark .notification-overlay { background-color: rgba(0,0,0,0.6) !important; }\n            .dark .notification-title { color: #e6eef8 !important; }\n            .dark .notification-message { color: #cbd5e1 !important; }\n\n            /* Forzar modo claro cuando NO hay clase .dark, ignorando prefers-color-scheme */\n            html:not(.dark) .notification-box { background: white !important; color: #111827 !important; }\n            html:not(.dark) .notification-box input,\n            html:not(.dark) .notification-box textarea,\n            html:not(.dark) .notification-box select {\n                background: #ffffff !important;\n                border: 1px solid #e5e7eb !important;\n                color: #111827 !important;\n            }\n            html:not(.dark) .notification-box .notification-close { background: rgba(0,0,0,0.06) !important; color: #111827 !important; }\n            html:not(.dark) .notification-overlay { background-color: rgba(0, 0, 0, 0.4) !important; }\n            html:not(.dark) .notification-title { color: #1f2937 !important; }\n            html:not(.dark) .notification-message { color: #6b7280 !important; }\n\n            .notification-icon {\n                width: 80px;\n                height: 80px;\n                border-radius: 50%;\n                margin: 0 auto 25px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 40px;\n                position: relative;\n            }\n\n            .notification-icon::before {\n                content: '';\n                position: absolute;\n                width: 100%;\n                height: 100%;\n                border-radius: 50%;\n                opacity: 0.2;\n            }\n\n            .notification-icon.success {\n                background: linear-gradient(135deg, #10b981 0%, #059669 100%);\n                color: white;\n            }\n\n            .notification-icon.success::before {\n                background: #10b981;\n            }\n\n            .notification-icon.error {\n                background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n                color: white;\n            }\n\n            .notification-icon.error::before {\n                background: #ef4444;\n            }\n\n            .notification-icon.warning {\n                background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n                color: white;\n            }\n\n            .notification-icon.warning::before {\n                background: #f59e0b;\n            }\n\n            .notification-icon.info {\n                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n                color: white;\n            }\n\n            .notification-icon.info::before {\n                background: #3b82f6;\n            }\n            .notification-icon.question {\n                background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);\n                color: white;\n            }\n\n            .notification-icon.question::before {\n                background: #3b82f6;\n            }\n\n            .notification-title {\n                font-size: 24px;\n                font-weight: 700;\n                color: #1f2937;\n                margin-bottom: 12px;\n                line-height: 1.3;\n            }\n\n            .notification-message {\n                font-size: 16px;\n                color: #6b7280;\n                line-height: 1.6;\n                margin-bottom: 30px;\n            }\n\n            .notification-button {\n                color: white;\n                border: none;\n                padding: 10px 14px;\n                border-radius: 8px;\n                font-size: 16px;\n                font-weight: 600;\n                cursor: pointer;\n                transition: all 0.3s ease;\n            }\n\n            .notification-button:hover {\n                transform: translateY(-2px);\n                filter: brightness(1.1);\n            }\n\n            .notification-button:active {\n                transform: translateY(0);\n            }\n\n            /* group container for multiple action buttons */\n            .notification-button-group {\n                display: flex;\n                gap: 12px;\n                justify-content: center;\n                flex-wrap: wrap;\n                margin-top: 10px;\n            }\n\n            .notification-icon-checkmark {\n                animation: checkmark-draw 0.6s ease-in-out;\n            }\n\n            .notification-icon-cross {\n                animation: cross-draw 0.5s ease-in-out;\n            }\n\n            @keyframes checkmark-draw {\n                0% {\n                    transform: scale(0) rotate(-45deg);\n                    opacity: 0;\n                }\n                50% {\n                    transform: scale(1.2) rotate(-45deg);\n                }\n                100% {\n                    transform: scale(1) rotate(0deg);\n                    opacity: 1;\n                }\n            }\n\n            @keyframes cross-draw {\n                0% {\n                    transform: scale(0) rotate(-180deg);\n                    opacity: 0;\n                }\n                50% {\n                    transform: scale(1.2) rotate(-90deg);\n                }\n                100% {\n                    transform: scale(1) rotate(0deg);\n                    opacity: 1;\n                }\n            }\n\n            /* Loading spinner styles */\n            .notification-loading-container {\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                justify-content: center;\n                margin: 0 auto;\n            }\n\n            .notification-spinner {\n                width: 60px;\n                height: 60px;\n                border: 5px solid rgba(99, 102, 241, 0.15);\n                border-top-color: #6366f1;\n                border-radius: 50%;\n                animation: notification-spin 1s linear infinite;\n                margin: 0 auto;\n            }\n\n            @keyframes notification-spin {\n                to {\n                    transform: rotate(360deg);\n                }\n            }\n\n            .notification-loading-text {\n                font-size: 14px;\n                color: #6b7280;\n                text-align: center;\n                margin-top: 12px;\n            }\n\n            .dark .notification-loading-text {\n                color: #cbd5e1;\n            }\n\n            /* ==================== Toast ==================== */\n            .notify-toast-container {\n                position: fixed;\n                z-index: 10000;\n                display: flex;\n                flex-direction: column;\n                gap: 10px;\n                pointer-events: none;\n                width: 360px;\n                max-width: calc(100vw - 40px);\n            }\n            .notify-toast-top-right  { top: 20px; right: 20px; }\n            .notify-toast-top-left   { top: 20px; left: 20px; }\n            .notify-toast-top-center { top: 20px; left: 50%; transform: translateX(-50%); }\n            .notify-toast-bottom-right { bottom: 20px; right: 20px; flex-direction: column-reverse; }\n            .notify-toast-bottom-left  { bottom: 20px; left: 20px; flex-direction: column-reverse; }\n\n            .notify-toast {\n                background: white;\n                border-radius: 12px;\n                padding: 14px 40px 14px 14px;\n                box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);\n                display: flex;\n                align-items: flex-start;\n                gap: 12px;\n                pointer-events: auto;\n                position: relative;\n                overflow: hidden;\n                opacity: 0;\n                transform: translateX(30px);\n                transition: opacity 0.25s ease, transform 0.25s ease;\n            }\n            .notify-toast-top-left .notify-toast,\n            .notify-toast-bottom-left .notify-toast { transform: translateX(-30px); }\n            .notify-toast-top-center .notify-toast { transform: translateY(-20px); }\n            .notify-toast.notify-toast-visible {\n                opacity: 1;\n                transform: translateX(0) translateY(0) !important;\n            }\n\n            .notify-toast-icon {\n                width: 36px;\n                height: 36px;\n                border-radius: 50%;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                font-size: 20px;\n                flex-shrink: 0;\n                color: white;\n            }\n            .notify-toast-icon.success  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }\n            .notify-toast-icon.error    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }\n            .notify-toast-icon.warning  { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }\n            .notify-toast-icon.info     { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }\n            .notify-toast-icon.question { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); }\n            .notify-toast-icon.loading  { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }\n\n            .notify-toast-content { flex: 1; min-width: 0; }\n            .notify-toast-title {\n                font-size: 14px;\n                font-weight: 700;\n                color: #1f2937;\n                margin-bottom: 2px;\n                line-height: 1.3;\n                cursor: default;\n            }\n            .notify-toast-message {\n                font-size: 13px;\n                color: #6b7280;\n                line-height: 1.5;\n                cursor: default;\n            }\n\n            .notify-toast-close {\n                position: absolute;\n                top: 8px;\n                right: 8px;\n                width: 24px;\n                height: 24px;\n                border-radius: 6px;\n                border: none;\n                background: rgba(0,0,0,0.06);\n                color: #6b7280;\n                cursor: pointer;\n                font-size: 16px;\n                display: flex;\n                align-items: center;\n                justify-content: center;\n                line-height: 1;\n                padding: 0;\n            }\n            .notify-toast-close:hover { background: rgba(0,0,0,0.1); color: #374151; }\n\n            /* Sin botón de cierre: reducir padding derecho */\n            .notify-toast.notify-toast-no-close { padding-right: 14px; }\n\n            .notify-toast-progress {\n                position: absolute;\n                bottom: 0;\n                left: 0;\n                height: 3px;\n                width: 100%;\n                border-radius: 0 0 0 12px;\n            }\n            .notify-toast-progress.success  { background: #10b981; }\n            .notify-toast-progress.error    { background: #ef4444; }\n            .notify-toast-progress.warning  { background: #f59e0b; }\n            .notify-toast-progress.info     { background: #3b82f6; }\n            .notify-toast-progress.question { background: #8b5cf6; }\n            .notify-toast-progress.loading  { background: #6366f1; }\n\n            /* Spinner para toast de carga */\n            .notify-toast-spinner {\n                width: 18px;\n                height: 18px;\n                border: 2.5px solid rgba(255,255,255,0.35);\n                border-top-color: white;\n                border-radius: 50%;\n                animation: notification-spin 0.8s linear infinite;\n                flex-shrink: 0;\n            }\n\n            .dark .notify-toast { background: #0f1724; box-shadow: 0 4px 24px rgba(0,0,0,0.35); }\n            .dark .notify-toast-title   { color: #e6eef8; }\n            .dark .notify-toast-message { color: #cbd5e1; }\n            .dark .notify-toast-close   { background: rgba(255,255,255,0.06); color: #94a3b8; }\n            .dark .notify-toast-close:hover { background: rgba(255,255,255,0.1); color: #e2e8f0; }\n\n            /* Respeta la preferencia de movimiento reducido del sistema */\n            @media (prefers-reduced-motion: reduce) {\n                .notify-toast {\n                    transition: opacity 0.1s ease !important;\n                    transform: none !important;\n                }\n                .notify-toast.notify-toast-visible {\n                    transform: none !important;\n                }\n                .notify-toast-spinner {\n                    animation-duration: 1.5s !important;\n                }\n                .notify-toast-progress {\n                    transition: none !important;\n                }\n            }\n        ",document.head.appendChild(t)}getIcon(t){const n={success:'<i class="bx bx-check" aria-hidden="true"></i>',error:'<i class="bx bx-x" aria-hidden="true"></i>',warning:'<i class="bx bx-error" aria-hidden="true"></i>',info:'<i class="bx bx-info-circle" aria-hidden="true"></i>',question:'<i class="bx bx-question-mark" aria-hidden="true"></i>',loading:'<div class="notify-toast-spinner" aria-hidden="true"></div>'};return n[t]||n.info}getDefaultTitle(t){return{success:"¡Éxito!",error:"Error",warning:"Advertencia",info:"Información",question:"Pregunta"}[t]||"Notificación"}getButtonGradient(t){const n={success:"linear-gradient(135deg, #10b981 0%, #059669 100%)",error:"linear-gradient(135deg, #ef4444 0%, #dc2626 100%)",warning:"linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",info:"linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",question:"linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%)"};return n[t]||n.info}getButtonShadow(t){const n={success:"rgba(16, 185, 129, 0)",error:"rgba(239, 68, 68, 0)",warning:"rgba(245, 159, 11, 0)",info:"rgba(59, 131, 246, 0)",question:"rgba(108, 99, 245, 0)"};return n[t]||n.info}show(t={}){if(this.currentNotification){const t=this.currentNotification;this.currentNotification=null;try{t&&t.parentNode&&t.parentNode.removeChild(t)}catch(t){}}const{type:n="info",title:e=this.getDefaultTitle(n),message:o="",buttonText:i="OK",buttonColor:a=null,onClose:r=null,timer:s=null,allowOutsideClick:c=!0,allowEscapeKey:l=!0,hideButton:d=!1,buttons:f=null}=t,u=!0===t.showCloseButton;try{document.body.style.overflow="hidden"}catch(t){}try{document.documentElement.style.overflow="hidden"}catch(t){}const p=document.createElement("div");p.className="notification-overlay",p.tabIndex=-1,p.setAttribute("role","dialog"),p.setAttribute("aria-modal","true"),p.style.pointerEvents="auto";const m=document.createElement("div");m.className="notification-box";const b=document.createElement("div");b.className=`notification-icon ${n}`,d&&"info"===n?(b.className="notification-loading-container",b.innerHTML='<div class="notification-spinner"></div>',b.style.background="transparent",b.style.boxShadow="none",b.style.width="100px",b.style.height="100px"):b.innerHTML=this.getIcon(n);const g=document.createElement("h3");g.className="notification-title",g.textContent=e;const h=document.createElement("p");h.className="notification-message",h.textContent=o;let x=null;if(t.html||t.content)if(x=document.createElement("div"),x.className="notification-content",t.html)try{x.innerHTML=t.html}catch(n){x.textContent=t.html}else t.content&&t.content instanceof HTMLElement&&x.appendChild(t.content);const y=()=>this.close(r);let w=null,v=null;if(!d)if(Array.isArray(f)&&f.length)v=document.createElement("div"),v.className="notification-button-group",f.forEach(t=>{const e=document.createElement("button");e.className="notification-button",e.textContent=t.text||"OK";const o=t.color||this.getButtonGradient(n),i=t.shadowColor||this.getButtonShadow(n);e.style.background=o,e.style.boxShadow=`0 4px 12px ${i}`,e.addEventListener("click",n=>{n.stopPropagation(),n.preventDefault();try{y().then(()=>{if("function"==typeof t.onClick)try{const n=t.onClick();n&&"function"==typeof n.then&&n.catch(t=>console.error(t))}catch(t){console.error(t)}}).catch(()=>{})}catch(t){console.error(t)}}),e.addEventListener("mouseenter",()=>{e.style.boxShadow=`0 6px 16px ${i}`}),e.addEventListener("mouseleave",()=>{e.style.boxShadow=`0 4px 12px ${i}`}),v.appendChild(e)});else if(t.onConfirm||t.onCancel||t.confirmText||t.cancelText){v=document.createElement("div"),v.className="notification-button-group";const e=t.cancelText||"Cancelar",o=t.confirmText||"Aceptar",i=document.createElement("button");i.className="notification-button",i.textContent=e;const a=t.cancelColor||"linear-gradient(135deg, #9ca3af 0%, #6b7280 100%)",r=t.cancelShadow||"rgba(107,114,128,0.25)";i.style.background=a,i.style.boxShadow=`0 4px 12px ${r}`,i.addEventListener("click",n=>{n.stopPropagation(),n.preventDefault(),y().then(()=>{try{if("function"==typeof t.onCancel){const n=t.onCancel();n&&"function"==typeof n.then&&n.catch(t=>console.error(t))}}catch(t){console.error(t)}}).catch(()=>{})}),i.addEventListener("mouseenter",()=>{i.style.boxShadow=`0 6px 16px ${r}`}),i.addEventListener("mouseleave",()=>{i.style.boxShadow=`0 4px 12px ${r}`});const s=document.createElement("button");s.className="notification-button",s.textContent=o;const c=t.confirmColor||this.getButtonGradient(n),l=t.confirmShadow||this.getButtonShadow(n);s.style.background=c,s.style.boxShadow=`0 4px 12px ${l}`,s.addEventListener("click",async n=>{n.stopPropagation(),n.preventDefault();try{if(await y(),"function"==typeof t.onConfirm){const n=t.onConfirm();n&&"function"==typeof n.then&&await n}}catch(t){console.error(t)}}),s.addEventListener("mouseenter",()=>{s.style.boxShadow=`0 6px 16px ${l}`}),s.addEventListener("mouseleave",()=>{s.style.boxShadow=`0 4px 12px ${l}`}),v.appendChild(i),v.appendChild(s)}else if(i){w=document.createElement("button"),w.className="notification-button",w.textContent=i;const t=a||this.getButtonGradient(n),e=this.getButtonShadow(n);w.style.background=t,w.style.boxShadow=`0 4px 12px ${e}`}let k=null;if(u&&(k=document.createElement("button"),k.setAttribute("aria-label","Cerrar"),k.className="notification-close",k.innerHTML="&times;",k.addEventListener("click",t=>{t.stopPropagation(),y()})),m.appendChild(b),x){const t="notify-desc-"+Date.now();x.id=t,p.setAttribute("aria-describedby",t),m.appendChild(x)}else m.appendChild(g),m.appendChild(h);k&&m.appendChild(k),v?m.appendChild(v):w&&m.appendChild(w),p.appendChild(m),document.body.appendChild(p);const E=p,C=new Promise(t=>{try{E._externalResolve=t}catch(t){}});try{const t=document.getElementById("notify-live");t&&(t.textContent=`${e}: ${o}`)}catch(t){}try{this._lastActiveElement=document.activeElement}catch(t){this._lastActiveElement=null}this.currentNotification=p;try{const t=m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])');t&&t.length?t[0].focus():w?w.focus():p.focus()}catch(t){try{p.focus()}catch(t){}}const _=t=>{if("Tab"!==t.key)return;const n=Array.from(m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])')).filter(t=>t instanceof HTMLElement&&null!==t.offsetParent);if(!n.length)return void t.preventDefault();const e=n[0],o=n[n.length-1];t.shiftKey||document.activeElement!==o?t.shiftKey&&document.activeElement===e&&(t.preventDefault(),o.focus()):(t.preventDefault(),e.focus())};E._focusTrap=_,document.addEventListener("keydown",_);const T=t.anim||{},N="number"==typeof T.overlayDuration?T.overlayDuration:150,L=T.overlayEasing||"easeOutQuad",S="number"==typeof T.boxDuration?T.boxDuration:200,j="number"==typeof T.boxDelay?T.boxDelay:50,O=T.boxEasing||"easeOutBack",D="number"==typeof T.boxStartScale?T.boxStartScale:.8,A="number"==typeof T.iconDuration?T.iconDuration:250,$="number"==typeof T.iconDelay?T.iconDelay:100,P="number"==typeof T.iconRotate?T.iconRotate:"success"===n?-90:"error"===n?90:0;if("number"==typeof T.overlayOpacity&&(p.style.backgroundColor=`rgba(0,0,0,${T.overlayOpacity})`),anime({targets:p,opacity:[0,1],duration:N,easing:L}),anime({targets:m,scale:[D,1],opacity:[0,1],duration:S,easing:O,delay:j}),anime({targets:b,scale:[0,1],rotate:[P,0],duration:A,easing:O,delay:$}),w){const t=this.getButtonShadow(n);w.addEventListener("mouseenter",()=>{w.style.boxShadow=`0 6px 16px ${t}`}),w.addEventListener("mouseleave",()=>{w.style.boxShadow=`0 4px 12px ${t}`}),w.addEventListener("click",t=>{t.stopPropagation(),t.preventDefault(),y().catch(()=>{})})}if(c&&p.addEventListener("click",t=>{m.contains(t.target)||y()}),s&&setTimeout(()=>{y()},s),l){const t=n=>{"Escape"===n.key&&(y(),document.removeEventListener("keydown",t))};E._escHandler=t,document.addEventListener("keydown",t)}return C}close(t=null){if(!this.currentNotification)return Promise.resolve();const n=this.currentNotification,e=n,o=n.querySelector(".notification-box");return this.currentNotification=null,anime({targets:o,scale:.8,opacity:0,duration:100,easing:"easeInQuad"}),new Promise(o=>{anime({targets:n,opacity:0,duration:100,easing:"easeInQuad",complete:()=>{try{e&&e._escHandler&&(document.removeEventListener("keydown",e._escHandler),e._escHandler=void 0)}catch(t){}try{e&&e._focusTrap&&(document.removeEventListener("keydown",e._focusTrap),e._focusTrap=void 0)}catch(t){}try{if(e&&"function"==typeof e._externalResolve){try{e._externalResolve()}catch(t){}e._externalResolve=void 0}}catch(t){}try{n&&n.parentNode&&n.parentNode.removeChild(n)}catch(t){try{n.remove()}catch(t){}}if(!this.currentNotification){try{document.body.style.overflow=""}catch(t){}try{document.documentElement.style.overflow=""}catch(t){}}try{this._lastActiveElement&&"function"==typeof this._lastActiveElement.focus&&this._lastActiveElement.focus()}catch(t){}this._lastActiveElement=null,t&&t(),o()}})})}success(t,n=null,e={}){this.show(Object.assign({type:"success",title:n||this.getDefaultTitle("success"),message:t},e))}error(t,n=null,e={}){this.show(Object.assign({type:"error",title:n||this.getDefaultTitle("error"),message:t},e))}warning(t,n=null,e={}){this.show(Object.assign({type:"warning",title:n||this.getDefaultTitle("warning"),message:t},e))}question(t,n=null,e={}){this.show(Object.assign({type:"question",title:n||this.getDefaultTitle("question"),message:t},e))}info(t,n=null,e={}){this.show(Object.assign({type:"info",title:n||this.getDefaultTitle("info"),message:t},e))}loading(t="Cargando...",n="Espera",e={}){const o=Object.assign({type:"info",title:n,message:t,hideButton:!0,allowOutsideClick:!1,allowEscapeKey:!1},e),i=this.show(o);return this._currentLoadingPromise=i,i}closeLoading(t=null){return this._currentLoadingPromise=null,this.close(t)}hide(t=null){return this.close(t)}hiden(t=null){return this.close(t)}_formatTime(t){const n=Math.max(0,Math.floor(t));return`${Math.floor(n/60).toString().padStart(2,"0")}:${(n%60).toString().padStart(2,"0")}`}showToast(t,n={}){var e,o;const i=n.type||"info",a=null!==(e=n.title)&&void 0!==e?e:null,r="number"==typeof n.duration?n.duration:4e3,s=n.position||"top-right",c=!1!==n.showProgress,l=null!==(o=n.id)&&void 0!==o?o:null,d=!1!==n.closeable;if(null!==l){const t=this._toastInstances.get(l);if(t)return void t.reset(r)}let f=this._toastContainers.get(s);f&&document.body.contains(f)||(f=document.createElement("div"),f.className=`notify-toast-container notify-toast-${s}`,f.setAttribute("aria-label","Notificaciones"),document.body.appendChild(f),this._toastContainers.set(s,f));const u=s.startsWith("bottom"),p="top-center"===s,m=document.createElement("div");m.className="notify-toast",d||m.classList.add("notify-toast-no-close"),"error"===i||"warning"===i?m.setAttribute("role","alert"):m.setAttribute("role","status"),m.setAttribute("aria-atomic","true"),m.setAttribute("aria-live","error"===i||"warning"===i?"assertive":"polite");const b=document.createElement("div");b.className=`notify-toast-icon ${i}`,b.innerHTML=this.getIcon(i);const g=document.createElement("div");if(g.className="notify-toast-content",a){const t=document.createElement("div");t.className="notify-toast-title",t.textContent=a,g.appendChild(t)}const h=document.createElement("div");if(h.className="notify-toast-message",h.textContent=t,g.appendChild(h),m.appendChild(b),m.appendChild(g),d){const t=document.createElement("button");t.className="notify-toast-close",t.setAttribute("aria-label","Cerrar notificación"),t.innerHTML="&times;",t.addEventListener("click",E),m.appendChild(t)}let x=null;r>0&&c&&(x=document.createElement("div"),x.className=`notify-toast-progress ${i}`,x.setAttribute("role","progressbar"),x.setAttribute("aria-hidden","true"),m.appendChild(x)),u||p?f.appendChild(m):f.insertBefore(m,f.firstChild);let y=!1,w=null,v=r,k=0;function E(){if(y)return Promise.resolve();if(y=!0,m.contains(document.activeElement))try{document.activeElement.blur()}catch(t){}return m.classList.remove("notify-toast-visible"),new Promise(t=>{setTimeout(()=>{m.parentNode&&m.parentNode.removeChild(m),t()},300)})}const C=t=>{k=Date.now(),w=setTimeout(()=>{null!==l&&this._toastInstances.delete(l),E()},t),x&&(x.style.transition=`width ${t}ms linear`,x.style.width="0%")},_=t=>{y||(null!==w&&(clearTimeout(w),w=null),v=t,t>0?(x&&(x.style.transition="none",x.style.width="100%",x.offsetWidth),C(t)):x&&(x.style.transition="none",x.style.width="100%"))};if(null!==l){const t=()=>{if(!y){if(y=!0,null!==w&&clearTimeout(w),m.contains(document.activeElement))try{document.activeElement.blur()}catch(t){}m.parentNode&&m.parentNode.removeChild(m)}};this._toastInstances.set(l,{reset:_,dismiss:E,_silentDismiss:t})}requestAnimationFrame(()=>{requestAnimationFrame(()=>{m.classList.add("notify-toast-visible"),r>0&&C(r)})}),r>0&&d&&(m.addEventListener("mouseenter",()=>{if(y||null===w)return;clearTimeout(w),w=null;const t=Date.now()-k;if(v=Math.max(0,v-t),x){const t=v/r*100;x.style.transition="none",x.style.width=`${t}%`}}),m.addEventListener("mouseleave",()=>{y||v<=0||C(v)}))}toast(t,n={}){if("string"==typeof t)this.showToast(t,n);else{const{message:n=""}=t,e=__rest(t,["message"]);this.showToast(n,e)}}toastSuccess(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"success",title:null!=n?n:e.title}))}toastError(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"error",title:null!=n?n:e.title}))}toastWarning(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"warning",title:null!=n?n:e.title}))}toastInfo(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"info",title:null!=n?n:e.title}))}toastQuestion(t,n,e={}){this.showToast(t,Object.assign(Object.assign({},e),{type:"question",title:null!=n?n:e.title}))}toastLoading(t="Cargando...",n,e={}){this.showToast(t,Object.assign(Object.assign({position:"top-right"},e),{type:"loading",title:null!=n?n:e.title,id:"__loading__",closeable:!1,duration:0,showProgress:!1}))}closeToastLoading(){const t=this._toastInstances.get("__loading__");return t?(this._toastInstances.delete("__loading__"),t.dismiss()):Promise.resolve()}replaceToastLoading(t,n={}){const e=this._toastInstances.get("__loading__");e&&(this._toastInstances.delete("__loading__"),e._silentDismiss()),this.showToast(t,n)}},n=window;n.notify=t,n.Notification=t}}();

package/package.json

@@ -1,17 +1,20 @@
 {
     "name": "fernotify",
-    "version": "1.2.9",
+    "version": "1.2.11",
     "description": "Sistema moderno de notificaciones con animaciones fluidas y soporte completo de Dark Mode",
     "main": "dist/notification-system.js",
     "module": "dist/notification-system.esm.js",
+    "types": "types/index.d.ts",
     "exports": {
         ".": {
+            "types": "./types/index.d.ts",
             "import": "./dist/notification-system.esm.js",
             "require": "./dist/notification-system.js"
         }
     },
     "files": [
         "dist/",
+        "types/",
         "LICENSE",
         "README.md",
         "NOTIFICATION_SYSTEM_GUIDE.md"

package/types/anime.d.ts

@@ -0,0 +1,17 @@
+// Tipos mínimos para anime.js 3.x cargado por CDN
+// Solo cubre las propiedades usadas en notification-system.ts
+
+type AnimeValue = number | number[];
+
+interface AnimeParams {
+    targets: unknown;
+    duration?: number;
+    delay?: number;
+    easing?: string;
+    opacity?: AnimeValue;
+    scale?: AnimeValue;
+    rotate?: AnimeValue;
+    complete?: () => void;
+}
+
+declare function anime(params: AnimeParams): void;

package/types/index.d.ts

@@ -0,0 +1,173 @@
+// Type definitions for fernotify
+// Generated from notification-system.ts
+
+export interface ButtonOptions {
+    text?: string;
+    color?: string;
+    shadowColor?: string;
+    onClick?: (() => void) | (() => Promise<unknown>);
+}
+
+export interface AnimationOptions {
+    overlayDuration?: number;
+    overlayEasing?: string;
+    boxDuration?: number;
+    boxDelay?: number;
+    boxEasing?: string;
+    boxStartScale?: number;
+    iconDuration?: number;
+    iconDelay?: number;
+    iconRotate?: number;
+    overlayOpacity?: number;
+}
+
+export interface NotificationOptions {
+    type?: 'success' | 'error' | 'warning' | 'info' | 'question' | string;
+    title?: string;
+    message?: string;
+    html?: string;
+    content?: HTMLElement;
+    buttonText?: string;
+    buttonColor?: string | null;
+    onClose?: (() => void) | null;
+    timer?: number | null;
+    allowOutsideClick?: boolean;
+    allowEscapeKey?: boolean;
+    hideButton?: boolean;
+    buttons?: ButtonOptions[] | null;
+    onConfirm?: (() => void) | (() => Promise<unknown>) | null;
+    onCancel?: (() => void) | (() => Promise<unknown>) | null;
+    confirmText?: string;
+    cancelText?: string;
+    confirmColor?: string;
+    confirmShadow?: string;
+    cancelColor?: string;
+    cancelShadow?: string;
+    anim?: AnimationOptions;
+    showCloseButton?: boolean;
+}
+
+export type ToastPosition =
+    | 'top-right'
+    | 'top-left'
+    | 'top-center'
+    | 'bottom-right'
+    | 'bottom-left';
+
+export interface ToastOptions {
+    type?: 'success' | 'error' | 'warning' | 'info' | 'question' | string;
+    title?: string;
+    message?: string;
+    duration?: number;
+    position?: ToastPosition;
+    showProgress?: boolean;
+    /**
+     * Unique ID for deduplication: if a toast with this ID is already visible,
+     * its countdown is reset instead of creating a duplicate.
+     */
+    id?: string;
+    /**
+     * When `false`, the close (×) button is hidden.
+     * `toastLoading()` sets this to `false` automatically.
+     * @default true
+     */
+    closeable?: boolean;
+}
+
+export declare class NotificationSystem {
+    constructor();
+
+    // ── Modal notifications ──────────────────────────────────────────────────
+
+    /** Shows a modal notification. Returns a Promise that resolves when the modal is closed. */
+    show(options?: NotificationOptions): Promise<void>;
+
+    /** Closes the current modal. */
+    close(callback?: (() => void) | null): Promise<void>;
+
+    /** Alias for close(). */
+    hide(callback?: (() => void) | null): Promise<void>;
+
+    success(message: string, title?: string | null, options?: NotificationOptions): void;
+    error(message: string, title?: string | null, options?: NotificationOptions): void;
+    warning(message: string, title?: string | null, options?: NotificationOptions): void;
+    info(message: string, title?: string | null, options?: NotificationOptions): void;
+    question(message: string, title?: string | null, options?: NotificationOptions): void;
+
+    /** Shows a loading modal (no close button, blocks outside click / Escape). */
+    loading(message?: string, title?: string, options?: NotificationOptions): Promise<void>;
+
+    /** Closes the loading modal. */
+    closeLoading(callback?: (() => void) | null): Promise<void>;
+
+    // ── Toast notifications ──────────────────────────────────────────────────
+
+    /** Generic toast. Accepts a message string + options, or a single options object. */
+    toast(messageOrOptions: string | ToastOptions, options?: ToastOptions): void;
+
+    toastSuccess(message: string, title?: string, options?: ToastOptions): void;
+    toastError(message: string, title?: string, options?: ToastOptions): void;
+    toastWarning(message: string, title?: string, options?: ToastOptions): void;
+    toastInfo(message: string, title?: string, options?: ToastOptions): void;
+    toastQuestion(message: string, title?: string, options?: ToastOptions): void;
+
+    /**
+     * Shows a loading toast with a spinner.
+     * Only one loading toast can exist at a time (uses internal id `'__loading__'`).
+     * Close it with `closeToastLoading()`.
+     */
+    toastLoading(message?: string, title?: string, options?: ToastOptions): void;
+
+    /**
+     * Closes the active loading toast and returns a Promise that resolves
+     * after the exit animation finishes (~300 ms).
+     *
+     * @example
+     * notify.toastLoading('Saving…');
+     * await doWork();
+     * await notify.closeToastLoading();   // wait for exit animation
+     * notify.toastSuccess('Done!');
+     */
+    closeToastLoading(): Promise<void>;
+
+    /**
+     * Instantly replaces the loading toast with a new toast (no animation gap).
+     * If no loading toast is active, behaves like a normal `toast()` call.
+     *
+     * @example
+     * notify.toastLoading('Saving…');
+     * await doWork();
+     * notify.replaceToastLoading('Done!', { type: 'success' });
+     */
+    replaceToastLoading(message: string, options?: ToastOptions): void;
+}
+
+/**
+ * Default export: the `NotificationSystem` class.
+ *
+ * @example – ESM / Vite / React
+ * ```ts
+ * import NotificationSystem from 'fernotify';
+ * const notify = new NotificationSystem();
+ * notify.toastSuccess('Hello!');
+ * ```
+ *
+ * @example – Singleton (recommended for apps)
+ * ```ts
+ * // src/lib/notify.ts
+ * import NotificationSystem from 'fernotify';
+ * const notify = new NotificationSystem();
+ * export default notify;
+ * ```
+ */
+export default NotificationSystem;
+
+// Augment the global Window interface so window.notify is typed
+// when the UMD/IIFE bundle is loaded via <script>.
+declare global {
+    interface Window {
+        notify: NotificationSystem;
+        /** @deprecated Use window.notify instead. */
+        Notification: NotificationSystem;
+    }
+}