@ajuarezso/sui-design-system 0.23.0 → 0.24.0

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, model, signal, contentChild, viewChild, effect, untracked, output, ElementRef, forwardRef, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, RendererStyleFlags2, ViewChildren, viewChildren, afterNextRender, ContentChildren, Injector, Injectable } from '@angular/core';
+import { InjectionToken, input, computed, ChangeDetectionStrategy, Component, inject, TemplateRef, Directive, model, signal, contentChild, viewChild, effect, untracked, output, ElementRef, forwardRef, ViewContainerRef, DestroyRef, ContentChild, ViewChild, ViewEncapsulation, Renderer2, DOCUMENT, HostListener, RendererStyleFlags2, ViewChildren, viewChildren, booleanAttribute, afterNextRender, afterRenderEffect, ContentChildren, Injector, Injectable } from '@angular/core';
 import { NgTemplateOutlet, DOCUMENT as DOCUMENT$1, NgOptimizedImage } from '@angular/common';
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -12236,7 +12236,7 @@ class SuiModalHeader {
         return this.iconVariant();
     }, ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModalHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModalHeader, isStandalone: true, selector: "sui-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, descriptionId: { classPropertyName: "descriptionId", publicName: "descriptionId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-size": "size()", "attr.data-has-icon": "iconName() ? \"\" : null" } }, ngImport: i0, template: "@if (iconName(); as name) {\n  <span class=\"sui-modal-header__icon\" [attr.data-variant]=\"resolvedVariant()\" aria-hidden=\"true\">\n    <sui-icon [name]=\"name\" [size]=\"size() === 'small' ? 24 : 20\" />\n  </span>\n}\n\n<div class=\"sui-modal-header__titles\">\n  @if (title()) {\n    <h2 class=\"sui-modal-header__title\" [attr.id]=\"titleId()\">{{ title() }}</h2>\n  }\n  @if (description(); as desc) {\n    <p class=\"sui-modal-header__description\" [attr.id]=\"descriptionId()\">{{ desc }}</p>\n  }\n</div>\n\n@if (showClose()) {\n  <sui-compact-button\n    class=\"sui-modal-header__close\"\n    icon=\"close-line\"\n    variantStyle=\"ghost\"\n    size=\"large\"\n    ariaLabel=\"Cerrar\"\n    (clicked)=\"closed.emit()\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;flex-shrink:0;gap:16px;padding:16px 56px 16px 20px;min-height:80px;background:var(--sui-bg-white-0, #fff);border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);position:relative;overflow:hidden;box-sizing:border-box}:host([data-sui-size=small]){min-height:56px;gap:12px}:host([data-has-icon]){gap:14px}.sui-modal-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;padding:10px;border-radius:var(--sui-radius-full, 999px)}.sui-modal-header__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal-header__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal-header__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal-header__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal-header__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f5f7fa);color:var(--sui-icon-sub-600, #5c5c5c)}:host([data-sui-size=small]) .sui-modal-header__icon{padding:0;background:transparent;align-self:center}.sui-modal-header__titles{display:block;flex:1 1 auto;min-width:0}.sui-modal-header__title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;word-break:break-word}.sui-modal-header__description{margin:4px 0 0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal-header__description:first-child{margin-top:0}.sui-modal-header__close{position:absolute;top:16px;right:16px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModalHeader, isStandalone: true, selector: "sui-modal-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, descriptionId: { classPropertyName: "descriptionId", publicName: "descriptionId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-size": "size()", "attr.data-has-icon": "iconName() ? \"\" : null" } }, ngImport: i0, template: "@if (iconName(); as name) {\n  <span class=\"sui-modal-header__icon\" [attr.data-variant]=\"resolvedVariant()\" aria-hidden=\"true\">\n    <sui-icon [name]=\"name\" [size]=\"size() === 'small' ? 24 : 20\" />\n  </span>\n}\n\n<div class=\"sui-modal-header__titles\">\n  @if (title()) {\n    <h2 class=\"sui-modal-header__title\" [attr.id]=\"titleId()\">{{ title() }}</h2>\n  }\n  @if (description(); as desc) {\n    <p class=\"sui-modal-header__description\" [attr.id]=\"descriptionId()\">{{ desc }}</p>\n  }\n</div>\n\n@if (showClose()) {\n  <sui-compact-button\n    class=\"sui-modal-header__close\"\n    icon=\"close-line\"\n    variantStyle=\"ghost\"\n    size=\"large\"\n    ariaLabel=\"Cerrar\"\n    (clicked)=\"closed.emit()\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;flex-shrink:0;gap:16px;padding:16px 56px 16px 20px;min-height:80px;background:var(--sui-bg-white-0, #fff);border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);position:relative;overflow:hidden;box-sizing:border-box}:host([data-sui-size=small]){min-height:56px;gap:12px}:host([data-has-icon]){gap:14px}.sui-modal-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;padding:10px;border-radius:var(--sui-radius-full, 999px)}.sui-modal-header__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal-header__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal-header__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal-header__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal-header__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f5f7fa);color:var(--sui-icon-sub-600, #5c5c5c)}:host([data-sui-size=small]) .sui-modal-header__icon{padding:0;background:transparent;align-self:center}.sui-modal-header__titles{display:block;flex:1 1 auto;min-width:0}.sui-modal-header__title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;word-break:break-word}.sui-modal-header__description{margin:4px 0 0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal-header__description:first-child{margin-top:0}.sui-modal-header__close{position:absolute;top:16px;right:16px;flex-shrink:0}@media(max-width:767px){.sui-modal-header__close ::ng-deep .sui-compact-button__el{position:relative}.sui-modal-header__close ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:calc((100% - 44px)/2)}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModalHeader, decorators: [{
             type: Component,
