feat: restaurar panorama facturador con nueva arquitectura basada en Metabase

- Crear endpoint /api/metabase/panorama.post.ts que ejecuta las 9 queries en paralelo
- Restaurar y adaptar panorama.vue para usar el nuevo endpoint
- Crear componentes auxiliares: SecosVendidos, TotalesIngresoCompra, TotalesMonetarios, TotalesVerde, MetricBox, RechazosRechazoCard
- Adaptar RechazosSubproductos para recibir data directamente de Metabase
- Toda la transformación de datos ocurre en las queries SQL de Metabase
- Sin uso de stores ni composables de métricas
- Agregar documentación de queries en archivos MD

nuxt4-app/app/components/TotalesVerde.vue

@@ -0,0 +1,81 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <template #header>
+      <h2 class="text-xl font-bold brand-section-title">Café Verde</h2>
+    </template>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
+        <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">LB Neto Verde Total</div>
+        <div class="text-2xl font-bold text-[var(--brand-text)]">
+          {{ formatNumber(data.total_lb_neto_verde) }} lb
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
+        <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">LB Neto Comprado</div>
+        <div class="text-2xl font-bold text-green-400">
+          {{ formatNumber(data.total_lb_neto_comprado_verde) }} lb
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
+        <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">LB Neto en Depósito</div>
+        <div class="text-2xl font-bold text-yellow-400">
+          {{ formatNumber(data.total_lb_neto_verde_deposito) }} lb
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
+        <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Precio Promedio Pagado</div>
+        <div class="text-2xl font-bold text-[var(--brand-text)]">
+          {{ formatCurrency(data.precio_promedio_verde_pagado) }}/lb
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
+        <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Inversión Hasta la Fecha</div>
+        <div class="text-2xl font-bold text-green-400">
+          {{ formatCurrency(data.inversion_verde_hasta_fecha) }}
+        </div>
+      </div>
+
+      <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-4 py-3">
+        <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Inversión Restante</div>
+        <div class="text-2xl font-bold text-yellow-400">
+          {{ formatCurrency(data.inversion_restante_verde) }}
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  data: {
+    total_lb_neto_verde: number
+    precio_promedio_verde_pagado: number
+    total_lb_neto_verde_deposito: number
+    inversion_verde_hasta_fecha: number
+    inversion_restante_verde: number
+    total_lb_neto_comprado_verde: number
+  }
+}>()
+
+const formatNumber = (value: number) => {
+  return new Intl.NumberFormat('es-HN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value)
+}
+
+const formatCurrency = (value: number) => {
+  if (!value) return 'L 0.00'
+  return new Intl.NumberFormat('es-HN', {
+    style: 'currency',
+    currency: 'HNL',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value).replace('HNL', 'L')
+}
+</script>