@kaufmann-lab/ui 0.1.9 → 0.1.13

package/types/kaufmann-lab-ui.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { AfterContentInit, TemplateRef, ElementRef, AfterViewInit } from '@angular/core';
+import { AfterContentInit, TemplateRef, Signal, ElementRef, AfterViewInit, InjectionToken, Provider } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 /**
@@ -13,12 +13,36 @@ import { ControlValueAccessor } from '@angular/forms';
  * comparten `Icon`, `icons/index.ts` (registro) y cualquier componente que
  * reciba un `IconName` (`Button`, `MetricCard`, etc.) — no debería requerir
  * importar el componente `Icon` completo solo para tipar una prop.
+ *
+ * `minus`, `maximize`, `minimize`, `crosshair` y `navigation` son una
+ * extensión propia (mismo criterio que `eye-off`): página 5 del PDF no las
+ * incluye, pero los controles flotantes de `kf-map` (zoom, fullscreen,
+ * recenter, follow) los necesitan y ninguno tiene un glyph equivalente ya
+ * en el set — antes de agregarlos se confirmó que no había forma de resolver
+ * esas 5 acciones con un ícono ya existente.
+ *
+ * `message-circle`, `monitor`, `zap` y `pin` son otra extensión propia, mismo
+ * criterio: el selector de canal de entrada de ticket (Llamada/WhatsApp/
+ * Portal/API·agente) de `apps/operations` necesita "burbuja de chat",
+ * "pantalla" y "rayo" y ninguno tiene glyph equivalente en el set (`phone`
+ * ya cubre "Llamada", no hizo falta agregarlo). `pin` es la acción de
+ * fijar/soltar un subheader — se confirmó que no alcanza con reusar
+ * `map-pin`, que en este mismo dominio representa ubicación geográfica real
+ * de vehículos; reusarlo para "fijar" generaría ambigüedad con los markers
+ * de mapa.
  */
-type IconName = 'activity' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'award' | 'bar-chart' | 'bell' | 'bus' | 'calculator' | 'calendar' | 'car' | 'cart' | 'check' | 'check-circle' | 'check-square' | 'chevron-down' | 'chevron-left' | 'chevron-left-bar' | 'chevron-right' | 'clipboard' | 'clock' | 'credit-card' | 'download' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'inbox' | 'layers' | 'list' | 'map' | 'map-pin' | 'menu' | 'mic' | 'mic-off' | 'more-vertical' | 'pause' | 'phone' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x';
+type IconName = 'activity' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'award' | 'bar-chart' | 'bell' | 'bus' | 'calculator' | 'calendar' | 'car' | 'cart' | 'check' | 'check-circle' | 'check-square' | 'chevron-down' | 'chevron-left' | 'chevron-left-bar' | 'chevron-right' | 'clipboard' | 'clock' | 'credit-card' | 'crosshair' | 'download' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'home' | 'inbox' | 'layers' | 'list' | 'log-out' | 'map' | 'map-pin' | 'maximize' | 'menu' | 'message-circle' | 'mic' | 'mic-off' | 'minimize' | 'minus' | 'monitor' | 'more-vertical' | 'navigation' | 'pause' | 'phone' | 'pin' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x' | 'zap';
 
 type IconSize = 'sm' | 'md' | 'lg';
