diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css
index 5369d4f..2129d9b 100644
--- a/nuxt4-app/app/assets/css/main.css
+++ b/nuxt4-app/app/assets/css/main.css
@@ -27,18 +27,19 @@
   --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);
+  /* Mapear variables UI neutral a nuestras variables dinámicas --brand-*
+     Esto permite que los componentes de Nuxt UI respondan a cambios de tema */
+  --ui-color-neutral-50: var(--brand-bg);
+  --ui-color-neutral-100: var(--brand-bg);
+  --ui-color-neutral-200: var(--brand-surface);
+  --ui-color-neutral-300: var(--brand-border);
+  --ui-color-neutral-400: var(--brand-border);
+  --ui-color-neutral-500: var(--brand-primary-strong);
+  --ui-color-neutral-600: var(--brand-primary);
+  --ui-color-neutral-700: var(--brand-primary);
+  --ui-color-neutral-800: var(--brand-text-muted);
+  --ui-color-neutral-900: var(--brand-text);
+  --ui-color-neutral-950: var(--brand-text);
 }
 
 /* Critical: Prevent white flash on load */