fernotify 1.2.1 → 1.2.8

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

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