From 369085a38a3af470c5efe4b77297bfd284089898 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 29 Oct 2025 18:30:56 -0600
Subject: [PATCH] Fix: corregir estructura de :ui para UTabs con colores de
 marca

---
 nuxt4-app/app/pages/metabase-debug.vue | 36 +++++---------------------
 1 file changed, 6 insertions(+), 30 deletions(-)

diff --git a/nuxt4-app/app/pages/metabase-debug.vue b/nuxt4-app/app/pages/metabase-debug.vue
index 77eb585..76afea8 100644
--- a/nuxt4-app/app/pages/metabase-debug.vue
+++ b/nuxt4-app/app/pages/metabase-debug.vue
@@ -74,36 +74,12 @@
         v-model="selectedTab"
         :items="tabs"
         :ui="{
-          wrapper: 'space-y-4',
-          container: 'flex items-center gap-4 border-b border-[var(--brand-border)] w-full overflow-x-auto',
-          base: 'focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[#c08040] disabled:cursor-not-allowed disabled:opacity-75',
-          list: {
-            background: 'bg-transparent',
-            rounded: '',
-            shadow: '',
-            padding: '',
-            height: '',
-            width: '',
-            marker: {
-              wrapper: 'absolute top-[4px] left-[4px] duration-200 ease-out focus:outline-none',
-              base: 'w-full h-full',
-              background: 'bg-[#c08040]',
-              rounded: 'rounded-md',
-              shadow: 'shadow-sm'
-            },
-            tab: {
-              base: 'relative inline-flex items-center justify-center flex-shrink-0 w-full ui-focus-visible:outline-0 ui-focus-visible:ring-2 ui-focus-visible:ring-inset ui-focus-visible:ring-[#c08040] ui-disabled:cursor-not-allowed ui-disabled:opacity-75 transition-colors duration-200 ease-out',
-              background: 'ui-not-selected:bg-transparent ui-selected:bg-[#c08040]',
-              active: 'text-[#1b1209]',
-              inactive: 'text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]',
-              height: 'h-8',
-              padding: 'px-3',
-              size: 'text-sm',
-              font: 'font-medium',
-              rounded: 'rounded-md',
-              shadow: ''
-            }
-          }
+          root: 'space-y-4',
+          list: 'border-b border-[var(--brand-border)]',
+          indicator: 'bg-[#c08040]',
+          trigger: 'data-[state=active]:text-[#c08040] data-[state=inactive]:text-[var(--brand-text-muted)] hover:text-[var(--brand-text)] focus-visible:ring-2 focus-visible:ring-[#c08040]',
+          label: 'font-medium text-sm',
+          content: 'py-4'
         }"
       >
         <!-- Table View -->