Mejorar botón Inicio con icono de perfil y estilo mejorado

- Agregar icono de la app perfil al botón Inicio
- Implementar sistema de fallback para iconos (local → remoto → favicon)
- Aplicar gradientes y estilos inspirados en la app perfil
- Agregar transiciones suaves y efectos hover mejorados

nuxt4-app/app/components/app/AppSidebar.vue

@@ -91,15 +91,21 @@
               variant="ghost"
               size="sm"
               block
-              class="justify-start gap-2.5 hover:bg-primary-50/80 dark:hover:bg-primary-950/30 transition-all duration-200"
+              class="justify-start gap-2.5 hover:bg-gradient-to-r hover:from-primary-50/90 hover:to-green-50/60 dark:hover:from-primary-950/40 dark:hover:to-green-950/30 transition-all duration-300 hover:shadow-sm"
               :ui="{
                 rounded: 'rounded-lg',
                 padding: { sm: 'px-2.5 py-2' }
               }"
             >
               <template #leading>
-                <div class="w-7 h-7 rounded-md bg-green-50 dark:bg-green-950/30 flex items-center justify-center flex-shrink-0">
-                  <UIcon name="i-lucide-home" class="size-3.5 text-green-600 dark:text-green-400" />
+                <div class="w-7 h-7 rounded-md bg-gradient-to-br from-primary-50 to-green-50 dark:from-primary-950/40 dark:to-green-950/40 flex items-center justify-center flex-shrink-0 relative overflow-hidden shadow-sm border border-primary-100/40 dark:border-primary-900/30">
+                  <img
+                    src="/perfil-icon.png"
+                    alt="Perfil"
+                    class="w-4 h-4 absolute inset-0 m-auto object-cover rounded-sm opacity-90"
+                    @error="handlePerfilIconError"
+                  />
+                  <UIcon name="i-lucide-home" class="size-3.5 text-green-600 dark:text-green-400 opacity-0" />
                 </div>
               </template>
               <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Inicio</span>
@@ -217,7 +223,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import type { NavigationMenuItem } from '@nuxt/ui'
 
@@ -226,6 +232,30 @@ const route = useRoute()
 const open = defineModel<boolean>('open', { default: true })
 const collapsed = defineModel<boolean>('collapsed', { default: false })
 
+// Manejo del fallback de iconos para el botón Inicio
+const perfilIconFallbackIndex = ref(0)
+const perfilIconSources = [
+  '/perfil-icon.png',
+  'https://inicio.nucleoriofrio.com/apple-touch-icon.png',
+  'https://inicio.nucleoriofrio.com/favicon.ico'
+]
+
+const handlePerfilIconError = (event: Event) => {
+  const img = event.target as HTMLImageElement
+  perfilIconFallbackIndex.value++
+
+  if (perfilIconFallbackIndex.value < perfilIconSources.length) {
+    img.src = perfilIconSources[perfilIconFallbackIndex.value]
+  } else {
+    // Si todos los iconos fallan, mostrar el icono de casa
+    img.style.display = 'none'
+    const icon = img.nextElementSibling as HTMLElement
+    if (icon) {
+      icon.style.opacity = '1'
+    }
+  }
+}
+
 const navigationPrimary = computed<NavigationMenuItem[]>(() => [
   {
     label: 'Inicio',