Implementar sistema completo de captura y gestión de avatares

- Agregar CameraCapture.vue con soporte multi-dispositivo
  * Soporte para múltiples cámaras (frontal/trasera)
  * Manejo robusto de permisos y errores
  * Preview y confirmación de foto
  * Detección automática de capacidades del dispositivo

- Crear endpoint /api/avatar/upload para subir avatares
  * Validación de tipo y tamaño de archivo
  * Almacenamiento en /public/avatars/
  * Actualización de atributos en Authentik
  * Limpieza automática de avatares antiguos

- Actualizar UserProfileForm con gestión de avatar
  * Integración con CameraCapture en modal
  * Preview del avatar actual con MsnAvatar
  * Opciones para cambiar y eliminar avatar

- Actualizar useAuthentik para avatares personalizados
  * Carga de atributos completos del usuario
  * Soporte para avatar_url desde Authentik
  * Fallback a UI Avatars si no hay custom avatar

nuxt4/app/composables/useAuthentik.ts

@@ -23,6 +23,8 @@ interface AuthentikUser {
   // Metadata de la aplicación y outpost
   appSlug?: string
   outpostName?: string
+  // Atributos personalizados
+  attributes?: Record<string, any>
 }
 
 interface AuthStatusResponse {
@@ -61,8 +63,9 @@ export const useAuthentik = () => {
         uid,
         appSlug,
         outpostName,
-        // Generar avatar URL usando UI Avatars
-        avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(name || username)}&background=random&size=128`
+        // Generar avatar URL usando UI Avatars (se actualizará con avatar personalizado si existe)
+        avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(name || username)}&background=random&size=128`,
+        attributes: {}
       }
     }
 
@@ -72,6 +75,32 @@ export const useAuthentik = () => {
   const user = computed(() => authentikUser.value)
   const isAuthenticated = computed(() => !!user.value)
 
+  // En el cliente, cargar atributos completos del usuario (incluyendo avatar personalizado)
+  const loadUserAttributes = async () => {
+    if (import.meta.client && authentikUser.value) {
+      try {
+        const userData = await $fetch<any>('/api/authentik/user')
+
+        if (userData && userData.attributes) {
+          // Actualizar atributos
+          authentikUser.value.attributes = userData.attributes
+
+          // Si hay avatar personalizado, usarlo
+          if (userData.attributes.avatar_url) {
+            authentikUser.value.avatar = userData.attributes.avatar_url
+          }
+        }
+      } catch (error) {
+        console.error('Error loading user attributes:', error)
+      }
+    }
+  }
+
+  // Ejecutar en cliente al montar
+  if (import.meta.client && authentikUser.value) {
+    loadUserAttributes()
+  }
+
   const logout = () => {
     // Logout completo: invalida la sesión de Authentik completamente
     // Esto cierra sesión en todas las aplicaciones