Fix: aplicar estilos de marca a tabs y input de búsqueda en Metabase Debug

- Envolver tabs en UCard con clase brand-card
- Aplicar estilos de variables CSS al input de búsqueda
- Configurar focus ring con color de marca #c08040
- Usar colores de texto y fondo del tema en input

nuxt4-app/app/components/metabase/MetabaseCardsTable.vue

@@ -7,6 +7,111 @@
         placeholder="Buscar por nombre o ID..."
         icon="i-heroicons-magnifying-glass"
         class="flex-1"
+        :ui="{
+          base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
+          form: 'form-input',
+          rounded: 'rounded-md',
+          placeholder: 'placeholder-[var(--brand-text-muted)]',
+          size: {
+            '2xs': 'text-xs',
+            xs: 'text-xs',
+            sm: 'text-sm',
+            md: 'text-sm',
+            lg: 'text-sm',
+            xl: 'text-base'
+          },
+          gap: {
+            '2xs': 'gap-x-1',
+            xs: 'gap-x-1.5',
+            sm: 'gap-x-1.5',
+            md: 'gap-x-2',
+            lg: 'gap-x-2.5',
+            xl: 'gap-x-2.5'
+          },
+          padding: {
+            '2xs': 'px-2 py-1',
+            xs: 'px-2.5 py-1.5',
+            sm: 'px-2.5 py-1.5',
+            md: 'px-3 py-2',
+            lg: 'px-3.5 py-2.5',
+            xl: 'px-3.5 py-2.5'
+          },
+          leading: {
+            padding: {
+              '2xs': 'ps-7',
+              xs: 'ps-8',
+              sm: 'ps-9',
+              md: 'ps-10',
+              lg: 'ps-11',
+              xl: 'ps-12'
+            }
+          },
+          trailing: {
+            padding: {
+              '2xs': 'pe-7',
+              xs: 'pe-8',
+              sm: 'pe-9',
+              md: 'pe-10',
+              lg: 'pe-11',
+              xl: 'pe-12'
+            }
+          },
+          color: {
+            white: {
+              outline: 'shadow-sm bg-[var(--brand-bg)] text-[var(--brand-text)] ring-1 ring-inset ring-[var(--brand-border)] focus:ring-2 focus:ring-[#c08040]'
+            },
+            gray: {
+              outline: 'shadow-sm bg-[var(--brand-bg)] text-[var(--brand-text)] ring-1 ring-inset ring-[var(--brand-border)] focus:ring-2 focus:ring-[#c08040]'
+            }
+          },
+          variant: {
+            outline: 'shadow-sm bg-[var(--brand-bg)] text-[var(--brand-text)] ring-1 ring-inset ring-[var(--brand-border)] focus:ring-2 focus:ring-[#c08040]',
+            none: 'bg-transparent focus:ring-0 focus:shadow-none'
+          },
+          icon: {
+            base: 'flex-shrink-0 text-[var(--brand-text-muted)]',
+            color: 'text-{color}-400 dark:text-{color}-500',
+            loading: 'animate-spin',
+            size: {
+              '2xs': 'h-4 w-4',
+              xs: 'h-4 w-4',
+              sm: 'h-5 w-5',
+              md: 'h-5 w-5',
+              lg: 'h-5 w-5',
+              xl: 'h-6 w-6'
+            },
+            leading: {
+              wrapper: 'absolute inset-y-0 start-0 flex items-center',
+              pointer: 'pointer-events-none',
+              padding: {
+                '2xs': 'px-2',
+                xs: 'px-2.5',
+                sm: 'px-2.5',
+                md: 'px-3',
+                lg: 'px-3.5',
+                xl: 'px-3.5'
+              }
+            },
+            trailing: {
+              wrapper: 'absolute inset-y-0 end-0 flex items-center',
+              pointer: 'pointer-events-none',
+              padding: {
+                '2xs': 'px-2',
+                xs: 'px-2.5',
+                sm: 'px-2.5',
+                md: 'px-3',
+                lg: 'px-3.5',
+                xl: 'px-3.5'
+              }
+            }
+          },
+          default: {
+            size: 'sm',
+            color: 'white',
+            variant: 'outline',
+            loadingIcon: 'i-heroicons-arrow-path-20-solid'
+          }
+        }"
       />
       <USelectMenu
         v-model="selectedFilter"

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

@@ -70,94 +70,96 @@
       />
 
       <!-- Tabs -->
-      <UTabs v-model="selectedTab" :items="tabs">
+      <UCard class="brand-card border border-transparent">
-        <!-- Table View -->
+        <UTabs v-model="selectedTab" :items="tabs">
-        <template #table>
+          <!-- Table View -->
-          <div class="py-4">
+          <template #table>
-            <MetabaseCardsTable
+            <div class="py-4">
-              :cards="cards"
+              <MetabaseCardsTable
-              :loading="loading"
+                :cards="cards"
-              @select="selectCard"
+                :loading="loading"
-            />
+                @select="selectCard"
-          </div>
-        </template>
-
-        <!-- Cards View -->
-        <template #cards>
-          <div class="py-4">
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-              <MetabaseCardDisplay
-                v-for="card in cards"
-                :key="card.id"
-                :card="card"
               />
             </div>
