Formulario mejorado con iconos, headers y nuevos campos

- Reorganizar formulario en 4 secciones con headers:
  * Información Básica (username, UID, nombre, email)
  * Conectividad (contraseña WiFi)
  * Información Personal (teléfono, cédula, fecha, avatar)
  * Seguridad y Acceso (NFC, PIN, código Nucleo)
- Agregar UID de Authentik (solo lectura)
- Agregar contraseña WiFi Nucleo (solo lectura)
- Iconos en todos los campos y secciones
- Labels personalizados con iconos heroicons
- Indicador de campos requeridos (*)
- Textos de ayuda mejorados
- Estilos glassmorphism para secciones
- Modo oscuro completo
- Responsive design mejorado

nuxt4/app/components/UserProfileForm.vue

@@ -18,129 +18,218 @@
     </div>
 
     <form @submit.prevent="handleSubmit" class="form-content">
-      <div class="form-grid">
-        <!-- Nombre de usuario (readonly) -->
-        <UFormGroup label="Nombre de usuario" name="username">
-          <UInput
-            :model-value="user?.username"
-            disabled
-            :ui="{ base: 'cursor-not-allowed opacity-50' }"
-          />
-          <template #help>
-            <span class="text-xs text-gray-500">El nombre de usuario no se puede cambiar</span>
-          </template>
-        </UFormGroup>
+      <!-- Sección: Información Básica -->
+      <div class="form-section">
+        <h3 class="section-title">
+          <UIcon name="i-heroicons-identification" class="w-5 h-5" />
+          Información Básica
+        </h3>
+        <div class="form-grid">
+          <!-- Nombre de usuario (readonly) -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-at-symbol" class="w-4 h-4" />
+              Nombre de usuario
+            </label>
+            <UInput
+              :model-value="user?.username"
+              disabled
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <span class="field-help">No se puede cambiar</span>
+          </div>
 
-        <!-- Nombre completo -->
-        <UFormGroup label="Nombre completo" name="name" required>
-          <UInput
-            v-model="formData.name"
-            placeholder="Tu nombre completo"
-            :disabled="isSubmitting"
-          />
-        </UFormGroup>
+          <!-- UID de Authentik (readonly) -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-finger-print" class="w-4 h-4" />
+              UID de Authentik
+            </label>
+            <UInput
+              :model-value="user?.uid || 'No disponible'"
+              disabled
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <span class="field-help">Identificador único del sistema</span>
+          </div>
 
-        <!-- Email -->
-        <UFormGroup label="Correo electrónico" name="email" required>
-          <UInput
-            v-model="formData.email"
-            type="email"
-            placeholder="tu@email.com"
-            :disabled="isSubmitting"
-          />
-        </UFormGroup>
+          <!-- Nombre completo -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-user" class="w-4 h-4" />
+              Nombre completo
+              <span class="required">*</span>
+            </label>
+            <UInput
+              v-model="formData.name"
+              placeholder="Tu nombre completo"
+              :disabled="isSubmitting"
+            />
+          </div>
 
-        <!-- Avatar URL (deshabilitado) -->
-        <UFormGroup label="URL del avatar" name="avatar">
-          <UInput
-            v-model="formData.avatar"
-            placeholder="https://ejemplo.com/avatar.jpg"
-            disabled
-            :ui="{ base: 'cursor-not-allowed opacity-50' }"
-          />
-          <template #help>
-            <span class="text-xs text-gray-500">Próximamente disponible</span>
-          </template>
-        </UFormGroup>
+          <!-- Email -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-envelope" class="w-4 h-4" />
+              Correo electrónico
+              <span class="required">*</span>
+            </label>
+            <UInput
+              v-model="formData.email"
+              type="email"
+              placeholder="tu@email.com"
+              :disabled="isSubmitting"
+            />
+          </div>
+        </div>
+      </div>
 
