Fix: Sincronizar tema con clase dark de Nuxt UI y arreglar selectores CSS

- Agregar función applyThemeClass para sincronizar con HTML
- Aplicar clase dark/light al elemento HTML
- Agregar watcher para actualizar clase en cambios de tema
- Inicializar clase correcta en onMounted
- Separar estilos dark mode en bloque sin scoped
- Usar selectores .dark directos en lugar de :global(.dark)
- Agregar !important para superar especificidad de scoped

nuxt4/app/components/auth/ApplicationsList.vue

@@ -175,6 +175,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
+/* Estilos de modo oscuro deben estar fuera de scoped para .dark */
 .applications-container {
   background: rgba(255, 255, 255, 0.35);
   backdrop-filter: blur(20px) saturate(180%);
@@ -187,14 +188,6 @@ onUnmounted(() => {
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-:global(.dark) .applications-container {
-  background: rgba(0, 0, 0, 0.15);
-  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 {
   margin-bottom: 2rem;
 }
@@ -209,10 +202,6 @@ onUnmounted(() => {
   margin: 0;
 }
 
-:global(.dark) .applications-title {
-  color: var(--color-gray-100);
-}
-
 .filter-section {
   display: flex;
   flex-wrap: wrap;
@@ -261,14 +250,6 @@ onUnmounted(() => {
   text-decoration: none;
 }
 
-:global(.dark) .app-card {
-  background: rgba(0, 0, 0, 0.85);
-  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(-6px) scale(1.02);
   box-shadow:
@@ -278,13 +259,6 @@ onUnmounted(() => {
   border-color: rgba(var(--color-primary-500), 0.6);
 }
 
-:global(.dark) .app-card:hover {
-  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 {
   display: flex;
   gap: 1rem;
@@ -331,10 +305,6 @@ onUnmounted(() => {
   line-height: 1.3;
 }
 
-:global(.dark) .app-name {
-  color: var(--color-gray-100);
-}
-
 .app-card:hover .app-name {
   color: rgb(var(--color-primary-500));
 }
@@ -365,10 +335,6 @@ onUnmounted(() => {
   overflow: hidden;
 }
 
-:global(.dark) .app-description {
-  color: var(--color-gray-400);
-}
-
 /* Responsive */
 @media (max-width: 640px) {
   .applications-container {
@@ -398,3 +364,41 @@ onUnmounted(() => {
   }
 }
 </style>
+
+<style>
+/* Estilos de modo oscuro (sin scoped para que .dark funcione correctamente) */
+.dark .applications-container {
+  background: rgba(0, 0, 0, 0.15) !important;
+  box-shadow:
+    0 8px 32px 0 rgba(0, 0, 0, 0.5),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !important;
+}
+
+.dark .applications-title {
+  color: var(--color-gray-100) !important;
+}
+
+.dark .app-card {
+  background: rgba(0, 0, 0, 0.85) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  box-shadow:
+    0 4px 16px 0 rgba(0, 0, 0, 0.4),
+    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05) !important;
+}
+
+.dark .app-card:hover {
+  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) !important;
+}
+
+.dark .app-name {
+  color: var(--color-gray-100) !important;
+}
+
+.dark .app-description {
+  color: var(--color-gray-400) !important;
+}
+</style>