sapenlinea-components 0.9.80 → 0.10.82

package/fesm2022/sapenlinea-components.mjs

@@ -11,6 +11,7 @@ import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
 import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent, VisualMapComponent, LegendComponent, TitleComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { DomSanitizer } from '@angular/platform-browser';
+import SignaturePad from 'signature_pad';
 
 class PaginationComponent {
     // Inputs as Models/Signals
@@ -128,11 +129,13 @@ const STATUS_TONE_STYLES = {
     error: { bg: '#D89D9D', color: '#CF0707' },
     warning: { bg: '#D8BF9D', color: '#CF6507' },
     info: { bg: '#9DAFD8', color: '#0746CF' },
+    purple: { bg: '#C7B0D8', color: '#6A1B9A' },
     neutral: { bg: '#BAC2BB', color: '#40484C' },
 };
 const ICON_COLOR_MAP = {
     'icon-delete': '#CF0707',
     'icon-deactivate': '#CF0707',
+    'icon-logout': '#CF0707',
     'icon-edit': '#596300',
     'icon-refresh': '#596300',
     'icon-activate': '#006D2F',
@@ -545,11 +548,11 @@ class Table {
         this.pdfViewerService.open({ name, urls });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", isSignal: true, isRequired: false, transformFunction: null }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", isSignal: true, isRequired: false, transformFunction: null }, columnGroups: { classPropertyName: "columnGroups", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction", columnGroupChange: "columnGroupChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\"\n            [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n            (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\n</div>", styles: [".table-wrapper{width:100%;max-width:100%;min-width:0;overflow-x:auto;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;max-width:100%;table-layout:fixed;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad;overflow-wrap:anywhere;word-break:break-word}.inner-table thead th:not(.checkbox-header):not(.actions-header):not(.column-group-header):not(.column-group-sub-header),.inner-table tbody td:not(.checkbox-cell):not(.acciones-cell):not(.child-cell-full):not(.legend-cell){max-width:0}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}\n"], dependencies: [{ kind: "pipe", type: UpperCasePipe, name: "uppercase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Table, isStandalone: true, selector: "lib-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, statusToneMap: { classPropertyName: "statusToneMap", publicName: "statusToneMap", isSignal: true, isRequired: false, transformFunction: null }, statusEnumMap: { classPropertyName: "statusEnumMap", publicName: "statusEnumMap", isSignal: true, isRequired: false, transformFunction: null }, subColumns: { classPropertyName: "subColumns", publicName: "subColumns", isSignal: true, isRequired: false, transformFunction: null }, isRowExpandable: { classPropertyName: "isRowExpandable", publicName: "isRowExpandable", isSignal: true, isRequired: false, transformFunction: null }, expandedChildren: { classPropertyName: "expandedChildren", publicName: "expandedChildren", isSignal: true, isRequired: false, transformFunction: null }, rowIdKey: { classPropertyName: "rowIdKey", publicName: "rowIdKey", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null }, showTotals: { classPropertyName: "showTotals", publicName: "showTotals", isSignal: true, isRequired: false, transformFunction: null }, columnGroups: { classPropertyName: "columnGroups", publicName: "columnGroups", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", iconAction: "iconAction", columnGroupChange: "columnGroupChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "chips", predicate: ["statusChip"], descendants: true }], ngImport: i0, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\"\n            [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n            (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\n</div>", styles: [".table-wrapper{width:100%;max-width:100%;min-width:0;overflow-x:auto;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;max-width:100%;table-layout:fixed;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad;overflow-wrap:anywhere;word-break:break-word}.inner-table thead th:not(.checkbox-header):not(.actions-header):not(.column-group-header):not(.column-group-sub-header),.inner-table tbody td:not(.checkbox-cell):not(.acciones-cell):not(.child-cell-full):not(.legend-cell){max-width:0}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}.icon-logout{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}\n"], dependencies: [{ kind: "pipe", type: UpperCasePipe, name: "uppercase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Table, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-table', imports: [UpperCasePipe], standalone: true, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\"\n            [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n            (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\n</div>", styles: [".table-wrapper{width:100%;max-width:100%;min-width:0;overflow-x:auto;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;max-width:100%;table-layout:fixed;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad;overflow-wrap:anywhere;word-break:break-word}.inner-table thead th:not(.checkbox-header):not(.actions-header):not(.column-group-header):not(.column-group-sub-header),.inner-table tbody td:not(.checkbox-cell):not(.acciones-cell):not(.child-cell-full):not(.legend-cell){max-width:0}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}\n"] }]
+            args: [{ selector: 'lib-table', imports: [UpperCasePipe], standalone: true, template: "<div class=\"table-wrapper\">\n  <table class=\"inner-table\">\n    <thead>\n      <!-- Fila 1 -->\n      <tr>\n\n        @if (showSelection()) {\n        <th class=\"checkbox-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isAllSelected()\" (change)=\"toggleAllRows($event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </th>\n        }\n\n        @for (col of columns(); track col.key) {\n        <th (click)=\"col.sortable !== false && onSort(col)\" [class.sortable]=\"col.sortable !== false\"\n          [class]=\"getAlignment(col) + ' ' + (col.headerClass || '')\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">\n          {{ col.label }}\n\n          <!-- iconos de orden opcionales -->\n          @if (sortColumn() === col.key) {\n          <span class=\"sort-icon\">\n            {{ sortDirection() === 'asc' ? '\u25B2' : '\u25BC' }}\n          </span>\n          }\n        </th>\n        }\n\n        <!-- headers de grupo (colspan = n\u00FAmero de sub-columnas) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <th class=\"column-group-header\" [attr.colspan]=\"group.columns.length\">\n          {{ group.groupLabel }}\n        </th>\n        }\n\n        <!-- columna para acciones -->\n        @if (showActions()) {\n        <th class=\"actions-header\" [attr.rowspan]=\"hasColumnGroups() ? 2 : null\">Acciones</th>\n        }\n      </tr>\n\n      <!-- Fila 2: sub-headers de grupo (solo si hay groups) -->\n      @if (hasColumnGroups()) {\n      <tr>\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <th class=\"column-group-sub-header\">{{ subCol.label }}</th>\n          }\n        }\n      </tr>\n      }\n    </thead>\n\n    <tbody>\n      @for (row of sortedData(); track row['id']) {\n      <tr class=\"parent-row\"\n        [class.expandable]=\"isRowExpandable()(row)\"\n        [class.expanded]=\"isExpanded(row)\"\n        [class.selected]=\"isRowSelected(row)\"\n        (click)=\"toggleRowExpand(row, $event)\">\n\n        @if (showSelection()) {\n        <td class=\"checkbox-cell\">\n          <label class=\"custom-checkbox\" (click)=\"$event.stopPropagation()\">\n            <input type=\"checkbox\" [checked]=\"isRowSelected(row)\" (change)=\"toggleRow(row, $event.target.checked)\" />\n            <span class=\"checkmark\"></span>\n          </label>\n        </td>\n        }\n\n        @for (col of columns(); track col.key) {\n        <td [class]=\"getAlignment(col) + ' ' + (col.cellClass ? col.cellClass(row) : '')\">\n          @if (col.type === 'status') { @let style =\n          getStatusStyle(row[col.key]);\n          <span #statusChip class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ getStatusLabel(row[col.key]) }}\n          </span>\n\n          } @else if (col.type === 'icon-button') {\n\n          <button (click)=\"onIconColumnClick(col, row, $event)\">\n            <span class=\"icon\" [class]=\"col.icon\"></span>\n          </button>\n          } @else if (col.type === 'grade') {\n          @let style = getGradeStyle(row[col.key]);\n          <span class=\"status-chip\" [style.background-color]=\"style.bg\" [style.color]=\"style.color\">\n            {{ formatValue(col, row[col.key]) }}\n          </span>\n          } @else {\n          {{ formatValue(col, row[col.key]) }}\n\n          }\n        </td>\n        }\n\n        <!-- Celdas de grupo -->\n        @for (group of columnGroups(); track group.groupLabel) {\n          @for (subCol of group.columns; track subCol.key) {\n        <td class=\"column-group-cell\">\n          @if (!subCol.type || subCol.type === 'checkbox') {\n          <label class=\"custom-checkbox\"\n            [class.custom-checkbox--file]=\"hasCheckboxFile(subCol, row)\"\n            (click)=\"onGroupCheckboxClick(subCol, row, $event)\">\n            <input type=\"checkbox\" disabled [checked]=\"row[subCol.key]\" />\n            <span class=\"checkmark\"></span>\n          </label>\n          } @else if (subCol.type === 'number') {\n          {{ row[subCol.key] }}\n          } @else if (subCol.type === 'percentage') {\n          {{ row[subCol.key] }}%\n          } @else if (subCol.type === 'icon-button') {\n          <button (click)=\"onGroupIconClick(subCol, row, $event)\">\n            <span class=\"icon\" [class]=\"subCol.icon\"></span>\n          </button>\n          }\n        </td>\n          }\n        }\n\n        <!-- Celda de acciones -->\n        @if (showActions()) {\n        <td class=\"acciones-cell\">\n          <div class=\"menu-acciones\">\n            <button class=\"icon-button\" (click)=\"openModal(row); $event.stopPropagation()\">\n              <div class=\"content\">\n                <div class=\"state-layer\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"more-vert\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\"\n                    fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <circle cx=\"12\" cy=\"5\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"12\" r=\"1\" />\n                    <circle cx=\"12\" cy=\"19\" r=\"1\" />\n                  </svg>\n                </div>\n              </div>\n            </button>\n            @if(selectedRow()?.['id'] === row['id']){\n            <div class=\"modal-options-table\" (click)=\"$event.stopPropagation()\">\n              <div class=\"modal-content-table\">\n                <ul>\n                  @for (option of getActionsForRow(row); track $index) {\n                  <li class=\"option-item-table\" [style.color]=\"getActionColor(option)\"\n                    (click)=\"onOptionClick(option, row)\">\n                    <span class=\"icon\" [class]=\"option.icon\"></span>\n                    <span class=\"label\">{{ option.label }}</span>\n                  </li>\n                  }\n                </ul>\n              </div>\n            </div>\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      <!-- Subfilas (solo si es expandible y est\u00E1 expandida) -->\n      @if (isRowExpandable()(row) && isExpanded(row)) {\n      <tr class=\"child-row child-header-row\">\n        <td class=\"child-cell-full\"\n          [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n              <span class=\"child-label\">{{ subCol.label }}</span>\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n\n      @for (child of getChildRows(row); track child['id']) {\n      <tr class=\"child-row\">\n        <td class=\"child-cell-full\" [attr.colspan]=\"totalColspan()\">\n          <div class=\"child-grid\">\n            @for (subCol of subColumns(); track subCol.key) {\n            <div class=\"child-item\">\n\n              @if (subCol.type === 'status') {\n              @let style = getStatusStyle(child[subCol.key]);\n              <span class=\"status-chip child-status-chip\" [style.background-color]=\"style.bg\"\n                [style.color]=\"style.color\">\n                {{ getStatusLabel(child[subCol.key]) }}\n              </span>\n              } @else {\n              <span class=\"child-value\">\n                {{ formatValue(subCol, child[subCol.key]) }}\n              </span>\n              }\n\n            </div>\n            }\n          </div>\n        </td>\n      </tr>\n      }\n      }\n      }\n      @if (showTotals()) {\n        <tr class=\"total-row\">\n        \n          <!-- checkbox -->\n          @if (showSelection()) {\n          <td class=\"checkbox-cell\"></td>\n          }\n        \n          @for (col of columns(); track col.key) {\n          <td [class]=\"getAlignment(col)\">\n        \n            @if (col.type === 'money' && col.totalizable) {\n              {{ formatValue(col, getMoneyTotal(col)) }}\n            } @else if (col === columns()[0]) {\n              <strong>Total</strong>\n            }\n        \n          </td>\n          }\n\n          <!-- celdas vac\u00EDas para sub-columnas de grupo -->\n          @for (group of columnGroups(); track group.groupLabel) {\n            @for (subCol of group.columns; track subCol.key) {\n          <td></td>\n            }\n          }\n        \n          @if (showActions()) {\n          <td></td>\n          }\n        \n        </tr>\n        }\n\n        <!-- Fila de leyenda (solo si hay columnGroups) -->\n        @for (group of columnGroups(); track group.groupLabel) {\n        <tr class=\"legend-row\">\n          <td class=\"legend-cell\" [attr.colspan]=\"totalColspan()\">\n            <span class=\"legend-title\">{{ group.groupLabel | uppercase }}:</span>\n            @for (col of group.columns; track col.key; let last = $last) {\n              <span class=\"legend-item\">{{ col.label }}:\n                {{ col.description }}{{ last ? '' : ' \u00B7 ' }}</span>\n            }\n          </td>\n        </tr>\n        }\n        \n    </tbody>\n  </table>\n</div>", styles: [".table-wrapper{width:100%;max-width:100%;min-width:0;overflow-x:auto;border-radius:20px;border:1px solid #c7c7ad}.inner-table{width:100%;max-width:100%;table-layout:fixed;border-collapse:separate;font-size:14px;border-spacing:0;border-radius:20px;background:#ebe8d6}.inner-table thead{background:#f0f0db}.inner-table thead tr th:first-child{border-top-left-radius:20px}.inner-table thead tr th:last-child{border-top-right-radius:20px}.inner-table th{text-align:center;padding:8px 12px;font-weight:600;color:#3a3a3a;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word}.inner-table td{padding:8px 12px;color:#4a4a4a;border-top:1px solid #c7c7ad;overflow-wrap:anywhere;word-break:break-word}.inner-table thead th:not(.checkbox-header):not(.actions-header):not(.column-group-header):not(.column-group-sub-header),.inner-table tbody td:not(.checkbox-cell):not(.acciones-cell):not(.child-cell-full):not(.legend-cell){max-width:0}.inner-table thead .actions-header{text-align:center}.custom-checkbox{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;cursor:pointer}.custom-checkbox input{position:absolute;opacity:0;pointer-events:none}.custom-checkbox .checkmark{width:14px;height:14px;border:1.5px solid #7a7a5a;border-radius:3px;box-sizing:border-box;transition:all .15s ease;background:transparent;position:relative;display:flex;align-items:center;justify-content:center}.custom-checkbox input:checked+.checkmark{background-color:#596300;border-color:#596300}.custom-checkbox input:checked+.checkmark:after{content:\"\";position:absolute;top:50%;left:50%;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.custom-checkbox:hover .checkmark{border-color:#596300}.custom-checkbox--file{cursor:pointer}.custom-checkbox--file .checkmark{box-shadow:0 0 0 2px #59630033}.custom-checkbox--file:hover .checkmark{box-shadow:0 0 0 3px #59630059}.checkbox-header,.checkbox-cell{width:32px;padding:0;text-align:center}.acciones-cell{text-align:center;padding:6px}.menu-acciones{display:flex;align-items:center;justify-content:center;position:relative}button{background-color:transparent;border:none}.icon-button{background-color:var(--secondary-container, #dee58f);width:36px;height:36px;border:none;cursor:pointer;padding:0;border-radius:100%;display:inline-flex;align-items:center;justify-content:center}.icon-button:hover{background:#0000000f}.more-vert{color:#4a4a4a;display:block}.modal-options-table{display:flex;justify-items:center;align-items:center;background-color:var(--surface-container-lowest, #ffffff);width:200px;border-radius:8px;position:absolute;top:100%;right:0;z-index:99}.modal-content-table{width:100%;border-radius:8px;border:1px solid var(--outline-variant, #c7c7ad);overflow:hidden}.option-item-table{display:flex;align-items:center;height:56px;padding:8px 12px;cursor:pointer}.option-item-table:hover{background-color:#0000001a}.option-item-table:active{background-color:#dee58f}.option-item-table .icon{margin-right:8px}.option-item-table .label{font-weight:500;font-size:16px;text-transform:capitalize}.icon-refresh,.icon-delete,.icon-edit,.icon-activate,.icon-deactivate,.icon-view,.icon-sanction,.icon-file{width:24px;height:24px;background-color:currentColor;color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;display:inline-block;cursor:pointer}.icon-refresh{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4\"/><path d=\"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4\"/></svg>')}.icon-delete{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M20 6a1 1 0 0 1 .117 1.993l-.117 .007h-.081l-.919 11a3 3 0 0 1 -2.824 2.995l-.176 .005h-8c-1.598 0 -2.904 -1.249 -2.992 -2.75l-.005 -.167l-.923 -11.083h-.08a1 1 0 0 1 -.117 -1.993l.117 -.007h16z\"/><path d=\"M14 2a2 2 0 0 1 2 2a1 1 0 0 1 -1.993 .117l-.007 -.117h-4l-.007 .117a1 1 0 0 1 -1.993 -.117a2 2 0 0 1 1.85 -1.995l.15 -.005h4z\"/></svg>')}.icon-edit{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4\"/><path d=\"M13.5 6.5l4 4\"/></svg>')}.icon-activate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z\"/></svg>')}.icon-deactivate{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M15 9l-6 6M9 9l6 6\"/></svg>')}.icon-view{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0\"/><path d=\"M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6\"/></svg>')}.icon-sanction{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0\"/><path d=\"M9 15l6 -6\"/></svg>')}.icon-file{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M14 3v4a1 1 0 0 0 1 1h4\"/><path d=\"M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4\"/><path d=\"M5 18h1.5a1.5 1.5 0 0 0 0 -3h-1.5v6\"/><path d=\"M17 18h2\"/><path d=\"M20 15h-3v6\"/><path d=\"M11 15v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1\"/></svg>')}.icon-add{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path d=\"M12 5l0 14\"/><path d=\"M5 12l14 0\"/></svg>')}.icon-logout{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" viewBox=\"0 0 24 24\"><path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/><path d=\"M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2\"/><path d=\"M9 12h12l-3 -3\"/><path d=\"M18 15l3 -3\"/></svg>')}th.left.sortable,th.left,td.left{text-align:left}th.right.sortable,th.right,td.right{text-align:right}th.center.sortable,th.center,td.center{text-align:center}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;text-transform:uppercase}.sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.sortable:hover{opacity:.7}.sort-icon{margin-left:6px;font-size:12px;pointer-events:none}.inner-table tbody tr.parent-row{transition:background-color .15s ease;cursor:default}.inner-table tbody tr.parent-row:hover{background-color:transparent}.inner-table tbody tr.parent-row.expandable{cursor:pointer}.inner-table tbody tr.parent-row.expandable:hover{background-color:#e3dfcc}.inner-table tbody tr.parent-row.expandable.expanded{background-color:#d2cdb7}.inner-table tbody tr.parent-row.selected{background-color:#cfd8a5}.child-cell-full{padding:16px 24px;border-top:1px dashed #c7c7ad;background-color:#e5e2d1}.child-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px 24px}.child-item{display:flex;flex-direction:column;gap:4px;padding-left:48px}.child-label{font-size:12px;font-weight:600;text-transform:uppercase;color:#596300;text-align:start}.child-value{font-size:14px;color:#444;text-align:start}.total-row{background-color:#d9ddad;border-top:2px solid #596300}.total-row td{font-weight:600;color:#3a3a3a}.total-row td:first-child{border-bottom-left-radius:20px}.total-row td:last-child{border-bottom-right-radius:20px}.column-group-header{text-align:center;padding:4px 8px}.column-group-sub-header{text-align:center;padding:4px 6px;font-size:12px;font-weight:700;white-space:nowrap}.column-group-sub-header:first-child{border-radius:0}.column-group-sub-header:last-child{border-radius:0}.column-group-cell{text-align:center;vertical-align:middle;padding:4px 6px}.legend-row td{border-top:1px solid #c7c7ad}.legend-cell{padding:10px 16px;font-size:12px;color:#5a5a5a;font-style:italic}.legend-title{font-weight:700;font-style:italic;color:#3a3a3a;margin-right:4px}.legend-item{color:#5a5a5a}.legend-row:last-child td{border-bottom-left-radius:20px;border-bottom-right-radius:20px}.inner-table tbody tr.total-row:has(+.legend-row) td:first-child{border-bottom-left-radius:0}.inner-table tbody tr.total-row:has(+.legend-row) td:last-child{border-bottom-right-radius:0}.cell-prev-changed{background-color:#ffe5e5!important;color:#ba1a1a!important}.cell-curr-changed{background-color:#c6f6c1!important;color:#006d2f!important}.header-prev{color:#ba1a1a!important}.header-curr{color:#006d2f!important}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], iconAction: [{ type: i0.Output, args: ["iconAction"] }], statusToneMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusToneMap", required: false }] }], statusEnumMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusEnumMap", required: false }] }], subColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "subColumns", required: false }] }], isRowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowExpandable", required: false }] }], expandedChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedChildren", required: false }] }], rowIdKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdKey", required: false }] }], showSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelection", required: false }] }], showTotals: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTotals", required: false }] }], columnGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnGroups", required: false }] }], columnGroupChange: [{ type: i0.Output, args: ["columnGroupChange"] }], chips: [{
                 type: ViewChildren,
                 args: ['statusChip']
