From cc44c2e8aa1d395c64d8ccc1c82affa085a5fce5 Mon Sep 17 00:00:00 2001
From: Bryam105 <bryam.cesar18@gmail.com>
Date: Tue, 2 Jun 2026 11:53:29 -0300
Subject: [PATCH] NEW: - Creada sidebar para mejora visual. - Removidos excesos
 de links. - Modificado el footer para consistencia de estilos.

---
 resources/views/components/footer.blade.php   |  10 +-
 resources/views/components/layout.blade.php   |  35 ++++-
 resources/views/components/navbar.blade.php   |  66 +++------
 .../views/components/sidebar-link.blade.php   |  51 +++++++
 resources/views/components/sidebar.blade.php  | 117 +++++++++++++++
 resources/views/dashboard.blade.php           |  39 -----
 resources/views/faq.blade.php                 |   2 +-
 resources/views/productos/create.blade.php    | 140 ++++++++++++------
 resources/views/productos/edit.blade.php      | 140 ++++++++++++------
 9 files changed, 426 insertions(+), 174 deletions(-)
 create mode 100644 resources/views/components/sidebar-link.blade.php
 create mode 100644 resources/views/components/sidebar.blade.php

diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
index 94645f9..1cbcac1 100644
--- a/resources/views/components/footer.blade.php
+++ b/resources/views/components/footer.blade.php
@@ -1,13 +1,15 @@
 <footer class="bg-slate-100 dark:bg-neutral-900 border-t border-black/5 dark:border-white/5 mt-auto z-10 w-full">
     <div class="w-full max-w-7xl mx-auto p-8">
         <div class="sm:flex sm:items-center sm:justify-between">
-            <a href="{{ url('/') }}" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all">
-                <svg class="h-8 text-lime-600 dark:text-neon-lime" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z"/></svg>
+            <a href="{{ url('/') }}" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse group grayscale opacity-70 hover:grayscale-0 hover:opacity-100 transition-all">
+                <div class="h-10 w-10 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
+                    <svg class="w-6 h-6 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                </div>
                 <span class="self-center text-xl font-bold whitespace-nowrap dark:text-white">Cicles Lauck</span>
             </a>
             <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0">
-                <li><a href="#" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline me-4 md:me-6 transition-colors">Soporte</a></li>
-                <li><a href="#" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline transition-colors">Contacto</a></li>
+                <li><a href="{{ route('faq') }}" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline me-4 md:me-6 transition-colors">Soporte y FAQ</a></li>
+                <li><a href="{{ route('faq') }}#contact" class="hover:text-lime-600 hover:dark:text-neon-lime hover:underline transition-colors">Contacto</a></li>
             </ul>
         </div>
         <hr class="my-6 border-neutral-200 dark:border-neutral-800 sm:mx-auto lg:my-8">
diff --git a/resources/views/components/layout.blade.php b/resources/views/components/layout.blade.php
index e8a5ec7..4189002 100644
--- a/resources/views/components/layout.blade.php
+++ b/resources/views/components/layout.blade.php
@@ -34,6 +34,9 @@
     <!-- Navbar Component -->
     <x-navbar />
 
+    <!-- Sidebar Component -->
+    <x-sidebar />
+
     <!-- Contenido Principal -->
     <main class="grow flex flex-col items-center justify-start pt-10 pb-20 px-4 w-full max-w-7xl mx-auto z-10">
         {{ $slot }}
@@ -47,14 +50,42 @@
 
     <!-- Scripts globales -->
     <script>
-        // Lógica del menú móvil
+        // Lógica del menú móvil tradicional (navbar)
         const btn = document.querySelector('[data-collapse-toggle="navbar-default"]');
         const menu = document.getElementById('navbar-default');
         if(btn && menu) {
             btn.addEventListener('click', () => menu.classList.toggle('hidden'));
         }
 
