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;

nuxt4/app/components/auth/LogoutButton.vue

@@ -2,7 +2,8 @@
   <UButton
     color="error"
     size="lg"
-    variant="soft"
+    variant="solid"
+    class="solid-button"
     @click="handleClick"
   >
     <template #leading>
@@ -19,3 +20,31 @@ const handleClick = () => {
   logout()
 }
 </script>
+
+<style scoped>
+.solid-button {
+  box-shadow:
+    0 4px 12px 0 rgba(239, 68, 68, 0.3),
+    0 2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.solid-button:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 6px 16px 0 rgba(239, 68, 68, 0.4),
+    0 4px 8px 0 rgba(0, 0, 0, 0.25),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.solid-button:active {
+  transform: translateY(0);
+  box-shadow:
+    0 2px 8px 0 rgba(239, 68, 68, 0.3),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2),
+    inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+}
+</style>

nuxt4/app/components/auth/ProfileButton.vue

@@ -2,6 +2,8 @@
   <UButton
     color="primary"
     size="lg"
+    variant="solid"
+    class="solid-button"
     @click="handleClick"
   >
     <template #leading>
@@ -18,3 +20,31 @@ const handleClick = () => {
   goToProfile()
 }
 </script>
+
+<style scoped>
+.solid-button {
+  box-shadow:
+    0 4px 12px 0 rgba(0, 220, 130, 0.3),
+    0 2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.solid-button:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 6px 16px 0 rgba(0, 220, 130, 0.4),
+    0 4px 8px 0 rgba(0, 0, 0, 0.25),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.solid-button:active {
+  transform: translateY(0);
+  box-shadow:
+    0 2px 8px 0 rgba(0, 220, 130, 0.3),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2),
+    inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+}
+</style>

nuxt4/app/components/auth/SessionStatusButton.vue

@@ -2,7 +2,8 @@
   <UButton
     color="info"
     size="lg"
-    variant="soft"
+    variant="solid"
+    class="solid-button"
     @click="handleClick"
   >
     <template #leading>
@@ -19,3 +20,31 @@ const handleClick = () => {
   checkSessionStatus()
 }
 </script>
+
+<style scoped>
+.solid-button {
+  box-shadow:
+    0 4px 12px 0 rgba(0, 149, 255, 0.3),
+    0 2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.solid-button:hover {
+  transform: translateY(-2px);
+  box-shadow:
+    0 6px 16px 0 rgba(0, 149, 255, 0.4),
+    0 4px 8px 0 rgba(0, 0, 0, 0.25),
+    inset 0 -2px 4px 0 rgba(0, 0, 0, 0.2),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+.solid-button:active {
+  transform: translateY(0);
+  box-shadow:
+    0 2px 8px 0 rgba(0, 149, 255, 0.3),
+    0 1px 2px 0 rgba(0, 0, 0, 0.2),
+    inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+}
+</style>