Feat: Separar métricas de café verde del café seco en TotalesPesoComercio

- Agregar nueva sección "Café Verde (Inmaduro)" mostrando libras (lb_verde) como métrica principal
- Separar visualización: café seco (uva, mojado, oreado) vs café verde
- Actualizar gráfico de distribución para mostrar solo tipos de café seco
- Actualizar función copiarTexto() con nueva estructura y nota explicativa
- Agregar campo lb_verde a props del componente
- Incluir nota: "Café inmaduro - No produce peso seco"

nuxt4-app/app/components/comercios/TotalesPesoComercio.vue

@@ -27,10 +27,10 @@
     </template>
 
     <div class="space-y-6">
-      <!-- Totales por Tipo de Café -->
+      <!-- Café Seco (Uva, Mojado, Oreado) -->
       <div>
-        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Quintales Seco por Tipo</h3>
+        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Café Seco (QQ)</h3>
-        <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
+        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
           <!-- Uva -->
           <div class="rounded-lg border border-[var(--brand-border)] px-4 py-3"
                style="background: linear-gradient(135deg, var(--brand-surface) 0%, rgba(139, 69, 19, 0.1) 100%);">
@@ -76,21 +76,6 @@
             </div>
           </div>
 
-          <!-- Verde -->
-          <div class="rounded-lg border border-[var(--brand-border)] px-4 py-3"
-               style="background: linear-gradient(135deg, var(--brand-surface) 0%, rgba(34, 139, 34, 0.1) 100%);">
-            <div class="flex items-center gap-2 mb-2">
-              <div class="w-3 h-3 rounded-full" style="background-color: var(--coffee-verde, #228B22);"></div>
-              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Verde</div>
-            </div>
-            <div class="text-2xl font-bold text-[var(--brand-text)]">
-              {{ formatNumber(data.qq_verde) }}
-            </div>
-            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
-              QQ
-            </div>
-          </div>
-
           <!-- Total -->
           <div class="rounded-lg border-2 border-[var(--brand-primary)] bg-[var(--brand-surface)] px-4 py-3">
             <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-2">Total</div>
@@ -104,9 +89,44 @@
         </div>
       </div>
 
-      <!-- Visualización de Distribución por Tipo -->
+      <!-- Café Verde (Inmaduro) -->
+      <div>
+        <h3 class="text-lg font-semibold text-[var(--brand-primary)] mb-3">Café Verde (Inmaduro)</h3>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+          <!-- Libras Verde -->
+          <div class="rounded-lg border border-[var(--brand-border)] px-4 py-3 col-span-2"
+               style="background: linear-gradient(135deg, var(--brand-surface) 0%, rgba(34, 139, 34, 0.1) 100%);">
+            <div class="flex items-center gap-2 mb-2">
+              <div class="w-3 h-3 rounded-full" style="background-color: var(--coffee-verde, #228B22);"></div>
+              <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide">Café Verde</div>
+            </div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
+              {{ formatNumber(data.lb_verde) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              Libras (lb)
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-2 italic">
+              Café inmaduro - No produce peso seco
+            </div>
+          </div>
+
+          <!-- QQ Verde (Referencia) -->
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-4 py-3">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-2">Equivalente QQ</div>
+            <div class="text-2xl font-bold text-[var(--brand-text)]">
+              {{ formatNumber(data.qq_verde) }}
+            </div>
+            <div class="text-xs text-[var(--brand-text-muted)] mt-1">
+              QQ (referencia)
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Visualización de Distribución de Café Seco -->
       <div v-if="showChart" class="mt-6">
-        <h4 class="text-sm font-semibold text-[var(--brand-text)] mb-3">Distribución de Peso por Tipo</h4>
+        <h4 class="text-sm font-semibold text-[var(--brand-text)] mb-3">Distribución de Café Seco por Tipo</h4>
         <div class="space-y-2">
           <div class="flex items-center gap-3">
             <span class="text-xs w-20 text-[var(--brand-text-muted)]">Uva</span>
@@ -149,20 +169,6 @@
             </div>
             <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatNumber(data.qq_seco_oreado) }} QQ</span>
           </div>
-
-          <div class="flex items-center gap-3">
-            <span class="text-xs w-20 text-[var(--brand-text-muted)]">Verde</span>
-            <div class="flex-1 h-8 bg-[var(--brand-surface)] rounded-lg overflow-hidden border border-[var(--brand-border)]">
-              <div
-                class="h-full flex items-center justify-end px-2 transition-all duration-500"
-                style="background-color: var(--coffee-verde, #228B22);"
-                :style="{ width: `${calcularPorcentaje(data.qq_verde)}%` }"
-              >
-                <span class="text-xs font-semibold text-white">{{ calcularPorcentaje(data.qq_verde) }}%</span>
-              </div>
-            </div>
-            <span class="text-xs w-32 text-right text-[var(--brand-text)]">{{ formatNumber(data.qq_verde) }} QQ</span>
-          </div>
         </div>
       </div>
     </div>
@@ -175,6 +181,7 @@ const props = defineProps<{
     qq_seco_uva: number
     qq_seco_mojado: number
     qq_seco_oreado: number
+    lb_verde: number
     qq_verde: number
     total_qq_seco: number
   }
@@ -216,14 +223,17 @@ async function copiarTexto() {
 
   const texto = `⚖️ TOTALES DE PESO POR TIPO
 
-☕ QUINTALES SECO POR TIPO:
+☕ CAFÉ SECO (QQ):
    Uva: ${formatNumber(props.data.qq_seco_uva)} QQ (${calcularPorcentaje(props.data.qq_seco_uva)}%)
    Mojado: ${formatNumber(props.data.qq_seco_mojado)} QQ (${calcularPorcentaje(props.data.qq_seco_mojado)}%)
    Oreado: ${formatNumber(props.data.qq_seco_oreado)} QQ (${calcularPorcentaje(props.data.qq_seco_oreado)}%)
-   Verde: ${formatNumber(props.data.qq_verde)} QQ (${calcularPorcentaje(props.data.qq_verde)}%)
 
-📊 TOTAL:
+   Total QQ Seco: ${formatNumber(props.data.total_qq_seco)} QQ
-   Total QQ Seco: ${formatNumber(props.data.total_qq_seco)} QQ${footer}`
+
+🌱 CAFÉ VERDE (INMADURO):
+   Libras Verde: ${formatNumber(props.data.lb_verde)} lb
+   Equivalente: ${formatNumber(props.data.qq_verde)} QQ (referencia)
+   Nota: Café inmaduro - No produce peso seco${footer}`
 
   await navigator.clipboard.writeText(texto)
   alert('✅ Totales de Peso copiados al portapapeles')