CAMBIOS:

- Creada pagina de FAQ con manual de funcionalidades.
- Arregladas alertas de exito y error en CDE de todos los elementos.
- Creada alerta de verificacion en la eliminacion de cualquier elemento.

resources/views/components/ui/alert.blade.php

@@ -1,11 +1,28 @@
-@if (session('success'))
-    <div class="p-4 mb-4 text-md text-black rounded-lg bg-green-500 border border-green-800/50" role="alert">
-        <span class="font-bold">¡Éxito!</span> {{ session('success') }}
+@if (session('success') || session('error'))
+    <div id="toast-alert" class="fixed top-20 right-5 z-50 flex items-center w-full max-w-sm p-4 space-x-3 text-black rounded-lg shadow-xl transition-opacity duration-500 ease-in-out {{ session('success') ? 'bg-green-500 border border-green-800/50' : 'bg-red-500 border border-red-800/50' }}" role="alert">
+        <div class="ml-2 text-md font-normal">
+            <span class="font-bold">{{ session('success') ? '¡Éxito!' : 'Error:' }}</span> 
+            {{ session('success') ?? session('error') }}
+        </div>
+        <button type="button" onclick="closeToastAlert()" class="ml-auto -mx-1.5 -my-1.5 bg-transparent text-black hover:text-gray-800 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 inline-flex h-8 w-8 justify-center items-center" aria-label="Close">
+            <span class="sr-only">Cerrar</span>
+            <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+            </svg>
+        </button>
     </div>
-@endif
 
-@if (session('error'))
-    <div class="p-4 mb-4 text-md text-black rounded-lg bg-red-500 border border-red-800/50" role="alert">
-        <span class="font-bold">Error:</span> {{ session('error') }}
-    </div>
+    <script>
+        function closeToastAlert() {
+            const alertElement = document.getElementById('toast-alert');
+            if (alertElement) {
+                alertElement.classList.add('opacity-0');
+                setTimeout(() => alertElement.remove(), 500);
+            }
+        }
+
+        setTimeout(() => {
+            closeToastAlert();
+        }, 5000); // 5 seconds
+    </script>
 @endif