NavUser: avatar con imagen + grayscale estilo demo

- AvatarImage con fallback a iniciales
- grayscale en avatar (como la demo)
- Estructura footer idéntica a shadcn-vue.com

src/components/NavUser.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/stores/auth'
-import { ChevronsUpDown, LogOut } from 'lucide-vue-next'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import {
+  ChevronsUpDown,
+  LogOut,
+} from 'lucide-vue-next'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,6 +22,7 @@ const auth = useAuthStore()
 const { isMobile } = useSidebar()
 
 const initials = (auth.user?.name || 'U').split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase()
+const avatarSrc = '/Evil_Morty_Profile_Icon.webp'
 </script>
 
 <template>
@@ -30,13 +34,12 @@ const initials = (auth.user?.name || 'U').split(' ').map(n => n[0]).join('').sli
             size="lg"
             class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
           >
-            <Avatar class="h-8 w-8 rounded-lg">
-              <AvatarFallback class="rounded-lg bg-primary text-primary-foreground text-xs">
-                {{ initials }}
-              </AvatarFallback>
+            <Avatar class="h-8 w-8 rounded-lg grayscale">
+              <AvatarImage :src="avatarSrc" :alt="auth.user?.name || 'Usuario'" />
+              <AvatarFallback class="rounded-lg">{{ initials }}</AvatarFallback>
             </Avatar>
             <div class="grid flex-1 text-left text-sm leading-tight">
-              <span class="truncate font-semibold">{{ auth.user?.name || 'Usuario' }}</span>
+              <span class="truncate font-medium">{{ auth.user?.name || 'Usuario' }}</span>
               <span class="truncate text-xs text-muted-foreground">{{ auth.user?.email }}</span>
             </div>
             <ChevronsUpDown class="ml-auto size-4" />