@@ -12245,7 +12245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.title]': 'null',
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-has-icon]': 'iconName() ? "" : null',
-                    }, template: "@if (iconName(); as name) {\n  <span class=\"sui-modal-header__icon\" [attr.data-variant]=\"resolvedVariant()\" aria-hidden=\"true\">\n    <sui-icon [name]=\"name\" [size]=\"size() === 'small' ? 24 : 20\" />\n  </span>\n}\n\n<div class=\"sui-modal-header__titles\">\n  @if (title()) {\n    <h2 class=\"sui-modal-header__title\" [attr.id]=\"titleId()\">{{ title() }}</h2>\n  }\n  @if (description(); as desc) {\n    <p class=\"sui-modal-header__description\" [attr.id]=\"descriptionId()\">{{ desc }}</p>\n  }\n</div>\n\n@if (showClose()) {\n  <sui-compact-button\n    class=\"sui-modal-header__close\"\n    icon=\"close-line\"\n    variantStyle=\"ghost\"\n    size=\"large\"\n    ariaLabel=\"Cerrar\"\n    (clicked)=\"closed.emit()\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;flex-shrink:0;gap:16px;padding:16px 56px 16px 20px;min-height:80px;background:var(--sui-bg-white-0, #fff);border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);position:relative;overflow:hidden;box-sizing:border-box}:host([data-sui-size=small]){min-height:56px;gap:12px}:host([data-has-icon]){gap:14px}.sui-modal-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;padding:10px;border-radius:var(--sui-radius-full, 999px)}.sui-modal-header__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal-header__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal-header__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal-header__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal-header__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f5f7fa);color:var(--sui-icon-sub-600, #5c5c5c)}:host([data-sui-size=small]) .sui-modal-header__icon{padding:0;background:transparent;align-self:center}.sui-modal-header__titles{display:block;flex:1 1 auto;min-width:0}.sui-modal-header__title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;word-break:break-word}.sui-modal-header__description{margin:4px 0 0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal-header__description:first-child{margin-top:0}.sui-modal-header__close{position:absolute;top:16px;right:16px;flex-shrink:0}\n"] }]
+                    }, template: "@if (iconName(); as name) {\n  <span class=\"sui-modal-header__icon\" [attr.data-variant]=\"resolvedVariant()\" aria-hidden=\"true\">\n    <sui-icon [name]=\"name\" [size]=\"size() === 'small' ? 24 : 20\" />\n  </span>\n}\n\n<div class=\"sui-modal-header__titles\">\n  @if (title()) {\n    <h2 class=\"sui-modal-header__title\" [attr.id]=\"titleId()\">{{ title() }}</h2>\n  }\n  @if (description(); as desc) {\n    <p class=\"sui-modal-header__description\" [attr.id]=\"descriptionId()\">{{ desc }}</p>\n  }\n</div>\n\n@if (showClose()) {\n  <sui-compact-button\n    class=\"sui-modal-header__close\"\n    icon=\"close-line\"\n    variantStyle=\"ghost\"\n    size=\"large\"\n    ariaLabel=\"Cerrar\"\n    (clicked)=\"closed.emit()\"\n  />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;align-items:center;flex-shrink:0;gap:16px;padding:16px 56px 16px 20px;min-height:80px;background:var(--sui-bg-white-0, #fff);border-bottom:1px solid var(--sui-stroke-soft-200, #ebebeb);position:relative;overflow:hidden;box-sizing:border-box}:host([data-sui-size=small]){min-height:56px;gap:12px}:host([data-has-icon]){gap:14px}.sui-modal-header__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:flex-start;padding:10px;border-radius:var(--sui-radius-full, 999px)}.sui-modal-header__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal-header__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal-header__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal-header__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal-header__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f5f7fa);color:var(--sui-icon-sub-600, #5c5c5c)}:host([data-sui-size=small]) .sui-modal-header__icon{padding:0;background:transparent;align-self:center}.sui-modal-header__titles{display:block;flex:1 1 auto;min-width:0}.sui-modal-header__title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 14px);font-weight:var(--sui-type-label-sm-weight, 500);line-height:var(--sui-type-label-sm-line, 20px);letter-spacing:var(--sui-type-label-sm-spacing, -.006em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;word-break:break-word}.sui-modal-header__description{margin:4px 0 0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-xs-size, 12px);font-weight:var(--sui-type-paragraph-xs-weight, 400);line-height:var(--sui-type-paragraph-xs-line, 16px);letter-spacing:0;color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal-header__description:first-child{margin-top:0}.sui-modal-header__close{position:absolute;top:16px;right:16px;flex-shrink:0}@media(max-width:767px){.sui-modal-header__close ::ng-deep .sui-compact-button__el{position:relative}.sui-modal-header__close ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:calc((100% - 44px)/2)}}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconVariant", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], descriptionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionId", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
@@ -12699,7 +12699,7 @@ class SuiModal {
         container?.focus({ preventScroll: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModal, isStandalone: true, selector: "sui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, statusAlignment: { classPropertyName: "statusAlignment", publicName: "statusAlignment", isSignal: true, isRequired: false, transformFunction: null }, backdropBlur: { classPropertyName: "backdropBlur", publicName: "backdropBlur", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-modal-open": "open() ? \"\" : null", "attr.data-sui-modal-fullscreen": "esFullscreen() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyEl"], descendants: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Overlay backdrop -->\n  <div\n    class=\"sui-modal__backdrop\"\n    [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n  <div\n    class=\"sui-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"description() ? descId : null\"\n  >\n    <!-- Container \u2014 click stops propagation so it doesn't close.\n         tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n         (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n    <div\n      #container\n      class=\"sui-modal__container\"\n      [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n      [class.sui-modal__container--fullscreen]=\"esFullscreen()\"\n      [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n      [attr.data-sui-size]=\"size()\"\n      tabindex=\"-1\"\n      (click)=\"onContainerClick($event)\"\n    >\n      <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n           Figma 466:4778). En modo Status el icono+texto viven en el body\n           (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n      @if (isStatus()) {\n        @if (showClose()) {\n          <sui-compact-button\n            class=\"sui-modal__close-floating\"\n            icon=\"close-line\"\n            variantStyle=\"ghost\"\n            size=\"large\"\n            ariaLabel=\"Cerrar\"\n            (clicked)=\"close()\"\n          />\n        }\n      } @else if (title() || showClose()) {\n        <sui-modal-header\n          class=\"sui-modal__header\"\n          [title]=\"title() ?? ''\"\n          [description]=\"description()\"\n          [size]=\"description() ? 'medium' : 'small'\"\n          [iconVariant]=\"iconVariant()\"\n          [icon]=\"headerIcon()\"\n          [showClose]=\"showClose()\"\n          [titleId]=\"titleId\"\n          [descriptionId]=\"descId\"\n          (closed)=\"close()\"\n        />\n      }\n\n      <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n      <div #bodyEl\n           class=\"sui-modal__body\"\n           [class.sui-modal__body--full]=\"fullBody()\"\n           [class.sui-modal__body--status]=\"isStatus()\">\n\n        <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n             centrado; horizontal (480:1366) = tile + texto en fila, alineado\n             a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n        @if (isStatus()) {\n          <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n            <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n              <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n            </div>\n            @if (title() || description()) {\n              <div class=\"sui-modal__status-text\">\n                @if (title()) {\n                  <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n                }\n                @if (description()) {\n                  <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <ng-content />\n      </div>\n\n      <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n           o markup custom. -->\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen ::ng-deep [slot=footer]{border-top:none}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none;filter:drop-shadow(0 16px 32px rgba(14,18,27,.1))}}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiModalHeader, selector: "sui-modal-header", inputs: ["title", "description", "size", "iconVariant", "icon", "showClose", "titleId", "descriptionId"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModal, isStandalone: true, selector: "sui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, statusAlignment: { classPropertyName: "statusAlignment", publicName: "statusAlignment", isSignal: true, isRequired: false, transformFunction: null }, backdropBlur: { classPropertyName: "backdropBlur", publicName: "backdropBlur", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-modal-open": "open() ? \"\" : null", "attr.data-sui-modal-fullscreen": "esFullscreen() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyEl"], descendants: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Overlay backdrop -->\n  <div\n    class=\"sui-modal__backdrop\"\n    [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n  <div\n    class=\"sui-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"description() ? descId : null\"\n  >\n    <!-- Container \u2014 click stops propagation so it doesn't close.\n         tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n         (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n    <div\n      #container\n      class=\"sui-modal__container\"\n      [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n      [class.sui-modal__container--fullscreen]=\"esFullscreen()\"\n      [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n      [attr.data-sui-size]=\"size()\"\n      tabindex=\"-1\"\n      (click)=\"onContainerClick($event)\"\n    >\n      <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n           Figma 466:4778). En modo Status el icono+texto viven en el body\n           (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n      @if (isStatus()) {\n        @if (showClose()) {\n          <sui-compact-button\n            class=\"sui-modal__close-floating\"\n            icon=\"close-line\"\n            variantStyle=\"ghost\"\n            size=\"large\"\n            ariaLabel=\"Cerrar\"\n            (clicked)=\"close()\"\n          />\n        }\n      } @else if (title() || showClose()) {\n        <sui-modal-header\n          class=\"sui-modal__header\"\n          [title]=\"title() ?? ''\"\n          [description]=\"description()\"\n          [size]=\"description() ? 'medium' : 'small'\"\n          [iconVariant]=\"iconVariant()\"\n          [icon]=\"headerIcon()\"\n          [showClose]=\"showClose()\"\n          [titleId]=\"titleId\"\n          [descriptionId]=\"descId\"\n          (closed)=\"close()\"\n        />\n      }\n\n      <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n      <div #bodyEl\n           class=\"sui-modal__body\"\n           [class.sui-modal__body--full]=\"fullBody()\"\n           [class.sui-modal__body--status]=\"isStatus()\">\n\n        <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n             centrado; horizontal (480:1366) = tile + texto en fila, alineado\n             a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n        @if (isStatus()) {\n          <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n            <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n              <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n            </div>\n            @if (title() || description()) {\n              <div class=\"sui-modal__status-text\">\n                @if (title()) {\n                  <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n                }\n                @if (description()) {\n                  <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <ng-content />\n      </div>\n\n      <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n           o markup custom. -->\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen ::ng-deep [slot=footer]{border-top:none}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none;filter:drop-shadow(0 16px 32px rgba(14,18,27,.1))}}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}@media(max-width:767px){.sui-modal__close-floating ::ng-deep .sui-compact-button__el{position:relative}.sui-modal__close-floating ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:calc((100% - 44px)/2)}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiModalHeader, selector: "sui-modal-header", inputs: ["title", "description", "size", "iconVariant", "icon", "showClose", "titleId", "descriptionId"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, decorators: [{
             type: Component,
@@ -12708,7 +12708,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.title]': 'null',
                         '[attr.data-sui-modal-open]': 'open() ? "" : null',
                         '[attr.data-sui-modal-fullscreen]': 'esFullscreen() ? "" : null',
-                    }, template: "@if (open()) {\n  <!-- Overlay backdrop -->\n  <div\n    class=\"sui-modal__backdrop\"\n    [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n  <div\n    class=\"sui-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"description() ? descId : null\"\n  >\n    <!-- Container \u2014 click stops propagation so it doesn't close.\n         tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n         (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n    <div\n      #container\n      class=\"sui-modal__container\"\n      [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n      [class.sui-modal__container--fullscreen]=\"esFullscreen()\"\n      [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n      [attr.data-sui-size]=\"size()\"\n      tabindex=\"-1\"\n      (click)=\"onContainerClick($event)\"\n    >\n      <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n           Figma 466:4778). En modo Status el icono+texto viven en el body\n           (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n      @if (isStatus()) {\n        @if (showClose()) {\n          <sui-compact-button\n            class=\"sui-modal__close-floating\"\n            icon=\"close-line\"\n            variantStyle=\"ghost\"\n            size=\"large\"\n            ariaLabel=\"Cerrar\"\n            (clicked)=\"close()\"\n          />\n        }\n      } @else if (title() || showClose()) {\n        <sui-modal-header\n          class=\"sui-modal__header\"\n          [title]=\"title() ?? ''\"\n          [description]=\"description()\"\n          [size]=\"description() ? 'medium' : 'small'\"\n          [iconVariant]=\"iconVariant()\"\n          [icon]=\"headerIcon()\"\n          [showClose]=\"showClose()\"\n          [titleId]=\"titleId\"\n          [descriptionId]=\"descId\"\n          (closed)=\"close()\"\n        />\n      }\n\n      <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n      <div #bodyEl\n           class=\"sui-modal__body\"\n           [class.sui-modal__body--full]=\"fullBody()\"\n           [class.sui-modal__body--status]=\"isStatus()\">\n\n        <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n             centrado; horizontal (480:1366) = tile + texto en fila, alineado\n             a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n        @if (isStatus()) {\n          <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n            <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n              <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n            </div>\n            @if (title() || description()) {\n              <div class=\"sui-modal__status-text\">\n                @if (title()) {\n                  <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n                }\n                @if (description()) {\n                  <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <ng-content />\n      </div>\n\n      <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n           o markup custom. -->\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen ::ng-deep [slot=footer]{border-top:none}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none;filter:drop-shadow(0 16px 32px rgba(14,18,27,.1))}}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"] }]
+                    }, template: "@if (open()) {\n  <!-- Overlay backdrop -->\n  <div\n    class=\"sui-modal__backdrop\"\n    [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n  <div\n    class=\"sui-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"description() ? descId : null\"\n  >\n    <!-- Container \u2014 click stops propagation so it doesn't close.\n         tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n         (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n    <div\n      #container\n      class=\"sui-modal__container\"\n      [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n      [class.sui-modal__container--fullscreen]=\"esFullscreen()\"\n      [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n      [attr.data-sui-size]=\"size()\"\n      tabindex=\"-1\"\n      (click)=\"onContainerClick($event)\"\n    >\n      <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n           Figma 466:4778). En modo Status el icono+texto viven en el body\n           (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n      @if (isStatus()) {\n        @if (showClose()) {\n          <sui-compact-button\n            class=\"sui-modal__close-floating\"\n            icon=\"close-line\"\n            variantStyle=\"ghost\"\n            size=\"large\"\n            ariaLabel=\"Cerrar\"\n            (clicked)=\"close()\"\n          />\n        }\n      } @else if (title() || showClose()) {\n        <sui-modal-header\n          class=\"sui-modal__header\"\n          [title]=\"title() ?? ''\"\n          [description]=\"description()\"\n          [size]=\"description() ? 'medium' : 'small'\"\n          [iconVariant]=\"iconVariant()\"\n          [icon]=\"headerIcon()\"\n          [showClose]=\"showClose()\"\n          [titleId]=\"titleId\"\n          [descriptionId]=\"descId\"\n          (closed)=\"close()\"\n        />\n      }\n\n      <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n      <div #bodyEl\n           class=\"sui-modal__body\"\n           [class.sui-modal__body--full]=\"fullBody()\"\n           [class.sui-modal__body--status]=\"isStatus()\">\n\n        <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n             centrado; horizontal (480:1366) = tile + texto en fila, alineado\n             a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n        @if (isStatus()) {\n          <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n            <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n              <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n            </div>\n            @if (title() || description()) {\n              <div class=\"sui-modal__status-text\">\n                @if (title()) {\n                  <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n                }\n                @if (description()) {\n                  <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <ng-content />\n      </div>\n\n      <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n           o markup custom. -->\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen ::ng-deep [slot=footer]{border-top:none}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;border:none;transform:translateZ(0);height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none;filter:drop-shadow(0 16px 32px rgba(14,18,27,.1))}}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px;height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__body{scrollbar-width:none}.sui-modal__body::-webkit-scrollbar{display:none}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}@media(max-width:767px){.sui-modal__close-floating ::ng-deep .sui-compact-button__el{position:relative}.sui-modal__close-floating ::ng-deep .sui-compact-button__el:before{content:\"\";position:absolute;inset:calc((100% - 44px)/2)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], iconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconVariant", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], statusAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusAlignment", required: false }] }], backdropBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropBlur", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], fullBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullBody", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], containerRef: [{
                 type: ViewChild,
                 args: ['container']
