Agregado z-20 al icono para que herede correctamente el color
del trigger activo. Ahora el icono cambia a negro (#1b1209)
cuando la tab está seleccionada, igual que el label.
Cambios realizados:
- Tabs inactivos ahora tienen fondo transparente en lugar de #1c140c
- Indicador tiene z-10 para estar por encima del fondo
- Labels tienen z-20 para estar por encima del indicador
- Hover de tabs inactivos usa bg semi-transparente (#2a1f14/50)
- Agregada transición suave de colores (transition-colors duration-200)
Esto soluciona el problema donde el badge color cobre se ocultaba
durante la animación de deslizamiento entre tabs.
- Personalizar UTabs con prop :ui usando colores de marca
- Tab seleccionada: bg-[#c08040] con texto oscuro
- Tabs inactivas: text-[var(--brand-text-muted)] con hover
- Borde inferior: border-[var(--brand-border)]
- Input de búsqueda con bg, text y border del tema
- Focus ring en color café #c08040
- 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
- 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
El contenido de los tabs no se mostraba porque faltaba la propiedad
'slot' en cada item del array tabs. Nuxt UI UTabs requiere esta
propiedad para vincular los slots nombrados con sus respectivos tabs.
Cambios:
- Agregar propiedad 'slot' a cada item en el array tabs
- Ahora los slots nombrados (#table, #cards, #panorama, #detail) se
vinculan correctamente con sus tabs correspondientes
Corrección del bug visual donde todos los tabs se mostraban simultáneamente.
El problema era el uso incorrecto del slot #default en UTabs que causaba
que todos los contenidos se renderizaran a la vez, creando elementos duplicados.
Cambios:
- Cambiar de #default a slots nombrados específicos (#table, #cards, #panorama, #detail)
- Ahora solo se muestra el contenido del tab activo
- Elimina la duplicación de elementos
- Mejora la legibilidad y organización visual
Ajustes realizados:
Components:
- MetabaseCardDisplay: grid responsive, queries con wrap, botones apilables
- MetabaseCardsTable: filtros verticales en móvil, acciones con wrap
Page:
- Header responsive con elementos apilados
- Stats en grid 2x2 para móvil, 4 columnas en desktop
- Tamaños de fuente adaptados con breakpoints
Todas las queries SQL y JSON ahora usan whitespace-pre-wrap y break-words
para aprovechar el espacio vertical en lugar de scroll horizontal.
- Crear componente MetabaseCardDisplay para mostrar detalles de queries
- Crear componente MetabaseCardsTable para listar todas las queries
- Crear página /metabase-debug con vistas de tabla, cards y queries Panorama
- Agregar API routes para cards de Metabase (GET, POST, export)
- Actualizar metabase.ts para soportar API Key authentication
- Agregar configuración de Metabase API Key en nuxt.config.ts
- Documentar todos los endpoints disponibles en METABASE_API_ENDPOINTS.md