-        
+        // Lógica del Sidebar
+        const sidebar = document.getElementById('main-sidebar');
+        const backdrop = document.getElementById('sidebar-backdrop');
+        const openSidebarBtns = document.querySelectorAll('.open-sidebar-btn');
+        const closeSidebarBtn = document.getElementById('close-sidebar-btn');
+
+        function toggleSidebar() {
+            sidebar.classList.toggle('-translate-x-full');
+            backdrop.classList.toggle('hidden');
+            // Pequeño delay para la transición de opacidad
+            setTimeout(() => {
+                backdrop.classList.toggle('opacity-0');
+            }, 10);
+            
+            // Prevenir scroll en el body cuando el sidebar está abierto
+            document.body.classList.toggle('overflow-hidden');
+        }
+
+        openSidebarBtns.forEach(btn => {
+            btn.addEventListener('click', toggleSidebar);
+        });
+
+        if (closeSidebarBtn) {
+            closeSidebarBtn.addEventListener('click', toggleSidebar);
+        }
+
+        if (backdrop) {
+            backdrop.addEventListener('click', toggleSidebar);
+        }
     </script>
     @stack('scripts')
 
diff --git a/resources/views/components/navbar.blade.php b/resources/views/components/navbar.blade.php
index fa22d09..7c25410 100644
--- a/resources/views/components/navbar.blade.php
+++ b/resources/views/components/navbar.blade.php
@@ -1,20 +1,28 @@
 <nav class="bg-slate-100/90 dark:bg-neutral-900/90 backdrop-blur-md border-b border-black/10 dark:border-white/10 w-full z-50 sticky top-0">
     <div class="max-w-7xl flex flex-wrap items-center justify-between mx-auto p-4">
         
-        <!-- Logo -->
-        @auth
-            <a href="{{ route('dashboard') }}" class="flex items-center space-x-3 rtl:space-x-reverse group">
-        @endauth
-        @guest
-            <a href="{{ url('/') }}" class="flex items-center space-x-3 rtl:space-x-reverse group">
-        @endguest
-            <div class="h-10 w-10 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
-                <svg class="w-6 h-6 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
-            </div>
-            <span class="self-center text-2xl font-black whitespace-nowrap dark:text-white italic tracking-wide group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors duration-300">
-                LAUCK<span class="text-lime-700 dark:text-neon-lime font-light not-italic">SYS</span>
-            </span>
-        </a>
+        <div class="flex items-center gap-3">
+            <!-- Sidebar Toggle Button -->
+            <button type="button" class="open-sidebar-btn inline-flex items-center p-2 justify-center text-neutral-500 dark:text-neutral-400 rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neon-lime transition-colors">
+                <span class="sr-only">Abrir menú lateral</span>
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
+            </button>
+
+            <!-- Logo -->
+            @auth
+                <a href="{{ route('dashboard') }}" class="flex items-center space-x-2 rtl:space-x-reverse group">
+            @endauth
+            @guest
+                <a href="{{ url('/') }}" class="flex items-center space-x-2 rtl:space-x-reverse group">
+            @endguest
+                <div class="h-10 w-10 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
+                    <svg class="w-6 h-6 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                </div>
+                <span class="self-center text-2xl font-black whitespace-nowrap dark:text-white italic tracking-wide group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors duration-300">
+                    LAUCK<span class="text-lime-700 dark:text-neon-lime font-light not-italic">SYS</span>
+                </span>
+            </a>
+        </div>
 
         <!-- Mobile Menu Button -->
         <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-gray-400 rounded-lg md:hidden hover:bg-neutral-800 focus:outline-none focus:ring-2 focus:ring-neon-lime" aria-controls="navbar-default" aria-expanded="false">
@@ -35,36 +43,6 @@
                             Inicio
                         </a>
                     </li>
