sapenlinea-components 0.5.64 → 0.6.66

package/fesm2022/sapenlinea-components.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { model, input, signal, computed, Component, output, HostListener, ViewChildren, forwardRef, effect, ViewChild, booleanAttribute, inject, DestroyRef, EventEmitter, Output, Input as Input$1, Injectable, ElementRef, ChangeDetectionStrategy } from '@angular/core';
+import { model, input, signal, computed, Component, output, HostListener, ViewChildren, forwardRef, effect, ViewChild, inject, ElementRef, booleanAttribute, DestroyRef, EventEmitter, Output, Input as Input$1, Injectable, viewChildren, ChangeDetectionStrategy } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, ReactiveFormsModule, FormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
 import PubSub from 'pubsub-js';
-import { BarChart as BarChart$1, LineChart as LineChart$1, PieChart } from 'echarts/charts';
+import { BarChart as BarChart$1, LineChart as LineChart$1, PieChart, HeatmapChart } from 'echarts/charts';
 import * as echarts from 'echarts/core';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
-import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent } from 'echarts/components';
+import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent, VisualMapComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 
 class PaginationComponent {
@@ -829,6 +829,45 @@ class DateTimePicker {
             this.dateChange.emit(null);
         }
     }
+    /**
+     * Selects the date segment (DD, MM, or YYYY) under the cursor on click,
+     * mimicking native date-input block-editing behavior.
+     * Format: DD/MM/YYYY → segments at positions 0-1, 3-4, 6-9
+     */
+    onInputClick(event) {
+        event.stopPropagation();
+        if (this.isBlocked())
+            return;
+        const input = event.target;
+        const pos = input.selectionStart ?? 0;
+        const value = input.value;
+        // Only do segment selection when the value looks like a date (has slashes)
+        if (!value || !value.includes('/'))
+            return;
+        // Determine which segment the cursor is in
+        // DD = 0..1, slash at 2, MM = 3..4, slash at 5, YYYY = 6..9
+        let start;
+        let end;
+        if (pos <= 2) {
+            // Day segment
+            start = 0;
+            end = 2;
+        }
+        else if (pos <= 5) {
+            // Month segment
+            start = 3;
+            end = 5;
+        }
+        else {
+            // Year segment
+            start = 6;
+            end = 10;
+        }
+        // Use setTimeout to override the browser's default selection behavior
+        setTimeout(() => {
+            input.setSelectionRange(start, end);
+        }, 0);
+    }
     onInputFocus() {
         if (this.isBlocked())
             return;
@@ -941,7 +980,7 @@ class DateTimePicker {
                 useExisting: forwardRef(() => DateTimePicker),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"datetime-container\">\r\n  <div\r\n    class=\"datetime-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <input\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (focus)=\"!isBlocked() && onInputFocus()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n    />\r\n\r\n    <div class=\"header-icons\">\r\n      @if (selectedDate()) {\r\n      <span\r\n        class=\"clear-icon\"\r\n        (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n        title=\"Limpiar\"\r\n      >\r\n        \u00D7\r\n      </span>\r\n      }\r\n      <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n  <div class=\"datetime-content\">\r\n    <!-- Secci\u00F3n del calendario -->\r\n    <div class=\"calendar-section\">\r\n      <!-- Navegaci\u00F3n del calendario -->\r\n      <div class=\"calendar-nav\">\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousYear()\"\r\n            title=\"A\u00F1o anterior\"\r\n          >\r\n            \u2039\u2039\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousMonth()\"\r\n            title=\"Mes anterior\"\r\n          >\r\n            \u2039\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextMonth()\"\r\n            title=\"Siguiente mes\"\r\n          >\r\n            \u203A\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextYear()\"\r\n            title=\"Siguiente a\u00F1o\"\r\n          >\r\n            \u203A\u203A\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas de la semana -->\r\n      <div class=\"weekdays\">\r\n        <div class=\"weekday\">Dom</div>\r\n        <div class=\"weekday\">Lun</div>\r\n        <div class=\"weekday\">Mar</div>\r\n        <div class=\"weekday\">Mi\u00E9</div>\r\n        <div class=\"weekday\">Jue</div>\r\n        <div class=\"weekday\">Vie</div>\r\n        <div class=\"weekday\">S\u00E1b</div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas del mes -->\r\n      <div class=\"calendar-grid\">\r\n        @for (day of calendarDays(); track $index) {\r\n        <div\r\n          class=\"calendar-day\"\r\n          [class.selected]=\"isDaySelected(day)\"\r\n          [class.today]=\"isToday(day)\"\r\n          [class.disabled]=\"isDayDisabled(day)\"\r\n          [class.empty]=\"!day\"\r\n          (click)=\"selectDay(day)\"\r\n        >\r\n          {{ day || '' }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n    @if (mode() === 'datetime') {\r\n    <div class=\"time-section\">\r\n      <div class=\"time-header\">Horario</div>\r\n\r\n      <div class=\"time-selectors\">\r\n        <div class=\"time-group\">\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Hora</div>\r\n            <div class=\"time-scroll\">\r\n              @for (hour of hours12(); track hour.value) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"hour.value === selectedHour12()\"\r\n                (click)=\"setHour12(hour.value)\"\r\n              >\r\n                {{ hour.display }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-separator-vertical\">:</div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Min</div>\r\n            <div class=\"time-scroll\">\r\n              @for (minute of minutes(); track minute) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"minute === selectedMinute()\"\r\n                (click)=\"setMinute(minute)\"\r\n              >\r\n                {{ minute.toString().padStart(2, '0') }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">AM/PM</div>\r\n            <div class=\"time-scroll ampm\">\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                (click)=\"setAmPm('AM')\"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                (click)=\"setAmPm('PM')\"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Botones de acci\u00F3n -->\r\n  <div class=\"action-buttons\">\r\n    <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n      Hoy\r\n    </button>\r\n    @if (mode() === 'datetime') {\r\n    <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n      Aceptar\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861;text-transform:capitalize}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] });
+        ], ngImport: i0, template: "<div class=\"datetime-container\">\r\n  <div\r\n    class=\"datetime-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <input\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (click)=\"onInputClick($event)\"\r\n      (focus)=\"!isBlocked() && onInputFocus()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n    />\r\n\r\n    <div class=\"header-icons\">\r\n      @if (selectedDate()) {\r\n      <span\r\n        class=\"clear-icon\"\r\n        (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n        title=\"Limpiar\"\r\n      >\r\n        \u00D7\r\n      </span>\r\n      }\r\n      <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n  <div class=\"datetime-content\">\r\n    <!-- Secci\u00F3n del calendario -->\r\n    <div class=\"calendar-section\">\r\n      <!-- Navegaci\u00F3n del calendario -->\r\n      <div class=\"calendar-nav\">\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousYear()\"\r\n            title=\"A\u00F1o anterior\"\r\n          >\r\n            \u2039\u2039\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousMonth()\"\r\n            title=\"Mes anterior\"\r\n          >\r\n            \u2039\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextMonth()\"\r\n            title=\"Siguiente mes\"\r\n          >\r\n            \u203A\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextYear()\"\r\n            title=\"Siguiente a\u00F1o\"\r\n          >\r\n            \u203A\u203A\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas de la semana -->\r\n      <div class=\"weekdays\">\r\n        <div class=\"weekday\">Dom</div>\r\n        <div class=\"weekday\">Lun</div>\r\n        <div class=\"weekday\">Mar</div>\r\n        <div class=\"weekday\">Mi\u00E9</div>\r\n        <div class=\"weekday\">Jue</div>\r\n        <div class=\"weekday\">Vie</div>\r\n        <div class=\"weekday\">S\u00E1b</div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas del mes -->\r\n      <div class=\"calendar-grid\">\r\n        @for (day of calendarDays(); track $index) {\r\n        <div\r\n          class=\"calendar-day\"\r\n          [class.selected]=\"isDaySelected(day)\"\r\n          [class.today]=\"isToday(day)\"\r\n          [class.disabled]=\"isDayDisabled(day)\"\r\n          [class.empty]=\"!day\"\r\n          (click)=\"selectDay(day)\"\r\n        >\r\n          {{ day || '' }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n    @if (mode() === 'datetime') {\r\n    <div class=\"time-section\">\r\n      <div class=\"time-header\">Horario</div>\r\n\r\n      <div class=\"time-selectors\">\r\n        <div class=\"time-group\">\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Hora</div>\r\n            <div class=\"time-scroll\">\r\n              @for (hour of hours12(); track hour.value) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"hour.value === selectedHour12()\"\r\n                (click)=\"setHour12(hour.value)\"\r\n              >\r\n                {{ hour.display }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-separator-vertical\">:</div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Min</div>\r\n            <div class=\"time-scroll\">\r\n              @for (minute of minutes(); track minute) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"minute === selectedMinute()\"\r\n                (click)=\"setMinute(minute)\"\r\n              >\r\n                {{ minute.toString().padStart(2, '0') }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">AM/PM</div>\r\n            <div class=\"time-scroll ampm\">\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                (click)=\"setAmPm('AM')\"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                (click)=\"setAmPm('PM')\"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Botones de acci\u00F3n -->\r\n  <div class=\"action-buttons\">\r\n    <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n      Hoy\r\n    </button>\r\n    @if (mode() === 'datetime') {\r\n    <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n      Aceptar\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861;text-transform:capitalize}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}.datetime-input:-webkit-autofill,.datetime-input:-webkit-autofill:hover,.datetime-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;transition:background-color 5000s ease-in-out 0s}.datetime-input:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.datetime-input[readonly]:-webkit-autofill,.datetime-input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateTimePicker, decorators: [{
             type: Component,
@@ -951,7 +990,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => DateTimePicker),
                             multi: true,
                         },
