@telcomdev/ui 0.1.37 → 0.1.39

package/fesm2022/telcomdev-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, booleanAttribute, EventEmitter, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, ElementRef, HostListener, Directive, EnvironmentInjector, ContentChild, DestroyRef, effect, TemplateRef, ViewChildren, ContentChildren, ViewContainerRef, Renderer2, numberAttribute } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, booleanAttribute, EventEmitter, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, ElementRef, HostListener, Directive, EnvironmentInjector, DestroyRef, ContentChild, effect, TemplateRef, ViewChildren, ContentChildren, ViewContainerRef, Renderer2, numberAttribute } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { FORM_FIELD } from '@angular/forms/signals';
@@ -2054,7 +2054,7 @@ class TdButton {
         <td-icon [nombre]="icon" />
       }
     </button>
-  `, isInline: true, styles: [":host{display:inline-block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--icon-only{aspect-ratio:1;gap:0;padding:0}.td-button--icon-only.td-button--sm{width:2.1rem}.td-button--icon-only.td-button--md{width:2.55rem}.td-button--icon-only.td-button--lg{width:3rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__content--hidden{display:none}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:inline-block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.78rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.84rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.88rem}.td-button--icon-only{aspect-ratio:1;gap:0;padding:0}.td-button--icon-only.td-button--sm{width:2.1rem}.td-button--icon-only.td-button--md{width:2.55rem}.td-button--icon-only.td-button--lg{width:3rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__content--hidden{display:none}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}@media(max-width:768px){.td-button--sm,.td-button--md{min-height:2.75rem}.td-button--icon-only.td-button--sm,.td-button--icon-only.td-button--md{width:2.75rem}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdButton, decorators: [{
             type: Component,
@@ -2089,7 +2089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         <td-icon [nombre]="icon" />
       }
     </button>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--icon-only{aspect-ratio:1;gap:0;padding:0}.td-button--icon-only.td-button--sm{width:2.1rem}.td-button--icon-only.td-button--md{width:2.55rem}.td-button--icon-only.td-button--lg{width:3rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__content--hidden{display:none}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.78rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.84rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.88rem}.td-button--icon-only{aspect-ratio:1;gap:0;padding:0}.td-button--icon-only.td-button--sm{width:2.1rem}.td-button--icon-only.td-button--md{width:2.55rem}.td-button--icon-only.td-button--lg{width:3rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__content--hidden{display:none}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}@media(max-width:768px){.td-button--sm,.td-button--md{min-height:2.75rem}.td-button--icon-only.td-button--sm,.td-button--icon-only.td-button--md{width:2.75rem}}\n"] }]
         }], propDecorators: { contentRef: [{
                 type: ViewChild,
                 args: ['content', { static: true }]
@@ -2502,11 +2502,11 @@ class TdMenu {
         return mapa[tono || 'neutro'];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdMenu, isStandalone: true, selector: "td-menu", inputs: { items: "items", etiqueta: "etiqueta", icono: "icono", posicion: "posicion", ancho: "ancho", disabled: "disabled", oscuro: "oscuro", ariaLabel: "ariaLabel" }, outputs: { seleccion: "seleccion", abiertoChange: "abiertoChange" }, ngImport: i0, template: "<button\n  #origen=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  type=\"button\"\n  class=\"td-menu__trigger\"\n  [class.td-menu__trigger--icon-only]=\"!etiqueta\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-expanded]=\"abierto\"\n  aria-haspopup=\"menu\"\n  (click)=\"alternar()\"\n>\n  @if (icono) {\n    <td-icon [nombre]=\"icono\" />\n  }\n  @if (etiqueta) {\n    <span>{{ etiqueta }}</span>\n    <td-icon nombre=\"chevron_down\" tamano=\".95rem\" />\n  }\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origen\"\n  [cdkConnectedOverlayOpen]=\"abierto\"\n  [cdkConnectedOverlayPositions]=\"posiciones()\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  [cdkConnectedOverlayPanelClass]=\"'td-menu__overlay'\"\n  (overlayOutsideClick)=\"cerrar()\"\n  (detach)=\"cerrar()\"\n>\n  <div\n    class=\"td-menu\"\n    [class.td-menu--oscuro]=\"oscuro\"\n    [style.width]=\"ancho\"\n    role=\"menu\"\n  >\n    @for (item of itemsVisibles; track item.id) {\n      @if (item.separadorAntes) {\n        <span class=\"td-menu__separador\" aria-hidden=\"true\"></span>\n      }\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        [class]=\"'td-menu__item td-menu__item--' + (item.tono || 'neutro')\"\n        [disabled]=\"item.deshabilitado\"\n        (click)=\"seleccionar(item)\"\n      >\n        @if (item.icono) {\n          <span class=\"td-menu__icono\">\n            <td-icon [nombre]=\"item.icono\" />\n          </span>\n        }\n        <span class=\"td-menu__texto\">\n          <strong>{{ item.etiqueta }}</strong>\n          @if (item.descripcion) {\n            <small>{{ item.descripcion }}</small>\n          }\n        </span>\n        @if (badgeConfig(item); as badge) {\n          <td-badge\n            class=\"td-menu__badge\"\n            [tone]=\"badge.tone || 'neutral'\"\n            [variant]=\"badge.variant || 'soft'\"\n            [size]=\"badge.size || 'sm'\"\n            [icon]=\"badge.icono || ''\"\n            [dot]=\"badge.dot || false\"\n            [pill]=\"badge.pill ?? true\"\n            [ariaLabel]=\"badge.ariaLabel || ''\"\n          >\n            {{ badge.etiqueta }}\n          </td-badge>\n        }\n      </button>\n    } @empty {\n      <div class=\"td-menu__vacio\">\n        <td-icon nombre=\"inbox\" />\n        <span>Sin opciones disponibles</span>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-menu__trigger{display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-md, .85rem);padding:0 .8rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xs, 0 6px 16px rgba(31, 42, 68, .06));font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease}.td-menu__trigger:hover:not(:disabled),.td-menu__trigger[aria-expanded=true]{border-color:var(--td-color-primary, #5746d8);color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .14))}.td-menu__trigger:disabled{opacity:.55;cursor:not-allowed}.td-menu__trigger--icon-only{width:2.35rem;padding:0}.td-menu{overflow:hidden;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-lg, 1rem);padding:.35rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-lg, 0 22px 52px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-menu--oscuro{border-color:var(--td-color-border, #2d3342);color:var(--td-color-text, #f8fafc);background:var(--td-color-surface, #111827)}.td-menu__item{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:var(--td-radius-md, .75rem);padding:.62rem .7rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-menu__item:hover:not(:disabled),.td-menu__item:focus-visible{outline:none;background:var(--td-color-primary-soft, #eef2ff)}.td-menu__item:disabled{opacity:.45;cursor:not-allowed}.td-menu__item--primario{color:var(--td-color-primary, #5746d8)}.td-menu__item--exito{color:var(--td-color-success, #07845c)}.td-menu__item--advertencia{color:var(--td-color-warning, #b7791f)}.td-menu__item--peligro{color:var(--td-color-danger, #dc2626)}.td-menu__icono{display:grid;width:2rem;height:2rem;place-items:center;border-radius:var(--td-radius-sm, .6rem);background:color-mix(in srgb,currentColor 10%,transparent)}.td-menu__texto{display:grid;flex:1 1 auto;min-width:0;gap:.12rem}.td-menu__badge{flex:0 0 auto;max-width:6.5rem}.td-menu__texto strong,.td-menu__texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-menu__texto strong{font-size:.78rem}.td-menu__texto small{color:var(--td-color-text-muted, #64748b);font-size:.68rem;font-weight:650}.td-menu__separador{display:block;height:1px;margin:.35rem .45rem;background:var(--td-color-border, #d9e1ee)}.td-menu__vacio{display:grid;min-height:5.5rem;place-items:center;align-content:center;gap:.35rem;color:var(--td-color-text-muted, #64748b);font-size:.75rem;font-weight:750}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }, { kind: "component", type: TdBadge, selector: "td-badge", inputs: ["tone", "variant", "size", "value", "position", "icon", "floating", "hidden", "dot", "pill", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdMenu, isStandalone: true, selector: "td-menu", inputs: { items: "items", etiqueta: "etiqueta", icono: "icono", posicion: "posicion", ancho: "ancho", disabled: "disabled", oscuro: "oscuro", ariaLabel: "ariaLabel" }, outputs: { seleccion: "seleccion", abiertoChange: "abiertoChange" }, ngImport: i0, template: "<button\n  #origen=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  type=\"button\"\n  class=\"td-menu__trigger\"\n  [class.td-menu__trigger--icon-only]=\"!etiqueta\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-expanded]=\"abierto\"\n  aria-haspopup=\"menu\"\n  (click)=\"alternar()\"\n>\n  @if (icono) {\n    <td-icon [nombre]=\"icono\" />\n  }\n  @if (etiqueta) {\n    <span>{{ etiqueta }}</span>\n    <td-icon nombre=\"chevron_down\" tamano=\".95rem\" />\n  }\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origen\"\n  [cdkConnectedOverlayOpen]=\"abierto\"\n  [cdkConnectedOverlayPositions]=\"posiciones()\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  [cdkConnectedOverlayPanelClass]=\"'td-menu__overlay'\"\n  (overlayOutsideClick)=\"cerrar()\"\n  (detach)=\"cerrar()\"\n>\n  <div\n    class=\"td-menu\"\n    [class.td-menu--oscuro]=\"oscuro\"\n    [style.width]=\"ancho\"\n    role=\"menu\"\n  >\n    @for (item of itemsVisibles; track item.id) {\n      @if (item.separadorAntes) {\n        <span class=\"td-menu__separador\" aria-hidden=\"true\"></span>\n      }\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        [class]=\"'td-menu__item td-menu__item--' + (item.tono || 'neutro')\"\n        [disabled]=\"item.deshabilitado\"\n        (click)=\"seleccionar(item)\"\n      >\n        @if (item.icono) {\n          <span class=\"td-menu__icono\">\n            <td-icon [nombre]=\"item.icono\" />\n          </span>\n        }\n        <span class=\"td-menu__texto\">\n          <strong>{{ item.etiqueta }}</strong>\n          @if (item.descripcion) {\n            <small>{{ item.descripcion }}</small>\n          }\n        </span>\n        @if (badgeConfig(item); as badge) {\n          <td-badge\n            class=\"td-menu__badge\"\n            [tone]=\"badge.tone || 'neutral'\"\n            [variant]=\"badge.variant || 'soft'\"\n            [size]=\"badge.size || 'sm'\"\n            [icon]=\"badge.icono || ''\"\n            [dot]=\"badge.dot || false\"\n            [pill]=\"badge.pill ?? true\"\n            [ariaLabel]=\"badge.ariaLabel || ''\"\n          >\n            {{ badge.etiqueta }}\n          </td-badge>\n        }\n      </button>\n    } @empty {\n      <div class=\"td-menu__vacio\">\n        <td-icon nombre=\"inbox\" />\n        <span>Sin opciones disponibles</span>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-menu__trigger{display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-md, .85rem);padding:0 .8rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xs, 0 6px 16px rgba(31, 42, 68, .06));font:inherit;font-size:.8rem;font-weight:800;cursor:pointer;transition:border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease}.td-menu__trigger:hover:not(:disabled),.td-menu__trigger[aria-expanded=true]{border-color:var(--td-color-primary, #5746d8);color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .14))}.td-menu__trigger:disabled{opacity:.55;cursor:not-allowed}.td-menu__trigger--icon-only{width:2.35rem;padding:0}.td-menu{overflow:hidden;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-lg, 1rem);padding:.35rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-lg, 0 22px 52px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-menu--oscuro{border-color:var(--td-color-border, #2d3342);color:var(--td-color-text, #f8fafc);background:var(--td-color-surface, #111827)}.td-menu__item{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:var(--td-radius-md, .75rem);padding:.62rem .7rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-menu__item:hover:not(:disabled),.td-menu__item:focus-visible{outline:none;background:var(--td-color-primary-soft, #eef2ff)}@media(max-width:768px){.td-menu__trigger,.td-menu__item{min-height:2.75rem}}.td-menu__item:disabled{opacity:.45;cursor:not-allowed}.td-menu__item--primario{color:var(--td-color-primary, #5746d8)}.td-menu__item--exito{color:var(--td-color-success, #07845c)}.td-menu__item--advertencia{color:var(--td-color-warning, #b7791f)}.td-menu__item--peligro{color:var(--td-color-danger, #dc2626)}.td-menu__icono{display:grid;width:2rem;height:2rem;place-items:center;border-radius:var(--td-radius-sm, .6rem);background:color-mix(in srgb,currentColor 10%,transparent)}.td-menu__texto{display:grid;flex:1 1 auto;min-width:0;gap:.12rem}.td-menu__badge{flex:0 0 auto;max-width:6.5rem}.td-menu__texto strong,.td-menu__texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-menu__texto strong{font-size:.8rem}.td-menu__texto small{color:var(--td-color-text-muted, #64748b);font-size:.68rem;font-weight:650}.td-menu__separador{display:block;height:1px;margin:.35rem .45rem;background:var(--td-color-border, #d9e1ee)}.td-menu__vacio{display:grid;min-height:5.5rem;place-items:center;align-content:center;gap:.35rem;color:var(--td-color-text-muted, #64748b);font-size:.75rem;font-weight:750}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }, { kind: "component", type: TdBadge, selector: "td-badge", inputs: ["tone", "variant", "size", "value", "position", "icon", "floating", "hidden", "dot", "pill", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'td-menu', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon, TdBadge], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #origen=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  type=\"button\"\n  class=\"td-menu__trigger\"\n  [class.td-menu__trigger--icon-only]=\"!etiqueta\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-expanded]=\"abierto\"\n  aria-haspopup=\"menu\"\n  (click)=\"alternar()\"\n>\n  @if (icono) {\n    <td-icon [nombre]=\"icono\" />\n  }\n  @if (etiqueta) {\n    <span>{{ etiqueta }}</span>\n    <td-icon nombre=\"chevron_down\" tamano=\".95rem\" />\n  }\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origen\"\n  [cdkConnectedOverlayOpen]=\"abierto\"\n  [cdkConnectedOverlayPositions]=\"posiciones()\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  [cdkConnectedOverlayPanelClass]=\"'td-menu__overlay'\"\n  (overlayOutsideClick)=\"cerrar()\"\n  (detach)=\"cerrar()\"\n>\n  <div\n    class=\"td-menu\"\n    [class.td-menu--oscuro]=\"oscuro\"\n    [style.width]=\"ancho\"\n    role=\"menu\"\n  >\n    @for (item of itemsVisibles; track item.id) {\n      @if (item.separadorAntes) {\n        <span class=\"td-menu__separador\" aria-hidden=\"true\"></span>\n      }\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        [class]=\"'td-menu__item td-menu__item--' + (item.tono || 'neutro')\"\n        [disabled]=\"item.deshabilitado\"\n        (click)=\"seleccionar(item)\"\n      >\n        @if (item.icono) {\n          <span class=\"td-menu__icono\">\n            <td-icon [nombre]=\"item.icono\" />\n          </span>\n        }\n        <span class=\"td-menu__texto\">\n          <strong>{{ item.etiqueta }}</strong>\n          @if (item.descripcion) {\n            <small>{{ item.descripcion }}</small>\n          }\n        </span>\n        @if (badgeConfig(item); as badge) {\n          <td-badge\n            class=\"td-menu__badge\"\n            [tone]=\"badge.tone || 'neutral'\"\n            [variant]=\"badge.variant || 'soft'\"\n            [size]=\"badge.size || 'sm'\"\n            [icon]=\"badge.icono || ''\"\n            [dot]=\"badge.dot || false\"\n            [pill]=\"badge.pill ?? true\"\n            [ariaLabel]=\"badge.ariaLabel || ''\"\n          >\n            {{ badge.etiqueta }}\n          </td-badge>\n        }\n      </button>\n    } @empty {\n      <div class=\"td-menu__vacio\">\n        <td-icon nombre=\"inbox\" />\n        <span>Sin opciones disponibles</span>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-menu__trigger{display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-md, .85rem);padding:0 .8rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xs, 0 6px 16px rgba(31, 42, 68, .06));font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease}.td-menu__trigger:hover:not(:disabled),.td-menu__trigger[aria-expanded=true]{border-color:var(--td-color-primary, #5746d8);color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .14))}.td-menu__trigger:disabled{opacity:.55;cursor:not-allowed}.td-menu__trigger--icon-only{width:2.35rem;padding:0}.td-menu{overflow:hidden;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-lg, 1rem);padding:.35rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-lg, 0 22px 52px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-menu--oscuro{border-color:var(--td-color-border, #2d3342);color:var(--td-color-text, #f8fafc);background:var(--td-color-surface, #111827)}.td-menu__item{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:var(--td-radius-md, .75rem);padding:.62rem .7rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-menu__item:hover:not(:disabled),.td-menu__item:focus-visible{outline:none;background:var(--td-color-primary-soft, #eef2ff)}.td-menu__item:disabled{opacity:.45;cursor:not-allowed}.td-menu__item--primario{color:var(--td-color-primary, #5746d8)}.td-menu__item--exito{color:var(--td-color-success, #07845c)}.td-menu__item--advertencia{color:var(--td-color-warning, #b7791f)}.td-menu__item--peligro{color:var(--td-color-danger, #dc2626)}.td-menu__icono{display:grid;width:2rem;height:2rem;place-items:center;border-radius:var(--td-radius-sm, .6rem);background:color-mix(in srgb,currentColor 10%,transparent)}.td-menu__texto{display:grid;flex:1 1 auto;min-width:0;gap:.12rem}.td-menu__badge{flex:0 0 auto;max-width:6.5rem}.td-menu__texto strong,.td-menu__texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-menu__texto strong{font-size:.78rem}.td-menu__texto small{color:var(--td-color-text-muted, #64748b);font-size:.68rem;font-weight:650}.td-menu__separador{display:block;height:1px;margin:.35rem .45rem;background:var(--td-color-border, #d9e1ee)}.td-menu__vacio{display:grid;min-height:5.5rem;place-items:center;align-content:center;gap:.35rem;color:var(--td-color-text-muted, #64748b);font-size:.75rem;font-weight:750}\n"] }]
+            args: [{ selector: 'td-menu', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon, TdBadge], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #origen=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  type=\"button\"\n  class=\"td-menu__trigger\"\n  [class.td-menu__trigger--icon-only]=\"!etiqueta\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-expanded]=\"abierto\"\n  aria-haspopup=\"menu\"\n  (click)=\"alternar()\"\n>\n  @if (icono) {\n    <td-icon [nombre]=\"icono\" />\n  }\n  @if (etiqueta) {\n    <span>{{ etiqueta }}</span>\n    <td-icon nombre=\"chevron_down\" tamano=\".95rem\" />\n  }\n</button>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origen\"\n  [cdkConnectedOverlayOpen]=\"abierto\"\n  [cdkConnectedOverlayPositions]=\"posiciones()\"\n  [cdkConnectedOverlayHasBackdrop]=\"false\"\n  [cdkConnectedOverlayPanelClass]=\"'td-menu__overlay'\"\n  (overlayOutsideClick)=\"cerrar()\"\n  (detach)=\"cerrar()\"\n>\n  <div\n    class=\"td-menu\"\n    [class.td-menu--oscuro]=\"oscuro\"\n    [style.width]=\"ancho\"\n    role=\"menu\"\n  >\n    @for (item of itemsVisibles; track item.id) {\n      @if (item.separadorAntes) {\n        <span class=\"td-menu__separador\" aria-hidden=\"true\"></span>\n      }\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        [class]=\"'td-menu__item td-menu__item--' + (item.tono || 'neutro')\"\n        [disabled]=\"item.deshabilitado\"\n        (click)=\"seleccionar(item)\"\n      >\n        @if (item.icono) {\n          <span class=\"td-menu__icono\">\n            <td-icon [nombre]=\"item.icono\" />\n          </span>\n        }\n        <span class=\"td-menu__texto\">\n          <strong>{{ item.etiqueta }}</strong>\n          @if (item.descripcion) {\n            <small>{{ item.descripcion }}</small>\n          }\n        </span>\n        @if (badgeConfig(item); as badge) {\n          <td-badge\n            class=\"td-menu__badge\"\n            [tone]=\"badge.tone || 'neutral'\"\n            [variant]=\"badge.variant || 'soft'\"\n            [size]=\"badge.size || 'sm'\"\n            [icon]=\"badge.icono || ''\"\n            [dot]=\"badge.dot || false\"\n            [pill]=\"badge.pill ?? true\"\n            [ariaLabel]=\"badge.ariaLabel || ''\"\n          >\n            {{ badge.etiqueta }}\n          </td-badge>\n        }\n      </button>\n    } @empty {\n      <div class=\"td-menu__vacio\">\n        <td-icon nombre=\"inbox\" />\n        <span>Sin opciones disponibles</span>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: [":host{display:inline-block;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-menu__trigger{display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-md, .85rem);padding:0 .8rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xs, 0 6px 16px rgba(31, 42, 68, .06));font:inherit;font-size:.8rem;font-weight:800;cursor:pointer;transition:border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease}.td-menu__trigger:hover:not(:disabled),.td-menu__trigger[aria-expanded=true]{border-color:var(--td-color-primary, #5746d8);color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .14))}.td-menu__trigger:disabled{opacity:.55;cursor:not-allowed}.td-menu__trigger--icon-only{width:2.35rem;padding:0}.td-menu{overflow:hidden;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-lg, 1rem);padding:.35rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-lg, 0 22px 52px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-menu--oscuro{border-color:var(--td-color-border, #2d3342);color:var(--td-color-text, #f8fafc);background:var(--td-color-surface, #111827)}.td-menu__item{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:var(--td-radius-md, .75rem);padding:.62rem .7rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-menu__item:hover:not(:disabled),.td-menu__item:focus-visible{outline:none;background:var(--td-color-primary-soft, #eef2ff)}@media(max-width:768px){.td-menu__trigger,.td-menu__item{min-height:2.75rem}}.td-menu__item:disabled{opacity:.45;cursor:not-allowed}.td-menu__item--primario{color:var(--td-color-primary, #5746d8)}.td-menu__item--exito{color:var(--td-color-success, #07845c)}.td-menu__item--advertencia{color:var(--td-color-warning, #b7791f)}.td-menu__item--peligro{color:var(--td-color-danger, #dc2626)}.td-menu__icono{display:grid;width:2rem;height:2rem;place-items:center;border-radius:var(--td-radius-sm, .6rem);background:color-mix(in srgb,currentColor 10%,transparent)}.td-menu__texto{display:grid;flex:1 1 auto;min-width:0;gap:.12rem}.td-menu__badge{flex:0 0 auto;max-width:6.5rem}.td-menu__texto strong,.td-menu__texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-menu__texto strong{font-size:.8rem}.td-menu__texto small{color:var(--td-color-text-muted, #64748b);font-size:.68rem;font-weight:650}.td-menu__separador{display:block;height:1px;margin:.35rem .45rem;background:var(--td-color-border, #d9e1ee)}.td-menu__vacio{display:grid;min-height:5.5rem;place-items:center;align-content:center;gap:.35rem;color:var(--td-color-text-muted, #64748b);font-size:.75rem;font-weight:750}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], etiqueta: [{
@@ -2846,11 +2846,11 @@ class TdDataTable {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", accionesPresentacion: "accionesPresentacion", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"columnheader\"\n                [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                {{ columna.encabezado }}\n              </div>\n            }\n            @if (acciones.length) {\n              <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n            }\n          </div>\n\n          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n        >\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"cell\"\n                [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                @if (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else if (\n                  columna.tipo === 'estado' ||\n                  columna.tipo === 'booleano' ||\n                  columna.tipo === 'chip'\n                ) {\n                  <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                } @else {\n                  <span\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (acciones.length) {\n              <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla{contain:none}.td-tabla__toolbar{align-items:stretch;flex-direction:column;gap:.75rem;padding:.45rem 0 .85rem}.td-tabla__filtros{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}.td-tabla__filtros ::ng-deep>*,.td-tabla__busqueda{width:100%;min-width:0}.td-tabla__busqueda{min-height:3rem;border-radius:var(--td-radius-lg, .9rem)}.td-tabla__superficie{border-radius:var(--td-radius-lg, .9rem)}.td-tabla__resumen{align-items:stretch;flex-direction:column;gap:.65rem;padding:.85rem}.td-tabla__resumen-acciones{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.55rem}.td-tabla__resumen-acciones ::ng-deep>*,.td-tabla__boton{width:100%;min-width:0}.td-tabla__boton{height:2.45rem;justify-content:center;padding:0 .75rem}.td-tabla__boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-tabla__scroll-x{box-shadow:inset -18px 0 18px -22px color-mix(in srgb,var(--texto) 45%,transparent)}.td-tabla__contenido{min-width:max(46rem,max-content)}.td-tabla__encabezado{min-height:2.6rem;font-size:.58rem;letter-spacing:.06em}.td-tabla__encabezado>div,.td-tabla__celda{padding-inline:.75rem}.td-tabla__viewport{min-height:18rem}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}@media(max-width:420px){.td-tabla__resumen-acciones{grid-template-columns:minmax(0,1fr)}.td-tabla__contenido{min-width:max(42rem,max-content)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }, { kind: "component", type: TdMenu, selector: "td-menu", inputs: ["items", "etiqueta", "icono", "posicion", "ancho", "disabled", "oscuro", "ariaLabel"], outputs: ["seleccion", "abiertoChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", accionesPresentacion: "accionesPresentacion", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"columnheader\"\n                [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                {{ columna.encabezado }}\n              </div>\n            }\n            @if (acciones.length) {\n              <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n            }\n          </div>\n\n          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n        >\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"cell\"\n                [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                @if (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else if (\n                  columna.tipo === 'estado' ||\n                  columna.tipo === 'booleano' ||\n                  columna.tipo === 'chip'\n                ) {\n                  <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                } @else {\n                  <span\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (acciones.length) {\n              <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block;-webkit-text-size-adjust:100%}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}@media screen and (max-width:768px){.td-tabla__busqueda input{font-size:16px!important}}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.75rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.68rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla{contain:none}.td-tabla__toolbar{align-items:stretch;flex-direction:column;gap:.75rem;padding:.45rem 0 .85rem}.td-tabla__filtros{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}.td-tabla__filtros ::ng-deep>*,.td-tabla__busqueda{width:100%;min-width:0}.td-tabla__busqueda{min-height:3rem;border-radius:var(--td-radius-lg, .9rem)}.td-tabla__superficie{border-radius:var(--td-radius-lg, .9rem)}.td-tabla__resumen{align-items:stretch;flex-direction:column;gap:.65rem;padding:.85rem}.td-tabla__resumen-acciones{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.55rem}.td-tabla__resumen-acciones ::ng-deep>*,.td-tabla__boton{width:100%;min-width:0}.td-tabla__boton{min-height:2.75rem;height:auto;justify-content:center;padding:0 .75rem}.td-tabla__boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-tabla__scroll-x{box-shadow:inset -18px 0 18px -22px color-mix(in srgb,var(--texto) 45%,transparent)}.td-tabla__contenido{min-width:max(46rem,max-content)}.td-tabla__encabezado{min-height:2.6rem;font-size:.58rem;letter-spacing:.06em}.td-tabla__encabezado>div,.td-tabla__celda{padding-inline:.75rem}.td-tabla__viewport{min-height:18rem}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}@media(max-width:420px){.td-tabla__resumen-acciones{grid-template-columns:minmax(0,1fr)}.td-tabla__contenido{min-width:max(42rem,max-content)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }, { kind: "component", type: TdMenu, selector: "td-menu", inputs: ["items", "etiqueta", "icono", "posicion", "ancho", "disabled", "oscuro", "ariaLabel"], outputs: ["seleccion", "abiertoChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, decorators: [{
             type: Component,
-            args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, ScrollingModule, TdIcon, TdMenu], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"columnheader\"\n                [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                {{ columna.encabezado }}\n              </div>\n            }\n            @if (acciones.length) {\n              <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n            }\n          </div>\n\n          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n        >\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"cell\"\n                [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                @if (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else if (\n                  columna.tipo === 'estado' ||\n                  columna.tipo === 'booleano' ||\n                  columna.tipo === 'chip'\n                ) {\n                  <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                } @else {\n                  <span\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (acciones.length) {\n              <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla{contain:none}.td-tabla__toolbar{align-items:stretch;flex-direction:column;gap:.75rem;padding:.45rem 0 .85rem}.td-tabla__filtros{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}.td-tabla__filtros ::ng-deep>*,.td-tabla__busqueda{width:100%;min-width:0}.td-tabla__busqueda{min-height:3rem;border-radius:var(--td-radius-lg, .9rem)}.td-tabla__superficie{border-radius:var(--td-radius-lg, .9rem)}.td-tabla__resumen{align-items:stretch;flex-direction:column;gap:.65rem;padding:.85rem}.td-tabla__resumen-acciones{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.55rem}.td-tabla__resumen-acciones ::ng-deep>*,.td-tabla__boton{width:100%;min-width:0}.td-tabla__boton{height:2.45rem;justify-content:center;padding:0 .75rem}.td-tabla__boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-tabla__scroll-x{box-shadow:inset -18px 0 18px -22px color-mix(in srgb,var(--texto) 45%,transparent)}.td-tabla__contenido{min-width:max(46rem,max-content)}.td-tabla__encabezado{min-height:2.6rem;font-size:.58rem;letter-spacing:.06em}.td-tabla__encabezado>div,.td-tabla__celda{padding-inline:.75rem}.td-tabla__viewport{min-height:18rem}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}@media(max-width:420px){.td-tabla__resumen-acciones{grid-template-columns:minmax(0,1fr)}.td-tabla__contenido{min-width:max(42rem,max-content)}}\n"] }]
+            args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, ScrollingModule, TdIcon, TdMenu], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"columnheader\"\n                [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                {{ columna.encabezado }}\n              </div>\n            }\n            @if (acciones.length) {\n              <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n            }\n          </div>\n\n          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n        >\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"cell\"\n                [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                @if (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else if (\n                  columna.tipo === 'estado' ||\n                  columna.tipo === 'booleano' ||\n                  columna.tipo === 'chip'\n                ) {\n                  <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                } @else {\n                  <span\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (acciones.length) {\n              <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block;-webkit-text-size-adjust:100%}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}@media screen and (max-width:768px){.td-tabla__busqueda input{font-size:16px!important}}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.75rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.68rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla{contain:none}.td-tabla__toolbar{align-items:stretch;flex-direction:column;gap:.75rem;padding:.45rem 0 .85rem}.td-tabla__filtros{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}.td-tabla__filtros ::ng-deep>*,.td-tabla__busqueda{width:100%;min-width:0}.td-tabla__busqueda{min-height:3rem;border-radius:var(--td-radius-lg, .9rem)}.td-tabla__superficie{border-radius:var(--td-radius-lg, .9rem)}.td-tabla__resumen{align-items:stretch;flex-direction:column;gap:.65rem;padding:.85rem}.td-tabla__resumen-acciones{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.55rem}.td-tabla__resumen-acciones ::ng-deep>*,.td-tabla__boton{width:100%;min-width:0}.td-tabla__boton{min-height:2.75rem;height:auto;justify-content:center;padding:0 .75rem}.td-tabla__boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-tabla__scroll-x{box-shadow:inset -18px 0 18px -22px color-mix(in srgb,var(--texto) 45%,transparent)}.td-tabla__contenido{min-width:max(46rem,max-content)}.td-tabla__encabezado{min-height:2.6rem;font-size:.58rem;letter-spacing:.06em}.td-tabla__encabezado>div,.td-tabla__celda{padding-inline:.75rem}.td-tabla__viewport{min-height:18rem}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}@media(max-width:420px){.td-tabla__resumen-acciones{grid-template-columns:minmax(0,1fr)}.td-tabla__contenido{min-width:max(42rem,max-content)}}\n"] }]
         }], propDecorators: { viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -4881,11 +4881,11 @@ class TdHeader {
         this.panelPerfilAbierto = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdHeader, isStandalone: true, selector: "td-header", inputs: { menuAbierto: "menuAbierto", mostrarMenu: "mostrarMenu", usuario: "usuario", cargo: "cargo", avatarUrl: "avatarUrl", notificaciones: "notificaciones", oscuro: "oscuro", fijo: "fijo", mostrarNotificaciones: ["mostrarNotificaciones", "mostrarNotificaciones", booleanAttribute], mostrarPerfil: ["mostrarPerfil", "mostrarPerfil", booleanAttribute], perfilAcciones: "perfilAcciones" }, outputs: { menuToggle: "menuToggle", notificacionSeleccionada: "notificacionSeleccionada", verTodasNotificaciones: "verTodasNotificaciones", accionPerfil: "accionPerfil", perfilAccionSeleccionada: "perfilAccionSeleccionada" }, host: { listeners: { "document:keydown.escape": "cerrarConEscape()" } }, ngImport: i0, template: "<header\n  class=\"td-header\"\n  [class.td-header--oscuro]=\"oscuro\"\n  [class.td-header--fijo]=\"fijo\"\n>\n  <div class=\"td-header__inicio\">\n    @if (mostrarMenu) {\n      <button\n        class=\"td-header__boton td-header__menu\"\n        type=\"button\"\n        [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n        [attr.aria-expanded]=\"menuAbierto\"\n        (click)=\"alternarMenu()\"\n      >\n        <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n      </button>\n    }\n\n    <ng-content select=\"[tdHeaderStart]\" />\n  </div>\n\n  <div class=\"td-header__centro\">\n    <ng-content select=\"[tdHeaderCenter]\" />\n  </div>\n\n  <div class=\"td-header__acciones\">\n    <ng-content select=\"[tdHeaderActions]\" />\n\n    @if (mostrarNotificaciones) {\n      <div class=\"td-header__desplegable\">\n        <button\n          class=\"td-header__boton td-header__notificaciones\"\n          type=\"button\"\n          aria-label=\"Notificaciones\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n          (click)=\"alternarNotificaciones()\"\n        >\n          <td-icon nombre=\"notifications\" />\n          @if (notificacionesNoLeidas() > 0) {\n            <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n          }\n        </button>\n\n        @if (panelNotificacionesAbierto) {\n          <section class=\"td-header__panel td-header__panel--notificaciones\">\n            <header>\n              <div>\n                <strong>Notificaciones</strong>\n                <small>{{ notificacionesNoLeidas() }} sin leer</small>\n              </div>\n              <td-icon nombre=\"notifications\" />\n            </header>\n\n            <div class=\"td-header__lista-notificaciones\">\n              @for (notificacion of notificaciones; track notificacion.id) {\n                <button\n                  type=\"button\"\n                  [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n                  (click)=\"seleccionarNotificacion(notificacion)\"\n                >\n                  <span class=\"td-header__notificacion-icono\">\n                    <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n                  </span>\n                  <span>\n                    <strong>{{ notificacion.titulo }}</strong>\n                    @if (notificacion.descripcion) {\n                      <small>{{ notificacion.descripcion }}</small>\n                    }\n                    @if (notificacion.fecha) {\n                      <time>{{ notificacion.fecha }}</time>\n                    }\n                  </span>\n                </button>\n              } @empty {\n                <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n              }\n            </div>\n\n            @if (notificaciones.length) {\n              <button\n                class=\"td-header__ver-todas\"\n                type=\"button\"\n                (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n              >\n                Ver todas las notificaciones\n              </button>\n            }\n          </section>\n        }\n      </div>\n    }\n\n    @if (mostrarPerfil && usuario) {\n      <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n      <div class=\"td-header__desplegable\">\n        <button\n          class=\"td-header__perfil\"\n          type=\"button\"\n          aria-label=\"Abrir perfil de usuario\"\n          aria-haspopup=\"menu\"\n          [attr.aria-expanded]=\"panelPerfilAbierto\"\n          (click)=\"alternarPerfil()\"\n        >\n          <span class=\"td-header__avatar\">\n            @if (avatarUrl) {\n              <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n            } @else {\n              {{ inicialesUsuario() }}\n            }\n          </span>\n          <span class=\"td-header__usuario\">\n            <strong>{{ usuario }}</strong>\n            @if (cargo) {\n              <small>{{ cargo }}</small>\n            }\n          </span>\n          <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n        </button>\n\n        @if (panelPerfilAbierto) {\n          <section class=\"td-header__panel td-header__panel--perfil\">\n            <div class=\"td-header__perfil-resumen\">\n              <span class=\"td-header__avatar td-header__avatar--grande\">\n                @if (avatarUrl) {\n                  <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n                } @else {\n                  {{ inicialesUsuario() }}\n                }\n              </span>\n              <div>\n                <strong>{{ usuario }}</strong>\n                <small>{{ cargo || 'Usuario' }}</small>\n              </div>\n            </div>\n            <div class=\"td-header__perfil-opciones\">\n              @for (accion of accionesPerfilVisibles(); track accion.id) {\n                <button\n                  type=\"button\"\n                  [class.td-header__salir]=\"accion.tono === 'danger'\"\n                  (click)=\"emitirAccionPerfil(accion)\"\n                >\n                  @if (accion.icono) {\n                    <td-icon [nombre]=\"accion.icono\" />\n                  }\n                  <span>\n                    <strong>{{ accion.etiqueta }}</strong>\n                    @if (accion.descripcion) {\n                      <small>{{ accion.descripcion }}</small>\n                    }\n                  </span>\n                </button>\n              }\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:var(--td-z-header, 800);display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-header, 0 8px 30px rgba(35, 42, 68, .05));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}:host ::ng-deep [tdHeaderStart],:host ::ng-deep [tdHeaderCenter],:host ::ng-deep [tdHeaderActions]{min-width:0}:host ::ng-deep [tdHeaderActions]{flex:0 0 auto}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:var(--td-radius-pill, 999px);padding:0 .15rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:var(--td-radius-lg, .8rem);padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:var(--td-radius-md, .7rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-panel, 0 22px 55px rgba(15, 23, 42, .18));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:var(--td-radius-pill, 50%);background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}.td-header__perfil-opciones button>span{display:grid;min-width:0;gap:.12rem}.td-header__perfil-opciones button strong,.td-header__perfil-opciones button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__perfil-opciones button strong{color:inherit;font-size:.72rem}.td-header__perfil-opciones button small{color:var(--suave);font-size:.64rem;font-weight:500}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__acciones{gap:.35rem}:host ::ng-deep [tdHeaderActions]{max-width:min(11rem,42vw)}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdHeader, isStandalone: true, selector: "td-header", inputs: { menuAbierto: "menuAbierto", mostrarMenu: "mostrarMenu", usuario: "usuario", cargo: "cargo", avatarUrl: "avatarUrl", notificaciones: "notificaciones", oscuro: "oscuro", fijo: "fijo", mostrarNotificaciones: ["mostrarNotificaciones", "mostrarNotificaciones", booleanAttribute], mostrarPerfil: ["mostrarPerfil", "mostrarPerfil", booleanAttribute], perfilAcciones: "perfilAcciones" }, outputs: { menuToggle: "menuToggle", notificacionSeleccionada: "notificacionSeleccionada", verTodasNotificaciones: "verTodasNotificaciones", accionPerfil: "accionPerfil", perfilAccionSeleccionada: "perfilAccionSeleccionada" }, host: { listeners: { "document:keydown.escape": "cerrarConEscape()" } }, ngImport: i0, template: "<header\n  class=\"td-header\"\n  [class.td-header--oscuro]=\"oscuro\"\n  [class.td-header--fijo]=\"fijo\"\n>\n  <div class=\"td-header__inicio\">\n    @if (mostrarMenu) {\n      <button\n        class=\"td-header__boton td-header__menu\"\n        type=\"button\"\n        [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n        [attr.aria-expanded]=\"menuAbierto\"\n        (click)=\"alternarMenu()\"\n      >\n        <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n      </button>\n    }\n\n    <ng-content select=\"[tdHeaderStart]\" />\n  </div>\n\n  <div class=\"td-header__centro\">\n    <ng-content select=\"[tdHeaderCenter]\" />\n  </div>\n\n  <div class=\"td-header__acciones\">\n    <ng-content select=\"[tdHeaderActions]\" />\n\n    @if (mostrarNotificaciones) {\n      <div class=\"td-header__desplegable\">\n        <button\n          class=\"td-header__boton td-header__notificaciones\"\n          type=\"button\"\n          aria-label=\"Notificaciones\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n          (click)=\"alternarNotificaciones()\"\n        >\n          <td-icon nombre=\"notifications\" />\n          @if (notificacionesNoLeidas() > 0) {\n            <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n          }\n        </button>\n\n        @if (panelNotificacionesAbierto) {\n          <section class=\"td-header__panel td-header__panel--notificaciones\">\n            <header>\n              <div>\n                <strong>Notificaciones</strong>\n                <small>{{ notificacionesNoLeidas() }} sin leer</small>\n              </div>\n              <td-icon nombre=\"notifications\" />\n            </header>\n\n            <div class=\"td-header__lista-notificaciones\">\n              @for (notificacion of notificaciones; track notificacion.id) {\n                <button\n                  type=\"button\"\n                  [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n                  (click)=\"seleccionarNotificacion(notificacion)\"\n                >\n                  <span class=\"td-header__notificacion-icono\">\n                    <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n                  </span>\n                  <span>\n                    <strong>{{ notificacion.titulo }}</strong>\n                    @if (notificacion.descripcion) {\n                      <small>{{ notificacion.descripcion }}</small>\n                    }\n                    @if (notificacion.fecha) {\n                      <time>{{ notificacion.fecha }}</time>\n                    }\n                  </span>\n                </button>\n              } @empty {\n                <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n              }\n            </div>\n\n            @if (notificaciones.length) {\n              <button\n                class=\"td-header__ver-todas\"\n                type=\"button\"\n                (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n              >\n                Ver todas las notificaciones\n              </button>\n            }\n          </section>\n        }\n      </div>\n    }\n\n    @if (mostrarPerfil && usuario) {\n      <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n      <div class=\"td-header__desplegable\">\n        <button\n          class=\"td-header__perfil\"\n          type=\"button\"\n          aria-label=\"Abrir perfil de usuario\"\n          aria-haspopup=\"menu\"\n          [attr.aria-expanded]=\"panelPerfilAbierto\"\n          (click)=\"alternarPerfil()\"\n        >\n          <span class=\"td-header__avatar\">\n            @if (avatarUrl) {\n              <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n            } @else {\n              {{ inicialesUsuario() }}\n            }\n          </span>\n          <span class=\"td-header__usuario\">\n            <strong>{{ usuario }}</strong>\n            @if (cargo) {\n              <small>{{ cargo }}</small>\n            }\n          </span>\n          <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n        </button>\n\n        @if (panelPerfilAbierto) {\n          <section class=\"td-header__panel td-header__panel--perfil\">\n            <div class=\"td-header__perfil-resumen\">\n              <span class=\"td-header__avatar td-header__avatar--grande\">\n                @if (avatarUrl) {\n                  <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n                } @else {\n                  {{ inicialesUsuario() }}\n                }\n              </span>\n              <div>\n                <strong>{{ usuario }}</strong>\n                <small>{{ cargo || 'Usuario' }}</small>\n              </div>\n            </div>\n            <div class=\"td-header__perfil-opciones\">\n              @for (accion of accionesPerfilVisibles(); track accion.id) {\n                <button\n                  type=\"button\"\n                  [class.td-header__salir]=\"accion.tono === 'danger'\"\n                  (click)=\"emitirAccionPerfil(accion)\"\n                >\n                  @if (accion.icono) {\n                    <td-icon [nombre]=\"accion.icono\" />\n                  }\n                  <span>\n                    <strong>{{ accion.etiqueta }}</strong>\n                    @if (accion.descripcion) {\n                      <small>{{ accion.descripcion }}</small>\n                    }\n                  </span>\n                </button>\n              }\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:var(--td-z-header, 800);display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-header, 0 8px 30px rgba(35, 42, 68, .05));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}:host ::ng-deep [tdHeaderStart],:host ::ng-deep [tdHeaderCenter],:host ::ng-deep [tdHeaderActions]{min-width:0}:host ::ng-deep [tdHeaderActions]{flex:0 0 auto}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:var(--td-radius-pill, 999px);padding:0 .15rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #ef4444);font-size:.58rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:var(--td-radius-lg, .8rem);padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:var(--td-radius-md, .7rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-panel, 0 22px 55px rgba(15, 23, 42, .18));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:var(--td-radius-pill, 50%);background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}.td-header__perfil-opciones button>span{display:grid;min-width:0;gap:.12rem}.td-header__perfil-opciones button strong,.td-header__perfil-opciones button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__perfil-opciones button strong{color:inherit;font-size:.72rem}.td-header__perfil-opciones button small{color:var(--suave);font-size:.64rem;font-weight:500}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__acciones{gap:.35rem}.td-header__boton{width:2.75rem;height:2.75rem}:host ::ng-deep [tdHeaderActions]{max-width:min(11rem,42vw)}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdHeader, decorators: [{
             type: Component,
-            args: [{ selector: 'td-header', imports: [TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n  class=\"td-header\"\n  [class.td-header--oscuro]=\"oscuro\"\n  [class.td-header--fijo]=\"fijo\"\n>\n  <div class=\"td-header__inicio\">\n    @if (mostrarMenu) {\n      <button\n        class=\"td-header__boton td-header__menu\"\n        type=\"button\"\n        [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n        [attr.aria-expanded]=\"menuAbierto\"\n        (click)=\"alternarMenu()\"\n      >\n        <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n      </button>\n    }\n\n    <ng-content select=\"[tdHeaderStart]\" />\n  </div>\n\n  <div class=\"td-header__centro\">\n    <ng-content select=\"[tdHeaderCenter]\" />\n  </div>\n\n  <div class=\"td-header__acciones\">\n    <ng-content select=\"[tdHeaderActions]\" />\n\n    @if (mostrarNotificaciones) {\n      <div class=\"td-header__desplegable\">\n        <button\n          class=\"td-header__boton td-header__notificaciones\"\n          type=\"button\"\n          aria-label=\"Notificaciones\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n          (click)=\"alternarNotificaciones()\"\n        >\n          <td-icon nombre=\"notifications\" />\n          @if (notificacionesNoLeidas() > 0) {\n            <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n          }\n        </button>\n\n        @if (panelNotificacionesAbierto) {\n          <section class=\"td-header__panel td-header__panel--notificaciones\">\n            <header>\n              <div>\n                <strong>Notificaciones</strong>\n                <small>{{ notificacionesNoLeidas() }} sin leer</small>\n              </div>\n              <td-icon nombre=\"notifications\" />\n            </header>\n\n            <div class=\"td-header__lista-notificaciones\">\n              @for (notificacion of notificaciones; track notificacion.id) {\n                <button\n                  type=\"button\"\n                  [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n                  (click)=\"seleccionarNotificacion(notificacion)\"\n                >\n                  <span class=\"td-header__notificacion-icono\">\n                    <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n                  </span>\n                  <span>\n                    <strong>{{ notificacion.titulo }}</strong>\n                    @if (notificacion.descripcion) {\n                      <small>{{ notificacion.descripcion }}</small>\n                    }\n                    @if (notificacion.fecha) {\n                      <time>{{ notificacion.fecha }}</time>\n                    }\n                  </span>\n                </button>\n              } @empty {\n                <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n              }\n            </div>\n\n            @if (notificaciones.length) {\n              <button\n                class=\"td-header__ver-todas\"\n                type=\"button\"\n                (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n              >\n                Ver todas las notificaciones\n              </button>\n            }\n          </section>\n        }\n      </div>\n    }\n\n    @if (mostrarPerfil && usuario) {\n      <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n      <div class=\"td-header__desplegable\">\n        <button\n          class=\"td-header__perfil\"\n          type=\"button\"\n          aria-label=\"Abrir perfil de usuario\"\n          aria-haspopup=\"menu\"\n          [attr.aria-expanded]=\"panelPerfilAbierto\"\n          (click)=\"alternarPerfil()\"\n        >\n          <span class=\"td-header__avatar\">\n            @if (avatarUrl) {\n              <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n            } @else {\n              {{ inicialesUsuario() }}\n            }\n          </span>\n          <span class=\"td-header__usuario\">\n            <strong>{{ usuario }}</strong>\n            @if (cargo) {\n              <small>{{ cargo }}</small>\n            }\n          </span>\n          <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n        </button>\n\n        @if (panelPerfilAbierto) {\n          <section class=\"td-header__panel td-header__panel--perfil\">\n            <div class=\"td-header__perfil-resumen\">\n              <span class=\"td-header__avatar td-header__avatar--grande\">\n                @if (avatarUrl) {\n                  <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n                } @else {\n                  {{ inicialesUsuario() }}\n                }\n              </span>\n              <div>\n                <strong>{{ usuario }}</strong>\n                <small>{{ cargo || 'Usuario' }}</small>\n              </div>\n            </div>\n            <div class=\"td-header__perfil-opciones\">\n              @for (accion of accionesPerfilVisibles(); track accion.id) {\n                <button\n                  type=\"button\"\n                  [class.td-header__salir]=\"accion.tono === 'danger'\"\n                  (click)=\"emitirAccionPerfil(accion)\"\n                >\n                  @if (accion.icono) {\n                    <td-icon [nombre]=\"accion.icono\" />\n                  }\n                  <span>\n                    <strong>{{ accion.etiqueta }}</strong>\n                    @if (accion.descripcion) {\n                      <small>{{ accion.descripcion }}</small>\n                    }\n                  </span>\n                </button>\n              }\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:var(--td-z-header, 800);display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-header, 0 8px 30px rgba(35, 42, 68, .05));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}:host ::ng-deep [tdHeaderStart],:host ::ng-deep [tdHeaderCenter],:host ::ng-deep [tdHeaderActions]{min-width:0}:host ::ng-deep [tdHeaderActions]{flex:0 0 auto}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:var(--td-radius-pill, 999px);padding:0 .15rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:var(--td-radius-lg, .8rem);padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:var(--td-radius-md, .7rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-panel, 0 22px 55px rgba(15, 23, 42, .18));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:var(--td-radius-pill, 50%);background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}.td-header__perfil-opciones button>span{display:grid;min-width:0;gap:.12rem}.td-header__perfil-opciones button strong,.td-header__perfil-opciones button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__perfil-opciones button strong{color:inherit;font-size:.72rem}.td-header__perfil-opciones button small{color:var(--suave);font-size:.64rem;font-weight:500}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__acciones{gap:.35rem}:host ::ng-deep [tdHeaderActions]{max-width:min(11rem,42vw)}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"] }]
+            args: [{ selector: 'td-header', imports: [TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n  class=\"td-header\"\n  [class.td-header--oscuro]=\"oscuro\"\n  [class.td-header--fijo]=\"fijo\"\n>\n  <div class=\"td-header__inicio\">\n    @if (mostrarMenu) {\n      <button\n        class=\"td-header__boton td-header__menu\"\n        type=\"button\"\n        [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n        [attr.aria-expanded]=\"menuAbierto\"\n        (click)=\"alternarMenu()\"\n      >\n        <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n      </button>\n    }\n\n    <ng-content select=\"[tdHeaderStart]\" />\n  </div>\n\n  <div class=\"td-header__centro\">\n    <ng-content select=\"[tdHeaderCenter]\" />\n  </div>\n\n  <div class=\"td-header__acciones\">\n    <ng-content select=\"[tdHeaderActions]\" />\n\n    @if (mostrarNotificaciones) {\n      <div class=\"td-header__desplegable\">\n        <button\n          class=\"td-header__boton td-header__notificaciones\"\n          type=\"button\"\n          aria-label=\"Notificaciones\"\n          aria-haspopup=\"dialog\"\n          [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n          (click)=\"alternarNotificaciones()\"\n        >\n          <td-icon nombre=\"notifications\" />\n          @if (notificacionesNoLeidas() > 0) {\n            <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n          }\n        </button>\n\n        @if (panelNotificacionesAbierto) {\n          <section class=\"td-header__panel td-header__panel--notificaciones\">\n            <header>\n              <div>\n                <strong>Notificaciones</strong>\n                <small>{{ notificacionesNoLeidas() }} sin leer</small>\n              </div>\n              <td-icon nombre=\"notifications\" />\n            </header>\n\n            <div class=\"td-header__lista-notificaciones\">\n              @for (notificacion of notificaciones; track notificacion.id) {\n                <button\n                  type=\"button\"\n                  [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n                  (click)=\"seleccionarNotificacion(notificacion)\"\n                >\n                  <span class=\"td-header__notificacion-icono\">\n                    <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n                  </span>\n                  <span>\n                    <strong>{{ notificacion.titulo }}</strong>\n                    @if (notificacion.descripcion) {\n                      <small>{{ notificacion.descripcion }}</small>\n                    }\n                    @if (notificacion.fecha) {\n                      <time>{{ notificacion.fecha }}</time>\n                    }\n                  </span>\n                </button>\n              } @empty {\n                <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n              }\n            </div>\n\n            @if (notificaciones.length) {\n              <button\n                class=\"td-header__ver-todas\"\n                type=\"button\"\n                (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n              >\n                Ver todas las notificaciones\n              </button>\n            }\n          </section>\n        }\n      </div>\n    }\n\n    @if (mostrarPerfil && usuario) {\n      <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n      <div class=\"td-header__desplegable\">\n        <button\n          class=\"td-header__perfil\"\n          type=\"button\"\n          aria-label=\"Abrir perfil de usuario\"\n          aria-haspopup=\"menu\"\n          [attr.aria-expanded]=\"panelPerfilAbierto\"\n          (click)=\"alternarPerfil()\"\n        >\n          <span class=\"td-header__avatar\">\n            @if (avatarUrl) {\n              <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n            } @else {\n              {{ inicialesUsuario() }}\n            }\n          </span>\n          <span class=\"td-header__usuario\">\n            <strong>{{ usuario }}</strong>\n            @if (cargo) {\n              <small>{{ cargo }}</small>\n            }\n          </span>\n          <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n        </button>\n\n        @if (panelPerfilAbierto) {\n          <section class=\"td-header__panel td-header__panel--perfil\">\n            <div class=\"td-header__perfil-resumen\">\n              <span class=\"td-header__avatar td-header__avatar--grande\">\n                @if (avatarUrl) {\n                  <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n                } @else {\n                  {{ inicialesUsuario() }}\n                }\n              </span>\n              <div>\n                <strong>{{ usuario }}</strong>\n                <small>{{ cargo || 'Usuario' }}</small>\n              </div>\n            </div>\n            <div class=\"td-header__perfil-opciones\">\n              @for (accion of accionesPerfilVisibles(); track accion.id) {\n                <button\n                  type=\"button\"\n                  [class.td-header__salir]=\"accion.tono === 'danger'\"\n                  (click)=\"emitirAccionPerfil(accion)\"\n                >\n                  @if (accion.icono) {\n                    <td-icon [nombre]=\"accion.icono\" />\n                  }\n                  <span>\n                    <strong>{{ accion.etiqueta }}</strong>\n                    @if (accion.descripcion) {\n                      <small>{{ accion.descripcion }}</small>\n                    }\n                  </span>\n                </button>\n              }\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:var(--td-z-header, 800);display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-header, 0 8px 30px rgba(35, 42, 68, .05));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}:host ::ng-deep [tdHeaderStart],:host ::ng-deep [tdHeaderCenter],:host ::ng-deep [tdHeaderActions]{min-width:0}:host ::ng-deep [tdHeaderActions]{flex:0 0 auto}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:var(--td-radius-pill, 999px);padding:0 .15rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #ef4444);font-size:.58rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:var(--td-radius-lg, .8rem);padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:var(--td-radius-md, .7rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-panel, 0 22px 55px rgba(15, 23, 42, .18));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:var(--td-radius-pill, 50%);background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}.td-header__perfil-opciones button>span{display:grid;min-width:0;gap:.12rem}.td-header__perfil-opciones button strong,.td-header__perfil-opciones button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__perfil-opciones button strong{color:inherit;font-size:.72rem}.td-header__perfil-opciones button small{color:var(--suave);font-size:.64rem;font-weight:500}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__acciones{gap:.35rem}.td-header__boton{width:2.75rem;height:2.75rem}:host ::ng-deep [tdHeaderActions]{max-width:min(11rem,42vw)}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"] }]
         }], propDecorators: { menuAbierto: [{
                 type: Input
             }], mostrarMenu: [{
@@ -5958,6 +5958,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Input
             }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
+class TdSidebar {
+    router = inject(Router);
+    destroyRef = inject(DestroyRef);
+    titulo = 'Gestión Corporativa';
+    subtitulo = 'Central Platform';
+    etiquetaNavegacion = 'Navegación';
+    logoUrl = '';
+    logoAlt = 'Logo';
+    textoCarga = 'Cargando menú...';
+    mensajeVacio = 'No hay opciones disponibles.';
+    error = '';
+    cargando = false;
+    oscuro = false;
+    modoCerrado = 'compacto';
+    set abierto(value) {
+        this.abiertoInterno.set(value);
+    }
+    get abierto() {
+        return this.abiertoInterno();
+    }
+    set menu(value) {
+        this.menuNormalizado.set(this.normalizarMenu(value ?? []));
+        this.expandirRutaActual();
+    }
+    get menu() {
+        return this.menuNormalizado();
+    }
+    abiertoChange = new EventEmitter();
+    seleccionar = new EventEmitter();
+    abiertoInterno = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "abiertoInterno" }] : /* istanbul ignore next */ []));
+    menuNormalizado = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "menuNormalizado" }] : /* istanbul ignore next */ []));
+    expandidos = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandidos" }] : /* istanbul ignore next */ []));
+    rutaSeleccionada = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rutaSeleccionada" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.expandirRutaActual());
+    }
+    alternarGrupo(clave) {
+        if (!this.abiertoInterno()) {
+            this.abiertoInterno.set(true);
+            this.abiertoChange.emit(true);
+        }
+        this.expandidos.update((actuales) => {
+            const siguientes = new Set(actuales);
+            siguientes.has(clave) ? siguientes.delete(clave) : siguientes.add(clave);
+            return siguientes;
+        });
+    }
+    estaExpandido(clave) {
+        return this.expandidos().has(clave);
+    }
+    seleccionarItem(item, nivel) {
+        this.seleccionar.emit({ item, nivel });
+    }
+    esItemSeleccionado(item) {
+        const ruta = this.normalizarRuta(item.ruta);
+        return !!ruta && ruta === this.rutaSeleccionada();
+    }
+    claveItem(item, padre, indice) {
+        return `${padre}/${item.nombre}-${indice}`;
+    }
+    inicialMarca() {
+        return (this.titulo.trim().charAt(0) || 'T').toUpperCase();
+    }
+    normalizarMenu(items) {
+        return [...items]
+            .sort((a, b) => a.orden - b.orden)
+            .map((item) => ({
+            ...item,
+            icono: item.icono?.trim() || 'folder',
+            subMenus: this.normalizarMenu(item.subMenus ?? []),
+        }));
+    }
+    expandirRutaActual() {
+        const rutaActual = this.normalizarRuta(this.router.url);
+        const coincidencia = this.buscarMejorCoincidenciaPorRuta(this.menuNormalizado(), rutaActual);
+        this.rutaSeleccionada.set(coincidencia?.ruta ?? '');
+        const clavesPadre = coincidencia?.ancestros ?? [];
+        if (!clavesPadre.length)
+            return;
+        this.expandidos.update((actuales) => {
+            const siguientes = new Set(actuales);
+            clavesPadre.forEach((clave) => siguientes.add(clave));
+            return siguientes;
+        });
+    }
+    buscarMejorCoincidenciaPorRuta(items, rutaActual, padre = 'raiz', ancestros = []) {
+        let mejor = null;
+        for (let indice = 0; indice < items.length; indice += 1) {
+            const item = items[indice];
+            const clave = this.claveItem(item, padre, indice);
+            const ruta = this.normalizarRuta(item.ruta);
+            if (this.rutaCoincide(ruta, rutaActual)) {
+                mejor = this.mejorCoincidencia(mejor, {
+                    ruta,
+                    ancestros,
+                    peso: ruta === rutaActual ? Number.MAX_SAFE_INTEGER : ruta.length,
+                });
+            }
+            const resultado = this.buscarMejorCoincidenciaPorRuta(item.subMenus ?? [], rutaActual, clave, [...ancestros, clave]);
+            mejor = this.mejorCoincidencia(mejor, resultado);
+        }
+        return mejor;
+    }
+    mejorCoincidencia(actual, candidata) {
+        if (!candidata)
+            return actual;
+        if (!actual)
+            return candidata;
+        return candidata.peso > actual.peso ? candidata : actual;
+    }
+    rutaCoincide(rutaMenu, rutaActual) {
+        if (!rutaMenu)
+            return false;
+        if (rutaMenu === '/')
+            return rutaActual === '/';
+        return rutaActual === rutaMenu || rutaActual.startsWith(`${rutaMenu}/`);
+    }
+    normalizarRuta(ruta) {
+        if (!ruta)
+            return '';
+        const limpia = ruta.split('?')[0].split('#')[0].trim();
+        if (!limpia || limpia === '/')
+            return '/';
+        const conSlashInicial = limpia.startsWith('/') ? limpia : `/${limpia}`;
+        return conSlashInicial.endsWith('/') ? conSlashInicial.slice(0, -1) : conSlashInicial;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", modoCerrado: "modoCerrado", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside\n  class=\"td-sidebar\"\n  [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n  [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n  [class.td-sidebar--oscuro]=\"oscuro\"\n  [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n  <header class=\"td-sidebar__marca\">\n    <div class=\"td-sidebar__logo\">\n      @if (logoUrl) {\n        <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      } @else {\n        <span>{{ inicialMarca() }}</span>\n      }\n    </div>\n\n    @if (abiertoInterno()) {\n      <div class=\"td-sidebar__marca-texto\">\n        <small>{{ subtitulo }}</small>\n        <strong>{{ titulo }}</strong>\n      </div>\n    }\n\n  </header>\n\n  <div class=\"td-sidebar__encabezado\">\n    @if (abiertoInterno()) {\n      <span>{{ etiquetaNavegacion }}</span>\n    } @else {\n      <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n    }\n  </div>\n\n  <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n    @if (cargando) {\n      <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n    } @else if (error) {\n      <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n    } @else if (!menuNormalizado().length) {\n      <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n    } @else {\n      <ng-container\n        [ngTemplateOutlet]=\"listaMenu\"\n        [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n      />\n    }\n  </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n  <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n    @for (item of items; track item) {\n      @let clave = claveItem(item, padre, $index);\n      @let tieneHijos = item.subMenus.length > 0;\n\n      <li class=\"td-sidebar__item\">\n        @if (tieneHijos) {\n          <button\n            class=\"td-sidebar__enlace\"\n            type=\"button\"\n            [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n            [attr.aria-expanded]=\"estaExpandido(clave)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"alternarGrupo(clave)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n              <td-icon\n                class=\"td-sidebar__flecha\"\n                [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n                nombre=\"chevron_right\"\n              />\n            }\n          </button>\n        } @else {\n          <a\n            class=\"td-sidebar__enlace\"\n            [routerLink]=\"item.ruta || '/'\"\n            [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"seleccionarItem(item, nivel)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n            }\n          </a>\n        }\n\n        @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n          <ng-container\n            [ngTemplateOutlet]=\"listaMenu\"\n            [ngTemplateOutletContext]=\"{\n              items: item.subMenus,\n              nivel: nivel + 1,\n              padre: clave\n            }\"\n          />\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: var(--td-color-surface, #09090b);--td-borde: var(--td-color-border, #27272a);--td-texto: var(--td-color-text, #d4d4d8);--td-texto-suave: var(--td-color-text-muted, #71717a);--td-hover: var(--td-color-surface-soft, #18181b);--td-activo: var(--td-color-primary-soft, #172554);--td-acento: var(--td-color-primary, #60a5fa)}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:var(--td-radius-md, .75rem);color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #2563eb),var(--td-color-info, #3157a4));font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:var(--td-radius-sm, .55rem);padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:var(--td-color-warning, #d97706)}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-sidebar', imports: [NgTemplateOutlet, RouterLink, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside\n  class=\"td-sidebar\"\n  [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n  [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n  [class.td-sidebar--oscuro]=\"oscuro\"\n  [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n  <header class=\"td-sidebar__marca\">\n    <div class=\"td-sidebar__logo\">\n      @if (logoUrl) {\n        <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      } @else {\n        <span>{{ inicialMarca() }}</span>\n      }\n    </div>\n\n    @if (abiertoInterno()) {\n      <div class=\"td-sidebar__marca-texto\">\n        <small>{{ subtitulo }}</small>\n        <strong>{{ titulo }}</strong>\n      </div>\n    }\n\n  </header>\n\n  <div class=\"td-sidebar__encabezado\">\n    @if (abiertoInterno()) {\n      <span>{{ etiquetaNavegacion }}</span>\n    } @else {\n      <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n    }\n  </div>\n\n  <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n    @if (cargando) {\n      <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n    } @else if (error) {\n      <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n    } @else if (!menuNormalizado().length) {\n      <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n    } @else {\n      <ng-container\n        [ngTemplateOutlet]=\"listaMenu\"\n        [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n      />\n    }\n  </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n  <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n    @for (item of items; track item) {\n      @let clave = claveItem(item, padre, $index);\n      @let tieneHijos = item.subMenus.length > 0;\n\n      <li class=\"td-sidebar__item\">\n        @if (tieneHijos) {\n          <button\n            class=\"td-sidebar__enlace\"\n            type=\"button\"\n            [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n            [attr.aria-expanded]=\"estaExpandido(clave)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"alternarGrupo(clave)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n              <td-icon\n                class=\"td-sidebar__flecha\"\n                [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n                nombre=\"chevron_right\"\n              />\n            }\n          </button>\n        } @else {\n          <a\n            class=\"td-sidebar__enlace\"\n            [routerLink]=\"item.ruta || '/'\"\n            [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"seleccionarItem(item, nivel)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n            }\n          </a>\n        }\n\n        @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n          <ng-container\n            [ngTemplateOutlet]=\"listaMenu\"\n            [ngTemplateOutletContext]=\"{\n              items: item.subMenus,\n              nivel: nivel + 1,\n              padre: clave\n            }\"\n          />\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: var(--td-color-surface, #09090b);--td-borde: var(--td-color-border, #27272a);--td-texto: var(--td-color-text, #d4d4d8);--td-texto-suave: var(--td-color-text-muted, #71717a);--td-hover: var(--td-color-surface-soft, #18181b);--td-activo: var(--td-color-primary-soft, #172554);--td-acento: var(--td-color-primary, #60a5fa)}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:var(--td-radius-md, .75rem);color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #2563eb),var(--td-color-info, #3157a4));font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:var(--td-radius-sm, .55rem);padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:var(--td-color-warning, #d97706)}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { titulo: [{
+                type: Input
+            }], subtitulo: [{
+                type: Input
+            }], etiquetaNavegacion: [{
+                type: Input
+            }], logoUrl: [{
+                type: Input
+            }], logoAlt: [{
+                type: Input
+            }], textoCarga: [{
+                type: Input
+            }], mensajeVacio: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], cargando: [{
+                type: Input
+            }], oscuro: [{
+                type: Input
+            }], modoCerrado: [{
+                type: Input
+            }], abierto: [{
+                type: Input
+            }], menu: [{
+                type: Input
+            }], abiertoChange: [{
+                type: Output
+            }], seleccionar: [{
+                type: Output
+            }] } });
+
 class TdLayoutHeaderSlot {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayoutHeaderSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: TdLayoutHeaderSlot, isStandalone: true, selector: "[tdLayoutHeader]", ngImport: i0 });
@@ -6001,6 +6171,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 class TdLayout {
     headerSlot;
     sidebarSlot;
+    sidebarComponent;
     footerSlot;
     headerHost;
     sidebarHost;
@@ -6010,8 +6181,10 @@ class TdLayout {
     mobile = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "mobile" }] : /* istanbul ignore next */ []));
     resizeObserver;
+    sidebarSelectionSubscription;
     fillViewport = true;
     closeSidebarOnBackdrop = true;
+    closeSidebarOnNavigation = true;
     mobileBreakpoint = 960;
     sidebarPlacement = 'auto';
     headerSpan = 'content';
@@ -6035,6 +6208,11 @@ class TdLayout {
     }
     ngAfterContentInit() {
         this.syncViewport();
+        this.sidebarSelectionSubscription = this.sidebarComponent?.seleccionar.subscribe(() => {
+            if (this.closeSidebarOnNavigation && this.mobile() && this.sidebarAsOverlay()) {
+                this.closeSidebar();
+            }
+        });
     }
     ngAfterViewInit() {
         this.updateHeaderOffset();
@@ -6047,6 +6225,7 @@ class TdLayout {
     }
     ngOnDestroy() {
         this.resizeObserver?.disconnect();
+        this.sidebarSelectionSubscription?.unsubscribe();
     }
     syncViewport() {
         if (typeof window === 'undefined') {
@@ -6119,7 +6298,7 @@ class TdLayout {
         this.sidebarOpenChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdLayout, isStandalone: true, selector: "td-layout, td-shell", inputs: { fillViewport: ["fillViewport", "fillViewport", booleanAttribute], closeSidebarOnBackdrop: ["closeSidebarOnBackdrop", "closeSidebarOnBackdrop", booleanAttribute], mobileBreakpoint: "mobileBreakpoint", sidebarPlacement: "sidebarPlacement", headerSpan: "headerSpan", footerSpan: "footerSpan", mobileSidebarStyle: "mobileSidebarStyle", sidebarOpen: "sidebarOpen" }, outputs: { sidebarOpenChange: "sidebarOpenChange" }, host: { listeners: { "window:resize": "syncViewport()", "window:scroll": "syncOverlayPosition()", "document:pointerdown": "handlePointerDownOutside($event)" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: TdLayoutHeaderSlot, descendants: true }, { propertyName: "sidebarSlot", first: true, predicate: TdLayoutSidebarSlot, descendants: true }, { propertyName: "footerSlot", first: true, predicate: TdLayoutFooterSlot, descendants: true }], viewQueries: [{ propertyName: "headerHost", first: true, predicate: ["headerHost"], descendants: true, read: ElementRef }, { propertyName: "sidebarHost", first: true, predicate: ["sidebarHost"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdLayout, isStandalone: true, selector: "td-layout, td-shell", inputs: { fillViewport: ["fillViewport", "fillViewport", booleanAttribute], closeSidebarOnBackdrop: ["closeSidebarOnBackdrop", "closeSidebarOnBackdrop", booleanAttribute], closeSidebarOnNavigation: ["closeSidebarOnNavigation", "closeSidebarOnNavigation", booleanAttribute], mobileBreakpoint: "mobileBreakpoint", sidebarPlacement: "sidebarPlacement", headerSpan: "headerSpan", footerSpan: "footerSpan", mobileSidebarStyle: "mobileSidebarStyle", sidebarOpen: "sidebarOpen" }, outputs: { sidebarOpenChange: "sidebarOpenChange" }, host: { listeners: { "window:resize": "syncViewport()", "window:scroll": "syncOverlayPosition()", "document:pointerdown": "handlePointerDownOutside($event)" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: TdLayoutHeaderSlot, descendants: true }, { propertyName: "sidebarSlot", first: true, predicate: TdLayoutSidebarSlot, descendants: true }, { propertyName: "sidebarComponent", first: true, predicate: TdSidebar, descendants: true }, { propertyName: "footerSlot", first: true, predicate: TdLayoutFooterSlot, descendants: true }], viewQueries: [{ propertyName: "headerHost", first: true, predicate: ["headerHost"], descendants: true, read: ElementRef }, { propertyName: "sidebarHost", first: true, predicate: ["sidebarHost"], descendants: true, read: ElementRef }], ngImport: i0, template: `
     <div
       class="td-layout"
       [class.td-layout--viewport]="fillViewport"
