From 6568b9bfed76d89dfcda33d61c5e06c099f40279 Mon Sep 17 00:00:00 2001
From: Adrian Flores Cortes <adrian.flores2.contractor@bbva.com>
Date: Tue, 3 Feb 2026 19:25:56 -0600
Subject: [PATCH] feat(ux-ui): update layout, providers and config for UX
 remediation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/app/layouts/DashboardLayout.tsx | 173 ++++++++-----
 src/app/providers/index.tsx         |   5 +-
 src/index.css                       | 362 +++++++++++++++++++++++++++-
 tailwind.config.js                  | 226 ++++++++++++++---
 4 files changed, 662 insertions(+), 104 deletions(-)

diff --git a/src/app/layouts/DashboardLayout.tsx b/src/app/layouts/DashboardLayout.tsx
index 3ad45bd..698f28d 100644
--- a/src/app/layouts/DashboardLayout.tsx
+++ b/src/app/layouts/DashboardLayout.tsx
@@ -16,36 +16,73 @@ import {
   ChevronDown,
   LogOut,
   Users2,
+  Search,
 } from 'lucide-react';
 import { cn } from '@utils/cn';
 import { useUIStore } from '@stores/useUIStore';
 import { useAuthStore } from '@stores/useAuthStore';
 import { useIsMobile } from '@hooks/useMediaQuery';
+import { useFilteredNavigation, type NavigationItem } from '@hooks/useFilteredNavigation';
+import { ThemeToggle } from '@components/atoms/ThemeToggle';
+import { CommandPaletteWithRouter, useCommandPalette } from '@components/organisms/CommandPalette';
 
 interface DashboardLayoutProps {
   children: ReactNode;
 }
 
