Fix frontend 1

frontend/src/components/layout/AppShell/AppShell.tsx

@@ -205,6 +205,7 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
               isOpen={isSidebarOpen}
               isCollapsed={isSidebarCollapsed}
               onClose={() => setIsSidebarOpen(false)}
+              onToggleCollapse={toggleSidebar}
               className="z-[var(--z-fixed)]"
             />
             
@@ -223,15 +224,13 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
         <main
           className={clsx(
             'flex-1 flex flex-col transition-all duration-300 ease-in-out',
-            // Adjust margins based on sidebar state
-            shouldShowSidebar && isAuthenticated && {
-              'lg:ml-[var(--sidebar-width)]': !isSidebarCollapsed,
-              'lg:ml-16': isSidebarCollapsed,
-            },
             // Add header offset
             shouldShowHeader && 'pt-[var(--header-height)]',
+            // Adjust margins based on sidebar state
+            shouldShowSidebar && isAuthenticated && !isSidebarCollapsed && 'lg:ml-[var(--sidebar-width)]',
+            shouldShowSidebar && isAuthenticated && isSidebarCollapsed && 'lg:ml-[var(--sidebar-collapsed-width)]',
             // Add padding to content
-            padded && 'p-4 lg:p-6'
+            padded && 'px-4 lg:px-6 pb-4 lg:pb-6'
           )}
           role="main"
           aria-label="Contenido principal"
@@ -247,10 +246,8 @@ export const AppShell = forwardRef<AppShellRef, AppShellProps>(({
           showPrivacyLinks={true}
           className={clsx(
             'transition-all duration-300 ease-in-out',
-            shouldShowSidebar && isAuthenticated && {
-              'lg:ml-[var(--sidebar-width)]': !isSidebarCollapsed,
-              'lg:ml-16': isSidebarCollapsed,
-            }
+            shouldShowSidebar && isAuthenticated && !isSidebarCollapsed && 'lg:ml-[var(--sidebar-width)]',
+            shouldShowSidebar && isAuthenticated && isSidebarCollapsed && 'lg:ml-[var(--sidebar-collapsed-width)]'
           )}
         />
       )}

frontend/src/components/layout/Sidebar/Sidebar.tsx

@@ -40,6 +40,10 @@ export interface SidebarProps {
    * Callback when sidebar is closed (mobile)
    */
   onClose?: () => void;
+  /**
+   * Callback when sidebar collapse state is toggled (desktop)
+   */
+  onToggleCollapse?: () => void;
   /**
    * Custom navigation items
    */
@@ -110,6 +114,7 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
   isOpen = false,
   isCollapsed = false,
   onClose,
+  onToggleCollapse,
   customItems,
   showCollapseButton = true,
   showFooter = true,
@@ -340,12 +345,12 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
         disabled={item.disabled}
         data-path={item.path}
         className={clsx(
-          'w-full p-3 rounded-lg transition-all duration-200',
+          'w-full rounded-lg transition-all duration-200',
           'focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20',
           isActive && 'bg-[var(--color-primary)]/10 border-l-2 border-[var(--color-primary)]',
           !isActive && 'hover:bg-[var(--bg-secondary)]',
           item.disabled && 'opacity-50 cursor-not-allowed',
-          isCollapsed && !hasChildren && 'flex justify-center p-3'
+          isCollapsed && !hasChildren ? 'flex justify-center items-center p-2 mx-1' : 'p-3'
         )}
         aria-expanded={hasChildren ? isExpanded : undefined}
         aria-current={isActive ? 'page' : undefined}
@@ -388,29 +393,29 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
           'bg-[var(--bg-primary)] border-r border-[var(--border-primary)]',
           'transition-all duration-300 ease-in-out z-[var(--z-fixed)]',
           'hidden lg:flex lg:flex-col',
-          isCollapsed ? 'w-16' : 'w-[var(--sidebar-width)]',
+          isCollapsed ? 'w-[var(--sidebar-collapsed-width)]' : 'w-[var(--sidebar-width)]',
           className
         )}
         aria-label="Navegación principal"
       >
         {/* Navigation */}
-        <nav className="flex-1 p-4 overflow-y-auto">
-          <ul className="space-y-2">
+        <nav className={clsx('flex-1 overflow-y-auto', isCollapsed ? 'px-1 py-4' : 'p-4')}>
+          <ul className={clsx(isCollapsed ? 'space-y-1' : 'space-y-2')}>
             {visibleItems.map(item => renderItem(item))}
           </ul>
         </nav>
 
         {/* Collapse button */}
         {showCollapseButton && (
-          <div className="p-4 border-t border-[var(--border-primary)]">
+          <div className={clsx('border-t border-[var(--border-primary)]', isCollapsed ? 'p-2' : 'p-4')}>
             <Button
               variant="ghost"
               size="sm"
-              onClick={() => {
-                // This should be handled by parent component
-                console.log('Toggle collapse');
-              }}
-              className="w-full flex items-center justify-center"
+              onClick={onToggleCollapse}
+              className={clsx(
+                'w-full flex items-center justify-center',
+                isCollapsed ? 'p-2' : 'px-4 py-2'
+              )}
               aria-label={isCollapsed ? 'Expandir sidebar' : 'Contraer sidebar'}
             >
               {isCollapsed ? (