diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css
index 1813a40..5369d4f 100644
--- a/nuxt4-app/app/assets/css/main.css
+++ b/nuxt4-app/app/assets/css/main.css
@@ -26,6 +26,19 @@
   --brand-accent: #ffe0a0;
   --brand-text: #fef9f0;
   --brand-text-muted: #d8c7a6;
+
+  /* Mapear variables UI neutral a coffee para que Nuxt UI use el tema café */
+  --ui-color-neutral-50: var(--color-coffee-50);
+  --ui-color-neutral-100: var(--color-coffee-100);
+  --ui-color-neutral-200: var(--color-coffee-200);
+  --ui-color-neutral-300: var(--color-coffee-300);
+  --ui-color-neutral-400: var(--color-coffee-400);
+  --ui-color-neutral-500: var(--color-coffee-500);
+  --ui-color-neutral-600: var(--color-coffee-600);
+  --ui-color-neutral-700: var(--color-coffee-700);
+  --ui-color-neutral-800: var(--color-coffee-800);
+  --ui-color-neutral-900: var(--color-coffee-900);
+  --ui-color-neutral-950: var(--color-coffee-950);
 }
 
 /* Critical: Prevent white flash on load */
diff --git a/nuxt4-app/app/components/app/AppSidebar.vue b/nuxt4-app/app/components/app/AppSidebar.vue
index 0dbcfd5..d215278 100644
--- a/nuxt4-app/app/components/app/AppSidebar.vue
+++ b/nuxt4-app/app/components/app/AppSidebar.vue
@@ -9,7 +9,7 @@
     :max-size="38"
     :toggle="{ color: 'neutral', variant: 'ghost', class: 'rounded-full hover:bg-[var(--brand-primary)]/10 text-[var(--brand-text-muted)] hover:text-[var(--brand-primary)]' }"
     :ui="{
-      wrapper: 'bg-[var(--brand-surface)] border-r border-[var(--brand-border)]'
+      root: 'bg-[var(--brand-surface)] border-r border-[var(--brand-border)]'
     }"
   >
     <template #header="{ collapsed: isCollapsed }">