Refactor: Simplificar sección de foto de perfil en formulario

- Mover sección de foto de perfil al primer lugar del formulario
- Eliminar preview del avatar (MsnAvatar) - no repetir
- Simplificar botones: más compactos (size="sm", iconos w-4 h-4)
- Eliminar card/container extra (.avatar-section) con background y padding
- Nueva clase simple .avatar-actions-simple con solo flex y gap
- Limpiar estilos CSS no utilizados (avatar-section, avatar-preview, avatar-actions)

nuxt4/app/components/UserProfileForm.vue

@@ -18,6 +18,37 @@
     </div>
 
     <form @submit.prevent="handleSubmit" class="form-content">
+      <!-- Sección: Foto de Perfil -->
+      <div class="form-section">
+        <h3 class="section-title">
+          <UIcon name="i-heroicons-camera" class="w-5 h-5" />
+          Foto de Perfil
+        </h3>
+        <div class="avatar-actions-simple">
+          <UButton
+            @click="showCamera = true"
+            color="primary"
+            size="sm"
+            :disabled="isUploading"
+          >
+            <UIcon name="i-heroicons-camera" class="w-4 h-4" />
+            {{ currentAvatar && currentAvatar.includes('/avatars/') ? 'Cambiar foto' : 'Tomar foto' }}
+          </UButton>
+
+          <UButton
+            v-if="currentAvatar && currentAvatar.includes('/avatars/')"
+            @click="removeAvatar"
+            color="neutral"
+            variant="soft"
+            size="sm"
+            :disabled="isUploading"
+          >
+            <UIcon name="i-heroicons-trash" class="w-4 h-4" />
+            Eliminar
+          </UButton>
+        </div>
+      </div>
+
       <!-- Sección: Información Básica -->
       <div class="form-section">
         <h3 class="section-title">
@@ -159,53 +190,6 @@
             />
             <span class="field-help">Próximamente disponible</span>
           </div>
-
-          <!-- Avatar / Foto de perfil -->
-          <div class="form-field full-width">
-            <label class="field-label">
-              <UIcon name="i-heroicons-camera" class="w-4 h-4" />
-              Foto de perfil
-            </label>
-
-            <div class="avatar-section">
-              <!-- Preview del avatar actual -->
-              <div class="avatar-preview">
-                <MsnAvatar
-                  :src="currentAvatar"
-                  :alt="user?.name || user?.username"
-                  :presence-status="'online'"
-                  :size="120"
-                />
-              </div>
-
-              <!-- Botones de acción -->
-              <div class="avatar-actions">
-                <UButton
-                  @click="showCamera = true"
-                  color="primary"
-                  :disabled="isUploading"
-                >
-                  <UIcon name="i-heroicons-camera" class="w-5 h-5" />
-                  {{ currentAvatar ? 'Cambiar foto' : 'Tomar foto' }}
-                </UButton>
-
-                <UButton
-                  v-if="currentAvatar && currentAvatar.includes('/avatars/')"
-                  @click="removeAvatar"
-                  color="neutral"
-                  variant="soft"
-                  :disabled="isUploading"
-                >
-                  <UIcon name="i-heroicons-trash" class="w-5 h-5" />
-                  Eliminar
-                </UButton>
-              </div>
-            </div>
-
-            <span class="field-help">
-              Usa la cámara para tomar una foto de perfil personalizada
-            </span>
-          </div>
         </div>
       </div>
 
@@ -567,26 +551,10 @@ const removeAvatar = async () => {
   font-style: italic;
 }
 
-.avatar-section {
+.avatar-actions-simple {
   display: flex;
-  align-items: center;
-  gap: 2rem;
-  padding: 1rem;
-  background: rgba(255, 255, 255, 0.5);
-  backdrop-filter: blur(10px);
-  border-radius: 1rem;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.avatar-preview {
-  flex-shrink: 0;
-}
-
-.avatar-actions {
-  display: flex;
-  flex-direction: column;
   gap: 0.75rem;
-  flex: 1;
+  flex-wrap: wrap;
 }
 
 .camera-modal {
@@ -645,15 +613,6 @@ const removeAvatar = async () => {
   .form-actions {
     flex-direction: column;
   }
-
-  .avatar-section {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .avatar-actions {
-    width: 100%;
-  }
 }
 </style>
 
@@ -688,11 +647,6 @@ const removeAvatar = async () => {
   border-top-color: rgba(255, 255, 255, 0.1);
 }
 
-.dark .avatar-section {
-  background: rgba(255, 255, 255, 0.05) !important;
-  border-color: rgba(255, 255, 255, 0.1) !important;
-}
-
 .dark .modal-title {
   color: var(--color-gray-100) !important;
 }