✅ CORRECTO                    ❌ INCORRECTO
┌─────────────────────┐        ┌─────────────────────┐
│ Name* (required)    │        │ Description         │
│ Code* (required)    │        │ Notes               │
│ Description         │        │ Name* (required)    │
│ Notes               │        │ Code* (required)    │
└─────────────────────┘        └─────────────────────┘

1. Identificadores     → Código, ID externo (lo trae de otro sistema)
2. Datos básicos       → Nombre, descripción (lo sabe de antemano)
3. Clasificación       → Tipo, categoría (debe elegir)
4. Detalles            → Campos específicos del dominio
5. Contacto            → Email, teléfono (si aplica)
6. Configuración       → Flags, opciones (decisiones finales)
7. Estado              → isActive (usualmente al final)

<!-- Campos principales visibles -->
<mat-form-field class="col-8">Nombre</mat-form-field>
<mat-form-field class="col-4">Código</mat-form-field>

<!-- Configuración avanzada colapsada -->
<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>Configuración avanzada</mat-panel-title>
    </mat-expansion-panel-header>
    <!-- Campos opcionales aquí -->
</mat-expansion-panel>

<!-- País primero (padre) -->
<mat-form-field class="col-4">
    <mat-select formControlName="countryId">...</mat-select>
</mat-form-field>

<!-- Estado/Provincia después (dependiente) -->
<mat-form-field class="col-4">
    <mat-select
        [disabled]="!fg.get('countryId').value"
        formControlName="stateId"
    >
        ...
    </mat-select>
</mat-form-field>

Campo: name        → required (+3) + identificador (+2) = 5  → PRIMERO
Campo: code        → required (+3) + identificador (+2) = 5  → PRIMERO
Campo: type        → required (+3) = 3                       → SEGUNDO
Campo: description → opcional = 0                            → TERCERO
Campo: isActive    → config (-1) = -1                        → CUARTO
Campo: createdAt   → auditoría (-2) = -2                     → ÚLTIMO/HIDDEN

// En ngOnInit o después de crear el form
this.fg.get('name')?.markAsTouched(); // O usar cdkFocusInitial en el input

<mat-form-field class="col-6">
    <mat-label>Email</mat-label>
    <input
        type="email"
        matInput
        formControlName="email"
    />
    <mat-error>
        @if (fg.get('email')?.hasError('required')) { {{
        t('validation.Required') }} } @if (fg.get('email')?.hasError('email')) {
        {{ t('validation.InvalidEmail') }} }
    </mat-error>
</mat-form-field>

<input
    matInput
    formControlName="name"
    cdkFocusInitial
/>

<!-- ✅ CORRECTO: orden HTML = orden visual = orden Tab -->
<input formControlName="name" />
<!-- Tab 1 -->
<input formControlName="code" />
<!-- Tab 2 -->
<input formControlName="email" />
<!-- Tab 3 -->

<mat-form-field class="col-4">
    <mat-label>Estado/Provincia</mat-label>
    <mat-select formControlName="stateId">
        @for (state of filteredStates; track state.id) {
        <mat-option [value]="state.id">{{ state.name }}</mat-option>
        }
    </mat-select>
    @if (!fg.get('countryId')?.value) {
    <mat-hint>Seleccione un país primero</mat-hint>
    }
</mat-form-field>

<mat-form-field class="col-4">
    <mat-label>Total</mat-label>
    <input
        [value]="calculatedTotal"
        matInput
        readonly
    />
    <mat-hint>Calculado automáticamente</mat-hint>
</mat-form-field>

┌─────────────────────────────────────────────────────────┐
│ [Description: col-12]              ← Opcional primero   │
│ [isActive: col-4] [Notes: col-8]   ← Config mezclada    │
│ [Name*: col-8] [Code*: col-4]      ← Required al final  │
└─────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────┐
│ [Code*: col-4] [Name*: col-8]      ← Required primero   │
│ [Description: col-12]              ← Opcional después   │
│ [Notes: col-12]                    ← Opcional después   │
│ [isActive: col-4]                  ← Config al final    │
└─────────────────────────────────────────────────────────┘