-                    <li>
-                        <a href="{{ url('/productos') }}" 
-                            class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('productos*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
-                            Stock
-                        </a>
-                    </li>
-                    <li>
-                        <a href="{{ route('tags.index') }}" 
-                            class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('tags*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
-                            Etiquetas
-                        </a>
-                    </li>
-                    <li>
-                        <a href="{{ route('taller.index') }}" 
-                            class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('taller*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
-                            Taller
-                        </a>
-                    </li>
-                    <li>
-                        <a href="{{ route('sales.index') }}" 
-                            class="block py-2 px-3 md:p-0 transition-colors {{ request()->is('sales*') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
-                            Ventas
-                        </a>
-                    </li>
-                    <li>
-                        <a href="{{ route('faq') }}" 
-                            class="block py-2 px-3 md:p-0 transition-colors {{ request()->routeIs('faq') ? 'text-lime-600 dark:text-neon-lime border-b-2 border-lime-600 dark:border-neon-lime' : 'dark:text-white hover:text-lime-600 hover:dark:text-neon-lime' }}">
-                            Ayuda/FAQ
-                        </a>
-                    </li>
                 @endauth
 
 
diff --git a/resources/views/components/sidebar-link.blade.php b/resources/views/components/sidebar-link.blade.php
new file mode 100644
index 0000000..c205a11
--- /dev/null
+++ b/resources/views/components/sidebar-link.blade.php
@@ -0,0 +1,51 @@
+@props(['active' => false, 'icon' => 'default'])
+
+@php
+$classes = $active
+            ? 'flex items-center gap-3 px-3 py-2.5 rounded-lg font-bold text-lime-700 dark:text-neon-lime bg-lime-50 dark:bg-neon-lime/10 transition-colors'
+            : 'flex items-center gap-3 px-3 py-2.5 rounded-lg font-medium text-neutral-700 dark:text-neutral-300 hover:text-black dark:hover:text-white hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors';
+@endphp
+
+<a {{ $attributes->merge(['class' => $classes]) }}>
+    @switch($icon)
+        @case('home')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+            @break
+        @case('catalog')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
+            @break
+        @case('sales')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+            @break
+        @case('workshop')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+            @break
+        @case('stock')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
+            @break
+        @case('tag')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
+            @break
+        @case('users')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
+            @break
+        @case('truck')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"></path></svg>
+            @break
+        @case('receipt')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
+            @break
+        @case('chart')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
+            @break
+        @case('database')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
+            @break
+        @case('question')
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+            @break
+        @default
+            <svg class="w-5 h-5 opacity-75" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+    @endswitch
+    <span>{{ $slot }}</span>
+</a>
diff --git a/resources/views/components/sidebar.blade.php b/resources/views/components/sidebar.blade.php
new file mode 100644
index 0000000..09cf5c3
--- /dev/null
+++ b/resources/views/components/sidebar.blade.php
@@ -0,0 +1,117 @@
+<!-- Overlay / Backdrop -->
+<div id="sidebar-backdrop" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] hidden transition-opacity duration-300 opacity-0 cursor-pointer"></div>
+
+<!-- Sidebar Container -->
+<aside id="main-sidebar" class="fixed top-0 left-0 z-[70] h-screen w-72 bg-neutral-100 dark:bg-neutral-900 border-r border-neutral-300 dark:border-neutral-800 shadow-2xl transition-transform duration-300 -translate-x-full flex flex-col">
+    
+    <!-- Sidebar Header -->
+    <div class="flex items-center justify-between p-4 border-b border-neutral-300 dark:border-neutral-800">
+        <a href="{{ url('/') }}" class="flex items-center space-x-2 group">
+            <div class="h-8 w-8 bg-slate-200 dark:bg-neutral-800 rounded-full flex items-center justify-center border-2 border-transparent group-hover:border-lime-700 group-hover:dark:border-neon-lime transition-all duration-300">
+                <svg class="w-5 h-5 dark:text-white group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+            </div>
+            <span class="text-xl font-black whitespace-nowrap dark:text-white italic tracking-wide group-hover:text-lime-700 group-hover:dark:text-neon-lime transition-colors duration-300">
+                LAUCK<span class="text-lime-700 dark:text-neon-lime font-light not-italic">SYS</span>
+            </span>
+        </a>
+        <button id="close-sidebar-btn" class="p-2 text-neutral-500 hover:text-black dark:text-neutral-400 dark:hover:text-white rounded-lg hover:bg-neutral-200 dark:hover:bg-neutral-800 transition-colors focus:outline-none focus:ring-2 focus:ring-neon-lime">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+        </button>
+    </div>
+
+    <!-- Sidebar Links (Scrollable area) -->
+    <div class="flex-1 overflow-y-auto py-4 px-3 space-y-1 scrollbar-thin scrollbar-thumb-neutral-300 dark:scrollbar-thumb-neutral-700">
+        
+        @auth
+            <x-sidebar-link href="{{ url('/dashboard') }}" :active="request()->is('dashboard')" icon="home">
+                Inicio
+            </x-sidebar-link>
+        @endauth
+        
+        <x-sidebar-link href="{{ url('/catalogo') }}" :active="request()->is('catalogo*')" icon="catalog">
+            Catálogo
+        </x-sidebar-link>
+
+        @auth
+            <div class="pt-4 pb-2">
+                <p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Gestión</p>
+            </div>
+            
+            <x-sidebar-link href="{{ url('/sales') }}" :active="request()->is('sales*')" icon="sales">
+                Ventas
+            </x-sidebar-link>
+            
+            <x-sidebar-link href="{{ url('/taller') }}" :active="request()->is('taller*')" icon="workshop">
+                Taller
+            </x-sidebar-link>
+
+            <x-sidebar-link href="{{ url('/productos') }}" :active="request()->is('productos*')" icon="stock">
+                Stock
+            </x-sidebar-link>
+            
+            <x-sidebar-link href="{{ route('tags.index') }}" :active="request()->is('tags*')" icon="tag">
+                Etiquetas
+            </x-sidebar-link>
+
+            <div class="pt-4 pb-2">
+                <p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Administración</p>
+            </div>
+
+            <x-sidebar-link href="{{ url('/clients') }}" :active="request()->is('clients*')" icon="users">
+                Clientes
+            </x-sidebar-link>
+
+            <x-sidebar-link href="{{ url('/suppliers') }}" :active="request()->is('suppliers*')" icon="truck">
+                Proveedores
+            </x-sidebar-link>
+
+            <x-sidebar-link href="{{ route('expenses.index') }}" :active="request()->routeIs('expenses.*')" icon="receipt">
+                Gastos
+            </x-sidebar-link>
+
+            <x-sidebar-link href="{{ route('reports.index') }}" :active="request()->routeIs('reports.*')" icon="chart">
+                Reportes
+            </x-sidebar-link>
+
+            @if(auth()->user()->role === 'admin')
+                <div class="pt-4 pb-2">
+                    <p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Sistema</p>
+                </div>
+                <x-sidebar-link href="{{ route('admin.backups.index') }}" :active="request()->routeIs('admin.backups.*')" icon="database">
+                    Respaldos
+                </x-sidebar-link>
+            @endif
+
+            <div class="pt-4 pb-2">
+                <p class="px-3 text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">Soporte</p>
+            </div>
+
+            <x-sidebar-link href="{{ route('faq') }}" :active="request()->routeIs('faq')" icon="question">
+                Ayuda/FAQ
+            </x-sidebar-link>
+        @endauth
+    </div>
+
+    <!-- Sidebar Footer (Logout) -->
+    @auth
+    <div class="p-4 border-t border-neutral-300 dark:border-neutral-800 bg-neutral-200 dark:bg-neutral-950">
+        <div class="mb-3 px-2 flex items-center gap-3">
+            <div class="w-8 h-8 rounded-full bg-lime-500 dark:bg-neon-lime text-black flex items-center justify-center font-bold text-sm">
+                {{ substr(auth()->user()->name, 0, 1) }}
+            </div>
+            <div class="flex flex-col">
+                <span class="text-sm font-bold text-black dark:text-white">{{ auth()->user()->name }}</span>
+                <span class="text-xs text-neutral-500 dark:text-neutral-400">{{ ucfirst(auth()->user()->role) }}</span>
+            </div>
+        </div>
+        <form action="{{ route('logout') }}" method="post" class="w-full">
+            @csrf
+            <button class="w-full flex items-center justify-center gap-2 font-bold text-sm text-red-600 dark:text-red-500 border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 py-2.5 px-4 rounded-lg hover:bg-red-600 hover:text-white hover:border-red-600 dark:hover:bg-red-600 dark:hover:text-white transition-all duration-300 tracking-wide" type="submit">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
+                Cerrar Sesión
+            </button>
+        </form>
+    </div>
+    @endauth
+
+</aside>
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
index b850dc8..5e56bbd 100644
--- a/resources/views/dashboard.blade.php
+++ b/resources/views/dashboard.blade.php
@@ -38,45 +38,6 @@
             <svg class="w-12 h-12 text-lime-500 dark:text-neon-lime" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
         </x-ui.card>
 
-        <!-- Tarjeta Proveedores -->
-        <x-ui.card href="{{ url('/suppliers') }}" title="Proveedores" description="Base de datos de proveedores." linkText="Ver Proveedores">            <svg class="w-12 h-12 text-lime-500 dark:text-neon-lime" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-            </svg>
-        </x-ui.card>
-
-        <!-- Tarjeta Gastos -->
-        <x-ui.card href="{{ route('expenses.index') }}" title="Gastos" description="Registro de compras y pedidos a proovedores." linkText="Ver Gastos">
-            <svg class="w-12 h-12 text-lime-500 dark:text-neon-lime" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 4h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3m0 3h6m-3 5h3m-6 0h.01M12 16h3m-6 0h.01M10 3v4h4V3h-4Z"/>
-            </svg>
-        </x-ui.card>
-
-        <!-- Tarjeta Reportes -->
-        <x-ui.card href="{{ route('reports.index') }}" title="Reportes" description="Estadísticas de ingresos y egresos." linkText="Ver Reportes">
-            <svg class="w-12 h-12 text-lime-500 dark:text-neon-lime" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v-6M8 16V6m4 10v-3m4 3v-8m4 8v-5M4 20h16"/>
-            </svg>
-        </x-ui.card>
-        @if(auth()->user()->role === 'admin')
-            <!-- Tarjeta Respaldos (Solo Admin) -->
-            <x-ui.card href="{{ route('admin.backups.index') }}" title="Respaldos" description="Copias de seguridad de la base de datos." linkText="Administrar Copias">
-                <svg class="w-12 h-12 text-lime-500 dark:text-neon-lime" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" />
-                </svg>
-            </x-ui.card>
-        @endif
-
-    </div>
-
-    <!-- Botón de Logout -->
-    <div class="w-full border-t border-neutral-800 pt-8 flex justify-end">
-        <form action="{{ route('logout') }}" method="post" class="flex items-center gap-4">
-            @csrf
-            <span class="text-sm text-gray-500">¿Sesión finalizada?</span>
-            <button class="font-bold text-sm text-red-500 border border-red-900/50 bg-red-900/10 py-2 px-6 rounded-md hover:bg-red-600 hover:text-white hover:border-red-600 transition-all duration-300 uppercase tracking-wide" type="submit">
-                Cerrar Sesión
-            </button>
-        </form>
     </div>
 
 </x-layout>
\ No newline at end of file
diff --git a/resources/views/faq.blade.php b/resources/views/faq.blade.php
index e2d97cc..57f2683 100644
--- a/resources/views/faq.blade.php
+++ b/resources/views/faq.blade.php
@@ -170,7 +170,7 @@
             </details>
         </div>
 
-        <div class="mt-8 p-6 bg-lime-50 dark:bg-lime-900/10 border border-lime-200 dark:border-lime-900/30 rounded-xl text-center shadow-sm">
+        <div id="contact" class="mt-8 p-6 bg-lime-50 dark:bg-lime-900/10 border border-lime-200 dark:border-lime-900/30 rounded-xl text-center shadow-sm">
             <h3 class="text-lg font-bold text-lime-800 dark:text-neon-lime mb-2">¿Necesitas más ayuda?</h3>
             <p class="text-sm text-lime-700 dark:text-gray-400 mb-5">Si tienes alguna otra duda o experimentas problemas técnicos, nuestro equipo de soporte está disponible para ayudarte.</p>
             <a href="mailto:soporte@lauck.com" class="inline-flex items-center justify-center px-6 py-3 text-sm font-bold text-neutral-900 bg-lime-400 dark:bg-neon-lime rounded-lg hover:bg-lime-500 hover:dark:bg-[#b3e600] transition-colors shadow-lg shadow-lime-500/20 dark:shadow-neon-lime/20 transform hover:-translate-y-0.5 duration-200 uppercase tracking-wide">
diff --git a/resources/views/productos/create.blade.php b/resources/views/productos/create.blade.php
index 723e095..ce9f31f 100644
--- a/resources/views/productos/create.blade.php
+++ b/resources/views/productos/create.blade.php
@@ -87,66 +87,122 @@
     @push('styles')
     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
     <style>
-        /* Dark Theme & Neon Lime overrides for Select2 */
+        /* Estilos consistentes con el sistema para Select2 Múltiple */
         .select2-container--default .select2-selection--multiple {
-            background-color: rgb(38 38 38); /* neutral-800 */
-            border-color: rgb(64 64 64); /* neutral-700 */
-            border-radius: 0.5rem;
+            background-color: rgb(209 213 219); /* bg-gray-300 */
+            border: 1px solid rgb(156 163 175); /* border-neutral-400 */
+            border-radius: 0.5rem; /* rounded-lg */
             min-height: 42px;
+            padding: 0.15rem 0.35rem;
+            font-size: 0.875rem; /* text-sm */
+            color: #111827;
+            transition: all 0.2s;
         }
+        
         .select2-container--default.select2-container--focus .select2-selection--multiple {
             border-color: #b3e600; /* neon-lime */
-            outline: 0;
-            box-shadow: 0 0 0 1px #b3e600;
-        }
-        .select2-container--default .select2-selection--multiple .select2-selection__choice {
-            background-color: #b3e600;
-            border-color: #99c200;
-            color: #171717; /* neutral-900 */
-        }
-        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
-            color: #171717;
-        }
-        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
-            background-color: #99c200;
-            color: #171717;
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(179, 230, 0, 0.3); /* focus:ring-neon-lime */
         }
