feat(web): pestañas Contenido, Logística y Finanzas en los documentos de ventas y compras, con datos del socio (contacto, direcciones, condiciones y forma de pago)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/src/app/features/documents/document-form.page.html

@@ -22,25 +22,43 @@
     </div>
   </div>
 
-  @if (pendingType(); as type) {
-    <p class="ask" role="alert">
-      Cambiar el tipo a «{{ pendingTypeLabel() }}» descarta {{ lineCount() === 1 ? 'la línea escrita' : 'las ' + lineCount() + ' líneas escritas' }}.
-      <button type="button" class="btn main" (click)="applyDocType(type)">Sí, cambiar</button>
-      <button type="button" class="btn" (click)="pendingType.set(null)">No, dejar como está</button>
-    </p>
+  @if (layout.tabs; as t) {
+    <sbo-tabs ariaLabel="Secciones del documento">
+      <sbo-tab label="Contenido">
+        <ng-container *ngTemplateOutlet="linesBlock" />
+      </sbo-tab>
+      <sbo-tab label="Logística">
+        <div class="sbo-hdr">
+          <div class="sbo-col">
+            @for (f of t.logistics.left; track $index) {
+              <ng-container *ngTemplateOutlet="field; context: { $implicit: f }" />
+            }
+          </div>
+          <div class="sbo-col">
+            @for (f of t.logistics.right; track $index) {
+              <ng-container *ngTemplateOutlet="field; context: { $implicit: f }" />
+            }
+          </div>
+        </div>
+      </sbo-tab>
+      <sbo-tab label="Finanzas">
+        <div class="sbo-hdr">
+          <div class="sbo-col">
+            @for (f of t.finance.left; track $index) {
+              <ng-container *ngTemplateOutlet="field; context: { $implicit: f }" />
+            }
+          </div>
+          <div class="sbo-col">
+            @for (f of t.finance.right; track $index) {
+              <ng-container *ngTemplateOutlet="field; context: { $implicit: f }" />
+            }
+          </div>
+        </div>
+      </sbo-tab>
+    </sbo-tabs>
+  } @else {
+    <ng-container *ngTemplateOutlet="linesBlock" />
   }
-  <sbo-lines-grid
-    [columns]="columns()"
-    [lines]="lines()"
-    (linesChange)="setLines($event)"
-    (notice)="notify($event)"
-    [readonly]="readOnly()"
-    [newLine]="newLine"
-    [recalc]="recalc()"
-    [multiAdd]="serviceMode() ? undefined : multi"
-    [details]="serviceMode() ? [] : (layout.details ?? [])"
-    [detailHint]="detailHint"
-  />
 
   <div class="sbo-hdr" style="margin-top: 14px">
     <div class="sbo-col">
@@ -320,3 +338,25 @@
     }
   }
 </ng-template>
+
+<ng-template #linesBlock>
+  @if (pendingType(); as type) {
+    <p class="ask" role="alert">
+      Cambiar el tipo a «{{ pendingTypeLabel() }}» descarta {{ lineCount() === 1 ? 'la línea escrita' : 'las ' + lineCount() + ' líneas escritas' }}.
+      <button type="button" class="btn main" (click)="applyDocType(type)">Sí, cambiar</button>
+      <button type="button" class="btn" (click)="pendingType.set(null)">No, dejar como está</button>
+    </p>
+  }
+  <sbo-lines-grid
+    [columns]="columns()"
+    [lines]="lines()"
+    (linesChange)="setLines($event)"
+    (notice)="notify($event)"
+    [readonly]="readOnly()"
+    [newLine]="newLine"
+    [recalc]="recalc()"
+    [multiAdd]="serviceMode() ? undefined : multi"
+    [details]="serviceMode() ? [] : (layout.details ?? [])"
+    [detailHint]="detailHint"
+  />
+</ng-template>