-const navigation = [
+/**
+ * Search button component that opens the command palette
+ */
+function SearchButton() {
+  const { open } = useCommandPalette();
+  const isMac = typeof navigator !== 'undefined' && navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+
+  return (
+    <button
+      onClick={open}
+      className={cn(
+        'flex items-center gap-2 rounded-lg px-3 py-1.5',
+        'border border-gray-200 bg-gray-50 text-gray-500',
+        'hover:bg-gray-100 hover:text-gray-700',
+        'dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400',
+        'dark:hover:bg-gray-600 dark:hover:text-gray-300',
+        'transition-colors duration-150'
+      )}
+      aria-label="Buscar"
+    >
+      <Search className="h-4 w-4" />
+      <span className="hidden text-sm sm:inline">Buscar...</span>
+      <kbd className="hidden rounded border border-gray-300 bg-white px-1.5 py-0.5 text-[10px] font-medium text-gray-500 sm:inline dark:border-gray-500 dark:bg-gray-600 dark:text-gray-400">
+        {isMac ? '⌘' : 'Ctrl'}+K
+      </kbd>
+    </button>
+  );
+}
+
+const navigation: NavigationItem[] = [
   { name: 'Dashboard', href: '/dashboard', icon: Home },
-  { name: 'Usuarios', href: '/users', icon: Users },
-  { name: 'Empresas', href: '/companies', icon: Building2 },
-  { name: 'Partners', href: '/partners', icon: Users2 },
-  { name: 'Inventario', href: '/inventory', icon: Package },
-  { name: 'Ventas', href: '/sales', icon: ShoppingCart },
-  { name: 'Compras', href: '/purchases', icon: ShoppingCart },
-  { name: 'Finanzas', href: '/financial', icon: Receipt },
-  { name: 'Proyectos', href: '/projects', icon: FolderKanban },
-  { name: 'CRM', href: '/crm', icon: UserCircle },
-  { name: 'RRHH', href: '/hr', icon: Users },
-  { name: 'Configuración', href: '/settings', icon: Settings },
+  { name: 'Usuarios', href: '/users', icon: Users, module: 'users' },
+  { name: 'Empresas', href: '/companies', icon: Building2, module: 'companies' },
+  { name: 'Partners', href: '/partners', icon: Users2, module: 'partners' },
+  { name: 'Inventario', href: '/inventory', icon: Package, module: 'inventory' },
+  { name: 'Ventas', href: '/sales', icon: ShoppingCart, module: 'sales' },
+  { name: 'Compras', href: '/purchases', icon: ShoppingCart, module: 'purchases' },
+  { name: 'Finanzas', href: '/financial', icon: Receipt, module: 'finance' },
+  { name: 'Proyectos', href: '/projects', icon: FolderKanban, module: 'projects' },
+  { name: 'CRM', href: '/crm', icon: UserCircle, module: 'crm' },
+  { name: 'RRHH', href: '/hr', icon: Users, module: 'hr' },
+  { name: 'Configuración', href: '/settings', icon: Settings, roles: ['admin', 'super_admin'] },
 ];
 
-export function DashboardLayout({ children }: DashboardLayoutProps) {
+/**
+ * Internal layout component (used inside CommandPaletteWithRouter)
+ */
+function DashboardLayoutInner({ children }: DashboardLayoutProps) {
   const location = useLocation();
   const isMobile = useIsMobile();
   const { sidebarOpen, sidebarCollapsed, toggleSidebar, setSidebarOpen, setIsMobile } = useUIStore();
   const { user, logout } = useAuthStore();
+  const { items: filteredNavigation, isLoading: isNavigationLoading } = useFilteredNavigation(navigation);
 
   useEffect(() => {
     setIsMobile(isMobile);
@@ -59,11 +96,11 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
   }, [location.pathname, isMobile, setSidebarOpen]);
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
       {/* Mobile sidebar backdrop */}
       {isMobile && sidebarOpen && (
         <div
-          className="fixed inset-0 z-40 bg-gray-600/75"
+          className="fixed inset-0 z-40 bg-gray-600/75 dark:bg-gray-900/80"
           onClick={() => setSidebarOpen(false)}
         />
       )}
@@ -71,7 +108,7 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
       {/* Sidebar */}
       <aside
         className={cn(
-          'fixed inset-y-0 left-0 z-50 flex flex-col bg-white shadow-lg transition-all duration-300',
+          'fixed inset-y-0 left-0 z-50 flex flex-col bg-white shadow-lg transition-all duration-300 dark:bg-gray-800 dark:shadow-gray-900/50',
           isMobile
             ? sidebarOpen
               ? 'translate-x-0'
@@ -82,17 +119,17 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
         )}
       >
         {/* Logo */}
-        <div className="flex h-16 items-center justify-between border-b px-4">
+        <div className="flex h-16 items-center justify-between border-b px-4 dark:border-gray-700">
           {(!sidebarCollapsed || isMobile) && (
             <Link to="/dashboard" className="flex items-center">
               <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-600">
                 <span className="text-lg font-bold text-white">E</span>
               </div>
-              <span className="ml-2 text-lg font-bold text-gray-900">ERP</span>
+              <span className="ml-2 text-lg font-bold text-gray-900 dark:text-white">ERP</span>
             </Link>
           )}
           {isMobile && (
-            <button onClick={() => setSidebarOpen(false)} className="p-2">
+            <button onClick={() => setSidebarOpen(false)} className="p-2 dark:text-gray-400" aria-label="Cerrar menú">
               <X className="h-5 w-5" />
             </button>
           )}
@@ -100,45 +137,53 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
 
         {/* Navigation */}
         <nav className="flex-1 space-y-1 overflow-y-auto p-2">
-          {navigation.map((item) => {
-            const isActive = location.pathname.startsWith(item.href);
-            return (
-              <Link
-                key={item.name}
-                to={item.href}
-                className={cn(
-                  'flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors',
-                  isActive
-                    ? 'bg-primary-50 text-primary-700'
-                    : 'text-gray-700 hover:bg-gray-100'
-                )}
-              >
-                <item.icon className={cn('h-5 w-5 flex-shrink-0', isActive ? 'text-primary-600' : 'text-gray-400')} />
-                {(!sidebarCollapsed || isMobile) && (
-                  <span className="ml-3">{item.name}</span>
-                )}
-              </Link>
-            );
-          })}
+          {isNavigationLoading ? (
+            <div className="flex items-center justify-center py-4">
+              <div className="h-5 w-5 animate-spin rounded-full border-2 border-primary-600 border-t-transparent" />
+            </div>
+          ) : (
+            filteredNavigation.map((item) => {
+              const isActive = location.pathname.startsWith(item.href);
+              const Icon = item.icon;
+              return (
+                <Link
+                  key={item.name}
+                  to={item.href}
+                  className={cn(
+                    'flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+                    isActive
+                      ? 'bg-primary-50 text-primary-700 dark:bg-primary-900/20 dark:text-primary-400'
+                      : 'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
+                  )}
+                >
+                  {Icon && <Icon className={cn('h-5 w-5 flex-shrink-0', isActive ? 'text-primary-600 dark:text-primary-400' : 'text-gray-400 dark:text-gray-500')} />}
+                  {(!sidebarCollapsed || isMobile) && (
+                    <span className="ml-3">{item.name}</span>
+                  )}
+                </Link>
+              );
+            })
+          )}
         </nav>
 
         {/* User menu */}
-        <div className="border-t p-4">
+        <div className="border-t p-4 dark:border-gray-700">
           {(!sidebarCollapsed || isMobile) ? (
             <div className="flex items-center">
-              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary-100 text-primary-700">
+              <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary-100 text-primary-700 dark:bg-primary-900/30 dark:text-primary-400">
                 {user?.firstName?.[0]}{user?.lastName?.[0]}
               </div>
               <div className="ml-3 flex-1 overflow-hidden">
-                <p className="truncate text-sm font-medium text-gray-900">
+                <p className="truncate text-sm font-medium text-gray-900 dark:text-white">
                   {user?.firstName} {user?.lastName}
                 </p>
-                <p className="truncate text-xs text-gray-500">{user?.email}</p>
+                <p className="truncate text-xs text-gray-500 dark:text-gray-400">{user?.email}</p>
               </div>
               <button
                 onClick={logout}
-                className="p-2 text-gray-400 hover:text-gray-600"
+                className="p-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
                 title="Cerrar sesión"
+                aria-label="Cerrar sesión"
               >
                 <LogOut className="h-4 w-4" />
               </button>
@@ -146,8 +191,9 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
           ) : (
             <button
               onClick={logout}
-              className="flex w-full items-center justify-center p-2 text-gray-400 hover:text-gray-600"
+              className="flex w-full items-center justify-center p-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
               title="Cerrar sesión"
+              aria-label="Cerrar sesión"
             >
               <LogOut className="h-5 w-5" />
             </button>
@@ -163,23 +209,28 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
         )}
       >
         {/* Top bar */}
-        <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-white px-4 shadow-sm">
-          <button
-            onClick={toggleSidebar}
-            className="rounded-lg p-2 hover:bg-gray-100"
-          >
-            <Menu className="h-5 w-5" />
-          </button>
+        <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-white px-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={toggleSidebar}
+              className="rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+              aria-label="Abrir menú"
+            >
+              <Menu className="h-5 w-5 dark:text-gray-400" />
+            </button>
+            <SearchButton />
+          </div>
 
           <div className="flex items-center space-x-4">
-            <button className="relative rounded-lg p-2 hover:bg-gray-100">
-              <Bell className="h-5 w-5 text-gray-500" />
+            <ThemeToggle />
+            <button className="relative rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700" aria-label="Notificaciones">
+              <Bell className="h-5 w-5 text-gray-500 dark:text-gray-400" />
               <span className="absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full bg-danger-500 text-xs text-white">
                 3
               </span>
             </button>
             <div className="flex items-center space-x-2">
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 text-sm font-medium text-primary-700">
+              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 text-sm font-medium text-primary-700 dark:bg-primary-900/30 dark:text-primary-400">
                 {user?.firstName?.[0]}{user?.lastName?.[0]}
               </div>
               <ChevronDown className="h-4 w-4 text-gray-400" />
@@ -193,3 +244,15 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {
     </div>
   );
 }
+
+/**
+ * Dashboard Layout with Command Palette support
+ * Wraps the layout with CommandPaletteWithRouter for Cmd+K / Ctrl+K navigation
+ */
+export function DashboardLayout({ children }: DashboardLayoutProps) {
+  return (
+    <CommandPaletteWithRouter>
+      <DashboardLayoutInner>{children}</DashboardLayoutInner>
+    </CommandPaletteWithRouter>
+  );
+}
diff --git a/src/app/providers/index.tsx b/src/app/providers/index.tsx
index 148fdb7..c472df0 100644
--- a/src/app/providers/index.tsx
+++ b/src/app/providers/index.tsx
@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { ToastContainer } from '@components/organisms/Toast';
+import { ThemeProvider } from '@shared/providers/ThemeProvider';
 
 interface AppProvidersProps {
   children: ReactNode;
@@ -7,9 +8,9 @@ interface AppProvidersProps {
 
 export function AppProviders({ children }: AppProvidersProps) {
   return (
-    <>
+    <ThemeProvider>
       {children}
       <ToastContainer />
-    </>
+    </ThemeProvider>
   );
 }
diff --git a/src/index.css b/src/index.css
index 530be9b..9588a2f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,39 +2,240 @@
 @tailwind components;
 @tailwind utilities;
 
+/* =============================================================================
+   CSS VARIABLES - Design Tokens para Runtime Theming
+   ============================================================================= */
+
 @layer base {
+  :root {
+    /* =========================================================================
+       RGB VALUES FOR TAILWIND ALPHA SUPPORT
+       Format: R G B (space-separated for rgb(var(--color) / alpha) syntax)
+       ========================================================================= */
+
+    /* Primary Palette - ISEM Blue (RGB values) */
+    --color-primary-50: 230 243 255;
+    --color-primary-100: 204 231 255;
+    --color-primary-200: 153 207 255;
+    --color-primary-300: 102 183 255;
+    --color-primary-400: 51 159 255;
+    --color-primary-500: 0 97 168;
+    --color-primary-600: 0 77 134;
+    --color-primary-700: 0 58 101;
+    --color-primary-800: 0 38 67;
+    --color-primary-900: 0 19 34;
+
+    /* Secondary Palette - ISEM Green (RGB values) */
+    --color-secondary-50: 230 255 245;
+    --color-secondary-100: 204 255 235;
+    --color-secondary-200: 153 255 214;
+    --color-secondary-300: 102 255 194;
+    --color-secondary-400: 51 255 173;
+    --color-secondary-500: 0 168 104;
+    --color-secondary-600: 0 134 83;
+    --color-secondary-700: 0 101 63;
+    --color-secondary-800: 0 67 42;
+    --color-secondary-900: 0 34 21;
+
+    /* Success Palette (RGB values) */
+    --color-success-50: 209 231 221;
+    --color-success-100: 209 231 221;
+    --color-success-500: 25 135 84;
+    --color-success-600: 21 115 71;
+    --color-success-700: 15 81 50;
+
+    /* Warning Palette (RGB values) */
+    --color-warning-50: 255 243 205;
+    --color-warning-100: 255 243 205;
+    --color-warning-500: 255 193 7;
+    --color-warning-600: 224 168 0;
+    --color-warning-700: 102 77 3;
+
+    /* Danger Palette (RGB values) */
+    --color-danger-50: 248 215 218;
+    --color-danger-100: 248 215 218;
+    --color-danger-500: 220 53 69;
+    --color-danger-600: 187 45 59;
+    --color-danger-700: 132 32 41;
+
+    /* Info Palette (RGB values) */
+    --color-info-50: 207 244 252;
+    --color-info-100: 207 244 252;
+    --color-info-500: 13 202 240;
+    --color-info-600: 10 162 192;
+    --color-info-700: 5 81 96;
+
+    /* Background Colors (RGB values) - Light Theme */
+    --color-background: 255 255 255;
+    --color-background-subtle: 248 249 251;
+    --color-background-muted: 241 243 245;
+    --color-background-emphasis: 233 236 239;
+
+    /* Foreground Colors (RGB values) - Light Theme */
+    --color-foreground: 33 37 41;
+    --color-foreground-muted: 108 117 125;
+    --color-foreground-subtle: 173 181 189;
+
+    /* Border Colors (RGB values) - Light Theme */
+    --color-border: 222 226 230;
+    --color-border-subtle: 233 236 239;
+    --color-border-emphasis: 206 212 218;
+
+    /* Surface Colors (RGB values) - Light Theme */
+    --color-surface: 249 250 251;
+    --color-surface-hover: 243 244 246;
+    --color-surface-card: 255 255 255;
+    --color-surface-popover: 255 255 255;
+    --color-surface-modal: 255 255 255;
+    --color-surface-dropdown: 255 255 255;
+
+    /* =========================================================================
+       LEGACY HEX VALUES (Backward Compatibility)
+       Keep these for direct CSS usage and gradual migration
+       ========================================================================= */
+
+    /* Colores de Marca ISEM (HEX) */
+    --color-brand-primary: #0061A8;
+    --color-brand-secondary: #00A868;
+
+    /* Colores Semanticos (HEX) */
+    --color-success-hex: #198754;
+    --color-success-light-hex: #D1E7DD;
+    --color-success-dark-hex: #0F5132;
+    --color-warning-hex: #FFC107;
+    --color-warning-light-hex: #FFF3CD;
+    --color-warning-dark-hex: #664D03;
+    --color-danger-hex: #DC3545;
+    --color-danger-light-hex: #F8D7DA;
+    --color-danger-dark-hex: #842029;
+    --color-info-hex: #0DCAF0;
+    --color-info-light-hex: #CFF4FC;
+    --color-info-dark-hex: #055160;
+
+    /* Semantic Aliases (HEX for legacy components) */
+    --color-success: #198754;
+    --color-success-light: #D1E7DD;
+    --color-success-dark: #0F5132;
+    --color-warning: #FFC107;
+    --color-warning-light: #FFF3CD;
+    --color-warning-dark: #664D03;
+    --color-danger: #DC3545;
+    --color-danger-light: #F8D7DA;
+    --color-danger-dark: #842029;
+    --color-info: #0DCAF0;
+    --color-info-light: #CFF4FC;
+    --color-info-dark: #055160;
+
+    /* Primary/Secondary HEX aliases */
+    --color-primary-hex: var(--color-brand-primary);
+    --color-secondary-hex: var(--color-brand-secondary);
+
+    /* Sombras Tema Claro */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+    /* Tipografia */
+    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
+
+    /* Animaciones */
+    --duration-fast: 150ms;
+    --duration-normal: 200ms;
+    --duration-slow: 300ms;
+    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+    /* Bordes */
+    --radius-sm: 0.125rem;
+    --radius-default: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-full: 9999px;
+  }
+
+  /* Tema Oscuro */
+  .dark {
+    /* Background Colors (RGB values) - Dark Theme */
+    --color-background: 27 30 35;
+    --color-background-subtle: 33 37 41;
+    --color-background-muted: 45 49 57;
+    --color-background-emphasis: 52 58 64;
+
+    /* Foreground Colors (RGB values) - Dark Theme */
+    --color-foreground: 236 236 236;
+    --color-foreground-muted: 160 160 160;
+    --color-foreground-subtle: 108 117 125;
+
+    /* Border Colors (RGB values) - Dark Theme */
+    --color-border: 73 80 87;
+    --color-border-subtle: 52 58 64;
+    --color-border-emphasis: 108 117 125;
+
+    /* Surface Colors (RGB values) - Dark Theme */
+    --color-surface: 31 41 55;
+    --color-surface-hover: 55 65 81;
+    --color-surface-card: 45 49 57;
+    --color-surface-popover: 52 58 64;
+    --color-surface-modal: 45 49 57;
+    --color-surface-dropdown: 52 58 64;
+
+    /* Sombras Tema Oscuro */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+    --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
+  }
+
   html {
     @apply antialiased;
+    font-family: var(--font-sans);
   }
 
   body {
-    @apply bg-gray-50 text-gray-900;
+    background-color: rgb(var(--color-background));
+    color: rgb(var(--color-foreground));
   }
 
   * {
-    @apply border-gray-200;
+    border-color: rgb(var(--color-border));
   }
 }
 
+/* =============================================================================
+   COMPONENTES BASE
+   ============================================================================= */
+
 @layer components {
+  /* Botones */
   .btn {
     @apply inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+    transition-duration: var(--duration-fast);
   }
 
   .btn-primary {
-    @apply bg-primary-600 text-white hover:bg-primary-700 focus-visible:ring-primary-500;
+    @apply bg-primary-500 text-white hover:bg-primary-600 focus-visible:ring-primary-500;
   }
 
   .btn-secondary {
-    @apply bg-secondary-100 text-secondary-900 hover:bg-secondary-200 focus-visible:ring-secondary-500;
+    @apply bg-secondary-500 text-white hover:bg-secondary-600 focus-visible:ring-secondary-500;
   }
 
   .btn-outline {
-    @apply border border-gray-300 bg-white hover:bg-gray-50 focus-visible:ring-gray-500;
+    @apply border border-border-emphasis bg-transparent hover:bg-background-muted focus-visible:ring-primary-500;
+    color: rgb(var(--color-foreground));
+  }
+
+  .btn-ghost {
+    @apply bg-transparent hover:bg-background-muted focus-visible:ring-primary-500;
+    color: rgb(var(--color-foreground));
   }
 
   .btn-danger {
-    @apply bg-danger-600 text-white hover:bg-danger-700 focus-visible:ring-danger-500;
+    @apply bg-danger-500 text-white hover:bg-danger-600 focus-visible:ring-danger-500;
   }
 
   .btn-sm {
@@ -49,31 +250,125 @@
     @apply h-12 px-6 text-lg;
   }
 
+  /* Inputs */
   .input {
-    @apply block w-full rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 shadow-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500;
+    @apply block w-full rounded-md border px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50;
+    background-color: rgb(var(--color-background));
+    border-color: rgb(var(--color-border));
+    color: rgb(var(--color-foreground));
+    transition-duration: var(--duration-fast);
+  }
+
+  .input::placeholder {
+    color: rgb(var(--color-foreground-subtle));
+  }
+
+  .input:focus {
+    border-color: rgb(var(--color-primary-500));
+    --tw-ring-color: rgb(var(--color-primary-500));
   }
 
   .input-error {
     @apply border-danger-500 focus:border-danger-500 focus:ring-danger-500;
   }
 
+  /* Labels */
   .label {
-    @apply block text-sm font-medium text-gray-700;
+    @apply block text-sm font-medium;
+    color: rgb(var(--color-foreground));
   }
 
+  /* Cards */
   .card {
-    @apply rounded-lg border bg-white shadow-sm;
+    @apply rounded-lg border;
+    background-color: rgb(var(--color-surface-card));
+    border-color: rgb(var(--color-border));
+    box-shadow: var(--shadow-default);
   }
 
+  /* Links */
   .link {
-    @apply text-primary-600 hover:text-primary-700 hover:underline;
+    @apply hover:underline;
+    color: rgb(var(--color-primary-500));
+    transition-duration: var(--duration-fast);
+  }
+
+  .link:hover {
+    color: rgb(var(--color-primary-600));
+  }
+
+  /* Badges */
+  .badge {
+    @apply inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium;
+  }
+
+  .badge-primary {
+    @apply bg-primary-100 text-primary-700;
+  }
+
+  .badge-secondary {
+    @apply bg-secondary-100 text-secondary-700;
+  }
+
+  .badge-success {
+    background-color: var(--color-success-light);
+    color: var(--color-success-dark);
+  }
+
+  .badge-warning {
+    background-color: var(--color-warning-light);
+    color: var(--color-warning-dark);
+  }
+
+  .badge-danger {
+    background-color: var(--color-danger-light);
+    color: var(--color-danger-dark);
+  }
+
+  .badge-info {
+    background-color: var(--color-info-light);
+    color: var(--color-info-dark);
+  }
+
+  /* Alerts */
+  .alert {
+    @apply rounded-lg border p-4;
+  }
+
+  .alert-success {
+    background-color: var(--color-success-light);
+    border-color: var(--color-success);
+    color: var(--color-success-dark);
+  }
+
+  .alert-warning {
+    background-color: var(--color-warning-light);
+    border-color: var(--color-warning);
+    color: var(--color-warning-dark);
+  }
+
+  .alert-danger {
+    background-color: var(--color-danger-light);
+    border-color: var(--color-danger);
+    color: var(--color-danger-dark);
+  }
+
+  .alert-info {
+    background-color: var(--color-info-light);
+    border-color: var(--color-info);
+    color: var(--color-info-dark);
   }
 }
 
+/* =============================================================================
+   UTILIDADES
+   ============================================================================= */
+
 @layer utilities {
+  /* Scrollbar personalizado */
   .scrollbar-thin {
     scrollbar-width: thin;
-    scrollbar-color: theme('colors.gray.300') transparent;
+    scrollbar-color: rgb(var(--color-border)) transparent;
   }
 
   .scrollbar-thin::-webkit-scrollbar {
@@ -86,7 +381,50 @@
   }
 
   .scrollbar-thin::-webkit-scrollbar-thumb {
-    background-color: theme('colors.gray.300');
+    background-color: rgb(var(--color-border));
     border-radius: 3px;
   }
+
+  /* Focus visible mejorado */
+  .focus-ring {
+    @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+    --tw-ring-color: rgb(var(--color-primary-500));
+  }
+
+  /* Texto truncado */
+  .truncate-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .truncate-3 {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* Transiciones suaves */
+  .transition-theme {
+    transition-property: background-color, border-color, color, fill, stroke;
+    transition-duration: var(--duration-normal);
+    transition-timing-function: var(--easing-default);
+  }
 }
+
+/* =============================================================================
+   MULTI-TENANT THEMING (Placeholder para override por tenant)
+   ============================================================================= */
+
+/*
+ * Los tenants pueden sobreescribir estas variables via JS:
+ * document.documentElement.style.setProperty('--color-brand-primary', '#FF0000');
+ *
+ * O cargar un CSS adicional con:
+ * [data-tenant="empresa-abc"] {
+ *   --color-brand-primary: #123456;
+ *   --color-brand-secondary: #654321;
+ * }
+ */
diff --git a/tailwind.config.js b/tailwind.config.js
index 9a1e4de..66abebc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,78 +1,234 @@
 /** @type {import('tailwindcss').Config} */
+
+// Helper function to create CSS variable color with alpha support
+const withAlpha = (variableName) => `rgb(var(${variableName}) / <alpha-value>)`
+
 export default {
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
+        // =================================================================
+        // CSS VARIABLE COLORS (Dynamic Theming Support)
+        // These reference CSS variables defined in index.css
+        // Supports alpha via: bg-primary-500/50, text-foreground/80, etc.
+        // =================================================================
+
+        // Primary Palette - Uses CSS Variables
         primary: {
-          50: '#f0f9ff',
-          100: '#e0f2fe',
-          200: '#bae6fd',
-          300: '#7dd3fc',
-          400: '#38bdf8',
-          500: '#0ea5e9',
-          600: '#0284c7',
-          700: '#0369a1',
-          800: '#075985',
-          900: '#0c4a6e',
-          950: '#082f49',
+          50: withAlpha('--color-primary-50'),
+          100: withAlpha('--color-primary-100'),
+          200: withAlpha('--color-primary-200'),
+          300: withAlpha('--color-primary-300'),
+          400: withAlpha('--color-primary-400'),
+          500: withAlpha('--color-primary-500'),
+          600: withAlpha('--color-primary-600'),
+          700: withAlpha('--color-primary-700'),
+          800: withAlpha('--color-primary-800'),
+          900: withAlpha('--color-primary-900'),
+          DEFAULT: withAlpha('--color-primary-500'),
         },
+        // Secondary Palette - Uses CSS Variables
         secondary: {
-          50: '#f8fafc',
-          100: '#f1f5f9',
-          200: '#e2e8f0',
-          300: '#cbd5e1',
-          400: '#94a3b8',
-          500: '#64748b',
-          600: '#475569',
-          700: '#334155',
-          800: '#1e293b',
-          900: '#0f172a',
-          950: '#020617',
+          50: withAlpha('--color-secondary-50'),
+          100: withAlpha('--color-secondary-100'),
+          200: withAlpha('--color-secondary-200'),
+          300: withAlpha('--color-secondary-300'),
+          400: withAlpha('--color-secondary-400'),
+          500: withAlpha('--color-secondary-500'),
+          600: withAlpha('--color-secondary-600'),
+          700: withAlpha('--color-secondary-700'),
+          800: withAlpha('--color-secondary-800'),
+          900: withAlpha('--color-secondary-900'),
+          DEFAULT: withAlpha('--color-secondary-500'),
         },
+        // Semantic Colors - Uses CSS Variables
         success: {
-          50: '#f0fdf4',
-          500: '#22c55e',
-          600: '#16a34a',
-          700: '#15803d',
+          50: withAlpha('--color-success-50'),
+          100: withAlpha('--color-success-100'),
+          500: withAlpha('--color-success-500'),
+          600: withAlpha('--color-success-600'),
+          700: withAlpha('--color-success-700'),
+          DEFAULT: withAlpha('--color-success-500'),
+          light: withAlpha('--color-success-50'),
+          dark: withAlpha('--color-success-700'),
         },
         warning: {
-          50: '#fffbeb',
-          500: '#f59e0b',
-          600: '#d97706',
-          700: '#b45309',
+          50: withAlpha('--color-warning-50'),
+          100: withAlpha('--color-warning-100'),
+          500: withAlpha('--color-warning-500'),
+          600: withAlpha('--color-warning-600'),
+          700: withAlpha('--color-warning-700'),
+          DEFAULT: withAlpha('--color-warning-500'),
+          light: withAlpha('--color-warning-50'),
+          dark: withAlpha('--color-warning-700'),
         },
         danger: {
-          50: '#fef2f2',
-          500: '#ef4444',
-          600: '#dc2626',
-          700: '#b91c1c',
+          50: withAlpha('--color-danger-50'),
+          100: withAlpha('--color-danger-100'),
+          500: withAlpha('--color-danger-500'),
+          600: withAlpha('--color-danger-600'),
+          700: withAlpha('--color-danger-700'),
+          DEFAULT: withAlpha('--color-danger-500'),
+          light: withAlpha('--color-danger-50'),
+          dark: withAlpha('--color-danger-700'),
+        },
+        info: {
+          50: withAlpha('--color-info-50'),
+          100: withAlpha('--color-info-100'),
+          500: withAlpha('--color-info-500'),
+          600: withAlpha('--color-info-600'),
+          700: withAlpha('--color-info-700'),
+          DEFAULT: withAlpha('--color-info-500'),
+          light: withAlpha('--color-info-50'),
+          dark: withAlpha('--color-info-700'),
+        },
+        // Neutral Colors - Uses CSS Variables (auto dark/light)
+        background: {
+          DEFAULT: withAlpha('--color-background'),
+          subtle: withAlpha('--color-background-subtle'),
+          muted: withAlpha('--color-background-muted'),
+          emphasis: withAlpha('--color-background-emphasis'),
+        },
+        foreground: {
+          DEFAULT: withAlpha('--color-foreground'),
+          muted: withAlpha('--color-foreground-muted'),
+          subtle: withAlpha('--color-foreground-subtle'),
+        },
+        border: {
+          DEFAULT: withAlpha('--color-border'),
+          subtle: withAlpha('--color-border-subtle'),
+          emphasis: withAlpha('--color-border-emphasis'),
+        },
+        surface: {
+          DEFAULT: withAlpha('--color-surface'),
+          hover: withAlpha('--color-surface-hover'),
+          card: withAlpha('--color-surface-card'),
+          popover: withAlpha('--color-surface-popover'),
+          modal: withAlpha('--color-surface-modal'),
+          dropdown: withAlpha('--color-surface-dropdown'),
+        },
+
+        // =================================================================
+        // STATIC HEX COLORS (Backward Compatibility)
+        // Keep these for legacy code - prefix with 'static-'
+        // =================================================================
+        'static-primary': {
+          50: '#E6F3FF',
+          100: '#CCE7FF',
+          200: '#99CFFF',
+          300: '#66B7FF',
+          400: '#339FFF',
+          500: '#0061A8',
+          600: '#004D86',
+          700: '#003A65',
+          800: '#002643',
+          900: '#001322',
+        },
+        'static-secondary': {
+          50: '#E6FFF5',
+          100: '#CCFFEB',
+          200: '#99FFD6',
+          300: '#66FFC2',
+          400: '#33FFAD',
+          500: '#00A868',
+          600: '#008653',
+          700: '#00653F',
+          800: '#00432A',
+          900: '#002215',
         },
       },
       fontFamily: {
-        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+        sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
+        mono: ['JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', 'monospace'],
+      },
+      fontSize: {
+        xs: ['0.75rem', { lineHeight: '1rem' }],
+        sm: ['0.875rem', { lineHeight: '1.25rem' }],
+        base: ['1rem', { lineHeight: '1.5rem' }],
+        lg: ['1.125rem', { lineHeight: '1.75rem' }],
+        xl: ['1.25rem', { lineHeight: '1.75rem' }],
+        '2xl': ['1.5rem', { lineHeight: '2rem' }],
+        '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
+        '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
       },
       spacing: {
         '18': '4.5rem',
         '88': '22rem',
       },
+      borderRadius: {
+        sm: '0.125rem',
+        DEFAULT: '0.25rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        xl: '0.75rem',
+        '2xl': '1rem',
+        '3xl': '1.5rem',
+      },
+      boxShadow: {
+        sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+        '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+      },
+      zIndex: {
+        dropdown: '1000',
+        sticky: '1020',
+        fixed: '1030',
+        modalBackdrop: '1040',
+        modal: '1050',
+        popover: '1060',
+        tooltip: '1070',
+        toast: '1080',
+      },
       animation: {
         'fade-in': 'fadeIn 0.2s ease-out',
+        'fade-out': 'fadeOut 0.2s ease-in',
         'slide-in': 'slideIn 0.2s ease-out',
+        'slide-out': 'slideOut 0.2s ease-in',
         'spin-slow': 'spin 2s linear infinite',
+        'pulse-slow': 'pulse 3s ease-in-out infinite',
       },
       keyframes: {
         fadeIn: {
           '0%': { opacity: '0' },
           '100%': { opacity: '1' },
         },
+        fadeOut: {
+          '0%': { opacity: '1' },
+          '100%': { opacity: '0' },
+        },
         slideIn: {
           '0%': { transform: 'translateY(-10px)', opacity: '0' },
           '100%': { transform: 'translateY(0)', opacity: '1' },
         },
+        slideOut: {
+          '0%': { transform: 'translateY(0)', opacity: '1' },
+          '100%': { transform: 'translateY(-10px)', opacity: '0' },
+        },
+      },
+      transitionDuration: {
+        '0': '0ms',
+        '75': '75ms',
+        '100': '100ms',
+        '150': '150ms',
+        '200': '200ms',
+        '300': '300ms',
+        '500': '500ms',
+        '700': '700ms',
+        '1000': '1000ms',
+      },
+      transitionTimingFunction: {
+        'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
+        'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
+        'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
       },
     },
   },