-        <!-- Teléfono (deshabilitado) -->
-        <UFormGroup label="Teléfono" name="phone">
-          <UInput
-            v-model="formData.phone"
-            placeholder="+506 1234-5678"
-            disabled
-            :ui="{ base: 'cursor-not-allowed opacity-50' }"
-          />
-          <template #help>
-            <span class="text-xs text-gray-500">Próximamente disponible</span>
-          </template>
-        </UFormGroup>
+      <!-- Sección: Conectividad -->
+      <div class="form-section">
+        <h3 class="section-title">
+          <UIcon name="i-heroicons-wifi" class="w-5 h-5" />
+          Conectividad
+        </h3>
+        <div class="form-grid">
+          <!-- Contraseña WiFi (readonly) -->
+          <div class="form-field full-width">
+            <label class="field-label">
+              <UIcon name="i-heroicons-key" class="w-4 h-4" />
+              Contraseña WiFi Nucleo
+            </label>
+            <UInput
+              value="Nucleo2024WiFi!"
+              disabled
+              type="text"
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <span class="field-help">Contraseña de la red WiFi de Nucleo</span>
+          </div>
+        </div>
+      </div>
 
-        <!-- Cédula (deshabilitado) -->
-        <UFormGroup label="Cédula" name="cedula">
-          <UInput
-            v-model="formData.cedula"
-            placeholder="1-2345-6789"
-            disabled
-            :ui="{ base: 'cursor-not-allowed opacity-50' }"
-          />
-          <template #help>
-            <span class="text-xs text-gray-500">Próximamente disponible</span>
-          </template>
-        </UFormGroup>
+      <!-- Sección: Información Personal -->
+      <div class="form-section">
+        <h3 class="section-title">
+          <UIcon name="i-heroicons-user-circle" class="w-5 h-5" />
+          Información Personal
+        </h3>
+        <div class="form-grid">
+          <!-- Teléfono (deshabilitado) -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-phone" class="w-4 h-4" />
+              Teléfono
+            </label>
+            <UInput
+              v-model="formData.phone"
+              placeholder="+506 1234-5678"
+              disabled
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <span class="field-help">Próximamente disponible</span>
+          </div>
 
-        <!-- Fecha de nacimiento (deshabilitado) -->
-        <UFormGroup label="Fecha de nacimiento" name="birthdate">
-          <UInput
-            v-model="formData.birthdate"
-            type="date"
-            disabled
-            :ui="{ base: 'cursor-not-allowed opacity-50' }"
-          />
-          <template #help>
-            <span class="text-xs text-gray-500">Próximamente disponible</span>
-          </template>
-        </UFormGroup>
+          <!-- Cédula (deshabilitado) -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-identification" class="w-4 h-4" />
+              Cédula
+            </label>
+            <UInput
+              v-model="formData.cedula"
+              placeholder="1-2345-6789"
+              disabled
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <span class="field-help">Próximamente disponible</span>
+          </div>
 
-        <!-- NFC vinculada (deshabilitado) -->
-        <UFormGroup label="NFC vinculada" name="nfc">
-          <UInput
-            v-model="formData.nfc"
-            placeholder="ID de tarjeta NFC"
-            disabled
-            :ui="{ base: 'cursor-not-allowed opacity-50' }"
-          />
-          <template #help>
-            <span class="text-xs text-gray-500">Próximamente disponible</span>
-          </template>
-        </UFormGroup>
+          <!-- Fecha de nacimiento (deshabilitado) -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-cake" class="w-4 h-4" />
+              Fecha de nacimiento
+            </label>
+            <UInput
+              v-model="formData.birthdate"
+              type="date"
+              disabled
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <span class="field-help">Próximamente disponible</span>
+          </div>
 
-        <!-- PIN numérico (deshabilitado) -->
-        <UFormGroup label="PIN numérico" name="pin">
-          <UInput
-            v-model="formData.pin"
-            type="password"
-            placeholder="••••"
-            disabled
-            :ui="{ base: 'cursor-not-allowed opacity-50' }"
-          />
-          <template #help>
-            <span class="text-xs text-gray-500">Próximamente disponible</span>
-          </template>
-        </UFormGroup>
+          <!-- Avatar URL (deshabilitado) -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-photo" class="w-4 h-4" />
+              URL del avatar
+            </label>
+            <UInput
+              v-model="formData.avatar"
+              placeholder="https://ejemplo.com/avatar.jpg"
+              disabled
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <span class="field-help">Próximamente disponible</span>
+          </div>
+        </div>
+      </div>
 
