Fix: Usar pointer device para detectar desktop en lugar de ancho

- Cambiar detección de desktop de min-width a (pointer: fine)
- Esto detecta si tiene mouse/trackpad (desktop) vs touch (móvil)
- Más confiable para PWAs que se abren con ancho fijo
- Mantener ancho como fallback para compatibilidad

nuxt4/app/composables/useDeviceType.ts

@@ -1,38 +1,54 @@
 /**
  * Composable para detectar el tipo de dispositivo (desktop o móvil)
- * Usa matchMedia para detectar el tamaño de pantalla
+ * Usa pointer device para detectar si tiene mouse (desktop) o touch (móvil)
+ * Esto es más confiable que el ancho de ventana para PWAs
  */
 export const useDeviceType = () => {
   const isDesktop = ref(false)
 
   if (import.meta.client && typeof window !== 'undefined') {
-    // Detectar si el dispositivo es desktop basado en el ancho de pantalla
+    // Detectar si el dispositivo principal es un puntero fino (mouse/trackpad)
-    // Usamos 1024px como punto de corte (típico para tablets/desktops)
+    // vs un puntero grueso (touch). Esto es más confiable para PWAs.
-    const mediaQuery = window.matchMedia('(min-width: 1024px)')
+    const pointerQuery = window.matchMedia('(pointer: fine)')
 
-    // Establecer valor inicial
+    // También verificar si el ancho de pantalla es >= 1024px como fallback
-    isDesktop.value = mediaQuery.matches
+    const widthQuery = window.matchMedia('(min-width: 1024px)')
+
+    // Considerar desktop si tiene pointer fino O ancho >= 1024px
+    isDesktop.value = pointerQuery.matches || widthQuery.matches
 
     console.log('[useDeviceType] Initialized:', {
       isDesktop: isDesktop.value,
+      pointerFine: pointerQuery.matches,
       windowWidth: window.innerWidth,
-      mediaQueryMatches: mediaQuery.matches
+      screenWidth: window.screen.availWidth,
+      widthMatches: widthQuery.matches
     })
 
-    // Escuchar cambios en el tamaño de pantalla
+    // Escuchar cambios en el pointer (aunque es raro que cambie)
-    const handleChange = (e: MediaQueryListEvent) => {
+    const handlePointerChange = (e: MediaQueryListEvent) => {
-      isDesktop.value = e.matches
+      isDesktop.value = e.matches || widthQuery.matches
-      console.log('[useDeviceType] Changed:', {
+      console.log('[useDeviceType] Pointer changed:', {
+        isDesktop: isDesktop.value,
+        pointerFine: e.matches
+      })
+    }
+
+    const handleWidthChange = (e: MediaQueryListEvent) => {
+      isDesktop.value = pointerQuery.matches || e.matches
+      console.log('[useDeviceType] Width changed:', {
         isDesktop: isDesktop.value,
         windowWidth: window.innerWidth
       })
     }
 
-    mediaQuery.addEventListener('change', handleChange)
+    pointerQuery.addEventListener('change', handlePointerChange)
+    widthQuery.addEventListener('change', handleWidthChange)
 
     // Cleanup al desmontar
     onUnmounted(() => {
-      mediaQuery.removeEventListener('change', handleChange)
+      pointerQuery.removeEventListener('change', handlePointerChange)
+      widthQuery.removeEventListener('change', handleWidthChange)
     })
   }
 

nuxt4/app/plugins/pwa-link-handler.client.ts

@@ -11,8 +11,10 @@ export default defineNuxtPlugin(() => {
                   window.matchMedia('(display-mode: window-controls-overlay)').matches ||
                   (window.navigator as any).standalone === true
 
-    // Detectar si estamos en desktop
+    // Detectar si estamos en desktop usando pointer device (más confiable para PWAs)
-    const isDesktop = window.matchMedia('(min-width: 1024px)').matches
+    const pointerQuery = window.matchMedia('(pointer: fine)')
+    const widthQuery = window.matchMedia('(min-width: 1024px)')
+    const isDesktop = pointerQuery.matches || widthQuery.matches
 
     if (isPWA) {
       // Obtener el origin de la aplicación