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/app.vue

@@ -85,14 +85,6 @@ useHead({
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-:global(.dark) .quick-actions {
-  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);
-}
-
 .auth-message {
   display: flex;
   align-items: center;
@@ -109,14 +101,6 @@ useHead({
     inset 0 1px 1px 0 rgba(255, 255, 255, 0.3);
 }
 
-:global(.dark) .auth-message :deep(.card) {
-  background: rgba(0, 0, 0, 0.15);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow:
-    0 8px 32px 0 rgba(0, 0, 0, 0.5),
-    inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
-}
-
 /* Responsive */
 @media (max-width: 768px) {
   .main-content {
@@ -129,3 +113,22 @@ useHead({
   }
 }
 </style>
+
+<style>
+/* Estilos de modo oscuro (sin scoped para que .dark funcione correctamente) */
+.dark .quick-actions {
+  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 .auth-message :deep(.card) {
+  background: rgba(0, 0, 0, 0.15) !important;
+  border: 1px solid rgba(255, 255, 255, 0.08) !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;
+}
+</style>