Mejoras en glassmorphism y soporte de modo oscuro

- Aumentar transparencia en todos los contenedores (0.3-0.4 alpha)
- Mejorar backdrop-filter con blur(20px) y saturate(180%)
- Agregar efectos 3D pronunciados con box-shadow multicapa
- Implementar inset shadows para efecto de profundidad
- Ajustar colores en modo oscuro (rgba(15, 15, 25) en lugar de rgba(30, 30, 40))
- Mejorar bordes con rgba blanco semi-transparente
- Agregar transiciones suaves con cubic-bezier
- Efectos hover mejorados con scale y translateY
- Aplicar cambios en UserHeader, ApplicationsList y quick-actions
- Mejor contraste y legibilidad en modo oscuro

nuxt4/app/components/auth/ApplicationsList.vue

@@ -176,17 +176,23 @@ onUnmounted(() => {
 
 <style scoped>
 .applications-container {
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(15px);
+  background: rgba(255, 255, 255, 0.35);
+  backdrop-filter: blur(20px) saturate(180%);
   border-radius: 1.5rem;
   padding: 2rem;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
+  box-shadow:
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 :global(.dark) .applications-container {
-  background: rgba(30, 30, 40, 0.85);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
+  background: rgba(15, 15, 25, 0.35);
+  box-shadow:
+    0 8px 32px 0 rgba(0, 0, 0, 0.5),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
 }
 
 .applications-header {
@@ -243,29 +249,40 @@ onUnmounted(() => {
 .app-card {
   display: block;
   padding: 1.25rem;
-  border-radius: 1rem;
-  background: rgba(255, 255, 255, 0.9);
-  border: 2px solid rgba(var(--color-gray-200), 0.5);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s ease;
+  border-radius: 1.25rem;
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(15px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  box-shadow:
+    0 4px 16px 0 rgba(31, 38, 135, 0.1),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   text-decoration: none;
 }
 
 :global(.dark) .app-card {
-  background: rgba(40, 40, 50, 0.9);
-  border-color: rgba(var(--color-gray-700), 0.5);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  background: rgba(20, 20, 30, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 4px 16px 0 rgba(0, 0, 0, 0.4),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
 }
 
 .app-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 16px rgba(var(--color-primary-500), 0.2);
-  border-color: rgb(var(--color-primary-500));
+  transform: translateY(-6px) scale(1.02);
+  box-shadow:
+    0 12px 32px 0 rgba(var(--color-primary-500), 0.25),
+    0 0 0 1px rgba(var(--color-primary-500), 0.5),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
+  border-color: rgba(var(--color-primary-500), 0.6);
 }
 
 :global(.dark) .app-card:hover {
-  box-shadow: 0 8px 16px rgba(var(--color-primary-500), 0.3);
+  box-shadow:
+    0 12px 32px 0 rgba(var(--color-primary-500), 0.4),
+    0 0 0 1px rgba(var(--color-primary-500), 0.7),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.1);
 }
 
 .app-card-content {