+        
         .select2-dropdown {
+            background-color: rgb(209 213 219);
+            border: 1px solid rgb(156 163 175);
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            overflow: hidden;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            z-index: 9999;
+        }
+        
+        .select2-search--dropdown .select2-search__field {
+            background-color: #f3f4f6; /* bg-gray-100 */
+            border: 1px solid rgb(156 163 175);
+            border-radius: 0.375rem;
+            color: #111827;
+        }
+        
+        /* Pills (Etiquetas seleccionadas) */
+        .select2-container--default .select2-selection--multiple .select2-selection__choice {
+            background-color: #171717; /* neutral-900 */
+            border: 1px solid #000;
+            color: #b3e600; /* neon-lime text */
+            border-radius: 0.375rem;
+            padding: 2px 8px;
+            font-weight: 600;
+            display: flex;
+            flex-direction: row-reverse;
+            gap: 6px;
+            align-items: center;
+            margin-top: 5px;
+        }
+        
+        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+            color: #b3e600;
+            border-right: none;
+            border-left: 1px solid rgba(179, 230, 0, 0.3);
+            margin-right: 0;
+            padding-left: 6px;
+            font-weight: bold;
+        }
+        
+        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+            background-color: transparent;
+            color: #fff;
+        }
+        
+        .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
+            color: #111827;
+            margin-top: 8px;
+        }
+        
+        /* Dark mode overrides (para coincidir con dark:bg-neutral-800 dark:border-neutral-700 dark:text-white) */
+        html.dark .select2-container--default .select2-selection--multiple {
+            background-color: rgb(38 38 38); /* dark:bg-neutral-800 */
+            border-color: rgb(64 64 64); /* dark:border-neutral-700 */
+            color: #fff;
+        }
+        
+        html.dark .select2-dropdown {
             background-color: rgb(38 38 38);
             border-color: rgb(64 64 64);
-            color: white;
+            color: #fff;
         }
