Feat: Agregar tab de Queries Comparativa en Metabase Debug

- Agregar contador de Queries Comparativa (4/4) en estadísticas
- Agregar nueva tab "Queries Comparativa" en metabase-debug
- Actualizar endpoint query-config para incluir queries comparativa
- Agregar computeds comparativaQueries y missingComparativaQueries
- Mostrar las 4 queries de comparativa con sus detalles
- Reorganizar grid de estadísticas para 6 columnas

La nueva tab permite visualizar y debuggear las queries:
- comparativa_datos_diarios_completos
- comparativa_totales_por_cosecha
- comparativa_datos_acumulados_por_dia
- comparativa_metadata_cosechas

nuxt4-app/app/pages/metabase-debug.vue

@@ -31,7 +31,7 @@
           </div>
         </template>
 
-        <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4">
+        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-3 sm:gap-4">
           <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-6 py-4">
             <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Total Cards</div>
             <div class="text-3xl font-bold text-[var(--brand-primary)]">{{ cards.length }}</div>
@@ -56,6 +56,11 @@
             <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Queries Informe</div>
             <div class="text-3xl font-bold" :class="informeQueries.length === 8 ? 'text-green-400' : 'text-orange-400'">{{ informeQueries.length }}/8</div>
           </div>
+
+          <div class="rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)] px-6 py-4">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Queries Comparativa</div>
+            <div class="text-3xl font-bold" :class="comparativaQueries.length === 4 ? 'text-green-400' : 'text-orange-400'">{{ comparativaQueries.length }}/4</div>
+          </div>
         </div>
       </UCard>
 
@@ -163,6 +168,34 @@
           </div>
         </template>
 
+        <!-- Comparativa Queries -->
+        <template #comparativa>
+          <div class="py-4 space-y-4">
+            <UAlert
+              color="info"
+              variant="soft"
+              title="Queries de Comparativa de Cosechas"
+              description="Estas son las 4 queries documentadas en METABASE_QUERIES_COMPARATIVA_COSECHAS.md y definidas en server/config/metabase-queries.ts"
+            />
+
+            <div class="grid grid-cols-1 gap-4">
+              <MetabaseCardDisplay
+                v-for="card in comparativaQueries"
+                :key="card.id"
+                :card="card"
+              />
+            </div>
+
+            <UAlert
+              v-if="comparativaQueries.length < 4"
+              color="warning"
+              variant="soft"
+              :title="`Faltan ${4 - comparativaQueries.length} queries por encontrar`"
+              :description="`Queries faltantes: ${missingComparativaQueries.join(', ')}`"
+            />
+          </div>
+        </template>
+
         <!-- Selected Card Detail -->
         <template #detail>
           <div v-if="selectedCard" class="py-4">
@@ -189,6 +222,7 @@ const selectedTab = ref(0)
 // Get expected query names from centralized config (via API)
 const expectedPanoramaNames = ref<string[]>([])
 const expectedInformeNames = ref<string[]>([])
+const expectedComparativaNames = ref<string[]>([])
 
 // Fetch query config on mount
 async function fetchQueryConfig() {
@@ -196,6 +230,7 @@ async function fetchQueryConfig() {
     const config = await $fetch('/api/metabase/query-config')
     expectedPanoramaNames.value = config.panorama
     expectedInformeNames.value = config.informe
+    expectedComparativaNames.value = config.comparativa
   } catch (e: any) {
     console.error('Error fetching query config:', e)
   }
@@ -226,6 +261,12 @@ const tabs = [
     icon: 'i-heroicons-document-chart-bar',
     slot: 'informe'
   },
+  {
+    key: 'comparativa',
+    label: 'Queries Comparativa',
+    icon: 'i-heroicons-calendar',
+    slot: 'comparativa'
+  },
   {
     key: 'detail',
     label: 'Detalle',
@@ -263,6 +304,13 @@ const informeQueries = computed(() => {
   )
 })
 
+// Find comparativa queries using centralized config
+const comparativaQueries = computed(() => {
+  return cards.value.filter(card =>
+    expectedComparativaNames.value.includes(card.name)
+  )
+})
+
 // Calculate missing queries
 const missingPanoramaQueries = computed(() => {
   const foundNames = panoramaQueries.value.map(q => q.name)
@@ -274,6 +322,11 @@ const missingInformeQueries = computed(() => {
   return expectedInformeNames.value.filter(name => !foundNames.includes(name))
 })
 
+const missingComparativaQueries = computed(() => {
+  const foundNames = comparativaQueries.value.map(q => q.name)
+  return expectedComparativaNames.value.filter(name => !foundNames.includes(name))
+})
+
 async function fetchCards() {
   loading.value = true
   error.value = null
@@ -295,7 +348,7 @@ function refreshCards() {
 
 function selectCard(card: any) {
   selectedCard.value = card
-  selectedTab.value = 4 // Switch to detail tab (now index 4 instead of 3)
+  selectedTab.value = 5 // Switch to detail tab (now index 5)
 }
 
 // Load data on mount

nuxt4-app/server/api/metabase/query-config.get.ts

@@ -2,11 +2,12 @@ import { METABASE_QUERIES } from '../../config/metabase-queries'
 
 /**
  * Expose query configuration to the frontend
- * Returns the expected query names for panorama and informe
+ * Returns the expected query names for panorama, informe and comparativa
  */
 export default defineEventHandler(() => {
   return {
     panorama: Object.values(METABASE_QUERIES.panorama),
-    informe: Object.values(METABASE_QUERIES.informe)
+    informe: Object.values(METABASE_QUERIES.informe),
+    comparativa: Object.values(METABASE_QUERIES.comparativa)
   }
 })