Feat: Aplicar colores del sistema de temas a componentes de métricas

- MetricCard: Actualizar variantes danger/warning/info para usar variables --coffee-*
  * danger ahora usa var(--coffee-uva) para métricas de café Uva
  * info ahora usa var(--coffee-mojado) para métricas de café Mojado
  * warning ahora usa var(--coffee-oreado) para métricas de café Oreado
  * Usar color-mix para crear transparencias en bordes (30%)

- TotalesIngresoCompra: Cards personalizadas de Uva usan var(--coffee-uva)
  * Total Uva Ingresada, Pagada y en Depósito con color dinámico
  * Bordes con 30% de opacidad usando color-mix

- TotalesMonetarios: Card de Precio Promedio Ponderado Uva usa var(--coffee-uva)

- TotalesVerde: Todas las métricas usan var(--coffee-verde) con variaciones
  * 6 cards con diferentes tonalidades de verde usando color-mix
  * Mezclas con white para crear variaciones más claras
  * Una mezcla con cyan (#20d5ff) para variación distintiva

Los valores numéricos de cada tipo de café ahora reflejan dinámicamente
los colores del tema seleccionado, mejorando la identidad visual.

nuxt4-app/app/components/MetricCard.vue

@@ -31,10 +31,10 @@ const variantClasses = computed(() => {
   const variants = {
     default: 'bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text)]',
     primary: 'bg-[var(--brand-surface)] border-[var(--brand-primary-strong)] text-[var(--brand-primary)]',
-    success: 'bg-[var(--brand-surface)] border-green-600/30 text-green-400',
+    success: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--brand-success),transparent_70%)] text-[var(--brand-success)]',
-    danger: 'bg-[var(--brand-surface)] border-red-600/30 text-red-400',
+    danger: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--coffee-uva),transparent_70%)] text-[var(--coffee-uva)]',
-    warning: 'bg-[var(--brand-surface)] border-yellow-600/30 text-yellow-400',
+    warning: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--coffee-oreado),transparent_70%)] text-[var(--coffee-oreado)]',
-    info: 'bg-[var(--brand-surface)] border-cyan-600/30 text-cyan-400'
+    info: 'bg-[var(--brand-surface)] border-[color:color-mix(in_srgb,var(--coffee-mojado),transparent_70%)] text-[var(--coffee-mojado)]'
   }
   return variants[props.variant]
 })

nuxt4-app/app/components/ingresos/TotalesIngresoCompra.vue

@@ -11,7 +11,13 @@
           Totales Generales (Pagado + Pendiente)
         </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-red-600/40 text-red-400">
+          <div
+            class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+            :style="{
+              borderColor: 'color-mix(in srgb, var(--coffee-uva) 30%, transparent)',
+              color: 'var(--coffee-uva)'
+            }"
+          >
             <div class="flex items-center justify-between mb-1">
               <span class="text-xs uppercase tracking-wide opacity-80">Total Uva Ingresada</span>
               <UButton
@@ -54,7 +60,13 @@
           Solo Pagados
         </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-red-600/40 text-red-400">
+          <div
+            class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+            :style="{
+              borderColor: 'color-mix(in srgb, var(--coffee-uva) 30%, transparent)',
+              color: 'var(--coffee-uva)'
+            }"
+          >
             <div class="flex items-center justify-between mb-1">
               <span class="text-xs uppercase tracking-wide opacity-80">Total Uva Pagada</span>
               <UButton
@@ -97,7 +109,13 @@
           Inventario en Depósito
         </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-red-600/40 text-red-400">
+          <div
+            class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+            :style="{
+              borderColor: 'color-mix(in srgb, var(--coffee-uva) 30%, transparent)',
+              color: 'var(--coffee-uva)'
+            }"
+          >
             <div class="flex items-center justify-between mb-1">
               <span class="text-xs uppercase tracking-wide opacity-80">Total Uva en Depósito</span>
               <UButton

nuxt4-app/app/components/ingresos/TotalesMonetarios.vue

@@ -40,7 +40,13 @@
           Precios Promedio Ponderados
         </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-red-600/40 text-red-400">
+          <div
+            class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+            :style="{
+              borderColor: 'color-mix(in srgb, var(--coffee-uva) 30%, transparent)',
+              color: 'var(--coffee-uva)'
+            }"
+          >
             <div class="flex items-center justify-between mb-1">
               <span class="text-xs uppercase tracking-wide opacity-80">Precio Promedio Ponderado Uva</span>
               <UButton

nuxt4-app/app/components/ingresos/TotalesVerde.vue

@@ -5,7 +5,13 @@
     </template>
 
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-green-700/40 text-green-300">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 40%, transparent)',
+          color: 'color-mix(in srgb, var(--coffee-verde) 90%, white)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto de Verde</span>
           <div class="flex items-baseline gap-2">
@@ -14,7 +20,13 @@
           </div>
         </div>
       </div>
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-green-600/40 text-green-400">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 35%, transparent)',
+          color: 'var(--coffee-verde)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Precio Promedio Ponderado Pagado</span>
           <div class="flex items-baseline gap-2">
@@ -23,7 +35,13 @@
           </div>
         </div>
       </div>
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-green-500/40 text-green-500">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 30%, transparent)',
+          color: 'color-mix(in srgb, var(--coffee-verde) 110%, white)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto de Verde en Depósito</span>
           <div class="flex items-baseline gap-2">
@@ -32,7 +50,13 @@
           </div>
         </div>
       </div>
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-emerald-600/40 text-emerald-400">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 35%, transparent)',
+          color: 'color-mix(in srgb, var(--coffee-verde) 95%, white)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Inversión en Verde Hasta la Fecha</span>
           <div class="flex items-baseline gap-2">
@@ -40,7 +64,13 @@
           </div>
         </div>
       </div>
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-lime-600/40 text-lime-400">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 38%, transparent)',
+          color: 'color-mix(in srgb, var(--coffee-verde) 105%, white)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Inversión Restante a Realizar en Verde</span>
           <div class="flex items-baseline gap-2">
@@ -48,7 +78,13 @@
           </div>
         </div>
       </div>
-      <div class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)] border-teal-600/40 text-teal-400">
+      <div
+        class="p-4 rounded-lg border transition-all bg-[var(--brand-surface)]"
+        :style="{
+          borderColor: 'color-mix(in srgb, var(--coffee-verde) 32%, transparent)',
+          color: 'color-mix(in srgb, var(--coffee-verde) 100%, #20d5ff)'
+        }"
+      >
         <div class="flex flex-col">
           <span class="text-xs uppercase tracking-wide opacity-80 mb-1">Total Lb Neto Comprado de Verde</span>
           <div class="flex items-baseline gap-2">