-        .select2-search--dropdown .select2-search__field {
-            background-color: rgb(23 23 23);
+        
+        html.dark .select2-search--dropdown .select2-search__field {
+            background-color: rgb(23 23 23); /* neutral-900 */
             border-color: rgb(64 64 64);
-            color: white;
+            color: #fff;
         }
+        
+        html.dark .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
+            color: #fff;
+        }
+        
+        html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
+            background-color: #b3e600; /* bg-neon-lime */
+            border-color: #99c200;
+            color: #171717; /* text-neutral-900 */
+        }
+        
+        html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+            color: #171717;
+            border-left: 1px solid rgba(0, 0, 0, 0.2);
+        }
+        
+        html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+            color: #000;
+        }
+        
+        /* Hover/Active states en dropdown */
         .select2-container--default .select2-results__option--selected {
-            background-color: rgb(64 64 64);
+            background-color: rgba(179, 230, 0, 0.2); /* neon-lime opaco */
         }
+        
         .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
             background-color: #b3e600;
             color: #171717;
         }
-        .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
-            color: white;
-        }
-        html:not(.dark) .select2-container--default .select2-selection--multiple {
-            background-color: rgb(209 213 219); /* gray-300 */
-            border-color: rgb(156 163 175); /* neutral-400 */
-        }
-        html:not(.dark) .select2-dropdown {
-            background-color: rgb(209 213 219);
-            border-color: rgb(156 163 175);
-            color: black;
-        }
-        html:not(.dark) .select2-search--dropdown .select2-search__field {
-            background-color: white;
-            color: black;
-        }
-        html:not(.dark) .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
-            color: black;
-        }
     </style>
     @endpush
 
