fernotify 1.2.10 → 1.2.12

package/dist/notification-system.esm.js

@@ -528,7 +528,7 @@ var __rest = (this && this.__rest) || function (s, e) {
                     '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%)'
+                    'question': 'linear-gradient(135deg, #8b5cf6 0%, #8b5cf6 100%)'
                 };
                 return gradients[type] || gradients.info;
             }
@@ -538,7 +538,7 @@ var __rest = (this && this.__rest) || function (s, e) {
                     'error': 'rgba(239, 68, 68, 0)',
                     'warning': 'rgba(245, 159, 11, 0)',
                     'info': 'rgba(59, 131, 246, 0)',
-                    'question': 'rgba(108, 99, 245, 0)'
+                    'question': 'rgba(139, 92, 246, 0)'
                 };
                 return shadows[type] || shadows.info;
             }

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

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

package/dist/notification-system.js

@@ -513,7 +513,7 @@ var __rest = (this && this.__rest) || function (s, e) {
                     '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%)'
+                    'question': 'linear-gradient(135deg, #8b5cf6 0%, #8b5cf6 100%)'
                 };
                 return gradients[type] || gradients.info;
             }
@@ -523,7 +523,7 @@ var __rest = (this && this.__rest) || function (s, e) {
                     'error': 'rgba(239, 68, 68, 0)',
                     'warning': 'rgba(245, 159, 11, 0)',
                     'info': 'rgba(59, 131, 246, 0)',
-                    'question': 'rgba(108, 99, 245, 0)'
+                    'question': 'rgba(139, 92, 246, 0)'
                 };
                 return shadows[type] || shadows.info;
             }

package/dist/notification-system.min.js

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

package/package.json

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

package/types/anime.d.ts

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

package/types/index.d.ts

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