Primer commit del sistema separado falta mejorar mucho

shared/public/js/notifications.js

@@ -0,0 +1,72 @@
+// shared/public/js/notifications.js
+
+/**
+ * Muestra una notificación tipo "toast".
+ * @param {string} message El mensaje a mostrar.
+ * @param {string} type El tipo de notificación ('success', 'error', 'info').
+ * @param {number} duration La duración en milisegundos.
+ */
+function showNotification(message, type = 'info', duration = 3000) {
+    // Crear el contenedor de notificaciones si no existe
+    let container = document.getElementById('notification-container');
+    if (!container) {
+        container = document.createElement('div');
+        container.id = 'notification-container';
+        document.body.appendChild(container);
+
+        // Añadir estilos al head
+        const style = document.createElement('style');
+        style.innerHTML = `
+            #notification-container {
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                z-index: 9999;
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+            }
+            .toast-notification {
+                padding: 15px 20px;
+                border-radius: 8px;
+                box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+                color: white;
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                font-size: 14px;
+                opacity: 0;
+                transform: translateX(100%);
+                transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+            }
+            .toast-notification.show {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            .toast-notification.success { background-color: #28a745; }
+            .toast-notification.error { background-color: #dc3545; }
+            .toast-notification.info { background-color: #17a2b8; }
+        `;
+        document.head.appendChild(style);
+    }
+
+    const notification = document.createElement('div');
+    notification.className = `toast-notification ${type}`;
+    notification.textContent = message;
+
+    container.appendChild(notification);
+
+    // Trigger the animation
+    setTimeout(() => {
+        notification.classList.add('show');
+    }, 10);
+
+    // Hide and remove the notification after the duration
+    setTimeout(() => {
+        notification.classList.remove('show');
+        setTimeout(() => {
+            notification.remove();
+            if (container.children.length === 0) {
+                container.remove();
+            }
+        }, 500); // Wait for fade out animation
+    }, duration);
+}