Mejorar botones y badges con estilos sólidos y efectos 3D

- Cambiar botones de quick-actions a variant solid con efectos 3D
- Agregar box-shadow multicapa con inset shadows a botones
- Implementar efectos hover y active en botones de sesión
- Cambiar badges de grupos a variant solid
- Agregar efectos 3D a badges con sombras y hover
- Mejorar color del email en modo oscuro (negro en lugar de gris)
- Aumentar peso de fuente del email en modo oscuro para mejor legibilidad

nuxt4/app/components/UserHeader.vue

@@ -23,7 +23,8 @@
             :key="group"
             size="sm"
             color="primary"
-            variant="soft"
+            variant="solid"
+            class="solid-badge"
           >
             {{ group }}
           </UBadge>
@@ -31,7 +32,8 @@
             v-if="user && user.groups.length > 3"
             size="sm"
             color="neutral"
-            variant="soft"
+            variant="solid"
+            class="solid-badge"
           >
             +{{ user.groups.length - 3 }}
           </UBadge>
@@ -267,7 +269,8 @@ const handleSubmit = async () => {
 }
 
 :global(.dark) .user-email {
-  color: var(--color-gray-400);
+  color: var(--color-gray-900);
+  font-weight: 600;
 }
 
 .user-badges {
@@ -276,6 +279,23 @@ const handleSubmit = async () => {
   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);
+  font-weight: 600;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.solid-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);
+}
+
 .modal-content {
   padding: 1.5rem;
   max-width: 28rem;