fernotify 1.2.8 → 1.2.9

package/README.md

@@ -212,6 +212,35 @@ notify.loading('Cargando...', 'Espera', {
 });
 ```
 
+### Toast — Notificaciones no bloqueantes 🍞
+
+Los toasts aparecen en la esquina de la pantalla **sin interrumpir al usuario**, se apilan automáticamente y se cierran solos (o con el botón ×).
+
+```javascript
+// Métodos abreviados (mismo patrón que los modales)
+notify.toastSuccess('Cambios guardados.', 'Título opcional');
+notify.toastError('Error al procesar.', 'Error');
+notify.toastWarning('Revisa los datos.');
+notify.toastInfo('Nueva versión disponible.');
+notify.toastQuestion('Nueva solicitud pendiente.');
+
+// Método genérico con opciones completas
+notify.toast('Mensaje aquí', {
+  type: 'success',          // 'success' | 'error' | 'warning' | 'info' | 'question'
+  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'
+});
+```
+
+**Características:**
+- Sin overlay — no bloquea la UI
+- Apilables: se acumulan uno bajo otro
+- Progress bar que indica el tiempo restante
+- Botón × para cierre manual
+- Animación de entrada/salida suave
+- Soporte completo de dark mode
+
 ### Personalización de Animaciones
 
 ```javascript

package/dist/notification-system.esm.js