-                    ], template: "<div class=\"datetime-container\">\r\n  <div\r\n    class=\"datetime-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <input\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (focus)=\"!isBlocked() && onInputFocus()\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n    />\r\n\r\n    <div class=\"header-icons\">\r\n      @if (selectedDate()) {\r\n      <span\r\n        class=\"clear-icon\"\r\n        (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n        title=\"Limpiar\"\r\n      >\r\n        \u00D7\r\n      </span>\r\n      }\r\n      <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n  <div class=\"datetime-content\">\r\n    <!-- Secci\u00F3n del calendario -->\r\n    <div class=\"calendar-section\">\r\n      <!-- Navegaci\u00F3n del calendario -->\r\n      <div class=\"calendar-nav\">\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousYear()\"\r\n            title=\"A\u00F1o anterior\"\r\n          >\r\n            \u2039\u2039\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousMonth()\"\r\n            title=\"Mes anterior\"\r\n          >\r\n            \u2039\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextMonth()\"\r\n            title=\"Siguiente mes\"\r\n          >\r\n            \u203A\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextYear()\"\r\n            title=\"Siguiente a\u00F1o\"\r\n          >\r\n            \u203A\u203A\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas de la semana -->\r\n      <div class=\"weekdays\">\r\n        <div class=\"weekday\">Dom</div>\r\n        <div class=\"weekday\">Lun</div>\r\n        <div class=\"weekday\">Mar</div>\r\n        <div class=\"weekday\">Mi\u00E9</div>\r\n        <div class=\"weekday\">Jue</div>\r\n        <div class=\"weekday\">Vie</div>\r\n        <div class=\"weekday\">S\u00E1b</div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas del mes -->\r\n      <div class=\"calendar-grid\">\r\n        @for (day of calendarDays(); track $index) {\r\n        <div\r\n          class=\"calendar-day\"\r\n          [class.selected]=\"isDaySelected(day)\"\r\n          [class.today]=\"isToday(day)\"\r\n          [class.disabled]=\"isDayDisabled(day)\"\r\n          [class.empty]=\"!day\"\r\n          (click)=\"selectDay(day)\"\r\n        >\r\n          {{ day || '' }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n    @if (mode() === 'datetime') {\r\n    <div class=\"time-section\">\r\n      <div class=\"time-header\">Horario</div>\r\n\r\n      <div class=\"time-selectors\">\r\n        <div class=\"time-group\">\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Hora</div>\r\n            <div class=\"time-scroll\">\r\n              @for (hour of hours12(); track hour.value) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"hour.value === selectedHour12()\"\r\n                (click)=\"setHour12(hour.value)\"\r\n              >\r\n                {{ hour.display }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-separator-vertical\">:</div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Min</div>\r\n            <div class=\"time-scroll\">\r\n              @for (minute of minutes(); track minute) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"minute === selectedMinute()\"\r\n                (click)=\"setMinute(minute)\"\r\n              >\r\n                {{ minute.toString().padStart(2, '0') }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">AM/PM</div>\r\n            <div class=\"time-scroll ampm\">\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                (click)=\"setAmPm('AM')\"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                (click)=\"setAmPm('PM')\"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Botones de acci\u00F3n -->\r\n  <div class=\"action-buttons\">\r\n    <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n      Hoy\r\n    </button>\r\n    @if (mode() === 'datetime') {\r\n    <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n      Aceptar\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861;text-transform:capitalize}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
+                    ], template: "<div class=\"datetime-container\">\r\n  <div\r\n    class=\"datetime-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <input\r\n      type=\"text\"\r\n      class=\"datetime-input\"\r\n      [value]=\"displayValue()\"\r\n      [placeholder]=\"placeholder()\"\r\n      (input)=\"onInputChange($event)\"\r\n      (click)=\"onInputClick($event)\"\r\n      (focus)=\"!isBlocked() && onInputFocus()\"\r\n      [disabled]=\"isDisabled()\"\r\n      [readOnly]=\"readonly()\"\r\n    />\r\n\r\n    <div class=\"header-icons\">\r\n      @if (selectedDate()) {\r\n      <span\r\n        class=\"clear-icon\"\r\n        (click)=\"!isBlocked() && clear(); $event.stopPropagation()\"\r\n        title=\"Limpiar\"\r\n      >\r\n        \u00D7\r\n      </span>\r\n      }\r\n      <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n@if (isOpen()) {\r\n<div class=\"dropdown\">\r\n  <div class=\"datetime-content\">\r\n    <!-- Secci\u00F3n del calendario -->\r\n    <div class=\"calendar-section\">\r\n      <!-- Navegaci\u00F3n del calendario -->\r\n      <div class=\"calendar-nav\">\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousYear()\"\r\n            title=\"A\u00F1o anterior\"\r\n          >\r\n            \u2039\u2039\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"previousMonth()\"\r\n            title=\"Mes anterior\"\r\n          >\r\n            \u2039\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"current-date\">{{ monthName() }} {{ currentYear() }}</div>\r\n\r\n        <div class=\"nav-section\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextMonth()\"\r\n            title=\"Siguiente mes\"\r\n          >\r\n            \u203A\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            class=\"nav-btn\"\r\n            (click)=\"nextYear()\"\r\n            title=\"Siguiente a\u00F1o\"\r\n          >\r\n            \u203A\u203A\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas de la semana -->\r\n      <div class=\"weekdays\">\r\n        <div class=\"weekday\">Dom</div>\r\n        <div class=\"weekday\">Lun</div>\r\n        <div class=\"weekday\">Mar</div>\r\n        <div class=\"weekday\">Mi\u00E9</div>\r\n        <div class=\"weekday\">Jue</div>\r\n        <div class=\"weekday\">Vie</div>\r\n        <div class=\"weekday\">S\u00E1b</div>\r\n      </div>\r\n\r\n      <!-- D\u00EDas del mes -->\r\n      <div class=\"calendar-grid\">\r\n        @for (day of calendarDays(); track $index) {\r\n        <div\r\n          class=\"calendar-day\"\r\n          [class.selected]=\"isDaySelected(day)\"\r\n          [class.today]=\"isToday(day)\"\r\n          [class.disabled]=\"isDayDisabled(day)\"\r\n          [class.empty]=\"!day\"\r\n          (click)=\"selectDay(day)\"\r\n        >\r\n          {{ day || '' }}\r\n        </div>\r\n        }\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Selector de tiempo (solo si mode === 'datetime') -->\r\n    @if (mode() === 'datetime') {\r\n    <div class=\"time-section\">\r\n      <div class=\"time-header\">Horario</div>\r\n\r\n      <div class=\"time-selectors\">\r\n        <div class=\"time-group\">\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Hora</div>\r\n            <div class=\"time-scroll\">\r\n              @for (hour of hours12(); track hour.value) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"hour.value === selectedHour12()\"\r\n                (click)=\"setHour12(hour.value)\"\r\n              >\r\n                {{ hour.display }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-separator-vertical\">:</div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">Min</div>\r\n            <div class=\"time-scroll\">\r\n              @for (minute of minutes(); track minute) {\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"minute === selectedMinute()\"\r\n                (click)=\"setMinute(minute)\"\r\n              >\r\n                {{ minute.toString().padStart(2, '0') }}\r\n              </div>\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"time-column\">\r\n            <div class=\"time-label\">AM/PM</div>\r\n            <div class=\"time-scroll ampm\">\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'AM'\"\r\n                (click)=\"setAmPm('AM')\"\r\n              >\r\n                AM\r\n              </div>\r\n              <div\r\n                class=\"time-option\"\r\n                [class.selected]=\"selectedAmPm() === 'PM'\"\r\n                (click)=\"setAmPm('PM')\"\r\n              >\r\n                PM\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- Botones de acci\u00F3n -->\r\n  <div class=\"action-buttons\">\r\n    <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n      Hoy\r\n    </button>\r\n    @if (mode() === 'datetime') {\r\n    <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n      Aceptar\r\n    </button>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".datetime-container{position:relative;width:100%}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:12px 15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-input{flex:1;border:none;outline:none;background:transparent;font-size:1.3rem;color:#454733;padding:0;margin:0}.datetime-input::placeholder{color:#787861;text-transform:capitalize}.datetime-input:disabled{cursor:not-allowed}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled,.datetime-header.readonly{pointer-events:none;opacity:.6;cursor:not-allowed}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:20px;height:20px;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z' /%3e%3cpath d='M16 3l0 4' /%3e%3cpath d='M8 3l0 4' /%3e%3cpath d='M4 11l16 0' /%3e%3cpath d='M8 15h2v2h-2z' /%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:20px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='currentColor' class='icon icon-tabler icons-tabler-filled icon-tabler-calendar-event'%3e%3cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3e%3cpath d='M16 2a1 1 0 0 1 .993 .883l.007 .117v1h1a3 3 0 0 1 2.995 2.824l.005 .176v12a3 3 0 0 1 -2.824 2.995l-.176 .005h-12a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-12a3 3 0 0 1 2.824 -2.995l.176 -.005h1v-1a1 1 0 0 1 1.993 -.117l.007 .117v1h6v-1a1 1 0 0 1 1 -1m3 7h-14v9.625c0 .705 .386 1.286 .883 1.366l.117 .009h12c.513 0 .936 -.53 .993 -1.215l.007 -.16z' /%3e%3cpath d='M8 14h2v2h-2z' /%3e%3c/svg%3e\")}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:100000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:10px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}.datetime-input:-webkit-autofill,.datetime-input:-webkit-autofill:hover,.datetime-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733;transition:background-color 5000s ease-in-out 0s}.datetime-input:-moz-autofill{box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset}.datetime-input[readonly]:-webkit-autofill,.datetime-input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
 
 class DateTimeFilter {
@@ -1078,16 +1117,6 @@ class DateTimeFilter {
     setDisabledState(isDisabled) {
         this.isDisabled.set(isDisabled);
     }
-    // Public Methods
-    // toggle(filterValue: string) {
-    //   if (this.isDisabled()) return;
-    //   if (this.activeFilterType() === filterValue && this.isOpen()) {
-    //     this.close();
-    //   } else {
-    //     this.activeFilterType.set(filterValue);
-    //     this.open();
-    //   }
-    // }
     toggle(filterValue) {
         this.activeFilterType.set(filterValue);
         if (this.isOpen()) {
@@ -1102,7 +1131,6 @@ class DateTimeFilter {
         if (!chip)
             return;
         const rect = chip.getBoundingClientRect();
-        // espacio disponible hasta el borde derecho
         const spaceRight = window.innerWidth - rect.right;
         if (spaceRight < 400) {
             this.dropdownDirection.set('left');
@@ -1128,11 +1156,6 @@ class DateTimeFilter {
         this.isOpen.set(false);
         this.removeDocumentListener();
         this.markAsTouched();
-        // Don't clear activeFilterType here to keep the chip active if needed, 
-        // or clear it if you want the chip to look inactive when closed.
-        // For now, let's keep it active only if a date is selected? 
-        // Or maybe we want to close the dropdown but keep the filter "selected" in UI?
-        // Let's just close the dropdown.
     }
     // Calendar Logic
     selectDay(day) {
@@ -1199,7 +1222,6 @@ class DateTimeFilter {
             const parsedDate = this.parseDateInput(formatted);
             if (parsedDate) {
                 if (this.isDateDisabled(parsedDate)) {
-                    // Invalid date (out of range), but keep the text
                     return;
                 }
                 this.updateInternalState(parsedDate);
@@ -1212,12 +1234,192 @@ class DateTimeFilter {
             }
         }
         else if (formatted.trim() === '') {
-            // Clear if input is empty
             this.resetInternalState();
             this.onChange(null);
             this.dateChange.emit(null);
         }
     }
+    /**
+     * Selects the date segment (DD, MM, or YYYY) under the cursor on click,
+     * mimicking native date-input block-editing behavior.
+     * Format: DD/MM/YYYY → segments at positions 0-1, 3-4, 6-9
+     */
+    onInputClick(event, filterValue) {
+        event.stopPropagation();
+        if (this.isDisabled())
+            return;
+        this.activeFilterType.set(filterValue);
+        const input = event.target;
+        const pos = input.selectionStart ?? 0;
+        const value = input.value;
+        // Only do segment selection when the value looks like a date (has slashes)
+        if (!value || !value.includes('/'))
+            return;
+        // Determine which segment the cursor is in
+        // DD = 0..1, slash at 2, MM = 3..4, slash at 5, YYYY = 6..9
+        let start;
+        let end;
+        if (pos <= 2) {
+            start = 0;
+            end = 2;
+        }
+        else if (pos <= 5) {
+            start = 3;
+            end = 5;
+        }
+        else {
+            start = 6;
+            end = 10;
+        }
+        // Use setTimeout to override the browser's default selection behavior
+        setTimeout(() => {
+            input.setSelectionRange(start, end);
+        }, 0);
+    }
+    /**
+     * Handles keyboard navigation for segment-based date editing.
+     * - Tab / ArrowRight: move to next segment
+     * - Shift+Tab / ArrowLeft: move to previous segment
+     * - ArrowUp / ArrowDown: increment/decrement current segment
+     * - Enter: close dropdown and emit
+     */
+    onInputKeyDown(event, filterValue) {
+        if (this.isDisabled())
+            return;
+        const input = event.target;
+        const value = input.value;
+        // Handle Enter key
+        if (event.key === 'Enter') {
+            if (this.isOpen()) {
+                this.close();
+            }
+            event.preventDefault();
+            this.enterPressed.emit();
+            return;
+        }
+        // Only handle segment navigation when value has slashes (date format)
+        if (!value || !value.includes('/'))
+            return;
+        const pos = input.selectionStart ?? 0;
+        // Determine current segment: 0 = day, 1 = month, 2 = year
+        let currentSegment;
+        if (pos <= 2) {
+            currentSegment = 0;
+        }
+        else if (pos <= 5) {
+            currentSegment = 1;
+        }
+        else {
+            currentSegment = 2;
+        }
+        // Segment ranges
+        const segments = [
+            { start: 0, end: 2 }, // DD
+            { start: 3, end: 5 }, // MM
+            { start: 6, end: 10 }, // YYYY
+        ];
+        if (event.key === 'Tab') {
+            if (event.shiftKey) {
+                // Move to previous segment
+                if (currentSegment > 0) {
+                    event.preventDefault();
+                    const prev = segments[currentSegment - 1];
+                    setTimeout(() => input.setSelectionRange(prev.start, prev.end), 0);
+                }
+                // If at first segment, let Tab work normally (move focus out)
+            }
+            else {
+                // Move to next segment
+                if (currentSegment < 2) {
+                    event.preventDefault();
+                    const next = segments[currentSegment + 1];
+                    setTimeout(() => input.setSelectionRange(next.start, next.end), 0);
+                }
+                // If at last segment, let Tab work normally (move focus out)
+            }
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            if (currentSegment < 2) {
+                event.preventDefault();
+                const next = segments[currentSegment + 1];
+                setTimeout(() => input.setSelectionRange(next.start, next.end), 0);
+            }
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            if (currentSegment > 0) {
+                event.preventDefault();
+                const prev = segments[currentSegment - 1];
+                setTimeout(() => input.setSelectionRange(prev.start, prev.end), 0);
+            }
+            return;
+        }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            event.preventDefault();
+            // Parse current value
+            const match = value.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+            if (!match)
+                return;
+            let day = parseInt(match[1], 10);
+            let month = parseInt(match[2], 10);
+            let year = parseInt(match[3], 10);
+            const delta = event.key === 'ArrowUp' ? 1 : -1;
+            if (currentSegment === 0) {
+                // Increment/decrement day
+                day += delta;
+                const maxDay = new Date(year, month, 0).getDate();
+                if (day < 1)
+                    day = maxDay;
+                if (day > maxDay)
+                    day = 1;
+            }
+            else if (currentSegment === 1) {
+                // Increment/decrement month
+                month += delta;
+                if (month < 1)
+                    month = 12;
+                if (month > 12)
+                    month = 1;
+                // Clamp day to valid range for new month
+                const maxDay = new Date(year, month, 0).getDate();
+                if (day > maxDay)
+                    day = maxDay;
+            }
+            else {
+                // Increment/decrement year
+                year += delta;
+                if (year < 1900)
+                    year = 1900;
+                if (year > 2100)
+                    year = 2100;
+                // Clamp day (for leap year changes on Feb 29)
+                const maxDay = new Date(year, month, 0).getDate();
+                if (day > maxDay)
+                    day = maxDay;
+            }
+            const newFormatted = `${day.toString().padStart(2, '0')}/${month.toString().padStart(2, '0')}/${year}`;
+            this.inputTextValue.set(newFormatted);
+            input.value = newFormatted;
+            // Parse and update if valid
+            const parsedDate = this.parseDateInput(newFormatted);
+            if (parsedDate && !this.isDateDisabled(parsedDate)) {
+                this.updateInternalState(parsedDate);
+                this.onChange(parsedDate.toISOString());
+                this.dateChange.emit(parsedDate);
+                this.dateSelected.emit({ filter: filterValue, value: parsedDate });
+            }
+            // Re-select the same segment
+            const seg = segments[currentSegment];
+            setTimeout(() => input.setSelectionRange(seg.start, seg.end), 0);
+            return;
+        }
+        // Handle Escape
+        if (event.key === 'Escape') {
+            this.close();
+            return;
+        }
+    }
     onInputFocus(filterValue) {
         if (this.isDisabled())
             return;
@@ -1457,7 +1659,7 @@ class DateTimeFilter {
                 useExisting: forwardRef(() => DateTimeFilter),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "chipRef", first: true, predicate: ["chip"], descendants: true }], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" #chip [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n    <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n    <div class=\"chip-input-mask\">\r\n      @for (part of inputMask(); track $index) {\r\n      <span class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M16 3l0 4\" />\r\n        <path d=\"M8 3l0 4\" />\r\n        <path d=\"M4 11l16 0\" />\r\n        <path d=\"M8 15h2v2h-2z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\" [class.open-left]=\"dropdownDirection() === 'left'\">\r\n      <div class=\"datetime-content\">\r\n        <!-- Secci\u00F3n del calendario -->\r\n        <div class=\"calendar-section\">\r\n          <!-- Navegaci\u00F3n -->\r\n          <div class=\"calendar-nav\">\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n                \u2039\u2039\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\r\n                \u2039\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"current-date\">\r\n              {{ monthName() }} {{ currentYear() }}\r\n            </div>\r\n\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n                \u203A\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\r\n                \u203A\u203A\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas de la semana -->\r\n          <div class=\"weekdays\">\r\n            <div class=\"weekday\">Dom</div>\r\n            <div class=\"weekday\">Lun</div>\r\n            <div class=\"weekday\">Mar</div>\r\n            <div class=\"weekday\">Mi\u00E9</div>\r\n            <div class=\"weekday\">Jue</div>\r\n            <div class=\"weekday\">Vie</div>\r\n            <div class=\"weekday\">S\u00E1b</div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\r\n              {{ day || \"\" }}\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- TIME PICKER -->\r\n          @if (mode() === 'datetime') {\r\n          <div class=\"time-section\">\r\n            <div class=\"time-header\">Horario</div>\r\n\r\n            <div class=\"time-selectors\">\r\n              <div class=\"time-group\">\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Hora</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (hour of hours12(); track hour.value) {\r\n                    <div class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\r\n                      {{ hour.display }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-separator-vertical\">:</div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Min</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (minute of minutes(); track minute) {\r\n                    <div class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\r\n                      {{ minute.toString().padStart(2, \"0\") }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">AM/PM</div>\r\n                  <div class=\"time-scroll ampm\">\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\r\n                      PM\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <!-- botones -->\r\n      <div class=\"action-buttons\">\r\n        <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n          Hoy\r\n        </button>\r\n\r\n        @if (mode() === 'datetime') {\r\n        <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n          Aceptar\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".datetime-container{position:relative;width:100%;overflow-x:clip}.filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.dropdown.open-left{left:auto;right:0}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+        ], viewQueries: [{ propertyName: "chipRef", first: true, predicate: ["chip"], descendants: true }], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" #chip [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n    <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n    <div class=\"chip-input-mask\">\r\n      @for (part of inputMask(); track $index) {\r\n      <span class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (click)=\"onInputClick($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" (keydown)=\"onInputKeyDown($event, item.value)\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M16 3l0 4\" />\r\n        <path d=\"M8 3l0 4\" />\r\n        <path d=\"M4 11l16 0\" />\r\n        <path d=\"M8 15h2v2h-2z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\" [class.open-left]=\"dropdownDirection() === 'left'\">\r\n      <div class=\"datetime-content\">\r\n        <!-- Secci\u00F3n del calendario -->\r\n        <div class=\"calendar-section\">\r\n          <!-- Navegaci\u00F3n -->\r\n          <div class=\"calendar-nav\">\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n                \u2039\u2039\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\r\n                \u2039\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"current-date\">\r\n              {{ monthName() }} {{ currentYear() }}\r\n            </div>\r\n\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n                \u203A\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\r\n                \u203A\u203A\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas de la semana -->\r\n          <div class=\"weekdays\">\r\n            <div class=\"weekday\">Dom</div>\r\n            <div class=\"weekday\">Lun</div>\r\n            <div class=\"weekday\">Mar</div>\r\n            <div class=\"weekday\">Mi\u00E9</div>\r\n            <div class=\"weekday\">Jue</div>\r\n            <div class=\"weekday\">Vie</div>\r\n            <div class=\"weekday\">S\u00E1b</div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\r\n              {{ day || \"\" }}\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- TIME PICKER -->\r\n          @if (mode() === 'datetime') {\r\n          <div class=\"time-section\">\r\n            <div class=\"time-header\">Horario</div>\r\n\r\n            <div class=\"time-selectors\">\r\n              <div class=\"time-group\">\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Hora</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (hour of hours12(); track hour.value) {\r\n                    <div class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\r\n                      {{ hour.display }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-separator-vertical\">:</div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Min</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (minute of minutes(); track minute) {\r\n                    <div class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\r\n                      {{ minute.toString().padStart(2, \"0\") }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">AM/PM</div>\r\n                  <div class=\"time-scroll ampm\">\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\r\n                      PM\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <!-- botones -->\r\n      <div class=\"action-buttons\">\r\n        <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n          Hoy\r\n        </button>\r\n\r\n        @if (mode() === 'datetime') {\r\n        <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n          Aceptar\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".datetime-container{position:relative;width:100%;overflow-x:clip}.filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.dropdown.open-left{left:auto;right:0}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateTimeFilter, decorators: [{
             type: Component,
@@ -1467,7 +1669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => DateTimeFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" #chip [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n    <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n    <div class=\"chip-input-mask\">\r\n      @for (part of inputMask(); track $index) {\r\n      <span class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" (keydown)=\"onEnter($event)\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M16 3l0 4\" />\r\n        <path d=\"M8 3l0 4\" />\r\n        <path d=\"M4 11l16 0\" />\r\n        <path d=\"M8 15h2v2h-2z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\" [class.open-left]=\"dropdownDirection() === 'left'\">\r\n      <div class=\"datetime-content\">\r\n        <!-- Secci\u00F3n del calendario -->\r\n        <div class=\"calendar-section\">\r\n          <!-- Navegaci\u00F3n -->\r\n          <div class=\"calendar-nav\">\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n                \u2039\u2039\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\r\n                \u2039\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"current-date\">\r\n              {{ monthName() }} {{ currentYear() }}\r\n            </div>\r\n\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n                \u203A\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\r\n                \u203A\u203A\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas de la semana -->\r\n          <div class=\"weekdays\">\r\n            <div class=\"weekday\">Dom</div>\r\n            <div class=\"weekday\">Lun</div>\r\n            <div class=\"weekday\">Mar</div>\r\n            <div class=\"weekday\">Mi\u00E9</div>\r\n            <div class=\"weekday\">Jue</div>\r\n            <div class=\"weekday\">Vie</div>\r\n            <div class=\"weekday\">S\u00E1b</div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\r\n              {{ day || \"\" }}\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- TIME PICKER -->\r\n          @if (mode() === 'datetime') {\r\n          <div class=\"time-section\">\r\n            <div class=\"time-header\">Horario</div>\r\n\r\n            <div class=\"time-selectors\">\r\n              <div class=\"time-group\">\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Hora</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (hour of hours12(); track hour.value) {\r\n                    <div class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\r\n                      {{ hour.display }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-separator-vertical\">:</div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Min</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (minute of minutes(); track minute) {\r\n                    <div class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\r\n                      {{ minute.toString().padStart(2, \"0\") }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">AM/PM</div>\r\n                  <div class=\"time-scroll ampm\">\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\r\n                      PM\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <!-- botones -->\r\n      <div class=\"action-buttons\">\r\n        <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n          Hoy\r\n        </button>\r\n\r\n        @if (mode() === 'datetime') {\r\n        <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n          Aceptar\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".datetime-container{position:relative;width:100%;overflow-x:clip}.filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.dropdown.open-left{left:auto;right:0}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
+                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" #chip [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n    <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n    <div class=\"chip-input-mask\">\r\n      @for (part of inputMask(); track $index) {\r\n      <span class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (click)=\"onInputClick($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" (keydown)=\"onInputKeyDown($event, item.value)\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" 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-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M16 3l0 4\" />\r\n        <path d=\"M8 3l0 4\" />\r\n        <path d=\"M4 11l16 0\" />\r\n        <path d=\"M8 15h2v2h-2z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\" [class.open-left]=\"dropdownDirection() === 'left'\">\r\n      <div class=\"datetime-content\">\r\n        <!-- Secci\u00F3n del calendario -->\r\n        <div class=\"calendar-section\">\r\n          <!-- Navegaci\u00F3n -->\r\n          <div class=\"calendar-nav\">\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n                \u2039\u2039\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\r\n                \u2039\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"current-date\">\r\n              {{ monthName() }} {{ currentYear() }}\r\n            </div>\r\n\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n                \u203A\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\r\n                \u203A\u203A\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas de la semana -->\r\n          <div class=\"weekdays\">\r\n            <div class=\"weekday\">Dom</div>\r\n            <div class=\"weekday\">Lun</div>\r\n            <div class=\"weekday\">Mar</div>\r\n            <div class=\"weekday\">Mi\u00E9</div>\r\n            <div class=\"weekday\">Jue</div>\r\n            <div class=\"weekday\">Vie</div>\r\n            <div class=\"weekday\">S\u00E1b</div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\r\n              {{ day || \"\" }}\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- TIME PICKER -->\r\n          @if (mode() === 'datetime') {\r\n          <div class=\"time-section\">\r\n            <div class=\"time-header\">Horario</div>\r\n\r\n            <div class=\"time-selectors\">\r\n              <div class=\"time-group\">\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Hora</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (hour of hours12(); track hour.value) {\r\n                    <div class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\r\n                      {{ hour.display }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-separator-vertical\">:</div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Min</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (minute of minutes(); track minute) {\r\n                    <div class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\r\n                      {{ minute.toString().padStart(2, \"0\") }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">AM/PM</div>\r\n                  <div class=\"time-scroll ampm\">\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\r\n                      PM\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <!-- botones -->\r\n      <div class=\"action-buttons\">\r\n        <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n          Hoy\r\n        </button>\r\n\r\n        @if (mode() === 'datetime') {\r\n        <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n          Aceptar\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".datetime-container{position:relative;width:100%;overflow-x:clip}.filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.dropdown.open-left{left:auto;right:0}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { chipRef: [{
                 type: ViewChild,
                 args: ['chip']
@@ -1855,7 +2057,7 @@ class InputSelectFilter {
                 useExisting: forwardRef(() => InputSelectFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n    <div class=\"content-chip\">\r\n      <input type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\" (keydown)=\"onEnter($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [disabled]=\"isDisabled()\" />\r\n\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-list\" (click)=\"onFocusFilter(item.value)\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M9 6l11 0\" />\r\n        <path d=\"M9 12l11 0\" />\r\n        <path d=\"M9 18l11 0\" />\r\n        <path d=\"M5 6l0 .01\" />\r\n        <path d=\"M5 12l0 .01\" />\r\n        <path d=\"M5 18l0 .01\" />\r\n      </svg>\r\n    </div>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"options-list\">\r\n        <!-- Opci\u00F3n por defecto sin valor -->\r\n        <div class=\"option-item option-default\" (click)=\"clear()\">\r\n          {{ 'Seleccionar' }}\r\n        </div>\r\n        @for (option of filteredOptions(); track option.value) {\r\n        <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n          {{ option.label }}\r\n        </div>\r\n        }\r\n        @if (filteredOptions().length === 0) {\r\n        <div class=\"no-options\">No hay opciones</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;min-width:80px;max-width:180px;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px transparent inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#a9a97f}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n    <div class=\"content-chip\">\r\n      <input type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\" (keydown)=\"onEnter($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [disabled]=\"isDisabled()\" />\r\n\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-list\" (click)=\"onFocusFilter(item.value)\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M9 6l11 0\" />\r\n        <path d=\"M9 12l11 0\" />\r\n        <path d=\"M9 18l11 0\" />\r\n        <path d=\"M5 6l0 .01\" />\r\n        <path d=\"M5 12l0 .01\" />\r\n        <path d=\"M5 18l0 .01\" />\r\n      </svg>\r\n    </div>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"options-list\">\r\n        <!-- Opci\u00F3n por defecto sin valor -->\r\n        <div class=\"option-item option-default\" (click)=\"clear()\">\r\n          {{ 'Seleccionar' }}\r\n        </div>\r\n        @for (option of filteredOptions(); track option.value) {\r\n        <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n          {{ option.label }}\r\n        </div>\r\n        }\r\n        @if (filteredOptions().length === 0) {\r\n        <div class=\"no-options\">No hay opciones</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;min-width:80px;max-width:180px;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px transparent inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#a9a97f}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.option-item.option-default{color:#787861;font-style:italic;border-bottom:1px solid rgba(120,120,97,.35)}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSelectFilter, decorators: [{
             type: Component,
@@ -1865,7 +2067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => InputSelectFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n    <div class=\"content-chip\">\r\n      <input type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\" (keydown)=\"onEnter($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [disabled]=\"isDisabled()\" />\r\n\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-list\" (click)=\"onFocusFilter(item.value)\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M9 6l11 0\" />\r\n        <path d=\"M9 12l11 0\" />\r\n        <path d=\"M9 18l11 0\" />\r\n        <path d=\"M5 6l0 .01\" />\r\n        <path d=\"M5 12l0 .01\" />\r\n        <path d=\"M5 18l0 .01\" />\r\n      </svg>\r\n    </div>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"options-list\">\r\n        <!-- Opci\u00F3n por defecto sin valor -->\r\n        <div class=\"option-item option-default\" (click)=\"clear()\">\r\n          {{ 'Seleccionar' }}\r\n        </div>\r\n        @for (option of filteredOptions(); track option.value) {\r\n        <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n          {{ option.label }}\r\n        </div>\r\n        }\r\n        @if (filteredOptions().length === 0) {\r\n        <div class=\"no-options\">No hay opciones</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;min-width:80px;max-width:180px;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px transparent inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#a9a97f}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"] }]
+                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n    <div class=\"content-chip\">\r\n      <input type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\" (keydown)=\"onEnter($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [disabled]=\"isDisabled()\" />\r\n\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-list\" (click)=\"onFocusFilter(item.value)\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M9 6l11 0\" />\r\n        <path d=\"M9 12l11 0\" />\r\n        <path d=\"M9 18l11 0\" />\r\n        <path d=\"M5 6l0 .01\" />\r\n        <path d=\"M5 12l0 .01\" />\r\n        <path d=\"M5 18l0 .01\" />\r\n      </svg>\r\n    </div>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"options-list\">\r\n        <!-- Opci\u00F3n por defecto sin valor -->\r\n        <div class=\"option-item option-default\" (click)=\"clear()\">\r\n          {{ 'Seleccionar' }}\r\n        </div>\r\n        @for (option of filteredOptions(); track option.value) {\r\n        <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n          {{ option.label }}\r\n        </div>\r\n        }\r\n        @if (filteredOptions().length === 0) {\r\n        <div class=\"no-options\">No hay opciones</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;min-width:80px;max-width:180px;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px transparent inset;box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}input:-moz-autofill,textarea:-moz-autofill{box-shadow:0 0 0 1000px transparent inset}input[readonly]:-webkit-autofill,input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset;-webkit-text-fill-color:#a9a97f}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.option-item.option-default{color:#787861;font-style:italic;border-bottom:1px solid rgba(120,120,97,.35)}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
 
 class InputTextFilter {
@@ -1982,13 +2184,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
 
 class Input {
+    el = inject(ElementRef);
+    constructor() {
+        effect(() => {
+            const v = this.value();
+            const inputEl = this.el.nativeElement.querySelector('input');
+            if (inputEl && inputEl.value !== v) {
+                inputEl.value = v;
+            }
+        });
+    }
     mode = input('search', ...(ngDevMode ? [{ debugName: "mode" }] : []));
     placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
     type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
     uppercase = input(false, ...(ngDevMode ? [{ debugName: "uppercase" }] : []));
-    valueChange = output();
+    regex = input(null, ...(ngDevMode ? [{ debugName: "regex" }] : []));
     onSearch = output();
     onSelect = output();
     onClear = output();
@@ -1996,7 +2208,6 @@ class Input {
     showDropdown = signal(false, ...(ngDevMode ? [{ debugName: "showDropdown" }] : []));
     clear() {
         this.value.set('');
-        this.valueChange.emit('');
         this.onClear.emit();
     }
     search() {
@@ -2015,25 +2226,30 @@ class Input {
         if (this.uppercase()) {
             inputValue = inputValue.toUpperCase();
         }
+        const currentRegex = this.regex();
+        if (currentRegex && inputValue !== '') {
+            const pattern = new RegExp(currentRegex);
+            if (!pattern.test(inputValue)) {
+                inputValue = this.value();
+            }
+        }
         target.value = inputValue;
         this.value.set(inputValue);
-        this.valueChange.emit(inputValue);
     }
     selectOption(option) {
         this.value.set(`${option.code} - ${option.name}`);
-        this.valueChange.emit(this.value());
         this.showDropdown.set(false);
     }
     openSelect() {
         this.showDropdown.set(!this.showDropdown());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Input, isStandalone: true, selector: "lib-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", valueChange: "valueChange", onSearch: "onSearch", onSelect: "onSelect", onClear: "onClear" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n  <input\r\n    [type]=\"type()\"\r\n    [placeholder]=\"placeholder()\"\r\n    class=\"custom-input\"\r\n    [value]=\"value()\"\r\n    [attr.maxlength]=\"maxLength()\"\r\n    [style.text-transform]=\"uppercase() ? 'uppercase' : null\"\r\n    (input)=\"handleInput($event)\"\r\n    (keyup.enter)=\"search()\"\r\n  />\r\n\r\n  @if (value() && mode() === 'search') {\r\n  <button class=\"clear-btn\" (click)=\"clear()\" type=\"button\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"20\"\r\n      height=\"20\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    >\r\n      <path d=\"M18 6l-12 12\" />\r\n      <path d=\"M6 6l12 12\" />\r\n    </svg>\r\n  </button>\r\n  } @if (mode() === 'search') {\r\n  <button class=\"search-btn\" (click)=\"search()\" type=\"button\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"56\"\r\n      height=\"56\"\r\n      fill=\"none\"\r\n      viewBox=\"0 0 56 56\"\r\n    >\r\n      <g clip-path=\"url(#clip0_190_2403)\">\r\n        <path\r\n          fill=\"#454733\"\r\n          d=\"M31.755 30.255h-.79l-.28-.27a6.47 6.47 0 0 0 1.57-4.23 6.5 6.5 0 1 0-6.5 6.5c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99 1.49-1.49zm-6 0c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5\"\r\n        />\r\n      </g>\r\n      <defs>\r\n        <clipPath id=\"clip0_190_2403\">\r\n          <rect width=\"56\" height=\"56\" fill=\"#fff\" rx=\"28\" />\r\n        </clipPath>\r\n      </defs>\r\n    </svg>\r\n  </button>\r\n  } @else {\r\n  <button class=\"select-btn\" (click)=\"openSelect()\" type=\"button\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\r\n    >\r\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n      <path d=\"M6 9l6 6l6 -6\" />\r\n    </svg>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n@if (showDropdown()) {\r\n  <div class=\"dropdown-menu\">\r\n    @for (option of options(); track option.code) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"dropdown-item\"\r\n        (click)=\"selectOption(option)\"\r\n      >\r\n        <span class=\"code\">{{ option.code }}</span>\r\n        <span class=\"dash\">-</span>\r\n        <span class=\"name\">{{ option.name }}</span>\r\n      </button>\r\n    }\r\n  </div>\r\n}", styles: [".input-wrapper{position:relative;width:100%}.custom-input{width:100%;padding:20px 50px 20px 20px;border-radius:32px;font-size:16px;background-color:#fff;border:none}custom-input::placeholder{color:#40484c;opacity:1}.custom-input:focus{outline:none;box-shadow:0 0 0 3px #8bc34a1a}.custom-input:hover{background-color:#d8dfe4;transform:translateY(-1px)}.clear-btn{position:absolute;right:55px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:10px;color:#596300;padding:5px}.clear-btn svg{height:50px;pointer-events:none;transition:filter .2s ease}.clear-btn:hover{color:red}.clear-btn:hover svg{filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)}.search-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;border-radius:50%;background-color:#596300;display:flex;justify-content:center;align-items:center;width:50px;height:50px}.search-btn svg{filter:brightness(0) invert(1)}.search-btn:hover{background:#7cb342}.select-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:20px;color:#454733;display:flex;align-items:center;justify-content:center}.select-btn:hover{color:#596300}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;width:100%;background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000026;z-index:50;overflow:hidden;animation:dropdownFade .15s ease}.dropdown-item{width:100%;padding:14px 20px;text-align:left;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f0f0f0;transition:background .2s ease}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:#f5f7f8}.code{font-weight:600;color:#40484c;font-size:14px}.dash{color:#40484c}.name{color:#40484c;font-size:14px}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Input, isStandalone: true, selector: "lib-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, uppercase: { classPropertyName: "uppercase", publicName: "uppercase", isSignal: true, isRequired: false, transformFunction: null }, regex: { classPropertyName: "regex", publicName: "regex", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onSelect: "onSelect", onClear: "onClear" }, ngImport: i0, template: "<div class=\"input-wrapper\">\r\n  <input\r\n    [type]=\"type()\"\r\n    [placeholder]=\"placeholder()\"\r\n    class=\"custom-input\"\r\n    [value]=\"value()\"\r\n    [attr.maxlength]=\"maxLength()\"\r\n    [style.text-transform]=\"uppercase() ? 'uppercase' : null\"\r\n    (input)=\"handleInput($event)\"\r\n    (keyup.enter)=\"search()\"\r\n  />\r\n\r\n  @if (value() && mode() === 'search') {\r\n  <button class=\"clear-btn\" (click)=\"clear()\" type=\"button\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"20\"\r\n      height=\"20\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    >\r\n      <path d=\"M18 6l-12 12\" />\r\n      <path d=\"M6 6l12 12\" />\r\n    </svg>\r\n  </button>\r\n  } @if (mode() === 'search') {\r\n  <button class=\"search-btn\" (click)=\"search()\" type=\"button\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"56\"\r\n      height=\"56\"\r\n      fill=\"none\"\r\n      viewBox=\"0 0 56 56\"\r\n    >\r\n      <g clip-path=\"url(#clip0_190_2403)\">\r\n        <path\r\n          fill=\"#454733\"\r\n          d=\"M31.755 30.255h-.79l-.28-.27a6.47 6.47 0 0 0 1.57-4.23 6.5 6.5 0 1 0-6.5 6.5c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99 1.49-1.49zm-6 0c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5\"\r\n        />\r\n      </g>\r\n      <defs>\r\n        <clipPath id=\"clip0_190_2403\">\r\n          <rect width=\"56\" height=\"56\" fill=\"#fff\" rx=\"28\" />\r\n        </clipPath>\r\n      </defs>\r\n    </svg>\r\n  </button>\r\n  } @else {\r\n  <button class=\"select-btn\" (click)=\"openSelect()\" type=\"button\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\r\n    >\r\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n      <path d=\"M6 9l6 6l6 -6\" />\r\n    </svg>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n@if (showDropdown()) {\r\n  <div class=\"dropdown-menu\">\r\n    @for (option of options(); track option.code) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"dropdown-item\"\r\n        (click)=\"selectOption(option)\"\r\n      >\r\n        <span class=\"code\">{{ option.code }}</span>\r\n        <span class=\"dash\">-</span>\r\n        <span class=\"name\">{{ option.name }}</span>\r\n      </button>\r\n    }\r\n  </div>\r\n}", styles: [".input-wrapper{position:relative;width:100%}.custom-input{width:100%;padding:20px 50px 20px 20px;border-radius:32px;font-size:16px;background-color:#fff;border:none}custom-input::placeholder{color:#40484c;opacity:1}.custom-input:focus{outline:none;box-shadow:0 0 0 3px #8bc34a1a}.custom-input:hover{background-color:#d8dfe4;transform:translateY(-1px)}.clear-btn{position:absolute;right:55px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:10px;color:#596300;padding:5px}.clear-btn svg{height:50px;pointer-events:none;transition:filter .2s ease}.clear-btn:hover{color:red}.clear-btn:hover svg{filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)}.search-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;border-radius:50%;background-color:#596300;display:flex;justify-content:center;align-items:center;width:50px;height:50px}.search-btn svg{filter:brightness(0) invert(1)}.search-btn:hover{background:#7cb342}.select-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:20px;color:#454733;display:flex;align-items:center;justify-content:center}.select-btn:hover{color:#596300}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;width:100%;background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000026;z-index:50;overflow:hidden;animation:dropdownFade .15s ease}.dropdown-item{width:100%;padding:14px 20px;text-align:left;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f0f0f0;transition:background .2s ease}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:#f5f7f8}.code{font-weight:600;color:#40484c;font-size:14px}.dash{color:#40484c}.name{color:#40484c;font-size:14px}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Input, decorators: [{
             type: Component,
             args: [{ selector: 'lib-input', standalone: true, imports: [], template: "<div class=\"input-wrapper\">\r\n  <input\r\n    [type]=\"type()\"\r\n    [placeholder]=\"placeholder()\"\r\n    class=\"custom-input\"\r\n    [value]=\"value()\"\r\n    [attr.maxlength]=\"maxLength()\"\r\n    [style.text-transform]=\"uppercase() ? 'uppercase' : null\"\r\n    (input)=\"handleInput($event)\"\r\n    (keyup.enter)=\"search()\"\r\n  />\r\n\r\n  @if (value() && mode() === 'search') {\r\n  <button class=\"clear-btn\" (click)=\"clear()\" type=\"button\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"20\"\r\n      height=\"20\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n    >\r\n      <path d=\"M18 6l-12 12\" />\r\n      <path d=\"M6 6l12 12\" />\r\n    </svg>\r\n  </button>\r\n  } @if (mode() === 'search') {\r\n  <button class=\"search-btn\" (click)=\"search()\" type=\"button\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"56\"\r\n      height=\"56\"\r\n      fill=\"none\"\r\n      viewBox=\"0 0 56 56\"\r\n    >\r\n      <g clip-path=\"url(#clip0_190_2403)\">\r\n        <path\r\n          fill=\"#454733\"\r\n          d=\"M31.755 30.255h-.79l-.28-.27a6.47 6.47 0 0 0 1.57-4.23 6.5 6.5 0 1 0-6.5 6.5c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99 1.49-1.49zm-6 0c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5 4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5\"\r\n        />\r\n      </g>\r\n      <defs>\r\n        <clipPath id=\"clip0_190_2403\">\r\n          <rect width=\"56\" height=\"56\" fill=\"#fff\" rx=\"28\" />\r\n        </clipPath>\r\n      </defs>\r\n    </svg>\r\n  </button>\r\n  } @else {\r\n  <button class=\"select-btn\" (click)=\"openSelect()\" type=\"button\">\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      width=\"24\"\r\n      height=\"24\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"2\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-down\"\r\n    >\r\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n      <path d=\"M6 9l6 6l6 -6\" />\r\n    </svg>\r\n  </button>\r\n  }\r\n</div>\r\n\r\n@if (showDropdown()) {\r\n  <div class=\"dropdown-menu\">\r\n    @for (option of options(); track option.code) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"dropdown-item\"\r\n        (click)=\"selectOption(option)\"\r\n      >\r\n        <span class=\"code\">{{ option.code }}</span>\r\n        <span class=\"dash\">-</span>\r\n        <span class=\"name\">{{ option.name }}</span>\r\n      </button>\r\n    }\r\n  </div>\r\n}", styles: [".input-wrapper{position:relative;width:100%}.custom-input{width:100%;padding:20px 50px 20px 20px;border-radius:32px;font-size:16px;background-color:#fff;border:none}custom-input::placeholder{color:#40484c;opacity:1}.custom-input:focus{outline:none;box-shadow:0 0 0 3px #8bc34a1a}.custom-input:hover{background-color:#d8dfe4;transform:translateY(-1px)}.clear-btn{position:absolute;right:55px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:10px;color:#596300;padding:5px}.clear-btn svg{height:50px;pointer-events:none;transition:filter .2s ease}.clear-btn:hover{color:red}.clear-btn:hover svg{filter:brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%)}.search-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:18px;border-radius:50%;background-color:#596300;display:flex;justify-content:center;align-items:center;width:50px;height:50px}.search-btn svg{filter:brightness(0) invert(1)}.search-btn:hover{background:#7cb342}.select-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:20px;color:#454733;display:flex;align-items:center;justify-content:center}.select-btn:hover{color:#596300}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;width:100%;background:#fff;border-radius:16px;box-shadow:0 4px 12px #00000026;z-index:50;overflow:hidden;animation:dropdownFade .15s ease}.dropdown-item{width:100%;padding:14px 20px;text-align:left;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:10px;border-bottom:1px solid #f0f0f0;transition:background .2s ease}.dropdown-item:last-child{border-bottom:none}.dropdown-item:hover{background:#f5f7f8}.code{font-weight:600;color:#40484c;font-size:14px}.dash{color:#40484c}.name{color:#40484c;font-size:14px}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], uppercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "uppercase", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], uppercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "uppercase", required: false }] }], regex: [{ type: i0.Input, args: [{ isSignal: true, alias: "regex", required: false }] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], onClear: [{ type: i0.Output, args: ["onClear"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
 class SelectCustomSearch {
     elementRef;
@@ -2109,6 +2325,15 @@ class SelectCustomSearch {
         this.selectionChange.emit(option);
         this.close();
     }
+    clearSelection() {
+        if (this.isBlocked())
+            return;
+        this.selectedValue.set(null);
+        this.onChange(null);
+        this.onTouched();
+        this.selectionChange.emit(null);
+        this.close();
+    }
     onSearch(event) {
         if (this.isBlocked())
             return;
@@ -2140,7 +2365,7 @@ class SelectCustomSearch {
                 useExisting: forwardRef(() => SelectCustomSearch),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"select-container\">\r\n  <div\r\n    class=\"select-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"search-input\"\r\n      [value]=\"searchTerm()\"\r\n      placeholder=\"Buscar...\"\r\n      (input)=\"!isBlocked() &&onSearch($event)\"\r\n      (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    />\r\n\r\n    @if (filteredOptions().length > 0) {\r\n    <div class=\"options\">\r\n      @for (option of filteredOptions(); track option.value) {\r\n      <div\r\n        class=\"option\"\r\n        [class.selected]=\"option.value === selectedValue()\"\r\n        (click)=\"!isBlocked() && selectOption(option)\"\r\n        [attr.disabled]=\"isBlocked()\"\r\n      >\r\n        {{ option.label }}\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"no-results\">No se encontraron resultados</div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem;text-transform:capitalize}.selected-text.placeholder{color:#787861;text-transform:capitalize}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861;text-transform:capitalize}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem;text-transform:capitalize}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] });
+        ], ngImport: i0, template: "<div class=\"select-container\">\r\n  <div\r\n    class=\"select-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"search-input\"\r\n      [value]=\"searchTerm()\"\r\n      placeholder=\"Buscar...\"\r\n      (input)=\"!isBlocked() &&onSearch($event)\"\r\n      (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    />\r\n\r\n    @if (filteredOptions().length > 0) {\r\n    <div class=\"options\">\r\n      <div\r\n        class=\"option default-option\"\r\n        [class.selected]=\"selectedValue() === null\"\r\n        (click)=\"!isBlocked() && clearSelection()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      @for (option of filteredOptions(); track option.value) {\r\n      <div\r\n        class=\"option\"\r\n        [class.selected]=\"option.value === selectedValue()\"\r\n        (click)=\"!isBlocked() && selectOption(option)\"\r\n        [attr.disabled]=\"isBlocked()\"\r\n      >\r\n        {{ option.label }}\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"no-results\">No se encontraron resultados</div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem;text-transform:capitalize}.selected-text.placeholder{color:#787861;text-transform:capitalize}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861;text-transform:capitalize}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem;text-transform:capitalize}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option.default-option{color:#787861;font-style:italic;border-bottom:1px solid rgba(120,120,97,.35)}.option.default-option.selected{background-color:transparent;color:#787861;font-weight:400}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SelectCustomSearch, decorators: [{
             type: Component,
@@ -2150,7 +2375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => SelectCustomSearch),
                             multi: true,
                         },
-                    ], template: "<div class=\"select-container\">\r\n  <div\r\n    class=\"select-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"search-input\"\r\n      [value]=\"searchTerm()\"\r\n      placeholder=\"Buscar...\"\r\n      (input)=\"!isBlocked() &&onSearch($event)\"\r\n      (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    />\r\n\r\n    @if (filteredOptions().length > 0) {\r\n    <div class=\"options\">\r\n      @for (option of filteredOptions(); track option.value) {\r\n      <div\r\n        class=\"option\"\r\n        [class.selected]=\"option.value === selectedValue()\"\r\n        (click)=\"!isBlocked() && selectOption(option)\"\r\n        [attr.disabled]=\"isBlocked()\"\r\n      >\r\n        {{ option.label }}\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"no-results\">No se encontraron resultados</div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem;text-transform:capitalize}.selected-text.placeholder{color:#787861;text-transform:capitalize}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861;text-transform:capitalize}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem;text-transform:capitalize}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] }]
+                    ], template: "<div class=\"select-container\">\r\n  <div\r\n    class=\"select-header\"\r\n    [class.active]=\"isOpen()\"\r\n    [class.disabled]=\"isBlocked()\"\r\n    [class.readonly]=\"isBlocked()\"\r\n    (click)=\"!isBlocked() && toggle()\"\r\n    (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    tabindex=\"0\"\r\n  >\r\n    <span class=\"selected-text\" [class.placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label || placeholder() }}\r\n    </span>\r\n\r\n    <span class=\"arrow\" [class.open]=\"isOpen()\"></span>\r\n  </div>\r\n\r\n  @if (isOpen()) {\r\n  <div class=\"dropdown\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"search-input\"\r\n      [value]=\"searchTerm()\"\r\n      placeholder=\"Buscar...\"\r\n      (input)=\"!isBlocked() &&onSearch($event)\"\r\n      (keydown)=\"!isBlocked() && onKeyDown($event)\"\r\n    />\r\n\r\n    @if (filteredOptions().length > 0) {\r\n    <div class=\"options\">\r\n      <div\r\n        class=\"option default-option\"\r\n        [class.selected]=\"selectedValue() === null\"\r\n        (click)=\"!isBlocked() && clearSelection()\"\r\n      >\r\n        {{ placeholder() }}\r\n      </div>\r\n      @for (option of filteredOptions(); track option.value) {\r\n      <div\r\n        class=\"option\"\r\n        [class.selected]=\"option.value === selectedValue()\"\r\n        (click)=\"!isBlocked() && selectOption(option)\"\r\n        [attr.disabled]=\"isBlocked()\"\r\n      >\r\n        {{ option.label }}\r\n      </div>\r\n      }\r\n    </div>\r\n    } @else {\r\n    <div class=\"no-results\">No se encontraron resultados</div>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".select-container{position:relative;width:100%}.select-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto}.select-header:hover,.select-header:focus{outline:none;border-color:#a9a97f}.select-header.active{border-color:#a9a97f;outline:none}.select-header.disabled,.select-header.readonly{cursor:not-allowed;opacity:.6;pointer-events:none}.selected-text{color:#454733;font-size:1.3rem;text-transform:capitalize}.selected-text.placeholder{color:#787861;text-transform:capitalize}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;max-height:250px;overflow:hidden;z-index:100000;box-shadow:0 2px 8px #0000001a}.search-input{width:100%;border:none;border-bottom:1px solid #787861;border-radius:0;padding:15px;background-color:transparent;outline:none;font-size:inherit;color:#454733;font-size:1.3rem}.search-input::placeholder{color:#787861;text-transform:capitalize}.search-input:focus{outline:none;border-bottom-color:#a9a97f}.options{max-height:180px;overflow-y:auto;background:#e3e3d1}.option{padding:15px;cursor:pointer;border-bottom:1px solid rgba(120,120,97,.2);color:#454733;background:#e3e3d1;font-size:1.3rem;text-transform:capitalize}.option:hover{background-color:#a9a97f1a;color:#454733}.option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.option.default-option{color:#787861;font-style:italic;border-bottom:1px solid rgba(120,120,97,.35)}.option.default-option.selected{background-color:transparent;color:#787861;font-weight:400}.option:last-child{border-bottom:none}.no-results{padding:15px;text-align:center;color:#787861;font-style:italic;background:#e3e3d1;font-size:1.3rem}.options::-webkit-scrollbar{width:6px}.options::-webkit-scrollbar-track{background:#7878611a}.options::-webkit-scrollbar-thumb{background:#787861;border-radius:3px}.options::-webkit-scrollbar-thumb:hover{background:#a9a97f}@media (max-width: 768px){.select-header,.search-input,.option{padding:12px 15px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -2889,13 +3114,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], showBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBox", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleAlign", required: false }] }], itemsLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLeft", required: false }] }], itemsRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsRight", required: false }] }], titleLeft: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLeft", required: false }] }], titleRight: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleRight", required: false }] }], fullName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullName", required: false }] }], typeDocument: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeDocument", required: false }] }], document: [{ type: i0.Input, args: [{ isSignal: true, alias: "document", required: false }] }] } });
 
 class FeatureCard {
-    feature = input(...(ngDevMode ? [undefined, { debugName: "feature" }] : []));
+    /** Objeto feature (con soporte para binding bidireccional vía señales) */
+    feature = model(...(ngDevMode ? [undefined, { debugName: "feature" }] : []));
     showLeading = input(false, ...(ngDevMode ? [{ debugName: "showLeading" }] : []));
     showTrailling = input(false, ...(ngDevMode ? [{ debugName: "showTrailling" }] : []));
-    descriptionChange = output();
+    /** Valor interno de la descripción mientras se edita */
     descriptionValue = signal('', ...(ngDevMode ? [{ debugName: "descriptionValue" }] : []));
     isEditingDescription = signal(false, ...(ngDevMode ? [{ debugName: "isEditingDescription" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     descriptionInput;
+    onChange = (_) => { };
+    onTouched = () => { };
     /** Descripción formateada según el tipo de feature */
     formattedDescription = computed(() => {
         const raw = this.descriptionValue();
@@ -2936,17 +3165,58 @@ class FeatureCard {
         }
     }, ...(ngDevMode ? [{ debugName: "formattedDescription" }] : []));
     constructor() {
+        // Sincroniza el valor interno cuando cambia el objeto feature inicial
         effect(() => {
-            this.descriptionValue.set(this.feature()?.description ?? '');
+            const feat = this.feature();
+            this.descriptionValue.set(feat?.description ?? '');
         });
     }
+    // --- ControlValueAccessor Implementation ---
+    writeValue(value) {
+        this.feature.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    // --- Event Handlers ---
     onDescriptionInput(event) {
-        const nextDescription = event.target.value;
+        if (this.isDisabled())
+            return;
+        const target = event.target;
+        let nextDescription = target.value;
+        const currentFeature = this.feature();
+        // Validar y filtrar entrada para tipos numéricos
+        if (currentFeature?.type && ['money', 'percentage', 'measurement'].includes(currentFeature.type)) {
+            // Permitir solo números y punto decimal
+            nextDescription = nextDescription.replace(/[^0-9.]/g, '');
+            // Evitar múltiples puntos decimales
+            const parts = nextDescription.split('.');
+            if (parts.length > 2) {
+                nextDescription = parts[0] + '.' + parts.slice(1).join('');
+            }
+            // Sincronizar el valor visual del input si cambió por el filtrado
+            if (target.value !== nextDescription) {
+                target.value = nextDescription;
+            }
+        }
         this.descriptionValue.set(nextDescription);
-        this.descriptionChange.emit(nextDescription);
+        if (currentFeature) {
+            const updatedFeature = { ...currentFeature, description: nextDescription };
+            // Actualiza vía señal (model 2-way binding)
+            this.feature.set(updatedFeature);
+            // Notifica al formulario (Reactive Forms)
+            this.onChange(updatedFeature);
+        }
+        this.onTouched();
     }
     onEditIconClick() {
-        if (!this.showTrailling())
+        if (!this.showTrailling() || this.isDisabled())
             return;
         this.isEditingDescription.set(true);
         // Asegura el foco una vez que el input se renderiza.
@@ -2957,14 +3227,27 @@ class FeatureCard {
     }
     onDescriptionBlur() {
         this.isEditingDescription.set(false);
+        this.onTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FeatureCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FeatureCard, isStandalone: true, selector: "lib-feature-card", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null }, showLeading: { classPropertyName: "showLeading", publicName: "showLeading", isSignal: true, isRequired: false, transformFunction: null }, showTrailling: { classPropertyName: "showTrailling", publicName: "showTrailling", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { descriptionChange: "descriptionChange" }, viewQueries: [{ propertyName: "descriptionInput", first: true, predicate: ["descriptionInput"], descendants: true }], ngImport: i0, template: "<div class=\"feature-card\" [class.feature-card--editing]=\"isEditingDescription()\">\n  @if(showLeading()){\n    <div class=\"feature-icon-leading\">\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\n    </div>\n  }\n  \n  <div class=\"feature-content\">\n    <p>{{ feature()!.title }}</p>\n    @if (showTrailling()) {\n      <div class=\"feature-description-editable\">\n        @if (isEditingDescription()) {\n          <input\n            #descriptionInput\n            class=\"feature-description-input\"\n            type=\"text\"\n            [value]=\"descriptionValue()\"\n            (input)=\"onDescriptionInput($event)\"\n            (blur)=\"onDescriptionBlur()\"\n            aria-label=\"Description\"\n            autofocus\n          />\n        } @else {\n          <h3>{{ formattedDescription() }}</h3>\n        }\n      </div>\n    } @else {\n      <h3>{{ formattedDescription() }}</h3>\n    }\n  </div>\n\n  @if(showTrailling()){\n    <button\n      type=\"button\"\n      class=\"feature-icon-trailling\"\n      (click)=\"onEditIconClick()\"\n      aria-label=\"Editar description\"\n    >\n      <span class=\"description-edit-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n", styles: [".feature-card{position:relative;width:100%;padding:12px 24px;display:flex;align-items:center;gap:8px;background-color:#fafae8;border-radius:999px;box-sizing:border-box}.feature-card--editing{border:2px solid #dee58f}.feature-icon-leading{flex:0 0 50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#dee58f;margin-right:10px}.feature-icon-leading img{width:28px;height:28px;color:#61661f}.feature-content{flex:1;display:flex;flex-direction:column}.feature-card h3{margin:0 0 5px;font-size:16px;font-weight:700;color:#171c1f;transition:color .3s ease}.feature-card p{margin:0;color:#171c1f;font-weight:500;line-height:1.6;font-size:14px}.feature-description-editable{display:flex;align-items:center;min-height:24px}.feature-description-input{width:100%;border:none;background:transparent;margin:0 0 5px;padding:0;font-size:16px;font-weight:700;color:#171c1f;outline:none}.description-edit-icon{width:20px;height:20px;flex-shrink:0;background-color:#596300;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;-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>')}.feature-icon-trailling{border:none;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.feature-icon-trailling:focus-visible{outline:2px solid #596300;outline-offset:2px;border-radius:4px}@media (max-width: 768px){.feature-card{padding:12px;gap:12px}.feature-icon{flex:0 0 48px;height:48px;margin-right:8px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.5rem}.feature-card p{font-size:1.3rem}.feature-description-input{font-size:1.5rem}}@media (max-width: 640px){.feature-card{flex-direction:column;align-items:center;text-align:center;padding:16px 12px;gap:12px;min-height:140px}.feature-icon{flex:none;margin-right:0;margin-bottom:8px;width:56px;height:56px}.feature-icon img{width:32px;height:32px}.feature-content{align-items:center;text-align:center}.feature-card h3{margin-bottom:8px;font-size:1.4rem;line-height:1.3}.feature-card p{font-size:1.2rem;line-height:1.5;max-width:200px}.feature-description-input{font-size:1.4rem;text-align:center}}@media (max-width: 480px){.feature-card{padding:14px 10px;min-height:130px;gap:10px}.feature-icon{width:52px;height:52px;margin-bottom:6px}.feature-icon img{width:30px;height:30px}.feature-card h3{font-size:1.3rem;margin-bottom:6px}.feature-card p{font-size:1.1rem;line-height:1.4;max-width:180px}.feature-description-input{font-size:1.3rem}}@media (max-width: 360px){.feature-card{padding:12px 8px;min-height:120px;gap:8px}.feature-icon{width:48px;height:48px;margin-bottom:4px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.2rem;margin-bottom:4px;line-height:1.2}.feature-card p{font-size:1rem;line-height:1.3;max-width:160px}.feature-description-input{font-size:1.2rem}}.features-grid{display:flex;gap:16px;flex-wrap:wrap}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FeatureCard, isStandalone: true, selector: "lib-feature-card", inputs: { feature: { classPropertyName: "feature", publicName: "feature", isSignal: true, isRequired: false, transformFunction: null }, showLeading: { classPropertyName: "showLeading", publicName: "showLeading", isSignal: true, isRequired: false, transformFunction: null }, showTrailling: { classPropertyName: "showTrailling", publicName: "showTrailling", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feature: "featureChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FeatureCard),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "descriptionInput", first: true, predicate: ["descriptionInput"], descendants: true }], ngImport: i0, template: "<div class=\"feature-card\" [class.feature-card--editing]=\"isEditingDescription()\">\n  @if(showLeading()){\n    <div class=\"feature-icon-leading\">\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\n    </div>\n  }\n  \n  <div class=\"feature-content\">\n    <p>{{ feature()!.title }}</p>\n    @if (showTrailling()) {\n      <div class=\"feature-description-editable\">\n        @if (isEditingDescription()) {\n          <input\n            #descriptionInput\n            class=\"feature-description-input\"\n            type=\"text\"\n            [value]=\"descriptionValue()\"\n            [disabled]=\"isDisabled()\"\n            (input)=\"onDescriptionInput($event)\"\n            (blur)=\"onDescriptionBlur()\"\n            aria-label=\"Description\"\n            autofocus\n          />\n        } @else {\n          <h3>{{ formattedDescription() }}</h3>\n        }\n      </div>\n    } @else {\n      <h3>{{ formattedDescription() }}</h3>\n    }\n  </div>\n\n  @if(showTrailling()){\n    <button\n      type=\"button\"\n      class=\"feature-icon-trailling\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onEditIconClick()\"\n      aria-label=\"Editar description\"\n    >\n      <span class=\"description-edit-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n", styles: [".feature-card{position:relative;width:100%;padding:12px 24px;display:flex;align-items:center;gap:8px;background-color:#fafae8;border-radius:999px;box-sizing:border-box}.feature-card--editing{border:2px solid #dee58f}.feature-icon-leading{flex:0 0 50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#dee58f;margin-right:10px}.feature-icon-leading img{width:28px;height:28px;color:#61661f}.feature-content{flex:1;display:flex;flex-direction:column}.feature-card h3{margin:0 0 5px;font-size:16px;font-weight:700;color:#171c1f;transition:color .3s ease}.feature-card p{margin:0;color:#171c1f;font-weight:500;line-height:1.6;font-size:14px}.feature-description-editable{display:flex;align-items:center;min-height:24px}.feature-description-input{width:100%;border:none;background:transparent;margin:0 0 5px;padding:0;font-size:16px;font-weight:700;color:#171c1f;outline:none}.description-edit-icon{width:20px;height:20px;flex-shrink:0;background-color:#596300;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;-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>')}.feature-icon-trailling{border:none;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.feature-icon-trailling:focus-visible{outline:2px solid #596300;outline-offset:2px;border-radius:4px}@media (max-width: 768px){.feature-card{padding:12px;gap:12px}.feature-icon{flex:0 0 48px;height:48px;margin-right:8px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.5rem}.feature-card p{font-size:1.3rem}.feature-description-input{font-size:1.5rem}}@media (max-width: 640px){.feature-card{flex-direction:column;align-items:center;text-align:center;padding:16px 12px;gap:12px;min-height:140px}.feature-icon{flex:none;margin-right:0;margin-bottom:8px;width:56px;height:56px}.feature-icon img{width:32px;height:32px}.feature-content{align-items:center;text-align:center}.feature-card h3{margin-bottom:8px;font-size:1.4rem;line-height:1.3}.feature-card p{font-size:1.2rem;line-height:1.5;max-width:200px}.feature-description-input{font-size:1.4rem;text-align:center}}@media (max-width: 480px){.feature-card{padding:14px 10px;min-height:130px;gap:10px}.feature-icon{width:52px;height:52px;margin-bottom:6px}.feature-icon img{width:30px;height:30px}.feature-card h3{font-size:1.3rem;margin-bottom:6px}.feature-card p{font-size:1.1rem;line-height:1.4;max-width:180px}.feature-description-input{font-size:1.3rem}}@media (max-width: 360px){.feature-card{padding:12px 8px;min-height:120px;gap:8px}.feature-icon{width:48px;height:48px;margin-bottom:4px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.2rem;margin-bottom:4px;line-height:1.2}.feature-card p{font-size:1rem;line-height:1.3;max-width:160px}.feature-description-input{font-size:1.2rem}}.features-grid{display:flex;gap:16px;flex-wrap:wrap}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FeatureCard, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-feature-card', standalone: true, template: "<div class=\"feature-card\" [class.feature-card--editing]=\"isEditingDescription()\">\n  @if(showLeading()){\n    <div class=\"feature-icon-leading\">\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\n    </div>\n  }\n  \n  <div class=\"feature-content\">\n    <p>{{ feature()!.title }}</p>\n    @if (showTrailling()) {\n      <div class=\"feature-description-editable\">\n        @if (isEditingDescription()) {\n          <input\n            #descriptionInput\n            class=\"feature-description-input\"\n            type=\"text\"\n            [value]=\"descriptionValue()\"\n            (input)=\"onDescriptionInput($event)\"\n            (blur)=\"onDescriptionBlur()\"\n            aria-label=\"Description\"\n            autofocus\n          />\n        } @else {\n          <h3>{{ formattedDescription() }}</h3>\n        }\n      </div>\n    } @else {\n      <h3>{{ formattedDescription() }}</h3>\n    }\n  </div>\n\n  @if(showTrailling()){\n    <button\n      type=\"button\"\n      class=\"feature-icon-trailling\"\n      (click)=\"onEditIconClick()\"\n      aria-label=\"Editar description\"\n    >\n      <span class=\"description-edit-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n", styles: [".feature-card{position:relative;width:100%;padding:12px 24px;display:flex;align-items:center;gap:8px;background-color:#fafae8;border-radius:999px;box-sizing:border-box}.feature-card--editing{border:2px solid #dee58f}.feature-icon-leading{flex:0 0 50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#dee58f;margin-right:10px}.feature-icon-leading img{width:28px;height:28px;color:#61661f}.feature-content{flex:1;display:flex;flex-direction:column}.feature-card h3{margin:0 0 5px;font-size:16px;font-weight:700;color:#171c1f;transition:color .3s ease}.feature-card p{margin:0;color:#171c1f;font-weight:500;line-height:1.6;font-size:14px}.feature-description-editable{display:flex;align-items:center;min-height:24px}.feature-description-input{width:100%;border:none;background:transparent;margin:0 0 5px;padding:0;font-size:16px;font-weight:700;color:#171c1f;outline:none}.description-edit-icon{width:20px;height:20px;flex-shrink:0;background-color:#596300;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;-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>')}.feature-icon-trailling{border:none;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.feature-icon-trailling:focus-visible{outline:2px solid #596300;outline-offset:2px;border-radius:4px}@media (max-width: 768px){.feature-card{padding:12px;gap:12px}.feature-icon{flex:0 0 48px;height:48px;margin-right:8px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.5rem}.feature-card p{font-size:1.3rem}.feature-description-input{font-size:1.5rem}}@media (max-width: 640px){.feature-card{flex-direction:column;align-items:center;text-align:center;padding:16px 12px;gap:12px;min-height:140px}.feature-icon{flex:none;margin-right:0;margin-bottom:8px;width:56px;height:56px}.feature-icon img{width:32px;height:32px}.feature-content{align-items:center;text-align:center}.feature-card h3{margin-bottom:8px;font-size:1.4rem;line-height:1.3}.feature-card p{font-size:1.2rem;line-height:1.5;max-width:200px}.feature-description-input{font-size:1.4rem;text-align:center}}@media (max-width: 480px){.feature-card{padding:14px 10px;min-height:130px;gap:10px}.feature-icon{width:52px;height:52px;margin-bottom:6px}.feature-icon img{width:30px;height:30px}.feature-card h3{font-size:1.3rem;margin-bottom:6px}.feature-card p{font-size:1.1rem;line-height:1.4;max-width:180px}.feature-description-input{font-size:1.3rem}}@media (max-width: 360px){.feature-card{padding:12px 8px;min-height:120px;gap:8px}.feature-icon{width:48px;height:48px;margin-bottom:4px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.2rem;margin-bottom:4px;line-height:1.2}.feature-card p{font-size:1rem;line-height:1.3;max-width:160px}.feature-description-input{font-size:1.2rem}}.features-grid{display:flex;gap:16px;flex-wrap:wrap}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: false }] }], showLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLeading", required: false }] }], showTrailling: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrailling", required: false }] }], descriptionChange: [{ type: i0.Output, args: ["descriptionChange"] }], descriptionInput: [{
+            args: [{ selector: 'lib-feature-card', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FeatureCard),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"feature-card\" [class.feature-card--editing]=\"isEditingDescription()\">\n  @if(showLeading()){\n    <div class=\"feature-icon-leading\">\n      <img [src]=\"feature()?.icon\" alt=\"{{ feature()?.title }}\" />\n    </div>\n  }\n  \n  <div class=\"feature-content\">\n    <p>{{ feature()!.title }}</p>\n    @if (showTrailling()) {\n      <div class=\"feature-description-editable\">\n        @if (isEditingDescription()) {\n          <input\n            #descriptionInput\n            class=\"feature-description-input\"\n            type=\"text\"\n            [value]=\"descriptionValue()\"\n            [disabled]=\"isDisabled()\"\n            (input)=\"onDescriptionInput($event)\"\n            (blur)=\"onDescriptionBlur()\"\n            aria-label=\"Description\"\n            autofocus\n          />\n        } @else {\n          <h3>{{ formattedDescription() }}</h3>\n        }\n      </div>\n    } @else {\n      <h3>{{ formattedDescription() }}</h3>\n    }\n  </div>\n\n  @if(showTrailling()){\n    <button\n      type=\"button\"\n      class=\"feature-icon-trailling\"\n      [disabled]=\"isDisabled()\"\n      (click)=\"onEditIconClick()\"\n      aria-label=\"Editar description\"\n    >\n      <span class=\"description-edit-icon\" aria-hidden=\"true\"></span>\n    </button>\n  }\n</div>\n\n", styles: [".feature-card{position:relative;width:100%;padding:12px 24px;display:flex;align-items:center;gap:8px;background-color:#fafae8;border-radius:999px;box-sizing:border-box}.feature-card--editing{border:2px solid #dee58f}.feature-icon-leading{flex:0 0 50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background-color:#dee58f;margin-right:10px}.feature-icon-leading img{width:28px;height:28px;color:#61661f}.feature-content{flex:1;display:flex;flex-direction:column}.feature-card h3{margin:0 0 5px;font-size:16px;font-weight:700;color:#171c1f;transition:color .3s ease}.feature-card p{margin:0;color:#171c1f;font-weight:500;line-height:1.6;font-size:14px}.feature-description-editable{display:flex;align-items:center;min-height:24px}.feature-description-input{width:100%;border:none;background:transparent;margin:0 0 5px;padding:0;font-size:16px;font-weight:700;color:#171c1f;outline:none}.description-edit-icon{width:20px;height:20px;flex-shrink:0;background-color:#596300;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-repeat:no-repeat;-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>')}.feature-icon-trailling{border:none;background:transparent;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.feature-icon-trailling:focus-visible{outline:2px solid #596300;outline-offset:2px;border-radius:4px}@media (max-width: 768px){.feature-card{padding:12px;gap:12px}.feature-icon{flex:0 0 48px;height:48px;margin-right:8px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.5rem}.feature-card p{font-size:1.3rem}.feature-description-input{font-size:1.5rem}}@media (max-width: 640px){.feature-card{flex-direction:column;align-items:center;text-align:center;padding:16px 12px;gap:12px;min-height:140px}.feature-icon{flex:none;margin-right:0;margin-bottom:8px;width:56px;height:56px}.feature-icon img{width:32px;height:32px}.feature-content{align-items:center;text-align:center}.feature-card h3{margin-bottom:8px;font-size:1.4rem;line-height:1.3}.feature-card p{font-size:1.2rem;line-height:1.5;max-width:200px}.feature-description-input{font-size:1.4rem;text-align:center}}@media (max-width: 480px){.feature-card{padding:14px 10px;min-height:130px;gap:10px}.feature-icon{width:52px;height:52px;margin-bottom:6px}.feature-icon img{width:30px;height:30px}.feature-card h3{font-size:1.3rem;margin-bottom:6px}.feature-card p{font-size:1.1rem;line-height:1.4;max-width:180px}.feature-description-input{font-size:1.3rem}}@media (max-width: 360px){.feature-card{padding:12px 8px;min-height:120px;gap:8px}.feature-icon{width:48px;height:48px;margin-bottom:4px}.feature-icon img{width:28px;height:28px}.feature-card h3{font-size:1.2rem;margin-bottom:4px;line-height:1.2}.feature-card p{font-size:1rem;line-height:1.3;max-width:160px}.feature-description-input{font-size:1.2rem}}.features-grid{display:flex;gap:16px;flex-wrap:wrap}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { feature: [{ type: i0.Input, args: [{ isSignal: true, alias: "feature", required: false }] }, { type: i0.Output, args: ["featureChange"] }], showLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLeading", required: false }] }], showTrailling: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTrailling", required: false }] }], descriptionInput: [{
                 type: ViewChild,
                 args: ['descriptionInput']
             }] } });
@@ -3350,6 +3633,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 class InputTimeFilter {
+    elementRef;
+    ngZone;
     // Inputs
     filters = input([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
     clearTrigger = input(0, ...(ngDevMode ? [{ debugName: "clearTrigger" }] : []));
@@ -3386,7 +3671,10 @@ class InputTimeFilter {
     minutes = signal(Array.from({ length: 60 }, (_, i) => i), ...(ngDevMode ? [{ debugName: "minutes" }] : []));
     onChange = () => { };
     onTouched = () => { };
-    constructor() {
+    documentClickListener;
+    constructor(elementRef, ngZone) {
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
         // Limpiar cuando cambie el trigger externo
         effect(() => {
             const trigger = this.clearTrigger();
@@ -3395,6 +3683,9 @@ class InputTimeFilter {
             }
         });
     }
+    ngOnDestroy() {
+        this.removeDocumentListener();
+    }
     // ControlValueAccessor
     writeValue(_value) {
         // No se usa para múltiples filtros, se controla por filterValues
@@ -3420,9 +3711,11 @@ class InputTimeFilter {
         this.activeFilterType.set(filterValue);
         this.syncTimeFromValue(filterValue);
         this.isOpen.set(true);
+        this.addDocumentListener();
     }
     closeDropdown() {
         this.isOpen.set(false);
+        this.removeDocumentListener();
     }
     onEnter(event) {
         if (event.key !== 'Enter')
@@ -3531,14 +3824,38 @@ class InputTimeFilter {
             value: timeString,
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTimeFilter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    addDocumentListener() {
+        this.removeDocumentListener();
+        this.ngZone.runOutsideAngular(() => {
+            this.documentClickListener = (event) => {
+                const target = event.target;
+                if (!this.elementRef.nativeElement.contains(target)) {
+                    this.ngZone.run(() => {
+                        if (this.isOpen()) {
+                            this.closeDropdown();
+                        }
+                    });
+                }
+            };
+            setTimeout(() => {
+                document.addEventListener('click', this.documentClickListener, true);
+            }, 10);
+        });
+    }
+    removeDocumentListener() {
+        if (this.documentClickListener) {
+            document.removeEventListener('click', this.documentClickListener, true);
+            this.documentClickListener = undefined;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTimeFilter, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: InputTimeFilter, isStandalone: true, selector: "lib-input-time-filter", inputs: { filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, clearTrigger: { classPropertyName: "clearTrigger", publicName: "clearTrigger", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterSelected: "filterSelected", valueChange: "valueChange", enterPressed: "enterPressed" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => InputTimeFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"filter-chips\">\n  @for (item of filters(); track item.value) {\n    <div\n      class=\"chip-input-wrapper\"\n      [class.has-value]=\"filterValues()[item.value]\"\n      [class.active]=\"activeFilterType() === item.value && isOpen()\"\n    >\n      <label class=\"floating-label\">\n        {{ item.placeholder || item.label || 'Seleccionar hora' }}\n      </label>\n\n      <input\n        type=\"text\"\n        class=\"chip-input\"\n        [value]=\"filterValues()[item.value] || ''\"\n        [placeholder]=\"item.placeholder || item.label || 'hh:mm'\"\n        readonly\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggleDropdown(item.value)\"\n        (keydown)=\"onEnter($event)\"\n      />\n\n      <button\n        type=\"button\"\n        class=\"time-icon-button\"\n        (click)=\"toggleDropdown(item.value)\"\n        title=\"Seleccionar hora\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"9\" />\n          <polyline points=\"12 7 12 12 15 15\" />\n        </svg>\n      </button>\n\n      @if (isOpen() && activeFilterType() === item.value) {\n        <div class=\"dropdown\">\n          <div class=\"datetime-content\">\n            <div class=\"time-section\">\n              <div class=\"time-header\">Horario</div>\n\n              <div class=\"time-selectors\">\n                <div class=\"time-group\">\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Hora</div>\n                    <div class=\"time-scroll\">\n                      @for (hour of hours12(); track hour.value) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"hour.value === selectedHour12\"\n                          (click)=\"setHour12(hour.value)\"\n                        >\n                          {{ hour.display }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-separator-vertical\">:</div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Min</div>\n                    <div class=\"time-scroll\">\n                      @for (minute of minutes(); track minute) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"minute === selectedMinute()\"\n                          (click)=\"setMinute(minute)\"\n                        >\n                          {{ minute.toString().padStart(2, '0') }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">AM/PM</div>\n                    <div class=\"time-scroll ampm\">\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'AM'\"\n                        (click)=\"setAmPm('AM')\"\n                      >\n                        AM\n                      </div>\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'PM'\"\n                        (click)=\"setAmPm('PM')\"\n                      >\n                        PM\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"action-buttons\">\n            <button\n              type=\"button\"\n              class=\"action-btn secondary\"\n              (click)=\"clearActive(item.value)\"\n            >\n              Limpiar\n            </button>\n            <button\n              type=\"button\"\n              class=\"action-btn primary\"\n              (click)=\"closeDropdown()\"\n            >\n              Aceptar\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.time-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.time-icon-button svg{width:18px;height:18px}.dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:10;background:#e3e3d1;border:1px solid #787861;border-radius:0 0 5px 5px;box-shadow:0 4px 12px #00000026;min-width:220px}.datetime-content{display:flex;flex-direction:column}.time-section{display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;font-size:1rem;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;font-weight:500;margin-bottom:10px;color:#787861}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-scroll.ampm{max-height:none}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.time-option{padding:8px 12px;cursor:pointer;font-size:1rem;color:#454733;text-align:center;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.action-buttons{display:flex;justify-content:space-between;gap:10px;padding:15px;border-top:1px solid rgba(120,120,97,.2)}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+        ], ngImport: i0, template: "<div class=\"filter-chips\">\n  @for (item of filters(); track item.value) {\n    <div\n      class=\"chip-input-wrapper\"\n      [class.has-value]=\"filterValues()[item.value]\"\n      [class.active]=\"activeFilterType() === item.value && isOpen()\"\n    >\n      <label class=\"floating-label\">\n        {{ item.placeholder || item.label || 'Seleccionar hora' }}\n      </label>\n\n      <input\n        type=\"text\"\n        class=\"chip-input\"\n        [value]=\"filterValues()[item.value] || ''\"\n        [placeholder]=\"item.placeholder || item.label || 'hh:mm'\"\n        readonly\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggleDropdown(item.value)\"\n        (keydown)=\"onEnter($event)\"\n      />\n\n      <button\n        type=\"button\"\n        class=\"time-icon-button\"\n        (click)=\"toggleDropdown(item.value)\"\n        title=\"Seleccionar hora\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"9\" />\n          <polyline points=\"12 7 12 12 15 15\" />\n        </svg>\n      </button>\n\n      @if (isOpen() && activeFilterType() === item.value) {\n        <div class=\"dropdown\">\n          <div class=\"datetime-content\">\n            <div class=\"time-section\">\n              <!-- <div class=\"time-header\">Horario</div> -->\n\n              <div class=\"time-selectors\">\n                <div class=\"time-group\">\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Hora</div>\n                    <div class=\"time-scroll\">\n                      @for (hour of hours12(); track hour.value) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"hour.value === selectedHour12\"\n                          (click)=\"setHour12(hour.value)\"\n                        >\n                          {{ hour.display }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-separator-vertical\">:</div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Min</div>\n                    <div class=\"time-scroll\">\n                      @for (minute of minutes(); track minute) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"minute === selectedMinute()\"\n                          (click)=\"setMinute(minute)\"\n                        >\n                          {{ minute.toString().padStart(2, '0') }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">AM/PM</div>\n                    <div class=\"time-scroll ampm\">\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'AM'\"\n                        (click)=\"setAmPm('AM')\"\n                      >\n                        AM\n                      </div>\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'PM'\"\n                        (click)=\"setAmPm('PM')\"\n                      >\n                        PM\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"action-buttons\">\n            <button\n              type=\"button\"\n              class=\"action-btn secondary\"\n              (click)=\"clearActive(item.value)\"\n            >\n              Limpiar\n            </button>\n            <button\n              type=\"button\"\n              class=\"action-btn primary\"\n              (click)=\"closeDropdown()\"\n            >\n              Aceptar\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.time-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.time-icon-button svg{width:18px;height:18px}.dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:10;background:#e3e3d1;border:1px solid #787861;border-radius:0 0 5px 5px;box-shadow:0 4px 12px #00000026;min-width:220px}.datetime-content{display:flex;flex-direction:column}.time-section{display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;font-size:1rem;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;font-weight:500;margin-bottom:10px;color:#787861}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-scroll.ampm{max-height:none}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.time-option{padding:8px 12px;cursor:pointer;font-size:1rem;color:#454733;text-align:center;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.action-buttons{display:flex;justify-content:space-between;gap:10px;padding:15px;border-top:1px solid rgba(120,120,97,.2)}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTimeFilter, decorators: [{
             type: Component,
@@ -3548,8 +3865,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => InputTimeFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"filter-chips\">\n  @for (item of filters(); track item.value) {\n    <div\n      class=\"chip-input-wrapper\"\n      [class.has-value]=\"filterValues()[item.value]\"\n      [class.active]=\"activeFilterType() === item.value && isOpen()\"\n    >\n      <label class=\"floating-label\">\n        {{ item.placeholder || item.label || 'Seleccionar hora' }}\n      </label>\n\n      <input\n        type=\"text\"\n        class=\"chip-input\"\n        [value]=\"filterValues()[item.value] || ''\"\n        [placeholder]=\"item.placeholder || item.label || 'hh:mm'\"\n        readonly\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggleDropdown(item.value)\"\n        (keydown)=\"onEnter($event)\"\n      />\n\n      <button\n        type=\"button\"\n        class=\"time-icon-button\"\n        (click)=\"toggleDropdown(item.value)\"\n        title=\"Seleccionar hora\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"9\" />\n          <polyline points=\"12 7 12 12 15 15\" />\n        </svg>\n      </button>\n\n      @if (isOpen() && activeFilterType() === item.value) {\n        <div class=\"dropdown\">\n          <div class=\"datetime-content\">\n            <div class=\"time-section\">\n              <div class=\"time-header\">Horario</div>\n\n              <div class=\"time-selectors\">\n                <div class=\"time-group\">\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Hora</div>\n                    <div class=\"time-scroll\">\n                      @for (hour of hours12(); track hour.value) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"hour.value === selectedHour12\"\n                          (click)=\"setHour12(hour.value)\"\n                        >\n                          {{ hour.display }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-separator-vertical\">:</div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Min</div>\n                    <div class=\"time-scroll\">\n                      @for (minute of minutes(); track minute) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"minute === selectedMinute()\"\n                          (click)=\"setMinute(minute)\"\n                        >\n                          {{ minute.toString().padStart(2, '0') }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">AM/PM</div>\n                    <div class=\"time-scroll ampm\">\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'AM'\"\n                        (click)=\"setAmPm('AM')\"\n                      >\n                        AM\n                      </div>\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'PM'\"\n                        (click)=\"setAmPm('PM')\"\n                      >\n                        PM\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"action-buttons\">\n            <button\n              type=\"button\"\n              class=\"action-btn secondary\"\n              (click)=\"clearActive(item.value)\"\n            >\n              Limpiar\n            </button>\n            <button\n              type=\"button\"\n              class=\"action-btn primary\"\n              (click)=\"closeDropdown()\"\n            >\n              Aceptar\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.time-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.time-icon-button svg{width:18px;height:18px}.dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:10;background:#e3e3d1;border:1px solid #787861;border-radius:0 0 5px 5px;box-shadow:0 4px 12px #00000026;min-width:220px}.datetime-content{display:flex;flex-direction:column}.time-section{display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;font-size:1rem;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;font-weight:500;margin-bottom:10px;color:#787861}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-scroll.ampm{max-height:none}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.time-option{padding:8px 12px;cursor:pointer;font-size:1rem;color:#454733;text-align:center;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.action-buttons{display:flex;justify-content:space-between;gap:10px;padding:15px;border-top:1px solid rgba(120,120,97,.2)}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
+                    ], template: "<div class=\"filter-chips\">\n  @for (item of filters(); track item.value) {\n    <div\n      class=\"chip-input-wrapper\"\n      [class.has-value]=\"filterValues()[item.value]\"\n      [class.active]=\"activeFilterType() === item.value && isOpen()\"\n    >\n      <label class=\"floating-label\">\n        {{ item.placeholder || item.label || 'Seleccionar hora' }}\n      </label>\n\n      <input\n        type=\"text\"\n        class=\"chip-input\"\n        [value]=\"filterValues()[item.value] || ''\"\n        [placeholder]=\"item.placeholder || item.label || 'hh:mm'\"\n        readonly\n        [disabled]=\"isDisabled()\"\n        (click)=\"toggleDropdown(item.value)\"\n        (keydown)=\"onEnter($event)\"\n      />\n\n      <button\n        type=\"button\"\n        class=\"time-icon-button\"\n        (click)=\"toggleDropdown(item.value)\"\n        title=\"Seleccionar hora\"\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <circle cx=\"12\" cy=\"12\" r=\"9\" />\n          <polyline points=\"12 7 12 12 15 15\" />\n        </svg>\n      </button>\n\n      @if (isOpen() && activeFilterType() === item.value) {\n        <div class=\"dropdown\">\n          <div class=\"datetime-content\">\n            <div class=\"time-section\">\n              <!-- <div class=\"time-header\">Horario</div> -->\n\n              <div class=\"time-selectors\">\n                <div class=\"time-group\">\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Hora</div>\n                    <div class=\"time-scroll\">\n                      @for (hour of hours12(); track hour.value) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"hour.value === selectedHour12\"\n                          (click)=\"setHour12(hour.value)\"\n                        >\n                          {{ hour.display }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-separator-vertical\">:</div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">Min</div>\n                    <div class=\"time-scroll\">\n                      @for (minute of minutes(); track minute) {\n                        <div\n                          class=\"time-option\"\n                          [class.selected]=\"minute === selectedMinute()\"\n                          (click)=\"setMinute(minute)\"\n                        >\n                          {{ minute.toString().padStart(2, '0') }}\n                        </div>\n                      }\n                    </div>\n                  </div>\n\n                  <div class=\"time-column\">\n                    <div class=\"time-label\">AM/PM</div>\n                    <div class=\"time-scroll ampm\">\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'AM'\"\n                        (click)=\"setAmPm('AM')\"\n                      >\n                        AM\n                      </div>\n                      <div\n                        class=\"time-option\"\n                        [class.selected]=\"selectedAmPm() === 'PM'\"\n                        (click)=\"setAmPm('PM')\"\n                      >\n                        PM\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"action-buttons\">\n            <button\n              type=\"button\"\n              class=\"action-btn secondary\"\n              (click)=\"clearActive(item.value)\"\n            >\n              Limpiar\n            </button>\n            <button\n              type=\"button\"\n              class=\"action-btn primary\"\n              (click)=\"closeDropdown()\"\n            >\n              Aceptar\n            </button>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var(--theme-label-large-font-family, \"Roboto-Medium\", sans-serif);font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.time-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.time-icon-button svg{width:18px;height:18px}.dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:10;background:#e3e3d1;border:1px solid #787861;border-radius:0 0 5px 5px;box-shadow:0 4px 12px #00000026;min-width:220px}.datetime-content{display:flex;flex-direction:column}.time-section{display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;font-size:1rem;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;font-weight:500;margin-bottom:10px;color:#787861}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-scroll.ampm{max-height:none}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.time-option{padding:8px 12px;cursor:pointer;font-size:1rem;color:#454733;text-align:center;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.action-buttons{display:flex;justify-content:space-between;gap:10px;padding:15px;border-top:1px solid rgba(120,120,97,.2)}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
 
 class TitleFilters {
     filtersContainer;
@@ -3804,6 +4121,7 @@ class CardContent {
     variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
     sectionNumber = input(null, ...(ngDevMode ? [{ debugName: "sectionNumber" }] : []));
     compact = input(false, ...(ngDevMode ? [{ debugName: "compact" }] : []));
+    searchRegex = input(null, ...(ngDevMode ? [{ debugName: "searchRegex" }] : []));
     /**
      * Color de fondo de la card.
      * Acepta un preset ('beige' | 'white') o cualquier valor CSS válido (hex, rgb, etc.).
@@ -3831,12 +4149,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 }, 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                    />\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", "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: { 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"] }] });
 }
 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                    />\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 }] }], 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"] }] } });
+            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"] }] } });
 
 class Tabs {
     tabs = input([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
@@ -3942,6 +4260,7 @@ class Tabs {
     tabSearchPlaceholder = computed(() => {
         return this.activeTabSearch()?.placeholder ?? 'Buscar...';
     }, ...(ngDevMode ? [{ debugName: "tabSearchPlaceholder" }] : []));
+    childCards = viewChildren(CardContent, ...(ngDevMode ? [{ debugName: "childCards" }] : []));
     setTab(tabId) {
         if (tabId === this.active())
             return;
@@ -3949,6 +4268,8 @@ class Tabs {
             this.tabValidationFailed.emit(this.active());
             return;
         }
+        this.searchValue.set('');
+        this.childCards().forEach(c => c.searchValue.set(''));
         this.internalActive.set(tabId);
         this.activeTabChange.emit(tabId);
         this.tabChange.emit(tabId);
@@ -4028,12 +4349,12 @@ 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" }, 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            />\r\n        </div>\r\n    }\r\n\r\n    @for (card of cards; track $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            />\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", "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", "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 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"] }] });
 }
 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            />\r\n        </div>\r\n    }\r\n\r\n    @for (card of cards; track $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            />\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"] }] } });
+            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"] }]
+        }], 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 {
     showButton = input(true, ...(ngDevMode ? [{ debugName: "showButton" }] : []));
@@ -4170,11 +4491,13 @@ echarts.use([
     BarChart$1,
     LineChart$1,
     PieChart,
+    HeatmapChart,
     GridComponent,
     TooltipComponent,
     CanvasRenderer,
     GraphicComponent,
-    DataZoomComponent
+    DataZoomComponent,
+    VisualMapComponent
 ]);
 const UI_CHART_TOKENS = {
     fontFamily: 'Inter, sans-serif',
@@ -4375,11 +4698,11 @@ class BarChart {
     toggleExpand = () => this.isExpanded.update(v => !v);
     options = computed(() => buildBarChartOptions(this.data()), ...(ngDevMode ? [{ debugName: "options" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"bar-chart-header\">\r\n    <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:1000;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:99999}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BarChart, isStandalone: true, selector: "lib-bar-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"bar-chart-header\">\r\n    <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-bar-chart', imports: [BaseChart], template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"bar-chart-header\">\r\n    <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:1000;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:99999}\n"] }]
+            args: [{ selector: 'lib-bar-chart', imports: [BaseChart], template: "<div class=\"bar-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"bar-chart-header\">\r\n    <h3 class=\"bar-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.bar-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.bar-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.bar-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.bar-chart-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.bar-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 function buildLineChartOptions(data) {
@@ -4532,7 +4855,8 @@ function buildLineChartOptions(data) {
             {
                 type: 'line',
                 smooth: true,
-                symbol: 'none',
+                symbol: data.length === 1 ? 'circle' : 'none',
+                symbolSize: 8,
                 data: data.map(item => item.value),
                 itemStyle: {
                     color: UI_CHART_TOKENS.secondary,
@@ -4558,11 +4882,11 @@ class LineChart {
     toggleExpand = () => this.isExpanded.update(v => !v);
     options = computed(() => buildLineChartOptions(this.data()), ...(ngDevMode ? [{ debugName: "options" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LineChart, isStandalone: true, selector: "lib-line-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"line-chart-header\">\r\n    <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LineChart, isStandalone: true, selector: "lib-line-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"line-chart-header\">\r\n    <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-line-chart', imports: [BaseChart], template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"line-chart-header\">\r\n    <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999}\n"] }]
+            args: [{ selector: 'lib-line-chart', imports: [BaseChart], template: "<div class=\"line-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"line-chart-header\">\r\n    <h3 class=\"line-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}\r\n", styles: [":host{display:block;width:100%;min-width:0}.line-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.line-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.line-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.line-chart-header{display:flex;justify-content:space-between;align-items:center}.line-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
 
 function getTotal(data) {
@@ -4680,13 +5004,295 @@ class DonutChart {
     toggleExpand = () => this.isExpanded.update(v => !v);
     options = computed(() => buildDonutChartOptions(this.data()), ...(ngDevMode ? [{ debugName: "options" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DonutChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DonutChart, isStandalone: true, selector: "lib-donut-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"donut-chart-header\">\r\n    <h3 class=\"donut-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.donut-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.donut-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DonutChart, isStandalone: true, selector: "lib-donut-chart", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"donut-chart-header\">\r\n    <h3 class=\"donut-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.donut-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.donut-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DonutChart, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-donut-chart', imports: [BaseChart], template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"donut-chart-header\">\r\n    <h3 class=\"donut-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.donut-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.donut-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999}\n"] }]
+            args: [{ selector: 'lib-donut-chart', imports: [BaseChart], template: "<div class=\"donut-chart-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"donut-chart-header\">\r\n    <h3 class=\"donut-chart-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.donut-chart-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.donut-chart-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.donut-chart-container.expanded .chart-wrapper{min-height:unset;height:100%}.donut-chart-header{display:flex;justify-content:space-between;align-items:center}.donut-chart-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
 
+function buildHeatmapOptions(config) {
+    const { xLabels, yLabels, data } = config;
+    // Flatten values to compute min/max for the visual map
+    const values = data.map(d => d.value);
+    const minVal = config.min ?? Math.min(...values);
+    const maxVal = config.max ?? Math.max(...values);
+    // Build the series data as [x, y, value]
+    const seriesData = data.map(d => [d.x, d.y, d.value]);
+    return {
+        animation: true,
+        grid: {
+            left: 8,
+            right: 60,
+            top: 16,
+            bottom: 48,
+            containLabel: true,
+        },
+        tooltip: {
+            trigger: 'item',
+            position: 'top',
+            backgroundColor: UI_CHART_TOKENS.tooltipBg,
+            borderColor: UI_CHART_TOKENS.tooltipBorder,
+            borderWidth: 1,
+            textStyle: {
+                color: UI_CHART_TOKENS.text,
+                fontSize: 12,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
+            },
+            extraCssText: `
+        border-radius: 12px;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+        padding: 10px 12px;
+      `,
+            formatter: (params) => {
+                const xLabel = xLabels[params.data[0]] ?? params.data[0];
+                const yLabel = yLabels[params.data[1]] ?? params.data[1];
+                const val = params.data[2];
+                return `<strong>${yLabel}</strong> - <strong>${xLabel}</strong><br/><strong>${val} Comparendos</strong>`;
+            },
+        },
+        xAxis: {
+            type: 'category',
+            data: xLabels,
+            splitArea: { show: true },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: {
+                color: UI_CHART_TOKENS.muted,
+                fontSize: 12,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
+                interval: 0,
+                rotate: xLabels.length > 8 ? 45 : 0,
+            },
+        },
+        yAxis: {
+            type: 'category',
+            data: yLabels,
+            splitArea: { show: true },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: {
+                color: UI_CHART_TOKENS.muted,
+                fontSize: 12,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
+            },
+        },
+        visualMap: {
+            min: minVal,
+            max: maxVal,
+            calculable: true,
+            orient: 'vertical',
+            right: 0,
+            top: 'center',
+            itemWidth: 12,
+            itemHeight: 120,
+            textStyle: {
+                color: UI_CHART_TOKENS.muted,
+                fontSize: 11,
+                fontFamily: UI_CHART_TOKENS.fontFamily,
+            },
+            inRange: {
+                color: [
+                    '#f0f4d3', // lightest — UI green tint
+                    '#d9df88', // light
+                    '#c4d600', // mid
+                    '#92a00e', // dark
+                    '#61661F', // darkest — secondary token
+                ],
+            },
+        },
+        series: [
+            {
+                name: 'Heatmap',
+                type: 'heatmap',
+                data: seriesData,
+                label: {
+                    show: true,
+                    color: UI_CHART_TOKENS.text,
+                    fontSize: 11,
+                    fontFamily: UI_CHART_TOKENS.fontFamily,
+                },
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowColor: 'rgba(0,0,0,0.15)',
+                    },
+                },
+                itemStyle: {
+                    borderWidth: 2,
+                    /* borderColor: '#ffffff', */
+                    borderRadius: 4,
+                },
+            },
+        ],
+    };
+}
+class Heatmap {
+    title = input('Heatmap', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    config = input({ xLabels: [], yLabels: [], data: [] }, ...(ngDevMode ? [{ debugName: "config" }] : []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    toggleExpand() {
+        this.isExpanded.update((value) => !value);
+    }
+    options = computed(() => buildHeatmapOptions(this.config()), ...(ngDevMode ? [{ debugName: "options" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Heatmap, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: Heatmap, isStandalone: true, selector: "lib-heatmap", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"heatmap-header\">\r\n    <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Heatmap, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-heatmap', imports: [BaseChart], template: "<div class=\"heatmap-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"heatmap-header\">\r\n    <h3 class=\"heatmap-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <lib-base-chart [options]=\"options()\" class=\"chart-wrapper\" />\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.heatmap-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.heatmap-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{flex:1;min-height:300px;display:block;width:100%;min-width:0}.heatmap-container.expanded .chart-wrapper{min-height:unset;height:100%}.heatmap-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.heatmap-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
+
+class GeoAPIMaps {
+    points = input([], ...(ngDevMode ? [{ debugName: "points" }] : []));
+    map;
+    markers = [];
+    constructor() {
+        effect(() => {
+            const pts = this.points();
+            if (this.map && pts.length > 0) {
+                this.renderPoints(pts);
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.initMap();
+    }
+    initMap() {
+        const mapElement = document.getElementById('map');
+        if (!mapElement)
+            return;
+        this.map = new google.maps.Map(mapElement, {
+            center: { lat: 10.96854, lng: -74.78132 }, // Barranquilla
+            zoom: 13,
+            clickableIcons: false,
+            mapId: '1b033ea586ba5df9c6dc091a',
+            // Opciones para ocultar controles
+            mapTypeControl: false, // quita el botón "Mapa/Satélite"
+            streetViewControl: true, // quita Street View
+            fullscreenControl: false, // quita fullscreen
+            zoomControl: true, // opcional, dejar zoom
+            rotateControl: false, // oculta el control de rotación (flechas)
+            zoomControlOptions: {
+                position: google.maps.ControlPosition.TOP_LEFT // mueve el zoom a la parte superior izquierda
+            },
+        });
+        // Render points if they already exist when map is ready
+        if (this.points().length > 0) {
+            this.renderPoints(this.points());
+        }
+    }
+    goToLocation(lat, lng) {
+        if (!this.map)
+            return;
+        const position = { lat, lng };
+        new google.maps.marker.AdvancedMarkerElement({
+            position,
+            map: this.map,
+        });
+        this.map.panTo(position);
+        this.map.setZoom(18);
+    }
+    clearMarkers() {
+        this.markers.forEach(m => m.map = null);
+        this.markers = [];
+    }
+    renderPoints(points) {
+        this.clearMarkers();
+        const infoWindow = new google.maps.InfoWindow();
+        let lockedMarker = null;
+        points.forEach(point => {
+            const dot = document.createElement('div');
+            dot.style.width = '16px';
+            dot.style.height = '16px';
+            dot.style.borderRadius = '50%';
+            dot.style.backgroundColor = point.immobilized ? '#ef4444' : '#3b82f6';
+            dot.style.border = '2px solid white';
+            dot.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
+            dot.style.cursor = 'pointer';
+            const marker = new google.maps.marker.AdvancedMarkerElement({
+                position: { lat: point.latitude, lng: point.longitude },
+                map: this.map,
+                content: dot,
+            });
+            const content = `
+        <div style="padding: 0 12px 12px 12px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; min-width: 200px; color: #374151;">
+          <div style="font-weight: 700; font-size: 15px; color: #111827; margin-bottom: 8px; line-height: 1.2;">
+            ${point.subpoenaNumber}
+          </div>
+          <div style="font-size: 14px; color: #4b5563; margin-bottom: 4px;">
+            ${point.locationLabel}
+          </div>
+          <div style="font-size: 14px; color: #6b7280; margin-bottom: 4px;">
+            ${point.dateTime.replace('T', ' - ').substring(0, 18)}
+          </div>
+          <div style="display: flex; flex-direction: column; gap: 4px; margin-top: 4px;">
+            <div style="font-size: 13px;">
+              <span style="color: #9ca3af;">Infracción:</span> 
+              <span style="font-weight: 500; color: #374151;">${point.infractionCode}</span>
+            </div>
+            <div style="font-size: 13px;">
+              <span style="color: #9ca3af;">Placa:</span> 
+              <span style="font-weight: 500; color: #374151;">${point.plate}</span>
+            </div>
+            <div style="display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-top: 4px; color: ${point.immobilized ? '#ef4444' : '#3b82f6'};">
+              <span style="width: 8px; height: 8px; border-radius: 50%; background-color: ${point.immobilized ? '#ef4444' : '#3b82f6'};"></span>
+              ${point.immobilized ? 'Inmovilizado' : 'Normal'}
+            </div>
+          </div>
+        </div>
+      `;
+            marker.addListener('mouseover', () => {
+                if (!lockedMarker) {
+                    infoWindow.setContent(content);
+                    infoWindow.open(this.map, marker);
+                }
+            });
+            marker.addListener('mouseout', () => {
+                if (!lockedMarker) {
+                    infoWindow.close();
+                }
+            });
+            marker.addListener('click', () => {
+                lockedMarker = marker;
+                infoWindow.setContent(content);
+                infoWindow.open(this.map, marker);
+            });
+            infoWindow.addListener('closeclick', () => {
+                lockedMarker = null;
+            });
+            this.markers.push(marker);
+        });
+        // Auto-center and zoom to show all points
+        if (points.length > 0) {
+            const bounds = new google.maps.LatLngBounds();
+            points.forEach(p => bounds.extend({ lat: p.latitude, lng: p.longitude }));
+            this.map.fitBounds(bounds);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GeoAPIMaps, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: GeoAPIMaps, isStandalone: true, selector: "lib-geo-api-maps", inputs: { points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div id=\"map\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative}#map{position:absolute;inset:0;z-index:1;border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GeoAPIMaps, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-geo-api-maps', standalone: true, imports: [CommonModule], template: "<div id=\"map\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%;position:relative}#map{position:absolute;inset:0;z-index:1;border-radius:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }] } });
+
+class MapGeo {
+    title = input('Mapa Geográfico', ...(ngDevMode ? [{ debugName: "title" }] : []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    points = input([], ...(ngDevMode ? [{ debugName: "points" }] : []));
+    toggleExpand() {
+        this.isExpanded.update((value) => !value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MapGeo, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MapGeo, isStandalone: true, selector: "lib-map-geo", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, points: { classPropertyName: "points", publicName: "points", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"map-geo-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"map-geo-header\">\r\n    <h3 class=\"map-geo-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <div class=\"chart-wrapper\">\r\n    <lib-geo-api-maps [points]=\"points()\" />\r\n  </div>\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.map-geo-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.map-geo-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{position:relative;width:100%;height:450px;min-height:450px;display:block;min-width:0}.map-geo-container.expanded .chart-wrapper{flex:1;height:auto;min-height:0}.map-geo-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.map-geo-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"], dependencies: [{ kind: "component", type: GeoAPIMaps, selector: "lib-geo-api-maps", inputs: ["points"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MapGeo, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-map-geo', imports: [GeoAPIMaps], template: "<div class=\"map-geo-container\" [class.expanded]=\"isExpanded()\">\r\n  <div class=\"map-geo-header\">\r\n    <h3 class=\"map-geo-title\">{{ title() }}</h3>\r\n    <button class=\"expand-btn\" (click)=\"toggleExpand()\" type=\"button\" [attr.aria-label]=\"isExpanded() ? 'Minimize chart' : 'Maximize chart'\">\r\n      @if (isExpanded()) {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-minimize-2\"><polyline points=\"4 14 10 14 10 20\"/><polyline points=\"20 10 14 10 14 4\"/><line x1=\"14\" x2=\"21\" y1=\"10\" y2=\"3\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-maximize-2\"><polyline points=\"15 3 21 3 21 9\"/><polyline points=\"9 21 3 21 3 15\"/><line x1=\"21\" x2=\"14\" y1=\"3\" y2=\"10\"/><line x1=\"3\" x2=\"10\" y1=\"21\" y2=\"14\"/></svg>\r\n      }\r\n    </button>\r\n  </div>\r\n  <div class=\"chart-wrapper\">\r\n    <lib-geo-api-maps [points]=\"points()\" />\r\n  </div>\r\n</div>\r\n@if (isExpanded()) {\r\n  <div class=\"overlay\" (click)=\"toggleExpand()\"></div>\r\n}", styles: [":host{display:block;width:100%;min-width:0}.map-geo-container{width:100%;min-width:0;display:flex;flex-direction:column;gap:16px;background-color:#f0f0db;padding:24px 16px 16px;border-radius:20px;position:relative;transition:all .3s ease}.map-geo-container.expanded{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90vw;height:90vh;z-index:9999;box-shadow:0 25px 50px -12px #00000040;margin:0}.chart-wrapper{position:relative;width:100%;height:450px;min-height:450px;display:block;min-width:0}.map-geo-container.expanded .chart-wrapper{flex:1;height:auto;min-height:0}.map-geo-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.map-geo-title{font-size:20px;font-weight:600;color:#333;font-family:Inter,sans-serif}.expand-btn{background:transparent;border:none;cursor:pointer;color:#61661f;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.expand-btn:hover{background-color:#61661f1a}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#0006;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9998}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }] } });
+
 const Colors = {
     primary: '#4B5E05',
     secondary: '#063546',
@@ -4695,7 +5301,7 @@ const Colors = {
 };
 class KpiCard {
     title = input('Titulo', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    description = input('Descripción', ...(ngDevMode ? [{ debugName: "description" }] : []));
+    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
     value = input('0', ...(ngDevMode ? [{ debugName: "value" }] : []));
     iconColor = input('primary', ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
     resolvedIconColor = computed(() => {
@@ -4704,11 +5310,11 @@ class KpiCard {
         return Colors[color] || color;
     }, ...(ngDevMode ? [{ debugName: "resolvedIconColor" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KpiCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: KpiCard, isStandalone: true, selector: "lib-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kpi-card\">\n  <div class=\"kpi-card-text\">\n    <h3 class=\"kpi-title\">{{ title() }}</h3>\n    <p class=\"kpi-description\">{{ description() }}</p>\n    <h2 class=\"kpi-value\">{{ value() }}</h2>\n  </div>\n  <div class=\"kpi-icon-container\" [style.--kpi-base-color]=\"resolvedIconColor()\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [".kpi-card{background-color:#f0f0db;border-radius:20px;padding:24px;display:flex;justify-content:space-between;font-family:Roboto,sans-serif;min-width:260px}.kpi-card-text{display:flex;flex-direction:column}.kpi-title{font-size:20px;font-weight:700;color:#37474f;margin:0 0 4px}.kpi-description{font-size:15px;font-weight:500;color:#546e7a;margin:0 0 16px}.kpi-value{font-size:28px;font-weight:800;color:#10161a;margin:0;line-height:1}.kpi-icon-container{width:72px;height:72px;background-color:var(--kpi-base-color, #4B5E05);color:color-mix(in srgb,var(--kpi-base-color, #4B5E05) 35%,white);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 4px 6px #0000000d}::ng-deep .kpi-icon-container svg{width:32px;height:32px;stroke:currentColor;stroke-width:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: KpiCard, isStandalone: true, selector: "lib-kpi-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, iconColor: { classPropertyName: "iconColor", publicName: "iconColor", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kpi-card\">\n  <div class=\"kpi-card-text\">\n    <h3 class=\"kpi-title\">{{ title() }}</h3>\n    @if (description()) {\n      <p class=\"kpi-description\">{{ description() }}</p>\n    } @else {\n      <div class=\"kpi-description\">\n        <ng-content select=\"[description]\"></ng-content>\n      </div>\n    }\n    <h2 class=\"kpi-value\">{{ value() }}</h2>\n  </div>\n  <div class=\"kpi-icon-container\" [style.--kpi-base-color]=\"resolvedIconColor()\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [".kpi-card{background-color:#f0f0db;border-radius:20px;padding:24px;display:flex;justify-content:space-between;font-family:Roboto,sans-serif;min-width:260px}.kpi-card-text{display:flex;flex-direction:column}.kpi-title{font-size:20px;font-weight:700;color:#37474f;margin:0 0 4px}.kpi-description{font-size:15px;font-weight:500;color:#546e7a;margin:0 0 16px}.kpi-value{font-size:28px;font-weight:800;color:#10161a;margin:0;line-height:1}.kpi-icon-container{width:72px;height:72px;background-color:var(--kpi-base-color, #4B5E05);color:color-mix(in srgb,var(--kpi-base-color, #4B5E05) 35%,white);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 4px 6px #0000000d}::ng-deep .kpi-icon-container svg{width:32px;height:32px;stroke:currentColor;stroke-width:2}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KpiCard, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-kpi-card', imports: [CommonModule], template: "<div class=\"kpi-card\">\n  <div class=\"kpi-card-text\">\n    <h3 class=\"kpi-title\">{{ title() }}</h3>\n    <p class=\"kpi-description\">{{ description() }}</p>\n    <h2 class=\"kpi-value\">{{ value() }}</h2>\n  </div>\n  <div class=\"kpi-icon-container\" [style.--kpi-base-color]=\"resolvedIconColor()\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [".kpi-card{background-color:#f0f0db;border-radius:20px;padding:24px;display:flex;justify-content:space-between;font-family:Roboto,sans-serif;min-width:260px}.kpi-card-text{display:flex;flex-direction:column}.kpi-title{font-size:20px;font-weight:700;color:#37474f;margin:0 0 4px}.kpi-description{font-size:15px;font-weight:500;color:#546e7a;margin:0 0 16px}.kpi-value{font-size:28px;font-weight:800;color:#10161a;margin:0;line-height:1}.kpi-icon-container{width:72px;height:72px;background-color:var(--kpi-base-color, #4B5E05);color:color-mix(in srgb,var(--kpi-base-color, #4B5E05) 35%,white);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 4px 6px #0000000d}::ng-deep .kpi-icon-container svg{width:32px;height:32px;stroke:currentColor;stroke-width:2}\n"] }]
+            args: [{ selector: 'lib-kpi-card', imports: [CommonModule], template: "<div class=\"kpi-card\">\n  <div class=\"kpi-card-text\">\n    <h3 class=\"kpi-title\">{{ title() }}</h3>\n    @if (description()) {\n      <p class=\"kpi-description\">{{ description() }}</p>\n    } @else {\n      <div class=\"kpi-description\">\n        <ng-content select=\"[description]\"></ng-content>\n      </div>\n    }\n    <h2 class=\"kpi-value\">{{ value() }}</h2>\n  </div>\n  <div class=\"kpi-icon-container\" [style.--kpi-base-color]=\"resolvedIconColor()\">\n    <ng-content select=\"[icon]\"></ng-content>\n  </div>\n</div>\n", styles: [".kpi-card{background-color:#f0f0db;border-radius:20px;padding:24px;display:flex;justify-content:space-between;font-family:Roboto,sans-serif;min-width:260px}.kpi-card-text{display:flex;flex-direction:column}.kpi-title{font-size:20px;font-weight:700;color:#37474f;margin:0 0 4px}.kpi-description{font-size:15px;font-weight:500;color:#546e7a;margin:0 0 16px}.kpi-value{font-size:28px;font-weight:800;color:#10161a;margin:0;line-height:1}.kpi-icon-container{width:72px;height:72px;background-color:var(--kpi-base-color, #4B5E05);color:color-mix(in srgb,var(--kpi-base-color, #4B5E05) 35%,white);border-radius:50%;display:flex;justify-content:center;align-items:center;flex-shrink:0;box-shadow:0 4px 6px #0000000d}::ng-deep .kpi-icon-container svg{width:32px;height:32px;stroke:currentColor;stroke-width:2}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], iconColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconColor", required: false }] }] } });
 
 // src/app/components/public-api.ts
@@ -4718,5 +5324,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, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, Loader, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
+export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map