-          </div>
+          </template>
-        </template>
 
-        <!-- Panorama Queries -->
+          <!-- Cards View -->
-        <template #panorama>
+          <template #cards>
-          <div class="py-4 space-y-4">
+            <div class="py-4">
-            <UAlert
+              <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-              color="info"
+                <MetabaseCardDisplay
-              variant="soft"
+                  v-for="card in cards"
-              title="Queries del Panorama Facturador"
+                  :key="card.id"
-              description="Estas son las 9 queries documentadas en METABASE_QUERIES_PANORAMA.md y definidas en server/config/metabase-queries.ts"
+                  :card="card"
-            />
+                />
+              </div>
+            </div>
+          </template>
 
-            <div class="grid grid-cols-1 gap-4">
+          <!-- Panorama Queries -->
-              <MetabaseCardDisplay
+          <template #panorama>
-                v-for="card in panoramaQueries"
+            <div class="py-4 space-y-4">
-                :key="card.id"
+              <UAlert
-                :card="card"
+                color="info"
+                variant="soft"
+                title="Queries del Panorama Facturador"
+                description="Estas son las 9 queries documentadas en METABASE_QUERIES_PANORAMA.md y definidas en server/config/metabase-queries.ts"
+              />
+
+              <div class="grid grid-cols-1 gap-4">
+                <MetabaseCardDisplay
+                  v-for="card in panoramaQueries"
+                  :key="card.id"
+                  :card="card"
+                />
+              </div>
+
+              <UAlert
+                v-if="panoramaQueries.length < 9"
+                color="warning"
+                variant="soft"
+                :title="`Faltan ${9 - panoramaQueries.length} queries por encontrar`"
+                :description="`Queries faltantes: ${missingPanoramaQueries.join(', ')}`"
               />
             </div>
+          </template>
 
-            <UAlert
+          <!-- Informe Queries -->
-              v-if="panoramaQueries.length < 9"
+          <template #informe>
-              color="warning"
+            <div class="py-4 space-y-4">
-              variant="soft"
+              <UAlert
-              :title="`Faltan ${9 - panoramaQueries.length} queries por encontrar`"
+                color="info"
-              :description="`Queries faltantes: ${missingPanoramaQueries.join(', ')}`"
+                variant="soft"
-            />
+                title="Queries del Informe de Ingresos"
-          </div>
+                description="Estas son las 8 queries documentadas en METABASE_QUERIES_INFORME_INGRESOS.md y definidas en server/config/metabase-queries.ts"
-        </template>
+              />
 
-        <!-- Informe Queries -->
+              <div class="grid grid-cols-1 gap-4">
-        <template #informe>
+                <MetabaseCardDisplay
-          <div class="py-4 space-y-4">
+                  v-for="card in informeQueries"
-            <UAlert
+                  :key="card.id"
-              color="info"
+                  :card="card"
-              variant="soft"
+                />
-              title="Queries del Informe de Ingresos"
+              </div>
-              description="Estas son las 8 queries documentadas en METABASE_QUERIES_INFORME_INGRESOS.md y definidas en server/config/metabase-queries.ts"
-            />
 
-            <div class="grid grid-cols-1 gap-4">
+              <UAlert
-              <MetabaseCardDisplay
+                v-if="informeQueries.length < 8"
-                v-for="card in informeQueries"
+                color="warning"
-                :key="card.id"
+                variant="soft"
-                :card="card"
+                :title="`Faltan ${8 - informeQueries.length} queries por encontrar`"
+                :description="`Queries faltantes: ${missingInformeQueries.join(', ')}`"
               />
             </div>
+          </template>
 
-            <UAlert
+          <!-- Selected Card Detail -->
-              v-if="informeQueries.length < 8"
+          <template #detail>
-              color="warning"
+            <div v-if="selectedCard" class="py-4">
-              variant="soft"
+              <MetabaseCardDisplay :card="selectedCard" />
-              :title="`Faltan ${8 - informeQueries.length} queries por encontrar`"
+            </div>
-              :description="`Queries faltantes: ${missingInformeQueries.join(', ')}`"
+          </template>
-            />
+        </UTabs>
-          </div>
+      </UCard>
-        </template>
-
-        <!-- Selected Card Detail -->
-        <template #detail>
-          <div v-if="selectedCard" class="py-4">
-            <MetabaseCardDisplay :card="selectedCard" />
-          </div>
-        </template>
-      </UTabs>
     </div>
   </div>
 </template>