@@ -6228,6 +6407,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             }], sidebarSlot: [{
                 type: ContentChild,
                 args: [TdLayoutSidebarSlot]
+            }], sidebarComponent: [{
+                type: ContentChild,
+                args: [TdSidebar]
             }], footerSlot: [{
                 type: ContentChild,
                 args: [TdLayoutFooterSlot]
@@ -6243,6 +6425,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             }], closeSidebarOnBackdrop: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], closeSidebarOnNavigation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], mobileBreakpoint: [{
                 type: Input
             }], sidebarPlacement: [{
@@ -7845,176 +8030,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Output
             }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
-class TdSidebar {
-    router = inject(Router);
-    destroyRef = inject(DestroyRef);
-    titulo = 'Gestión Corporativa';
-    subtitulo = 'Central Platform';
-    etiquetaNavegacion = 'Navegación';
-    logoUrl = '';
-    logoAlt = 'Logo';
-    textoCarga = 'Cargando menú...';
-    mensajeVacio = 'No hay opciones disponibles.';
-    error = '';
-    cargando = false;
-    oscuro = false;
-    modoCerrado = 'compacto';
-    set abierto(value) {
-        this.abiertoInterno.set(value);
-    }
-    get abierto() {
-        return this.abiertoInterno();
-    }
-    set menu(value) {
-        this.menuNormalizado.set(this.normalizarMenu(value ?? []));
-        this.expandirRutaActual();
-    }
-    get menu() {
-        return this.menuNormalizado();
-    }
-    abiertoChange = new EventEmitter();
-    seleccionar = new EventEmitter();
-    abiertoInterno = signal(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "abiertoInterno" }] : /* istanbul ignore next */ []));
-    menuNormalizado = signal([], /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "menuNormalizado" }] : /* istanbul ignore next */ []));
-    expandidos = signal(new Set(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "expandidos" }] : /* istanbul ignore next */ []));
-    rutaSeleccionada = signal('', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "rutaSeleccionada" }] : /* istanbul ignore next */ []));
-    constructor() {
-        this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => this.expandirRutaActual());
-    }
-    alternarGrupo(clave) {
-        if (!this.abiertoInterno()) {
-            this.abiertoInterno.set(true);
-            this.abiertoChange.emit(true);
-        }
-        this.expandidos.update((actuales) => {
-            const siguientes = new Set(actuales);
-            siguientes.has(clave) ? siguientes.delete(clave) : siguientes.add(clave);
-            return siguientes;
-        });
-    }
-    estaExpandido(clave) {
-        return this.expandidos().has(clave);
-    }
-    seleccionarItem(item, nivel) {
-        this.seleccionar.emit({ item, nivel });
-    }
-    esItemSeleccionado(item) {
-        const ruta = this.normalizarRuta(item.ruta);
-        return !!ruta && ruta === this.rutaSeleccionada();
-    }
-    claveItem(item, padre, indice) {
-        return `${padre}/${item.nombre}-${indice}`;
-    }
-    inicialMarca() {
-        return (this.titulo.trim().charAt(0) || 'T').toUpperCase();
-    }
-    normalizarMenu(items) {
-        return [...items]
-            .sort((a, b) => a.orden - b.orden)
-            .map((item) => ({
-            ...item,
-            icono: item.icono?.trim() || 'folder',
-            subMenus: this.normalizarMenu(item.subMenus ?? []),
-        }));
-    }
-    expandirRutaActual() {
-        const rutaActual = this.normalizarRuta(this.router.url);
-        const coincidencia = this.buscarMejorCoincidenciaPorRuta(this.menuNormalizado(), rutaActual);
-        this.rutaSeleccionada.set(coincidencia?.ruta ?? '');
-        const clavesPadre = coincidencia?.ancestros ?? [];
-        if (!clavesPadre.length)
-            return;
-        this.expandidos.update((actuales) => {
-            const siguientes = new Set(actuales);
-            clavesPadre.forEach((clave) => siguientes.add(clave));
-            return siguientes;
-        });
-    }
-    buscarMejorCoincidenciaPorRuta(items, rutaActual, padre = 'raiz', ancestros = []) {
-        let mejor = null;
-        for (let indice = 0; indice < items.length; indice += 1) {
-            const item = items[indice];
-            const clave = this.claveItem(item, padre, indice);
-            const ruta = this.normalizarRuta(item.ruta);
-            if (this.rutaCoincide(ruta, rutaActual)) {
-                mejor = this.mejorCoincidencia(mejor, {
-                    ruta,
-                    ancestros,
-                    peso: ruta === rutaActual ? Number.MAX_SAFE_INTEGER : ruta.length,
-                });
-            }
-            const resultado = this.buscarMejorCoincidenciaPorRuta(item.subMenus ?? [], rutaActual, clave, [...ancestros, clave]);
-            mejor = this.mejorCoincidencia(mejor, resultado);
-        }
-        return mejor;
-    }
-    mejorCoincidencia(actual, candidata) {
-        if (!candidata)
-            return actual;
-        if (!actual)
-            return candidata;
-        return candidata.peso > actual.peso ? candidata : actual;
-    }
-    rutaCoincide(rutaMenu, rutaActual) {
-        if (!rutaMenu)
-            return false;
-        if (rutaMenu === '/')
-            return rutaActual === '/';
-        return rutaActual === rutaMenu || rutaActual.startsWith(`${rutaMenu}/`);
-    }
-    normalizarRuta(ruta) {
-        if (!ruta)
-            return '';
-        const limpia = ruta.split('?')[0].split('#')[0].trim();
-        if (!limpia || limpia === '/')
-            return '/';
-        const conSlashInicial = limpia.startsWith('/') ? limpia : `/${limpia}`;
-        return conSlashInicial.endsWith('/') ? conSlashInicial.slice(0, -1) : conSlashInicial;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", modoCerrado: "modoCerrado", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside\n  class=\"td-sidebar\"\n  [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n  [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n  [class.td-sidebar--oscuro]=\"oscuro\"\n  [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n  <header class=\"td-sidebar__marca\">\n    <div class=\"td-sidebar__logo\">\n      @if (logoUrl) {\n        <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      } @else {\n        <span>{{ inicialMarca() }}</span>\n      }\n    </div>\n\n    @if (abiertoInterno()) {\n      <div class=\"td-sidebar__marca-texto\">\n        <small>{{ subtitulo }}</small>\n        <strong>{{ titulo }}</strong>\n      </div>\n    }\n\n  </header>\n\n  <div class=\"td-sidebar__encabezado\">\n    @if (abiertoInterno()) {\n      <span>{{ etiquetaNavegacion }}</span>\n    } @else {\n      <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n    }\n  </div>\n\n  <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n    @if (cargando) {\n      <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n    } @else if (error) {\n      <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n    } @else if (!menuNormalizado().length) {\n      <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n    } @else {\n      <ng-container\n        [ngTemplateOutlet]=\"listaMenu\"\n        [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n      />\n    }\n  </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n  <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n    @for (item of items; track item) {\n      @let clave = claveItem(item, padre, $index);\n      @let tieneHijos = item.subMenus.length > 0;\n\n      <li class=\"td-sidebar__item\">\n        @if (tieneHijos) {\n          <button\n            class=\"td-sidebar__enlace\"\n            type=\"button\"\n            [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n            [attr.aria-expanded]=\"estaExpandido(clave)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"alternarGrupo(clave)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n              <td-icon\n                class=\"td-sidebar__flecha\"\n                [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n                nombre=\"chevron_right\"\n              />\n            }\n          </button>\n        } @else {\n          <a\n            class=\"td-sidebar__enlace\"\n            [routerLink]=\"item.ruta || '/'\"\n            [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"seleccionarItem(item, nivel)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n            }\n          </a>\n        }\n\n        @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n          <ng-container\n            [ngTemplateOutlet]=\"listaMenu\"\n            [ngTemplateOutletContext]=\"{\n              items: item.subMenus,\n              nivel: nivel + 1,\n              padre: clave\n            }\"\n          />\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: var(--td-color-surface, #09090b);--td-borde: var(--td-color-border, #27272a);--td-texto: var(--td-color-text, #d4d4d8);--td-texto-suave: var(--td-color-text-muted, #71717a);--td-hover: var(--td-color-surface-soft, #18181b);--td-activo: var(--td-color-primary-soft, #172554);--td-acento: var(--td-color-primary, #60a5fa)}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:var(--td-radius-md, .75rem);color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #2563eb),var(--td-color-info, #3157a4));font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:var(--td-radius-sm, .55rem);padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:var(--td-color-warning, #d97706)}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, decorators: [{
-            type: Component,
-            args: [{ selector: 'td-sidebar', imports: [NgTemplateOutlet, RouterLink, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside\n  class=\"td-sidebar\"\n  [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n  [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n  [class.td-sidebar--oscuro]=\"oscuro\"\n  [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n  <header class=\"td-sidebar__marca\">\n    <div class=\"td-sidebar__logo\">\n      @if (logoUrl) {\n        <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      } @else {\n        <span>{{ inicialMarca() }}</span>\n      }\n    </div>\n\n    @if (abiertoInterno()) {\n      <div class=\"td-sidebar__marca-texto\">\n        <small>{{ subtitulo }}</small>\n        <strong>{{ titulo }}</strong>\n      </div>\n    }\n\n  </header>\n\n  <div class=\"td-sidebar__encabezado\">\n    @if (abiertoInterno()) {\n      <span>{{ etiquetaNavegacion }}</span>\n    } @else {\n      <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n    }\n  </div>\n\n  <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n    @if (cargando) {\n      <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n    } @else if (error) {\n      <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n    } @else if (!menuNormalizado().length) {\n      <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n    } @else {\n      <ng-container\n        [ngTemplateOutlet]=\"listaMenu\"\n        [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n      />\n    }\n  </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n  <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n    @for (item of items; track item) {\n      @let clave = claveItem(item, padre, $index);\n      @let tieneHijos = item.subMenus.length > 0;\n\n      <li class=\"td-sidebar__item\">\n        @if (tieneHijos) {\n          <button\n            class=\"td-sidebar__enlace\"\n            type=\"button\"\n            [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n            [attr.aria-expanded]=\"estaExpandido(clave)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"alternarGrupo(clave)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n              <td-icon\n                class=\"td-sidebar__flecha\"\n                [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n                nombre=\"chevron_right\"\n              />\n            }\n          </button>\n        } @else {\n          <a\n            class=\"td-sidebar__enlace\"\n            [routerLink]=\"item.ruta || '/'\"\n            [class.td-sidebar__enlace--ruta-activa]=\"esItemSeleccionado(item)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"seleccionarItem(item, nivel)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n            }\n          </a>\n        }\n\n        @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n          <ng-container\n            [ngTemplateOutlet]=\"listaMenu\"\n            [ngTemplateOutletContext]=\"{\n              items: item.subMenus,\n              nivel: nivel + 1,\n              padre: clave\n            }\"\n          />\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: var(--td-color-surface, #09090b);--td-borde: var(--td-color-border, #27272a);--td-texto: var(--td-color-text, #d4d4d8);--td-texto-suave: var(--td-color-text-muted, #71717a);--td-hover: var(--td-color-surface-soft, #18181b);--td-activo: var(--td-color-primary-soft, #172554);--td-acento: var(--td-color-primary, #60a5fa)}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:var(--td-radius-md, .75rem);color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #2563eb),var(--td-color-info, #3157a4));font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:var(--td-radius-sm, .55rem);padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:var(--td-color-warning, #d97706)}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { titulo: [{
-                type: Input
-            }], subtitulo: [{
-                type: Input
-            }], etiquetaNavegacion: [{
-                type: Input
-            }], logoUrl: [{
-                type: Input
-            }], logoAlt: [{
-                type: Input
-            }], textoCarga: [{
-                type: Input
-            }], mensajeVacio: [{
-                type: Input
-            }], error: [{
-                type: Input
-            }], cargando: [{
-                type: Input
-            }], oscuro: [{
-                type: Input
-            }], modoCerrado: [{
-                type: Input
-            }], abierto: [{
-                type: Input
-            }], menu: [{
-                type: Input
-            }], abiertoChange: [{
-                type: Output
-            }], seleccionar: [{
-                type: Output
-            }] } });
-
 let tabSequence = 0;
 class TdTab {
     generatedId = `td-tab-${++tabSequence}`;
@@ -8280,7 +8295,7 @@ class TdTabs {
         <ng-content select="[tdTabsActions]" />
       </div>
     </section>
-  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__header{grid-column:1;grid-row:1;display:flex;min-width:0;align-items:center;gap:.75rem}.td-tabs__list{display:flex;width:100%;min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__actions{grid-row:1;display:inline-flex;flex:0 0 auto;align-items:center;gap:.45rem;min-width:0;padding-inline:.25rem}.td-tabs__actions:empty{display:none}.td-tabs__actions--header{grid-column:2;align-self:center;justify-content:flex-end}.td-tabs__actions--footer{grid-column:1/-1;grid-row:3;justify-content:flex-end;padding:.5rem 0 0}.td-tabs--actions-footer .td-tabs__header{grid-column:1/-1}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:var(--td-radius-pill, 999px);padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__header,.td-tabs--linea .td-tabs__actions--header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:var(--td-radius-pill, 999px) var(--td-radius-pill, 999px) 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .8rem);padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:var(--td-shadow-sm, 0 3px 10px rgba(15, 23, 42, .08))}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .9rem);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{padding:0 .45rem;background:transparent}.td-tabs--contenida .td-tabs__header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:transparent}.td-tabs--contenida .td-tabs__panel{padding:1rem 1.25rem}.td-tabs--contenida .td-tabs__actions--footer{border-top:1px solid var(--td-tabs-border);padding:.6rem 1.25rem .85rem}.td-tabs__panel{grid-column:1/-1;grid-row:2;min-width:0;min-height:0;height:var(--td-tabs-panel-height, auto);padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}.td-tabs--panel-scrollable .td-tabs__panel{overflow:auto;overscroll-behavior:contain}.td-tabs--actions-footer .td-tabs__panel{height:auto;max-height:var(--td-tabs-panel-height, none)}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs{grid-template-columns:minmax(0,1fr)}.td-tabs__header{grid-column:1/-1;flex-wrap:wrap;gap:.5rem}.td-tabs__list{flex-basis:100%;justify-content:flex-start!important}.td-tabs__actions--header{grid-column:1/-1;grid-row:1;width:100%;justify-content:flex-start;overflow-x:auto;padding-inline:0;scrollbar-width:none}.td-tabs:not(.td-tabs--actions-footer) .td-tabs__header{grid-row:2}.td-tabs__actions::-webkit-scrollbar{display:none}.td-tabs__actions--footer{flex-wrap:wrap;justify-content:stretch;padding-top:.75rem}.td-tabs__actions--footer ::ng-deep td-button{flex:1 1 auto}.td-tabs--stretch .td-tabs__tab{min-width:max-content;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__header{grid-column:1;grid-row:1;display:flex;min-width:0;align-items:center;gap:.75rem}.td-tabs__list{display:flex;width:100%;min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__actions{grid-row:1;display:inline-flex;flex:0 0 auto;align-items:center;gap:.45rem;min-width:0;padding-inline:.25rem}.td-tabs__actions:empty{display:none}.td-tabs__actions--header{grid-column:2;align-self:center;justify-content:flex-end}.td-tabs__actions--footer{grid-column:1/-1;grid-row:3;justify-content:flex-end;padding:.5rem 0 0}.td-tabs--actions-footer .td-tabs__header{grid-column:1/-1}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .78rem/1 var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:var(--td-radius-pill, 999px);padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__header,.td-tabs--linea .td-tabs__actions--header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:var(--td-radius-pill, 999px) var(--td-radius-pill, 999px) 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .8rem);padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:var(--td-shadow-sm, 0 3px 10px rgba(15, 23, 42, .08))}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .9rem);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{padding:0 .45rem;background:transparent}.td-tabs--contenida .td-tabs__header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:transparent}.td-tabs--contenida .td-tabs__panel{padding:1rem 1.25rem}.td-tabs--contenida .td-tabs__actions--footer{border-top:1px solid var(--td-tabs-border);padding:.6rem 1.25rem .85rem}.td-tabs__panel{grid-column:1/-1;grid-row:2;min-width:0;min-height:0;height:var(--td-tabs-panel-height, auto);padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}.td-tabs--panel-scrollable .td-tabs__panel{overflow:auto;overscroll-behavior:contain}.td-tabs--actions-footer .td-tabs__panel{height:auto;max-height:var(--td-tabs-panel-height, none)}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs{grid-template-columns:minmax(0,1fr)}.td-tabs__header{grid-column:1/-1;flex-wrap:wrap;gap:.5rem}.td-tabs__list{flex-basis:100%;justify-content:flex-start!important}.td-tabs__actions--header{grid-column:1/-1;grid-row:1;width:100%;justify-content:flex-start;overflow-x:auto;padding-inline:0;scrollbar-width:none}.td-tabs:not(.td-tabs--actions-footer) .td-tabs__header{grid-row:2}.td-tabs__actions::-webkit-scrollbar{display:none}.td-tabs__actions--footer{flex-wrap:wrap;justify-content:stretch;padding-top:.75rem}.td-tabs__actions--footer ::ng-deep td-button{flex:1 1 auto}.td-tabs--stretch .td-tabs__tab{min-width:max-content;min-height:2.75rem;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTabs, decorators: [{
             type: Component,
@@ -8352,7 +8367,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         <ng-content select="[tdTabsActions]" />
       </div>
     </section>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__header{grid-column:1;grid-row:1;display:flex;min-width:0;align-items:center;gap:.75rem}.td-tabs__list{display:flex;width:100%;min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__actions{grid-row:1;display:inline-flex;flex:0 0 auto;align-items:center;gap:.45rem;min-width:0;padding-inline:.25rem}.td-tabs__actions:empty{display:none}.td-tabs__actions--header{grid-column:2;align-self:center;justify-content:flex-end}.td-tabs__actions--footer{grid-column:1/-1;grid-row:3;justify-content:flex-end;padding:.5rem 0 0}.td-tabs--actions-footer .td-tabs__header{grid-column:1/-1}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:var(--td-radius-pill, 999px);padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__header,.td-tabs--linea .td-tabs__actions--header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:var(--td-radius-pill, 999px) var(--td-radius-pill, 999px) 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .8rem);padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:var(--td-shadow-sm, 0 3px 10px rgba(15, 23, 42, .08))}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .9rem);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{padding:0 .45rem;background:transparent}.td-tabs--contenida .td-tabs__header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:transparent}.td-tabs--contenida .td-tabs__panel{padding:1rem 1.25rem}.td-tabs--contenida .td-tabs__actions--footer{border-top:1px solid var(--td-tabs-border);padding:.6rem 1.25rem .85rem}.td-tabs__panel{grid-column:1/-1;grid-row:2;min-width:0;min-height:0;height:var(--td-tabs-panel-height, auto);padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}.td-tabs--panel-scrollable .td-tabs__panel{overflow:auto;overscroll-behavior:contain}.td-tabs--actions-footer .td-tabs__panel{height:auto;max-height:var(--td-tabs-panel-height, none)}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs{grid-template-columns:minmax(0,1fr)}.td-tabs__header{grid-column:1/-1;flex-wrap:wrap;gap:.5rem}.td-tabs__list{flex-basis:100%;justify-content:flex-start!important}.td-tabs__actions--header{grid-column:1/-1;grid-row:1;width:100%;justify-content:flex-start;overflow-x:auto;padding-inline:0;scrollbar-width:none}.td-tabs:not(.td-tabs--actions-footer) .td-tabs__header{grid-row:2}.td-tabs__actions::-webkit-scrollbar{display:none}.td-tabs__actions--footer{flex-wrap:wrap;justify-content:stretch;padding-top:.75rem}.td-tabs__actions--footer ::ng-deep td-button{flex:1 1 auto}.td-tabs--stretch .td-tabs__tab{min-width:max-content;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);display:grid;grid-template-columns:minmax(0,1fr) auto;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__header{grid-column:1;grid-row:1;display:flex;min-width:0;align-items:center;gap:.75rem}.td-tabs__list{display:flex;width:100%;min-width:0;flex:1 1 auto;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__actions{grid-row:1;display:inline-flex;flex:0 0 auto;align-items:center;gap:.45rem;min-width:0;padding-inline:.25rem}.td-tabs__actions:empty{display:none}.td-tabs__actions--header{grid-column:2;align-self:center;justify-content:flex-end}.td-tabs__actions--footer{grid-column:1/-1;grid-row:3;justify-content:flex-end;padding:.5rem 0 0}.td-tabs--actions-footer .td-tabs__header{grid-column:1/-1}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .78rem/1 var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:var(--td-radius-pill, 999px);padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__header,.td-tabs--linea .td-tabs__actions--header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:var(--td-radius-pill, 999px) var(--td-radius-pill, 999px) 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .8rem);padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:var(--td-shadow-sm, 0 3px 10px rgba(15, 23, 42, .08))}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .9rem);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{padding:0 .45rem;background:transparent}.td-tabs--contenida .td-tabs__header{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:transparent}.td-tabs--contenida .td-tabs__panel{padding:1rem 1.25rem}.td-tabs--contenida .td-tabs__actions--footer{border-top:1px solid var(--td-tabs-border);padding:.6rem 1.25rem .85rem}.td-tabs__panel{grid-column:1/-1;grid-row:2;min-width:0;min-height:0;height:var(--td-tabs-panel-height, auto);padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}.td-tabs--panel-scrollable .td-tabs__panel{overflow:auto;overscroll-behavior:contain}.td-tabs--actions-footer .td-tabs__panel{height:auto;max-height:var(--td-tabs-panel-height, none)}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs{grid-template-columns:minmax(0,1fr)}.td-tabs__header{grid-column:1/-1;flex-wrap:wrap;gap:.5rem}.td-tabs__list{flex-basis:100%;justify-content:flex-start!important}.td-tabs__actions--header{grid-column:1/-1;grid-row:1;width:100%;justify-content:flex-start;overflow-x:auto;padding-inline:0;scrollbar-width:none}.td-tabs:not(.td-tabs--actions-footer) .td-tabs__header{grid-row:2}.td-tabs__actions::-webkit-scrollbar{display:none}.td-tabs__actions--footer{flex-wrap:wrap;justify-content:stretch;padding-top:.75rem}.td-tabs__actions--footer ::ng-deep td-button{flex:1 1 auto}.td-tabs--stretch .td-tabs__tab{min-width:max-content;min-height:2.75rem;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"] }]
         }], propDecorators: { tabQuery: [{
                 type: ContentChildren,
                 args: [TdTab]