diff --git a/resources/views/productos/edit.blade.php b/resources/views/productos/edit.blade.php
index ba85907..e664dce 100644
--- a/resources/views/productos/edit.blade.php
+++ b/resources/views/productos/edit.blade.php
@@ -83,66 +83,122 @@
     @push('styles')
     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
     <style>
-        /* Dark Theme & Neon Lime overrides for Select2 */
+        /* Estilos consistentes con el sistema para Select2 Múltiple */
         .select2-container--default .select2-selection--multiple {
-            background-color: rgb(38 38 38); /* neutral-800 */
-            border-color: rgb(64 64 64); /* neutral-700 */
-            border-radius: 0.5rem;
+            background-color: rgb(209 213 219); /* bg-gray-300 */
+            border: 1px solid rgb(156 163 175); /* border-neutral-400 */
+            border-radius: 0.5rem; /* rounded-lg */
             min-height: 42px;
+            padding: 0.15rem 0.35rem;
+            font-size: 0.875rem; /* text-sm */
+            color: #111827;
+            transition: all 0.2s;
         }
+        
         .select2-container--default.select2-container--focus .select2-selection--multiple {
             border-color: #b3e600; /* neon-lime */
-            outline: 0;
-            box-shadow: 0 0 0 1px #b3e600;
-        }
-        .select2-container--default .select2-selection--multiple .select2-selection__choice {
-            background-color: #b3e600;
-            border-color: #99c200;
-            color: #171717; /* neutral-900 */
-        }
-        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
-            color: #171717;
-        }
-        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
-            background-color: #99c200;
-            color: #171717;
+            outline: none;
+            box-shadow: 0 0 0 2px rgba(179, 230, 0, 0.3); /* focus:ring-neon-lime */
         }
