Fix SSR error with navigator.onLine in index page

Use reactive ref with onMounted to safely access navigator.onLine
only on client-side, preventing server-side rendering errors.

nuxt4-app/app/pages/index.vue

@@ -1,5 +1,25 @@
 <script setup lang="ts">
 const { loggedIn, user } = useUserSession()
+
+// Estado de conexión (solo en cliente)
+const isOnline = ref(true)
+
+onMounted(() => {
+  // Inicializar estado de conexión
+  isOnline.value = navigator.onLine
+
+  // Escuchar cambios de conexión
+  const handleOnline = () => { isOnline.value = true }
+  const handleOffline = () => { isOnline.value = false }
+
+  window.addEventListener('online', handleOnline)
+  window.addEventListener('offline', handleOffline)
+
+  onUnmounted(() => {
+    window.removeEventListener('online', handleOnline)
+    window.removeEventListener('offline', handleOffline)
+  })
+})
 </script>
 
 <template>
@@ -48,8 +68,8 @@ const { loggedIn, user } = useUserSession()
                 </template>
                 <div class="space-y-2 text-sm">
                   <div class="flex items-center gap-2">
-                    <div class="w-2 h-2 rounded-full" :class="navigator.onLine ? 'bg-green-500' : 'bg-red-500'"></div>
-                    <span>{{ navigator.onLine ? 'En línea' : 'Sin conexión' }}</span>
+                    <div class="w-2 h-2 rounded-full" :class="isOnline ? 'bg-green-500' : 'bg-red-500'"></div>
+                    <span>{{ isOnline ? 'En línea' : 'Sin conexión' }}</span>
                   </div>
                   <p class="text-gray-600 dark:text-gray-400">
                     La aplicación funciona offline gracias al service worker