@@ -3384,11 +3387,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 class ProcessingOverlay {
     loadingText = input('Cargando...', ...(ngDevMode ? [{ debugName: "loadingText" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProcessingOverlay, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: ProcessingOverlay, isStandalone: true, selector: "lib-processing-overlay", inputs: { loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"loading-container\">\r\n  <div class=\"loading-content\">\r\n    <figure>\r\n      <svg width=\"128\" height=\"128\" viewBox=\"0 0 128 128\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M58.8943 10.1325C61.244 6.40017 66.7559 6.40017 69.1056 10.1325L74.7379 19.079C76.2827 21.5328 79.399 22.5304 82.1127 21.4398L92.0068 17.4636C96.1345 15.8048 100.594 18.9967 100.268 23.3769L99.487 33.8765C99.2728 36.7562 101.199 39.368 104.045 40.0572L114.422 42.57C118.751 43.6183 120.454 48.783 117.577 52.138L110.681 60.18C108.79 62.3857 108.79 65.6141 110.681 67.8198L117.577 75.8619C120.454 79.2169 118.751 84.3816 114.422 85.4298L104.045 87.9427C101.199 88.6319 99.2728 91.2436 99.487 94.1234L100.268 104.623C100.594 109.003 96.1345 112.195 92.0069 110.536L82.1127 106.56C79.399 105.469 76.2827 106.467 74.7379 108.921L69.1056 117.867C66.756 121.6 61.244 121.6 58.8943 117.867L53.2621 108.921C51.7173 106.467 48.6009 105.469 45.8872 106.56L35.9931 110.536C31.8655 112.195 27.4062 109.003 27.732 104.623L28.5129 94.1234C28.7271 91.2436 26.8011 88.6319 23.955 87.9427L13.5783 85.4299C9.24928 84.3816 7.546 79.2169 10.4228 75.8619L17.3186 67.8198C19.21 65.6141 19.21 62.3857 17.3186 60.18L10.4228 52.138C7.546 48.783 9.24928 43.6183 13.5783 42.57L23.955 40.0572C26.8011 39.368 28.7271 36.7562 28.5129 33.8765L27.732 23.3769C27.4062 18.9967 31.8655 15.8048 35.9931 17.4636L45.8872 21.4398C48.6009 22.5304 51.7173 21.5328 53.2621 19.079L58.8943 10.1325Z\" fill=\"#BFD100\"/>\r\n        </svg>        \r\n    </figure>\r\n    <p class=\"loading-text\">{{ loadingText() }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".loading-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000076;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999}.loading-content{display:flex;flex-direction:column;align-items:center;gap:20px}.loading-content figure{margin:0;display:flex;justify-content:center;align-items:center}.loading-content figure svg{width:80px;height:80px;animation:svgSpin 2s linear infinite}@keyframes svgSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes svgPulse{0%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes svgBounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.loading-text{color:#fafae8;font-size:18px;font-weight:500;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-style:italic}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: ProcessingOverlay, isStandalone: true, selector: "lib-processing-overlay", inputs: { loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"loading-container\">\r\n  <div class=\"loading-content\">\r\n    <figure>\r\n      <svg width=\"128\" height=\"128\" viewBox=\"0 0 128 128\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M58.8943 10.1325C61.244 6.40017 66.7559 6.40017 69.1056 10.1325L74.7379 19.079C76.2827 21.5328 79.399 22.5304 82.1127 21.4398L92.0068 17.4636C96.1345 15.8048 100.594 18.9967 100.268 23.3769L99.487 33.8765C99.2728 36.7562 101.199 39.368 104.045 40.0572L114.422 42.57C118.751 43.6183 120.454 48.783 117.577 52.138L110.681 60.18C108.79 62.3857 108.79 65.6141 110.681 67.8198L117.577 75.8619C120.454 79.2169 118.751 84.3816 114.422 85.4298L104.045 87.9427C101.199 88.6319 99.2728 91.2436 99.487 94.1234L100.268 104.623C100.594 109.003 96.1345 112.195 92.0069 110.536L82.1127 106.56C79.399 105.469 76.2827 106.467 74.7379 108.921L69.1056 117.867C66.756 121.6 61.244 121.6 58.8943 117.867L53.2621 108.921C51.7173 106.467 48.6009 105.469 45.8872 106.56L35.9931 110.536C31.8655 112.195 27.4062 109.003 27.732 104.623L28.5129 94.1234C28.7271 91.2436 26.8011 88.6319 23.955 87.9427L13.5783 85.4299C9.24928 84.3816 7.546 79.2169 10.4228 75.8619L17.3186 67.8198C19.21 65.6141 19.21 62.3857 17.3186 60.18L10.4228 52.138C7.546 48.783 9.24928 43.6183 13.5783 42.57L23.955 40.0572C26.8011 39.368 28.7271 36.7562 28.5129 33.8765L27.732 23.3769C27.4062 18.9967 31.8655 15.8048 35.9931 17.4636L45.8872 21.4398C48.6009 22.5304 51.7173 21.5328 53.2621 19.079L58.8943 10.1325Z\" fill=\"#BFD100\"/>\r\n        </svg>        \r\n    </figure>\r\n    <p class=\"loading-text\">{{ loadingText() }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".loading-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000076;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999999}.loading-content{display:flex;flex-direction:column;align-items:center;gap:20px}.loading-content figure{margin:0;display:flex;justify-content:center;align-items:center}.loading-content figure svg{width:80px;height:80px;animation:svgSpin 2s linear infinite}@keyframes svgSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes svgPulse{0%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes svgBounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.loading-text{color:#fafae8;font-size:18px;font-weight:500;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-style:italic}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ProcessingOverlay, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-processing-overlay', imports: [], template: "<div class=\"loading-container\">\r\n  <div class=\"loading-content\">\r\n    <figure>\r\n      <svg width=\"128\" height=\"128\" viewBox=\"0 0 128 128\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M58.8943 10.1325C61.244 6.40017 66.7559 6.40017 69.1056 10.1325L74.7379 19.079C76.2827 21.5328 79.399 22.5304 82.1127 21.4398L92.0068 17.4636C96.1345 15.8048 100.594 18.9967 100.268 23.3769L99.487 33.8765C99.2728 36.7562 101.199 39.368 104.045 40.0572L114.422 42.57C118.751 43.6183 120.454 48.783 117.577 52.138L110.681 60.18C108.79 62.3857 108.79 65.6141 110.681 67.8198L117.577 75.8619C120.454 79.2169 118.751 84.3816 114.422 85.4298L104.045 87.9427C101.199 88.6319 99.2728 91.2436 99.487 94.1234L100.268 104.623C100.594 109.003 96.1345 112.195 92.0069 110.536L82.1127 106.56C79.399 105.469 76.2827 106.467 74.7379 108.921L69.1056 117.867C66.756 121.6 61.244 121.6 58.8943 117.867L53.2621 108.921C51.7173 106.467 48.6009 105.469 45.8872 106.56L35.9931 110.536C31.8655 112.195 27.4062 109.003 27.732 104.623L28.5129 94.1234C28.7271 91.2436 26.8011 88.6319 23.955 87.9427L13.5783 85.4299C9.24928 84.3816 7.546 79.2169 10.4228 75.8619L17.3186 67.8198C19.21 65.6141 19.21 62.3857 17.3186 60.18L10.4228 52.138C7.546 48.783 9.24928 43.6183 13.5783 42.57L23.955 40.0572C26.8011 39.368 28.7271 36.7562 28.5129 33.8765L27.732 23.3769C27.4062 18.9967 31.8655 15.8048 35.9931 17.4636L45.8872 21.4398C48.6009 22.5304 51.7173 21.5328 53.2621 19.079L58.8943 10.1325Z\" fill=\"#BFD100\"/>\r\n        </svg>        \r\n    </figure>\r\n    <p class=\"loading-text\">{{ loadingText() }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".loading-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000076;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999}.loading-content{display:flex;flex-direction:column;align-items:center;gap:20px}.loading-content figure{margin:0;display:flex;justify-content:center;align-items:center}.loading-content figure svg{width:80px;height:80px;animation:svgSpin 2s linear infinite}@keyframes svgSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes svgPulse{0%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes svgBounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.loading-text{color:#fafae8;font-size:18px;font-weight:500;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-style:italic}\n"] }]
+            args: [{ selector: 'lib-processing-overlay', imports: [], template: "<div class=\"loading-container\">\r\n  <div class=\"loading-content\">\r\n    <figure>\r\n      <svg width=\"128\" height=\"128\" viewBox=\"0 0 128 128\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M58.8943 10.1325C61.244 6.40017 66.7559 6.40017 69.1056 10.1325L74.7379 19.079C76.2827 21.5328 79.399 22.5304 82.1127 21.4398L92.0068 17.4636C96.1345 15.8048 100.594 18.9967 100.268 23.3769L99.487 33.8765C99.2728 36.7562 101.199 39.368 104.045 40.0572L114.422 42.57C118.751 43.6183 120.454 48.783 117.577 52.138L110.681 60.18C108.79 62.3857 108.79 65.6141 110.681 67.8198L117.577 75.8619C120.454 79.2169 118.751 84.3816 114.422 85.4298L104.045 87.9427C101.199 88.6319 99.2728 91.2436 99.487 94.1234L100.268 104.623C100.594 109.003 96.1345 112.195 92.0069 110.536L82.1127 106.56C79.399 105.469 76.2827 106.467 74.7379 108.921L69.1056 117.867C66.756 121.6 61.244 121.6 58.8943 117.867L53.2621 108.921C51.7173 106.467 48.6009 105.469 45.8872 106.56L35.9931 110.536C31.8655 112.195 27.4062 109.003 27.732 104.623L28.5129 94.1234C28.7271 91.2436 26.8011 88.6319 23.955 87.9427L13.5783 85.4299C9.24928 84.3816 7.546 79.2169 10.4228 75.8619L17.3186 67.8198C19.21 65.6141 19.21 62.3857 17.3186 60.18L10.4228 52.138C7.546 48.783 9.24928 43.6183 13.5783 42.57L23.955 40.0572C26.8011 39.368 28.7271 36.7562 28.5129 33.8765L27.732 23.3769C27.4062 18.9967 31.8655 15.8048 35.9931 17.4636L45.8872 21.4398C48.6009 22.5304 51.7173 21.5328 53.2621 19.079L58.8943 10.1325Z\" fill=\"#BFD100\"/>\r\n        </svg>        \r\n    </figure>\r\n    <p class=\"loading-text\">{{ loadingText() }}</p>\r\n  </div>\r\n</div>\r\n", styles: [".loading-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#00000076;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;z-index:9999999}.loading-content{display:flex;flex-direction:column;align-items:center;gap:20px}.loading-content figure{margin:0;display:flex;justify-content:center;align-items:center}.loading-content figure svg{width:80px;height:80px;animation:svgSpin 2s linear infinite}@keyframes svgSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes svgPulse{0%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes svgBounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.loading-text{color:#fafae8;font-size:18px;font-weight:500;margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-style:italic}\n"] }]
         }], propDecorators: { loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }] } });
 
 class InfoGroup {
@@ -4446,6 +4449,13 @@ const CARD_BG = {
     light: '#ededdf',
 };
 class CardContent {
+    /** Clave externa que cambia cuando el contexto del tab cambia. Al detectar el cambio se limpia searchValue. */
+    tabKey = input(null, ...(ngDevMode ? [{ debugName: "tabKey" }] : []));
+    ngOnChanges(changes) {
+        if (changes['tabKey'] && !changes['tabKey'].firstChange) {
+            this.searchValue.set('');
+        }
+    }
     title = input('Título de sección', ...(ngDevMode ? [{ debugName: "title" }] : []));
     isForm = input(false, ...(ngDevMode ? [{ debugName: "isForm" }] : []));
     form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
@@ -4481,12 +4491,12 @@ class CardContent {
         '--sl-form-surface': this.resolvedBg(),
     }), ...(ngDevMode ? [{ debugName: "cardStyles" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardContent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardContent, isStandalone: true, selector: "lib-card-content", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isForm: { classPropertyName: "isForm", publicName: "isForm", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sectionNumber: { classPropertyName: "sectionNumber", publicName: "sectionNumber", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, searchRegex: { classPropertyName: "searchRegex", publicName: "searchRegex", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", onSearch: "onSearch", onSearchClear: "onSearchClear" }, ngImport: i0, template: "<div class=\"card\" [style]=\"cardStyles()\">\r\n    @if (variant() === 'default') {\r\n        <div class=\"card-header\">\r\n            <p>{{ title() }}</p>\r\n        </div>\r\n    }\r\n    @if (variant() === 'numeric') {\r\n        <div class=\"card-header-numeric\">\r\n            <span class=\"card-header-icon\">\r\n                <svg viewBox=\"0 0 24 24\" class=\"card-header-icon-svg\" aria-hidden=\"true\" focusable=\"false\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"12\" class=\"card-header-icon-circle\" />\r\n                    <text x=\"12\" y=\"12\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"card-header-icon-text\">\r\n                        {{ sectionNumber() }}\r\n                    </text>\r\n                </svg>\r\n            </span>\r\n            <p>{{ title() }}</p>\r\n        </div>\r\n    }\r\n    <div class=\"card-content\">\r\n        @if (isForm()) {\r\n            @if (withSearch()) {\r\n                <div class=\"search-wrapper\">\r\n                    <lib-input\r\n                        mode=\"search\"\r\n                        [placeholder]=\"searchPlaceholder()\"\r\n                        [(value)]=\"searchValue\"\r\n                        (onSearch)=\"onSearch.emit($event)\"\r\n                        (onClear)=\"onSearchClear.emit()\"\r\n                        [regex]=\"searchRegex()\"\r\n                    />\r\n                </div>\r\n            }\r\n            <lib-dynamic-form-fields [form]=\"form()!\" [sections]=\"sections()!\" [compact]=\"compact()\" />\r\n        } @else {\r\n            <ng-content></ng-content>\r\n        }\r\n    </div>\r\n</div>", styles: [".card{border-radius:12px;padding:16px 20px;box-shadow:0 1px 3px #00000014}.card-header{padding:0 0 16px;border-bottom:1px solid #c7c7ad}p{font-weight:700;color:#171c1f;font-size:1.8rem}.card-header-numeric{display:flex;gap:8px;padding:0 0 16px;align-items:center}.card-header-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.card-header-icon-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.card-header-icon-circle{fill:#596300}.card-header-icon-text{fill:#fafae8;font-weight:700;font-size:12px}.search-wrapper{width:50%;margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicFormFields, selector: "lib-dynamic-form-fields", inputs: ["form", "sections", "compact"] }, { kind: "component", type: Input, selector: "lib-input", inputs: ["mode", "placeholder", "type", "value", "maxLength", "uppercase", "regex", "options"], outputs: ["valueChange", "onSearch", "onSelect", "onClear"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardContent, isStandalone: true, selector: "lib-card-content", inputs: { tabKey: { classPropertyName: "tabKey", publicName: "tabKey", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, isForm: { classPropertyName: "isForm", publicName: "isForm", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sectionNumber: { classPropertyName: "sectionNumber", publicName: "sectionNumber", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, searchRegex: { classPropertyName: "searchRegex", publicName: "searchRegex", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", onSearch: "onSearch", onSearchClear: "onSearchClear" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"card\" [style]=\"cardStyles()\">\r\n    @if (variant() === 'default') {\r\n        <div class=\"card-header\">\r\n            <p>{{ title() }}</p>\r\n        </div>\r\n    }\r\n    @if (variant() === 'numeric') {\r\n        <div class=\"card-header-numeric\">\r\n            <span class=\"card-header-icon\">\r\n                <svg viewBox=\"0 0 24 24\" class=\"card-header-icon-svg\" aria-hidden=\"true\" focusable=\"false\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"12\" class=\"card-header-icon-circle\" />\r\n                    <text x=\"12\" y=\"12\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"card-header-icon-text\">\r\n                        {{ sectionNumber() }}\r\n                    </text>\r\n                </svg>\r\n            </span>\r\n            <p>{{ title() }}</p>\r\n        </div>\r\n    }\r\n    <div class=\"card-content\">\r\n        @if (isForm()) {\r\n            @if (withSearch()) {\r\n                <div class=\"search-wrapper\">\r\n                    <lib-input\r\n                        mode=\"search\"\r\n                        [placeholder]=\"searchPlaceholder()\"\r\n                        [(value)]=\"searchValue\"\r\n                        (onSearch)=\"onSearch.emit($event)\"\r\n                        (onClear)=\"onSearchClear.emit()\"\r\n                        [regex]=\"searchRegex()\"\r\n                    />\r\n                </div>\r\n            }\r\n            <lib-dynamic-form-fields [form]=\"form()!\" [sections]=\"sections()!\" [compact]=\"compact()\" />\r\n        } @else {\r\n            <ng-content></ng-content>\r\n        }\r\n    </div>\r\n</div>", styles: [".card{border-radius:12px;padding:16px 20px;box-shadow:0 1px 3px #00000014}.card-header{padding:0 0 16px;border-bottom:1px solid #c7c7ad}p{font-weight:700;color:#171c1f;font-size:1.8rem}.card-header-numeric{display:flex;gap:8px;padding:0 0 16px;align-items:center}.card-header-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.card-header-icon-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.card-header-icon-circle{fill:#596300}.card-header-icon-text{fill:#fafae8;font-weight:700;font-size:12px}.search-wrapper{width:50%;margin-bottom:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DynamicFormFields, selector: "lib-dynamic-form-fields", inputs: ["form", "sections", "compact"] }, { kind: "component", type: Input, selector: "lib-input", inputs: ["mode", "placeholder", "type", "value", "maxLength", "uppercase", "regex", "options"], outputs: ["valueChange", "onSearch", "onSelect", "onClear"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardContent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-card-content', imports: [CommonModule, DynamicFormFields, Input], template: "<div class=\"card\" [style]=\"cardStyles()\">\r\n    @if (variant() === 'default') {\r\n        <div class=\"card-header\">\r\n            <p>{{ title() }}</p>\r\n        </div>\r\n    }\r\n    @if (variant() === 'numeric') {\r\n        <div class=\"card-header-numeric\">\r\n            <span class=\"card-header-icon\">\r\n                <svg viewBox=\"0 0 24 24\" class=\"card-header-icon-svg\" aria-hidden=\"true\" focusable=\"false\">\r\n                    <circle cx=\"12\" cy=\"12\" r=\"12\" class=\"card-header-icon-circle\" />\r\n                    <text x=\"12\" y=\"12\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"card-header-icon-text\">\r\n                        {{ sectionNumber() }}\r\n                    </text>\r\n                </svg>\r\n            </span>\r\n            <p>{{ title() }}</p>\r\n        </div>\r\n    }\r\n    <div class=\"card-content\">\r\n        @if (isForm()) {\r\n            @if (withSearch()) {\r\n                <div class=\"search-wrapper\">\r\n                    <lib-input\r\n                        mode=\"search\"\r\n                        [placeholder]=\"searchPlaceholder()\"\r\n                        [(value)]=\"searchValue\"\r\n                        (onSearch)=\"onSearch.emit($event)\"\r\n                        (onClear)=\"onSearchClear.emit()\"\r\n                        [regex]=\"searchRegex()\"\r\n                    />\r\n                </div>\r\n            }\r\n            <lib-dynamic-form-fields [form]=\"form()!\" [sections]=\"sections()!\" [compact]=\"compact()\" />\r\n        } @else {\r\n            <ng-content></ng-content>\r\n        }\r\n    </div>\r\n</div>", styles: [".card{border-radius:12px;padding:16px 20px;box-shadow:0 1px 3px #00000014}.card-header{padding:0 0 16px;border-bottom:1px solid #c7c7ad}p{font-weight:700;color:#171c1f;font-size:1.8rem}.card-header-numeric{display:flex;gap:8px;padding:0 0 16px;align-items:center}.card-header-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.card-header-icon-svg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.card-header-icon-circle{fill:#596300}.card-header-icon-text{fill:#fafae8;font-weight:700;font-size:12px}.search-wrapper{width:50%;margin-bottom:16px}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "isForm", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sectionNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionNumber", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], searchRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchRegex", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], withSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onSearchClear: [{ type: i0.Output, args: ["onSearchClear"] }] } });
+        }], propDecorators: { tabKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabKey", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], isForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "isForm", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sectionNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionNumber", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], searchRegex: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchRegex", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], withSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "withSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onSearchClear: [{ type: i0.Output, args: ["onSearchClear"] }] } });
 
 class Tabs {
     tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
@@ -4570,11 +4580,13 @@ class Tabs {
         return idx >= 0 ? idx : 0;
     }, ...(ngDevMode ? [{ debugName: "activeIndex" }] : []));
     indicatorLeft = computed(() => `${(100 / this.count()) * this.activeIndex()}%`, ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : []));
-    /** Cards del tab activo — null si el tab no tiene cards definidas */
+    /** Cards del tab activo con clave estable por tab+índice (no usa signal en el track) */
     activeCards = computed(() => {
         const a = this.active();
         const tab = this.tabs().find(t => t.id === a);
-        return tab?.cards ?? null;
+        if (!tab?.cards)
+            return null;
+        return tab.cards.map((card, i) => ({ ...card, _tabKey: `${String(a)}-${i}` }));
     }, ...(ngDevMode ? [{ debugName: "activeCards" }] : []));
     /** Toggles del tab activo */
     activeTabToggles = computed(() => {
@@ -4681,11 +4693,11 @@ class Tabs {
         return `lib-tab-${tabId}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Tabs, isStandalone: true, selector: "lib-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, validateOnTabChange: { classPropertyName: "validateOnTabChange", publicName: "validateOnTabChange", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange", activeTabChange: "activeTabChange", tabValidationFailed: "tabValidationFailed", searchValue: "searchValueChange" }, viewQueries: [{ propertyName: "childCards", predicate: CardContent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"side-tabs\" role=\"tablist\">\r\n    @if (tabs().length > 0) {\r\n    @for (t of tabs(); track t.id) {\r\n    <button type=\"button\" class=\"tab\" role=\"tab\" [id]=\"tabDomId(t.id)\" [class.active]=\"t.id === active()\"\r\n        [class.disabled]=\"!!t.disabled\" [attr.aria-selected]=\"t.id === active()\" [attr.aria-disabled]=\"!!t.disabled\"\r\n        [disabled]=\"!!t.disabled\" [attr.tabindex]=\"t.id === active() ? 0 : -1\" (click)=\"setTab(t.id)\"\r\n        (keydown)=\"onTabKeydown($event, t.id)\">\r\n        {{ t.label }}\r\n    </button>\r\n    }\r\n    <div class=\"tab-indicator\" [class.hidden]=\"active() === null\" [style.width]=\"indicatorWidth()\"\r\n        [style.left]=\"indicatorLeft()\"></div>\r\n    }\r\n</div>\r\n\r\n@if (activeCards(); as cards) {\r\n<div class=\"tab-panels\">\r\n    @if (activeTabToggles(); as togglesCfg) {\r\n        <div class=\"toggles-container\">\r\n            <lib-dynamic-form-fields\r\n                [form]=\"togglesCfg.form\"\r\n                [sections]=\"togglesCfg.sections\"\r\n                [compact]=\"true\"\r\n            />\r\n        </div>\r\n    }\r\n\r\n    @if (activeTabSearch()) {\r\n        <div class=\"search-container\">\r\n            <lib-input\r\n                mode=\"search\"\r\n                [placeholder]=\"tabSearchPlaceholder()\"\r\n                [(value)]=\"searchValue\"\r\n                (onSearch)=\"activeTabSearch()?.onSearch?.($event)\"\r\n                (onClear)=\"activeTabSearch()?.onClear?.()\"\r\n                [regex]=\"activeTabSearch()?.searchRegex ?? null\"\r\n            />\r\n        </div>\r\n    }\r\n\r\n    @for (card of cards; track active() + '-' + $index) {\r\n        @if (card.infoItems || card.infoItemsLeft || card.infoItemsRight) {\r\n            <lib-info-group\r\n                [title]=\"card.title\"\r\n                [titleAlign]=\"card.infoTitleAlign ?? 'center'\"\r\n                [items]=\"card.infoItems ?? []\"\r\n                [itemsLeft]=\"card.infoItemsLeft ?? []\"\r\n                [itemsRight]=\"card.infoItemsRight ?? []\"\r\n                [titleLeft]=\"card.infoTitleLeft ?? null\"\r\n                [titleRight]=\"card.infoTitleRight ?? null\"\r\n            />\r\n        } @else {\r\n            <lib-card-content\r\n                [title]=\"card.title\"\r\n                [isForm]=\"card.isForm ?? false\"\r\n                [form]=\"card.form\"\r\n                [sections]=\"card.sections ?? []\"\r\n                [compact]=\"card.compact ?? false\"\r\n                [variant]=\"card.variant ?? 'default'\"\r\n                [sectionNumber]=\"card.sectionNumber ?? null\"\r\n                [withSearch]=\"card.withSearch ?? false\"\r\n                [searchPlaceholder]=\"card.searchPlaceholder ?? 'Buscar...'\"\r\n                [bgColor]=\"card.bgColor ?? 'default'\"\r\n                (onSearch)=\"card.onSearch?.($event)\"\r\n                (onSearchClear)=\"card.onSearchClear?.()\"\r\n                [searchRegex]=\"card.searchRegex ?? null\"\r\n            />\r\n        }\r\n    }\r\n</div>\r\n}", styles: [".side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;background:transparent;border:0;margin:0;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase;-webkit-user-select:none;user-select:none}.tab.active{color:#596300;font-weight:600}.tab:hover:not(:disabled){color:#6a7500}.tab:disabled,.tab.disabled{cursor:not-allowed;opacity:.45}.tab:focus-visible{outline:2px solid rgba(89,99,0,.35);outline-offset:2px;border-radius:6px}.tab-indicator{position:absolute;bottom:-2px;left:0;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease,width .3s ease}.tab-indicator.hidden{display:none}.tab-panels{display:flex;flex-direction:column;gap:16px;padding-top:16px;width:100%}.toggles-container{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.search-container{width:50%}\n"], dependencies: [{ kind: "component", type: CardContent, selector: "lib-card-content", inputs: ["title", "isForm", "form", "sections", "variant", "sectionNumber", "compact", "searchRegex", "bgColor", "withSearch", "searchPlaceholder", "searchValue"], outputs: ["searchValueChange", "onSearch", "onSearchClear"] }, { kind: "component", type: InfoGroup, selector: "lib-info-group", inputs: ["type", "showBox", "items", "title", "titleAlign", "itemsLeft", "itemsRight", "titleLeft", "titleRight", "fullName", "typeDocument", "document"] }, { kind: "component", type: DynamicFormFields, selector: "lib-dynamic-form-fields", inputs: ["form", "sections", "compact"] }, { kind: "component", type: Input, selector: "lib-input", inputs: ["mode", "placeholder", "type", "value", "maxLength", "uppercase", "regex", "options"], outputs: ["valueChange", "onSearch", "onSelect", "onClear"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Tabs, isStandalone: true, selector: "lib-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, validateOnTabChange: { classPropertyName: "validateOnTabChange", publicName: "validateOnTabChange", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange", activeTabChange: "activeTabChange", tabValidationFailed: "tabValidationFailed", searchValue: "searchValueChange" }, viewQueries: [{ propertyName: "childCards", predicate: CardContent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"side-tabs\" role=\"tablist\">\r\n    @if (tabs().length > 0) {\r\n    @for (t of tabs(); track t.id) {\r\n    <button type=\"button\" class=\"tab\" role=\"tab\" [id]=\"tabDomId(t.id)\" [class.active]=\"t.id === active()\"\r\n        [class.disabled]=\"!!t.disabled\" [attr.aria-selected]=\"t.id === active()\" [attr.aria-disabled]=\"!!t.disabled\"\r\n        [disabled]=\"!!t.disabled\" [attr.tabindex]=\"t.id === active() ? 0 : -1\" (click)=\"setTab(t.id)\"\r\n        (keydown)=\"onTabKeydown($event, t.id)\">\r\n        {{ t.label }}\r\n    </button>\r\n    }\r\n    <div class=\"tab-indicator\" [class.hidden]=\"active() === null\" [style.width]=\"indicatorWidth()\"\r\n        [style.left]=\"indicatorLeft()\"></div>\r\n    }\r\n</div>\r\n\r\n@if (activeCards(); as cards) {\r\n<div class=\"tab-panels\">\r\n    @if (activeTabToggles(); as togglesCfg) {\r\n        <div class=\"toggles-container\">\r\n            <lib-dynamic-form-fields\r\n                [form]=\"togglesCfg.form\"\r\n                [sections]=\"togglesCfg.sections\"\r\n                [compact]=\"true\"\r\n            />\r\n        </div>\r\n    }\r\n\r\n    @if (activeTabSearch()) {\r\n        <div class=\"search-container\">\r\n            <lib-input\r\n                mode=\"search\"\r\n                [placeholder]=\"tabSearchPlaceholder()\"\r\n                [(value)]=\"searchValue\"\r\n                (onSearch)=\"activeTabSearch()?.onSearch?.($event)\"\r\n                (onClear)=\"activeTabSearch()?.onClear?.()\"\r\n                [regex]=\"activeTabSearch()?.searchRegex ?? null\"\r\n            />\r\n        </div>\r\n    }\r\n\r\n    @for (card of cards; track card._tabKey) {\r\n        @if (card.infoItems || card.infoItemsLeft || card.infoItemsRight) {\r\n            <lib-info-group\r\n                [title]=\"card.title\"\r\n                [titleAlign]=\"card.infoTitleAlign ?? 'center'\"\r\n                [items]=\"card.infoItems ?? []\"\r\n                [itemsLeft]=\"card.infoItemsLeft ?? []\"\r\n                [itemsRight]=\"card.infoItemsRight ?? []\"\r\n                [titleLeft]=\"card.infoTitleLeft ?? null\"\r\n                [titleRight]=\"card.infoTitleRight ?? null\"\r\n            />\r\n        } @else {\r\n            <lib-card-content\r\n                [tabKey]=\"card._tabKey\"\r\n                [title]=\"card.title\"\r\n                [isForm]=\"card.isForm ?? false\"\r\n                [form]=\"card.form\"\r\n                [sections]=\"card.sections ?? []\"\r\n                [compact]=\"card.compact ?? false\"\r\n                [variant]=\"card.variant ?? 'default'\"\r\n                [sectionNumber]=\"card.sectionNumber ?? null\"\r\n                [withSearch]=\"card.withSearch ?? false\"\r\n                [searchPlaceholder]=\"card.searchPlaceholder ?? 'Buscar...'\"\r\n                [bgColor]=\"card.bgColor ?? 'default'\"\r\n                (onSearch)=\"card.onSearch?.($event)\"\r\n                (onSearchClear)=\"card.onSearchClear?.()\"\r\n                [searchRegex]=\"card.searchRegex ?? null\"\r\n            />\r\n        }\r\n    }\r\n</div>\r\n}", styles: [".side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;background:transparent;border:0;margin:0;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase;-webkit-user-select:none;user-select:none}.tab.active{color:#596300;font-weight:600}.tab:hover:not(:disabled){color:#6a7500}.tab:disabled,.tab.disabled{cursor:not-allowed;opacity:.45}.tab:focus-visible{outline:2px solid rgba(89,99,0,.35);outline-offset:2px;border-radius:6px}.tab-indicator{position:absolute;bottom:-2px;left:0;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease,width .3s ease}.tab-indicator.hidden{display:none}.tab-panels{display:flex;flex-direction:column;gap:16px;padding-top:16px;width:100%}.toggles-container{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.search-container{width:50%}\n"], dependencies: [{ kind: "component", type: CardContent, selector: "lib-card-content", inputs: ["tabKey", "title", "isForm", "form", "sections", "variant", "sectionNumber", "compact", "searchRegex", "bgColor", "withSearch", "searchPlaceholder", "searchValue"], outputs: ["searchValueChange", "onSearch", "onSearchClear"] }, { kind: "component", type: InfoGroup, selector: "lib-info-group", inputs: ["type", "showBox", "items", "title", "titleAlign", "itemsLeft", "itemsRight", "titleLeft", "titleRight", "fullName", "typeDocument", "document"] }, { kind: "component", type: DynamicFormFields, selector: "lib-dynamic-form-fields", inputs: ["form", "sections", "compact"] }, { kind: "component", type: Input, selector: "lib-input", inputs: ["mode", "placeholder", "type", "value", "maxLength", "uppercase", "regex", "options"], outputs: ["valueChange", "onSearch", "onSelect", "onClear"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Tabs, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-tabs', imports: [CardContent, InfoGroup, DynamicFormFields, Input], template: "<div class=\"side-tabs\" role=\"tablist\">\r\n    @if (tabs().length > 0) {\r\n    @for (t of tabs(); track t.id) {\r\n    <button type=\"button\" class=\"tab\" role=\"tab\" [id]=\"tabDomId(t.id)\" [class.active]=\"t.id === active()\"\r\n        [class.disabled]=\"!!t.disabled\" [attr.aria-selected]=\"t.id === active()\" [attr.aria-disabled]=\"!!t.disabled\"\r\n        [disabled]=\"!!t.disabled\" [attr.tabindex]=\"t.id === active() ? 0 : -1\" (click)=\"setTab(t.id)\"\r\n        (keydown)=\"onTabKeydown($event, t.id)\">\r\n        {{ t.label }}\r\n    </button>\r\n    }\r\n    <div class=\"tab-indicator\" [class.hidden]=\"active() === null\" [style.width]=\"indicatorWidth()\"\r\n        [style.left]=\"indicatorLeft()\"></div>\r\n    }\r\n</div>\r\n\r\n@if (activeCards(); as cards) {\r\n<div class=\"tab-panels\">\r\n    @if (activeTabToggles(); as togglesCfg) {\r\n        <div class=\"toggles-container\">\r\n            <lib-dynamic-form-fields\r\n                [form]=\"togglesCfg.form\"\r\n                [sections]=\"togglesCfg.sections\"\r\n                [compact]=\"true\"\r\n            />\r\n        </div>\r\n    }\r\n\r\n    @if (activeTabSearch()) {\r\n        <div class=\"search-container\">\r\n            <lib-input\r\n                mode=\"search\"\r\n                [placeholder]=\"tabSearchPlaceholder()\"\r\n                [(value)]=\"searchValue\"\r\n                (onSearch)=\"activeTabSearch()?.onSearch?.($event)\"\r\n                (onClear)=\"activeTabSearch()?.onClear?.()\"\r\n                [regex]=\"activeTabSearch()?.searchRegex ?? null\"\r\n            />\r\n        </div>\r\n    }\r\n\r\n    @for (card of cards; track active() + '-' + $index) {\r\n        @if (card.infoItems || card.infoItemsLeft || card.infoItemsRight) {\r\n            <lib-info-group\r\n                [title]=\"card.title\"\r\n                [titleAlign]=\"card.infoTitleAlign ?? 'center'\"\r\n                [items]=\"card.infoItems ?? []\"\r\n                [itemsLeft]=\"card.infoItemsLeft ?? []\"\r\n                [itemsRight]=\"card.infoItemsRight ?? []\"\r\n                [titleLeft]=\"card.infoTitleLeft ?? null\"\r\n                [titleRight]=\"card.infoTitleRight ?? null\"\r\n            />\r\n        } @else {\r\n            <lib-card-content\r\n                [title]=\"card.title\"\r\n                [isForm]=\"card.isForm ?? false\"\r\n                [form]=\"card.form\"\r\n                [sections]=\"card.sections ?? []\"\r\n                [compact]=\"card.compact ?? false\"\r\n                [variant]=\"card.variant ?? 'default'\"\r\n                [sectionNumber]=\"card.sectionNumber ?? null\"\r\n                [withSearch]=\"card.withSearch ?? false\"\r\n                [searchPlaceholder]=\"card.searchPlaceholder ?? 'Buscar...'\"\r\n                [bgColor]=\"card.bgColor ?? 'default'\"\r\n                (onSearch)=\"card.onSearch?.($event)\"\r\n                (onSearchClear)=\"card.onSearchClear?.()\"\r\n                [searchRegex]=\"card.searchRegex ?? null\"\r\n            />\r\n        }\r\n    }\r\n</div>\r\n}", styles: [".side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;background:transparent;border:0;margin:0;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase;-webkit-user-select:none;user-select:none}.tab.active{color:#596300;font-weight:600}.tab:hover:not(:disabled){color:#6a7500}.tab:disabled,.tab.disabled{cursor:not-allowed;opacity:.45}.tab:focus-visible{outline:2px solid rgba(89,99,0,.35);outline-offset:2px;border-radius:6px}.tab-indicator{position:absolute;bottom:-2px;left:0;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease,width .3s ease}.tab-indicator.hidden{display:none}.tab-panels{display:flex;flex-direction:column;gap:16px;padding-top:16px;width:100%}.toggles-container{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.search-container{width:50%}\n"] }]
+            args: [{ selector: 'lib-tabs', imports: [CardContent, InfoGroup, DynamicFormFields, Input], template: "<div class=\"side-tabs\" role=\"tablist\">\r\n    @if (tabs().length > 0) {\r\n    @for (t of tabs(); track t.id) {\r\n    <button type=\"button\" class=\"tab\" role=\"tab\" [id]=\"tabDomId(t.id)\" [class.active]=\"t.id === active()\"\r\n        [class.disabled]=\"!!t.disabled\" [attr.aria-selected]=\"t.id === active()\" [attr.aria-disabled]=\"!!t.disabled\"\r\n        [disabled]=\"!!t.disabled\" [attr.tabindex]=\"t.id === active() ? 0 : -1\" (click)=\"setTab(t.id)\"\r\n        (keydown)=\"onTabKeydown($event, t.id)\">\r\n        {{ t.label }}\r\n    </button>\r\n    }\r\n    <div class=\"tab-indicator\" [class.hidden]=\"active() === null\" [style.width]=\"indicatorWidth()\"\r\n        [style.left]=\"indicatorLeft()\"></div>\r\n    }\r\n</div>\r\n\r\n@if (activeCards(); as cards) {\r\n<div class=\"tab-panels\">\r\n    @if (activeTabToggles(); as togglesCfg) {\r\n        <div class=\"toggles-container\">\r\n            <lib-dynamic-form-fields\r\n                [form]=\"togglesCfg.form\"\r\n                [sections]=\"togglesCfg.sections\"\r\n                [compact]=\"true\"\r\n            />\r\n        </div>\r\n    }\r\n\r\n    @if (activeTabSearch()) {\r\n        <div class=\"search-container\">\r\n            <lib-input\r\n                mode=\"search\"\r\n                [placeholder]=\"tabSearchPlaceholder()\"\r\n                [(value)]=\"searchValue\"\r\n                (onSearch)=\"activeTabSearch()?.onSearch?.($event)\"\r\n                (onClear)=\"activeTabSearch()?.onClear?.()\"\r\n                [regex]=\"activeTabSearch()?.searchRegex ?? null\"\r\n            />\r\n        </div>\r\n    }\r\n\r\n    @for (card of cards; track card._tabKey) {\r\n        @if (card.infoItems || card.infoItemsLeft || card.infoItemsRight) {\r\n            <lib-info-group\r\n                [title]=\"card.title\"\r\n                [titleAlign]=\"card.infoTitleAlign ?? 'center'\"\r\n                [items]=\"card.infoItems ?? []\"\r\n                [itemsLeft]=\"card.infoItemsLeft ?? []\"\r\n                [itemsRight]=\"card.infoItemsRight ?? []\"\r\n                [titleLeft]=\"card.infoTitleLeft ?? null\"\r\n                [titleRight]=\"card.infoTitleRight ?? null\"\r\n            />\r\n        } @else {\r\n            <lib-card-content\r\n                [tabKey]=\"card._tabKey\"\r\n                [title]=\"card.title\"\r\n                [isForm]=\"card.isForm ?? false\"\r\n                [form]=\"card.form\"\r\n                [sections]=\"card.sections ?? []\"\r\n                [compact]=\"card.compact ?? false\"\r\n                [variant]=\"card.variant ?? 'default'\"\r\n                [sectionNumber]=\"card.sectionNumber ?? null\"\r\n                [withSearch]=\"card.withSearch ?? false\"\r\n                [searchPlaceholder]=\"card.searchPlaceholder ?? 'Buscar...'\"\r\n                [bgColor]=\"card.bgColor ?? 'default'\"\r\n                (onSearch)=\"card.onSearch?.($event)\"\r\n                (onSearchClear)=\"card.onSearchClear?.()\"\r\n                [searchRegex]=\"card.searchRegex ?? null\"\r\n            />\r\n        }\r\n    }\r\n</div>\r\n}", styles: [".side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;background:transparent;border:0;margin:0;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase;-webkit-user-select:none;user-select:none}.tab.active{color:#596300;font-weight:600}.tab:hover:not(:disabled){color:#6a7500}.tab:disabled,.tab.disabled{cursor:not-allowed;opacity:.45}.tab:focus-visible{outline:2px solid rgba(89,99,0,.35);outline-offset:2px;border-radius:6px}.tab-indicator{position:absolute;bottom:-2px;left:0;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease,width .3s ease}.tab-indicator.hidden{display:none}.tab-panels{display:flex;flex-direction:column;gap:16px;padding-top:16px;width:100%}.toggles-container{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.search-container{width:50%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }], validateOnTabChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "validateOnTabChange", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }], activeTabChange: [{ type: i0.Output, args: ["activeTabChange"] }], tabValidationFailed: [{ type: i0.Output, args: ["tabValidationFailed"] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], childCards: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => CardContent), { isSignal: true }] }] } });
 
 class NotFoundSection {
@@ -6401,6 +6413,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'lib-card-history', imports: [NgClass], template: "@if(withResponsible()) {\r\n<div class=\"card-history\">\r\n  <span class=\"card-date\">{{ formatDate(DataCard()?.date || \"\") }}</span>\r\n  <div class=\"event-card\" [class.expanded]=\"isExpanded()\">\r\n    <div class=\"event-header\" (click)=\"toggleExpanded()\">\r\n      <div class=\"event-info\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"expand-icon icon icon-tabler icons-tabler-outline icon-tabler-chevron-up\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M6 15l6 -6l6 6\" />\r\n        </svg>\r\n        <span class=\"event-type\">{{ DataCard()?.title }}</span>\r\n        <span class=\"event-time\">{{ DataCard()?.time }}</span>\r\n      </div>\r\n      <div class=\"status-badges\">\r\n        <span class=\"badge\" [ngClass]=\"getBadgeClass(DataCard()?.previousStatus || '')\">\r\n          {{ DataCard()?.previousStatus }}\r\n        </span>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevrons-right\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M7 7l5 5l-5 5\" />\r\n          <path d=\"M13 7l5 5l-5 5\" />\r\n        </svg>\r\n\r\n        <span class=\"badge\" [ngClass]=\"getBadgeClass(DataCard()?.currentStatus || '')\">\r\n          {{ DataCard()?.currentStatus }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"event-details\">\r\n      <div class=\"responsible-info\">\r\n        <div class=\"avatar\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            class=\"icon icon-tabler icons-tabler-outline icon-tabler-user\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n            <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n          </svg>\r\n        </div>\r\n        <div class=\"responsible-details\">\r\n          <h4>Responsable</h4>\r\n          <div class=\"responsible-name\">{{ DataCard()?.responsible }}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"technical-description\">\r\n        <div class=\"tech-label\">Descripci\u00F3n t\u00E9cnica</div>\r\n        <div class=\"tech-content\">\r\n          {{ DataCard()?.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n}\r\n\r\n@else {\r\n<div class=\"card-history\">\r\n  <div class=\"event-card no-responsible\">\r\n    <div class=\"nr-header\">\r\n      <span class=\"nr-title\">{{ DataCard()?.title }}</span>\r\n      <span class=\"nr-type\">({{ DataCard()?.type || 'estado' }})</span>\r\n    </div>\r\n    <div class=\"nr-body\">\r\n      @if (DataCard()?.actionType === 'create') {\r\n      <p class=\"nr-description\">\r\n        El registro fue creado con los siguientes datos.\r\n      </p>\r\n      <div class=\"nr-comparison single\">\r\n        <div class=\"nr-col\">\r\n          <span class=\"nr-label curr\">VALOR INICIAL</span>\r\n          <div class=\"nr-value curr-val\">{{ DataCard()?.currentStatus }}</div>\r\n        </div>\r\n      </div>\r\n      } @else if (DataCard()?.actionType === 'delete') {\r\n      <p class=\"nr-description\">\r\n        El registro fue eliminado permanentemente.\r\n      </p>\r\n      <div class=\"nr-comparison single\">\r\n        <div class=\"nr-col\">\r\n          <span class=\"nr-label prev\">VALOR ELIMINADO</span>\r\n          <div class=\"nr-value prev-val\">{{ DataCard()?.previousStatus }}</div>\r\n        </div>\r\n      </div>\r\n      } @else {\r\n      <p class=\"nr-description\">\r\n        <span style=\"text-transform: capitalize;\">{{ DataCard()?.type || 'El registro' }}</span> cambi\u00F3 de \"{{ DataCard()?.previousStatus }}\" a \"{{ DataCard()?.currentStatus }}\".\r\n      </p>\r\n      \r\n      <div class=\"nr-comparison\">\r\n        <div class=\"nr-col\">\r\n          <span class=\"nr-label prev\">VALOR ANTERIOR</span>\r\n          <div class=\"nr-value prev-val\">{{ DataCard()?.previousStatus }}</div>\r\n        </div>\r\n        \r\n        <div class=\"nr-arrow\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-right\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path d=\"M5 12l14 0\" />\r\n            <path d=\"M13 18l6 -6\" />\r\n            <path d=\"M13 6l6 6\" />\r\n          </svg>\r\n        </div>\r\n        \r\n        <div class=\"nr-col\">\r\n          <span class=\"nr-label curr\">VALOR NUEVO</span>\r\n          <div class=\"nr-value curr-val\">{{ DataCard()?.currentStatus }}</div>\r\n        </div>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n}", styles: [".card-history{display:flex;flex-direction:column;gap:15px}.card-date{color:#1c1c12;font-size:1.4rem;font-weight:600}.event-card{background-color:#f0f0db;border-radius:8px;margin-bottom:15px;overflow:hidden;border:1px solid #c7c7ad}.event-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.event-header:hover{background-color:#e0e0c8}.event-info{display:flex;align-items:center;gap:8px}.expand-icon{font-size:12px;transform:rotate(180deg);transition:transform .2s}.event-card.expanded .expand-icon{transform:rotate(90deg)}.event-type{font-weight:600;font-size:1.4rem;color:#1c1c12}.event-time{color:#454733;font-size:1.1rem}.status-badges{display:flex;align-items:center;gap:8px}.badge{padding:6px 10px;border-radius:6px;font-size:1.2rem;font-weight:600;border:none}.badge-maintenance{background:#bfd100;color:#4f5700}.badge-operational{background-color:#78db5c;color:#0f5e00}.badge-no-date{background-color:#bfe9ff;color:#004d65}.event-details{max-height:0;overflow:hidden;padding:0 10px;background-color:#f0f0e0;transition:max-height .3s ease-in-out,padding .3s ease-in-out}.event-card.expanded .event-details{max-height:300px;padding:20px 10px}.responsible-info{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:20px 10px;background-color:#ebe8d6;border-radius:8px}.avatar{width:36px;height:36px;border-radius:50%;background-color:#bfd100;display:flex;align-items:center;justify-content:center;font-weight:700}.avatar img{width:24px;height:24px}.responsible-details h4{font-size:1.2rem;color:#454733;margin-bottom:2px;font-weight:400}.responsible-name{font-size:1.4rem;font-weight:600;color:#1c1c12}.technical-description{padding:20px 10px;background-color:#ebe8d6;border-radius:8px;height:120px}.tech-label{font-size:1.2rem;color:#454733;margin-bottom:5px}.tech-content{font-size:1.4rem;color:#1c1c12;font-weight:600}.badge-active{color:#006d2f;font-weight:600;background-color:#c6f6c1;border-radius:8px;padding:6px 10px}.badge-inactive{color:#454733e7;font-weight:600;background-color:#e0e0e0;border-radius:8px;padding:6px 10px}.badge-retired{color:#ba1a1a;font-weight:600;background-color:#ffe5e5;border-radius:8px;padding:6px 10px}.badge-obsolete{color:#454733;font-weight:600;border:1px solid #c7c7ad;border-radius:8px;padding:6px 10px}.badge-operativo{color:#0f5e00;font-weight:600;background-color:#80ff66;border-radius:8px;padding:6px 10px}.badge-maintenance{color:#4f5700;font-weight:600;background-color:#bfd100;border-radius:8px;padding:6px 10px}.badge-failures{color:#94000a;font-weight:600;background-color:#fcd;border-radius:8px;padding:6px 10px}.badge-deactivated{color:#ba1a1a;font-weight:600;border:1px solid #ba1a1a;border-radius:8px;padding:6px 10px}.badge-default{color:#6b6b47;font-weight:600;border:1px dashed #c7c7ad;border-radius:8px;padding:6px 10px;font-style:italic}.nr-header{padding:12px 16px;border-bottom:1px solid #c7c7ad;display:flex;align-items:center;gap:6px}.nr-title{font-weight:600;font-size:1.4rem;color:#1c1c12}.nr-type{font-size:1.2rem;color:#6b6b47}.nr-body{padding:16px}.nr-description{font-size:1.3rem;color:#454733;margin:0 0 16px}.nr-comparison{display:flex;align-items:center;gap:16px}.nr-col{flex:1;display:flex;flex-direction:column;gap:8px}.nr-label{font-size:1.1rem;font-weight:700;text-transform:uppercase}.nr-label.prev{color:#ba1a1a}.nr-label.curr{color:#006d2f}.nr-value{padding:12px 16px;border-radius:8px;font-size:1.3rem;font-weight:600}.nr-value.prev-val{background-color:#ffe5e5;color:#ba1a1a}.nr-value.curr-val{background-color:#c6f6c1;color:#006d2f}.nr-arrow{display:flex;align-items:center;justify-content:center;color:#6b6b47;padding-top:20px}\n"] }]
         }], propDecorators: { DataCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "DataCard", required: false }] }], withResponsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "withResponsible", required: false }] }] } });
 
+class Signature {
+    canvasRef;
+    signaturePad;
+    firmaSaved = output();
+    ngAfterViewInit() {
+        this.signaturePad = new SignaturePad(this.canvasRef.nativeElement, {
+            minWidth: 1,
+            maxWidth: 2
+        });
+    }
+    limpiarFirma() {
+        this.signaturePad.clear();
+    }
+    guardarFirma() {
+        if (this.signaturePad.isEmpty())
+            return;
+        this.firmaSaved.emit(this.signaturePad.toDataURL('image/png'));
+    }
+    obtenerFirmaBase64() {
+        return this.signaturePad.toDataURL('image/png');
+    }
+    firmaVacia() {
+        return this.signaturePad.isEmpty();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Signature, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Signature, isStandalone: true, selector: "lib-signature", outputs: { firmaSaved: "firmaSaved" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<div class=\"signature-container\">\r\n\r\n  <canvas #canvas width=\"600\" height=\"200\" class=\"canvas-signature\"></canvas>\r\n\r\n  <div class=\"signature-actions\">\r\n    <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (clicked)=\"limpiarFirma()\">\r\n      Limpiar\r\n    </lib-button>\r\n    <lib-button [variant]=\"'primary'\" [size]=\"'compact'\" (clicked)=\"guardarFirma()\">\r\n      Guardar firma\r\n    </lib-button>\r\n  </div>\r\n\r\n</div>", styles: [".signature-container{display:inline-flex;flex-direction:column;gap:8px}.canvas-signature{max-height:200px;border:1px solid #0000003a;border-radius:8px}.signature-actions{display:flex;gap:8px;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: Button, selector: "lib-button", inputs: ["variant", "type", "disabled", "fullWidth", "size"], outputs: ["clicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Signature, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-signature', standalone: true, imports: [Button], template: "<div class=\"signature-container\">\r\n\r\n  <canvas #canvas width=\"600\" height=\"200\" class=\"canvas-signature\"></canvas>\r\n\r\n  <div class=\"signature-actions\">\r\n    <lib-button [variant]=\"'outline'\" [size]=\"'compact'\" (clicked)=\"limpiarFirma()\">\r\n      Limpiar\r\n    </lib-button>\r\n    <lib-button [variant]=\"'primary'\" [size]=\"'compact'\" (clicked)=\"guardarFirma()\">\r\n      Guardar firma\r\n    </lib-button>\r\n  </div>\r\n\r\n</div>", styles: [".signature-container{display:inline-flex;flex-direction:column;gap:8px}.canvas-signature{max-height:200px;border:1px solid #0000003a;border-radius:8px}.signature-actions{display:flex;gap:8px;justify-content:flex-end}\n"] }]
+        }], propDecorators: { canvasRef: [{
+                type: ViewChild,
+                args: ['canvas']
+            }], firmaSaved: [{ type: i0.Output, args: ["firmaSaved"] }] } });
+
 // src/app/components/public-api.ts
 // Exportar los componentes
 
@@ -6408,5 +6455,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, CardHistory, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DocumentUpload, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, PdfViewer, PdfViewerService, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
+export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, CardHistory, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DocumentUpload, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, PdfViewer, PdfViewerService, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, Signature, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map