+        
         .select2-dropdown {
+            background-color: rgb(209 213 219);
+            border: 1px solid rgb(156 163 175);
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            overflow: hidden;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            z-index: 9999;
+        }
+        
+        .select2-search--dropdown .select2-search__field {
+            background-color: #f3f4f6; /* bg-gray-100 */
+            border: 1px solid rgb(156 163 175);
+            border-radius: 0.375rem;
+            color: #111827;
+        }
+        
+        /* Pills (Etiquetas seleccionadas) */
+        .select2-container--default .select2-selection--multiple .select2-selection__choice {
+            background-color: #171717; /* neutral-900 */
+            border: 1px solid #000;
+            color: #b3e600; /* neon-lime text */
+            border-radius: 0.375rem;
+            padding: 2px 8px;
+            font-weight: 600;
+            display: flex;
+            flex-direction: row-reverse;
+            gap: 6px;
+            align-items: center;
+            margin-top: 5px;
+        }
+        
+        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+            color: #b3e600;
+            border-right: none;
+            border-left: 1px solid rgba(179, 230, 0, 0.3);
+            margin-right: 0;
+            padding-left: 6px;
+            font-weight: bold;
+        }
+        
+        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+            background-color: transparent;
+            color: #fff;
+        }
+        
+        .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
+            color: #111827;
+            margin-top: 8px;
+        }
+        
+        /* Dark mode overrides (para coincidir con dark:bg-neutral-800 dark:border-neutral-700 dark:text-white) */
+        html.dark .select2-container--default .select2-selection--multiple {
+            background-color: rgb(38 38 38); /* dark:bg-neutral-800 */
+            border-color: rgb(64 64 64); /* dark:border-neutral-700 */
+            color: #fff;
+        }
+        
+        html.dark .select2-dropdown {
             background-color: rgb(38 38 38);
             border-color: rgb(64 64 64);
-            color: white;
+            color: #fff;
         }
