mejoras ui/Ux y refactorizacion del selector rapido de dateRange

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

@@ -14,17 +14,17 @@
           <MetricCard
             label="Inversión en Uva"
             :value="formatCurrency(metrics.inversionUva.value)"
-            variant="success"
-          />
-          <MetricCard
-            label="Inversión en Oreado"
-            :value="formatCurrency(metrics.inversionOreado.value)"
-            variant="success"
+            variant="danger"
           />
           <MetricCard
             label="Inversión en Mojado"
             :value="formatCurrency(metrics.inversionMojado.value)"
-            variant="success"
+            variant="info"
+          />
+          <MetricCard
+            label="Inversión en Oreado"
+            :value="formatCurrency(metrics.inversionOreado.value)"
+            variant="warning"
           />
           <MetricCard
             label="Total Invertido"
@@ -40,7 +40,7 @@
           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-[#1c140c] border-[#3a2a16] text-[var(--brand-text)]">
+          <div class="p-4 rounded-lg border transition-all bg-[#1c140c] border-red-600/40 text-red-400">
             <div class="flex items-center justify-between mb-1">
               <span class="text-xs uppercase tracking-wide opacity-80">Precio Promedio Ponderado Uva</span>
               <UButton
@@ -56,20 +56,23 @@
               <span class="text-sm font-bold opacity-70 ml-2">{{ formatPrecioUvaUnit() }}</span>
             </div>
           </div>
-          <MetricCard
-            label="Precio Promedio Ponderado Oreado"
-            :value="formatNumber(metrics.precioPromedioOreadoPorQq.value)"
-            unit="L./qq"
-          />
           <MetricCard
             label="Precio Promedio Ponderado Mojado"
             :value="formatNumber(metrics.precioPromedioMojadoPorQq.value)"
             unit="L./qq"
+            variant="info"
+          />
+          <MetricCard
+            label="Precio Promedio Ponderado Oreado"
+            :value="formatNumber(metrics.precioPromedioOreadoPorQq.value)"
+            unit="L./qq"
+            variant="warning"
           />
           <MetricCard
             label="Precio Promedio Ponderado qq Seco"
             :value="formatNumber(metrics.precioPromedioQqSeco.value)"
             unit="L./qq"
+            variant="primary"
           />
         </div>
       </div>
@@ -80,25 +83,25 @@
           Inversión Restante a Realizar
         </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <MetricCard
+            label="Inversión Restante Uva"
+            :value="formatCurrency(metrics.inversionRestanteUva.value)"
+            variant="danger"
+          />
+          <MetricCard
+            label="Inversión Restante Mojado"
+            :value="formatCurrency(metrics.inversionRestanteMojado.value)"
+            variant="info"
+          />
           <MetricCard
             label="Inversión Restante Oreado"
             :value="formatCurrency(metrics.inversionRestanteOreado.value)"
             variant="warning"
           />
-          <MetricCard
-            label="Inversión Restante Mojado"
-            :value="formatCurrency(metrics.inversionRestanteMojado.value)"
-            variant="warning"
-          />
-          <MetricCard
-            label="Inversión Restante Uva"
-            :value="formatCurrency(metrics.inversionRestanteUva.value)"
-            variant="warning"
-          />
           <MetricCard
             label="Inversión Restante Esperada"
             :value="formatCurrency(metrics.inversionRestanteEsperada.value)"
-            variant="danger"
+            variant="primary"
           />
         </div>
       </div>
@@ -116,7 +119,7 @@ const props = defineProps<{
 
 type UnitDisplay = 'lb' | 'qq' | 'both'
 
-const unitDisplay = ref<UnitDisplay>('both')
+const unitDisplay = ref<UnitDisplay>('lb')
 
 const unitDisplayLabel = computed(() => {
   switch (unitDisplay.value) {