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

This reverts commit f8ae9e44e7.

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

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