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/SecosVendidos.vue

@@ -0,0 +1,74 @@
+<template>
+  <UCard class="brand-card border border-transparent">
+    <template #header>
+      <h2 class="text-xl font-bold brand-section-title">Café Seco - Inventario y Proyecciones</h2>
+    </template>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 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">QQ Seco por Vender</div>
+        <div class="text-2xl font-bold text-[var(--brand-text)]">
+          {{ formatNumber(data.total_qq_seco_por_vender) }} QQ
+        </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 Venta Promedio/QQ</div>
+        <div class="text-2xl font-bold text-green-400">
+          {{ formatCurrency(data.precio_venta_promedio_por_qq) }}
+        </div>
+        <div v-if="data.precio_venta_promedio_por_qq === 0" class="text-xs text-[var(--brand-text-muted)] mt-1">
+          Sin ventas registradas
+        </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 Compra Promedio/QQ</div>
+        <div class="text-2xl font-bold text-[var(--brand-text)]">
+          {{ formatCurrency(data.precio_compra_promedio_por_qq) }}
+        </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">Margen de Ganancia/QQ</div>
+        <div class="text-2xl font-bold" :class="margenColor">
+          {{ formatCurrency(data.margen_ganancia_por_qq) }}
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  data: {
+    total_qq_seco_por_vender: number
+    precio_venta_promedio_por_qq: number
+    precio_compra_promedio_por_qq: number
+    margen_ganancia_por_qq: number
+  }
+}>()
+
+const margenColor = computed(() => {
+  if (props.data.margen_ganancia_por_qq > 0) return 'text-green-400'
+  if (props.data.margen_ganancia_por_qq < 0) return 'text-red-400'
+  return 'text-[var(--brand-text)]'
+})
+
+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>