Refactor: Adaptar todos los componentes al sistema de temas

- Reemplazar colores hardcoded del tema café con variables --brand-*
  - #c08040 → var(--brand-primary-strong)
  - #d99a56 → var(--brand-primary)
  - #f0c07c → var(--brand-accent)
  - #1c140c → var(--brand-surface)
  - #3a2a16 → var(--brand-border)
  - #1b1209, #14100b → var(--brand-bg)

- Reemplazar colores de tipos de café con variables --coffee-*
  - #a855f7 → var(--coffee-uva)
  - #f97316 → var(--coffee-oreado)
  - #06b6d4 → var(--coffee-mojado)
  - #22c55e → var(--coffee-verde)

- Reemplazar clases gray-scale de Tailwind con variables de tema
  - text-gray-400, text-gray-500 → text-[var(--brand-text-muted)]
  - bg-gray-700/30 → bg-[var(--brand-surface)]

- Todos los componentes ahora responden dinámicamente a cambios de tema

Archivos adaptados:
- Páginas: error, informe-ingresos, panorama, explorer, metabase-debug, profile, notifications, settings
- Componentes de ingresos: GraficaSerieIngresos, GraficaSerieInversion, GraficaDinamicaPagadoDeposito, GraficaAcumuladoresUva, TotalesIngresoCompra, TotalesMonetarios, TotalesVerde, SecosVendidos, TopClientes, VistaTablaIngresos, VistaTablaIngresosConClientes, FiltrosActivos
- Componentes de comparativa: CosechasHeatmap, CosechasPorTipo, CosechasEvolucion, CosechasTotales
- Componentes de UI: ClienteSelector, DateRangeSelector, MetadatosCard, MaintenanceMode
- Componentes de auth: UserAvatar, UserMetadata
- Componentes de clientes: ClienteCard, VistaTablaClientes
- Componentes de rechazos: RechazoCard, RechazosRechazoCard, RechazosSubproductos
- Componentes de metabase: MetabaseCardDisplay, MetabaseCardsTable

nuxt4-app/app/error.vue

@@ -37,20 +37,20 @@ const errorMessage = computed(() => {
 
           <!-- Error Code -->
           <div>
-            <h1 class="text-6xl font-bold text-gray-900 dark:text-white mb-2">
+            <h1 class="text-6xl font-bold text-[var(--brand-text)] mb-2">
               {{ error.statusCode || '500' }}
             </h1>
-            <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-3">
+            <h2 class="text-2xl font-semibold text-[var(--brand-text)] mb-3">
               {{ errorMessage.title }}
             </h2>
-            <p class="text-gray-600 dark:text-gray-400">
+            <p class="text-[var(--brand-text-muted)]">
               {{ errorMessage.description }}
             </p>
           </div>
 
           <!-- Error Details (dev mode) -->
-          <div v-if="error.message && $config.public.dev" class="mt-4 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg text-left">
-            <p class="text-xs font-mono text-gray-600 dark:text-gray-400 break-all">
+          <div v-if="error.message && $config.public.dev" class="mt-4 p-4 bg-[var(--brand-surface)] rounded-lg text-left border border-[var(--brand-border)]">
+            <p class="text-xs font-mono text-[var(--brand-text-muted)] break-all">
               {{ error.message }}
             </p>
           </div>