+/** Ángulos de rotación soportados por `rotate` — cubre los casos reales del
+ * design system (un chevron que apunta en 4 direcciones posibles según
+ * estado, ej. orden ascendente/descendente o un panel abierto/cerrado);
+ * no un `number` libre, para no habilitar ángulos arbitrarios sin caso de
+ * uso ni animación pensada. */
+type IconRotation = 0 | 90 | 180 | 270;
 /**
- * Ícono de trazo del design system — 60 glyphs (59 de la página 5 + `eye-off`), grilla 24×24,
+ * Ícono de trazo del design system — 71 glyphs (59 de la página 5 + extensiones
+ * propias documentadas en `icon-name.ts`), grilla 24×24,
  * grosor de trazo 1.9px. Referencia un sprite SVG embebido (ver
  * `icon-sprite.ts`) vía `<use>`, así que no hay peso de red adicional por
  * cada instancia: el sprite se inyecta al DOM una única vez, la primera
@@ -29,17 +53,36 @@ type IconSize = 'sm' | 'md' | 'lg';
  * sigue siempre `currentColor` — se hereda del texto del elemento
  * contenedor, nunca se fija en el propio ícono.
  *
+ * `rotate` gira el mismo glyph en vez de requerir un ícono aparte por
+ * dirección — útil para un chevron que representa un estado con más de una
+ * orientación (ej. orden ascendente/descendente de una columna, un panel
+ * abierto/cerrado). La rotación transiciona con la misma duración que el
+ * resto de las transiciones cortas del design system.
+ *
  *   <kf-icon name="alert-triangle" size="sm" />
+ *   <kf-icon name="chevron-down" [rotate]="isOpen() ? 180 : 0" />
  *   <kf-button icon="calendar">Reservar hora</kf-button> <!-- ver Button -->
  */
 declare class Icon {
     readonly name: _angular_core.InputSignal<IconName>;
     readonly size: _angular_core.InputSignal<IconSize>;
+    readonly rotate: _angular_core.InputSignal<IconRotation>;
+    /**
+     * Rellena el glyph (`fill: currentColor`) en vez de dejarlo solo de trazo.
+     * Pensado para un estado activo/marcado de un ícono usado como toggle (ej.
+     * "fijar" un panel) — un cambio de COLOR únicamente puede no distinguirse
+     * lo suficiente en marcas cuyo `--kf-color-secondary` queda cerca del color
+     * de texto por default; rellenar el área cambia más píxeles y se percibe
+     * con más contraste aunque el tono sea similar. No es el default del
+     * design system (sigue siendo de trazo, página 6 del PDF) — es opt-in por
+     * componente para ese caso puntual.
+     */
+    readonly filled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private readonly document;
     protected readonly pixelSize: _angular_core.Signal<string>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Icon, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Icon, "kf-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Icon, "kf-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rotate": { "alias": "rotate"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -81,47 +124,73 @@ declare class AdminBadge {
 }
 
 /**
- * Wraps a native `<button>`, so keyboard handling, focus and form submission
- * keep working. The cost of the wrapper is forwarding `disabled` and `type` by
- * hand: as attributes on a custom element they have no native effect.
+ * Envuelve un `<button>` nativo: mantiene teclado, foco y submit de formulario.
+ * Como es un elemento personalizado, ningún atributo ARIA puesto en el host
+ * llega al `<button>` interno — por eso `disabled`, `type`, `ariaLabel`,
+ * `ariaExpanded` y `ariaPressed` se reenvían a mano.
  *
- * Five variants (page 9 of the design system): `primary` (main action, blue),
- * `secondary` (service actions, orange), `ghost` (low-emphasis, no fill),
- * `outline` (medium-emphasis, bordered) and `danger` (destructive
- * confirmations — red, see the Confirmation Modal pattern on page 30). Three
- * sizes (`sm`/`md`/`lg`). `icon` renders a leading glyph (`kf-icon`) before
- * the projected label; `block` stretches the button to the full width of its
- * container.
+ * Seis variantes: `primary`, `secondary`, `ghost`, `outline`, `danger`,
+ * `surface`. Tres tamaños (`sm`/`md`/`lg`). `icon` agrega un glifo antes del
+ * label proyectado; `block` estira el botón a todo el ancho de su contenedor.
  *
- * `(click)` is not forwarded — it bubbles from the inner button to the host.
+ * `surface` es la variante neutra pensada para flotar SOBRE contenido
+ * variable (ej. los controles de `kf-map` sobre un mapa que cambia de tema:
+ * calles, satélite, oscuro) — fondo sólido de `--kf-color-surface` con
+ * sombra, en vez de depender de contraste contra lo que haya debajo (que
+ * `ghost`/`outline`, transparentes, no pueden garantizar ahí).
  *
- * `loading` replaces the projected content with `kf-spinner` and forces
- * `disabled` — for the common "Ingresando…"/"Enviando…" submit pattern,
- * which before this prop existed as plain text swaps with no visual
- * indicator (see `web-portal-latam-frontend`'s login submit buttons).
+ * `shape="circle"` vuelve el botón cuadrado con esquina `pill` (mismo ancho
+ * y alto, sin padding horizontal extra) — pensado para uso solo-ícono
+ * (`icon` sin contenido proyectado): combinarlo con un label visible
+ * descentra el ícono, no es el caso de uso.
  *
- *   <kf-button (click)="save()">Save</kf-button>
- *   <kf-button variant="ghost" disabled>Cancel</kf-button>
- *   <kf-button variant="danger" (click)="remove()">Delete</kf-button>
- *   <kf-button size="sm" icon="calendar" block>Reservar hora</kf-button>
+ * `(click)` no se reenvía: burbujea del botón interno al host solo.
+ *
+ * `loading` reemplaza el contenido proyectado por `kf-spinner` y fuerza
+ * `disabled`.
+ *
+ * Botón solo-ícono (sin label visible): pasar `ariaLabel` en vez de dejar el
+ * botón sin nombre accesible.
+ *
+ *   <kf-button (click)="save()">Guardar</kf-button>
+ *   <kf-button variant="danger" (click)="remove()">Eliminar</kf-button>
+ *   <kf-button size="sm" icon="external-link" ariaLabel="Expandir" (click)="expand()" />
  *   <kf-button type="submit" [loading]="submitting()">Ingresar</kf-button>
+ *   <kf-button variant="surface" shape="circle" icon="plus" ariaLabel="Acercar" [ariaPressed]="false" />
  */
 declare class Button {
-    readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "ghost" | "outline" | "danger">;
+    readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "ghost" | "outline" | "danger" | "surface">;
     readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly shape: _angular_core.InputSignal<"rect" | "circle">;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Matches the native default: submits when inside a `<form>`. */
+    /** Igual al default nativo: hace submit dentro de un `<form>`. */
     readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
-    /** Leading icon, rendered via `kf-icon` before the projected label. */
+    /** Ícono líder, renderizado con `kf-icon` antes del label proyectado. */
     readonly icon: _angular_core.InputSignal<IconName | undefined>;
-    /** Stretches the button to the full width of its container. */
+    /** Estira el botón a todo el ancho de su contenedor. */
     readonly block: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** Replaces the projected content with `kf-spinner` and forces `disabled`. */
+    /** Reemplaza el contenido proyectado por `kf-spinner` y fuerza `disabled`. */
     readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    /** `ghost`/`outline` have no solid background — the default spinner ring already reads fine there. */
+    /** Nombre accesible del botón interno — obligatorio quien no proyecta
+     * ningún texto visible (botón solo-ícono), porque el host no lo reenvía. */
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Estado expandido/colapsado para un botón toggle — mismo motivo que
+     * `ariaLabel`, el host no reenvía atributos ARIA al `<button>` interno. */
+    readonly ariaExpanded: _angular_core.InputSignal<boolean | undefined>;
+    /** Estado presionado/no presionado para un botón toggle real (ej. "seguir
+     * vehículo" activo/inactivo) — distinto semánticamente de `ariaExpanded`
+     * (que es para mostrar/ocultar un panel), mismo motivo de reenvío manual.
+     * Con `icon`, presionado (`true`) rellena el glyph (`kf-icon[filled]`) en
+     * vez de solo cambiar de color — un toggle solo-ícono necesita esa señal
+     * más fuerte para leerse activo, y así ningún consumidor tiene que
+     * acordarse de pedirlo aparte. */
+    readonly ariaPressed: _angular_core.InputSignal<boolean | undefined>;
+    /** `ghost`/`outline`/`surface` no tienen fondo oscuro sólido — el anillo
+     * del spinner por defecto ya se lee bien ahí sin variante propia
+     * (`surface` es fondo claro con texto oscuro, mismo motivo que `outline`). */
     protected readonly hasSolidFill: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Button, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "kf-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "kf-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 type AlertTone = 'info' | 'ok' | 'warn' | 'error';
@@ -134,10 +203,6 @@ type AlertTone = 'info' | 'ok' | 'warn' | 'error';
  * deja de renderizar. El consumidor puede volver a abrirlo poniéndolo en
  * `true` (ej. cuando la validación falla otra vez).
  *
- * ponytail: los glifos van inline en vez de venir de un componente Icon —
- * son 4 paths fijos, uno por tono, y no existe todavía `kf-icon` en la
- * librería. Cuando exista, se reemplaza este `@switch` por `<kf-icon>`.
- *
  *   <kf-alert tone="warn" title="SOAT por vencer">Vence el 15/08.</kf-alert>
  *   <kf-alert tone="ok" [(open)]="saved" dismissible>Pago registrado.</kf-alert>
  */
@@ -153,10 +218,139 @@ declare class Alert {
      * Los avisos informativos se anuncian sin cortar lo que se esté leyendo.
      */
     protected readonly ariaRole: _angular_core.Signal<"alert" | "status">;
+    protected readonly toneIcon: _angular_core.Signal<IconName>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Alert, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
 }
 
+type AlertRowTone = 'warn' | 'error';
+/**
+ * Fila clickeable de una lista de pendientes/alertas: ícono circular con
+ * tono semántico, texto de una línea, chevron al final. Pensada para
+ * agrupar varias dentro de un `kf-card` (ej. "Tus pendientes" del
+ * dashboard) — no incluye el contenedor en sí.
+ *
+ *   <kf-alert-row icon="file" tone="warn" text="2 cotizaciones esperan tu aprobación" (rowClick)="onNavigate('cotizaciones')" />
+ */
+declare class AlertRow {
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly tone: _angular_core.InputSignal<AlertRowTone>;
+    readonly text: _angular_core.InputSignal<string>;
+    readonly rowClick: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertRow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertRow, "kf-alert-row", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; }, { "rowClick": "rowClick"; }, never, never, true, never>;
+}
+
+/**
+ * Marca el contenido que va en el slot de SSO de `kf-auth-layout` (típico:
+ * un `kf-sso-button`, o varios si el ecosistema suma más de un proveedor).
+ * `AuthLayout` la detecta vía `contentChild` para decidir si renderiza el
+ * separador "o" entre el bloque de SSO y el formulario tradicional
+ * proyectado en el slot por defecto — sin este marcador, `AuthLayout`
+ * tendría que adivinar si hubo proyección leyendo el DOM a mano.
+ *
+ *   <kf-auth-layout brand="Mi Portal">
+ *     <div kfAuthLayoutSso>
+ *       <kf-sso-button provider="microsoft" (click)="loginWithMicrosoft()" />
+ *     </div>
+ *     <form ...>...</form>
+ *   </kf-auth-layout>
+ */
+declare class AuthLayoutSso {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AuthLayoutSso, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AuthLayoutSso, "[kfAuthLayoutSso]", never, {}, {}, never, never, true, never>;
+}
+
+type AuthLayoutBackground = 'plain' | 'gradient' | 'pattern';
+/**
+ * Layout a pantalla completa para pantallas de autenticación (login,
+ * recuperar contraseña, confirmación de envío) — panel de marca a la
+ * izquierda, contenido libre a la derecha en desktop; en mobile el panel de
+ * marca se oculta y un logo compacto queda visible arriba del formulario.
+ *
+ * Resuelve solo el "cascarón": cada portal arma su propio `<form>` con los
+ * componentes de la librería y lo proyecta en el slot por defecto.
+ *
+ *   <kf-auth-layout
+ *     brand="Mi Portal"
+ *     brandLogoSrc="images/mi-portal-logo-white.png"
+ *     brandLogoMobileSrc="images/mi-portal-logo-black.png"
+ *     brandTagline="Frase corta de marca, propia de cada portal."
+ *   >
+ *     <form (ngSubmit)="onSubmit()">
+ *       <kf-input label="Correo" type="email" />
+ *       <kf-input label="Contraseña" type="password" toggleable />
+ *       <kf-button type="submit">Ingresar</kf-button>
+ *     </form>
+ *   </kf-auth-layout>
+ *
+ * `backgroundVariant` controla la superficie del panel derecho:
+ * `'plain'` (fondo liso, comportamiento histórico), `'gradient'` (default —
+ * degradé sutil derivado de `--kf-color-primary`/`--kf-color-surface` vía
+ * `color-mix()`, ningún color hardcodeado) o `'pattern'` (el mismo degradé
+ * más una textura de puntos, también resuelta con tokens). Los tres se
+ * resuelven contra los tokens de tema ACTIVOS — cambiar de tema
+ * (`andes-maq`, `divemotor-star`, `kaufmann-ar`, futuros) no requiere tocar
+ * este componente ni pasarle un color a mano.
+ *
+ * `card`, en `false` por defecto (comportamiento histórico: el contenido
+ * proyectado flota sin superficie propia), envuelve el slot por defecto con
+ * la misma superficie de `kf-card` (fondo, borde, sombra, radio) para que
+ * el formulario deje de verse suelto sobre el fondo del panel.
+ *
+ * `title`/`subtitle` renderizan un encabezado de bienvenida DENTRO de la
+ * card, antes que cualquier otro contenido (jerarquía ya resuelta:
+ * `title-lg` + `body-muted`, ver `Text.ts`) — así ningún consumidor tiene
+ * que adivinar la variante de `kf-text` correcta ni terminar con un
+ * "Iniciar sesión" repetido y suelto dentro de su propio `<form>`. Sin
+ * `title`, no se renderiza ningún encabezado (comportamiento histórico).
+ *
+ * El slot `[kfAuthLayoutSso]` (ver `AuthLayoutSso`) es para el patrón
+ * "SSO primero, credenciales como alternativa secundaria" — típicamente un
+ * `kf-sso-button`. Cuando hay contenido ahí, `AuthLayout` resuelve el
+ * separador "o" automáticamente entre ese bloque y el contenido por
+ * defecto; sin ese slot, nada cambia frente al comportamiento actual.
+ *
+ *   <kf-auth-layout
+ *     brand="Mi Portal"
+ *     backgroundVariant="pattern"
+ *     card
+ *     title="Iniciar sesión"
+ *     subtitle="Usa tu cuenta corporativa o ingresa con contraseña"
+ *   >
+ *     <div kfAuthLayoutSso>
+ *       <kf-sso-button provider="microsoft" (click)="loginWithMicrosoft()" />
+ *     </div>
+ *     <form (ngSubmit)="onSubmit()">
+ *       <kf-input label="Correo" type="email" />
+ *       <kf-input label="Contraseña" type="password" toggleable />
+ *       <kf-button type="submit">Ingresar</kf-button>
+ *     </form>
+ *   </kf-auth-layout>
+ */
+declare class AuthLayout {
+    /** Nombre de marca/portal — wordmark de respaldo si no hay logo, y `alt` de ambos logos. */
+    readonly brand: _angular_core.InputSignal<string>;
+    /** Logo en blanco para el panel oscuro de desktop. Sin esto, se muestra `brand()` como wordmark. */
+    readonly brandLogoSrc: _angular_core.InputSignal<string | undefined>;
+    /** Frase corta bajo el logo. */
+    readonly brandTagline: _angular_core.InputSignal<string | undefined>;
+    /** Logo compacto para mobile, sobre fondo claro. Sin esto, reutiliza `brandLogoSrc`. */
+    readonly brandLogoMobileSrc: _angular_core.InputSignal<string | undefined>;
+    /** Superficie del panel derecho. Default `'gradient'`; `'plain'` preserva el fondo liso histórico. */
+    readonly backgroundVariant: _angular_core.InputSignal<AuthLayoutBackground>;
+    /** Envuelve el contenido proyectado con la superficie de `kf-card` (fondo, borde, sombra). Default `false` — preserva el comportamiento histórico. */
+    readonly card: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Título del encabezado dentro de la card (`title-lg`). Sin este input, no se renderiza ningún encabezado. */
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    /** Subtítulo del encabezado (`body-muted`), debajo de `title`. Sin efecto si `title` no está presente. */
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    /** Presencia de contenido en el slot `[kfAuthLayoutSso]` — controla si se renderiza el separador "o". */
+    protected readonly ssoContent: _angular_core.Signal<AuthLayoutSso | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AuthLayout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AuthLayout, "kf-auth-layout", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "brandLogoSrc": { "alias": "brandLogoSrc"; "required": false; "isSignal": true; }; "brandTagline": { "alias": "brandTagline"; "required": false; "isSignal": true; }; "brandLogoMobileSrc": { "alias": "brandLogoMobileSrc"; "required": false; "isSignal": true; }; "backgroundVariant": { "alias": "backgroundVariant"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; }, {}, ["ssoContent"], ["[kfAuthLayoutSso]", "*"], true, never>;
+}
+
 /**
  * Avatar de usuario: muestra una foto (`src`) o, si no hay foto, las
  * iniciales (`initials`) sobre un fondo con gradiente de marca. `round`
@@ -169,10 +363,6 @@ declare class Alert {
  *   <kf-avatar initials="JD" />
  *   <kf-avatar src="https://…/foto.jpg" [round]="false" />
  *   <kf-avatar initials="TS" pill />
- *
- * Pendiente: si en el futuro se agrega un ícono de fallback (persona
- * genérica) para cuando no hay ni `src` ni `initials`, depende del
- * componente Icon / sprite SVG que todavía no existe en esta librería.
  */
 declare class Avatar {
     readonly initials: _angular_core.InputSignal<string | undefined>;
@@ -187,29 +377,24 @@ declare class Avatar {
 }
 
 /**
- * Pill chica de fondo suave (soft) para un conteo, tag o estado liviano
- * puntual (no un proceso en vivo — para eso existe `kf-status-pill`, que usa
- * borde en vez de relleno). El color de fondo/texto/punto depende de `tone`.
- *
- * El PDF (página 10) fija seis tonos con fondo soft y texto del tono fuerte
- * — nunca fondo saturado con texto blanco, que es más apto para un botón
- * que para una etiqueta de lectura rápida en una lista densa.
- *
- *   <kf-badge tone="ok" dot>Al día</kf-badge>
- *   <kf-badge tone="error">3</kf-badge>
- *
- * Mapeo de `tone` a los seis conceptos de la página 10 y sus tokens
- * semánticos en projects/ui/src/tokens/base.css:
- * neutral -> Neutral (border/text-muted), info -> Información (info-soft/-strong),
- * ok -> Activo (success-soft/-strong), warn -> Pendiente (warning-soft/-strong),
- * error -> Vencido (error-soft/-strong), service -> Servicio (secondary-soft,
- * no existe un `-strong` para secondary todavía — usa el color base).
+ * Pill chica de fondo suave para un conteo, tag o estado liviano puntual —
+ * no un proceso en vivo (para eso, `kf-status-pill`, con borde en vez de
+ * relleno). Fondo soft y texto del tono fuerte según `tone`; `service` usa
+ * el color base porque `secondary` todavía no tiene variante `-strong`.
+ * `variant` es un eje ortogonal a `tone` (mismo patrón que `kf-button`):
+ * `soft` (default) es el fondo de color sólido de siempre; `glass` es
+ * translúcido con desenfoque, pensado para un badge sobre una superficie
+ * de marca (ej. un header navy), no para un banner suelto. En `glass` el
+ * punto (`dot`) usa el color BASE de cada tono, no `-strong` — ese último
+ * está pensado para texto legible sobre el fondo pastel de `soft` y se ve
+ * apagado sobre una superficie translúcida/oscura.
  */
 declare class Badge {
-    readonly tone: _angular_core.InputSignal<"info" | "ok" | "warn" | "error" | "neutral" | "service">;
+    readonly tone: _angular_core.InputSignal<"neutral" | "ok" | "warn" | "error" | "info" | "service">;
+    readonly variant: _angular_core.InputSignal<"soft" | "glass">;
     readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Badge, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "kf-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "kf-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 interface BreadcrumbItem {
@@ -235,10 +420,9 @@ declare class Breadcrumb {
     readonly items: _angular_core.InputSignal<BreadcrumbItem[]>;
     /**
      * Click en un nivel con `href`. Incluye el `MouseEvent` para que un
-     * consumidor con router pueda cortar la navegación nativa.
-     *
-     * ponytail: no dependemos de `@angular/router` acá — sería un peer dep
-     * nuevo en la librería para lo que el consumidor resuelve en una línea.
+     * consumidor con router pueda cortar la navegación nativa. No se depende
+     * de `@angular/router` acá — sería un peer dep nuevo en la librería para
+     * lo que el consumidor resuelve en una línea.
      */
     readonly itemClick: _angular_core.OutputEmitterRef<{
         item: BreadcrumbItem;
@@ -250,6 +434,64 @@ declare class Breadcrumb {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Breadcrumb, "kf-breadcrumb", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
 }
 
+/**
+ * Una categoría de la barra — el componente no sabe qué significa "pagada"
+ * o "vencida", solo dibuja proporciones: `count` decide el ancho relativo
+ * del segmento (`flex-grow`) y de la fila de leyenda que lo acompaña.
+ * `color` es cualquier valor CSS válido (pensado para tokens `var(--kf-*)`,
+ * nunca hex suelto desde el consumidor).
+ */
+interface BucketProgressItem {
+    key: string;
+    label: string;
+    count: number;
+    color: string;
+}
+/**
+ * Barra de progreso segmentada en categorías proporcionales — generaliza
+ * el resumen de "Progreso del plan de pagos" de Pagos y Facturas de OTD
+ * (cuotas pagadas/vencidas/próximas/pendientes) sin acoplarse a esas 4
+ * categorías puntuales: el consumidor pasa sus propios `items` con
+ * `{key, label, count, color}`.
+ *
+ * Los segmentos son proporcionales por CANTIDAD (`flex-grow: count`), no
+ * uno por unidad — con 36 cuotas y 6 pagadas, la barra dibuja 2 anchos
+ * distintos (pagado ~17% / resto ~83%), nunca 36 rectángulos idénticos
+ * (hallazgo real de UX: con volumen alto, un segmento por unidad se vuelve
+ * ilegible). Los `items` con `count: 0` no se dibujan (ni segmento ni
+ * fila de leyenda) — no tiene sentido mostrar una categoría vacía.
+ *
+ * La leyenda debajo reproduce el mismo orden y color que la barra, para
+ * que una categoría se pueda mapear a su cantidad de un vistazo (pedido
+ * explícito de UX: "posicionar correctamente los labels").
+ *
+ *   <kf-bucket-progress
+ *     title="Progreso del plan de pagos"
+ *     [summary]="'6 de 30 cuotas pagadas'"
+ *     [items]="[
+ *       { key: 'paid', label: 'pagadas', count: 6, color: 'var(--kf-color-success)' },
+ *       { key: 'overdue', label: 'vencidas', count: 2, color: 'var(--kf-color-error)' },
+ *       { key: 'upcoming', label: 'próxima', count: 1, color: 'var(--kf-color-warning)' },
+ *       { key: 'pending', label: 'pendientes', count: 21, color: 'var(--kf-color-gray-200)' },
+ *     ]"
+ *   />
+ */
+declare class BucketProgress {
+    readonly title: _angular_core.InputSignal<string>;
+    /** Texto libre a la derecha del título (ej. "6 de 30 cuotas pagadas") —
+     * el componente no sabe calcular ese resumen, lo recibe hecho. */
+    readonly summary: _angular_core.InputSignal<string>;
+    readonly items: _angular_core.InputSignal<BucketProgressItem[]>;
+    protected readonly visibleItems: _angular_core.Signal<BucketProgressItem[]>;
+    protected readonly total: _angular_core.Signal<number>;
+    /** Descripción accesible de la barra completa — un solo `role="img"`
+     * con el desglose en texto, en vez de que cada segmento individual
+     * compita por foco/lectura de screen reader. */
+    protected readonly ariaLabel: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<BucketProgress, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BucketProgress, "kf-bucket-progress", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "summary": { "alias": "summary"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Contenedor base con esquinas redondeadas y sombra sutil — la base visual
  * de paneles, tarjetas de métrica, tablas y bloques de contenido de todo el
@@ -263,7 +505,16 @@ declare class Breadcrumb {
  * cualquier composición (una métrica, una lista, un formulario) pueda vivir
  * dentro sin pelear con estilos propios del `Card`.
  *
- *   <kf-card>Contenido simple</kf-card>
+ * `gap` controla el espacio entre los hijos directos del cuerpo — `md`
+ * (default) separa bloques con peso propio (un `kf-section-header`
+ * seguido de datos, por ejemplo); `xs`/`sm` para texto corrido o bloques
+ * más compactos, `lg`/`xl` para composiciones con más aire entre secciones.
+ *
+ *   <kf-card>
+ *     <kf-section-header title="Cliente" />
+ *     <dl>…</dl>
+ *   </kf-card>
+ *   <kf-card gap="xs">Texto corrido, sin bloques que separar</kf-card>
  *   <kf-card flush>Sin sombra — para superficies ya delimitadas por otra card</kf-card>
  *   <kf-card>
  *     <img kf-card-media src="..." alt="" />
@@ -278,8 +529,10 @@ declare class Breadcrumb {
 declare class Card {
     /** Quita la sombra — para cards anidadas dentro de otra superficie ya elevada. */
     readonly flush: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Espacio entre los hijos directos del cuerpo. `md` es el default. */
+    readonly gap: _angular_core.InputSignal<"sm" | "md" | "lg" | "xs" | "xl">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Card, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Card, "kf-card", never, { "flush": { "alias": "flush"; "required": false; "isSignal": true; }; }, {}, never, ["[kf-card-media]", "*", "[kf-card-actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Card, "kf-card", never, { "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["[kf-card-media]", "*", "[kf-card-actions]"], true, never>;
 }
 
 /**
@@ -294,6 +547,7 @@ declare class CarouselSlide {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselSlide, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselSlide, "kf-carousel-slide", never, {}, {}, never, ["*"], true, never>;
 }
+
 /**
  * Carrusel de slides con flechas, dots y autoplay opcional.
  *
@@ -384,6 +638,13 @@ declare class Checkbox implements ControlValueAccessor {
  *
  *   <kf-chip tone="warn">Pendiente</kf-chip>
  *   <kf-chip tone="ok">Aprobado</kf-chip>
+ *   <kf-chip [dot]="false">4 Unidades</kf-chip>
+ *
+ * `dot` (default `true`) oculta el punto cuando el chip muestra un DATO
+ * (ej. una cantidad — "4 Unidades") y no un ESTADO — antes forzaba a cada
+ * portal a reimplementar el mismo patrón "pill con ícono + texto sin punto
+ * de estado" a mano (visto 2-3 veces idéntico en `web-otd-frontend`:
+ * `quotes-grid.html`/`quote-detail.html` para el conteo de unidades).
  *
  * Nota: la spec original define la unión de tonos como "ok" | "warn" |
  * "error" | "neutral". Internamente se mapean a los tokens semánticos de
@@ -393,9 +654,41 @@ declare class Checkbox implements ControlValueAccessor {
  * de superficie/borde/texto-muted más cercanos).
  */
 declare class Chip {
-    readonly tone: _angular_core.InputSignal<"ok" | "warn" | "error" | "neutral">;
+    readonly tone: _angular_core.InputSignal<"neutral" | "ok" | "warn" | "error">;
+    readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Chip, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "kf-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "kf-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Bloque colapsable genérico: un header clickeable (título + chevron) que
+ * expande/colapsa contenido proyectado libre, sin saber nada de lo que hay
+ * adentro. Building block para layouts responsive donde un bloque se
+ * muestra inline en desktop pero se colapsa en mobile/tablet para ahorrar
+ * espacio vertical — el primer caso de uso real es un panel de filtros de
+ * tabla que en desktop queda siempre abierto y en mobile arranca cerrado.
+ *
+ * `expanded` es two-way, mismo patrón que `Drawer.open`: el consumidor
+ * decide el estado inicial y puede reaccionar a los cambios, pero el propio
+ * click en el header ya alterna el estado sin que el consumidor tenga que
+ * cablear un `(click)` manual.
+ *
+ *   <kf-collapsible title="Filtros" [(expanded)]="filtersOpen">
+ *     ...
+ *   </kf-collapsible>
+ *
+ * El ícono chevron es un SVG inline fijo (no una prop `icon` configurable)
+ * porque esta librería todavía no tiene un componente `Icon`/sprite
+ * compartido — un solo ícono fijo no amerita esperar esa abstracción.
+ */
+declare class Collapsible {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly expanded: _angular_core.ModelSignal<boolean>;
+    private readonly instanceId;
+    readonly triggerId: string;
+    readonly panelId: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Collapsible, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Collapsible, "kf-collapsible", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
 }
 
 /** Metadato clave mostrado junto al selector (RUC, identificación, sucursal). */
@@ -491,6 +784,53 @@ declare class ContentState {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentState, "kf-content-state", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "load": { "alias": "load"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[actions]"], true, never>;
 }
 
+type ContentViewerType = 'image' | 'video';
+/**
+ * Visor a pantalla completa para ampliar una pieza de contenido — hoy
+ * imagen, con `video` ya soportado para cuando haya contenido de ese tipo.
+ * Mismo mecanismo que `kf-modal` (el `<dialog>` nativo resuelve backdrop,
+ * atrapado de foco, top-layer y `Escape`), pero sin panel/título/footer:
+ * el contenido ocupa toda la pantalla sobre un backdrop oscuro.
+ *
+ * `src` acepta lo que venga del backend sin que el consumidor tenga que
+ * normalizarlo primero: una URL (`http(s)://`), un data URI ya armado
+ * (`data:...`), o base64 crudo (se le antepone el prefijo `data:` según
+ * `type`, asumiendo JPEG para imagen y MP4 para video).
+ *
+ *   <kf-content-viewer [(open)]="viewerOpen" [src]="viewerSrc()" alt="Foto del vehículo" />
+ *   <kf-content-viewer [(open)]="viewerOpen" type="video" [src]="viewerSrc()" title="Inspección" />
+ */
+declare class ContentViewer {
+    readonly type: _angular_core.InputSignal<ContentViewerType>;
+    /** URL, data URI, o base64 crudo — ver JSDoc de la clase. */
+    readonly src: _angular_core.InputSignal<string | null>;
+    /** Texto alternativo cuando `type="image"`. */
+    readonly alt: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    /** Visibilidad, two-way: `[(open)]="viewerOpen"`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
+    readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly titleId: string;
+    /** Detecta si `src` ya es una URL o un data URI armado; si no, asume
+     * base64 crudo y le antepone el prefijo `data:` correspondiente a `type`
+     * — el backend a veces manda una cosa, a veces la otra. */
+    protected readonly resolvedSrc: _angular_core.Signal<string | null>;
+    private readonly dialog;
+    private readonly document;
+    constructor();
+    /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
+    protected onCancel(event: Event): void;
+    /**
+     * Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
+     * propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
+     * comparar contra él — no hace falta cortar la propagación en el panel.
+     */
+    protected onHostClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentViewer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentViewer, "kf-content-viewer", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, never, true, never>;
+}
+
 /**
  * Zona que ocupa la columna en la vista de cards. La vista de tabla ignora
  * esto (salvo `media`, que igual se rinde como thumbnail en vez de imprimir
@@ -509,9 +849,40 @@ interface DataTableColumn {
     right?: boolean;
     className?: string;
     cardRole?: DataTableCardRole;
+    /** Habilita ordenar por esta columna clickeando su header (solo vista
+     * tabla — en cards no hay header clickeable). Ciclo asc → desc → sin
+     * orden, un click a la vez. */
+    sortable?: boolean;
+    /** Fija la columna a un borde del scroll horizontal — típicamente la
+     * primera (identificador) y/o la última (acciones). Columnas `sticky`
+     * del mismo lado deben ser consecutivas y estar en ese extremo del
+     * array `columns`; el offset de cada una se calcula sumando el ancho
+     * real de las que ya quedaron fijas antes, medido en runtime (no hay
+     * forma de conocer el ancho de antemano, las columnas son de ancho
+     * variable según su contenido). */
+    sticky?: 'left' | 'right';
+    /** Ancho mínimo forzado — evita que una columna angosta (ej. un chip
+     * corto) se comprima más de la cuenta cuando hay poco espacio y otras
+     * columnas compiten por él. */
+    minWidth?: string;
 }
 /** Vistas disponibles cuando `cardable` está activo. */
 type DataTableView = 'table' | 'cards';
+/** Opciones de "filas por página" estándar del portal — 10 como default
+ * cubre bien tanto un dataset chico (ej. Beneficios) como uno con volumen
+ * real (ej. 30+ cuotas en Billing), sin sentirse vacío ni insuficiente; 25
+ * y 50 escalan ~2.5x cada paso, evitando un salto brusco donde la opción
+ * del medio no aporta nada. Cualquier consumidor puede pisar este default
+ * con su propio `pageSizeOptions` si su caso lo justifica — pasar `[]`
+ * explícitamente desactiva el selector aunque `pageSize` esté activo. */
+declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+/** Densidad de fila: `comfortable` (default, el padding actual) o
+ * `compact` (menos padding vertical, para tablas con muchas filas donde
+ * priorizar cantidad visible sobre aire entre filas). */
+type DataTableDensity = 'comfortable' | 'compact';
+/** `key:direction` — mismo formato que `sort` de `kf-quote-picker`, para
+ * que un consumidor que ya conoce ese patrón no aprenda uno nuevo acá. */
+type DataTableSort = `${string}:${'asc' | 'desc'}`;
 /**
  * Tabla estandarizada con soporte opcional de toggle tabla/cards.
  *
@@ -533,10 +904,7 @@ type DataTableView = 'table' | 'cards';
  * pie separado por una línea para las acciones. Sin `cardRole`, todas las
  * columnas caen en el cuerpo, igual que antes.
  *
- * El modo `cards` no depende de un componente ViewToggle separado: expone
- * un control de segmentos mínimo inline (mismo patrón visual que
- * kf-segmented) para no acoplarse a un componente que otro agente puede
- * estar construyendo en paralelo — ver nota en el resumen de la tarea.
+ * El toggle tabla/cards es `kf-view-toggle`, componente standalone propio.
  *
  *   <kf-data-table [columns]="columns" [rows]="rows" (rowClick)="onRowClick($event)">
  *     <kf-empty-state empty>No hay resultados para mostrar.</kf-empty-state>
@@ -544,6 +912,18 @@ type DataTableView = 'table' | 'cards';
  *
  *   <kf-data-table [columns]="columns" [rows]="rows" [cardable]="true" defaultView="cards" />
  *
+ * Loading nativo: con `loading` en `true`, la tabla se reemplaza por un
+ * placeholder (`kf-skeleton` por celda/card) — mismo número de filas que
+ * `pageSize`, o 5 si no hay paginación activa. Ignora `rows()`/el slot
+ * `[empty]` mientras dura (no sabemos aún si el resultado real estará
+ * vacío), y respeta la vista activa (tabla o cards) para no cambiar el
+ * layout de golpe cuando los datos reales lleguen. El toggle tabla/cards y
+ * el header de columnas siguen visibles — solo el cuerpo se reemplaza:
+ *
+ *   <kf-data-table [columns]="columns" [rows]="rows()" [loading]="isLoading()">
+ *     <kf-empty-state empty>No hay resultados para mostrar.</kf-empty-state>
+ *   </kf-data-table>
+ *
  * El slot `[footer]` (página 15: "slot de pie para paginación") va siempre
  * al final, en ambas vistas, separado por una línea — pensado para proyectar
  * `<kf-pagination>`, que sigue siendo un componente independiente.
@@ -551,10 +931,52 @@ type DataTableView = 'table' | 'cards';
  *   <kf-data-table [columns]="columns" [rows]="rows">
  *     <kf-pagination footer [page]="page()" [total]="total()" (pageChange)="page.set($event)" />
  *   </kf-data-table>
+ *
+ * Paginación interna opcional: con `pageSize`, la tabla pagina sola y
+ * agrega su propio `kf-pagination` en el footer nativo (el slot
+ * `[footer]` proyectado sigue disponible en paralelo). El selector de "N
+ * por página" viene activo por defecto con `DEFAULT_PAGE_SIZE_OPTIONS`
+ * ([10, 25, 50], estándar del portal) — pasar `pageSizeOptions` propio lo
+ * pisa, y pasar `[]` lo desactiva (paginación sin selector). `itemLabel`
+ * completa el texto informativo ("1–10 de 42 beneficios").
+ *
+ *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" itemLabel="beneficios" />
+ *   <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" [pageSizeOptions]="[]" />
+ *
+ * Ordenamiento por columna: cada `DataTableColumn` con `sortable: true`
+ * vuelve su header clickeable, con el mismo formato `key:direction` que
+ * usa `sort` de `kf-quote-picker` (two-way manual, no `model()` — el
+ * consumidor decide si persiste el valor o lo descarta al desmontar):
+ *
+ *   <kf-data-table [columns]="columns" [rows]="rows" [sort]="sort()" (sortChange)="sort.set($event)" />
+ *
+ * Columnas fijas: `sticky: 'left' | 'right'` en la columna ancla esa
+ * columna a un borde del scroll horizontal — típicamente el identificador
+ * (izquierda) y/o las acciones (derecha) en una tabla con muchas columnas.
+ *
+ * Densidad: `density="compact"` reduce el padding vertical de cada fila,
+ * para priorizar cantidad de filas visibles sobre aire entre ellas.
  */
 declare class DataTable<T = unknown> {
     readonly columns: _angular_core.InputSignal<DataTableColumn[]>;
     readonly rows: _angular_core.InputSignal<T[]>;
+    /** Placeholder nativo (`kf-skeleton`) mientras los datos reales cargan —
+     * ver el doc-comment de la clase para el detalle. */
+    readonly loading: _angular_core.InputSignal<boolean>;
+    private readonly scrollEl;
+    private readonly destroyRef;
+    /**
+     * `.kf-data-table__scroll` tiene `overflow-x: auto` sin ningún indicador
+     * visual — con varias columnas y poco ancho disponible, la tabla se corta
+     * en el borde y nada le avisa al usuario que hay más contenido
+     * scrolleando. `canScrollLeft`/`canScrollRight` alimentan un fade en cada
+     * borde — visible solo cuando de verdad hay algo que revelar de ese lado,
+     * así una tabla que entra completa no muestra fades falsos.
+     */
+    protected readonly canScrollLeft: _angular_core.WritableSignal<boolean>;
+    protected readonly canScrollRight: _angular_core.WritableSignal<boolean>;
+    constructor();
+    private updateScrollState;
     /** Default: índice de la fila dentro de `rows`. */
     readonly rowKey: _angular_core.InputSignal<((row: T, index: number) => string | number) | undefined>;
     /** Sin borde/sombra de card — para tablas anidadas dentro de otra card. */
@@ -572,10 +994,76 @@ declare class DataTable<T = unknown> {
         $implicit: T;
         index: number;
     }>> | undefined>;
+    /** Densidad de fila — ver `DataTableDensity`. */
+    readonly density: _angular_core.InputSignal<DataTableDensity>;
+    /** Fuerza si la fila entera dispara `rowClick` en la vista de tabla —
+     * ver `rowInteractive` para el cálculo automático cuando no se define. */
+    readonly rowClickable: _angular_core.InputSignal<boolean | null>;
     readonly rowClick: _angular_core.OutputEmitterRef<{
         row: T;
         index: number;
     }>;
+    /**
+     * Paginación interna opcional — sin `pageSize`, cero cambio de
+     * comportamiento (el consumidor sigue paginando afuera si quiere, vía el
+     * slot `[footer]` con su propio `kf-pagination`, como ya hace Billing).
+     * Con `pageSize`, la tabla pagina `rows()` sola y agrega su propio
+     * `kf-pagination` en el footer nativo — el slot `[footer]` proyectado
+     * sigue disponible para cualquier otra cosa que el consumidor quiera
+     * agregar ahí (no son mutuamente excluyentes).
+     */
+    readonly pageSize: _angular_core.InputSignal<number | null>;
+    /** Default `DEFAULT_PAGE_SIZE_OPTIONS` ([10, 25, 50], estándar del
+     * portal) — pasar `[]` explícitamente desactiva el selector de tamaño
+     * aunque `pageSize` esté activo (paginación sin selector). */
+    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    /** Nombre de la entidad listada (ej. "beneficios", "facturas"), en
+     * plural — se agrega al final del texto informativo de la paginación
+     * interna ("1–5 de 7 beneficios"). Sin esto, el texto queda solo con
+     * números ("1–5 de 7"): la librería no impone un idioma ni un nombre
+     * fijo, cada consumidor decide el suyo. */
+    readonly itemLabel: _angular_core.InputSignal<string>;
+    protected readonly page: _angular_core.WritableSignal<number>;
+    private readonly internalPageSize;
+    /** Tamaño de página efectivo: el que el usuario elija en el selector
+     * (si `pageSizeOptions` está activo), o el `pageSize` del consumidor. */
+    protected readonly effectivePageSize: _angular_core.Signal<number | null>;
+    /** Cantidad de filas/cards placeholder mientras `loading` es true — el
+     * `pageSize` efectivo si hay paginación activa (así el placeholder ya
+     * "adivina" cuántas filas reales van a aparecer, sin salto de layout),
+     * o 5 si no hay paginación. */
+    protected readonly skeletonRowIndexes: _angular_core.Signal<number[]>;
+    protected readonly totalPages: _angular_core.Signal<number>;
+    /** Texto informativo del footer de paginación interna ("1–5 de 7
+     * beneficios") — se recalcula con cada cambio de página/tamaño/dataset,
+     * nunca queda desactualizado tras filtrar o pasar de página. */
+    protected readonly paginationSummary: _angular_core.Signal<string>;
+    /**
+     * Ordenamiento por columna — mismo formato `key:direction` que `sort` de
+     * `kf-quote-picker`, para que un consumidor que ya conoce ese patrón no
+     * aprenda uno nuevo. Un click en un header `sortable` avanza el ciclo
+     * asc → desc → sin orden; clickear otra columna reinicia el ciclo en esa
+     * columna nueva.
+     */
+    readonly sort: _angular_core.InputSignal<`${string}:desc` | `${string}:asc` | null>;
+    readonly sortChange: _angular_core.OutputEmitterRef<`${string}:desc` | `${string}:asc` | null>;
+    protected readonly sortedRows: _angular_core.Signal<T[]>;
+    /** Filas realmente renderizadas: ordenadas y, si `pageSize` está activo,
+     * recortadas a la página actual. */
+    protected readonly displayedRows: _angular_core.Signal<T[]>;
+    protected sortDirectionFor(column: DataTableColumn): 'asc' | 'desc' | null;
+    /** Ciclo asc → desc → sin orden, disparado al clickear un header `sortable`. */
+    protected toggleSort(column: DataTableColumn): void;
+    protected goToPage(target: number): void;
+    protected setPageSize(size: number | null): void;
+    /** Columnas fijas del lado izquierdo/derecho, con el offset acumulado
+     * (medido en runtime, ver `measureStickyOffsets`) para `position: sticky`. */
+    protected readonly stickyLeftColumns: _angular_core.Signal<DataTableColumn[]>;
+    protected readonly stickyRightColumns: _angular_core.Signal<DataTableColumn[]>;
+    protected readonly stickyOffsets: _angular_core.WritableSignal<Map<string, number>>;
+    protected stickyStyle(column: DataTableColumn): Record<string, string> | null;
     private readonly internalView;
     /** Vista activa: la elegida por el usuario, o `defaultView` si no tocó el toggle. */
     readonly view: _angular_core.Signal<DataTableView>;
@@ -591,14 +1079,45 @@ declare class DataTable<T = unknown> {
      * Con columnas `action`, la interacción la manejan esos botones.
      */
     readonly cardInteractive: _angular_core.Signal<boolean>;
+    /**
+     * Mismo criterio que `cardInteractive`, para la vista de tabla: la fila
+     * entera dispara `rowClick` solo si no hay una columna `action` que ya
+     * resuelva la interacción con su propio botón — sin esto, un click en
+     * "Ver detalle" dispararía TAMBIÉN el click de la fila por burbujeo.
+     * `rowClickable` fuerza el comportamiento en cualquier sentido si el
+     * consumidor lo necesita.
+     */
+    readonly rowInteractive: _angular_core.Signal<boolean>;
     setView(next: DataTableView): void;
     trackRow(row: T, index: number): string | number;
     cellValue(row: T, column: DataTableColumn): string;
     onRowClick(row: T, index: number): void;
+    /**
+     * Ancho real de cada columna `sticky` — se mide después de cada render
+     * porque el ancho de una columna depende de su contenido, no hay forma
+     * de conocerlo de antemano. Cada columna fija toma como offset la suma
+     * de anchos de las columnas fijas del MISMO lado que ya quedaron antes
+     * que ella (así "left" apila de izquierda a derecha, "right" de derecha
+     * a izquierda).
+     */
+    protected measureStickyOffsets(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "kf-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; }, never, ["[empty]", "[footer]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "kf-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; }, never, ["[empty]", "[footer]"], true, never>;
 }
 
+/**
+ * Signal con la vista de `kf-data-table` ('table' | 'cards') derivada de un
+ * breakpoint — mismo criterio que cualquier tabla con muchas columnas: bajo
+ * el ancho dado, la vista de tabla no entra sin scroll horizontal, así que
+ * se fuerza `cards`. Centraliza el patrón `matchMediaSignal` +
+ * `computed<DataTableView>` que cada tabla del portal repetía igual.
+ *
+ *   protected readonly tableView = dataTableViewSignal();
+ *   // con un breakpoint distinto al default de 900px:
+ *   protected readonly tableView = dataTableViewSignal('(max-width: 768px)');
+ */
+declare function dataTableViewSignal(query?: string): Signal<DataTableView>;
+
 type DividerOrientation = 'horizontal' | 'vertical';
 /**
  * Separador visual simple entre bloques de contenido. `orientation`
@@ -621,84 +1140,191 @@ declare class Divider {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Divider, "kf-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-type DropdownItemTone = 'neutral' | 'error';
+/** Color del chip de ícono. Identifica la CLASE de documento de un vistazo
+ * en una lista de nombres de archivo parecidos entre sí. */
+type DocumentRowTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
 /**
- * Ítem de acción dentro de un `kf-dropdown-panel`. Es un `<button>` nativo
- * por dentro (no un `<a>`): las acciones de un menú de este tipo disparan
- * comportamiento en la pantalla actual (cerrar sesión, ejecutar un
- * comando), no navegan a otra URL.
+ * Fila de un documento descargable: chip de ícono coloreado por tipo,
+ * título, metadata y la acción de descarga al final. Sin `href` rinde
+ * `pendingLabel` en vez de un link roto. El contenido proyectado cae entre
+ * la metadata y la acción, como slot para un `kf-badge` de estado.
+ */
+declare class DocumentRow {
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly tone: _angular_core.InputSignal<DocumentRowTone>;
+    /** Qué documento es. El nombre humano del tipo, no el del archivo. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Línea secundaria — archivo, fecha, tamaño. El consumidor la arma ya
+     * formateada: la librería no decide en qué unidad se lee un tamaño ni en
+     * qué formato una fecha. */
+    readonly meta: _angular_core.InputSignal<string | undefined>;
+    /** Ausente rinde `pendingLabel` en vez del link de descarga. */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    readonly downloadLabel: _angular_core.InputSignal<string>;
+    /** Qué se dice cuando no hay `href`. */
+    readonly pendingLabel: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DocumentRow, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DocumentRow, "kf-document-row", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "downloadLabel": { "alias": "downloadLabel"; "required": false; "isSignal": true; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type DrawerSide = 'left' | 'right';
+/**
+ * Panel lateral genérico, agnóstico de contenido — no sabe qué es navegación
+ * ni qué es sesión, solo da tres lugares para proyectar contenido
+ * (`[kf-drawer-header]`, default, `[kf-drawer-footer]`) y resuelve lo que
+ * cualquier drawer necesita resolver igual sin importar qué haya adentro:
+ * overlay con blur que cierra al click, `Escape`, atrapado de foco real y
+ * devolución de foco al cerrar.
+ *
+ * `open` es two-way, mismo patrón que `Dropdown`/`Modal`: el consumidor
+ * decide qué dispara la apertura (un botón de hamburguesa, por ejemplo) y
+ * qué hace con el cierre.
+ *
+ * Foco: al abrir, se crea un `FocusTrap` del CDK sobre el panel (la misma
+ * pieza que usa Angular Material para `mat-sidenav`/`mat-dialog`) — Tab y
+ * Shift+Tab ciclan solo entre los elementos focuseables del drawer, sin
+ * escapar al contenido de fondo. Al cerrar, el foco vuelve al elemento que
+ * tenía el foco antes de abrir (guardado en `document.activeElement`), no
+ * se pierde en el `<body>`.
+ *
+ * `[kf-drawer-header]` tiene fondo oscuro propio (`--kf-color-tertiary-deep`),
+ * distinto del body (`--kf-color-white`) — pensado para contener
+ * `kf-drawer-session`, que asume ese fondo y no lo trae él mismo (ver
+ * `DrawerSession.ts`). Si el slot queda vacío, el contenedor colapsa
+ * (`display: none`) y no deja una franja oscura sin contenido.
+ *
+ *   <kf-drawer [(open)]="menuOpen" ariaLabel="Menú de navegación">
+ *     <div kf-drawer-header>
+ *       <kf-drawer-session name="Tomás Soto" email="tomas@kaufmann.com" (logoutClick)="onLogout()" />
+ *     </div>
+ *     <a href="/">Home</a>
+ *     <a href="/vehiculos">Vehículos</a>
+ *   </kf-drawer>
+ */
+declare class Drawer {
+    /** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Borde de anclaje del panel. `left` (default) es la convención dominante
+     * (Material/iOS/Android): el botón que abre el drawer y el propio panel
+     * quedan del mismo lado. */
+    readonly side: _angular_core.InputSignal<DrawerSide>;
+    /** `aria-label` del `<nav>` interno — describe el propósito del panel para
+     * lectores de pantalla (ej. "Menú de navegación"). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private readonly panelRef;
+    private readonly focusTrapFactory;
+    private readonly document;
+    private focusTrap;
+    private lastFocusedElement;
+    constructor();
+    /** Cierra el drawer con Escape — mismo patrón que `Dropdown`/`Modal`. */
+    protected onEscape(): void;
+    private getOrCreateFocusTrap;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Drawer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Drawer, "kf-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[kf-drawer-header]", "*", "[kf-drawer-footer]"], true, never>;
+}
+
+/**
+ * Botón de cerrar sesión, pensado para proyectarse dentro de
+ * `[kf-drawer-footer]` de `kf-drawer`, o junto a `kf-drawer-session` dentro
+ * de `[kf-sidebar-footer]` de `kf-sidebar-shell` — separado de
+ * `kf-drawer-session` (que solo muestra identidad: brand, avatar, nombre,
+ * email), no anidado dentro de ella.
+ *
+ * Ícono `log-out` + label, color `--kf-color-error` con hover en
+ * `--kf-color-error-soft` y foco visible con `--kf-shadow-focus`. Separado
+ * de `kf-drawer-session` (solo identidad) por responsabilidad única.
  *
- *   <kf-dropdown-item (click)="onLogout()" tone="error">Cerrar sesión</kf-dropdown-item>
+ * No sabe nada de autenticación real — solo emite `logoutClick` cuando el
+ * consumidor debe cerrar la sesión real.
+ *
+ * `collapsed` oculta el label y centra el ícono, exponiéndolo vía `title`
+ * — mismo criterio que `SidebarNavItem.collapsed` y
+ * `DrawerSession.collapsed`, para cuando este botón vive dentro de un
+ * `kf-sidebar-shell` colapsado.
+ *
+ *   <kf-drawer-logout kf-portal-header-footer (logoutClick)="onLogout()" />
  */
-declare class DropdownItem {
-    readonly tone: _angular_core.InputSignal<DropdownItemTone>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItem, "kf-dropdown-item", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+declare class DrawerLogout {
+    /** Label del botón, en español neutro por defecto. Input opcional por si
+     * algún consumidor futuro necesita otro texto. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Oculta el label y centra el ícono — ver comentario de la clase. */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly logoutClick: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerLogout, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerLogout, "kf-drawer-logout", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "logoutClick": "logoutClick"; }, never, never, true, never>;
 }
+
 /**
- * Contenido del panel flotante de un `kf-dropdown`. Es solo una plantilla
- * (`<ng-template>` por dentro, capturada vía `TemplateRef`) — `Dropdown` la
- * conecta al overlay real cuando `open` pasa a `true`, no la renderiza en su
- * propio lugar del DOM. Esto es lo que permite que el panel aparezca pegado
- * al host de `Dropdown` sin importar dónde esté ese host en la página.
+ * Bloque de identidad para `[kf-drawer-header]` de `kf-drawer` o
+ * `[kf-sidebar-footer]` de `kf-sidebar-shell`: avatar + nombre + email,
+ * brand opcional arriba. Solo identidad — el logout vive aparte, en
+ * `kf-drawer-logout`.
+ *
+ * `collapsed` oculta brand/nombre/email y deja solo el avatar (para un
+ * `kf-sidebar-shell` colapsado). `interactive` convierte la tarjeta en un
+ * botón real que emite `cardClick`, para cuando la identidad es el
+ * disparador de un menú de acciones (ej. envuelta en `kf-dropdown`).
  *
  *   <kf-dropdown [(open)]="menuOpen">
- *     <kf-dropdown-panel>
- *       <kf-dropdown-item (click)="onLogout()">Cerrar sesión</kf-dropdown-item>
+ *     <kf-drawer-session interactive name="Juan Pérez" email="juan@empresa.com" (cardClick)="menuOpen.set(!menuOpen())" />
+ *     <kf-dropdown-panel variant="dark">
+ *       <kf-dropdown-item icon="log-out" tone="error" (click)="onLogout()">Cerrar sesión</kf-dropdown-item>
  *     </kf-dropdown-panel>
  *   </kf-dropdown>
  */
-declare class DropdownPanel {
-    readonly templateRef: _angular_core.Signal<TemplateRef<any>>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownPanel, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownPanel, "kf-dropdown-panel", never, {}, {}, never, ["*"], true, never>;
+declare class DrawerSession {
+    readonly name: _angular_core.InputSignal<string>;
+    readonly email: _angular_core.InputSignal<string>;
+    /**
+     * Etiqueta de rol o función del usuario dentro de la sesión (ej.
+     * "Coordinador", "Supervisor"). Se muestra como badge dentro de la
+     * identidad, debajo del email — distinto de `brand`, que es la marca o
+     * cliente mostrada como encabezado de todo el bloque, no un atributo de
+     * la persona.
+     */
+    readonly role: _angular_core.InputSignal<string>;
+    readonly initials: _angular_core.InputSignal<string>;
+    readonly avatarUrl: _angular_core.InputSignal<string>;
+    /** Label superior opcional, ej. "Portal Kaufmann LATAM". */
+    readonly brand: _angular_core.InputSignal<string>;
+    /** Oculta brand/nombre/email y centra el avatar — ver comentario de la clase. */
+    readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Convierte la tarjeta en un botón real con ícono de kebab — ver comentario de la clase. */
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Se emite al clickear la tarjeta, solo cuando `interactive` es `true`. */
+    readonly cardClick: _angular_core.OutputEmitterRef<void>;
+    /** Si no se pasa `initials`, se derivan de `name`: primera letra de cada
+     * una de las primeras 2 palabras, en mayúscula. */
+    protected readonly displayInitials: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerSession, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerSession, "kf-drawer-session", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
 }
+
 /**
  * Menú de acciones flotante, conectado a un elemento disparador vía
  * `@angular/cdk/overlay` — la misma pieza que usa Angular Material para
- * `mat-menu`/`mat-select`. Resuelve el patrón que antes se reimplementaba a
- * mano en cada consumidor (ver el session-menu de `web-portal-latam-frontend`,
- * ~80 líneas de HTML/TS/SCSS para toggle + click-afuera + Escape + animación
- * de entrada, acopladas a una clase interna no pública de `PortalHeader`).
- *
- * Se apoya en el CDK en vez de un `position: absolute` casero (como sí hace
- * `SelectMenu`, que puede permitírselo porque su trigger vive siempre dentro
- * del propio componente) porque acá el disparador real puede vivir en OTRO
- * componente por completo — ej. el avatar dentro de `kf-portal-header` — y
- * el panel tiene que aparecer pegado a ESE elemento sin importar dónde el
- * consumidor ubique al `Dropdown` en su HTML. El Overlay CDK calcula esa
- * posición (con fallback si no entra en pantalla) en vez de que cada
- * consumidor lo recalcule a mano.
- *
- * `open` es two-way, igual que `Alert`/`Modal`: el consumidor decide qué
- * dispara la apertura (puede ser un `(click)` en un botón propio, o un
- * evento de otro componente como `PortalHeader.sessionClick`) — `Dropdown`
- * en sí no renderiza ningún trigger, su propio host es el punto de anclaje
- * visual del panel.
+ * `mat-menu`/`mat-select`. El disparador real puede vivir en OTRO
+ * componente por completo (ej. el avatar dentro de `kf-portal-header`), y
+ * el panel aparece pegado a ESE elemento sin importar dónde el consumidor
+ * ubique al `Dropdown` en su HTML.
  *
- *   <kf-dropdown [(open)]="menuOpen">
- *     <kf-dropdown-panel>
- *       <div class="mi-header">Sesión iniciada como {{ email() }}</div>
- *       <kf-dropdown-item (click)="onLogout()" tone="error">Cerrar sesión</kf-dropdown-item>
- *     </kf-dropdown-panel>
- *   </kf-dropdown>
+ * `open` es two-way: el consumidor decide qué dispara la apertura —
+ * `Dropdown` en sí no renderiza ningún trigger, su propio host es el punto
+ * de anclaje visual del panel.
+ *
+ *   <kf-dropdown [(open)]="menuOpen"><kf-dropdown-panel>...</kf-dropdown-panel></kf-dropdown>
  */
 declare class Dropdown {
     /** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
     readonly open: _angular_core.ModelSignal<boolean>;
     /**
      * Elemento al que se conecta el overlay, si es distinto del propio host
-     * de `Dropdown`. Sin esto, `Dropdown` asume que ÉL MISMO es visualmente
-     * el disparador (caso normal: el consumidor arma su propio botón como
-     * contenido, y `Dropdown` envuelve ese contenido). Cuando el disparador
-     * real vive dentro de OTRO componente que no se puede envolver sin
-     * ensanchar el área de click a algo más grande que el botón (ej. el
-     * avatar de sesión dentro de `PortalHeader`, que convive con logo y
-     * navegación en el mismo host), `anchor` permite apuntar el overlay a la
-     * referencia real de ese componente en vez de al host vacío de
-     * `Dropdown`.
-     *
-     *   <kf-dropdown [(open)]="menuOpen" [anchor]="headerRef()">
+     * de `Dropdown`. Sin esto, `Dropdown` asume que ÉL MISMO es el
+     * disparador. Útil cuando el disparador real vive dentro de OTRO
+     * componente que no se puede envolver sin ensanchar el área de click
+     * (ej. el avatar de sesión dentro de `PortalHeader`).
      */
     readonly anchor: _angular_core.InputSignal<ElementRef<HTMLElement> | undefined>;
     private readonly panel;
@@ -707,24 +1333,81 @@ declare class Dropdown {
     private readonly viewContainerRef;
     private readonly destroyRef;
     private overlayRef;
+    /**
+     * Suscripciones a `outsidePointerEvents()`/`keydownEvents()` del overlay
+     * ACTUALMENTE adjunto. `getOrCreateOverlayRef()` reutiliza el mismo
+     * `overlayRef` entre aperturas (no lo recrea cada vez), así que se
+     * cancelan explícitamente en `detach()` antes de la siguiente `attach()`
+     * — de lo contrario se acumularían N suscripciones activas sobre el
+     * mismo overlay persistente.
+     */
+    private overlaySubscription;
     constructor();
     /**
      * Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo
-     * ve teclas presionadas con el foco DENTRO del pane del overlay. Si el
-     * usuario abre el menú y presiona Escape con el foco en otro lado de la
-     * página (caso común — el foco puede seguir en el botón disparador, que
-     * vive fuera del overlay), `keydownEvents()` nunca dispara. Este listener
-     * a nivel de documento cubre ese caso; el de `keydownEvents()` sigue
-     * activo para cuando el foco sí está dentro del panel.
+     * ve teclas con el foco DENTRO del panel. Si el foco queda en el botón
+     * disparador (caso común), `keydownEvents()` nunca dispara — este
+     * listener a nivel de documento cubre ese caso.
      */
     onDocumentEscape(): void;
     private attach;
+    /**
+     * El trigger real (el `anchor`, o el propio host si no se pasó ninguno —
+     * ver comentario de la clase) vive FUERA del overlay a propósito: el
+     * overlay recién se crea/adjunta cuando `open` pasa a `true`, así que el
+     * CDK no tiene forma de saber que ese elemento externo "es parte" de su
+     * disparador. Sin este filtro, el mismo `pointerdown` que abre el menú
+     * también llega a `outsidePointerEvents()`, cerrando el panel en el
+     * mismo gesto que lo abrió.
+     */
+    private isEventOnTrigger;
     private detach;
     private getOrCreateOverlayRef;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dropdown, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dropdown, "kf-dropdown", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["panel"], ["*"], true, never>;
 }
 
+type DropdownItemTone = 'neutral' | 'error';
+/**
+ * Ítem de acción dentro de un `kf-dropdown-panel`. Es un `<button>` nativo
+ * (no un `<a>`): dispara comportamiento en la pantalla actual, no navega.
+ *
+ * `icon` es opcional — sin él, el ítem es solo texto.
+ *
+ *   <kf-dropdown-item icon="log-out" (click)="onLogout()" tone="error">Cerrar sesión</kf-dropdown-item>
+ */
+declare class DropdownItem {
+    readonly tone: _angular_core.InputSignal<DropdownItemTone>;
+    /** Ícono opcional al inicio de la fila. */
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItem, "kf-dropdown-item", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type DropdownPanelVariant = 'solid' | 'dark';
+/**
+ * Contenido del panel flotante de un `kf-dropdown`. Es solo una plantilla
+ * (`<ng-template>`, capturada vía `TemplateRef`) — `Dropdown` la conecta al
+ * overlay real cuando `open` pasa a `true`, no la renderiza en su propio
+ * lugar del DOM. Esto permite que el panel aparezca pegado al host de
+ * `Dropdown` sin importar dónde esté ese host en la página.
+ *
+ * `variant`: `'solid'` (default, fondo blanco) o `'dark'` (fondo sólido
+ * oscuro, mismo tono que `[kf-drawer-header]`) para cuando el trigger vive
+ * sobre una superficie oscura de marca.
+ *
+ * `dark` es sólida a propósito, no semitransparente: el CDK Overlay
+ * reposiciona el panel según dónde entra en el viewport y puede terminar
+ * cayendo sobre fondo blanco en vez de sobre el rail oscuro — un color
+ * sólido se ve intencional sin importar dónde lo posicione el CDK.
+ */
+declare class DropdownPanel {
+    readonly variant: _angular_core.InputSignal<DropdownPanelVariant>;
+    readonly templateRef: _angular_core.Signal<TemplateRef<any>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownPanel, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownPanel, "kf-dropdown-panel", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 /**
  * Placeholder para una sección sin contenido. Dos tonos, con anatomía
  * distinta (páginas 27-28 del design system, que los trata como piezas
@@ -748,11 +1431,38 @@ declare class Dropdown {
 declare class EmptyState {
     readonly icon: _angular_core.InputSignal<IconName | undefined>;
     /** `neutral` (default): cero resultados. `error`: fallo real de carga. */
-    readonly tone: _angular_core.InputSignal<"error" | "neutral">;
+    readonly tone: _angular_core.InputSignal<"neutral" | "error">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyState, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyState, "kf-empty-state", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/** Color del marcador. Distingue la CLASE de evento de un vistazo en un log
+ * largo — no es un estado de progreso. */
+type EventTimelineTone = 'neutral' | 'primary' | 'ok' | 'warn' | 'error' | 'info';
+/** Un evento ya ocurrido. Los tres campos de texto son los tres niveles de
+ * lectura: qué pasó, por qué, y cuándo/quién. */
+interface EventTimelineItem {
+    /** Clave de `track`. */
+    readonly id: string;
+    readonly title: string;
+    readonly detail?: string | null;
+    /** Hora y autor, ya formateados por el consumidor. */
+    readonly meta?: string | null;
+    readonly icon?: IconName;
+    readonly tone?: EventTimelineTone;
+}
+/**
+ * Línea de tiempo de AUDITORÍA: eventos ya ocurridos, en orden, cada uno con
+ * marcador coloreado por CLASE y tres niveles de texto (titular, detalle,
+ * hora + autor). Distinto de `kf-journey-stepper` (de PROGRESO, con pasos
+ * futuros conocidos de antemano): acá todo ya pasó.
+ */
+declare class EventTimeline {
+    readonly items: _angular_core.InputSignal<readonly EventTimelineItem[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EventTimeline, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EventTimeline, "kf-event-timeline", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Bloque promocional sobre fondo oscuro de marca (página 37) — campañas,
  * accesos directos o el portal de autoatención. Usa `--kf-color-tertiary-deep`
@@ -838,6 +1548,159 @@ declare class FieldLabel {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+interface MultiSelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * Dropdown de selección múltiple con checkboxes internos. El panel flotante
+ * se conecta al trigger vía `@angular/cdk/overlay` — el mismo mecanismo que
+ * `Select` (ver `../select/Select.ts`) y `Dropdown` (`../dropdown/Dropdown.ts`).
+ *
+ * A diferencia de `Select`, el disparador no muestra un único valor sino los
+ * nombres seleccionados junto a un badge circular con el conteo, y cada
+ * opción del panel se marca/desmarca con un checkbox sin cerrar el panel.
+ * Incluye una opción "Todas" al inicio de la lista, con estado
+ * `indeterminate` cuando hay selección parcial — el mismo patrón de
+ * "seleccionar todos" de `Checkbox`. "Todas" nunca se filtra por el buscador:
+ * queda siempre visible y sigue actuando sobre el universo COMPLETO de
+ * `options()`, no sobre el subconjunto filtrado (ver JSDoc de `toggleAll()`).
+ *
+ *   <kf-multi-select
+ *     label="Sucursales"
+ *     [options]="branches"
+ *     [values]="selectedBranches()"
+ *     (valuesChange)="selectedBranches.set($event)"
+ *   />
+ *
+ * `width="full"` ocupa el 100% del contenedor — para multi-selects dentro
+ * de layouts flex/grid donde el ancho fijo de `md` no encaja.
+ *
+ *   <kf-multi-select width="full" [options]="branches" [values]="selectedBranches()" (valuesChange)="..." />
+ */
+declare class MultiSelect {
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly options: _angular_core.InputSignal<MultiSelectOption[]>;
+    readonly values: _angular_core.InputSignal<string[]>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Ancho del control. 'md' (240px) es el default histórico y preserva el
+     * comportamiento actual sin cambios para consumidores existentes.
+     * 'full' ocupa el 100% del contenedor — para multi-selects dentro de
+     * layouts flex/grid donde el ancho fijo no encaja (ej. un footer de
+     * sidebar).
+     */
+    readonly width: _angular_core.InputSignal<"sm" | "md" | "lg" | "full">;
+    /**
+     * Tri-state: si el consumidor no lo especifica (`undefined`), el buscador
+     * se activa solo cuando `options().length` supera `searchThreshold()`. Si
+     * el consumidor define `true`/`false` explícitamente, ese valor manda por
+     * sobre el umbral automático. Mismo criterio que `Select`.
+     */
+    readonly searchable: _angular_core.InputSignal<boolean | undefined>;
+    readonly searchThreshold: _angular_core.InputSignal<number>;
+    readonly valuesChange: _angular_core.OutputEmitterRef<string[]>;
+    private readonly instanceId;
+    readonly triggerId: string;
+    readonly listboxId: string;
+    readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly searchQuery: _angular_core.WritableSignal<string>;
+    readonly activeIndex: _angular_core.WritableSignal<number>;
+    readonly selectedCount: _angular_core.Signal<number>;
+    readonly allSelected: _angular_core.Signal<boolean>;
+    readonly isPartiallySelected: _angular_core.Signal<boolean>;
+    readonly showSearch: _angular_core.Signal<boolean>;
+    /** Opciones visibles tras aplicar el filtro de búsqueda ("Todas" nunca se filtra). */
+    readonly filteredOptions: _angular_core.Signal<MultiSelectOption[]>;
+    /**
+     * Texto del disparador: placeholder si no hay selección, o los nombres
+     * seleccionados unidos por coma (el conteo va aparte, en el badge). Con
+     * muchas opciones el `text-overflow: ellipsis` del `.kf-multi-select__value`
+     * corta el texto — el badge de conteo siempre queda visible al lado.
+     */
+    readonly summaryText: _angular_core.Signal<string>;
+    private readonly triggerRef;
+    private readonly panelTemplate;
+    private readonly searchInputRef;
+    private readonly overlay;
+    constructor();
+    isSelected(value: string): boolean;
+    toggle(): void;
+    toggleOption(value: string): void;
+    /**
+     * Alterna entre "todas seleccionadas" y "ninguna seleccionada". Actúa
+     * siempre sobre el universo COMPLETO de `options()`, no sobre
+     * `filteredOptions()` — con un buscador activo, "Todas" no se filtra ni
+     * cambia de significado: seguir marcando/desmarcando únicamente lo visible
+     * sería sorprendente para quien ya tenía otras opciones (no visibles en el
+     * filtro actual) seleccionadas de antes.
+     */
+    toggleAll(): void;
+    onSearchInput(event: Event): void;
+    /** Mueve `activeIndex` sobre las opciones YA FILTRADAS visibles. Clamp simple, sin wraparound. */
+    moveActive(delta: number): void;
+    toggleActive(): void;
+    onEscape(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelect, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelect, "kf-multi-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
+}
+
+type FilterFieldType = 'select' | 'multi-select' | 'search';
+interface FilterFieldConfig {
+    key: string;
+    type: FilterFieldType;
+    label?: string;
+    placeholder?: string;
+    width?: string;
+    icon?: IconName;
+    showDivider?: boolean;
+}
+type FilterValue = string | string[];
+interface FilterFieldChange {
+    key: string;
+    value: FilterValue;
+}
+/**
+ * Fila de filtros config-driven (select / multi-select / búsqueda) para el
+ * header de una tabla, compuesta con piezas YA existentes de la librería
+ * (`kf-select`, `kf-multi-select`, `kf-input`, `kf-divider`, `kf-collapsible`).
+ *
+ * No tiene lógica de filtrado propia: solo renderiza los controles descritos
+ * por `fields()` y emite `fieldChange` cuando alguno cambia — filtrar filas
+ * sigue siendo responsabilidad de quien lo consume.
+ *
+ * En escritorio los campos se muestran en una fila; en mobile/tablet
+ * (≤768px, mismo breakpoint que `kf-portal-header`) se colapsan dentro de un
+ * `kf-collapsible`.
+ *
+ *   <kf-filter
+ *     [fields]="[
+ *       { key: 'model', type: 'multi-select', label: 'Modelo', placeholder: 'Todos los modelos', showDivider: true },
+ *       { key: 'search', type: 'search', label: 'Buscar vehículo', placeholder: 'Ingresa N° de orden o placa', width: '280px' },
+ *     ]"
+ *     [values]="{ model: selectedModels(), search: searchTerm() }"
+ *     [options]="{ model: modelOptions() }"
+ *     (fieldChange)="onFieldChange($event)"
+ *   />
+ */
+declare class Filter {
+    readonly fields: _angular_core.InputSignal<FilterFieldConfig[]>;
+    readonly values: _angular_core.InputSignal<Record<string, FilterValue>>;
+    readonly options: _angular_core.InputSignal<Record<string, string[]>>;
+    readonly mobileTitle: _angular_core.InputSignal<string>;
+    readonly fieldChange: _angular_core.OutputEmitterRef<FilterFieldChange>;
+    protected readonly multiOptionsByKey: _angular_core.Signal<Record<string, MultiSelectOption[]>>;
+    protected singleValueFor(key: string): string;
+    protected multiValueFor(key: string): string[];
+    protected fieldWidth(field: FilterFieldConfig): string;
+    protected optionsFor(key: string): string[];
+    protected multiOptionsFor(key: string): MultiSelectOption[];
+    protected onFieldChange(key: string, value: FilterValue): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Filter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Filter, "kf-filter", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "mobileTitle": { "alias": "mobileTitle"; "required": false; "isSignal": true; }; }, { "fieldChange": "fieldChange"; }, never, never, true, never>;
+}
+
 /** Forma normalizada interna de cada opción, ya resuelta a value/label. */
 interface FilterChipOption {
     value: string;
@@ -850,9 +1713,10 @@ interface FilterChipOption {
  * a la vez) o como objeto { value, label } cuando el texto mostrado difiere
  * del valor interno.
  *
- * El chip activo se resalta con el color "ink" oscuro (--kf-color-ink), no
- * con el color primario de marca: así lo define el sistema de diseño de
- * referencia para este componente en particular.
+ * El chip activo se resalta con `--kf-color-primary` — mismo color de marca
+ * que `kf-tabs`/`kf-select` para su propio estado activo, así el filtro
+ * seleccionado se lee con el color del tema activo, no un negro fijo que
+ * no cambia entre marcas.
  *
  *   <kf-filter-chips [options]="['Todos', 'Activos', 'Archivados']"
  *                     [value]="filtro"
@@ -876,92 +1740,132 @@ declare class FilterChips {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterChips, "kf-filter-chips", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
-interface FolderTabOption {
-    value: string;
+/** Un link del pie — legales, contacto, soporte. */
+interface FooterLink {
     label: string;
-    icon?: IconName;
+    href?: string;
 }
 /**
- * Marca el contenido que `kf-folder-tabs` debe proyectar dentro de su
- * panel. Sin lógica propia — existe solo como token de tipo para que
- * `contentChild(FolderTabsPanel)` pueda detectar si el consumidor proyectó
- * algo (mismo mecanismo que `kf-dropdown` usa con `contentChild(DropdownPanel)`;
- * acá no hace falta un componente completo, alcanza con una directiva de
- * atributo porque el panel no necesita comportamiento propio, solo marcar
- * su presencia).
- *
- *   <div kf-folder-tabs-panel>...</div>
+ * Pie de página general del portal (página 38): logo + copyright a la
+ * izquierda, links legales/soporte empujados a la derecha. Logo y copyright
+ * son inputs (cada portal del ecosistema — LATAM, OTD, Star — trae su
+ * propia marca y texto legal); `links` es la lista de accesos, típicamente
+ * placeholders hasta que existan destinos reales.
+ *
+ *   <kf-footer
+ *     logoSrc="images/logo-kaufmann-dark.png"
+ *     logoAlt="Grupo Kaufmann"
+ *     copyright="© 2026 Kaufmann LATAM · Todos los derechos reservados"
+ *     [links]="[
+ *       { label: 'Políticas de privacidad' },
+ *       { label: 'Contacto' },
+ *       { label: 'Sugerencias y reclamos' },
+ *     ]"
+ *   />
  */
-declare class FolderTabsPanel {
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabsPanel, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FolderTabsPanel, "[kf-folder-tabs-panel]", never, {}, {}, never, never, true, never>;
-}
-/**
- * Tabs con forma de "carpeta": el borde superior queda redondeado y el borde
- * inferior de la pestaña activa se funde visualmente con el panel de
- * contenido que va debajo (misma superficie, sin línea divisoria).
- *
- * Al cambiar de pestaña, la que se activa se "abre": gira sobre su borde
- * inferior (hinge 3D) y sube con un pequeño rebote. Es CSS solo: la clase
- * `--active` se mueve de un botón a otro, y eso vuelve a disparar el keyframe
- * sin tocar JS.
- *
- * El panel de contenido es un `<ng-content>` OPCIONAL — si el consumidor no
- * proyecta nada, `kf-folder-tabs` renderiza solo la fila de pestañas (mismo
- * comportamiento que antes de que existiera este slot, detectado con
- * `contentChild()` sin `.required`, igual patrón que usa `kf-dropdown` para
- * saber si hay un `kf-dropdown-panel` proyectado). Si SÍ proyecta contenido,
- * se envuelve en un panel con la esquina superior-izquierda recta (nace ahí
- * la primera pestaña, siempre pegada al borde izquierdo de la fila — un
- * radio ahí competiría visualmente con el propio borde redondeado de esa
- * pestaña) y las otras tres redondeadas. El `border-bottom` de 2px de la
- * pestaña activa (ver `.kf-folder-tabs__tab--active` más abajo) es la señal
- * visual de conexión con el panel para CUALQUIER pestaña activa, sin
- * necesitar mover ni medir nada.
- *
- * El borde izquierdo de toda la fila (y por lo tanto de la esquina recta
- * del panel) depende de que ninguna pestaña se corra al cambiar de estado
- * — ver `transform-origin: bottom left` en `.kf-folder-tabs__tab`: con el
- * origen centrado (como estaba antes), el `scale()` de la pestaña inactiva
- * encogía el borde izquierdo unos px, y ese corrimiento sub-pixel es lo que
- * hacía que este mismo diseño (esquina fija) se viera "roto" cuando la
- * pestaña activa no era la primera. Con el origen anclado a la izquierda,
- * el corrimiento desaparece y la esquina fija vuelve a ser una solución
- * válida y simple — sin necesitar medir la pestaña activa por JS.
- *
- * Antes de este slot, el patrón era que el consumidor pusiera su propia
- * card como HERMANO de `kf-folder-tabs` y anulara a mano el radio superior
- * completo (`border-top-left-radius: 0`, `border-top-right-radius: 0` — ver
- * el caso original de `web-portal-latam-frontend`). Encapsular esto acá
- * evita que cada consumidor repita esas reglas a mano.
- *
- *   <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event">
- *     <div kf-folder-tabs-panel>contenido de la pestaña activa</div>
- *   </kf-folder-tabs>
+declare class Footer {
+    readonly logoSrc: _angular_core.InputSignal<string | undefined>;
+    readonly logoAlt: _angular_core.InputSignal<string>;
+    readonly copyright: _angular_core.InputSignal<string>;
+    readonly links: _angular_core.InputSignal<FooterLink[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Footer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Footer, "kf-footer", never, { "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "logoAlt": { "alias": "logoAlt"; "required": false; "isSignal": true; }; "copyright": { "alias": "copyright"; "required": true; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Opciones de `formatNumber` — todas opcionales. */
+interface FormatNumberOptions {
+    /** Cantidad de decimales a mostrar. Default `0`. */
+    decimals?: number;
+    /** Locale de `Intl`/`toLocaleString` — decide separador de miles y de
+     * decimales. Default `'es'` (punto de miles, coma decimal). */
+    locale?: string;
+}
+/**
+ * Separador de miles genérico — sin signo, sin asumir que el valor es
+ * dinero. Cubre casos como kilometraje/horómetro (`formatNumber(45231,
+ * { locale: 'en-US' })` → `'45,231'`), no solo moneda.
  *
- *   <!-- o, sin contenido, como antes: -->
- *   <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event" />
+ *   formatNumber(16800);                              // '16.800'
+ *   formatNumber(16800.5, { decimals: 2 });            // '16.800,50'
+ *   formatNumber(45231, { locale: 'en-US' });          // '45,231'
  */
-declare class FolderTabs {
-    readonly options: _angular_core.InputSignal<FolderTabOption[]>;
-    readonly value: _angular_core.InputSignal<string>;
-    readonly valueChange: _angular_core.OutputEmitterRef<string>;
-    /**
-     * Detecta si el consumidor proyectó contenido marcado con
-     * `kf-folder-tabs-panel` — sin `.required`, así que es `undefined`
-     * cuando no hay nada proyectado (mismo patrón que usa `kf-dropdown` con
-     * `contentChild(DropdownPanel)` para saber si hay un panel que
-     * attachear). `hasPanel()` decide si el wrapper del panel participa del
-     * layout (`display: contents` si no).
-     */
-    private readonly projectedPanel;
-    protected readonly hasPanel: _angular_core.Signal<boolean>;
-    select(value: string): void;
-    /** Navegación estándar de ARIA tabs: flechas mueven el foco y activan la pestaña. */
-    onKeydown(event: KeyboardEvent, currentValue: string): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabs, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FolderTabs, "kf-folder-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["projectedPanel"], ["[kf-folder-tabs-panel]"], true, never>;
+declare function formatNumber(value: number, options?: FormatNumberOptions): string;
+/** Opciones de `formatCurrency` — extiende `FormatNumberOptions` con el
+ * signo/prefijo de moneda. */
+interface FormatCurrencyOptions extends FormatNumberOptions {
+    /** Símbolo o prefijo antepuesto al monto. Default `'$'`. */
+    sign?: string;
 }
+/**
+ * Formatea un monto de dinero — compone sobre `formatNumber` agregando el
+ * signo. Mismos defaults que la convención de OTD (punto de miles, sin
+ * decimales, prefijo `$`), overrideables para otra moneda/país/formato:
+ *
+ *   formatCurrency(16800);                                    // '$16.800'
+ *   formatCurrency(16800.5, { decimals: 2 });                  // '$16.800,50'
+ *   formatCurrency(16800, { sign: '' });                       // '16.800'
+ *   formatCurrency(16800, { sign: 'US$', locale: 'en-US' });   // 'US$16,800'
+ */
+declare function formatCurrency(amount: number, options?: FormatCurrencyOptions): string;
+/**
+ * Inverso de `formatNumber` — recupera el número crudo de un valor ya
+ * formateado con el mismo `locale`. Solo soporta `locale` cuyo separador de
+ * miles y decimal sean `'.'`/`','` (`es`) o `','`/`'.'` (`en-US`) — son los
+ * 2 casos reales del ecosistema hoy; si aparece un tercer locale con otros
+ * separadores, extender acá antes de usarlo.
+ */
+declare function parseNumber(formatted: string, locale?: string): number;
+/**
+ * Inverso de `formatCurrency` — recupera el número crudo de un monto ya
+ * formateado, descartando cualquier signo/prefijo de moneda.
+ *
+ *   parseCurrency('$16.800'); // 16800
+ */
+declare function parseCurrency(formatted: string, locale?: string): number;
+/** "12:40" — hora en formato de 24 horas. */
+declare function formatClockTime(date: Date): string;
+/**
+ * Quita espacios (incluido cualquier espacio en blanco intermedio, no solo
+ * al principio/final) y puntos de un identificador de documento — un
+ * espacio invisible (ej. pegado por accidente desde otra fuente) es un
+ * motivo de rechazo silencioso real que un usuario no sabe explicarse.
+ * Genérico: sirve tanto para RUT (`formatChileanRut` ya lo usa por
+ * dentro) como para cualquier otro identificador con el mismo problema.
+ *
+ *   sanitizeDocumentId(' 51 00004-8 '); // '5100004-8'
+ *   sanitizeDocumentId('12.345.678-9'); // '12345678-9'
+ */
+declare function sanitizeDocumentId(raw: string): string;
+/**
+ * Formatea un RUT chileno insertando el guion automáticamente a medida
+ * que se escribe — igual que un input de tarjeta de crédito, el usuario
+ * solo tipea dígitos (y opcionalmente `k`/`K` como dígito verificador) y
+ * el guion aparece solo antes del último carácter. Solo da forma al
+ * string — no valida si el dígito verificador es matemáticamente
+ * correcto (ver `isValidChileanRut` para eso) ni si la cuenta existe
+ * (eso lo confirma GAM del lado servidor al autenticar).
+ *
+ *   formatChileanRut('123456789');   // '12345678-9'
+ *   formatChileanRut('5100004-8');   // '5100004-8' (ya formateado, idempotente)
+ *   formatChileanRut('5100004k');    // '5100004-k'
+ *   formatChileanRut('510000 4-8 '); // '5100004-8' (espacios ignorados)
+ */
+declare function formatChileanRut(raw: string): string;
+/**
+ * Valida un RUT chileno YA formateado (`cuerpo-DV`, ej. `'12345678-9'`)
+ * contra el algoritmo módulo 11 real — a diferencia del `pattern` de
+ * `document-id.config.ts` en cada portal consumidor (que solo exige la
+ * FORMA: dígitos + guion + dígito verificador), esta función confirma
+ * que el dígito verificador sea matemáticamente correcto para ese
+ * cuerpo. Sigue sin confirmar que la cuenta exista — eso solo lo sabe
+ * GAM al autenticar — pero atrapa el error tipográfico más común
+ * (invertir/cambiar un dígito) antes de intentar el login.
+ *
+ *   isValidChileanRut('20236276-1'); // true  (DV real de ese cuerpo)
+ *   isValidChileanRut('20236276-8'); // false (DV real es '1', no '8')
+ *   isValidChileanRut('no-es-rut');  // false (ni siquiera tiene la forma)
+ */
+declare function isValidChileanRut(rut: string): boolean;
 
 /**
  * Input de formulario apilado: label arriba (en mayúsculas vía CSS), campo con
@@ -994,12 +1898,26 @@ declare class FolderTabs {
  * de una sola acción.
  *
  *   <kf-input type="password" label="Contraseña" toggleable formControlName="password" />
+ *
+ * `readonly` es distinto de `disabled`: un campo `disabled` no recibe foco
+ * por teclado ni se puede seleccionar/copiar su texto (y se lee como
+ * "deshabilitado" en un lector de pantalla); un campo `readonly` sí — el
+ * valor se puede ver, enfocar y copiar, solo no se puede editar. Usar
+ * `readonly` para mostrar un dato existente que el usuario puede querer
+ * copiar (ej. un documento de identidad en un formulario de perfil), y
+ * `disabled` para un campo genuinamente inactivo (ej. mientras un guardado
+ * está en vuelo).
+ *
+ *   <kf-input label="DNI" readonly formControlName="documentId" />
  */
 declare class Input implements ControlValueAccessor, AfterViewInit {
     private static nextId;
     private readonly nativeInput;
     readonly label: _angular_core.InputSignal<string | undefined>;
-    /** Marca el label con un asterisco visual — no aplica `required` al `<input>` nativo por sí solo. */
+    /** Marca el label con un asterisco visual y aplica `required` al `<input>`
+     * nativo — el atributo HTML ya expone el estado obligatorio a lectores de
+     * pantalla (mapeo implícito a `aria-required`), sin necesidad de un
+     * `aria-required` explícito redundante. */
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Ícono líder, renderizado vía `kf-icon`. */
     readonly icon: _angular_core.InputSignal<IconName | undefined>;
@@ -1010,6 +1928,11 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
     /** Mensaje de error con `role="alert"` — reemplaza a `hint` mientras esté presente. */
     readonly errorMessage: _angular_core.InputSignal<string | undefined>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Ver JSDoc de la clase para la diferencia con `disabled`. No pasa por
+     * Reactive Forms (a diferencia de `disabled`, que también puede llegar
+     * vía `FormControl.disable()`) — es siempre una decisión explícita del
+     * consumidor del componente. */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly type: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
     /** Agrega el botón de mostrar/ocultar — sin efecto si `type` no es `"password"`. */
@@ -1050,39 +1973,787 @@ declare class Input implements ControlValueAccessor, AfterViewInit {
      */
     protected onTogglePasswordVisibility(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type JourneyStepStatus = 'done' | 'current' | 'delayed' | 'pending';
+type JourneyStepperSurface = 'dark' | 'card';
+/**
+ * Paleta de color de los estados, independiente de `orientation`:
+ *
+ * - `'brand'` (default): azul de marca para completado/actual, sin
+ *   semántica de semáforo. Para cuando horizontal y vertical representan
+ *   el mismo journey en distintos tamaños de pantalla.
+ * - `'semantic'`: verde/amarillo/rojo real por paso (solo con
+ *   `orientation="vertical"`, la única con 4 estados incluido `delayed`).
+ *   Para cuando cada paso comunica su propio estado puntual.
+ */
+type JourneyStepperColorScheme = 'brand' | 'semantic';
+interface JourneyStep {
+    key: string;
+    label: string;
+    icon: IconName;
+    /** Solo con `orientation="vertical"` — en horizontal el status se calcula desde `currentStep`. */
+    status?: JourneyStepStatus;
+    /** Texto bajo el label — solo con `orientation="vertical"`. */
+    date?: string;
+}
+/**
+ * Progreso de un flujo de N pasos.
+ *
+ * - `orientation` (`'horizontal'` default | `'vertical'`): horizontal
+ *   deriva done/current/pending de `currentStep`; vertical usa
+ *   `steps[].status` explícito, con `delayed` como cuarto estado.
+ * - `surface` (`'dark'` default | `'card'`): fondo sólido oscuro de marca,
+ *   o superficie clara con borde+sombra.
+ * - `colorScheme` (`'brand'` default | `'semantic'`): ver `JourneyStepperColorScheme`.
+ *
+ *   <kf-journey-stepper surface="card" [steps]="steps" [currentStep]="4" (stepClick)="onNavigate($event)" />
+ *   <kf-journey-stepper orientation="vertical" [steps]="unitSteps" />
+ *   <kf-journey-stepper orientation="vertical" colorScheme="semantic" [steps]="unitStepsWithDelays" />
+ */
+declare class JourneyStepper {
+    readonly steps: _angular_core.InputSignal<JourneyStep[]>;
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    readonly surface: _angular_core.InputSignal<JourneyStepperSurface>;
+    readonly colorScheme: _angular_core.InputSignal<JourneyStepperColorScheme>;
+    /** Índice del paso actual — solo con `orientation="horizontal"`. */
+    readonly currentStep: _angular_core.InputSignal<number>;
+    /** Se emite con `step.key` al clickear un paso — solo activo con `orientation="horizontal"`. */
+    readonly stepClick: _angular_core.OutputEmitterRef<string>;
+    private readonly track;
+    private readonly destroyRef;
+    /** `true` cuando el contenido desborda el ancho visible — controla el fade de los bordes. */
+    protected readonly hasOverflow: _angular_core.WritableSignal<boolean>;
+    protected readonly clickable: _angular_core.Signal<boolean>;
+    constructor();
+    private measureOverflow;
+    protected readonly resolvedSteps: _angular_core.Signal<(JourneyStep & {
+        status: JourneyStepStatus;
+    })[]>;
+    protected dotIcon(status: JourneyStepStatus, stepIcon: IconName): IconName;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<JourneyStepper, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<JourneyStepper, "kf-journey-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "colorScheme": { "alias": "colorScheme"; "required": false; "isSignal": true; }; "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; }, never, never, true, never>;
 }
 
 type LinkVariant = 'default' | 'muted';
 /**
  * Acción de bajo énfasis con apariencia de texto — "¿Olvidaste tu
- * contraseña?", "Volver a iniciar sesión". Antes de este componente,
- * `web-portal-latam-frontend` reimplementaba esto dos veces (`.login__forgot`
- * como `<a href="#">` con `preventDefault()`, `.login__back` como
- * `<button>`), cada una con su propio `:focus-visible` copiado literal.
- *
- * Es siempre un `<button type="button">` por dentro, nunca un `<a>`: ninguno
- * de los dos casos reales navega a otra URL, ambos disparan una acción en la
- * misma pantalla (cambiar de vista, someter un flujo). Si en el futuro un
- * consumidor necesita navegación real con href, esa es una discusión de API
- * distinta (`kf-link` con `[routerLink]`/`href`), no se fuerza acá sin caso
- * de uso confirmado.
+ * contraseña?", "Volver a iniciar sesión", o un link real de navegación
+ * como "Ir a pagos →".
+ *
+ * Sin `href` (default) es un `<button type="button">`: dispara una acción
+ * en la misma pantalla, vía `(click)`. Con `href`, es un `<a>` real: navega
+ * a otra URL. `showArrow` agrega un ícono `chevron-right` al final — para
+ * el patrón "texto + flecha" de un link que lleva a otro lado.
  *
  * `variant="default"` (color primario, subrayado en hover) es para la
- * acción de mayor jerarquía relativa de la pantalla (ej. "¿Olvidaste tu
- * contraseña?"); `variant="muted"` (gris que pasa a primario en hover) es
- * para acciones de retroceso/salida (ej. "← Volver a iniciar sesión").
+ * acción de mayor jerarquía relativa de la pantalla; `variant="muted"`
+ * (gris que pasa a primario en hover) es para acciones de retroceso/salida.
  *
  *   <kf-link (click)="onForgotPassword()">¿Olvidaste tu contraseña?</kf-link>
  *   <kf-link variant="muted" (click)="onBack()">← Volver a iniciar sesión</kf-link>
+ *   <kf-link href="/pagos" showArrow>Ir a pagos</kf-link>
  */
 declare class Link {
     readonly variant: _angular_core.InputSignal<LinkVariant>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Si se pasa, renderiza un `<a>` real en vez de `<button>` — navega en vez de disparar `(click)`. */
+    readonly href: _angular_core.InputSignal<string | undefined>;
+    /** Ícono `chevron-right` al final — para el patrón "texto + flecha" de un link que lleva a otro lado. */
+    readonly showArrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Link, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Link, "kf-link", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Link, "kf-link", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Motor de mapas configurado a nivel app, no por uso — mismo criterio que
+ * `API_CONFIG` en `packages/api-client` de `route-assistance-monorepo`: el
+ * access token de Mapbox es un dato de despliegue (cada app/entorno tiene
+ * el propio), no algo que cada `<kf-map>` deba repetir.
+ */
+interface MapConfig {
+    /** Access token público de Mapbox (`pk.*`) de la cuenta del proyecto que consume la librería. */
+    accessToken: string;
+    /**
+     * Estilo de Mapbox Studio propio del cliente, si lo tiene. Cuando se
+     * define, gana siempre sobre `theme()` del componente — un estilo de
+     * marca custom no tiene una variante "light"/"dark" que elegir, ya viene
+     * resuelto. Sin esto, `kf-map` usa el estilo `light-v11`/`dark-v11` de
+     * Mapbox según `theme()`.
+     */
+    styleUrl?: string;
+}
+declare const MAP_CONFIG: InjectionToken<MapConfig>;
+/**
+ * `provide*` idiomático (mismo patrón que `provideHttpClient`/`provideRouter`)
+ * para inyectar una sola vez en `app.config.ts` de cada app consumidora:
+ *
+ *   providers: [provideMapConfig({ accessToken: 'pk.xxx' })]
+ */
+declare function provideMapConfig(config: MapConfig): Provider;
+
+/**
+ * Vocabulario de temas de `kf-map`, separado de `MapView.ts` para que
+ * `MapThemePicker` (el panel flotante del control `mapStyle`) pueda
+ * importarlo sin crear un ciclo `MapView → MapControls → MapThemePicker →
+ * MapView`.
+ *
+ * `streets`/`satellite`/`outdoors` se suman a los `light`/`dark`
+ * originales — los 3 IDs de estilo (`streets-v12`, `satellite-streets-v12`,
+ * `outdoors-v12`) están confirmados contra la cuenta/token real del
+ * ecosistema: la API de estilos de Mapbox es por cuenta, no por versión de
+ * `mapbox-gl`, así que cualquier duda se resuelve probando contra el token
+ * real, no leyendo el número de versión instalado.
+ */
+type MapTheme = 'light' | 'dark' | 'streets' | 'satellite' | 'outdoors';
+declare const STYLE_BY_THEME: Record<MapTheme, string>;
+/** Orden fijo en que `MapThemePicker` lista las 5 opciones — predecible
+ * (siempre el mismo orden en toda pantalla que use el picker), no importa
+ * cuál esté activa. */
+declare const THEME_ORDER: MapTheme[];
+/** Nombre en español de cada tema, para el `aria-label`/label del control
+ * `mapStyle` y las opciones del picker — anuncia qué tema rige HOY o qué
+ * tema se está por elegir, no solo "otro tema distinto". */
+declare const THEME_LABEL: Record<MapTheme, string>;
+
+/**
+ * Cada pieza es independiente entre sí — agregar/sacar un `MapControlKind`
+ * de `controls` en `kf-map` no reacomoda ni afecta a los demás. Array vacío
+ * (default de `kf-map`) es "ningún control": opt-in explícito del
+ * consumidor, nunca activado por default (ver JSDoc de `controls` en
+ * `MapView.ts`).
+ *
+ *   zoom       — botones +/- reales (`map.zoomIn()`/`zoomOut()`).
+ *   fullscreen — expandir/contraer el mapa (Fullscreen API nativa).
+ *   mapStyle   — ciclar entre los temas de `MapTheme`.
+ *   recenter   — re-ejecuta el encuadre a markers/route bajo demanda.
+ *   cluster    — togglear agrupamiento nativo de markers cercanos.
+ *   follow     — la cámara sigue al marker `live` mientras se mueve.
+ */
+type MapControlKind = 'zoom' | 'fullscreen' | 'mapStyle' | 'recenter' | 'cluster' | 'follow';
+/**
+ * Barra de controles flotantes de `kf-map` — pieza puramente presentacional,
+ * sin estado propio: todo lo que sabe se lo pasa `MapView` por input, todo
+ * lo que hace lo reporta por output para que `MapView` (única dueña del
+ * `Map` de Mapbox) decida qué hacer. Vive en la misma carpeta que `MapView`
+ * a propósito (mismo criterio que `DropdownItem`/`DropdownPanel` con
+ * `Dropdown`): el acoplamiento es real, no de nombre — no tiene sentido
+ * fuera de un `kf-map` que la controle.
+ *
+ * Un solo stack vertical, siempre en la esquina superior derecha del mapa
+ * (fijado por `MapView.css`, no acá): es donde ya vivía el `NavigationControl`
+ * de Mapbox que este componente reemplaza, y la atribución obligatoria de
+ * Mapbox (`AttributionControl`, nunca oculta) vive abajo-derecha — un solo
+ * stack evita que dos grupos floten en esquinas distintas y compitan por
+ * espacio en un mapa `size="sm"` de 200px de alto.
+ *
+ * El stack no es una lista continua de botones idénticos: cada grupo lógico
+ * es su propia "card" flotante (`kf-radius-md`+`kf-shadow-md`+fondo blanco,
+ * ver `.kf-map-controls__group` en `MapControls.css`), separadas entre sí
+ * por el `gap` del `:host` — mismo lenguaje ya verificado visualmente en
+ * `route-assistance-monorepo/design/mockups/operations-final.html`
+ * (`.map__ctrl-group`). Orden fijo de arriba a abajo, independiente del
+ * orden en el array `controls` del consumidor (para que dos pantallas que
+ * piden los mismos controles en distinto orden se vean IGUAL):
+ *
+ *   1. zoom — magnificación (par +/-, unido por un divisor, sin gap entre sí).
+ *   2. cámara — recenter + follow (posición de la cámara).
+ *   3. datos — cluster (densidad de los markers, eje distinto de cámara).
+ *   4. chrome — mapStyle + fullscreen (nada del mapa en sí).
+ *
+ * Cada grupo usa `@if` sobre AL MENOS UNO de sus controles (ej. el grupo de
+ * cámara aparece con solo `recenter`, solo `follow`, o ambos) — agregar o
+ * sacar un control nunca reacomoda ni depende de los demás grupos.
+ *
+ * Todos los botones siguen siendo `kf-button[variant=surface][shape=circle]`
+ * — sin tocar `Button.ts`: el fondo/sombra propios de `surface` se anulan
+ * SOLO dentro de un `.kf-map-controls__group` vía una custom property CSS
+ * (ver el comentario junto a esa clase en `MapControls.css` sobre por qué
+ * eso sí atraviesa la encapsulación de Angular y un selector normal no).
+ */
+declare class MapControls {
+    readonly controls: _angular_core.InputSignal<MapControlKind[]>;
+    readonly clusterActive: _angular_core.InputSignal<boolean>;
+    readonly followActive: _angular_core.InputSignal<boolean>;
+    /** Sin ningún marker `live`, togglear "seguir" no tendría ningún efecto
+     * visible — se deshabilita en vez de dejar un botón que parece no hacer nada. */
+    readonly canFollow: _angular_core.InputSignal<boolean>;
+    readonly isFullscreen: _angular_core.InputSignal<boolean>;
+    /** Nombre en español del tema actualmente resuelto (ej. "Calles"), para
+     * anunciar en el `aria-label` del botón de estilo qué se está por perder,
+     * no solo que "algo" va a cambiar. */
+    readonly styleLabel: _angular_core.InputSignal<string>;
+    /** Tema resuelto HOY (`light|dark|...`) — a diferencia de `styleLabel`
+     * (ya traducido a texto), esto es lo que `MapThemePicker` necesita para
+     * marcar la opción activa. */
+    readonly activeTheme: _angular_core.InputSignal<MapTheme>;
+    readonly zoomIn: _angular_core.OutputEmitterRef<void>;
+    readonly zoomOut: _angular_core.OutputEmitterRef<void>;
+    readonly recenter: _angular_core.OutputEmitterRef<void>;
+    readonly followToggle: _angular_core.OutputEmitterRef<void>;
+    readonly clusterToggle: _angular_core.OutputEmitterRef<void>;
+    /** Reemplaza al viejo `styleCycle` (ciclado de un click): ahora el botón
+     * `mapStyle` abre `MapThemePicker` y este output reporta la elección real
+     * hecha ahí. */
+    readonly themeSelect: _angular_core.OutputEmitterRef<MapTheme>;
+    readonly fullscreenToggle: _angular_core.OutputEmitterRef<void>;
+    /** Visibilidad del panel de temas — estado puramente de UI (abierto o no),
+     * no de negocio: `MapView` no necesita saberlo, así que vive acá y no
+     * rompe el criterio de "sin estado propio" del resto de la clase (ver
+     * JSDoc). Se cierra solo (click afuera/Escape) vía `kf-dropdown`, y acá
+     * además al elegir un tema. */
+    protected readonly mapStyleOpen: _angular_core.WritableSignal<boolean>;
+    protected onThemeSelect(theme: MapTheme): void;
+    protected readonly hasZoom: _angular_core.Signal<boolean>;
+    protected readonly hasRecenter: _angular_core.Signal<boolean>;
+    protected readonly hasFollow: _angular_core.Signal<boolean>;
+    protected readonly hasCluster: _angular_core.Signal<boolean>;
+    protected readonly hasMapStyle: _angular_core.Signal<boolean>;
+    protected readonly hasFullscreen: _angular_core.Signal<boolean>;
+    /** El grupo "cámara" (card) aparece con solo `recenter`, solo `follow`, o
+     * ambos — ver JSDoc de la clase sobre por qué cada `@if` de grupo cubre
+     * "al menos uno de sus controles" en vez de un control puntual. */
+    protected readonly hasCamera: _angular_core.Signal<boolean>;
+    protected readonly hasChrome: _angular_core.Signal<boolean>;
+    /**
+     * Texto corto que revela cada botón en hover/foco vía `[kfTooltip]` (ver
+     * `MapControls.html` — la librería ya resuelve este patrón con
+     * `TooltipDirective`, no con CSS a mano) — la misma acción que ya describe
+     * `ariaLabel`, condensada para caber en una píldora en vez de leerse como
+     * oración completa. No reemplaza `ariaLabel` (que sigue siendo la fuente
+     * real para lectores de pantalla): esto es SOLO visual, para quien puede
+     * ver el mapa pero no sabe qué hace un ícono suelto.
+     */
+    protected readonly followLabel: _angular_core.Signal<"Dejar de seguir" | "Seguir">;
+    protected readonly clusterLabel: _angular_core.Signal<"Desagrupar" | "Agrupar">;
+    protected readonly mapStyleLabel: _angular_core.Signal<string>;
+    protected readonly fullscreenLabel: _angular_core.Signal<"Salir de pantalla completa" | "Pantalla completa">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapControls, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapControls, "kf-map-controls", never, { "controls": { "alias": "controls"; "required": false; "isSignal": true; }; "clusterActive": { "alias": "clusterActive"; "required": false; "isSignal": true; }; "followActive": { "alias": "followActive"; "required": false; "isSignal": true; }; "canFollow": { "alias": "canFollow"; "required": false; "isSignal": true; }; "isFullscreen": { "alias": "isFullscreen"; "required": false; "isSignal": true; }; "styleLabel": { "alias": "styleLabel"; "required": false; "isSignal": true; }; "activeTheme": { "alias": "activeTheme"; "required": false; "isSignal": true; }; }, { "zoomIn": "zoomIn"; "zoomOut": "zoomOut"; "recenter": "recenter"; "followToggle": "followToggle"; "clusterToggle": "clusterToggle"; "themeSelect": "themeSelect"; "fullscreenToggle": "fullscreenToggle"; }, never, never, true, never>;
+}
+
+type MapSize = 'sm' | 'md' | 'lg' | 'full';
+type MapVariant = 'interactive' | 'preview';
+/** Vocabulario semántico único de tono, compartido con `TextTone`/`StatTileTone`. */
+type MapMarkerTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
+interface MapLatLng {
+    lat: number;
+    lng: number;
+}
+/**
+ * Botón de acción real dentro de `MapMarker.popup` — cada click emite
+ * `markerAction` con su `key` (nunca el `label`, ver JSDoc de `popup` más
+ * abajo). `icon` es OPCIONAL a propósito: no romper a los consumidores que
+ * ya usaban `actions` sin él (era el único campo hasta esta ronda).
+ *
+ * La jerarquía visual entre acciones NO es un campo aparte (`variant`) sino
+ * la POSICIÓN en el array: la primera acción se renderiza con estilo
+ * prominente (fill, mismo peso que `kf-button[variant=primary]`, el
+ * default del botón); el resto con estilo discreto (mismo peso que
+ * `kf-button[variant=ghost]` — ver el ejemplo de `Modal` con
+ * `variant="ghost"` para "Cancelar" junto a un primary implícito). Un
+ * consumidor con una sola acción no necesita pensar en esto: esa acción ya
+ * es "la primera".
+ */
+interface MapPopupAction {
+    key: string;
+    label: string;
+    /** Ícono líder del catálogo de `kf-icon` — sin esto, la acción se ve solo
+     * con texto (compatibilidad con `actions` ya declarado sin `icon`). */
+    icon?: IconName;
+}
+interface MapMarker {
+    position: MapLatLng;
+    /** Sin `icon`, cae en `map-pin` — el pin genérico del catálogo. Se
+     * ignora cuando el control `cluster` está activo (ver JSDoc de
+     * `controls` — el clustering nativo resuelve por capas WebGL, no por
+     * DOM, y ahí no hay dónde montar un `kf-icon`). */
+    icon?: IconName;
+    tone?: MapMarkerTone;
+    /** Nombre accesible del marker (`aria-label`/`title`) — no abre un popup. */
+    label?: string;
+    /**
+     * Identificador propio del consumidor (ej. el id del ticket/vehículo que
+     * representa) — sin esto el marker no es clickeable: `kf-map` no tiene
+     * forma de reportar "se hizo click en ESTE marker" sin algo que
+     * identificarlo de vuelta hacia `markerSelect`. Opcional a propósito: un
+     * mapa puramente decorativo (ej. la vista previa de `variant="preview"`)
+     * no necesita que sus markers respondan a nada.
+     */
+    id?: string;
+    /**
+     * Marca este marker como el punto que sigue la cámara cuando el control
+     * `follow` está activo — ej. la posición en tiempo real de un vehículo o
+     * técnico. Genérico a propósito (no `isVehicle` ni ningún nombre atado al
+     * dominio de un portal): `@kaufmann-lab/ui` no sabe qué es un "vehículo",
+     * solo que ALGÚN marker es el que se sigue. Si más de un marker lo marca,
+     * se sigue el primero en `markers()`. Distinto de la geolocalización del
+     * propio dispositivo (`navigator.geolocation`, fuera de alcance): esto
+     * sigue un dato que el consumidor ya tiene, no ubica al usuario.
+     */
+    live?: boolean;
+    /**
+     * Mini-card que aparece al hover/foco de este marker — solo si el marker
+     * tiene `id` (ver JSDoc de arriba): sin `id` el marker no es clickeable ni
+     * enfocable, así que no habría forma de revelarla por teclado.
+     *
+     * `actions` son botones REALES (no el viejo `ctaLabel` de texto plano sin
+     * acción): cada click emite `markerAction` con su `key` — nunca el
+     * `label`, que es solo texto de UI y puede repetirse con significados
+     * distintos entre consumidores — y detiene la propagación del click para
+     * no disparar además `markerSelect` sobre el marker completo (ver
+     * `buildMarkerPopup()`).
+     *
+     * Vocabulario genérico a propósito (`title`/`description`/`details`/
+     * `actions`, no `folio`/`cliente`/`verTicket`): esta librería no sabe qué
+     * es un "ticket" — el caso de uso real (folio+cliente+estado+SLA+acciones)
+     * es responsabilidad de quien arma cada `MapMarker`.
+     */
+    popup?: {
+        title: string;
+        description?: string;
+        /** Pares clave/valor extra (ej. estado + SLA) — se listan debajo de `description`. */
+        details?: {
+            label: string;
+            value: string;
+        }[];
+        /** Botones de acción reales — ver JSDoc de `MapPopupAction`. */
+        actions?: MapPopupAction[];
+    };
+}
+/**
+ * Mapa con motor real de Mapbox GL JS — decisión de producto ya cerrada
+ * (comparación de 6 proveedores). El access token vive a nivel app, no por
+ * uso: ver `provideMapConfig` en `map-config.ts` (mismo criterio que
+ * `API_CONFIG` de `packages/api-client`), inyectado una vez en
+ * `app.config.ts` de cada app consumidora.
+ *
+ * `size` (`sm|md|lg` alturas fijas, `full` llena el contenedor padre) NO
+ * hace step-down por viewport como `kf-page-header`: ese mecanismo existe
+ * ahí porque un tamaño de FUENTE fijo se corta en pantallas chicas; una
+ * caja de mapa no tiene ese problema — el canvas de Mapbox ya es
+ * responsive dentro de cualquier tamaño de contenedor. Lo que sí hace
+ * falta (y que el header no necesita) es un `ResizeObserver` real: Mapbox
+ * no se entera solo de que su contenedor cambió de tamaño (un layout que
+ * colapsa un sidebar, un cambio de orientación) — hay que llamar
+ * `map.resize()` a mano cuando el contenedor cambia (mismo motivo por el
+ * que `fullscreenchange` también llama `resize()`, ver `onFullscreenChange`).
+ *
+ * `variant` es un eje ortogonal a `size` (mismo criterio que `variant` +
+ * `tone` en `kf-badge`): `interactive` trae la posibilidad de controles
+ * flotantes reales (ver `controls`); `preview` (`interactive: false` de
+ * Mapbox GL) es para una card de lista, sin chrome y sin foco por teclado —
+ * no hace nada al recibir foco, así que no debe formar parte del tab order,
+ * y por eso NUNCA renderiza `controls` aunque el consumidor los pida:
+ * togglear "seguir" o abrir pantalla completa no tiene sentido en un mapa
+ * que no acepta interacción. Ninguna de las dos variantes oculta la
+ * atribución: es requisito de licencia de Mapbox, no cosmético.
+ *
+ * `theme` (`light|dark|streets|satellite|outdoors`) resuelve el estilo real
+ * de Mapbox — eje totalmente distinto del `[data-theme]` de
+ * `tokens/themes/*` (paleta de marca de la librería): ninguno de los 5
+ * temas de `tokens/` es oscuro todavía, así que no hay ninguna señal real
+ * de la que derivar un default "según el tema de marca activo" — construir
+ * esa detección ahora sería simular una señal que no existe.
+ *
+ * `controls` (`MapControlKind[]`, default `[]`) es siempre opt-in: un mapa
+ * sin `controls` no dibuja ningún botón flotante, ni siquiera en
+ * `interactive` (antes de esta versión, `interactive` agregaba el
+ * `NavigationControl` default de Mapbox gratis — se sacó a propósito: era
+ * el look genérico de Mapbox, no el de esta librería, exactamente la queja
+ * que motivó este rediseño. Un consumidor que quería esos botones de zoom
+ * ahora los pide con `[controls]="['zoom']"`). Cada kind es una pieza
+ * independiente entre sí (ver `MapControls.ts` para el detalle de cada
+ * una) — agregar una no reacomoda ni depende de las demás.
+ *
+ *   <kf-map label="Ubicación del vehículo y del destino" [markers]="markers()" />
+ *   <kf-map size="sm" variant="preview" label="Vista previa de la ruta" [route]="route()" />
+ *   <kf-map label="Flota completa" [markers]="fleet()" [controls]="['zoom', 'recenter', 'cluster', 'follow']" />
+ */
+declare class MapView {
+    readonly size: _angular_core.InputSignal<MapSize>;
+    readonly variant: _angular_core.InputSignal<MapVariant>;
+    readonly markers: _angular_core.InputSignal<MapMarker[]>;
+    readonly route: _angular_core.InputSignal<MapLatLng[] | undefined>;
+    readonly fitToMarkers: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly center: _angular_core.InputSignal<MapLatLng | undefined>;
+    readonly zoom: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Default `'streets'`, no `'light'` ni `'dark'`. `'dark'` se probó
+     * primero por coherencia con la paleta navy de marca, pero una
+     * verificación visual real sobre una ubicación de servicio típica (una
+     * faena/zona rural, no un centro urbano denso) mostró el problema real:
+     * `dark-v11` casi no tiene datos que pintar fuera de ciudades grandes —
+     * el mapa se ve prácticamente todo negro, ilegible, exactamente donde
+     * más importa que se lea bien (ubicaciones de terreno, no de oficina).
+     * `'streets'` SIEMPRE tiene cartografía base visible (calles, nombres,
+     * uso de suelo) sin importar la densidad del lugar — es el único de los
+     * 5 estilos sin ese riesgo. Sigue siendo overrideable por el consumidor. */
+    readonly theme: _angular_core.InputSignal<MapTheme>;
+    /** Controles flotantes a mostrar — ver JSDoc de la clase y `MapControls.ts`. */
+    readonly controls: _angular_core.InputSignal<MapControlKind[]>;
+    /**
+     * Descripción accesible real del mapa — el `<div>` donde Mapbox renderiza
+     * su canvas queda vacío de semántica para un lector de pantalla. Requerido
+     * a propósito: un default genérico ("Mapa") no dice qué está mostrando
+     * ESTE mapa; cada consumidor conoce su propio caso real (ej. "Ubicación
+     * del vehículo y del destino").
+     */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Se emite al hacer click sobre un marker que declaró `id` (ver JSDoc de
+     * `MapMarker.id`) — un marker SIN `id` no es clickeable, no emite nada.
+     * No dispara en modo `cluster` (los markers pasan a ser capas WebGL sin
+     * DOM propio donde colgar un listener) ni en `variant="preview"` (el
+     * mapa entero no es interactivo ahí). */
+    readonly markerSelect: _angular_core.OutputEmitterRef<string>;
+    /** Se emite al clickear un botón de `MapMarker.popup.actions` — ver el
+     * JSDoc de `popup` para por qué reporta `actionKey` (nunca el `label`) y
+     * por qué el click no dispara además `markerSelect`. */
+    readonly markerAction: _angular_core.OutputEmitterRef<{
+        markerId: string;
+        actionKey: string;
+    }>;
+    private readonly mapConfig;
+    private readonly environmentInjector;
+    private readonly document;
+    private readonly destroyRef;
+    private readonly hostElementRef;
+    private readonly containerRef;
+    /** `preview` no es foco-navegable ni se anuncia como región interactiva. */
+    protected readonly isPreview: _angular_core.Signal<boolean>;
+    protected readonly containerRole: _angular_core.Signal<"img" | "region">;
+    /** Ver estado de carga/error real, más abajo (`status`). */
+    protected readonly status: _angular_core.WritableSignal<"error" | "ready" | "loading">;
+    /** Elección manual del consumidor final vía el control `mapStyle` — pisa
+     * `theme()` de forma sostenida (no vuelve a `theme()` sola) hasta que se
+     * destruya este `kf-map`; ver `resolvedTheme()`. */
+    private readonly userTheme;
+    protected readonly styleLabel: _angular_core.Signal<string>;
+    /** Igual que `resolvedTheme()` pero público para el template — lo necesita
+     * `MapThemePicker` (vía `MapControls`) para marcar la opción activa. */
+    protected readonly activeTheme: _angular_core.Signal<MapTheme>;
+    protected readonly clusterActive: _angular_core.WritableSignal<boolean>;
+    protected readonly followActive: _angular_core.WritableSignal<boolean>;
+    protected readonly hasLiveMarker: _angular_core.Signal<boolean>;
+    protected readonly isFullscreen: _angular_core.WritableSignal<boolean>;
+    /** Sin estilo de marca propio (Mapbox Studio) no hay nada que ciclar con
+     * `mapStyle` — se filtra en vez de dejar un botón que no cambiaría nada. */
+    protected readonly effectiveControls: _angular_core.Signal<MapControlKind[]>;
+    protected readonly showControls: _angular_core.Signal<boolean>;
+    private map;
+    /** `extraIconRefs`: íconos de las acciones del popup (ver `buildMarkerPopup()`)
+     * — se crean con `createComponent()` igual que `iconRef` (el pin), así que
+     * necesitan el mismo `.destroy()` en `clearMarkers()`. */
+    private markerHandles;
+    /** Markers DOM reales sobre cada cluster real (punto 1, a11y) — separados
+     * de `markerHandles` porque se reconstruyen en su propio ciclo (ver
+     * `syncClusterMarkers()`) y no tienen `iconRef` propio (sin `kf-icon`
+     * adentro, ver JSDoc de `addClusterMarkerToMap()`). */
+    private clusterMarkerHandles;
+    private resizeObserver;
+    private currentStyle;
+    private mapReady;
+    /** Popup resumen de un cluster real (ver `renderClusterPopup()`) — a
+     * diferencia del popup de marker individual (siempre en el DOM, mostrado
+     * por CSS `:hover`/`:focus-within`), este se crea/destruye a demanda: no
+     * cuelga de ningún elemento con estado hover propio, lo abre un click
+     * sobre una capa WebGL sin DOM. */
+    private clusterPopupElement;
+    private clusterPopupIconRefs;
+    /** Coordenadas del cluster abierto — necesarias para volver a proyectar
+     * contra pantalla en cada `'move'` (ver `repositionClusterPopup()`); el
+     * cluster en sí no se mueve, pero su posición EN PANTALLA sí cuando se
+     * hace pan. */
+    private clusterPopupCoordinates;
+    private readonly onFullscreenChange;
+    constructor();
+    /**
+     * El bundle default de `mapbox-gl` arma su Web Worker serializando el
+     * código del worker como string y cargándolo por Blob URL — un bundler
+     * ESM-nativo (esbuild, el builder `application` de Angular) minifica ESE
+     * string también, sin saber que corre verbatim en otro contexto, y el
+     * worker termina con un identificador roto en runtime
+     * (`ReferenceError: <letra> is not defined`, ver mapbox/mapbox-gl-js#13700
+     * y angular/angular-cli#27378). `workerClass` reemplaza ese mecanismo por
+     * un `Worker` real armado con el patrón literal
+     * `new Worker(new URL(..., import.meta.url), { type: 'module' })` — el
+     * único que esbuild reconoce de forma ESTÁTICA y separa en su propio
+     * chunk (esbuild lo detecta por análisis sintáctico puro, dondequiera que
+     * el literal aparezca en el archivo — no hace falta que esté a nivel de
+     * módulo). `mapbox-gl-csp.worker.js` es un asset copiado tal cual, nunca
+     * TypeScript compilado, así que `import.meta.url` sigue apuntando a un
+     * archivo real en cualquiera de los dos contextos donde esbuild procesa
+     * este literal: en `ng test` (bundlea el `.ts` fuente tal cual, el asset
+     * está al lado en `src/lib/map/`) y en el build real de un consumidor
+     * (bundlea el FESM publicado — `ng-package.json` copia este mismo asset a
+     * `dist/ui/fesm2022/`, junto al bundle aplanado, con esa carpeta EXACTA a
+     * propósito). Ambos casos comparten la misma ruta relativa
+     * (`./mapbox-gl-csp.worker.js`) porque el asset se coloca deliberadamente
+     * al lado del consumidor en los dos. Si un cambio de Angular Package
+     * Format renombra `fesm2022`, hay que actualizar el `output` en
+     * `ng-package.json` a la par.
+     *
+     * A propósito NO es un side-effect de módulo (no corre con solo
+     * `import`ar este archivo): un `<kf-map>` real en jsdom construye un
+     * `Worker` real vía esta misma expresión, y jsdom no lo soporta — revienta
+     * el proceso de Vitest entero, no solo el test, y se lleva puesto
+     * CUALQUIER spec que solo importe algo del barrel de la librería (nada
+     * que ver con mapas). Por eso vive acá, dentro de `initializeMap()`, que
+     * únicamente corre cuando alguien de verdad instancia y renderiza este
+     * componente — `MapView.spec.ts` mockea `mapbox-gl` entero, así que ahí
+     * la asignación cae sobre el mock, no sobre el `mapboxgl` real.
+     */
+    private assignWorkerClass;
+    private initializeMap;
+    private resolvedTheme;
+    private resolvedStyle;
+    private toLngLat;
+    /**
+     * `matchMedia` (no una media query CSS): esta preferencia decide la
+     * `duration` que se le pasa a la API de cámara de Mapbox, que corre en
+     * JS/WebGL — CSS no tiene nada que animar acá. `document.defaultView` (no
+     * el `window` global) para que quede mockeable en test igual que el resto
+     * de la clase usa `DOCUMENT` inyectado.
+     */
+    private prefersReducedMotion;
+    /** Colapsa cualquier duración a 0 (instantáneo, sin animar) si el usuario
+     * pidió `prefers-reduced-motion: reduce` — un único punto de verdad para
+     * que ningún movimiento de cámara se salga de esa preferencia. */
+    private cameraDuration;
+    private syncCamera;
+    /**
+     * Encuadra `bounds` con `fitBounds()`, salvo que sea una caja degenerada
+     * (ver `DEGENERATE_BOUNDS_THRESHOLD_DEG`) — un solo punto total (un único
+     * marker sin ruta, o vehículo+destino prácticamente en el mismo sitio) le
+     * da a `fitBounds()` un ancho y alto ~cero, que Mapbox resuelve con un
+     * `padding`/zoom que en la práctica deja el mapa mayormente en blanco
+     * ("se ve todo blanco", el bug real que esto corrige). Un `easeTo` con
+     * zoom fijo sensato muestra contexto real de calle en ese caso, animado
+     * igual que el resto (antes era un `jumpTo` seco).
+     */
+    private frameBounds;
+    private isDegenerateBounds;
+    /**
+     * Extiende sobre markers Y route: el nombre del input sigue el caso de
+     * uso principal (encuadrar los markers), pero un mapa con solo `route` y
+     * sin `markers` tampoco debería quedar en el encuadre default inútil.
+     */
+    private computeBounds;
+    private syncMarkers;
+    /**
+     * Crea el marker de Mapbox (DOM + `kf-icon` + wiring de click/teclado/
+     * popup) para UN `MapMarker` y lo agrega a `markerHandles` — compartido
+     * entre el modo normal (`syncMarkers()`, todos los markers) y el modo
+     * cluster (`syncClusterMarkers()`, solo los que quedan sueltos): un punto
+     * suelto en modo cluster tiene que verse y comportarse EXACTAMENTE igual
+     * que en modo normal, así que no puede haber dos implementaciones.
+     */
+    private addMarkerToMap;
+    /**
+     * Mini-card hija del `<div>` del marker — mismo patrón que
+     * `.kf-map-controls__label` (ver `MapControls.css`): un elemento SIEMPRE
+     * presente en el DOM, oculto por defecto vía `opacity`/`pointer-events` en
+     * `MapView.css` y revelado por CSS puro en `:hover`/`:focus-within` del
+     * marker padre — sin JS de show/hide, y sin `mapboxgl.Popup` (evita una
+     * segunda gestión de overlay/posicionamiento cuando el CSS ya alcanza acá,
+     * igual que ya decidió `.kf-map-controls__label`).
+     *
+     * Todo el subárbol (título, descripción, `details`, `actions`) se arma con
+     * `document.createElement` puro, nunca `kf-text`/`kf-button`: este marker
+     * entero vive fuera del template de Angular (ver el comentario grande de
+     * `ViewEncapsulation.None` más arriba) — meter un componente real acá
+     * significaría un `createComponent()` propio por cada línea de texto, el
+     * mismo costo que ya paga `kf-icon` en `syncMarkers()` pero sin ninguna
+     * necesidad real (no hay nada dinámico que un componente resuelva mejor
+     * que texto plano estilado por clase). Es la MISMA decisión que ya regía
+     * para `title`/`description` antes de esta ronda — se extiende acá para no
+     * mezclar dos convenciones distintas dentro del mismo fragmento de DOM.
+     *
+     * `actions` sí necesita wiring propio (a diferencia del resto de la card,
+     * que burbujea su click al listener ya cableado sobre `element` en
+     * `syncMarkers()`): cada botón corta esa burbuja con `stopPropagation()`
+     * para reportar `markerAction` en vez de (además) `markerSelect`.
+     *
+     * Jerarquía visual de `actions` (ver JSDoc de `MapPopupAction`): la
+     * PRIMERA acción del array es la principal (`--primary`, fill); el resto
+     * es secundaria (`--ghost`, transparente) — mismo peso que ya usan
+     * `kf-button[variant=primary]`/`[variant=ghost]` en el resto de la
+     * librería, sin inventar un esquema de color nuevo acá.
+     *
+     * El punto de color junto al título (`kf-map__marker-popup-tone`) reusa
+     * el `tone` del propio marker — no el de cada `details` (que son pares
+     * label/value genéricos, sin un campo "cuál de estos es el estado"): es
+     * la misma señal que YA pinta el círculo del marker en el mapa, mostrada
+     * de nuevo acá para que el popup se lea sin tener que mirar el marker.
+     */
+    private buildMarkerPopup;
+    private clearMarkers;
+    /**
+     * Recorte de borde para el popup de marker individual (punto 2) —
+     * `getBoundingClientRect()` del marker y del propio contenedor del mapa,
+     * recalculado en el evento que dispara la apertura (`mouseenter`/
+     * `focusin`, ver `addMarkerToMap()`). El mecanismo de mostrar/ocultar
+     * sigue siendo 100% CSS; esto solo decide 3 clases modificadoras que
+     * `MapView.css` traduce en alineación horizontal/vertical:
+     *
+     *   `--align-start` — el popup se desborda por la izquierda del
+     *   contenedor si se centra sobre el marker: se alinea su borde
+     *   izquierdo con el del marker en vez de centrarlo.
+     *   `--align-end` — mismo caso, contra el borde derecho.
+     *   `--below` — no entra arriba del marker (cerca del borde superior del
+     *   contenedor): se muestra debajo en vez de arriba.
+     *
+     * El popup YA está en el DOM en este punto (oculto por `opacity`, no por
+     * `display:none` — ver `MapView.css`), así que `getBoundingClientRect()`
+     * devuelve su tamaño real aunque todavía no sea visible.
+     */
+    private positionMarkerPopup;
+    /**
+     * Clustering nativo de Mapbox (`cluster: true` en la fuente GeoJSON, no un
+     * algoritmo armado a mano) — 2 capas, solo para clusters REALES (2+
+     * puntos agrupados, `has: point_count`): círculo agregado y su label de
+     * cantidad. Un punto que Mapbox deja suelto (sin `point_count`) YA NO
+     * tiene capa WebGL propia — ver `syncClusterMarkers()`, que lo renderiza
+     * como el mismo marker DOM de siempre (con ícono/tono/popup reales, cosa
+     * que una capa `circle` no puede mostrar).
+     */
+    private syncClusterSource;
+    /**
+     * Contraparte en DOM de la capa WebGL: mientras esa capa solo dibuja
+     * clusters reales, ESTE método decide qué puntos quedan sueltos al zoom
+     * ACTUAL (`querySourceFeatures` con el mismo filtro `!has(point_count)`
+     * que ya usa Mapbox para separar cluster de leaf) y les arma el mismo
+     * marker DOM que tendrían sin clustering — vía `addMarkerToMap()`, la
+     * MISMA función que usa el modo normal, no una copia.
+     *
+     * `querySourceFeatures` puede devolver una feature repetida si cae cerca
+     * de un borde interno de tile — de ahí el `Set` sobre `index` (la
+     * property que identifica al `MapMarker` de origen, ver
+     * `markersToFeatureCollection()`), no una lista con posibles duplicados.
+     * Mismo motivo (y mismo `Set`, esta vez sobre `cluster_id`) para los
+     * clusters reales que se resuelven acá abajo.
+     *
+     * Se llama solo cuando `clusterActive()` — ver los listeners `'data'`/
+     * `'moveend'` en `initializeMap()` sobre CUÁNDO se llama esto.
+     */
+    private syncClusterMarkers;
+    /**
+     * Marker DOM real sobre un cluster (punto 1, a11y) — MISMO patrón de
+     * wiring que `addMarkerToMap()` (`role="button"`, `tabindex="0"`,
+     * `click`+`keydown` de Enter/Space), aplicado acá porque el círculo que
+     * pinta `CLUSTER_CIRCLE_LAYER_ID` es una capa WebGL sin nodo DOM propio
+     * —inalcanzable por teclado (WCAG SC 2.1.1 Keyboard). `mapboxgl.Marker`
+     * posiciona y reproyecta este `<div>` solo en cada pan/zoom, igual que ya
+     * hace con cualquier marker individual — no hace falta reposicionarlo a
+     * mano como sí necesita el popup resumen (ver `repositionClusterPopup()`).
+     *
+     * Sin `kf-icon`/texto propio adentro a propósito: el círculo+conteo que ya
+     * pinta la capa WebGL sigue siendo la representación visual (mismo
+     * `'circle-radius'`, ver `clusterMarkerRadiusPx()`); este `<div>` es
+     * transparente y se superpone exacto encima, aportando SOLO la
+     * interactividad real que la capa WebGL no puede tener.
+     */
+    private addClusterMarkerToMap;
+    private clearClusterMarkers;
+    /**
+     * Activación de un cluster real (click O Enter/Space sobre su marker DOM,
+     * ver `addClusterMarkerToMap()`): ANTES hacía zoom directo
+     * (`getClusterExpansionZoom()` + `easeTo`) — ahora abre el popup resumen
+     * (`renderClusterPopup()`) con la lista de tickets agrupados, y ESE zoom
+     * pasa a ser la acción explícita "Acercar para separar" dentro del popup
+     * (ver `expandCluster()`).
+     */
+    private activateCluster;
+    /** Dispara el zoom que antes hacía el click directo sobre el círculo —
+     * ahora vive detrás del botón "Acercar para separar" del popup resumen. */
+    private expandCluster;
+    /**
+     * `index` identifica de vuelta al `MapMarker` de origen (ver
+     * `syncClusterMarkers()`); `title`/`description`/`markerId` son las
+     * mismas properties que ya arma `buildMarkerPopup()` (folio/cliente/id
+     * del caso real) — se serializan acá TAMBIÉN para que
+     * `getClusterLeaves()` pueda listarlas en el popup resumen sin tener que
+     * ir a buscar cada `MapMarker` original por separado. Los campos son
+     * `string` (no `undefined`): las properties de una `Feature` de GeoJSON
+     * no viajan bien como `undefined` — `''` significa "sin dato" en los 3.
+     */
+    private markersToFeatureCollection;
+    private clearClusterLayers;
+    /**
+     * Popup resumen de un cluster real (punto 4) — a diferencia del popup de
+     * marker individual (siempre en el DOM, `:hover`/`:focus-within` puro),
+     * este no cuelga de ningún elemento con estado hover propio: lo abre un
+     * click sobre una capa WebGL sin DOM, así que se crea/destruye a demanda
+     * y su visibilidad la maneja JS, no CSS. Se agrega como hijo del HOST
+     * (`kf-map`, no `.kf-map__container`): ambos comparten exactamente la
+     * misma caja (`.kf-map__container` es `width/height:100%` sin padding/
+     * borde dentro de un host `position:relative`), así que las coordenadas
+     * de `map.project()` (relativas al contenedor) valen también acá — mismo
+     * ancestro posicionado que ya usa `.kf-map__overlay`.
+     *
+     * `title`/`description` de cada leaf son `popup.title`/`popup.description`
+     * del `MapMarker` original (folio/cliente en el caso real) — ver
+     * `markersToFeatureCollection()`. El punto de color reusa `tone`, MISMO
+     * criterio que el punto de color del popup individual (ver JSDoc de
+     * `buildMarkerPopup()`): no se inventa un texto de "estado" que la
+     * librería no tiene, se reusa la señal de color que sí existe.
+     */
+    private renderClusterPopup;
+    /** Reproyecta el popup de cluster contra pantalla — se llama en cada
+     * `'move'` (ver `initializeMap()`): el punto geográfico no se mueve, pero
+     * su posición EN PANTALLA sí cuando se hace pan. Mismo criterio de
+     * recorte de borde que `positionMarkerPopup()` (punto 2), pero en
+     * píxeles calculados a mano en vez de clases CSS: este popup no cuelga
+     * de un ancestro posicionado por CSS relativo al marker, su posición
+     * ENTERA viene de `map.project()`. */
+    private repositionClusterPopup;
+    private closeClusterPopup;
+    private syncRoute;
+    private resolveColorToken;
+    protected handleZoomIn(): void;
+    protected handleZoomOut(): void;
+    /** Reencuadra a demanda, ignorando `fitToMarkers()` (tiene sentido pedirlo
+     * justo cuando `fitToMarkers` está en `false`) y sin apagar `follow`: si
+     * está activo, la próxima posición nueva vuelve a pegar la cámara al
+     * marker `live` — este reencuadre es una corrección puntual, no un modo. */
+    protected handleRecenter(): void;
+    protected handleFollowToggle(): void;
+    protected handleClusterToggle(): void;
+    /** Reemplaza al viejo ciclado de un click (`handleStyleCycle`): la
+     * elección real llega desde `MapThemePicker`, vía `MapControls`. */
+    protected handleThemeSelect(theme: MapTheme): void;
+    protected handleFullscreenToggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapView, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapView, "kf-map", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "route": { "alias": "route"; "required": false; "isSignal": true; }; "fitToMarkers": { "alias": "fitToMarkers"; "required": false; "isSignal": true; }; "center": { "alias": "center"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "controls": { "alias": "controls"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; }, { "markerSelect": "markerSelect"; "markerAction": "markerAction"; }, never, never, true, never>;
 }
 
+/**
+ * Signal reactivo con el estado actual de un media query — para cuando un
+ * componente necesita SABER en qué lado de un breakpoint está (no solo
+ * mostrar/ocultar con CSS). Un `@media` en `styles` no alcanza cuando la
+ * decisión no es puramente visual: por ejemplo, un componente hijo que
+ * recibe un input booleano (`[collapsed]`) no puede "leer" un breakpoint
+ * CSS del padre — necesita que alguien en TypeScript se lo diga.
+ *
+ * Encontrado al construir `SidebarShell`: el estado `collapsed` (colapso
+ * del rail en desktop) se pasaba tal cual a cada `kf-sidebar-nav-item`, sin
+ * importar el viewport. En mobile, donde el rail deslizado siempre muestra
+ * etiquetas completas (ver estilos de `SidebarShell`), los ítems seguían
+ * ocultando su label si el usuario había dejado el rail colapsado en
+ * desktop antes de achicar la ventana — un CSS que dice "en mobile se ve
+ * ancho" no cambia el valor del input que ya llegó al hijo.
+ *
+ * Debe llamarse dentro de un contexto de inyección (el `constructor` de un
+ * componente, o un campo de clase inicializado ahí — mismo requisito que
+ * cualquier función que use `inject()`).
+ *
+ *   protected readonly isMobile = matchMediaSignal('(max-width: 900px)');
+ *   // ...
+ *   [collapsed]="collapsed() && !isMobile()"
+ */
+declare function matchMediaSignal(query: string): Signal<boolean>;
+
 /**
  * Card de estadística/KPI: label, valor grande, ícono opcional en la esquina
  * superior derecha, badge de esquina opcional (pegado al valor) y una nota
@@ -1093,8 +2764,17 @@ declare class Link {
  * en toda la librería, tal como pide el design system (página 14: "Card...
  * es la base de paneles, tarjetas de métrica, tablas...").
  *
+ * Slot `[actions]` opcional (proyectado al pie, después de `foot`) para un
+ * CTA dentro de la card — ej. "Saldo Pendiente" con botón "Pagar Ahora" en
+ * Fase 6 de OTD. Mismo mecanismo de proyección por selector que `[footer]`
+ * en `kf-modal`, no un `<ng-content>` default: así una card sin acciones no
+ * paga ningún espacio extra.
+ *
  *   <kf-metric-card label="Tickets abiertos" value="11" icon="ticket" foot="+2 hoy" />
  *   <kf-metric-card label="Tasa de resolución" value="94%" badge="+2%" value-color="var(--kf-color-success)" />
+ *   <kf-metric-card label="Saldo Pendiente" value="$45,000">
+ *     <kf-button actions variant="primary" size="sm">Pagar Ahora</kf-button>
+ *   </kf-metric-card>
  */
 declare class MetricCard {
     readonly label: _angular_core.InputSignal<string>;
@@ -1108,7 +2788,57 @@ declare class MetricCard {
     /** Badge de esquina opcional, pegado al valor (ej. "+2%"). */
     readonly badge: _angular_core.InputSignal<string | undefined>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCard, "kf-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "foot": { "alias": "foot"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCard, "kf-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "foot": { "alias": "foot"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+}
+
+/**
+ * Franja fija en la base de una pantalla completa para apps mobile del
+ * ecosistema: encapsula el padding con `safe-area-inset-bottom` (para no
+ * invadir la zona del home indicator), el borde superior y el fondo —
+ * cualquier acción, chip de estado o hint que necesite vivir pegado al
+ * borde inferior del dispositivo se proyecta acá vía `<ng-content>`.
+ *
+ *   <kf-mobile-footer>
+ *     <kf-button>Cerrar orden</kf-button>
+ *   </kf-mobile-footer>
+ */
+declare class MobileFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileFooter, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileFooter, "kf-mobile-footer", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Encabezado de pantalla completa (fondo navy) para apps mobile del
+ * ecosistema — cubre tanto la raíz de un tab (sin volver) como el detalle
+ * de un flujo (con volver).
+ *
+ *   <kf-mobile-header title="Mis asignaciones" />
+ *
+ *   <kf-mobile-header title="STAR-20841" subtitle="Cerrado hoy · 15:18" [showBack]="true" (back)="onBack()" />
+ *
+ * Sin `kf-text` para `eyebrow`/`title`/`subtitle`: su `tone` es un set
+ * cerrado sin blanco/inverso, y sus variantes fijan `color` explícito sobre
+ * el elemento interno — un `color: white` heredado desde afuera nunca le
+ * gana a esa declaración directa. Markup propio con los tokens reales.
+ *
+ * El botón "volver" tampoco es `kf-button`: su `variant="ghost"` fija el
+ * mismo token de color que este fondo navy (el ícono quedaría invisible).
+ */
+declare class MobileHeader {
+    readonly title: _angular_core.InputSignal<string>;
+    /** Línea chica y translúcida ARRIBA del título — ej. un folio o un saludo. */
+    readonly eyebrow: _angular_core.InputSignal<string | undefined>;
+    /** `true` cuando `eyebrow` es un código (folio) — usa tipografía monoespaciada. */
+    readonly eyebrowMono: _angular_core.InputSignal<boolean>;
+    /** Línea chica y translúcida DEBAJO del título — ej. "Cerrado hoy · 15:18". */
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    readonly showBack: _angular_core.InputSignal<boolean>;
+    /** El componente no navega por sí solo: cada pantalla decide qué significa
+     * "volver" (`Location.back()`, retroceder un paso del flujo, etc.). */
+    readonly back: _angular_core.OutputEmitterRef<void>;
+    protected onBackClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileHeader, "kf-mobile-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "eyebrow": { "alias": "eyebrow"; "required": false; "isSignal": true; }; "eyebrowMono": { "alias": "eyebrowMono"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "showBack": { "alias": "showBack"; "required": false; "isSignal": true; }; }, { "back": "back"; }, never, ["[kf-mobile-header-trailing]"], true, never>;
 }
 
 /**
@@ -1124,15 +2854,30 @@ declare class MetricCard {
  * destructiva está en vuelo) se cancelan `Escape` y el clic en el backdrop:
  * solo cierra el consumidor poniendo `open` en `false`.
  *
- * Las acciones van en el slot `footer`.
+ * Las acciones van en el slot `footer` — el atributo `footer` se pone
+ * DIRECTO en cada `kf-button`, sin envolverlos en un `<div footer>`:
+ * `.kf-modal__footer` ya es `display:flex` con `gap` propio entre sus
+ * hijos DIRECTOS. Envolver los botones en un `<div>` intermedio dejaría
+ * ese `<div>` como único hijo del footer — el gap nunca llegaría a
+ * separar los botones entre sí (bug real encontrado en `web-otd-frontend`:
+ * los 2 botones quedaban pegados, con 0px de separación medida, pese a que
+ * el CSS del footer declaraba `gap: var(--kf-space-md)`).
  *
  *   <kf-modal [(open)]="confirmOpen" title="Eliminar unidad">
  *     <p>Esta acción no se puede deshacer.</p>
- *     <div footer>
- *       <kf-button variant="ghost" (click)="confirmOpen.set(false)">Cancelar</kf-button>
- *       <kf-button (click)="remove()">Eliminar</kf-button>
- *     </div>
+ *     <kf-button footer variant="ghost" (click)="confirmOpen.set(false)">Cancelar</kf-button>
+ *     <kf-button footer (click)="remove()">Eliminar</kf-button>
  *   </kf-modal>
+ *
+ * El footer agrupa todo a la derecha por defecto (`justify-content:
+ * flex-end`) — para una acción secundaria/informativa que debe quedar
+ * separada a la izquierda (ej. un link "Ver documento" junto a un botón
+ * "Cerrar"), agregar la clase `kf-modal__footer-start` AL MISMO elemento
+ * que ya lleva `footer`, no a un wrapper (mismo motivo que el `footer`
+ * directo: un `<div>` intermedio rompe el `gap`):
+ *
+ *   <kf-link footer class="kf-modal__footer-start" disabled>Ver documento</kf-link>
+ *   <kf-button footer (click)="open.set(false)">Cerrar</kf-button>
  */
 declare class Modal {
     readonly title: _angular_core.InputSignal<string>;
@@ -1143,6 +2888,7 @@ declare class Modal {
     protected readonly titleId: string;
     private readonly dialog;
     private readonly document;
+    private readonly overlayContainer;
     constructor();
     /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
     protected onCancel(event: Event): void;
@@ -1160,86 +2906,108 @@ declare class Modal {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Modal, "kf-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[footer]"], true, never>;
 }
 
-interface MultiSelectOption {
-    value: string;
-    label: string;
+/** Color de la franja izquierda y del fondo. */
+type NoteBlockTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
+/**
+ * Bloque de texto atribuido a una PERSONA: encabezado, prosa y firma al pie,
+ * con fondo suave y franja de color — la anatomía de una cita, distinta de
+ * `kf-alert` (que interrumpe el flujo con `role="alert"`). El texto va como
+ * contenido proyectado y respeta los saltos de línea del autor.
+ */
+declare class NoteBlock {
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    /** Segunda pieza del encabezado, en la misma línea del `title`. */
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    /** Pie de atribución — quién escribió y cuándo, ya formateado. */
+    readonly signature: _angular_core.InputSignal<string | undefined>;
+    readonly tone: _angular_core.InputSignal<NoteBlockTone>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NoteBlock, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NoteBlock, "kf-note-block", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "signature": { "alias": "signature"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
+
+type TextAs = 'h1' | 'h2' | 'h3' | 'p' | 'span';
+type TextVariant = 'title-xxl' | 'title-xl' | 'title-lg' | 'title-md' | 'title-sm' | 'body' | 'body-muted' | 'caption' | 'overline' | 'overline-strong';
+type TextTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
 /**
- * Dropdown de selección múltiple con checkboxes internos, siguiendo el mismo
- * patrón de panel flotante que `SelectMenu` (panel con `position: absolute`
- * sobre el host, sin Angular CDK Overlay, que no es dependencia del proyecto).
- * Se abre y cierra por click en el disparador, y se cierra al hacer click
- * afuera o al presionar Escape.
+ * Tipografía unificada — separa la etiqueta semántica (`as`, qué es el
+ * texto para el DOM/accesibilidad) del estilo visual (`variant`, cómo se
+ * ve). Antes de este componente, cada pantalla que consume la librería
+ * definía su propio `h1`/`p` con `font-size` suelto para el mismo rol
+ * (título de página, subtítulo, texto secundario) — auditoría sobre
+ * `web-portal-latam-frontend` encontró 9 tamaños distintos entre login y
+ * home sin ningún paso de escala en común. `variant` resuelve eso contra
+ * la escala de `tokens/base.css` (`--kf-font-size-*`).
+ *
+ * `tone` sigue la misma convención cerrada que `Alert`/`Badge`/`Chip`: sin
+ * escape hatch de color libre. Si un caso necesita un color que `tone` no
+ * cubre, es una discusión de design system, no una prop nueva acá.
  *
- * A diferencia de `SelectMenu`, el disparador no muestra un único valor sino
- * los nombres seleccionados junto a un badge circular con el conteo (página
- * 12: "Sucursal Norte, Lima Centro" + badge "2"), y cada opción del panel se
- * marca/desmarca con un checkbox sin cerrar el panel. Incluye una opción
- * "Todas" al inicio de la lista, con estado `indeterminate` cuando hay
- * selección parcial — el mismo patrón de "seleccionar todos" de `Checkbox`.
+ * `title-xl`/`title-xxl` son un tier aparte de `title-lg|md|sm`: no vienen
+ * de la auditoría de contenido de página (esa cerró en 2.125rem), son para
+ * títulos protagonistas de pantalla completa (ej. bienvenida del home vía
+ * `kf-page-header[size=xl|xxl]`) — ver tokens/base.css.
  *
- *   <kf-multi-select
- *     label="Sucursales"
- *     [options]="branches"
- *     [values]="selectedBranches()"
- *     (valuesChange)="selectedBranches.set($event)"
- *   />
+ * `overline`/`overline-strong` son para el patrón "texto chico en mayúsculas
+ * junto a un dato" (ej. el label "RUC" de `kf-company-selector`, el badge de
+ * `kf-admin-badge`) — antes de estas variantes, ese patrón se reimplementaba
+ * suelto en al menos 7 componentes con tamaños/pesos ligeramente distintos
+ * entre sí. `overline` (peso 600) es para labels sin chrome propio;
+ * `overline-strong` (peso 700) es para el texto de un badge/pill que ya trae
+ * su propio fondo. Ninguna de las dos fija color — como el resto de los
+ * variants, el color se resuelve con `tone`.
  *
- * Pendiente: el prop `icon` de otros componentes del design system requiere
- * un componente Icon / sprite SVG que esta librería todavía no tiene — este
- * componente no usa iconos, así que no aplica acá.
+ *   <kf-text as="h1" variant="title-lg">Bienvenido de nuevo</kf-text>
+ *   <kf-text as="p" variant="body-muted">Ingresá con tu cuenta corporativa.</kf-text>
+ *   <kf-text as="span" variant="caption" tone="error">Campo obligatorio</kf-text>
+ *   <kf-text as="span" variant="overline">RUC</kf-text>
+ *   <kf-text as="span" variant="overline-strong" tone="warn">Vista administrador</kf-text>
  */
-declare class MultiSelect {
-    readonly label: _angular_core.InputSignal<string | undefined>;
-    readonly options: _angular_core.InputSignal<MultiSelectOption[]>;
-    readonly values: _angular_core.InputSignal<string[]>;
-    readonly placeholder: _angular_core.InputSignal<string>;
-    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly valuesChange: _angular_core.OutputEmitterRef<string[]>;
-    private readonly instanceId;
-    readonly triggerId: string;
-    readonly listboxId: string;
-    readonly isOpen: _angular_core.WritableSignal<boolean>;
-    readonly selectedCount: _angular_core.Signal<number>;
-    readonly allSelected: _angular_core.Signal<boolean>;
-    readonly isPartiallySelected: _angular_core.Signal<boolean>;
+declare class Text {
+    /** Etiqueta semántica real que se renderiza — nunca es solo un `div`. */
+    readonly as: _angular_core.InputSignal<TextAs>;
+    readonly variant: _angular_core.InputSignal<TextVariant>;
+    readonly tone: _angular_core.InputSignal<TextTone>;
     /**
-     * Texto del disparador: placeholder si no hay selección, o los nombres
-     * seleccionados unidos por coma (el conteo va aparte, en el badge). Con
-     * muchas opciones el `text-overflow: ellipsis` del `.kf-multi-select__value`
-     * corta el texto — el badge de conteo siempre queda visible al lado.
+     * Copia de `as` para uso dentro del template: `as` es palabra reservada
+     * en las expresiones de Angular (`@if (x; as y)`), así que `@switch (as())`
+     * no parsea — NG5002. La prop pública sigue llamándose `as` (es solo un
+     * atributo HTML ahí, `<kf-text as="h1">`, no una expresión).
      */
-    readonly summaryText: _angular_core.Signal<string>;
-    private readonly host;
-    isSelected(value: string): boolean;
-    toggle(): void;
-    toggleOption(value: string): void;
-    /** Alterna entre "todas seleccionadas" y "ninguna seleccionada". */
-    toggleAll(): void;
-    onDocumentClick(event: MouseEvent): void;
-    onEscape(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelect, "kf-multi-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
+    protected readonly tag: _angular_core.Signal<TextAs>;
+    protected hostClass(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Text, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Text, "kf-text", never, { "as": { "alias": "as"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * Tamaño del título. Cada valor mapea 1:1 a una variante `title-*` de
+ * `kf-text`; `xl`/`xxl` son para títulos protagonistas (ej. bienvenida del
+ * home). Bajo los 900px, el tamaño efectivo baja un escalón (ver
+ * `MOBILE_STEP_DOWN`).
+ */
+type PageHeaderTitleSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 /**
  * Bloque de título al tope de una página: chip de ícono opcional, título (h1),
  * subtítulo opcional y un área de acciones opcional proyectada vía
- * `<ng-content select="[actions]">`, para no acoplar el componente a un set
- * fijo de botones.
+ * `<ng-content select="[actions]">`.
  *
  *   <kf-page-header title="Vehículos" subtitle="Gestión de la flota activa">
  *     <button actions>Nuevo vehículo</button>
  *   </kf-page-header>
  *
  *   <kf-page-header icon="settings" title="Configuración" />
+ *
+ *   <kf-page-header size="xl" title="Bienvenido de nuevo" />
  */
 declare class PageHeader {
     readonly icon: _angular_core.InputSignal<IconName | undefined>;
     readonly title: _angular_core.InputSignal<string>;
     readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    readonly size: _angular_core.InputSignal<PageHeaderTitleSize>;
+    private readonly isMobile;
+    protected readonly resolvedTitleVariant: _angular_core.Signal<TextVariant>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeader, "kf-page-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeader, "kf-page-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
 }
 
 /** Un número de página clickeable o un separador "…" no interactivo. */
@@ -1264,16 +3032,47 @@ type PaginationItem = {
  *   <kf-pagination [page]="page" [pages]="totalPages" (pageChange)="page = $event">
  *     21–40 de 273
  *   </kf-pagination>
+ *
+ * Con `pageSizeOptions`, agrega un select de "N por página" entre el texto
+ * informativo y los controles de navegación — el consumidor decide el
+ * tamaño real vía `pageSize`/`pageSizeChange` (two-way opcional, ninguno de
+ * los dos es requerido si no se usa el selector):
+ *
+ *   <kf-pagination [page]="page" [pages]="totalPages" (pageChange)="page = $event"
+ *     [pageSizeOptions]="[10, 25, 50]" [(pageSize)]="pageSize">
+ *     21–40 de 273
+ *   </kf-pagination>
  */
 declare class Pagination {
     readonly page: _angular_core.InputSignal<number>;
     readonly pages: _angular_core.InputSignal<number>;
     readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    /** Opciones del selector "N por página" — sin esto, el selector no se
+     * renderiza (mismo criterio que `[footer]`/`[actions]` de otros
+     * componentes: ausente por default, nunca forzado). `kf-select` en
+     * `variant="compact"` no impone un máximo de opciones, a diferencia de
+     * `kf-segmented` (pensado solo para 2-3). */
+    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    readonly pageSize: _angular_core.ModelSignal<number | null>;
     /** Lista de números de página y separadores a renderizar, ya resuelta por el algoritmo de elipsis. */
     readonly items: _angular_core.Signal<PaginationItem[]>;
+    /** Con una sola página (o ninguna), el `<nav>` de prev/next+números no
+     * aporta nada navegable — antes se dejaba en el DOM igual (oculto solo
+     * por un hack `::ng-deep` del consumidor, ver `route-assistance-monorepo`)
+     * y el footer quedaba con el selector "Filas" descoordinado, como si le
+     * faltara una pieza. Sacar el `<nav>` del DOM (no `display:none`) resuelve
+     * esto para cualquier consumidor de `kf-pagination`, no solo para quien ya
+     * tenía el hack. El `divider` reusa el mismo criterio: sin `nav` no hay
+     * nada del otro lado que separar, así que tampoco corresponde dejarlo. */
+    protected readonly hasNav: _angular_core.Signal<boolean>;
+    /** `kf-select` trabaja con `value: string` — cada tamaño numérico se
+     * mapea a su representación en texto, ida y vuelta. */
+    protected readonly pageSizeSelectOptions: _angular_core.Signal<string[]>;
+    protected readonly pageSizeValue: _angular_core.Signal<string>;
+    protected setPageSize(value: string): void;
     goTo(target: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Pagination, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Pagination, "kf-pagination", never, { "page": { "alias": "page"; "required": false; "isSignal": true; }; "pages": { "alias": "pages"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Pagination, "kf-pagination", never, { "page": { "alias": "page"; "required": false; "isSignal": true; }; "pages": { "alias": "pages"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSize": "pageSizeChange"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -1285,6 +3084,13 @@ declare class Pagination {
  *   <kf-panel title="Mis documentos por pagar" actionLabel="Ir a pagos" actionHref="/pagos">
  *     <kf-action-tile-row icon="download" title="Pagos" description="Revisa tu estado de cuenta y realiza pagos." />
  *   </kf-panel>
+ *
+ * El host y el `kf-card` interno son flex column con `flex:1` de punta a
+ * punta — si un grid/flex externo estira `kf-panel` a la altura de un
+ * hermano más alto, el contenido proyectado hereda esa altura en vez de
+ * dejar un hueco vacío bajo el `kf-card`. Sin esa presión externa (altura
+ * "auto" del contenedor), `flex:1` no tiene espacio extra que repartir y el
+ * panel se comporta igual que antes.
  */
 declare class Panel {
     readonly title: _angular_core.InputSignal<string>;
@@ -1294,11 +3100,14 @@ declare class Panel {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Panel, "kf-panel", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-/** Un ítem de navegación de la barra de marca. */
+/** Un ítem de navegación de la barra de marca. `icon` es opcional y solo se
+ * usa en el drawer mobile (columna, ver template) — el `<nav>` horizontal de
+ * escritorio se mantiene solo texto, sin ícono ni chevron. */
 interface PortalHeaderNavItem {
     label: string;
     href: string;
     active?: boolean;
+    icon?: IconName;
 }
 /** Una acción de la franja de administrador (ej. "Consultar deuda clientes"). */
 interface PortalHeaderAdminAction {
@@ -1321,34 +3130,68 @@ interface PortalHeaderAdminAction {
  *
  * Bajo los 768px, el `<nav>` deja de mostrarse en línea junto al logo y
  * colapsa detrás de un botón de menú (ícono `menu`/`x`) que despliega un
- * drawer lateral (desde el borde derecho, `position: fixed` + overlay de
- * fondo) con los mismos `navItems` en columna. Ese drawer expone un slot
- * (`<ng-content select="[kf-portal-header-extra]">`) al final, pensado
- * para que el consumidor proyecte contenido propio que en escritorio vive
- * en otro lugar (ej. el menú de sesión) — `PortalHeader` no sabe qué es
- * ese contenido ni cómo se abre, solo le da un lugar dentro del drawer ya
- * desplegado. El overlay cierra el drawer al tocarlo, y `Escape` también.
+ * `kf-drawer` (panel lateral genérico, ver `Drawer.ts`) anclado al borde
+ * IZQUIERDO — mismo lado que el botón que lo abre, convención dominante
+ * Material/iOS/Android — con los mismos `navItems` en columna dentro del
+ * body (fondo claro) de ese drawer.
+ *
+ * `PortalHeader` expone dos slots propios pensados para que el consumidor
+ * proyecte contenido que en escritorio vive en otro lugar:
+ * - `<ng-content select="[kf-portal-header-extra]">`: identidad de sesión
+ *   (ej. `kf-drawer-session`). Cae en `[kf-drawer-header]` de `kf-drawer` —
+ *   el único contenedor con fondo oscuro (`--kf-color-tertiary-deep`, ver
+ *   `Drawer.ts`) que `kf-drawer-session` espera como fondo (no trae uno
+ *   propio, ver `DrawerSession.ts`).
+ * - `<ng-content select="[kf-portal-header-footer]">`: acciones separadas del
+ *   resto (ej. `kf-drawer-logout`). Cae en `[kf-drawer-footer]` de `kf-drawer`.
+ *
+ * `PortalHeader` no sabe qué es ninguno de los dos contenidos, solo les da
+ * el lugar correcto dentro del drawer ya desplegado (ver `Drawer.ts`).
  *
  *   <kf-portal-header
  *     [isAdmin]="true"
  *     [adminActions]="[{ label: 'Consultar deuda clientes', href: '/deuda' }, { label: 'Cambiar DNI', href: '/dni' }]"
- *     [navItems]="[{ label: 'Home', href: '/', active: true }, { label: 'Vehículos', href: '/vehiculos' }]"
+ *     [navItems]="[{ label: 'Home', href: '/', active: true, icon: 'grid' }, { label: 'Vehículos', href: '/vehiculos', icon: 'truck' }]"
+ *     tagline="Portal privado"
  *     userInitials="TS"
+ *     userName="Tomás Soto"
+ *     [showCart]="true"
+ *     (cartClick)="onCartClick()"
  *   >
- *     <div kf-portal-header-extra>contenido propio, solo visible en el panel mobile</div>
+ *     <kf-drawer-session
+ *       kf-portal-header-extra
+ *       brand="Portal Kaufmann LATAM"
+ *       name="Tomás Soto"
+ *       email="tomas.soto@kaufmann.com"
+ *     />
+ *     <kf-drawer-logout kf-portal-header-footer (logoutClick)="onLogout()" />
  *   </kf-portal-header>
  */
 declare class PortalHeader {
     readonly brand: _angular_core.InputSignal<string>;
+    /** URL del logo como imagen. Sin ella (default), se mantiene el texto de `brand`. */
+    readonly logoSrc: _angular_core.InputSignal<string | undefined>;
+    /** `alt` del logo cuando se usa `logoSrc`. Sin ella, cae en `brand()`. */
+    readonly logoAlt: _angular_core.InputSignal<string | undefined>;
     readonly isAdmin: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly adminActions: _angular_core.InputSignal<PortalHeaderAdminAction[]>;
     readonly navItems: _angular_core.InputSignal<PortalHeaderNavItem[]>;
     readonly userInitials: _angular_core.InputSignal<string>;
+    /** Texto junto al logo (ej. "Portal privado"), con separador vertical. Sin
+     * separador ni texto si queda vacío. */
+    readonly tagline: _angular_core.InputSignal<string>;
+    /** Nombre completo para el bloque "HOLA / {nombre}" dentro de la pastilla
+     * de sesión. Vacío (default) mantiene la pastilla como hoy: solo avatar,
+     * sin bloque de texto ni chevron — retrocompatible con cualquier
+     * consumidor que no pase este input. */
+    readonly userName: _angular_core.InputSignal<string>;
+    readonly showCart: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly sessionClick: _angular_core.OutputEmitterRef<void>;
-    /** Visibilidad del drawer de navegación mobile (bajo los 768px). */
+    readonly cartClick: _angular_core.OutputEmitterRef<void>;
+    /** Visibilidad del drawer de navegación mobile (bajo los 768px). Se pasa a
+     * `kf-drawer` como `[(open)]` — `PortalHeader` ya no implementa overlay,
+     * `Escape` ni atrapado de foco por su cuenta, eso vive en `Drawer`. */
     protected readonly mobileMenuOpen: _angular_core.WritableSignal<boolean>;
-    /** Cierra el drawer con Escape — mismo patrón que cualquier drawer/modal. */
-    protected onEscape(): void;
     /**
      * `ElementRef` real del botón de sesión (el avatar en la esquina
      * derecha), no de todo el header. Pensado para anclar un `kf-dropdown`
@@ -1360,8 +3203,276 @@ declare class PortalHeader {
      *   <kf-dropdown [(open)]="menuOpen" [anchor]="header().sessionButtonRef()">
      */
     readonly sessionButtonRef: _angular_core.Signal<ElementRef<any>>;
+    /**
+     * Ancla real de cada `<a>` del `<nav>` horizontal (una por `navItems()`,
+     * mismo orden — `@for` trackea por `item.label`, así que la lista no se
+     * recrea en cada cambio de ruta, solo cambia qué índice trae
+     * `active: true`). Sirve para medir dónde poner la cápsula deslizante
+     * (`thumbStyle`, ver abajo) sin duplicar el layout del nav en JS.
+     */
+    private readonly navItemAnchors;
+    /** Fuerza recalcular `thumbStyle` en un resize — un resize de ventana no
+     * cambia ningún signal de los que `thumbStyle` ya lee (`navItems`,
+     * `navItemAnchors`), pero sí puede correr el layout de los `<a>` bajo un
+     * ancho de columna distinto (texto largo pasando a otra línea, etc.). */
+    private readonly resizeTick;
+    protected onWindowResize(): void;
+    /**
+     * Posición/ancho de la cápsula blanca del ítem activo del `<nav>`, como
+     * un elemento propio (`.kf-portal-header__nav-thumb`) que se desliza con
+     * `transition` en vez de que cada `<a>` traiga su propio fondo blanco
+     * (eso hacía que el fondo "saltara" de un ítem a otro sin animación,
+     * porque son elementos DOM distintos — no hay nada que Angular pueda
+     * animar entre ellos).
+     */
+    protected readonly thumbStyle: _angular_core.Signal<Record<string, string>>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PortalHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PortalHeader, "kf-portal-header", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "isAdmin": { "alias": "isAdmin"; "required": false; "isSignal": true; }; "adminActions": { "alias": "adminActions"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": true; "isSignal": true; }; }, { "sessionClick": "sessionClick"; }, never, ["[kf-portal-header-extra]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PortalHeader, "kf-portal-header", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "logoAlt": { "alias": "logoAlt"; "required": false; "isSignal": true; }; "isAdmin": { "alias": "isAdmin"; "required": false; "isSignal": true; }; "adminActions": { "alias": "adminActions"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": true; "isSignal": true; }; "tagline": { "alias": "tagline"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "showCart": { "alias": "showCart"; "required": false; "isSignal": true; }; }, { "sessionClick": "sessionClick"; "cartClick": "cartClick"; }, never, ["[kf-portal-header-extra]", "[kf-portal-header-footer]"], true, never>;
+}
+
+/** Mismo vocabulario que `Badge.tone`/`TextTone` (menos `info`/`service`,
+ * que no aplican a un valor de progreso): `neutral` es el color de marca
+ * por defecto (sin implicar buen/mal estado), `ok`/`warn`/`error` sí
+ * comunican severidad. La librería no conoce el dominio que produce ese
+ * valor (SLA, storage, lo que sea) — el consumidor decide qué tone usar. */
+type ProgressTone = 'neutral' | 'ok' | 'warn' | 'error';
+/**
+ * Barra de progreso de un solo valor (0-100%) con color por severidad —
+ * para un porcentaje simple, a diferencia de `kf-bucket-progress`, que
+ * dibuja varias categorías proporcionales en la misma barra.
+ *
+ *   <kf-progress [value]="80" tone="ok" label="80%" />
+ *   <kf-progress [value]="ratio()" [tone]="severityTone()" />
+ *
+ * `value` se clampea a [0, 100] — un consumidor que calcule un ratio fuera
+ * de rango (ej. tiempo transcurrido sobre un SLA ya vencido) no rompe el
+ * ancho de la barra. `label` es texto libre opcional sobre la barra (ej.
+ * "80%"); sin él, no se renderiza ningún texto, solo la barra.
+ */
+declare class Progress {
+    readonly value: _angular_core.InputSignal<number>;
+    readonly tone: _angular_core.InputSignal<ProgressTone>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    protected readonly clampedValue: _angular_core.Signal<number>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Progress, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "kf-progress", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Punto que emite ondas concéntricas en bucle, para marcar un dato que
+ * necesita atención inmediata sin depender de que el operador lo vea por
+ * casualidad — el mismo rol que un punto rojo estático ya cumple en varios
+ * lugares del producto (ver `.now__d`/`.board-alerts__dot` en
+ * `operations-final.html`), llevado a movimiento porque el color solo
+ * compite por atención con todo lo demás en pantalla; el movimiento no.
+ *
+ * Es una primitiva de énfasis, no un indicador de estado — para eso está
+ * `kf-status-pill` (punto estático + texto). Este componente no tiene
+ * texto ni tono semántico de "ok/warn/error": una sola apariencia (rojo,
+ * el color reservado para lo urgente en el design system), porque emitir
+ * ondas por algo que no es urgente banalizaría la señal la próxima vez que
+ * sí lo sea.
+ *
+ *   <kf-pulse-dot />
+ *   <kf-pulse-dot size="lg" />
+ *
+ * Respeta `prefers-reduced-motion` (ver PulseDot.css): la onda deja de
+ * animarse y el punto queda como un punto estático, sin perder la
+ * información de "esto es urgente" que da el color.
+ */
+declare class PulseDot {
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PulseDot, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PulseDot, "kf-pulse-dot", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Chip de filtro genérico con contador — nunca hardcodeado a un dominio
+ * concreto (ej. estado de una cotización); el consumidor decide qué
+ * representa cada `value` y cómo mapea sus items contra él vía `predicate`.
+ *
+ * Bug real corregido: la primera versión leía `item.status`/`item.chip` por
+ * nombre de campo mágico en vez de un `predicate` — colisionaba con
+ * dominios donde `status` ya significa otra cosa (ej. `Quote.status` en
+ * `web-otd-frontend` es 'ok'|'error'|'warn' de aprobación, no "tiene saldo
+ * pendiente"). Un chip "Con saldo pendiente" sobre cotizaciones terminaba
+ * filtrando por un campo que no tenía nada que ver, mostrando 0 resultados
+ * siempre. `predicate` es explícito y no depende de convenciones de nombre. */
+interface QuotePickerChip<T = unknown> {
+    value: string;
+    label: string;
+    count: number;
+    predicate: (item: T) => boolean;
+}
+/** Una opción del dropdown "Ordenar por", visible solo en `variant="modal"`. */
+interface QuotePickerSortOption {
+    value: string;
+    label: string;
+}
+/**
+ * Selector de un ítem "rico" de una lista buscable/filtrable — generalización
+ * del patrón "elegir una cotización" de Pagos y Facturas de OTD, pero sin
+ * ningún acoplamiento a `Quote`: todo el contenido de cada fila/card llega
+ * por `columns` (mismo `DataTableColumn` de `kf-data-table`, reexportado acá
+ * en vez de duplicar el concepto) + `cellTemplates` para contenido custom
+ * (thumbnail, monto formateado, etc. — mismo mecanismo `TemplateRef` +
+ * `ngTemplateOutlet` que ya usa `kf-data-table`).
+ *
+ * Un solo componente, dos contenedores (`variant: 'inline' | 'modal'`), UNA
+ * sola lógica de búsqueda/filtro/orden interna. Nunca dos implementaciones
+ * paralelas: el riesgo real de eso es que un fix de filtro se aplique en un
+ * modo y se olvide en el otro. Los `computed()` de más abajo
+ * (`filteredItems`, `sortedItems`) son la ÚNICA fuente de verdad para ambos
+ * `variant`; lo que cambia entre inline y modal es solo qué contenedor
+ * envuelve esos datos ya resueltos.
+ *
+ * ## Modo `inline` (default)
+ * Trigger a ANCHO COMPLETO (nunca una caja angosta de ancho fijo) que
+ * muestra el ítem activo colapsado — thumbnail, id + modelo, unidades +
+ * fecha + monto, CTA "Cambiar cotización" con chevron-down. Al click, el
+ * panel se expande INLINE (empuja el contenido de abajo, nunca flota
+ * encima) con buscador propio + chips de filtro + un grid de 2 columnas (1
+ * en mobile, breakpoint `max-width: 900px` vía `matchMediaSignal` — mismo
+ * mecanismo que ya usa el resto de la librería para decisiones de layout en
+ * TypeScript, no solo CSS). Por encima de `expandThreshold` resultados
+ * visibles, el panel recorta a un preview de `PREVIEW_ROWS` filas con un
+ * fade inferior y un botón dashed "Ver las N en pantalla completa" que
+ * emite `expandToModal` — el picker no decide qué pasa después (típicamente
+ * el consumidor pone `variant` en `'modal'` y `open` en `true`).
+ *
+ * ## Modo `modal`
+ * Mismo buscador, mismos chips, misma lógica de filtrado — compone
+ * `kf-modal` (proyectando el contenido) en vez de reimplementar un
+ * `<dialog>` a mano: la API de `Modal` (`[(open)]`, cierre con
+ * Escape/backdrop/botón vía `<dialog>` nativo) ya cubre exactamente lo que
+ * este modo necesita. Compone también `kf-data-table` para la tabla
+ * completa (columnas configurables, fade de overflow horizontal ya
+ * resuelto ahí) y `kf-pagination` para paginar — ninguno de los tres se
+ * reimplementa. Agrega un dropdown propio de "Ordenar por" (calibrado
+ * visualmente contra el trigger de `kf-select`, pero compacto: `kf-select`
+ * fuerza un ancho fijo de 240px pensado para formularios, no para una
+ * barra de herramientas de tabla — ver JSDoc de `sortOpen` más abajo).
+ *
+ * En mobile, `kf-data-table[cardable]` con `defaultView` forzado a
+ * `'cards'` decide la vista (mismo criterio que `matchMediaSignal` ya
+ * resolvió en otros consumidores): dentro de un modal a pantalla completa
+ * no tiene sentido ofrecer un toggle tabla/cards que en mobile daría una
+ * tabla angosta con scroll horizontal.
+ *
+ * DEUDA TÉCNICA CONOCIDA (confirmada con el usuario, ver CHANGELOG.md): el
+ * diseño validado con mockups pedía que en mobile el modal ocupe el 100%
+ * de la pantalla (botón "atrás", sin overlay centrado) — `kf-modal` no
+ * tiene ese modo, así que hoy en mobile se ve como un diálogo centrado
+ * angosto (`width: min(480px, ...)`). Es funcional (cards legibles,
+ * búsqueda, chips, paginación), solo visualmente distinto del mockup.
+ *
+ *   <kf-quote-picker
+ *     [items]="quotes()"
+ *     [columns]="columns"
+ *     [selectedId]="selectedQuoteId()"
+ *     [idKey]="(q) => q.id"
+ *     [chips]="statusChips()"
+ *     [cellTemplates]="{ photo: photoCell(), amount: amountCell() }"
+ *     (selectedIdChange)="selectedQuoteId.set($event)"
+ *     (expandToModal)="variant.set('modal'); open.set(true)"
+ *   />
+ */
+declare class QuotePicker<T = unknown> {
+    readonly items: _angular_core.InputSignal<T[]>;
+    readonly columns: _angular_core.InputSignal<DataTableColumn[]>;
+    readonly selectedId: _angular_core.InputSignal<string | null>;
+    readonly idKey: _angular_core.InputSignal<(item: T) => string>;
+    /**
+     * Mapa `columnKey -> TemplateRef`, mismo mecanismo que `kf-data-table`
+     * (`ngTemplateOutlet` + contexto `{ $implicit: item, index }`) — se
+     * reenvía tal cual a la tabla interna del modo `modal`, y se usa
+     * directamente en el grid de cards del modo `inline`. Un solo mapa para
+     * ambos modos, consistente con la regla de "una sola lógica interna".
+     */
+    readonly cellTemplates: _angular_core.InputSignal<Record<string, TemplateRef<{
+        $implicit: T;
+        index: number;
+    }>> | undefined>;
+    readonly chips: _angular_core.InputSignal<QuotePickerChip<T>[]>;
+    readonly sortOptions: _angular_core.InputSignal<QuotePickerSortOption[]>;
+    readonly sort: _angular_core.ModelSignal<string | null>;
+    /**
+     * Umbral de volumen alto — el consumidor decide el número exacto, nunca
+     * hardcodeado a "cotizaciones" ni a ningún caso de uso puntual. Default
+     * 15 según el diseño validado con mockups.
+     */
+    readonly expandThreshold: _angular_core.InputSignal<number>;
+    readonly variant: _angular_core.InputSignal<"inline" | "modal">;
+    /** Visibilidad del modo `modal`, two-way — mismo patrón que `[(open)]` de `kf-modal`. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly searchPlaceholder: _angular_core.InputSignal<string>;
+    /** Ícono de placeholder cuando ninguna columna `cardRole: 'media'` resuelve
+     * un thumbnail real vía `cellTemplates` — el picker no asume qué dominio
+     * consume (cotización, vehículo, cliente...), así que no hardcodea un
+     * ícono fijo. Default `'file'` solo por no dejar el input sin valor. */
+    readonly placeholderIcon: _angular_core.InputSignal<IconName>;
+    readonly selectedIdChange: _angular_core.OutputEmitterRef<string>;
+    /** Disparado al superar `expandThreshold` en modo inline; el consumidor decide pasar a `modal`. */
+    readonly expandToModal: _angular_core.OutputEmitterRef<void>;
+    protected readonly searchQuery: _angular_core.WritableSignal<string>;
+    protected readonly activeChip: _angular_core.WritableSignal<string | null>;
+    protected readonly expanded: _angular_core.WritableSignal<boolean>;
+    protected readonly page: _angular_core.WritableSignal<number>;
+    protected readonly sortOpen: _angular_core.WritableSignal<boolean>;
+    /**
+     * Mismo breakpoint (`max-width: 900px`) que el resto de la librería usa
+     * para decisiones de layout en TypeScript (no solo CSS) — ver
+     * `matchMediaSignal`. Decide 1 vs. 2 columnas en el grid inline, y tabla
+     * vs. cards apiladas dentro del modal.
+     */
+    protected readonly isMobile: _angular_core.Signal<boolean>;
+    private readonly destroyRef;
+    private readonly previewScrollEl;
+    /** Mismo mecanismo de fade que `kf-data-table` — ver comentario en QuotePicker.css. */
+    protected readonly canFadeBottom: _angular_core.WritableSignal<boolean>;
+    readonly selectedItem: _angular_core.Signal<T | undefined>;
+    /** Filtro por texto (buscador propio) + filtro por chip activo, en ese orden. */
+    protected readonly filteredItems: _angular_core.Signal<T[]>;
+    /**
+     * Orden solo tiene efecto visible en modo `modal` (el diseño validado no
+     * pide dropdown de orden en inline) — se calcula igual en ambos casos
+     * porque es la MISMA lógica interna; en inline `sort()` simplemente se
+     * queda en `null` salvo que el consumidor lo setee explícitamente.
+     */
+    protected readonly sortedItems: _angular_core.Signal<T[]>;
+    /** Por encima del umbral, el preview inline se recorta salvo que el usuario ya haya expandido. */
+    protected readonly isHighVolume: _angular_core.Signal<boolean>;
+    protected readonly previewItems: _angular_core.Signal<T[]>;
+    protected readonly pages: _angular_core.Signal<number>;
+    protected readonly pagedItems: _angular_core.Signal<T[]>;
+    protected readonly sortLabel: _angular_core.Signal<string>;
+    constructor();
+    private updateFadeState;
+    private cellText;
+    toggleExpandedPanel(): void;
+    onSearchInput(event: Event): void;
+    selectChip(value: string): void;
+    select(item: T): void;
+    onItemKeydown(event: KeyboardEvent, item: T): void;
+    onSeeAll(): void;
+    onTableRowClick(event: {
+        row: T;
+        index: number;
+    }): void;
+    toggleSort(): void;
+    setSort(value: string): void;
+    trackItem(item: T, index: number): string | number;
+    /** Arrow function como campo (no un método) para que `[rowKey]` reciba
+     * una referencia ESTABLE entre change detections — `trackItem.bind(this)`
+     * en el template recrearía una función nueva en cada ciclo, invalidando
+     * cualquier optimización de `kf-data-table` que dependa de identidad. */
+    protected readonly rowKeyFn: (item: T, index: number) => string | number;
+    protected cellValue(item: T, column: DataTableColumn): string;
+    protected readonly mediaColumn: _angular_core.Signal<DataTableColumn | undefined>;
+    protected readonly titleColumn: _angular_core.Signal<DataTableColumn | undefined>;
+    protected readonly fieldColumns: _angular_core.Signal<DataTableColumn[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuotePicker<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuotePicker<any>, "kf-quote-picker", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "idKey": { "alias": "idKey"; "required": true; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "chips": { "alias": "chips"; "required": false; "isSignal": true; }; "sortOptions": { "alias": "sortOptions"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "expandThreshold": { "alias": "expandThreshold"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "placeholderIcon": { "alias": "placeholderIcon"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; "open": "openChange"; "selectedIdChange": "selectedIdChange"; "expandToModal": "expandToModal"; }, never, never, true, never>;
 }
 
 /**
@@ -1375,7 +3486,12 @@ declare class PortalHeader {
  * invitación + las acciones como un bloque compuesto propio del dominio
  * "taller", no un placeholder de una sola pieza.
  *
- *   <kf-reserve-block emptyLabel="No tienes reservas de taller"
+ * `grow` estira el panel de invitación para llenar el espacio vertical
+ * disponible — solo cuando el consumidor comparte fila con una tarjeta más
+ * alta (ej. junto a "Total de vehículos"); en un lugar sin esa presión
+ * (home, debajo del carousel) se deja en su alto natural.
+ *
+ *   <kf-reserve-block emptyLabel="No tienes reservas de taller" grow
  *     title="¿Necesitas mantención?" description="Tenemos la mejor red de talleres."
  *     actionLabel="Agenda tu reserva aquí" actionHref="/taller/agendar">
  *     <kf-button actions icon="calendar">Reservar hora</kf-button>
@@ -1388,8 +3504,10 @@ declare class ReserveBlock {
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly actionLabel: _angular_core.InputSignal<string | undefined>;
     readonly actionHref: _angular_core.InputSignal<string | undefined>;
+    /** La invitación se estira para llenar la tarjeta (ej. junto a "Total de vehículos"). */
+    readonly grow: _angular_core.InputSignalWithTransform<boolean, unknown>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ReserveBlock, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReserveBlock, "kf-reserve-block", never, { "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReserveBlock, "kf-reserve-block", never, { "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; "grow": { "alias": "grow"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
 }
 
 /**
@@ -1402,14 +3520,10 @@ declare class ReserveBlock {
  * `size` sigue la misma escala `'sm'|'md'|'lg'` que `Button`/`Icon`/`Spinner`
  * (`md` es el default): `sm` reduce tipografía y espaciado para usarse
  * dentro de cards ya compactas, `lg` los agranda para encabezar un bloque
- * más prominente. Antes de la `0.2.0`, `size` solo aceptaba `'sm'` —
- * placeholder incompleto de esta misma escala; los valores de `lg` son una
- * extrapolación proporcional de la escala existente (sin un caso de uso
- * real todavía que los valide, a diferencia de `sm`, que sí viene de un
- * patrón real de uso dentro de cards). `solid` rellena el chip de ícono con
- * el color primario sólido en vez del tratamiento "soft" (fondo tenue) —
- * pensado para superficies que ya tienen un tinte de color propio, donde el
- * chip "soft" perdería contraste.
+ * más prominente. `solid` rellena el chip de ícono con el color primario
+ * sólido en vez del tratamiento "soft" (fondo tenue) — pensado para
+ * superficies que ya tienen un tinte de color propio, donde el chip "soft"
+ * perdería contraste.
  *
  *   <kf-section-header icon="settings" title="Preferencias"
  *     subtitle="Configuración general de la cuenta">
@@ -1430,6 +3544,118 @@ declare class SectionHeader {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionHeader, "kf-section-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "solid": { "alias": "solid"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
 }
 
+/**
+ * Contenedor de navegación por secciones dentro de una misma pantalla —
+ * agrupa `kf-section-nav-item` y resuelve su layout fusionado según
+ * viewport, con un breakpoint PROPIO de 1024px (no el $mobile:900px
+ * compartido del resto de la librería — ver el comentario en
+ * `SectionNav.scss`):
+ *
+ * - Desktop (≥1024px): columna de botones a la izquierda + panel de
+ *   contenido separado a la derecha, mostrando el contenido del ítem (o
+ *   sub-ítem) activo.
+ * - Mobile y tablet (<1024px): acordeón — el contenido del ítem activo se
+ *   despliega inline, justo debajo de su propio botón.
+ *
+ * El cambio entre ambos layouts es solo CSS (`SectionNav.scss` +
+ * `SectionNavItem.scss`, ver comentarios ahí): cada `kf-section-nav-item`
+ * proyecta su contenido una única vez y es la grilla la que lo reposiciona
+ * visualmente, sin recrearlo ni duplicarlo en el DOM.
+ *
+ * A diferencia de `kf-tabs` (selector de vista plano, sin contenido propio)
+ * y de `kf-sidebar-shell` (rail persistente ENTRE rutas, colapsable, fondo
+ * oscuro): esto es navegación DENTRO de una sola pantalla, con paneles de
+ * contenido rico por sección.
+ *
+ * La exclusividad entre ítems (y entre sub-ítems, dentro de cada uno) la
+ * decide quien consume el componente, igual que cada `kf-section-nav-item`
+ * por separado — `kf-section-nav` no guarda ningún estado de selección.
+ *
+ *   <kf-section-nav>
+ *     <kf-section-nav-item label="Mis datos personales" icon="user"
+ *       [active]="openSection() === 'datos'" (toggled)="openSection.set('datos')">
+ *       <app-personal-data />
+ *     </kf-section-nav-item>
+ *     <kf-section-nav-item label="Mis empresas" icon="layers"
+ *       [active]="openSection() === 'empresas'" (toggled)="openSection.set('empresas')">
+ *       <app-my-companies />
+ *     </kf-section-nav-item>
+ *   </kf-section-nav>
+ */
+declare class SectionNav {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionNav, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionNav, "kf-section-nav", never, {}, {}, never, ["*"], true, never>;
+}
+
+interface SectionNavSubsectionData {
+    key: string;
+    label: string;
+    icon: IconName;
+    disabled?: boolean;
+}
+/**
+ * Ítem de nivel superior de `kf-section-nav`: header clickeable (ícono
+ * identificador opcional + label + chevron) que expande/colapsa contenido
+ * proyectado. La exclusividad entre ítems la decide quien consume el
+ * componente — cada click solo emite `toggled` y el padre resuelve qué
+ * ítem queda `active`, igual que `kf-folder-tabs` con `value`.
+ *
+ * `subsections` agrega un segundo nivel de navegación DENTRO del ítem
+ * (solo visible cuando el ítem está `active`), cada uno con su propio
+ * estado activo (`activeSubsection`) independiente del padre. El contenido
+ * de cada sub-ítem se proyecta envolviéndolo en `<kf-section-nav-subsection
+ * key="...">` dentro del mismo slot por defecto — ver esa clase.
+ *
+ * El contenido proyectado usa `[hidden]`, no `@if`: un ítem puede envolver
+ * un formulario con estado que el usuario ya completó, y colapsar/expandir
+ * (o cruzar el breakpoint propio de 1024px, ver `SectionNav.scss`) no debe
+ * destruir ese subárbol.
+ *
+ *   <kf-section-nav-item
+ *     label="Mis datos personales"
+ *     icon="user"
+ *     [active]="openSection() === 'datos'"
+ *     (toggled)="openSection.set('datos')"
+ *   >
+ *     ...
+ *   </kf-section-nav-item>
+ */
+declare class SectionNavItem {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly toggled: _angular_core.OutputEmitterRef<void>;
+    /** Sub-ítems navegables de este ítem, visibles solo mientras `active()`. */
+    readonly subsections: _angular_core.InputSignal<SectionNavSubsectionData[]>;
+    /** `key` del sub-ítem actualmente activo — ver `SectionNavSubsectionData`. */
+    readonly activeSubsection: _angular_core.InputSignal<string | undefined>;
+    readonly subsectionSelected: _angular_core.OutputEmitterRef<string>;
+    protected readonly showSubsections: _angular_core.Signal<boolean>;
+    protected onSubsectionClick(key: string, disabled: boolean | undefined, event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionNavItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionNavItem, "kf-section-nav-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "subsections": { "alias": "subsections"; "required": false; "isSignal": true; }; "activeSubsection": { "alias": "activeSubsection"; "required": false; "isSignal": true; }; }, { "toggled": "toggled"; "subsectionSelected": "subsectionSelected"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Envoltorio de contenido para UN sub-ítem de `kf-section-nav-item`. Varios
+ * pueden proyectarse juntos, uno por `key` de `subsections()` del padre —
+ * cada uno queda montado siempre (mismo criterio `[hidden]` que el propio
+ * `kf-section-nav-item`), y solo se muestra el que coincide con
+ * `activeSubsection()` del padre.
+ *
+ *   <kf-section-nav-item [subsections]="subs" [activeSubsection]="active()" ...>
+ *     <kf-section-nav-subsection key="general"><app-general /></kf-section-nav-subsection>
+ *     <kf-section-nav-subsection key="seguridad"><app-seguridad /></kf-section-nav-subsection>
+ *   </kf-section-nav-item>
+ */
+declare class SectionNavSubsection {
+    readonly key: _angular_core.InputSignal<string>;
+    private readonly parent;
+    protected readonly isActive: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionNavSubsection, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionNavSubsection, "kf-section-nav-subsection", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 interface SegmentedOption {
     value: string;
     label: string;
@@ -1466,23 +3692,27 @@ interface SelectOption {
  * opciones al sistema operativo, y ningún CSS puede controlar cómo se ve
  * ese popup.
  *
- * Hasta la `0.1.5` existía además `kf-select-menu`, un segundo componente
- * prácticamente idéntico (mismo trigger, mismo panel, mismo CSS) que solo
- * se diferenciaba en aceptar `options` únicamente como `{ value, label }[]`
- * (sin el atajo `string[]` que `Select` ya tenía). Se fusionaron en este
- * componente en la `0.2.0` — mantener dos componentes con la misma
- * interacción y el mismo aspecto visual, cuya única diferencia real era la
- * forma de un input, no se sostenía como dos piezas separadas del catálogo.
- *
  * El panel flotante se conecta al trigger vía `@angular/cdk/overlay` — el
  * mismo mecanismo que `Dropdown` (ver `../dropdown/Dropdown.ts`).
  *
  *   <kf-select label="Sede" [options]="['Lima', 'Arequipa', 'Trujillo']" placeholder="Selecciona…" />
  *   <kf-select [options]="[{ value: 'pe', label: 'Perú' }]" (valueChange)="onCountry($event)" />
  *
- * Pendiente: el prop `icon` de otros componentes del design system requiere
- * un componente Icon / sprite SVG que esta librería todavía no tiene — este
- * componente no usa iconos, así que no aplica acá.
+ * `variant="compact"` cambia el ancho de `240px` fijo a intrínseco con un
+ * techo de `160px` (se ajusta al contenido de la opción seleccionada hasta
+ * ese máximo, truncando con ellipsis si no entra) y reduce padding/tamaño de
+ * fuente — pensado para selectores cortos embebidos en una barra (ej. "Filas
+ * por página" en el footer de `kf-data-table`), nunca para un campo de
+ * formulario largo, que sigue usando el `variant="field"` por defecto. El
+ * panel flotante siempre mide el ancho real del trigger en cada apertura
+ * (`SelectOverlay.attach`), así que se angosta solo sin cambios adicionales.
+ *
+ *   <kf-select variant="compact" [options]="['5', '10', '25']" [value]="pageSize()" (valueChange)="..." />
+ *
+ * `width="full"` ocupa el 100% del contenedor — para selects dentro de
+ * layouts flex/grid donde el ancho fijo de `md` no encaja.
+ *
+ *   <kf-select width="full" [options]="branches" [value]="branch()" (valueChange)="..." />
  */
 declare class Select {
     readonly label: _angular_core.InputSignal<string | undefined>;
@@ -1490,20 +3720,44 @@ declare class Select {
     readonly value: _angular_core.InputSignal<string | undefined>;
     readonly placeholder: _angular_core.InputSignal<string>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Borde en rojo y `aria-invalid` en el trigger. Ver `errorMessage` para el mensaje asociado — mismo contrato que `kf-input`. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mensaje de error con `role="alert"`, debajo del trigger. */
+    readonly errorMessage: _angular_core.InputSignal<string | undefined>;
+    readonly variant: _angular_core.InputSignal<"field" | "compact">;
+    /**
+     * Ancho del control. 'md' (240px) es el default histórico y preserva el
+     * comportamiento actual sin cambios para consumidores existentes.
+     * 'full' ocupa el 100% del contenedor — para selects dentro de layouts
+     * flex/grid donde el ancho fijo no encaja (ej. un footer de sidebar).
+     */
+    readonly width: _angular_core.InputSignal<"sm" | "md" | "lg" | "full">;
+    /**
+     * Tri-state: si el consumidor no lo especifica (`undefined`), el buscador
+     * se activa solo cuando `options().length` supera `searchThreshold()`. Si
+     * el consumidor define `true`/`false` explícitamente, ese valor manda por
+     * sobre el umbral automático.
+     */
+    readonly searchable: _angular_core.InputSignal<boolean | undefined>;
+    readonly searchThreshold: _angular_core.InputSignal<number>;
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
     private readonly instanceId;
     readonly triggerId: string;
     readonly listboxId: string;
+    readonly errorId: string;
     readonly isOpen: _angular_core.WritableSignal<boolean>;
+    readonly searchQuery: _angular_core.WritableSignal<string>;
+    readonly activeIndex: _angular_core.WritableSignal<number>;
     /** Resolves the union (`string[] | { value; label }[]`) into a single shape for the template. */
     readonly normalizedOptions: _angular_core.Signal<SelectOption[]>;
     readonly selectedOption: _angular_core.Signal<SelectOption | undefined>;
+    readonly showSearch: _angular_core.Signal<boolean>;
+    /** Opciones visibles tras aplicar el filtro de búsqueda (case/acento-insensitive). */
+    readonly filteredOptions: _angular_core.Signal<SelectOption[]>;
     private readonly triggerRef;
     private readonly panelTemplate;
-    private readonly overlayService;
-    private readonly viewContainerRef;
-    private readonly destroyRef;
-    private overlayRef;
+    private readonly searchInputRef;
+    private readonly overlay;
     constructor();
     /**
      * Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo ve
@@ -1514,11 +3768,132 @@ declare class Select {
     onDocumentEscape(): void;
     toggle(): void;
     select(option: SelectOption): void;
-    private attach;
-    private detach;
-    private getOrCreateOverlayRef;
+    onSearchInput(event: Event): void;
+    /**
+     * Mueve `activeIndex` sobre las opciones YA FILTRADAS visibles. Clamp
+     * simple (sin wraparound): llegar al final o al principio de la lista se
+     * queda ahí en vez de dar la vuelta — es el comportamiento más predecible
+     * cuando se combina con un buscador que puede reducir la lista a 1 opción.
+     */
+    moveActive(delta: number): void;
+    selectActive(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Select, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "kf-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "kf-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+interface SelectableCardOption {
+    value: string;
+    label: string;
+    icon?: IconName;
+}
+/**
+ * Radio group real (`role="radiogroup"` + `role="radio"` + `aria-checked`),
+ * con apariencia de cards apiladas verticalmente — para una decisión ÚNICA Y
+ * EXCLUYENTE dentro de un flujo (ej. método de pago, tipo de documento a
+ * subir), no para filtrar una lista.
+ *
+ * Distinto de `kf-filter-chips` a propósito: `FilterChips` es semántica y
+ * visualmente un FILTRO (chips horizontales, se resaltan con `--kf-color-ink`
+ * — pensado para "Todos/Activos/Archivados" sobre una lista, donde elegir
+ * una opción cambia qué se MUESTRA). Acá la elección es la respuesta misma
+ * a una pregunta del flujo ("¿con qué método pagás?"), no un filtro — por
+ * eso necesita affordance de radio (círculo con punto, más peso visual por
+ * opción) en vez de un pill de filtro reciclado.
+ *
+ * Réplica fiel del patrón ya resuelto en el Design System de referencia
+ * (`otd-pagos.jsx` / `otd.css`: `.otd-pay-method` + `.radio`) — apilado
+ * vertical con gap 10px, radio de 18px con punto interno vía `::after`,
+ * borde+fondo+ícono cambian de color al seleccionar. Se agrega manejo de
+ * teclado (flechas arriba/abajo, Home/End) y `:focus-visible` real, ninguno
+ * de los dos presentes en el mockup original — mínimos de accesibilidad que
+ * no dependen de fidelidad visual al mockup.
+ *
+ *   <kf-selectable-card-group
+ *     [options]="[{ value: 'card', label: 'Tarjeta', icon: 'credit-card' }]"
+ *     [value]="method()"
+ *     (valueChange)="method.set($event)"
+ *   />
+ */
+declare class SelectableCardGroup {
+    readonly options: _angular_core.InputSignal<SelectableCardOption[]>;
+    readonly value: _angular_core.InputSignal<string>;
+    /** Accesible: describe qué está eligiendo el usuario (ej. "Método de pago"). */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    select(value: string): void;
+    protected onKeydown(event: KeyboardEvent, currentValue: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectableCardGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectableCardGroup, "kf-selectable-card-group", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/** Contrato de datos de `kf-sidebar-shell.navItems`. `icon` es requerido:
+ * en el sidebar persistente el ícono es parte permanente del diseño. */
+interface SidebarNavItemData {
+    icon: IconName;
+    label: string;
+    href: string;
+    active?: boolean;
+}
+
+/**
+ * Shell de layout con navegación lateral persistente — el complemento
+ * vertical de `kf-portal-header` (navbar horizontal). Pensado para
+ * portales tipo "aplicación interna" (Portal OTD, Servicio Star).
+ *
+ * `navItems` se recibe como array de datos (no como contenido proyectado):
+ * el componente no sabe nada de routing, emite `navItemClick` con el ítem
+ * clickeado y deja que el consumidor decida cómo navegar.
+ *
+ * Slots: `[kf-sidebar-brand]` (logo del rail expandido, visible en desktop
+ * y en el panel mobile — es el MISMO rail), `[kf-sidebar-brand-collapsed]`
+ * (reemplazo opcional cuando el rail está colapsado en desktop),
+ * `[kf-sidebar-brand-mobile]` (logo de la topbar angosta de mobile, fondo
+ * claro) y `[kf-sidebar-footer]` (tarjeta de usuario / acciones al pie).
+ *
+ * Botón de colapso: vive como último ítem de la propia lista de
+ * navegación, no flotando en el borde del rail — mismo criterio de
+ * tap-target grande y predecible que el resto de los ítems.
+ *
+ * Responsive: bajo los 900px el sidebar NO se reemplaza por un panel
+ * distinto — es el MISMO rail el que pasa a `position: fixed` fuera de la
+ * pantalla (`translateX(-100%)`) y se desliza a la vista (`translateX(0)`)
+ * sobre un backdrop cuando `mobileOpen` es `true`. Una topbar angosta con
+ * botón de hamburguesa reemplaza al rail en el flujo del documento
+ * mientras el panel está cerrado.
+ *
+ * A propósito NO reutiliza `kf-drawer` (el panel lateral genérico de la
+ * librería): `kf-drawer` tiene su propio fondo claro fijo, incompatible
+ * con el texto claro de `kf-sidebar-nav-item` (pensado para el gradiente
+ * oscuro), y duplicaría el árbol de navegación en un segundo lugar del
+ * DOM. Acá hay un solo rail, un solo árbol de nav, que cambia de posición
+ * según el viewport.
+ */
+declare class SidebarShell {
+    /** Ítems del menú del rail. */
+    readonly navItems: _angular_core.InputSignal<SidebarNavItemData[]>;
+    /** Estado de colapso del rail en desktop, two-way. Sin efecto bajo los 900px (ver estilos). */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /** Visibilidad del rail deslizado como panel en mobile, two-way. */
+    readonly mobileOpen: _angular_core.ModelSignal<boolean>;
+    /** Se emite al clickear un ítem — el consumidor decide cómo navegar (ej. `router.navigateByUrl`). */
+    readonly navItemClick: _angular_core.OutputEmitterRef<SidebarNavItemData>;
+    /** `true` bajo los 900px. */
+    private readonly isMobileViewport;
+    /**
+     * Estado de colapso EFECTIVO — el que ya considera el viewport, no el
+     * `collapsed` crudo. Es lo que usa el propio rail para sus nav-items y
+     * el botón de colapso; se expone público para que el consumidor le
+     * pase el mismo valor a lo que proyecte en `[kf-sidebar-footer]` (ej.
+     * `kf-drawer-session`) — así un footer proyectado no queda colapsado
+     * dentro del panel deslizado de mobile mientras el resto del rail ya
+     * muestra todo expandido.
+     */
+    readonly itemsCollapsed: _angular_core.Signal<boolean>;
+    /** Cierra el panel mobile con Escape — mismo criterio que `Dropdown`/`Modal`/`Drawer`. */
+    protected onEscape(): void;
+    protected onNavItemClick(event: Event, item: SidebarNavItemData): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarShell, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarShell, "kf-sidebar-shell", never, { "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mobileOpen": { "alias": "mobileOpen"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "mobileOpen": "mobileOpenChange"; "navItemClick": "navItemClick"; }, never, ["[kf-sidebar-brand]", "[kf-sidebar-brand-collapsed]", "[kf-sidebar-footer]", "[kf-sidebar-brand-mobile]"], true, never>;
 }
 
 /** Forma del placeholder. */
@@ -1573,32 +3948,124 @@ declare class Spinner {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Spinner, "kf-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "onDark": { "alias": "onDark"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+type SsoProvider = 'microsoft';
+/** Copy y glyph por proveedor — agregar una entrada acá es todo lo que hace
+ * falta para soportar un proveedor nuevo (ej. `google`), sin tocar el
+ * template ni los estilos del componente. */
+interface SsoProviderConfig {
+    readonly label: string;
+}
 /**
- * Indicador numérico compacto (página 34): label + valor grande, con un
- * ícono a la derecha del label — más chico y sin badge de esquina que
- * `kf-metric-card`, pensado para grillas densas de KPIs simples ("Total
- * vehículos: 4", "En taller: 1"), no para dashboards con tendencia.
- *
- * Con `cta` en vez de `value`, se convierte en la variante de llamada a la
- * acción: un bloque de fondo suave con título, descripción y un link — sin
- * número, para promover el siguiente paso (ej. "¿Necesitas mantención?").
+ * Botón de inicio de sesión vía SSO corporativo — pensado como pieza suelta,
+ * no acoplada a `kf-auth-layout`: cualquier consumidor puede usarlo solo,
+ * dentro o fuera del slot `[sso]` de `AuthLayout`.
+ *
+ * `provider` resuelve copy y glyph — hoy solo `'microsoft'` (el método
+ * principal de acceso del ecosistema, cuenta corporativa de Grupo Kaufmann),
+ * con la puerta abierta a sumar otros a futuro sin romper la API existente.
+ *
+ * El glyph es el ícono GENÉRICO de 4 cuadrados de colores que Microsoft
+ * publica en sus propias guías de marca para botones de terceros ("Sign in
+ * with Microsoft") — nunca el logotipo/wordmark oficial completo. No vive en
+ * el sprite de `kf-icon` (`icon-sprite.ts`) a propósito: ese catálogo es
+ * monocromático (`currentColor`, ver `Icon.ts`), pensado para trazos de un
+ * solo color — este glyph necesita sus 4 colores fijos tal como los define
+ * la guía de marca, así que un SVG inline propio es la opción correcta, no
+ * un glyph nuevo forzado al sprite compartido.
+ *
+ * El label por defecto viene de `provider` — pasar contenido propio via
+ * `<ng-content>` lo reemplaza (ej. un texto más corto en un lugar angosto).
+ *
+ *   <kf-sso-button provider="microsoft" (ssoClick)="loginWithMicrosoft()" />
+ *   <kf-sso-button provider="microsoft" [loading]="loggingIn()">
+ *     Ingresar con cuenta corporativa
+ *   </kf-sso-button>
+ */
+declare class SsoButton {
+    readonly provider: _angular_core.InputSignal<"microsoft">;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Reemplaza el glyph + label por `kf-spinner` y fuerza `disabled` — mismo
+     * patrón que `kf-button[loading]`. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Igual que `kf-button`: por defecto `submit` dentro de un `<form>`, pero
+     * este botón normalmente vive fuera de cualquier form (dispara un
+     * redirect a Microsoft Entra ID), así que casi siempre conviene `button`. */
+    readonly type: _angular_core.InputSignal<"button" | "submit">;
+    protected readonly config: _angular_core.Signal<SsoProviderConfig>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SsoButton, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SsoButton, "kf-sso-button", never, { "provider": { "alias": "provider"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type StatCardTone = 'primary' | 'success' | 'error' | 'purple';
+/**
+ * Card de estadística horizontal: ícono circular grande a la izquierda,
+ * valor + label + nota apilados al centro, chevron opcional al final si es
+ * clickeable. Distinta de `kf-metric-card` (layout vertical, label arriba +
+ * ícono a la derecha) — este es el patrón real del dashboard de OTD ("Bonos
+ * otorgados", "Cortesías otorgadas"), no una variante de la misma card.
  *
- *   <kf-stat-tile label="Total vehículos" value="4" icon="car" />
- *   <kf-stat-tile cta title="¿Necesitas mantención?"
- *     description="Tenemos la mejor red de talleres."
- *     actionLabel="Agenda aquí" actionHref="/taller/agendar" />
+ *   <kf-stat-card icon="gift" tone="purple" value="4" label="Bonos otorgados" note="$15,000.00 en beneficios" (cardClick)="onNavigate('beneficios')" />
+ */
+declare class StatCard {
+    readonly icon: _angular_core.InputSignal<IconName>;
+    readonly tone: _angular_core.InputSignal<StatCardTone>;
+    readonly value: _angular_core.InputSignal<string | number>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly note: _angular_core.InputSignal<string | undefined>;
+    /** Si se escucha `cardClick`, la card se renderiza como botón clickeable con chevron. */
+    readonly clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly cardClick: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatCard, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCard, "kf-stat-card", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
+}
+
+/** Vocabulario semántico único de tono, compartido con `TextTone`. */
+type StatTileTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
+type StatTileVariant = 'inline' | 'card';
+/**
+ * Indicador numérico compacto: label + valor grande con ícono, para grillas
+ * densas de KPIs. Con `cta` en vez de `value` se convierte en un bloque de
+ * llamada a la acción (título, descripción y link, sin tono ni número).
+ * `variant="inline"` quita fondo/borde para una fila horizontal donde el
+ * consumidor pone sus propios separadores.
+ *
+ * `hasProjectedValue` reemplaza el valor de texto por contenido proyectado
+ * (`[valueContent]`) cuando el dato no es un número/string medido — el
+ * caso típico es un estado con su propio `kf-badge`, que necesita su
+ * tono/dot propios en vez del tono del tile:
+ *
+ *   <kf-stat-tile label="Estado" hasProjectedValue>
+ *     <kf-badge valueContent [tone]="stateTone()">{{ stateLabel() }}</kf-badge>
+ *   </kf-stat-tile>
  */
 declare class StatTile {
     readonly cta: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly label: _angular_core.InputSignal<string | undefined>;
     readonly value: _angular_core.InputSignal<string | number | undefined>;
     readonly icon: _angular_core.InputSignal<IconName | undefined>;
+    readonly variant: _angular_core.InputSignal<StatTileVariant>;
+    readonly tone: _angular_core.InputSignal<StatTileTone>;
+    /** Tercera línea bajo el valor. Vacía cae en `notePlaceholder`. */
+    readonly note: _angular_core.InputSignal<string | null | undefined>;
+    /** Qué dice la tercera línea cuando no hay nota. Cada consumidor debería
+     * pasar el motivo real de SU dato ausente, no un texto genérico. */
+    readonly notePlaceholder: _angular_core.InputSignal<string | undefined>;
+    /** Rinde el valor como ausencia, no como dato medido. */
+    readonly valueMissing: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** El valor es contenido proyectado (`<ng-content select="[valueContent]">`,
+     * ej. un `kf-badge` de estado) en vez del texto de `value()` — para un
+     * dato cuya representación natural no es un número/string medido. */
+    readonly hasProjectedValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly title: _angular_core.InputSignal<string | undefined>;
     readonly description: _angular_core.InputSignal<string | undefined>;
     readonly actionLabel: _angular_core.InputSignal<string | undefined>;
     readonly actionHref: _angular_core.InputSignal<string | undefined>;
+    /** Texto real de la nota. `null` significa "no reservar la línea": pasa
+     * solo cuando el consumidor no declaró ni nota ni placeholder. */
+    protected readonly noteText: _angular_core.Signal<string | null>;
+    protected readonly noteIsPlaceholder: _angular_core.Signal<boolean>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatTile, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "kf-stat-tile", never, { "cta": { "alias": "cta"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "kf-stat-tile", never, { "cta": { "alias": "cta"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "notePlaceholder": { "alias": "notePlaceholder"; "required": false; "isSignal": true; }; "valueMissing": { "alias": "valueMissing"; "required": false; "isSignal": true; }; "hasProjectedValue": { "alias": "hasProjectedValue"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["[valueContent]"], true, never>;
 }
 
 /**
@@ -1622,11 +4089,9 @@ interface TabOption {
     icon?: IconName;
 }
 /**
- * Barra de tabs subrayada: un único indicador se desliza horizontalmente hasta
- * la pestaña activa. Como las pestañas tienen ancho de contenido (labels de
- * largo distinto), la posición no se puede resolver con CSS puro: se mide el
- * `offsetLeft`/`offsetWidth` de la pestaña activa después de cada render y la
- * transición del `transform`/`width` queda a cargo de CSS.
+ * Barra de tabs subrayada: un indicador se desliza hasta la pestaña activa.
+ * La posición se mide (`offsetLeft`/`offsetWidth`) después de cada render,
+ * ya que las pestañas tienen ancho de contenido variable.
  *
  *   <kf-tabs [options]="tabs" [value]="active" (valueChange)="active = $event" />
  */
@@ -1636,55 +4101,176 @@ declare class Tabs {
     readonly valueChange: _angular_core.OutputEmitterRef<string>;
     private readonly track;
     private readonly destroyRef;
-    /** Geometría de la pestaña activa; `null` mientras no haya una medición válida. */
     private readonly activeRect;
     protected readonly indicatorTransform: _angular_core.Signal<string>;
     protected readonly indicatorWidth: _angular_core.Signal<number>;
     constructor();
     private measure;
     select(value: string): void;
-    /** Navegación estándar de ARIA tabs: flechas mueven el foco y activan la pestaña. */
-    onKeydown(event: KeyboardEvent, currentValue: string): void;
+    protected onKeydown(event: KeyboardEvent, currentValue: string): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tabs, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tabs, "kf-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
 }
 
-type TextAs = 'h1' | 'h2' | 'h3' | 'p' | 'span';
-type TextVariant = 'title-lg' | 'title-md' | 'title-sm' | 'body' | 'body-muted' | 'caption';
-type TextTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
+interface FolderTabOption {
+    value: string;
+    label: string;
+    icon?: IconName;
+}
 /**
- * Tipografía unificada — separa la etiqueta semántica (`as`, qué es el
- * texto para el DOM/accesibilidad) del estilo visual (`variant`, cómo se
- * ve). Antes de este componente, cada pantalla que consume la librería
- * definía su propio `h1`/`p` con `font-size` suelto para el mismo rol
- * (título de página, subtítulo, texto secundario) — auditoría sobre
- * `web-portal-latam-frontend` encontró 9 tamaños distintos entre login y
- * home sin ningún paso de escala en común. `variant` resuelve eso contra
- * la escala de `tokens/base.css` (`--kf-font-size-*`).
+ * Marca el contenido que `kf-folder-tabs` debe proyectar dentro de su panel.
  *
- * `tone` sigue la misma convención cerrada que `Alert`/`Badge`/`Chip`: sin
- * escape hatch de color libre. Si un caso necesita un color que `tone` no
- * cubre, es una discusión de design system, no una prop nueva acá.
+ *   <div kfFolderTabsPanel>...</div>
+ */
+declare class FolderTabsPanel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabsPanel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FolderTabsPanel, "[kfFolderTabsPanel]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Tabs con forma de "carpeta": borde superior redondeado, la pestaña activa
+ * se funde visualmente con el panel de contenido de abajo. El panel
+ * (`kfFolderTabsPanel`) es opcional — sin él, se renderiza solo la fila de
+ * pestañas.
  *
- *   <kf-text as="h1" variant="title-lg">Bienvenido de nuevo</kf-text>
- *   <kf-text as="p" variant="body-muted">Ingresá con tu cuenta corporativa.</kf-text>
- *   <kf-text as="span" variant="caption" tone="error">Campo obligatorio</kf-text>
+ *   <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event">
+ *     <div kfFolderTabsPanel>contenido de la pestaña activa</div>
+ *   </kf-folder-tabs>
+ *
+ *   <!-- o, sin contenido: -->
+ *   <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event" />
  */
-declare class Text {
-    /** Etiqueta semántica real que se renderiza — nunca es solo un `div`. */
-    readonly as: _angular_core.InputSignal<TextAs>;
-    readonly variant: _angular_core.InputSignal<TextVariant>;
-    readonly tone: _angular_core.InputSignal<TextTone>;
+declare class FolderTabs {
+    readonly options: _angular_core.InputSignal<FolderTabOption[]>;
+    readonly value: _angular_core.InputSignal<string>;
+    readonly valueChange: _angular_core.OutputEmitterRef<string>;
+    /** Id del panel único — todos los tabs lo referencian vía `aria-controls`. */
+    protected readonly panelId: string;
+    private readonly projectedPanel;
+    protected readonly hasPanel: _angular_core.Signal<boolean>;
+    select(value: string): void;
+    protected onKeydown(event: KeyboardEvent, currentValue: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabs, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FolderTabs, "kf-folder-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["projectedPanel"], ["[kfFolderTabsPanel]"], true, never>;
+}
+
+/**
+ * Textarea de formulario apilado: mismo patrón visual y de integración que
+ * `kf-input` (label arriba, `ControlValueAccessor`, funciona con
+ * `[(ngModel)]` y con Reactive Forms) para el caso de texto libre
+ * multilínea (notas, comentarios, descripciones).
+ *
+ *   <kf-textarea label="Notas" formControlName="notes" />
+ *   <kf-textarea label="Comentario" [(ngModel)]="comment" [minRows]="2" [maxRows]="10" />
+ *
+ * `minRows`/`maxRows` (3 y 6 por defecto) acotan el crecimiento: el campo
+ * crece con el contenido pero nunca pasa de `maxRows` — superado ese tope el
+ * contenido hace scroll interno (`overflow-y: auto`) en vez de seguir
+ * empujando el layout. Reemplaza el `resize: vertical` nativo (deshabilitado
+ * a propósito) porque un resize manual sin tope es exactamente el problema
+ * que motivó este componente: un `<textarea>` a mano podía crecer hasta
+ * tapar los botones del footer de un modal.
+ *
+ *   <kf-textarea label="Detalle" formControlName="detail" [maxRows]="12" />
+ *
+ * `invalid` + `errorMessage` y `readonly`/`disabled` siguen el mismo
+ * contrato que `kf-input` — ver su JSDoc para la diferencia entre ambos
+ * estados.
+ */
+declare class Textarea implements ControlValueAccessor, AfterViewInit {
+    private static nextId;
+    private readonly nativeTextarea;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Marca el label con un asterisco visual y aplica `required` al
+     * `<textarea>` nativo — el atributo HTML ya expone el estado obligatorio a
+     * lectores de pantalla (mapeo implícito a `aria-required`), sin necesidad
+     * de un `aria-required` explícito redundante. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hint: _angular_core.InputSignal<string | undefined>;
+    /** Borde y aria-invalid en rojo. Ver `errorMessage` para el mensaje asociado. */
+    readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Mensaje de error con `role="alert"` — reemplaza a `hint` mientras esté presente. */
+    readonly errorMessage: _angular_core.InputSignal<string | undefined>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Ver JSDoc de `kf-input` para la diferencia con `disabled`. */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Filas mínimas visibles en reposo — define la altura de arranque del campo. */
+    readonly minRows: _angular_core.InputSignal<number>;
+    /** Filas máximas antes de que el contenido pase a scroll interno en vez de seguir creciendo. */
+    readonly maxRows: _angular_core.InputSignal<number>;
+    protected readonly textareaId: string;
+    protected readonly hintId: string;
+    protected readonly errorId: string;
+    protected readonly value: _angular_core.WritableSignal<string>;
+    protected readonly focused: _angular_core.WritableSignal<boolean>;
+    /** Deshabilitado por Reactive Forms (formControl.disable()). */
+    private readonly disabledByForm;
+    /** Disabled real: por input() directo o por el FormControl asociado. */
+    protected readonly isDisabled: _angular_core.Signal<boolean>;
+    private onChange;
+    private onTouched;
+    ngAfterViewInit(): void;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onInput(rawValue: string): void;
+    protected onBlur(): void;
     /**
-     * Copia de `as` para uso dentro del template: `as` es palabra reservada
-     * en las expresiones de Angular (`@if (x; as y)`), así que `@switch (as())`
-     * no parsea — NG5002. La prop pública sigue llamándose `as` (es solo un
-     * atributo HTML ahí, `<kf-text as="h1">`, no una expresión).
+     * Recalcula la altura según el contenido real (`scrollHeight`), acotada
+     * entre `minRows` y `maxRows` medidos con el line-height ya calculado del
+     * propio elemento — así el tope se mantiene correcto sin importar qué
+     * font-size/line-height termine aplicando cada tema. Superado `maxRows`
+     * el resto del contenido hace scroll interno en vez de seguir creciendo.
      */
-    protected readonly tag: _angular_core.Signal<TextAs>;
-    protected hostClass(): string;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Text, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Text, "kf-text", never, { "as": { "alias": "as"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    private adjustHeight;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Textarea, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Textarea, "kf-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Da forma al valor de un campo MIENTRAS el usuario escribe — ej.
+ * inserta el guion de un RUT chileno automáticamente, sin que el
+ * usuario tenga que tipearlo — reposicionando el cursor para que
+ * seguir escribiendo se sienta natural (sin esto, cualquier inserción
+ * de caracteres empuja el cursor al final del campo en cada tecla).
+ *
+ * Se aplica junto a `formControlName`/`[formControl]`/`[(ngModel)]`
+ * sobre cualquier input que implemente `ControlValueAccessor` (incluye
+ * `kf-input`, pero no depende de él — funciona igual sobre un
+ * `<input>` nativo):
+ *
+ *   <kf-input formControlName="documentId" [kfFormatInput]="formatChileanRut" />
+ *
+ * La función de formateo recibe el valor crudo tecleado y devuelve el
+ * valor con forma — debe ser determinística e idempotente (aplicarla
+ * dos veces seguidas da el mismo resultado), como `formatChileanRut`
+ * en este mismo archivo (`./format.ts`).
+ */
+declare class FormatInputDirective {
+    private readonly ngControl;
+    /** La función de formateo a aplicar — sin valor, el directive no
+     * hace nada (permite pasar `undefined` condicionalmente sin tener
+     * que quitar el directive del template entero). */
+    readonly kfFormatInput: _angular_core.InputSignal<((value: string) => string) | undefined>;
+    protected onInput(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormatInputDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FormatInputDirective, "[kfFormatInput]", never, { "kfFormatInput": { "alias": "kfFormatInput"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Grilla de tiles que escalona columnas solo entre DIVISORES de `columns`
+ * (4 → 2 → 1, nunca 3), para que ninguna fila quede huérfana. Mide el
+ * contenedor (`container-type: inline-size`), no el viewport, porque el
+ * mismo bloque se rinde tanto en un drawer angosto como en una página
+ * completa bajo el mismo viewport.
+ */
+declare class TileGrid {
+    /** Columnas en el ancho máximo. Se acota a 1-6: por encima de 6 un tile
+     * deja de tener ancho para su propio label. */
+    readonly columns: _angular_core.InputSignalWithTransform<number, unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TileGrid, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TileGrid, "kf-tile-grid", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 /**
@@ -1695,12 +4281,21 @@ declare class Text {
  * semantic role to "work in progress".
  */
 type ToastTone = 'success' | 'error' | 'warning' | 'info' | 'loading';
+/** Acción opcional (call-to-action) renderizada dentro del toast, junto al botón de cerrar. */
+interface ToastAction {
+    /** Label corto, ej. "Ver ticket" — 1-3 palabras, el toast mide solo 360px de ancho. */
+    label: string;
+    /** Se invoca al hacer click; el toast se cierra solo después, sin que el llamador tenga que llamar `dismiss()`. */
+    onClick: () => void;
+}
 /** Options for {@link ToastService.show}. */
 interface ToastOptions {
     /** Color tone. Defaults to `'info'`. */
     tone?: ToastTone;
     /** Milliseconds before auto-dismiss. Ignored when `tone` is `'loading'`. Defaults to `2800`. */
     duration?: number;
+    /** Botón de acción opcional, ej. ir al registro sobre el que avisa el toast. */
+    action?: ToastAction;
 }
 /** Messages for each leg of {@link ToastService.promise}. */
 interface ToastPromiseMessages<T = unknown> {
@@ -1715,7 +4310,12 @@ interface ToastState {
     tone: ToastTone;
     duration: number;
     leaving: boolean;
+    action?: ToastAction;
 }
+/** What's currently holding the auto-dismiss timer paused. Tracked as a set so hover and
+ * focus can overlap (e.g. mouse leaves while focus is still on the action button) without
+ * resuming the timer early. */
+type ToastPauseSource = 'hover' | 'focus';
 /**
  * Shows one toast at a time — a new `show()` call replaces whatever is
  * currently up (this mirrors a global status line, not a notification stack).
@@ -1749,10 +4349,31 @@ declare class ToastService {
     private nextId;
     private dismissTimer?;
     private removeTimer?;
+    /** Wall-clock time the running `dismissTimer` is due to fire; used to compute how much
+     * time is left when {@link pause} interrupts it. */
+    private dismissDueAt?;
+    /** Time left on the auto-dismiss countdown while paused. `undefined` when no countdown
+     * is currently paused. */
+    private remainingMs?;
+    private readonly pauseSources;
     /** The single active toast, or `null`. */
     readonly current: _angular_core.Signal<ToastState | null>;
     /** Shows a toast, replacing whatever is currently shown. Returns its id. */
     show(message: string, options?: ToastOptions): number;
+    private scheduleDismiss;
+    /**
+     * Pauses the auto-dismiss countdown for `id` while `source` (pointer hover or focus) is
+     * active on it, so a user reaching for the action/dismiss button never loses the toast
+     * mid-interaction (WCAG 2.2.1). No-op when `id` isn't the active toast, it's leaving, or
+     * it has no running countdown (persistent or `loading` toasts, or already paused by
+     * another source).
+     */
+    pause(id: number, source: ToastPauseSource): void;
+    /**
+     * Resumes a countdown paused by {@link pause}, honoring the time already elapsed before
+     * the pause. No-op while another pause `source` is still active, or nothing is paused.
+     */
+    resume(id: number, source: ToastPauseSource): void;
     /**
      * Starts the exit animation, then removes the toast. No-op when `id` is no
      * longer the active toast, so a stale timer never kills a newer toast.
@@ -1780,10 +4401,65 @@ declare class ToastHost {
     protected readonly toastList: _angular_core.Signal<ToastState[]>;
     protected toastIcon(tone: ToastTone): IconName;
     protected dismiss(id: number): void;
+    /** Pauses the toast's auto-dismiss timer while the pointer or keyboard focus is on it. */
+    protected pause(t: ToastState, source: ToastPauseSource): void;
+    /** Resumes the toast's auto-dismiss timer once neither the pointer nor focus is on it. */
+    protected resume(t: ToastState, source: ToastPauseSource): void;
+    /** Ejecuta la acción del toast (ej. "Ver ticket") y lo cierra — el
+     * llamador no tiene que acordarse de descartarlo desde su propio handler. */
+    protected runAction(t: ToastState): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastHost, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToastHost, "kf-toast-host", never, {}, {}, never, never, true, never>;
 }
 
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Tooltip de hover/focus — reemplaza el atributo `title` nativo del
+ * navegador (lento en aparecer, sin estilo, inconsistente entre
+ * navegadores/SO) por un panel propio, mismo mecanismo de
+ * `@angular/cdk/overlay` que ya usa `Dropdown`.
+ *
+ * Pensado para el caso "ícono sin label visible necesita comunicar qué
+ * es" (ej. `kf-sidebar-nav-item` colapsado). No es two-way: a diferencia
+ * de `Dropdown`, esto se abre/cierra solo con hover/focus, nunca por click.
+ *
+ *   <a [kfTooltip]="label()" kfTooltipPosition="right">…</a>
+ */
+declare class TooltipDirective {
+    text: string;
+    kfTooltipPosition: TooltipPosition;
+    private readonly host;
+    private readonly overlayService;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly contentId;
+    private overlayRef;
+    /**
+     * `focusin` (no `focus`) a propósito: `focus` no burbujea, así que un
+     * disparador que ENVUELVE al elemento realmente enfocable (ej.
+     * `<kf-button>`, cuyo `<button>` nativo vive en el template del hijo, fuera
+     * de alcance de este host) nunca vería el evento — el tooltip quedaría
+     * mudo por teclado justo en el caso de uso que más lo necesita (un botón
+     * solo-ícono). `focusin` SÍ burbujea y sigue disparando igual para el caso
+     * ya cubierto (un `<a>`/`<button>` nativo que es él mismo el host, ver
+     * `Tooltip.spec.ts`) — sin regresión ahí.
+     */
+    protected show(): void;
+    protected hide(): void;
+    /**
+     * `focusout` (no `blur`, mismo motivo que `show()` usa `focusin`): además,
+     * a diferencia de `mouseleave`/Escape, acá SÍ hace falta revisar
+     * `relatedTarget` — si el host envuelve más de un elemento enfocable, un
+     * foco que se mueve de uno a otro DENTRO del mismo host no debería cerrar
+     * el tooltip (no "salió" del disparador). `Node` en vez de `EventTarget`:
+     * `Node.contains()` es lo que existe para chequear pertenencia al árbol.
+     */
+    protected onFocusOut(event: FocusEvent): void;
+    private positionsFor;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[kfTooltip]", never, { "text": { "alias": "kfTooltip"; "required": false; }; "kfTooltipPosition": { "alias": "kfTooltipPosition"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * Estado puntual mostrado junto a la identidad del vehículo (ej. "En ruta",
  * "Mantenimiento", "Fuera de servicio"). `tone` define el color semántico:
@@ -1842,5 +4518,5 @@ declare class ViewToggle {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewToggle, "kf-view-toggle", never, { "view": { "alias": "view"; "required": true; "isSignal": true; }; }, { "viewChange": "viewChange"; }, never, never, true, never>;
 }
 
-export { ActionTile, AdminBadge, Alert, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, Divider, Dropdown, DropdownItem, DropdownPanel, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, FolderTabsPanel, Icon, Input, Link, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, Skeleton, Spinner, StatTile, StatusPill, Tabs, Text, ToastHost, ToastService, VehicleHeader, ViewToggle };
-export type { AlertTone, BreadcrumbItem, CompanySelectorMeta, ContentStateKind, ContentStateLoad, DataTableCardRole, DataTableColumn, DataTableView, DividerOrientation, DropdownItemTone, FolderTabOption, IconName, IconSize, LinkVariant, MultiSelectOption, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, SegmentedOption, SkeletonVariant, SpinnerSize, TabOption, TextAs, TextTone, TextVariant, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, VehicleHeaderStatus, ViewToggleOption };
+export { ActionTile, AdminBadge, Alert, AlertRow, AuthLayout, AuthLayoutSso, Avatar, Badge, Breadcrumb, BucketProgress, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, CompanySelector, ContentSlot, ContentState, ContentViewer, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, DrawerLogout, DrawerSession, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, Link, MAP_CONFIG, MapControls, MapView, MetricCard, MobileFooter, MobileHeader, Modal, MultiSelect, NoteBlock, PageHeader, Pagination, Panel, PortalHeader, Progress, PulseDot, QuotePicker, ReserveBlock, STYLE_BY_THEME, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, Spinner, SsoButton, StatCard, StatTile, StatusPill, THEME_LABEL, THEME_ORDER, Tabs, Text, Textarea, TileGrid, ToastHost, ToastService, TooltipDirective, VehicleHeader, ViewToggle, dataTableViewSignal, formatChileanRut, formatClockTime, formatCurrency, formatNumber, isValidChileanRut, matchMediaSignal, parseCurrency, parseNumber, provideMapConfig, sanitizeDocumentId };
+export type { AlertRowTone, AlertTone, AuthLayoutBackground, BreadcrumbItem, BucketProgressItem, CompanySelectorMeta, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerSide, DropdownItemTone, DropdownPanelVariant, EventTimelineItem, EventTimelineTone, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, FormatCurrencyOptions, FormatNumberOptions, IconName, IconRotation, IconSize, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, MapConfig, MapControlKind, MapLatLng, MapMarker, MapMarkerTone, MapPopupAction, MapSize, MapTheme, MapVariant, MultiSelectOption, NoteBlockTone, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressTone, QuotePickerChip, QuotePickerSortOption, SectionNavSubsectionData, SegmentedOption, SelectableCardOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, SsoProvider, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, VehicleHeaderStatus, ViewToggleOption };