@kaufmann-lab/ui 0.1.8 → 0.1.11

package/fesm2022/kaufmann-lab-ui.mjs

@@ -1,9 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, inject, computed, effect, Component, booleanAttribute, model, output, numberAttribute, contentChildren, signal, DestroyRef, viewChild, forwardRef, ViewContainerRef, HostListener, TemplateRef, contentChild, ElementRef, ChangeDetectionStrategy, afterRenderEffect, afterNextRender, Injectable } from '@angular/core';
+import { input, inject, computed, effect, Component, booleanAttribute, model, output, numberAttribute, contentChildren, signal, DestroyRef, viewChild, forwardRef, ViewContainerRef, afterRenderEffect, HostListener, TemplateRef, contentChild, ElementRef, Directive, ChangeDetectionStrategy, Injector, Input as Input$1, afterNextRender, Injectable } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { Overlay } from '@angular/cdk/overlay';
-import { TemplatePortal } from '@angular/cdk/portal';
+import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
+import { FocusTrapFactory } from '@angular/cdk/a11y';
+import { Subscription } from 'rxjs';
 
 /** Símbolo de trazo "activity" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
 const activity = {
@@ -328,6 +330,15 @@ const history = {
   `,
 };
 
+/** Símbolo de trazo "home" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
+const home = {
+    viewBox: '0 0 24 24',
+    markup: `
+    <path d="M3 10.5 12 3l9 7.5" />
+    <path d="M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5" />
+  `,
+};
+
 /** Símbolo de trazo "inbox" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
 const inbox = {
     viewBox: '0 0 24 24',
@@ -360,6 +371,16 @@ const list = {
   `,
 };
 
+/** Símbolo de trazo "log-out" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
+const logOut = {
+    viewBox: '0 0 24 24',
+    markup: `
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+    <path d="M16 17l5-5-5-5" />
+    <path d="M21 12H9" />
+  `,
+};
+
 /** Símbolo de trazo "map" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
 const map = {
     viewBox: '0 0 24 24',
@@ -636,9 +657,11 @@ const ICON_DEFINITIONS = {
     gift: gift,
     grid: grid,
     history: history,
+    home: home,
     inbox: inbox,
     layers: layers,
     list: list,
+    'log-out': logOut,
     map: map,
     'map-pin': mapPin,
     menu: menu,
@@ -713,7 +736,7 @@ function buildIconSprite() {
  * nunca se inyecta. Comprobar el propio DOM es la fuente de verdad real. */
 const SPRITE_ROOT_ID = 'kf-icon-sprite-root';
 /**
- * Í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 — 61 glyphs (59 de la página 5 + `eye-off` y `log-out`), 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
@@ -1138,6 +1161,139 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-alert{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid transparent;border-radius:var(--kf-radius-sm);font-size:.9rem}.kf-alert--info{background:var(--kf-color-info-soft);border-color:var(--kf-color-info);color:var(--kf-color-info-strong)}.kf-alert--ok{background:var(--kf-color-success-soft);border-color:var(--kf-color-success);color:var(--kf-color-success-strong)}.kf-alert--warn{background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning);color:var(--kf-color-warning-strong)}.kf-alert--error{background:var(--kf-color-error-soft);border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-alert__icon,.kf-alert__close svg{flex:none;width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.kf-alert__body{flex:1;min-width:0}.kf-alert__title{margin:0;font-family:var(--kf-font-title);font-weight:700}.kf-alert__message{color:inherit}.kf-alert__close{flex:none;display:inline-flex;padding:2px;border:none;background:transparent;color:inherit;border-radius:var(--kf-radius-xs);cursor:pointer;opacity:.7}.kf-alert__close:hover{opacity:1}.kf-alert__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"] }]
         }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }] } });
 
+/**
+ * Layout a pantalla completa para cualquier pantalla de autenticación
+ * (login, recuperar contraseña, confirmación de envío) — split marca a la
+ * izquierda / contenido libre a la derecha en desktop, formulario a
+ * pantalla completa en mobile (el panel de marca completo se oculta, no se
+ * apila arriba: en una pantalla angosta el usuario vino a loguearse, no a
+ * leer la tagline). Un logo compacto (o wordmark de respaldo) sí se
+ * mantiene visible arriba del formulario en mobile — el usuario nunca
+ * pierde de vista qué portal está usando, mismo criterio que ya sigue el
+ * resto del ecosistema (ver la topbar mobile de `css/otd.css`, que muestra
+ * el logo aunque el sidebar completo se oculte).
+ *
+ * Este componente resuelve el "cascarón" — nunca el formulario en sí. Cada
+ * portal arma su propio `<form>` con los componentes de la librería
+ * (`kf-input`, `kf-checkbox`, `kf-button`, `kf-alert`) y lo proyecta en el
+ * slot por defecto. Es la misma separación de responsabilidad que ya usa
+ * `kf-card`: un componente da la estructura visual, el consumidor decide
+ * qué va adentro.
+ *
+ * Antes de este componente, cada portal (LATAM primero, ahora OTD) hubiera
+ * tenido que reimplementar este mismo split desde cero — la librería
+ * había pospuesto esta abstracción a propósito hasta tener un segundo
+ * consumidor real que confirmara qué parte es realmente compartida (el
+ * cascarón) y qué parte es de cada portal (el formulario). OTD es ese
+ * segundo consumidor.
+ *
+ * Ningún input tiene valor por defecto propio de ningún portal — `brand`
+ * es obligatorio (`input.required`) y el resto de props de marca son
+ * opcionales sin fallback hardcodeado, precisamente para que cada
+ * consumidor (LATAM, OTD, Star, o el ERP de Asistencia en Ruta con sus
+ * propios temas) traiga su propio logo/tagline sin que la librería asuma
+ * cuál.
+ *
+ *   <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>
+ */
+class AuthLayout {
+    /** Nombre de marca/portal, usado como wordmark de respaldo si no hay ningún logo, y como `alt` de ambos logos. */
+    brand = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    /** Logo en blanco para el panel oscuro de desktop — si no se pasa, se muestra `brand()` como wordmark tipográfico. */
+    brandLogoSrc = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "brandLogoSrc" }] : /* istanbul ignore next */ []));
+    /** Frase corta bajo el logo — opcional, cada portal decide su propio texto de marca. */
+    brandTagline = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "brandTagline" }] : /* istanbul ignore next */ []));
+    /**
+     * Logo compacto para mobile, sobre el fondo claro del panel de contenido
+     * — normalmente la variante oscura/negra del mismo logo, ya que
+     * `brandLogoSrc` suele ser la variante blanca pensada para el gradiente
+     * oscuro. Si no se pasa, reutiliza `brandLogoSrc`; si tampoco hay logo en
+     * absoluto, cae al wordmark tipográfico igual que en desktop.
+     */
+    brandLogoMobileSrc = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "brandLogoMobileSrc" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AuthLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: AuthLayout, isStandalone: true, selector: "kf-auth-layout", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, brandLogoSrc: { classPropertyName: "brandLogoSrc", publicName: "brandLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, brandTagline: { classPropertyName: "brandTagline", publicName: "brandTagline", isSignal: true, isRequired: false, transformFunction: null }, brandLogoMobileSrc: { classPropertyName: "brandLogoMobileSrc", publicName: "brandLogoMobileSrc", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <aside class="kf-auth-layout__brand">
+      @if (brandLogoSrc()) {
+        <img class="kf-auth-layout__logo" [src]="brandLogoSrc()" [alt]="brand()" />
+      } @else {
+        <span class="kf-auth-layout__wordmark">{{ brand() }}</span>
+      }
+      @if (brandTagline()) {
+        <p class="kf-auth-layout__tagline">{{ brandTagline() }}</p>
+      }
+    </aside>
+
+    <main class="kf-auth-layout__content">
+      <div class="kf-auth-layout__panel">
+        <div class="kf-auth-layout__mobile-brand">
+          @if (brandLogoMobileSrc() || brandLogoSrc()) {
+            <img
+              class="kf-auth-layout__logo kf-auth-layout__logo--mobile"
+              [src]="brandLogoMobileSrc() || brandLogoSrc()"
+              [alt]="brand()"
+            />
+          } @else {
+            <span class="kf-auth-layout__wordmark kf-auth-layout__wordmark--mobile">{{
+              brand()
+            }}</span>
+          }
+        </div>
+        <ng-content />
+      </div>
+    </main>
+  `, isInline: true, styles: [":host{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:100dvh;background:var(--kf-color-surface)}.kf-auth-layout__brand{display:flex;flex-direction:column;justify-content:center;gap:var(--kf-space-md);padding:var(--kf-space-xl);background:linear-gradient(190deg,var(--kf-color-primary-active) 0%,var(--kf-color-tertiary-deep) 100%);color:var(--kf-color-white)}.kf-auth-layout__logo{height:1.75rem;width:fit-content}.kf-auth-layout__wordmark{font-family:var(--kf-font-title);font-weight:var(--kf-font-weight-title);font-size:var(--kf-font-size-title-lg);letter-spacing:-.01em}.kf-auth-layout__tagline{max-width:34ch;margin:0;font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);color:#ffffffb8}.kf-auth-layout__content{display:flex;align-items:center;justify-content:center;padding:var(--kf-space-xl)}.kf-auth-layout__panel{width:100%;max-width:360px;display:flex;flex-direction:column;gap:var(--kf-space-lg)}.kf-auth-layout__mobile-brand{display:none}.kf-auth-layout__logo--mobile{height:1.5rem}.kf-auth-layout__wordmark--mobile{color:var(--kf-color-ink)}@media(max-width:900px){:host{grid-template-columns:1fr}.kf-auth-layout__brand{display:none}.kf-auth-layout__content{padding:var(--kf-space-lg)}.kf-auth-layout__mobile-brand{display:block;margin-bottom:var(--kf-space-md)}}@media(max-width:480px){.kf-auth-layout__panel{max-width:none}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: AuthLayout, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-auth-layout', template: `
+    <aside class="kf-auth-layout__brand">
+      @if (brandLogoSrc()) {
+        <img class="kf-auth-layout__logo" [src]="brandLogoSrc()" [alt]="brand()" />
+      } @else {
+        <span class="kf-auth-layout__wordmark">{{ brand() }}</span>
+      }
+      @if (brandTagline()) {
+        <p class="kf-auth-layout__tagline">{{ brandTagline() }}</p>
+      }
+    </aside>
+
+    <main class="kf-auth-layout__content">
+      <div class="kf-auth-layout__panel">
+        <div class="kf-auth-layout__mobile-brand">
+          @if (brandLogoMobileSrc() || brandLogoSrc()) {
+            <img
+              class="kf-auth-layout__logo kf-auth-layout__logo--mobile"
+              [src]="brandLogoMobileSrc() || brandLogoSrc()"
+              [alt]="brand()"
+            />
+          } @else {
+            <span class="kf-auth-layout__wordmark kf-auth-layout__wordmark--mobile">{{
+              brand()
+            }}</span>
+          }
+        </div>
+        <ng-content />
+      </div>
+    </main>
+  `, styles: [":host{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);min-height:100dvh;background:var(--kf-color-surface)}.kf-auth-layout__brand{display:flex;flex-direction:column;justify-content:center;gap:var(--kf-space-md);padding:var(--kf-space-xl);background:linear-gradient(190deg,var(--kf-color-primary-active) 0%,var(--kf-color-tertiary-deep) 100%);color:var(--kf-color-white)}.kf-auth-layout__logo{height:1.75rem;width:fit-content}.kf-auth-layout__wordmark{font-family:var(--kf-font-title);font-weight:var(--kf-font-weight-title);font-size:var(--kf-font-size-title-lg);letter-spacing:-.01em}.kf-auth-layout__tagline{max-width:34ch;margin:0;font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);color:#ffffffb8}.kf-auth-layout__content{display:flex;align-items:center;justify-content:center;padding:var(--kf-space-xl)}.kf-auth-layout__panel{width:100%;max-width:360px;display:flex;flex-direction:column;gap:var(--kf-space-lg)}.kf-auth-layout__mobile-brand{display:none}.kf-auth-layout__logo--mobile{height:1.5rem}.kf-auth-layout__wordmark--mobile{color:var(--kf-color-ink)}@media(max-width:900px){:host{grid-template-columns:1fr}.kf-auth-layout__brand{display:none}.kf-auth-layout__content{padding:var(--kf-space-lg)}.kf-auth-layout__mobile-brand{display:block;margin-bottom:var(--kf-space-md)}}@media(max-width:480px){.kf-auth-layout__panel{max-width:none}}\n"] }]
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], brandLogoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLogoSrc", required: false }] }], brandTagline: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandTagline", required: false }] }], brandLogoMobileSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLogoMobileSrc", required: false }] }] } });
+
 /**
  * Avatar de usuario: muestra una foto (`src`) o, si no hay foto, las
  * iniciales (`initials`) sobre un fondo con gradiente de marca. `round`
@@ -1423,11 +1579,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  */
 class CarouselSlide {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselSlide, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: CarouselSlide, isStandalone: true, selector: "kf-carousel-slide", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;flex:0 0 100%;width:100%;height:100%}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: CarouselSlide, isStandalone: true, selector: "kf-carousel-slide", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;flex:0 0 100%;width:100%;height:100%;min-height:0}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CarouselSlide, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-carousel-slide', template: `<ng-content />`, styles: [":host{display:block;flex:0 0 100%;width:100%;height:100%}\n"] }]
+            args: [{ selector: 'kf-carousel-slide', template: `<ng-content />`, styles: [":host{display:block;flex:0 0 100%;width:100%;height:100%;min-height:0}\n"] }]
         }] });
 /**
  * Carrusel de slides con flechas, dots y autoplay opcional.
@@ -1858,6 +2014,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, styles: [":host{display:contents}.kf-field-label{font-family:var(--kf-font-title);font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-field-label__required{color:var(--kf-color-error);margin-inline-start:2px}\n"] }]
         }], propDecorators: { for: [{ type: i0.Input, args: [{ isSignal: true, alias: "for", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
 
+/**
+ * Normaliza texto para comparación de búsqueda insensible a mayúsculas y
+ * diacríticos — así "cor" encuentre "Córdoba" sin necesidad de tildes.
+ *
+ * Compartida entre `Select` y `MultiSelect` (los dos componentes con
+ * buscador interno auto-activado por `searchThreshold`): antes vivía
+ * duplicada letra por letra en ambos archivos.
+ */
+function normalizeForSearch(text) {
+    return text.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase();
+}
+
 let nextId$1 = 0;
 /**
  * Dropdown de selección simple con panel propio — NUNCA usa el `<select>`
@@ -1893,21 +2061,48 @@ class Select {
     placeholder = input('Seleccionar', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * 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.
+     */
+    searchable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchThreshold = input(7, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchThreshold" }] : /* istanbul ignore next */ []));
     valueChange = output();
     instanceId = `kf-select-${nextId$1++}`;
     triggerId = `${this.instanceId}-trigger`;
     listboxId = `${this.instanceId}-listbox`;
     isOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     /** Resolves the union (`string[] | { value; label }[]`) into a single shape for the template. */
     normalizedOptions = computed(() => this.options().map((option) => typeof option === 'string' ? { value: option, label: option } : option), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "normalizedOptions" }] : /* istanbul ignore next */ []));
     selectedOption = computed(() => this.normalizedOptions().find((option) => option.value === this.value()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []));
+    showSearch = computed(() => this.searchable() ?? this.normalizedOptions().length > this.searchThreshold(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    /** Opciones visibles tras aplicar el filtro de búsqueda (case/acento-insensitive). */
+    filteredOptions = computed(() => {
+        const query = normalizeForSearch(this.searchQuery().trim());
+        if (!query) {
+            return this.normalizedOptions();
+        }
+        return this.normalizedOptions().filter((option) => normalizeForSearch(option.label).includes(query));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     triggerRef = viewChild.required('trigger', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
     panelTemplate = viewChild.required('panelTemplate', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelTemplate" }] : /* istanbul ignore next */ []));
+    searchInputRef = viewChild('searchInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
     overlayService = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     destroyRef = inject(DestroyRef);
@@ -1919,6 +2114,17 @@ class Select {
             }
             else {
                 this.detach();
+                this.searchQuery.set('');
+                this.activeIndex.set(0);
+            }
+        });
+        // Autofocus del buscador al abrir. afterNextRender() NO puede invocarse
+        // dentro de un effect() (NG0203: pierde el contexto de inyección) — hay
+        // que usar afterRenderEffect(), que sí es reactivo a signals y corre
+        // después de que Angular actualizó el DOM del panel recién adjuntado.
+        afterRenderEffect(() => {
+            if (this.isOpen() && this.showSearch()) {
+                this.searchInputRef()?.nativeElement.focus();
             }
         });
         this.destroyRef.onDestroy(() => this.overlayRef?.dispose());
@@ -1944,6 +2150,30 @@ class Select {
             this.valueChange.emit(option.value);
         }
     }
+    onSearchInput(event) {
+        this.searchQuery.set(event.target.value);
+        // Cada cambio de filtro vuelve a arrancar la navegación desde arriba.
+        this.activeIndex.set(0);
+    }
+    /**
+     * 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) {
+        const count = this.filteredOptions().length;
+        if (count === 0) {
+            return;
+        }
+        this.activeIndex.update((current) => Math.min(Math.max(current + delta, 0), count - 1));
+    }
+    selectActive() {
+        const option = this.filteredOptions()[this.activeIndex()];
+        if (option) {
+            this.select(option);
+        }
+    }
     attach() {
         if (this.overlayRef?.hasAttached()) {
             return;
@@ -1956,7 +2186,21 @@ class Select {
         overlayRef.updateSize({ width: this.triggerRef().nativeElement.getBoundingClientRect().width });
         const portal = new TemplatePortal(this.panelTemplate(), this.viewContainerRef);
         overlayRef.attach(portal);
-        overlayRef.outsidePointerEvents().subscribe(() => this.isOpen.set(false));
+        // outsidePointerEvents() dispara en la fase de CAPTURA de `click` sobre
+        // `body` (ver OverlayOutsideClickDispatcher en @angular/cdk), es decir
+        // ANTES de que el evento llegue al trigger y corra (click)="toggle()".
+        // Sin este filtro, un click en el trigger para CERRAR el panel ya abierto
+        // hacía: 1) este subscribe lo cierra primero (el trigger no es parte del
+        // overlay, cuenta como "afuera"), 2) toggle() corre después y lo vuelve a
+        // abrir porque ve isOpen ya en false — un solo click quedaba en no-op y
+        // solo cerraba de verdad un click fuera del trigger.
+        overlayRef.outsidePointerEvents().subscribe((event) => {
+            const target = event.target;
+            if (target && this.triggerRef().nativeElement.contains(target)) {
+                return;
+            }
+            this.isOpen.set(false);
+        });
         overlayRef.keydownEvents().subscribe((event) => {
             if (event.key === 'Escape') {
                 this.isOpen.set(false);
@@ -1990,7 +2234,7 @@ class Select {
         return this.overlayRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Select, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Select, isStandalone: true, selector: "kf-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Select, isStandalone: true, selector: "kf-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <kf-field-label [for]="triggerId">{{ label() }}</kf-field-label>
     }
@@ -2016,31 +2260,52 @@ class Select {
       ></span>
     </button>
     <ng-template #panelTemplate>
-      <ul
-        class="kf-select__panel"
-        [id]="listboxId"
-        role="listbox"
-        [attr.aria-labelledby]="triggerId"
-      >
-        @for (option of normalizedOptions(); track option.value) {
-          <li
-            class="kf-select__option"
-            [class.kf-select__option--selected]="option.value === value()"
-            role="option"
-            tabindex="0"
-            [attr.aria-selected]="option.value === value()"
-            (click)="select(option)"
-            (keydown.enter)="select(option)"
-            (keydown.space)="$event.preventDefault(); select(option)"
-          >
-            {{ option.label }}
-          </li>
-        } @empty {
-          <li class="kf-select__empty">Sin opciones disponibles</li>
+      <div class="kf-select__panel">
+        @if (showSearch()) {
+          <input
+            #searchInput
+            type="text"
+            class="kf-select__search"
+            placeholder="Buscar…"
+            [value]="searchQuery()"
+            (input)="onSearchInput($event)"
+            (keydown.arrowdown)="$event.preventDefault(); moveActive(1)"
+            (keydown.arrowup)="$event.preventDefault(); moveActive(-1)"
+            (keydown.enter)="$event.preventDefault(); selectActive()"
+          />
         }
-      </ul>
+        <ul
+          class="kf-select__list"
+          [id]="listboxId"
+          role="listbox"
+          [attr.aria-labelledby]="triggerId"
+        >
+          @for (option of filteredOptions(); track option.value; let i = $index) {
+            <li
+              class="kf-select__option"
+              [class.kf-select__option--selected]="option.value === value()"
+              [class.kf-select__option--active]="i === activeIndex()"
+              role="option"
+              tabindex="0"
+              [attr.aria-selected]="option.value === value()"
+              (click)="select(option)"
+              (mouseenter)="activeIndex.set(i)"
+              (keydown.enter)="select(option)"
+              (keydown.space)="$event.preventDefault(); select(option)"
+              (keydown.arrowdown)="$event.preventDefault(); moveActive(1)"
+              (keydown.arrowup)="$event.preventDefault(); moveActive(-1)"
+            >
+              {{ option.label }}
+            </li>
+          } @empty {
+            <li class="kf-select__empty">
+              {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}
+            </li>
+          }
+        </ul>
+      </div>
     </ng-template>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:240px;font-family:var(--kf-font-body)}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-border-strong)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-select__caret--open{transform:rotate(-135deg);margin-top:4px}.kf-select__panel{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__empty{padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:240px;font-family:var(--kf-font-body)}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-border-strong)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-select__caret--open{transform:rotate(-135deg);margin-top:4px}.kf-select__panel{box-sizing:border-box;width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Select, decorators: [{
             type: Component,
@@ -2070,32 +2335,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
       ></span>
     </button>
     <ng-template #panelTemplate>
-      <ul
-        class="kf-select__panel"
-        [id]="listboxId"
-        role="listbox"
-        [attr.aria-labelledby]="triggerId"
-      >
-        @for (option of normalizedOptions(); track option.value) {
-          <li
-            class="kf-select__option"
-            [class.kf-select__option--selected]="option.value === value()"
-            role="option"
-            tabindex="0"
-            [attr.aria-selected]="option.value === value()"
-            (click)="select(option)"
-            (keydown.enter)="select(option)"
-            (keydown.space)="$event.preventDefault(); select(option)"
-          >
-            {{ option.label }}
-          </li>
-        } @empty {
-          <li class="kf-select__empty">Sin opciones disponibles</li>
+      <div class="kf-select__panel">
+        @if (showSearch()) {
+          <input
+            #searchInput
+            type="text"
+            class="kf-select__search"
+            placeholder="Buscar…"
+            [value]="searchQuery()"
+            (input)="onSearchInput($event)"
+            (keydown.arrowdown)="$event.preventDefault(); moveActive(1)"
+            (keydown.arrowup)="$event.preventDefault(); moveActive(-1)"
+            (keydown.enter)="$event.preventDefault(); selectActive()"
+          />
         }
-      </ul>
+        <ul
+          class="kf-select__list"
+          [id]="listboxId"
+          role="listbox"
+          [attr.aria-labelledby]="triggerId"
+        >
+          @for (option of filteredOptions(); track option.value; let i = $index) {
+            <li
+              class="kf-select__option"
+              [class.kf-select__option--selected]="option.value === value()"
+              [class.kf-select__option--active]="i === activeIndex()"
+              role="option"
+              tabindex="0"
+              [attr.aria-selected]="option.value === value()"
+              (click)="select(option)"
+              (mouseenter)="activeIndex.set(i)"
+              (keydown.enter)="select(option)"
+              (keydown.space)="$event.preventDefault(); select(option)"
+              (keydown.arrowdown)="$event.preventDefault(); moveActive(1)"
+              (keydown.arrowup)="$event.preventDefault(); moveActive(-1)"
+            >
+              {{ option.label }}
+            </li>
+          } @empty {
+            <li class="kf-select__empty">
+              {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}
+            </li>
+          }
+        </ul>
+      </div>
     </ng-template>
-  `, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:240px;font-family:var(--kf-font-body)}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-border-strong)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-select__caret--open{transform:rotate(-135deg);margin-top:4px}.kf-select__panel{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__empty{padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], onDocumentEscape: [{
+  `, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:240px;font-family:var(--kf-font-body)}.kf-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-select__trigger:hover:not(:disabled){border-color:var(--kf-color-border-strong)}.kf-select__trigger:focus-visible{outline:none;border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-select__trigger--disabled{opacity:.5;cursor:not-allowed}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-select__caret--open{transform:rotate(-135deg);margin-top:4px}.kf-select__panel{box-sizing:border-box;width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-select__list::-webkit-scrollbar{width:6px}.kf-select__list::-webkit-scrollbar-track{background:transparent}.kf-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-select__option{padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option:hover{background:var(--kf-color-primary-soft)}.kf-select__option--selected{background:var(--kf-color-primary-soft);color:var(--kf-color-primary);font-weight:600}.kf-select__option--active{background:var(--kf-color-primary-soft)}.kf-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], onDocumentEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
             }] } });
@@ -2150,7 +2436,7 @@ class CompanySelector {
         }
       </div>
     }
-  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:var(--kf-space-lg);flex-wrap:wrap;padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font-family:var(--kf-font-body)}.kf-company-selector__select{flex:1 1 260px;min-width:0}.kf-company-selector__meta{display:flex;gap:var(--kf-space-lg);flex-wrap:wrap}.kf-company-selector__meta-item{display:flex;flex-direction:column;gap:2px}.kf-company-selector__meta-label{font-family:var(--kf-font-title);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-company-selector__meta-value{font-family:var(--kf-font-mono);font-size:.875rem;color:var(--kf-color-ink)}\n"], dependencies: [{ kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "options", "value", "placeholder", "disabled"], outputs: ["valueChange"] }] });
+  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:var(--kf-space-lg);flex-wrap:wrap;padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font-family:var(--kf-font-body)}.kf-company-selector__select{flex:1 1 260px;min-width:0}.kf-company-selector__meta{display:flex;gap:var(--kf-space-lg);flex-wrap:wrap}.kf-company-selector__meta-item{display:flex;flex-direction:column;gap:2px}.kf-company-selector__meta-label{font-family:var(--kf-font-title);font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-company-selector__meta-value{font-family:var(--kf-font-mono);font-size:.875rem;color:var(--kf-color-ink)}\n"], dependencies: [{ kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "options", "value", "placeholder", "disabled", "searchable", "searchThreshold"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: CompanySelector, decorators: [{
             type: Component,
@@ -2894,110 +3180,449 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-data-table{background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-sm);overflow:hidden}.kf-data-table--flush{border:none;box-shadow:none;border-radius:0}.kf-data-table__toolbar{display:flex;justify-content:flex-end;padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-data-table__view-toggle{display:inline-flex;gap:2px;padding:2px;background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm)}.kf-data-table__view-option{font:inherit;font-size:.875em;padding:var(--kf-space-xs) var(--kf-space-sm);border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-xs);cursor:pointer;transition:background .14s,color .14s}.kf-data-table__view-option:hover:not(.kf-data-table__view-option--active){color:var(--kf-color-text)}.kf-data-table__view-option--active{background:var(--kf-color-white);color:var(--kf-color-ink);box-shadow:var(--kf-shadow-xs)}.kf-data-table__view-option:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-data-table__scroll{overflow-x:auto}.kf-data-table__table{width:100%;border-collapse:collapse;text-align:left}.kf-data-table__table th,.kf-data-table__table td{padding:var(--kf-space-sm) var(--kf-space-md);border-bottom:1px solid var(--kf-color-border);white-space:nowrap}.kf-data-table__table th{font-family:var(--kf-font-title);font-size:.8125em;text-transform:uppercase;letter-spacing:.02em;color:var(--kf-color-text-muted);background:var(--kf-color-surface)}.kf-data-table__table td{color:var(--kf-color-text)}.kf-data-table__table tbody tr:last-child td{border-bottom:none}.kf-data-table__row{cursor:pointer;transition:background .14s}.kf-data-table__row:hover{background:var(--kf-color-primary-soft)}.kf-data-table__cell--right{text-align:right}.kf-data-table__empty{padding:var(--kf-space-md)}.kf-data-table__footer{padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__footer:empty{display:none}.kf-data-table__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--kf-space-md);padding:var(--kf-space-md)}.kf-data-table__card{display:flex;flex-direction:column;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);overflow:hidden;transition:border-color .14s,box-shadow .14s}.kf-data-table__card--interactive{cursor:pointer}.kf-data-table__card:hover{border-color:var(--kf-color-border-strong);box-shadow:var(--kf-shadow-xs)}.kf-data-table__card--interactive:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-data-table__card-header{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-md)}.kf-data-table__card-media{flex:none}.kf-data-table__card-media img,.kf-data-table__thumb{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs);object-fit:cover;background:var(--kf-color-surface)}.kf-data-table__card-heading{display:flex;flex-direction:column;gap:var(--kf-space-xs);min-width:0}.kf-data-table__card-title{font-family:var(--kf-font-title);font-weight:600;color:var(--kf-color-ink);overflow-wrap:anywhere}.kf-data-table__card-statuses,.kf-data-table__card-actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-xs)}.kf-data-table__card-fields{display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-md)}.kf-data-table__card-header+.kf-data-table__card-fields{padding-top:0}.kf-data-table__card-field{display:flex;justify-content:space-between;gap:var(--kf-space-sm)}.kf-data-table__card-actions{justify-content:flex-end;margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border);background:var(--kf-color-surface)}.kf-data-table__thumb{width:32px;height:32px}.kf-data-table__card-label{font-family:var(--kf-font-title);font-size:.8125em;text-transform:uppercase;letter-spacing:.02em;color:var(--kf-color-text-muted)}.kf-data-table__card-value{color:var(--kf-color-text);text-align:right}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], cardable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardable", required: false }] }], defaultView: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultView", required: false }] }], render: [{ type: i0.Input, args: [{ isSignal: true, alias: "render", required: false }] }], cellTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplates", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
 
+/**
+ * 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.
+ *
+ * Extraído de `PortalHeader`, que hasta acá reimplementaba su propio drawer
+ * embebido (navegación hardcodeada + slot único al final). Cualquier
+ * consumidor que necesite un panel lateral — no solo `PortalHeader` — puede
+ * usar este componente directamente.
+ *
+ * `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>
+ */
+class Drawer {
+    /** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** 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. */
+    side = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "side" }] : /* istanbul ignore next */ []));
+    /** `aria-label` del `<nav>` interno — describe el propósito del panel para
+     * lectores de pantalla (ej. "Menú de navegación"). */
+    ariaLabel = input('Menú', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    panelRef = viewChild.required('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
+    focusTrapFactory = inject(FocusTrapFactory);
+    document = inject(DOCUMENT);
+    focusTrap = null;
+    lastFocusedElement = null;
+    constructor() {
+        afterRenderEffect(() => {
+            if (this.open()) {
+                this.lastFocusedElement = this.document.activeElement;
+                const trap = this.getOrCreateFocusTrap();
+                void trap.focusInitialElement();
+            }
+            else {
+                this.focusTrap?.destroy();
+                this.focusTrap = null;
+                this.lastFocusedElement?.focus();
+                this.lastFocusedElement = null;
+            }
+        });
+        inject(DestroyRef).onDestroy(() => this.focusTrap?.destroy());
+    }
+    /** Cierra el drawer con Escape — mismo patrón que `Dropdown`/`Modal`. */
+    onEscape() {
+        this.open.set(false);
+    }
+    getOrCreateFocusTrap() {
+        if (!this.focusTrap) {
+            this.focusTrap = this.focusTrapFactory.create(this.panelRef().nativeElement);
+        }
+        return this.focusTrap;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Drawer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Drawer, isStandalone: true, selector: "kf-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, side: { classPropertyName: "side", publicName: "side", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (open()) {
+      <button
+        type="button"
+        class="kf-drawer__overlay"
+        aria-label="Cerrar menú"
+        (click)="open.set(false)"
+      ></button>
+    }
+
+    <nav
+      #panel
+      class="kf-drawer__panel"
+      [class.kf-drawer__panel--open]="open()"
+      [class.kf-drawer__panel--right]="side() === 'right'"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-hidden]="!open()"
+    >
+      <div class="kf-drawer__header"><ng-content select="[kf-drawer-header]" /></div>
+      <div class="kf-drawer__body"><ng-content /></div>
+      <div class="kf-drawer__footer"><ng-content select="[kf-drawer-footer]" /></div>
+    </nav>
+  `, isInline: true, styles: [".kf-drawer__overlay{position:fixed;inset:0;border:none;padding:0;cursor:pointer;background:#171d2566;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:39}.kf-drawer__panel{position:fixed;top:0;left:0;bottom:0;z-index:40;display:flex;flex-direction:column;width:82%;max-width:320px;background:var(--kf-color-white);box-shadow:8px 0 24px -8px #1018284d;transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.32,.72,0,1),visibility 0s linear .24s}.kf-drawer__panel--right{left:auto;right:0;box-shadow:-8px 0 24px -8px #1018284d;transform:translate(100%)}.kf-drawer__panel--open{transform:translate(0);visibility:visible;transition:transform .24s cubic-bezier(.32,.72,0,1),visibility 0s linear 0s}.kf-drawer__header:empty,.kf-drawer__footer:empty{display:none}.kf-drawer__header{padding:var(--kf-space-lg);background:var(--kf-color-tertiary-deep)}.kf-drawer__body{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-lg);overflow-y:auto}.kf-drawer__footer{padding:var(--kf-space-lg);border-top:1px solid var(--kf-color-border)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Drawer, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-drawer', template: `
+    @if (open()) {
+      <button
+        type="button"
+        class="kf-drawer__overlay"
+        aria-label="Cerrar menú"
+        (click)="open.set(false)"
+      ></button>
+    }
+
+    <nav
+      #panel
+      class="kf-drawer__panel"
+      [class.kf-drawer__panel--open]="open()"
+      [class.kf-drawer__panel--right]="side() === 'right'"
+      [attr.aria-label]="ariaLabel()"
+      [attr.aria-hidden]="!open()"
+    >
+      <div class="kf-drawer__header"><ng-content select="[kf-drawer-header]" /></div>
+      <div class="kf-drawer__body"><ng-content /></div>
+      <div class="kf-drawer__footer"><ng-content select="[kf-drawer-footer]" /></div>
+    </nav>
+  `, styles: [".kf-drawer__overlay{position:fixed;inset:0;border:none;padding:0;cursor:pointer;background:#171d2566;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:39}.kf-drawer__panel{position:fixed;top:0;left:0;bottom:0;z-index:40;display:flex;flex-direction:column;width:82%;max-width:320px;background:var(--kf-color-white);box-shadow:8px 0 24px -8px #1018284d;transform:translate(-100%);visibility:hidden;transition:transform .24s cubic-bezier(.32,.72,0,1),visibility 0s linear .24s}.kf-drawer__panel--right{left:auto;right:0;box-shadow:-8px 0 24px -8px #1018284d;transform:translate(100%)}.kf-drawer__panel--open{transform:translate(0);visibility:visible;transition:transform .24s cubic-bezier(.32,.72,0,1),visibility 0s linear 0s}.kf-drawer__header:empty,.kf-drawer__footer:empty{display:none}.kf-drawer__header{padding:var(--kf-space-lg);background:var(--kf-color-tertiary-deep)}.kf-drawer__body{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-lg);overflow-y:auto}.kf-drawer__footer{padding:var(--kf-space-lg);border-top:1px solid var(--kf-color-border)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], side: [{ type: i0.Input, args: [{ isSignal: true, alias: "side", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * 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.
+ *
+ * Reproduce el mismo botón que antes vivía embebido en `DrawerSession`:
+ * ícono `log-out` + label, color `--kf-color-error` con hover en
+ * `--kf-color-error-soft` y foco visible con `--kf-shadow-focus`. Se separó
+ * en un componente propio porque identidad y logout son responsabilidades
+ * distintas — `kf-drawer-session` no debería saber que existe un botón de
+ * cerrar sesión, y el footer del drawer ya tiene su propio padding/borde
+ * superior (ver `Drawer.ts`) que reemplaza el borde que antes traía el botón
+ * mismo.
+ *
+ * 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()" />
+ */
+class DrawerLogout {
+    /** Label del botón, en español neutro por defecto. Input opcional por si
+     * algún consumidor futuro necesita otro texto. */
+    label = input('Cerrar sesión', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Oculta el label y centra el ícono — ver comentario de la clase. */
+    collapsed = input(false, { ...(ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    logoutClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DrawerLogout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DrawerLogout, isStandalone: true, selector: "kf-drawer-logout", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { logoutClick: "logoutClick" }, ngImport: i0, template: `
+    <button
+      type="button"
+      class="kf-drawer-logout__button"
+      [class.kf-drawer-logout__button--collapsed]="collapsed()"
+      [attr.title]="collapsed() ? label() : null"
+      (click)="logoutClick.emit()"
+    >
+      <kf-icon name="log-out" size="sm" />
+      @if (!collapsed()) {
+        {{ label() }}
+      }
+    </button>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-drawer-logout__button{display:flex;align-items:center;gap:var(--kf-space-xs);width:100%;border:none;background:transparent;padding:0;font:inherit;font-size:.875rem;font-weight:600;color:var(--kf-color-error);cursor:pointer}.kf-drawer-logout__button--collapsed{justify-content:center}.kf-drawer-logout__button:hover{color:var(--kf-color-error-strong);background:var(--kf-color-error-soft)}.kf-drawer-logout__button:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DrawerLogout, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-drawer-logout', imports: [Icon], template: `
+    <button
+      type="button"
+      class="kf-drawer-logout__button"
+      [class.kf-drawer-logout__button--collapsed]="collapsed()"
+      [attr.title]="collapsed() ? label() : null"
+      (click)="logoutClick.emit()"
+    >
+      <kf-icon name="log-out" size="sm" />
+      @if (!collapsed()) {
+        {{ label() }}
+      }
+    </button>
+  `, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-drawer-logout__button{display:flex;align-items:center;gap:var(--kf-space-xs);width:100%;border:none;background:transparent;padding:0;font:inherit;font-size:.875rem;font-weight:600;color:var(--kf-color-error);cursor:pointer}.kf-drawer-logout__button--collapsed{justify-content:center}.kf-drawer-logout__button:hover{color:var(--kf-color-error-strong);background:var(--kf-color-error-soft)}.kf-drawer-logout__button:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], logoutClick: [{ type: i0.Output, args: ["logoutClick"] }] } });
+
+/**
+ * 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-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>
+ */
+class DrawerSession {
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    email = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []));
+    initials = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    avatarUrl = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "avatarUrl" }] : /* istanbul ignore next */ []));
+    /** Label superior opcional, ej. "Portal Kaufmann LATAM". */
+    brand = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    /** Oculta brand/nombre/email y centra el avatar — ver comentario de la clase. */
+    collapsed = input(false, { ...(ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Convierte la tarjeta en un botón real con ícono de kebab — ver comentario de la clase. */
+    interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Se emite al clickear la tarjeta, solo cuando `interactive` es `true`. */
+    cardClick = output();
+    /** Si no se pasa `initials`, se derivan de `name`: primera letra de cada
+     * una de las primeras 2 palabras, en mayúscula. */
+    displayInitials = computed(() => {
+        const explicit = this.initials();
+        if (explicit) {
+            return explicit;
+        }
+        return this.name()
+            .trim()
+            .split(/\s+/)
+            .slice(0, 2)
+            .map((word) => word.charAt(0).toUpperCase())
+            .join('');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayInitials" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DrawerSession, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DrawerSession, isStandalone: true, selector: "kf-drawer-session", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, initials: { classPropertyName: "initials", publicName: "initials", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: `
+    @if (brand() && !collapsed()) {
+      <span class="kf-drawer-session__brand">{{ brand() }}</span>
+    }
+
+    @if (interactive()) {
+      <button
+        type="button"
+        class="kf-drawer-session__card kf-drawer-session__card--interactive"
+        [class.kf-drawer-session__card--collapsed]="collapsed()"
+        (click)="cardClick.emit()"
+      >
+        <kf-avatar [initials]="displayInitials()" [src]="avatarUrl()" />
+        @if (!collapsed()) {
+          <div class="kf-drawer-session__identity">
+            <span class="kf-drawer-session__name">{{ name() }}</span>
+            @if (email()) {
+              <span class="kf-drawer-session__email">{{ email() }}</span>
+            }
+          </div>
+          <kf-icon name="more-vertical" size="sm" />
+        }
+      </button>
+    } @else {
+      <div class="kf-drawer-session__card" [class.kf-drawer-session__card--collapsed]="collapsed()">
+        <kf-avatar [initials]="displayInitials()" [src]="avatarUrl()" />
+        @if (!collapsed()) {
+          <div class="kf-drawer-session__identity">
+            <span class="kf-drawer-session__name">{{ name() }}</span>
+            @if (email()) {
+              <span class="kf-drawer-session__email">{{ email() }}</span>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-drawer-session__brand{display:block;margin-bottom:var(--kf-space-sm);font-family:var(--kf-font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#ffffffa6}.kf-drawer-session__card{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm);border:1px solid rgba(255,255,255,.14);border-radius:var(--kf-radius-md);background:#ffffff0a}.kf-drawer-session__card--interactive{font:inherit;color:inherit;cursor:pointer;text-align:left;transition:background .14s}.kf-drawer-session__card--interactive:hover{background:#ffffff17}.kf-drawer-session__card--interactive:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-drawer-session__card--interactive kf-icon{flex:none;color:#ffffff73}.kf-drawer-session__card--collapsed{justify-content:center;width:40px;height:40px;padding:0;border-color:transparent;background:transparent}.kf-drawer-session__card--collapsed:hover{background:#ffffff17}.kf-drawer-session__identity{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}.kf-drawer-session__name{font-size:.9375rem;font-weight:600;color:var(--kf-color-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-drawer-session__email{font-size:.8125rem;color:#ffffffa6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: Avatar, selector: "kf-avatar", inputs: ["initials", "src", "round", "pill"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DrawerSession, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-drawer-session', imports: [Avatar, Icon], template: `
+    @if (brand() && !collapsed()) {
+      <span class="kf-drawer-session__brand">{{ brand() }}</span>
+    }
+
+    @if (interactive()) {
+      <button
+        type="button"
+        class="kf-drawer-session__card kf-drawer-session__card--interactive"
+        [class.kf-drawer-session__card--collapsed]="collapsed()"
+        (click)="cardClick.emit()"
+      >
+        <kf-avatar [initials]="displayInitials()" [src]="avatarUrl()" />
+        @if (!collapsed()) {
+          <div class="kf-drawer-session__identity">
+            <span class="kf-drawer-session__name">{{ name() }}</span>
+            @if (email()) {
+              <span class="kf-drawer-session__email">{{ email() }}</span>
+            }
+          </div>
+          <kf-icon name="more-vertical" size="sm" />
+        }
+      </button>
+    } @else {
+      <div class="kf-drawer-session__card" [class.kf-drawer-session__card--collapsed]="collapsed()">
+        <kf-avatar [initials]="displayInitials()" [src]="avatarUrl()" />
+        @if (!collapsed()) {
+          <div class="kf-drawer-session__identity">
+            <span class="kf-drawer-session__name">{{ name() }}</span>
+            @if (email()) {
+              <span class="kf-drawer-session__email">{{ email() }}</span>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-drawer-session__brand{display:block;margin-bottom:var(--kf-space-sm);font-family:var(--kf-font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#ffffffa6}.kf-drawer-session__card{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm);border:1px solid rgba(255,255,255,.14);border-radius:var(--kf-radius-md);background:#ffffff0a}.kf-drawer-session__card--interactive{font:inherit;color:inherit;cursor:pointer;text-align:left;transition:background .14s}.kf-drawer-session__card--interactive:hover{background:#ffffff17}.kf-drawer-session__card--interactive:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-drawer-session__card--interactive kf-icon{flex:none;color:#ffffff73}.kf-drawer-session__card--collapsed{justify-content:center;width:40px;height:40px;padding:0;border-color:transparent;background:transparent}.kf-drawer-session__card--collapsed:hover{background:#ffffff17}.kf-drawer-session__identity{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}.kf-drawer-session__name{font-size:.9375rem;font-weight:600;color:var(--kf-color-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-drawer-session__email{font-size:.8125rem;color:#ffffffa6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: false }] }], initials: [{ type: i0.Input, args: [{ isSignal: true, alias: "initials", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
+
 /**
  * Í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.
+ * (no un `<a>`): dispara comportamiento en la pantalla actual, no navega.
+ *
+ * `icon` es opcional — sin él, el ítem es solo texto.
  *
- *   <kf-dropdown-item (click)="onLogout()" tone="error">Cerrar sesión</kf-dropdown-item>
+ *   <kf-dropdown-item icon="log-out" (click)="onLogout()" tone="error">Cerrar sesión</kf-dropdown-item>
  */
 class DropdownItem {
     tone = input('neutral', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Ícono opcional al inicio de la fila. */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: DropdownItem, isStandalone: true, selector: "kf-dropdown-item", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DropdownItem, isStandalone: true, selector: "kf-dropdown-item", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <button
       type="button"
       class="kf-dropdown-item"
       [class.kf-dropdown-item--error]="tone() === 'error'"
       role="menuitem"
     >
-      <ng-content />
+      @if (icon()) {
+        <kf-icon [name]="icon()!" size="sm" />
+      }
+      <span class="kf-dropdown-item__label"><ng-content /></span>
     </button>
-  `, isInline: true, styles: [":host{display:block}.kf-dropdown-item{display:block;width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;background:transparent;font:inherit;text-align:left;color:var(--kf-color-text);cursor:pointer}.kf-dropdown-item:hover{background:var(--kf-color-surface)}.kf-dropdown-item:focus-visible{outline:none;box-shadow:inset var(--kf-shadow-focus)}.kf-dropdown-item--error{color:var(--kf-color-error-strong)}.kf-dropdown-item--error:hover{background:var(--kf-color-error-soft)}\n"] });
+  `, isInline: true, styles: [":host{display:block}.kf-dropdown-item{display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;background:transparent;font:inherit;text-align:left;color:var(--kf-color-text);cursor:pointer}.kf-dropdown-item kf-icon{flex:none;color:var(--kf-color-text-muted)}.kf-dropdown-item__label{flex:1 1 auto}.kf-dropdown-item:hover{background:var(--kf-color-surface)}.kf-dropdown-item:focus-visible{outline:none;box-shadow:inset var(--kf-shadow-focus)}.kf-dropdown-item--error{color:var(--kf-color-error-strong)}.kf-dropdown-item--error kf-icon{color:var(--kf-color-error-strong)}.kf-dropdown-item--error:hover{background:var(--kf-color-error-soft)}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item{color:#ffffffd9}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item kf-icon{color:#ffffff8c}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item:hover{background:#ffffff14}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item--error{color:var(--kf-color-error)}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item--error kf-icon{color:var(--kf-color-error)}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item--error:hover{background:#bc454529}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DropdownItem, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-dropdown-item', template: `
+            args: [{ selector: 'kf-dropdown-item', imports: [Icon], template: `
     <button
       type="button"
       class="kf-dropdown-item"
       [class.kf-dropdown-item--error]="tone() === 'error'"
       role="menuitem"
     >
-      <ng-content />
+      @if (icon()) {
+        <kf-icon [name]="icon()!" size="sm" />
+      }
+      <span class="kf-dropdown-item__label"><ng-content /></span>
     </button>
-  `, styles: [":host{display:block}.kf-dropdown-item{display:block;width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;background:transparent;font:inherit;text-align:left;color:var(--kf-color-text);cursor:pointer}.kf-dropdown-item:hover{background:var(--kf-color-surface)}.kf-dropdown-item:focus-visible{outline:none;box-shadow:inset var(--kf-shadow-focus)}.kf-dropdown-item--error{color:var(--kf-color-error-strong)}.kf-dropdown-item--error:hover{background:var(--kf-color-error-soft)}\n"] }]
-        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+  `, styles: [":host{display:block}.kf-dropdown-item{display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;background:transparent;font:inherit;text-align:left;color:var(--kf-color-text);cursor:pointer}.kf-dropdown-item kf-icon{flex:none;color:var(--kf-color-text-muted)}.kf-dropdown-item__label{flex:1 1 auto}.kf-dropdown-item:hover{background:var(--kf-color-surface)}.kf-dropdown-item:focus-visible{outline:none;box-shadow:inset var(--kf-shadow-focus)}.kf-dropdown-item--error{color:var(--kf-color-error-strong)}.kf-dropdown-item--error kf-icon{color:var(--kf-color-error-strong)}.kf-dropdown-item--error:hover{background:var(--kf-color-error-soft)}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item{color:#ffffffd9}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item kf-icon{color:#ffffff8c}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item:hover{background:#ffffff14}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item--error{color:var(--kf-color-error)}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item--error kf-icon{color:var(--kf-color-error)}:host-context(.kf-dropdown-panel--dark) .kf-dropdown-item--error:hover{background:#bc454529}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }] } });
 /**
  * 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.
- *
- *   <kf-dropdown [(open)]="menuOpen">
- *     <kf-dropdown-panel>
- *       <kf-dropdown-item (click)="onLogout()">Cerrar sesión</kf-dropdown-item>
- *     </kf-dropdown-panel>
- *   </kf-dropdown>
+ * (`<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.
  */
 class DropdownPanel {
+    variant = input('solid', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     templateRef = viewChild.required(TemplateRef, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DropdownPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: DropdownPanel, isStandalone: true, selector: "kf-dropdown-panel", viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: DropdownPanel, isStandalone: true, selector: "kf-dropdown-panel", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template>
-      <div class="kf-dropdown-panel">
+      <div class="kf-dropdown-panel" [class.kf-dropdown-panel--dark]="variant() === 'dark'">
         <div class="kf-dropdown-panel__inner" role="menu">
           <ng-content />
         </div>
       </div>
     </ng-template>
-  `, isInline: true, styles: [".kf-dropdown-panel{min-width:220px;max-width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg);font-family:var(--kf-font-body);animation:kf-dropdown-panel-enter .14s ease-out}.kf-dropdown-panel__inner{padding:var(--kf-space-xs) 0;overflow:hidden;border-radius:inherit}@media(prefers-reduced-motion:reduce){.kf-dropdown-panel{animation:none}}@keyframes kf-dropdown-panel-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] });
+  `, isInline: true, styles: [".kf-dropdown-panel{min-width:220px;max-width:min(280px,90vw);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg);font-family:var(--kf-font-body);animation:kf-dropdown-panel-enter .14s ease-out}.kf-dropdown-panel--dark{background:var(--kf-color-tertiary-deep);border-color:#ffffff24}.kf-dropdown-panel__inner{padding:var(--kf-space-xs) 0;overflow:hidden;border-radius:inherit}@media(prefers-reduced-motion:reduce){.kf-dropdown-panel{animation:none}}@keyframes kf-dropdown-panel-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DropdownPanel, decorators: [{
             type: Component,
             args: [{ selector: 'kf-dropdown-panel', template: `
     <ng-template>
-      <div class="kf-dropdown-panel">
+      <div class="kf-dropdown-panel" [class.kf-dropdown-panel--dark]="variant() === 'dark'">
         <div class="kf-dropdown-panel__inner" role="menu">
           <ng-content />
         </div>
       </div>
     </ng-template>
-  `, styles: [".kf-dropdown-panel{min-width:220px;max-width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg);font-family:var(--kf-font-body);animation:kf-dropdown-panel-enter .14s ease-out}.kf-dropdown-panel__inner{padding:var(--kf-space-xs) 0;overflow:hidden;border-radius:inherit}@media(prefers-reduced-motion:reduce){.kf-dropdown-panel{animation:none}}@keyframes kf-dropdown-panel-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
-        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+  `, styles: [".kf-dropdown-panel{min-width:220px;max-width:min(280px,90vw);background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-lg);font-family:var(--kf-font-body);animation:kf-dropdown-panel-enter .14s ease-out}.kf-dropdown-panel--dark{background:var(--kf-color-tertiary-deep);border-color:#ffffff24}.kf-dropdown-panel__inner{padding:var(--kf-space-xs) 0;overflow:hidden;border-radius:inherit}@media(prefers-reduced-motion:reduce){.kf-dropdown-panel{animation:none}}@keyframes kf-dropdown-panel-enter{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 /**
  * 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`.
  *
- *   <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>
+ * Se apoya en el CDK en vez de un `position: absolute` casero (a diferencia
+ * de `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.
+ *
+ * `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>
  */
 class Dropdown {
     /** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
@@ -3005,17 +3630,10 @@ class Dropdown {
     ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
     /**
      * 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`).
      */
     anchor = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "anchor" }] : /* istanbul ignore next */ []));
@@ -3026,6 +3644,20 @@ class Dropdown {
     viewContainerRef = inject(ViewContainerRef);
     destroyRef = inject(DestroyRef);
     overlayRef = null;
+    /**
+     * Suscripciones a `outsidePointerEvents()`/`keydownEvents()` del overlay
+     * ACTUALMENTE adjunto. `getOrCreateOverlayRef()` reutiliza el mismo
+     * `overlayRef` entre aperturas (no lo recrea cada vez) — sin esto,
+     * `attach()` se resuscribía a esos observables en cada apertura sin
+     * cancelar la suscripción de la vez anterior, acumulando N suscripciones
+     * activas sobre el mismo overlay persistente. Eso causaba el bug real de
+     * "clicks seguidos": al abrir de nuevo, el propio pointerdown que originó
+     * la apertura llegaba a más de una suscripción acumulada, disparando
+     * `open.set(false)` de forma errática en el mismo tick (patrón observado:
+     * abre cada 2 clicks, cierra cada 1). Se cancelan explícitamente en
+     * `detach()`, antes de la siguiente `attach()`.
+     */
+    overlaySubscription = null;
     constructor() {
         effect(() => {
             if (this.open()) {
@@ -3035,16 +3667,16 @@ class Dropdown {
                 this.detach();
             }
         });
-        this.destroyRef.onDestroy(() => this.overlayRef?.dispose());
+        this.destroyRef.onDestroy(() => {
+            this.overlaySubscription?.unsubscribe();
+            this.overlayRef?.dispose();
+        });
     }
     /**
      * 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() {
         this.open.set(false);
@@ -3057,14 +3689,38 @@ class Dropdown {
         const overlayRef = this.getOrCreateOverlayRef();
         const portal = new TemplatePortal(panel.templateRef(), this.viewContainerRef);
         overlayRef.attach(portal);
-        overlayRef.outsidePointerEvents().subscribe(() => this.open.set(false));
-        overlayRef.keydownEvents().subscribe((event) => {
+        this.overlaySubscription = new Subscription();
+        this.overlaySubscription.add(overlayRef.outsidePointerEvents().subscribe((event) => {
+            if (this.isEventOnTrigger(event)) {
+                return;
+            }
+            this.open.set(false);
+        }));
+        this.overlaySubscription.add(overlayRef.keydownEvents().subscribe((event) => {
             if (event.key === 'Escape') {
                 this.open.set(false);
             }
-        });
+        }));
+    }
+    /**
+     * 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ú
+     * (el trigger no es hijo del overlay) también llega a
+     * `outsidePointerEvents()`, cerrando el panel en el mismo gesto que lo
+     * abrió — bug real reproducido con Playwright: "abre y cierra" en
+     * clicks consecutivos rápidos sobre la tarjeta de sesión del sidebar.
+     */
+    isEventOnTrigger(event) {
+        const trigger = this.anchor()?.nativeElement ?? this.host.nativeElement;
+        const target = event.target;
+        return target instanceof Node && trigger.contains(target);
     }
     detach() {
+        this.overlaySubscription?.unsubscribe();
+        this.overlaySubscription = null;
         this.overlayRef?.detach();
     }
     getOrCreateOverlayRef() {
@@ -3074,34 +3730,23 @@ class Dropdown {
         const positionStrategy = this.overlayService
             .position()
             .flexibleConnectedTo(this.anchor() ?? this.host)
-            // 4 posiciones, no 2: además de abajo/arriba (alineado al borde
-            // derecho del anchor, el caso común), agrega el mismo par alineado al
-            // borde IZQUIERDO. Con solo el par "end" — como estaba antes — un
-            // trigger cerca del borde derecho de la pantalla no tenía ningún
-            // fallback horizontal: el panel se salía del viewport en vez de
-            // reacomodarse hacia la izquierda. El CDK prueba cada posición en
-            // orden y usa la primera que entra completa en el viewport.
+            // 4 posiciones, no 2: además del par alineado al borde derecho del
+            // anchor, agrega el mismo par alineado al borde IZQUIERDO — sin esto,
+            // un trigger cerca del borde derecho de pantalla no tenía fallback
+            // horizontal y el panel se salía del viewport.
             .withPositions([
             { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
             { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
             { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
             { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
         ])
-            // Margen de seguridad contra los bordes del viewport — sin esto, el
-            // CDK puede considerar una posición "válida" aunque quede pegada al
-            // borde con 0px de aire.
             .withViewportMargin(8)
-            // Si ninguna de las 4 posiciones entra completa (viewport muy
-            // angosto), la última se ajusta con push en vez de desbordarse fuera
-            // de pantalla sin control.
+            // Si ninguna de las 4 posiciones entra completa, la última se ajusta
+            // con push en vez de desbordarse fuera de pantalla.
             .withPush(true);
         this.overlayRef = this.overlayService.create({
             positionStrategy,
             scrollStrategy: this.overlayService.scrollStrategies.reposition(),
-            // Sin esto, el panel puede quedar más angosto que su propio
-            // `min-width` en pantallas chicas si el CDK decide recortar — fija un
-            // techo razonable en vez de dejarlo crecer sin límite ni encogerse
-            // por debajo de lo legible.
             maxWidth: '90vw',
         });
         return this.overlayRef;
@@ -3345,6 +3990,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, styles: [":host{display:block}.kf-filter-chips{display:flex;flex-wrap:wrap;gap:var(--kf-space-xs)}.kf-filter-chips__chip{font:inherit;padding:var(--kf-space-xs) var(--kf-space-md);border-radius:var(--kf-radius-pill);border:1px solid var(--kf-color-border);background:var(--kf-color-surface);color:var(--kf-color-text);cursor:pointer;transition:background .14s,border-color .14s,color .14s}.kf-filter-chips__chip:hover:not(.kf-filter-chips__chip--active){border-color:var(--kf-color-border-strong)}.kf-filter-chips__chip:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-filter-chips__chip--active{background:var(--kf-color-ink);border-color:var(--kf-color-ink);color:var(--kf-color-white)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
+/**
+ * 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 kfFolderTabsPanel>...</div>
+ */
+class FolderTabsPanel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FolderTabsPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: FolderTabsPanel, isStandalone: true, selector: "[kfFolderTabsPanel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FolderTabsPanel, decorators: [{
+            type: Directive,
+            args: [{ selector: '[kfFolderTabsPanel]' }]
+        }] });
 /**
  * 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
@@ -3355,9 +4019,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * `--active` se mueve de un botón a otro, y eso vuelve a disparar el keyframe
  * sin tocar JS.
  *
- * El consumidor es responsable de renderizar el panel de contenido debajo;
- * este componente solo resuelve la fila de pestañas y emite `valueChange`.
- *
+ * 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 kfFolderTabsPanel>contenido de la pestaña activa</div>
+ *   </kf-folder-tabs>
+ *
+ *   <!-- o, sin contenido, como antes: -->
  *   <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event" />
  */
 class FolderTabs {
@@ -3366,6 +4061,18 @@ class FolderTabs {
     value = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     valueChange = output();
+    /**
+     * Detecta si el consumidor proyectó contenido marcado con
+     * `kfFolderTabsPanel` — 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).
+     */
+    projectedPanel = contentChild(FolderTabsPanel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "projectedPanel" }] : /* istanbul ignore next */ []));
+    hasPanel = computed(() => this.projectedPanel() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPanel" }] : /* istanbul ignore next */ []));
     select(value) {
         if (value === this.value()) {
             return;
@@ -3402,7 +4109,7 @@ class FolderTabs {
         nextButton?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FolderTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: FolderTabs, isStandalone: true, selector: "kf-folder-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: FolderTabs, isStandalone: true, selector: "kf-folder-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "projectedPanel", first: true, predicate: FolderTabsPanel, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="kf-folder-tabs" role="tablist">
       @for (option of options(); track option.value) {
         <button
@@ -3424,7 +4131,11 @@ class FolderTabs {
         </button>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-folder-tabs{display:flex;align-items:flex-end;gap:var(--kf-space-xs);perspective:900px}.kf-folder-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--kf-space-xs);font:inherit;font-size:.9rem;color:var(--kf-color-text-muted);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-bottom-color:var(--kf-color-border-strong);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;padding:var(--kf-space-sm) var(--kf-space-md);cursor:pointer;transform-origin:bottom center;transform:translateY(5px) scale(.985);transition:background .14s,color .14s,border-color .14s,transform .22s cubic-bezier(.32,.72,0,1)}.kf-folder-tabs__tab:hover:not(.kf-folder-tabs__tab--active){color:var(--kf-color-text);background:var(--kf-color-white);transform:translateY(2px) scale(.99)}.kf-folder-tabs__tab:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus);z-index:1}.kf-folder-tabs__tab--active{z-index:1;color:var(--kf-color-primary);font-weight:700;background:var(--kf-color-white);border-color:var(--kf-color-border);border-bottom:2px solid var(--kf-color-primary);box-shadow:0 -6px 14px -10px #10182866;transform:translateY(1px);animation:kf-folder-tabs-pull .34s cubic-bezier(.22,1.2,.36,1) both}@keyframes kf-folder-tabs-pull{0%{transform:translateY(7px) rotateX(-24deg) scale(.95)}60%{transform:translateY(-2px) rotateX(3deg) scale(1.02)}to{transform:translateY(1px) rotateX(0) scale(1)}}@media(prefers-reduced-motion:reduce){.kf-folder-tabs__tab,.kf-folder-tabs__tab--active{animation:none;transition:background .14s,color .14s,border-color .14s}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
+
+    <div class="kf-folder-tabs__panel" [class.kf-folder-tabs__panel--empty]="!hasPanel()">
+      <ng-content select="[kfFolderTabsPanel]" />
+    </div>
+  `, isInline: true, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-folder-tabs{display:flex;align-items:flex-end;gap:var(--kf-space-xs);perspective:900px}.kf-folder-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--kf-space-xs);font:inherit;font-size:.9rem;color:var(--kf-color-text-muted);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-bottom-color:var(--kf-color-border-strong);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;padding:var(--kf-space-sm) var(--kf-space-md);cursor:pointer;transform-origin:bottom left;transform:translateY(5px) scale(.985);transition:background .14s,color .14s,border-color .14s,transform .22s cubic-bezier(.32,.72,0,1)}.kf-folder-tabs__tab:hover:not(.kf-folder-tabs__tab--active){color:var(--kf-color-text);background:var(--kf-color-white);transform:translateY(2px) scale(.99)}.kf-folder-tabs__tab:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus);z-index:1}.kf-folder-tabs__tab--active{z-index:1;color:var(--kf-color-primary);font-weight:700;background:var(--kf-color-white);border-color:var(--kf-color-border);border-bottom:2px solid var(--kf-color-primary);box-shadow:0 -6px 14px -10px #10182866;transform:translateY(1px);animation:kf-folder-tabs-pull .34s cubic-bezier(.22,1.2,.36,1) both}@keyframes kf-folder-tabs-pull{0%{transform:translateY(7px) rotateX(-10deg) scale(.97)}60%{transform:translateY(1px) rotateX(2deg) scale(1.01)}to{transform:translateY(1px) rotateX(0) scale(1)}}@media(prefers-reduced-motion:reduce){.kf-folder-tabs__tab,.kf-folder-tabs__tab--active{animation:none;transition:background .14s,color .14s,border-color .14s}}.kf-folder-tabs__panel--empty{display:contents}.kf-folder-tabs__panel:not(.kf-folder-tabs__panel--empty){background:var(--kf-color-white);border-right:1px solid var(--kf-color-border);border-bottom:1px solid var(--kf-color-border);border-left:1px solid var(--kf-color-border);border-top:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);border-top-left-radius:0;overflow:hidden}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FolderTabs, decorators: [{
             type: Component,
@@ -3450,8 +4161,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         </button>
       }
     </div>
-  `, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-folder-tabs{display:flex;align-items:flex-end;gap:var(--kf-space-xs);perspective:900px}.kf-folder-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--kf-space-xs);font:inherit;font-size:.9rem;color:var(--kf-color-text-muted);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-bottom-color:var(--kf-color-border-strong);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;padding:var(--kf-space-sm) var(--kf-space-md);cursor:pointer;transform-origin:bottom center;transform:translateY(5px) scale(.985);transition:background .14s,color .14s,border-color .14s,transform .22s cubic-bezier(.32,.72,0,1)}.kf-folder-tabs__tab:hover:not(.kf-folder-tabs__tab--active){color:var(--kf-color-text);background:var(--kf-color-white);transform:translateY(2px) scale(.99)}.kf-folder-tabs__tab:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus);z-index:1}.kf-folder-tabs__tab--active{z-index:1;color:var(--kf-color-primary);font-weight:700;background:var(--kf-color-white);border-color:var(--kf-color-border);border-bottom:2px solid var(--kf-color-primary);box-shadow:0 -6px 14px -10px #10182866;transform:translateY(1px);animation:kf-folder-tabs-pull .34s cubic-bezier(.22,1.2,.36,1) both}@keyframes kf-folder-tabs-pull{0%{transform:translateY(7px) rotateX(-24deg) scale(.95)}60%{transform:translateY(-2px) rotateX(3deg) scale(1.02)}to{transform:translateY(1px) rotateX(0) scale(1)}}@media(prefers-reduced-motion:reduce){.kf-folder-tabs__tab,.kf-folder-tabs__tab--active{animation:none;transition:background .14s,color .14s,border-color .14s}}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+
+    <div class="kf-folder-tabs__panel" [class.kf-folder-tabs__panel--empty]="!hasPanel()">
+      <ng-content select="[kfFolderTabsPanel]" />
+    </div>
+  `, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-folder-tabs{display:flex;align-items:flex-end;gap:var(--kf-space-xs);perspective:900px}.kf-folder-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--kf-space-xs);font:inherit;font-size:.9rem;color:var(--kf-color-text-muted);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-bottom-color:var(--kf-color-border-strong);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;padding:var(--kf-space-sm) var(--kf-space-md);cursor:pointer;transform-origin:bottom left;transform:translateY(5px) scale(.985);transition:background .14s,color .14s,border-color .14s,transform .22s cubic-bezier(.32,.72,0,1)}.kf-folder-tabs__tab:hover:not(.kf-folder-tabs__tab--active){color:var(--kf-color-text);background:var(--kf-color-white);transform:translateY(2px) scale(.99)}.kf-folder-tabs__tab:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus);z-index:1}.kf-folder-tabs__tab--active{z-index:1;color:var(--kf-color-primary);font-weight:700;background:var(--kf-color-white);border-color:var(--kf-color-border);border-bottom:2px solid var(--kf-color-primary);box-shadow:0 -6px 14px -10px #10182866;transform:translateY(1px);animation:kf-folder-tabs-pull .34s cubic-bezier(.22,1.2,.36,1) both}@keyframes kf-folder-tabs-pull{0%{transform:translateY(7px) rotateX(-10deg) scale(.97)}60%{transform:translateY(1px) rotateX(2deg) scale(1.01)}to{transform:translateY(1px) rotateX(0) scale(1)}}@media(prefers-reduced-motion:reduce){.kf-folder-tabs__tab,.kf-folder-tabs__tab--active{animation:none;transition:background .14s,color .14s,border-color .14s}}.kf-folder-tabs__panel--empty{display:contents}.kf-folder-tabs__panel:not(.kf-folder-tabs__panel--empty){background:var(--kf-color-white);border-right:1px solid var(--kf-color-border);border-bottom:1px solid var(--kf-color-border);border-left:1px solid var(--kf-color-border);border-top:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);border-top-left-radius:0;overflow:hidden}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], projectedPanel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FolderTabsPanel), { isSignal: true }] }] } });
+
+/**
+ * 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' },
+ *     ]"
+ *   />
+ */
+class Footer {
+    logoSrc = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "logoSrc" }] : /* istanbul ignore next */ []));
+    logoAlt = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "logoAlt" }] : /* istanbul ignore next */ []));
+    copyright = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copyright" }] : /* istanbul ignore next */ []));
+    links = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "links" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Footer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Footer, isStandalone: true, selector: "kf-footer", inputs: { logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: false, transformFunction: null }, logoAlt: { classPropertyName: "logoAlt", publicName: "logoAlt", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: true, transformFunction: null }, links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="kf-footer__wrap">
+      @if (logoSrc()) {
+        <img class="kf-footer__logo" [src]="logoSrc()" [alt]="logoAlt()" />
+      }
+      <span class="kf-footer__copyright">{{ copyright() }}</span>
+      @if (links().length) {
+        <nav class="kf-footer__links">
+          @for (link of links(); track link.label) {
+            <a [href]="link.href || '#'">{{ link.label }}</a>
+          }
+        </nav>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;margin-top:auto;background:var(--kf-color-tertiary-deep)}.kf-footer__wrap{max-width:var(--kf-footer-max-width, none);margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:var(--kf-space-lg);min-height:4.5rem;padding:var(--kf-space-md) var(--kf-space-lg)}.kf-footer__logo{height:1.375rem;opacity:.9}.kf-footer__copyright{font-size:.8125rem;color:#ffffff8c;font-family:var(--kf-font-body)}.kf-footer__links{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--kf-space-lg)}.kf-footer__links a{font-size:.8125rem;color:#ffffffa8;text-decoration:none;font-family:var(--kf-font-body)}.kf-footer__links a:hover{color:#fff}@media(max-width:640px){.kf-footer__wrap{flex-direction:column;align-items:flex-start}.kf-footer__links{margin-left:0}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Footer, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-footer', template: `
+    <div class="kf-footer__wrap">
+      @if (logoSrc()) {
+        <img class="kf-footer__logo" [src]="logoSrc()" [alt]="logoAlt()" />
+      }
+      <span class="kf-footer__copyright">{{ copyright() }}</span>
+      @if (links().length) {
+        <nav class="kf-footer__links">
+          @for (link of links(); track link.label) {
+            <a [href]="link.href || '#'">{{ link.label }}</a>
+          }
+        </nav>
+      }
+    </div>
+  `, styles: [":host{display:block;margin-top:auto;background:var(--kf-color-tertiary-deep)}.kf-footer__wrap{max-width:var(--kf-footer-max-width, none);margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:var(--kf-space-lg);min-height:4.5rem;padding:var(--kf-space-md) var(--kf-space-lg)}.kf-footer__logo{height:1.375rem;opacity:.9}.kf-footer__copyright{font-size:.8125rem;color:#ffffff8c;font-family:var(--kf-font-body)}.kf-footer__links{margin-left:auto;display:flex;flex-wrap:wrap;gap:var(--kf-space-lg)}.kf-footer__links a{font-size:.8125rem;color:#ffffffa8;text-decoration:none;font-family:var(--kf-font-body)}.kf-footer__links a:hover{color:#fff}@media(max-width:640px){.kf-footer__wrap{flex-direction:column;align-items:flex-start}.kf-footer__links{margin-left:0}}\n"] }]
+        }], propDecorators: { logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: false }] }], logoAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoAlt", required: false }] }], copyright: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyright", required: true }] }], links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }] } });
 
 /**
  * Input de formulario apilado: label arriba (en mayúsculas vía CSS), campo con
@@ -4003,18 +4781,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 
 let nextId = 0;
 /**
- * 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.
- *
- * 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`.
+ * 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`).
+ *
+ * Hasta la `0.1.9` este panel vivía con `position: absolute` manual sobre el
+ * propio host, sin depender del CDK Overlay. Se migró para unificar el
+ * mecanismo de posicionamiento/cierre con el resto de los dropdowns flotantes
+ * de la librería (4 posiciones de fallback, `withViewportMargin`, `withPush`,
+ * cierre por `outsidePointerEvents()`/`keydownEvents()` en vez de un
+ * `@HostListener('document:click')` manual).
+ *
+ * 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"
@@ -4037,18 +4822,43 @@ class MultiSelect {
     placeholder = input('Seleccionar', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * 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`.
+     */
+    searchable = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    searchThreshold = input(7, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchThreshold" }] : /* istanbul ignore next */ []));
     valuesChange = output();
     instanceId = `kf-multi-select-${nextId++}`;
     triggerId = `${this.instanceId}-trigger`;
     listboxId = `${this.instanceId}-listbox`;
     isOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
+    searchQuery = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchQuery" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
     selectedCount = computed(() => this.values().length, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedCount" }] : /* istanbul ignore next */ []));
     allSelected = computed(() => this.options().length > 0 && this.values().length === this.options().length, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "allSelected" }] : /* istanbul ignore next */ []));
     isPartiallySelected = computed(() => this.values().length > 0 && !this.allSelected(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isPartiallySelected" }] : /* istanbul ignore next */ []));
+    showSearch = computed(() => this.searchable() ?? this.options().length > this.searchThreshold(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    /** Opciones visibles tras aplicar el filtro de búsqueda ("Todas" nunca se filtra). */
+    filteredOptions = computed(() => {
+        const query = normalizeForSearch(this.searchQuery().trim());
+        if (!query) {
+            return this.options();
+        }
+        return this.options().filter((option) => normalizeForSearch(option.label).includes(query));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
     /**
      * Texto del disparador: placeholder si no hay selección, o los nombres
      * seleccionados unidos por coma (el conteo va aparte, en el badge). Con
@@ -4066,37 +4876,147 @@ class MultiSelect {
         return selectedLabels.join(', ');
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "summaryText" }] : /* istanbul ignore next */ []));
-    host = inject((ElementRef));
-    isSelected(value) {
-        return this.values().includes(value);
-    }
-    toggle() {
-        if (this.disabled()) {
-            return;
-        }
-        this.isOpen.update((open) => !open);
-    }
-    toggleOption(value) {
-        const current = this.values();
-        const next = current.includes(value)
-            ? current.filter((selectedValue) => selectedValue !== value)
-            : [...current, value];
-        this.valuesChange.emit(next);
-    }
-    /** Alterna entre "todas seleccionadas" y "ninguna seleccionada". */
+    triggerRef = viewChild.required('trigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerRef" }] : /* istanbul ignore next */ []));
+    panelTemplate = viewChild.required('panelTemplate', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelTemplate" }] : /* istanbul ignore next */ []));
+    searchInputRef = viewChild('searchInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchInputRef" }] : /* istanbul ignore next */ []));
+    overlayService = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    destroyRef = inject(DestroyRef);
+    overlayRef = null;
+    constructor() {
+        effect(() => {
+            if (this.isOpen()) {
+                this.attach();
+            }
+            else {
+                this.detach();
+                this.searchQuery.set('');
+                this.activeIndex.set(0);
+            }
+        });
+        // Autofocus del buscador al abrir — mismo patrón que Select. afterNextRender()
+        // no puede invocarse dentro de un effect() (NG0203); afterRenderEffect() sí
+        // es reactivo a signals y corre tras la actualización del DOM del panel.
+        afterRenderEffect(() => {
+            if (this.isOpen() && this.showSearch()) {
+                this.searchInputRef()?.nativeElement.focus();
+            }
+        });
+        this.destroyRef.onDestroy(() => this.overlayRef?.dispose());
+    }
+    isSelected(value) {
+        return this.values().includes(value);
+    }
+    toggle() {
+        if (this.disabled()) {
+            return;
+        }
+        this.isOpen.update((open) => !open);
+    }
+    toggleOption(value) {
+        const current = this.values();
+        const next = current.includes(value)
+            ? current.filter((selectedValue) => selectedValue !== value)
+            : [...current, value];
+        this.valuesChange.emit(next);
+    }
+    /**
+     * 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() {
         this.valuesChange.emit(this.allSelected() ? [] : this.options().map((option) => option.value));
     }
-    onDocumentClick(event) {
-        if (this.isOpen() && !this.host.nativeElement.contains(event.target)) {
-            this.isOpen.set(false);
+    onSearchInput(event) {
+        this.searchQuery.set(event.target.value);
+        this.activeIndex.set(0);
+    }
+    /** Mueve `activeIndex` sobre las opciones YA FILTRADAS visibles. Clamp simple, sin wraparound. */
+    moveActive(delta) {
+        const count = this.filteredOptions().length;
+        if (count === 0) {
+            return;
+        }
+        this.activeIndex.update((current) => Math.min(Math.max(current + delta, 0), count - 1));
+    }
+    toggleActive() {
+        const option = this.filteredOptions()[this.activeIndex()];
+        if (option) {
+            this.toggleOption(option.value);
         }
     }
     onEscape() {
         this.isOpen.set(false);
     }
+    attach() {
+        if (this.overlayRef?.hasAttached()) {
+            return;
+        }
+        const overlayRef = this.getOrCreateOverlayRef();
+        // Se remide el ancho del trigger en cada apertura, no solo la primera —
+        // ver la misma nota en Select: cachear el ancho en la creación del
+        // overlay lo deja desincronizado si el trigger cambia de tamaño entre
+        // una apertura y la siguiente.
+        overlayRef.updateSize({ width: this.triggerRef().nativeElement.getBoundingClientRect().width });
+        const portal = new TemplatePortal(this.panelTemplate(), this.viewContainerRef);
+        overlayRef.attach(portal);
+        // outsidePointerEvents() dispara en la fase de CAPTURA de `click` sobre
+        // `body` (ver OverlayOutsideClickDispatcher en @angular/cdk), ANTES de
+        // que el evento llegue al trigger y corra (click)="toggle()". Sin este
+        // filtro, un click en el trigger para CERRAR el panel ya abierto hacía:
+        // 1) este subscribe lo cierra primero (el trigger no es parte del
+        // overlay, cuenta como "afuera"), 2) toggle() corre después y lo vuelve a
+        // abrir porque ve isOpen ya en false — un solo click quedaba en no-op y
+        // solo cerraba de verdad un click fuera del trigger. Mismo fix que Select
+        // y Dropdown (ver notas ahí).
+        overlayRef.outsidePointerEvents().subscribe((event) => {
+            const target = event.target;
+            if (target && this.triggerRef().nativeElement.contains(target)) {
+                return;
+            }
+            this.isOpen.set(false);
+        });
+        overlayRef.keydownEvents().subscribe((event) => {
+            if (event.key === 'Escape') {
+                this.isOpen.set(false);
+            }
+        });
+    }
+    detach() {
+        this.overlayRef?.detach();
+    }
+    getOrCreateOverlayRef() {
+        if (this.overlayRef) {
+            return this.overlayRef;
+        }
+        const positionStrategy = this.overlayService
+            .position()
+            .flexibleConnectedTo(this.triggerRef())
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top', offsetY: 4 },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom', offsetY: -4 },
+        ])
+            .withViewportMargin(8)
+            .withPush(true);
+        this.overlayRef = this.overlayService.create({
+            positionStrategy,
+            scrollStrategy: this.overlayService.scrollStrategies.reposition(),
+            width: this.triggerRef().nativeElement.getBoundingClientRect().width,
+            maxWidth: '90vw',
+        });
+        return this.overlayRef;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MultiSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MultiSelect, isStandalone: true, selector: "kf-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MultiSelect, isStandalone: true, selector: "kf-multi-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, searchThreshold: { classPropertyName: "searchThreshold", publicName: "searchThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, isSignal: true }, { propertyName: "panelTemplate", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <kf-field-label [for]="triggerId">{{ label() }}</kf-field-label>
     }
@@ -4126,55 +5046,78 @@ class MultiSelect {
         aria-hidden="true"
       ></span>
     </button>
-    @if (isOpen()) {
-      <ul
-        class="kf-multi-select__panel"
-        [id]="listboxId"
-        role="listbox"
-        aria-multiselectable="true"
-        [attr.aria-labelledby]="triggerId"
-      >
-        @if (options().length > 0) {
-          <li
-            class="kf-multi-select__option"
-            role="option"
-            tabindex="0"
-            [attr.aria-selected]="allSelected()"
-            (click)="toggleAll()"
-            (keydown.enter)="toggleAll()"
-            (keydown.space)="$event.preventDefault(); toggleAll()"
-          >
-            <span
-              class="kf-multi-select__checkbox"
-              [class.kf-multi-select__checkbox--checked]="allSelected()"
-              [class.kf-multi-select__checkbox--indeterminate]="isPartiallySelected()"
-            ></span>
-            <span class="kf-multi-select__option-label">Todas</span>
-          </li>
-        }
-        @for (option of options(); track option.value) {
-          <li
-            class="kf-multi-select__option"
-            [class.kf-multi-select__option--selected]="isSelected(option.value)"
-            role="option"
-            tabindex="0"
-            [attr.aria-selected]="isSelected(option.value)"
-            (click)="toggleOption(option.value)"
-            (keydown.enter)="toggleOption(option.value)"
-            (keydown.space)="$event.preventDefault(); toggleOption(option.value)"
-          >
-            <span
-              class="kf-multi-select__checkbox"
-              [class.kf-multi-select__checkbox--checked]="isSelected(option.value)"
-            ></span>
-            <span class="kf-multi-select__option-label">{{ option.label }}</span>
-          </li>
-        } @empty {
-          <li class="kf-multi-select__empty">Sin opciones disponibles</li>
+    <ng-template #panelTemplate>
+      <div class="kf-multi-select__panel">
+        @if (showSearch()) {
+          <input
+            #searchInput
+            type="text"
+            class="kf-multi-select__search"
+            placeholder="Buscar…"
+            [value]="searchQuery()"
+            (input)="onSearchInput($event)"
+            (keydown.arrowdown)="$event.preventDefault(); moveActive(1)"
+            (keydown.arrowup)="$event.preventDefault(); moveActive(-1)"
+            (keydown.enter)="$event.preventDefault(); toggleActive()"
+          />
         }
-      </ul>
-    }
-  `, isInline: true, styles: [":host{display:inline-flex;flex-direction:column;gap:var(--kf-space-xs);position:relative;font:inherit;width:240px}.kf-multi-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;font-family:var(--kf-font-body);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-multi-select__trigger:hover:not(:disabled){border-color:var(--kf-color-border-strong)}.kf-multi-select__trigger:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-multi-select__trigger:disabled{opacity:.5;cursor:not-allowed}.kf-multi-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}.kf-multi-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-multi-select__count{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 5px;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white);font-size:.72rem;font-weight:700}.kf-multi-select__caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-multi-select__caret--open{transform:rotate(-135deg);margin-top:4px}.kf-multi-select__panel{position:absolute;top:100%;left:0;right:0;z-index:10;margin:var(--kf-space-xs) 0 0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md)}.kf-multi-select__option{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-multi-select__option:hover{background:var(--kf-color-primary-soft)}.kf-multi-select__option--selected{color:var(--kf-color-primary);font-weight:600}.kf-multi-select__checkbox{display:inline-flex;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-multi-select__checkbox--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-multi-select__checkbox--checked:after{content:\"\";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--kf-color-white);border-width:0 2px 2px 0;transform:rotate(45deg)}.kf-multi-select__checkbox--indeterminate{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-multi-select__checkbox--indeterminate:after{content:\"\";position:absolute;left:3px;top:6px;width:8px;height:2px;background:var(--kf-color-white);border:none;transform:none}.kf-multi-select__option-label{overflow:hidden;text-overflow:ellipsis}.kf-multi-select__empty{padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }] });
+        <ul
+          class="kf-multi-select__list"
+          [id]="listboxId"
+          role="listbox"
+          aria-multiselectable="true"
+          [attr.aria-labelledby]="triggerId"
+        >
+          @if (options().length > 0) {
+            <li
+              class="kf-multi-select__option"
+              role="option"
+              tabindex="0"
+              [attr.aria-selected]="allSelected()"
+              (click)="toggleAll()"
+              (keydown.enter)="toggleAll()"
+              (keydown.space)="$event.preventDefault(); toggleAll()"
+            >
+              <span
+                class="kf-multi-select__checkbox"
+                [class.kf-multi-select__checkbox--checked]="allSelected()"
+                [class.kf-multi-select__checkbox--indeterminate]="isPartiallySelected()"
+              ></span>
+              <span class="kf-multi-select__option-label">Todas</span>
+            </li>
+          }
+          @for (option of filteredOptions(); track option.value; let i = $index) {
+            <li
+              class="kf-multi-select__option"
+              [class.kf-multi-select__option--selected]="isSelected(option.value)"
+              [class.kf-multi-select__option--active]="i === activeIndex()"
+              role="option"
+              tabindex="0"
+              [attr.aria-selected]="isSelected(option.value)"
+              (click)="toggleOption(option.value)"
+              (mouseenter)="activeIndex.set(i)"
+              (keydown.enter)="toggleOption(option.value)"
+              (keydown.space)="$event.preventDefault(); toggleOption(option.value)"
+              (keydown.arrowdown)="$event.preventDefault(); moveActive(1)"
+              (keydown.arrowup)="$event.preventDefault(); moveActive(-1)"
+            >
+              <span
+                class="kf-multi-select__checkbox"
+                [class.kf-multi-select__checkbox--checked]="isSelected(option.value)"
+              ></span>
+              <span class="kf-multi-select__option-label">{{ option.label }}</span>
+            </li>
+          } @empty {
+            @if (options().length > 0) {
+              <li class="kf-multi-select__empty">Sin resultados</li>
+            } @else {
+              <li class="kf-multi-select__empty">Sin opciones disponibles</li>
+            }
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:inline-flex;flex-direction:column;gap:var(--kf-space-xs);font:inherit;width:240px}.kf-multi-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;font-family:var(--kf-font-body);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-multi-select__trigger:hover:not(:disabled){border-color:var(--kf-color-border-strong)}.kf-multi-select__trigger:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-multi-select__trigger:disabled{opacity:.5;cursor:not-allowed}.kf-multi-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}.kf-multi-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-multi-select__count{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 5px;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white);font-size:.72rem;font-weight:700}.kf-multi-select__caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-multi-select__caret--open{transform:rotate(-135deg);margin-top:4px}.kf-multi-select__panel{box-sizing:border-box;width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-multi-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-multi-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-multi-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-multi-select__list::-webkit-scrollbar{width:6px}.kf-multi-select__list::-webkit-scrollbar-track{background:transparent}.kf-multi-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-multi-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-multi-select__option{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-multi-select__option:hover{background:var(--kf-color-primary-soft)}.kf-multi-select__option--selected{color:var(--kf-color-primary);font-weight:600}.kf-multi-select__option--active{background:var(--kf-color-primary-soft)}.kf-multi-select__checkbox{display:inline-flex;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-multi-select__checkbox--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-multi-select__checkbox--checked:after{content:\"\";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--kf-color-white);border-width:0 2px 2px 0;transform:rotate(45deg)}.kf-multi-select__checkbox--indeterminate{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-multi-select__checkbox--indeterminate:after{content:\"\";position:absolute;left:3px;top:6px;width:8px;height:2px;background:var(--kf-color-white);border:none;transform:none}.kf-multi-select__option-label{overflow:hidden;text-overflow:ellipsis}.kf-multi-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"], dependencies: [{ kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MultiSelect, decorators: [{
             type: Component,
@@ -4208,63 +5151,191 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         aria-hidden="true"
       ></span>
     </button>
-    @if (isOpen()) {
-      <ul
-        class="kf-multi-select__panel"
-        [id]="listboxId"
-        role="listbox"
-        aria-multiselectable="true"
-        [attr.aria-labelledby]="triggerId"
-      >
-        @if (options().length > 0) {
-          <li
-            class="kf-multi-select__option"
-            role="option"
-            tabindex="0"
-            [attr.aria-selected]="allSelected()"
-            (click)="toggleAll()"
-            (keydown.enter)="toggleAll()"
-            (keydown.space)="$event.preventDefault(); toggleAll()"
-          >
-            <span
-              class="kf-multi-select__checkbox"
-              [class.kf-multi-select__checkbox--checked]="allSelected()"
-              [class.kf-multi-select__checkbox--indeterminate]="isPartiallySelected()"
-            ></span>
-            <span class="kf-multi-select__option-label">Todas</span>
-          </li>
-        }
-        @for (option of options(); track option.value) {
-          <li
-            class="kf-multi-select__option"
-            [class.kf-multi-select__option--selected]="isSelected(option.value)"
-            role="option"
-            tabindex="0"
-            [attr.aria-selected]="isSelected(option.value)"
-            (click)="toggleOption(option.value)"
-            (keydown.enter)="toggleOption(option.value)"
-            (keydown.space)="$event.preventDefault(); toggleOption(option.value)"
-          >
-            <span
-              class="kf-multi-select__checkbox"
-              [class.kf-multi-select__checkbox--checked]="isSelected(option.value)"
-            ></span>
-            <span class="kf-multi-select__option-label">{{ option.label }}</span>
-          </li>
-        } @empty {
-          <li class="kf-multi-select__empty">Sin opciones disponibles</li>
+    <ng-template #panelTemplate>
+      <div class="kf-multi-select__panel">
+        @if (showSearch()) {
+          <input
+            #searchInput
+            type="text"
+            class="kf-multi-select__search"
+            placeholder="Buscar…"
+            [value]="searchQuery()"
+            (input)="onSearchInput($event)"
+            (keydown.arrowdown)="$event.preventDefault(); moveActive(1)"
+            (keydown.arrowup)="$event.preventDefault(); moveActive(-1)"
+            (keydown.enter)="$event.preventDefault(); toggleActive()"
+          />
         }
-      </ul>
-    }
-  `, styles: [":host{display:inline-flex;flex-direction:column;gap:var(--kf-space-xs);position:relative;font:inherit;width:240px}.kf-multi-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;font-family:var(--kf-font-body);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-multi-select__trigger:hover:not(:disabled){border-color:var(--kf-color-border-strong)}.kf-multi-select__trigger:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-multi-select__trigger:disabled{opacity:.5;cursor:not-allowed}.kf-multi-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}.kf-multi-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-multi-select__count{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 5px;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white);font-size:.72rem;font-weight:700}.kf-multi-select__caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-multi-select__caret--open{transform:rotate(-135deg);margin-top:4px}.kf-multi-select__panel{position:absolute;top:100%;left:0;right:0;z-index:10;margin:var(--kf-space-xs) 0 0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md)}.kf-multi-select__option{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-multi-select__option:hover{background:var(--kf-color-primary-soft)}.kf-multi-select__option--selected{color:var(--kf-color-primary);font-weight:600}.kf-multi-select__checkbox{display:inline-flex;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-multi-select__checkbox--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-multi-select__checkbox--checked:after{content:\"\";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--kf-color-white);border-width:0 2px 2px 0;transform:rotate(45deg)}.kf-multi-select__checkbox--indeterminate{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-multi-select__checkbox--indeterminate:after{content:\"\";position:absolute;left:3px;top:6px;width:8px;height:2px;background:var(--kf-color-white);border:none;transform:none}.kf-multi-select__option-label{overflow:hidden;text-overflow:ellipsis}.kf-multi-select__empty{padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], valuesChange: [{ type: i0.Output, args: ["valuesChange"] }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], onEscape: [{
+        <ul
+          class="kf-multi-select__list"
+          [id]="listboxId"
+          role="listbox"
+          aria-multiselectable="true"
+          [attr.aria-labelledby]="triggerId"
+        >
+          @if (options().length > 0) {
+            <li
+              class="kf-multi-select__option"
+              role="option"
+              tabindex="0"
+              [attr.aria-selected]="allSelected()"
+              (click)="toggleAll()"
+              (keydown.enter)="toggleAll()"
+              (keydown.space)="$event.preventDefault(); toggleAll()"
+            >
+              <span
+                class="kf-multi-select__checkbox"
+                [class.kf-multi-select__checkbox--checked]="allSelected()"
+                [class.kf-multi-select__checkbox--indeterminate]="isPartiallySelected()"
+              ></span>
+              <span class="kf-multi-select__option-label">Todas</span>
+            </li>
+          }
+          @for (option of filteredOptions(); track option.value; let i = $index) {
+            <li
+              class="kf-multi-select__option"
+              [class.kf-multi-select__option--selected]="isSelected(option.value)"
+              [class.kf-multi-select__option--active]="i === activeIndex()"
+              role="option"
+              tabindex="0"
+              [attr.aria-selected]="isSelected(option.value)"
+              (click)="toggleOption(option.value)"
+              (mouseenter)="activeIndex.set(i)"
+              (keydown.enter)="toggleOption(option.value)"
+              (keydown.space)="$event.preventDefault(); toggleOption(option.value)"
+              (keydown.arrowdown)="$event.preventDefault(); moveActive(1)"
+              (keydown.arrowup)="$event.preventDefault(); moveActive(-1)"
+            >
+              <span
+                class="kf-multi-select__checkbox"
+                [class.kf-multi-select__checkbox--checked]="isSelected(option.value)"
+              ></span>
+              <span class="kf-multi-select__option-label">{{ option.label }}</span>
+            </li>
+          } @empty {
+            @if (options().length > 0) {
+              <li class="kf-multi-select__empty">Sin resultados</li>
+            } @else {
+              <li class="kf-multi-select__empty">Sin opciones disponibles</li>
+            }
+          }
+        </ul>
+      </div>
+    </ng-template>
+  `, styles: [":host{display:inline-flex;flex-direction:column;gap:var(--kf-space-xs);font:inherit;width:240px}.kf-multi-select__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;font-family:var(--kf-font-body);padding:var(--kf-space-sm) var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-text);cursor:pointer;transition:border-color .14s,box-shadow .14s}.kf-multi-select__trigger:hover:not(:disabled){border-color:var(--kf-color-border-strong)}.kf-multi-select__trigger:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-multi-select__trigger:disabled{opacity:.5;cursor:not-allowed}.kf-multi-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:left}.kf-multi-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-multi-select__count{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 5px;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white);font-size:.72rem;font-weight:700}.kf-multi-select__caret{flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--kf-color-text-muted);border-bottom:2px solid var(--kf-color-text-muted);transform:rotate(45deg);transition:transform .14s;margin-top:-4px}.kf-multi-select__caret--open{transform:rotate(-135deg);margin-top:4px}.kf-multi-select__panel{box-sizing:border-box;width:100%;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-md);overflow:hidden}.kf-multi-select__search{box-sizing:border-box;width:100%;font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-bottom:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm) var(--kf-radius-sm) 0 0;outline:none}.kf-multi-select__search:focus-visible{box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-multi-select__list{box-sizing:border-box;width:100%;margin:0;padding:var(--kf-space-xs) 0;list-style:none;max-height:240px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--kf-color-gray-400) transparent}.kf-multi-select__list::-webkit-scrollbar{width:6px}.kf-multi-select__list::-webkit-scrollbar-track{background:transparent}.kf-multi-select__list::-webkit-scrollbar-thumb{background-color:var(--kf-color-gray-400);border-radius:var(--kf-radius-pill)}.kf-multi-select__list::-webkit-scrollbar-thumb:hover{background-color:var(--kf-color-gray-500)}.kf-multi-select__option{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-multi-select__option:hover{background:var(--kf-color-primary-soft)}.kf-multi-select__option--selected{color:var(--kf-color-primary);font-weight:600}.kf-multi-select__option--active{background:var(--kf-color-primary-soft)}.kf-multi-select__checkbox{display:inline-flex;flex-shrink:0;width:var(--kf-space-md);height:var(--kf-space-md);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-xs);background:var(--kf-color-white);transition:background .14s,border-color .14s;position:relative}.kf-multi-select__checkbox--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-multi-select__checkbox--checked:after{content:\"\";position:absolute;left:4px;top:1px;width:4px;height:8px;border:solid var(--kf-color-white);border-width:0 2px 2px 0;transform:rotate(45deg)}.kf-multi-select__checkbox--indeterminate{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}.kf-multi-select__checkbox--indeterminate:after{content:\"\";position:absolute;left:3px;top:6px;width:8px;height:2px;background:var(--kf-color-white);border:none;transform:none}.kf-multi-select__option-label{overflow:hidden;text-overflow:ellipsis}.kf-multi-select__empty{text-align:center;padding:var(--kf-space-sm) var(--kf-space-md);color:var(--kf-color-text-muted)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }], valuesChange: [{ type: i0.Output, args: ["valuesChange"] }], triggerRef: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], panelTemplate: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['searchInput', { isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.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á.
+ *
+ * `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-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>
+ */
+class Text {
+    /** Etiqueta semántica real que se renderiza — nunca es solo un `div`. */
+    as = input('p', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "as" }] : /* istanbul ignore next */ []));
+    variant = input('body', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    tone = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /**
+     * 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).
+     */
+    tag = computed(() => this.as(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tag" }] : /* istanbul ignore next */ []));
+    hostClass() {
+        const classes = [`kf-text--${this.variant()}`];
+        if (this.tone() !== 'neutral') {
+            classes.push(`kf-text--${this.tone()}`);
+        }
+        return classes.join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Text, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Text, isStandalone: true, selector: "kf-text", inputs: { as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <!--
+      Una sola proyección compartida (ng-template + ngTemplateOutlet) en vez
+      de un <ng-content> por cada rama del @switch: Angular solo conecta la
+      proyección real del consumidor a la PRIMERA instancia de <ng-content>
+      que encuentra en el árbol de compilación — con un <ng-content> por
+      rama, todas menos una quedan vacías en runtime (bug detectado por
+      Text.spec.ts, no algo documentado a simple vista en los docs de Angular).
+    -->
+    <ng-template #projected><ng-content /></ng-template>
+    @switch (tag()) {
+      @case ('h1') {
+        <h1 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h1>
+      }
+      @case ('h2') {
+        <h2 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h2>
+      }
+      @case ('h3') {
+        <h3 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h3>
+      }
+      @case ('span') {
+        <span [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></span>
+      }
+      @default {
+        <p [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></p>
+      }
+    }
+  `, isInline: true, styles: [":host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-xxl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xxl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-xl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--caption{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Text, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-text', imports: [NgTemplateOutlet], template: `
+    <!--
+      Una sola proyección compartida (ng-template + ngTemplateOutlet) en vez
+      de un <ng-content> por cada rama del @switch: Angular solo conecta la
+      proyección real del consumidor a la PRIMERA instancia de <ng-content>
+      que encuentra en el árbol de compilación — con un <ng-content> por
+      rama, todas menos una quedan vacías en runtime (bug detectado por
+      Text.spec.ts, no algo documentado a simple vista en los docs de Angular).
+    -->
+    <ng-template #projected><ng-content /></ng-template>
+    @switch (tag()) {
+      @case ('h1') {
+        <h1 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h1>
+      }
+      @case ('h2') {
+        <h2 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h2>
+      }
+      @case ('h3') {
+        <h3 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h3>
+      }
+      @case ('span') {
+        <span [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></span>
+      }
+      @default {
+        <p [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></p>
+      }
+    }
+  `, styles: [":host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-xxl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xxl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-xl{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-xl);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--caption{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"] }]
+        }], propDecorators: { as: [{ type: i0.Input, args: [{ isSignal: true, alias: "as", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+
 /**
  * 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
@@ -4276,6 +5347,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  *   </kf-page-header>
  *
  *   <kf-page-header icon="settings" title="Configuración" />
+ *
+ *   <kf-page-header size="xl" title="Bienvenido de nuevo" />
  */
 class PageHeader {
     icon = input(undefined, /* @ts-ignore */
@@ -4284,8 +5357,12 @@ class PageHeader {
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     subtitle = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    titleVariant = computed(() => `title-${this.size()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleVariant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PageHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: PageHeader, isStandalone: true, selector: "kf-page-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: PageHeader, isStandalone: true, selector: "kf-page-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (icon(); as iconName) {
       <span class="kf-page-header__icon">
         <kf-icon [name]="iconName" size="lg" />
@@ -4293,7 +5370,9 @@ class PageHeader {
     }
 
     <div class="kf-page-header__heading">
-      <h1 class="kf-page-header__title">{{ title() }}</h1>
+      <kf-text as="h1" class="kf-page-header__title" [variant]="titleVariant()">
+        {{ title() }}
+      </kf-text>
       @if (subtitle()) {
         <p class="kf-page-header__subtitle">{{ subtitle() }}</p>
       }
@@ -4302,11 +5381,11 @@ class PageHeader {
     <div class="kf-page-header__actions">
       <ng-content select="[actions]" />
     </div>
-  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:var(--kf-space-md);font-family:var(--kf-font-body)}.kf-page-header__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:var(--kf-radius-md);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-page-header__heading{display:flex;flex-direction:column;gap:var(--kf-space-xs);flex:1 1 auto;min-width:0}.kf-page-header__title{margin:0;font-family:var(--kf-font-title);font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--kf-color-ink)}.kf-page-header__subtitle{margin:0;font-size:.9375rem;color:var(--kf-color-text-muted)}.kf-page-header__actions{flex:none;display:flex;align-items:center;gap:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
+  `, isInline: true, styles: [":host{display:flex;align-items:center;gap:var(--kf-space-md);font-family:var(--kf-font-body)}.kf-page-header__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:var(--kf-radius-md);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-page-header__heading{display:flex;flex-direction:column;gap:var(--kf-space-xs);flex:1 1 auto;min-width:0}.kf-page-header__title{line-height:1.2}.kf-page-header__subtitle{margin:0;font-size:.9375rem;color:var(--kf-color-text-muted)}.kf-page-header__actions{flex:none;display:flex;align-items:center;gap:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PageHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-page-header', imports: [Icon], template: `
+            args: [{ selector: 'kf-page-header', imports: [Icon, Text], template: `
     @if (icon(); as iconName) {
       <span class="kf-page-header__icon">
         <kf-icon [name]="iconName" size="lg" />
@@ -4314,7 +5393,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
     }
 
     <div class="kf-page-header__heading">
-      <h1 class="kf-page-header__title">{{ title() }}</h1>
+      <kf-text as="h1" class="kf-page-header__title" [variant]="titleVariant()">
+        {{ title() }}
+      </kf-text>
       @if (subtitle()) {
         <p class="kf-page-header__subtitle">{{ subtitle() }}</p>
       }
@@ -4323,8 +5404,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
     <div class="kf-page-header__actions">
       <ng-content select="[actions]" />
     </div>
-  `, styles: [":host{display:flex;align-items:center;gap:var(--kf-space-md);font-family:var(--kf-font-body)}.kf-page-header__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:var(--kf-radius-md);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-page-header__heading{display:flex;flex-direction:column;gap:var(--kf-space-xs);flex:1 1 auto;min-width:0}.kf-page-header__title{margin:0;font-family:var(--kf-font-title);font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--kf-color-ink)}.kf-page-header__subtitle{margin:0;font-size:.9375rem;color:var(--kf-color-text-muted)}.kf-page-header__actions{flex:none;display:flex;align-items:center;gap:var(--kf-space-sm)}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
+  `, styles: [":host{display:flex;align-items:center;gap:var(--kf-space-md);font-family:var(--kf-font-body)}.kf-page-header__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:var(--kf-radius-md);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-page-header__heading{display:flex;flex-direction:column;gap:var(--kf-space-xs);flex:1 1 auto;min-width:0}.kf-page-header__title{line-height:1.2}.kf-page-header__subtitle{margin:0;font-size:.9375rem;color:var(--kf-color-text-muted)}.kf-page-header__actions{flex:none;display:flex;align-items:center;gap:var(--kf-space-sm)}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
 
 const SIBLINGS = 1;
 /**
@@ -4495,6 +5576,13 @@ function buildPaginationItems(current, total) {
  *   <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.
  */
 class Panel {
     title = input.required(/* @ts-ignore */
@@ -4520,7 +5608,7 @@ class Panel {
         <ng-content />
       </div>
     </kf-card>
-  `, isInline: true, styles: [":host{display:block}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-panel__action:hover{text-decoration:underline}.kf-panel__body{display:flex;flex-direction:column;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column}kf-card{flex:1}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-panel__action:hover{text-decoration:underline}.kf-panel__body{display:flex;flex:1;flex-direction:column;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Panel, decorators: [{
             type: Component,
@@ -4540,7 +5628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         <ng-content />
       </div>
     </kf-card>
-  `, styles: [":host{display:block}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-panel__action:hover{text-decoration:underline}.kf-panel__body{display:flex;flex-direction:column;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"] }]
+  `, styles: [":host{display:flex;flex-direction:column}kf-card{flex:1}.kf-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);margin-bottom:var(--kf-space-sm)}.kf-panel__title{font-family:var(--kf-font-title);font-size:1.05rem;font-weight:700;color:var(--kf-color-ink)}.kf-panel__action{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-panel__action:hover{text-decoration:underline}.kf-panel__body{display:flex;flex:1;flex-direction:column;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }] } });
 
 /**
@@ -4552,12 +5640,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Es distinto de `kf-page-header`/`kf-page-head` (título de una vista
  * interna) — este es el chrome global del portal, se monta una sola vez.
  *
+ * `:host` es `position: sticky; top: 0` — el header queda pegado arriba al
+ * hacer scroll. No es `fixed`: como no se superpone al contenido en el
+ * primer render, no hace falta que el consumidor compense con
+ * `padding-top`.
+ *
+ * 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
+ * `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`, mismo criterio de "no reimplementar nada del drawer": el
+ *   footer ya trae su propio padding/separador (ver `Drawer.ts`).
+ *
+ * `PortalHeader` no sabe qué es ninguno de los dos contenidos ni cómo se
+ * abren, solo les da el lugar correcto dentro del drawer ya desplegado.
+ * `kf-drawer` resuelve overlay con blur, cierre con click-afuera/`Escape`,
+ * atrapado de foco real y devolución de foco al cerrar — `PortalHeader` no
+ * reimplementa nada de eso, solo controla su `open` desde el botón de
+ * hamburguesa.
+ *
  *   <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' }]"
  *     userInitials="TS"
- *   />
+ *   >
+ *     <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>
  */
 class PortalHeader {
     brand = input('DIVEMOTOR', /* @ts-ignore */
@@ -4570,8 +5697,24 @@ class PortalHeader {
     userInitials = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "userInitials" }] : /* istanbul ignore next */ []));
     sessionClick = output();
+    /** 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`. */
+    mobileMenuOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileMenuOpen" }] : /* istanbul ignore next */ []));
+    /**
+     * `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`
+     * externo — sin esto, el único `ElementRef` disponible desde afuera es el
+     * del host de `PortalHeader`, que ocupa el ancho completo de la pantalla
+     * (logo + nav + sesión), y el overlay del CDK termina "pegado" a la
+     * esquina del header entero en vez de al botón que el usuario clickeó.
+     *
+     *   <kf-dropdown [(open)]="menuOpen" [anchor]="header().sessionButtonRef()">
+     */
+    sessionButtonRef = viewChild.required('sessionButton', { ...(ngDevMode ? { debugName: "sessionButtonRef" } : /* istanbul ignore next */ {}), read: ElementRef });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PortalHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: PortalHeader, isStandalone: true, selector: "kf-portal-header", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, adminActions: { classPropertyName: "adminActions", publicName: "adminActions", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, userInitials: { classPropertyName: "userInitials", publicName: "userInitials", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sessionClick: "sessionClick" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: PortalHeader, isStandalone: true, selector: "kf-portal-header", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, isAdmin: { classPropertyName: "isAdmin", publicName: "isAdmin", isSignal: true, isRequired: false, transformFunction: null }, adminActions: { classPropertyName: "adminActions", publicName: "adminActions", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, userInitials: { classPropertyName: "userInitials", publicName: "userInitials", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { sessionClick: "sessionClick" }, viewQueries: [{ propertyName: "sessionButtonRef", first: true, predicate: ["sessionButton"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: `
     @if (isAdmin()) {
       <div class="kf-portal-header__admin-bar">
         <kf-admin-badge inline />
@@ -4584,6 +5727,7 @@ class PortalHeader {
     }
     <div class="kf-portal-header__brand-bar">
       <span class="kf-portal-header__logo">{{ brand() }}</span>
+
       <nav class="kf-portal-header__nav">
         @for (item of navItems(); track item.label) {
           <a
@@ -4595,15 +5739,54 @@ class PortalHeader {
           </a>
         }
       </nav>
-      <button type="button" class="kf-portal-header__session" (click)="sessionClick.emit()">
+
+      <button
+        #sessionButton
+        type="button"
+        class="kf-portal-header__session"
+        (click)="sessionClick.emit()"
+      >
         <kf-avatar [initials]="userInitials()" pill />
       </button>
+
+      <button
+        type="button"
+        class="kf-portal-header__menu-toggle"
+        [attr.aria-expanded]="mobileMenuOpen()"
+        aria-label="Abrir menú de navegación"
+        (click)="mobileMenuOpen.set(!mobileMenuOpen())"
+      >
+        <kf-icon [name]="mobileMenuOpen() ? 'x' : 'menu'" size="md" />
+      </button>
     </div>
-  `, isInline: true, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-portal-header__admin-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);padding:var(--kf-space-xs) var(--kf-space-lg);background:var(--kf-color-tertiary-deep)}.kf-portal-header__admin-actions{display:flex;gap:var(--kf-space-md)}.kf-portal-header__admin-action{font-size:.8125rem;font-weight:600;color:#ffffffd9;text-decoration:none}.kf-portal-header__admin-action:hover{color:var(--kf-color-white)}.kf-portal-header__brand-bar{display:flex;align-items:center;gap:var(--kf-space-lg);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-tertiary-deep);border-top:1px solid rgba(255,255,255,.1)}.kf-portal-header__logo{font-family:var(--kf-font-title);font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:var(--kf-color-white);text-transform:uppercase}.kf-portal-header__nav{display:flex;align-items:center;gap:var(--kf-space-xs);flex:1 1 auto}.kf-portal-header__nav-item{padding:var(--kf-space-xs) var(--kf-space-md);border-radius:var(--kf-radius-sm);color:#ffffffbf;font-size:.875rem;font-weight:600;text-decoration:none;transition:background .14s,color .14s}.kf-portal-header__nav-item:hover:not(.kf-portal-header__nav-item--active){color:var(--kf-color-white)}.kf-portal-header__nav-item--active{background:var(--kf-color-white);color:var(--kf-color-ink)}.kf-portal-header__session{flex:none;border:none;background:transparent;padding:0;cursor:pointer}\n"], dependencies: [{ kind: "component", type: AdminBadge, selector: "kf-admin-badge", inputs: ["inline"] }, { kind: "component", type: Avatar, selector: "kf-avatar", inputs: ["initials", "src", "round", "pill"] }] });
+
+    <kf-drawer [(open)]="mobileMenuOpen" ariaLabel="Menú de navegación">
+      <div kf-drawer-header>
+        <ng-content select="[kf-portal-header-extra]" />
+      </div>
+      @for (item of navItems(); track item.label) {
+        <a
+          class="kf-portal-header__mobile-nav-item"
+          [class.kf-portal-header__mobile-nav-item--active]="item.active"
+          [href]="item.href"
+          (click)="mobileMenuOpen.set(false)"
+        >
+          @if (item.icon) {
+            <kf-icon [name]="item.icon" size="sm" />
+          }
+          <span class="kf-portal-header__mobile-nav-item-label">{{ item.label }}</span>
+          <kf-icon name="chevron-right" size="sm" />
+        </a>
+      }
+      <div kf-drawer-footer>
+        <ng-content select="[kf-portal-header-footer]" />
+      </div>
+    </kf-drawer>
+  `, isInline: true, styles: [":host{display:block;position:sticky;top:0;z-index:30;font-family:var(--kf-font-body)}.kf-portal-header__admin-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);padding:var(--kf-space-xs) var(--kf-space-lg);background:var(--kf-color-tertiary-deep)}.kf-portal-header__admin-actions{display:flex;gap:var(--kf-space-md)}.kf-portal-header__admin-action{font-size:.8125rem;font-weight:600;color:#ffffffd9;text-decoration:none}.kf-portal-header__admin-action:hover{color:var(--kf-color-white)}.kf-portal-header__brand-bar{display:flex;align-items:center;gap:var(--kf-space-lg);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-tertiary-deep);border-top:1px solid rgba(255,255,255,.1)}.kf-portal-header__logo{font-family:var(--kf-font-title);font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:var(--kf-color-white);text-transform:uppercase;flex:1 1 auto;min-width:0}.kf-portal-header__nav{display:flex;align-items:center;gap:var(--kf-space-xs);flex:1 1 auto}.kf-portal-header__nav-item{padding:var(--kf-space-xs) var(--kf-space-md);border-radius:var(--kf-radius-sm);color:#ffffffbf;font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .14s,color .14s}.kf-portal-header__nav-item:hover:not(.kf-portal-header__nav-item--active){color:var(--kf-color-white)}.kf-portal-header__nav-item--active{background:var(--kf-color-white);color:var(--kf-color-ink)}.kf-portal-header__session{flex:none;border:none;background:transparent;padding:0;cursor:pointer}.kf-portal-header__menu-toggle{display:none;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-white);cursor:pointer}.kf-portal-header__menu-toggle:hover{background:#ffffff1a}.kf-portal-header__mobile-nav-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-xs);color:var(--kf-color-text);font-size:.9375rem;font-weight:600;text-decoration:none;border-radius:var(--kf-radius-sm)}.kf-portal-header__mobile-nav-item:hover{background:var(--kf-color-surface)}.kf-portal-header__mobile-nav-item--active{color:var(--kf-color-primary-active);background:var(--kf-color-primary-soft)}.kf-portal-header__mobile-nav-item-label{flex:1 1 auto}.kf-portal-header__mobile-nav-item kf-icon:last-child{color:#171d2559}@media(max-width:768px){.kf-portal-header__nav,.kf-portal-header__session{display:none}.kf-portal-header__menu-toggle{display:inline-flex}}\n"], dependencies: [{ kind: "component", type: AdminBadge, selector: "kf-admin-badge", inputs: ["inline"] }, { kind: "component", type: Avatar, selector: "kf-avatar", inputs: ["initials", "src", "round", "pill"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }, { kind: "component", type: Drawer, selector: "kf-drawer", inputs: ["open", "side", "ariaLabel"], outputs: ["openChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PortalHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-portal-header', imports: [AdminBadge, Avatar], template: `
+            args: [{ selector: 'kf-portal-header', imports: [AdminBadge, Avatar, Icon, Drawer], template: `
     @if (isAdmin()) {
       <div class="kf-portal-header__admin-bar">
         <kf-admin-badge inline />
@@ -4616,6 +5799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
     }
     <div class="kf-portal-header__brand-bar">
       <span class="kf-portal-header__logo">{{ brand() }}</span>
+
       <nav class="kf-portal-header__nav">
         @for (item of navItems(); track item.label) {
           <a
@@ -4627,12 +5811,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
           </a>
         }
       </nav>
-      <button type="button" class="kf-portal-header__session" (click)="sessionClick.emit()">
+
+      <button
+        #sessionButton
+        type="button"
+        class="kf-portal-header__session"
+        (click)="sessionClick.emit()"
+      >
         <kf-avatar [initials]="userInitials()" pill />
       </button>
+
+      <button
+        type="button"
+        class="kf-portal-header__menu-toggle"
+        [attr.aria-expanded]="mobileMenuOpen()"
+        aria-label="Abrir menú de navegación"
+        (click)="mobileMenuOpen.set(!mobileMenuOpen())"
+      >
+        <kf-icon [name]="mobileMenuOpen() ? 'x' : 'menu'" size="md" />
+      </button>
     </div>
-  `, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-portal-header__admin-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);padding:var(--kf-space-xs) var(--kf-space-lg);background:var(--kf-color-tertiary-deep)}.kf-portal-header__admin-actions{display:flex;gap:var(--kf-space-md)}.kf-portal-header__admin-action{font-size:.8125rem;font-weight:600;color:#ffffffd9;text-decoration:none}.kf-portal-header__admin-action:hover{color:var(--kf-color-white)}.kf-portal-header__brand-bar{display:flex;align-items:center;gap:var(--kf-space-lg);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-tertiary-deep);border-top:1px solid rgba(255,255,255,.1)}.kf-portal-header__logo{font-family:var(--kf-font-title);font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:var(--kf-color-white);text-transform:uppercase}.kf-portal-header__nav{display:flex;align-items:center;gap:var(--kf-space-xs);flex:1 1 auto}.kf-portal-header__nav-item{padding:var(--kf-space-xs) var(--kf-space-md);border-radius:var(--kf-radius-sm);color:#ffffffbf;font-size:.875rem;font-weight:600;text-decoration:none;transition:background .14s,color .14s}.kf-portal-header__nav-item:hover:not(.kf-portal-header__nav-item--active){color:var(--kf-color-white)}.kf-portal-header__nav-item--active{background:var(--kf-color-white);color:var(--kf-color-ink)}.kf-portal-header__session{flex:none;border:none;background:transparent;padding:0;cursor:pointer}\n"] }]
-        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], isAdmin: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAdmin", required: false }] }], adminActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminActions", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], userInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInitials", required: true }] }], sessionClick: [{ type: i0.Output, args: ["sessionClick"] }] } });
+
+    <kf-drawer [(open)]="mobileMenuOpen" ariaLabel="Menú de navegación">
+      <div kf-drawer-header>
+        <ng-content select="[kf-portal-header-extra]" />
+      </div>
+      @for (item of navItems(); track item.label) {
+        <a
+          class="kf-portal-header__mobile-nav-item"
+          [class.kf-portal-header__mobile-nav-item--active]="item.active"
+          [href]="item.href"
+          (click)="mobileMenuOpen.set(false)"
+        >
+          @if (item.icon) {
+            <kf-icon [name]="item.icon" size="sm" />
+          }
+          <span class="kf-portal-header__mobile-nav-item-label">{{ item.label }}</span>
+          <kf-icon name="chevron-right" size="sm" />
+        </a>
+      }
+      <div kf-drawer-footer>
+        <ng-content select="[kf-portal-header-footer]" />
+      </div>
+    </kf-drawer>
+  `, styles: [":host{display:block;position:sticky;top:0;z-index:30;font-family:var(--kf-font-body)}.kf-portal-header__admin-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-md);padding:var(--kf-space-xs) var(--kf-space-lg);background:var(--kf-color-tertiary-deep)}.kf-portal-header__admin-actions{display:flex;gap:var(--kf-space-md)}.kf-portal-header__admin-action{font-size:.8125rem;font-weight:600;color:#ffffffd9;text-decoration:none}.kf-portal-header__admin-action:hover{color:var(--kf-color-white)}.kf-portal-header__brand-bar{display:flex;align-items:center;gap:var(--kf-space-lg);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-tertiary-deep);border-top:1px solid rgba(255,255,255,.1)}.kf-portal-header__logo{font-family:var(--kf-font-title);font-size:1.25rem;font-weight:700;letter-spacing:.02em;color:var(--kf-color-white);text-transform:uppercase;flex:1 1 auto;min-width:0}.kf-portal-header__nav{display:flex;align-items:center;gap:var(--kf-space-xs);flex:1 1 auto}.kf-portal-header__nav-item{padding:var(--kf-space-xs) var(--kf-space-md);border-radius:var(--kf-radius-sm);color:#ffffffbf;font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .14s,color .14s}.kf-portal-header__nav-item:hover:not(.kf-portal-header__nav-item--active){color:var(--kf-color-white)}.kf-portal-header__nav-item--active{background:var(--kf-color-white);color:var(--kf-color-ink)}.kf-portal-header__session{flex:none;border:none;background:transparent;padding:0;cursor:pointer}.kf-portal-header__menu-toggle{display:none;flex:none;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-white);cursor:pointer}.kf-portal-header__menu-toggle:hover{background:#ffffff1a}.kf-portal-header__mobile-nav-item{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-xs);color:var(--kf-color-text);font-size:.9375rem;font-weight:600;text-decoration:none;border-radius:var(--kf-radius-sm)}.kf-portal-header__mobile-nav-item:hover{background:var(--kf-color-surface)}.kf-portal-header__mobile-nav-item--active{color:var(--kf-color-primary-active);background:var(--kf-color-primary-soft)}.kf-portal-header__mobile-nav-item-label{flex:1 1 auto}.kf-portal-header__mobile-nav-item kf-icon:last-child{color:#171d2559}@media(max-width:768px){.kf-portal-header__nav,.kf-portal-header__session{display:none}.kf-portal-header__menu-toggle{display:inline-flex}}\n"] }]
+        }], propDecorators: { brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], isAdmin: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAdmin", required: false }] }], adminActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "adminActions", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], userInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "userInitials", required: true }] }], sessionClick: [{ type: i0.Output, args: ["sessionClick"] }], sessionButtonRef: [{ type: i0.ViewChild, args: ['sessionButton', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * Estado vacío de reservas en taller con llamada a agendar (página 36):
@@ -4645,7 +5868,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * 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>
@@ -4663,13 +5891,15 @@ class ReserveBlock {
     ...(ngDevMode ? [undefined, { debugName: "actionLabel" }] : /* istanbul ignore next */ []));
     actionHref = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "actionHref" }] : /* istanbul ignore next */ []));
+    /** La invitación se estira para llenar la tarjeta (ej. junto a "Total de vehículos"). */
+    grow = input(false, { ...(ngDevMode ? { debugName: "grow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ReserveBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ReserveBlock, isStandalone: true, selector: "kf-reserve-block", inputs: { emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ReserveBlock, isStandalone: true, selector: "kf-reserve-block", inputs: { emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null }, grow: { classPropertyName: "grow", publicName: "grow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <div class="kf-reserve-block__empty">
       <kf-icon name="calendar" size="sm" />
       <span>{{ emptyLabel() }}</span>
     </div>
-    <div class="kf-reserve-block__invite">
+    <div class="kf-reserve-block__invite" [class.kf-reserve-block__invite--grow]="grow()">
       <span class="kf-reserve-block__invite-icon">
         <kf-icon name="tool" size="md" />
       </span>
@@ -4689,7 +5919,7 @@ class ReserveBlock {
     <div class="kf-reserve-block__actions">
       <ng-content select="[actions]" />
     </div>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-sm);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font-family:var(--kf-font-body)}.kf-reserve-block__empty{display:flex;align-items:center;gap:var(--kf-space-xs);padding-bottom:var(--kf-space-sm);border-bottom:1px solid var(--kf-color-border);color:var(--kf-color-text-muted);font-size:.875rem}.kf-reserve-block__invite{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft)}.kf-reserve-block__invite-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.25rem;height:2.25rem;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white)}.kf-reserve-block__invite-text{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-reserve-block__invite-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-reserve-block__invite-description{font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-reserve-block__invite-action{display:inline-flex;align-items:center;gap:2px;margin-top:var(--kf-space-xs);font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-reserve-block__invite-action:hover{text-decoration:underline}.kf-reserve-block__actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-sm);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font-family:var(--kf-font-body)}.kf-reserve-block__empty{display:flex;align-items:center;gap:var(--kf-space-xs);padding-bottom:var(--kf-space-sm);border-bottom:1px solid var(--kf-color-border);color:var(--kf-color-text-muted);font-size:.875rem}.kf-reserve-block__invite{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft)}.kf-reserve-block__invite--grow{flex:1}.kf-reserve-block__invite-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.25rem;height:2.25rem;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white)}.kf-reserve-block__invite-text{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-reserve-block__invite-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-reserve-block__invite-description{font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-reserve-block__invite-action{display:inline-flex;align-items:center;gap:2px;margin-top:var(--kf-space-xs);font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-reserve-block__invite-action:hover{text-decoration:underline}.kf-reserve-block__actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ReserveBlock, decorators: [{
             type: Component,
@@ -4698,7 +5928,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
       <kf-icon name="calendar" size="sm" />
       <span>{{ emptyLabel() }}</span>
     </div>
-    <div class="kf-reserve-block__invite">
+    <div class="kf-reserve-block__invite" [class.kf-reserve-block__invite--grow]="grow()">
       <span class="kf-reserve-block__invite-icon">
         <kf-icon name="tool" size="md" />
       </span>
@@ -4718,8 +5948,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
     <div class="kf-reserve-block__actions">
       <ng-content select="[actions]" />
     </div>
-  `, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-sm);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font-family:var(--kf-font-body)}.kf-reserve-block__empty{display:flex;align-items:center;gap:var(--kf-space-xs);padding-bottom:var(--kf-space-sm);border-bottom:1px solid var(--kf-color-border);color:var(--kf-color-text-muted);font-size:.875rem}.kf-reserve-block__invite{display:flex;align-items:flex-start;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft)}.kf-reserve-block__invite-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.25rem;height:2.25rem;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white)}.kf-reserve-block__invite-text{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-reserve-block__invite-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-reserve-block__invite-description{font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-reserve-block__invite-action{display:inline-flex;align-items:center;gap:2px;margin-top:var(--kf-space-xs);font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-reserve-block__invite-action:hover{text-decoration:underline}.kf-reserve-block__actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm)}\n"] }]
-        }], propDecorators: { emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }] } });
+  `, styles: [":host{display:flex;flex-direction:column;gap:var(--kf-space-sm);padding:var(--kf-space-md);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);font-family:var(--kf-font-body)}.kf-reserve-block__empty{display:flex;align-items:center;gap:var(--kf-space-xs);padding-bottom:var(--kf-space-sm);border-bottom:1px solid var(--kf-color-border);color:var(--kf-color-text-muted);font-size:.875rem}.kf-reserve-block__invite{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft)}.kf-reserve-block__invite--grow{flex:1}.kf-reserve-block__invite-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:2.25rem;height:2.25rem;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary);color:var(--kf-color-white)}.kf-reserve-block__invite-text{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-reserve-block__invite-title{font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-reserve-block__invite-description{font-size:.8125rem;color:var(--kf-color-text-muted)}.kf-reserve-block__invite-action{display:inline-flex;align-items:center;gap:2px;margin-top:var(--kf-space-xs);font-size:.8125rem;font-weight:600;color:var(--kf-color-primary);text-decoration:none}.kf-reserve-block__invite-action:hover{text-decoration:underline}.kf-reserve-block__actions{display:flex;flex-wrap:wrap;gap:var(--kf-space-sm)}\n"] }]
+        }], propDecorators: { emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], actionHref: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionHref", required: false }] }], grow: [{ type: i0.Input, args: [{ isSignal: true, alias: "grow", required: false }] }] } });
 
 /**
  * Título de sub-sección con chip de ícono, pensado para anidarse dentro de
@@ -4884,6 +6114,471 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, styles: [":host{display:inline-block}.kf-segmented__track{position:relative;display:grid;grid-template-columns:repeat(var(--kf-segmented-count),1fr);gap:2px;padding:2px;background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md)}.kf-segmented__thumb{position:absolute;top:2px;left:2px;width:calc((100% - 4px) / var(--kf-segmented-count));height:calc(100% - 4px);background:var(--kf-color-white);border-radius:var(--kf-radius-sm);box-shadow:var(--kf-shadow-xs);transform:translate(calc(var(--kf-segmented-index, 0) * 100%));transition:transform .2s ease}.kf-segmented__option{position:relative;z-index:1;font:inherit;padding:var(--kf-space-xs) var(--kf-space-md);border:none;background:transparent;color:var(--kf-color-text-muted);border-radius:var(--kf-radius-sm);cursor:pointer;transition:color .14s}.kf-segmented__option:hover:not(.kf-segmented__option--active){color:var(--kf-color-text)}.kf-segmented__option--active{color:var(--kf-color-ink)}.kf-segmented__option:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"] }]
         }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
+/**
+ * Contenido visual del tooltip — componente interno, no exportado en
+ * `public-api.ts`. `TooltipDirective` es la única forma pública de usarlo.
+ */
+class TooltipContent {
+    text = '';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TooltipContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: TooltipContent, isStandalone: true, selector: "kf-tooltip-content", ngImport: i0, template: `{{ text }}`, isInline: true, styles: [":host{display:block;max-width:220px;padding:4px var(--kf-space-sm);border-radius:var(--kf-radius-sm);background:var(--kf-color-tertiary-deep);color:var(--kf-color-white);font-family:var(--kf-font-body);font-size:.75rem;font-weight:600;line-height:1.4;white-space:nowrap;box-shadow:var(--kf-shadow-lg);animation:kf-tooltip-enter .1s ease-out;pointer-events:none}@media(prefers-reduced-motion:reduce){:host{animation:none}}@keyframes kf-tooltip-enter{0%{opacity:0}to{opacity:1}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TooltipContent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-tooltip-content', template: `{{ text }}`, styles: [":host{display:block;max-width:220px;padding:4px var(--kf-space-sm);border-radius:var(--kf-radius-sm);background:var(--kf-color-tertiary-deep);color:var(--kf-color-white);font-family:var(--kf-font-body);font-size:.75rem;font-weight:600;line-height:1.4;white-space:nowrap;box-shadow:var(--kf-shadow-lg);animation:kf-tooltip-enter .1s ease-out;pointer-events:none}@media(prefers-reduced-motion:reduce){:host{animation:none}}@keyframes kf-tooltip-enter{0%{opacity:0}to{opacity:1}}\n"] }]
+        }] });
+/**
+ * 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>
+ */
+class TooltipDirective {
+    text = '';
+    kfTooltipPosition = 'right';
+    host = inject((ElementRef));
+    overlayService = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    overlayRef = null;
+    show() {
+        if (!this.text || this.overlayRef?.hasAttached()) {
+            return;
+        }
+        const positionStrategy = this.overlayService
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions(this.positionsFor(this.kfTooltipPosition))
+            .withViewportMargin(8)
+            .withPush(true);
+        const overlayRef = this.overlayService.create({
+            positionStrategy,
+            scrollStrategy: this.overlayService.scrollStrategies.reposition(),
+        });
+        const portal = new ComponentPortal(TooltipContent, this.viewContainerRef, this.injector);
+        const componentRef = overlayRef.attach(portal);
+        componentRef.instance.text = this.text;
+        this.overlayRef = overlayRef;
+    }
+    hide() {
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+    }
+    positionsFor(placement) {
+        const gap = 12;
+        switch (placement) {
+            case 'right':
+                return [
+                    {
+                        originX: 'end',
+                        originY: 'center',
+                        overlayX: 'start',
+                        overlayY: 'center',
+                        offsetX: gap,
+                    },
+                ];
+            case 'left':
+                return [
+                    {
+                        originX: 'start',
+                        originY: 'center',
+                        overlayX: 'end',
+                        overlayY: 'center',
+                        offsetX: -gap,
+                    },
+                ];
+            case 'top':
+                return [
+                    {
+                        originX: 'center',
+                        originY: 'top',
+                        overlayX: 'center',
+                        overlayY: 'bottom',
+                        offsetY: -gap,
+                    },
+                ];
+            case 'bottom':
+            default:
+                return [
+                    {
+                        originX: 'center',
+                        originY: 'bottom',
+                        overlayX: 'center',
+                        overlayY: 'top',
+                        offsetY: gap,
+                    },
+                ];
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: TooltipDirective, isStandalone: true, selector: "[kfTooltip]", inputs: { text: ["kfTooltip", "text"], kfTooltipPosition: "kfTooltipPosition" }, host: { listeners: { "mouseenter": "show()", "focus": "show()", "mouseleave": "hide()", "blur": "hide()", "document:keydown.escape": "hide()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: TooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kfTooltip]',
+                }]
+        }], propDecorators: { text: [{
+                type: Input$1,
+                args: ['kfTooltip']
+            }], kfTooltipPosition: [{
+                type: Input$1
+            }], show: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }, {
+                type: HostListener,
+                args: ['focus']
+            }], hide: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }, {
+                type: HostListener,
+                args: ['blur']
+            }, {
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
+/**
+ * Ítem de navegación de `kf-sidebar-shell` — ícono + label en fila, estado
+ * activo, sin agrupación. Es el equivalente vertical/persistente del `<a>`
+ * que arma `kf-portal-header` para su `<nav>` horizontal.
+ *
+ * `collapsed` se recibe como input explícito (no vía `:host-context`): el
+ * componente no necesita saber cómo funciona el estado de colapso del
+ * shell, solo qué hacer cuando `collapsed` es `true`.
+ *
+ * No sabe nada de routing — emite `href` como cualquier link y deja que el
+ * consumidor intercepte el click para integrarlo con el Router.
+ */
+class SidebarNavItem {
+    icon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    href = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Oculta el label y centra el ícono — lo controla `kf-sidebar-shell` según su propio estado de colapso. */
+    collapsed = input(false, { ...(ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SidebarNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SidebarNavItem, isStandalone: true, selector: "kf-sidebar-nav-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <a
+      class="kf-sidebar-nav-item"
+      [class.kf-sidebar-nav-item--active]="active()"
+      [class.kf-sidebar-nav-item--collapsed]="collapsed()"
+      [href]="href()"
+      [attr.aria-current]="active() ? 'page' : null"
+      [kfTooltip]="collapsed() ? label() : ''"
+    >
+      <kf-icon [name]="icon()" size="md" />
+      @if (!collapsed()) {
+        <span class="kf-sidebar-nav-item__label">{{ label() }}</span>
+      }
+    </a>
+  `, isInline: true, styles: [".kf-sidebar-nav-item{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-radius:var(--kf-radius-sm);color:#ffffffb3;font-family:var(--kf-font-body);font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .14s,color .14s}.kf-sidebar-nav-item:hover:not(.kf-sidebar-nav-item--active){background:#ffffff0f;color:var(--kf-color-white)}.kf-sidebar-nav-item--collapsed:hover:not(.kf-sidebar-nav-item--active){background:#ffffff1f}.kf-sidebar-nav-item--active{background:#ffffff1f;color:var(--kf-color-white)}.kf-sidebar-nav-item--active:before{content:\"\";position:absolute;left:calc(-1 * var(--kf-space-xs));top:20%;bottom:20%;width:3px;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary-hover)}.kf-sidebar-nav-item--collapsed{justify-content:center;width:40px;height:40px;padding-inline:0}.kf-sidebar-nav-item--collapsed.kf-sidebar-nav-item--active:before{left:calc(-1 * var(--kf-space-sm))}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }, { kind: "directive", type: TooltipDirective, selector: "[kfTooltip]", inputs: ["kfTooltip", "kfTooltipPosition"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SidebarNavItem, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-sidebar-nav-item', imports: [Icon, TooltipDirective], template: `
+    <a
+      class="kf-sidebar-nav-item"
+      [class.kf-sidebar-nav-item--active]="active()"
+      [class.kf-sidebar-nav-item--collapsed]="collapsed()"
+      [href]="href()"
+      [attr.aria-current]="active() ? 'page' : null"
+      [kfTooltip]="collapsed() ? label() : ''"
+    >
+      <kf-icon [name]="icon()" size="md" />
+      @if (!collapsed()) {
+        <span class="kf-sidebar-nav-item__label">{{ label() }}</span>
+      }
+    </a>
+  `, styles: [".kf-sidebar-nav-item{box-sizing:border-box;position:relative;display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-radius:var(--kf-radius-sm);color:#ffffffb3;font-family:var(--kf-font-body);font-size:.875rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .14s,color .14s}.kf-sidebar-nav-item:hover:not(.kf-sidebar-nav-item--active){background:#ffffff0f;color:var(--kf-color-white)}.kf-sidebar-nav-item--collapsed:hover:not(.kf-sidebar-nav-item--active){background:#ffffff1f}.kf-sidebar-nav-item--active{background:#ffffff1f;color:var(--kf-color-white)}.kf-sidebar-nav-item--active:before{content:\"\";position:absolute;left:calc(-1 * var(--kf-space-xs));top:20%;bottom:20%;width:3px;border-radius:var(--kf-radius-pill);background:var(--kf-color-primary-hover)}.kf-sidebar-nav-item--collapsed{justify-content:center;width:40px;height:40px;padding-inline:0}.kf-sidebar-nav-item--collapsed.kf-sidebar-nav-item--active:before{left:calc(-1 * var(--kf-space-sm))}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+
+/**
+ * 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()"
+ */
+function matchMediaSignal(query) {
+    const mediaQueryList = matchMedia(query);
+    const state = signal(mediaQueryList.matches, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    const onChange = (event) => state.set(event.matches);
+    mediaQueryList.addEventListener('change', onChange);
+    inject(DestroyRef).onDestroy(() => mediaQueryList.removeEventListener('change', onChange));
+    return state.asReadonly();
+}
+
+/** Mismo breakpoint que el `@media` de este componente — ver estilos. */
+const MOBILE_BREAKPOINT_QUERY = '(max-width: 900px)';
+/**
+ * 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 y duplicaría el
+ * árbol de navegación en un segundo lugar del DOM. Bug de contraste ya
+ * corregido en el historial: los `kf-sidebar-nav-item`, con texto claro
+ * pensado para el gradiente oscuro, quedaban invisibles sobre el fondo
+ * blanco de `kf-drawer`. Acá hay un solo rail, un solo árbol de nav, que
+ * cambia de posición según el viewport.
+ */
+class SidebarShell {
+    /** Ítems del menú del rail. */
+    navItems = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []));
+    /** Estado de colapso del rail en desktop, two-way. Sin efecto bajo los 900px (ver estilos). */
+    collapsed = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Visibilidad del rail deslizado como panel en mobile, two-way. */
+    mobileOpen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobileOpen" }] : /* istanbul ignore next */ []));
+    /** Se emite al clickear un ítem — el consumidor decide cómo navegar (ej. `router.navigateByUrl`). */
+    navItemClick = output();
+    /** `true` bajo los 900px — sin esto, un rail dejado colapsado en desktop
+     * seguía ocultando el label de cada ítem al abrir el panel en mobile. */
+    isMobileViewport = matchMediaSignal(MOBILE_BREAKPOINT_QUERY);
+    /** Estado de colapso que efectivamente se le pasa a cada `kf-sidebar-nav-item`
+     * y al propio botón de colapso. */
+    itemsCollapsed = computed(() => this.collapsed() && !this.isMobileViewport(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemsCollapsed" }] : /* istanbul ignore next */ []));
+    /** Cierra el panel mobile con Escape — mismo criterio que `Dropdown`/`Modal`/`Drawer`. */
+    onEscape() {
+        this.mobileOpen.set(false);
+    }
+    onNavItemClick(event, item) {
+        event.preventDefault();
+        this.mobileOpen.set(false);
+        this.navItemClick.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SidebarShell, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SidebarShell, isStandalone: true, selector: "kf-sidebar-shell", inputs: { navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", mobileOpen: "mobileOpenChange", navItemClick: "navItemClick" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: `
+    @if (mobileOpen()) {
+      <button
+        type="button"
+        class="kf-sidebar-shell__backdrop"
+        aria-label="Cerrar menú"
+        (click)="mobileOpen.set(false)"
+      ></button>
+    }
+
+    <aside
+      class="kf-sidebar-shell__rail"
+      [class.kf-sidebar-shell__rail--collapsed]="collapsed()"
+      [class.kf-sidebar-shell__rail--mobile-open]="mobileOpen()"
+    >
+      <div class="kf-sidebar-shell__brand">
+        <div class="kf-sidebar-shell__brand-full">
+          <ng-content select="[kf-sidebar-brand]" />
+        </div>
+        <div class="kf-sidebar-shell__brand-collapsed">
+          <ng-content select="[kf-sidebar-brand-collapsed]" />
+        </div>
+
+        <button
+          type="button"
+          class="kf-sidebar-shell__mobile-close"
+          aria-label="Cerrar menú"
+          (click)="mobileOpen.set(false)"
+        >
+          <kf-icon name="x" size="md" />
+        </button>
+      </div>
+
+      <nav class="kf-sidebar-shell__nav">
+        @for (item of navItems(); track item.href) {
+          <kf-sidebar-nav-item
+            [icon]="item.icon"
+            [label]="item.label"
+            [href]="item.href"
+            [active]="!!item.active"
+            [collapsed]="itemsCollapsed()"
+            (click)="onNavItemClick($event, item)"
+          />
+        }
+      </nav>
+
+      <div class="kf-sidebar-shell__bottom">
+        <button
+          type="button"
+          class="kf-sidebar-shell__collapse-toggle"
+          [class.kf-sidebar-shell__collapse-toggle--collapsed]="itemsCollapsed()"
+          [attr.aria-expanded]="!collapsed()"
+          [attr.aria-label]="collapsed() ? 'Expandir menú' : 'Colapsar menú'"
+          [kfTooltip]="itemsCollapsed() ? (collapsed() ? 'Expandir menú' : 'Colapsar menú') : ''"
+          (click)="collapsed.set(!collapsed())"
+        >
+          <kf-icon [name]="collapsed() ? 'chevron-right' : 'chevron-left'" size="sm" />
+          @if (!itemsCollapsed()) {
+            <span class="kf-sidebar-shell__collapse-toggle-label">
+              {{ collapsed() ? 'Expandir menú' : 'Colapsar menú' }}
+            </span>
+          }
+        </button>
+
+        <div class="kf-sidebar-shell__footer">
+          <ng-content select="[kf-sidebar-footer]" />
+        </div>
+      </div>
+    </aside>
+
+    <div class="kf-sidebar-shell__topbar">
+      <button
+        type="button"
+        class="kf-sidebar-shell__menu-toggle"
+        aria-label="Abrir menú de navegación"
+        (click)="mobileOpen.set(true)"
+      >
+        <kf-icon name="menu" size="md" />
+      </button>
+      <div class="kf-sidebar-shell__topbar-brand">
+        <ng-content select="[kf-sidebar-brand-mobile]" />
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:relative;width:268px;flex:none;padding:var(--kf-space-lg) var(--kf-space-md);background:linear-gradient(190deg,var(--kf-color-sidebar-gradient-from) 0%,var(--kf-color-sidebar-gradient-to) 60%);transition:width .18s ease,padding-inline .18s ease}.kf-sidebar-shell__rail--collapsed{width:56px;padding-inline:var(--kf-space-sm)}.kf-sidebar-shell__brand{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;width:100%}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none}.kf-sidebar-shell__brand-collapsed ::ng-deep img{display:block;height:1.75rem}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-full{display:none}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-collapsed{display:block}.kf-sidebar-shell__mobile-close{display:none;margin-left:auto;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--kf-radius-sm);background:#ffffff14;color:#fffc;cursor:pointer}.kf-sidebar-shell__mobile-close:hover{background:#ffffff29;color:var(--kf-color-white)}.kf-sidebar-shell__nav{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--kf-space-xs);overflow-y:auto}.kf-sidebar-shell__bottom{display:flex;flex-direction:column;margin-top:var(--kf-space-sm);padding-top:var(--kf-space-sm);border-top:1px solid rgba(255,255,255,.12)}.kf-sidebar-shell__footer{margin-top:var(--kf-space-sm)}.kf-sidebar-shell__footer:empty{display:none}.kf-sidebar-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-radius:var(--kf-radius-sm);background:#ffffff0f;color:#ffffffb3;font-family:var(--kf-font-body);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .14s,color .14s}.kf-sidebar-shell__collapse-toggle:hover{background:#ffffff1f;color:var(--kf-color-white)}.kf-sidebar-shell__collapse-toggle--collapsed{justify-content:center;width:40px;height:40px;padding-inline:0}.kf-sidebar-shell__collapse-toggle-label{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-sidebar-shell__topbar{display:none}@media(max-width:900px){.kf-sidebar-shell__rail{position:fixed;inset:0 auto 0 0;z-index:100;width:284px;max-width:86vw;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:var(--kf-shadow-lg)}.kf-sidebar-shell__rail--mobile-open{transform:translate(0)}.kf-sidebar-shell__rail--collapsed{width:284px;max-width:86vw}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-full{display:block}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-collapsed,.kf-sidebar-shell__collapse-toggle{display:none}.kf-sidebar-shell__mobile-close{display:flex}.kf-sidebar-shell__backdrop{display:block;position:fixed;inset:0;z-index:90;border:none;padding:0;cursor:pointer;background:#0a0e1480}.kf-sidebar-shell__topbar{display:flex;align-items:center;gap:var(--kf-space-md);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-white);border-bottom:1px solid var(--kf-color-border)}.kf-sidebar-shell__menu-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-ink);cursor:pointer;flex:none}.kf-sidebar-shell__menu-toggle:hover{background:var(--kf-color-surface)}.kf-sidebar-shell__topbar-brand ::ng-deep img{display:block;height:1.25rem}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size"] }, { kind: "component", type: SidebarNavItem, selector: "kf-sidebar-nav-item", inputs: ["icon", "label", "href", "active", "collapsed"] }, { kind: "directive", type: TooltipDirective, selector: "[kfTooltip]", inputs: ["kfTooltip", "kfTooltipPosition"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SidebarShell, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-sidebar-shell', imports: [Icon, SidebarNavItem, TooltipDirective], template: `
+    @if (mobileOpen()) {
+      <button
+        type="button"
+        class="kf-sidebar-shell__backdrop"
+        aria-label="Cerrar menú"
+        (click)="mobileOpen.set(false)"
+      ></button>
+    }
+
+    <aside
+      class="kf-sidebar-shell__rail"
+      [class.kf-sidebar-shell__rail--collapsed]="collapsed()"
+      [class.kf-sidebar-shell__rail--mobile-open]="mobileOpen()"
+    >
+      <div class="kf-sidebar-shell__brand">
+        <div class="kf-sidebar-shell__brand-full">
+          <ng-content select="[kf-sidebar-brand]" />
+        </div>
+        <div class="kf-sidebar-shell__brand-collapsed">
+          <ng-content select="[kf-sidebar-brand-collapsed]" />
+        </div>
+
+        <button
+          type="button"
+          class="kf-sidebar-shell__mobile-close"
+          aria-label="Cerrar menú"
+          (click)="mobileOpen.set(false)"
+        >
+          <kf-icon name="x" size="md" />
+        </button>
+      </div>
+
+      <nav class="kf-sidebar-shell__nav">
+        @for (item of navItems(); track item.href) {
+          <kf-sidebar-nav-item
+            [icon]="item.icon"
+            [label]="item.label"
+            [href]="item.href"
+            [active]="!!item.active"
+            [collapsed]="itemsCollapsed()"
+            (click)="onNavItemClick($event, item)"
+          />
+        }
+      </nav>
+
+      <div class="kf-sidebar-shell__bottom">
+        <button
+          type="button"
+          class="kf-sidebar-shell__collapse-toggle"
+          [class.kf-sidebar-shell__collapse-toggle--collapsed]="itemsCollapsed()"
+          [attr.aria-expanded]="!collapsed()"
+          [attr.aria-label]="collapsed() ? 'Expandir menú' : 'Colapsar menú'"
+          [kfTooltip]="itemsCollapsed() ? (collapsed() ? 'Expandir menú' : 'Colapsar menú') : ''"
+          (click)="collapsed.set(!collapsed())"
+        >
+          <kf-icon [name]="collapsed() ? 'chevron-right' : 'chevron-left'" size="sm" />
+          @if (!itemsCollapsed()) {
+            <span class="kf-sidebar-shell__collapse-toggle-label">
+              {{ collapsed() ? 'Expandir menú' : 'Colapsar menú' }}
+            </span>
+          }
+        </button>
+
+        <div class="kf-sidebar-shell__footer">
+          <ng-content select="[kf-sidebar-footer]" />
+        </div>
+      </div>
+    </aside>
+
+    <div class="kf-sidebar-shell__topbar">
+      <button
+        type="button"
+        class="kf-sidebar-shell__menu-toggle"
+        aria-label="Abrir menú de navegación"
+        (click)="mobileOpen.set(true)"
+      >
+        <kf-icon name="menu" size="md" />
+      </button>
+      <div class="kf-sidebar-shell__topbar-brand">
+        <ng-content select="[kf-sidebar-brand-mobile]" />
+      </div>
+    </div>
+  `, styles: [":host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:relative;width:268px;flex:none;padding:var(--kf-space-lg) var(--kf-space-md);background:linear-gradient(190deg,var(--kf-color-sidebar-gradient-from) 0%,var(--kf-color-sidebar-gradient-to) 60%);transition:width .18s ease,padding-inline .18s ease}.kf-sidebar-shell__rail--collapsed{width:56px;padding-inline:var(--kf-space-sm)}.kf-sidebar-shell__brand{position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;width:100%}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none}.kf-sidebar-shell__brand-collapsed ::ng-deep img{display:block;height:1.75rem}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-full{display:none}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-collapsed{display:block}.kf-sidebar-shell__mobile-close{display:none;margin-left:auto;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--kf-radius-sm);background:#ffffff14;color:#fffc;cursor:pointer}.kf-sidebar-shell__mobile-close:hover{background:#ffffff29;color:var(--kf-color-white)}.kf-sidebar-shell__nav{flex:1 1 auto;display:flex;flex-direction:column;gap:var(--kf-space-xs);overflow-y:auto}.kf-sidebar-shell__bottom{display:flex;flex-direction:column;margin-top:var(--kf-space-sm);padding-top:var(--kf-space-sm);border-top:1px solid rgba(255,255,255,.12)}.kf-sidebar-shell__footer{margin-top:var(--kf-space-sm)}.kf-sidebar-shell__footer:empty{display:none}.kf-sidebar-shell__collapse-toggle{box-sizing:border-box;display:flex;align-items:center;gap:var(--kf-space-sm);width:100%;padding:var(--kf-space-sm) var(--kf-space-md);border:none;border-radius:var(--kf-radius-sm);background:#ffffff0f;color:#ffffffb3;font-family:var(--kf-font-body);font-size:.8125rem;font-weight:600;cursor:pointer;transition:background .14s,color .14s}.kf-sidebar-shell__collapse-toggle:hover{background:#ffffff1f;color:var(--kf-color-white)}.kf-sidebar-shell__collapse-toggle--collapsed{justify-content:center;width:40px;height:40px;padding-inline:0}.kf-sidebar-shell__collapse-toggle-label{flex:1 1 auto;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-sidebar-shell__topbar{display:none}@media(max-width:900px){.kf-sidebar-shell__rail{position:fixed;inset:0 auto 0 0;z-index:100;width:284px;max-width:86vw;transform:translate(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);box-shadow:var(--kf-shadow-lg)}.kf-sidebar-shell__rail--mobile-open{transform:translate(0)}.kf-sidebar-shell__rail--collapsed{width:284px;max-width:86vw}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-full{display:block}.kf-sidebar-shell__rail--collapsed .kf-sidebar-shell__brand-collapsed,.kf-sidebar-shell__collapse-toggle{display:none}.kf-sidebar-shell__mobile-close{display:flex}.kf-sidebar-shell__backdrop{display:block;position:fixed;inset:0;z-index:90;border:none;padding:0;cursor:pointer;background:#0a0e1480}.kf-sidebar-shell__topbar{display:flex;align-items:center;gap:var(--kf-space-md);padding:var(--kf-space-sm) var(--kf-space-lg);background:var(--kf-color-white);border-bottom:1px solid var(--kf-color-border)}.kf-sidebar-shell__menu-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:var(--kf-radius-sm);background:transparent;color:var(--kf-color-ink);cursor:pointer;flex:none}.kf-sidebar-shell__menu-toggle:hover{background:var(--kf-color-surface)}.kf-sidebar-shell__topbar-brand ::ng-deep img{display:block;height:1.25rem}}\n"] }]
+        }], propDecorators: { navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }, { type: i0.Output, args: ["mobileOpenChange"] }], navItemClick: [{ type: i0.Output, args: ["navItemClick"] }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 /**
  * 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
@@ -5152,109 +6847,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
   `, styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-tabs{position:relative;display:flex;align-items:stretch;gap:var(--kf-space-md);border-bottom:1px solid var(--kf-color-border)}.kf-tabs__tab{display:inline-flex;align-items:center;gap:var(--kf-space-xs);font:inherit;font-size:.9rem;color:var(--kf-color-text-muted);background:transparent;border:none;padding:var(--kf-space-sm) 0;cursor:pointer;transition:color .14s}.kf-tabs__tab:hover:not(.kf-tabs__tab--active){color:var(--kf-color-text)}.kf-tabs__tab:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus);border-radius:var(--kf-radius-xs)}.kf-tabs__tab--active{color:var(--kf-color-primary);font-size:1rem;font-weight:700}.kf-tabs__indicator{position:absolute;bottom:-1px;left:0;height:2px;background:var(--kf-color-primary);border-radius:2px 2px 0 0;pointer-events:none;transition:transform .28s cubic-bezier(.32,.72,0,1),width .28s cubic-bezier(.32,.72,0,1),opacity .14s}@media(prefers-reduced-motion:reduce){.kf-tabs__indicator{transition:opacity .14s}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], track: [{ type: i0.ViewChild, args: ['track', { isSignal: true }] }] } });
 
-/**
- * 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á.
- *
- *   <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>
- */
-class Text {
-    /** Etiqueta semántica real que se renderiza — nunca es solo un `div`. */
-    as = input('p', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "as" }] : /* istanbul ignore next */ []));
-    variant = input('body', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    tone = input('neutral', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-    /**
-     * 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).
-     */
-    tag = computed(() => this.as(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tag" }] : /* istanbul ignore next */ []));
-    hostClass() {
-        const classes = [`kf-text--${this.variant()}`];
-        if (this.tone() !== 'neutral') {
-            classes.push(`kf-text--${this.tone()}`);
-        }
-        return classes.join(' ');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Text, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Text, isStandalone: true, selector: "kf-text", inputs: { as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <!--
-      Una sola proyección compartida (ng-template + ngTemplateOutlet) en vez
-      de un <ng-content> por cada rama del @switch: Angular solo conecta la
-      proyección real del consumidor a la PRIMERA instancia de <ng-content>
-      que encuentra en el árbol de compilación — con un <ng-content> por
-      rama, todas menos una quedan vacías en runtime (bug detectado por
-      Text.spec.ts, no algo documentado a simple vista en los docs de Angular).
-    -->
-    <ng-template #projected><ng-content /></ng-template>
-    @switch (tag()) {
-      @case ('h1') {
-        <h1 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h1>
-      }
-      @case ('h2') {
-        <h2 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h2>
-      }
-      @case ('h3') {
-        <h3 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h3>
-      }
-      @case ('span') {
-        <span [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></span>
-      }
-      @default {
-        <p [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></p>
-      }
-    }
-  `, isInline: true, styles: [":host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--caption{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Text, decorators: [{
-            type: Component,
-            args: [{ selector: 'kf-text', imports: [NgTemplateOutlet], template: `
-    <!--
-      Una sola proyección compartida (ng-template + ngTemplateOutlet) en vez
-      de un <ng-content> por cada rama del @switch: Angular solo conecta la
-      proyección real del consumidor a la PRIMERA instancia de <ng-content>
-      que encuentra en el árbol de compilación — con un <ng-content> por
-      rama, todas menos una quedan vacías en runtime (bug detectado por
-      Text.spec.ts, no algo documentado a simple vista en los docs de Angular).
-    -->
-    <ng-template #projected><ng-content /></ng-template>
-    @switch (tag()) {
-      @case ('h1') {
-        <h1 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h1>
-      }
-      @case ('h2') {
-        <h2 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h2>
-      }
-      @case ('h3') {
-        <h3 [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></h3>
-      }
-      @case ('span') {
-        <span [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></span>
-      }
-      @default {
-        <p [class]="hostClass()"><ng-container [ngTemplateOutlet]="projected" /></p>
-      }
-    }
-  `, styles: [":host{display:contents}h1,h2,h3,p,span{margin:0;font-family:var(--kf-font-body);color:var(--kf-color-text)}.kf-text--title-lg{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-lg);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-md{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--title-sm{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title);color:var(--kf-color-ink)}.kf-text--body{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body)}.kf-text--body-muted{font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--caption{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-text--ok{color:var(--kf-color-success-strong)}.kf-text--warn{color:var(--kf-color-warning-strong)}.kf-text--error{color:var(--kf-color-error-strong)}.kf-text--info{color:var(--kf-color-info-strong)}\n"] }]
-        }], propDecorators: { as: [{ type: i0.Input, args: [{ isSignal: true, alias: "as", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
-
 /** Fixed icon per tone (page 20 of the design system) — not configurable per call. */
 const TOAST_ICON = {
     success: 'check-circle',
@@ -5604,5 +7196,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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, 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 { ActionTile, AdminBadge, Alert, AuthLayout, Avatar, Badge, Breadcrumb, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, CompanySelector, ContentSlot, ContentState, DataTable, Divider, Drawer, DrawerLogout, DrawerSession, Dropdown, DropdownItem, DropdownPanel, EmptyState, FeatureCard, Field, FieldLabel, FilterChips, FolderTabs, FolderTabsPanel, Footer, Icon, Input, Link, MetricCard, Modal, MultiSelect, PageHeader, Pagination, Panel, PortalHeader, ReserveBlock, SectionHeader, Segmented, Select, SidebarNavItem, SidebarShell, Skeleton, Spinner, StatTile, StatusPill, Tabs, Text, ToastHost, ToastService, TooltipDirective, VehicleHeader, ViewToggle };
 //# sourceMappingURL=kaufmann-lab-ui.mjs.map