From e85078f6c8f8e424cffd5f633c7538adddb6b12e Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 29 Oct 2025 18:06:48 -0600
Subject: [PATCH] Refactor: unificar estilos de cards de Metabase Debug con
 Panorama e Informe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Aplicar clase brand-card a todas las cards principales
- Usar colores de variables CSS (--brand-text, --brand-text-muted, --brand-primary)
- Estilizar cards de estadísticas con border-[#3a2a16] y bg-[#1c140c]
- Actualizar estilos de tablas, modales y formularios
- Aplicar estilo consistente a botones principales con color de marca #c08040
---
 .../metabase/MetabaseCardDisplay.vue          | 62 +++++++++----------
 .../metabase/MetabaseCardsTable.vue           | 33 +++++-----
 nuxt4-app/app/pages/metabase-debug.vue        | 53 ++++++++--------
 3 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue b/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
index 6400172..fc7f8e0 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
@@ -1,10 +1,10 @@
 <template>
-  <UCard>
+  <UCard class="brand-card border border-transparent">
     <template #header>
       <div class="flex justify-between items-start">
         <div class="flex-1">
-          <h3 class="text-lg font-semibold">{{ card.name }}</h3>
-          <p v-if="card.description" class="text-sm text-gray-500 dark:text-gray-400 mt-1">
+          <h3 class="text-lg font-semibold brand-section-title">{{ card.name }}</h3>
+          <p v-if="card.description" class="text-sm text-[var(--brand-text-muted)] mt-1">
             {{ card.description }}
           </p>
         </div>
@@ -16,21 +16,21 @@
 
     <!-- Card Details -->
     <div class="space-y-3">
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-[var(--brand-text)]">
         <div>
-          <span class="font-medium">Database ID:</span>
+          <span class="font-medium text-[var(--brand-text-muted)]">Database ID:</span>
           <span class="ml-2">{{ card.database_id }}</span>
         </div>
         <div>
-          <span class="font-medium">Query Type:</span>
+          <span class="font-medium text-[var(--brand-text-muted)]">Query Type:</span>
           <span class="ml-2">{{ card.query_type || card.dataset_query?.type }}</span>
         </div>
         <div>
-          <span class="font-medium">Collection:</span>
+          <span class="font-medium text-[var(--brand-text-muted)]">Collection:</span>
           <span class="ml-2">{{ card.collection_id || 'Root' }}</span>
         </div>
         <div>
-          <span class="font-medium">Created:</span>
+          <span class="font-medium text-[var(--brand-text-muted)]">Created:</span>
           <span class="ml-2">{{ formatDate(card.created_at) }}</span>
         </div>
       </div>
@@ -38,25 +38,25 @@
       <!-- Query Preview -->
       <div v-if="card.dataset_query?.native?.query" class="mt-4">
         <details class="group">
-          <summary class="cursor-pointer text-sm font-medium text-primary">
+          <summary class="cursor-pointer text-sm font-medium text-[var(--brand-primary)]">
             Ver SQL
           </summary>
-          <pre class="mt-2 p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs overflow-x-auto whitespace-pre-wrap break-words">{{ card.dataset_query.native.query }}</pre>
+          <pre class="mt-2 p-3 rounded-lg border border-[#3a2a16] bg-[#1c140c] text-xs overflow-x-auto whitespace-pre-wrap break-words text-[var(--brand-text)]">{{ card.dataset_query.native.query }}</pre>
         </details>
       </div>
 
       <!-- Parameters Form -->
       <div v-if="hasParameters" class="mt-4">
         <details class="group" :open="showParameters">
-          <summary class="cursor-pointer text-sm font-medium text-primary flex items-center gap-2 py-2">
+          <summary class="cursor-pointer text-sm font-medium text-[var(--brand-primary)] flex items-center gap-2 py-2">
             <UIcon name="i-heroicons-adjustments-horizontal" class="w-4 h-4" />
             <span>Configurar Parámetros</span>
             <UIcon name="i-heroicons-chevron-down-20-solid" class="w-4 h-4 transition-transform group-open:rotate-180" />
           </summary>
 
-          <div class="mt-3 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg space-y-3">
+          <div class="mt-3 p-4 rounded-lg border border-[#3a2a16] bg-[#1c140c] space-y-3">
             <div v-for="(param, key) in parameterValues" :key="key" class="flex flex-col gap-1">
-              <label class="text-xs font-medium text-gray-700 dark:text-gray-300">
+              <label class="text-xs font-medium text-[var(--brand-text-muted)]">
                 {{ getParameterLabel(key) }}
               </label>
 
@@ -72,7 +72,7 @@
                 v-else-if="getParameterType(key) === 'date'"
                 v-model="parameterValues[key]"
                 type="date"
-                class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                class="px-3 py-2 text-sm border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
               />
 
               <!-- Text parameter -->
@@ -80,7 +80,7 @@
                 v-else
                 v-model="parameterValues[key]"
                 type="text"
-                class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
+                class="px-3 py-2 text-sm border rounded-md bg-[var(--brand-bg)] border-[var(--brand-border)] text-[var(--brand-text)]"
               />
             </div>
 
@@ -100,11 +100,11 @@
       </div>
 
       <!-- Actions -->
-      <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t dark:border-gray-700">
+      <div class="flex flex-wrap gap-2 mt-4 pt-4 border-t border-[var(--brand-border)]">
         <UButton
           @click="executeQuery"
           :loading="executing"
-          color="primary"
+          :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed' }"
           size="sm"
         >
           Ejecutar Query
@@ -135,7 +135,7 @@
       <!-- Query Results -->
       <div v-if="queryResult" class="mt-4">
         <div class="flex flex-wrap justify-between items-center gap-2 mb-2">
-          <h4 class="font-medium text-sm">Resultados</h4>
+          <h4 class="font-medium text-sm text-[var(--brand-text)]">Resultados</h4>
           <div class="flex items-center gap-2">
             <UBadge color="green">
               {{ queryResult.data?.rows?.length || 0 }} filas en {{ queryResult.running_time || 0 }}ms
@@ -154,38 +154,38 @@
         </div>
 
         <!-- Empty State -->
-        <div v-if="!queryResult.data?.rows || queryResult.data.rows.length === 0" class="p-8 text-center bg-gray-50 dark:bg-gray-900 rounded">
-          <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-800 rounded-full">
-            <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <div v-if="!queryResult.data?.rows || queryResult.data.rows.length === 0" class="p-8 text-center rounded-lg border border-[#3a2a16] bg-[#1c140c]">
+          <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-[#3a2a16] rounded-full">
+            <svg class="w-8 h-8 text-[var(--brand-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
             </svg>
           </div>
-          <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">No hay datos</h3>
-          <p class="text-xs text-gray-500 dark:text-gray-400">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
+          <h3 class="text-sm font-medium text-[var(--brand-text)] mb-1">No hay datos</h3>
+          <p class="text-xs text-[var(--brand-text-muted)]">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
         </div>
 
         <!-- Data Display -->
         <div v-else>
           <!-- Table View -->
-          <div v-if="queryResult.data.cols && queryResult.data.rows" class="overflow-x-auto mb-4">
-            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-              <thead class="bg-gray-50 dark:bg-gray-800">
+          <div v-if="queryResult.data.cols && queryResult.data.rows" class="overflow-x-auto mb-4 rounded-lg border border-[#3a2a16]">
+            <table class="min-w-full divide-y divide-[var(--brand-border)]">
+              <thead class="bg-[#1c140c]">
                 <tr>
                   <th
                     v-for="col in queryResult.data.cols"
                     :key="col.name"
-                    class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                    class="px-4 py-3 text-left text-xs font-medium text-[var(--brand-text-muted)] uppercase tracking-wider"
                   >
                     {{ col.display_name || col.name }}
                   </th>
                 </tr>
               </thead>
-              <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
+              <tbody class="bg-[var(--brand-bg)] divide-y divide-[var(--brand-border)]">
                 <tr v-for="(row, rowIndex) in queryResult.data.rows" :key="rowIndex">
                   <td
                     v-for="(cell, cellIndex) in row"
                     :key="cellIndex"
-                    class="px-4 py-3 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100"
+                    class="px-4 py-3 whitespace-nowrap text-sm text-[var(--brand-text)]"
                   >
                     {{ formatCell(cell, queryResult.data.cols[cellIndex]) }}
                   </td>
@@ -196,11 +196,11 @@
 
           <!-- JSON View (collapsible) -->
           <details class="group">
-            <summary class="cursor-pointer text-sm font-medium text-primary flex items-center gap-2">
+            <summary class="cursor-pointer text-sm font-medium text-[var(--brand-primary)] flex items-center gap-2">
               <span>Ver JSON completo</span>
               <UIcon name="i-heroicons-chevron-down-20-solid" class="w-4 h-4 transition-transform group-open:rotate-180" />
             </summary>
-            <pre class="mt-2 p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(queryResult.data, null, 2) }}</pre>
+            <pre class="mt-2 p-3 rounded-lg border border-[#3a2a16] bg-[#1c140c] text-xs whitespace-pre-wrap break-words text-[var(--brand-text)]">{{ JSON.stringify(queryResult.data, null, 2) }}</pre>
           </details>
         </div>
       </div>
diff --git a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
index 9b4311e..739ea9e 100644
--- a/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
+++ b/nuxt4-app/app/components/metabase/MetabaseCardsTable.vue
@@ -29,8 +29,8 @@
 
       <template #name-data="{ row }">
         <div>
-          <div class="font-medium">{{ row.name }}</div>
-          <div v-if="row.description" class="text-xs text-gray-500 dark:text-gray-400 truncate max-w-md">
+          <div class="font-medium text-[var(--brand-text)]">{{ row.name }}</div>
+          <div v-if="row.description" class="text-xs text-[var(--brand-text-muted)] truncate max-w-md">
             {{ row.description }}
           </div>
         </div>
@@ -43,7 +43,7 @@
       </template>
 
       <template #database_id-data="{ row }">
-        <span class="text-sm">{{ row.database_id || 'N/A' }}</span>
+        <span class="text-sm text-[var(--brand-text)]">{{ row.database_id || 'N/A' }}</span>
       </template>
 
       <template #actions-data="{ row }">
@@ -51,8 +51,7 @@
           <UButton
             @click.stop="executeCard(row)"
             :loading="executingCards.has(row.id)"
-            color="primary"
-            variant="soft"
+            :ui="{ base: 'bg-[#c08040] text-[#1b1209] border border-[#d99a56] hover:bg-[#d99a56] hover:border-[#f0c07c] disabled:opacity-50 disabled:cursor-not-allowed' }"
             size="xs"
           >
             Ejecutar
@@ -82,10 +81,10 @@
 
     <!-- Results Modal -->
     <UModal v-model="showResults">
-      <UCard>
+      <UCard class="brand-card border border-transparent">
         <template #header>
           <div class="flex justify-between items-center">
-            <h3 class="text-lg font-semibold">Resultados: {{ selectedCardForResults?.name }}</h3>
+            <h3 class="text-lg font-semibold brand-section-title">Resultados: {{ selectedCardForResults?.name }}</h3>
             <UButton
               color="gray"
               variant="ghost"
@@ -96,17 +95,17 @@
         </template>
 
         <div v-if="currentResult" class="space-y-3">
-          <div class="flex flex-wrap gap-4 text-sm">
+          <div class="flex flex-wrap gap-4 text-sm text-[var(--brand-text)]">
             <div>
-              <span class="font-medium">Filas:</span>
+              <span class="font-medium text-[var(--brand-text-muted)]">Filas:</span>
               <span class="ml-2">{{ currentResult.data?.rows?.length || 0 }}</span>
             </div>
             <div>
-              <span class="font-medium">Tiempo:</span>
+              <span class="font-medium text-[var(--brand-text-muted)]">Tiempo:</span>
               <span class="ml-2">{{ currentResult.running_time || 0 }}ms</span>
             </div>
             <div>
-              <span class="font-medium">Estado:</span>
+              <span class="font-medium text-[var(--brand-text-muted)]">Estado:</span>
               <UBadge :color="currentResult.status === 'completed' ? 'green' : 'yellow'">
                 {{ currentResult.status }}
               </UBadge>
@@ -114,19 +113,19 @@
           </div>
 
           <!-- Empty State -->
-          <div v-if="!currentResult.data?.rows || currentResult.data.rows.length === 0" class="p-8 text-center bg-gray-50 dark:bg-gray-900 rounded">
-            <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-gray-200 dark:bg-gray-800 rounded-full">
-              <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <div v-if="!currentResult.data?.rows || currentResult.data.rows.length === 0" class="p-8 text-center rounded-lg border border-[#3a2a16] bg-[#1c140c]">
+            <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-[#3a2a16] rounded-full">
+              <svg class="w-8 h-8 text-[var(--brand-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
               </svg>
             </div>
-            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">No hay datos</h3>
-            <p class="text-xs text-gray-500 dark:text-gray-400">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
+            <h3 class="text-sm font-medium text-[var(--brand-text)] mb-1">No hay datos</h3>
+            <p class="text-xs text-[var(--brand-text-muted)]">La consulta se ejecutó correctamente pero no devolvió resultados.</p>
           </div>
 
           <!-- Data Display -->
           <div v-else class="overflow-x-auto max-h-96">
-            <pre class="p-3 bg-gray-50 dark:bg-gray-900 rounded text-xs whitespace-pre-wrap break-words">{{ JSON.stringify(currentResult.data, null, 2) }}</pre>
+            <pre class="p-3 rounded-lg border border-[#3a2a16] bg-[#1c140c] text-xs whitespace-pre-wrap break-words text-[var(--brand-text)]">{{ JSON.stringify(currentResult.data, null, 2) }}</pre>
           </div>
         </div>
 
diff --git a/nuxt4-app/app/pages/metabase-debug.vue b/nuxt4-app/app/pages/metabase-debug.vue
index 5dcbabe..5994dd5 100644
--- a/nuxt4-app/app/pages/metabase-debug.vue
+++ b/nuxt4-app/app/pages/metabase-debug.vue
@@ -23,42 +23,41 @@
       </div>
 
       <!-- Stats -->
-      <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4">
-        <UCard>
-          <div class="text-center">
-            <div class="text-2xl sm:text-3xl font-bold text-primary">{{ cards.length }}</div>
-            <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Total Cards</div>
+      <UCard class="brand-card border border-transparent">
+        <template #header>
+          <div>
+            <h2 class="text-2xl font-bold brand-section-title">Estadísticas de Metabase</h2>
+            <p class="text-sm text-[var(--brand-text-muted)] mt-1">Vista general de queries y cards configuradas</p>
           </div>
-        </UCard>
+        </template>
 
-        <UCard>
-          <div class="text-center">
-            <div class="text-2xl sm:text-3xl font-bold text-primary">{{ nativeQueries }}</div>
-            <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">SQL Nativo</div>
+        <div class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-3 sm:gap-4">
+          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] 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>
           </div>
-        </UCard>
 
-        <UCard>
-          <div class="text-center">
-            <div class="text-2xl sm:text-3xl font-bold text-green-600">{{ queryBuilderQueries }}</div>
-            <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Query Builder</div>
+          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">SQL Nativo</div>
+            <div class="text-3xl font-bold text-[var(--brand-primary)]">{{ nativeQueries }}</div>
           </div>
-        </UCard>
 
-        <UCard>
-          <div class="text-center">
-            <div class="text-2xl sm:text-3xl font-bold" :class="panoramaQueries.length === 9 ? 'text-green-600' : 'text-orange-600'">{{ panoramaQueries.length }}/9</div>
-            <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Queries Panorama</div>
+          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Query Builder</div>
+            <div class="text-3xl font-bold text-green-400">{{ queryBuilderQueries }}</div>
           </div>
-        </UCard>
 
-        <UCard>
-          <div class="text-center">
-            <div class="text-2xl sm:text-3xl font-bold" :class="informeQueries.length === 8 ? 'text-green-600' : 'text-orange-600'">{{ informeQueries.length }}/8</div>
-            <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Queries Informe</div>
+          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
+            <div class="text-xs text-[var(--brand-text-muted)] uppercase tracking-wide mb-1">Queries Panorama</div>
+            <div class="text-3xl font-bold" :class="panoramaQueries.length === 9 ? 'text-green-400' : 'text-orange-400'">{{ panoramaQueries.length }}/9</div>
           </div>
-        </UCard>
-      </div>
+
+          <div class="rounded-lg border border-[#3a2a16] bg-[#1c140c] px-6 py-4">
+            <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>
+      </UCard>
 
       <!-- Error Display -->
       <UAlert