@@ -17632,6 +17632,185 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<sui-switch\n  class=\"sui-switch-label__switch\"\n  [size]=\"controlSize()\"\n  [checked]=\"effectiveActive()\"\n  [disabled]=\"isDisabled()\"\n  [attr.aria-labelledby]=\"labelId\"\n  [attr.aria-describedby]=\"description() ? descriptionId : null\"\n  (checkedChange)=\"onSwitchChange($event)\"\n/>\n\n<div class=\"sui-switch-label__content\">\n  <div class=\"sui-switch-label__title\">\n    <span class=\"sui-switch-label__label\" [id]=\"labelId\">{{ label() }}</span>\n    @if (sublabel(); as sl) {\n      <span class=\"sui-switch-label__sublabel\">{{ sl }}</span>\n    }\n    @if (badgeCfg(); as bcfg) {\n      <sui-badge\n        class=\"sui-switch-label__badge\"\n        [color]=\"bcfg.color ?? 'orange'\"\n        [variant]=\"bcfg.variant ?? 'light'\"\n        [size]=\"bcfg.size ?? 'small'\"\n      >{{ bcfg.label }}</sui-badge>\n    }\n  </div>\n\n  @if (description(); as desc) {\n    <p class=\"sui-switch-label__description\" [id]=\"descriptionId\">{{ desc }}</p>\n\n    @if (linkCfg(); as link) {\n      <!-- Homologado con checkbox-label: sui-link-button (antes <button> crudo\n           con estilos propios) + soporte href/target/rel. -->\n      <sui-link-button\n        variant=\"primary\"\n        size=\"small\"\n        [disabled]=\"isDisabled()\"\n        [href]=\"link.href ?? null\"\n        [target]=\"link.target ?? null\"\n        [rel]=\"link.rel ?? null\"\n        (clicked)=\"onLinkClick($event)\"\n      >{{ link.label }}</sui-link-button>\n    }\n  }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;font-family:var(--sui-font-sans, \"Inter\", system-ui, sans-serif);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;-webkit-tap-highlight-color:transparent}:host([data-sui-flip]) .sui-switch-label__switch{order:2}:host([data-sui-flip]) .sui-switch-label__content{order:1}:host([data-sui-disabled]){cursor:not-allowed}:host([data-sui-disabled]) .sui-switch-label__content{opacity:.5}:host([data-sui-disabled]) .sui-switch-label__switch{opacity:.5}.sui-switch-label__switch{flex-shrink:0}.sui-switch-label__content{display:flex;flex:1 0 0;min-width:0;flex-direction:column;align-items:flex-start;gap:4px}:host([data-sui-with-description]) .sui-switch-label__content{gap:10px}.sui-switch-label__title{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.sui-switch-label__label{font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950)}:host([data-sui-with-description]) .sui-switch-label__label{font-weight:500}.sui-switch-label__sublabel{font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600)}.sui-switch-label__badge{flex-shrink:0}.sui-switch-label__description{margin:0;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0;color:var(--sui-text-sub-600);word-break:break-word}:host([data-sui-size=large]) .sui-switch-label__label,:host([data-sui-size=xlarge]) .sui-switch-label__label{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-size=xlarge]) .sui-switch-label__content{padding-top:2px}:host([data-sui-size=\"2xlarge\"]){min-height:44px;align-items:center}:host([data-sui-size=\"2xlarge\"]) .sui-switch-label__label{font-size:var(--sui-type-paragraph-md-size, 16px);line-height:var(--sui-type-paragraph-md-line, 24px);letter-spacing:var(--sui-type-paragraph-md-spacing, -.011em)}:host([data-sui-size=\"2xlarge\"][data-sui-with-description]){align-items:flex-start}:host([data-sui-size=\"2xlarge\"][data-sui-with-description]) .sui-switch-label__content{padding-top:2px}\n"] }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], sublabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "sublabel", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }], linkClick: [{ type: i0.Output, args: ["linkClick"] }] } });
 