-        .select2-search--dropdown .select2-search__field {
-            background-color: rgb(23 23 23);
+        
+        html.dark .select2-search--dropdown .select2-search__field {
+            background-color: rgb(23 23 23); /* neutral-900 */
             border-color: rgb(64 64 64);
-            color: white;
+            color: #fff;
         }
+        
+        html.dark .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
+            color: #fff;
+        }
+        
+        html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
+            background-color: #b3e600; /* bg-neon-lime */
+            border-color: #99c200;
+            color: #171717; /* text-neutral-900 */
+        }
+        
+        html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+            color: #171717;
+            border-left: 1px solid rgba(0, 0, 0, 0.2);
+        }
+        
+        html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+            color: #000;
+        }
+        
+        /* Hover/Active states en dropdown */
         .select2-container--default .select2-results__option--selected {
-            background-color: rgb(64 64 64);
+            background-color: rgba(179, 230, 0, 0.2); /* neon-lime opaco */
         }
+        
         .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
             background-color: #b3e600;
             color: #171717;
         }
-        .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
-            color: white;
-        }
-        html:not(.dark) .select2-container--default .select2-selection--multiple {
-            background-color: rgb(209 213 219); /* gray-300 */
-            border-color: rgb(156 163 175); /* neutral-400 */
-        }
-        html:not(.dark) .select2-dropdown {
-            background-color: rgb(209 213 219);
-            border-color: rgb(156 163 175);
-            color: black;
-        }
-        html:not(.dark) .select2-search--dropdown .select2-search__field {
-            background-color: white;
-            color: black;
-        }
-        html:not(.dark) .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
-            color: black;
-        }
     </style>
     @endpush