feat(web): fila del flete (gastos adicionales) y toolbar de ancho completo; la configuración de pantallas se carga en diferido

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

apps/web/src/app/shared/window/toolbar.ts

@@ -1,13 +1,16 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, booleanAttribute, input } from '@angular/core';
 
 /**
  * Barra de herramientas del documento (Nueva, Buscar, navegación...). Los botones son
  * `<button class="tb">` con un `<sbo-icon>`; `<span class="tb-sep">` separa grupos.
+ *
+ * Con `bleed` ocupa todo el ancho del área de contenido (como en SBO y el mockup): sin el margen de
+ * 16 px de la página ni bordes laterales, pegada a la barra superior.
  */
 @Component({
   selector: 'sbo-toolbar',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { role: 'toolbar' },
+  host: { role: 'toolbar', '[class.bleed]': 'bleed()' },
   template: '<ng-content />',
   styles: `
     :host {
@@ -20,6 +23,13 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       border: 1px solid var(--line);
       border-bottom-width: 0;
     }
+    :host(.bleed) {
+      margin: -16px -16px 16px;
+      border-width: 0 0 1px;
+      border-radius: 0;
+    }
   `,
 })
-export class Toolbar {}
+export class Toolbar {
+  readonly bleed = input(false, { transform: booleanAttribute });
+}