+/**
+ * Pista de scroll horizontal — canon (aprobado por el dueño, 05-10-2026).
+ *
+ * Un contenedor con `overflow-x: auto` y la barra oculta no avisa que hay más:
+ * en el teléfono una tabla muestra 1 de 5 columnas y parece completa; en
+ * escritorio con mouse (Windows) solo se llega a lo oculto con Shift+rueda.
+ * La pista tiene dos partes:
+ *
+ *   1. Degradado en el borde que tiene contenido oculto (izquierdo y/o derecho),
+ *      del color de fondo del contenedor (`--sui-pista-de-scroll-fondo`, default
+ *      `--sui-bg-white-0`; funciona en oscuro porque el token se invierte).
+ *   2. Flechas (botón redondo) SOLO con puntero fino (`hover: hover` +
+ *      `pointer: fine`): desplazan ~80 % del ancho visible. En táctil no hay
+ *      flechas: se desliza con el dedo y el degradado basta.
+ *
+ * Una sola implementación para todo el DS, en dos piezas:
+ *   - `[suiPistaDeScroll]` va en el elemento que scrollea: mide el estado
+ *     (`hayAntes` / `hayDespues`) con su propio `scroll` (nativo y pasivo) +
+ *     `ResizeObserver`, sin listeners globales, y expone `desplazar()`.
+ *   - `<sui-pista-de-scroll>` envuelve a ese elemento (es el contenedor
+ *     `position: relative`) y dibuja degradados y flechas encima.
+ *
+ * Uso interno (sui-tab-chips, sui-table):
+ *   <sui-pista-de-scroll>
+ *     <nav class="…" [suiPistaDeScroll]="pistaDeScroll()">…</nav>
+ *   </sui-pista-de-scroll>
+ *
+ * Si el contenido cambia sin que cambie el ancho del scroller (chips, filas,
+ * columnas nuevas), el componente llama `medir()` desde un `afterRenderEffect`.
+ */
+class SuiPistaDeScroll {
+    /** Prende la pista (default). `false` la apaga: sin degradado ni flechas. */
+    activa = input(true, { ...(ngDevMode ? { debugName: "activa" } : /* istanbul ignore next */ {}), alias: 'suiPistaDeScroll', transform: booleanAttribute });
+    el = inject(ElementRef).nativeElement;
+    _antes = signal(false, ...(ngDevMode ? [{ debugName: "_antes" }] : /* istanbul ignore next */ []));
+    _despues = signal(false, ...(ngDevMode ? [{ debugName: "_despues" }] : /* istanbul ignore next */ []));
+    /** Hay contenido oculto a la izquierda (el scroll no está al inicio). */
+    hayAntes = computed(() => this.activa() && this._antes(), ...(ngDevMode ? [{ debugName: "hayAntes" }] : /* istanbul ignore next */ []));
+    /** Hay contenido oculto a la derecha (el scroll no llegó al final). */
+    hayDespues = computed(() => this.activa() && this._despues(), ...(ngDevMode ? [{ debugName: "hayDespues" }] : /* istanbul ignore next */ []));
+    _ro;
+    /** El scroller se desliza (overflow-x no es hidden/clip). Se cachea fuera del scroll. */
+    _desliza = true;
+    _onScroll = () => this.actualizar();
+    constructor() {
+        afterNextRender(() => {
+            this.medir();
+            /* Listener nativo y pasivo, NO un host listener: el de Angular marcaría
+               la vista del componente dueño (la tabla entera) en cada evento de
+               scroll, a 60-120 Hz durante un fling. Así solo cambian dos signals y
+               se refresca únicamente la vista de <sui-pista-de-scroll>. */
+            this.el.addEventListener('scroll', this._onScroll, { passive: true });
+            /* El ancho del scroller cambia con la ventana o el layout: se re-mide.
+               jsdom (tests) no trae ResizeObserver. */
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            this._ro = new ResizeObserver(() => this.medir());
+            this._ro.observe(this.el);
+        });
+        inject(DestroyRef).onDestroy(() => {
+            this._ro?.disconnect();
+            this.el.removeEventListener('scroll', this._onScroll);
+        });
+    }
+    /**
+     * Re-mide todo: si el scroller se desliza (estilo computado) y si hay
+     * contenido oculto a cada lado. Para cambios de layout o de contenido; el
+     * scroll usa `actualizar()`, que no lee estilos.
+     */
+    medir() {
+        /* Un scroller con overflow hidden/clip (la tabla en escritorio) no se
+           desliza: no se muestra pista aunque el contenido desborde. */
+        const ox = typeof getComputedStyle === 'function' ? getComputedStyle(this.el).overflowX : '';
+        this._desliza = ox !== 'hidden' && ox !== 'clip';
+        this.actualizar();
+    }
+    /** Recalcula los dos lados con 3 lecturas de layout (camino del scroll). */
+    actualizar() {
+        const el = this.el;
+        if (!this.activa() || !this._desliza) {
+            this._antes.set(false);
+            this._despues.set(false);
+            return;
+        }
+        const max = el.scrollWidth - el.clientWidth;
+        const left = Math.abs(el.scrollLeft);
+        this._antes.set(max > 1 && left > 1);
+        this._despues.set(max > 1 && left < max - 1);
+    }
+    /** Desplaza ~80 % del ancho visible hacia un lado (−1 izquierda, 1 derecha). */
+    desplazar(sentido) {
+        const el = this.el;
+        const reducido = typeof matchMedia === 'function'
+            && matchMedia('(prefers-reduced-motion: reduce)').matches;
+        el.scrollBy?.({
+            left: sentido * el.clientWidth * 0.8,
+            behavior: reducido ? 'auto' : 'smooth',
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiPistaDeScroll, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: SuiPistaDeScroll, isStandalone: true, selector: "[suiPistaDeScroll]", inputs: { activa: { classPropertyName: "activa", publicName: "suiPistaDeScroll", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["suiPistaDeScroll"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiPistaDeScroll, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[suiPistaDeScroll]',
+                    exportAs: 'suiPistaDeScroll',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { activa: [{ type: i0.Input, args: [{ isSignal: true, alias: "suiPistaDeScroll", required: false }] }] } });
+/**
+ * Contenedor de la pista: envuelve al elemento con `[suiPistaDeScroll]` y
+ * dibuja degradados y flechas encima. Ver `SuiPistaDeScroll`.
+ *
+ * Variables CSS (las fija el componente que lo usa):
+ *   --sui-pista-de-scroll-fondo       color del degradado (default bg-white-0)
+ *   --sui-pista-de-scroll-flecha-top  centro vertical de las flechas (default 50%)
+ *   --sui-pista-de-scroll-flecha-size diámetro de las flechas (default 32px)
+ */
+class SuiPistaDeScrollMarco {
+    /** Oculta la pista del lado izquierdo (p. ej. la tabla con columna fija). */
+    ocultarInicio = input(false, ...(ngDevMode ? [{ debugName: "ocultarInicio" }] : /* istanbul ignore next */ []));
+    pista = contentChild(SuiPistaDeScroll, ...(ngDevMode ? [{ debugName: "pista" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiPistaDeScrollMarco, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiPistaDeScrollMarco, isStandalone: true, selector: "sui-pista-de-scroll", inputs: { ocultarInicio: { classPropertyName: "ocultarInicio", publicName: "ocultarInicio", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "pista", first: true, predicate: SuiPistaDeScroll, descendants: true, isSignal: true }], ngImport: i0, template: `
+    <ng-content />
+    @if (pista(); as p) {
+      @if (p.hayAntes() && !ocultarInicio()) {
+        <span class="sui-pista__borde sui-pista__borde--inicio" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="sui-pista__flecha sui-pista__flecha--inicio"
+          tabindex="-1"
+          aria-label="Ver más a la izquierda"
+          (click)="p.desplazar(-1)"
+        ><sui-icon name="arrow-left-s-line" [size]="18" /></button>
+      }
+      @if (p.hayDespues()) {
+        <span class="sui-pista__borde sui-pista__borde--fin" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="sui-pista__flecha sui-pista__flecha--fin"
+          tabindex="-1"
+          aria-label="Ver más a la derecha"
+          (click)="p.desplazar(1)"
+        ><sui-icon name="arrow-right-s-line" [size]="18" /></button>
+      }
+    }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{position:relative;display:block;min-width:0}.sui-pista__borde{position:absolute;top:0;bottom:0;width:40px;pointer-events:none;z-index:2}.sui-pista__borde--inicio{left:0;background:linear-gradient(to right,var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 0%,transparent 100%)}.sui-pista__borde--fin{right:0;background:linear-gradient(to left,var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 0%,transparent 100%)}.sui-pista__flecha{display:none}@media(hover:hover)and (pointer:fine){.sui-pista__flecha{position:absolute;top:var(--sui-pista-de-scroll-flecha-top, 50%);z-index:3;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--sui-pista-de-scroll-flecha-size, 32px);height:var(--sui-pista-de-scroll-flecha-size, 32px);padding:0;border-radius:999px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);color:var(--sui-text-sub-600, #5c5c5c);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(10, 13, 20, .03));transform:translateY(-50%);cursor:pointer;pointer-events:auto;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-pista__flecha:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-pista__flecha--inicio{left:4px}.sui-pista__flecha--fin{right:4px}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiPistaDeScrollMarco, decorators: [{
+            type: Component,
+            args: [{ selector: 'sui-pista-de-scroll', standalone: true, imports: [SuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <ng-content />
+    @if (pista(); as p) {
+      @if (p.hayAntes() && !ocultarInicio()) {
+        <span class="sui-pista__borde sui-pista__borde--inicio" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="sui-pista__flecha sui-pista__flecha--inicio"
+          tabindex="-1"
+          aria-label="Ver más a la izquierda"
+          (click)="p.desplazar(-1)"
+        ><sui-icon name="arrow-left-s-line" [size]="18" /></button>
+      }
+      @if (p.hayDespues()) {
+        <span class="sui-pista__borde sui-pista__borde--fin" aria-hidden="true"></span>
+        <button
+          type="button"
+          class="sui-pista__flecha sui-pista__flecha--fin"
+          tabindex="-1"
+          aria-label="Ver más a la derecha"
+          (click)="p.desplazar(1)"
+        ><sui-icon name="arrow-right-s-line" [size]="18" /></button>
+      }
+    }
+  `, styles: ["@charset \"UTF-8\";:host{position:relative;display:block;min-width:0}.sui-pista__borde{position:absolute;top:0;bottom:0;width:40px;pointer-events:none;z-index:2}.sui-pista__borde--inicio{left:0;background:linear-gradient(to right,var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 0%,transparent 100%)}.sui-pista__borde--fin{right:0;background:linear-gradient(to left,var(--sui-pista-de-scroll-fondo, var(--sui-bg-white-0, #fff)) 0%,transparent 100%)}.sui-pista__flecha{display:none}@media(hover:hover)and (pointer:fine){.sui-pista__flecha{position:absolute;top:var(--sui-pista-de-scroll-flecha-top, 50%);z-index:3;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--sui-pista-de-scroll-flecha-size, 32px);height:var(--sui-pista-de-scroll-flecha-size, 32px);padding:0;border-radius:999px;border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #fff);color:var(--sui-text-sub-600, #5c5c5c);box-shadow:var(--sui-shadow-x-small, 0 1px 2px rgba(10, 13, 20, .03));transform:translateY(-50%);cursor:pointer;pointer-events:auto;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-pista__flecha:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-pista__flecha--inicio{left:4px}.sui-pista__flecha--fin{right:4px}}\n"] }]
+        }], propDecorators: { ocultarInicio: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocultarInicio", required: false }] }], pista: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SuiPistaDeScroll), { isSignal: true }] }] } });
+
 /**
  * SUI Tab Chips — chips horizontales scrollables (estilo "category nav" de
  * apps de food/delivery). Útil cuando hay 5+ secciones que no caben en un
@@ -17671,8 +17850,14 @@ class SuiTabChips {
     size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     /** Auto-scroll horizontal del chip activo al cambiar `value`. */
     autoScroll = input(true, ...(ngDevMode ? [{ debugName: "autoScroll" }] : /* istanbul ignore next */ []));
+    /**
+     * Pista de desborde (canon, dueño 05-10-2026): degradado en el borde con chips
+     * ocultos y, con mouse, flechas que desplazan. `false` la apaga.
+     */
+    pistaDeScroll = input(true, ...(ngDevMode ? [{ debugName: "pistaDeScroll" }] : /* istanbul ignore next */ []));
     sentinelRef;
     navRef;
+    pistaRef;
     /** Estado interno: chip pegado al top del viewport (solo si sticky=true). */
     stuck = signal(false, ...(ngDevMode ? [{ debugName: "stuck" }] : /* istanbul ignore next */ []));
     /** Normaliza el input a SuiTabChipItem[] para iteración uniforme. */
@@ -17719,6 +17904,13 @@ class SuiTabChips {
                 return;
             queueMicrotask(() => this.scrollToChip(v));
         });
+        /* La pista se re-mide cuando cambian los chips (el ancho del contenido
+           cambia sin que cambie el del nav, y eso el ResizeObserver no lo ve). */
+        afterRenderEffect(() => {
+            this.normalizedChips();
+            this.size();
+            this.pistaRef?.medir();
+        });
     }
     ngAfterViewInit() {
         if (this.sticky() && typeof IntersectionObserver !== 'undefined' && this.sentinelRef) {
@@ -17768,23 +17960,26 @@ class SuiTabChips {
         nav.scrollTo({ left: Math.max(0, offset), behavior: 'smooth' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()", "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }], ngImport: i0, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n  #nav\n  class=\"sui-tab-chips\"\n  [class.sui-tab-chips--sticky]=\"sticky()\"\n  [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n  role=\"tablist\"\n  (keydown)=\"onKeydown($event)\"\n  (focusout)=\"onFocusout($event)\"\n>\n  @for (chip of normalizedChips(); track chip.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-chips__chip\"\n      [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n      [attr.data-sui-chip-value]=\"chip.value\"\n      [attr.aria-selected]=\"value() === chip.value\"\n      [attr.tabindex]=\"tabStopValue() === chip.value ? 0 : -1\"\n      [attr.aria-label]=\"chipAriaLabel(chip)\"\n      role=\"tab\"\n      (click)=\"select(chip.value)\"\n    >\n      <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n      @if (chip.count) {\n        <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=xlarge]) .sui-tab-chips__chip{box-sizing:border-box;height:44px;padding:0 18px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count,:host([data-sui-size=xlarge]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTabChips, isStandalone: true, selector: "sui-tab-chips", inputs: { chips: { classPropertyName: "chips", publicName: "chips", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autoScroll: { classPropertyName: "autoScroll", publicName: "autoScroll", isSignal: true, isRequired: false, transformFunction: null }, pistaDeScroll: { classPropertyName: "pistaDeScroll", publicName: "pistaDeScroll", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.sui-tab-chips--host-sticky": "sticky()", "attr.data-sui-size": "size()" } }, viewQueries: [{ propertyName: "sentinelRef", first: true, predicate: ["sentinel"], descendants: true }, { propertyName: "navRef", first: true, predicate: ["nav"], descendants: true }, { propertyName: "pistaRef", first: true, predicate: SuiPistaDeScroll, descendants: true }], ngImport: i0, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<sui-pista-de-scroll\n  class=\"sui-tab-chips__pista\"\n  [class.sui-tab-chips__pista--sticky]=\"sticky()\"\n  [class.sui-tab-chips__pista--stuck]=\"sticky() && stuck()\"\n>\n  <nav\n    #nav\n    class=\"sui-tab-chips\"\n    [suiPistaDeScroll]=\"pistaDeScroll()\"\n    [class.sui-tab-chips--sticky]=\"sticky()\"\n    [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n    role=\"tablist\"\n    (keydown)=\"onKeydown($event)\"\n    (focusout)=\"onFocusout($event)\"\n  >\n    @for (chip of normalizedChips(); track chip.value) {\n      <button\n        type=\"button\"\n        class=\"sui-tab-chips__chip\"\n        [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n        [attr.data-sui-chip-value]=\"chip.value\"\n        [attr.aria-selected]=\"value() === chip.value\"\n        [attr.tabindex]=\"tabStopValue() === chip.value ? 0 : -1\"\n        [attr.aria-label]=\"chipAriaLabel(chip)\"\n        role=\"tab\"\n        (click)=\"select(chip.value)\"\n      >\n        <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n        @if (chip.count) {\n          <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n        }\n      </button>\n    }\n  </nav>\n</sui-pista-de-scroll>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips__pista{width:100%}.sui-tab-chips__pista--sticky{position:sticky;top:0;z-index:20}.sui-tab-chips__pista--stuck{--sui-pista-de-scroll-fondo: var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=xlarge]) .sui-tab-chips__chip{box-sizing:border-box;height:44px;padding:0 18px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count,:host([data-sui-size=xlarge]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"], dependencies: [{ kind: "directive", type: SuiPistaDeScroll, selector: "[suiPistaDeScroll]", inputs: ["suiPistaDeScroll"], exportAs: ["suiPistaDeScroll"] }, { kind: "component", type: SuiPistaDeScrollMarco, selector: "sui-pista-de-scroll", inputs: ["ocultarInicio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTabChips, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-tab-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
+            args: [{ selector: 'sui-tab-chips', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [SuiPistaDeScroll, SuiPistaDeScrollMarco], host: {
                         /* En modo sticky, el :host pasa a `display: contents` (ver scss) para que el
                            <nav> sticky resuelva contra el scroll container real y no contra el host
                            (que mide ~50px → el sticky no se enganchaba). Gate por clase de host. */
                         '[class.sui-tab-chips--host-sticky]': 'sticky()',
                         '[attr.data-sui-size]': 'size()',
-                    }, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<nav\n  #nav\n  class=\"sui-tab-chips\"\n  [class.sui-tab-chips--sticky]=\"sticky()\"\n  [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n  role=\"tablist\"\n  (keydown)=\"onKeydown($event)\"\n  (focusout)=\"onFocusout($event)\"\n>\n  @for (chip of normalizedChips(); track chip.value) {\n    <button\n      type=\"button\"\n      class=\"sui-tab-chips__chip\"\n      [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n      [attr.data-sui-chip-value]=\"chip.value\"\n      [attr.aria-selected]=\"value() === chip.value\"\n      [attr.tabindex]=\"tabStopValue() === chip.value ? 0 : -1\"\n      [attr.aria-label]=\"chipAriaLabel(chip)\"\n      role=\"tab\"\n      (click)=\"select(chip.value)\"\n    >\n      <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n      @if (chip.count) {\n        <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n      }\n    </button>\n  }\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{position:sticky;top:0;z-index:20;transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=xlarge]) .sui-tab-chips__chip{box-sizing:border-box;height:44px;padding:0 18px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count,:host([data-sui-size=xlarge]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], sentinelRef: [{
+                    }, template: "@if (sticky()) {\n  <div #sentinel class=\"sui-tab-chips__sentinel\" aria-hidden=\"true\"></div>\n}\n<sui-pista-de-scroll\n  class=\"sui-tab-chips__pista\"\n  [class.sui-tab-chips__pista--sticky]=\"sticky()\"\n  [class.sui-tab-chips__pista--stuck]=\"sticky() && stuck()\"\n>\n  <nav\n    #nav\n    class=\"sui-tab-chips\"\n    [suiPistaDeScroll]=\"pistaDeScroll()\"\n    [class.sui-tab-chips--sticky]=\"sticky()\"\n    [class.sui-tab-chips--stuck]=\"sticky() && stuck()\"\n    role=\"tablist\"\n    (keydown)=\"onKeydown($event)\"\n    (focusout)=\"onFocusout($event)\"\n  >\n    @for (chip of normalizedChips(); track chip.value) {\n      <button\n        type=\"button\"\n        class=\"sui-tab-chips__chip\"\n        [class.sui-tab-chips__chip--active]=\"value() === chip.value\"\n        [attr.data-sui-chip-value]=\"chip.value\"\n        [attr.aria-selected]=\"value() === chip.value\"\n        [attr.tabindex]=\"tabStopValue() === chip.value ? 0 : -1\"\n        [attr.aria-label]=\"chipAriaLabel(chip)\"\n        role=\"tab\"\n        (click)=\"select(chip.value)\"\n      >\n        <span class=\"sui-tab-chips__chip-label\">{{ chip.label }}</span>\n        @if (chip.count) {\n          <span class=\"sui-tab-chips__chip-count\" aria-hidden=\"true\">{{ chip.count }}</span>\n        }\n      </button>\n    }\n  </nav>\n</sui-pista-de-scroll>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}:host(.sui-tab-chips--host-sticky){display:contents}.sui-tab-chips__sentinel{height:1px;margin-top:16px;margin-bottom:-1px;pointer-events:none}.sui-tab-chips__pista{width:100%}.sui-tab-chips__pista--sticky{position:sticky;top:0;z-index:20}.sui-tab-chips__pista--stuck{--sui-pista-de-scroll-fondo: var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:12px 0;background:transparent;scrollbar-width:none}.sui-tab-chips::-webkit-scrollbar{display:none}.sui-tab-chips--sticky{transition:padding-top var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease),background var(--sui-motion-duration-fast, .15s) var(--sui-motion-ease-out, ease)}.sui-tab-chips--stuck{padding-top:calc(env(safe-area-inset-top,0px) + 12px);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-tab-chips__chip{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--sui-bg-white-0, #fff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);color:var(--sui-text-sub-600, #5c5c5c);font-family:var(--sui-font-sans);font-size:var(--sui-type-label-sm-size, 13px);font-weight:600;letter-spacing:var(--sui-type-label-sm-spacing, -.006em);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),border-color var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease),transform var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out, ease)}.sui-tab-chips__chip:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}.sui-tab-chips__chip:active{transform:scale(.96)}.sui-tab-chips__chip:active:not(:disabled),.sui-tab-chips__chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sui-primary-alpha-10)}.sui-tab-chips__chip--active{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff);border-color:var(--sui-bg-strong-950, #171717)}.sui-tab-chips__chip--active:hover{background:var(--sui-bg-strong-950, #171717);color:var(--sui-bg-white-0, #fff)}.sui-tab-chips__chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}:host([data-sui-size=small]) .sui-tab-chips__chip{box-sizing:border-box;height:32px;padding:0 12px;line-height:var(--sui-type-label-sm-line, 20px)}:host([data-sui-size=large]) .sui-tab-chips__chip{box-sizing:border-box;height:40px;padding:0 16px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=xlarge]) .sui-tab-chips__chip{box-sizing:border-box;height:44px;padding:0 18px;font-size:var(--sui-type-label-md-size, 16px);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em)}:host([data-sui-size=small]) .sui-tab-chips__chip-count{min-width:16px;height:16px;padding:0 5px}:host([data-sui-size=large]) .sui-tab-chips__chip-count,:host([data-sui-size=xlarge]) .sui-tab-chips__chip-count{min-width:20px;height:20px;padding:0 6px;font-size:var(--sui-type-label-xs-size, 12px)}.sui-tab-chips__chip--active .sui-tab-chips__chip-count{background:color-mix(in srgb,var(--sui-bg-white-0, #fff) 22%,transparent);color:var(--sui-bg-white-0, #fff)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { chips: [{ type: i0.Input, args: [{ isSignal: true, alias: "chips", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], autoScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoScroll", required: false }] }], pistaDeScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "pistaDeScroll", required: false }] }], sentinelRef: [{
                 type: ViewChild,
                 args: ['sentinel']
             }], navRef: [{
                 type: ViewChild,
                 args: ['nav']
+            }], pistaRef: [{
+                type: ViewChild,
+                args: [SuiPistaDeScroll]
             }] } });
 
 /**
@@ -17916,6 +18111,11 @@ class SuiTable {
     striped = input(false, ...(ngDevMode ? [{ debugName: "striped" }] : /* istanbul ignore next */ []));
     selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
     rowKey = input(...(ngDevMode ? [undefined, { debugName: "rowKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Pista de desborde (canon, dueño 05-10-2026): degradado en el borde con
+     * columnas ocultas y, con mouse, flechas que desplazan. `false` la apaga.
+     */
+    pistaDeScroll = input(true, ...(ngDevMode ? [{ debugName: "pistaDeScroll" }] : /* istanbul ignore next */ []));
     selectedRows = model(new Set(), ...(ngDevMode ? [{ debugName: "selectedRows" }] : /* istanbul ignore next */ []));
     sortKey = model(null, ...(ngDevMode ? [{ debugName: "sortKey" }] : /* istanbul ignore next */ []));
     sortDir = model(null, ...(ngDevMode ? [{ debugName: "sortDir" }] : /* istanbul ignore next */ []));
@@ -17923,9 +18123,21 @@ class SuiTable {
     sortChanged = output();
     // ── Touch scroll passthrough (fix Android) ────────────────────────────────
     scrollEl = viewChild('scrollEl', ...(ngDevMode ? [{ debugName: "scrollEl" }] : /* istanbul ignore next */ []));
+    pista = viewChild(SuiPistaDeScroll, ...(ngDevMode ? [{ debugName: "pista" }] : /* istanbul ignore next */ []));
     destroyRef = inject(DestroyRef);
     doc = inject(DOCUMENT$1);
     constructor() {
+        /* La pista se re-mide cuando cambian columnas o filas: el ancho del
+           contenido cambia sin que cambie el del scroller (el ResizeObserver de la
+           directiva no lo ve). */
+        afterRenderEffect(() => {
+            this.columns();
+            this.rows();
+            this.size();
+            this.selectable();
+            this.loading();
+            this.pista()?.medir();
+        });
         /* En Android/Chromium un container con `overflow-x: auto` ABSORBE el touch
            vertical y NO lo delega al scroll de la página (verificado en device:
            ningún `touch-action` — pan-x/pan-y/auto — lo arregla; solo quitar el
@@ -18194,18 +18406,18 @@ class SuiTable {
         return this.columns().map((_, i) => i);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTable, isStandalone: true, selector: "sui-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRows: "selectedRowsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClicked: "rowClicked", sortChanged: "sortChanged" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-striped": "striped() ? \"\" : null", "attr.data-sui-selectable": "selectable() ? \"\" : null", "attr.data-sui-loading": "loading() ? \"\" : null", "attr.data-sui-sticky": "hasStickyColumn() ? \"\" : null" } }, queries: [{ propertyName: "cellTemplates", predicate: SuiTableCellDirective }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none;display:grid;grid-template-columns:max-content}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:100%}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table{display:grid;grid-template-columns:max-content}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:100%}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}@media(hover:hover)and (pointer:fine){.sui-table__row:hover,.sui-table__row:hover .sui-table__cell{background:var(--sui-bg-weak-50)}}.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-25)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled", "focusable"], outputs: ["checkedChange"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiTooltip, selector: "[suiTooltip], [suiTooltipLarge]", inputs: ["suiTooltip", "suiTooltipLarge", "position", "suiTooltipSize", "theme", "delay", "disabled", "showArrow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiTable, isStandalone: true, selector: "sui-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, pistaDeScroll: { classPropertyName: "pistaDeScroll", publicName: "pistaDeScroll", isSignal: true, isRequired: false, transformFunction: null }, selectedRows: { classPropertyName: "selectedRows", publicName: "selectedRows", isSignal: true, isRequired: false, transformFunction: null }, sortKey: { classPropertyName: "sortKey", publicName: "sortKey", isSignal: true, isRequired: false, transformFunction: null }, sortDir: { classPropertyName: "sortDir", publicName: "sortDir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRows: "selectedRowsChange", sortKey: "sortKeyChange", sortDir: "sortDirChange", rowClicked: "rowClicked", sortChanged: "sortChanged" }, host: { properties: { "attr.data-sui-size": "size()", "attr.data-sui-striped": "striped() ? \"\" : null", "attr.data-sui-selectable": "selectable() ? \"\" : null", "attr.data-sui-loading": "loading() ? \"\" : null", "attr.data-sui-sticky": "hasStickyColumn() ? \"\" : null" } }, queries: [{ propertyName: "cellTemplates", predicate: SuiTableCellDirective }], viewQueries: [{ propertyName: "scrollEl", first: true, predicate: ["scrollEl"], descendants: true, isSignal: true }, { propertyName: "pista", first: true, predicate: SuiPistaDeScroll, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- Pista de scroll (canon, due\u00F1o 05-10-2026): degradado + flechas con mouse.\n     Con columna fija no hay pista a la izquierda: la columna pegada ya avisa. -->\n<sui-pista-de-scroll class=\"sui-table__pista\" [ocultarInicio]=\"hasStickyColumn()\">\n<div class=\"sui-table\" #scrollEl [suiPistaDeScroll]=\"pistaDeScroll()\">\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\n</sui-pista-de-scroll>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block;width:100%}.sui-table__pista{width:100%;--sui-pista-de-scroll-flecha-top: 18px;--sui-pista-de-scroll-flecha-size: 28px}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none;display:grid;grid-template-columns:max-content}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:100%}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table{display:grid;grid-template-columns:max-content}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:100%}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}@media(hover:hover)and (pointer:fine){.sui-table__row:hover,.sui-table__row:hover .sui-table__cell{background:var(--sui-bg-weak-50)}}.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-25)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SuiCheckbox, selector: "sui-checkbox", inputs: ["size", "checked", "indeterminate", "disabled", "focusable"], outputs: ["checkedChange"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "directive", type: SuiTooltip, selector: "[suiTooltip], [suiTooltipLarge]", inputs: ["suiTooltip", "suiTooltipLarge", "position", "suiTooltipSize", "theme", "delay", "disabled", "showArrow"] }, { kind: "directive", type: SuiPistaDeScroll, selector: "[suiPistaDeScroll]", inputs: ["suiPistaDeScroll"], exportAs: ["suiPistaDeScroll"] }, { kind: "component", type: SuiPistaDeScrollMarco, selector: "sui-pista-de-scroll", inputs: ["ocultarInicio"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiTable, decorators: [{
             type: Component,
-            args: [{ selector: 'sui-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet, SuiCheckbox, SuiIcon, SuiTooltip], host: {
+            args: [{ selector: 'sui-table', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet, SuiCheckbox, SuiIcon, SuiTooltip, SuiPistaDeScroll, SuiPistaDeScrollMarco], host: {
                         '[attr.data-sui-size]': 'size()',
                         '[attr.data-sui-striped]': 'striped() ? "" : null',
                         '[attr.data-sui-selectable]': 'selectable() ? "" : null',
                         '[attr.data-sui-loading]': 'loading() ? "" : null',
                         '[attr.data-sui-sticky]': 'hasStickyColumn() ? "" : null',
-                    }, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"sui-table\" #scrollEl>\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block;width:100%}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none;display:grid;grid-template-columns:max-content}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:100%}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table{display:grid;grid-template-columns:max-content}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:100%}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}@media(hover:hover)and (pointer:fine){.sui-table__row:hover,.sui-table__row:hover .sui-table__cell{background:var(--sui-bg-weak-50)}}.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-25)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], cellTemplates: [{
+                    }, template: "<!-- \u2550\u2550 SUI Table \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- Pista de scroll (canon, due\u00F1o 05-10-2026): degradado + flechas con mouse.\n     Con columna fija no hay pista a la izquierda: la columna pegada ya avisa. -->\n<sui-pista-de-scroll class=\"sui-table__pista\" [ocultarInicio]=\"hasStickyColumn()\">\n<div class=\"sui-table\" #scrollEl [suiPistaDeScroll]=\"pistaDeScroll()\">\n\n  <!-- Header -->\n  <div class=\"sui-table__header\">\n    <!-- Checkbox header (selectable mode) \u2014 compone sui-checkbox (canon) -->\n    @if (selectable()) {\n      <div class=\"sui-table__header-cell sui-table__header-cell--checkbox\">\n        <sui-checkbox\n          [checked]=\"allSelected\"\n          [indeterminate]=\"partialSelected\"\n          (checkedChange)=\"toggleAll()\"\n          (click)=\"$event.stopPropagation()\"\n          aria-label=\"Seleccionar todas las filas\"\n        />\n      </div>\n    }\n\n    @for (col of columns(); track col.key) {\n      <div\n        class=\"sui-table__header-cell\"\n        [class.sui-table__header-cell--sortable]=\"col.sortable && !col.disabled\"\n        [class.sui-table__header-cell--sorted]=\"isSortActive(col.key)\"\n        [class.sui-table__header-cell--disabled]=\"col.disabled\"\n        [class.sui-table__header-cell--center]=\"col.align === 'center'\"\n        [class.sui-table__header-cell--right]=\"col.align === 'right'\"\n        [class.sui-table__header-cell--empty]=\"!col.label\"\n        [class.sui-table__header-cell--sticky]=\"col.sticky\"\n        [style.width]=\"col.width ?? null\"\n        [style.min-width]=\"colMinWidth(col)\"\n        [style.max-width]=\"col.maxWidth ?? null\"\n        [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n        (click)=\"!col.disabled && onSort(col)\"\n        [attr.tabindex]=\"col.sortable && !col.disabled ? '0' : null\"\n        [attr.role]=\"col.sortable ? 'columnheader' : null\"\n        [attr.aria-disabled]=\"col.disabled ? 'true' : null\"\n        [attr.aria-sort]=\"col.sortable ? (isSortActive(col.key) ? (sortDir() === 'asc' ? 'ascending' : 'descending') : 'none') : null\"\n        (keydown.enter)=\"!col.disabled && onSort(col)\"\n        (keydown.space)=\"$event.preventDefault(); !col.disabled && onSort(col)\"\n      >\n        @if (col.label) {\n          <span class=\"sui-table__header-label\">{{ col.label }}</span>\n        }\n        @if (col.sortable) {\n          <span class=\"sui-table__sort-icon\" [class.sui-table__sort-icon--active]=\"isSortActive(col.key)\">\n            @if (!isSortActive(col.key)) {\n              <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n            } @else if (sortDir() === 'asc') {\n              <sui-icon name=\"arrow-up-s-fill\" [size]=\"20\" />\n            } @else {\n              <sui-icon name=\"arrow-down-s-fill\" [size]=\"20\" />\n            }\n          </span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Body: Loading skeleton -->\n  @if (loading()) {\n    <div class=\"sui-table__body\">\n      @for (sk of skeletonRows; track sk) {\n        <div class=\"sui-table__row sui-table__row--skeleton\">\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\">\n              <span class=\"sui-table__skeleton-box sui-table__skeleton-box--sm\"></span>\n            </div>\n          }\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <span class=\"sui-table__skeleton-box\"></span>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Body: Empty state -->\n  @else if (rows().length === 0) {\n    <div class=\"sui-table__empty\">\n      <sui-icon name=\"inbox-line\" [size]=\"40\" class=\"sui-table__empty-icon\" />\n      <p class=\"sui-table__empty-msg\">{{ emptyMessage() }}</p>\n    </div>\n  }\n\n  <!-- Body: Data rows -->\n  @else {\n    <div class=\"sui-table__body\">\n      @for (row of rows(); track getRowKey(row, $index); let i = $index) {\n        <div\n          class=\"sui-table__row\"\n          [class.sui-table__row--selected]=\"selectedRows().has(getRowKey(row, i))\"\n          [class.sui-table__row--striped]=\"striped() && i % 2 === 1\"\n          (click)=\"rowClicked.emit(row)\"\n        >\n          <!-- Checkbox column \u2014 compone sui-checkbox (canon) -->\n          @if (selectable()) {\n            <div class=\"sui-table__cell sui-table__cell--checkbox\" (click)=\"$event.stopPropagation()\">\n              <sui-checkbox\n                [checked]=\"selectedRows().has(getRowKey(row, i))\"\n                (checkedChange)=\"toggleRow(row, i)\"\n                aria-label=\"Seleccionar fila\"\n              />\n            </div>\n          }\n\n          <!-- Data columns -->\n          @for (col of columns(); track col.key) {\n            <div\n              class=\"sui-table__cell\"\n              [class.sui-table__cell--center]=\"col.align === 'center'\"\n              [class.sui-table__cell--right]=\"col.align === 'right'\"\n              [class.sui-table__cell--sticky]=\"col.sticky\"\n              [class.sui-table__cell--leading]=\"cellPriority(col) === 'leading'\"\n              [class.sui-table__cell--passive]=\"cellPriority(col) === 'passive'\"\n              [class.sui-table__cell--none]=\"cellPriority(col) === 'none'\"\n              [style.width]=\"col.width ?? null\"\n              [style.min-width]=\"colMinWidth(col)\"\n              [style.max-width]=\"col.maxWidth ?? null\"\n              [style.flex]=\"col.width ? '0 0 ' + col.width : '1'\"\n            >\n              <!-- Custom template via SuiTableCellDirective -->\n              @if (getTemplate(col.key); as tmpl) {\n                <ng-container *ngTemplateOutlet=\"tmpl.templateRef; context: { $implicit: row }\"></ng-container>\n              } @else if (getCellDescription(row, col); as desc) {\n                <!-- Texto + sub-texto (Figma Priority=Leading, 2da l\u00EDnea XSmall) -->\n                <span class=\"sui-table__cell-block\">\n                  <span\n                    class=\"sui-table__cell-text\"\n                    [class.sui-table__cell-text--truncate]=\"col.truncate\"\n                    [suiTooltip]=\"getCellTooltip(row, col)\"\n                  >{{ getCellValue(row, col.key) }}</span>\n                  <span class=\"sui-table__cell-desc\">{{ desc }}</span>\n                </span>\n              } @else if (col.truncate) {\n                <!-- Texto truncado + tooltip con el valor completo -->\n                <span\n                  class=\"sui-table__cell-text sui-table__cell-text--truncate\"\n                  [suiTooltip]=\"getCellTooltip(row, col)\"\n                >{{ getCellValue(row, col.key) }}</span>\n              } @else {\n                <!-- Default text rendering -->\n                <span class=\"sui-table__cell-text\">{{ getCellValue(row, col.key) }}</span>\n              }\n            </div>\n          }\n        </div>\n\n        <!-- Row divider (not after last row) -->\n        @if (i < rows().length - 1) {\n          <div class=\"sui-table__divider\"></div>\n        }\n      }\n    </div>\n  }\n\n</div>\n</sui-pista-de-scroll>\n", styles: ["@charset \"UTF-8\";.mp-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1}.mp-badge--green{background:var(--admin-success-bg, #dcfce7);color:var(--admin-success, #16a34a)}.mp-badge--red{background:var(--admin-error-bg, #fee2e2);color:var(--admin-error, #ef4444)}.mp-badge--orange{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.mp-badge--blue{background:var(--admin-info-bg, #dbeafe);color:#2563eb}.mp-badge--gray{background:var(--admin-bg-tertiary, #f3f4f6);color:var(--admin-text-tertiary, #6b7280)}.mp-badge--sm{height:20px;padding:0 8px;font-size:11px}.mp-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:6px;border:1px solid transparent;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s ease}.mp-action-btn:disabled{opacity:.5;cursor:not-allowed}.mp-action-btn--activate{background:var(--admin-success, #16a34a);color:#fff}.mp-action-btn--activate:hover{background:#15803d}.mp-action-btn--renew{background:var(--admin-info, #3b82f6);color:#fff}.mp-action-btn--renew:hover{background:#2563eb}.mp-action-btn--suspend{background:var(--admin-bg-primary, #fff);color:var(--admin-error, #ef4444);border-color:#fca5a5}.mp-action-btn--suspend:hover{background:var(--admin-error-bg, #fee2e2)}.mp-action-btn--danger{background:#dc2626;color:#fff;border:none}.mp-action-btn--danger:hover{background:#b91c1c}.mp-action-btn--outline{background:var(--admin-bg-primary, #fff);color:var(--admin-text-secondary, #374151);border-color:var(--admin-border-primary, #e5e7eb)}.mp-action-btn--outline:hover{background:var(--admin-bg-hover, #f9fafb)}.mp-action-btn--icon{width:28px;height:28px;padding:0;background:transparent;color:var(--admin-text-muted, #9ca3af);border:none}.mp-action-btn--icon:hover{background:var(--admin-bg-hover, #f9fafb);color:var(--admin-text-primary, #171717)}.mp-action-btn--icon-danger{width:28px;height:28px;padding:0;background:transparent;color:#dc2626;border:none}.mp-action-btn--icon-danger:hover{background:var(--admin-error-bg, #fee2e2);color:#dc2626}:host{display:block;width:100%}.sui-table__pista{width:100%;--sui-pista-de-scroll-flecha-top: 18px;--sui-pista-de-scroll-flecha-size: 28px}.sui-table{display:flex;flex-direction:column;width:100%;overflow:hidden;font-family:var(--sui-font-sans);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0;font-optical-sizing:auto}:host([data-sui-sticky]) .sui-table__header,:host([data-sui-sticky]) .sui-table__row{overflow:visible}@media(max-width:767px){.sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none;display:grid;grid-template-columns:max-content}}@media(max-width:767px)and (max-width:767px){.sui-table{scrollbar-width:none}.sui-table::-webkit-scrollbar{display:none;width:0;height:0}}@media(max-width:767px){.sui-table .sui-table__header,.sui-table .sui-table__body{min-width:100%}.sui-table .sui-table__cell,.sui-table .sui-table__header-cell{min-width:120px}.sui-table .sui-table__cell--checkbox,.sui-table .sui-table__header-cell--checkbox{min-width:44px}.sui-table .sui-table__header-cell--empty{min-width:0}}:host([data-sui-sticky]) .sui-table{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;background:var(--sui-bg-white-0);overscroll-behavior-y:none}@media(max-width:767px){:host([data-sui-sticky]) .sui-table{scrollbar-width:none}:host([data-sui-sticky]) .sui-table::-webkit-scrollbar{display:none;width:0;height:0}}:host([data-sui-sticky]) .sui-table{display:grid;grid-template-columns:max-content}:host([data-sui-sticky]) .sui-table .sui-table__header,:host([data-sui-sticky]) .sui-table .sui-table__body{min-width:100%}:host([data-sui-sticky]) .sui-table .sui-table__cell,:host([data-sui-sticky]) .sui-table .sui-table__header-cell{min-width:120px}:host([data-sui-sticky]) .sui-table .sui-table__cell--checkbox,:host([data-sui-sticky]) .sui-table .sui-table__header-cell--checkbox{min-width:44px}:host([data-sui-sticky]) .sui-table .sui-table__header-cell--empty{min-width:0}.sui-table__header{display:flex;align-items:flex-start;background:var(--sui-bg-weak-50);border-radius:var(--sui-radius-8);overflow:hidden;min-height:36px;flex-shrink:0}.sui-table__header-cell{display:flex;align-items:center;gap:2px;padding:8px 12px;min-width:0;box-sizing:border-box;white-space:nowrap;overflow:hidden;font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-sub-600)}.sui-table__header-cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sui-table__header-cell--sortable:hover{color:var(--sui-text-strong-950)}.sui-table__header-cell--sortable:hover .sui-table__sort-icon{opacity:1}.sui-table__header-cell--sortable:focus-visible{outline:2px solid var(--sui-primary-alpha-10);outline-offset:-2px;border-radius:var(--sui-radius-4)}.sui-table__header-cell--sorted{color:var(--sui-text-strong-950)}.sui-table__header-cell--disabled{cursor:default;pointer-events:none;color:var(--sui-text-disabled-300)}.sui-table__header-cell--disabled .sui-table__sort-icon{color:var(--sui-text-disabled-300);opacity:1}.sui-table__header-cell--empty{flex-shrink:0;padding:0}.sui-table__header-cell--center{justify-content:center}.sui-table__header-cell--right{justify-content:flex-end}.sui-table__header-cell--checkbox{flex:0 0 44px;justify-content:center}.sui-table__header-cell--sticky{position:sticky;left:0;z-index:2;background:var(--sui-bg-weak-50)}.sui-table__header-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0}.sui-table__sort-icon{display:inline-flex;align-items:center;flex-shrink:0;color:var(--sui-text-soft-400);opacity:.6;transition:opacity var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out)}.sui-table__sort-icon--active{color:var(--sui-text-strong-950);opacity:1}.sui-table__body{display:flex;flex-direction:column;width:100%}.sui-table__row{display:flex;align-items:center;width:100%;border-radius:var(--sui-radius-12);overflow:hidden;cursor:pointer;transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);box-sizing:border-box}@media(hover:hover)and (pointer:fine){.sui-table__row:hover,.sui-table__row:hover .sui-table__cell{background:var(--sui-bg-weak-50)}}.sui-table__row:active,.sui-table__row:active .sui-table__cell{background:var(--sui-bg-weak-50)}.sui-table__row--selected{background:var(--sui-primary-alpha-10)}.sui-table__row--selected:hover{background:var(--sui-primary-alpha-16)}.sui-table__row--striped{background:var(--sui-bg-weak-25)}.sui-table__row--skeleton{pointer-events:none;cursor:default}.sui-table__row--skeleton:hover{background:transparent}.sui-table__row--skeleton:hover .sui-table__cell{background:var(--sui-bg-white-0)}:host([data-sui-size=medium]) .sui-table__cell{min-height:64px;padding:12px 20px 12px 12px}:host([data-sui-size=small]) .sui-table__cell{min-height:48px;padding:8px 16px 8px 12px}:host([data-sui-size=large]) .sui-table__cell{min-height:80px;padding:16px 20px 16px 12px}:host([data-sui-size=xlarge]) .sui-table__cell{min-height:96px;padding:20px 20px 20px 12px}.sui-table__cell{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;box-sizing:border-box;background:var(--sui-bg-white-0);transition:background-color var(--sui-motion-duration-x-fast) var(--sui-motion-ease-out);font-size:var(--sui-type-paragraph-sm-size);font-weight:var(--sui-type-paragraph-sm-weight);line-height:var(--sui-type-paragraph-sm-line);letter-spacing:var(--sui-type-paragraph-sm-spacing);color:var(--sui-text-strong-950)}.sui-table__cell--center{justify-content:center}.sui-table__cell--right{justify-content:flex-end}.sui-table__cell--checkbox{flex:0 0 44px;justify-content:center;padding:0 12px}.sui-table__cell--leading{font-weight:var(--sui-type-label-sm-weight);color:var(--sui-text-strong-950)}.sui-table__cell--passive{color:var(--sui-text-sub-600);font-weight:var(--sui-type-paragraph-sm-weight)}.sui-table__cell--sticky{position:sticky;left:0;z-index:1;background:var(--sui-bg-white-0)}.sui-table__row--selected .sui-table__cell{background:transparent}.sui-table__row--selected .sui-table__cell.sui-table__cell--sticky{background:var(--sui-primary-alpha-10)}.sui-table__cell-text{min-width:0}.sui-table__cell-text--truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;display:block}.sui-table__cell-block{display:flex;flex-direction:column;min-width:0}.sui-table__cell-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--sui-type-paragraph-xs-size);font-weight:var(--sui-type-paragraph-xs-weight);line-height:var(--sui-type-paragraph-xs-line);letter-spacing:var(--sui-type-paragraph-xs-spacing);color:var(--sui-text-sub-600)}.sui-table__cell--leading .sui-table__cell-text{font-weight:var(--sui-type-label-sm-weight)}.sui-table__cell--passive .sui-table__cell-text{font-weight:inherit;color:inherit}:host ::ng-deep .sui-table__leading-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;padding:10px;box-sizing:border-box;border-radius:var(--sui-radius-full);background:var(--sui-bg-white-0);border:1px solid var(--sui-stroke-soft-200);box-shadow:var(--sui-regular-shadow-x-small);color:var(--sui-text-sub-600)}:host([data-sui-size=small]) ::ng-deep .sui-table__leading-icon{width:32px;height:32px;padding:6px}.sui-table__divider{width:100%;padding:1.5px 0;flex-shrink:0;background:var(--sui-bg-white-0)}.sui-table__divider:after{content:\"\";display:block;height:1px;background:var(--sui-stroke-soft-200)}.sui-table__empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:12px;text-align:center}.sui-table__empty-icon{color:var(--sui-text-disabled-300)}.sui-table__empty-msg{margin:0;font-size:var(--sui-type-paragraph-sm-size);line-height:var(--sui-type-paragraph-sm-line);color:var(--sui-text-sub-600)}.sui-table__skeleton-box{display:block;height:14px;width:100%;max-width:180px;border-radius:var(--sui-radius-4);background:linear-gradient(90deg,var(--sui-bg-soft-200) 25%,var(--sui-bg-weak-50) 50%,var(--sui-bg-soft-200) 75%);background-size:400% 100%;animation:sui-skeleton-pulse 1.4s ease-in-out infinite}.sui-table__skeleton-box--sm{width:20px;max-width:20px;height:20px;border-radius:var(--sui-radius-4)}@keyframes sui-skeleton-pulse{0%{background-position:100% 50%}to{background-position:0% 50%}}\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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], pistaDeScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "pistaDeScroll", required: false }] }], selectedRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRows", required: false }] }, { type: i0.Output, args: ["selectedRowsChange"] }], sortKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortKey", required: false }] }, { type: i0.Output, args: ["sortKeyChange"] }], sortDir: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDir", required: false }] }, { type: i0.Output, args: ["sortDirChange"] }], rowClicked: [{ type: i0.Output, args: ["rowClicked"] }], sortChanged: [{ type: i0.Output, args: ["sortChanged"] }], scrollEl: [{ type: i0.ViewChild, args: ['scrollEl', { isSignal: true }] }], pista: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SuiPistaDeScroll), { isSignal: true }] }], cellTemplates: [{
                 type: ContentChildren,
                 args: [SuiTableCellDirective]
             }] } });