diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css
index e21c4ee..6bbaa67 100644
--- a/nuxt4-app/app/assets/css/main.css
+++ b/nuxt4-app/app/assets/css/main.css
@@ -25,6 +25,7 @@
   --brand-primary: #e0c080;
   --brand-primary-strong: #c08040;
   --brand-accent: #ffe0a0;
+  --brand-success: #00dc82;    /* Nuxt green - éxito/confirmación */
   --brand-text: #fef9f0;
   --brand-text-muted: #d8c7a6;
 
diff --git a/nuxt4-app/app/composables/useTheme.ts b/nuxt4-app/app/composables/useTheme.ts
index 3d51658..3908613 100644
--- a/nuxt4-app/app/composables/useTheme.ts
+++ b/nuxt4-app/app/composables/useTheme.ts
@@ -26,6 +26,7 @@ export interface ThemeColors {
   primary: string
   primaryStrong: string
   accent: string
+  success: string        // Verde de éxito/confirmación
   text: string
   textMuted: string
 
@@ -52,6 +53,7 @@ export const defaultTheme: ThemeColors = {
   primary: '#e0c080',
   primaryStrong: '#c08040',
   accent: '#ffe0a0',
+  success: '#00dc82',        // Nuxt green
   text: '#fef9f0',
   textMuted: '#d8c7a6',
 
@@ -95,6 +97,7 @@ export const useTheme = () => {
       root.style.setProperty('--brand-primary', colors.primary)
       root.style.setProperty('--brand-primary-strong', colors.primaryStrong)
       root.style.setProperty('--brand-accent', colors.accent)
+      root.style.setProperty('--brand-success', colors.success)
       root.style.setProperty('--brand-text', colors.text)
       root.style.setProperty('--brand-text-muted', colors.textMuted)
 
@@ -203,7 +206,7 @@ export const useTheme = () => {
       // Validar que tenga todas las propiedades requeridas
       const requiredKeys: (keyof ThemeColors)[] = [
         'bg', 'surface', 'border', 'primary',
-        'primaryStrong', 'accent', 'text', 'textMuted',
+        'primaryStrong', 'accent', 'success', 'text', 'textMuted',
         'coffeeUva', 'coffeeOreado', 'coffeeMojado', 'coffeeVerde',
         'statusPendiente', 'statusPagado', 'statusAnulado'
       ]
diff --git a/nuxt4-app/app/pages/settings.vue b/nuxt4-app/app/pages/settings.vue
index d48c5c5..0887697 100644
--- a/nuxt4-app/app/pages/settings.vue
+++ b/nuxt4-app/app/pages/settings.vue
@@ -28,6 +28,7 @@ const presetThemes: Record<string, ThemeColors> = {
     primary: '#60a5fa',
     primaryStrong: '#3b82f6',
     accent: '#93c5fd',
+    success: '#00dc82',
     text: '#f0f4f8',
     textMuted: '#cbd5e1',
     // Colores de café (mantener consistentes)
@@ -47,6 +48,7 @@ const presetThemes: Record<string, ThemeColors> = {
     primary: '#86efac',
     primaryStrong: '#4ade80',
     accent: '#bbf7d0',
+    success: '#00dc82',
     text: '#f0fdf4',
     textMuted: '#d1fae5',
     // Colores de café (mantener consistentes)
@@ -66,6 +68,7 @@ const presetThemes: Record<string, ThemeColors> = {
     primary: '#a3a3a3',
     primaryStrong: '#737373',
     accent: '#d4d4d4',
+    success: '#00dc82',
     text: '#fafafa',
     textMuted: '#d4d4d4',
     // Colores de café (mantener consistentes)
@@ -379,6 +382,30 @@ watch(() => theme.value, (newTheme) => {
                 </div>
               </div>
 
+              <!-- Éxito/Confirmación -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Color de Éxito/Confirmación
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.success"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.success"
+                      placeholder="#00dc82"
+                      class="flex-1"
+                    />
+                  </div>
+                  <p class="text-xs text-[var(--brand-text-muted)] mt-1">
+                    Se usa en botones de confirmar, página seleccionada en sidebar, etc.
+                  </p>
+                </div>
+              </div>
+
               <!-- Texto y Texto Muted -->
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
@@ -418,6 +445,158 @@ watch(() => theme.value, (newTheme) => {
                 </div>
               </div>
 
+              <!-- Separador -->
+              <div class="pt-6 border-t border-[var(--brand-border)]">
+                <h4 class="text-sm font-semibold text-[var(--brand-text)] mb-4">
+                  Colores de Tipos de Café
+                </h4>
+              </div>
+
+              <!-- Café Uva y Oreado -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Café Uva
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.coffeeUva"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.coffeeUva"
+                      placeholder="#a855f7"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Café Oreado
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.coffeeOreado"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.coffeeOreado"
+                      placeholder="#f97316"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Café Mojado y Verde -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Café Mojado
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.coffeeMojado"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.coffeeMojado"
+                      placeholder="#06b6d4"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Café Verde
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.coffeeVerde"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.coffeeVerde"
+                      placeholder="#22c55e"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Separador -->
+              <div class="pt-6 border-t border-[var(--brand-border)]">
+                <h4 class="text-sm font-semibold text-[var(--brand-text)] mb-4">
+                  Colores de Estados
+                </h4>
+              </div>
+
+              <!-- Estado Pendiente y Pagado -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Estado Pendiente
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.statusPendiente"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.statusPendiente"
+                      placeholder="#f59e0b"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Estado Pagado
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.statusPagado"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.statusPagado"
+                      placeholder="#10b981"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <!-- Estado Anulado -->
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
+                    Estado Anulado
+                  </label>
+                  <div class="flex gap-2">
+                    <input
+                      v-model="theme.statusAnulado"
+                      type="color"
+                      class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
+                    />
+                    <UInput
+                      v-model="theme.statusAnulado"
+                      placeholder="#6b7280"
+                      class="flex-1"
+                    />
+                  </div>
+                </div>
+              </div>
+
               <!-- Acciones -->
               <div class="space-y-3 pt-4 border-t border-[var(--brand-border)]">
                 <!-- Botones principales -->