@kaufmann-lab/ui 0.1.21 → 0.1.22

package/fesm2022/kaufmann-lab-ui-core.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, inject, computed, effect, Component, viewChild, model, output, ElementRef, Injector, signal, afterNextRender, ChangeDetectionStrategy, numberAttribute, contentChildren, DestroyRef, forwardRef, TemplateRef, contentChild, ViewContainerRef, HostListener, afterRenderEffect, untracked, isDevMode, viewChildren, Input as Input$1, Directive, Injectable } from '@angular/core';
+import { input, booleanAttribute, inject, computed, effect, Component, viewChild, model, output, ElementRef, Injector, signal, afterNextRender, ChangeDetectionStrategy, numberAttribute, contentChildren, DestroyRef, forwardRef, TemplateRef, contentChild, ViewContainerRef, afterRenderEffect, untracked, Directive, HostListener, isDevMode, viewChildren, Input as Input$1, Injectable } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, NgControl } from '@angular/forms';
 import { Overlay, OverlayContainer } from '@angular/cdk/overlay';
 import { TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
 import { Subscription } from 'rxjs';
-import { DomSanitizer } from '@angular/platform-browser';
 import { normalizeForSearch, matchMediaSignal, handleArrowKeyNavigation } from '@kaufmann-lab/ui/shared';
+import { DomSanitizer } from '@angular/platform-browser';
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 
 /** Símbolo de trazo "activity" (grilla 24×24) — ver `icons/index.ts` para el registro completo. */
@@ -1236,10 +1236,23 @@ const TONE_ICON = {
  *
  *   <kf-alert tone="warn" title="SOAT por vencer">Vence el 15/08.</kf-alert>
  *   <kf-alert tone="ok" [(open)]="saved" dismissible>Pago registrado.</kf-alert>
+ *
+ * `variant="bar"` es una franja compacta de ancho completo, sin tarjeta: sin
+ * esquinas ni bordes laterales (solo la línea superior e inferior del tono),
+ * ícono, título y mensaje en una sola línea que envuelve si no entra. Mismos
+ * tonos y mismo `role` (`alert` para `error`/`warn`, `status` para el resto)
+ * que la variante `card`. Pensada para el borde de una página o de un panel
+ * (ej. "Estás viendo datos de otro cliente"), donde una tarjeta con margen
+ * sobra.
+ *
+ *   <kf-alert variant="bar" tone="warn" title="Modo suplantación">Viendo como Ana Pérez.</kf-alert>
  */
 class Alert {
     tone = input('info', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** `card` (default) o `bar` (franja compacta de ancho completo). */
+    variant = input('card', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     /** Línea en negrita arriba del mensaje. Vacío deja solo el contenido proyectado. */
     title = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
@@ -1256,12 +1269,12 @@ class Alert {
     toneIcon = computed(() => TONE_ICON[this.tone()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "toneIcon" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Alert, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Alert, isStandalone: true, selector: "kf-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "@if (open()) {\n  <div class=\"kf-alert\" [class]=\"'kf-alert--' + tone()\" [attr.role]=\"ariaRole()\">\n    <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n    <div class=\"kf-alert__body\">\n      @if (title()) {\n        <p class=\"kf-alert__title\">{{ title() }}</p>\n      }\n      <div class=\"kf-alert__message\"><ng-content /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"kf-alert__close\"\n        aria-label=\"Cerrar aviso\"\n        (click)=\"open.set(false)\"\n      >\n        <kf-icon name=\"x\" size=\"sm\" />\n      </button>\n    }\n  </div>\n}\n", 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__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"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Alert, isStandalone: true, selector: "kf-alert", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, ngImport: i0, template: "@if (open()) {\n  <div\n    class=\"kf-alert\"\n    [class]=\"'kf-alert--' + tone()\"\n    [class.kf-alert--bar]=\"variant() === 'bar'\"\n    [attr.role]=\"ariaRole()\"\n  >\n    <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n    <div class=\"kf-alert__body\">\n      @if (title()) {\n        <p class=\"kf-alert__title\">{{ title() }}</p>\n      }\n      <div class=\"kf-alert__message\"><ng-content /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"kf-alert__close\"\n        aria-label=\"Cerrar aviso\"\n        (click)=\"open.set(false)\"\n      >\n        <kf-icon name=\"x\" size=\"sm\" />\n      </button>\n    }\n  </div>\n}\n", 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__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)}.kf-alert--bar{align-items:center;padding:var(--kf-space-xs) var(--kf-space-md);border-width:1px 0;border-radius:0;font-size:.875rem}.kf-alert--bar .kf-alert__body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-xs)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Alert, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-alert', imports: [Icon], template: "@if (open()) {\n  <div class=\"kf-alert\" [class]=\"'kf-alert--' + tone()\" [attr.role]=\"ariaRole()\">\n    <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n    <div class=\"kf-alert__body\">\n      @if (title()) {\n        <p class=\"kf-alert__title\">{{ title() }}</p>\n      }\n      <div class=\"kf-alert__message\"><ng-content /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"kf-alert__close\"\n        aria-label=\"Cerrar aviso\"\n        (click)=\"open.set(false)\"\n      >\n        <kf-icon name=\"x\" size=\"sm\" />\n      </button>\n    }\n  </div>\n}\n", 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__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"] }] } });
+            args: [{ selector: 'kf-alert', imports: [Icon], template: "@if (open()) {\n  <div\n    class=\"kf-alert\"\n    [class]=\"'kf-alert--' + tone()\"\n    [class.kf-alert--bar]=\"variant() === 'bar'\"\n    [attr.role]=\"ariaRole()\"\n  >\n    <kf-icon class=\"kf-alert__icon\" [name]=\"toneIcon()\" size=\"sm\" />\n    <div class=\"kf-alert__body\">\n      @if (title()) {\n        <p class=\"kf-alert__title\">{{ title() }}</p>\n      }\n      <div class=\"kf-alert__message\"><ng-content /></div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"kf-alert__close\"\n        aria-label=\"Cerrar aviso\"\n        (click)=\"open.set(false)\"\n      >\n        <kf-icon name=\"x\" size=\"sm\" />\n      </button>\n    }\n  </div>\n}\n", 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__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)}.kf-alert--bar{align-items:center;padding:var(--kf-space-xs) var(--kf-space-md);border-width:1px 0;border-radius:0;font-size:.875rem}.kf-alert--bar .kf-alert__body{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--kf-space-xs)}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", 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"] }] } });
 
 /**
  * Fila clickeable de una lista de pendientes/alertas: ícono circular con
@@ -1783,6 +1796,16 @@ function keyboardTarget(key, iso) {
  *       <kf-button>Guardar</kf-button>
  *     </div>
  *   </kf-card>
+ *
+ * `loading` (default `false`): cubre el cuerpo con un bloque de carga animado
+ * sin sacar el contenido del layout (queda invisible y fuera del foco y de
+ * lectores de pantalla), así la card conserva exactamente sus dimensiones. Los
+ * slots `[kf-card-media]` y `[kf-card-actions]` también se ocultan. Marca el
+ * host con `aria-busy="true"`. Para una forma más fiel (líneas separadas) usa
+ * `kf-skeleton` dentro de la card, o la card propia del dominio con su
+ * `loading` (`kf-stat-card`, `kf-metric-card`).
+ *
+ *   <kf-card [loading]="isLoading()"><h3>{{ title() }}</h3><p>{{ text() }}</p></kf-card>
  */
 class Card {
     /** Quita la sombra — para cards anidadas dentro de otra superficie ya elevada. */
@@ -1790,20 +1813,24 @@ class Card {
     /** Espacio entre los hijos directos del cuerpo. `md` es el default. */
     gap = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Cubre el cuerpo con un bloque de carga conservando las dimensiones. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Card, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: Card, isStandalone: true, selector: "kf-card", inputs: { flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kf-card--flush": "flush()", "class.kf-card--gap-xs": "gap() === 'xs'", "class.kf-card--gap-sm": "gap() === 'sm'", "class.kf-card--gap-md": "gap() === 'md'", "class.kf-card--gap-lg": "gap() === 'lg'", "class.kf-card--gap-xl": "gap() === 'xl'" } }, ngImport: i0, template: "<ng-content select=\"[kf-card-media]\" />\n<div class=\"kf-card__body\">\n  <ng-content />\n</div>\n<ng-content select=\"[kf-card-actions]\" />\n", styles: [":host{display:flex;flex-direction:column;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-xs);overflow:hidden}:host.kf-card--flush{box-shadow:none}.kf-card__body{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-md);flex:1 1 auto}:host.kf-card--gap-xs .kf-card__body{gap:var(--kf-space-xs)}:host.kf-card--gap-sm .kf-card__body{gap:var(--kf-space-sm)}:host.kf-card--gap-md .kf-card__body{gap:var(--kf-space-md)}:host.kf-card--gap-lg .kf-card__body{gap:var(--kf-space-lg)}:host.kf-card--gap-xl .kf-card__body{gap:var(--kf-space-xl)}::ng-deep [kf-card-media]{display:block;inline-size:100%;block-size:auto;object-fit:cover}::ng-deep [kf-card-actions]{display:flex;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: Card, isStandalone: true, selector: "kf-card", inputs: { flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kf-card--flush": "flush()", "class.kf-card--loading": "loading()", "attr.aria-busy": "loading() ? 'true' : null", "class.kf-card--gap-xs": "gap() === 'xs'", "class.kf-card--gap-sm": "gap() === 'sm'", "class.kf-card--gap-md": "gap() === 'md'", "class.kf-card--gap-lg": "gap() === 'lg'", "class.kf-card--gap-xl": "gap() === 'xl'" } }, ngImport: i0, template: "<ng-content select=\"[kf-card-media]\" />\n<div\n  class=\"kf-card__body\"\n  [class.kf-card__body--loading]=\"loading()\"\n  [class.kf-bone-overlay]=\"loading()\"\n>\n  <ng-content />\n</div>\n<ng-content select=\"[kf-card-actions]\" />\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;flex-direction:column;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-xs);overflow:hidden}:host.kf-card--flush{box-shadow:none}.kf-card__body{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-md);flex:1 1 auto}:host.kf-card--gap-xs .kf-card__body{gap:var(--kf-space-xs)}:host.kf-card--gap-sm .kf-card__body{gap:var(--kf-space-sm)}:host.kf-card--gap-md .kf-card__body{gap:var(--kf-space-md)}:host.kf-card--gap-lg .kf-card__body{gap:var(--kf-space-lg)}:host.kf-card--gap-xl .kf-card__body{gap:var(--kf-space-xl)}::ng-deep [kf-card-media]{display:block;inline-size:100%;block-size:auto;object-fit:cover}::ng-deep [kf-card-actions]{display:flex;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-card__body--loading{position:relative;visibility:hidden}.kf-card__body--loading:after{content:\"\";visibility:visible;position:absolute;inset:var(--kf-space-md);border-radius:var(--kf-radius-sm)}:host.kf-card--loading ::ng-deep [kf-card-media],:host.kf-card--loading ::ng-deep [kf-card-actions]{visibility:hidden}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Card, decorators: [{
             type: Component,
             args: [{ selector: 'kf-card', host: {
                         '[class.kf-card--flush]': 'flush()',
+                        '[class.kf-card--loading]': 'loading()',
+                        '[attr.aria-busy]': "loading() ? 'true' : null",
                         '[class.kf-card--gap-xs]': "gap() === 'xs'",
                         '[class.kf-card--gap-sm]': "gap() === 'sm'",
                         '[class.kf-card--gap-md]': "gap() === 'md'",
                         '[class.kf-card--gap-lg]': "gap() === 'lg'",
                         '[class.kf-card--gap-xl]': "gap() === 'xl'",
-                    }, template: "<ng-content select=\"[kf-card-media]\" />\n<div class=\"kf-card__body\">\n  <ng-content />\n</div>\n<ng-content select=\"[kf-card-actions]\" />\n", styles: [":host{display:flex;flex-direction:column;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-xs);overflow:hidden}:host.kf-card--flush{box-shadow:none}.kf-card__body{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-md);flex:1 1 auto}:host.kf-card--gap-xs .kf-card__body{gap:var(--kf-space-xs)}:host.kf-card--gap-sm .kf-card__body{gap:var(--kf-space-sm)}:host.kf-card--gap-md .kf-card__body{gap:var(--kf-space-md)}:host.kf-card--gap-lg .kf-card__body{gap:var(--kf-space-lg)}:host.kf-card--gap-xl .kf-card__body{gap:var(--kf-space-xl)}::ng-deep [kf-card-media]{display:block;inline-size:100%;block-size:auto;object-fit:cover}::ng-deep [kf-card-actions]{display:flex;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}\n"] }]
-        }], propDecorators: { flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }] } });
+                    }, template: "<ng-content select=\"[kf-card-media]\" />\n<div\n  class=\"kf-card__body\"\n  [class.kf-card__body--loading]=\"loading()\"\n  [class.kf-bone-overlay]=\"loading()\"\n>\n  <ng-content />\n</div>\n<ng-content select=\"[kf-card-actions]\" />\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;flex-direction:column;background:var(--kf-color-white);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);box-shadow:var(--kf-shadow-xs);overflow:hidden}:host.kf-card--flush{box-shadow:none}.kf-card__body{display:flex;flex-direction:column;gap:var(--kf-space-md);padding:var(--kf-space-md);flex:1 1 auto}:host.kf-card--gap-xs .kf-card__body{gap:var(--kf-space-xs)}:host.kf-card--gap-sm .kf-card__body{gap:var(--kf-space-sm)}:host.kf-card--gap-md .kf-card__body{gap:var(--kf-space-md)}:host.kf-card--gap-lg .kf-card__body{gap:var(--kf-space-lg)}:host.kf-card--gap-xl .kf-card__body{gap:var(--kf-space-xl)}::ng-deep [kf-card-media]{display:block;inline-size:100%;block-size:auto;object-fit:cover}::ng-deep [kf-card-actions]{display:flex;align-items:center;justify-content:flex-end;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-card__body--loading{position:relative;visibility:hidden}.kf-card__body--loading:after{content:\"\";visibility:visible;position:absolute;inset:var(--kf-space-md);border-radius:var(--kf-radius-sm)}:host.kf-card--loading ::ng-deep [kf-card-media],:host.kf-card--loading ::ng-deep [kf-card-actions]{visibility:hidden}\n"] }]
+        }], propDecorators: { flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
 
 /**
  * Slide individual de un `kf-carousel`. Es un contenedor mínimo: solo existe
@@ -2029,7 +2056,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     }, template: "@if (dot()) {\n  <span\n    class=\"kf-chip__dot\"\n    [class.kf-chip__dot--ok]=\"tone() === 'ok'\"\n    [class.kf-chip__dot--warn]=\"tone() === 'warn'\"\n    [class.kf-chip__dot--error]=\"tone() === 'error'\"\n    [class.kf-chip__dot--neutral]=\"tone() === 'neutral'\"\n  ></span>\n}\n<span class=\"kf-chip__label\"><ng-content /></span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--kf-space-xs);padding:var(--kf-space-xs) var(--kf-space-sm);border-radius:var(--kf-radius-pill);border:1px solid transparent;font:inherit;font-size:.875em;line-height:1;color:var(--kf-color-text);background:var(--kf-color-surface);border-color:var(--kf-color-border);white-space:nowrap}:host(.kf-chip--ok){background:var(--kf-color-success-soft);border-color:var(--kf-color-success-soft);color:var(--kf-color-text)}:host(.kf-chip--warn){background:var(--kf-color-warning-soft);border-color:var(--kf-color-warning-soft);color:var(--kf-color-text)}:host(.kf-chip--error){background:var(--kf-color-error-soft);border-color:var(--kf-color-error-soft);color:var(--kf-color-text)}:host(.kf-chip--neutral){background:var(--kf-color-surface);border-color:var(--kf-color-border);color:var(--kf-color-text)}.kf-chip__dot{inline-size:.5em;block-size:.5em;border-radius:var(--kf-radius-pill);flex:none;background:var(--kf-color-text-muted)}.kf-chip__label{display:inline-block}.kf-chip__dot--ok{background:var(--kf-color-success)}.kf-chip__dot--warn{background:var(--kf-color-warning)}.kf-chip__dot--error{background:var(--kf-color-error)}.kf-chip__dot--neutral{background:var(--kf-color-text-muted)}\n"] }]
         }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
 
-let nextId$4 = 0;
+let nextId$5 = 0;
 /**
  * Bloque colapsable genérico: un header clickeable (título + chevron) que
  * expande/colapsa contenido proyectado libre, sin saber nada de lo que hay
@@ -2056,7 +2083,7 @@ class Collapsible {
     ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
     expanded = model(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
-    instanceId = `kf-collapsible-${nextId$4++}`;
+    instanceId = `kf-collapsible-${nextId$5++}`;
     triggerId = `${this.instanceId}-trigger`;
     panelId = `${this.instanceId}-panel`;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Collapsible, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2067,6 +2094,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'kf-collapsible', template: "<button\n  type=\"button\"\n  class=\"kf-collapsible__trigger\"\n  [id]=\"triggerId\"\n  [attr.aria-expanded]=\"expanded()\"\n  [attr.aria-controls]=\"panelId\"\n  (click)=\"expanded.update((value) => !value)\"\n>\n  <span class=\"kf-collapsible__title\">{{ title() }}</span>\n  <svg\n    class=\"kf-collapsible__chevron\"\n    [class.kf-collapsible__chevron--expanded]=\"expanded()\"\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M4 6L8 10L12 6\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.5\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n    />\n  </svg>\n</button>\n<div\n  class=\"kf-collapsible__panel\"\n  [class.kf-collapsible__panel--expanded]=\"expanded()\"\n  [id]=\"panelId\"\n  role=\"region\"\n  [attr.aria-labelledby]=\"triggerId\"\n>\n  <div class=\"kf-collapsible__body\">\n    <ng-content />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface)}.kf-collapsible__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);width:100%;font:inherit;font-weight:600;color:var(--kf-color-text);background:none;border:none;padding:var(--kf-space-sm) var(--kf-space-md);cursor:pointer;text-align:left}.kf-collapsible__trigger:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-collapsible__title{flex:1}.kf-collapsible__chevron{flex:none;color:var(--kf-color-text-muted);transition:transform .18s ease}.kf-collapsible__chevron--expanded{transform:rotate(180deg)}.kf-collapsible__panel{overflow:hidden;max-height:0;opacity:0;transition:max-height .24s ease,opacity .18s ease}.kf-collapsible__panel--expanded{max-height:2000px;opacity:1}.kf-collapsible__body{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-md)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }] } });
 
+/**
+ * Escucha `Escape` en fase de captura sobre `document`, antes que cualquier
+ * listener de burbuja de un contenedor (`kf-drawer`, `kf-modal`).
+ *
+ * Un panel flotante (`kf-select`, `kf-multi-select`, `kf-dropdown`) debe
+ * cerrarse primero y dejar su contenedor abierto. Un listener de burbuja no
+ * basta: el orden entre dos `@HostListener('document:keydown.escape')` es el
+ * de creación de los componentes — el contenedor se crea antes que su
+ * contenido — así que el contenedor vería la tecla sin consumir y también se
+ * cerraría. En captura el panel va siempre primero y marca la tecla con
+ * `preventDefault()`, que es lo que el contenedor revisa.
+ *
+ * `onEscape` debe devolver `true` solo si había algo que cerrar: únicamente
+ * entonces se consume la tecla. Devuelve la función que retira el listener.
+ */
+function listenEscapeCapture(doc, onEscape) {
+    const handler = (event) => {
+        if (event.key !== 'Escape' || event.defaultPrevented) {
+            return;
+        }
+        if (onEscape()) {
+            event.preventDefault();
+        }
+    };
+    doc.addEventListener('keydown', handler, true);
+    return () => doc.removeEventListener('keydown', handler, true);
+}
+
 /**
  * Contenido del panel flotante de un `kf-dropdown`. Es solo una plantilla
  * (`<ng-template>`, capturada vía `TemplateRef`) — `Dropdown` la conecta al
@@ -2148,7 +2203,9 @@ class Dropdown {
                 this.detach();
             }
         });
+        const stopEscape = listenEscapeCapture(inject(DOCUMENT), () => this.onDocumentEscape());
         this.destroyRef.onDestroy(() => {
+            stopEscape();
             this.overlaySubscription?.unsubscribe();
             this.overlayRef?.dispose();
         });
@@ -2157,10 +2214,17 @@ class Dropdown {
      * Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo
      * 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.
+     * listener a nivel de documento cubre ese caso. Va en fase de captura
+     * (ver `listenEscapeCapture`) y consume la tecla solo si había un menú
+     * abierto, así un `kf-drawer`/`kf-modal` contenedor no se cierra con el
+     * mismo Escape. Devuelve si cerró algo.
      */
     onDocumentEscape() {
+        if (!this.open()) {
+            return false;
+        }
         this.open.set(false);
+        return true;
     }
     attach() {
         const panel = this.panel();
@@ -2231,15 +2295,12 @@ class Dropdown {
         return this.overlayRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dropdown, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Dropdown, isStandalone: true, selector: "kf-dropdown", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()" } }, queries: [{ propertyName: "panel", first: true, predicate: DropdownPanel, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:inline-block}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.0", type: Dropdown, isStandalone: true, selector: "kf-dropdown", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, queries: [{ propertyName: "panel", first: true, predicate: DropdownPanel, descendants: true, isSignal: true }], ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:inline-block}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Dropdown, decorators: [{
             type: Component,
             args: [{ selector: 'kf-dropdown', template: `<ng-content />`, styles: [":host{display:inline-block}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], panel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPanel), { isSignal: true }] }], onDocumentEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: false }] }], panel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPanel), { isSignal: true }] }] } });
 
 /**
  * Popover de "Datos de contacto" de una persona (asesor, ejecutivo — nombre
@@ -2442,177 +2503,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
             args: [{ selector: 'kf-skeleton', template: "<span\n  class=\"kf-skeleton\"\n  [class]=\"'kf-skeleton--' + variant()\"\n  aria-hidden=\"true\"\n  [style.width]=\"width()\"\n  [style.height]=\"height() || null\"\n></span>\n", styles: [":host{display:block}.kf-skeleton{display:block;background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-skeleton-shimmer 1.4s ease infinite}.kf-skeleton--text{height:14px;border-radius:var(--kf-radius-xs)}.kf-skeleton--rect{height:80px;border-radius:var(--kf-radius-sm)}.kf-skeleton--circle{aspect-ratio:1 / 1;border-radius:var(--kf-radius-pill)}@keyframes kf-skeleton-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-skeleton{animation:none;background:var(--kf-color-border)}}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
 
-/**
- * Wrapper de los cuatro estados que toda sección tiene: cargando, con datos,
- * vacía y con error. Un componente en vez de tres `@if` sueltos, porque es
- * siempre el mismo slot el que va rotando entre los cuatro.
- *
- * Con `state="ready"` proyecta el contenido real y desaparece; en los otros
- * tres dibuja el placeholder correspondiente y el contenido no se instancia.
- * No inventa visuales propios: `loading` usa `kf-skeleton` (o `kf-spinner` con
- * `load="spinner"`), y `empty`/`error` usan `kf-empty-state`.
- *
- * Las acciones (reintentar, crear) van en el slot `actions` — se ignoran
- * mientras carga, porque no hay nada que reintentar todavía.
- *
- *   <kf-content-state [state]="state()" title="No pudimos cargar tus vehículos"
- *                     subtitle="Revisá tu conexión e intentá de nuevo.">
- *     <kf-button actions (click)="retry()">Reintentar</kf-button>
- *     <kf-data-table [columns]="cols" [rows]="rows()" />
- *   </kf-content-state>
- */
-class ContentState {
-    state = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
-    /** Forma del estado de carga: silueta (default) o spinner. */
-    load = input('skeleton', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "load" }] : /* istanbul ignore next */ []));
-    /** Título de `empty`/`error`. Ignorado mientras carga. */
-    title = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    subtitle = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
-    /** Texto al lado del spinner cuando `load="spinner"`. */
-    loadingLabel = input('Cargando…', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentState, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ContentState, isStandalone: true, selector: "kf-content-state", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, load: { classPropertyName: "load", publicName: "load", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (state()) {\n  @case ('ready') {\n    <ng-content />\n  }\n  @case ('loading') {\n    <div class=\"kf-content-state__loading\" aria-busy=\"true\">\n      @if (load() === 'spinner') {\n        <kf-spinner [label]=\"loadingLabel()\" />\n      } @else {\n        <kf-skeleton />\n        <kf-skeleton width=\"80%\" />\n        <kf-skeleton width=\"60%\" />\n      }\n    </div>\n  }\n  @default {\n    <kf-empty-state [tone]=\"state() === 'error' ? 'error' : 'neutral'\">\n      @if (title()) {\n        <p class=\"kf-content-state__title\">{{ title() }}</p>\n      }\n      @if (subtitle()) {\n        <p class=\"kf-content-state__subtitle\">{{ subtitle() }}</p>\n      }\n      <div class=\"kf-content-state__actions\"><ng-content select=\"[actions]\" /></div>\n    </kf-empty-state>\n  }\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-content-state__loading{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-content-state__title{margin:0;font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-content-state__subtitle{margin:0;color:var(--kf-color-text-muted)}.kf-content-state__actions:empty{display:none}.kf-content-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: EmptyState, selector: "kf-empty-state", inputs: ["icon", "tone", "variant", "title"] }, { kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: Spinner, selector: "kf-spinner", inputs: ["size", "label", "onDark"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentState, decorators: [{
-            type: Component,
-            args: [{ selector: 'kf-content-state', imports: [EmptyState, Skeleton, Spinner], template: "@switch (state()) {\n  @case ('ready') {\n    <ng-content />\n  }\n  @case ('loading') {\n    <div class=\"kf-content-state__loading\" aria-busy=\"true\">\n      @if (load() === 'spinner') {\n        <kf-spinner [label]=\"loadingLabel()\" />\n      } @else {\n        <kf-skeleton />\n        <kf-skeleton width=\"80%\" />\n        <kf-skeleton width=\"60%\" />\n      }\n    </div>\n  }\n  @default {\n    <kf-empty-state [tone]=\"state() === 'error' ? 'error' : 'neutral'\">\n      @if (title()) {\n        <p class=\"kf-content-state__title\">{{ title() }}</p>\n      }\n      @if (subtitle()) {\n        <p class=\"kf-content-state__subtitle\">{{ subtitle() }}</p>\n      }\n      <div class=\"kf-content-state__actions\"><ng-content select=\"[actions]\" /></div>\n    </kf-empty-state>\n  }\n}\n", styles: [":host{display:block;font-family:var(--kf-font-body)}.kf-content-state__loading{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-content-state__title{margin:0;font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-content-state__subtitle{margin:0;color:var(--kf-color-text-muted)}.kf-content-state__actions:empty{display:none}.kf-content-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"] }]
-        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], load: [{ type: i0.Input, args: [{ isSignal: true, alias: "load", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }] } });
-
-const RAW_BASE64_MIME = {
-    image: 'image/jpeg',
-    video: 'video/mp4',
-    pdf: 'application/pdf',
-};
-/** Solo contenido ya en memoria: un `<iframe>` con una URL remota arbitraria podría cargar cualquier página. */
-const LOCAL_PDF_SRC = /^(blob:|data:application\/pdf[;,])/i;
-let contentViewerId = 0;
-/**
- * Visor a pantalla completa para ampliar una pieza de contenido: imagen,
- * video o PDF (`type="pdf"`, renderizado por el visor nativo del navegador).
- * Mismo mecanismo que `kf-modal` (el `<dialog>` nativo resuelve backdrop,
- * atrapado de foco, top-layer y `Escape`), pero sin panel/título/footer:
- * el contenido ocupa toda la pantalla sobre un backdrop oscuro.
- *
- * `src` acepta lo que venga del backend sin que el consumidor tenga que
- * normalizarlo primero: una URL (`http(s)://`), un data URI ya armado
- * (`data:...`), o base64 crudo (se le antepone el prefijo `data:` según
- * `type`, asumiendo JPEG para imagen, MP4 para video y PDF para pdf). Un PDF
- * solo acepta contenido local (`blob:`, data URI o base64), nunca una URL remota.
- *
- * Lo proyectado con el atributo `actions` (p. ej. un botón de descarga) va en
- * la barra superior, junto al título.
- *
- *   <kf-content-viewer [(open)]="viewerOpen" [src]="viewerSrc()" alt="Foto del vehículo" />
- *   <kf-content-viewer [(open)]="viewerOpen" type="video" [src]="viewerSrc()" title="Inspección" />
- *   <kf-content-viewer [(open)]="viewerOpen" type="pdf" [src]="blobUrl()" title="Contrato">
- *     <kf-button actions variant="surface" icon="download" (click)="save()">Descargar</kf-button>
- *   </kf-content-viewer>
- */
-class ContentViewer {
-    type = input('image', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-    /** URL, data URI, o base64 crudo — ver JSDoc de la clase. */
-    src = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
-    /** Texto alternativo cuando `type="image"`. */
-    alt = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
-    title = input('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    /** Visibilidad, two-way: `[(open)]="viewerOpen"`. */
-    open = model(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
-    /** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
-    dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    titleId = `kf-content-viewer-title-${contentViewerId++}`;
-    /** Detecta si `src` ya es una URL o un data URI armado; si no, asume
-     * base64 crudo y le antepone el prefijo `data:` correspondiente a `type`
-     * — el backend a veces manda una cosa, a veces la otra. */
-    resolvedSrc = computed(() => {
-        const raw = this.src();
-        if (!raw)
-            return null;
-        if (/^(https?:|data:|blob:)/i.test(raw))
-            return raw;
-        return `data:${RAW_BASE64_MIME[this.type()]};base64,${raw}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "resolvedSrc" }] : /* istanbul ignore next */ []));
-    pdfSrc = computed(() => {
-        const src = this.resolvedSrc();
-        if (this.type() !== 'pdf' || !src || !LOCAL_PDF_SRC.test(src))
-            return null;
-        return this.sanitizer.bypassSecurityTrustResourceUrl(src);
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pdfSrc" }] : /* istanbul ignore next */ []));
-    fallbackLabel = computed(() => ({ image: 'Visor de imagen', video: 'Visor de video', pdf: 'Visor de documento' })[this.type()], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "fallbackLabel" }] : /* istanbul ignore next */ []));
-    dialog = viewChild('dialog', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
-    document = inject(DOCUMENT);
-    sanitizer = inject(DomSanitizer);
-    constructor() {
-        afterRenderEffect(() => {
-            const el = this.dialog()?.nativeElement;
-            if (!el) {
-                return;
-            }
-            if (this.open() && !el.open) {
-                // `showModal` no existe en jsdom (tests) ni en entornos sin
-                // top-layer; el atributo `open` lo deja visible, aunque no modal.
-                if (typeof el.showModal === 'function') {
-                    el.showModal();
-                }
-                else {
-                    el.open = true;
-                }
-            }
-            else if (!this.open() && el.open) {
-                if (typeof el.close === 'function') {
-                    el.close();
-                }
-                else {
-                    el.open = false;
-                }
-            }
-            // `<dialog>` inertiza el resto de la página pero no frena su scroll.
-            this.document.body.style.overflow = this.open() ? 'hidden' : '';
-        });
-        inject(DestroyRef).onDestroy(() => {
-            this.document.body.style.overflow = '';
-        });
-    }
-    /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
-    onCancel(event) {
-        if (!this.dismissible()) {
-            event.preventDefault();
-        }
-    }
-    /**
-     * Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
-     * propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
-     * comparar contra él — no hace falta cortar la propagación en el panel.
-     */
-    onHostClick(event) {
-        if (this.dismissible() && event.target === this.dialog()?.nativeElement) {
-            this.open.set(false);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ContentViewer, isStandalone: true, selector: "kf-content-viewer", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialog\n  class=\"kf-content-viewer\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  [attr.aria-label]=\"title() ? null : fallbackLabel()\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div class=\"kf-content-viewer__panel\">\n      @if (dismissible()) {\n        <button\n          type=\"button\"\n          class=\"kf-content-viewer__close\"\n          aria-label=\"Cerrar visor\"\n          (click)=\"open.set(false)\"\n        >\n          <kf-icon name=\"x\" size=\"md\" />\n        </button>\n      }\n      <div class=\"kf-content-viewer__bar\">\n        @if (title()) {\n          <span class=\"kf-content-viewer__title\" [id]=\"titleId\">{{ title() }}</span>\n        }\n        <div class=\"kf-content-viewer__actions\"><ng-content select=\"[actions]\" /></div>\n      </div>\n      <div class=\"kf-content-viewer__stage\">\n        @if (type() === 'pdf') {\n          @if (pdfSrc(); as src) {\n            <iframe\n              class=\"kf-content-viewer__document\"\n              [src]=\"src\"\n              [title]=\"title() || fallbackLabel()\"\n            ></iframe>\n          }\n        } @else if (resolvedSrc(); as src) {\n          @if (type() === 'video') {\n            <video class=\"kf-content-viewer__media\" [src]=\"src\" controls autoplay></video>\n          } @else {\n            <img class=\"kf-content-viewer__media\" [src]=\"src\" [alt]=\"alt()\" />\n          }\n        }\n      </div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-content-viewer{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-content-viewer::backdrop{background:#0a0c10eb}.kf-content-viewer__panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--kf-space-md);width:100%;height:100%;padding:var(--kf-space-xl);box-sizing:border-box}.kf-content-viewer__close{position:absolute;top:var(--kf-space-lg);right:var(--kf-space-lg);display:inline-flex;padding:var(--kf-space-xs);border:none;border-radius:var(--kf-radius-pill);background:#ffffff1f;color:var(--kf-color-white);cursor:pointer}.kf-content-viewer__close:hover{background:#ffffff38}.kf-content-viewer__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-content-viewer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--kf-space-md);max-width:calc(100% - 2 * var(--kf-space-xl))}.kf-content-viewer__actions{display:contents}.kf-content-viewer__title{font-size:.9rem;font-weight:600;color:var(--kf-color-white);text-align:center}.kf-content-viewer__stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}.kf-content-viewer__document{width:min(100%,1100px);height:100%;border:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-white)}.kf-content-viewer__media{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--kf-radius-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentViewer, decorators: [{
-            type: Component,
-            args: [{ selector: 'kf-content-viewer', imports: [Icon], template: "<dialog\n  #dialog\n  class=\"kf-content-viewer\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  [attr.aria-label]=\"title() ? null : fallbackLabel()\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div class=\"kf-content-viewer__panel\">\n      @if (dismissible()) {\n        <button\n          type=\"button\"\n          class=\"kf-content-viewer__close\"\n          aria-label=\"Cerrar visor\"\n          (click)=\"open.set(false)\"\n        >\n          <kf-icon name=\"x\" size=\"md\" />\n        </button>\n      }\n      <div class=\"kf-content-viewer__bar\">\n        @if (title()) {\n          <span class=\"kf-content-viewer__title\" [id]=\"titleId\">{{ title() }}</span>\n        }\n        <div class=\"kf-content-viewer__actions\"><ng-content select=\"[actions]\" /></div>\n      </div>\n      <div class=\"kf-content-viewer__stage\">\n        @if (type() === 'pdf') {\n          @if (pdfSrc(); as src) {\n            <iframe\n              class=\"kf-content-viewer__document\"\n              [src]=\"src\"\n              [title]=\"title() || fallbackLabel()\"\n            ></iframe>\n          }\n        } @else if (resolvedSrc(); as src) {\n          @if (type() === 'video') {\n            <video class=\"kf-content-viewer__media\" [src]=\"src\" controls autoplay></video>\n          } @else {\n            <img class=\"kf-content-viewer__media\" [src]=\"src\" [alt]=\"alt()\" />\n          }\n        }\n      </div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-content-viewer{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-content-viewer::backdrop{background:#0a0c10eb}.kf-content-viewer__panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--kf-space-md);width:100%;height:100%;padding:var(--kf-space-xl);box-sizing:border-box}.kf-content-viewer__close{position:absolute;top:var(--kf-space-lg);right:var(--kf-space-lg);display:inline-flex;padding:var(--kf-space-xs);border:none;border-radius:var(--kf-radius-pill);background:#ffffff1f;color:var(--kf-color-white);cursor:pointer}.kf-content-viewer__close:hover{background:#ffffff38}.kf-content-viewer__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-content-viewer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--kf-space-md);max-width:calc(100% - 2 * var(--kf-space-xl))}.kf-content-viewer__actions{display:contents}.kf-content-viewer__title{font-size:.9rem;font-weight:600;color:var(--kf-color-white);text-align:center}.kf-content-viewer__stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}.kf-content-viewer__document{width:min(100%,1100px);height:100%;border:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-white)}.kf-content-viewer__media{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--kf-radius-sm)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }], onHostClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 /**
  * Label superior compartido por todos los campos de formulario del design
  * system (páginas 11-12: Text Field, Select, Multiselect) — uppercase,
@@ -2755,7 +2645,7 @@ class SelectOverlay {
     }
 }
 
-let nextId$3 = 0;
+let nextId$4 = 0;
 /** Ancho mínimo del panel flotante en `variant="compact"` — el trigger de
  * ese modo puede medir menos de 45px (ej. "10" + caret), y sin este piso
  * la opción quedaría apretada contra ese mismo ancho angosto. 72px es lo
@@ -2873,7 +2763,7 @@ class Select {
     panelWidth = input('trigger', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
     valueChange = output();
-    instanceId = `kf-select-${nextId$3++}`;
+    instanceId = `kf-select-${nextId$4++}`;
     triggerId = `${this.instanceId}-trigger`;
     listboxId = `${this.instanceId}-listbox`;
     errorId = `${this.instanceId}-error`;
@@ -2959,16 +2849,28 @@ class Select {
                 untracked(() => this.focusOption(this.activeIndex()));
             }
         });
-        inject(DestroyRef).onDestroy(() => this.overlay.dispose());
+        const stopEscape = listenEscapeCapture(this.document, () => this.onDocumentEscape());
+        inject(DestroyRef).onDestroy(() => {
+            stopEscape();
+            this.overlay.dispose();
+        });
     }
     /**
-     * Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo ve
-     * teclas presionadas con el foco DENTRO del pane del overlay. Si el foco
-     * sigue en el trigger (o en cualquier otro lado de la página) mientras el
-     * panel está abierto, `keydownEvents()` nunca dispara.
+     * Escape con el panel abierto, escuchado en fase de captura sobre
+     * `document` (ver `listenEscapeCapture`). Respaldo de
+     * `overlayRef.keydownEvents()`: ese observable del CDK solo ve teclas
+     * presionadas con el foco DENTRO del pane del overlay; si el foco sigue en
+     * el trigger (o en cualquier otro lado) mientras el panel está abierto,
+     * nunca dispara. Consume la tecla (`preventDefault`) solo si había un
+     * panel que cerrar, así un `kf-drawer`/`kf-modal` que contenga al select
+     * no se cierra con el mismo Escape. Devuelve si cerró algo.
      */
     onDocumentEscape() {
+        if (!this.isOpen()) {
+            return false;
+        }
         this.close();
+        return true;
     }
     toggle() {
         if (this.disabled()) {
@@ -3137,7 +3039,7 @@ class Select {
         }
     }
     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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onDocumentEscape()" }, properties: { "class.kf-select--compact": "variant() === 'compact'", "class.kf-select--width-sm": "width() === 'sm'", "class.kf-select--width-lg": "width() === 'lg'", "class.kf-select--width-full": "width() === 'full'" } }, 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 }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <span class=\"kf-select__value\" [class.kf-select__value--placeholder]=\"!selectedOption()\">\n    {{ triggerText() }}\n  </span>\n  @if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-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-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);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__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.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);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.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__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.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: Badge, selector: "kf-badge", inputs: ["tone", "variant", "dot", "truncate"] }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
+    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 }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, panelTitle: { classPropertyName: "panelTitle", publicName: "panelTitle", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.kf-select--compact": "variant() === 'compact'", "class.kf-select--width-sm": "width() === 'sm'", "class.kf-select--width-lg": "width() === 'lg'", "class.kf-select--width-full": "width() === 'full'" } }, 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 }, { propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <span class=\"kf-select__value\" [class.kf-select__value--placeholder]=\"!selectedOption()\">\n    {{ triggerText() }}\n  </span>\n  @if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-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-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);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__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.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);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.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__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.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: Badge, selector: "kf-badge", inputs: ["tone", "variant", "dot", "truncate"] }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Select, decorators: [{
             type: Component,
@@ -3147,10 +3049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[class.kf-select--width-lg]': "width() === 'lg'",
                         '[class.kf-select--width-full]': "width() === 'full'",
                     }, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-select__trigger\"\n  [class.kf-select__trigger--disabled]=\"disabled()\"\n  [class.kf-select__trigger--invalid]=\"invalid()\"\n  [class.kf-select__trigger--with-icon]=\"!!icon()\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  [attr.aria-label]=\"triggerAriaLabel()\"\n  [attr.aria-describedby]=\"errorMessage() ? errorId : null\"\n  [attr.aria-invalid]=\"invalid() ? true : null\"\n  [class.kf-select__trigger--tagged]=\"!!selectedOption()?.tag\"\n  (click)=\"toggle()\"\n  (keydown)=\"onTriggerKeydown($event)\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-select__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <span class=\"kf-select__value\" [class.kf-select__value--placeholder]=\"!selectedOption()\">\n    {{ triggerText() }}\n  </span>\n  @if (selectedOption()?.tag; as tag) {\n    <kf-badge class=\"kf-select__tag\">{{ tag }}</kf-badge>\n  }\n  <span\n    class=\"kf-select__caret kf-caret\"\n    [class.kf-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n@if (errorMessage(); as message) {\n  <span class=\"kf-select__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n}\n<ng-template #panelTemplate>\n  <div #panel class=\"kf-select__panel\" [class.kf-select__panel--compact]=\"variant() === 'compact'\">\n    @if (panelTitle(); as title) {\n      <div class=\"kf-select__panel-title kf-overline-text\" aria-hidden=\"true\">{{ title }}</div>\n    }\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-select__search\"\n        placeholder=\"Buscar\u2026\"\n        aria-label=\"Buscar opci\u00F3n\"\n        role=\"combobox\"\n        aria-autocomplete=\"list\"\n        aria-expanded=\"true\"\n        [attr.aria-controls]=\"listboxId\"\n        [attr.aria-activedescendant]=\"filteredOptions().length ? optionId(activeIndex()) : null\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); selectActive()\"\n        (keydown)=\"onSearchKeydown($event)\"\n      />\n    }\n    <ul\n      class=\"kf-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-labelledby]=\"ariaLabel() ? null : triggerId\"\n    >\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-select__option\"\n          [id]=\"optionId(i)\"\n          [class.kf-select__option--selected]=\"option.value === value()\"\n          [class.kf-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"-1\"\n          [attr.aria-selected]=\"option.value === value()\"\n          [attr.aria-label]=\"optionAriaLabel(option)\"\n          [class.kf-select__option--rich]=\"!!(option.tag || option.detail)\"\n          (click)=\"select(option)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown)=\"onOptionKeydown($event, option, i)\"\n        >\n          @if (option.tag || option.detail) {\n            <span class=\"kf-select__option-main\">\n              <span class=\"kf-select__option-label\">{{ option.label }}</span>\n              @if (option.tag) {\n                <kf-badge class=\"kf-select__tag\">{{ option.tag }}</kf-badge>\n              }\n            </span>\n            @if (option.detail) {\n              <span class=\"kf-select__option-detail\">{{ option.detail }}</span>\n            }\n          } @else {\n            {{ option.label }}\n          }\n        </li>\n      } @empty {\n        <li class=\"kf-select__empty\">\n          {{ searchQuery() ? 'Sin resultados' : 'Sin opciones disponibles' }}\n        </li>\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-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-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}.kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);width:var(--kf-select-width-md);font-family:var(--kf-font-body)}:host(.kf-select--compact){width:max-content;max-width:160px}:host(.kf-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-select--width-full){width:100%}:host(.kf-select--compact) .kf-select__trigger{padding:6px var(--kf-space-sm);font-size:.85rem;gap:var(--kf-space-xs)}:host(.kf-select--compact) .kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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__trigger--invalid{border-color:var(--kf-color-error)}.kf-select__trigger--invalid:focus-visible{border-color:var(--kf-color-error);box-shadow:var(--kf-shadow-focus-error)}.kf-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-select__icon{flex:none;color:var(--kf-color-text-muted)}.kf-select__trigger--with-icon .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}:host(.kf-select--compact) .kf-select__trigger--with-icon .kf-select__value{color:var(--kf-color-ink);font-weight:600}.kf-select__trigger--tagged .kf-select__value{flex:1 1 auto;min-width:0;text-align:start}.kf-select__tag{flex:none}.kf-select__trigger .kf-select__tag{margin-block:-2px}.kf-select__value--placeholder{color:var(--kf-color-text-muted)}.kf-select__panel{box-sizing:border-box;font-family:var(--kf-font-body);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__panel-title{padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-xs)}.kf-select__panel--compact .kf-select__panel-title{padding:var(--kf-space-xs) var(--kf-space-sm) 2px}.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);outline:none;color:var(--kf-color-text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.kf-select__option--rich{display:flex;flex-direction:column;gap:2px}.kf-select__option-main{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-select__option-label,.kf-select__option-detail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.kf-select__option-detail{font-size:var(--kf-font-size-body-sm);font-weight:400;color:var(--kf-color-text-muted)}.kf-select__panel--compact .kf-select__option{padding:6px var(--kf-space-sm);font-size:.85rem}.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__option:focus-visible{background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.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 }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], panelTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelTitle", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", 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 }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onDocumentEscape: [{
-                type: HostListener,
-                args: ['document:keydown.escape']
-            }] } });
+        }], 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 }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], searchThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchThreshold", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], panelTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelTitle", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", 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 }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
 
 const SIBLINGS = 1;
 /**
@@ -3327,6 +3226,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
 const INTERACTIVE_CONTROL_SELECTOR = 'a[href], button, input, select, textarea, summary, label, [role="button"], [role="link"], [role="menuitem"], [role="checkbox"], [role="switch"], [role="tab"], [contenteditable="true"]';
 /** Piso de ancho de una columna `grow` que no declara `minWidth` ni `width`. */
 const GROW_MIN_WIDTH = '8rem';
+/** Tope de filas (o tarjetas) esqueleto: con `loading`, una página de 50 no pinta 50. */
+const DATA_TABLE_MAX_SKELETON_ROWS = 12;
 /** Opciones de "filas por página" estándar del portal — 10 como default
  * cubre bien tanto un dataset chico (ej. Beneficios) como uno con volumen
  * real (ej. 30+ cuotas en Billing), sin sentirse vacío ni insuficiente; 25
@@ -3365,12 +3266,21 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50];
  *   <kf-data-table [columns]="columns" [rows]="rows" [cardable]="true" defaultView="cards" />
  *
  * Loading nativo: con `loading` en `true`, la tabla se reemplaza por un
- * placeholder (`kf-skeleton` por celda/card) — mismo número de filas que
- * `pageSize`, o 5 si no hay paginación activa. Ignora `rows()`/el slot
+ * placeholder (`kf-skeleton` por celda/card) — `skeletonRows` filas si se
+ * pasa; si no, las de `pageSize`, o 5 si no hay paginación activa. Nunca más
+ * de 12 (`DATA_TABLE_MAX_SKELETON_ROWS`): con una página de 50 no se pintan
+ * 50 placeholders. Ignora `rows()`/el slot
  * `[empty]` mientras dura (no sabemos aún si el resultado real estará
  * vacío), y respeta la vista activa (tabla o cards) para no cambiar el
  * layout de golpe cuando los datos reales lleguen. El toggle tabla/cards y
- * el header de columnas siguen visibles — solo el cuerpo se reemplaza:
+ * el header de columnas siguen visibles — solo el cuerpo se reemplaza.
+ *
+ * El placeholder respeta la columna: en la tabla cada celda conserva su
+ * `align`, `width`, `minWidth` y `maxWidth` (una columna numérica lleva una
+ * barra corta alineada al final, una de acciones un cuadrado chico, el resto
+ * barras de anchos distintos) y la fila reserva el alto de una línea de texto.
+ * En tarjetas reproduce la estructura según `cardRole`: encabezado (miniatura,
+ * título y estado), campos con su rótulo, fila de `meta` y pie de acciones:
  *
  *   <kf-data-table [columns]="columns" [rows]="rows()" [loading]="isLoading()">
  *     <kf-empty-state empty>No hay resultados para mostrar.</kf-empty-state>
@@ -3463,6 +3373,30 @@ const DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50];
  *   <kf-data-table [columns]="columns" [rows]="quotes" cardable [(view)]="view"
  *     [showViewToggle]="false" cardMinWidth="300px" [rowClickable]="true"
  *     (rowClick)="open($event.row)" />
+ *
+ * Celdas interactivas (modo aditivo, ej. una matriz unidad × etapa donde cada
+ * celda de etapa es un indicador de estado): una columna con
+ * `interactive: true` renderiza su contenido dentro de un `<button>` real
+ * —focusable, con foco visible y activación con Enter o Espacio— en la vista
+ * de tabla y en la de tarjetas, y emite `cellClick` con `{ row, column, index }`.
+ * `cellAriaLabel` da el nombre accesible de cada celda cuando el contenido no
+ * lo aporta por sí solo (un indicador sin texto); en tarjetas conviene incluir
+ * el contexto de la fila, porque no hay encabezado de columna que lo dé:
+ *
+ *   columns = [
+ *     { key: 'unit', label: 'Unidad', cardRole: 'title', sticky: 'left' },
+ *     { key: 'stage1', label: 'Recepción', interactive: true, align: 'center' },
+ *     { key: 'stage2', label: 'Entrega', interactive: true, align: 'center' },
+ *   ];
+ *   <kf-data-table [columns]="columns" [rows]="units" cardable [rowKey]="unitId"
+ *     [cellTemplates]="{ stage1: stageCell, stage2: stageCell }"
+ *     [cellAriaLabel]="stageLabel" (cellClick)="openStage($event.row, $event.column)" />
+ *
+ * Convive con `rowClick`: la fila sigue emitiéndolo desde cualquier punto que
+ * no sea una celda interactiva. En tarjetas, la tarjeta deja de ser un botón
+ * (un botón dentro de un `role="button"` es inválido) salvo que se fuerce con
+ * `[rowClickable]="true"`. `sticky`, `cellTemplates`, `currentRowKey`, la
+ * ordenación y la paginación no cambian.
  */
 class DataTable {
     columns = input.required(/* @ts-ignore */
@@ -3473,6 +3407,11 @@ class DataTable {
      * ver el doc-comment de la clase para el detalle. */
     loading = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Filas (o tarjetas) esqueleto mientras `loading` es `true`. Sin valor: el
+     * `pageSize` con paginación activa, o 5. Máximo
+     * {@link DATA_TABLE_MAX_SKELETON_ROWS}. */
+    skeletonRows = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
     scrollEl = viewChild('scroll', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "scrollEl" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
@@ -3593,7 +3532,9 @@ class DataTable {
      */
     render = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "render" }] : /* istanbul ignore next */ []));
-    /** Mapa `columnKey -> TemplateRef` para celdas con contenido custom. */
+    /** Mapa `columnKey -> TemplateRef` para celdas con contenido custom. El
+     * contexto trae `$implicit` (la fila), `index` y `column` (la columna), así
+     * que un mismo template puede servir a varias columnas. */
     cellTemplates = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
     /** Densidad de fila — ver `DataTableDensity`. */
@@ -3604,6 +3545,19 @@ class DataTable {
     rowClickable = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rowClickable" }] : /* istanbul ignore next */ []));
     rowClick = output();
+    /**
+     * Se emite al activar (clic, Enter o Espacio) una celda de una columna
+     * `interactive`. `index` es el de la fila dentro de las filas mostradas
+     * (misma convención que `rowClick`). No emite `rowClick`.
+     */
+    cellClick = output();
+    /**
+     * Nombre accesible (`aria-label`) del botón de cada celda interactiva:
+     * `(row, column, index) => string`. Sin esta función, el botón se nombra
+     * por su contenido. Se usa solo en columnas `interactive`.
+     */
+    cellAriaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "cellAriaLabel" }] : /* istanbul ignore next */ []));
     /** Nombre accesible del contenedor con scroll horizontal (solo se aplica cuando hay overflow). */
     ariaLabel = input('Tabla de datos', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
@@ -3657,11 +3611,42 @@ class DataTable {
     effectivePageSize = computed(() => this.internalPageSize() ?? this.pageSize(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "effectivePageSize" }] : /* istanbul ignore next */ []));
     /** Cantidad de filas/cards placeholder mientras `loading` es true — el
-     * `pageSize` efectivo si hay paginación activa (así el placeholder ya
-     * "adivina" cuántas filas reales van a aparecer, sin salto de layout),
-     * o 5 si no hay paginación. */
-    skeletonRowIndexes = computed(() => Array.from({ length: this.effectivePageSize() ?? 5 }, (_, i) => i), /* @ts-ignore */
+     * `skeletonRows` explícito; si no hay, el `pageSize` efectivo con
+     * paginación activa (así el placeholder ya "adivina" cuántas filas reales
+     * van a aparecer, sin salto de layout) o 5 sin paginación. Siempre entre 1 y
+     * {@link DATA_TABLE_MAX_SKELETON_ROWS}: con una página de 50 filas no se
+     * pintan 50 placeholders. */
+    skeletonRowIndexes = computed(() => {
+        const wanted = this.skeletonRows() ?? this.effectivePageSize() ?? 5;
+        const total = Math.min(Math.max(Math.floor(wanted) || 0, 1), DATA_TABLE_MAX_SKELETON_ROWS);
+        return Array.from({ length: total }, (_, i) => i);
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "skeletonRowIndexes" }] : /* istanbul ignore next */ []));
+    /** Las tarjetas esqueleto llevan encabezado cuando la real lo tendría. */
+    skeletonCardHeader = computed(() => !!this.cardMediaColumn() || !!this.cardTitleColumn() || this.cardStatusColumns().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "skeletonCardHeader" }] : /* istanbul ignore next */ []));
+    /**
+     * Ancho (%) de la barra de una celda esqueleto: no todas iguales — una
+     * columna numérica (alineada al final) es corta, un identificador
+     * (`mono`) mediano, una de acciones (`hideLabel`) un cuadrado chico, y el
+     * resto alterna entre tres anchos según su posición para que la tabla no
+     * parezca un patrón repetido.
+     */
+    skeletonBarWidth(column, row, index) {
+        if (column.hideLabel) {
+            return '2rem';
+        }
+        if (this.isEndAligned(column)) {
+            return ['55%', '45%', '60%'][(row + index) % 3];
+        }
+        if (column.mono) {
+            return '70%';
+        }
+        if (column.truncate) {
+            return '90%';
+        }
+        return ['85%', '65%', '75%'][(row + index) % 3];
+    }
     totalPages = computed(() => {
         const size = this.effectivePageSize();
         if (!size) {
@@ -3884,8 +3869,12 @@ class DataTable {
      * `role="button"` con botones adentro es inválido y deja el foco ambiguo.
      * Con columnas `action`, la interacción la manejan esos botones.
      */
-    cardInteractive = computed(() => this.rowClickable() ?? this.cardActionColumns().length === 0, /* @ts-ignore */
+    cardInteractive = computed(() => this.rowClickable() ??
+        (this.cardActionColumns().length === 0 && !this.hasInteractiveColumns()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "cardInteractive" }] : /* istanbul ignore next */ []));
+    /** Hay al menos una columna `interactive` (celdas con botón propio). */
+    hasInteractiveColumns = computed(() => this.columns().some((column) => column.interactive), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasInteractiveColumns" }] : /* istanbul ignore next */ []));
     /**
      * Mismo criterio que `cardInteractive`, para la vista de tabla: la fila
      * entera dispara `rowClick` solo si no hay una columna `action` que ya
@@ -3952,6 +3941,14 @@ class DataTable {
         }
         this.rowClick.emit({ row, index });
     }
+    /** Activación de una celda interactiva (clic, o Enter/Espacio sobre su botón). */
+    onCellClick(row, column, index) {
+        this.cellClick.emit({ row, column, index });
+    }
+    /** `aria-label` del botón de una celda interactiva, o `null` si lo da su contenido. */
+    cellLabel(row, column, index) {
+        return this.cellAriaLabel()?.(row, column, index) || null;
+    }
     originatesInInteractiveControl(event) {
         const target = event?.target;
         const host = event?.currentTarget;
@@ -3990,43 +3987,545 @@ class DataTable {
         this.stickyOffsets.set(offsets);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataTable, isStandalone: true, selector: "kf-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, cardable: { classPropertyName: "cardable", publicName: "cardable", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, showViewToggle: { classPropertyName: "showViewToggle", publicName: "showViewToggle", isSignal: true, isRequired: false, transformFunction: null }, cardMinWidth: { classPropertyName: "cardMinWidth", publicName: "cardMinWidth", isSignal: true, isRequired: false, transformFunction: null }, render: { classPropertyName: "render", publicName: "render", isSignal: true, isRequired: false, transformFunction: null }, cellTemplates: { classPropertyName: "cellTemplates", publicName: "cellTemplates", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowClickable: { classPropertyName: "rowClickable", publicName: "rowClickable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentRowKey: { classPropertyName: "currentRowKey", publicName: "currentRowKey", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, keepPageOnRowsChange: { classPropertyName: "keepPageOnRowsChange", publicName: "keepPageOnRowsChange", isSignal: true, isRequired: false, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", page: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", view: "viewChange" }, viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"kf-data-table\"\n  [class.kf-data-table--flush]=\"flush()\"\n  [class.kf-data-table--compact]=\"density() === 'compact'\"\n>\n  @if (cardable() && showViewToggle()) {\n    <div class=\"kf-data-table__toolbar\">\n      <kf-view-toggle [view]=\"activeView()\" (viewChange)=\"setView($event)\" />\n    </div>\n  }\n\n  @if (loading()) {\n    @if (cardable() && activeView() === 'cards') {\n      <div\n        class=\"kf-data-table__cards\"\n        aria-busy=\"true\"\n        [style.--kf-data-table-card-min]=\"cardMinWidth()\"\n      >\n        @for (i of skeletonRowIndexes(); track i) {\n          <div class=\"kf-data-table__card\">\n            <kf-skeleton variant=\"rect\" height=\"120px\" />\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"kf-data-table__scroll\" aria-busy=\"true\">\n        <table class=\"kf-data-table__table\">\n          <thead>\n            <tr>\n              @for (column of columns(); track column.key) {\n                <th\n                  class=\"kf-overline-text\"\n                  [class]=\"column.className\"\n                  [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                  [style.width]=\"column.width\"\n                >\n                  @if (column.hideLabel) {\n                    <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n                  } @else {\n                    {{ column.label }}\n                  }\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (i of skeletonRowIndexes(); track i) {\n              <tr class=\"kf-data-table__row\">\n                @for (column of columns(); track column.key) {\n                  <td\n                    [class]=\"column.className\"\n                    [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                  >\n                    <kf-skeleton />\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  } @else if (rows().length === 0) {\n    <div class=\"kf-data-table__empty\">\n      <ng-content select=\"[empty]\" />\n    </div>\n  } @else if (activeView() === 'table') {\n    <div\n      #scroll\n      class=\"kf-data-table__scroll\"\n      [class.kf-data-table__scroll--fade-left]=\"canScrollLeft()\"\n      [class.kf-data-table__scroll--fade-right]=\"canScrollRight()\"\n      [class.kf-data-table__scroll--weighted]=\"weighted()\"\n      [attr.tabindex]=\"hasOverflow() ? 0 : null\"\n      [attr.role]=\"hasOverflow() ? 'region' : null\"\n      [attr.aria-label]=\"hasOverflow() ? ariaLabel() : null\"\n    >\n      <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n        <thead>\n          <tr>\n            @for (column of columns(); track column.key) {\n              <th\n                class=\"kf-overline-text\"\n                [attr.data-column-key]=\"column.key\"\n                [class]=\"column.className\"\n                [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                [class.kf-data-table__cell--truncate]=\"column.truncate\"\n                [class.kf-data-table__cell--sortable]=\"column.sortable\"\n                [class.kf-data-table__cell--sticky]=\"column.sticky\"\n                [class.kf-data-table__cell--sort-active]=\"sortDirectionFor(column) !== null\"\n                [style]=\"stickyStyle(column)\"\n                [style.min-width]=\"minWidthFor(column)\"\n                [style.width]=\"widthFor(column)\"\n                [style.max-width]=\"maxWidthFor(column)\"\n                (click)=\"toggleSort(column)\"\n              >\n                <span class=\"kf-data-table__th-content\">\n                  @if (column.hideLabel) {\n                    <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n                  } @else {\n                    {{ column.label }}\n                  }\n                  @if (column.sortable) {\n                    <kf-icon\n                      name=\"chevron-down\"\n                      size=\"sm\"\n                      [rotate]=\"sortDirectionFor(column) === 'asc' ? 180 : 0\"\n                      class=\"kf-data-table__sort-icon\"\n                      [class.kf-data-table__sort-icon--active]=\"sortDirectionFor(column) !== null\"\n                    />\n                  }\n                </span>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n            <tr\n              class=\"kf-data-table__row\"\n              [class.kf-data-table__row--interactive]=\"rowInteractive()\"\n              [class.kf-data-table__row--current]=\"isCurrentRow(row, i)\"\n              [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n              [attr.tabindex]=\"rowInteractive() ? 0 : null\"\n              (click)=\"onRowClick(row, i, $event)\"\n              (keydown.enter)=\"onRowClick(row, i, $event)\"\n              (keydown.space)=\"onRowSpace($event, row, i)\"\n            >\n              @for (column of columns(); track column.key) {\n                <td\n                  [attr.data-column-key]=\"column.key\"\n                  [class]=\"column.className\"\n                  [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                  [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                  [class.kf-data-table__cell--truncate]=\"column.truncate\"\n                  [class.kf-data-table__cell--mono]=\"column.mono\"\n                  [class.kf-data-table__cell--emphasis]=\"column.emphasis\"\n                  [class.kf-data-table__cell--sticky]=\"column.sticky\"\n                  [style]=\"stickyStyle(column)\"\n                  [style.min-width]=\"minWidthFor(column)\"\n                  [style.width]=\"widthFor(column)\"\n                  [style.max-width]=\"maxWidthFor(column)\"\n                >\n                  @if (column.truncate) {\n                    <span class=\"kf-data-table__truncate\" [attr.title]=\"truncateTitle(row, column)\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"tableCell\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                      />\n                    </span>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"kf-data-table__cards\" [style.--kf-data-table-card-min]=\"cardMinWidth()\">\n      @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n        <div\n          class=\"kf-data-table__card\"\n          [class.kf-data-table__card--interactive]=\"cardInteractive()\"\n          [class.kf-data-table__card--current]=\"isCurrentRow(row, i)\"\n          [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n          [attr.role]=\"cardInteractive() ? 'button' : null\"\n          [attr.tabindex]=\"cardInteractive() ? 0 : null\"\n          (click)=\"cardInteractive() && onRowClick(row, i, $event)\"\n          (keydown.enter)=\"cardInteractive() && onRowClick(row, i, $event)\"\n          (keydown.space)=\"cardInteractive() && onRowSpace($event, row, i)\"\n        >\n          @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n            <div class=\"kf-data-table__card-header\">\n              @if (cardMediaColumn(); as media) {\n                <div class=\"kf-data-table__card-media\">\n                  @if (cellTemplates()?.[media.key]; as template) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n                    />\n                  } @else {\n                    <img [src]=\"cellValue(row, media)\" alt=\"\" />\n                  }\n                </div>\n              }\n              <div class=\"kf-data-table__card-heading\">\n                @if (cardTitleColumn(); as title) {\n                  <span\n                    class=\"kf-data-table__card-title\"\n                    [class.kf-data-table__card-title--mono]=\"title.mono\"\n                  >\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: title, index: i }\"\n                    />\n                  </span>\n                }\n                @if (cardStatusColumns().length) {\n                  <span class=\"kf-data-table__card-statuses\">\n                    @for (column of cardStatusColumns(); track column.key) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"cardCell\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                      />\n                    }\n                  </span>\n                }\n              </div>\n            </div>\n          }\n\n          @if (cardLeadColumns().length || cardFieldColumns().length) {\n            <div class=\"kf-data-table__card-fields\">\n              @for (column of cardLeadColumns(); track column.key) {\n                <div\n                  class=\"kf-data-table__card-lead\"\n                  [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n                  [attr.title]=\"cellValue(row, column) || null\"\n                >\n                  <span class=\"kf-data-table__sr-only\">{{ column.label }}: </span>\n                  <ng-container\n                    [ngTemplateOutlet]=\"cardCell\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                  />\n                </div>\n              }\n              @for (column of cardFieldColumns(); track column.key) {\n                <div class=\"kf-data-table__card-field\">\n                  <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n                  <span\n                    class=\"kf-data-table__card-value\"\n                    [class.kf-data-table__card-value--emphasis]=\"column.emphasis\"\n                  >\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  </span>\n                </div>\n              }\n            </div>\n          }\n\n          @if (cardMetaColumns().length) {\n            <div class=\"kf-data-table__card-meta\">\n              @for (column of cardMetaColumns(); track column.key) {\n                <div\n                  class=\"kf-data-table__card-meta-item\"\n                  [class.kf-data-table__card-meta-item--end]=\"\n                    isEndAligned(column) || column.emphasis\n                  \"\n                  [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n                  [style.flex-basis]=\"column.width\"\n                >\n                  <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n                  <span class=\"kf-data-table__card-meta-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  </span>\n                </div>\n              }\n            </div>\n          }\n\n          @if (cardActionColumns().length) {\n            <div class=\"kf-data-table__card-actions\">\n              @for (column of cardActionColumns(); track column.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"cardCell\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (!loading() && rows().length > 0) {\n    <div class=\"kf-data-table__footer\">\n      @if (effectivePageSize()) {\n        <kf-pagination\n          [page]=\"page()\"\n          [pages]=\"totalPages()\"\n          [pageSizeOptions]=\"pageSizeOptions()\"\n          [pageSize]=\"effectivePageSize()\"\n          (pageChange)=\"goToPage($event)\"\n          (pageSizeChange)=\"setPageSize($event)\"\n        >\n          {{ paginationSummary() }}\n        </kf-pagination>\n      }\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n\n<!-- Contenido de una celda de la vista tabla (template del consumidor,\n     thumbnail o texto) \u2014 compartido por la celda normal y la `truncate`. -->\n<ng-template #tableCell let-row let-column=\"column\" let-i=\"index\">\n  @if (cellTemplates()?.[column.key]; as template) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n    />\n  } @else if (column.cardRole === 'media') {\n    <img class=\"kf-data-table__thumb\" [src]=\"cellValue(row, column)\" alt=\"\" />\n  } @else {\n    {{ cellValue(row, column) }}\n  }\n</ng-template>\n\n<!-- Contenido de una zona de la tarjeta: template del consumidor o el valor como texto. -->\n<ng-template #cardCell let-row let-column=\"column\" let-i=\"index\">\n  @if (cellTemplates()?.[column.key]; as template) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n    />\n  } @else {\n    {{ cellValue(row, column) }}\n  }\n</ng-template>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}: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__scroll{position:relative;overflow-x:auto}.kf-data-table__scroll--weighted{container-type:inline-size}.kf-data-table__scroll:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__scroll:before,.kf-data-table__scroll:after{content:\"\";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity .14s}.kf-data-table__scroll:before{left:0;background:linear-gradient(to right,var(--kf-color-white),transparent)}.kf-data-table__scroll:after{right:0;background:linear-gradient(to left,var(--kf-color-white),transparent)}.kf-data-table__scroll--fade-left:before{opacity:1}.kf-data-table__scroll--fade-right:after{opacity:1}.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--compact .kf-data-table__table th,.kf-data-table--compact .kf-data-table__table td{padding:var(--kf-space-xs) var(--kf-space-md)}.kf-data-table__table th{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{transition:background .14s}.kf-data-table__row--interactive{cursor:pointer}.kf-data-table__row--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__row--interactive:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__row--current{background:var(--kf-color-primary-soft)}.kf-data-table__cell--right{text-align:right}.kf-data-table__cell--center{text-align:center}.kf-data-table__table .kf-data-table__cell--truncate{max-width:0}.kf-data-table__truncate{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-data-table__table td.kf-data-table__cell--mono{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm)}.kf-data-table__table td.kf-data-table__cell--emphasis{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kf-data-table__cell--sticky{background:var(--kf-color-white)}.kf-data-table__table th.kf-data-table__cell--sticky{background:var(--kf-color-surface);z-index:2}.kf-data-table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.kf-data-table__cell--sortable:hover{color:var(--kf-color-ink)}.kf-data-table__table th.kf-data-table__cell--sort-active{color:var(--kf-color-primary);font-weight:700}.kf-data-table__th-content{display:inline-flex;align-items:center;gap:var(--kf-space-xs)}.kf-data-table__sort-icon{transition:opacity .14s}.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon{opacity:.5}.kf-data-table__sort-icon--active,.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon--active{opacity:1}.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(min(var(--kf-data-table-card-min, 220px),100%),1fr));grid-auto-rows:1fr;gap:var(--kf-space-md);padding:var(--kf-space-md)}.kf-data-table__card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);overflow:hidden;transition:border-color .14s,box-shadow .14s,background .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:hover{background:var(--kf-color-primary-soft)}.kf-data-table__card--interactive:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--kf-color-primary)}.kf-data-table__card--current{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-data-table__card-header{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;padding:var(--kf-space-md) var(--kf-space-md) var(--kf-space-sm)}.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:1;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-title{flex:0 1 auto;min-width:0;font-family:var(--kf-font-title);font-weight:600;color:var(--kf-color-ink);overflow-wrap:anywhere}.kf-data-table__card-title--mono{flex:none;font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm);white-space:nowrap}.kf-data-table__card-statuses{display:flex;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:var(--kf-space-xs);min-width:0;overflow:hidden}.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);min-width:0;padding:var(--kf-space-md)}.kf-data-table__card-header+.kf-data-table__card-fields{padding-top:0}.kf-data-table__card-lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kf-data-table-card-clamp, 2);line-clamp:var(--kf-data-table-card-clamp, 2);min-width:0;overflow:hidden;overflow-wrap:anywhere;color:var(--kf-color-ink);font-weight:500;line-height:1.35}.kf-data-table__card-field{display:flex;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-label{flex:none}.kf-data-table__card-value{min-width:0;color:var(--kf-color-text);text-align:right;overflow-wrap:anywhere}.kf-data-table__card-value--emphasis,.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__card-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--kf-space-xs) var(--kf-space-md);margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__card-meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-data-table__card-meta-item--end{margin-left:auto;align-items:flex-end;text-align:right}.kf-data-table__card-meta-value{color:var(--kf-color-text);font-variant-numeric:tabular-nums}.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-size:var(--kf-font-size-body)}.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__card-meta~.kf-data-table__card-actions{margin-top:0}.kf-data-table__thumb{width:32px;height:32px}@media(prefers-reduced-motion:reduce){.kf-data-table__card,.kf-data-table__row{transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Pagination, selector: "kf-pagination", inputs: ["page", "pages", "pageSizeOptions", "pageSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: ViewToggle, selector: "kf-view-toggle", inputs: ["view", "iconOnly", "tableLabel", "cardsLabel", "ariaLabel"], outputs: ["viewChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DataTable, isStandalone: true, selector: "kf-data-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, cardable: { classPropertyName: "cardable", publicName: "cardable", isSignal: true, isRequired: false, transformFunction: null }, defaultView: { classPropertyName: "defaultView", publicName: "defaultView", isSignal: true, isRequired: false, transformFunction: null }, showViewToggle: { classPropertyName: "showViewToggle", publicName: "showViewToggle", isSignal: true, isRequired: false, transformFunction: null }, cardMinWidth: { classPropertyName: "cardMinWidth", publicName: "cardMinWidth", isSignal: true, isRequired: false, transformFunction: null }, render: { classPropertyName: "render", publicName: "render", isSignal: true, isRequired: false, transformFunction: null }, cellTemplates: { classPropertyName: "cellTemplates", publicName: "cellTemplates", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, rowClickable: { classPropertyName: "rowClickable", publicName: "rowClickable", isSignal: true, isRequired: false, transformFunction: null }, cellAriaLabel: { classPropertyName: "cellAriaLabel", publicName: "cellAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, currentRowKey: { classPropertyName: "currentRowKey", publicName: "currentRowKey", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, keepPageOnRowsChange: { classPropertyName: "keepPageOnRowsChange", publicName: "keepPageOnRowsChange", isSignal: true, isRequired: false, transformFunction: null }, itemLabel: { classPropertyName: "itemLabel", publicName: "itemLabel", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowClick: "rowClick", cellClick: "cellClick", page: "pageChange", pageSizeChange: "pageSizeChange", sortChange: "sortChange", view: "viewChange" }, viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scroll"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  class=\"kf-data-table\"\n  [class.kf-data-table--flush]=\"flush()\"\n  [class.kf-data-table--compact]=\"density() === 'compact'\"\n>\n  @if (cardable() && showViewToggle()) {\n    <div class=\"kf-data-table__toolbar\">\n      <kf-view-toggle [view]=\"activeView()\" (viewChange)=\"setView($event)\" />\n    </div>\n  }\n\n  @if (loading()) {\n    @if (cardable() && activeView() === 'cards') {\n      <div\n        class=\"kf-data-table__cards\"\n        aria-busy=\"true\"\n        [style.--kf-data-table-card-min]=\"cardMinWidth()\"\n      >\n        @for (i of skeletonRowIndexes(); track i) {\n          <div class=\"kf-data-table__card\" aria-hidden=\"true\">\n            @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n              <div class=\"kf-data-table__card-header\">\n                @if (cardMediaColumn()) {\n                  <div class=\"kf-data-table__card-media\">\n                    <span class=\"kf-data-table__sk-media kf-bone-fill\"></span>\n                  </div>\n                }\n                <div class=\"kf-data-table__card-heading\">\n                  <span\n                    class=\"kf-data-table__card-title kf-bone\"\n                    [class.kf-data-table__card-title--mono]=\"cardTitleColumn()?.mono\"\n                    style=\"--kf-bone-width: 8rem\"\n                    >COT-2026-0000</span\n                  >\n                  @if (cardStatusColumns().length) {\n                    <span class=\"kf-data-table__card-statuses\">\n                      <span class=\"kf-data-table__sk-pill kf-bone-fill\"></span>\n                    </span>\n                  }\n                </div>\n              </div>\n            }\n\n            @if (cardLeadColumns().length || cardFieldColumns().length) {\n              <div class=\"kf-data-table__card-fields\">\n                @for (column of cardLeadColumns(); track column.key) {\n                  <div\n                    class=\"kf-data-table__card-lead\"\n                    [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n                  >\n                    <span class=\"kf-data-table__sk-lead kf-bone\" style=\"--kf-bone-width: 90%\"\n                      >Texto</span\n                    >\n                  </div>\n                }\n                @for (column of cardFieldColumns(); track column.key; let first = $first) {\n                  <div class=\"kf-data-table__card-field\">\n                    <span\n                      class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n                      style=\"--kf-bone-width: 5rem\"\n                      >{{ column.label }}</span\n                    >\n                    @if (first && !skeletonCardHeader()) {\n                      <kf-skeleton class=\"kf-data-table__sk-value\" width=\"100%\" />\n                    } @else {\n                      <span class=\"kf-data-table__sk-value kf-bone\" style=\"--kf-bone-width: 40%\"\n                        >Valor</span\n                      >\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            @if (cardMetaColumns().length) {\n              <div class=\"kf-data-table__card-meta\">\n                @for (column of cardMetaColumns(); track column.key) {\n                  <div\n                    class=\"kf-data-table__card-meta-item\"\n                    [class.kf-data-table__card-meta-item--end]=\"\n                      isEndAligned(column) || column.emphasis\n                    \"\n                    [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n                    [style.flex-basis]=\"column.width\"\n                  >\n                    <span\n                      class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n                      style=\"--kf-bone-width: 4rem\"\n                      >{{ column.label }}</span\n                    >\n                    <span\n                      class=\"kf-data-table__card-meta-value kf-bone\"\n                      style=\"--kf-bone-width: 5rem\"\n                      >Valor</span\n                    >\n                  </div>\n                }\n              </div>\n            }\n\n            @if (cardActionColumns().length) {\n              <div class=\"kf-data-table__card-actions\">\n                <span class=\"kf-data-table__sk-action kf-bone-fill\"></span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <div\n        class=\"kf-data-table__scroll\"\n        [class.kf-data-table__scroll--weighted]=\"weighted()\"\n        aria-busy=\"true\"\n      >\n        <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n          <thead>\n            <tr>\n              @for (column of columns(); track column.key) {\n                <th\n                  class=\"kf-overline-text\"\n                  [class]=\"column.className\"\n                  [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                  [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                  [style.min-width]=\"minWidthFor(column)\"\n                  [style.width]=\"widthFor(column)\"\n                  [style.max-width]=\"maxWidthFor(column)\"\n                >\n                  @if (column.hideLabel) {\n                    <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n                  } @else {\n                    {{ column.label }}\n                  }\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (i of skeletonRowIndexes(); track i) {\n              <tr class=\"kf-data-table__row\">\n                @for (column of columns(); track column.key; let c = $index) {\n                  <td\n                    [class]=\"column.className\"\n                    [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                    [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                    [style.min-width]=\"minWidthFor(column)\"\n                    [style.width]=\"widthFor(column)\"\n                    [style.max-width]=\"maxWidthFor(column)\"\n                  >\n                    <div\n                      class=\"kf-data-table__sk-cell\"\n                      [class.kf-data-table__sk-cell--end]=\"isEndAligned(column)\"\n                      [class.kf-data-table__sk-cell--center]=\"column.align === 'center'\"\n                    >\n                      <kf-skeleton\n                        class=\"kf-data-table__sk-bar\"\n                        [style.width]=\"skeletonBarWidth(column, i, c)\"\n                      />\n                    </div>\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  } @else if (rows().length === 0) {\n    <div class=\"kf-data-table__empty\">\n      <ng-content select=\"[empty]\" />\n    </div>\n  } @else if (activeView() === 'table') {\n    <div\n      #scroll\n      class=\"kf-data-table__scroll\"\n      [class.kf-data-table__scroll--fade-left]=\"canScrollLeft()\"\n      [class.kf-data-table__scroll--fade-right]=\"canScrollRight()\"\n      [class.kf-data-table__scroll--weighted]=\"weighted()\"\n      [attr.tabindex]=\"hasOverflow() ? 0 : null\"\n      [attr.role]=\"hasOverflow() ? 'region' : null\"\n      [attr.aria-label]=\"hasOverflow() ? ariaLabel() : null\"\n    >\n      <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n        <thead>\n          <tr>\n            @for (column of columns(); track column.key) {\n              <th\n                class=\"kf-overline-text\"\n                [attr.data-column-key]=\"column.key\"\n                [class]=\"column.className\"\n                [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                [class.kf-data-table__cell--truncate]=\"column.truncate\"\n                [class.kf-data-table__cell--sortable]=\"column.sortable\"\n                [class.kf-data-table__cell--sticky]=\"column.sticky\"\n                [class.kf-data-table__cell--sort-active]=\"sortDirectionFor(column) !== null\"\n                [style]=\"stickyStyle(column)\"\n                [style.min-width]=\"minWidthFor(column)\"\n                [style.width]=\"widthFor(column)\"\n                [style.max-width]=\"maxWidthFor(column)\"\n                (click)=\"toggleSort(column)\"\n              >\n                <span class=\"kf-data-table__th-content\">\n                  @if (column.hideLabel) {\n                    <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n                  } @else {\n                    {{ column.label }}\n                  }\n                  @if (column.sortable) {\n                    <kf-icon\n                      name=\"chevron-down\"\n                      size=\"sm\"\n                      [rotate]=\"sortDirectionFor(column) === 'asc' ? 180 : 0\"\n                      class=\"kf-data-table__sort-icon\"\n                      [class.kf-data-table__sort-icon--active]=\"sortDirectionFor(column) !== null\"\n                    />\n                  }\n                </span>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n            <tr\n              class=\"kf-data-table__row\"\n              [class.kf-data-table__row--interactive]=\"rowInteractive()\"\n              [class.kf-data-table__row--current]=\"isCurrentRow(row, i)\"\n              [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n              [attr.tabindex]=\"rowInteractive() ? 0 : null\"\n              (click)=\"onRowClick(row, i, $event)\"\n              (keydown.enter)=\"onRowClick(row, i, $event)\"\n              (keydown.space)=\"onRowSpace($event, row, i)\"\n            >\n              @for (column of columns(); track column.key) {\n                <td\n                  [attr.data-column-key]=\"column.key\"\n                  [class]=\"column.className\"\n                  [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                  [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                  [class.kf-data-table__cell--truncate]=\"column.truncate\"\n                  [class.kf-data-table__cell--mono]=\"column.mono\"\n                  [class.kf-data-table__cell--emphasis]=\"column.emphasis\"\n                  [class.kf-data-table__cell--sticky]=\"column.sticky\"\n                  [style]=\"stickyStyle(column)\"\n                  [style.min-width]=\"minWidthFor(column)\"\n                  [style.width]=\"widthFor(column)\"\n                  [style.max-width]=\"maxWidthFor(column)\"\n                >\n                  @if (column.truncate) {\n                    <span class=\"kf-data-table__truncate\" [attr.title]=\"truncateTitle(row, column)\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"tableCell\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                      />\n                    </span>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"kf-data-table__cards\" [style.--kf-data-table-card-min]=\"cardMinWidth()\">\n      @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n        <div\n          class=\"kf-data-table__card\"\n          [class.kf-data-table__card--interactive]=\"cardInteractive()\"\n          [class.kf-data-table__card--current]=\"isCurrentRow(row, i)\"\n          [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n          [attr.role]=\"cardInteractive() ? 'button' : null\"\n          [attr.tabindex]=\"cardInteractive() ? 0 : null\"\n          (click)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n          (keydown.enter)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n          (keydown.space)=\"cardInteractive() ? onRowSpace($event, row, i) : undefined\"\n        >\n          @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n            <div class=\"kf-data-table__card-header\">\n              @if (cardMediaColumn(); as media) {\n                <div class=\"kf-data-table__card-media\">\n                  @if (cellTemplates()?.[media.key]; as template) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: media }\"\n                    />\n                  } @else {\n                    <img [src]=\"cellValue(row, media)\" alt=\"\" />\n                  }\n                </div>\n              }\n              <div class=\"kf-data-table__card-heading\">\n                @if (cardTitleColumn(); as title) {\n                  <span\n                    class=\"kf-data-table__card-title\"\n                    [class.kf-data-table__card-title--mono]=\"title.mono\"\n                  >\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: title, index: i }\"\n                    />\n                  </span>\n                }\n                @if (cardStatusColumns().length) {\n                  <span class=\"kf-data-table__card-statuses\">\n                    @for (column of cardStatusColumns(); track column.key) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"cardCell\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                      />\n                    }\n                  </span>\n                }\n              </div>\n            </div>\n          }\n\n          @if (cardLeadColumns().length || cardFieldColumns().length) {\n            <div class=\"kf-data-table__card-fields\">\n              @for (column of cardLeadColumns(); track column.key) {\n                <div\n                  class=\"kf-data-table__card-lead\"\n                  [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n                  [attr.title]=\"cellValue(row, column) || null\"\n                >\n                  <span class=\"kf-data-table__sr-only\">{{ column.label }}: </span>\n                  <ng-container\n                    [ngTemplateOutlet]=\"cardCell\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                  />\n                </div>\n              }\n              @for (column of cardFieldColumns(); track column.key) {\n                <div class=\"kf-data-table__card-field\">\n                  <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n                  <span\n                    class=\"kf-data-table__card-value\"\n                    [class.kf-data-table__card-value--emphasis]=\"column.emphasis\"\n                  >\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  </span>\n                </div>\n              }\n            </div>\n          }\n\n          @if (cardMetaColumns().length) {\n            <div class=\"kf-data-table__card-meta\">\n              @for (column of cardMetaColumns(); track column.key) {\n                <div\n                  class=\"kf-data-table__card-meta-item\"\n                  [class.kf-data-table__card-meta-item--end]=\"\n                    isEndAligned(column) || column.emphasis\n                  \"\n                  [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n                  [style.flex-basis]=\"column.width\"\n                >\n                  <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n                  <span class=\"kf-data-table__card-meta-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  </span>\n                </div>\n              }\n            </div>\n          }\n\n          @if (cardActionColumns().length) {\n            <div class=\"kf-data-table__card-actions\">\n              @for (column of cardActionColumns(); track column.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"cardCell\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (!loading() && rows().length > 0) {\n    <div class=\"kf-data-table__footer\">\n      @if (effectivePageSize()) {\n        <kf-pagination\n          [page]=\"page()\"\n          [pages]=\"totalPages()\"\n          [pageSizeOptions]=\"pageSizeOptions()\"\n          [pageSize]=\"effectivePageSize()\"\n          (pageChange)=\"goToPage($event)\"\n          (pageSizeChange)=\"setPageSize($event)\"\n        >\n          {{ paginationSummary() }}\n        </kf-pagination>\n      }\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n\n<!-- Celda de la vista tabla \u2014 compartida por la celda normal y la `truncate`.\n     Una columna `interactive` envuelve su contenido en un bot\u00F3n real. -->\n<ng-template #tableCell let-row let-column=\"column\" let-i=\"index\">\n  @if (column.interactive) {\n    <button\n      type=\"button\"\n      class=\"kf-data-table__cell-button\"\n      [attr.aria-label]=\"cellLabel(row, column, i)\"\n      (click)=\"onCellClick(row, column, i)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"tableCellContent\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n      />\n    </button>\n  } @else {\n    <ng-container\n      [ngTemplateOutlet]=\"tableCellContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n    />\n  }\n</ng-template>\n\n<!-- Contenido de una celda de la vista tabla (template del consumidor,\n     thumbnail o texto). -->\n<ng-template #tableCellContent let-row let-column=\"column\" let-i=\"index\">\n  @if (cellTemplates()?.[column.key]; as template) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n    />\n  } @else if (column.cardRole === 'media') {\n    <img class=\"kf-data-table__thumb\" [src]=\"cellValue(row, column)\" alt=\"\" />\n  } @else {\n    {{ cellValue(row, column) }}\n  }\n</ng-template>\n\n<!-- Zona de la tarjeta: igual que la celda de tabla, con bot\u00F3n si la columna es `interactive`. -->\n<ng-template #cardCell let-row let-column=\"column\" let-i=\"index\">\n  @if (column.interactive) {\n    <button\n      type=\"button\"\n      class=\"kf-data-table__cell-button\"\n      [attr.aria-label]=\"cellLabel(row, column, i)\"\n      (click)=\"onCellClick(row, column, i)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"cardCellContent\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n      />\n    </button>\n  } @else {\n    <ng-container\n      [ngTemplateOutlet]=\"cardCellContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n    />\n  }\n</ng-template>\n\n<!-- Contenido de una zona de la tarjeta: template del consumidor o el valor como texto. -->\n<ng-template #cardCellContent let-row let-column=\"column\" let-i=\"index\">\n  @if (cellTemplates()?.[column.key]; as template) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n    />\n  } @else {\n    {{ cellValue(row, column) }}\n  }\n</ng-template>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}: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__scroll{position:relative;overflow-x:auto}.kf-data-table__scroll--weighted{container-type:inline-size}.kf-data-table__scroll:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__scroll:before,.kf-data-table__scroll:after{content:\"\";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity .14s}.kf-data-table__scroll:before{left:0;background:linear-gradient(to right,var(--kf-color-white),transparent)}.kf-data-table__scroll:after{right:0;background:linear-gradient(to left,var(--kf-color-white),transparent)}.kf-data-table__scroll--fade-left:before{opacity:1}.kf-data-table__scroll--fade-right:after{opacity:1}.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--compact .kf-data-table__table th,.kf-data-table--compact .kf-data-table__table td{padding:var(--kf-space-xs) var(--kf-space-md)}.kf-data-table__table th{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{transition:background .14s}.kf-data-table__row--interactive{cursor:pointer}.kf-data-table__row--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__row--interactive:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__row--current{background:var(--kf-color-primary-soft)}.kf-data-table__cell--right{text-align:right}.kf-data-table__cell--center{text-align:center}.kf-data-table__table .kf-data-table__cell--truncate{max-width:0}.kf-data-table__truncate{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-data-table__table td.kf-data-table__cell--mono{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm)}.kf-data-table__table td.kf-data-table__cell--emphasis{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kf-data-table__cell-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);max-width:100%;min-width:32px;min-height:32px;padding:var(--kf-space-xs);border:0;border-radius:var(--kf-radius-xs);background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.kf-data-table__cell-button:hover{box-shadow:inset 0 0 0 1px var(--kf-color-border-strong)}.kf-data-table__cell-button:focus-visible{outline:2px solid transparent;outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}@media(max-width:640px),(pointer:coarse){.kf-data-table__cell-button{min-width:44px;min-height:44px}}.kf-data-table__cell--sticky{background:var(--kf-color-white)}.kf-data-table__table th.kf-data-table__cell--sticky{background:var(--kf-color-surface);z-index:2}.kf-data-table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.kf-data-table__cell--sortable:hover{color:var(--kf-color-ink)}.kf-data-table__table th.kf-data-table__cell--sort-active{color:var(--kf-color-primary);font-weight:700}.kf-data-table__th-content{display:inline-flex;align-items:center;gap:var(--kf-space-xs)}.kf-data-table__sort-icon{transition:opacity .14s}.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon{opacity:.5}.kf-data-table__sort-icon--active,.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon--active{opacity:1}.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(min(var(--kf-data-table-card-min, 220px),100%),1fr));grid-auto-rows:1fr;gap:var(--kf-space-md);padding:var(--kf-space-md)}.kf-data-table__card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);overflow:hidden;transition:border-color .14s,box-shadow .14s,background .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:hover{background:var(--kf-color-primary-soft)}.kf-data-table__card--interactive:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--kf-color-primary)}.kf-data-table__card--current{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-data-table__card-header{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;padding:var(--kf-space-md) var(--kf-space-md) var(--kf-space-sm)}.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:1;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-title{flex:0 1 auto;min-width:0;font-family:var(--kf-font-title);font-weight:600;color:var(--kf-color-ink);overflow-wrap:anywhere}.kf-data-table__card-title--mono{flex:none;font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm);white-space:nowrap}.kf-data-table__card-statuses{display:flex;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:var(--kf-space-xs);min-width:0;overflow:hidden}.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);min-width:0;padding:var(--kf-space-md)}.kf-data-table__card-header+.kf-data-table__card-fields{padding-top:0}.kf-data-table__card-lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kf-data-table-card-clamp, 2);line-clamp:var(--kf-data-table-card-clamp, 2);min-width:0;overflow:hidden;overflow-wrap:anywhere;color:var(--kf-color-ink);font-weight:500;line-height:1.35}.kf-data-table__card-field{display:flex;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-label{flex:none}.kf-data-table__card-value{min-width:0;color:var(--kf-color-text);text-align:right;overflow-wrap:anywhere}.kf-data-table__card-value--emphasis,.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__card-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--kf-space-xs) var(--kf-space-md);margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__card-meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-data-table__card-meta-item--end{margin-left:auto;align-items:flex-end;text-align:right}.kf-data-table__card-meta-value{color:var(--kf-color-text);font-variant-numeric:tabular-nums}.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-size:var(--kf-font-size-body)}.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__card-meta~.kf-data-table__card-actions{margin-top:0}.kf-data-table__thumb{width:32px;height:32px}@media(prefers-reduced-motion:reduce){.kf-data-table__card,.kf-data-table__row{transition:none}}.kf-data-table__sk-cell{display:flex;align-items:center;justify-content:flex-start;min-height:1lh}.kf-data-table__sk-cell--center{justify-content:center}.kf-data-table__sk-cell--end{justify-content:flex-end}.kf-data-table__sk-bar{flex:none}.kf-data-table__sk-media{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs)}.kf-data-table__sk-pill{display:block;width:4.5rem;height:1.25rem;border-radius:var(--kf-radius-pill)}.kf-data-table__sk-value{flex:none;width:40%}.kf-data-table__sk-lead{line-height:1.35}.kf-data-table__sk-action{display:block;width:5rem;height:2rem;border-radius:var(--kf-radius-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Pagination, selector: "kf-pagination", inputs: ["page", "pages", "pageSizeOptions", "pageSize"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: ViewToggle, selector: "kf-view-toggle", inputs: ["view", "iconOnly", "tableLabel", "cardsLabel", "ariaLabel"], outputs: ["viewChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DataTable, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-data-table', imports: [Icon, NgTemplateOutlet, Pagination, Skeleton, ViewToggle], template: "<div\n  class=\"kf-data-table\"\n  [class.kf-data-table--flush]=\"flush()\"\n  [class.kf-data-table--compact]=\"density() === 'compact'\"\n>\n  @if (cardable() && showViewToggle()) {\n    <div class=\"kf-data-table__toolbar\">\n      <kf-view-toggle [view]=\"activeView()\" (viewChange)=\"setView($event)\" />\n    </div>\n  }\n\n  @if (loading()) {\n    @if (cardable() && activeView() === 'cards') {\n      <div\n        class=\"kf-data-table__cards\"\n        aria-busy=\"true\"\n        [style.--kf-data-table-card-min]=\"cardMinWidth()\"\n      >\n        @for (i of skeletonRowIndexes(); track i) {\n          <div class=\"kf-data-table__card\">\n            <kf-skeleton variant=\"rect\" height=\"120px\" />\n          </div>\n        }\n      </div>\n    } @else {\n      <div class=\"kf-data-table__scroll\" aria-busy=\"true\">\n        <table class=\"kf-data-table__table\">\n          <thead>\n            <tr>\n              @for (column of columns(); track column.key) {\n                <th\n                  class=\"kf-overline-text\"\n                  [class]=\"column.className\"\n                  [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                  [style.width]=\"column.width\"\n                >\n                  @if (column.hideLabel) {\n                    <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n                  } @else {\n                    {{ column.label }}\n                  }\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (i of skeletonRowIndexes(); track i) {\n              <tr class=\"kf-data-table__row\">\n                @for (column of columns(); track column.key) {\n                  <td\n                    [class]=\"column.className\"\n                    [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                  >\n                    <kf-skeleton />\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  } @else if (rows().length === 0) {\n    <div class=\"kf-data-table__empty\">\n      <ng-content select=\"[empty]\" />\n    </div>\n  } @else if (activeView() === 'table') {\n    <div\n      #scroll\n      class=\"kf-data-table__scroll\"\n      [class.kf-data-table__scroll--fade-left]=\"canScrollLeft()\"\n      [class.kf-data-table__scroll--fade-right]=\"canScrollRight()\"\n      [class.kf-data-table__scroll--weighted]=\"weighted()\"\n      [attr.tabindex]=\"hasOverflow() ? 0 : null\"\n      [attr.role]=\"hasOverflow() ? 'region' : null\"\n      [attr.aria-label]=\"hasOverflow() ? ariaLabel() : null\"\n    >\n      <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n        <thead>\n          <tr>\n            @for (column of columns(); track column.key) {\n              <th\n                class=\"kf-overline-text\"\n                [attr.data-column-key]=\"column.key\"\n                [class]=\"column.className\"\n                [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                [class.kf-data-table__cell--truncate]=\"column.truncate\"\n                [class.kf-data-table__cell--sortable]=\"column.sortable\"\n                [class.kf-data-table__cell--sticky]=\"column.sticky\"\n                [class.kf-data-table__cell--sort-active]=\"sortDirectionFor(column) !== null\"\n                [style]=\"stickyStyle(column)\"\n                [style.min-width]=\"minWidthFor(column)\"\n                [style.width]=\"widthFor(column)\"\n                [style.max-width]=\"maxWidthFor(column)\"\n                (click)=\"toggleSort(column)\"\n              >\n                <span class=\"kf-data-table__th-content\">\n                  @if (column.hideLabel) {\n                    <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n                  } @else {\n                    {{ column.label }}\n                  }\n                  @if (column.sortable) {\n                    <kf-icon\n                      name=\"chevron-down\"\n                      size=\"sm\"\n                      [rotate]=\"sortDirectionFor(column) === 'asc' ? 180 : 0\"\n                      class=\"kf-data-table__sort-icon\"\n                      [class.kf-data-table__sort-icon--active]=\"sortDirectionFor(column) !== null\"\n                    />\n                  }\n                </span>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n            <tr\n              class=\"kf-data-table__row\"\n              [class.kf-data-table__row--interactive]=\"rowInteractive()\"\n              [class.kf-data-table__row--current]=\"isCurrentRow(row, i)\"\n              [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n              [attr.tabindex]=\"rowInteractive() ? 0 : null\"\n              (click)=\"onRowClick(row, i, $event)\"\n              (keydown.enter)=\"onRowClick(row, i, $event)\"\n              (keydown.space)=\"onRowSpace($event, row, i)\"\n            >\n              @for (column of columns(); track column.key) {\n                <td\n                  [attr.data-column-key]=\"column.key\"\n                  [class]=\"column.className\"\n                  [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                  [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                  [class.kf-data-table__cell--truncate]=\"column.truncate\"\n                  [class.kf-data-table__cell--mono]=\"column.mono\"\n                  [class.kf-data-table__cell--emphasis]=\"column.emphasis\"\n                  [class.kf-data-table__cell--sticky]=\"column.sticky\"\n                  [style]=\"stickyStyle(column)\"\n                  [style.min-width]=\"minWidthFor(column)\"\n                  [style.width]=\"widthFor(column)\"\n                  [style.max-width]=\"maxWidthFor(column)\"\n                >\n                  @if (column.truncate) {\n                    <span class=\"kf-data-table__truncate\" [attr.title]=\"truncateTitle(row, column)\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"tableCell\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                      />\n                    </span>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"kf-data-table__cards\" [style.--kf-data-table-card-min]=\"cardMinWidth()\">\n      @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n        <div\n          class=\"kf-data-table__card\"\n          [class.kf-data-table__card--interactive]=\"cardInteractive()\"\n          [class.kf-data-table__card--current]=\"isCurrentRow(row, i)\"\n          [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n          [attr.role]=\"cardInteractive() ? 'button' : null\"\n          [attr.tabindex]=\"cardInteractive() ? 0 : null\"\n          (click)=\"cardInteractive() && onRowClick(row, i, $event)\"\n          (keydown.enter)=\"cardInteractive() && onRowClick(row, i, $event)\"\n          (keydown.space)=\"cardInteractive() && onRowSpace($event, row, i)\"\n        >\n          @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n            <div class=\"kf-data-table__card-header\">\n              @if (cardMediaColumn(); as media) {\n                <div class=\"kf-data-table__card-media\">\n                  @if (cellTemplates()?.[media.key]; as template) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n                    />\n                  } @else {\n                    <img [src]=\"cellValue(row, media)\" alt=\"\" />\n                  }\n                </div>\n              }\n              <div class=\"kf-data-table__card-heading\">\n                @if (cardTitleColumn(); as title) {\n                  <span\n                    class=\"kf-data-table__card-title\"\n                    [class.kf-data-table__card-title--mono]=\"title.mono\"\n                  >\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: title, index: i }\"\n                    />\n                  </span>\n                }\n                @if (cardStatusColumns().length) {\n                  <span class=\"kf-data-table__card-statuses\">\n                    @for (column of cardStatusColumns(); track column.key) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"cardCell\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                      />\n                    }\n                  </span>\n                }\n              </div>\n            </div>\n          }\n\n          @if (cardLeadColumns().length || cardFieldColumns().length) {\n            <div class=\"kf-data-table__card-fields\">\n              @for (column of cardLeadColumns(); track column.key) {\n                <div\n                  class=\"kf-data-table__card-lead\"\n                  [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n                  [attr.title]=\"cellValue(row, column) || null\"\n                >\n                  <span class=\"kf-data-table__sr-only\">{{ column.label }}: </span>\n                  <ng-container\n                    [ngTemplateOutlet]=\"cardCell\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                  />\n                </div>\n              }\n              @for (column of cardFieldColumns(); track column.key) {\n                <div class=\"kf-data-table__card-field\">\n                  <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n                  <span\n                    class=\"kf-data-table__card-value\"\n                    [class.kf-data-table__card-value--emphasis]=\"column.emphasis\"\n                  >\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  </span>\n                </div>\n              }\n            </div>\n          }\n\n          @if (cardMetaColumns().length) {\n            <div class=\"kf-data-table__card-meta\">\n              @for (column of cardMetaColumns(); track column.key) {\n                <div\n                  class=\"kf-data-table__card-meta-item\"\n                  [class.kf-data-table__card-meta-item--end]=\"\n                    isEndAligned(column) || column.emphasis\n                  \"\n                  [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n                  [style.flex-basis]=\"column.width\"\n                >\n                  <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n                  <span class=\"kf-data-table__card-meta-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  </span>\n                </div>\n              }\n            </div>\n          }\n\n          @if (cardActionColumns().length) {\n            <div class=\"kf-data-table__card-actions\">\n              @for (column of cardActionColumns(); track column.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"cardCell\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (!loading() && rows().length > 0) {\n    <div class=\"kf-data-table__footer\">\n      @if (effectivePageSize()) {\n        <kf-pagination\n          [page]=\"page()\"\n          [pages]=\"totalPages()\"\n          [pageSizeOptions]=\"pageSizeOptions()\"\n          [pageSize]=\"effectivePageSize()\"\n          (pageChange)=\"goToPage($event)\"\n          (pageSizeChange)=\"setPageSize($event)\"\n        >\n          {{ paginationSummary() }}\n        </kf-pagination>\n      }\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n\n<!-- Contenido de una celda de la vista tabla (template del consumidor,\n     thumbnail o texto) \u2014 compartido por la celda normal y la `truncate`. -->\n<ng-template #tableCell let-row let-column=\"column\" let-i=\"index\">\n  @if (cellTemplates()?.[column.key]; as template) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n    />\n  } @else if (column.cardRole === 'media') {\n    <img class=\"kf-data-table__thumb\" [src]=\"cellValue(row, column)\" alt=\"\" />\n  } @else {\n    {{ cellValue(row, column) }}\n  }\n</ng-template>\n\n<!-- Contenido de una zona de la tarjeta: template del consumidor o el valor como texto. -->\n<ng-template #cardCell let-row let-column=\"column\" let-i=\"index\">\n  @if (cellTemplates()?.[column.key]; as template) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\n    />\n  } @else {\n    {{ cellValue(row, column) }}\n  }\n</ng-template>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}: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__scroll{position:relative;overflow-x:auto}.kf-data-table__scroll--weighted{container-type:inline-size}.kf-data-table__scroll:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__scroll:before,.kf-data-table__scroll:after{content:\"\";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity .14s}.kf-data-table__scroll:before{left:0;background:linear-gradient(to right,var(--kf-color-white),transparent)}.kf-data-table__scroll:after{right:0;background:linear-gradient(to left,var(--kf-color-white),transparent)}.kf-data-table__scroll--fade-left:before{opacity:1}.kf-data-table__scroll--fade-right:after{opacity:1}.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--compact .kf-data-table__table th,.kf-data-table--compact .kf-data-table__table td{padding:var(--kf-space-xs) var(--kf-space-md)}.kf-data-table__table th{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{transition:background .14s}.kf-data-table__row--interactive{cursor:pointer}.kf-data-table__row--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__row--interactive:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__row--current{background:var(--kf-color-primary-soft)}.kf-data-table__cell--right{text-align:right}.kf-data-table__cell--center{text-align:center}.kf-data-table__table .kf-data-table__cell--truncate{max-width:0}.kf-data-table__truncate{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-data-table__table td.kf-data-table__cell--mono{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm)}.kf-data-table__table td.kf-data-table__cell--emphasis{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kf-data-table__cell--sticky{background:var(--kf-color-white)}.kf-data-table__table th.kf-data-table__cell--sticky{background:var(--kf-color-surface);z-index:2}.kf-data-table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.kf-data-table__cell--sortable:hover{color:var(--kf-color-ink)}.kf-data-table__table th.kf-data-table__cell--sort-active{color:var(--kf-color-primary);font-weight:700}.kf-data-table__th-content{display:inline-flex;align-items:center;gap:var(--kf-space-xs)}.kf-data-table__sort-icon{transition:opacity .14s}.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon{opacity:.5}.kf-data-table__sort-icon--active,.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon--active{opacity:1}.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(min(var(--kf-data-table-card-min, 220px),100%),1fr));grid-auto-rows:1fr;gap:var(--kf-space-md);padding:var(--kf-space-md)}.kf-data-table__card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);overflow:hidden;transition:border-color .14s,box-shadow .14s,background .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:hover{background:var(--kf-color-primary-soft)}.kf-data-table__card--interactive:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--kf-color-primary)}.kf-data-table__card--current{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-data-table__card-header{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;padding:var(--kf-space-md) var(--kf-space-md) var(--kf-space-sm)}.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:1;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-title{flex:0 1 auto;min-width:0;font-family:var(--kf-font-title);font-weight:600;color:var(--kf-color-ink);overflow-wrap:anywhere}.kf-data-table__card-title--mono{flex:none;font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm);white-space:nowrap}.kf-data-table__card-statuses{display:flex;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:var(--kf-space-xs);min-width:0;overflow:hidden}.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);min-width:0;padding:var(--kf-space-md)}.kf-data-table__card-header+.kf-data-table__card-fields{padding-top:0}.kf-data-table__card-lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kf-data-table-card-clamp, 2);line-clamp:var(--kf-data-table-card-clamp, 2);min-width:0;overflow:hidden;overflow-wrap:anywhere;color:var(--kf-color-ink);font-weight:500;line-height:1.35}.kf-data-table__card-field{display:flex;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-label{flex:none}.kf-data-table__card-value{min-width:0;color:var(--kf-color-text);text-align:right;overflow-wrap:anywhere}.kf-data-table__card-value--emphasis,.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__card-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--kf-space-xs) var(--kf-space-md);margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__card-meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-data-table__card-meta-item--end{margin-left:auto;align-items:flex-end;text-align:right}.kf-data-table__card-meta-value{color:var(--kf-color-text);font-variant-numeric:tabular-nums}.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-size:var(--kf-font-size-body)}.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__card-meta~.kf-data-table__card-actions{margin-top:0}.kf-data-table__thumb{width:32px;height:32px}@media(prefers-reduced-motion:reduce){.kf-data-table__card,.kf-data-table__row{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: 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 }] }], showViewToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewToggle", required: false }] }], cardMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardMinWidth", required: false }] }], render: [{ type: i0.Input, args: [{ isSignal: true, alias: "render", required: false }] }], cellTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplates", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], rowClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClickable", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], currentRowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRowKey", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], keepPageOnRowsChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepPageOnRowsChange", required: false }] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }] } });
+            args: [{ selector: 'kf-data-table', imports: [Icon, NgTemplateOutlet, Pagination, Skeleton, ViewToggle], template: "<div\n  class=\"kf-data-table\"\n  [class.kf-data-table--flush]=\"flush()\"\n  [class.kf-data-table--compact]=\"density() === 'compact'\"\n>\n  @if (cardable() && showViewToggle()) {\n    <div class=\"kf-data-table__toolbar\">\n      <kf-view-toggle [view]=\"activeView()\" (viewChange)=\"setView($event)\" />\n    </div>\n  }\n\n  @if (loading()) {\n    @if (cardable() && activeView() === 'cards') {\n      <div\n        class=\"kf-data-table__cards\"\n        aria-busy=\"true\"\n        [style.--kf-data-table-card-min]=\"cardMinWidth()\"\n      >\n        @for (i of skeletonRowIndexes(); track i) {\n          <div class=\"kf-data-table__card\" aria-hidden=\"true\">\n            @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n              <div class=\"kf-data-table__card-header\">\n                @if (cardMediaColumn()) {\n                  <div class=\"kf-data-table__card-media\">\n                    <span class=\"kf-data-table__sk-media kf-bone-fill\"></span>\n                  </div>\n                }\n                <div class=\"kf-data-table__card-heading\">\n                  <span\n                    class=\"kf-data-table__card-title kf-bone\"\n                    [class.kf-data-table__card-title--mono]=\"cardTitleColumn()?.mono\"\n                    style=\"--kf-bone-width: 8rem\"\n                    >COT-2026-0000</span\n                  >\n                  @if (cardStatusColumns().length) {\n                    <span class=\"kf-data-table__card-statuses\">\n                      <span class=\"kf-data-table__sk-pill kf-bone-fill\"></span>\n                    </span>\n                  }\n                </div>\n              </div>\n            }\n\n            @if (cardLeadColumns().length || cardFieldColumns().length) {\n              <div class=\"kf-data-table__card-fields\">\n                @for (column of cardLeadColumns(); track column.key) {\n                  <div\n                    class=\"kf-data-table__card-lead\"\n                    [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n                  >\n                    <span class=\"kf-data-table__sk-lead kf-bone\" style=\"--kf-bone-width: 90%\"\n                      >Texto</span\n                    >\n                  </div>\n                }\n                @for (column of cardFieldColumns(); track column.key; let first = $first) {\n                  <div class=\"kf-data-table__card-field\">\n                    <span\n                      class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n                      style=\"--kf-bone-width: 5rem\"\n                      >{{ column.label }}</span\n                    >\n                    @if (first && !skeletonCardHeader()) {\n                      <kf-skeleton class=\"kf-data-table__sk-value\" width=\"100%\" />\n                    } @else {\n                      <span class=\"kf-data-table__sk-value kf-bone\" style=\"--kf-bone-width: 40%\"\n                        >Valor</span\n                      >\n                    }\n                  </div>\n                }\n              </div>\n            }\n\n            @if (cardMetaColumns().length) {\n              <div class=\"kf-data-table__card-meta\">\n                @for (column of cardMetaColumns(); track column.key) {\n                  <div\n                    class=\"kf-data-table__card-meta-item\"\n                    [class.kf-data-table__card-meta-item--end]=\"\n                      isEndAligned(column) || column.emphasis\n                    \"\n                    [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n                    [style.flex-basis]=\"column.width\"\n                  >\n                    <span\n                      class=\"kf-data-table__card-label kf-overline-text kf-bone\"\n                      style=\"--kf-bone-width: 4rem\"\n                      >{{ column.label }}</span\n                    >\n                    <span\n                      class=\"kf-data-table__card-meta-value kf-bone\"\n                      style=\"--kf-bone-width: 5rem\"\n                      >Valor</span\n                    >\n                  </div>\n                }\n              </div>\n            }\n\n            @if (cardActionColumns().length) {\n              <div class=\"kf-data-table__card-actions\">\n                <span class=\"kf-data-table__sk-action kf-bone-fill\"></span>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    } @else {\n      <div\n        class=\"kf-data-table__scroll\"\n        [class.kf-data-table__scroll--weighted]=\"weighted()\"\n        aria-busy=\"true\"\n      >\n        <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n          <thead>\n            <tr>\n              @for (column of columns(); track column.key) {\n                <th\n                  class=\"kf-overline-text\"\n                  [class]=\"column.className\"\n                  [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                  [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                  [style.min-width]=\"minWidthFor(column)\"\n                  [style.width]=\"widthFor(column)\"\n                  [style.max-width]=\"maxWidthFor(column)\"\n                >\n                  @if (column.hideLabel) {\n                    <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n                  } @else {\n                    {{ column.label }}\n                  }\n                </th>\n              }\n            </tr>\n          </thead>\n          <tbody>\n            @for (i of skeletonRowIndexes(); track i) {\n              <tr class=\"kf-data-table__row\">\n                @for (column of columns(); track column.key; let c = $index) {\n                  <td\n                    [class]=\"column.className\"\n                    [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                    [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                    [style.min-width]=\"minWidthFor(column)\"\n                    [style.width]=\"widthFor(column)\"\n                    [style.max-width]=\"maxWidthFor(column)\"\n                  >\n                    <div\n                      class=\"kf-data-table__sk-cell\"\n                      [class.kf-data-table__sk-cell--end]=\"isEndAligned(column)\"\n                      [class.kf-data-table__sk-cell--center]=\"column.align === 'center'\"\n                    >\n                      <kf-skeleton\n                        class=\"kf-data-table__sk-bar\"\n                        [style.width]=\"skeletonBarWidth(column, i, c)\"\n                      />\n                    </div>\n                  </td>\n                }\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  } @else if (rows().length === 0) {\n    <div class=\"kf-data-table__empty\">\n      <ng-content select=\"[empty]\" />\n    </div>\n  } @else if (activeView() === 'table') {\n    <div\n      #scroll\n      class=\"kf-data-table__scroll\"\n      [class.kf-data-table__scroll--fade-left]=\"canScrollLeft()\"\n      [class.kf-data-table__scroll--fade-right]=\"canScrollRight()\"\n      [class.kf-data-table__scroll--weighted]=\"weighted()\"\n      [attr.tabindex]=\"hasOverflow() ? 0 : null\"\n      [attr.role]=\"hasOverflow() ? 'region' : null\"\n      [attr.aria-label]=\"hasOverflow() ? ariaLabel() : null\"\n    >\n      <table class=\"kf-data-table__table\" [class.kf-data-table__table--weighted]=\"weighted()\">\n        <thead>\n          <tr>\n            @for (column of columns(); track column.key) {\n              <th\n                class=\"kf-overline-text\"\n                [attr.data-column-key]=\"column.key\"\n                [class]=\"column.className\"\n                [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                [class.kf-data-table__cell--truncate]=\"column.truncate\"\n                [class.kf-data-table__cell--sortable]=\"column.sortable\"\n                [class.kf-data-table__cell--sticky]=\"column.sticky\"\n                [class.kf-data-table__cell--sort-active]=\"sortDirectionFor(column) !== null\"\n                [style]=\"stickyStyle(column)\"\n                [style.min-width]=\"minWidthFor(column)\"\n                [style.width]=\"widthFor(column)\"\n                [style.max-width]=\"maxWidthFor(column)\"\n                (click)=\"toggleSort(column)\"\n              >\n                <span class=\"kf-data-table__th-content\">\n                  @if (column.hideLabel) {\n                    <span class=\"kf-data-table__sr-only\">{{ column.label }}</span>\n                  } @else {\n                    {{ column.label }}\n                  }\n                  @if (column.sortable) {\n                    <kf-icon\n                      name=\"chevron-down\"\n                      size=\"sm\"\n                      [rotate]=\"sortDirectionFor(column) === 'asc' ? 180 : 0\"\n                      class=\"kf-data-table__sort-icon\"\n                      [class.kf-data-table__sort-icon--active]=\"sortDirectionFor(column) !== null\"\n                    />\n                  }\n                </span>\n              </th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n            <tr\n              class=\"kf-data-table__row\"\n              [class.kf-data-table__row--interactive]=\"rowInteractive()\"\n              [class.kf-data-table__row--current]=\"isCurrentRow(row, i)\"\n              [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n              [attr.tabindex]=\"rowInteractive() ? 0 : null\"\n              (click)=\"onRowClick(row, i, $event)\"\n              (keydown.enter)=\"onRowClick(row, i, $event)\"\n              (keydown.space)=\"onRowSpace($event, row, i)\"\n            >\n              @for (column of columns(); track column.key) {\n                <td\n                  [attr.data-column-key]=\"column.key\"\n                  [class]=\"column.className\"\n                  [class.kf-data-table__cell--right]=\"isEndAligned(column)\"\n                  [class.kf-data-table__cell--center]=\"column.align === 'center'\"\n                  [class.kf-data-table__cell--truncate]=\"column.truncate\"\n                  [class.kf-data-table__cell--mono]=\"column.mono\"\n                  [class.kf-data-table__cell--emphasis]=\"column.emphasis\"\n                  [class.kf-data-table__cell--sticky]=\"column.sticky\"\n                  [style]=\"stickyStyle(column)\"\n                  [style.min-width]=\"minWidthFor(column)\"\n                  [style.width]=\"widthFor(column)\"\n                  [style.max-width]=\"maxWidthFor(column)\"\n                >\n                  @if (column.truncate) {\n                    <span class=\"kf-data-table__truncate\" [attr.title]=\"truncateTitle(row, column)\">\n                      <ng-container\n                        [ngTemplateOutlet]=\"tableCell\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                      />\n                    </span>\n                  } @else {\n                    <ng-container\n                      [ngTemplateOutlet]=\"tableCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  }\n                </td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  } @else {\n    <div class=\"kf-data-table__cards\" [style.--kf-data-table-card-min]=\"cardMinWidth()\">\n      @for (row of displayedRows(); track trackRow(row, $index); let i = $index) {\n        <div\n          class=\"kf-data-table__card\"\n          [class.kf-data-table__card--interactive]=\"cardInteractive()\"\n          [class.kf-data-table__card--current]=\"isCurrentRow(row, i)\"\n          [attr.aria-current]=\"isCurrentRow(row, i) ? 'true' : null\"\n          [attr.role]=\"cardInteractive() ? 'button' : null\"\n          [attr.tabindex]=\"cardInteractive() ? 0 : null\"\n          (click)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n          (keydown.enter)=\"cardInteractive() ? onRowClick(row, i, $event) : undefined\"\n          (keydown.space)=\"cardInteractive() ? onRowSpace($event, row, i) : undefined\"\n        >\n          @if (cardMediaColumn() || cardTitleColumn() || cardStatusColumns().length) {\n            <div class=\"kf-data-table__card-header\">\n              @if (cardMediaColumn(); as media) {\n                <div class=\"kf-data-table__card-media\">\n                  @if (cellTemplates()?.[media.key]; as template) {\n                    <ng-container\n                      [ngTemplateOutlet]=\"template\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: media }\"\n                    />\n                  } @else {\n                    <img [src]=\"cellValue(row, media)\" alt=\"\" />\n                  }\n                </div>\n              }\n              <div class=\"kf-data-table__card-heading\">\n                @if (cardTitleColumn(); as title) {\n                  <span\n                    class=\"kf-data-table__card-title\"\n                    [class.kf-data-table__card-title--mono]=\"title.mono\"\n                  >\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: title, index: i }\"\n                    />\n                  </span>\n                }\n                @if (cardStatusColumns().length) {\n                  <span class=\"kf-data-table__card-statuses\">\n                    @for (column of cardStatusColumns(); track column.key) {\n                      <ng-container\n                        [ngTemplateOutlet]=\"cardCell\"\n                        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                      />\n                    }\n                  </span>\n                }\n              </div>\n            </div>\n          }\n\n          @if (cardLeadColumns().length || cardFieldColumns().length) {\n            <div class=\"kf-data-table__card-fields\">\n              @for (column of cardLeadColumns(); track column.key) {\n                <div\n                  class=\"kf-data-table__card-lead\"\n                  [style.--kf-data-table-card-clamp]=\"column.cardClamp\"\n                  [attr.title]=\"cellValue(row, column) || null\"\n                >\n                  <span class=\"kf-data-table__sr-only\">{{ column.label }}: </span>\n                  <ng-container\n                    [ngTemplateOutlet]=\"cardCell\"\n                    [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                  />\n                </div>\n              }\n              @for (column of cardFieldColumns(); track column.key) {\n                <div class=\"kf-data-table__card-field\">\n                  <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n                  <span\n                    class=\"kf-data-table__card-value\"\n                    [class.kf-data-table__card-value--emphasis]=\"column.emphasis\"\n                  >\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  </span>\n                </div>\n              }\n            </div>\n          }\n\n          @if (cardMetaColumns().length) {\n            <div class=\"kf-data-table__card-meta\">\n              @for (column of cardMetaColumns(); track column.key) {\n                <div\n                  class=\"kf-data-table__card-meta-item\"\n                  [class.kf-data-table__card-meta-item--end]=\"\n                    isEndAligned(column) || column.emphasis\n                  \"\n                  [class.kf-data-table__card-meta-item--emphasis]=\"column.emphasis\"\n                  [style.flex-basis]=\"column.width\"\n                >\n                  <span class=\"kf-data-table__card-label kf-overline-text\">{{ column.label }}</span>\n                  <span class=\"kf-data-table__card-meta-value\">\n                    <ng-container\n                      [ngTemplateOutlet]=\"cardCell\"\n                      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                    />\n                  </span>\n                </div>\n              }\n            </div>\n          }\n\n          @if (cardActionColumns().length) {\n            <div class=\"kf-data-table__card-actions\">\n              @for (column of cardActionColumns(); track column.key) {\n                <ng-container\n                  [ngTemplateOutlet]=\"cardCell\"\n                  [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (!loading() && rows().length > 0) {\n    <div class=\"kf-data-table__footer\">\n      @if (effectivePageSize()) {\n        <kf-pagination\n          [page]=\"page()\"\n          [pages]=\"totalPages()\"\n          [pageSizeOptions]=\"pageSizeOptions()\"\n          [pageSize]=\"effectivePageSize()\"\n          (pageChange)=\"goToPage($event)\"\n          (pageSizeChange)=\"setPageSize($event)\"\n        >\n          {{ paginationSummary() }}\n        </kf-pagination>\n      }\n      <ng-content select=\"[footer]\" />\n    </div>\n  }\n</div>\n\n<!-- Celda de la vista tabla \u2014 compartida por la celda normal y la `truncate`.\n     Una columna `interactive` envuelve su contenido en un bot\u00F3n real. -->\n<ng-template #tableCell let-row let-column=\"column\" let-i=\"index\">\n  @if (column.interactive) {\n    <button\n      type=\"button\"\n      class=\"kf-data-table__cell-button\"\n      [attr.aria-label]=\"cellLabel(row, column, i)\"\n      (click)=\"onCellClick(row, column, i)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"tableCellContent\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n      />\n    </button>\n  } @else {\n    <ng-container\n      [ngTemplateOutlet]=\"tableCellContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n    />\n  }\n</ng-template>\n\n<!-- Contenido de una celda de la vista tabla (template del consumidor,\n     thumbnail o texto). -->\n<ng-template #tableCellContent let-row let-column=\"column\" let-i=\"index\">\n  @if (cellTemplates()?.[column.key]; as template) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n    />\n  } @else if (column.cardRole === 'media') {\n    <img class=\"kf-data-table__thumb\" [src]=\"cellValue(row, column)\" alt=\"\" />\n  } @else {\n    {{ cellValue(row, column) }}\n  }\n</ng-template>\n\n<!-- Zona de la tarjeta: igual que la celda de tabla, con bot\u00F3n si la columna es `interactive`. -->\n<ng-template #cardCell let-row let-column=\"column\" let-i=\"index\">\n  @if (column.interactive) {\n    <button\n      type=\"button\"\n      class=\"kf-data-table__cell-button\"\n      [attr.aria-label]=\"cellLabel(row, column, i)\"\n      (click)=\"onCellClick(row, column, i)\"\n    >\n      <ng-container\n        [ngTemplateOutlet]=\"cardCellContent\"\n        [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n      />\n    </button>\n  } @else {\n    <ng-container\n      [ngTemplateOutlet]=\"cardCellContent\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, column: column, index: i }\"\n    />\n  }\n</ng-template>\n\n<!-- Contenido de una zona de la tarjeta: template del consumidor o el valor como texto. -->\n<ng-template #cardCellContent let-row let-column=\"column\" let-i=\"index\">\n  @if (cellTemplates()?.[column.key]; as template) {\n    <ng-container\n      [ngTemplateOutlet]=\"template\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, index: i, column: column }\"\n    />\n  } @else {\n    {{ cellValue(row, column) }}\n  }\n</ng-template>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}: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__scroll{position:relative;overflow-x:auto}.kf-data-table__scroll--weighted{container-type:inline-size}.kf-data-table__scroll:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__scroll:before,.kf-data-table__scroll:after{content:\"\";position:absolute;top:0;bottom:0;width:24px;pointer-events:none;opacity:0;transition:opacity .14s}.kf-data-table__scroll:before{left:0;background:linear-gradient(to right,var(--kf-color-white),transparent)}.kf-data-table__scroll:after{right:0;background:linear-gradient(to left,var(--kf-color-white),transparent)}.kf-data-table__scroll--fade-left:before{opacity:1}.kf-data-table__scroll--fade-right:after{opacity:1}.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--compact .kf-data-table__table th,.kf-data-table--compact .kf-data-table__table td{padding:var(--kf-space-xs) var(--kf-space-md)}.kf-data-table__table th{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{transition:background .14s}.kf-data-table__row--interactive{cursor:pointer}.kf-data-table__row--interactive:hover{background:var(--kf-color-primary-soft)}.kf-data-table__row--interactive:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}.kf-data-table__row--current{background:var(--kf-color-primary-soft)}.kf-data-table__cell--right{text-align:right}.kf-data-table__cell--center{text-align:center}.kf-data-table__table .kf-data-table__cell--truncate{max-width:0}.kf-data-table__truncate{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kf-data-table__table td.kf-data-table__cell--mono{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm)}.kf-data-table__table td.kf-data-table__cell--emphasis{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.kf-data-table__cell-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);max-width:100%;min-width:32px;min-height:32px;padding:var(--kf-space-xs);border:0;border-radius:var(--kf-radius-xs);background:transparent;color:inherit;font:inherit;text-align:inherit;cursor:pointer}.kf-data-table__cell-button:hover{box-shadow:inset 0 0 0 1px var(--kf-color-border-strong)}.kf-data-table__cell-button:focus-visible{outline:2px solid transparent;outline-offset:-2px;box-shadow:inset 0 0 0 2px var(--kf-color-primary)}@media(max-width:640px),(pointer:coarse){.kf-data-table__cell-button{min-width:44px;min-height:44px}}.kf-data-table__cell--sticky{background:var(--kf-color-white)}.kf-data-table__table th.kf-data-table__cell--sticky{background:var(--kf-color-surface);z-index:2}.kf-data-table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.kf-data-table__cell--sortable:hover{color:var(--kf-color-ink)}.kf-data-table__table th.kf-data-table__cell--sort-active{color:var(--kf-color-primary);font-weight:700}.kf-data-table__th-content{display:inline-flex;align-items:center;gap:var(--kf-space-xs)}.kf-data-table__sort-icon{transition:opacity .14s}.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon{opacity:.5}.kf-data-table__sort-icon--active,.kf-data-table__cell--sortable:hover .kf-data-table__sort-icon--active{opacity:1}.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(min(var(--kf-data-table-card-min, 220px),100%),1fr));grid-auto-rows:1fr;gap:var(--kf-space-md);padding:var(--kf-space-md)}.kf-data-table__card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);overflow:hidden;transition:border-color .14s,box-shadow .14s,background .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:hover{background:var(--kf-color-primary-soft)}.kf-data-table__card--interactive:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--kf-color-primary)}.kf-data-table__card--current{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-data-table__card-header{display:flex;align-items:center;gap:var(--kf-space-sm);min-width:0;padding:var(--kf-space-md) var(--kf-space-md) var(--kf-space-sm)}.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:1;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-title{flex:0 1 auto;min-width:0;font-family:var(--kf-font-title);font-weight:600;color:var(--kf-color-ink);overflow-wrap:anywhere}.kf-data-table__card-title--mono{flex:none;font-family:var(--kf-font-mono);font-size:var(--kf-font-size-body-sm);white-space:nowrap}.kf-data-table__card-statuses{display:flex;flex:0 1 auto;flex-wrap:nowrap;justify-content:flex-end;gap:var(--kf-space-xs);min-width:0;overflow:hidden}.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);min-width:0;padding:var(--kf-space-md)}.kf-data-table__card-header+.kf-data-table__card-fields{padding-top:0}.kf-data-table__card-lead{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--kf-data-table-card-clamp, 2);line-clamp:var(--kf-data-table-card-clamp, 2);min-width:0;overflow:hidden;overflow-wrap:anywhere;color:var(--kf-color-ink);font-weight:500;line-height:1.35}.kf-data-table__card-field{display:flex;justify-content:space-between;gap:var(--kf-space-sm);min-width:0}.kf-data-table__card-label{flex:none}.kf-data-table__card-value{min-width:0;color:var(--kf-color-text);text-align:right;overflow-wrap:anywhere}.kf-data-table__card-value--emphasis,.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-weight:700;color:var(--kf-color-ink);font-variant-numeric:tabular-nums}.kf-data-table__card-meta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--kf-space-xs) var(--kf-space-md);margin-top:auto;padding:var(--kf-space-sm) var(--kf-space-md) var(--kf-space-md);border-top:1px solid var(--kf-color-border)}.kf-data-table__card-meta-item{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-data-table__card-meta-item--end{margin-left:auto;align-items:flex-end;text-align:right}.kf-data-table__card-meta-value{color:var(--kf-color-text);font-variant-numeric:tabular-nums}.kf-data-table__card-meta-item--emphasis .kf-data-table__card-meta-value{font-size:var(--kf-font-size-body)}.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__card-meta~.kf-data-table__card-actions{margin-top:0}.kf-data-table__thumb{width:32px;height:32px}@media(prefers-reduced-motion:reduce){.kf-data-table__card,.kf-data-table__row{transition:none}}.kf-data-table__sk-cell{display:flex;align-items:center;justify-content:flex-start;min-height:1lh}.kf-data-table__sk-cell--center{justify-content:center}.kf-data-table__sk-cell--end{justify-content:flex-end}.kf-data-table__sk-bar{flex:none}.kf-data-table__sk-media{display:block;width:48px;height:48px;border-radius:var(--kf-radius-xs)}.kf-data-table__sk-pill{display:block;width:4.5rem;height:1.25rem;border-radius:var(--kf-radius-pill)}.kf-data-table__sk-value{flex:none;width:40%}.kf-data-table__sk-lead{line-height:1.35}.kf-data-table__sk-action{display:block;width:5rem;height:2rem;border-radius:var(--kf-radius-sm)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: true }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", required: false }] }], scrollEl: [{ type: i0.ViewChild, args: ['scroll', { isSignal: 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 }] }], showViewToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewToggle", required: false }] }], cardMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardMinWidth", required: false }] }], render: [{ type: i0.Input, args: [{ isSignal: true, alias: "render", required: false }] }], cellTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplates", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], rowClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClickable", required: false }] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], cellClick: [{ type: i0.Output, args: ["cellClick"] }], cellAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellAriaLabel", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], currentRowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentRowKey", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], keepPageOnRowsChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepPageOnRowsChange", required: false }] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], itemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemLabel", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }, { type: i0.Output, args: ["viewChange"] }] } });
 
 /**
- * Signal con la vista de `kf-data-table` ('table' | 'cards') derivada de un
- * breakpoint — mismo criterio que cualquier tabla con muchas columnas: bajo
- * el ancho dado, la vista de tabla no entra sin scroll horizontal, así que
- * se fuerza `cards`. Centraliza el patrón `matchMediaSignal` +
- * `computed<DataTableView>` que cada tabla del portal repetía igual.
+ * Acción de bajo énfasis con apariencia de texto — "¿Olvidaste tu
+ * contraseña?", "Volver a iniciar sesión", o un link real de navegación
+ * como "Ir a pagos →".
  *
- *   protected readonly tableView = dataTableViewSignal();
- *   // con un breakpoint distinto al default de 900px:
- *   protected readonly tableView = dataTableViewSignal('(max-width: 768px)');
- */
-function dataTableViewSignal(query = '(max-width: 900px)') {
-    const isMobile = matchMediaSignal(query);
-    return computed(() => (isMobile() ? 'cards' : 'table'));
-}
-
-/**
- * Separador visual simple entre bloques de contenido. `orientation`
- * controla si es una línea horizontal (para separar secciones apiladas) o
- * vertical (para separar elementos en una fila, ej. acciones en una toolbar,
- * o las columnas de metadata en `kf-company-selector`).
+ * Sin `href` (default) es un `<button type="button">`: dispara una acción
+ * en la misma pantalla, vía `(click)`. Con `href`, es un `<a>` real: navega
+ * a otra URL. `showArrow` agrega un ícono `chevron-right` al final — para
+ * el patrón "texto + flecha" de un link que lleva a otro lado.
  *
- * En `vertical`, el divisor necesita una altura del contexto donde vive —
- * `:host { align-self: stretch }` lo hace ocupar la altura del contenedor
- * flex/grid padre sin que el consumidor tenga que fijarla a mano. `flex:
- * none` evita que el propio divisor se achique a 0 dentro de ese contenedor
- * flex cuando hay contenido hermano compitiendo por espacio.
+ * `variant="default"` (color primario, subrayado en hover) es para la
+ * acción de mayor jerarquía relativa de la pantalla; `variant="muted"`
+ * (gris que pasa a primario en hover) es para acciones de retroceso/salida.
  *
- *   <kf-divider />
- *   <kf-divider orientation="vertical" />
+ *   <kf-link (click)="onForgotPassword()">¿Olvidaste tu contraseña?</kf-link>
+ *   <kf-link variant="muted" (click)="onBack()">← Volver a iniciar sesión</kf-link>
+ *   <kf-link href="/pagos" showArrow>Ir a pagos</kf-link>
+ */
+class Link {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Si se pasa, renderiza un `<a>` real en vez de `<button>` — navega en vez de disparar `(click)`. */
+    href = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+    /** Ícono `chevron-right` al final — para el patrón "texto + flecha" de un link que lleva a otro lado. */
+    showArrow = input(false, { ...(ngDevMode ? { debugName: "showArrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Link, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Link, isStandalone: true, selector: "kf-link", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet), no un\n  <ng-content> por rama: Angular solo conecta la proyecci\u00F3n real del\n  consumidor a la PRIMERA instancia de <ng-content> que encuentra en el\n  \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> en cada rama del @if, la\n  que no se activa en runtime igual \"roba\" la proyecci\u00F3n (mismo bug ya\n  resuelto en Text.ts).\n-->\n<ng-template #content>\n  <ng-content />\n  @if (showArrow()) {\n    <kf-icon name=\"chevron-right\" size=\"sm\" />\n  }\n</ng-template>\n@if (href(); as url) {\n  <a class=\"kf-link\" [class.kf-link--muted]=\"variant() === 'muted'\" [href]=\"url\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"kf-link\"\n    [class.kf-link--muted]=\"variant() === 'muted'\"\n    [disabled]=\"disabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </button>\n}\n", styles: [":host{display:inline-block}.kf-link{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;font:inherit;font-weight:500;color:var(--kf-color-primary);text-decoration:none;cursor:pointer}.kf-link:hover:not(:disabled){text-decoration:underline}.kf-link:focus-visible{outline:2px solid var(--kf-color-primary);outline-offset:2px;border-radius:var(--kf-radius-xs)}.kf-link:disabled{opacity:.5;cursor:not-allowed}.kf-link--muted{color:var(--kf-color-text-muted)}.kf-link--muted:hover:not(:disabled){color:var(--kf-color-primary);text-decoration:none}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Link, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-link', imports: [Icon, NgTemplateOutlet], template: "<!--\n  Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet), no un\n  <ng-content> por rama: Angular solo conecta la proyecci\u00F3n real del\n  consumidor a la PRIMERA instancia de <ng-content> que encuentra en el\n  \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> en cada rama del @if, la\n  que no se activa en runtime igual \"roba\" la proyecci\u00F3n (mismo bug ya\n  resuelto en Text.ts).\n-->\n<ng-template #content>\n  <ng-content />\n  @if (showArrow()) {\n    <kf-icon name=\"chevron-right\" size=\"sm\" />\n  }\n</ng-template>\n@if (href(); as url) {\n  <a class=\"kf-link\" [class.kf-link--muted]=\"variant() === 'muted'\" [href]=\"url\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"kf-link\"\n    [class.kf-link--muted]=\"variant() === 'muted'\"\n    [disabled]=\"disabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </button>\n}\n", styles: [":host{display:inline-block}.kf-link{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;font:inherit;font-weight:500;color:var(--kf-color-primary);text-decoration:none;cursor:pointer}.kf-link:hover:not(:disabled){text-decoration:underline}.kf-link:focus-visible{outline:2px solid var(--kf-color-primary);outline-offset:2px;border-radius:var(--kf-radius-xs)}.kf-link:disabled{opacity:.5;cursor:not-allowed}.kf-link--muted{color:var(--kf-color-text-muted)}.kf-link--muted:hover:not(:disabled){color:var(--kf-color-primary);text-decoration:none}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }] } });
+
+/**
+ * Fila de un documento descargable: chip de ícono coloreado por tipo,
+ * título, metadata y la acción de descarga al final. Sin `href` rinde
+ * `pendingLabel` en vez de un link roto. El contenido proyectado cae entre
+ * la metadata y la acción, como slot para un `kf-badge` de estado.
+ *
+ * `loading` (default `false`): dibuja el esqueleto de la fila — chip, título,
+ * metadata y acción como bloques del alto real de cada texto — con el mismo
+ * cascarón, así que al llegar los datos no hay salto de layout. Pasa los
+ * mismos inputs que usarás cargada (`meta` incluido, para reservar su línea).
+ * Marca el host con `aria-busy="true"` y oculta el contenido proyectado.
+ *
+ *   <kf-document-row title="Factura" meta="PDF · 120 KB" [loading]="isLoading()" />
+ */
+class DocumentRow {
+    icon = input('file', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    tone = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Qué documento es. El nombre humano del tipo, no el del archivo. */
+    title = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Línea secundaria — archivo, fecha, tamaño. El consumidor la arma ya
+     * formateada: la librería no decide en qué unidad se lee un tamaño ni en
+     * qué formato una fecha. */
+    meta = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+    /** Ausente rinde `pendingLabel` en vez del link de descarga. */
+    href = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
+    downloadLabel = input('Descargar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "downloadLabel" }] : /* istanbul ignore next */ []));
+    /** Qué se dice cuando no hay `href`. */
+    pendingLabel = input('En generación', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pendingLabel" }] : /* istanbul ignore next */ []));
+    /** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DocumentRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DocumentRow, isStandalone: true, selector: "kf-document-row", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, downloadLabel: { classPropertyName: "downloadLabel", publicName: "downloadLabel", isSignal: true, isRequired: false, transformFunction: null }, pendingLabel: { classPropertyName: "pendingLabel", publicName: "pendingLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"kf-document-row--\" + tone()", "class.kf-document-row--loading": "loading()", "attr.aria-busy": "loading() ? 'true' : null" } }, ngImport: i0, template: "@if (loading()) {\n  <span class=\"kf-document-row__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n\n  <span class=\"kf-document-row__body\" aria-hidden=\"true\">\n    <span class=\"kf-document-row__title kf-bone\" style=\"--kf-bone-width: 55%\">{{ title() }}</span>\n    @if (meta(); as line) {\n      <span class=\"kf-document-row__meta kf-caption-text kf-bone\" style=\"--kf-bone-width: 35%\">{{\n        line\n      }}</span>\n    }\n  </span>\n\n  <span class=\"kf-document-row__actions kf-document-row__actions--loading\" aria-hidden=\"true\">\n    <ng-content />\n    <span class=\"kf-document-row__pending kf-caption-text kf-bone\" style=\"--kf-bone-width: 5rem\">{{\n      href() ? downloadLabel() : pendingLabel()\n    }}</span>\n  </span>\n} @else {\n  <span class=\"kf-document-row__icon\" aria-hidden=\"true\">\n    <kf-icon [name]=\"icon()\" size=\"sm\" />\n  </span>\n\n  <span class=\"kf-document-row__body\">\n    <span class=\"kf-document-row__title\">{{ title() }}</span>\n    @if (meta(); as line) {\n      <span class=\"kf-document-row__meta kf-caption-text\">{{ line }}</span>\n    }\n  </span>\n\n  <span class=\"kf-document-row__actions\">\n    <ng-content />\n    @if (href(); as url) {\n      <kf-link [href]=\"url\">{{ downloadLabel() }}</kf-link>\n    } @else {\n      <span class=\"kf-document-row__pending kf-caption-text\">{{ pendingLabel() }}</span>\n    }\n  </span>\n}\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-document-row__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--kf-radius-xs);background:var(--kf-color-gray-200);color:var(--kf-color-text)}:host(.kf-document-row--info) .kf-document-row__icon{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}:host(.kf-document-row--ok) .kf-document-row__icon{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}:host(.kf-document-row--warn) .kf-document-row__icon{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}:host(.kf-document-row--error) .kf-document-row__icon{background:var(--kf-color-error-soft);color:var(--kf-color-error-strong)}.kf-document-row__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}.kf-document-row__title{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-ink)}.kf-document-row__meta{overflow-wrap:anywhere}.kf-document-row__actions{display:flex;align-items:center;gap:var(--kf-space-sm);flex:0 0 auto;margin-left:auto}@container (max-width: 420px){:host{flex-wrap:wrap}}.kf-document-row__actions--loading>:not(.kf-bone){visibility:hidden}.kf-document-row__icon.kf-bone-fill{border-radius:var(--kf-radius-xs)}:host(.kf-document-row--loading) .kf-document-row__icon{background:var(--kf-color-border);animation:none}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DocumentRow, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-document-row', imports: [Icon, Link], host: {
+                        '[class]': '"kf-document-row--" + tone()',
+                        '[class.kf-document-row--loading]': 'loading()',
+                        '[attr.aria-busy]': "loading() ? 'true' : null",
+                    }, template: "@if (loading()) {\n  <span class=\"kf-document-row__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n\n  <span class=\"kf-document-row__body\" aria-hidden=\"true\">\n    <span class=\"kf-document-row__title kf-bone\" style=\"--kf-bone-width: 55%\">{{ title() }}</span>\n    @if (meta(); as line) {\n      <span class=\"kf-document-row__meta kf-caption-text kf-bone\" style=\"--kf-bone-width: 35%\">{{\n        line\n      }}</span>\n    }\n  </span>\n\n  <span class=\"kf-document-row__actions kf-document-row__actions--loading\" aria-hidden=\"true\">\n    <ng-content />\n    <span class=\"kf-document-row__pending kf-caption-text kf-bone\" style=\"--kf-bone-width: 5rem\">{{\n      href() ? downloadLabel() : pendingLabel()\n    }}</span>\n  </span>\n} @else {\n  <span class=\"kf-document-row__icon\" aria-hidden=\"true\">\n    <kf-icon [name]=\"icon()\" size=\"sm\" />\n  </span>\n\n  <span class=\"kf-document-row__body\">\n    <span class=\"kf-document-row__title\">{{ title() }}</span>\n    @if (meta(); as line) {\n      <span class=\"kf-document-row__meta kf-caption-text\">{{ line }}</span>\n    }\n  </span>\n\n  <span class=\"kf-document-row__actions\">\n    <ng-content />\n    @if (href(); as url) {\n      <kf-link [href]=\"url\">{{ downloadLabel() }}</kf-link>\n    } @else {\n      <span class=\"kf-document-row__pending kf-caption-text\">{{ pendingLabel() }}</span>\n    }\n  </span>\n}\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-document-row__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--kf-radius-xs);background:var(--kf-color-gray-200);color:var(--kf-color-text)}:host(.kf-document-row--info) .kf-document-row__icon{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}:host(.kf-document-row--ok) .kf-document-row__icon{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}:host(.kf-document-row--warn) .kf-document-row__icon{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}:host(.kf-document-row--error) .kf-document-row__icon{background:var(--kf-color-error-soft);color:var(--kf-color-error-strong)}.kf-document-row__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}.kf-document-row__title{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-ink)}.kf-document-row__meta{overflow-wrap:anywhere}.kf-document-row__actions{display:flex;align-items:center;gap:var(--kf-space-sm);flex:0 0 auto;margin-left:auto}@container (max-width: 420px){:host{flex-wrap:wrap}}.kf-document-row__actions--loading>:not(.kf-bone){visibility:hidden}.kf-document-row__icon.kf-bone-fill{border-radius:var(--kf-radius-xs)}:host(.kf-document-row--loading) .kf-document-row__icon{background:var(--kf-color-border);animation:none}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], downloadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadLabel", required: false }] }], pendingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingLabel", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+
+/**
+ * Barra de progreso de un solo valor (0-100%) con color por severidad —
+ * para un porcentaje simple, a diferencia de `kf-bucket-progress`, que
+ * dibuja varias categorías proporcionales en la misma barra.
+ *
+ *   <kf-progress [value]="80" tone="ok" label="80%" />
+ *   <kf-progress [value]="ratio()" [tone]="severityTone()" />
+ *
+ * `value` se clampea a [0, 100] — un consumidor que calcule un ratio fuera
+ * de rango (ej. tiempo transcurrido sobre un SLA ya vencido) no rompe el
+ * ancho de la barra. `size` cambia el grosor de la pista (`sm` 4px, `md` 8px,
+ * `lg` 12px; sin él, 4px como siempre); el `role="progressbar"` y sus valores
+ * accesibles no cambian. `label` es texto libre opcional sobre la barra (ej.
+ * "80%"); sin él, no se renderiza ningún texto, solo la barra.
+ */
+class Progress {
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    tone = input('neutral', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Grosor de la pista. Default `sm` (4px). */
+    size = input('sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Nombre accesible de la barra (`aria-label`). Sin él, el `progressbar`
+     * queda sin nombre: dalo siempre que el contexto no lo nombre ya (por
+     * ejemplo con un `label` visible asociado). */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    clampedValue = computed(() => Math.min(Math.max(this.value(), 0), 100), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Progress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Progress, isStandalone: true, selector: "kf-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kf-progress\">\n  @if (label(); as text) {\n    <div class=\"kf-progress__top\">\n      <span class=\"kf-progress__label kf-progress--{{ tone() }}\">{{ text }}</span>\n    </div>\n  }\n  <div\n    class=\"kf-progress__track kf-progress__track--{{ size() }}\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabel() ?? null\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"kf-progress__fill kf-progress--{{ tone() }}\" [style.width.%]=\"clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}.kf-progress{display:flex;flex-direction:column;min-width:0}.kf-progress__top{display:flex;justify-content:flex-end;margin-block-end:3px}.kf-progress__label{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-caption);font-weight:700}.kf-progress__track{height:4px;border-radius:var(--kf-radius-pill);background:var(--kf-color-gray-200);overflow:hidden}.kf-progress__track--md{height:8px}.kf-progress__track--lg{height:12px}.kf-progress__fill{height:100%;border-radius:var(--kf-radius-pill);transition:width .3s ease}@media(prefers-reduced-motion:reduce){.kf-progress__fill{transition:none}}.kf-progress--neutral{color:var(--kf-color-text-muted)}.kf-progress__fill.kf-progress--neutral{background:var(--kf-color-secondary)}.kf-progress--primary{color:var(--kf-color-primary)}.kf-progress__fill.kf-progress--primary{background:var(--kf-color-primary)}.kf-progress--ok{color:var(--kf-color-success-strong)}.kf-progress__fill.kf-progress--ok{background:var(--kf-color-success)}.kf-progress--warn{color:var(--kf-color-warning-strong)}.kf-progress__fill.kf-progress--warn{background:var(--kf-color-warning)}.kf-progress--error{color:var(--kf-color-error-strong)}.kf-progress__fill.kf-progress--error{background:var(--kf-color-error)}.kf-progress--purple{color:var(--kf-color-purple)}.kf-progress__fill.kf-progress--purple{background:var(--kf-color-purple)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Progress, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-progress', template: "<div class=\"kf-progress\">\n  @if (label(); as text) {\n    <div class=\"kf-progress__top\">\n      <span class=\"kf-progress__label kf-progress--{{ tone() }}\">{{ text }}</span>\n    </div>\n  }\n  <div\n    class=\"kf-progress__track kf-progress__track--{{ size() }}\"\n    role=\"progressbar\"\n    [attr.aria-label]=\"ariaLabel() ?? null\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"kf-progress__fill kf-progress--{{ tone() }}\" [style.width.%]=\"clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}.kf-progress{display:flex;flex-direction:column;min-width:0}.kf-progress__top{display:flex;justify-content:flex-end;margin-block-end:3px}.kf-progress__label{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-caption);font-weight:700}.kf-progress__track{height:4px;border-radius:var(--kf-radius-pill);background:var(--kf-color-gray-200);overflow:hidden}.kf-progress__track--md{height:8px}.kf-progress__track--lg{height:12px}.kf-progress__fill{height:100%;border-radius:var(--kf-radius-pill);transition:width .3s ease}@media(prefers-reduced-motion:reduce){.kf-progress__fill{transition:none}}.kf-progress--neutral{color:var(--kf-color-text-muted)}.kf-progress__fill.kf-progress--neutral{background:var(--kf-color-secondary)}.kf-progress--primary{color:var(--kf-color-primary)}.kf-progress__fill.kf-progress--primary{background:var(--kf-color-primary)}.kf-progress--ok{color:var(--kf-color-success-strong)}.kf-progress__fill.kf-progress--ok{background:var(--kf-color-success)}.kf-progress--warn{color:var(--kf-color-warning-strong)}.kf-progress__fill.kf-progress--warn{background:var(--kf-color-warning)}.kf-progress--error{color:var(--kf-color-error-strong)}.kf-progress__fill.kf-progress--error{background:var(--kf-color-error)}.kf-progress--purple{color:var(--kf-color-purple)}.kf-progress__fill.kf-progress--purple{background:var(--kf-color-purple)}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/** Tono de `kf-progress` que acompaña a cada tono de la card. */
+const BAR_TONE = {
+    primary: 'primary',
+    success: 'ok',
+    error: 'error',
+    warn: 'warn',
+    purple: 'primary',
+    info: 'primary',
+    neutral: 'primary',
+};
+/**
+ * Card de estadística horizontal: ícono circular grande a la izquierda,
+ * valor + label + nota apilados al centro, chevron opcional al final si es
+ * clickeable. Distinta de `kf-metric-card` (layout vertical, label arriba +
+ * ícono a la derecha) — este es el patrón real del dashboard de OTD ("Bonos
+ * otorgados", "Cortesías otorgadas"), no una variante de la misma card.
+ *
+ *   <kf-stat-card icon="gift" tone="purple" value="4" label="Bonos otorgados" note="$15,000.00 en beneficios" (cardClick)="onNavigate('beneficios')" />
+ *
+ * Extensiones opcionales (la card sin ellas se ve y se comporta como siempre):
+ * - `tone`: además de `primary|success|error|purple`, `warn`, `info` y `neutral`.
+ * - `bar` (0-100): barra de progreso accesible (`kf-progress`, `role="progressbar"`
+ *   con `aria-valuenow`/`min`/`max` y el `label` como nombre) bajo la nota. Se
+ *   acota a [0, 100]; `null`/`undefined` no la dibuja. Es un refuerzo visual:
+ *   el valor exacto conviene darlo también en texto (`hint`), porque el relleno
+ *   de algunos tonos de `kf-progress` tiene poco contraste con su pista.
+ * - `hint`: texto secundario bajo la barra (ej. "12 de 20 completadas").
+ * - `pressed` (`boolean | null`): con `clickable`, la card es un botón de
+ *   alternancia (`aria-pressed`), útil como filtro. `null` (default) = no
+ *   aplica y no emite el atributo. Sin `clickable` no tiene efecto.
+ *
+ *   <kf-stat-card icon="clock" tone="warn" value="7" label="Por vencer" [bar]="35" hint="7 de 20"
+ *     clickable [pressed]="filter() === 'due'" (cardClick)="toggle('due')" />
+ *
+ * `loading` (default `false`): mientras es `true` la card dibuja su esqueleto
+ * en vez del contenido, con el MISMO cascarón (borde, padding, ícono de 50px)
+ * y líneas del alto real de cada texto — valor, etiqueta y, si se pasaron,
+ * nota, barra y `hint` —, así que al llegar los datos no hay salto de
+ * layout. Pasa los mismos inputs que usarás cargada para que el esqueleto
+ * reserve las mismas líneas. Marca la card con `aria-busy="true"`, no es
+ * clicable ni expone su texto a lectores de pantalla mientras carga.
+ *
+ *   <kf-stat-card icon="clock" value="7" label="Por vencer" note="Esta semana" [loading]="isLoading()" />
+ */
+class StatCard {
+    icon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    tone = input('primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    note = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "note" }] : /* istanbul ignore next */ []));
+    /** Avance 0-100 (barra de progreso accesible); `null`/`undefined` = sin barra. */
+    bar = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bar" }] : /* istanbul ignore next */ []));
+    /** Texto secundario bajo la barra (o bajo la nota si no hay barra). */
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /**
+     * Estado de alternancia (`aria-pressed`) cuando la card es `clickable`.
+     * `null` (default) = no aplica: el atributo no se emite.
+     */
+    pressed = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pressed" }] : /* istanbul ignore next */ []));
+    /** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Si se escucha `cardClick`, la card se renderiza como botón clickeable con chevron. */
+    clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    cardClick = output();
+    barTone = computed(() => BAR_TONE[this.tone()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "barTone" }] : /* istanbul ignore next */ []));
+    hasBar = computed(() => {
+        const value = this.bar();
+        return value !== null && value !== undefined && Number.isFinite(value);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasBar" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StatCard, isStandalone: true, selector: "kf-stat-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, bar: { classPropertyName: "bar", publicName: "bar", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "@if (loading()) {\n  <div class=\"kf-stat-card\" aria-busy=\"true\">\n    <span\n      class=\"kf-stat-card__icon kf-stat-card__icon--bone kf-bone-fill\"\n      aria-hidden=\"true\"\n    ></span>\n    <span class=\"kf-stat-card__body\" aria-hidden=\"true\">\n      <span class=\"kf-stat-card__value kf-bone\" style=\"--kf-bone-width: 40%\">{{ value() }}</span>\n      <span class=\"kf-stat-card__label kf-bone\" style=\"--kf-bone-width: 70%\">{{ label() }}</span>\n      @if (note()) {\n        <span class=\"kf-stat-card__note kf-bone\" style=\"--kf-bone-width: 55%\">{{ note() }}</span>\n      }\n      @if (hasBar()) {\n        <span class=\"kf-stat-card__bar\">\n          <span class=\"kf-stat-card__bar-bone kf-bone-fill\"></span>\n        </span>\n      }\n      @if (hint()) {\n        <span class=\"kf-stat-card__hint kf-bone\" style=\"--kf-bone-width: 45%\">{{ hint() }}</span>\n      }\n    </span>\n  </div>\n} @else if (clickable()) {\n  <button\n    type=\"button\"\n    class=\"kf-stat-card kf-stat-card--clickable\"\n    [class.kf-stat-card--pressed]=\"pressed() === true\"\n    [attr.aria-pressed]=\"pressed()\"\n    (click)=\"cardClick.emit()\"\n  >\n    <ng-container *ngTemplateOutlet=\"content\" />\n    <kf-icon class=\"kf-stat-card__chevron\" name=\"chevron-right\" size=\"sm\" />\n  </button>\n} @else {\n  <div class=\"kf-stat-card\">\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </div>\n}\n\n<ng-template #content>\n  <span class=\"kf-stat-card__icon\" [class]=\"'kf-stat-card__icon--' + tone()\">\n    <kf-icon [name]=\"icon()\" size=\"md\" />\n  </span>\n  <span class=\"kf-stat-card__body\">\n    <span class=\"kf-stat-card__value\">{{ value() }}</span>\n    <span class=\"kf-stat-card__label\">{{ label() }}</span>\n    @if (note()) {\n      <span class=\"kf-stat-card__note\">{{ note() }}</span>\n    }\n    @if (hasBar()) {\n      <kf-progress\n        class=\"kf-stat-card__bar\"\n        [value]=\"bar()!\"\n        [tone]=\"barTone()\"\n        [ariaLabel]=\"label()\"\n      />\n    }\n    @if (hint()) {\n      <span class=\"kf-stat-card__hint\">{{ hint() }}</span>\n    }\n  </span>\n</ng-template>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-stat-card{display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-md);background:var(--kf-color-white);box-shadow:var(--kf-shadow-sm);font:inherit;text-align:left}.kf-stat-card--clickable{cursor:pointer;transition:box-shadow .14s,transform .14s}.kf-stat-card--clickable:hover{box-shadow:var(--kf-shadow-md);transform:translateY(-2px)}.kf-stat-card--clickable:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-stat-card--pressed{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 1px var(--kf-color-primary)}.kf-stat-card--pressed:focus-visible{box-shadow:inset 0 0 0 1px var(--kf-color-primary),var(--kf-shadow-focus)}.kf-stat-card__icon{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:var(--kf-radius-md)}.kf-stat-card__icon--primary{background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-stat-card__icon--success{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}.kf-stat-card__icon--error{background:var(--kf-color-error-soft);color:var(--kf-color-error)}.kf-stat-card__icon--purple{background:var(--kf-color-purple-soft);color:var(--kf-color-purple)}.kf-stat-card__icon--warn{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}.kf-stat-card__icon--info{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}.kf-stat-card__icon--neutral{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-stat-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-stat-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:var(--kf-font-size-title-md);color:var(--kf-color-ink)}.kf-stat-card__label{font-size:.875rem;font-weight:700;color:var(--kf-color-ink)}.kf-stat-card__note{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-stat-card__bar{padding-block-start:var(--kf-space-xs)}.kf-stat-card__hint{font-size:.78rem;color:var(--kf-color-text)}.kf-stat-card__chevron{margin-left:auto;flex:none;color:var(--kf-color-gray-400)}.kf-stat-card__icon--bone{border-radius:var(--kf-radius-md)}.kf-stat-card__bar-bone{display:block;height:4px;border-radius:var(--kf-radius-pill)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Progress, selector: "kf-progress", inputs: ["value", "tone", "size", "label", "ariaLabel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-stat-card', imports: [Icon, NgTemplateOutlet, Progress], template: "@if (loading()) {\n  <div class=\"kf-stat-card\" aria-busy=\"true\">\n    <span\n      class=\"kf-stat-card__icon kf-stat-card__icon--bone kf-bone-fill\"\n      aria-hidden=\"true\"\n    ></span>\n    <span class=\"kf-stat-card__body\" aria-hidden=\"true\">\n      <span class=\"kf-stat-card__value kf-bone\" style=\"--kf-bone-width: 40%\">{{ value() }}</span>\n      <span class=\"kf-stat-card__label kf-bone\" style=\"--kf-bone-width: 70%\">{{ label() }}</span>\n      @if (note()) {\n        <span class=\"kf-stat-card__note kf-bone\" style=\"--kf-bone-width: 55%\">{{ note() }}</span>\n      }\n      @if (hasBar()) {\n        <span class=\"kf-stat-card__bar\">\n          <span class=\"kf-stat-card__bar-bone kf-bone-fill\"></span>\n        </span>\n      }\n      @if (hint()) {\n        <span class=\"kf-stat-card__hint kf-bone\" style=\"--kf-bone-width: 45%\">{{ hint() }}</span>\n      }\n    </span>\n  </div>\n} @else if (clickable()) {\n  <button\n    type=\"button\"\n    class=\"kf-stat-card kf-stat-card--clickable\"\n    [class.kf-stat-card--pressed]=\"pressed() === true\"\n    [attr.aria-pressed]=\"pressed()\"\n    (click)=\"cardClick.emit()\"\n  >\n    <ng-container *ngTemplateOutlet=\"content\" />\n    <kf-icon class=\"kf-stat-card__chevron\" name=\"chevron-right\" size=\"sm\" />\n  </button>\n} @else {\n  <div class=\"kf-stat-card\">\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </div>\n}\n\n<ng-template #content>\n  <span class=\"kf-stat-card__icon\" [class]=\"'kf-stat-card__icon--' + tone()\">\n    <kf-icon [name]=\"icon()\" size=\"md\" />\n  </span>\n  <span class=\"kf-stat-card__body\">\n    <span class=\"kf-stat-card__value\">{{ value() }}</span>\n    <span class=\"kf-stat-card__label\">{{ label() }}</span>\n    @if (note()) {\n      <span class=\"kf-stat-card__note\">{{ note() }}</span>\n    }\n    @if (hasBar()) {\n      <kf-progress\n        class=\"kf-stat-card__bar\"\n        [value]=\"bar()!\"\n        [tone]=\"barTone()\"\n        [ariaLabel]=\"label()\"\n      />\n    }\n    @if (hint()) {\n      <span class=\"kf-stat-card__hint\">{{ hint() }}</span>\n    }\n  </span>\n</ng-template>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-stat-card{display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-md);background:var(--kf-color-white);box-shadow:var(--kf-shadow-sm);font:inherit;text-align:left}.kf-stat-card--clickable{cursor:pointer;transition:box-shadow .14s,transform .14s}.kf-stat-card--clickable:hover{box-shadow:var(--kf-shadow-md);transform:translateY(-2px)}.kf-stat-card--clickable:focus-visible{outline:2px solid transparent;box-shadow:var(--kf-shadow-focus)}.kf-stat-card--pressed{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft);box-shadow:inset 0 0 0 1px var(--kf-color-primary)}.kf-stat-card--pressed:focus-visible{box-shadow:inset 0 0 0 1px var(--kf-color-primary),var(--kf-shadow-focus)}.kf-stat-card__icon{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:var(--kf-radius-md)}.kf-stat-card__icon--primary{background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-stat-card__icon--success{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}.kf-stat-card__icon--error{background:var(--kf-color-error-soft);color:var(--kf-color-error)}.kf-stat-card__icon--purple{background:var(--kf-color-purple-soft);color:var(--kf-color-purple)}.kf-stat-card__icon--warn{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}.kf-stat-card__icon--info{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}.kf-stat-card__icon--neutral{background:var(--kf-color-gray-100);color:var(--kf-color-text)}.kf-stat-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-stat-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:var(--kf-font-size-title-md);color:var(--kf-color-ink)}.kf-stat-card__label{font-size:.875rem;font-weight:700;color:var(--kf-color-ink)}.kf-stat-card__note{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-stat-card__bar{padding-block-start:var(--kf-space-xs)}.kf-stat-card__hint{font-size:.78rem;color:var(--kf-color-text)}.kf-stat-card__chevron{margin-left:auto;flex:none;color:var(--kf-color-gray-400)}.kf-stat-card__icon--bone{border-radius:var(--kf-radius-md)}.kf-stat-card__bar-bone{display:block;height:4px;border-radius:var(--kf-radius-pill)}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], bar: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
+
+/** Cantidad de elementos por defecto de cada variante (`count` sin valor). */
+const DEFAULT_COUNT = {
+    'kpi-grid': 4,
+    'card-grid': 6,
+    form: 4,
+    list: 4,
+    table: 5,
+    timeline: 4,
+    'detail-header': 1,
+};
+/** Tope de elementos: un `count` mayor se acota, no tiene sentido pintar más. */
+const SKELETON_PRESET_MAX_COUNT = 12;
+/**
+ * Esqueletos listos para usar que reproducen la FORMA del contenido real, para
+ * que al llegar los datos nada se mueva. Cada variante se arma con la misma
+ * geometría que su equivalente cargado (mismos cascarones, alturas, radios y
+ * gaps, todo por tokens):
+ *
+ * | `variant`        | Equivalente cargado          | `count`        | `columns`          |
+ * | ---------------- | ---------------------------- | -------------- | ------------------ |
+ * | `kpi-grid`       | `kf-stat-card`               | tarjetas (4)   | columnas de la grilla |
+ * | `card-grid`      | `kf-card`                    | tarjetas (6)   | columnas de la grilla |
+ * | `form`           | `kf-input` con label         | campos (4)     | `1` o `2`          |
+ * | `list`           | `kf-document-row`            | filas (4)      | —                  |
+ * | `table`          | `kf-data-table`              | filas (5)      | columnas (4)       |
+ * | `timeline`       | `kf-milestone-timeline`      | etapas (4)     | —                  |
+ * | `detail-header`  | `kf-page-header` con ícono   | —              | —                  |
+ *
+ * Sin `columns`, las grillas (`kpi-grid`, `card-grid`) se reparten solas con un
+ * ancho mínimo por tarjeta. `count` se acota a 12.
+ *
+ * El preset es decorativo (`aria-hidden` por dentro) y marca su contenedor con
+ * `aria-busy="true"`. Con `label` agrega un texto visualmente oculto con
+ * `role="status"` que lo anuncia a lectores de pantalla; dentro de
+ * `kf-content-state` no hace falta (ya lo anuncia él).
+ *
+ *   <kf-skeleton-preset variant="kpi-grid" [count]="4" />
+ *   <kf-skeleton-preset variant="form" [count]="3" [columns]="2" label="Cargando formulario" />
+ *   <kf-content-state [state]="state()" loadingPreset="table">…</kf-content-state>
+ */
+class SkeletonPreset {
+    variant = input('list', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Cantidad de elementos. Sin valor, el de la variante. Máximo 12. */
+    count = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /** Columnas: de la grilla (`kpi-grid`, `card-grid`), del formulario (`1`|`2`) o de la tabla. */
+    columns = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Texto accesible (visualmente oculto, `role="status"`). Vacío, no se emite. */
+    label = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    total = computed(() => {
+        const requested = this.count() ?? DEFAULT_COUNT[this.variant()];
+        return Math.min(Math.max(Math.floor(requested) || 0, 1), SKELETON_PRESET_MAX_COUNT);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    items = computed(() => Array.from({ length: this.total() }, (_, i) => i), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Columnas de la tabla sintética (encabezados en blanco: lo real aún no llegó). */
+    tableColumns = computed(() => Array.from({ length: Math.min(Math.max(this.columns() ?? 4, 1), 8) }, (_, i) => ({
+        key: `c${i}`,
+        label: ' ',
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tableColumns" }] : /* istanbul ignore next */ []));
+    formColumns = computed(() => (this.columns() === 2 ? 2 : 1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formColumns" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SkeletonPreset, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: SkeletonPreset, isStandalone: true, selector: "kf-skeleton-preset", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n  [class]=\"'kf-skeleton-preset kf-skeleton-preset--' + variant()\"\n  aria-busy=\"true\"\n  [style.--kf-skeleton-preset-columns]=\"columns() ?? null\"\n>\n  @if (label()) {\n    <span class=\"kf-sr-only\" role=\"status\">{{ label() }}</span>\n  }\n  @switch (variant()) {\n    @case ('kpi-grid') {\n      <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n        @for (i of items(); track i) {\n          <kf-stat-card [loading]=\"true\" icon=\"bell\" value=\"0\" label=\"Etiqueta\" note=\"Nota\" />\n        }\n      </div>\n    }\n    @case ('card-grid') {\n      <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n        @for (i of items(); track i) {\n          <kf-card gap=\"sm\" aria-hidden=\"true\">\n            <kf-skeleton variant=\"rect\" height=\"7.5rem\" />\n            <kf-skeleton width=\"60%\" height=\"1.25rem\" />\n            <kf-skeleton />\n            <kf-skeleton width=\"80%\" />\n          </kf-card>\n        }\n      </div>\n    }\n    @case ('form') {\n      <div\n        class=\"kf-skeleton-preset__form\"\n        [class.kf-skeleton-preset__form--two]=\"formColumns() === 2\"\n        aria-hidden=\"true\"\n      >\n        @for (i of items(); track i) {\n          <div class=\"kf-skeleton-preset__field\">\n            <span\n              class=\"kf-skeleton-preset__label kf-overline-text kf-bone\"\n              style=\"--kf-bone-width: 30%\"\n            >\n              Etiqueta\n            </span>\n            <span class=\"kf-skeleton-preset__control\">\n              <span class=\"kf-skeleton-preset__value kf-bone\" style=\"--kf-bone-width: 55%\"\n                >Valor</span\n              >\n            </span>\n          </div>\n        }\n      </div>\n    }\n    @case ('list') {\n      <div class=\"kf-skeleton-preset__stack\">\n        @for (i of items(); track i) {\n          <kf-document-row [loading]=\"true\" title=\"Documento\" meta=\"Archivo \u00B7 120 KB\" />\n        }\n      </div>\n    }\n    @case ('table') {\n      <kf-data-table\n        [columns]=\"tableColumns()\"\n        [rows]=\"[]\"\n        [loading]=\"true\"\n        [skeletonRows]=\"total()\"\n      />\n    }\n    @case ('timeline') {\n      <div class=\"kf-skeleton-preset__timeline\" aria-hidden=\"true\">\n        <div class=\"kf-skeleton-preset__timeline-toolbar\">\n          <span class=\"kf-skeleton-preset__timeline-heading kf-bone\" style=\"--kf-bone-width: 30%\">\n            Etapas\n          </span>\n          <span class=\"kf-skeleton-preset__timeline-toggle kf-bone\" style=\"--kf-bone-width: 7rem\">\n            Expandir todo\n          </span>\n        </div>\n        <ol class=\"kf-skeleton-preset__timeline-list\">\n          @for (i of items(); track i) {\n            <li class=\"kf-skeleton-preset__timeline-group\">\n              <span class=\"kf-skeleton-preset__timeline-node kf-bone-fill\"></span>\n              <span class=\"kf-skeleton-preset__timeline-text\">\n                <span\n                  class=\"kf-skeleton-preset__timeline-title kf-bone\"\n                  style=\"--kf-bone-width: 45%\"\n                >\n                  Etapa\n                </span>\n                <span\n                  class=\"kf-skeleton-preset__timeline-meta kf-bone\"\n                  style=\"--kf-bone-width: 30%\"\n                >\n                  Detalle\n                </span>\n              </span>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n    @case ('detail-header') {\n      <div class=\"kf-skeleton-preset__header\" aria-hidden=\"true\">\n        <span class=\"kf-skeleton-preset__header-icon kf-bone-fill\"></span>\n        <span class=\"kf-skeleton-preset__header-heading\">\n          <span class=\"kf-skeleton-preset__header-title kf-bone\" style=\"--kf-bone-width: 40%\">\n            T\u00EDtulo\n          </span>\n          <span class=\"kf-skeleton-preset__header-subtitle kf-bone\" style=\"--kf-bone-width: 60%\">\n            Subt\u00EDtulo\n          </span>\n        </span>\n      </div>\n    }\n  }\n</div>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}.kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:block;font-family:var(--kf-font-body)}.kf-skeleton-preset__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--kf-space-md)}.kf-skeleton-preset__grid--fixed{grid-template-columns:repeat(var(--kf-skeleton-preset-columns),minmax(0,1fr))}.kf-skeleton-preset__stack{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--kf-space-md)}.kf-skeleton-preset__form--two{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:640px){.kf-skeleton-preset__form--two{grid-template-columns:minmax(0,1fr)}}.kf-skeleton-preset__field{display:flex;flex-direction:column;gap:var(--kf-space-xs)}.kf-skeleton-preset__control{display:block;padding:var(--kf-space-sm) var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm)}.kf-skeleton-preset__timeline{--_node: var(--kf-status-node-size, 2.125rem);--_gutter: var(--kf-space-sm);--_pad-y: var(--kf-space-sm);--_line: 2px;display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-heading{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title)}.kf-skeleton-preset__timeline-toggle{box-sizing:border-box;padding:6px var(--kf-space-sm);border:1px solid transparent;font-size:.85rem;font-weight:600;border-radius:var(--kf-radius-sm)}@media(max-width:640px),(pointer:coarse){.kf-skeleton-preset__timeline-toggle{min-height:44px}}.kf-skeleton-preset__timeline-list{list-style:none;margin:0;padding:0}.kf-skeleton-preset__timeline-group{position:relative;display:flex;align-items:flex-start;gap:var(--kf-space-md);box-sizing:border-box;min-height:2.75rem;padding:var(--_pad-y) var(--_gutter)}.kf-skeleton-preset__timeline-group:not(:last-child):before{content:\"\";position:absolute;inset-inline-start:calc(var(--_gutter) + var(--_node) / 2 - var(--_line) / 2);top:calc(var(--_pad-y) + var(--_node));bottom:calc(var(--kf-space-xs) - var(--_pad-y));width:var(--_line);background:var(--kf-color-border)}.kf-skeleton-preset__timeline-node{flex:none;width:var(--_node);height:var(--_node);border-radius:50%}.kf-skeleton-preset__timeline-text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:var(--_node)}.kf-skeleton-preset__timeline-title{font-weight:700;font-size:var(--kf-font-size-body)}.kf-skeleton-preset__timeline-meta{font-size:var(--kf-font-size-body-sm)}.kf-skeleton-preset__header{display:flex;align-items:center;gap:var(--kf-space-md);padding-bottom:var(--kf-space-lg);border-bottom:1px solid var(--kf-color-border)}.kf-skeleton-preset__header-icon{flex:none;width:52px;height:52px;border:1px solid transparent;border-radius:var(--kf-radius-md)}.kf-skeleton-preset__header-heading{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}.kf-skeleton-preset__header-title{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);line-height:1.2}.kf-skeleton-preset__header-subtitle{font-size:.9375rem}@media(max-width:900px){.kf-skeleton-preset__header-icon{width:40px;height:40px}.kf-skeleton-preset__header-title{font-size:var(--kf-font-size-title-sm)}.kf-skeleton-preset__header-subtitle{font-size:.8125rem}}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush", "gap", "loading"] }, { kind: "component", type: DataTable, selector: "kf-data-table", inputs: ["columns", "rows", "loading", "skeletonRows", "rowKey", "flush", "cardable", "defaultView", "showViewToggle", "cardMinWidth", "render", "cellTemplates", "density", "rowClickable", "cellAriaLabel", "ariaLabel", "currentRowKey", "pageSize", "pageSizeOptions", "page", "keepPageOnRowsChange", "itemLabel", "sort", "view"], outputs: ["rowClick", "cellClick", "pageChange", "pageSizeChange", "sortChange", "viewChange"] }, { kind: "component", type: DocumentRow, selector: "kf-document-row", inputs: ["icon", "tone", "title", "meta", "href", "downloadLabel", "pendingLabel", "loading"] }, { kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: StatCard, selector: "kf-stat-card", inputs: ["icon", "tone", "value", "label", "note", "bar", "hint", "pressed", "loading", "clickable"], outputs: ["cardClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: SkeletonPreset, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-skeleton-preset', imports: [Card, DataTable, DocumentRow, Skeleton, StatCard], template: "<div\n  [class]=\"'kf-skeleton-preset kf-skeleton-preset--' + variant()\"\n  aria-busy=\"true\"\n  [style.--kf-skeleton-preset-columns]=\"columns() ?? null\"\n>\n  @if (label()) {\n    <span class=\"kf-sr-only\" role=\"status\">{{ label() }}</span>\n  }\n  @switch (variant()) {\n    @case ('kpi-grid') {\n      <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n        @for (i of items(); track i) {\n          <kf-stat-card [loading]=\"true\" icon=\"bell\" value=\"0\" label=\"Etiqueta\" note=\"Nota\" />\n        }\n      </div>\n    }\n    @case ('card-grid') {\n      <div class=\"kf-skeleton-preset__grid\" [class.kf-skeleton-preset__grid--fixed]=\"!!columns()\">\n        @for (i of items(); track i) {\n          <kf-card gap=\"sm\" aria-hidden=\"true\">\n            <kf-skeleton variant=\"rect\" height=\"7.5rem\" />\n            <kf-skeleton width=\"60%\" height=\"1.25rem\" />\n            <kf-skeleton />\n            <kf-skeleton width=\"80%\" />\n          </kf-card>\n        }\n      </div>\n    }\n    @case ('form') {\n      <div\n        class=\"kf-skeleton-preset__form\"\n        [class.kf-skeleton-preset__form--two]=\"formColumns() === 2\"\n        aria-hidden=\"true\"\n      >\n        @for (i of items(); track i) {\n          <div class=\"kf-skeleton-preset__field\">\n            <span\n              class=\"kf-skeleton-preset__label kf-overline-text kf-bone\"\n              style=\"--kf-bone-width: 30%\"\n            >\n              Etiqueta\n            </span>\n            <span class=\"kf-skeleton-preset__control\">\n              <span class=\"kf-skeleton-preset__value kf-bone\" style=\"--kf-bone-width: 55%\"\n                >Valor</span\n              >\n            </span>\n          </div>\n        }\n      </div>\n    }\n    @case ('list') {\n      <div class=\"kf-skeleton-preset__stack\">\n        @for (i of items(); track i) {\n          <kf-document-row [loading]=\"true\" title=\"Documento\" meta=\"Archivo \u00B7 120 KB\" />\n        }\n      </div>\n    }\n    @case ('table') {\n      <kf-data-table\n        [columns]=\"tableColumns()\"\n        [rows]=\"[]\"\n        [loading]=\"true\"\n        [skeletonRows]=\"total()\"\n      />\n    }\n    @case ('timeline') {\n      <div class=\"kf-skeleton-preset__timeline\" aria-hidden=\"true\">\n        <div class=\"kf-skeleton-preset__timeline-toolbar\">\n          <span class=\"kf-skeleton-preset__timeline-heading kf-bone\" style=\"--kf-bone-width: 30%\">\n            Etapas\n          </span>\n          <span class=\"kf-skeleton-preset__timeline-toggle kf-bone\" style=\"--kf-bone-width: 7rem\">\n            Expandir todo\n          </span>\n        </div>\n        <ol class=\"kf-skeleton-preset__timeline-list\">\n          @for (i of items(); track i) {\n            <li class=\"kf-skeleton-preset__timeline-group\">\n              <span class=\"kf-skeleton-preset__timeline-node kf-bone-fill\"></span>\n              <span class=\"kf-skeleton-preset__timeline-text\">\n                <span\n                  class=\"kf-skeleton-preset__timeline-title kf-bone\"\n                  style=\"--kf-bone-width: 45%\"\n                >\n                  Etapa\n                </span>\n                <span\n                  class=\"kf-skeleton-preset__timeline-meta kf-bone\"\n                  style=\"--kf-bone-width: 30%\"\n                >\n                  Detalle\n                </span>\n              </span>\n            </li>\n          }\n        </ol>\n      </div>\n    }\n    @case ('detail-header') {\n      <div class=\"kf-skeleton-preset__header\" aria-hidden=\"true\">\n        <span class=\"kf-skeleton-preset__header-icon kf-bone-fill\"></span>\n        <span class=\"kf-skeleton-preset__header-heading\">\n          <span class=\"kf-skeleton-preset__header-title kf-bone\" style=\"--kf-bone-width: 40%\">\n            T\u00EDtulo\n          </span>\n          <span class=\"kf-skeleton-preset__header-subtitle kf-bone\" style=\"--kf-bone-width: 60%\">\n            Subt\u00EDtulo\n          </span>\n        </span>\n      </div>\n    }\n  }\n</div>\n", styles: [".kf-overline-text{font-family:var(--kf-font-title);font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-medium);letter-spacing:.04em;text-transform:uppercase;color:var(--kf-color-text-muted)}.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}.kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:block;font-family:var(--kf-font-body)}.kf-skeleton-preset__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--kf-space-md)}.kf-skeleton-preset__grid--fixed{grid-template-columns:repeat(var(--kf-skeleton-preset-columns),minmax(0,1fr))}.kf-skeleton-preset__stack{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--kf-space-md)}.kf-skeleton-preset__form--two{grid-template-columns:repeat(2,minmax(0,1fr))}@media(max-width:640px){.kf-skeleton-preset__form--two{grid-template-columns:minmax(0,1fr)}}.kf-skeleton-preset__field{display:flex;flex-direction:column;gap:var(--kf-space-xs)}.kf-skeleton-preset__control{display:block;padding:var(--kf-space-sm) var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm)}.kf-skeleton-preset__timeline{--_node: var(--kf-status-node-size, 2.125rem);--_gutter: var(--kf-space-sm);--_pad-y: var(--kf-space-sm);--_line: 2px;display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm)}.kf-skeleton-preset__timeline-heading{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:var(--kf-font-weight-title)}.kf-skeleton-preset__timeline-toggle{box-sizing:border-box;padding:6px var(--kf-space-sm);border:1px solid transparent;font-size:.85rem;font-weight:600;border-radius:var(--kf-radius-sm)}@media(max-width:640px),(pointer:coarse){.kf-skeleton-preset__timeline-toggle{min-height:44px}}.kf-skeleton-preset__timeline-list{list-style:none;margin:0;padding:0}.kf-skeleton-preset__timeline-group{position:relative;display:flex;align-items:flex-start;gap:var(--kf-space-md);box-sizing:border-box;min-height:2.75rem;padding:var(--_pad-y) var(--_gutter)}.kf-skeleton-preset__timeline-group:not(:last-child):before{content:\"\";position:absolute;inset-inline-start:calc(var(--_gutter) + var(--_node) / 2 - var(--_line) / 2);top:calc(var(--_pad-y) + var(--_node));bottom:calc(var(--kf-space-xs) - var(--_pad-y));width:var(--_line);background:var(--kf-color-border)}.kf-skeleton-preset__timeline-node{flex:none;width:var(--_node);height:var(--_node);border-radius:50%}.kf-skeleton-preset__timeline-text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:var(--_node)}.kf-skeleton-preset__timeline-title{font-weight:700;font-size:var(--kf-font-size-body)}.kf-skeleton-preset__timeline-meta{font-size:var(--kf-font-size-body-sm)}.kf-skeleton-preset__header{display:flex;align-items:center;gap:var(--kf-space-md);padding-bottom:var(--kf-space-lg);border-bottom:1px solid var(--kf-color-border)}.kf-skeleton-preset__header-icon{flex:none;width:52px;height:52px;border:1px solid transparent;border-radius:var(--kf-radius-md)}.kf-skeleton-preset__header-heading{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}.kf-skeleton-preset__header-title{font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-md);font-weight:var(--kf-font-weight-title);line-height:1.2}.kf-skeleton-preset__header-subtitle{font-size:.9375rem}@media(max-width:900px){.kf-skeleton-preset__header-icon{width:40px;height:40px}.kf-skeleton-preset__header-title{font-size:var(--kf-font-size-title-sm)}.kf-skeleton-preset__header-subtitle{font-size:.8125rem}}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Marca el `ng-template` que reemplaza el esqueleto genérico de
+ * `kf-content-state` mientras carga (`state="loading"`, `load="skeleton"`).
+ *
+ *   <kf-content-state [state]="state()">
+ *     <ng-template kfContentStateLoading><kf-skeleton-preset variant="kpi-grid" /></ng-template>
+ *     …
+ *   </kf-content-state>
+ */
+class ContentStateLoading {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentStateLoading, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.0", type: ContentStateLoading, isStandalone: true, selector: "ng-template[kfContentStateLoading]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentStateLoading, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[kfContentStateLoading]' }]
+        }] });
+/**
+ * Wrapper de los cuatro estados que toda sección tiene: cargando, con datos,
+ * vacía y con error. Un componente en vez de tres `@if` sueltos, porque es
+ * siempre el mismo slot el que va rotando entre los cuatro.
+ *
+ * Con `state="ready"` proyecta el contenido real y desaparece; en los otros
+ * tres dibuja el placeholder correspondiente y el contenido no se instancia.
+ * No inventa visuales propios: `loading` usa `kf-skeleton` (o `kf-spinner` con
+ * `load="spinner"`), y `empty`/`error` usan `kf-empty-state`.
+ *
+ * Las acciones (reintentar, crear) van en el slot `actions` — se ignoran
+ * mientras carga, porque no hay nada que reintentar todavía.
+ *
+ *   <kf-content-state [state]="state()" title="No pudimos cargar tus vehículos"
+ *                     subtitle="Revisá tu conexión e intentá de nuevo.">
+ *     <kf-button actions (click)="retry()">Reintentar</kf-button>
+ *     <kf-data-table [columns]="cols" [rows]="rows()" />
+ *   </kf-content-state>
+ *
+ * Esqueleto de carga: por defecto son tres líneas genéricas. Para que la
+ * carga se parezca a lo que va a aparecer, hay tres vías (de la más corta a la
+ * más libre): `loadingPreset` (una variante de `kf-skeleton-preset`), el input
+ * `loadingTemplate` (un `TemplateRef`) o un `ng-template` marcado con
+ * `kfContentStateLoading` dentro del contenido. Si hay más de una, gana la
+ * plantilla proyectada, luego `loadingTemplate` y por último `loadingPreset`.
+ *
+ *   <kf-content-state [state]="state()" loadingPreset="kpi-grid">…</kf-content-state>
+ *
+ * Accesibilidad: en modo skeleton el contenedor lleva `aria-busy="true"` y un
+ * texto visualmente oculto con `role="status"` (`loadingLabel`, "Cargando…" por
+ * defecto) que anuncia el estado una vez. Con `load="spinner"` el texto es el
+ * del propio `kf-spinner`. El contenedor reserva un ancho mínimo, así que el
+ * esqueleto no colapsa a 0 dentro de un padre que se ajusta a su contenido.
+ */
+class ContentState {
+    state = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** Forma del estado de carga: silueta (default) o spinner. */
+    load = input('skeleton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "load" }] : /* istanbul ignore next */ []));
+    /** Título de `empty`/`error`. Ignorado mientras carga. */
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** Texto de carga: al lado del spinner con `load="spinner"` y, en modo skeleton,
+     * texto visualmente oculto con `role="status"` para lectores de pantalla. */
+    loadingLabel = input('Cargando…', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []));
+    /** Plantilla propia del esqueleto (reemplaza las tres líneas genéricas). */
+    loadingTemplate = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
+    /** Variante de `kf-skeleton-preset` como esqueleto de carga. */
+    loadingPreset = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingPreset" }] : /* istanbul ignore next */ []));
+    /** `ng-template[kfContentStateLoading]` proyectado como contenido. */
+    projectedLoading = contentChild(ContentStateLoading, { ...(ngDevMode ? { debugName: "projectedLoading" } : /* istanbul ignore next */ {}), read: TemplateRef });
+    customLoading = computed(() => this.projectedLoading() ?? this.loadingTemplate(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "customLoading" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentState, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ContentState, isStandalone: true, selector: "kf-content-state", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, load: { classPropertyName: "load", publicName: "load", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingPreset: { classPropertyName: "loadingPreset", publicName: "loadingPreset", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "projectedLoading", first: true, predicate: ContentStateLoading, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@switch (state()) {\n  @case ('ready') {\n    <ng-content />\n  }\n  @case ('loading') {\n    <div class=\"kf-content-state__loading\" aria-busy=\"true\">\n      @if (load() === 'spinner') {\n        <kf-spinner [label]=\"loadingLabel()\" />\n      } @else {\n        <span class=\"kf-sr-only\" role=\"status\">{{ loadingLabel() }}</span>\n        @if (customLoading(); as template) {\n          <ng-container [ngTemplateOutlet]=\"template\" />\n        } @else if (loadingPreset(); as preset) {\n          <kf-skeleton-preset [variant]=\"preset\" />\n        } @else {\n          <kf-skeleton />\n          <kf-skeleton width=\"80%\" />\n          <kf-skeleton width=\"60%\" />\n        }\n      }\n    </div>\n  }\n  @default {\n    <kf-empty-state [tone]=\"state() === 'error' ? 'error' : 'neutral'\">\n      @if (title()) {\n        <p class=\"kf-content-state__title\">{{ title() }}</p>\n      }\n      @if (subtitle()) {\n        <p class=\"kf-content-state__subtitle\">{{ subtitle() }}</p>\n      }\n      <div class=\"kf-content-state__actions\"><ng-content select=\"[actions]\" /></div>\n    </kf-empty-state>\n  }\n}\n", styles: [".kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:block;font-family:var(--kf-font-body)}.kf-content-state__loading{display:flex;flex-direction:column;gap:var(--kf-space-sm);min-width:min(12rem,100vw);box-sizing:border-box}.kf-content-state__title{margin:0;font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-content-state__subtitle{margin:0;color:var(--kf-color-text-muted)}.kf-content-state__actions:empty{display:none}.kf-content-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"], dependencies: [{ kind: "component", type: EmptyState, selector: "kf-empty-state", inputs: ["icon", "tone", "variant", "title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Skeleton, selector: "kf-skeleton", inputs: ["variant", "width", "height"] }, { kind: "component", type: SkeletonPreset, selector: "kf-skeleton-preset", inputs: ["variant", "count", "columns", "label"] }, { kind: "component", type: Spinner, selector: "kf-spinner", inputs: ["size", "label", "onDark"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentState, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-content-state', imports: [EmptyState, NgTemplateOutlet, Skeleton, SkeletonPreset, Spinner], template: "@switch (state()) {\n  @case ('ready') {\n    <ng-content />\n  }\n  @case ('loading') {\n    <div class=\"kf-content-state__loading\" aria-busy=\"true\">\n      @if (load() === 'spinner') {\n        <kf-spinner [label]=\"loadingLabel()\" />\n      } @else {\n        <span class=\"kf-sr-only\" role=\"status\">{{ loadingLabel() }}</span>\n        @if (customLoading(); as template) {\n          <ng-container [ngTemplateOutlet]=\"template\" />\n        } @else if (loadingPreset(); as preset) {\n          <kf-skeleton-preset [variant]=\"preset\" />\n        } @else {\n          <kf-skeleton />\n          <kf-skeleton width=\"80%\" />\n          <kf-skeleton width=\"60%\" />\n        }\n      }\n    </div>\n  }\n  @default {\n    <kf-empty-state [tone]=\"state() === 'error' ? 'error' : 'neutral'\">\n      @if (title()) {\n        <p class=\"kf-content-state__title\">{{ title() }}</p>\n      }\n      @if (subtitle()) {\n        <p class=\"kf-content-state__subtitle\">{{ subtitle() }}</p>\n      }\n      <div class=\"kf-content-state__actions\"><ng-content select=\"[actions]\" /></div>\n    </kf-empty-state>\n  }\n}\n", styles: [".kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:block;font-family:var(--kf-font-body)}.kf-content-state__loading{display:flex;flex-direction:column;gap:var(--kf-space-sm);min-width:min(12rem,100vw);box-sizing:border-box}.kf-content-state__title{margin:0;font-family:var(--kf-font-title);font-weight:700;color:var(--kf-color-ink)}.kf-content-state__subtitle{margin:0;color:var(--kf-color-text-muted)}.kf-content-state__actions:empty{display:none}.kf-content-state__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm)}\n"] }]
+        }], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: true }] }], load: [{ type: i0.Input, args: [{ isSignal: true, alias: "load", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], loadingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingLabel", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], loadingPreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingPreset", required: false }] }], projectedLoading: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ContentStateLoading), { ...{
+                            read: TemplateRef,
+                        }, isSignal: true }] }] } });
+
+const RAW_BASE64_MIME = {
+    image: 'image/jpeg',
+    video: 'video/mp4',
+    pdf: 'application/pdf',
+};
+/** Solo contenido ya en memoria: un `<iframe>` con una URL remota arbitraria podría cargar cualquier página. */
+const LOCAL_PDF_SRC = /^(blob:|data:application\/pdf[;,])/i;
+let contentViewerId = 0;
+/**
+ * Visor a pantalla completa para ampliar una pieza de contenido: imagen,
+ * video o PDF (`type="pdf"`, renderizado por el visor nativo del navegador).
+ * Mismo mecanismo que `kf-modal` (el `<dialog>` nativo resuelve backdrop,
+ * atrapado de foco, top-layer y `Escape`), pero sin panel/título/footer:
+ * el contenido ocupa toda la pantalla sobre un backdrop oscuro.
+ *
+ * `src` acepta lo que venga del backend sin que el consumidor tenga que
+ * normalizarlo primero: una URL (`http(s)://`), un data URI ya armado
+ * (`data:...`), o base64 crudo (se le antepone el prefijo `data:` según
+ * `type`, asumiendo JPEG para imagen, MP4 para video y PDF para pdf). Un PDF
+ * solo acepta contenido local (`blob:`, data URI o base64), nunca una URL remota.
+ *
+ * Lo proyectado con el atributo `actions` (p. ej. un botón de descarga) va en
+ * la barra superior, junto al título.
+ *
+ *   <kf-content-viewer [(open)]="viewerOpen" [src]="viewerSrc()" alt="Foto del vehículo" />
+ *   <kf-content-viewer [(open)]="viewerOpen" type="video" [src]="viewerSrc()" title="Inspección" />
+ *   <kf-content-viewer [(open)]="viewerOpen" type="pdf" [src]="blobUrl()" title="Contrato">
+ *     <kf-button actions variant="surface" icon="download" (click)="save()">Descargar</kf-button>
+ *   </kf-content-viewer>
+ */
+class ContentViewer {
+    type = input('image', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** URL, data URI, o base64 crudo — ver JSDoc de la clase. */
+    src = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /** Texto alternativo cuando `type="image"`. */
+    alt = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Visibilidad, two-way: `[(open)]="viewerOpen"`. */
+    open = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
+    dismissible = input(true, { ...(ngDevMode ? { debugName: "dismissible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    titleId = `kf-content-viewer-title-${contentViewerId++}`;
+    /** Detecta si `src` ya es una URL o un data URI armado; si no, asume
+     * base64 crudo y le antepone el prefijo `data:` correspondiente a `type`
+     * — el backend a veces manda una cosa, a veces la otra. */
+    resolvedSrc = computed(() => {
+        const raw = this.src();
+        if (!raw)
+            return null;
+        if (/^(https?:|data:|blob:)/i.test(raw))
+            return raw;
+        return `data:${RAW_BASE64_MIME[this.type()]};base64,${raw}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSrc" }] : /* istanbul ignore next */ []));
+    pdfSrc = computed(() => {
+        const src = this.resolvedSrc();
+        if (this.type() !== 'pdf' || !src || !LOCAL_PDF_SRC.test(src))
+            return null;
+        return this.sanitizer.bypassSecurityTrustResourceUrl(src);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pdfSrc" }] : /* istanbul ignore next */ []));
+    fallbackLabel = computed(() => ({ image: 'Visor de imagen', video: 'Visor de video', pdf: 'Visor de documento' })[this.type()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fallbackLabel" }] : /* istanbul ignore next */ []));
+    dialog = viewChild('dialog', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []));
+    document = inject(DOCUMENT);
+    sanitizer = inject(DomSanitizer);
+    constructor() {
+        afterRenderEffect(() => {
+            const el = this.dialog()?.nativeElement;
+            if (!el) {
+                return;
+            }
+            if (this.open() && !el.open) {
+                // `showModal` no existe en jsdom (tests) ni en entornos sin
+                // top-layer; el atributo `open` lo deja visible, aunque no modal.
+                if (typeof el.showModal === 'function') {
+                    el.showModal();
+                }
+                else {
+                    el.open = true;
+                }
+            }
+            else if (!this.open() && el.open) {
+                if (typeof el.close === 'function') {
+                    el.close();
+                }
+                else {
+                    el.open = false;
+                }
+            }
+            // `<dialog>` inertiza el resto de la página pero no frena su scroll.
+            this.document.body.style.overflow = this.open() ? 'hidden' : '';
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this.document.body.style.overflow = '';
+        });
+    }
+    /** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
+    onCancel(event) {
+        if (!this.dismissible()) {
+            event.preventDefault();
+        }
+    }
+    /**
+     * Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
+     * propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
+     * comparar contra él — no hace falta cortar la propagación en el panel.
+     */
+    onHostClick(event) {
+        if (this.dismissible() && event.target === this.dialog()?.nativeElement) {
+            this.open.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ContentViewer, isStandalone: true, selector: "kf-content-viewer", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "click": "onHostClick($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n  #dialog\n  class=\"kf-content-viewer\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  [attr.aria-label]=\"title() ? null : fallbackLabel()\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div class=\"kf-content-viewer__panel\">\n      @if (dismissible()) {\n        <button\n          type=\"button\"\n          class=\"kf-content-viewer__close\"\n          aria-label=\"Cerrar visor\"\n          (click)=\"open.set(false)\"\n        >\n          <kf-icon name=\"x\" size=\"md\" />\n        </button>\n      }\n      <div class=\"kf-content-viewer__bar\">\n        @if (title()) {\n          <span class=\"kf-content-viewer__title\" [id]=\"titleId\">{{ title() }}</span>\n        }\n        <div class=\"kf-content-viewer__actions\"><ng-content select=\"[actions]\" /></div>\n      </div>\n      <div class=\"kf-content-viewer__stage\">\n        @if (type() === 'pdf') {\n          @if (pdfSrc(); as src) {\n            <iframe\n              class=\"kf-content-viewer__document\"\n              [src]=\"src\"\n              [title]=\"title() || fallbackLabel()\"\n            ></iframe>\n          }\n        } @else if (resolvedSrc(); as src) {\n          @if (type() === 'video') {\n            <video class=\"kf-content-viewer__media\" [src]=\"src\" controls autoplay></video>\n          } @else {\n            <img class=\"kf-content-viewer__media\" [src]=\"src\" [alt]=\"alt()\" />\n          }\n        }\n      </div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-content-viewer{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-content-viewer::backdrop{background:#0a0c10eb}.kf-content-viewer__panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--kf-space-md);width:100%;height:100%;padding:var(--kf-space-xl);box-sizing:border-box}.kf-content-viewer__close{position:absolute;top:var(--kf-space-lg);right:var(--kf-space-lg);display:inline-flex;padding:var(--kf-space-xs);border:none;border-radius:var(--kf-radius-pill);background:#ffffff1f;color:var(--kf-color-white);cursor:pointer}.kf-content-viewer__close:hover{background:#ffffff38}.kf-content-viewer__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-content-viewer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--kf-space-md);max-width:calc(100% - 2 * var(--kf-space-xl))}.kf-content-viewer__actions{display:contents}.kf-content-viewer__title{font-size:.9rem;font-weight:600;color:var(--kf-color-white);text-align:center}.kf-content-viewer__stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}.kf-content-viewer__document{width:min(100%,1100px);height:100%;border:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-white)}.kf-content-viewer__media{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--kf-radius-sm)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ContentViewer, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-content-viewer', imports: [Icon], template: "<dialog\n  #dialog\n  class=\"kf-content-viewer\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  [attr.aria-label]=\"title() ? null : fallbackLabel()\"\n  (cancel)=\"onCancel($event)\"\n  (close)=\"open.set(false)\"\n>\n  @if (open()) {\n    <div class=\"kf-content-viewer__panel\">\n      @if (dismissible()) {\n        <button\n          type=\"button\"\n          class=\"kf-content-viewer__close\"\n          aria-label=\"Cerrar visor\"\n          (click)=\"open.set(false)\"\n        >\n          <kf-icon name=\"x\" size=\"md\" />\n        </button>\n      }\n      <div class=\"kf-content-viewer__bar\">\n        @if (title()) {\n          <span class=\"kf-content-viewer__title\" [id]=\"titleId\">{{ title() }}</span>\n        }\n        <div class=\"kf-content-viewer__actions\"><ng-content select=\"[actions]\" /></div>\n      </div>\n      <div class=\"kf-content-viewer__stage\">\n        @if (type() === 'pdf') {\n          @if (pdfSrc(); as src) {\n            <iframe\n              class=\"kf-content-viewer__document\"\n              [src]=\"src\"\n              [title]=\"title() || fallbackLabel()\"\n            ></iframe>\n          }\n        } @else if (resolvedSrc(); as src) {\n          @if (type() === 'video') {\n            <video class=\"kf-content-viewer__media\" [src]=\"src\" controls autoplay></video>\n          } @else {\n            <img class=\"kf-content-viewer__media\" [src]=\"src\" [alt]=\"alt()\" />\n          }\n        }\n      </div>\n    </div>\n  }\n</dialog>\n", styles: [".kf-content-viewer{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:0;border:none;background:transparent;overflow:visible;font-family:var(--kf-font-body)}.kf-content-viewer::backdrop{background:#0a0c10eb}.kf-content-viewer__panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--kf-space-md);width:100%;height:100%;padding:var(--kf-space-xl);box-sizing:border-box}.kf-content-viewer__close{position:absolute;top:var(--kf-space-lg);right:var(--kf-space-lg);display:inline-flex;padding:var(--kf-space-xs);border:none;border-radius:var(--kf-radius-pill);background:#ffffff1f;color:var(--kf-color-white);cursor:pointer}.kf-content-viewer__close:hover{background:#ffffff38}.kf-content-viewer__close:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-content-viewer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--kf-space-md);max-width:calc(100% - 2 * var(--kf-space-xl))}.kf-content-viewer__actions{display:contents}.kf-content-viewer__title{font-size:.9rem;font-weight:600;color:var(--kf-color-white);text-align:center}.kf-content-viewer__stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}.kf-content-viewer__document{width:min(100%,1100px);height:100%;border:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-white)}.kf-content-viewer__media{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--kf-radius-sm)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], dialog: [{ type: i0.ViewChild, args: ['dialog', { isSignal: true }] }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+/**
+ * Signal con la vista de `kf-data-table` ('table' | 'cards') derivada de un
+ * breakpoint — mismo criterio que cualquier tabla con muchas columnas: bajo
+ * el ancho dado, la vista de tabla no entra sin scroll horizontal, así que
+ * se fuerza `cards`. Centraliza el patrón `matchMediaSignal` +
+ * `computed<DataTableView>` que cada tabla del portal repetía igual.
+ *
+ *   protected readonly tableView = dataTableViewSignal();
+ *   // con un breakpoint distinto al default de 900px:
+ *   protected readonly tableView = dataTableViewSignal('(max-width: 768px)');
+ */
+function dataTableViewSignal(query = '(max-width: 900px)') {
+    const isMobile = matchMediaSignal(query);
+    return computed(() => (isMobile() ? 'cards' : 'table'));
+}
+
+/**
+ * Separador visual simple entre bloques de contenido. `orientation`
+ * controla si es una línea horizontal (para separar secciones apiladas) o
+ * vertical (para separar elementos en una fila, ej. acciones en una toolbar,
+ * o las columnas de metadata en `kf-company-selector`).
+ *
+ * En `vertical`, el divisor necesita una altura del contexto donde vive —
+ * `:host { align-self: stretch }` lo hace ocupar la altura del contenedor
+ * flex/grid padre sin que el consumidor tenga que fijarla a mano. `flex:
+ * none` evita que el propio divisor se achique a 0 dentro de ese contenedor
+ * flex cuando hay contenido hermano compitiendo por espacio.
+ *
+ *   <kf-divider />
+ *   <kf-divider orientation="vertical" />
  */
 class Divider {
     orientation = input('horizontal', /* @ts-ignore */
@@ -4044,78 +4543,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
         }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }] } });
 
 /**
- * Acción de bajo énfasis con apariencia de texto — "¿Olvidaste tu
- * contraseña?", "Volver a iniciar sesión", o un link real de navegación
- * como "Ir a pagos →".
+ * Contenedores modales abiertos actualmente: un `<dialog>` abierto vía
+ * `showModal()` (`kf-modal`) o el panel de un `kf-drawer` con
+ * `role="dialog"` (`aria-modal="true"`), en orden de apertura. Con diálogos
+ * anidados el navegador apila el top layer: el más reciente queda arriba e
+ * inertiza a los anteriores (incluidos otros `<dialog>` ya abiertos), así
+ * que el ÚLTIMO de esta lista es el único candidato válido para recibir el
+ * overlay container — nunca "cualquier `dialog[open]` de la página", que
+ * rompería con dos `kf-modal` anidados o con dos independientes donde solo
+ * uno está abierto.
+ */
+const openModalDialogs = [];
+/**
+ * Reubicadores de los `OverlayContainer` parchados. Cada cambio en el
+ * registro los ejecuta, así el contenedor vuelve a `<body>` (o pasa al
+ * siguiente contenedor modal) al cerrar, sin esperar a que otro overlay
+ * llame a `getContainerElement()`: un panel con el `overlayRef` ya creado
+ * que se vuelve a abrir no pasa por esa llamada, y si el contenedor seguía
+ * dentro de un diálogo cerrado quedaba invisible.
+ */
+const relocators = new Set();
+function relocateContainers() {
+    for (const relocate of [...relocators]) {
+        if (!relocate()) {
+            relocators.delete(relocate);
+        }
+    }
+}
+/** Llamado por `Modal` cuando su `<dialog>` pasa a estar abierto, y por `Drawer` (`role="dialog"`) con su panel. */
+function registerOpenModalDialog(dialog) {
+    if (!openModalDialogs.includes(dialog)) {
+        openModalDialogs.push(dialog);
+        relocateContainers();
+    }
+}
+/** Llamado por `Modal`/`Drawer` cuando su contenedor se cierra o el componente se destruye. */
+function unregisterOpenModalDialog(dialog) {
+    const index = openModalDialogs.indexOf(dialog);
+    if (index !== -1) {
+        openModalDialogs.splice(index, 1);
+        relocateContainers();
+    }
+}
+function topmostOpenModalDialog() {
+    return openModalDialogs.at(-1);
+}
+/**
+ * Instancias de `OverlayContainer` ya parchadas — evita parchar dos veces
+ * el mismo objeto (varios `kf-modal` en el árbol llaman a esta función) y,
+ * a la vez, no interfiere con instancias nuevas que arma un `TestBed` fresco
+ * en cada spec (root providers se recrean por test).
+ */
+const patchedContainers = new WeakSet();
+/**
+ * `showModal()` promueve el `<dialog>` al top layer del navegador y vuelve
+ * `inert` todo lo que quede fuera de su subárbol — pero Angular CDK
+ * (`Overlay`/`OverlayContainer`, usado por `kf-select`, `kf-multi-select`,
+ * `kf-dropdown`, `kf-tooltip` y el selector de tamaño de `kf-pagination`)
+ * siempre appendea `.cdk-overlay-container` como hijo de `<body>`, que
+ * queda fuera del `<dialog>` y por lo tanto inerte: el overlay se ve pero
+ * no recibe clicks.
  *
- * Sin `href` (default) es un `<button type="button">`: dispara una acción
- * en la misma pantalla, vía `(click)`. Con `href`, es un `<a>` real: navega
- * a otra URL. `showArrow` agrega un ícono `chevron-right` al final — para
- * el patrón "texto + flecha" de un link que lleva a otro lado.
+ * No existe una forma de reemplazar, sin que el consumidor configure nada,
+ * QUÉ IMPLEMENTACIÓN resuelve Angular DI para el token `OverlayContainer`:
+ * es `providedIn: 'root'`, y la instancia se crea una sola vez contra el
+ * inyector RAÍZ de la app la primera vez que algo la necesita — incluida
+ * la propia `Overlay`, que la inyecta puertas adentro de SU construcción,
+ * no en el inyector del componente que gatilló esa construcción. Un
+ * `providers` a nivel de componente (`kf-modal`, o incluso `kf-select`)
+ * nunca llega a interceptar esa creación; solo un `providers` explícito en
+ * el bootstrap de cada app lo haría, y eso es justo la configuración manual
+ * que se quiere evitar.
  *
- * `variant="default"` (color primario, subrayado en hover) es para la
- * acción de mayor jerarquía relativa de la pantalla; `variant="muted"`
- * (gris que pasa a primario en hover) es para acciones de retroceso/salida.
+ * Por eso el fix no reemplaza la clase vía DI: parcha, una sola vez, el
+ * MISMO objeto singleton que ya usa toda la app (la instancia real que
+ * `Modal` recibe con un `inject(OverlayContainer)` normal — automático
+ * apenas se usa `kf-modal`, sin tocar ningún `providers`). `getContainerElement`
+ * sigue delegando en el original para crear/cachear el div la primera vez;
+ * lo único que se agrega es reubicarlo, en cada llamada, dentro del
+ * `<dialog>` abierto más reciente (o de vuelta en `<body>` si no hay
+ * ninguno) antes de devolverlo — mover el div se lleva puestos a sus hijos,
+ * así que overlays ya adjuntos antes de abrir el modal quedan igual de
+ * bien ubicados que los que se abren después.
  *
- *   <kf-link (click)="onForgotPassword()">¿Olvidaste tu contraseña?</kf-link>
- *   <kf-link variant="muted" (click)="onBack()">← Volver a iniciar sesión</kf-link>
- *   <kf-link href="/pagos" showArrow>Ir a pagos</kf-link>
- */
-class Link {
-    variant = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /** Si se pasa, renderiza un `<a>` real en vez de `<button>` — navega en vez de disparar `(click)`. */
-    href = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
-    /** Ícono `chevron-right` al final — para el patrón "texto + flecha" de un link que lleva a otro lado. */
-    showArrow = input(false, { ...(ngDevMode ? { debugName: "showArrow" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Link, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Link, isStandalone: true, selector: "kf-link", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--\n  Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet), no un\n  <ng-content> por rama: Angular solo conecta la proyecci\u00F3n real del\n  consumidor a la PRIMERA instancia de <ng-content> que encuentra en el\n  \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> en cada rama del @if, la\n  que no se activa en runtime igual \"roba\" la proyecci\u00F3n (mismo bug ya\n  resuelto en Text.ts).\n-->\n<ng-template #content>\n  <ng-content />\n  @if (showArrow()) {\n    <kf-icon name=\"chevron-right\" size=\"sm\" />\n  }\n</ng-template>\n@if (href(); as url) {\n  <a class=\"kf-link\" [class.kf-link--muted]=\"variant() === 'muted'\" [href]=\"url\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"kf-link\"\n    [class.kf-link--muted]=\"variant() === 'muted'\"\n    [disabled]=\"disabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </button>\n}\n", styles: [":host{display:inline-block}.kf-link{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;font:inherit;font-weight:500;color:var(--kf-color-primary);text-decoration:none;cursor:pointer}.kf-link:hover:not(:disabled){text-decoration:underline}.kf-link:focus-visible{outline:2px solid var(--kf-color-primary);outline-offset:2px;border-radius:var(--kf-radius-xs)}.kf-link:disabled{opacity:.5;cursor:not-allowed}.kf-link--muted{color:var(--kf-color-text-muted)}.kf-link--muted:hover:not(:disabled){color:var(--kf-color-primary);text-decoration:none}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Link, decorators: [{
-            type: Component,
-            args: [{ selector: 'kf-link', imports: [Icon, NgTemplateOutlet], template: "<!--\n  Una sola proyecci\u00F3n compartida (ng-template + ngTemplateOutlet), no un\n  <ng-content> por rama: Angular solo conecta la proyecci\u00F3n real del\n  consumidor a la PRIMERA instancia de <ng-content> que encuentra en el\n  \u00E1rbol de compilaci\u00F3n \u2014 con un <ng-content> en cada rama del @if, la\n  que no se activa en runtime igual \"roba\" la proyecci\u00F3n (mismo bug ya\n  resuelto en Text.ts).\n-->\n<ng-template #content>\n  <ng-content />\n  @if (showArrow()) {\n    <kf-icon name=\"chevron-right\" size=\"sm\" />\n  }\n</ng-template>\n@if (href(); as url) {\n  <a class=\"kf-link\" [class.kf-link--muted]=\"variant() === 'muted'\" [href]=\"url\">\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </a>\n} @else {\n  <button\n    type=\"button\"\n    class=\"kf-link\"\n    [class.kf-link--muted]=\"variant() === 'muted'\"\n    [disabled]=\"disabled()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"content\" />\n  </button>\n}\n", styles: [":host{display:inline-block}.kf-link{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;font:inherit;font-weight:500;color:var(--kf-color-primary);text-decoration:none;cursor:pointer}.kf-link:hover:not(:disabled){text-decoration:underline}.kf-link:focus-visible{outline:2px solid var(--kf-color-primary);outline-offset:2px;border-radius:var(--kf-radius-xs)}.kf-link:disabled{opacity:.5;cursor:not-allowed}.kf-link--muted{color:var(--kf-color-text-muted)}.kf-link--muted:hover:not(:disabled){color:var(--kf-color-primary);text-decoration:none}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }] } });
-
-/**
- * Fila de un documento descargable: chip de ícono coloreado por tipo,
- * título, metadata y la acción de descarga al final. Sin `href` rinde
- * `pendingLabel` en vez de un link roto. El contenido proyectado cae entre
- * la metadata y la acción, como slot para un `kf-badge` de estado.
+ * Un `kf-drawer` con `role="dialog"` no usa el top layer, pero declara
+ * `aria-modal="true"`: un overlay fuera de su subárbol queda, para un lector
+ * de pantalla, fuera del diálogo. Por eso también registra su panel acá y
+ * el contenedor se reubica dentro de él mientras está abierto.
  */
-class DocumentRow {
-    icon = input('file', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    tone = input('neutral', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-    /** Qué documento es. El nombre humano del tipo, no el del archivo. */
-    title = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    /** Línea secundaria — archivo, fecha, tamaño. El consumidor la arma ya
-     * formateada: la librería no decide en qué unidad se lee un tamaño ni en
-     * qué formato una fecha. */
-    meta = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-    /** Ausente rinde `pendingLabel` en vez del link de descarga. */
-    href = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
-    downloadLabel = input('Descargar', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "downloadLabel" }] : /* istanbul ignore next */ []));
-    /** Qué se dice cuando no hay `href`. */
-    pendingLabel = input('En generación', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "pendingLabel" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DocumentRow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: DocumentRow, isStandalone: true, selector: "kf-document-row", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, downloadLabel: { classPropertyName: "downloadLabel", publicName: "downloadLabel", isSignal: true, isRequired: false, transformFunction: null }, pendingLabel: { classPropertyName: "pendingLabel", publicName: "pendingLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "\"kf-document-row--\" + tone()" } }, ngImport: i0, template: "<span class=\"kf-document-row__icon\" aria-hidden=\"true\">\n  <kf-icon [name]=\"icon()\" size=\"sm\" />\n</span>\n\n<span class=\"kf-document-row__body\">\n  <span class=\"kf-document-row__title\">{{ title() }}</span>\n  @if (meta(); as line) {\n    <span class=\"kf-document-row__meta kf-caption-text\">{{ line }}</span>\n  }\n</span>\n\n<span class=\"kf-document-row__actions\">\n  <ng-content />\n  @if (href(); as url) {\n    <kf-link [href]=\"url\">{{ downloadLabel() }}</kf-link>\n  } @else {\n    <span class=\"kf-document-row__pending kf-caption-text\">{{ pendingLabel() }}</span>\n  }\n</span>\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-document-row__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--kf-radius-xs);background:var(--kf-color-gray-200);color:var(--kf-color-text)}:host(.kf-document-row--info) .kf-document-row__icon{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}:host(.kf-document-row--ok) .kf-document-row__icon{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}:host(.kf-document-row--warn) .kf-document-row__icon{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}:host(.kf-document-row--error) .kf-document-row__icon{background:var(--kf-color-error-soft);color:var(--kf-color-error-strong)}.kf-document-row__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}.kf-document-row__title{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-ink)}.kf-document-row__meta{overflow-wrap:anywhere}.kf-document-row__actions{display:flex;align-items:center;gap:var(--kf-space-sm);flex:0 0 auto;margin-left:auto}@container (max-width: 420px){:host{flex-wrap:wrap}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
+function installModalAwareOverlayContainer(container) {
+    if (patchedContainers.has(container)) {
+        return;
+    }
+    patchedContainers.add(container);
+    const originalGetContainerElement = container.getContainerElement.bind(container);
+    let knownElement = null;
+    container.getContainerElement = () => {
+        const element = originalGetContainerElement();
+        knownElement = element;
+        const targetParent = topmostOpenModalDialog() ?? element.ownerDocument.body;
+        if (element.parentElement !== targetParent) {
+            targetParent.appendChild(element);
+        }
+        return element;
+    };
+    // Devuelve `false` cuando el contenedor ya no existe (la app se destruyó):
+    // se descarta del conjunto en vez de recrearlo. Mientras nadie lo haya
+    // pedido todavía no hay nada que reubicar.
+    relocators.add(() => {
+        if (!knownElement) {
+            return true;
+        }
+        if (!knownElement.isConnected) {
+            return false;
+        }
+        container.getContainerElement();
+        return true;
+    });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DocumentRow, decorators: [{
-            type: Component,
-            args: [{ selector: 'kf-document-row', imports: [Icon, Link], host: {
-                        '[class]': '"kf-document-row--" + tone()',
-                    }, template: "<span class=\"kf-document-row__icon\" aria-hidden=\"true\">\n  <kf-icon [name]=\"icon()\" size=\"sm\" />\n</span>\n\n<span class=\"kf-document-row__body\">\n  <span class=\"kf-document-row__title\">{{ title() }}</span>\n  @if (meta(); as line) {\n    <span class=\"kf-document-row__meta kf-caption-text\">{{ line }}</span>\n  }\n</span>\n\n<span class=\"kf-document-row__actions\">\n  <ng-content />\n  @if (href(); as url) {\n    <kf-link [href]=\"url\">{{ downloadLabel() }}</kf-link>\n  } @else {\n    <span class=\"kf-document-row__pending kf-caption-text\">{{ pendingLabel() }}</span>\n  }\n</span>\n", styles: [".kf-caption-text{font-size:var(--kf-font-size-caption);font-weight:var(--kf-font-weight-body);color:var(--kf-color-text-muted)}:host{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-document-row__icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:var(--kf-radius-xs);background:var(--kf-color-gray-200);color:var(--kf-color-text)}:host(.kf-document-row--info) .kf-document-row__icon{background:var(--kf-color-info-soft);color:var(--kf-color-info-strong)}:host(.kf-document-row--ok) .kf-document-row__icon{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}:host(.kf-document-row--warn) .kf-document-row__icon{background:var(--kf-color-warning-soft);color:var(--kf-color-warning-strong)}:host(.kf-document-row--error) .kf-document-row__icon{background:var(--kf-color-error-soft);color:var(--kf-color-error-strong)}.kf-document-row__body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}.kf-document-row__title{font-family:var(--kf-font-body);font-size:var(--kf-font-size-body);font-weight:var(--kf-font-weight-medium);color:var(--kf-color-ink)}.kf-document-row__meta{overflow-wrap:anywhere}.kf-document-row__actions{display:flex;align-items:center;gap:var(--kf-space-sm);flex:0 0 auto;margin-left:auto}@container (max-width: 420px){:host{flex-wrap:wrap}}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], downloadLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadLabel", required: false }] }], pendingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "pendingLabel", required: false }] }] } });
 
-let nextId$2 = 0;
+let nextId$3 = 0;
 /**
  * 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
@@ -4169,8 +4716,9 @@ let nextId$2 = 0;
  * redondeadas, alto máximo 80vh) — pensado para un resumen en mobile.
  *
  * Escape cierra el panel salvo que un control interno ya haya consumido la
- * tecla (`event.defaultPrevented`, ej. un `kf-select` abierto dentro del
- * drawer cierra solo su propio panel).
+ * tecla (`event.defaultPrevented`): un `kf-select`, `kf-multi-select` o
+ * `kf-dropdown` abierto dentro del drawer cierra primero su propio panel y
+ * un segundo Escape cierra el drawer.
  *
  * Nombres por defecto: con `role="navigation"` el panel se llama "Menú" y
  * el cierre "Cerrar menú" (comportamiento histórico). Con `role="dialog"`
@@ -4178,12 +4726,25 @@ let nextId$2 = 0;
  * avisa por consola si no hay `title` ni `ariaLabel`: un diálogo sin nombre
  * propio no le dice nada al lector de pantalla.
  *
- * Limitación conocida: NO colocar un `kf-select` (ni otro control con panel
- * flotante del CDK) dentro de un drawer `role="dialog"`. Su listbox se
- * monta en `.cdk-overlay-container`, fuera del diálogo con `aria-modal`: un
- * lector de pantalla puede tratarlo como contenido inerte y la trampa de
- * foco no lo incluye. Para elegir una opción dentro del panel usar
- * `kf-option-list`.
+ * ## Selectores y otros paneles flotantes dentro del drawer
+ *
+ * `kf-select`, `kf-multi-select` y `kf-dropdown` funcionan
+ * dentro de un drawer (incluido el pie `[kf-drawer-footer]`): sus paneles
+ * quedan por encima del drawer, se abren hacia arriba si abajo no hay lugar
+ * y no se cortan con el borde del panel ni con el scroll del cuerpo. Con
+ * `role="dialog"` el contenedor de overlays de CDK se reubica dentro del
+ * panel mientras está abierto: el listbox queda dentro del diálogo
+ * `aria-modal`, no fuera de él, y el atrapado de foco lo incluye. Al cerrar
+ * el drawer vuelve a `<body>`. Escape cierra primero el panel flotante
+ * (devolviendo el foco a su disparador) y el siguiente cierra el drawer.
+ *
+ *   <kf-drawer [(open)]="open" role="dialog" side="right" title="Unidad VIN-1003">
+ *     ...
+ *     <div kf-drawer-footer>
+ *       <kf-select label="Saltar a otra unidad" width="full"
+ *                  [options]="units" [value]="unit()" (valueChange)="unit.set($event)" />
+ *     </div>
+ *   </kf-drawer>
  *
  * Al cerrar, el foco vuelve al elemento que lo tenía al abrir solo si sigue
  * en el documento (`isConnected`); si fue desmontado mientras el drawer
@@ -4220,14 +4781,29 @@ class Drawer {
     /** `closeLabel` o, sin él, el default según el rol. */
     resolvedCloseLabel = computed(() => this.closeLabel() ?? (this.role() === 'dialog' ? 'Cerrar' : 'Cerrar menú'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedCloseLabel" }] : /* istanbul ignore next */ []));
-    titleId = `kf-drawer-title-${nextId$2++}`;
+    titleId = `kf-drawer-title-${nextId$3++}`;
     panelRef = viewChild.required('panel', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelRef" }] : /* istanbul ignore next */ []));
     focusTrapFactory = inject(FocusTrapFactory);
     document = inject(DOCUMENT);
+    overlayContainer = inject(OverlayContainer);
+    registeredPanel = null;
     focusTrap = null;
     lastFocusedElement = null;
     constructor() {
+        // Ver `modal-overlay-container.ts`: con `role="dialog"` los paneles
+        // flotantes (select, dropdown) deben vivir dentro del diálogo.
+        installModalAwareOverlayContainer(this.overlayContainer);
+        afterRenderEffect(() => {
+            const panel = this.panelRef().nativeElement;
+            this.registeredPanel = panel;
+            if (this.open() && this.role() === 'dialog') {
+                registerOpenModalDialog(panel);
+            }
+            else {
+                unregisterOpenModalDialog(panel);
+            }
+        });
         afterRenderEffect(() => {
             if (this.open()) {
                 this.lastFocusedElement = this.document.activeElement;
@@ -4250,7 +4826,12 @@ class Drawer {
                 }
             });
         }
-        inject(DestroyRef).onDestroy(() => this.focusTrap?.destroy());
+        inject(DestroyRef).onDestroy(() => {
+            if (this.registeredPanel) {
+                unregisterOpenModalDialog(this.registeredPanel);
+            }
+            this.focusTrap?.destroy();
+        });
     }
     /** Cierra el drawer con Escape — mismo patrón que `Dropdown`/`Modal`. */
     onEscape(event) {
@@ -4266,7 +4847,7 @@ class Drawer {
         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 }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape($event)" }, properties: { "attr.role": "null", "attr.title": "null" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <button\n    type=\"button\"\n    class=\"kf-drawer__overlay\"\n    [attr.aria-label]=\"resolvedCloseLabel()\"\n    [attr.tabindex]=\"role() === 'dialog' ? -1 : null\"\n    (click)=\"open.set(false)\"\n  ></button>\n}\n\n<!-- Un <div> con rol expl\u00EDcito (no <nav>): un mismo panel puede ser\n     navegaci\u00F3n o di\u00E1logo, y <nav> no admite role=\"dialog\". -->\n<div\n  #panel\n  class=\"kf-drawer__panel\"\n  [class.kf-drawer__panel--open]=\"open()\"\n  [class.kf-drawer__panel--right]=\"side() === 'right'\"\n  [class.kf-drawer__panel--bottom]=\"side() === 'bottom'\"\n  [class.kf-drawer__panel--dialog]=\"role() === 'dialog'\"\n  [attr.role]=\"role()\"\n  [attr.aria-modal]=\"role() === 'dialog' ? 'true' : null\"\n  [attr.aria-label]=\"title() ? null : resolvedAriaLabel()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  [attr.aria-hidden]=\"!open()\"\n>\n  @if (side() === 'bottom') {\n    <div class=\"kf-drawer__grip\" aria-hidden=\"true\"></div>\n  }\n  @if (title(); as titleText) {\n    <div class=\"kf-drawer__titlebar\">\n      <h2 class=\"kf-drawer__title\" [id]=\"titleId\">{{ titleText }}</h2>\n      <kf-button\n        class=\"kf-drawer__close\"\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        icon=\"x\"\n        [ariaLabel]=\"resolvedCloseLabel()\"\n        (click)=\"open.set(false)\"\n      />\n    </div>\n  }\n  <div class=\"kf-drawer__header\"><ng-content select=\"[kf-drawer-header]\" /></div>\n  <div class=\"kf-drawer__body\"><ng-content /></div>\n  <div class=\"kf-drawer__footer\"><ng-content select=\"[kf-drawer-footer]\" /></div>\n</div>\n", 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--dialog{width:min(var(--kf-drawer-width, 480px),100vw);max-width:none}@media(max-width:640px){.kf-drawer__panel--dialog{width:100vw}}.kf-drawer__panel--bottom{top:auto;right:0;width:100%;max-width:none;max-height:80vh;border-radius:var(--kf-radius-lg) var(--kf-radius-lg) 0 0;box-shadow:var(--kf-shadow-lg);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(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__panel--bottom.kf-drawer__panel--open{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.kf-drawer__panel,.kf-drawer__panel--open{transition:none}}.kf-drawer__grip{flex:none;align-self:center;width:36px;height:4px;margin-top:var(--kf-space-sm);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-strong)}.kf-drawer__titlebar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-lg);border-bottom:1px solid var(--kf-color-border)}.kf-drawer__title{margin:0;min-width:0;font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:700;line-height:1.25;color:var(--kf-color-ink)}.kf-drawer__close{flex:none}@media(pointer:coarse),(max-width:760px){.kf-drawer__close{--kf-button-min-height: 44px;min-width:44px}}.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;min-height:0;display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-lg);overflow-y:auto}.kf-drawer__panel--dialog .kf-drawer__body{gap:var(--kf-space-lg)}.kf-drawer__footer{flex:none;padding:var(--kf-space-lg);border-top:1px solid var(--kf-color-border)}.kf-drawer__panel--dialog .kf-drawer__footer{padding:var(--kf-space-md) var(--kf-space-lg)}\n"], dependencies: [{ kind: "component", type: Button, selector: "kf-button", inputs: ["variant", "size", "shape", "disabled", "type", "icon", "block", "loading", "ariaLabel", "ariaExpanded", "ariaPressed", "ariaHaspopup"] }] });
+    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 }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { listeners: { "document:keydown.escape": "onEscape($event)" }, properties: { "attr.role": "null", "attr.title": "null" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (open()) {\n  <button\n    type=\"button\"\n    class=\"kf-drawer__overlay\"\n    [attr.aria-label]=\"resolvedCloseLabel()\"\n    [attr.tabindex]=\"role() === 'dialog' ? -1 : null\"\n    (click)=\"open.set(false)\"\n  ></button>\n}\n\n<!-- Un <div> con rol expl\u00EDcito (no <nav>): un mismo panel puede ser\n     navegaci\u00F3n o di\u00E1logo, y <nav> no admite role=\"dialog\". -->\n<div\n  #panel\n  class=\"kf-drawer__panel\"\n  [class.kf-drawer__panel--open]=\"open()\"\n  [class.kf-drawer__panel--right]=\"side() === 'right'\"\n  [class.kf-drawer__panel--bottom]=\"side() === 'bottom'\"\n  [class.kf-drawer__panel--dialog]=\"role() === 'dialog'\"\n  [attr.role]=\"role()\"\n  [attr.aria-modal]=\"role() === 'dialog' ? 'true' : null\"\n  [attr.aria-label]=\"title() ? null : resolvedAriaLabel()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  [attr.aria-hidden]=\"!open()\"\n>\n  @if (side() === 'bottom') {\n    <div class=\"kf-drawer__grip\" aria-hidden=\"true\"></div>\n  }\n  @if (title(); as titleText) {\n    <div class=\"kf-drawer__titlebar\">\n      <h2 class=\"kf-drawer__title\" [id]=\"titleId\">{{ titleText }}</h2>\n      <kf-button\n        class=\"kf-drawer__close\"\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        icon=\"x\"\n        [ariaLabel]=\"resolvedCloseLabel()\"\n        (click)=\"open.set(false)\"\n      />\n    </div>\n  }\n  <div class=\"kf-drawer__header\"><ng-content select=\"[kf-drawer-header]\" /></div>\n  <div class=\"kf-drawer__body\"><ng-content /></div>\n  <div class=\"kf-drawer__footer\"><ng-content select=\"[kf-drawer-footer]\" /></div>\n</div>\n", 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--dialog{width:min(var(--kf-drawer-width, 480px),100vw);max-width:none}@media(max-width:640px){.kf-drawer__panel--dialog{width:100vw}}.kf-drawer__panel--bottom{top:auto;right:0;width:100%;max-width:none;max-height:80vh;border-radius:var(--kf-radius-lg) var(--kf-radius-lg) 0 0;box-shadow:var(--kf-shadow-lg);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(100%)}.kf-drawer__panel--open{transform:none;visibility:visible;transition:transform .24s cubic-bezier(.32,.72,0,1),visibility 0s linear 0s}.kf-drawer__panel--bottom.kf-drawer__panel--open{transform:none}@media(prefers-reduced-motion:reduce){.kf-drawer__panel,.kf-drawer__panel--open{transition:none}}.kf-drawer__grip{flex:none;align-self:center;width:36px;height:4px;margin-top:var(--kf-space-sm);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-strong)}.kf-drawer__titlebar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-lg);border-bottom:1px solid var(--kf-color-border)}.kf-drawer__title{margin:0;min-width:0;font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:700;line-height:1.25;color:var(--kf-color-ink)}.kf-drawer__close{flex:none}@media(pointer:coarse),(max-width:760px){.kf-drawer__close{--kf-button-min-height: 44px;min-width:44px}}.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;min-height:0;display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-lg);overflow-y:auto}.kf-drawer__panel--dialog .kf-drawer__body{gap:var(--kf-space-lg)}.kf-drawer__footer{flex:none;padding:var(--kf-space-lg);border-top:1px solid var(--kf-color-border)}.kf-drawer__panel--dialog .kf-drawer__footer{padding:var(--kf-space-md) var(--kf-space-lg)}\n"], dependencies: [{ kind: "component", type: Button, selector: "kf-button", inputs: ["variant", "size", "shape", "disabled", "type", "icon", "block", "loading", "ariaLabel", "ariaExpanded", "ariaPressed", "ariaHaspopup"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Drawer, decorators: [{
             type: Component,
@@ -4277,7 +4858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         // un tooltip nativo sobre todo el panel. El rol real vive en el panel.
                         '[attr.role]': 'null',
                         '[attr.title]': 'null',
-                    }, template: "@if (open()) {\n  <button\n    type=\"button\"\n    class=\"kf-drawer__overlay\"\n    [attr.aria-label]=\"resolvedCloseLabel()\"\n    [attr.tabindex]=\"role() === 'dialog' ? -1 : null\"\n    (click)=\"open.set(false)\"\n  ></button>\n}\n\n<!-- Un <div> con rol expl\u00EDcito (no <nav>): un mismo panel puede ser\n     navegaci\u00F3n o di\u00E1logo, y <nav> no admite role=\"dialog\". -->\n<div\n  #panel\n  class=\"kf-drawer__panel\"\n  [class.kf-drawer__panel--open]=\"open()\"\n  [class.kf-drawer__panel--right]=\"side() === 'right'\"\n  [class.kf-drawer__panel--bottom]=\"side() === 'bottom'\"\n  [class.kf-drawer__panel--dialog]=\"role() === 'dialog'\"\n  [attr.role]=\"role()\"\n  [attr.aria-modal]=\"role() === 'dialog' ? 'true' : null\"\n  [attr.aria-label]=\"title() ? null : resolvedAriaLabel()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  [attr.aria-hidden]=\"!open()\"\n>\n  @if (side() === 'bottom') {\n    <div class=\"kf-drawer__grip\" aria-hidden=\"true\"></div>\n  }\n  @if (title(); as titleText) {\n    <div class=\"kf-drawer__titlebar\">\n      <h2 class=\"kf-drawer__title\" [id]=\"titleId\">{{ titleText }}</h2>\n      <kf-button\n        class=\"kf-drawer__close\"\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        icon=\"x\"\n        [ariaLabel]=\"resolvedCloseLabel()\"\n        (click)=\"open.set(false)\"\n      />\n    </div>\n  }\n  <div class=\"kf-drawer__header\"><ng-content select=\"[kf-drawer-header]\" /></div>\n  <div class=\"kf-drawer__body\"><ng-content /></div>\n  <div class=\"kf-drawer__footer\"><ng-content select=\"[kf-drawer-footer]\" /></div>\n</div>\n", 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--dialog{width:min(var(--kf-drawer-width, 480px),100vw);max-width:none}@media(max-width:640px){.kf-drawer__panel--dialog{width:100vw}}.kf-drawer__panel--bottom{top:auto;right:0;width:100%;max-width:none;max-height:80vh;border-radius:var(--kf-radius-lg) var(--kf-radius-lg) 0 0;box-shadow:var(--kf-shadow-lg);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(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__panel--bottom.kf-drawer__panel--open{transform:translateY(0)}@media(prefers-reduced-motion:reduce){.kf-drawer__panel,.kf-drawer__panel--open{transition:none}}.kf-drawer__grip{flex:none;align-self:center;width:36px;height:4px;margin-top:var(--kf-space-sm);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-strong)}.kf-drawer__titlebar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-lg);border-bottom:1px solid var(--kf-color-border)}.kf-drawer__title{margin:0;min-width:0;font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:700;line-height:1.25;color:var(--kf-color-ink)}.kf-drawer__close{flex:none}@media(pointer:coarse),(max-width:760px){.kf-drawer__close{--kf-button-min-height: 44px;min-width:44px}}.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;min-height:0;display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-lg);overflow-y:auto}.kf-drawer__panel--dialog .kf-drawer__body{gap:var(--kf-space-lg)}.kf-drawer__footer{flex:none;padding:var(--kf-space-lg);border-top:1px solid var(--kf-color-border)}.kf-drawer__panel--dialog .kf-drawer__footer{padding:var(--kf-space-md) var(--kf-space-lg)}\n"] }]
+                    }, template: "@if (open()) {\n  <button\n    type=\"button\"\n    class=\"kf-drawer__overlay\"\n    [attr.aria-label]=\"resolvedCloseLabel()\"\n    [attr.tabindex]=\"role() === 'dialog' ? -1 : null\"\n    (click)=\"open.set(false)\"\n  ></button>\n}\n\n<!-- Un <div> con rol expl\u00EDcito (no <nav>): un mismo panel puede ser\n     navegaci\u00F3n o di\u00E1logo, y <nav> no admite role=\"dialog\". -->\n<div\n  #panel\n  class=\"kf-drawer__panel\"\n  [class.kf-drawer__panel--open]=\"open()\"\n  [class.kf-drawer__panel--right]=\"side() === 'right'\"\n  [class.kf-drawer__panel--bottom]=\"side() === 'bottom'\"\n  [class.kf-drawer__panel--dialog]=\"role() === 'dialog'\"\n  [attr.role]=\"role()\"\n  [attr.aria-modal]=\"role() === 'dialog' ? 'true' : null\"\n  [attr.aria-label]=\"title() ? null : resolvedAriaLabel()\"\n  [attr.aria-labelledby]=\"title() ? titleId : null\"\n  [attr.aria-hidden]=\"!open()\"\n>\n  @if (side() === 'bottom') {\n    <div class=\"kf-drawer__grip\" aria-hidden=\"true\"></div>\n  }\n  @if (title(); as titleText) {\n    <div class=\"kf-drawer__titlebar\">\n      <h2 class=\"kf-drawer__title\" [id]=\"titleId\">{{ titleText }}</h2>\n      <kf-button\n        class=\"kf-drawer__close\"\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        icon=\"x\"\n        [ariaLabel]=\"resolvedCloseLabel()\"\n        (click)=\"open.set(false)\"\n      />\n    </div>\n  }\n  <div class=\"kf-drawer__header\"><ng-content select=\"[kf-drawer-header]\" /></div>\n  <div class=\"kf-drawer__body\"><ng-content /></div>\n  <div class=\"kf-drawer__footer\"><ng-content select=\"[kf-drawer-footer]\" /></div>\n</div>\n", 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--dialog{width:min(var(--kf-drawer-width, 480px),100vw);max-width:none}@media(max-width:640px){.kf-drawer__panel--dialog{width:100vw}}.kf-drawer__panel--bottom{top:auto;right:0;width:100%;max-width:none;max-height:80vh;border-radius:var(--kf-radius-lg) var(--kf-radius-lg) 0 0;box-shadow:var(--kf-shadow-lg);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(100%)}.kf-drawer__panel--open{transform:none;visibility:visible;transition:transform .24s cubic-bezier(.32,.72,0,1),visibility 0s linear 0s}.kf-drawer__panel--bottom.kf-drawer__panel--open{transform:none}@media(prefers-reduced-motion:reduce){.kf-drawer__panel,.kf-drawer__panel--open{transition:none}}.kf-drawer__grip{flex:none;align-self:center;width:36px;height:4px;margin-top:var(--kf-space-sm);border-radius:var(--kf-radius-pill);background:var(--kf-color-border-strong)}.kf-drawer__titlebar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm);padding:var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-lg);border-bottom:1px solid var(--kf-color-border)}.kf-drawer__title{margin:0;min-width:0;font-family:var(--kf-font-title);font-size:var(--kf-font-size-title-sm);font-weight:700;line-height:1.25;color:var(--kf-color-ink)}.kf-drawer__close{flex:none}@media(pointer:coarse),(max-width:760px){.kf-drawer__close{--kf-button-min-height: 44px;min-width:44px}}.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;min-height:0;display:flex;flex-direction:column;gap:var(--kf-space-xs);padding:var(--kf-space-lg);overflow-y:auto}.kf-drawer__panel--dialog .kf-drawer__body{gap:var(--kf-space-lg)}.kf-drawer__footer{flex:none;padding:var(--kf-space-lg);border-top:1px solid var(--kf-color-border)}.kf-drawer__panel--dialog .kf-drawer__footer{padding:var(--kf-space-md) var(--kf-space-lg)}\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 }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape', ['$event']]
@@ -4409,6 +4990,326 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     }, template: "@if (icon(); as iconName) {\n  <kf-icon class=\"kf-field__icon\" [name]=\"iconName\" size=\"sm\" />\n}\n@if (label()) {\n  <span class=\"kf-field__label\">{{ label() }}</span>\n}\n<span class=\"kf-field__value\">\n  @if (value()) {\n    {{ value() }}\n  } @else {\n    <ng-content></ng-content>\n    @if (isPlaceholderVisible()) {\n      <span class=\"kf-field__placeholder\">{{ placeholder() }}</span>\n    }\n  }\n</span>\n@if (select()) {\n  <kf-icon class=\"kf-field__chevron\" name=\"chevron-down\" size=\"sm\" />\n}\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--kf-space-xs);padding:var(--kf-space-xs) var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);font:inherit;font-family:var(--kf-font-body);color:var(--kf-color-text);line-height:1.2}:host(.kf-field--select){cursor:pointer}:host(.kf-field--select:hover){border-color:var(--kf-color-border-strong)}.kf-field__icon{color:var(--kf-color-text-muted)}.kf-field__label{color:var(--kf-color-text-muted);white-space:nowrap}.kf-field__value{font-weight:500;color:var(--kf-color-ink);white-space:nowrap}.kf-field__placeholder{color:var(--kf-color-text-muted);font-weight:400}.kf-field__chevron{color:var(--kf-color-text-muted)}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], select: [{ type: i0.Input, args: [{ isSignal: true, alias: "select", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }] } });
 
+let nextId$2 = 0;
+/** Nombre legible de un token de `accept`: `.pdf` → `PDF`, `image/png` → `PNG`, `image/*` → `Imágenes`. */
+function describeAcceptToken(token) {
+    const generic = {
+        'image/*': 'Imágenes',
+        'video/*': 'Videos',
+        'audio/*': 'Audio',
+        'text/*': 'Texto',
+    };
+    if (generic[token]) {
+        return generic[token];
+    }
+    if (token.startsWith('.')) {
+        return token.slice(1).toUpperCase();
+    }
+    return (token.split('/')[1] ?? token).toUpperCase();
+}
+/** Tamaño en bytes como texto (`5 MB`, `120 KB`), base 1024. */
+function formatFileSize(bytes) {
+    if (bytes >= 1024 * 1024) {
+        return `${Number((bytes / (1024 * 1024)).toFixed(1))} MB`;
+    }
+    if (bytes >= 1024) {
+        return `${Math.round(bytes / 1024)} KB`;
+    }
+    return `${bytes} B`;
+}
+/**
+ * Selector de archivo accesible, con la misma apariencia y contrato de campo
+ * que `kf-input`: label arriba, ayuda y error debajo, `invalid`.
+ *
+ * El control real es un `<input type="file">` nativo, visualmente oculto pero
+ * enfocable: se llega con Tab, se abre con Enter o Espacio y el anillo de foco
+ * se dibuja sobre el botón visible. Su nombre accesible es el `label` (o
+ * `ariaLabel`); la ayuda, el archivo elegido y el error lo describen
+ * (`aria-describedby`).
+ *
+ * **Ayuda antes de elegir.** `hint` es texto libre; si no se pasa, se arma sola
+ * con los formatos de `accept` y el tamaño de `maxSize` (`PDF, JPG · máx. 5 MB`),
+ * para que el usuario sepa qué sirve ANTES de abrir el selector.
+ *
+ * **Validación.** Cada archivo se revisa contra `accept` (extensiones `.pdf`,
+ * tipos `image/png` o comodines `image/*`) y `maxSize` (bytes). Los válidos
+ * quedan elegidos y se emiten en `fileChange` (siempre `File[]`, vacío al
+ * quitar); los descartados se emiten uno a uno en `fileRejected` con su
+ * motivo (`'type'` o `'size'`) y se muestran como error bajo el campo
+ * (`rejectedTypeText` / `rejectedSizeText`); la ayuda sigue visible bajo ese
+ * mensaje, para que se vea qué sí sirve. Un `error` del consumidor tiene
+ * prioridad sobre ese mensaje y reemplaza a la ayuda, igual que `errorMessage`
+ * sobre `hint` en `kf-input`. La validación del navegador no reemplaza la del servidor.
+ *
+ * **Archivo elegido.** Su nombre y tamaño aparecen UNA vez, con un botón para
+ * quitarlo (`removeLabel`, con el nombre del archivo en su `aria-label`); el
+ * nombre del `<input>` nativo queda oculto. Con `multiple` se listan todos y
+ * cada uno se quita por separado. Elegir de nuevo reemplaza la selección.
+ *
+ * `dropzone` agrega arrastrar y soltar sobre el área; el botón y el teclado
+ * siguen siendo la vía principal.
+ *
+ * Es un `ControlValueAccessor`: con `[(ngModel)]`/`formControl` el valor es
+ * `File | null` (o `File[]` con `multiple`); `writeValue(null)` limpia.
+ *
+ *   <kf-file-input label="Comprobante" accept=".pdf,.jpg,.png" [maxSize]="5242880"
+ *                  (fileChange)="onFiles($event)" (fileRejected)="onRejected($event)" />
+ *   <kf-file-input label="Fotos" accept="image/*" multiple dropzone formControlName="photos" />
+ *   <kf-file-input label="Contrato" error="Adjunta el contrato firmado." formControlName="contract" />
+ */
+class FileInput {
+    nativeInput = viewChild.required('nativeInput', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeInput" }] : /* istanbul ignore next */ []));
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Texto de ayuda. Sin valor, se arma con `accept` y `maxSize`. */
+    hint = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Formatos admitidos, como el `accept` nativo: `.pdf,.jpg`, `image/png`, `image/*`. */
+    accept = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "accept" }] : /* istanbul ignore next */ []));
+    /** Tamaño máximo por archivo, en bytes. Sin valor, sin límite. */
+    maxSize = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSize" }] : /* istanbul ignore next */ []));
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Agrega arrastrar y soltar sobre el área del control. */
+    dropzone = input(false, { ...(ngDevMode ? { debugName: "dropzone" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Borde rojo y `aria-invalid`. Se activa solo con `error`; úsalo para marcar un error sin mensaje. */
+    invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Mensaje de error del consumidor (`role="alert"`); reemplaza a la ayuda y al motivo de rechazo, como `errorMessage` en `kf-input`. */
+    error = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Nombre accesible cuando no hay `label` visible. */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Texto del botón cuando no hay archivo elegido. */
+    buttonLabel = input('Elegir archivo', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "buttonLabel" }] : /* istanbul ignore next */ []));
+    /** Texto del botón con `multiple` o cuando ya hay un archivo (cambiar). */
+    changeLabel = input('Cambiar archivo', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "changeLabel" }] : /* istanbul ignore next */ []));
+    /** Nombre accesible del botón de quitar; se le agrega el nombre del archivo. */
+    removeLabel = input('Quitar', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "removeLabel" }] : /* istanbul ignore next */ []));
+    /** Texto de arrastrar y soltar (solo con `dropzone`). */
+    dropzoneText = input('o arrástralo aquí', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropzoneText" }] : /* istanbul ignore next */ []));
+    rejectedTypeText = input('Formato no permitido.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rejectedTypeText" }] : /* istanbul ignore next */ []));
+    rejectedSizeText = input('El archivo supera el tamaño máximo.', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rejectedSizeText" }] : /* istanbul ignore next */ []));
+    /** Selección vigente (`File[]`, vacío al quitar todo). */
+    fileChange = output();
+    /** Un archivo descartado y su motivo. */
+    fileRejected = output();
+    inputId = `kf-file-input-${nextId$2++}`;
+    hintId = `${this.inputId}-hint`;
+    errorId = `${this.inputId}-error`;
+    filesId = `${this.inputId}-files`;
+    files = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    rejection = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rejection" }] : /* istanbul ignore next */ []));
+    dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dragging" }] : /* istanbul ignore next */ []));
+    disabledByForm = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledByForm" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledByForm(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** Mensaje visible: el del consumidor, o el motivo del último rechazo. */
+    message = computed(() => {
+        const own = this.error();
+        if (own) {
+            return own;
+        }
+        const reason = this.rejection();
+        if (reason === 'type') {
+            return this.rejectedTypeText();
+        }
+        return reason === 'size' ? this.rejectedSizeText() : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Ayuda efectiva: la del consumidor o la armada con formatos y tamaño. */
+    effectiveHint = computed(() => {
+        const own = this.hint();
+        if (own) {
+            return own;
+        }
+        const parts = [];
+        const tokens = (this.accept() ?? '')
+            .split(',')
+            .map((token) => token.trim())
+            .filter(Boolean);
+        if (tokens.length) {
+            parts.push([...new Set(tokens.map(describeAcceptToken))].join(', '));
+        }
+        const max = this.maxSize();
+        if (max) {
+            parts.push(`máx. ${formatFileSize(max)}`);
+        }
+        return parts.join(' · ');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveHint" }] : /* istanbul ignore next */ []));
+    isInvalid = computed(() => this.invalid() || !!this.message(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isInvalid" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        const ids = [];
+        if (this.message()) {
+            ids.push(this.errorId);
+        }
+        if (this.effectiveHint() && !this.error()) {
+            ids.push(this.hintId);
+        }
+        if (this.files().length) {
+            ids.push(this.filesId);
+        }
+        return ids.join(' ') || null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    triggerText = computed(() => this.files().length && !this.multiple() ? this.changeLabel() : this.buttonLabel(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "triggerText" }] : /* istanbul ignore next */ []));
+    /** Enfoca el `<input>` nativo. */
+    focus(options) {
+        this.nativeInput().nativeElement.focus(options);
+    }
+    writeValue(value) {
+        const list = Array.isArray(value) ? value : value ? [value] : [];
+        this.files.set(list);
+        this.rejection.set(null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledByForm.set(isDisabled);
+    }
+    onPick(event) {
+        const native = event.target;
+        const picked = Array.from(native.files ?? []);
+        // Se limpia el valor nativo: el nombre ya se muestra en la lista y así se
+        // puede volver a elegir el mismo archivo después de quitarlo.
+        native.value = '';
+        this.receive(picked);
+    }
+    onDragOver(event) {
+        if (this.isDisabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.dragging.set(true);
+    }
+    onDragLeave() {
+        this.dragging.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.dragging.set(false);
+        if (this.isDisabled()) {
+            return;
+        }
+        this.receive(Array.from(event.dataTransfer?.files ?? []));
+    }
+    remove(index) {
+        const next = this.files().filter((_, i) => i !== index);
+        this.rejection.set(null);
+        this.commit(next);
+        this.nativeInput().nativeElement.focus();
+    }
+    formatSize(file) {
+        return formatFileSize(file.size);
+    }
+    /** Valida lo recibido, emite los rechazos y reemplaza la selección si hay algo válido. */
+    receive(incoming) {
+        if (!incoming.length) {
+            return;
+        }
+        const candidates = this.multiple() ? incoming : incoming.slice(0, 1);
+        const accepted = [];
+        let lastReason = null;
+        for (const file of candidates) {
+            const reason = this.reject(file);
+            if (reason) {
+                lastReason = reason;
+                this.fileRejected.emit({ file, reason });
+            }
+            else {
+                accepted.push(file);
+            }
+        }
+        this.rejection.set(lastReason);
+        if (accepted.length) {
+            this.commit(accepted);
+        }
+        this.onTouched();
+    }
+    reject(file) {
+        if (!this.matchesAccept(file)) {
+            return 'type';
+        }
+        const max = this.maxSize();
+        return max !== undefined && file.size > max ? 'size' : null;
+    }
+    matchesAccept(file) {
+        const tokens = (this.accept() ?? '')
+            .split(',')
+            .map((token) => token.trim().toLowerCase())
+            .filter(Boolean);
+        if (!tokens.length) {
+            return true;
+        }
+        const name = file.name.toLowerCase();
+        const type = file.type.toLowerCase();
+        return tokens.some((token) => {
+            if (token.startsWith('.')) {
+                return name.endsWith(token);
+            }
+            if (token.endsWith('/*')) {
+                return type.startsWith(token.slice(0, -1));
+            }
+            return type === token;
+        });
+    }
+    commit(files) {
+        this.files.set(files);
+        this.fileChange.emit(files);
+        this.onChange(this.multiple() ? files : (files[0] ?? null));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FileInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: FileInput, isStandalone: true, selector: "kf-file-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, maxSize: { classPropertyName: "maxSize", publicName: "maxSize", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, dropzone: { classPropertyName: "dropzone", publicName: "dropzone", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, buttonLabel: { classPropertyName: "buttonLabel", publicName: "buttonLabel", isSignal: true, isRequired: false, transformFunction: null }, changeLabel: { classPropertyName: "changeLabel", publicName: "changeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, dropzoneText: { classPropertyName: "dropzoneText", publicName: "dropzoneText", isSignal: true, isRequired: false, transformFunction: null }, rejectedTypeText: { classPropertyName: "rejectedTypeText", publicName: "rejectedTypeText", isSignal: true, isRequired: false, transformFunction: null }, rejectedSizeText: { classPropertyName: "rejectedSizeText", publicName: "rejectedSizeText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileChange: "fileChange", fileRejected: "fileRejected" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FileInput),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-file-input__area\"\n  [class.kf-file-input__area--dropzone]=\"dropzone()\"\n  [class.kf-file-input__area--dragging]=\"dragging()\"\n  [class.kf-file-input__area--invalid]=\"isInvalid()\"\n  [class.kf-file-input__area--disabled]=\"isDisabled()\"\n  (dragover)=\"dropzone() ? onDragOver($event) : null\"\n  (dragleave)=\"dropzone() ? onDragLeave() : null\"\n  (drop)=\"dropzone() ? onDrop($event) : null\"\n>\n  <input\n    #nativeInput\n    type=\"file\"\n    class=\"kf-file-input__native\"\n    [id]=\"inputId\"\n    [attr.accept]=\"accept() || null\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required() && !files().length\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() ? true : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    (change)=\"onPick($event)\"\n  />\n  <label class=\"kf-file-input__button\" [for]=\"inputId\" aria-hidden=\"true\">\n    <kf-icon name=\"upload-cloud\" size=\"sm\" />\n    {{ triggerText() }}\n  </label>\n  @if (dropzone()) {\n    <span class=\"kf-file-input__drop-text\" aria-hidden=\"true\">{{ dropzoneText() }}</span>\n  }\n</div>\n@if (files().length) {\n  <ul class=\"kf-file-input__files\" [id]=\"filesId\">\n    @for (file of files(); track $index) {\n      <li class=\"kf-file-input__file\">\n        <kf-icon class=\"kf-file-input__file-icon\" name=\"file\" size=\"sm\" />\n        <span class=\"kf-file-input__file-name\">{{ file.name }}</span>\n        <span class=\"kf-file-input__file-size\">{{ formatSize(file) }}</span>\n        <button\n          type=\"button\"\n          class=\"kf-file-input__remove\"\n          [attr.aria-label]=\"removeLabel() + ' ' + file.name\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"remove($index)\"\n        >\n          <kf-icon name=\"x\" size=\"sm\" />\n        </button>\n      </li>\n    }\n  </ul>\n}\n@if (message(); as text) {\n  <span class=\"kf-file-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ text }}</span>\n}\n@if (effectiveHint() && !error()) {\n  <span class=\"kf-file-input__hint kf-field-hint\" [id]=\"hintId\">{{ effectiveHint() }}</span>\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-file-input__area{position:relative;display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-file-input__native{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.kf-file-input__native:disabled{cursor:not-allowed}.kf-file-input__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);min-height:2.25rem;padding:var(--kf-space-sm) var(--kf-space-md);box-sizing:border-box;border:1px solid var(--kf-color-primary);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-primary-active);font:inherit;font-weight:600;pointer-events:none;transition:background .14s,box-shadow .14s}.kf-file-input__area:hover .kf-file-input__native:not(:disabled)+.kf-file-input__button{background:var(--kf-color-primary-soft)}.kf-file-input__native:focus-visible+.kf-file-input__button{box-shadow:var(--kf-shadow-focus);outline:2px solid transparent}.kf-file-input__area--invalid .kf-file-input__button{border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-file-input__area--invalid .kf-file-input__native:focus-visible+.kf-file-input__button{box-shadow:var(--kf-shadow-focus-error)}.kf-file-input__area--disabled{opacity:.5}.kf-file-input__area--dropzone{flex-direction:column;justify-content:center;gap:var(--kf-space-xs);padding:var(--kf-space-lg) var(--kf-space-md);border:1px dashed var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);transition:background .14s,border-color .14s}.kf-file-input__area--dragging{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-file-input__area--dropzone.kf-file-input__area--invalid{border-color:var(--kf-color-error)}.kf-file-input__drop-text{font-size:.875rem;color:var(--kf-color-text);pointer-events:none}.kf-file-input__files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--kf-space-xs)}.kf-file-input__file{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-xs) var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-file-input__file-icon{flex:none;color:var(--kf-color-text-muted)}.kf-file-input__file-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--kf-color-ink);font-weight:600}.kf-file-input__file-size{flex:none;font-size:.75rem;color:var(--kf-color-text)}.kf-file-input__remove{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;padding:0;border:none;border-radius:var(--kf-radius-xs);background:transparent;color:var(--kf-color-text);cursor:pointer}.kf-file-input__remove:hover:not(:disabled){background:var(--kf-color-surface);color:var(--kf-color-ink)}.kf-file-input__remove:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-file-input__hint{color:var(--kf-color-text)}@media(pointer:coarse),(max-width:760px){.kf-file-input__button{min-height:44px}.kf-file-input__remove{min-width:44px;min-height:44px}}\n"], dependencies: [{ kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: FileInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-file-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FieldLabel, Icon], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FileInput),
+                            multi: true,
+                        },
+                    ], template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-file-input__area\"\n  [class.kf-file-input__area--dropzone]=\"dropzone()\"\n  [class.kf-file-input__area--dragging]=\"dragging()\"\n  [class.kf-file-input__area--invalid]=\"isInvalid()\"\n  [class.kf-file-input__area--disabled]=\"isDisabled()\"\n  (dragover)=\"dropzone() ? onDragOver($event) : null\"\n  (dragleave)=\"dropzone() ? onDragLeave() : null\"\n  (drop)=\"dropzone() ? onDrop($event) : null\"\n>\n  <input\n    #nativeInput\n    type=\"file\"\n    class=\"kf-file-input__native\"\n    [id]=\"inputId\"\n    [attr.accept]=\"accept() || null\"\n    [multiple]=\"multiple()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required() && !files().length\"\n    [attr.aria-describedby]=\"describedBy()\"\n    [attr.aria-invalid]=\"isInvalid() ? true : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    (change)=\"onPick($event)\"\n  />\n  <label class=\"kf-file-input__button\" [for]=\"inputId\" aria-hidden=\"true\">\n    <kf-icon name=\"upload-cloud\" size=\"sm\" />\n    {{ triggerText() }}\n  </label>\n  @if (dropzone()) {\n    <span class=\"kf-file-input__drop-text\" aria-hidden=\"true\">{{ dropzoneText() }}</span>\n  }\n</div>\n@if (files().length) {\n  <ul class=\"kf-file-input__files\" [id]=\"filesId\">\n    @for (file of files(); track $index) {\n      <li class=\"kf-file-input__file\">\n        <kf-icon class=\"kf-file-input__file-icon\" name=\"file\" size=\"sm\" />\n        <span class=\"kf-file-input__file-name\">{{ file.name }}</span>\n        <span class=\"kf-file-input__file-size\">{{ formatSize(file) }}</span>\n        <button\n          type=\"button\"\n          class=\"kf-file-input__remove\"\n          [attr.aria-label]=\"removeLabel() + ' ' + file.name\"\n          [disabled]=\"isDisabled()\"\n          (click)=\"remove($index)\"\n        >\n          <kf-icon name=\"x\" size=\"sm\" />\n        </button>\n      </li>\n    }\n  </ul>\n}\n@if (message(); as text) {\n  <span class=\"kf-file-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ text }}</span>\n}\n@if (effectiveHint() && !error()) {\n  <span class=\"kf-file-input__hint kf-field-hint\" [id]=\"hintId\">{{ effectiveHint() }}</span>\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-file-input__area{position:relative;display:flex;align-items:center;gap:var(--kf-space-sm)}.kf-file-input__native{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.kf-file-input__native:disabled{cursor:not-allowed}.kf-file-input__button{display:inline-flex;align-items:center;justify-content:center;gap:var(--kf-space-xs);min-height:2.25rem;padding:var(--kf-space-sm) var(--kf-space-md);box-sizing:border-box;border:1px solid var(--kf-color-primary);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);color:var(--kf-color-primary-active);font:inherit;font-weight:600;pointer-events:none;transition:background .14s,box-shadow .14s}.kf-file-input__area:hover .kf-file-input__native:not(:disabled)+.kf-file-input__button{background:var(--kf-color-primary-soft)}.kf-file-input__native:focus-visible+.kf-file-input__button{box-shadow:var(--kf-shadow-focus);outline:2px solid transparent}.kf-file-input__area--invalid .kf-file-input__button{border-color:var(--kf-color-error);color:var(--kf-color-error-strong)}.kf-file-input__area--invalid .kf-file-input__native:focus-visible+.kf-file-input__button{box-shadow:var(--kf-shadow-focus-error)}.kf-file-input__area--disabled{opacity:.5}.kf-file-input__area--dropzone{flex-direction:column;justify-content:center;gap:var(--kf-space-xs);padding:var(--kf-space-lg) var(--kf-space-md);border:1px dashed var(--kf-color-border-strong);border-radius:var(--kf-radius-sm);background:var(--kf-color-surface);transition:background .14s,border-color .14s}.kf-file-input__area--dragging{border-color:var(--kf-color-primary);background:var(--kf-color-primary-soft)}.kf-file-input__area--dropzone.kf-file-input__area--invalid{border-color:var(--kf-color-error)}.kf-file-input__drop-text{font-size:.875rem;color:var(--kf-color-text);pointer-events:none}.kf-file-input__files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--kf-space-xs)}.kf-file-input__file{display:flex;align-items:center;gap:var(--kf-space-sm);padding:var(--kf-space-xs) var(--kf-space-sm);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);background:var(--kf-color-white);min-width:0}.kf-file-input__file-icon{flex:none;color:var(--kf-color-text-muted)}.kf-file-input__file-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--kf-color-ink);font-weight:600}.kf-file-input__file-size{flex:none;font-size:.75rem;color:var(--kf-color-text)}.kf-file-input__remove{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:2rem;min-height:2rem;padding:0;border:none;border-radius:var(--kf-radius-xs);background:transparent;color:var(--kf-color-text);cursor:pointer}.kf-file-input__remove:hover:not(:disabled){background:var(--kf-color-surface);color:var(--kf-color-ink)}.kf-file-input__remove:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-file-input__hint{color:var(--kf-color-text)}@media(pointer:coarse),(max-width:760px){.kf-file-input__button{min-height:44px}.kf-file-input__remove{min-width:44px;min-height:44px}}\n"] }]
+        }], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSize", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], dropzone: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzone", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], buttonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonLabel", required: false }] }], changeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "changeLabel", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], dropzoneText: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropzoneText", required: false }] }], rejectedTypeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectedTypeText", required: false }] }], rejectedSizeText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rejectedSizeText", required: false }] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }], fileRejected: [{ type: i0.Output, args: ["fileRejected"] }] } });
+
+/** Vacío o `undefined` no emiten el atributo; `0` sí es un límite válido. */
+function normalizeBound(value) {
+    return value === undefined || value === '' ? null : value;
+}
+/** `maxlength` como entero positivo; cualquier otra cosa (vacío, NaN, 0, negativo) no se emite. */
+function toMaxLength(value) {
+    const parsed = typeof value === 'string' ? Number.parseInt(value, 10) : value;
+    return typeof parsed === 'number' && Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+}
 /**
  * Input de formulario apilado: label arriba (en mayúsculas vía CSS), campo con
  * fondo gris que pasa a blanco con anillo de foco azul al enfocar.
@@ -4472,6 +5373,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  *
  *   <kf-input label="RUT" autocomplete="username" name="rut" inputmode="text" formControlName="rut" />
  *   <kf-input type="password" label="Contraseña" toggleable autocomplete="current-password" name="password" formControlName="password" />
+ *
+ * `min`, `max`, `step` y `maxlength` se reenvían al `<input>` nativo (mismo
+ * motivo: un atributo en el host no llega adentro) y sin valor no se
+ * renderiza ningún atributo. `min`/`max`/`step` aceptan número o texto según
+ * el `type` (`number`, `range`, `date`, `time`, `month`…): con `type="date"` el
+ * límite es una fecha ISO. `maxlength` es un entero positivo y aplica a los
+ * tipos de texto (`text`, `search`, `email`, `tel`, `url`, `password`). El
+ * navegador usa los límites para la validación nativa (`:invalid`,
+ * `validity.rangeUnderflow`) y para el selector de fechas; no reemplazan la
+ * validación del formulario ni el `errorMessage`.
+ *
+ *   <kf-input type="date" label="Fecha de entrega" min="2026-01-01" max="2026-12-31" />
+ *   <kf-input type="number" label="Cantidad" [min]="1" [max]="20" [step]="1" />
+ *   <kf-input label="Placa" [maxlength]="7" />
  */
 class Input {
     static nextId = 0;
@@ -4521,6 +5436,14 @@ class Input {
      * el `type`. Sin valor, el atributo no se renderiza. */
     inputmode = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "inputmode" }] : /* istanbul ignore next */ []));
+    /** Límite inferior del control (`min` nativo): número, o texto para fechas/horas (`'2026-01-01'`). */
+    min = input(null, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: normalizeBound });
+    /** Límite superior del control (`max` nativo). Ver `min`. */
+    max = input(null, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: normalizeBound });
+    /** Paso del control (`step` nativo): número o `'any'`. */
+    step = input(null, { ...(ngDevMode ? { debugName: "step" } : /* istanbul ignore next */ {}), transform: normalizeBound });
+    /** Largo máximo del texto (`maxlength` nativo), entero positivo. Solo aplica a tipos de texto. */
+    maxlength = input(null, { ...(ngDevMode ? { debugName: "maxlength" } : /* istanbul ignore next */ {}), transform: toMaxLength });
     /** Agrega el botón de mostrar/ocultar — sin efecto si `type` no es `"password"`. */
     toggleable = input(false, { ...(ngDevMode ? { debugName: "toggleable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     /** Nombre accesible del `<input>` cuando no hay `label` visible. Ignorado
@@ -4630,13 +5553,13 @@ class Input {
         this.passwordVisible.update((visible) => !visible);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Input, isStandalone: true, selector: "kf-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cleared: "cleared" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Input, isStandalone: true, selector: "kf-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, inputmode: { classPropertyName: "inputmode", publicName: "inputmode", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cleared: "cleared" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => Input),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-input__field\"\n  [class.kf-input__field--disabled]=\"isDisabled()\"\n  [class.kf-input__field--readonly]=\"readonly()\"\n  [class.kf-input__field--focused]=\"focused()\"\n  [class.kf-input__field--invalid]=\"invalid()\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-input__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <input\n    #nativeInput\n    [id]=\"inputId\"\n    class=\"kf-input__control\"\n    [type]=\"effectiveType()\"\n    [placeholder]=\"placeholder()\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.name]=\"name() || null\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [attr.readonly]=\"readonly() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? errorId : hint() ? hintId : null\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [value]=\"value()\"\n    (input)=\"onInput(nativeInput.value)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"focused.set(true)\"\n  />\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__clear\"\n      [attr.aria-label]=\"clearLabel()\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onClear()\"\n    >\n      <kf-icon name=\"x\" size=\"sm\" />\n    </button>\n  }\n  @if (showPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__toggle\"\n      [attr.aria-label]=\"passwordVisible() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      [attr.aria-pressed]=\"passwordVisible()\"\n      (click)=\"onTogglePasswordVisibility()\"\n    >\n      <kf-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" size=\"sm\" />\n    </button>\n  } @else if (suffix()) {\n    <span class=\"kf-input__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (errorMessage(); as message) {\n  <span class=\"kf-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n} @else if (hint()) {\n  <span class=\"kf-input__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-input__field--disabled{opacity:.5}.kf-input__field--readonly{background:var(--kf-color-gray-100)}.kf-input__control:read-only{cursor:default}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__control::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.kf-input__clear,.kf-input__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--kf-space-xs);margin:0 calc(var(--kf-space-xs) * -1);color:var(--kf-color-text-muted);cursor:pointer;border-radius:var(--kf-radius-xs);transition:color .14s}.kf-input__clear:hover,.kf-input__toggle:hover{color:var(--kf-color-text)}.kf-input__clear:focus-visible,.kf-input__toggle:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-input__field\"\n  [class.kf-input__field--disabled]=\"isDisabled()\"\n  [class.kf-input__field--readonly]=\"readonly()\"\n  [class.kf-input__field--focused]=\"focused()\"\n  [class.kf-input__field--invalid]=\"invalid()\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-input__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <input\n    #nativeInput\n    [id]=\"inputId\"\n    class=\"kf-input__control\"\n    [type]=\"effectiveType()\"\n    [placeholder]=\"placeholder()\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.name]=\"name() || null\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [attr.min]=\"min()\"\n    [attr.max]=\"max()\"\n    [attr.step]=\"step()\"\n    [attr.maxlength]=\"maxlength()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [attr.readonly]=\"readonly() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? errorId : hint() ? hintId : null\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [value]=\"value()\"\n    (input)=\"onInput(nativeInput.value)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"focused.set(true)\"\n  />\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__clear\"\n      [attr.aria-label]=\"clearLabel()\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onClear()\"\n    >\n      <kf-icon name=\"x\" size=\"sm\" />\n    </button>\n  }\n  @if (showPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__toggle\"\n      [attr.aria-label]=\"passwordVisible() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      [attr.aria-pressed]=\"passwordVisible()\"\n      (click)=\"onTogglePasswordVisibility()\"\n    >\n      <kf-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" size=\"sm\" />\n    </button>\n  } @else if (suffix()) {\n    <span class=\"kf-input__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (errorMessage(); as message) {\n  <span class=\"kf-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n} @else if (hint()) {\n  <span class=\"kf-input__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-input__field--disabled{opacity:.5}.kf-input__field--readonly{background:var(--kf-color-gray-100)}.kf-input__control:read-only{cursor:default}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__control::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.kf-input__clear,.kf-input__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--kf-space-xs);margin:0 calc(var(--kf-space-xs) * -1);color:var(--kf-color-text-muted);cursor:pointer;border-radius:var(--kf-radius-xs);transition:color .14s}.kf-input__clear:hover,.kf-input__toggle:hover{color:var(--kf-color-text)}.kf-input__clear:focus-visible,.kf-input__toggle:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldLabel, selector: "kf-field-label", inputs: ["for", "required"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Input, decorators: [{
             type: Component,
@@ -4646,8 +5569,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                             useExisting: forwardRef(() => Input),
                             multi: true,
                         },
-                    ], template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-input__field\"\n  [class.kf-input__field--disabled]=\"isDisabled()\"\n  [class.kf-input__field--readonly]=\"readonly()\"\n  [class.kf-input__field--focused]=\"focused()\"\n  [class.kf-input__field--invalid]=\"invalid()\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-input__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <input\n    #nativeInput\n    [id]=\"inputId\"\n    class=\"kf-input__control\"\n    [type]=\"effectiveType()\"\n    [placeholder]=\"placeholder()\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.name]=\"name() || null\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [attr.readonly]=\"readonly() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? errorId : hint() ? hintId : null\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [value]=\"value()\"\n    (input)=\"onInput(nativeInput.value)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"focused.set(true)\"\n  />\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__clear\"\n      [attr.aria-label]=\"clearLabel()\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onClear()\"\n    >\n      <kf-icon name=\"x\" size=\"sm\" />\n    </button>\n  }\n  @if (showPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__toggle\"\n      [attr.aria-label]=\"passwordVisible() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      [attr.aria-pressed]=\"passwordVisible()\"\n      (click)=\"onTogglePasswordVisibility()\"\n    >\n      <kf-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" size=\"sm\" />\n    </button>\n  } @else if (suffix()) {\n    <span class=\"kf-input__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (errorMessage(); as message) {\n  <span class=\"kf-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n} @else if (hint()) {\n  <span class=\"kf-input__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-input__field--disabled{opacity:.5}.kf-input__field--readonly{background:var(--kf-color-gray-100)}.kf-input__control:read-only{cursor:default}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__control::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.kf-input__clear,.kf-input__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--kf-space-xs);margin:0 calc(var(--kf-space-xs) * -1);color:var(--kf-color-text-muted);cursor:pointer;border-radius:var(--kf-radius-xs);transition:color .14s}.kf-input__clear:hover,.kf-input__toggle:hover{color:var(--kf-color-text)}.kf-input__clear:focus-visible,.kf-input__toggle:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"] }]
-        }], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
+                    ], template: "@if (label()) {\n  <kf-field-label [for]=\"inputId\" [required]=\"required()\">{{ label() }}</kf-field-label>\n}\n<div\n  class=\"kf-input__field\"\n  [class.kf-input__field--disabled]=\"isDisabled()\"\n  [class.kf-input__field--readonly]=\"readonly()\"\n  [class.kf-input__field--focused]=\"focused()\"\n  [class.kf-input__field--invalid]=\"invalid()\"\n>\n  @if (icon(); as iconName) {\n    <kf-icon class=\"kf-input__icon\" [name]=\"iconName\" size=\"sm\" />\n  }\n  <input\n    #nativeInput\n    [id]=\"inputId\"\n    class=\"kf-input__control\"\n    [type]=\"effectiveType()\"\n    [placeholder]=\"placeholder()\"\n    [attr.autocomplete]=\"autocomplete() || null\"\n    [attr.name]=\"name() || null\"\n    [attr.inputmode]=\"inputmode() || null\"\n    [attr.min]=\"min()\"\n    [attr.max]=\"max()\"\n    [attr.step]=\"step()\"\n    [attr.maxlength]=\"maxlength()\"\n    [disabled]=\"isDisabled()\"\n    [required]=\"required()\"\n    [attr.readonly]=\"readonly() ? true : null\"\n    [attr.aria-describedby]=\"errorMessage() ? errorId : hint() ? hintId : null\"\n    [attr.aria-invalid]=\"invalid() ? true : null\"\n    [attr.aria-label]=\"label() ? null : ariaLabel() || null\"\n    [value]=\"value()\"\n    (input)=\"onInput(nativeInput.value)\"\n    (blur)=\"onBlur()\"\n    (focus)=\"focused.set(true)\"\n  />\n  @if (showClear()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__clear\"\n      [attr.aria-label]=\"clearLabel()\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"onClear()\"\n    >\n      <kf-icon name=\"x\" size=\"sm\" />\n    </button>\n  }\n  @if (showPasswordToggle()) {\n    <button\n      type=\"button\"\n      class=\"kf-input__toggle\"\n      [attr.aria-label]=\"passwordVisible() ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n      [attr.aria-pressed]=\"passwordVisible()\"\n      (click)=\"onTogglePasswordVisibility()\"\n    >\n      <kf-icon [name]=\"passwordVisible() ? 'eye-off' : 'eye'\" size=\"sm\" />\n    </button>\n  } @else if (suffix()) {\n    <span class=\"kf-input__suffix\">{{ suffix() }}</span>\n  }\n</div>\n@if (errorMessage(); as message) {\n  <span class=\"kf-input__error kf-field-error\" [id]=\"errorId\" role=\"alert\">{{ message }}</span>\n} @else if (hint()) {\n  <span class=\"kf-input__hint kf-field-hint\" [id]=\"hintId\">{{ hint() }}</span>\n}\n", styles: [".kf-field-hint{font-size:.75rem;color:var(--kf-color-text-muted)}.kf-field-error{display:flex;align-items:center;gap:var(--kf-space-xs);font-size:.75rem;font-weight:600;color:var(--kf-color-error-strong)}:host{display:flex;flex-direction:column;gap:var(--kf-space-xs);font-family:var(--kf-font-body)}.kf-input__field{display:flex;align-items:center;gap:var(--kf-space-sm);padding:0 var(--kf-space-sm);background:var(--kf-color-surface);border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-sm);transition:background .14s,border-color .14s,box-shadow .14s}.kf-input__field--focused{background:var(--kf-color-white);border-color:var(--kf-color-primary);box-shadow:var(--kf-shadow-focus)}.kf-input__field--invalid{border-color:var(--kf-color-error)}.kf-input__field--invalid.kf-input__field--focused{box-shadow:var(--kf-shadow-focus-error)}.kf-input__field--disabled{opacity:.5}.kf-input__field--readonly{background:var(--kf-color-gray-100)}.kf-input__control:read-only{cursor:default}.kf-input__icon{color:var(--kf-color-text-muted)}.kf-input__field--invalid .kf-input__icon{color:var(--kf-color-error)}.kf-input__control{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:var(--kf-color-text);padding:var(--kf-space-sm) 0}.kf-input__control::placeholder{color:var(--kf-color-text-muted)}.kf-input__control:disabled{cursor:not-allowed}.kf-input__suffix{flex:none;color:var(--kf-color-text-muted);font-size:.875rem}.kf-input__control::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.kf-input__clear,.kf-input__toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;padding:var(--kf-space-xs);margin:0 calc(var(--kf-space-xs) * -1);color:var(--kf-color-text-muted);cursor:pointer;border-radius:var(--kf-radius-xs);transition:color .14s}.kf-input__clear:hover,.kf-input__toggle:hover{color:var(--kf-color-text)}.kf-input__clear:focus-visible,.kf-input__toggle:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}\n"] }]
+        }], propDecorators: { nativeInput: [{ type: i0.ViewChild, args: ['nativeInput', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], inputmode: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputmode", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], maxlength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxlength", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], cleared: [{ type: i0.Output, args: ["cleared"] }] } });
 
 let nextId$1 = 0;
 /**
@@ -4775,7 +5698,11 @@ class MultiSelect {
                 this.searchInputRef()?.nativeElement.focus();
             }
         });
-        inject(DestroyRef).onDestroy(() => this.overlay.dispose());
+        const stopEscape = listenEscapeCapture(inject(DOCUMENT), () => this.onEscape());
+        inject(DestroyRef).onDestroy(() => {
+            stopEscape();
+            this.overlay.dispose();
+        });
     }
     isSelected(value) {
         return this.values().includes(value);
@@ -4822,11 +5749,21 @@ class MultiSelect {
             this.toggleOption(option.value);
         }
     }
+    /**
+     * Escape con el panel abierto, en fase de captura sobre `document` (ver
+     * `listenEscapeCapture`): consume la tecla solo si había un panel que
+     * cerrar, así un `kf-drawer`/`kf-modal` contenedor no se cierra con el
+     * mismo Escape. Devuelve si cerró algo.
+     */
     onEscape() {
+        if (!this.isOpen()) {
+            return false;
+        }
         this.isOpen.set(false);
+        return true;
     }
     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 }, width: { classPropertyName: "width", publicName: "width", 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()" }, properties: { "class.kf-multi-select--width-sm": "width() === 'sm'", "class.kf-multi-select--width-lg": "width() === 'lg'", "class.kf-multi-select--width-full": "width() === 'full'" } }, 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()) {\n  <kf-field-label [for]=\"triggerId\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-multi-select__trigger\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  (click)=\"toggle()\"\n>\n  <span\n    class=\"kf-multi-select__value\"\n    [class.kf-multi-select__value--placeholder]=\"selectedCount() === 0\"\n  >\n    {{ summaryText() }}\n  </span>\n  @if (selectedCount() > 0) {\n    <span class=\"kf-multi-select__count\">{{ selectedCount() }}</span>\n  }\n  <span\n    class=\"kf-multi-select__caret kf-caret\"\n    [class.kf-multi-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n<ng-template #panelTemplate>\n  <div class=\"kf-multi-select__panel\">\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-multi-select__search\"\n        placeholder=\"Buscar\u2026\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); toggleActive()\"\n      />\n    }\n    <ul\n      class=\"kf-multi-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-labelledby]=\"triggerId\"\n    >\n      @if (options().length > 0) {\n        <li\n          class=\"kf-multi-select__option\"\n          role=\"option\"\n          tabindex=\"0\"\n          [attr.aria-selected]=\"allSelected()\"\n          (click)=\"toggleAll()\"\n          (keydown.enter)=\"toggleAll()\"\n          (keydown.space)=\"$event.preventDefault(); toggleAll()\"\n        >\n          <span\n            class=\"kf-multi-select__checkbox kf-checkbox-box\"\n            [class.kf-multi-select__checkbox--checked]=\"allSelected()\"\n            [class.kf-multi-select__checkbox--indeterminate]=\"isPartiallySelected()\"\n          ></span>\n          <span class=\"kf-multi-select__option-label\">Todas</span>\n        </li>\n      }\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-multi-select__option\"\n          [class.kf-multi-select__option--selected]=\"isSelected(option.value)\"\n          [class.kf-multi-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"0\"\n          [attr.aria-selected]=\"isSelected(option.value)\"\n          (click)=\"toggleOption(option.value)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown.enter)=\"toggleOption(option.value)\"\n          (keydown.space)=\"$event.preventDefault(); toggleOption(option.value)\"\n          (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n          (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        >\n          <span\n            class=\"kf-multi-select__checkbox kf-checkbox-box\"\n            [class.kf-multi-select__checkbox--checked]=\"isSelected(option.value)\"\n          ></span>\n          <span class=\"kf-multi-select__option-label\">{{ option.label }}</span>\n        </li>\n      } @empty {\n        @if (options().length > 0) {\n          <li class=\"kf-multi-select__empty\">Sin resultados</li>\n        } @else {\n          <li class=\"kf-multi-select__empty\">Sin opciones disponibles</li>\n        }\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-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-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;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-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-flex;flex-direction:column;gap:var(--kf-space-xs);font:inherit;width:var(--kf-select-width-md)}:host(.kf-multi-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-multi-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-multi-select--width-full){width:100%}.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__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}.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:var(--kf-checkbox-mark-width);height:var(--kf-checkbox-mark-height);border:var(--kf-checkbox-mark-border);border-width:var(--kf-checkbox-mark-border-width);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:var(--kf-checkbox-dash-width);height:var(--kf-checkbox-dash-height);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"] }] });
+    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 }, width: { classPropertyName: "width", publicName: "width", 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: { properties: { "class.kf-multi-select--width-sm": "width() === 'sm'", "class.kf-multi-select--width-lg": "width() === 'lg'", "class.kf-multi-select--width-full": "width() === 'full'" } }, 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()) {\n  <kf-field-label [for]=\"triggerId\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-multi-select__trigger\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  (click)=\"toggle()\"\n>\n  <span\n    class=\"kf-multi-select__value\"\n    [class.kf-multi-select__value--placeholder]=\"selectedCount() === 0\"\n  >\n    {{ summaryText() }}\n  </span>\n  @if (selectedCount() > 0) {\n    <span class=\"kf-multi-select__count\">{{ selectedCount() }}</span>\n  }\n  <span\n    class=\"kf-multi-select__caret kf-caret\"\n    [class.kf-multi-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n<ng-template #panelTemplate>\n  <div class=\"kf-multi-select__panel\">\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-multi-select__search\"\n        placeholder=\"Buscar\u2026\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); toggleActive()\"\n      />\n    }\n    <ul\n      class=\"kf-multi-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-labelledby]=\"triggerId\"\n    >\n      @if (options().length > 0) {\n        <li\n          class=\"kf-multi-select__option\"\n          role=\"option\"\n          tabindex=\"0\"\n          [attr.aria-selected]=\"allSelected()\"\n          (click)=\"toggleAll()\"\n          (keydown.enter)=\"toggleAll()\"\n          (keydown.space)=\"$event.preventDefault(); toggleAll()\"\n        >\n          <span\n            class=\"kf-multi-select__checkbox kf-checkbox-box\"\n            [class.kf-multi-select__checkbox--checked]=\"allSelected()\"\n            [class.kf-multi-select__checkbox--indeterminate]=\"isPartiallySelected()\"\n          ></span>\n          <span class=\"kf-multi-select__option-label\">Todas</span>\n        </li>\n      }\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-multi-select__option\"\n          [class.kf-multi-select__option--selected]=\"isSelected(option.value)\"\n          [class.kf-multi-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"0\"\n          [attr.aria-selected]=\"isSelected(option.value)\"\n          (click)=\"toggleOption(option.value)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown.enter)=\"toggleOption(option.value)\"\n          (keydown.space)=\"$event.preventDefault(); toggleOption(option.value)\"\n          (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n          (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        >\n          <span\n            class=\"kf-multi-select__checkbox kf-checkbox-box\"\n            [class.kf-multi-select__checkbox--checked]=\"isSelected(option.value)\"\n          ></span>\n          <span class=\"kf-multi-select__option-label\">{{ option.label }}</span>\n        </li>\n      } @empty {\n        @if (options().length > 0) {\n          <li class=\"kf-multi-select__empty\">Sin resultados</li>\n        } @else {\n          <li class=\"kf-multi-select__empty\">Sin opciones disponibles</li>\n        }\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-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-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;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-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-flex;flex-direction:column;gap:var(--kf-space-xs);font:inherit;width:var(--kf-select-width-md)}:host(.kf-multi-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-multi-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-multi-select--width-full){width:100%}.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__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}.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:var(--kf-checkbox-mark-width);height:var(--kf-checkbox-mark-height);border:var(--kf-checkbox-mark-border);border-width:var(--kf-checkbox-mark-border-width);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:var(--kf-checkbox-dash-width);height:var(--kf-checkbox-dash-height);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,
@@ -4835,10 +5772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                         '[class.kf-multi-select--width-lg]': "width() === 'lg'",
                         '[class.kf-multi-select--width-full]': "width() === 'full'",
                     }, template: "@if (label()) {\n  <kf-field-label [for]=\"triggerId\">{{ label() }}</kf-field-label>\n}\n<button\n  #trigger\n  type=\"button\"\n  [id]=\"triggerId\"\n  class=\"kf-multi-select__trigger\"\n  [disabled]=\"disabled()\"\n  [attr.aria-haspopup]=\"'listbox'\"\n  [attr.aria-expanded]=\"isOpen()\"\n  [attr.aria-controls]=\"isOpen() ? listboxId : null\"\n  (click)=\"toggle()\"\n>\n  <span\n    class=\"kf-multi-select__value\"\n    [class.kf-multi-select__value--placeholder]=\"selectedCount() === 0\"\n  >\n    {{ summaryText() }}\n  </span>\n  @if (selectedCount() > 0) {\n    <span class=\"kf-multi-select__count\">{{ selectedCount() }}</span>\n  }\n  <span\n    class=\"kf-multi-select__caret kf-caret\"\n    [class.kf-multi-select__caret--open]=\"isOpen()\"\n    [class.kf-caret--open]=\"isOpen()\"\n    aria-hidden=\"true\"\n  ></span>\n</button>\n<ng-template #panelTemplate>\n  <div class=\"kf-multi-select__panel\">\n    @if (showSearch()) {\n      <input\n        #searchInput\n        type=\"text\"\n        class=\"kf-multi-select__search\"\n        placeholder=\"Buscar\u2026\"\n        [value]=\"searchQuery()\"\n        (input)=\"onSearchInput($event)\"\n        (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n        (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        (keydown.enter)=\"$event.preventDefault(); toggleActive()\"\n      />\n    }\n    <ul\n      class=\"kf-multi-select__list\"\n      [id]=\"listboxId\"\n      role=\"listbox\"\n      aria-multiselectable=\"true\"\n      [attr.aria-labelledby]=\"triggerId\"\n    >\n      @if (options().length > 0) {\n        <li\n          class=\"kf-multi-select__option\"\n          role=\"option\"\n          tabindex=\"0\"\n          [attr.aria-selected]=\"allSelected()\"\n          (click)=\"toggleAll()\"\n          (keydown.enter)=\"toggleAll()\"\n          (keydown.space)=\"$event.preventDefault(); toggleAll()\"\n        >\n          <span\n            class=\"kf-multi-select__checkbox kf-checkbox-box\"\n            [class.kf-multi-select__checkbox--checked]=\"allSelected()\"\n            [class.kf-multi-select__checkbox--indeterminate]=\"isPartiallySelected()\"\n          ></span>\n          <span class=\"kf-multi-select__option-label\">Todas</span>\n        </li>\n      }\n      @for (option of filteredOptions(); track option.value; let i = $index) {\n        <li\n          class=\"kf-multi-select__option\"\n          [class.kf-multi-select__option--selected]=\"isSelected(option.value)\"\n          [class.kf-multi-select__option--active]=\"i === activeIndex()\"\n          role=\"option\"\n          tabindex=\"0\"\n          [attr.aria-selected]=\"isSelected(option.value)\"\n          (click)=\"toggleOption(option.value)\"\n          (mouseenter)=\"activeIndex.set(i)\"\n          (keydown.enter)=\"toggleOption(option.value)\"\n          (keydown.space)=\"$event.preventDefault(); toggleOption(option.value)\"\n          (keydown.arrowdown)=\"$event.preventDefault(); moveActive(1)\"\n          (keydown.arrowup)=\"$event.preventDefault(); moveActive(-1)\"\n        >\n          <span\n            class=\"kf-multi-select__checkbox kf-checkbox-box\"\n            [class.kf-multi-select__checkbox--checked]=\"isSelected(option.value)\"\n          ></span>\n          <span class=\"kf-multi-select__option-label\">{{ option.label }}</span>\n        </li>\n      } @empty {\n        @if (options().length > 0) {\n          <li class=\"kf-multi-select__empty\">Sin resultados</li>\n        } @else {\n          <li class=\"kf-multi-select__empty\">Sin opciones disponibles</li>\n        }\n      }\n    </ul>\n  </div>\n</ng-template>\n", styles: [".kf-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-caret--open{transform:rotate(-135deg);margin-top:4px}.kf-checkbox-box{display:inline-flex;align-items:center;justify-content:center;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-checkbox-box--checked{background:var(--kf-color-primary);border-color:var(--kf-color-primary)}:host{display:inline-flex;flex-direction:column;gap:var(--kf-space-xs);font:inherit;width:var(--kf-select-width-md)}:host(.kf-multi-select--width-sm){width:var(--kf-select-width-sm)}:host(.kf-multi-select--width-lg){width:var(--kf-select-width-lg)}:host(.kf-multi-select--width-full){width:100%}.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__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}.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:var(--kf-checkbox-mark-width);height:var(--kf-checkbox-mark-height);border:var(--kf-checkbox-mark-border);border-width:var(--kf-checkbox-mark-border-width);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:var(--kf-checkbox-dash-width);height:var(--kf-checkbox-dash-height);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 }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", 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']
-            }] } });
+        }], 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 }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", 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 }] }] } });
 
 const DEFAULT_FIELD_WIDTH = '240px';
 /**
@@ -4903,7 +5837,7 @@ class Filter {
         this.fieldChange.emit({ key, value });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Filter, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Filter, isStandalone: true, selector: "kf-filter", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<ng-template #fieldsTpl let-stacked=\"stacked\">\n  @for (field of fields(); track field.key) {\n    @switch (field.type) {\n      @case ('select') {\n        <kf-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"optionsFor(field.key)\"\n          [value]=\"singleValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valueChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('multi-select') {\n        <kf-multi-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"multiOptionsFor(field.key)\"\n          [values]=\"multiValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valuesChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('search') {\n        <kf-input\n          [label]=\"field.label ?? ''\"\n          [icon]=\"field.icon ?? 'search'\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          [ngModel]=\"singleValueFor(field.key)\"\n          (ngModelChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n    }\n    @if (!stacked && field.showDivider) {\n      <kf-divider orientation=\"vertical\" />\n    }\n  }\n</ng-template>\n\n<div class=\"kf-filter kf-filter--row\">\n  <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: false }\" />\n</div>\n\n<kf-collapsible class=\"kf-filter__collapsible\" [title]=\"mobileTitle()\">\n  <div class=\"kf-filter kf-filter--stack\">\n    <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: true }\" />\n  </div>\n</kf-collapsible>\n", styles: ["@charset \"UTF-8\";:host{display:block}.kf-filter--row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--kf-space-md)}.kf-filter--stack{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-filter__collapsible{display:none}@media(max-width:768px){.kf-filter--row{display:none}.kf-filter__collapsible{display:block}}\n"], dependencies: [{ kind: "component", type: Collapsible, selector: "kf-collapsible", inputs: ["title", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Input, selector: "kf-input", inputs: ["label", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "autocomplete", "name", "inputmode", "toggleable", "ariaLabel", "clearable", "clearLabel"], outputs: ["cleared"] }, { kind: "component", type: MultiSelect, selector: "kf-multi-select", inputs: ["label", "options", "values", "placeholder", "disabled", "width", "searchable", "searchThreshold"], outputs: ["valuesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Filter, isStandalone: true, selector: "kf-filter", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fieldChange: "fieldChange" }, ngImport: i0, template: "<ng-template #fieldsTpl let-stacked=\"stacked\">\n  @for (field of fields(); track field.key) {\n    @switch (field.type) {\n      @case ('select') {\n        <kf-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"optionsFor(field.key)\"\n          [value]=\"singleValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valueChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('multi-select') {\n        <kf-multi-select\n          [label]=\"field.label ?? ''\"\n          [options]=\"multiOptionsFor(field.key)\"\n          [values]=\"multiValueFor(field.key)\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          (valuesChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n      @case ('search') {\n        <kf-input\n          [label]=\"field.label ?? ''\"\n          [icon]=\"field.icon ?? 'search'\"\n          [placeholder]=\"field.placeholder ?? ''\"\n          [style.width]=\"stacked ? '100%' : fieldWidth(field)\"\n          [ngModel]=\"singleValueFor(field.key)\"\n          (ngModelChange)=\"onFieldChange(field.key, $event)\"\n        />\n      }\n    }\n    @if (!stacked && field.showDivider) {\n      <kf-divider orientation=\"vertical\" />\n    }\n  }\n</ng-template>\n\n<div class=\"kf-filter kf-filter--row\">\n  <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: false }\" />\n</div>\n\n<kf-collapsible class=\"kf-filter__collapsible\" [title]=\"mobileTitle()\">\n  <div class=\"kf-filter kf-filter--stack\">\n    <ng-container [ngTemplateOutlet]=\"fieldsTpl\" [ngTemplateOutletContext]=\"{ stacked: true }\" />\n  </div>\n</kf-collapsible>\n", styles: ["@charset \"UTF-8\";:host{display:block}.kf-filter--row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--kf-space-md)}.kf-filter--stack{display:flex;flex-direction:column;gap:var(--kf-space-md)}.kf-filter__collapsible{display:none}@media(max-width:768px){.kf-filter--row{display:none}.kf-filter__collapsible{display:block}}\n"], dependencies: [{ kind: "component", type: Collapsible, selector: "kf-collapsible", inputs: ["title", "expanded"], outputs: ["expandedChange"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Input, selector: "kf-input", inputs: ["label", "required", "icon", "suffix", "hint", "invalid", "errorMessage", "disabled", "readonly", "type", "placeholder", "autocomplete", "name", "inputmode", "min", "max", "step", "maxlength", "toggleable", "ariaLabel", "clearable", "clearLabel"], outputs: ["cleared"] }, { kind: "component", type: MultiSelect, selector: "kf-multi-select", inputs: ["label", "options", "values", "placeholder", "disabled", "width", "searchable", "searchThreshold"], outputs: ["valuesChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Select, selector: "kf-select", inputs: ["label", "options", "value", "placeholder", "disabled", "invalid", "errorMessage", "variant", "width", "searchable", "searchThreshold", "ariaLabel", "icon", "panelTitle", "panelWidth"], outputs: ["valueChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Filter, decorators: [{
             type: Component,
@@ -5514,6 +6448,14 @@ function cancelFrame(handle) {
  *   <kf-metric-card label="Saldo Pendiente" value="$45,000">
  *     <kf-button actions variant="primary" size="sm">Pagar Ahora</kf-button>
  *   </kf-metric-card>
+ *
+ * `loading` (default `false`): dibuja el esqueleto de la card — etiqueta,
+ * ícono, valor y `foot` como bloques del alto real de cada línea — dentro del
+ * mismo `kf-card`, y reserva (sin mostrar) el espacio de las acciones, así que
+ * al llegar los datos no hay salto de layout. Pasa los mismos inputs que
+ * usarás cargada. Marca el host con `aria-busy="true"`.
+ *
+ *   <kf-metric-card label="Tickets abiertos" value="11" foot="+2 hoy" [loading]="isLoading()" />
  */
 class MetricCard {
     label = input.required(/* @ts-ignore */
@@ -5533,93 +6475,261 @@ class MetricCard {
     /** Badge de esquina opcional, pegado al valor (ej. "+2%"). */
     badge = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
+    /** Dibuja el esqueleto en lugar del contenido, conservando las dimensiones. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MetricCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MetricCard, isStandalone: true, selector: "kf-metric-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, foot: { classPropertyName: "foot", publicName: "foot", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<kf-card>\n  <div class=\"kf-metric-card__head\">\n    <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n    @if (icon(); as iconName) {\n      <span class=\"kf-metric-card__icon\">\n        <kf-icon [name]=\"iconName\" size=\"sm\" />\n      </span>\n    }\n  </div>\n  <div class=\"kf-metric-card__value-row\">\n    <div class=\"kf-metric-card__value\" [style.color]=\"valueColor()\">\n      {{ value() }}\n      @if (unit()) {\n        <span class=\"kf-metric-card__unit\">{{ unit() }}</span>\n      }\n    </div>\n    @if (badge()) {\n      <span class=\"kf-metric-card__badge\">\n        <kf-text as=\"span\" variant=\"overline-strong\" tone=\"ok\">{{ badge() }}</kf-text>\n      </span>\n    }\n  </div>\n  @if (foot()) {\n    <div class=\"kf-metric-card__foot\">{{ foot() }}</div>\n  }\n  <div class=\"kf-metric-card__actions\"><ng-content select=\"[actions]\" /></div>\n</kf-card>\n", styles: [":host{display:block}.kf-metric-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--kf-space-xs)}.kf-metric-card__icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-metric-card__value-row{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-metric-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:1.6rem;line-height:1.1;color:var(--kf-color-ink)}.kf-metric-card__unit{font-size:.85rem;font-weight:500;color:var(--kf-color-text-muted);margin-left:var(--kf-space-xs)}.kf-metric-card__badge{padding:2px var(--kf-space-xs);border-radius:var(--kf-radius-pill);background:var(--kf-color-success-soft)}.kf-metric-card__foot{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-metric-card__actions:empty{display:none}.kf-metric-card__actions{display:flex;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm);margin-top:auto}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush", "gap"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MetricCard, isStandalone: true, selector: "kf-metric-card", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, foot: { classPropertyName: "foot", publicName: "foot", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.aria-busy": "loading() ? 'true' : null" } }, ngImport: i0, template: "<kf-card>\n  <div class=\"kf-metric-card__head\">\n    @if (loading()) {\n      <span\n        class=\"kf-metric-card__label-bone kf-bone\"\n        style=\"--kf-bone-width: 45%\"\n        aria-hidden=\"true\"\n      >\n        <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n      </span>\n      @if (icon()) {\n        <span class=\"kf-metric-card__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n      }\n    } @else {\n      <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n      @if (icon(); as iconName) {\n        <span class=\"kf-metric-card__icon\">\n          <kf-icon [name]=\"iconName\" size=\"sm\" />\n        </span>\n      }\n    }\n  </div>\n  <div class=\"kf-metric-card__value-row\">\n    @if (loading()) {\n      <div class=\"kf-metric-card__value kf-bone\" style=\"--kf-bone-width: 50%\" aria-hidden=\"true\">\n        {{ value() }}\n      </div>\n    } @else {\n      <div class=\"kf-metric-card__value\" [style.color]=\"valueColor()\">\n        {{ value() }}\n        @if (unit()) {\n          <span class=\"kf-metric-card__unit\">{{ unit() }}</span>\n        }\n      </div>\n      @if (badge()) {\n        <span class=\"kf-metric-card__badge\">\n          <kf-text as=\"span\" variant=\"overline-strong\" tone=\"ok\">{{ badge() }}</kf-text>\n        </span>\n      }\n    }\n  </div>\n  @if (foot()) {\n    @if (loading()) {\n      <div class=\"kf-metric-card__foot kf-bone\" style=\"--kf-bone-width: 60%\" aria-hidden=\"true\">\n        {{ foot() }}\n      </div>\n    } @else {\n      <div class=\"kf-metric-card__foot\">{{ foot() }}</div>\n    }\n  }\n  <div class=\"kf-metric-card__actions\" [class.kf-metric-card__actions--loading]=\"loading()\">\n    <ng-content select=\"[actions]\" />\n  </div>\n</kf-card>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-metric-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--kf-space-xs)}.kf-metric-card__icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-metric-card__value-row{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-metric-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:1.6rem;line-height:1.1;color:var(--kf-color-ink)}.kf-metric-card__unit{font-size:.85rem;font-weight:500;color:var(--kf-color-text-muted);margin-left:var(--kf-space-xs)}.kf-metric-card__badge{padding:2px var(--kf-space-xs);border-radius:var(--kf-radius-pill);background:var(--kf-color-success-soft)}.kf-metric-card__foot{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-metric-card__actions:empty{display:none}.kf-metric-card__actions{display:flex;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm);margin-top:auto}.kf-metric-card__actions--loading{visibility:hidden}\n"], dependencies: [{ kind: "component", type: Card, selector: "kf-card", inputs: ["flush", "gap", "loading"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "component", type: Text, selector: "kf-text", inputs: ["as", "variant", "tone"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MetricCard, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-metric-card', imports: [Card, Icon, Text], template: "<kf-card>\n  <div class=\"kf-metric-card__head\">\n    <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n    @if (icon(); as iconName) {\n      <span class=\"kf-metric-card__icon\">\n        <kf-icon [name]=\"iconName\" size=\"sm\" />\n      </span>\n    }\n  </div>\n  <div class=\"kf-metric-card__value-row\">\n    <div class=\"kf-metric-card__value\" [style.color]=\"valueColor()\">\n      {{ value() }}\n      @if (unit()) {\n        <span class=\"kf-metric-card__unit\">{{ unit() }}</span>\n      }\n    </div>\n    @if (badge()) {\n      <span class=\"kf-metric-card__badge\">\n        <kf-text as=\"span\" variant=\"overline-strong\" tone=\"ok\">{{ badge() }}</kf-text>\n      </span>\n    }\n  </div>\n  @if (foot()) {\n    <div class=\"kf-metric-card__foot\">{{ foot() }}</div>\n  }\n  <div class=\"kf-metric-card__actions\"><ng-content select=\"[actions]\" /></div>\n</kf-card>\n", styles: [":host{display:block}.kf-metric-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--kf-space-xs)}.kf-metric-card__icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-metric-card__value-row{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-metric-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:1.6rem;line-height:1.1;color:var(--kf-color-ink)}.kf-metric-card__unit{font-size:.85rem;font-weight:500;color:var(--kf-color-text-muted);margin-left:var(--kf-space-xs)}.kf-metric-card__badge{padding:2px var(--kf-space-xs);border-radius:var(--kf-radius-pill);background:var(--kf-color-success-soft)}.kf-metric-card__foot{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-metric-card__actions:empty{display:none}.kf-metric-card__actions{display:flex;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm);margin-top:auto}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], foot: [{ type: i0.Input, args: [{ isSignal: true, alias: "foot", required: false }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }] } });
-
-/**
- * `<dialog>` abiertos vía `showModal()` actualmente activos, en orden de
- * apertura. Con diálogos anidados el navegador apila el top layer: el más
- * reciente queda arriba e inertiza a los anteriores (incluidos otros
- * `<dialog>` ya abiertos), así que el ÚLTIMO de esta lista es el único
- * candidato válido para recibir el overlay container — nunca "cualquier
- * `dialog[open]` de la página", que rompería con dos `kf-modal` anidados o
- * con dos independientes donde solo uno está abierto.
- */
-const openModalDialogs = [];
-/** Llamado por `Modal` cuando su `<dialog>` pasa a estar abierto. */
-function registerOpenModalDialog(dialog) {
-    if (!openModalDialogs.includes(dialog)) {
-        openModalDialogs.push(dialog);
-    }
-}
-/** Llamado por `Modal` cuando su `<dialog>` se cierra o el componente se destruye. */
-function unregisterOpenModalDialog(dialog) {
-    const index = openModalDialogs.indexOf(dialog);
-    if (index !== -1) {
-        openModalDialogs.splice(index, 1);
-    }
-}
-function topmostOpenModalDialog() {
-    return openModalDialogs.at(-1);
-}
+            args: [{ selector: 'kf-metric-card', imports: [Card, Icon, Text], host: {
+                        '[attr.aria-busy]': "loading() ? 'true' : null",
+                    }, template: "<kf-card>\n  <div class=\"kf-metric-card__head\">\n    @if (loading()) {\n      <span\n        class=\"kf-metric-card__label-bone kf-bone\"\n        style=\"--kf-bone-width: 45%\"\n        aria-hidden=\"true\"\n      >\n        <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n      </span>\n      @if (icon()) {\n        <span class=\"kf-metric-card__icon kf-bone-fill\" aria-hidden=\"true\"></span>\n      }\n    } @else {\n      <kf-text as=\"span\" variant=\"overline-strong\">{{ label() }}</kf-text>\n      @if (icon(); as iconName) {\n        <span class=\"kf-metric-card__icon\">\n          <kf-icon [name]=\"iconName\" size=\"sm\" />\n        </span>\n      }\n    }\n  </div>\n  <div class=\"kf-metric-card__value-row\">\n    @if (loading()) {\n      <div class=\"kf-metric-card__value kf-bone\" style=\"--kf-bone-width: 50%\" aria-hidden=\"true\">\n        {{ value() }}\n      </div>\n    } @else {\n      <div class=\"kf-metric-card__value\" [style.color]=\"valueColor()\">\n        {{ value() }}\n        @if (unit()) {\n          <span class=\"kf-metric-card__unit\">{{ unit() }}</span>\n        }\n      </div>\n      @if (badge()) {\n        <span class=\"kf-metric-card__badge\">\n          <kf-text as=\"span\" variant=\"overline-strong\" tone=\"ok\">{{ badge() }}</kf-text>\n        </span>\n      }\n    }\n  </div>\n  @if (foot()) {\n    @if (loading()) {\n      <div class=\"kf-metric-card__foot kf-bone\" style=\"--kf-bone-width: 60%\" aria-hidden=\"true\">\n        {{ foot() }}\n      </div>\n    } @else {\n      <div class=\"kf-metric-card__foot\">{{ foot() }}</div>\n    }\n  }\n  <div class=\"kf-metric-card__actions\" [class.kf-metric-card__actions--loading]=\"loading()\">\n    <ng-content select=\"[actions]\" />\n  </div>\n</kf-card>\n", styles: [".kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{background:linear-gradient(90deg,var(--kf-color-border) 25%,var(--kf-color-surface) 37%,var(--kf-color-border) 63%);background-size:400% 100%;animation:kf-bone-shimmer 1.4s ease infinite}.kf-bone{display:block;box-sizing:border-box;width:var(--kf-bone-width, 60%);max-width:100%;overflow:hidden;white-space:nowrap;border-radius:var(--kf-radius-xs);-webkit-user-select:none;user-select:none;pointer-events:none}.kf-bone.kf-bone{color:transparent}.kf-bone>*{visibility:hidden}@keyframes kf-bone-shimmer{0%{background-position:100% 0}to{background-position:0 0}}@media(prefers-reduced-motion:reduce){.kf-bone.kf-bone,.kf-bone-fill.kf-bone-fill,.kf-bone-overlay.kf-bone-overlay:after{animation:none;background:var(--kf-color-border)}}:host{display:block}.kf-metric-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--kf-space-xs)}.kf-metric-card__icon{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;flex:none;border-radius:var(--kf-radius-sm);background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-metric-card__value-row{display:flex;align-items:center;gap:var(--kf-space-xs)}.kf-metric-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:1.6rem;line-height:1.1;color:var(--kf-color-ink)}.kf-metric-card__unit{font-size:.85rem;font-weight:500;color:var(--kf-color-text-muted);margin-left:var(--kf-space-xs)}.kf-metric-card__badge{padding:2px var(--kf-space-xs);border-radius:var(--kf-radius-pill);background:var(--kf-color-success-soft)}.kf-metric-card__foot{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-metric-card__actions:empty{display:none}.kf-metric-card__actions{display:flex;gap:var(--kf-space-sm);margin-top:var(--kf-space-sm);margin-top:auto}.kf-metric-card__actions--loading{visibility:hidden}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], foot: [{ type: i0.Input, args: [{ isSignal: true, alias: "foot", required: false }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
+
+const PROGRESS_STATUS = {
+    DONE: 'done',
+    CURRENT: 'current',
+    PENDING: 'pending',
+};
 /**
- * Instancias de `OverlayContainer` ya parchadas — evita parchar dos veces
- * el mismo objeto (varios `kf-modal` en el árbol llaman a esta función) y,
- * a la vez, no interfiere con instancias nuevas que arma un `TestBed` fresco
- * en cada spec (root providers se recrean por test).
+ * Texto por defecto (español) de cada estado: el estado nunca se comunica solo
+ * con color. Los componentes que lo muestran aceptan sus propios textos.
  */
-const patchedContainers = new WeakSet();
+const PROGRESS_STATUS_LABEL = {
+    [PROGRESS_STATUS.DONE]: 'Completado',
+    [PROGRESS_STATUS.CURRENT]: 'En curso',
+    [PROGRESS_STATUS.PENDING]: 'Pendiente',
+};
+
 /**
- * `showModal()` promueve el `<dialog>` al top layer del navegador y vuelve
- * `inert` todo lo que quede fuera de su subárbol — pero Angular CDK
- * (`Overlay`/`OverlayContainer`, usado por `kf-select`, `kf-multi-select`,
- * `kf-dropdown`, `kf-tooltip` y el selector de tamaño de `kf-pagination`)
- * siempre appendea `.cdk-overlay-container` como hijo de `<body>`, que
- * queda fuera del `<dialog>` y por lo tanto inerte: el overlay se ve pero
- * no recibe clicks.
+ * Marca pequeña de estado para leyendas y listas de hitos: círculo relleno
+ * con check (completado), anillo con punto (en curso) o anillo vacío
+ * (pendiente). La forma comunica el estado y el color solo lo refuerza.
+ * `exception` la pinta con borde discontinuo y tono de aviso.
  *
- * No existe una forma de reemplazar, sin que el consumidor configure nada,
- * QUÉ IMPLEMENTACIÓN resuelve Angular DI para el token `OverlayContainer`:
- * es `providedIn: 'root'`, y la instancia se crea una sola vez contra el
- * inyector RAÍZ de la app la primera vez que algo la necesita — incluida
- * la propia `Overlay`, que la inyecta puertas adentro de SU construcción,
- * no en el inyector del componente que gatilló esa construcción. Un
- * `providers` a nivel de componente (`kf-modal`, o incluso `kf-select`)
- * nunca llega a interceptar esa creación; solo un `providers` explícito en
- * el bootstrap de cada app lo haría, y eso es justo la configuración manual
- * que se quiere evitar.
+ * Es decorativa por defecto (`aria-hidden`): el texto del estado va en el
+ * contexto que la usa. Para usarla suelta (ej. una leyenda sin texto al lado),
+ * `label` la expone como imagen con ese nombre.
  *
- * Por eso el fix no reemplaza la clase vía DI: parcha, una sola vez, el
- * MISMO objeto singleton que ya usa toda la app (la instancia real que
- * `Modal` recibe con un `inject(OverlayContainer)` normal — automático
- * apenas se usa `kf-modal`, sin tocar ningún `providers`). `getContainerElement`
- * sigue delegando en el original para crear/cachear el div la primera vez;
- * lo único que se agrega es reubicarlo, en cada llamada, dentro del
- * `<dialog>` abierto más reciente (o de vuelta en `<body>` si no hay
- * ninguno) antes de devolverlo — mover el div se lleva puestos a sus hijos,
- * así que overlays ya adjuntos antes de abrir el modal quedan igual de
- * bien ubicados que los que se abren después.
+ *   <kf-status-mark status="done" small />
+ *   <kf-status-mark status="current" label="En curso" />
+ *
+ * Tamaño: variables CSS `--kf-status-mark-size` y `--kf-status-mark-size-sm`.
+ */
+class StatusMark {
+    status = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    /** Versión reducida, para listas de hitos. */
+    small = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "small" }] : /* istanbul ignore next */ []));
+    /** Hito de excepción: borde discontinuo y tono de aviso. */
+    exception = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "exception" }] : /* istanbul ignore next */ []));
+    /** Nombre accesible; sin él la marca es decorativa. */
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatusMark, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: StatusMark, isStandalone: true, selector: "kf-status-mark", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, small: { classPropertyName: "small", publicName: "small", isSignal: true, isRequired: false, transformFunction: null }, exception: { classPropertyName: "exception", publicName: "exception", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kf-status-mark-host--sm": "small()" } }, ngImport: i0, template: `<span
+    class="kf-status-mark"
+    [class]="'kf-status-mark--' + status()"
+    [class.kf-status-mark--exception]="exception()"
+    [attr.role]="label() ? 'img' : null"
+    [attr.aria-label]="label() || null"
+    [attr.aria-hidden]="label() ? null : 'true'"
+  ></span>`, isInline: true, styles: [":host{display:inline-flex;flex:none;--_size: var(--kf-status-mark-size, 1.375rem)}:host(.kf-status-mark-host--sm){--_size: var(--kf-status-mark-size-sm, 1rem)}.kf-status-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--_size);height:var(--_size);border-radius:50%;box-sizing:border-box;background:var(--kf-color-white)}.kf-status-mark--done{background:var(--kf-color-success-strong)}.kf-status-mark--done:after{content:\"\";width:calc(var(--_size) * .23);height:calc(var(--_size) * .41);border:solid var(--kf-color-white);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-5%,-5%)}.kf-status-mark--current{border:2px solid var(--kf-color-primary);box-shadow:0 0 0 calc(var(--_size) * .14) var(--kf-color-primary-soft)}.kf-status-mark--current:after{content:\"\";width:calc(var(--_size) * .36);height:calc(var(--_size) * .36);border-radius:50%;background:var(--kf-color-primary)}.kf-status-mark--pending{border:2px solid var(--kf-color-text-muted)}.kf-status-mark--exception{border-style:dashed;border-color:var(--kf-color-warning-strong)}.kf-status-mark--exception.kf-status-mark--done{background:var(--kf-color-warning-strong)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatusMark, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-status-mark', template: `<span
+    class="kf-status-mark"
+    [class]="'kf-status-mark--' + status()"
+    [class.kf-status-mark--exception]="exception()"
+    [attr.role]="label() ? 'img' : null"
+    [attr.aria-label]="label() || null"
+    [attr.aria-hidden]="label() ? null : 'true'"
+  ></span>`, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.kf-status-mark-host--sm]': 'small()' }, styles: [":host{display:inline-flex;flex:none;--_size: var(--kf-status-mark-size, 1.375rem)}:host(.kf-status-mark-host--sm){--_size: var(--kf-status-mark-size-sm, 1rem)}.kf-status-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--_size);height:var(--_size);border-radius:50%;box-sizing:border-box;background:var(--kf-color-white)}.kf-status-mark--done{background:var(--kf-color-success-strong)}.kf-status-mark--done:after{content:\"\";width:calc(var(--_size) * .23);height:calc(var(--_size) * .41);border:solid var(--kf-color-white);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-5%,-5%)}.kf-status-mark--current{border:2px solid var(--kf-color-primary);box-shadow:0 0 0 calc(var(--_size) * .14) var(--kf-color-primary-soft)}.kf-status-mark--current:after{content:\"\";width:calc(var(--_size) * .36);height:calc(var(--_size) * .36);border-radius:50%;background:var(--kf-color-primary)}.kf-status-mark--pending{border:2px solid var(--kf-color-text-muted)}.kf-status-mark--exception{border-style:dashed;border-color:var(--kf-color-warning-strong)}.kf-status-mark--exception.kf-status-mark--done{background:var(--kf-color-warning-strong)}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], small: [{ type: i0.Input, args: [{ isSignal: true, alias: "small", required: false }] }], exception: [{ type: i0.Input, args: [{ isSignal: true, alias: "exception", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Nodo circular de una etapa: ícono de la etapa más una insignia de estado.
+ * La forma comunica el estado (relleno con check, anillo con punto, anillo
+ * vacío) y el color solo lo refuerza.
+ *
+ * Es decorativo por defecto (`aria-hidden`): el texto del estado debe estar en
+ * el contexto que lo usa. Para usarlo suelto, `label` lo expone como imagen
+ * con ese nombre.
+ *
+ *   <kf-status-node status="current" icon="truck" />
+ *   <kf-status-node status="done" icon="check" size="sm" label="Entrega completada" />
+ *
+ * Tamaño: variables CSS `--kf-status-node-size` y `--kf-status-node-size-sm`.
  */
-function installModalAwareOverlayContainer(container) {
-    if (patchedContainers.has(container)) {
-        return;
+class StatusNode {
+    status = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    icon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    size = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Nombre accesible; sin él el nodo es decorativo. */
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatusNode, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: StatusNode, isStandalone: true, selector: "kf-status-node", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.kf-status-node-host--sm": "size() === 'sm'" } }, ngImport: i0, template: `
+    <span
+      class="kf-status-node"
+      [class]="'kf-status-node--' + status()"
+      [attr.role]="label() ? 'img' : null"
+      [attr.aria-label]="label() || null"
+      [attr.aria-hidden]="label() ? null : 'true'"
+    >
+      <kf-icon [name]="icon()" size="sm" />
+      <span class="kf-status-node__badge"></span>
+    </span>
+  `, isInline: true, styles: [":host{display:inline-flex;flex:none;--_size: var(--kf-status-node-size, 2.125rem);--_halo: calc(var(--_size) * .12);--_badge: calc(var(--_size) * .44)}:host(.kf-status-node-host--sm){--_size: var(--kf-status-node-size-sm, 1.75rem);--_halo: calc(var(--_size) * .11);--_badge: calc(var(--_size) * .46)}.kf-status-node{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--_size);height:var(--_size);box-sizing:border-box;border-radius:50%;background:var(--kf-color-white);border:2px solid var(--kf-color-text-muted);color:var(--kf-color-text-muted)}.kf-status-node--done{background:var(--kf-color-success-strong);border-color:var(--kf-color-success-strong);color:var(--kf-color-white)}.kf-status-node--current{border-color:var(--kf-color-primary);color:var(--kf-color-primary);box-shadow:0 0 0 var(--_halo) var(--kf-color-primary-soft)}.kf-status-node__badge{position:absolute;right:calc(var(--_badge) * -.33);bottom:calc(var(--_badge) * -.33);display:none;align-items:center;justify-content:center;width:var(--_badge);height:var(--_badge);border:2px solid var(--kf-color-white);border-radius:50%;box-sizing:border-box}.kf-status-node--done .kf-status-node__badge{display:inline-flex;background:var(--kf-color-success-strong)}.kf-status-node--done .kf-status-node__badge:after{content:\"\";width:calc(var(--_badge) * .2);height:calc(var(--_badge) * .4);border:solid var(--kf-color-white);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-5%,-5%)}.kf-status-node--current .kf-status-node__badge{display:inline-flex;background:var(--kf-color-primary)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatusNode, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-status-node', imports: [Icon], template: `
+    <span
+      class="kf-status-node"
+      [class]="'kf-status-node--' + status()"
+      [attr.role]="label() ? 'img' : null"
+      [attr.aria-label]="label() || null"
+      [attr.aria-hidden]="label() ? null : 'true'"
+    >
+      <kf-icon [name]="icon()" size="sm" />
+      <span class="kf-status-node__badge"></span>
+    </span>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.kf-status-node-host--sm]': "size() === 'sm'" }, styles: [":host{display:inline-flex;flex:none;--_size: var(--kf-status-node-size, 2.125rem);--_halo: calc(var(--_size) * .12);--_badge: calc(var(--_size) * .44)}:host(.kf-status-node-host--sm){--_size: var(--kf-status-node-size-sm, 1.75rem);--_halo: calc(var(--_size) * .11);--_badge: calc(var(--_size) * .46)}.kf-status-node{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--_size);height:var(--_size);box-sizing:border-box;border-radius:50%;background:var(--kf-color-white);border:2px solid var(--kf-color-text-muted);color:var(--kf-color-text-muted)}.kf-status-node--done{background:var(--kf-color-success-strong);border-color:var(--kf-color-success-strong);color:var(--kf-color-white)}.kf-status-node--current{border-color:var(--kf-color-primary);color:var(--kf-color-primary);box-shadow:0 0 0 var(--_halo) var(--kf-color-primary-soft)}.kf-status-node__badge{position:absolute;right:calc(var(--_badge) * -.33);bottom:calc(var(--_badge) * -.33);display:none;align-items:center;justify-content:center;width:var(--_badge);height:var(--_badge);border:2px solid var(--kf-color-white);border-radius:50%;box-sizing:border-box}.kf-status-node--done .kf-status-node__badge{display:inline-flex;background:var(--kf-color-success-strong)}.kf-status-node--done .kf-status-node__badge:after{content:\"\";width:calc(var(--_badge) * .2);height:calc(var(--_badge) * .4);border:solid var(--kf-color-white);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translate(-5%,-5%)}.kf-status-node--current .kf-status-node__badge{display:inline-flex;background:var(--kf-color-primary)}\n"] }]
+        }], propDecorators: { status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+const DEFAULT_MILESTONE_TIMELINE_LABELS = {
+    heading: 'Avance por etapa',
+    expandAll: 'Expandir todo',
+    collapseAll: 'Contraer todo',
+    statusDone: PROGRESS_STATUS_LABEL[PROGRESS_STATUS.DONE],
+    statusPending: PROGRESS_STATUS_LABEL[PROGRESS_STATUS.PENDING],
+    currentMeta: (done, total) => `${PROGRESS_STATUS_LABEL[PROGRESS_STATUS.CURRENT]} · ${done} de ${total}`,
+    next: 'Siguiente',
+    exceptionsTitle: 'Observaciones · no cuentan en el avance',
+    noExceptions: 'Sin observaciones registradas.',
+    itemDone: 'completado',
+    itemPending: 'pendiente',
+};
+
+let nextInstanceId = 0;
+/**
+ * Línea de tiempo de etapas con hitos. Cada etapa es un encabezado expandible
+ * (`aria-expanded`/`aria-controls`) con un panel de hitos y, si la etapa tiene
+ * hitos de excepción, un bloque aparte que no cuenta en el avance. Una etapa
+ * sin hitos es solo informativa (no es un botón).
+ *
+ * El estado nunca se comunica solo con color: cada etapa y cada hito llevan su
+ * estado en texto (visible o solo para lectores de pantalla) y los nodos y
+ * marcas lo dibujan también con la forma. Todos los textos salen de `labels`
+ * (español por defecto) y las fechas llegan ya formateadas.
+ *
+ * El conector entre etapas se deriva del tamaño del nodo
+ * (`--kf-status-node-size`, default `2.125rem`) y de la separación del
+ * encabezado: cambiar el tamaño del nodo mueve la línea con él.
+ *
+ *   <kf-milestone-timeline
+ *     [groups]="stages()"
+ *     [(expandedIds)]="expanded"
+ *     nextItemId="stage2-docs"
+ *     ariaLabel="Avance de la entrega"
+ *     [labels]="{ heading: 'Progress', expandAll: 'Expand all' }"
+ *   />
+ */
+class MilestoneTimeline {
+    host = inject(ElementRef);
+    instanceId = `kf-milestone-timeline-${nextInstanceId++}`;
+    groups = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []));
+    /** Ids de las etapas expandidas, two-way: `[(expandedIds)]`. El padre controla el estado inicial. */
+    expandedIds = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandedIds" }] : /* istanbul ignore next */ []));
+    /** Id del hito que se destaca como el siguiente a completar. */
+    nextItemId = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextItemId" }] : /* istanbul ignore next */ []));
+    /** Textos; los que no se pasen usan el español por defecto. */
+    labels = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+    /** Nombre accesible de la lista de etapas. */
+    ariaLabel = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Nivel (2-6) del título "Avance por etapa", para respetar el esquema de títulos de la página. */
+    headingLevel = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
+    text = computed(() => ({
+        ...DEFAULT_MILESTONE_TIMELINE_LABELS,
+        ...this.labels(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    rows = computed(() => this.groups().map((group) => {
+        const main = group.items.filter((item) => !item.exception);
+        const doneCount = main.filter((item) => item.done).length;
+        const exceptions = group.items.filter((item) => item.exception);
+        return {
+            group,
+            main,
+            exceptions,
+            happened: exceptions.filter((item) => item.done),
+            expandable: group.items.length > 0,
+            meta: this.metaOf(group, doneCount, main.length),
+        };
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    expandableIds = computed(() => this.groups()
+        .filter((group) => group.items.length > 0)
+        .map((group) => group.id), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandableIds" }] : /* istanbul ignore next */ []));
+    hasExpandable = computed(() => this.expandableIds().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasExpandable" }] : /* istanbul ignore next */ []));
+    allExpanded = computed(() => this.hasExpandable() && this.expandableIds().every((id) => this.isExpanded(id)), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "allExpanded" }] : /* istanbul ignore next */ []));
+    isExpanded(groupId) {
+        return this.expandedIds().includes(groupId);
     }
-    patchedContainers.add(container);
-    const originalGetContainerElement = container.getContainerElement.bind(container);
-    container.getContainerElement = () => {
-        const element = originalGetContainerElement();
-        const targetParent = topmostOpenModalDialog() ?? element.ownerDocument.body;
-        if (element.parentElement !== targetParent) {
-            targetParent.appendChild(element);
-        }
-        return element;
-    };
+    headId(groupId) {
+        return `${this.instanceId}-head-${groupId}`;
+    }
+    panelId(groupId) {
+        return `${this.instanceId}-panel-${groupId}`;
+    }
+    itemStatus(item) {
+        return item.done ? PROGRESS_STATUS.DONE : PROGRESS_STATUS.PENDING;
+    }
+    toggle(groupId) {
+        this.expandedIds.update((ids) => ids.includes(groupId) ? ids.filter((id) => id !== groupId) : [...ids, groupId]);
+    }
+    toggleAll() {
+        this.expandedIds.set(this.allExpanded() ? [] : this.expandableIds());
+    }
+    /** Lleva el foco al encabezado de una etapa expandible; devuelve el elemento, o `null` si no existe o no es expandible. */
+    focusGroup(groupId) {
+        // Solo las etapas expandibles tienen un encabezado enfocable (un botón).
+        const head = this.host.nativeElement.querySelector(`button#${this.headId(groupId)}`);
+        head?.focus({ preventScroll: true });
+        return head;
+    }
+    metaOf(group, done, total) {
+        const text = this.text();
+        if (group.status === PROGRESS_STATUS.DONE)
+            return group.date ?? text.statusDone;
+        if (group.status === PROGRESS_STATUS.CURRENT)
+            return text.currentMeta(done, total);
+        return text.statusPending;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MilestoneTimeline, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: MilestoneTimeline, isStandalone: true, selector: "kf-milestone-timeline", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: true, transformFunction: null }, expandedIds: { classPropertyName: "expandedIds", publicName: "expandedIds", isSignal: true, isRequired: false, transformFunction: null }, nextItemId: { classPropertyName: "nextItemId", publicName: "nextItemId", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedIds: "expandedIdsChange" }, ngImport: i0, template: "<div class=\"kf-milestone-timeline\">\n  <div class=\"kf-milestone-timeline__toolbar\">\n    <p class=\"kf-milestone-timeline__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n      {{ text().heading }}\n    </p>\n    @if (hasExpandable()) {\n      <kf-button\n        class=\"kf-milestone-timeline__toggle-all\"\n        variant=\"ghost\"\n        size=\"sm\"\n        (click)=\"toggleAll()\"\n      >\n        {{ allExpanded() ? text().collapseAll : text().expandAll }}\n      </kf-button>\n    }\n  </div>\n\n  <ol class=\"kf-milestone-timeline__list\" [attr.aria-label]=\"ariaLabel() ?? null\">\n    @for (row of rows(); track row.group.id) {\n      <li\n        class=\"kf-milestone-timeline__group\"\n        [class]=\"'kf-milestone-timeline__group--' + row.group.status\"\n      >\n        @if (row.expandable) {\n          <button\n            type=\"button\"\n            class=\"kf-milestone-timeline__head\"\n            [id]=\"headId(row.group.id)\"\n            [attr.aria-expanded]=\"isExpanded(row.group.id)\"\n            [attr.aria-controls]=\"panelId(row.group.id)\"\n            (click)=\"toggle(row.group.id)\"\n          >\n            <ng-container *ngTemplateOutlet=\"headContent; context: { $implicit: row }\" />\n            <kf-icon class=\"kf-milestone-timeline__chevron\" name=\"chevron-down\" size=\"sm\" />\n          </button>\n\n          <div\n            class=\"kf-milestone-timeline__panel\"\n            role=\"group\"\n            [id]=\"panelId(row.group.id)\"\n            [attr.aria-labelledby]=\"headId(row.group.id)\"\n            [hidden]=\"!isExpanded(row.group.id)\"\n          >\n            <ul class=\"kf-milestone-timeline__items\">\n              @for (item of row.main; track item.id) {\n                <li\n                  class=\"kf-milestone-timeline__item\"\n                  [class.kf-milestone-timeline__item--done]=\"item.done\"\n                  [class.kf-milestone-timeline__item--next]=\"item.id === nextItemId()\"\n                >\n                  <kf-status-mark [status]=\"itemStatus(item)\" [small]=\"true\" />\n                  <span class=\"kf-milestone-timeline__item-body\">\n                    <span\n                      >{{ item.label\n                      }}<span class=\"kf-sr-only\"\n                        >: {{ item.done ? text().itemDone : text().itemPending }}</span\n                      ></span\n                    >\n                    @if (item.date) {\n                      <span class=\"kf-milestone-timeline__item-date\">{{ item.date }}</span>\n                    }\n                  </span>\n                  @if (item.id === nextItemId()) {\n                    <kf-badge tone=\"info\">{{ text().next }}</kf-badge>\n                  }\n                </li>\n              }\n            </ul>\n\n            @if (row.exceptions.length > 0) {\n              <div class=\"kf-milestone-timeline__exceptions\">\n                <p class=\"kf-milestone-timeline__exceptions-title\">{{ text().exceptionsTitle }}</p>\n                @if (row.happened.length > 0) {\n                  <ul class=\"kf-milestone-timeline__items\">\n                    @for (item of row.happened; track item.id) {\n                      <li class=\"kf-milestone-timeline__item kf-milestone-timeline__item--done\">\n                        <kf-status-mark status=\"done\" [small]=\"true\" [exception]=\"true\" />\n                        <span class=\"kf-milestone-timeline__item-body\">\n                          <span\n                            >{{ item.label\n                            }}<span class=\"kf-sr-only\">: {{ text().itemDone }}</span></span\n                          >\n                          @if (item.date) {\n                            <span class=\"kf-milestone-timeline__item-date\">{{ item.date }}</span>\n                          }\n                        </span>\n                      </li>\n                    }\n                  </ul>\n                } @else {\n                  <p class=\"kf-milestone-timeline__exceptions-empty\">{{ text().noExceptions }}</p>\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          <div\n            class=\"kf-milestone-timeline__head kf-milestone-timeline__head--static\"\n            [id]=\"headId(row.group.id)\"\n          >\n            <ng-container *ngTemplateOutlet=\"headContent; context: { $implicit: row }\" />\n          </div>\n        }\n      </li>\n    }\n  </ol>\n</div>\n\n<!-- Nodo + t\u00EDtulo + estado de una etapa, compartido por el encabezado bot\u00F3n y el est\u00E1tico. -->\n<ng-template #headContent let-row>\n  <kf-status-node [status]=\"row.group.status\" [icon]=\"row.group.icon\" />\n  <span class=\"kf-milestone-timeline__text\">\n    <span class=\"kf-milestone-timeline__title\">{{ row.group.label }}</span>\n    <span class=\"kf-milestone-timeline__meta\">\n      @if (row.group.status === 'done') {\n        <span class=\"kf-sr-only\">{{ text().statusDone }}. </span>\n      }\n      {{ row.meta }}\n    </span>\n  </span>\n</ng-template>\n", styles: [".kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:block;--_node: var(--kf-status-node-size, 2.125rem);--_gutter: var(--kf-space-sm);--_pad-y: var(--kf-space-sm);--_line: 2px}.kf-milestone-timeline{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-milestone-timeline__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm)}.kf-milestone-timeline__heading{margin:0;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-milestone-timeline__list{list-style:none;margin:0;padding:0}.kf-milestone-timeline__group{position:relative}.kf-milestone-timeline__group:not(:last-child):before{content:\"\";position:absolute;inset-inline-start:calc(var(--_gutter) + var(--_node) / 2 - var(--_line) / 2);top:calc(var(--_pad-y) + var(--_node));bottom:calc(var(--kf-space-xs) - var(--_pad-y));width:var(--_line);background:var(--kf-color-border-strong)}.kf-milestone-timeline__group--done:not(:last-child):before{background:var(--kf-color-success-strong)}.kf-milestone-timeline__head{position:relative;z-index:1;display:flex;align-items:flex-start;gap:var(--kf-space-md);box-sizing:border-box;width:100%;min-height:2.75rem;padding:var(--_pad-y) var(--_gutter);background:none;border:0;border-radius:var(--kf-radius-sm);text-align:left;font:inherit;color:inherit}button.kf-milestone-timeline__head{cursor:pointer}button.kf-milestone-timeline__head:hover{background:var(--kf-color-surface)}button.kf-milestone-timeline__head:focus-visible{outline:2px solid var(--kf-color-primary);outline-offset:2px}.kf-milestone-timeline__text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:var(--_node)}.kf-milestone-timeline__title{font-weight:700;font-size:var(--kf-font-size-body);color:var(--kf-color-ink)}.kf-milestone-timeline__meta{font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text)}.kf-milestone-timeline__group--current .kf-milestone-timeline__meta{color:var(--kf-color-primary-active);font-weight:600}.kf-milestone-timeline__chevron{flex:none;align-self:center;color:var(--kf-color-text);transition:transform .15s ease}.kf-milestone-timeline__head[aria-expanded=true] .kf-milestone-timeline__chevron{transform:rotate(180deg)}.kf-milestone-timeline__panel{padding-block:var(--kf-space-sm) var(--kf-space-md);padding-inline:calc(var(--_gutter) + var(--_node) + var(--kf-space-md)) var(--_gutter)}.kf-milestone-timeline__panel[hidden]{display:none}.kf-milestone-timeline__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-milestone-timeline__item{display:flex;align-items:flex-start;gap:var(--kf-space-sm);font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text)}.kf-milestone-timeline__item kf-status-mark{margin-top:2px}.kf-milestone-timeline__item--done{color:var(--kf-color-ink)}.kf-milestone-timeline__item--next{color:var(--kf-color-ink);font-weight:700}.kf-milestone-timeline__item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.kf-milestone-timeline__item-date{font-size:var(--kf-font-size-caption);font-weight:400;color:var(--kf-color-text)}.kf-milestone-timeline__exceptions{margin-top:var(--kf-space-md);padding-top:var(--kf-space-sm);border-top:1px dashed var(--kf-color-border-strong)}.kf-milestone-timeline__exceptions-title{margin:0 0 var(--kf-space-sm);font-size:var(--kf-font-size-caption);font-weight:700;color:var(--kf-color-text)}.kf-milestone-timeline__exceptions-empty{margin:0;font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text)}@media(max-width:640px),(pointer:coarse){.kf-milestone-timeline__toggle-all{--kf-button-min-height: 44px}}@media(prefers-reduced-motion:reduce){.kf-milestone-timeline__chevron{transition:none}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "kf-badge", inputs: ["tone", "variant", "dot", "truncate"] }, { kind: "component", type: Button, selector: "kf-button", inputs: ["variant", "size", "shape", "disabled", "type", "icon", "block", "loading", "ariaLabel", "ariaExpanded", "ariaPressed", "ariaHaspopup"] }, { kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: StatusMark, selector: "kf-status-mark", inputs: ["status", "small", "exception", "label"] }, { kind: "component", type: StatusNode, selector: "kf-status-node", inputs: ["status", "icon", "size", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: MilestoneTimeline, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-milestone-timeline', imports: [Badge, Button, Icon, NgTemplateOutlet, StatusMark, StatusNode], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"kf-milestone-timeline\">\n  <div class=\"kf-milestone-timeline__toolbar\">\n    <p class=\"kf-milestone-timeline__heading\" role=\"heading\" [attr.aria-level]=\"headingLevel()\">\n      {{ text().heading }}\n    </p>\n    @if (hasExpandable()) {\n      <kf-button\n        class=\"kf-milestone-timeline__toggle-all\"\n        variant=\"ghost\"\n        size=\"sm\"\n        (click)=\"toggleAll()\"\n      >\n        {{ allExpanded() ? text().collapseAll : text().expandAll }}\n      </kf-button>\n    }\n  </div>\n\n  <ol class=\"kf-milestone-timeline__list\" [attr.aria-label]=\"ariaLabel() ?? null\">\n    @for (row of rows(); track row.group.id) {\n      <li\n        class=\"kf-milestone-timeline__group\"\n        [class]=\"'kf-milestone-timeline__group--' + row.group.status\"\n      >\n        @if (row.expandable) {\n          <button\n            type=\"button\"\n            class=\"kf-milestone-timeline__head\"\n            [id]=\"headId(row.group.id)\"\n            [attr.aria-expanded]=\"isExpanded(row.group.id)\"\n            [attr.aria-controls]=\"panelId(row.group.id)\"\n            (click)=\"toggle(row.group.id)\"\n          >\n            <ng-container *ngTemplateOutlet=\"headContent; context: { $implicit: row }\" />\n            <kf-icon class=\"kf-milestone-timeline__chevron\" name=\"chevron-down\" size=\"sm\" />\n          </button>\n\n          <div\n            class=\"kf-milestone-timeline__panel\"\n            role=\"group\"\n            [id]=\"panelId(row.group.id)\"\n            [attr.aria-labelledby]=\"headId(row.group.id)\"\n            [hidden]=\"!isExpanded(row.group.id)\"\n          >\n            <ul class=\"kf-milestone-timeline__items\">\n              @for (item of row.main; track item.id) {\n                <li\n                  class=\"kf-milestone-timeline__item\"\n                  [class.kf-milestone-timeline__item--done]=\"item.done\"\n                  [class.kf-milestone-timeline__item--next]=\"item.id === nextItemId()\"\n                >\n                  <kf-status-mark [status]=\"itemStatus(item)\" [small]=\"true\" />\n                  <span class=\"kf-milestone-timeline__item-body\">\n                    <span\n                      >{{ item.label\n                      }}<span class=\"kf-sr-only\"\n                        >: {{ item.done ? text().itemDone : text().itemPending }}</span\n                      ></span\n                    >\n                    @if (item.date) {\n                      <span class=\"kf-milestone-timeline__item-date\">{{ item.date }}</span>\n                    }\n                  </span>\n                  @if (item.id === nextItemId()) {\n                    <kf-badge tone=\"info\">{{ text().next }}</kf-badge>\n                  }\n                </li>\n              }\n            </ul>\n\n            @if (row.exceptions.length > 0) {\n              <div class=\"kf-milestone-timeline__exceptions\">\n                <p class=\"kf-milestone-timeline__exceptions-title\">{{ text().exceptionsTitle }}</p>\n                @if (row.happened.length > 0) {\n                  <ul class=\"kf-milestone-timeline__items\">\n                    @for (item of row.happened; track item.id) {\n                      <li class=\"kf-milestone-timeline__item kf-milestone-timeline__item--done\">\n                        <kf-status-mark status=\"done\" [small]=\"true\" [exception]=\"true\" />\n                        <span class=\"kf-milestone-timeline__item-body\">\n                          <span\n                            >{{ item.label\n                            }}<span class=\"kf-sr-only\">: {{ text().itemDone }}</span></span\n                          >\n                          @if (item.date) {\n                            <span class=\"kf-milestone-timeline__item-date\">{{ item.date }}</span>\n                          }\n                        </span>\n                      </li>\n                    }\n                  </ul>\n                } @else {\n                  <p class=\"kf-milestone-timeline__exceptions-empty\">{{ text().noExceptions }}</p>\n                }\n              </div>\n            }\n          </div>\n        } @else {\n          <div\n            class=\"kf-milestone-timeline__head kf-milestone-timeline__head--static\"\n            [id]=\"headId(row.group.id)\"\n          >\n            <ng-container *ngTemplateOutlet=\"headContent; context: { $implicit: row }\" />\n          </div>\n        }\n      </li>\n    }\n  </ol>\n</div>\n\n<!-- Nodo + t\u00EDtulo + estado de una etapa, compartido por el encabezado bot\u00F3n y el est\u00E1tico. -->\n<ng-template #headContent let-row>\n  <kf-status-node [status]=\"row.group.status\" [icon]=\"row.group.icon\" />\n  <span class=\"kf-milestone-timeline__text\">\n    <span class=\"kf-milestone-timeline__title\">{{ row.group.label }}</span>\n    <span class=\"kf-milestone-timeline__meta\">\n      @if (row.group.status === 'done') {\n        <span class=\"kf-sr-only\">{{ text().statusDone }}. </span>\n      }\n      {{ row.meta }}\n    </span>\n  </span>\n</ng-template>\n", styles: [".kf-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:host{display:block;--_node: var(--kf-status-node-size, 2.125rem);--_gutter: var(--kf-space-sm);--_pad-y: var(--kf-space-sm);--_line: 2px}.kf-milestone-timeline{display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-milestone-timeline__toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--kf-space-sm)}.kf-milestone-timeline__heading{margin:0;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-milestone-timeline__list{list-style:none;margin:0;padding:0}.kf-milestone-timeline__group{position:relative}.kf-milestone-timeline__group:not(:last-child):before{content:\"\";position:absolute;inset-inline-start:calc(var(--_gutter) + var(--_node) / 2 - var(--_line) / 2);top:calc(var(--_pad-y) + var(--_node));bottom:calc(var(--kf-space-xs) - var(--_pad-y));width:var(--_line);background:var(--kf-color-border-strong)}.kf-milestone-timeline__group--done:not(:last-child):before{background:var(--kf-color-success-strong)}.kf-milestone-timeline__head{position:relative;z-index:1;display:flex;align-items:flex-start;gap:var(--kf-space-md);box-sizing:border-box;width:100%;min-height:2.75rem;padding:var(--_pad-y) var(--_gutter);background:none;border:0;border-radius:var(--kf-radius-sm);text-align:left;font:inherit;color:inherit}button.kf-milestone-timeline__head{cursor:pointer}button.kf-milestone-timeline__head:hover{background:var(--kf-color-surface)}button.kf-milestone-timeline__head:focus-visible{outline:2px solid var(--kf-color-primary);outline-offset:2px}.kf-milestone-timeline__text{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;min-height:var(--_node)}.kf-milestone-timeline__title{font-weight:700;font-size:var(--kf-font-size-body);color:var(--kf-color-ink)}.kf-milestone-timeline__meta{font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text)}.kf-milestone-timeline__group--current .kf-milestone-timeline__meta{color:var(--kf-color-primary-active);font-weight:600}.kf-milestone-timeline__chevron{flex:none;align-self:center;color:var(--kf-color-text);transition:transform .15s ease}.kf-milestone-timeline__head[aria-expanded=true] .kf-milestone-timeline__chevron{transform:rotate(180deg)}.kf-milestone-timeline__panel{padding-block:var(--kf-space-sm) var(--kf-space-md);padding-inline:calc(var(--_gutter) + var(--_node) + var(--kf-space-md)) var(--_gutter)}.kf-milestone-timeline__panel[hidden]{display:none}.kf-milestone-timeline__items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--kf-space-sm)}.kf-milestone-timeline__item{display:flex;align-items:flex-start;gap:var(--kf-space-sm);font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text)}.kf-milestone-timeline__item kf-status-mark{margin-top:2px}.kf-milestone-timeline__item--done{color:var(--kf-color-ink)}.kf-milestone-timeline__item--next{color:var(--kf-color-ink);font-weight:700}.kf-milestone-timeline__item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.kf-milestone-timeline__item-date{font-size:var(--kf-font-size-caption);font-weight:400;color:var(--kf-color-text)}.kf-milestone-timeline__exceptions{margin-top:var(--kf-space-md);padding-top:var(--kf-space-sm);border-top:1px dashed var(--kf-color-border-strong)}.kf-milestone-timeline__exceptions-title{margin:0 0 var(--kf-space-sm);font-size:var(--kf-font-size-caption);font-weight:700;color:var(--kf-color-text)}.kf-milestone-timeline__exceptions-empty{margin:0;font-size:var(--kf-font-size-body-sm);color:var(--kf-color-text)}@media(max-width:640px),(pointer:coarse){.kf-milestone-timeline__toggle-all{--kf-button-min-height: 44px}}@media(prefers-reduced-motion:reduce){.kf-milestone-timeline__chevron{transition:none}}\n"] }]
+        }], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: true }] }], expandedIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIds", required: false }] }, { type: i0.Output, args: ["expandedIdsChange"] }], nextItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextItemId", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], headingLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "headingLevel", required: false }] }] } });
 
 let modalId = 0;
 /** Controles que pueden recibir el foco inicial. */
@@ -6021,13 +7131,538 @@ class Panel {
      */
     actionClick = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Panel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Panel, isStandalone: true, selector: "kf-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<kf-card>\n  <div class=\"kf-panel__head\">\n    <span class=\"kf-panel__title\">{{ title() }}</span>\n    @if (actionLabel()) {\n      <kf-link\n        class=\"kf-panel__action\"\n        [href]=\"actionHref() || '#'\"\n        showArrow\n        (click)=\"actionClick.emit($event)\"\n      >\n        {{ actionLabel() }}\n      </kf-link>\n    }\n  </div>\n  <kf-divider />\n  <div class=\"kf-panel__body\">\n    <ng-content />\n  </div>\n</kf-card>\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{flex:none;font-size:.8125rem;font-weight:600}.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", "gap"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Panel, isStandalone: true, selector: "kf-panel", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, actionHref: { classPropertyName: "actionHref", publicName: "actionHref", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<kf-card>\n  <div class=\"kf-panel__head\">\n    <span class=\"kf-panel__title\">{{ title() }}</span>\n    @if (actionLabel()) {\n      <kf-link\n        class=\"kf-panel__action\"\n        [href]=\"actionHref() || '#'\"\n        showArrow\n        (click)=\"actionClick.emit($event)\"\n      >\n        {{ actionLabel() }}\n      </kf-link>\n    }\n  </div>\n  <kf-divider />\n  <div class=\"kf-panel__body\">\n    <ng-content />\n  </div>\n</kf-card>\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{flex:none;font-size:.8125rem;font-weight:600}.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", "gap", "loading"] }, { kind: "component", type: Divider, selector: "kf-divider", inputs: ["orientation"] }, { kind: "component", type: Link, selector: "kf-link", inputs: ["variant", "disabled", "href", "showArrow"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Panel, decorators: [{
             type: Component,
             args: [{ selector: 'kf-panel', imports: [Card, Divider, Link], template: "<kf-card>\n  <div class=\"kf-panel__head\">\n    <span class=\"kf-panel__title\">{{ title() }}</span>\n    @if (actionLabel()) {\n      <kf-link\n        class=\"kf-panel__action\"\n        [href]=\"actionHref() || '#'\"\n        showArrow\n        (click)=\"actionClick.emit($event)\"\n      >\n        {{ actionLabel() }}\n      </kf-link>\n    }\n  </div>\n  <kf-divider />\n  <div class=\"kf-panel__body\">\n    <ng-content />\n  </div>\n</kf-card>\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{flex:none;font-size:.8125rem;font-weight:600}.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 }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
 
+let nextPopoverId = 0;
+/** Separación (px) entre el anfitrión y el panel. */
+const POPOVER_GAP = 8;
+/** Margen (px) mínimo entre el panel y el borde del viewport. */
+const POPOVER_VIEWPORT_MARGIN = 8;
+/**
+ * Ventana (ms) tras abrir en la que un `scroll` no cierra el panel: enfocar el
+ * anfitrión puede desplazar su contenedor para dejarlo a la vista, y ese
+ * `scroll` llega después del `focusin` que abrió el panel.
+ */
+const SCROLL_GRACE_MS = 150;
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * Panel visual del popover — componente interno, no exportado en
+ * `public-api.ts`. `PopoverDirective` es la única forma pública de usarlo.
+ *
+ * `role="tooltip"` cuando es solo informativo (el patrón WAI-ARIA para
+ * contenido que el lector anuncia vía `aria-describedby` del anfitrión) y
+ * `role="dialog"` no modal cuando es `interactive` (puede tener enlaces o
+ * botones adentro, que un `tooltip` no admite).
+ */
+class PopoverPanel {
+    template = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+    interactive = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    pointerEntered = output();
+    pointerLeft = output();
+    focusEntered = output();
+    focusLeft = output();
+    onPointerEnter(event) {
+        if (event.pointerType !== 'touch') {
+            this.pointerEntered.emit();
+        }
+    }
+    onPointerLeave(event) {
+        if (event.pointerType !== 'touch') {
+            this.pointerLeft.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PopoverPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: PopoverPanel, isStandalone: true, selector: "kf-popover-panel", inputs: { template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: true, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pointerEntered: "pointerEntered", pointerLeft: "pointerLeft", focusEntered: "focusEntered", focusLeft: "focusLeft" }, host: { listeners: { "pointerenter": "onPointerEnter($event)", "pointerleave": "onPointerLeave($event)", "focusin": "focusEntered.emit()", "focusout": "focusLeft.emit($event)" }, properties: { "attr.role": "interactive() ? 'dialog' : 'tooltip'", "attr.aria-label": "label()", "class.kf-popover-panel--interactive": "interactive()" } }, ngImport: i0, template: `<ng-container [ngTemplateOutlet]="template()" />`, isInline: true, styles: [":host{display:block;box-sizing:border-box;max-width:min(22rem,calc(100vw - 2 * var(--kf-space-sm)));max-height:calc(100vh - 2 * var(--kf-space-sm));padding:var(--kf-space-md);overflow:auto;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);color:var(--kf-color-text);font-family:var(--kf-font-body);font-size:var(--kf-font-size-body-sm);line-height:1.45;box-shadow:var(--kf-shadow-lg);animation:kf-popover-enter .12s ease-out}:host(:not(.kf-popover-panel--interactive)){pointer-events:none}@media(prefers-reduced-motion:reduce){:host{animation:none}}@keyframes kf-popover-enter{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PopoverPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'kf-popover-panel', imports: [NgTemplateOutlet], template: `<ng-container [ngTemplateOutlet]="template()" />`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.role]': "interactive() ? 'dialog' : 'tooltip'",
+                        '[attr.aria-label]': 'label()',
+                        '[class.kf-popover-panel--interactive]': 'interactive()',
+                        '(pointerenter)': 'onPointerEnter($event)',
+                        '(pointerleave)': 'onPointerLeave($event)',
+                        '(focusin)': 'focusEntered.emit()',
+                        '(focusout)': 'focusLeft.emit($event)',
+                    }, styles: [":host{display:block;box-sizing:border-box;max-width:min(22rem,calc(100vw - 2 * var(--kf-space-sm)));max-height:calc(100vh - 2 * var(--kf-space-sm));padding:var(--kf-space-md);overflow:auto;border:1px solid var(--kf-color-border);border-radius:var(--kf-radius-md);background:var(--kf-color-white);color:var(--kf-color-text);font-family:var(--kf-font-body);font-size:var(--kf-font-size-body-sm);line-height:1.45;box-shadow:var(--kf-shadow-lg);animation:kf-popover-enter .12s ease-out}:host(:not(.kf-popover-panel--interactive)){pointer-events:none}@media(prefers-reduced-motion:reduce){:host{animation:none}}@keyframes kf-popover-enter{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], propDecorators: { template: [{ type: i0.Input, args: [{ isSignal: true, alias: "template", required: true }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], pointerEntered: [{ type: i0.Output, args: ["pointerEntered"] }], pointerLeft: [{ type: i0.Output, args: ["pointerLeft"] }], focusEntered: [{ type: i0.Output, args: ["focusEntered"] }], focusLeft: [{ type: i0.Output, args: ["focusLeft"] }] } });
+/**
+ * Popover de contenido enriquecido anclado a un elemento — la contraparte de
+ * `kfTooltip` para cuando el texto plano no alcanza (varias líneas, énfasis,
+ * un desglose, enlaces). Mismo mecanismo de `@angular/cdk/overlay`. El host
+ * sigue siendo el elemento que recibe el foco: la directiva no lo hace
+ * focusable, así que va sobre un `<button>`, un `<a>` o un elemento con
+ * `tabindex="0"`.
+ *
+ *   <button [kfPopover]="detail" kfPopoverPlacement="top">Etapa</button>
+ *   <ng-template #detail><strong>Recepción</strong><p>Completada el 12/05.</p></ng-template>
+ *
+ * Apertura: puntero (hover, tras `kfPopoverShowDelay` ms; NO se abre con puntero
+ * táctil) y foco de teclado (al instante, solo si el foco es visible: un
+ * clic con el mouse no lo abre). Cierre: Escape (descarta el panel hasta que
+ * el puntero y el foco salgan y vuelvan), salida del puntero tras
+ * `kfPopoverHideDelay` ms, pérdida de foco, scroll de cualquier contenedor y
+ * redimensionado de la ventana. El panel se reposiciona dentro del viewport
+ * (invierte el lado si no cabe).
+ *
+ * Con `kfPopoverInteractive`, el puntero puede entrar al panel sin cerrarlo y
+ * el panel es un `dialog` no modal: Tab desde el anfitrión entra al primer
+ * control del panel y Mayús+Tab desde ese control vuelve al anfitrión. Sin
+ * `kfPopoverInteractive` (default), el panel es un `tooltip` que no captura
+ * el puntero y no debe contener controles.
+ *
+ * Si el anfitrión no es interactivo pero vive dentro de un control (un botón,
+ * un enlace, un elemento con `tabindex`), los eventos de puntero, foco y
+ * teclado se escuchan en ese control y el panel se ancla al anfitrión. Es el
+ * caso de un indicador dentro de una celda interactiva de `kf-data-table`:
+ *
+ *   <ng-template #stageCell let-row>
+ *     <span [kfPopover]="detail"><kf-status-mark [status]="row.status" /></span>
+ *   </ng-template>
+ *
+ * Accesibilidad: mientras está abierto, el elemento que recibe el foco
+ * referencia el panel con `aria-describedby` (se conserva cualquier valor
+ * previo).
+ */
+class PopoverDirective {
+    /** Contenido del popover (un `ng-template`). `null`/`undefined` = no se abre. */
+    kfPopover = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kfPopover" }] : /* istanbul ignore next */ []));
+    /** Lado preferido; si no cabe en el viewport, se invierte. Default `bottom`. */
+    kfPopoverPlacement = input('bottom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kfPopoverPlacement" }] : /* istanbul ignore next */ []));
+    /** Retardo (ms) antes de abrir con el puntero. El foco de teclado abre sin retardo. */
+    kfPopoverShowDelay = input(150, { ...(ngDevMode ? { debugName: "kfPopoverShowDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Retardo (ms) antes de cerrar al salir el puntero. */
+    kfPopoverHideDelay = input(150, { ...(ngDevMode ? { debugName: "kfPopoverHideDelay" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** Desactiva el popover (y lo cierra si estaba abierto). */
+    kfPopoverDisabled = input(false, { ...(ngDevMode ? { debugName: "kfPopoverDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Permite que el puntero entre al panel sin cerrarlo y que el teclado llegue a sus controles. */
+    kfPopoverInteractive = input(false, { ...(ngDevMode ? { debugName: "kfPopoverInteractive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Nombre accesible del panel cuando es `interactive` (rol `dialog`). */
+    kfPopoverLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kfPopoverLabel" }] : /* istanbul ignore next */ []));
+    /** Emite `true` al abrirse y `false` al cerrarse. */
+    kfPopoverOpenChange = output();
+    host = inject(ElementRef);
+    overlayService = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    injector = inject(Injector);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    panelId = `kf-popover-${nextPopoverId++}`;
+    openState = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openState" }] : /* istanbul ignore next */ []));
+    /** `true` mientras el panel está abierto. */
+    isOpen = this.openState.asReadonly();
+    /**
+     * Elemento que recibe los eventos de puntero, foco y teclado: el propio
+     * anfitrión o, si este no es interactivo pero vive dentro de un control
+     * (botón, enlace, `tabindex`), ese control. `aria-describedby` va en él.
+     */
+    trigger = this.host.nativeElement;
+    overlayRef = null;
+    panelElement = null;
+    showTimer = null;
+    hideTimer = null;
+    openedAt = 0;
+    teardownGlobalListeners = null;
+    destroyed = false;
+    pointerOnHost = false;
+    pointerOnPanel = false;
+    focusOnHost = false;
+    focusOnPanel = false;
+    /** Escape lo descartó: no reabre hasta que puntero y foco hayan salido. */
+    dismissed = false;
+    constructor() {
+        effect(() => {
+            if (this.kfPopoverDisabled()) {
+                untracked(() => this.close());
+            }
+        });
+        // El elemento que recibe los eventos se resuelve tras el primer render: en
+        // una vista embebida (ej. dentro de la celda de un `kf-data-table`) el
+        // anfitrión aún no tiene a su ancestro interactivo en el DOM al construirse.
+        afterNextRender(() => {
+            if (this.destroyed) {
+                return;
+            }
+            const target = this.resolveTrigger();
+            this.trigger = target;
+            const listeners = [
+                ['pointerenter', this.onHostPointerEnter],
+                ['pointerleave', this.onHostPointerLeave],
+                ['focusin', this.onHostFocusIn],
+                ['focusout', this.onHostFocusOut],
+                ['keydown', this.onHostKeydown],
+            ];
+            for (const [type, listener] of listeners) {
+                target.addEventListener(type, listener);
+            }
+            this.destroyRef.onDestroy(() => {
+                for (const [type, listener] of listeners) {
+                    target.removeEventListener(type, listener);
+                }
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.destroyed = true;
+        this.clearTimers();
+        this.dispose();
+    }
+    /** Cierra el panel de inmediato, sin retardo. */
+    close() {
+        this.clearTimers();
+        this.dispose();
+    }
+    onHostPointerEnter = (event) => {
+        if (event.pointerType === 'touch') {
+            return;
+        }
+        this.pointerOnHost = true;
+        this.reevaluate(this.kfPopoverShowDelay());
+    };
+    onHostPointerLeave = (event) => {
+        if (event.pointerType === 'touch') {
+            return;
+        }
+        this.pointerOnHost = false;
+        this.reevaluate(this.kfPopoverHideDelay());
+    };
+    onHostFocusIn = (event) => {
+        // Solo foco de teclado: un clic o un toque enfocan el botón pero no
+        // deben abrir el panel (el clic tiene su propia acción).
+        if (!this.isKeyboardFocus(event.target)) {
+            return;
+        }
+        this.focusOnHost = true;
+        this.reevaluate(0);
+    };
+    onHostFocusOut = (event) => {
+        const next = event.relatedTarget;
+        if (next && this.trigger.contains(next)) {
+            return;
+        }
+        this.focusOnHost = false;
+        if (next && this.kfPopoverInteractive() && this.panelElement?.contains(next)) {
+            // El foco pasa al panel: su propio `focusin` lo registra.
+            return;
+        }
+        this.reevaluate(0);
+    };
+    onHostKeydown = (event) => {
+        if (event.key !== 'Tab' ||
+            event.shiftKey ||
+            event.defaultPrevented ||
+            !this.panelElement ||
+            !this.kfPopoverInteractive()) {
+            return;
+        }
+        const first = this.panelElement.querySelector(FOCUSABLE_SELECTOR);
+        if (first) {
+            event.preventDefault();
+            first.focus();
+        }
+    };
+    get wanted() {
+        if (this.kfPopoverDisabled()) {
+            return false;
+        }
+        const interactive = this.kfPopoverInteractive();
+        return (this.pointerOnHost ||
+            this.focusOnHost ||
+            (interactive && (this.pointerOnPanel || this.focusOnPanel)));
+    }
+    /** Abre o cierra según los cuatro orígenes (puntero/foco × anfitrión/panel). */
+    reevaluate(delay) {
+        if (this.wanted) {
+            this.clearHideTimer();
+            if (!this.dismissed) {
+                this.scheduleOpen(delay);
+            }
+            return;
+        }
+        this.dismissed = false;
+        this.clearShowTimer();
+        this.scheduleClose(delay);
+    }
+    scheduleOpen(delay) {
+        if (this.overlayRef || this.showTimer !== null) {
+            return;
+        }
+        if (delay <= 0) {
+            this.open();
+            return;
+        }
+        this.showTimer = setTimeout(() => {
+            this.showTimer = null;
+            if (this.wanted && !this.dismissed) {
+                this.open();
+            }
+        }, delay);
+    }
+    scheduleClose(delay) {
+        if (!this.overlayRef || this.hideTimer !== null) {
+            return;
+        }
+        if (delay <= 0) {
+            this.dispose();
+            return;
+        }
+        this.hideTimer = setTimeout(() => {
+            this.hideTimer = null;
+            if (!this.wanted) {
+                this.dispose();
+            }
+        }, delay);
+    }
+    open() {
+        const template = this.kfPopover();
+        if (this.overlayRef || !template || this.kfPopoverDisabled()) {
+            return;
+        }
+        const positionStrategy = this.overlayService
+            .position()
+            .flexibleConnectedTo(this.host)
+            .withPositions(this.positionsFor(this.kfPopoverPlacement()))
+            .withViewportMargin(POPOVER_VIEWPORT_MARGIN)
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        const overlayRef = this.overlayService.create({
+            positionStrategy,
+            // El cierre por scroll lo resuelve `listenGlobal`: el scroll strategy de
+            // CDK solo ve ancestros registrados como `cdkScrollable`.
+            scrollStrategy: this.overlayService.scrollStrategies.noop(),
+        });
+        const portal = new ComponentPortal(PopoverPanel, this.viewContainerRef, this.injector);
+        const panelRef = overlayRef.attach(portal);
+        panelRef.setInput('template', template);
+        panelRef.setInput('interactive', this.kfPopoverInteractive());
+        panelRef.setInput('label', this.kfPopoverInteractive() ? this.kfPopoverLabel() : null);
+        this.panelElement = panelRef.location.nativeElement;
+        this.panelElement.id = this.panelId;
+        panelRef.instance.pointerEntered.subscribe(() => {
+            this.pointerOnPanel = true;
+            this.reevaluate(0);
+        });
+        panelRef.instance.pointerLeft.subscribe(() => {
+            this.pointerOnPanel = false;
+            this.reevaluate(this.kfPopoverHideDelay());
+        });
+        panelRef.instance.focusEntered.subscribe(() => {
+            this.focusOnPanel = true;
+            this.reevaluate(0);
+        });
+        panelRef.instance.focusLeft.subscribe((event) => this.onPanelFocusOut(event));
+        this.panelElement.addEventListener('keydown', this.onPanelKeydown);
+        // Renderiza el contenido antes de medir, para posicionar con el tamaño real.
+        panelRef.changeDetectorRef.detectChanges();
+        overlayRef.updatePosition();
+        this.overlayRef = overlayRef;
+        this.addDescribedBy();
+        this.listenGlobal();
+        this.openedAt = Date.now();
+        this.openState.set(true);
+        this.kfPopoverOpenChange.emit(true);
+    }
+    dispose() {
+        const overlayRef = this.overlayRef;
+        const wasOpen = overlayRef !== null;
+        // Primero se suelta el estado y después se destruye el panel: quitar del DOM
+        // un elemento con foco dispara `focusout` de forma síncrona, y ese manejador
+        // no debe volver a entrar a `dispose()` con el panel a medio destruir.
+        this.overlayRef = null;
+        this.teardownGlobalListeners?.();
+        this.teardownGlobalListeners = null;
+        this.panelElement?.removeEventListener('keydown', this.onPanelKeydown);
+        this.panelElement = null;
+        this.pointerOnPanel = false;
+        this.focusOnPanel = false;
+        overlayRef?.dispose();
+        this.removeDescribedBy();
+        if (wasOpen && !this.destroyed) {
+            this.openState.set(false);
+            this.kfPopoverOpenChange.emit(false);
+        }
+    }
+    onPanelFocusOut(event) {
+        if (!this.overlayRef) {
+            // `focusout` por quitar del DOM el panel que se está cerrando.
+            return;
+        }
+        this.focusOnPanel = false;
+        const next = event.relatedTarget;
+        if (next && (this.panelElement?.contains(next) || this.trigger.contains(next))) {
+            return;
+        }
+        this.reevaluate(0);
+    }
+    /** Mayús+Tab desde el primer control del panel devuelve el foco al anfitrión. */
+    onPanelKeydown = (event) => {
+        if (event.key !== 'Tab' || !event.shiftKey || !this.panelElement) {
+            return;
+        }
+        const first = this.panelElement.querySelector(FOCUSABLE_SELECTOR);
+        if (first && this.document.activeElement === first) {
+            event.preventDefault();
+            this.focusHost();
+        }
+    };
+    focusHost() {
+        const host = this.trigger;
+        const focusable = host.matches(FOCUSABLE_SELECTOR)
+            ? host
+            : host.querySelector(FOCUSABLE_SELECTOR);
+        focusable?.focus({ preventScroll: true });
+    }
+    /**
+     * Escape, scroll y resize mientras el panel está abierto. En fase de captura
+     * y sobre `document`: `scroll` no burbujea (hay que capturarlo para ver el
+     * de cualquier contenedor) y Escape debe cerrar primero el popover sin
+     * llegar al modal o drawer que lo contenga.
+     */
+    listenGlobal() {
+        const view = this.document.defaultView;
+        const onKeydown = (event) => {
+            if (event.key !== 'Escape') {
+                return;
+            }
+            event.stopPropagation();
+            const focusInPanel = this.panelElement?.contains(this.document.activeElement) ?? false;
+            this.dismissed = true;
+            this.close();
+            if (focusInPanel) {
+                this.focusHost();
+            }
+        };
+        const onScroll = (event) => {
+            const target = event.target;
+            if (Date.now() - this.openedAt < SCROLL_GRACE_MS) {
+                return;
+            }
+            if (target && this.panelElement?.contains(target)) {
+                return;
+            }
+            this.close();
+        };
+        const onResize = () => this.close();
+        this.document.addEventListener('keydown', onKeydown, true);
+        this.document.addEventListener('scroll', onScroll, true);
+        view?.addEventListener('resize', onResize);
+        this.teardownGlobalListeners = () => {
+            this.document.removeEventListener('keydown', onKeydown, true);
+            this.document.removeEventListener('scroll', onScroll, true);
+            view?.removeEventListener('resize', onResize);
+        };
+    }
+    resolveTrigger() {
+        const host = this.host.nativeElement;
+        return host.closest(FOCUSABLE_SELECTOR) ?? host;
+    }
+    /** Foco de teclado (`:focus-visible`); sin soporte del selector, se asume teclado. */
+    isKeyboardFocus(target) {
+        if (!(target instanceof Element)) {
+            return true;
+        }
+        try {
+            return target.matches(':focus-visible');
+        }
+        catch {
+            return true;
+        }
+    }
+    addDescribedBy() {
+        const tokens = this.describedByTokens();
+        if (!tokens.includes(this.panelId)) {
+            tokens.push(this.panelId);
+            this.trigger.setAttribute('aria-describedby', tokens.join(' '));
+        }
+    }
+    removeDescribedBy() {
+        const remaining = this.describedByTokens().filter((token) => token !== this.panelId);
+        if (remaining.length > 0) {
+            this.trigger.setAttribute('aria-describedby', remaining.join(' '));
+        }
+        else {
+            this.trigger.removeAttribute('aria-describedby');
+        }
+    }
+    describedByTokens() {
+        return (this.trigger.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean);
+    }
+    clearShowTimer() {
+        if (this.showTimer !== null) {
+            clearTimeout(this.showTimer);
+            this.showTimer = null;
+        }
+    }
+    clearHideTimer() {
+        if (this.hideTimer !== null) {
+            clearTimeout(this.hideTimer);
+            this.hideTimer = null;
+        }
+    }
+    clearTimers() {
+        this.clearShowTimer();
+        this.clearHideTimer();
+    }
+    /**
+     * Posiciones en orden de preferencia: el lado pedido (centrado, luego
+     * alineado al inicio y al final del anfitrión), el lado opuesto con las
+     * mismas tres alineaciones y, por último, los dos lados perpendiculares.
+     * Así un anfitrión pegado a una esquina encuentra una posición que cabe
+     * entera en vez de depender solo del empuje al viewport.
+     */
+    positionsFor(placement) {
+        const opposite = {
+            top: 'bottom',
+            bottom: 'top',
+            left: 'right',
+            right: 'left',
+        };
+        const perpendicular = placement === 'top' || placement === 'bottom' ? ['right', 'left'] : ['bottom', 'top'];
+        return [placement, opposite[placement], ...perpendicular].flatMap((side) => ['center', 'start', 'end'].map((align) => this.positionFor(side, align)));
+    }
+    positionFor(side, align) {
+        if (side === 'top' || side === 'bottom') {
+            return {
+                originX: align,
+                originY: side === 'top' ? 'top' : 'bottom',
+                overlayX: align,
+                overlayY: side === 'top' ? 'bottom' : 'top',
+                offsetY: side === 'top' ? -POPOVER_GAP : POPOVER_GAP,
+            };
+        }
+        const vertical = align === 'center' ? 'center' : align === 'start' ? 'top' : 'bottom';
+        return {
+            originX: side === 'left' ? 'start' : 'end',
+            originY: vertical,
+            overlayX: side === 'left' ? 'end' : 'start',
+            overlayY: vertical,
+            offsetX: side === 'left' ? -POPOVER_GAP : POPOVER_GAP,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.0", type: PopoverDirective, isStandalone: true, selector: "[kfPopover]", inputs: { kfPopover: { classPropertyName: "kfPopover", publicName: "kfPopover", isSignal: true, isRequired: true, transformFunction: null }, kfPopoverPlacement: { classPropertyName: "kfPopoverPlacement", publicName: "kfPopoverPlacement", isSignal: true, isRequired: false, transformFunction: null }, kfPopoverShowDelay: { classPropertyName: "kfPopoverShowDelay", publicName: "kfPopoverShowDelay", isSignal: true, isRequired: false, transformFunction: null }, kfPopoverHideDelay: { classPropertyName: "kfPopoverHideDelay", publicName: "kfPopoverHideDelay", isSignal: true, isRequired: false, transformFunction: null }, kfPopoverDisabled: { classPropertyName: "kfPopoverDisabled", publicName: "kfPopoverDisabled", isSignal: true, isRequired: false, transformFunction: null }, kfPopoverInteractive: { classPropertyName: "kfPopoverInteractive", publicName: "kfPopoverInteractive", isSignal: true, isRequired: false, transformFunction: null }, kfPopoverLabel: { classPropertyName: "kfPopoverLabel", publicName: "kfPopoverLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kfPopoverOpenChange: "kfPopoverOpenChange" }, exportAs: ["kfPopover"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: PopoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kfPopover]',
+                    exportAs: 'kfPopover',
+                }]
+        }], ctorParameters: () => [], propDecorators: { kfPopover: [{ type: i0.Input, args: [{ isSignal: true, alias: "kfPopover", required: true }] }], kfPopoverPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "kfPopoverPlacement", required: false }] }], kfPopoverShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "kfPopoverShowDelay", required: false }] }], kfPopoverHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "kfPopoverHideDelay", required: false }] }], kfPopoverDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kfPopoverDisabled", required: false }] }], kfPopoverInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "kfPopoverInteractive", required: false }] }], kfPopoverLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kfPopoverLabel", required: false }] }], kfPopoverOpenChange: [{ type: i0.Output, args: ["kfPopoverOpenChange"] }] } });
+
 /**
  * Cabecera completa del portal (página 31) — franja de administrador
  * (acento ámbar, solo admins), barra de marca con logo, navegación y
@@ -6179,36 +7814,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                 args: ['window:resize']
             }] } });
 
-/**
- * Barra de progreso de un solo valor (0-100%) con color por severidad —
- * para un porcentaje simple, a diferencia de `kf-bucket-progress`, que
- * dibuja varias categorías proporcionales en la misma barra.
- *
- *   <kf-progress [value]="80" tone="ok" label="80%" />
- *   <kf-progress [value]="ratio()" [tone]="severityTone()" />
- *
- * `value` se clampea a [0, 100] — un consumidor que calcule un ratio fuera
- * de rango (ej. tiempo transcurrido sobre un SLA ya vencido) no rompe el
- * ancho de la barra. `label` es texto libre opcional sobre la barra (ej.
- * "80%"); sin él, no se renderiza ningún texto, solo la barra.
- */
-class Progress {
-    value = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    tone = input('neutral', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-    label = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
-    clampedValue = computed(() => Math.min(Math.max(this.value(), 0), 100), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "clampedValue" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Progress, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: Progress, isStandalone: true, selector: "kf-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kf-progress\">\n  @if (label(); as text) {\n    <div class=\"kf-progress__top\">\n      <span class=\"kf-progress__label kf-progress--{{ tone() }}\">{{ text }}</span>\n    </div>\n  }\n  <div\n    class=\"kf-progress__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"kf-progress__fill kf-progress--{{ tone() }}\" [style.width.%]=\"clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}.kf-progress{display:flex;flex-direction:column;min-width:0}.kf-progress__top{display:flex;justify-content:flex-end;margin-block-end:3px}.kf-progress__label{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-caption);font-weight:700}.kf-progress__track{height:4px;border-radius:var(--kf-radius-pill);background:var(--kf-color-gray-200);overflow:hidden}.kf-progress__fill{height:100%;border-radius:var(--kf-radius-pill);transition:width .3s ease}@media(prefers-reduced-motion:reduce){.kf-progress__fill{transition:none}}.kf-progress--neutral{color:var(--kf-color-text-muted)}.kf-progress__fill.kf-progress--neutral{background:var(--kf-color-secondary)}.kf-progress--primary{color:var(--kf-color-primary)}.kf-progress__fill.kf-progress--primary{background:var(--kf-color-primary)}.kf-progress--ok{color:var(--kf-color-success-strong)}.kf-progress__fill.kf-progress--ok{background:var(--kf-color-success)}.kf-progress--warn{color:var(--kf-color-warning-strong)}.kf-progress__fill.kf-progress--warn{background:var(--kf-color-warning)}.kf-progress--error{color:var(--kf-color-error-strong)}.kf-progress__fill.kf-progress--error{background:var(--kf-color-error)}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: Progress, decorators: [{
-            type: Component,
-            args: [{ selector: 'kf-progress', template: "<div class=\"kf-progress\">\n  @if (label(); as text) {\n    <div class=\"kf-progress__top\">\n      <span class=\"kf-progress__label kf-progress--{{ tone() }}\">{{ text }}</span>\n    </div>\n  }\n  <div\n    class=\"kf-progress__track\"\n    role=\"progressbar\"\n    [attr.aria-valuenow]=\"clampedValue()\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <div class=\"kf-progress__fill kf-progress--{{ tone() }}\" [style.width.%]=\"clampedValue()\"></div>\n  </div>\n</div>\n", styles: [":host{display:block}.kf-progress{display:flex;flex-direction:column;min-width:0}.kf-progress__top{display:flex;justify-content:flex-end;margin-block-end:3px}.kf-progress__label{font-family:var(--kf-font-mono);font-size:var(--kf-font-size-caption);font-weight:700}.kf-progress__track{height:4px;border-radius:var(--kf-radius-pill);background:var(--kf-color-gray-200);overflow:hidden}.kf-progress__fill{height:100%;border-radius:var(--kf-radius-pill);transition:width .3s ease}@media(prefers-reduced-motion:reduce){.kf-progress__fill{transition:none}}.kf-progress--neutral{color:var(--kf-color-text-muted)}.kf-progress__fill.kf-progress--neutral{background:var(--kf-color-secondary)}.kf-progress--primary{color:var(--kf-color-primary)}.kf-progress__fill.kf-progress--primary{background:var(--kf-color-primary)}.kf-progress--ok{color:var(--kf-color-success-strong)}.kf-progress__fill.kf-progress--ok{background:var(--kf-color-success)}.kf-progress--warn{color:var(--kf-color-warning-strong)}.kf-progress__fill.kf-progress--warn{background:var(--kf-color-warning)}.kf-progress--error{color:var(--kf-color-error-strong)}.kf-progress__fill.kf-progress--error{background:var(--kf-color-error)}\n"] }]
-        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
-
 /**
  * Punto que emite ondas concéntricas en bucle, para marcar un dato que
  * necesita atención inmediata sin depender de que el operador lo vea por
@@ -6857,47 +8462,16 @@ class SidebarShell {
         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()) {\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__backdrop\"\n    aria-label=\"Cerrar men\u00FA\"\n    (click)=\"mobileOpen.set(false)\"\n  ></button>\n}\n\n<aside\n  class=\"kf-sidebar-shell__rail\"\n  [class.kf-sidebar-shell__rail--collapsed]=\"itemsCollapsed()\"\n  [class.kf-sidebar-shell__rail--mobile-open]=\"mobileOpen()\"\n>\n  <div class=\"kf-sidebar-shell__brand\">\n    <div class=\"kf-sidebar-shell__brand-full\">\n      <ng-content select=\"[kf-sidebar-brand]\" />\n    </div>\n    <div class=\"kf-sidebar-shell__brand-collapsed\">\n      <ng-content select=\"[kf-sidebar-brand-collapsed]\" />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__mobile-close\"\n      aria-label=\"Cerrar men\u00FA\"\n      (click)=\"mobileOpen.set(false)\"\n    >\n      <kf-icon name=\"x\" size=\"md\" />\n    </button>\n  </div>\n\n  <nav class=\"kf-sidebar-shell__nav\">\n    @for (entry of itemsWithGroupHeader(); track entry.item.href) {\n      @if (entry.showGroupLabel && !itemsCollapsed()) {\n        <div class=\"kf-sidebar-shell__group-label\">{{ entry.item.groupLabel }}</div>\n      }\n      <kf-sidebar-nav-item\n        [icon]=\"entry.item.icon\"\n        [label]=\"entry.item.label\"\n        [href]=\"entry.item.href\"\n        [active]=\"!!entry.item.active\"\n        [collapsed]=\"itemsCollapsed()\"\n        (click)=\"onNavItemClick($event, entry.item)\"\n      />\n    }\n  </nav>\n\n  <div class=\"kf-sidebar-shell__bottom\">\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__collapse-toggle\"\n      [class.kf-sidebar-shell__collapse-toggle--collapsed]=\"itemsCollapsed()\"\n      [attr.aria-expanded]=\"!collapsed()\"\n      [attr.aria-label]=\"collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA'\"\n      [kfTooltip]=\"itemsCollapsed() ? (collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA') : ''\"\n      (click)=\"collapsed.set(!collapsed())\"\n    >\n      <kf-icon [name]=\"collapsed() ? 'chevron-right' : 'chevron-left'\" size=\"sm\" />\n      @if (!itemsCollapsed()) {\n        <span class=\"kf-sidebar-shell__collapse-toggle-label\">\n          {{ collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA' }}\n        </span>\n      }\n    </button>\n\n    <div class=\"kf-sidebar-shell__footer\">\n      <ng-content select=\"[kf-sidebar-footer]\" />\n    </div>\n  </div>\n</aside>\n\n<div class=\"kf-sidebar-shell__topbar\">\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__menu-toggle\"\n    aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n    (click)=\"mobileOpen.set(true)\"\n  >\n    <kf-icon name=\"menu\" size=\"md\" />\n  </button>\n  <div class=\"kf-sidebar-shell__topbar-brand\">\n    <ng-content select=\"[kf-sidebar-brand-mobile]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;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{display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;min-width:0}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none;justify-content:center;min-width:0}.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:flex}.kf-sidebar-shell__mobile-close{display:none;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__group-label{margin-top:var(--kf-space-sm);padding:0 var(--kf-space-md);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff6;white-space:nowrap;overflow:hidden}.kf-sidebar-shell__nav>.kf-sidebar-shell__group-label:first-child{margin-top:0}.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;padding-inline:var(--kf-space-md)}.kf-sidebar-shell__brand{display:grid;grid-template-columns:1fr 2rem;align-items:center}.kf-sidebar-shell__brand-full{grid-column:1;justify-content:flex-start}.kf-sidebar-shell__mobile-close{grid-column:2;display:flex}.kf-sidebar-shell__collapse-toggle{display:none}.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", "rotate", "filled"] }, { kind: "component", type: SidebarNavItem, selector: "kf-sidebar-nav-item", inputs: ["icon", "label", "href", "active", "collapsed"] }, { kind: "directive", type: TooltipDirective, selector: "[kfTooltip]", inputs: ["kfTooltip", "kfTooltipPosition"] }] });
+    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()) {\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__backdrop\"\n    aria-label=\"Cerrar men\u00FA\"\n    (click)=\"mobileOpen.set(false)\"\n  ></button>\n}\n\n<aside\n  class=\"kf-sidebar-shell__rail\"\n  [class.kf-sidebar-shell__rail--collapsed]=\"itemsCollapsed()\"\n  [class.kf-sidebar-shell__rail--mobile-open]=\"mobileOpen()\"\n>\n  <div class=\"kf-sidebar-shell__brand\">\n    <div class=\"kf-sidebar-shell__brand-full\">\n      <ng-content select=\"[kf-sidebar-brand]\" />\n    </div>\n    <div class=\"kf-sidebar-shell__brand-collapsed\">\n      <ng-content select=\"[kf-sidebar-brand-collapsed]\" />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__mobile-close\"\n      aria-label=\"Cerrar men\u00FA\"\n      (click)=\"mobileOpen.set(false)\"\n    >\n      <kf-icon name=\"x\" size=\"md\" />\n    </button>\n  </div>\n\n  <nav class=\"kf-sidebar-shell__nav\">\n    @for (entry of itemsWithGroupHeader(); track entry.item.href) {\n      @if (entry.showGroupLabel && !itemsCollapsed()) {\n        <div class=\"kf-sidebar-shell__group-label\">{{ entry.item.groupLabel }}</div>\n      }\n      <kf-sidebar-nav-item\n        [icon]=\"entry.item.icon\"\n        [label]=\"entry.item.label\"\n        [href]=\"entry.item.href\"\n        [active]=\"!!entry.item.active\"\n        [collapsed]=\"itemsCollapsed()\"\n        (click)=\"onNavItemClick($event, entry.item)\"\n      />\n    }\n  </nav>\n\n  <div class=\"kf-sidebar-shell__bottom\">\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__collapse-toggle\"\n      [class.kf-sidebar-shell__collapse-toggle--collapsed]=\"itemsCollapsed()\"\n      [attr.aria-expanded]=\"!collapsed()\"\n      [attr.aria-label]=\"collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA'\"\n      [kfTooltip]=\"itemsCollapsed() ? (collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA') : ''\"\n      (click)=\"collapsed.set(!collapsed())\"\n    >\n      <kf-icon [name]=\"collapsed() ? 'chevron-right' : 'chevron-left'\" size=\"sm\" />\n      @if (!itemsCollapsed()) {\n        <span class=\"kf-sidebar-shell__collapse-toggle-label\">\n          {{ collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA' }}\n        </span>\n      }\n    </button>\n\n    <div class=\"kf-sidebar-shell__footer\">\n      <ng-content select=\"[kf-sidebar-footer]\" />\n    </div>\n  </div>\n</aside>\n\n<div class=\"kf-sidebar-shell__topbar\">\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__menu-toggle\"\n    aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n    (click)=\"mobileOpen.set(true)\"\n  >\n    <kf-icon name=\"menu\" size=\"md\" />\n  </button>\n  <div class=\"kf-sidebar-shell__topbar-brand\">\n    <ng-content select=\"[kf-sidebar-brand-mobile]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;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{display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;min-width:0}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none;justify-content:center;min-width:0}.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:flex}.kf-sidebar-shell__mobile-close{display:none;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__group-label{margin-top:var(--kf-space-sm);padding:0 var(--kf-space-md);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff6;white-space:nowrap;overflow:hidden}.kf-sidebar-shell__nav>.kf-sidebar-shell__group-label:first-child{margin-top:0}.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 .26s cubic-bezier(.4,0,.2,1);box-shadow:none}.kf-sidebar-shell__rail--mobile-open{transform:translate(0);box-shadow:var(--kf-shadow-lg)}.kf-sidebar-shell__rail--collapsed{width:284px;max-width:86vw;padding-inline:var(--kf-space-md)}.kf-sidebar-shell__brand{display:grid;grid-template-columns:1fr 2rem;align-items:center}.kf-sidebar-shell__brand-full{grid-column:1;justify-content:flex-start}.kf-sidebar-shell__mobile-close{grid-column:2;display:flex}.kf-sidebar-shell__collapse-toggle{display:none}.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", "rotate", "filled"] }, { 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()) {\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__backdrop\"\n    aria-label=\"Cerrar men\u00FA\"\n    (click)=\"mobileOpen.set(false)\"\n  ></button>\n}\n\n<aside\n  class=\"kf-sidebar-shell__rail\"\n  [class.kf-sidebar-shell__rail--collapsed]=\"itemsCollapsed()\"\n  [class.kf-sidebar-shell__rail--mobile-open]=\"mobileOpen()\"\n>\n  <div class=\"kf-sidebar-shell__brand\">\n    <div class=\"kf-sidebar-shell__brand-full\">\n      <ng-content select=\"[kf-sidebar-brand]\" />\n    </div>\n    <div class=\"kf-sidebar-shell__brand-collapsed\">\n      <ng-content select=\"[kf-sidebar-brand-collapsed]\" />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__mobile-close\"\n      aria-label=\"Cerrar men\u00FA\"\n      (click)=\"mobileOpen.set(false)\"\n    >\n      <kf-icon name=\"x\" size=\"md\" />\n    </button>\n  </div>\n\n  <nav class=\"kf-sidebar-shell__nav\">\n    @for (entry of itemsWithGroupHeader(); track entry.item.href) {\n      @if (entry.showGroupLabel && !itemsCollapsed()) {\n        <div class=\"kf-sidebar-shell__group-label\">{{ entry.item.groupLabel }}</div>\n      }\n      <kf-sidebar-nav-item\n        [icon]=\"entry.item.icon\"\n        [label]=\"entry.item.label\"\n        [href]=\"entry.item.href\"\n        [active]=\"!!entry.item.active\"\n        [collapsed]=\"itemsCollapsed()\"\n        (click)=\"onNavItemClick($event, entry.item)\"\n      />\n    }\n  </nav>\n\n  <div class=\"kf-sidebar-shell__bottom\">\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__collapse-toggle\"\n      [class.kf-sidebar-shell__collapse-toggle--collapsed]=\"itemsCollapsed()\"\n      [attr.aria-expanded]=\"!collapsed()\"\n      [attr.aria-label]=\"collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA'\"\n      [kfTooltip]=\"itemsCollapsed() ? (collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA') : ''\"\n      (click)=\"collapsed.set(!collapsed())\"\n    >\n      <kf-icon [name]=\"collapsed() ? 'chevron-right' : 'chevron-left'\" size=\"sm\" />\n      @if (!itemsCollapsed()) {\n        <span class=\"kf-sidebar-shell__collapse-toggle-label\">\n          {{ collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA' }}\n        </span>\n      }\n    </button>\n\n    <div class=\"kf-sidebar-shell__footer\">\n      <ng-content select=\"[kf-sidebar-footer]\" />\n    </div>\n  </div>\n</aside>\n\n<div class=\"kf-sidebar-shell__topbar\">\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__menu-toggle\"\n    aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n    (click)=\"mobileOpen.set(true)\"\n  >\n    <kf-icon name=\"menu\" size=\"md\" />\n  </button>\n  <div class=\"kf-sidebar-shell__topbar-brand\">\n    <ng-content select=\"[kf-sidebar-brand-mobile]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;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{display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;min-width:0}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none;justify-content:center;min-width:0}.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:flex}.kf-sidebar-shell__mobile-close{display:none;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__group-label{margin-top:var(--kf-space-sm);padding:0 var(--kf-space-md);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff6;white-space:nowrap;overflow:hidden}.kf-sidebar-shell__nav>.kf-sidebar-shell__group-label:first-child{margin-top:0}.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;padding-inline:var(--kf-space-md)}.kf-sidebar-shell__brand{display:grid;grid-template-columns:1fr 2rem;align-items:center}.kf-sidebar-shell__brand-full{grid-column:1;justify-content:flex-start}.kf-sidebar-shell__mobile-close{grid-column:2;display:flex}.kf-sidebar-shell__collapse-toggle{display:none}.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"] }]
+            args: [{ selector: 'kf-sidebar-shell', imports: [Icon, SidebarNavItem, TooltipDirective], template: "@if (mobileOpen()) {\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__backdrop\"\n    aria-label=\"Cerrar men\u00FA\"\n    (click)=\"mobileOpen.set(false)\"\n  ></button>\n}\n\n<aside\n  class=\"kf-sidebar-shell__rail\"\n  [class.kf-sidebar-shell__rail--collapsed]=\"itemsCollapsed()\"\n  [class.kf-sidebar-shell__rail--mobile-open]=\"mobileOpen()\"\n>\n  <div class=\"kf-sidebar-shell__brand\">\n    <div class=\"kf-sidebar-shell__brand-full\">\n      <ng-content select=\"[kf-sidebar-brand]\" />\n    </div>\n    <div class=\"kf-sidebar-shell__brand-collapsed\">\n      <ng-content select=\"[kf-sidebar-brand-collapsed]\" />\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__mobile-close\"\n      aria-label=\"Cerrar men\u00FA\"\n      (click)=\"mobileOpen.set(false)\"\n    >\n      <kf-icon name=\"x\" size=\"md\" />\n    </button>\n  </div>\n\n  <nav class=\"kf-sidebar-shell__nav\">\n    @for (entry of itemsWithGroupHeader(); track entry.item.href) {\n      @if (entry.showGroupLabel && !itemsCollapsed()) {\n        <div class=\"kf-sidebar-shell__group-label\">{{ entry.item.groupLabel }}</div>\n      }\n      <kf-sidebar-nav-item\n        [icon]=\"entry.item.icon\"\n        [label]=\"entry.item.label\"\n        [href]=\"entry.item.href\"\n        [active]=\"!!entry.item.active\"\n        [collapsed]=\"itemsCollapsed()\"\n        (click)=\"onNavItemClick($event, entry.item)\"\n      />\n    }\n  </nav>\n\n  <div class=\"kf-sidebar-shell__bottom\">\n    <button\n      type=\"button\"\n      class=\"kf-sidebar-shell__collapse-toggle\"\n      [class.kf-sidebar-shell__collapse-toggle--collapsed]=\"itemsCollapsed()\"\n      [attr.aria-expanded]=\"!collapsed()\"\n      [attr.aria-label]=\"collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA'\"\n      [kfTooltip]=\"itemsCollapsed() ? (collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA') : ''\"\n      (click)=\"collapsed.set(!collapsed())\"\n    >\n      <kf-icon [name]=\"collapsed() ? 'chevron-right' : 'chevron-left'\" size=\"sm\" />\n      @if (!itemsCollapsed()) {\n        <span class=\"kf-sidebar-shell__collapse-toggle-label\">\n          {{ collapsed() ? 'Expandir men\u00FA' : 'Colapsar men\u00FA' }}\n        </span>\n      }\n    </button>\n\n    <div class=\"kf-sidebar-shell__footer\">\n      <ng-content select=\"[kf-sidebar-footer]\" />\n    </div>\n  </div>\n</aside>\n\n<div class=\"kf-sidebar-shell__topbar\">\n  <button\n    type=\"button\"\n    class=\"kf-sidebar-shell__menu-toggle\"\n    aria-label=\"Abrir men\u00FA de navegaci\u00F3n\"\n    (click)=\"mobileOpen.set(true)\"\n  >\n    <kf-icon name=\"menu\" size=\"md\" />\n  </button>\n  <div class=\"kf-sidebar-shell__topbar-brand\">\n    <ng-content select=\"[kf-sidebar-brand-mobile]\" />\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.kf-sidebar-shell__backdrop{display:none}.kf-sidebar-shell__rail{box-sizing:border-box;display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;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{display:flex;align-items:center;justify-content:center;margin-bottom:var(--kf-space-xl)}.kf-sidebar-shell__brand-full{display:flex;justify-content:center;min-width:0}.kf-sidebar-shell__brand-full ::ng-deep img{display:block;height:1.5rem}.kf-sidebar-shell__brand-collapsed{display:none;justify-content:center;min-width:0}.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:flex}.kf-sidebar-shell__mobile-close{display:none;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__group-label{margin-top:var(--kf-space-sm);padding:0 var(--kf-space-md);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff6;white-space:nowrap;overflow:hidden}.kf-sidebar-shell__nav>.kf-sidebar-shell__group-label:first-child{margin-top:0}.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 .26s cubic-bezier(.4,0,.2,1);box-shadow:none}.kf-sidebar-shell__rail--mobile-open{transform:translate(0);box-shadow:var(--kf-shadow-lg)}.kf-sidebar-shell__rail--collapsed{width:284px;max-width:86vw;padding-inline:var(--kf-space-md)}.kf-sidebar-shell__brand{display:grid;grid-template-columns:1fr 2rem;align-items:center}.kf-sidebar-shell__brand-full{grid-column:1;justify-content:flex-start}.kf-sidebar-shell__mobile-close{grid-column:2;display:flex}.kf-sidebar-shell__collapse-toggle{display:none}.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']
             }] } });
 
-/**
- * Card de estadística horizontal: ícono circular grande a la izquierda,
- * valor + label + nota apilados al centro, chevron opcional al final si es
- * clickeable. Distinta de `kf-metric-card` (layout vertical, label arriba +
- * ícono a la derecha) — este es el patrón real del dashboard de OTD ("Bonos
- * otorgados", "Cortesías otorgadas"), no una variante de la misma card.
- *
- *   <kf-stat-card icon="gift" tone="purple" value="4" label="Bonos otorgados" note="$15,000.00 en beneficios" (cardClick)="onNavigate('beneficios')" />
- */
-class StatCard {
-    icon = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-    tone = input('primary', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
-    value = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    label = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    note = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "note" }] : /* istanbul ignore next */ []));
-    /** Si se escucha `cardClick`, la card se renderiza como botón clickeable con chevron. */
-    clickable = input(false, { ...(ngDevMode ? { debugName: "clickable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    cardClick = output();
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: StatCard, isStandalone: true, selector: "kf-stat-card", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, note: { classPropertyName: "note", publicName: "note", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardClick: "cardClick" }, ngImport: i0, template: "@if (clickable()) {\n  <button type=\"button\" class=\"kf-stat-card kf-stat-card--clickable\" (click)=\"cardClick.emit()\">\n    <ng-container *ngTemplateOutlet=\"content\" />\n    <kf-icon class=\"kf-stat-card__chevron\" name=\"chevron-right\" size=\"sm\" />\n  </button>\n} @else {\n  <div class=\"kf-stat-card\">\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </div>\n}\n\n<ng-template #content>\n  <span class=\"kf-stat-card__icon\" [class]=\"'kf-stat-card__icon--' + tone()\">\n    <kf-icon [name]=\"icon()\" size=\"md\" />\n  </span>\n  <span class=\"kf-stat-card__body\">\n    <span class=\"kf-stat-card__value\">{{ value() }}</span>\n    <span class=\"kf-stat-card__label\">{{ label() }}</span>\n    @if (note()) {\n      <span class=\"kf-stat-card__note\">{{ note() }}</span>\n    }\n  </span>\n</ng-template>\n", styles: [":host{display:block}.kf-stat-card{display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-md);background:var(--kf-color-white);box-shadow:var(--kf-shadow-sm);font:inherit;text-align:left}.kf-stat-card--clickable{cursor:pointer;transition:box-shadow .14s,transform .14s}.kf-stat-card--clickable:hover{box-shadow:var(--kf-shadow-md);transform:translateY(-2px)}.kf-stat-card--clickable:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-stat-card__icon{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:var(--kf-radius-md)}.kf-stat-card__icon--primary{background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-stat-card__icon--success{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}.kf-stat-card__icon--error{background:var(--kf-color-error-soft);color:var(--kf-color-error)}.kf-stat-card__icon--purple{background:var(--kf-color-purple-soft);color:var(--kf-color-purple)}.kf-stat-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-stat-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:var(--kf-font-size-title-md);color:var(--kf-color-ink)}.kf-stat-card__label{font-size:.875rem;font-weight:700;color:var(--kf-color-ink)}.kf-stat-card__note{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-stat-card__chevron{margin-left:auto;flex:none;color:var(--kf-color-gray-400)}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: StatCard, decorators: [{
-            type: Component,
-            args: [{ selector: 'kf-stat-card', imports: [Icon, NgTemplateOutlet], template: "@if (clickable()) {\n  <button type=\"button\" class=\"kf-stat-card kf-stat-card--clickable\" (click)=\"cardClick.emit()\">\n    <ng-container *ngTemplateOutlet=\"content\" />\n    <kf-icon class=\"kf-stat-card__chevron\" name=\"chevron-right\" size=\"sm\" />\n  </button>\n} @else {\n  <div class=\"kf-stat-card\">\n    <ng-container *ngTemplateOutlet=\"content\" />\n  </div>\n}\n\n<ng-template #content>\n  <span class=\"kf-stat-card__icon\" [class]=\"'kf-stat-card__icon--' + tone()\">\n    <kf-icon [name]=\"icon()\" size=\"md\" />\n  </span>\n  <span class=\"kf-stat-card__body\">\n    <span class=\"kf-stat-card__value\">{{ value() }}</span>\n    <span class=\"kf-stat-card__label\">{{ label() }}</span>\n    @if (note()) {\n      <span class=\"kf-stat-card__note\">{{ note() }}</span>\n    }\n  </span>\n</ng-template>\n", styles: [":host{display:block}.kf-stat-card{display:flex;align-items:center;gap:var(--kf-space-md);width:100%;padding:var(--kf-space-lg);border:1px solid var(--kf-color-border-strong);border-radius:var(--kf-radius-md);background:var(--kf-color-white);box-shadow:var(--kf-shadow-sm);font:inherit;text-align:left}.kf-stat-card--clickable{cursor:pointer;transition:box-shadow .14s,transform .14s}.kf-stat-card--clickable:hover{box-shadow:var(--kf-shadow-md);transform:translateY(-2px)}.kf-stat-card--clickable:focus-visible{outline:none;box-shadow:var(--kf-shadow-focus)}.kf-stat-card__icon{display:grid;place-items:center;width:50px;height:50px;flex:none;border-radius:var(--kf-radius-md)}.kf-stat-card__icon--primary{background:var(--kf-color-primary-soft);color:var(--kf-color-primary)}.kf-stat-card__icon--success{background:var(--kf-color-success-soft);color:var(--kf-color-success-strong)}.kf-stat-card__icon--error{background:var(--kf-color-error-soft);color:var(--kf-color-error)}.kf-stat-card__icon--purple{background:var(--kf-color-purple-soft);color:var(--kf-color-purple)}.kf-stat-card__body{display:flex;flex-direction:column;gap:2px;min-width:0}.kf-stat-card__value{font-family:var(--kf-font-title);font-weight:700;font-size:var(--kf-font-size-title-md);color:var(--kf-color-ink)}.kf-stat-card__label{font-size:.875rem;font-weight:700;color:var(--kf-color-ink)}.kf-stat-card__note{font-size:.78rem;color:var(--kf-color-text-muted)}.kf-stat-card__chevron{margin-left:auto;flex:none;color:var(--kf-color-gray-400)}\n"] }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], note: [{ type: i0.Input, args: [{ isSignal: true, alias: "note", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], cardClick: [{ type: i0.Output, args: ["cardClick"] }] } });
-
 /**
  * Indicador numérico compacto: label + valor grande con ícono, para grillas
  * densas de KPIs. Con `cta` en vez de `value` se convierte en un bloque de
@@ -7451,11 +9025,28 @@ const TOAST_ICON = {
     loading: 'bell',
 };
 const DEFAULT_DURATION_MS = 2800;
+/**
+ * Auto-dismiss time per tone when the caller doesn't pass `duration`. Errors and
+ * warnings stay longer than confirmations: they carry something to read and
+ * act on, while a success only has to be noticed. `success`/`info` keep the
+ * historical 2800ms. `loading` never auto-dismisses.
+ */
+const TOAST_DEFAULT_DURATION_MS = {
+    success: DEFAULT_DURATION_MS,
+    info: DEFAULT_DURATION_MS,
+    warning: 5000,
+    error: 8000,
+};
 const EXIT_ANIMATION_MS = 200;
 /**
  * Shows one toast at a time — a new `show()` call replaces whatever is
  * currently up (this mirrors a global status line, not a notification stack).
  *
+ * Duration by tone (when `duration` isn't passed): `success`/`info` 2800ms,
+ * `warning` 5000ms, `error` 8000ms (`TOAST_DEFAULT_DURATION_MS`); an explicit
+ * `duration` always wins. The countdown pauses while the pointer or focus is
+ * on the toast. Error toasts also get a larger, always-opaque close button.
+ *
  * Angular has no global function that can mount UI on its own, so the
  * imperative `showToast(...)` of the reference design system becomes a
  * root-provided service holding signal state: `ToastService.show(...)` sets
@@ -7499,7 +9090,8 @@ class ToastService {
     show(message, options = {}) {
         const id = this.nextId++;
         const tone = options.tone ?? 'info';
-        const duration = options.duration ?? DEFAULT_DURATION_MS;
+        const duration = options.duration ??
+            (tone === 'loading' ? DEFAULT_DURATION_MS : TOAST_DEFAULT_DURATION_MS[tone]);
         clearTimeout(this.dismissTimer);
         clearTimeout(this.removeTimer);
         this.dismissTimer = undefined;
@@ -7623,11 +9215,11 @@ class ToastHost {
         this.dismiss(t.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ToastHost, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ToastHost, isStandalone: true, selector: "kf-toast-host", ngImport: i0, template: "@for (t of toastList(); track t.id) {\n  <div\n    class=\"kf-toast kf-toast--{{ t.tone }}\"\n    [class.kf-toast--leaving]=\"t.leaving\"\n    role=\"status\"\n    [attr.aria-live]=\"t.tone === 'error' ? 'assertive' : 'polite'\"\n    (mouseenter)=\"pause(t, 'hover')\"\n    (mouseleave)=\"resume(t, 'hover')\"\n    (focusin)=\"pause(t, 'focus')\"\n    (focusout)=\"resume(t, 'focus')\"\n  >\n    <kf-icon class=\"kf-toast__icon\" [name]=\"toastIcon(t.tone)\" size=\"sm\" />\n    <span class=\"kf-toast__message\">{{ t.message }}</span>\n    @if (t.action; as action) {\n      <button type=\"button\" class=\"kf-toast__action\" (click)=\"runAction(t)\">\n        {{ action.label }}\n      </button>\n    }\n    <button type=\"button\" class=\"kf-toast__dismiss\" aria-label=\"Cerrar\" (click)=\"dismiss(t.id)\">\n      <kf-icon name=\"x\" size=\"sm\" />\n    </button>\n    <span class=\"kf-toast__bar\" [style.--kf-toast-dur]=\"t.duration + 'ms'\"></span>\n  </div>\n}\n", styles: ["@keyframes kf-toast-in{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes kf-toast-bar{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes kf-toast-indeterminate{0%{left:-40%;width:40%}50%{left:30%;width:55%}to{left:100%;width:40%}}.kf-toast{--kf-toast-accent: var(--kf-color-info);position:fixed;inset-block-end:var(--kf-space-lg);inset-inline-end:var(--kf-space-lg);z-index:1100;display:flex;align-items:center;gap:var(--kf-space-sm);max-inline-size:360px;padding:var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-md);border-radius:var(--kf-radius-md);border-left:4px solid var(--kf-toast-accent);background:var(--kf-color-ink);color:var(--kf-color-white);box-shadow:var(--kf-shadow-lg);font-family:var(--kf-font-body);font-size:.875rem;font-weight:600;line-height:1.4;overflow:hidden;animation:kf-toast-in .25s ease forwards;transition:transform .2s ease,opacity .2s ease}.kf-toast--leaving{transform:translateY(20px);opacity:0}.kf-toast--success{--kf-toast-accent: var(--kf-color-success)}.kf-toast--error{--kf-toast-accent: var(--kf-color-error)}.kf-toast--warning{--kf-toast-accent: var(--kf-color-warning)}.kf-toast--info,.kf-toast--loading{--kf-toast-accent: var(--kf-color-info)}.kf-toast__icon{flex:none;color:var(--kf-toast-accent)}.kf-toast__message{flex:1}.kf-toast__action{flex:none;padding:2px var(--kf-space-xs);border:none;border-radius:var(--kf-radius-xs);background:transparent;color:var(--kf-toast-accent);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.kf-toast__action:hover{opacity:.85}.kf-toast__dismiss{flex:none;display:grid;place-items:center;inline-size:24px;block-size:24px;padding:0;border:none;border-radius:var(--kf-radius-xs);background:transparent;color:inherit;font:inherit;line-height:1;cursor:pointer;opacity:.6}.kf-toast__dismiss:hover{opacity:1}.kf-toast__bar{position:absolute;inset-block-end:0;left:0;block-size:3px;inline-size:100%;background:var(--kf-toast-accent);opacity:.7;transform-origin:left;animation:kf-toast-bar var(--kf-toast-dur, 2.8s) linear forwards}.kf-toast--loading .kf-toast__bar{left:-40%;inline-size:40%;opacity:.6;animation:kf-toast-indeterminate 1.4s ease-in-out infinite}.kf-toast:hover .kf-toast__bar,.kf-toast:focus-within .kf-toast__bar{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.kf-toast,.kf-toast__bar,.kf-toast--loading .kf-toast__bar{animation:none}.kf-toast{transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.0", type: ToastHost, isStandalone: true, selector: "kf-toast-host", ngImport: i0, template: "@for (t of toastList(); track t.id) {\n  <div\n    class=\"kf-toast kf-toast--{{ t.tone }}\"\n    [class.kf-toast--leaving]=\"t.leaving\"\n    role=\"status\"\n    [attr.aria-live]=\"t.tone === 'error' ? 'assertive' : 'polite'\"\n    (mouseenter)=\"pause(t, 'hover')\"\n    (mouseleave)=\"resume(t, 'hover')\"\n    (focusin)=\"pause(t, 'focus')\"\n    (focusout)=\"resume(t, 'focus')\"\n  >\n    <kf-icon class=\"kf-toast__icon\" [name]=\"toastIcon(t.tone)\" size=\"sm\" />\n    <span class=\"kf-toast__message\">{{ t.message }}</span>\n    @if (t.action; as action) {\n      <button type=\"button\" class=\"kf-toast__action\" (click)=\"runAction(t)\">\n        {{ action.label }}\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"kf-toast__dismiss\"\n      [class.kf-toast__dismiss--prominent]=\"t.tone === 'error'\"\n      [attr.aria-label]=\"t.tone === 'error' ? 'Cerrar mensaje de error' : 'Cerrar'\"\n      (click)=\"dismiss(t.id)\"\n    >\n      <kf-icon name=\"x\" size=\"sm\" />\n    </button>\n    <span class=\"kf-toast__bar\" [style.--kf-toast-dur]=\"t.duration + 'ms'\"></span>\n  </div>\n}\n", styles: ["@keyframes kf-toast-in{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes kf-toast-bar{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes kf-toast-indeterminate{0%{left:-40%;width:40%}50%{left:30%;width:55%}to{left:100%;width:40%}}.kf-toast{--kf-toast-accent: var(--kf-color-info);position:fixed;inset-block-end:var(--kf-space-lg);inset-inline-end:var(--kf-space-lg);z-index:1100;display:flex;align-items:center;gap:var(--kf-space-sm);max-inline-size:360px;padding:var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-md);border-radius:var(--kf-radius-md);border-left:4px solid var(--kf-toast-accent);background:var(--kf-color-ink);color:var(--kf-color-white);box-shadow:var(--kf-shadow-lg);font-family:var(--kf-font-body);font-size:.875rem;font-weight:600;line-height:1.4;overflow:hidden;animation:kf-toast-in .25s ease forwards;transition:transform .2s ease,opacity .2s ease}.kf-toast--leaving{transform:translateY(20px);opacity:0}.kf-toast--success{--kf-toast-accent: var(--kf-color-success)}.kf-toast--error{--kf-toast-accent: var(--kf-color-error)}.kf-toast--warning{--kf-toast-accent: var(--kf-color-warning)}.kf-toast--info,.kf-toast--loading{--kf-toast-accent: var(--kf-color-info)}.kf-toast__icon{flex:none;color:var(--kf-toast-accent)}.kf-toast__message{flex:1}.kf-toast__action{flex:none;padding:2px var(--kf-space-xs);border:none;border-radius:var(--kf-radius-xs);background:transparent;color:var(--kf-toast-accent);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.kf-toast__action:hover{opacity:.85}.kf-toast__dismiss{flex:none;display:grid;place-items:center;inline-size:24px;block-size:24px;padding:0;border:none;border-radius:var(--kf-radius-xs);background:transparent;color:inherit;font:inherit;line-height:1;cursor:pointer;opacity:.6}.kf-toast__dismiss:hover{opacity:1}.kf-toast__dismiss:focus-visible,.kf-toast__action:focus-visible{outline:2px solid var(--kf-color-white);outline-offset:1px;opacity:1}.kf-toast__dismiss--prominent{inline-size:32px;block-size:32px;opacity:1}.kf-toast__bar{position:absolute;inset-block-end:0;left:0;block-size:3px;inline-size:100%;background:var(--kf-toast-accent);opacity:.7;transform-origin:left;animation:kf-toast-bar var(--kf-toast-dur, 2.8s) linear forwards}.kf-toast--loading .kf-toast__bar{left:-40%;inline-size:40%;opacity:.6;animation:kf-toast-indeterminate 1.4s ease-in-out infinite}.kf-toast:hover .kf-toast__bar,.kf-toast:focus-within .kf-toast__bar{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.kf-toast,.kf-toast__bar,.kf-toast--loading .kf-toast__bar{animation:none}.kf-toast{transition:none}}\n"], dependencies: [{ kind: "component", type: Icon, selector: "kf-icon", inputs: ["name", "size", "rotate", "filled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: ToastHost, decorators: [{
             type: Component,
-            args: [{ selector: 'kf-toast-host', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Icon], template: "@for (t of toastList(); track t.id) {\n  <div\n    class=\"kf-toast kf-toast--{{ t.tone }}\"\n    [class.kf-toast--leaving]=\"t.leaving\"\n    role=\"status\"\n    [attr.aria-live]=\"t.tone === 'error' ? 'assertive' : 'polite'\"\n    (mouseenter)=\"pause(t, 'hover')\"\n    (mouseleave)=\"resume(t, 'hover')\"\n    (focusin)=\"pause(t, 'focus')\"\n    (focusout)=\"resume(t, 'focus')\"\n  >\n    <kf-icon class=\"kf-toast__icon\" [name]=\"toastIcon(t.tone)\" size=\"sm\" />\n    <span class=\"kf-toast__message\">{{ t.message }}</span>\n    @if (t.action; as action) {\n      <button type=\"button\" class=\"kf-toast__action\" (click)=\"runAction(t)\">\n        {{ action.label }}\n      </button>\n    }\n    <button type=\"button\" class=\"kf-toast__dismiss\" aria-label=\"Cerrar\" (click)=\"dismiss(t.id)\">\n      <kf-icon name=\"x\" size=\"sm\" />\n    </button>\n    <span class=\"kf-toast__bar\" [style.--kf-toast-dur]=\"t.duration + 'ms'\"></span>\n  </div>\n}\n", styles: ["@keyframes kf-toast-in{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes kf-toast-bar{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes kf-toast-indeterminate{0%{left:-40%;width:40%}50%{left:30%;width:55%}to{left:100%;width:40%}}.kf-toast{--kf-toast-accent: var(--kf-color-info);position:fixed;inset-block-end:var(--kf-space-lg);inset-inline-end:var(--kf-space-lg);z-index:1100;display:flex;align-items:center;gap:var(--kf-space-sm);max-inline-size:360px;padding:var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-md);border-radius:var(--kf-radius-md);border-left:4px solid var(--kf-toast-accent);background:var(--kf-color-ink);color:var(--kf-color-white);box-shadow:var(--kf-shadow-lg);font-family:var(--kf-font-body);font-size:.875rem;font-weight:600;line-height:1.4;overflow:hidden;animation:kf-toast-in .25s ease forwards;transition:transform .2s ease,opacity .2s ease}.kf-toast--leaving{transform:translateY(20px);opacity:0}.kf-toast--success{--kf-toast-accent: var(--kf-color-success)}.kf-toast--error{--kf-toast-accent: var(--kf-color-error)}.kf-toast--warning{--kf-toast-accent: var(--kf-color-warning)}.kf-toast--info,.kf-toast--loading{--kf-toast-accent: var(--kf-color-info)}.kf-toast__icon{flex:none;color:var(--kf-toast-accent)}.kf-toast__message{flex:1}.kf-toast__action{flex:none;padding:2px var(--kf-space-xs);border:none;border-radius:var(--kf-radius-xs);background:transparent;color:var(--kf-toast-accent);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.kf-toast__action:hover{opacity:.85}.kf-toast__dismiss{flex:none;display:grid;place-items:center;inline-size:24px;block-size:24px;padding:0;border:none;border-radius:var(--kf-radius-xs);background:transparent;color:inherit;font:inherit;line-height:1;cursor:pointer;opacity:.6}.kf-toast__dismiss:hover{opacity:1}.kf-toast__bar{position:absolute;inset-block-end:0;left:0;block-size:3px;inline-size:100%;background:var(--kf-toast-accent);opacity:.7;transform-origin:left;animation:kf-toast-bar var(--kf-toast-dur, 2.8s) linear forwards}.kf-toast--loading .kf-toast__bar{left:-40%;inline-size:40%;opacity:.6;animation:kf-toast-indeterminate 1.4s ease-in-out infinite}.kf-toast:hover .kf-toast__bar,.kf-toast:focus-within .kf-toast__bar{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.kf-toast,.kf-toast__bar,.kf-toast--loading .kf-toast__bar{animation:none}.kf-toast{transition:none}}\n"] }]
+            args: [{ selector: 'kf-toast-host', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Icon], template: "@for (t of toastList(); track t.id) {\n  <div\n    class=\"kf-toast kf-toast--{{ t.tone }}\"\n    [class.kf-toast--leaving]=\"t.leaving\"\n    role=\"status\"\n    [attr.aria-live]=\"t.tone === 'error' ? 'assertive' : 'polite'\"\n    (mouseenter)=\"pause(t, 'hover')\"\n    (mouseleave)=\"resume(t, 'hover')\"\n    (focusin)=\"pause(t, 'focus')\"\n    (focusout)=\"resume(t, 'focus')\"\n  >\n    <kf-icon class=\"kf-toast__icon\" [name]=\"toastIcon(t.tone)\" size=\"sm\" />\n    <span class=\"kf-toast__message\">{{ t.message }}</span>\n    @if (t.action; as action) {\n      <button type=\"button\" class=\"kf-toast__action\" (click)=\"runAction(t)\">\n        {{ action.label }}\n      </button>\n    }\n    <button\n      type=\"button\"\n      class=\"kf-toast__dismiss\"\n      [class.kf-toast__dismiss--prominent]=\"t.tone === 'error'\"\n      [attr.aria-label]=\"t.tone === 'error' ? 'Cerrar mensaje de error' : 'Cerrar'\"\n      (click)=\"dismiss(t.id)\"\n    >\n      <kf-icon name=\"x\" size=\"sm\" />\n    </button>\n    <span class=\"kf-toast__bar\" [style.--kf-toast-dur]=\"t.duration + 'ms'\"></span>\n  </div>\n}\n", styles: ["@keyframes kf-toast-in{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes kf-toast-bar{0%{transform:scaleX(1)}to{transform:scaleX(0)}}@keyframes kf-toast-indeterminate{0%{left:-40%;width:40%}50%{left:30%;width:55%}to{left:100%;width:40%}}.kf-toast{--kf-toast-accent: var(--kf-color-info);position:fixed;inset-block-end:var(--kf-space-lg);inset-inline-end:var(--kf-space-lg);z-index:1100;display:flex;align-items:center;gap:var(--kf-space-sm);max-inline-size:360px;padding:var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-sm) var(--kf-space-md);border-radius:var(--kf-radius-md);border-left:4px solid var(--kf-toast-accent);background:var(--kf-color-ink);color:var(--kf-color-white);box-shadow:var(--kf-shadow-lg);font-family:var(--kf-font-body);font-size:.875rem;font-weight:600;line-height:1.4;overflow:hidden;animation:kf-toast-in .25s ease forwards;transition:transform .2s ease,opacity .2s ease}.kf-toast--leaving{transform:translateY(20px);opacity:0}.kf-toast--success{--kf-toast-accent: var(--kf-color-success)}.kf-toast--error{--kf-toast-accent: var(--kf-color-error)}.kf-toast--warning{--kf-toast-accent: var(--kf-color-warning)}.kf-toast--info,.kf-toast--loading{--kf-toast-accent: var(--kf-color-info)}.kf-toast__icon{flex:none;color:var(--kf-toast-accent)}.kf-toast__message{flex:1}.kf-toast__action{flex:none;padding:2px var(--kf-space-xs);border:none;border-radius:var(--kf-radius-xs);background:transparent;color:var(--kf-toast-accent);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.kf-toast__action:hover{opacity:.85}.kf-toast__dismiss{flex:none;display:grid;place-items:center;inline-size:24px;block-size:24px;padding:0;border:none;border-radius:var(--kf-radius-xs);background:transparent;color:inherit;font:inherit;line-height:1;cursor:pointer;opacity:.6}.kf-toast__dismiss:hover{opacity:1}.kf-toast__dismiss:focus-visible,.kf-toast__action:focus-visible{outline:2px solid var(--kf-color-white);outline-offset:1px;opacity:1}.kf-toast__dismiss--prominent{inline-size:32px;block-size:32px;opacity:1}.kf-toast__bar{position:absolute;inset-block-end:0;left:0;block-size:3px;inline-size:100%;background:var(--kf-toast-accent);opacity:.7;transform-origin:left;animation:kf-toast-bar var(--kf-toast-dur, 2.8s) linear forwards}.kf-toast--loading .kf-toast__bar{left:-40%;inline-size:40%;opacity:.6;animation:kf-toast-indeterminate 1.4s ease-in-out infinite}.kf-toast:hover .kf-toast__bar,.kf-toast:focus-within .kf-toast__bar{animation-play-state:paused}@media(prefers-reduced-motion:reduce){.kf-toast,.kf-toast__bar,.kf-toast--loading .kf-toast__bar{animation:none}.kf-toast{transition:none}}\n"] }]
         }] });
 
 /*
@@ -7651,5 +9243,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentViewer, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, Modal, MultiSelect, NoteBlock, OptionList, PageHeader, Pagination, Panel, PortalHeader, Progress, PulseDot, RowActions, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, Spinner, StatCard, StatTile, StatusPill, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, resolveListToolbarMode };
+export { ActionTile, AdminBadge, Alert, AlertRow, Avatar, Badge, Breadcrumb, BucketProgress, Button, Calendar, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, ContactPopover, ContentSlot, ContentState, ContentStateLoading, ContentViewer, DATA_TABLE_MAX_SKELETON_ROWS, DEFAULT_MILESTONE_TIMELINE_LABELS, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, FileInput, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, LIST_TOOLBAR_HYSTERESIS, Link, ListToolbar, MetricCard, MilestoneTimeline, Modal, MultiSelect, NoteBlock, OptionList, PROGRESS_STATUS, PROGRESS_STATUS_LABEL, PageHeader, Pagination, Panel, PopoverDirective, PortalHeader, Progress, PulseDot, RowActions, SKELETON_PRESET_MAX_COUNT, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, SkeletonPreset, Spinner, StatCard, StatTile, StatusMark, StatusNode, StatusPill, TOAST_DEFAULT_DURATION_MS, Tabs, Text, Textarea, TileGrid, TimeSlotPicker, ToastHost, ToastService, TooltipDirective, ViewToggle, dataTableViewSignal, formatFileSize, resolveListToolbarMode };
 //# sourceMappingURL=kaufmann-lab-ui-core.mjs.map