-        <!-- Código Nucleo V2 (deshabilitado) -->
-        <UFormGroup label="Código Nucleo V2" name="nucleoCode">
-          <UInput
-            v-model="formData.nucleoCode"
-            placeholder="NUCLEO-XXXX-XXXX"
-            disabled
-            :ui="{ base: 'cursor-not-allowed opacity-50' }"
-          />
-          <template #help>
-            <span class="text-xs text-gray-500">Próximamente disponible</span>
-          </template>
-        </UFormGroup>
+      <!-- Sección: Seguridad y Acceso -->
+      <div class="form-section">
+        <h3 class="section-title">
+          <UIcon name="i-heroicons-shield-check" class="w-5 h-5" />
+          Seguridad y Acceso
+        </h3>
+        <div class="form-grid">
+          <!-- NFC vinculada (deshabilitado) -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-credit-card" class="w-4 h-4" />
+              NFC vinculada
+            </label>
+            <UInput
+              v-model="formData.nfc"
+              placeholder="ID de tarjeta NFC"
+              disabled
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <span class="field-help">Próximamente disponible</span>
+          </div>
+
+          <!-- PIN numérico (deshabilitado) -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-lock-closed" class="w-4 h-4" />
+              PIN numérico
+            </label>
+            <UInput
+              v-model="formData.pin"
+              type="password"
+              placeholder="••••"
+              disabled
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <span class="field-help">Próximamente disponible</span>
+          </div>
+
+          <!-- Código Nucleo V2 (deshabilitado) -->
+          <div class="form-field">
+            <label class="field-label">
+              <UIcon name="i-heroicons-qr-code" class="w-4 h-4" />
+              Código Nucleo V2
+            </label>
+            <UInput
+              v-model="formData.nucleoCode"
+              placeholder="NUCLEO-XXXX-XXXX"
+              disabled
+              :ui="{ base: 'cursor-not-allowed opacity-50' }"
+            />
+            <span class="field-help">Próximamente disponible</span>
+          </div>
+        </div>
       </div>
 
       <!-- Botones de acción -->
@@ -270,12 +359,60 @@ const handleSubmit = async () => {
   gap: 2rem;
 }
 
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-gray-800);
+  margin: 0 0 0.5rem 0;
+  padding-bottom: 0.75rem;
+  border-bottom: 2px solid rgba(var(--color-primary-500), 0.2);
+}
+
 .form-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
 }
 
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.form-field.full-width {
+  grid-column: 1 / -1;
+}
+
+.field-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-gray-700);
+}
+
+.field-label .required {
+  color: rgb(var(--color-error-500));
+  margin-left: 0.125rem;
+}
+
+.field-help {
+  font-size: 0.75rem;
+  color: var(--color-gray-500);
+  font-style: italic;
+}
+
 .form-actions {
   display: flex;
   justify-content: flex-end;
@@ -294,11 +431,19 @@ const handleSubmit = async () => {
     font-size: 1.5rem;
   }
 
+  .section-title {
+    font-size: 1rem;
+  }
+
   .form-grid {
     grid-template-columns: 1fr;
     gap: 1rem;
   }
 
+  .form-field.full-width {
+    grid-column: 1;
+  }
+
   .form-actions {
     flex-direction: column;
   }
@@ -319,6 +464,19 @@ const handleSubmit = async () => {
   color: var(--color-gray-100) !important;
 }
 
+.dark .section-title {
+  color: var(--color-gray-100) !important;
+  border-bottom-color: rgba(var(--color-primary-500), 0.3) !important;
+}
+
+.dark .field-label {
+  color: var(--color-gray-300) !important;
+}
+
+.dark .field-help {
+  color: var(--color-gray-400) !important;
+}
+
 .dark .form-actions {
   border-top-color: rgba(255, 255, 255, 0.1);
 }