i forgor 💀

src/components/Sidebar.tsx

@@ -28,43 +28,40 @@ export default function Sidebar({ isCollapsed: externalIsCollapsed, onToggleColl
     return () => window.removeEventListener('resize', checkDesktop)
   }, [])
 
-  const handleButtonClick = () => {
-    if (isDesktop) {
-      toggleCollapse()
-    } else {
-      setIsMobileMenuOpen(true)
-    }
-  }
-
   return (
     <>
-      {/* Botón flotante unificado */}
+      {/* Botón del menú móvil */}
       <button
         type="button"
-        className="fixed top-4 left-4 z-50 p-2 rounded-md shadow-lg border border-gray-200 bg-white"
-        onClick={handleButtonClick}
+        className="lg:hidden fixed top-4 left-4 z-50 p-2 rounded-md shadow-lg border border-gray-200 bg-white"
+        onClick={() => setIsMobileMenuOpen(true)}
       >
-        {isDesktop ? (
-          isCollapsed ? (
-            <ChevronRight className="h-6 w-6 text-gray-600" />
-          ) : (
-            <ChevronLeft className="h-6 w-6 text-gray-600" />
-          )
-        ) : (
-          <Menu className="h-6 w-6 text-gray-600" />
-        )}
+        <Menu className="h-6 w-6 text-gray-600" />
       </button>
 
       {/* Sidebar de escritorio */}
       {isDesktop && (
         <div 
-          className="fixed inset-y-0 left-0 z-50 flex flex-col transition-all duration-300"
+          className="fixed inset-y-0 left-0 z-50 flex flex-col"
           style={{ width: isCollapsed ? '4rem' : '18rem' }}
         >
           <div 
             className="flex grow flex-col overflow-y-auto border-r border-gray-200 bg-white shadow-sm"
           >
-            {/* Botón de toggle removido, ahora flotante */}
+            {/* Botón de toggle */}
+            <div className={`flex ${isCollapsed ? 'justify-center' : 'justify-end'} p-4 border-b border-gray-200`}>
+              <button
+                onClick={toggleCollapse}
+                className="p-1.5 rounded-md hover:bg-gray-100 transition-colors"
+                title={isCollapsed ? 'Expandir sidebar' : 'Colapsar sidebar'}
+              >
+                {isCollapsed ? (
+                  <ChevronRight className="h-4 w-4 text-gray-600" />
+                ) : (
+                  <ChevronLeft className="h-4 w-4 text-gray-600" />
+                )}
+              </button>
+            </div>
             
             <SidebarHeader isCollapsed={isCollapsed} />
             <SidebarNavigation isCollapsed={isCollapsed} />

src/components/sidebar/SidebarFooter.tsx

@@ -25,17 +25,16 @@ export default function SidebarFooter({ onItemClick, isCollapsed = false }: Side
       }}
     >
       <div className={`space-y-2 ${isCollapsed ? 'w-full flex flex-col items-center' : ''}`}>
-        {!isCollapsed && (
-          <Link
-            href="/account"
-            className="flex items-center space-x-3 px-3 py-2 rounded-lg text-sm transition-colors hover:bg-gray-50"
-            style={{ color: COLOR_PALETTE.gray[600] }}
-            onClick={onItemClick}
-          >
-            <Settings className="w-4 h-4" style={{ color: COLOR_PALETTE.gray[500] } as React.CSSProperties} />
-            <span>Configuración de Cuenta</span>
-          </Link>
-        )}
+        <Link
+          href="/account"
+          className={`flex items-center ${isCollapsed ? 'justify-center px-2' : 'space-x-3 px-3'} w-full py-2 rounded-lg text-sm transition-colors hover:bg-gray-50`}
+          style={{ color: COLOR_PALETTE.gray[600] }}
+          onClick={onItemClick}
+          title={isCollapsed ? 'Configuración de Cuenta' : undefined}
+        >
+          <Settings className="w-4 h-4" style={{ color: COLOR_PALETTE.gray[500] } as React.CSSProperties} />
+          {!isCollapsed && <span>Configuración de Cuenta</span>}
+        </Link>
         
         <button
           onClick={() => {