diff --git a/nuxt4-app/app/pages/metabase-debug.vue b/nuxt4-app/app/pages/metabase-debug.vue
index ac274d6..810497a 100644
--- a/nuxt4-app/app/pages/metabase-debug.vue
+++ b/nuxt4-app/app/pages/metabase-debug.vue
@@ -32,7 +32,7 @@
 
         <UCard>
           <div class="text-center">
-            <div class="text-3xl font-bold text-blue-600">{{ nativeQueries }}</div>
+            <div class="text-3xl font-bold text-primary">{{ nativeQueries }}</div>
             <div class="text-sm text-gray-600 dark:text-gray-400">SQL Nativo</div>
           </div>
         </UCard>
@@ -55,10 +55,10 @@
       <!-- Error Display -->
       <UAlert
         v-if="error"
-        color="red"
+        color="error"
         variant="soft"
         :title="error"
-        :close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'red', variant: 'link' }"
+        :close-button="{ icon: 'i-heroicons-x-mark-20-solid', color: 'error', variant: 'link' }"
         @close="error = null"
       />
 
@@ -88,7 +88,7 @@
           <!-- Panorama Queries -->
           <div v-if="item.key === 'panorama'" class="py-4 space-y-4">
             <UAlert
-              color="blue"
+              color="info"
               variant="soft"
               title="Queries del Panorama Facturador"
               description="Estas son las 9 queries documentadas en METABASE_QUERIES_PANORAMA.md"
@@ -104,7 +104,7 @@
 
             <UAlert
               v-if="panoramaQueries.length < 9"
-              color="yellow"
+              color="warning"
               variant="soft"
               :title="`Faltan ${9 - panoramaQueries.length} queries por encontrar`"
               description="Busca en la tabla las queries que contengan 'panorama' en su nombre"