From 529d54b7e8f2f1f7982cdc893728e33139fca178 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Thu, 16 Oct 2025 23:33:15 -0600
Subject: [PATCH] Aplicar estilo glassmorphism a chips de grupos del usuario
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reemplazar UBadge con spans personalizados
- Aplicar mismo estilo que filtros de grupos
- Badges primarios con color primary y glassmorphism
- Badge de conteo (+N) con estilo neutral
- Hover con efecto de elevación sutil
- Soporte completo para modo oscuro con brillo ajustado
---
 nuxt4/app/components/UserHeader.vue | 81 +++++++++++++++++++++--------
 1 file changed, 60 insertions(+), 21 deletions(-)

diff --git a/nuxt4/app/components/UserHeader.vue b/nuxt4/app/components/UserHeader.vue
index b50be3b..b06f0ce 100644
--- a/nuxt4/app/components/UserHeader.vue
+++ b/nuxt4/app/components/UserHeader.vue
@@ -23,25 +23,19 @@
         </div>
         <p class="user-email">{{ user?.email }}</p>
         <div class="user-badges">
-          <UBadge
+          <span
             v-for="group in user?.groups.slice(0, 3)"
             :key="group"
-            size="sm"
-            color="primary"
-            variant="solid"
-            class="solid-badge"
+            class="user-badge"
           >
             {{ group }}
-          </UBadge>
-          <UBadge
+          </span>
+          <span
             v-if="user && user.groups.length > 3"
-            size="sm"
-            color="neutral"
-            variant="solid"
-            class="solid-badge"
+            class="user-badge user-badge-count"
           >
             +{{ user.groups.length - 3 }}
-          </UBadge>
+          </span>
         </div>
       </div>
     </div>
@@ -125,21 +119,38 @@ defineEmits(['edit-profile'])
   gap: 0.5rem;
 }
 
-.solid-badge {
-  box-shadow:
-    0 2px 8px 0 rgba(0, 0, 0, 0.15),
-    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.2),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
+.user-badge {
+  display: inline-block;
+  padding: 0.375rem 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 600;
+  border-radius: 0.625rem;
+  background: rgba(var(--color-primary-500), 0.15);
+  backdrop-filter: blur(10px) saturate(150%);
+  border: 1px solid rgba(var(--color-primary-500), 0.3);
+  color: rgb(var(--color-primary-500));
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow:
+    0 2px 8px 0 rgba(var(--color-primary-500), 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3),
+    inset 0 -1px 2px 0 rgba(var(--color-primary-500), 0.1);
 }
 
-.solid-badge:hover {
+.user-badge:hover {
   transform: translateY(-1px);
   box-shadow:
-    0 4px 12px 0 rgba(0, 0, 0, 0.2),
-    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.2),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
+    0 4px 12px 0 rgba(var(--color-primary-500), 0.3),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4),
+    inset 0 -1px 2px 0 rgba(var(--color-primary-500), 0.15);
+}
+
+.user-badge-count {
+  background: rgba(255, 255, 255, 0.25);
+  border-color: rgba(0, 0, 0, 0.1);
+  color: var(--color-gray-700);
+  box-shadow:
+    0 2px 6px 0 rgba(31, 38, 135, 0.08),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
 }
 
 .edit-button {
@@ -270,4 +281,32 @@ defineEmits(['edit-profile'])
     0 0 0 1px rgba(var(--color-primary-500), 0.7),
     inset 0 1px 1px 0 rgba(255, 255, 255, 0.1) !important;
 }
+
+.dark .user-badge {
+  background: rgba(var(--color-primary-500), 0.25) !important;
+  border-color: rgba(var(--color-primary-500), 0.5) !important;
+  color: rgb(var(--color-primary-400)) !important;
+  box-shadow:
+    0 2px 8px 0 rgba(var(--color-primary-500), 0.4),
+    0 0 0 1px rgba(var(--color-primary-500), 0.3),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.08),
+    inset 0 -1px 2px 0 rgba(var(--color-primary-500), 0.2) !important;
+}
+
+.dark .user-badge:hover {
+  box-shadow:
+    0 4px 12px 0 rgba(var(--color-primary-500), 0.5),
+    0 0 0 1px rgba(var(--color-primary-500), 0.4),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1),
+    inset 0 -1px 2px 0 rgba(var(--color-primary-500), 0.25) !important;
+}
+
+.dark .user-badge-count {
+  background: rgba(255, 255, 255, 0.05) !important;
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  color: var(--color-gray-300) !important;
+  box-shadow:
+    0 2px 6px 0 rgba(0, 0, 0, 0.3),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
+}
 </style>