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/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>