Feat: Extender sistema de temas con colores de café y estados

Cambios:
- Agregar documentación completa del sistema de temas en /settings
- Extender ThemeColors con 7 nuevas variables:
  * coffeeUva, coffeeOreado, coffeeMojado, coffeeVerde
  * statusPendiente, statusPagado, statusAnulado
- Actualizar useTheme.ts para aplicar nuevas variables CSS
- Actualizar main.css con definiciones de nuevas variables
- Actualizar temas predefinidos (azul, verde, carbón)
- Mantener colores de café y estados consistentes en todos los temas

Las nuevas variables permiten personalizar:
- Colores de identificación de tipos de café en gráficas
- Colores de estados de pago en tablas y badges

nuxt4-app/app/composables/useTheme.ts

@@ -19,6 +19,7 @@
  */
 
 export interface ThemeColors {
+  // Colores base
   bg: string
   surface: string
   border: string
@@ -27,12 +28,24 @@ export interface ThemeColors {
   accent: string
   text: string
   textMuted: string
+
+  // Colores para tipos de café
+  coffeeUva: string      // Purple - Café Uva
+  coffeeOreado: string   // Orange - Café Oreado
+  coffeeMojado: string   // Cyan - Café Mojado
+  coffeeVerde: string    // Green - Café Verde
+
+  // Colores para estados
+  statusPendiente: string  // Amarillo/naranja - Pendiente de pago
+  statusPagado: string     // Verde - Pagado
+  statusAnulado: string    // Rojo/gris - Anulado
 }
 
 /**
  * Tema por defecto - Café
  */
 export const defaultTheme: ThemeColors = {
+  // Colores base
   bg: '#14100b',
   surface: '#1f180f',
   border: '#3a2a16',
@@ -40,7 +53,18 @@ export const defaultTheme: ThemeColors = {
   primaryStrong: '#c08040',
   accent: '#ffe0a0',
   text: '#fef9f0',
-  textMuted: '#d8c7a6'
+  textMuted: '#d8c7a6',
+
+  // Colores para tipos de café
+  coffeeUva: '#a855f7',      // Purple
+  coffeeOreado: '#f97316',   // Orange
+  coffeeMojado: '#06b6d4',   // Cyan
+  coffeeVerde: '#22c55e',    // Green
+
+  // Colores para estados
+  statusPendiente: '#f59e0b', // Amber
+  statusPagado: '#10b981',    // Emerald
+  statusAnulado: '#6b7280'    // Gray
 }
 
 /**
@@ -64,6 +88,7 @@ export const useTheme = () => {
       const colors = themeColors || theme.value
       const root = document.documentElement
 
+      // Colores base
       root.style.setProperty('--brand-bg', colors.bg)
       root.style.setProperty('--brand-surface', colors.surface)
       root.style.setProperty('--brand-border', colors.border)
@@ -72,6 +97,17 @@ export const useTheme = () => {
       root.style.setProperty('--brand-accent', colors.accent)
       root.style.setProperty('--brand-text', colors.text)
       root.style.setProperty('--brand-text-muted', colors.textMuted)
+
+      // Colores para tipos de café
+      root.style.setProperty('--coffee-uva', colors.coffeeUva)
+      root.style.setProperty('--coffee-oreado', colors.coffeeOreado)
+      root.style.setProperty('--coffee-mojado', colors.coffeeMojado)
+      root.style.setProperty('--coffee-verde', colors.coffeeVerde)
+
+      // Colores para estados
+      root.style.setProperty('--status-pendiente', colors.statusPendiente)
+      root.style.setProperty('--status-pagado', colors.statusPagado)
+      root.style.setProperty('--status-anulado', colors.statusAnulado)
     }
   }
 
@@ -167,7 +203,9 @@ export const useTheme = () => {
       // Validar que tenga todas las propiedades requeridas
       const requiredKeys: (keyof ThemeColors)[] = [
         'bg', 'surface', 'border', 'primary',
-        'primaryStrong', 'accent', 'text', 'textMuted'
+        'primaryStrong', 'accent', 'text', 'textMuted',
+        'coffeeUva', 'coffeeOreado', 'coffeeMojado', 'coffeeVerde',
+        'statusPendiente', 'statusPagado', 'statusAnulado'
       ]
 
       for (const key of requiredKeys) {