diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css
index 6bbaa67..cf48ae2 100644
--- a/nuxt4-app/app/assets/css/main.css
+++ b/nuxt4-app/app/assets/css/main.css
@@ -54,6 +54,20 @@
   --ui-color-neutral-800: var(--brand-surface);
   --ui-color-neutral-900: var(--brand-bg);
   --ui-color-neutral-950: var(--brand-bg);
+
+  /* Mapear variables UI success a nuestro color de éxito del tema
+     Esto permite que color="success" en componentes use --brand-success */
+  --ui-color-success-50: color-mix(in srgb, var(--brand-success) 5%, white);
+  --ui-color-success-100: color-mix(in srgb, var(--brand-success) 10%, white);
+  --ui-color-success-200: color-mix(in srgb, var(--brand-success) 20%, white);
+  --ui-color-success-300: color-mix(in srgb, var(--brand-success) 40%, white);
+  --ui-color-success-400: color-mix(in srgb, var(--brand-success) 60%, white);
+  --ui-color-success-500: var(--brand-success);
+  --ui-color-success-600: color-mix(in srgb, var(--brand-success) 80%, black);
+  --ui-color-success-700: color-mix(in srgb, var(--brand-success) 60%, black);
+  --ui-color-success-800: color-mix(in srgb, var(--brand-success) 40%, black);
+  --ui-color-success-900: color-mix(in srgb, var(--brand-success) 20%, black);
+  --ui-color-success-950: color-mix(in srgb, var(--brand-success) 10%, black);
 }
 
 /* Critical: Prevent white flash on load */