feat(web): plan de cuentas como SAP (árbol con grupos y nivel al lado del formulario; propiedades, costos e info detallada)

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

apps/web/src/app/features/masters/master-form.page.ts

@@ -9,7 +9,7 @@ import { RowsTable } from '../../shared/grid/rows-table';
 import { Icon, SboWindow, Tab, Tabs, Toolbar, type StatusMessage, type WindowBadge } from '../../shared/window';
 import { updatePayload, type DocRecord } from '../documents/document-model';
 import type { HeaderField } from '../documents/document-layouts';
-import { AccountGroups } from './finanzas/account-groups';
+import { ChartTreePanel } from './finanzas/chart-tree.panel';
 import { MasterField } from './master-field';
 import {
   type CollectionRow,
@@ -37,9 +37,14 @@ const text = (v: unknown): string => (v === null || v === undefined ? '' : Strin
 @Component({
   selector: 'sbo-master-form-page',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [AccountGroups, Icon, MasterField, RouterLink, RowsTable, SboWindow, Tab, Tabs, Toolbar],
+  imports: [ChartTreePanel, Icon, MasterField, RouterLink, RowsTable, SboWindow, Tab, Tabs, Toolbar],
   templateUrl: './master-form.page.html',
-  styles: '.addrow { margin: 6px 0 0; }',
+  styles: `
+    .addrow { margin: 6px 0 0; }
+    .split.two { display: grid; grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); gap: 16px; align-items: start; }
+    .split.two .sbo-hdr { grid-template-columns: minmax(0, 1fr); gap: 4px; }
+    .left { min-width: 0; }
+  `,
 })
 export class MasterFormPage {
   private readonly route = inject(ActivatedRoute);
@@ -166,9 +171,9 @@ export class MasterFormPage {
     return !c.readonly && c.mode === 'replace' && c.growable !== false;
   }
 
-  /** Código con el que se ve el grupo del plan de cuentas: el de la cuenta o, si es nueva, el de su cuenta padre. */
+  /** Cuenta que se resalta en el árbol del plan de cuentas: la abierta o, si es nueva, su cuenta padre (que fija el grupo). */
   protected groupCode(): string {
-    return text(this.header()['FatherAccountKey']) || text(this.header()['Code']);
+    return this.key() ?? text(this.header()['FatherAccountKey']);
   }
 
   protected value(key: string): unknown {