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,6 +70,7 @@
       />
 
       <!-- Tabs -->
+      <UCard class="brand-card border border-transparent">
         <UTabs v-model="selectedTab" :items="tabs">
           <!-- Table View -->
           <template #table>
@@ -158,6 +159,7 @@
             </div>
           </template>
         </UTabs>
+      </UCard>
     </div>
   </div>
 </template>