@@ -14,6 +14,17 @@
 
 // Importar el código UMD y ejecutarlo para generar window.notify
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 (function ensureAnimeDependency() {
     if (typeof anime !== 'undefined') {
         initFerNotify();
@@ -33,6 +44,7 @@
                 this.currentNotification = null;
                 this._lastActiveElement = null;
                 this._currentLoadingPromise = null;
+                this._toastContainers = new Map();
                 this.injectStyles();
                 this.loadBoxicons();
             }
@@ -339,6 +351,117 @@
             .dark .notification-loading-text {
                 color: #cbd5e1;
             }
+
+            /* ==================== Toast ==================== */
+            .notify-toast-container {
+                position: fixed;
+                z-index: 10000;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                pointer-events: none;
+                width: 360px;
+                max-width: calc(100vw - 40px);
+            }
+            .notify-toast-top-right  { top: 20px; right: 20px; }
+            .notify-toast-top-left   { top: 20px; left: 20px; }
+            .notify-toast-top-center { top: 20px; left: 50%; transform: translateX(-50%); }
+            .notify-toast-bottom-right { bottom: 20px; right: 20px; flex-direction: column-reverse; }
+            .notify-toast-bottom-left  { bottom: 20px; left: 20px; flex-direction: column-reverse; }
+
+            .notify-toast {
+                background: white;
+                border-radius: 12px;
+                padding: 14px 40px 14px 14px;
+                box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
+                display: flex;
+                align-items: flex-start;
+                gap: 12px;
+                pointer-events: auto;
+                position: relative;
+                overflow: hidden;
+                opacity: 0;
+                transform: translateX(30px);
+                transition: opacity 0.25s ease, transform 0.25s ease;
+            }
+            .notify-toast-top-left .notify-toast,
+            .notify-toast-bottom-left .notify-toast { transform: translateX(-30px); }
+            .notify-toast-top-center .notify-toast { transform: translateY(-20px); }
+            .notify-toast.notify-toast-visible {
+                opacity: 1;
+                transform: translateX(0) translateY(0) !important;
+            }
+
+            .notify-toast-icon {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 20px;
+                flex-shrink: 0;
+                color: white;
+            }
+            .notify-toast-icon.success  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
+            .notify-toast-icon.error    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
+            .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-content { flex: 1; min-width: 0; }
+            .notify-toast-title {
+                font-size: 14px;
+                font-weight: 700;
+                color: #1f2937;
+                margin-bottom: 2px;
+                line-height: 1.3;
+            }
+            .notify-toast-message {
+                font-size: 13px;
+                color: #6b7280;
+                line-height: 1.5;
+            }
+
+            .notify-toast-close {
+                position: absolute;
+                top: 8px;
+                right: 8px;
+                width: 24px;
+                height: 24px;
+                border-radius: 6px;
+                border: none;
+                background: rgba(0,0,0,0.06);
+                color: #6b7280;
+                cursor: pointer;
+                font-size: 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                line-height: 1;
+                padding: 0;
+            }
+            .notify-toast-close:hover { background: rgba(0,0,0,0.1); color: #374151; }
+
+            .notify-toast-progress {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                height: 3px;
+                width: 100%;
+                border-radius: 0 0 0 12px;
+            }
+            .notify-toast-progress.success  { background: #10b981; }
+            .notify-toast-progress.error    { background: #ef4444; }
+            .notify-toast-progress.warning  { background: #f59e0b; }
+            .notify-toast-progress.info     { background: #3b82f6; }
+            .notify-toast-progress.question { background: #8b5cf6; }
+
+            .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; }
         `;
                 document.head.appendChild(style);
             }
@@ -845,6 +968,136 @@
                 const ss = (s % 60).toString().padStart(2, '0');
                 return `${mm}:${ss}`;
             }
+            showToast(message, options = {}) {
+                var _a;
+                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;
+                let container = this._toastContainers.get(position);
+                if (!container || !document.body.contains(container)) {
+                    container = document.createElement('div');
+                    container.className = `notify-toast-container notify-toast-${position}`;
+                    document.body.appendChild(container);
+                    this._toastContainers.set(position, container);
+                }
+                const isBottom = position.startsWith('bottom');
+                const isCenter = position === 'top-center';
+                const toast = document.createElement('div');
+                toast.className = 'notify-toast';
+                const iconEl = document.createElement('div');
+                iconEl.className = `notify-toast-icon ${type}`;
+                iconEl.innerHTML = this.getIcon(type);
+                const contentEl = document.createElement('div');
+                contentEl.className = 'notify-toast-content';
+                if (title) {
+                    const titleEl = document.createElement('div');
+                    titleEl.className = 'notify-toast-title';
+                    titleEl.textContent = title;
+                    contentEl.appendChild(titleEl);
+                }
+                const msgEl = document.createElement('div');
+                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);
+                let progressEl = null;
+                if (duration > 0 && showProgress) {
+                    progressEl = document.createElement('div');
+                    progressEl.className = `notify-toast-progress ${type}`;
+                    toast.appendChild(progressEl);
+                }
+                if (isBottom || isCenter) {
+                    container.appendChild(toast);
+                }
+                else {
+                    container.insertBefore(toast, container.firstChild);
+                }
+                let dismissed = false;
+                let timerId = null;
+                let remaining = duration;
+                let timerStartedAt = 0;
+                const removeToast = () => {
+                    if (dismissed)
+                        return;
+                    dismissed = true;
+                    toast.classList.remove('notify-toast-visible');
+                    setTimeout(() => {
+                        if (toast.parentNode)
+                            toast.parentNode.removeChild(toast);
+                    }, 300);
+                };
+                const startCountdown = (ms) => {
+                    timerStartedAt = Date.now();
+                    timerId = setTimeout(removeToast, ms);
+                    if (progressEl) {
+                        progressEl.style.transition = `width ${ms}ms linear`;
+                        progressEl.style.width = '0%';
+                    }
+                };
+                const pauseCountdown = () => {
+                    if (dismissed || timerId === null)
+                        return;
+                    clearTimeout(timerId);
+                    timerId = null;
+                    const elapsed = Date.now() - timerStartedAt;
+                    remaining = Math.max(0, remaining - elapsed);
+                    if (progressEl) {
+                        const pct = (remaining / duration) * 100;
+                        progressEl.style.transition = 'none';
+                        progressEl.style.width = `${pct}%`;
+                    }
+                };
+                const resumeCountdown = () => {
+                    if (dismissed || remaining <= 0)
+                        return;
+                    startCountdown(remaining);
+                };
+                closeBtn.addEventListener('click', removeToast);
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        toast.classList.add('notify-toast-visible');
+                        if (duration > 0) {
+                            startCountdown(duration);
+                        }
+                    });
+                });
+                if (duration > 0) {
+                    toast.addEventListener('mouseenter', pauseCountdown);
+                    toast.addEventListener('mouseleave', resumeCountdown);
+                }
+            }
+            toast(messageOrOptions, options = {}) {
+                if (typeof messageOrOptions === 'string') {
+                    this.showToast(messageOrOptions, options);
+                }
+                else {
+                    const { message = '' } = messageOrOptions, rest = __rest(messageOrOptions, ["message"]);
+                    this.showToast(message, rest);
+                }
+            }
+            toastSuccess(message, title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({}, options), { type: 'success', title: title !== null && title !== void 0 ? title : options.title }));
+            }
+            toastError(message, title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({}, options), { type: 'error', title: title !== null && title !== void 0 ? title : options.title }));
+            }
+            toastWarning(message, title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({}, options), { type: 'warning', title: title !== null && title !== void 0 ? title : options.title }));
+            }
+            toastInfo(message, title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({}, options), { type: 'info', title: title !== null && title !== void 0 ? title : options.title }));
+            }
+            toastQuestion(message, title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({}, options), { type: 'question', title: title !== null && title !== void 0 ? title : options.title }));
+            }
         }
         const notifyInstance = new NotificationSystem();
         const w = window;

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

@@ -1 +1 @@
-"use strict";!function(){if("undefined"!=typeof anime)n();else{const t=document.createElement("script");t.src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js",t.onload=n,t.onerror=()=>{console.error("FerNotify: No se pudo cargar anime.js. Por favor, cargalo manualmente.")},document.head.appendChild(t)}function n(){const n=new class{constructor(){this.currentNotification=null,this._lastActiveElement=null,this._currentLoadingPromise=null,this.injectStyles(),this.loadBoxicons()}loadBoxicons(){if(!document.querySelector('link[href*="boxicons"]')){const n=document.createElement("link");n.rel="stylesheet",n.href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css",document.head.appendChild(n)}}injectStyles(){const n=document.createElement("style");n.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        ",document.head.appendChild(n)}getIcon(n){const t={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 t[n]||t.info}getDefaultTitle(n){return{success:"¡Éxito!",error:"Error",warning:"Advertencia",info:"Información",question:"Pregunta"}[n]||"Notificación"}getButtonGradient(n){const t={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 t[n]||t.info}getButtonShadow(n){const t={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 t[n]||t.info}show(n={}){if(this.currentNotification){const n=this.currentNotification;this.currentNotification=null;try{n&&n.parentNode&&n.parentNode.removeChild(n)}catch(n){}}const{type:t="info",title:e=this.getDefaultTitle(t),message:o="",buttonText:i="OK",buttonColor:a=null,onClose:r=null,timer:c=null,allowOutsideClick:s=!0,allowEscapeKey:l=!0,hideButton:d=!1,buttons:u=null}=n,f=!0===n.showCloseButton;try{document.body.style.overflow="hidden"}catch(n){}try{document.documentElement.style.overflow="hidden"}catch(n){}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 ${t}`,d&&"info"===t?(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(t);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(n.html||n.content)if(x=document.createElement("div"),x.className="notification-content",n.html)try{x.innerHTML=n.html}catch(t){x.textContent=n.html}else n.content&&n.content instanceof HTMLElement&&x.appendChild(n.content);const y=()=>this.close(r);let w=null,v=null;if(!d)if(Array.isArray(u)&&u.length)v=document.createElement("div"),v.className="notification-button-group",u.forEach(n=>{const e=document.createElement("button");e.className="notification-button",e.textContent=n.text||"OK";const o=n.color||this.getButtonGradient(t),i=n.shadowColor||this.getButtonShadow(t);e.style.background=o,e.style.boxShadow=`0 4px 12px ${i}`,e.addEventListener("click",t=>{t.stopPropagation(),t.preventDefault();try{y().then(()=>{if("function"==typeof n.onClick)try{const t=n.onClick();t&&"function"==typeof t.then&&t.catch(n=>console.error(n))}catch(n){console.error(n)}}).catch(()=>{})}catch(n){console.error(n)}}),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(n.onConfirm||n.onCancel||n.confirmText||n.cancelText){v=document.createElement("div"),v.className="notification-button-group";const e=n.cancelText||"Cancelar",o=n.confirmText||"Aceptar",i=document.createElement("button");i.className="notification-button",i.textContent=e;const a=n.cancelColor||"linear-gradient(135deg, #9ca3af 0%, #6b7280 100%)",r=n.cancelShadow||"rgba(107,114,128,0.25)";i.style.background=a,i.style.boxShadow=`0 4px 12px ${r}`,i.addEventListener("click",t=>{t.stopPropagation(),t.preventDefault(),y().then(()=>{try{if("function"==typeof n.onCancel){const t=n.onCancel();t&&"function"==typeof t.then&&t.catch(n=>console.error(n))}}catch(n){console.error(n)}}).catch(()=>{})}),i.addEventListener("mouseenter",()=>{i.style.boxShadow=`0 6px 16px ${r}`}),i.addEventListener("mouseleave",()=>{i.style.boxShadow=`0 4px 12px ${r}`});const c=document.createElement("button");c.className="notification-button",c.textContent=o;const s=n.confirmColor||this.getButtonGradient(t),l=n.confirmShadow||this.getButtonShadow(t);c.style.background=s,c.style.boxShadow=`0 4px 12px ${l}`,c.addEventListener("click",async t=>{t.stopPropagation(),t.preventDefault();try{if(await y(),"function"==typeof n.onConfirm){const t=n.onConfirm();t&&"function"==typeof t.then&&await t}}catch(n){console.error(n)}}),c.addEventListener("mouseenter",()=>{c.style.boxShadow=`0 6px 16px ${l}`}),c.addEventListener("mouseleave",()=>{c.style.boxShadow=`0 4px 12px ${l}`}),v.appendChild(i),v.appendChild(c)}else if(i){w=document.createElement("button"),w.className="notification-button",w.textContent=i;const n=a||this.getButtonGradient(t),e=this.getButtonShadow(t);w.style.background=n,w.style.boxShadow=`0 4px 12px ${e}`}let k=null;if(f&&(k=document.createElement("button"),k.setAttribute("aria-label","Cerrar"),k.className="notification-close",k.innerHTML="&times;",k.addEventListener("click",n=>{n.stopPropagation(),y()})),m.appendChild(b),x){const n="notify-desc-"+Date.now();x.id=n,p.setAttribute("aria-describedby",n),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(n=>{try{E._externalResolve=n}catch(n){}});try{const n=document.getElementById("notify-live");n&&(n.textContent=`${e}: ${o}`)}catch(n){}try{this._lastActiveElement=document.activeElement}catch(n){this._lastActiveElement=null}this.currentNotification=p;try{const n=m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])');n&&n.length?n[0].focus():w?w.focus():p.focus()}catch(n){try{p.focus()}catch(n){}}const S=n=>{if("Tab"!==n.key)return;const t=Array.from(m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])')).filter(n=>n instanceof HTMLElement&&null!==n.offsetParent);if(!t.length)return void n.preventDefault();const e=t[0],o=t[t.length-1];n.shiftKey||document.activeElement!==o?n.shiftKey&&document.activeElement===e&&(n.preventDefault(),o.focus()):(n.preventDefault(),e.focus())};E._focusTrap=S,document.addEventListener("keydown",S);const N=n.anim||{},L="number"==typeof N.overlayDuration?N.overlayDuration:150,T=N.overlayEasing||"easeOutQuad",D="number"==typeof N.boxDuration?N.boxDuration:200,_="number"==typeof N.boxDelay?N.boxDelay:50,j=N.boxEasing||"easeOutBack",A="number"==typeof N.boxStartScale?N.boxStartScale:.8,$="number"==typeof N.iconDuration?N.iconDuration:250,B="number"==typeof N.iconDelay?N.iconDelay:100,q="number"==typeof N.iconRotate?N.iconRotate:"success"===t?-90:"error"===t?90:0;if("number"==typeof N.overlayOpacity&&(p.style.backgroundColor=`rgba(0,0,0,${N.overlayOpacity})`),anime({targets:p,opacity:[0,1],duration:L,easing:T}),anime({targets:m,scale:[A,1],opacity:[0,1],duration:D,easing:j,delay:_}),anime({targets:b,scale:[0,1],rotate:[q,0],duration:$,easing:j,delay:B}),w){const n=this.getButtonShadow(t);w.addEventListener("mouseenter",()=>{w.style.boxShadow=`0 6px 16px ${n}`}),w.addEventListener("mouseleave",()=>{w.style.boxShadow=`0 4px 12px ${n}`}),w.addEventListener("click",n=>{n.stopPropagation(),n.preventDefault(),y().catch(()=>{})})}if(s&&p.addEventListener("click",n=>{m.contains(n.target)||y()}),c&&setTimeout(()=>{y()},c),l){const n=t=>{"Escape"===t.key&&(y(),document.removeEventListener("keydown",n))};E._escHandler=n,document.addEventListener("keydown",n)}return C}close(n=null){if(!this.currentNotification)return Promise.resolve();const t=this.currentNotification,e=t,o=t.querySelector(".notification-box");return this.currentNotification=null,anime({targets:o,scale:.8,opacity:0,duration:100,easing:"easeInQuad"}),new Promise(o=>{anime({targets:t,opacity:0,duration:100,easing:"easeInQuad",complete:()=>{try{e&&e._escHandler&&(document.removeEventListener("keydown",e._escHandler),e._escHandler=void 0)}catch(n){}try{e&&e._focusTrap&&(document.removeEventListener("keydown",e._focusTrap),e._focusTrap=void 0)}catch(n){}try{if(e&&"function"==typeof e._externalResolve){try{e._externalResolve()}catch(n){}e._externalResolve=void 0}}catch(n){}try{t&&t.parentNode&&t.parentNode.removeChild(t)}catch(n){try{t.remove()}catch(n){}}if(!this.currentNotification){try{document.body.style.overflow=""}catch(n){}try{document.documentElement.style.overflow=""}catch(n){}}try{this._lastActiveElement&&"function"==typeof this._lastActiveElement.focus&&this._lastActiveElement.focus()}catch(n){}this._lastActiveElement=null,n&&n(),o()}})})}success(n,t=null,e={}){this.show(Object.assign({type:"success",title:t||this.getDefaultTitle("success"),message:n},e))}error(n,t=null,e={}){this.show(Object.assign({type:"error",title:t||this.getDefaultTitle("error"),message:n},e))}warning(n,t=null,e={}){this.show(Object.assign({type:"warning",title:t||this.getDefaultTitle("warning"),message:n},e))}question(n,t=null,e={}){this.show(Object.assign({type:"question",title:t||this.getDefaultTitle("question"),message:n},e))}info(n,t=null,e={}){this.show(Object.assign({type:"info",title:t||this.getDefaultTitle("info"),message:n},e))}loading(n="Cargando...",t="Espera",e={}){const o=Object.assign({type:"info",title:t,message:n,hideButton:!0,allowOutsideClick:!1,allowEscapeKey:!1},e),i=this.show(o);return this._currentLoadingPromise=i,i}closeLoading(n=null){return this._currentLoadingPromise=null,this.close(n)}hide(n=null){return this.close(n)}hiden(n=null){return this.close(n)}_formatTime(n){const t=Math.max(0,Math.floor(n));return`${Math.floor(t/60).toString().padStart(2,"0")}:${(t%60).toString().padStart(2,"0")}`}},t=window;t.notify=n,t.Notification=n}}();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.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};

package/dist/notification-system.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 (function ensureAnimeDependency() {
     if (typeof anime !== 'undefined') {
         initFerNotify();
@@ -18,6 +29,7 @@
                 this.currentNotification = null;
                 this._lastActiveElement = null;
                 this._currentLoadingPromise = null;
+                this._toastContainers = new Map();
                 this.injectStyles();
                 this.loadBoxicons();
             }
@@ -324,6 +336,117 @@
             .dark .notification-loading-text {
                 color: #cbd5e1;
             }
+
+            /* ==================== Toast ==================== */
+            .notify-toast-container {
+                position: fixed;
+                z-index: 10000;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                pointer-events: none;
+                width: 360px;
+                max-width: calc(100vw - 40px);
+            }
+            .notify-toast-top-right  { top: 20px; right: 20px; }
+            .notify-toast-top-left   { top: 20px; left: 20px; }
+            .notify-toast-top-center { top: 20px; left: 50%; transform: translateX(-50%); }
+            .notify-toast-bottom-right { bottom: 20px; right: 20px; flex-direction: column-reverse; }
+            .notify-toast-bottom-left  { bottom: 20px; left: 20px; flex-direction: column-reverse; }
+
+            .notify-toast {
+                background: white;
+                border-radius: 12px;
+                padding: 14px 40px 14px 14px;
+                box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
+                display: flex;
+                align-items: flex-start;
+                gap: 12px;
+                pointer-events: auto;
+                position: relative;
+                overflow: hidden;
+                opacity: 0;
+                transform: translateX(30px);
+                transition: opacity 0.25s ease, transform 0.25s ease;
+            }
+            .notify-toast-top-left .notify-toast,
+            .notify-toast-bottom-left .notify-toast { transform: translateX(-30px); }
+            .notify-toast-top-center .notify-toast { transform: translateY(-20px); }
+            .notify-toast.notify-toast-visible {
+                opacity: 1;
+                transform: translateX(0) translateY(0) !important;
+            }
+
+            .notify-toast-icon {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 20px;
+                flex-shrink: 0;
+                color: white;
+            }
+            .notify-toast-icon.success  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
+            .notify-toast-icon.error    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
+            .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-content { flex: 1; min-width: 0; }
+            .notify-toast-title {
+                font-size: 14px;
+                font-weight: 700;
+                color: #1f2937;
+                margin-bottom: 2px;
+                line-height: 1.3;
+            }
+            .notify-toast-message {
+                font-size: 13px;
+                color: #6b7280;
+                line-height: 1.5;
+            }
+
+            .notify-toast-close {
+                position: absolute;
+                top: 8px;
+                right: 8px;
+                width: 24px;
+                height: 24px;
+                border-radius: 6px;
+                border: none;
+                background: rgba(0,0,0,0.06);
+                color: #6b7280;
+                cursor: pointer;
+                font-size: 16px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                line-height: 1;
+                padding: 0;
+            }
+            .notify-toast-close:hover { background: rgba(0,0,0,0.1); color: #374151; }
+
+            .notify-toast-progress {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                height: 3px;
+                width: 100%;
+                border-radius: 0 0 0 12px;
+            }
+            .notify-toast-progress.success  { background: #10b981; }
+            .notify-toast-progress.error    { background: #ef4444; }
+            .notify-toast-progress.warning  { background: #f59e0b; }
+            .notify-toast-progress.info     { background: #3b82f6; }
+            .notify-toast-progress.question { background: #8b5cf6; }
+
+            .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; }
         `;
                 document.head.appendChild(style);
             }
@@ -830,6 +953,136 @@
                 const ss = (s % 60).toString().padStart(2, '0');
                 return `${mm}:${ss}`;
             }
+            showToast(message, options = {}) {
+                var _a;
+                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;
+                let container = this._toastContainers.get(position);
+                if (!container || !document.body.contains(container)) {
+                    container = document.createElement('div');
+                    container.className = `notify-toast-container notify-toast-${position}`;
+                    document.body.appendChild(container);
+                    this._toastContainers.set(position, container);
+                }
+                const isBottom = position.startsWith('bottom');
+                const isCenter = position === 'top-center';
+                const toast = document.createElement('div');
+                toast.className = 'notify-toast';
+                const iconEl = document.createElement('div');
+                iconEl.className = `notify-toast-icon ${type}`;
+                iconEl.innerHTML = this.getIcon(type);
+                const contentEl = document.createElement('div');
+                contentEl.className = 'notify-toast-content';
+                if (title) {
+                    const titleEl = document.createElement('div');
+                    titleEl.className = 'notify-toast-title';
+                    titleEl.textContent = title;
+                    contentEl.appendChild(titleEl);
+                }
+                const msgEl = document.createElement('div');
+                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);
+                let progressEl = null;
+                if (duration > 0 && showProgress) {
+                    progressEl = document.createElement('div');
+                    progressEl.className = `notify-toast-progress ${type}`;
+                    toast.appendChild(progressEl);
+                }
+                if (isBottom || isCenter) {
+                    container.appendChild(toast);
+                }
+                else {
+                    container.insertBefore(toast, container.firstChild);
+                }
+                let dismissed = false;
+                let timerId = null;
+                let remaining = duration;
+                let timerStartedAt = 0;
+                const removeToast = () => {
+                    if (dismissed)
+                        return;
+                    dismissed = true;
+                    toast.classList.remove('notify-toast-visible');
+                    setTimeout(() => {
+                        if (toast.parentNode)
+                            toast.parentNode.removeChild(toast);
+                    }, 300);
+                };
+                const startCountdown = (ms) => {
+                    timerStartedAt = Date.now();
+                    timerId = setTimeout(removeToast, ms);
+                    if (progressEl) {
+                        progressEl.style.transition = `width ${ms}ms linear`;
+                        progressEl.style.width = '0%';
+                    }
+                };
+                const pauseCountdown = () => {
+                    if (dismissed || timerId === null)
+                        return;
+                    clearTimeout(timerId);
+                    timerId = null;
+                    const elapsed = Date.now() - timerStartedAt;
+                    remaining = Math.max(0, remaining - elapsed);
+                    if (progressEl) {
+                        const pct = (remaining / duration) * 100;
+                        progressEl.style.transition = 'none';
+                        progressEl.style.width = `${pct}%`;
+                    }
+                };
+                const resumeCountdown = () => {
+                    if (dismissed || remaining <= 0)
+                        return;
+                    startCountdown(remaining);
+                };
+                closeBtn.addEventListener('click', removeToast);
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        toast.classList.add('notify-toast-visible');
+                        if (duration > 0) {
+                            startCountdown(duration);
+                        }
+                    });
+                });
+                if (duration > 0) {
+                    toast.addEventListener('mouseenter', pauseCountdown);
+                    toast.addEventListener('mouseleave', resumeCountdown);
+                }
+            }
+            toast(messageOrOptions, options = {}) {
+                if (typeof messageOrOptions === 'string') {
+                    this.showToast(messageOrOptions, options);
+                }
+                else {
+                    const { message = '' } = messageOrOptions, rest = __rest(messageOrOptions, ["message"]);
+                    this.showToast(message, rest);
+                }
+            }
+            toastSuccess(message, title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({}, options), { type: 'success', title: title !== null && title !== void 0 ? title : options.title }));
+            }
+            toastError(message, title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({}, options), { type: 'error', title: title !== null && title !== void 0 ? title : options.title }));
+            }
+            toastWarning(message, title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({}, options), { type: 'warning', title: title !== null && title !== void 0 ? title : options.title }));
+            }
+            toastInfo(message, title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({}, options), { type: 'info', title: title !== null && title !== void 0 ? title : options.title }));
+            }
+            toastQuestion(message, title, options = {}) {
+                this.showToast(message, Object.assign(Object.assign({}, options), { type: 'question', title: title !== null && title !== void 0 ? title : options.title }));
+            }
         }
         const notifyInstance = new NotificationSystem();
         const w = window;

package/dist/notification-system.min.js

@@ -1 +1 @@
-"use strict";!function(){if("undefined"!=typeof anime)n();else{const t=document.createElement("script");t.src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js",t.onload=n,t.onerror=()=>{console.error("FerNotify: No se pudo cargar anime.js. Por favor, cargalo manualmente.")},document.head.appendChild(t)}function n(){const n=new class{constructor(){this.currentNotification=null,this._lastActiveElement=null,this._currentLoadingPromise=null,this.injectStyles(),this.loadBoxicons()}loadBoxicons(){if(!document.querySelector('link[href*="boxicons"]')){const n=document.createElement("link");n.rel="stylesheet",n.href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css",document.head.appendChild(n)}}injectStyles(){const n=document.createElement("style");n.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        ",document.head.appendChild(n)}getIcon(n){const t={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 t[n]||t.info}getDefaultTitle(n){return{success:"¡Éxito!",error:"Error",warning:"Advertencia",info:"Información",question:"Pregunta"}[n]||"Notificación"}getButtonGradient(n){const t={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 t[n]||t.info}getButtonShadow(n){const t={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 t[n]||t.info}show(n={}){if(this.currentNotification){const n=this.currentNotification;this.currentNotification=null;try{n&&n.parentNode&&n.parentNode.removeChild(n)}catch(n){}}const{type:t="info",title:e=this.getDefaultTitle(t),message:o="",buttonText:i="OK",buttonColor:a=null,onClose:r=null,timer:c=null,allowOutsideClick:s=!0,allowEscapeKey:l=!0,hideButton:d=!1,buttons:u=null}=n,f=!0===n.showCloseButton;try{document.body.style.overflow="hidden"}catch(n){}try{document.documentElement.style.overflow="hidden"}catch(n){}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 ${t}`,d&&"info"===t?(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(t);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(n.html||n.content)if(x=document.createElement("div"),x.className="notification-content",n.html)try{x.innerHTML=n.html}catch(t){x.textContent=n.html}else n.content&&n.content instanceof HTMLElement&&x.appendChild(n.content);const y=()=>this.close(r);let w=null,v=null;if(!d)if(Array.isArray(u)&&u.length)v=document.createElement("div"),v.className="notification-button-group",u.forEach(n=>{const e=document.createElement("button");e.className="notification-button",e.textContent=n.text||"OK";const o=n.color||this.getButtonGradient(t),i=n.shadowColor||this.getButtonShadow(t);e.style.background=o,e.style.boxShadow=`0 4px 12px ${i}`,e.addEventListener("click",t=>{t.stopPropagation(),t.preventDefault();try{y().then(()=>{if("function"==typeof n.onClick)try{const t=n.onClick();t&&"function"==typeof t.then&&t.catch(n=>console.error(n))}catch(n){console.error(n)}}).catch(()=>{})}catch(n){console.error(n)}}),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(n.onConfirm||n.onCancel||n.confirmText||n.cancelText){v=document.createElement("div"),v.className="notification-button-group";const e=n.cancelText||"Cancelar",o=n.confirmText||"Aceptar",i=document.createElement("button");i.className="notification-button",i.textContent=e;const a=n.cancelColor||"linear-gradient(135deg, #9ca3af 0%, #6b7280 100%)",r=n.cancelShadow||"rgba(107,114,128,0.25)";i.style.background=a,i.style.boxShadow=`0 4px 12px ${r}`,i.addEventListener("click",t=>{t.stopPropagation(),t.preventDefault(),y().then(()=>{try{if("function"==typeof n.onCancel){const t=n.onCancel();t&&"function"==typeof t.then&&t.catch(n=>console.error(n))}}catch(n){console.error(n)}}).catch(()=>{})}),i.addEventListener("mouseenter",()=>{i.style.boxShadow=`0 6px 16px ${r}`}),i.addEventListener("mouseleave",()=>{i.style.boxShadow=`0 4px 12px ${r}`});const c=document.createElement("button");c.className="notification-button",c.textContent=o;const s=n.confirmColor||this.getButtonGradient(t),l=n.confirmShadow||this.getButtonShadow(t);c.style.background=s,c.style.boxShadow=`0 4px 12px ${l}`,c.addEventListener("click",async t=>{t.stopPropagation(),t.preventDefault();try{if(await y(),"function"==typeof n.onConfirm){const t=n.onConfirm();t&&"function"==typeof t.then&&await t}}catch(n){console.error(n)}}),c.addEventListener("mouseenter",()=>{c.style.boxShadow=`0 6px 16px ${l}`}),c.addEventListener("mouseleave",()=>{c.style.boxShadow=`0 4px 12px ${l}`}),v.appendChild(i),v.appendChild(c)}else if(i){w=document.createElement("button"),w.className="notification-button",w.textContent=i;const n=a||this.getButtonGradient(t),e=this.getButtonShadow(t);w.style.background=n,w.style.boxShadow=`0 4px 12px ${e}`}let k=null;if(f&&(k=document.createElement("button"),k.setAttribute("aria-label","Cerrar"),k.className="notification-close",k.innerHTML="&times;",k.addEventListener("click",n=>{n.stopPropagation(),y()})),m.appendChild(b),x){const n="notify-desc-"+Date.now();x.id=n,p.setAttribute("aria-describedby",n),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(n=>{try{E._externalResolve=n}catch(n){}});try{const n=document.getElementById("notify-live");n&&(n.textContent=`${e}: ${o}`)}catch(n){}try{this._lastActiveElement=document.activeElement}catch(n){this._lastActiveElement=null}this.currentNotification=p;try{const n=m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])');n&&n.length?n[0].focus():w?w.focus():p.focus()}catch(n){try{p.focus()}catch(n){}}const S=n=>{if("Tab"!==n.key)return;const t=Array.from(m.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])')).filter(n=>n instanceof HTMLElement&&null!==n.offsetParent);if(!t.length)return void n.preventDefault();const e=t[0],o=t[t.length-1];n.shiftKey||document.activeElement!==o?n.shiftKey&&document.activeElement===e&&(n.preventDefault(),o.focus()):(n.preventDefault(),e.focus())};E._focusTrap=S,document.addEventListener("keydown",S);const N=n.anim||{},L="number"==typeof N.overlayDuration?N.overlayDuration:150,T=N.overlayEasing||"easeOutQuad",D="number"==typeof N.boxDuration?N.boxDuration:200,_="number"==typeof N.boxDelay?N.boxDelay:50,j=N.boxEasing||"easeOutBack",A="number"==typeof N.boxStartScale?N.boxStartScale:.8,$="number"==typeof N.iconDuration?N.iconDuration:250,B="number"==typeof N.iconDelay?N.iconDelay:100,O="number"==typeof N.iconRotate?N.iconRotate:"success"===t?-90:"error"===t?90:0;if("number"==typeof N.overlayOpacity&&(p.style.backgroundColor=`rgba(0,0,0,${N.overlayOpacity})`),anime({targets:p,opacity:[0,1],duration:L,easing:T}),anime({targets:m,scale:[A,1],opacity:[0,1],duration:D,easing:j,delay:_}),anime({targets:b,scale:[0,1],rotate:[O,0],duration:$,easing:j,delay:B}),w){const n=this.getButtonShadow(t);w.addEventListener("mouseenter",()=>{w.style.boxShadow=`0 6px 16px ${n}`}),w.addEventListener("mouseleave",()=>{w.style.boxShadow=`0 4px 12px ${n}`}),w.addEventListener("click",n=>{n.stopPropagation(),n.preventDefault(),y().catch(()=>{})})}if(s&&p.addEventListener("click",n=>{m.contains(n.target)||y()}),c&&setTimeout(()=>{y()},c),l){const n=t=>{"Escape"===t.key&&(y(),document.removeEventListener("keydown",n))};E._escHandler=n,document.addEventListener("keydown",n)}return C}close(n=null){if(!this.currentNotification)return Promise.resolve();const t=this.currentNotification,e=t,o=t.querySelector(".notification-box");return this.currentNotification=null,anime({targets:o,scale:.8,opacity:0,duration:100,easing:"easeInQuad"}),new Promise(o=>{anime({targets:t,opacity:0,duration:100,easing:"easeInQuad",complete:()=>{try{e&&e._escHandler&&(document.removeEventListener("keydown",e._escHandler),e._escHandler=void 0)}catch(n){}try{e&&e._focusTrap&&(document.removeEventListener("keydown",e._focusTrap),e._focusTrap=void 0)}catch(n){}try{if(e&&"function"==typeof e._externalResolve){try{e._externalResolve()}catch(n){}e._externalResolve=void 0}}catch(n){}try{t&&t.parentNode&&t.parentNode.removeChild(t)}catch(n){try{t.remove()}catch(n){}}if(!this.currentNotification){try{document.body.style.overflow=""}catch(n){}try{document.documentElement.style.overflow=""}catch(n){}}try{this._lastActiveElement&&"function"==typeof this._lastActiveElement.focus&&this._lastActiveElement.focus()}catch(n){}this._lastActiveElement=null,n&&n(),o()}})})}success(n,t=null,e={}){this.show(Object.assign({type:"success",title:t||this.getDefaultTitle("success"),message:n},e))}error(n,t=null,e={}){this.show(Object.assign({type:"error",title:t||this.getDefaultTitle("error"),message:n},e))}warning(n,t=null,e={}){this.show(Object.assign({type:"warning",title:t||this.getDefaultTitle("warning"),message:n},e))}question(n,t=null,e={}){this.show(Object.assign({type:"question",title:t||this.getDefaultTitle("question"),message:n},e))}info(n,t=null,e={}){this.show(Object.assign({type:"info",title:t||this.getDefaultTitle("info"),message:n},e))}loading(n="Cargando...",t="Espera",e={}){const o=Object.assign({type:"info",title:t,message:n,hideButton:!0,allowOutsideClick:!1,allowEscapeKey:!1},e),i=this.show(o);return this._currentLoadingPromise=i,i}closeLoading(n=null){return this._currentLoadingPromise=null,this.close(n)}hide(n=null){return this.close(n)}hiden(n=null){return this.close(n)}_formatTime(n){const t=Math.max(0,Math.floor(n));return`${Math.floor(t/60).toString().padStart(2,"0")}:${(t%60).toString().padStart(2,"0")}`}},t=window;t.notify=n,t.Notification=n}}();
+"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}}();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fernotify",
-    "version": "1.2.8",
+    "version": "1.2.9",
     "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",