sapenlinea-components 0.9.76 → 0.9.78

package/fesm2022/sapenlinea-components.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
 import { model, input, signal, computed, Component, Injectable, inject, output, HostListener, ViewChildren, forwardRef, effect, ViewChild, ElementRef, booleanAttribute, DestroyRef, EventEmitter, Output, Input as Input$1, viewChildren, ChangeDetectionStrategy } from '@angular/core';
 import * as i1$1 from '@angular/common';
-import { CommonModule, UpperCasePipe } from '@angular/common';
+import { CommonModule, UpperCasePipe, NgClass } 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, HeatmapChart } from 'echarts/charts';
 import * as echarts from 'echarts/core';
 import { NgxEchartsDirective, provideEchartsCore } from 'ngx-echarts';
-import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent, VisualMapComponent, LegendComponent } from 'echarts/components';
+import { GridComponent, TooltipComponent, GraphicComponent, DataZoomComponent, VisualMapComponent, LegendComponent, TitleComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -584,9 +584,10 @@ class DateTimePicker {
     // Estado AM/PM
     selectedAmPm = signal('AM', ...(ngDevMode ? [{ debugName: "selectedAmPm" }] : []));
     documentClickListener;
+    resizeListener;
     /**
      * Valor que se muestra en el campo de texto.
-     * Siempre muestra la fecha en formato DD/MM/YYYY.
+     * Modo 'date': DD/MM/YYYY. Modo 'datetime': DD/MM/YYYY HH:MM (24h).
      */
     displayValue = computed(() => {
         const text = this.inputTextValue().trim();
@@ -596,10 +597,7 @@ class DateTimePicker {
         const date = this.selectedDate();
         if (!date)
             return '';
-        const day = date.getDate().toString().padStart(2, '0');
-        const month = (date.getMonth() + 1).toString().padStart(2, '0');
-        const year = date.getFullYear();
-        return `${day}/${month}/${year}`;
+        return this.formatDateForInput(date);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
     monthName = computed(() => {
         const months = [
@@ -654,6 +652,7 @@ class DateTimePicker {
     }
     ngOnDestroy() {
         this.removeDocumentListener();
+        this.removePositioningListeners();
     }
     writeValue(value) {
         let date = null;
@@ -698,11 +697,10 @@ class DateTimePicker {
         if (this.isBlocked())
             return;
         this.markAsTouched();
-        const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        const spaceBelow = window.innerHeight - rect.bottom;
-        this.openUpward.set(spaceBelow < 420);
+        this.updatePosition();
         this.isOpen.set(true);
         this.addDocumentListener();
+        this.addPositioningListeners();
         // Si hay fecha seleccionada, navegar a ese mes/año
         const selected = this.selectedDate();
         if (selected) {
@@ -712,9 +710,34 @@ class DateTimePicker {
     }
     close() {
         this.isOpen.set(false);
+        this.openUpward.set(false);
         this.removeDocumentListener();
+        this.removePositioningListeners();
         this.markAsTouched();
     }
+    updatePosition() {
+        const scrollY = window.scrollY;
+        const maxScrollY = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
+        const canScrollDown = scrollY < maxScrollY - 1;
+        this.openUpward.set(!canScrollDown);
+    }
+    addPositioningListeners() {
+        this.removePositioningListeners();
+        this.ngZone.runOutsideAngular(() => {
+            this.resizeListener = () => {
+                if (this.isOpen()) {
+                    this.ngZone.run(() => this.updatePosition());
+                }
+            };
+            window.addEventListener('resize', this.resizeListener);
+        });
+    }
+    removePositioningListeners() {
+        if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+            this.resizeListener = undefined;
+        }
+    }
     selectDay(day) {
         if (!day || this.isBlocked())
             return;
@@ -868,17 +891,19 @@ class DateTimePicker {
         this.markAsTouched();
         this.dateChange.emit(newDate);
     }
-    // Manejo de input de texto (DD/MM/YYYY)
+    // Manejo de input de texto (DD/MM/YYYY o DD/MM/YYYY HH:MM)
     onInputChange(event) {
         if (this.isBlocked())
             return;
         const input = event.target;
-        let value = input.value;
+        const value = input.value;
+        const isDateTime = this.mode() === 'datetime';
         // Eliminar todo lo que no sea número
         const numbersOnly = value.replace(/\D/g, '');
-        // Limitar a 8 dígitos (DDMMYYYY)
-        const limitedNumbers = numbersOnly.slice(0, 8);
-        // Formatear con barras: DD/MM/YYYY
+        // Limitar a 8 dígitos para fecha o 12 para datetime
+        const maxDigits = isDateTime ? 12 : 8;
+        const limitedNumbers = numbersOnly.slice(0, maxDigits);
+        // Formatear con separadores: DD/MM/YYYY [ HH:MM]
         let formatted = '';
         if (limitedNumbers.length > 0) {
             formatted = limitedNumbers.slice(0, 2);
@@ -888,12 +913,18 @@ class DateTimePicker {
             if (limitedNumbers.length > 4) {
                 formatted += '/' + limitedNumbers.slice(4, 8);
             }
+            if (isDateTime && limitedNumbers.length > 8) {
+                formatted += ' ' + limitedNumbers.slice(8, 10);
+            }
+            if (isDateTime && limitedNumbers.length > 10) {
+                formatted += ':' + limitedNumbers.slice(10, 12);
+            }
         }
         this.inputTextValue.set(formatted);
         input.value = formatted;
         this.markAsTouched();
-        // Solo intentamos parsear cuando tenemos DD/MM/YYYY completo (10 caracteres)
-        if (formatted.length === 10) {
+        const completeLength = isDateTime ? 16 : 10;
+        if (formatted.length === completeLength) {
             const parsedDate = this.parseDateInput(formatted);
             if (parsedDate) {
                 if (this.isDateDisabled(parsedDate)) {
@@ -913,9 +944,8 @@ class DateTimePicker {
         }
     }
     /**
-     * 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
+     * Selects the date/time segment under the cursor on click.
+     * Format: DD/MM/YYYY [HH:MM] → DD=0-1, MM=3-4, YYYY=6-9, HH=11-12, MM=14-15
      */
     onInputClick(event) {
         event.stopPropagation();
@@ -924,29 +954,31 @@ class DateTimePicker {
         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
+        const hasTime = this.mode() === 'datetime' && value.includes(':');
         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
+        else if (pos <= 10 || !hasTime) {
             start = 6;
             end = 10;
         }
-        // Use setTimeout to override the browser's default selection behavior
+        else if (pos <= 13) {
+            start = 11;
+            end = 13;
+        }
+        else {
+            start = 14;
+            end = 16;
+        }
         setTimeout(() => {
             input.setSelectionRange(start, end);
         }, 0);
@@ -959,16 +991,27 @@ class DateTimePicker {
     parseDateInput(input) {
         if (!input || input.trim() === '')
             return null;
-        const match = input.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
-        if (match) {
-            const day = parseInt(match[1], 10);
-            const month = parseInt(match[2], 10) - 1;
-            const year = parseInt(match[3], 10);
-            if (day >= 1 && day <= 31 && month >= 0 && month <= 11 && year >= 1900 && year <= 2100) {
-                const date = new Date(year, month, day);
-                if (date.getDate() === day && date.getMonth() === month && date.getFullYear() === year) {
-                    return date;
-                }
+        const trimmed = input.trim();
+        const dateTimeMatch = trimmed.match(/^(\d{2})\/(\d{2})\/(\d{4})\s(\d{2}):(\d{2})$/);
+        const dateMatch = trimmed.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+        const match = dateTimeMatch || dateMatch;
+        if (!match)
+            return null;
+        const day = parseInt(match[1], 10);
+        const month = parseInt(match[2], 10) - 1;
+        const year = parseInt(match[3], 10);
+        const hour = match[4] ? parseInt(match[4], 10) : 0;
+        const minute = match[5] ? parseInt(match[5], 10) : 0;
+        if (day >= 1 && day <= 31 &&
+            month >= 0 && month <= 11 &&
+            year >= 1900 && year <= 2100 &&
+            hour >= 0 && hour <= 23 &&
+            minute >= 0 && minute <= 59) {
+            const date = new Date(year, month, day, hour, minute);
+            if (date.getDate() === day &&
+                date.getMonth() === month &&
+                date.getFullYear() === year) {
+                return date;
             }
         }
         return null;
@@ -977,7 +1020,13 @@ class DateTimePicker {
         const day = date.getDate().toString().padStart(2, '0');
         const month = (date.getMonth() + 1).toString().padStart(2, '0');
         const year = date.getFullYear();
-        return `${day}/${month}/${year}`;
+        const dateStr = `${day}/${month}/${year}`;
+        if (this.mode() === 'datetime') {
+            const hour = date.getHours().toString().padStart(2, '0');
+            const minute = date.getMinutes().toString().padStart(2, '0');
+            return `${dateStr} ${hour}:${minute}`;
+        }
+        return dateStr;
     }
     updateInternalState(date) {
         this.selectedDate.set(date);
@@ -1094,37 +1143,69 @@ class DateTimeFilter {
     isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     isTouched = signal(false, ...(ngDevMode ? [{ debugName: "isTouched" }] : []));
     dropdownDirection = signal('right', ...(ngDevMode ? [{ debugName: "dropdownDirection" }] : []));
-    // Máscara visual dinámica para la guía de fecha __/__/____
+    // Máscara visual dinámica para la guía de fecha __/__/____ o __/__/____, __:__ __
     // Devuelve un arreglo de caracteres con flag "filled" para poder dar color distinto
     inputMask = computed(() => {
         const raw = this.inputTextValue() || '';
         const numbersOnly = raw.replace(/\D/g, '');
+        const isDateTime = this.mode() === 'datetime';
+        const ampmMatch = raw.toUpperCase().match(/[AP]M?/);
+        const ampmStr = ampmMatch ? (ampmMatch[0].startsWith('P') ? 'PM' : 'AM') : 'AM';
         const template = [
-            { char: 'd', filled: false },
-            { char: 'd', filled: false },
-            { char: '/', filled: false },
-            { char: 'm', filled: false },
-            { char: 'm', filled: false },
-            { char: '/', filled: false },
-            { char: 'y', filled: false },
-            { char: 'y', filled: false },
-            { char: 'y', filled: false },
-            { char: 'y', filled: false },
+            { char: 'd', filled: false }, // 0
+            { char: 'd', filled: false }, // 1
+            { char: '/', filled: false }, // 2
+            { char: 'm', filled: false }, // 3
+            { char: 'm', filled: false }, // 4
+            { char: '/', filled: false }, // 5
+            { char: 'y', filled: false }, // 6
+            { char: 'y', filled: false }, // 7
+            { char: 'y', filled: false }, // 8
+            { char: 'y', filled: false }, // 9
         ];
+        if (isDateTime) {
+            template.push({ char: ',', filled: false }, // 10
+            { char: ' ', filled: false }, // 11
+            { char: 'h', filled: false }, // 12
+            { char: 'h', filled: false }, // 13
+            { char: ':', filled: false }, // 14
+            { char: 'm', filled: false }, // 15
+            { char: 'm', filled: false }, // 16
+            { char: ' ', filled: false }, // 17
+            { char: ampmStr[0], filled: false }, // 18
+            { char: ampmStr[1], filled: false } // 19
+            );
+        }
         let index = 0;
-        for (let i = 0; i < template.length && index < numbersOnly.length; i++) {
-            if (template[i].char === '/')
+        for (let i = 0; i < template.length; i++) {
+            if (template[i].char === '/' || template[i].char === ',' || template[i].char === ' ' || template[i].char === ':')
                 continue;
-            template[i] = { char: numbersOnly[index++], filled: true };
-        }
-        // Cuando se completa el segmento, el slash correspondiente pasa a "filled"
-        if (numbersOnly.length >= 2) {
-            template[2] = { char: '/', filled: true }; // después de DD
+            if (isDateTime && (i === 18 || i === 19)) {
+                if (numbersOnly.length >= 12) {
+                    template[i].filled = true;
+                }
+                continue;
+            }
+            if (index < numbersOnly.length) {
+                template[i] = { char: numbersOnly[index++], filled: true };
+            }
         }
-        if (numbersOnly.length >= 4) {
-            template[5] = { char: '/', filled: true }; // después de MM
+        // Cuando se completa el segmento, el slash/separador correspondiente pasa a "filled"
+        if (numbersOnly.length >= 2)
+            template[2].filled = true;
+        if (numbersOnly.length >= 4)
+            template[5].filled = true;
+        if (isDateTime) {
+            if (numbersOnly.length >= 8) {
+                template[10].filled = true;
+                template[11].filled = true;
+            }
+            if (numbersOnly.length >= 10)
+                template[14].filled = true;
+            if (numbersOnly.length >= 12)
+                template[17].filled = true;
         }
-        return template; // para usar en el template y colorear por carácter
+        return template;
     }, ...(ngDevMode ? [{ debugName: "inputMask" }] : []));
     clearTrigger = input(0, ...(ngDevMode ? [{ debugName: "clearTrigger" }] : []));
     // Computed Properties based on active filter
@@ -1281,11 +1362,13 @@ class DateTimeFilter {
             return;
         const input = event.target;
         let value = input.value;
-        // Remove all non-numeric characters
+        const isDateTime = this.mode() === 'datetime';
+        // Remove all non-numeric characters for digits processing
         const numbersOnly = value.replace(/\D/g, '');
-        // Limit to 8 digits (DD/MM/YYYY)
-        const limitedNumbers = numbersOnly.slice(0, 8);
-        // Format with slashes: DD/MM/YYYY
+        // Limit to 8 digits (DD/MM/YYYY) or 12 for datetime
+        const maxDigits = isDateTime ? 12 : 8;
+        const limitedNumbers = numbersOnly.slice(0, maxDigits);
+        // Format string
         let formatted = '';
         if (limitedNumbers.length > 0) {
             formatted = limitedNumbers.slice(0, 2);
@@ -1295,13 +1378,30 @@ class DateTimeFilter {
             if (limitedNumbers.length > 4) {
                 formatted += '/' + limitedNumbers.slice(4, 8);
             }
+            if (isDateTime && limitedNumbers.length > 8) {
+                formatted += ', ' + limitedNumbers.slice(8, 10);
+            }
+            if (isDateTime && limitedNumbers.length > 10) {
+                formatted += ':' + limitedNumbers.slice(10, 12);
+            }
+            if (isDateTime && limitedNumbers.length === 12) {
+                const lastChars = value.slice(-3).toUpperCase();
+                let ampm = this.selectedAmPm();
+                if (lastChars.includes('P'))
+                    ampm = 'PM';
+                else if (lastChars.includes('A'))
+                    ampm = 'AM';
+                this.selectedAmPm.set(ampm);
+                formatted += ' ' + ampm;
+            }
         }
         // Update the input value
         this.inputTextValue.set(formatted);
         input.value = formatted;
         this.markAsTouched();
-        // Only parse when we have a complete date (DD/MM/YYYY = 10 characters)
-        if (formatted.length === 10) {
+        const completeLength = isDateTime ? (formatted.length >= 20 ? 12 : -1) : 10;
+        const isComplete = isDateTime ? limitedNumbers.length === 12 : formatted.length === 10;
+        if (isComplete) {
             const parsedDate = this.parseDateInput(formatted);
             if (parsedDate) {
                 if (this.isDateDisabled(parsedDate)) {
@@ -1339,7 +1439,7 @@ class DateTimeFilter {
         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
+        const isDateTime = this.mode() === 'datetime';
         let start;
         let end;
         if (pos <= 2) {
@@ -1350,10 +1450,22 @@ class DateTimeFilter {
             start = 3;
             end = 5;
         }
-        else {
+        else if (pos <= 10 || !isDateTime) {
             start = 6;
             end = 10;
         }
+        else if (pos <= 14) {
+            start = 12;
+            end = 14;
+        }
+        else if (pos <= 17) {
+            start = 15;
+            end = 17;
+        }
+        else {
+            start = 18;
+            end = 20;
+        }
         // Use setTimeout to override the browser's default selection behavior
         setTimeout(() => {
             input.setSelectionRange(start, end);
@@ -1384,23 +1496,37 @@ class DateTimeFilter {
         if (!value || !value.includes('/'))
             return;
         const pos = input.selectionStart ?? 0;
-        // Determine current segment: 0 = day, 1 = month, 2 = year
+        const isDateTime = this.mode() === 'datetime';
+        // Determine current segment
         let currentSegment;
-        if (pos <= 2) {
+        if (pos <= 2)
             currentSegment = 0;
-        }
-        else if (pos <= 5) {
+        else if (pos <= 5)
             currentSegment = 1;
-        }
-        else {
+        else if (pos <= 10 || !isDateTime)
             currentSegment = 2;
-        }
+        else if (pos <= 14)
+            currentSegment = 3;
+        else if (pos <= 17)
+            currentSegment = 4;
+        else
+            currentSegment = 5;
         // Segment ranges
-        const segments = [
-            { start: 0, end: 2 }, // DD
-            { start: 3, end: 5 }, // MM
-            { start: 6, end: 10 }, // YYYY
-        ];
+        const segments = isDateTime
+            ? [
+                { start: 0, end: 2 }, // DD
+                { start: 3, end: 5 }, // MM
+                { start: 6, end: 10 }, // YYYY
+                { start: 12, end: 14 }, // HH
+                { start: 15, end: 17 }, // MIN
+                { start: 18, end: 20 }, // AMPM
+            ]
+            : [
+                { start: 0, end: 2 }, // DD
+                { start: 3, end: 5 }, // MM
+                { start: 6, end: 10 }, // YYYY
+            ];
+        const numSegments = isDateTime ? 6 : 3;
         if (event.key === 'Tab') {
             if (event.shiftKey) {
                 // Move to previous segment
@@ -1409,21 +1535,19 @@ class DateTimeFilter {
                     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) {
+                if (currentSegment < numSegments - 1) {
                     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) {
+            if (currentSegment < numSegments - 1) {
                 event.preventDefault();
                 const next = segments[currentSegment + 1];
                 setTimeout(() => input.setSelectionRange(next.start, next.end), 0);
@@ -1440,16 +1564,28 @@ class DateTimeFilter {
         }
         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);
+            let day = 1, month = 1, year = 2024, hour = 12, min = 0, ampm = 'AM';
+            if (isDateTime) {
+                const match = value.match(/^(\d{2})\/(\d{2})\/(\d{4}),\s(\d{2}):(\d{2})\s(AM|PM)$/i);
+                if (!match)
+                    return;
+                day = parseInt(match[1], 10);
+                month = parseInt(match[2], 10);
+                year = parseInt(match[3], 10);
+                hour = parseInt(match[4], 10);
+                min = parseInt(match[5], 10);
+                ampm = match[6].toUpperCase();
+            }
+            else {
+                const match = value.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+                if (!match)
+                    return;
+                day = parseInt(match[1], 10);
+                month = parseInt(match[2], 10);
+                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)
@@ -1458,30 +1594,49 @@ class DateTimeFilter {
                     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
+            else if (currentSegment === 2) {
                 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}`;
+            else if (currentSegment === 3) {
+                hour += delta;
+                if (hour < 1)
+                    hour = 12;
+                if (hour > 12)
+                    hour = 1;
+            }
+            else if (currentSegment === 4) {
+                min += delta;
+                if (min < 0)
+                    min = 59;
+                if (min > 59)
+                    min = 0;
+            }
+            else if (currentSegment === 5) {
+                ampm = ampm === 'AM' ? 'PM' : 'AM';
+            }
+            let newFormatted = '';
+            if (isDateTime) {
+                newFormatted = `${day.toString().padStart(2, '0')}/${month.toString().padStart(2, '0')}/${year}, ${hour.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')} ${ampm}`;
+            }
+            else {
+                newFormatted = `${day.toString().padStart(2, '0')}/${month.toString().padStart(2, '0')}/${year}`;
+            }
             this.inputTextValue.set(newFormatted);
             input.value = newFormatted;
             // Parse and update if valid
@@ -1512,18 +1667,37 @@ class DateTimeFilter {
     parseDateInput(input) {
         if (!input || input.trim() === '')
             return null;
-        // Only accept DD/MM/YYYY format
-        const match = input.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
-        if (match) {
-            const day = parseInt(match[1], 10);
-            const month = parseInt(match[2], 10) - 1;
-            const year = parseInt(match[3], 10);
-            // Validate date
-            if (day >= 1 && day <= 31 && month >= 0 && month <= 11 && year >= 1900 && year <= 2100) {
-                const date = new Date(year, month, day);
-                // Check if date is valid (handles invalid dates like 31/02/2024)
-                if (date.getDate() === day && date.getMonth() === month && date.getFullYear() === year) {
-                    return date;
+        const isDateTime = this.mode() === 'datetime';
+        if (isDateTime) {
+            const match = input.trim().match(/^(\d{2})\/(\d{2})\/(\d{4}),\s(\d{2}):(\d{2})\s(AM|PM)$/i);
+            if (match) {
+                const day = parseInt(match[1], 10);
+                const month = parseInt(match[2], 10) - 1;
+                const year = parseInt(match[3], 10);
+                const hour12 = parseInt(match[4], 10);
+                const minute = parseInt(match[5], 10);
+                const ampm = match[6].toUpperCase();
+                if (day >= 1 && day <= 31 && month >= 0 && month <= 11 && year >= 1900 && year <= 2100 &&
+                    hour12 >= 1 && hour12 <= 12 && minute >= 0 && minute <= 59) {
+                    const hour24 = ampm === 'PM' ? (hour12 === 12 ? 12 : hour12 + 12) : (hour12 === 12 ? 0 : hour12);
+                    const date = new Date(year, month, day, hour24, minute);
+                    if (date.getDate() === day && date.getMonth() === month && date.getFullYear() === year) {
+                        return date;
+                    }
+                }
+            }
+        }
+        else {
+            const match = input.trim().match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+            if (match) {
+                const day = parseInt(match[1], 10);
+                const month = parseInt(match[2], 10) - 1;
+                const year = parseInt(match[3], 10);
+                if (day >= 1 && day <= 31 && month >= 0 && month <= 11 && year >= 1900 && year <= 2100) {
+                    const date = new Date(year, month, day);
+                    if (date.getDate() === day && date.getMonth() === month && date.getFullYear() === year) {
+                        return date;
+                    }
                 }
             }
         }
@@ -1591,6 +1765,15 @@ class DateTimeFilter {
         const day = date.getDate().toString().padStart(2, '0');
         const month = (date.getMonth() + 1).toString().padStart(2, '0');
         const year = date.getFullYear();
+        if (this.mode() === 'datetime') {
+            let h = date.getHours();
+            const m = date.getMinutes().toString().padStart(2, '0');
+            const ampm = h >= 12 ? 'PM' : 'AM';
+            h = h % 12;
+            h = h ? h : 12;
+            const hStr = h.toString().padStart(2, '0');
+            return `${day}/${month}/${year}, ${hStr}:${m} ${ampm}`;
+        }
         return `${day}/${month}/${year}`;
     }
     markAsTouched() {
@@ -1742,7 +1925,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      (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 }] });
+        ], 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 || (item.type === 'datetime' ? 'dd/mm/aaaa, hh:mm AM/PM' : '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:260px;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,
@@ -1752,7 +1935,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      (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"] }]
+                    ], 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 || (item.type === 'datetime' ? 'dd/mm/aaaa, hh:mm AM/PM' : '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:260px;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']
@@ -2360,9 +2543,13 @@ class SelectCustomSearch {
     }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
     onChange = (value) => { };
     onTouched = () => { };
+    resizeListener;
     constructor(elementRef) {
         this.elementRef = elementRef;
     }
+    ngOnDestroy() {
+        this.removePositioningListeners();
+    }
     writeValue(value) {
         this.selectedValue.set(value);
     }
@@ -2388,20 +2575,41 @@ class SelectCustomSearch {
     open() {
         if (this.isBlocked())
             return;
-        const rect = this.elementRef.nativeElement.getBoundingClientRect();
-        const spaceBelow = window.innerHeight - rect.bottom;
-        this.openUpward.set(spaceBelow < 260);
+        this.updatePosition();
         this.isOpen.set(true);
         this.searchTerm.set('');
-        setTimeout(() => {
+        requestAnimationFrame(() => {
             const input = this.elementRef.nativeElement.querySelector('.search-input');
             if (input)
-                input.focus();
+                input.focus({ preventScroll: true });
         });
+        this.addPositioningListeners();
     }
     close() {
         this.isOpen.set(false);
         this.searchTerm.set('');
+        this.openUpward.set(false);
+        this.removePositioningListeners();
+    }
+    updatePosition() {
+        const scrollY = window.scrollY;
+        const maxScrollY = Math.max(0, document.documentElement.scrollHeight - window.innerHeight);
+        const canScrollDown = scrollY < maxScrollY - 1;
+        this.openUpward.set(!canScrollDown);
+    }
+    addPositioningListeners() {
+        this.removePositioningListeners();
+        this.resizeListener = () => {
+            if (this.isOpen())
+                this.updatePosition();
+        };
+        window.addEventListener('resize', this.resizeListener);
+    }
+    removePositioningListeners() {
+        if (this.resizeListener) {
+            window.removeEventListener('resize', this.resizeListener);
+            this.resizeListener = undefined;
+        }
     }
     selectOption(option) {
         if (this.isBlocked())
@@ -2717,11 +2925,11 @@ class DynamicFormFields {
         submitBtn?.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #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 var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;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:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }, { kind: "component", type: ToggleCustom, selector: "lib-toggle-custom", inputs: ["label", "key", "disabled", "checked"], outputs: ["checkedChange", "toggleChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #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 var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a9a97f transparent}.textarea::-webkit-scrollbar{width:8px}.textarea::-webkit-scrollbar-track{background:transparent;margin:4px 0}.textarea::-webkit-scrollbar-thumb{background:#a9a97f;border-radius:4px}.textarea::-webkit-scrollbar-thumb:hover{background:#787861}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;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:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }, { kind: "component", type: ToggleCustom, selector: "lib-toggle-custom", inputs: ["label", "key", "disabled", "checked"], outputs: ["checkedChange", "toggleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker, ToggleCustom], template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #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 var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;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:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
+            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker, ToggleCustom], template: "@if (form()) {\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\n  @for (sec of sections(); track $index) {\n  <section class=\"section\">\n    @if (sec.title) {\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\n    } @if (sec.description) {\n    <p class=\"section-desc\">{{ sec.description }}</p>\n    }\n\n    <div class=\"grid\">\n      @for (run of getFieldRuns(sec.fields); track $index) {\n\n        @if (run.isGroup) {\n        <!-- toggle: wrapper que siempre ocupa la fila completa -->\n        <div class=\"col col--group-wrapper\">\n          @for (f of run.fields; track f.key) {\n          <div class=\"group-item\">\n            <lib-toggle-custom [key]=\"f.key\" [label]=\"f.label ?? ''\" [formControlName]=\"f.key\" />\n          </div>\n          }\n        </div>\n\n        } @else {\n        <!-- Campos normales (incluye checkbox y radio con su col configurable) -->\n        @for (f of run.fields; track f.key) {\n        <div class=\"col\" [style.--col-span]=\"f.col || 6\">\n          @if (['text','number','email', 'password', 'time'].includes(f.type))\n          {\n          <input\n            class=\"input\"\n            [type]=\"f.type\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n            (input)=\"onUppercaseInput($event, f.type, f.key)\"\n          />\n          } @if (['date', 'datetime-local'].includes(f.type)) {\n          <lib-date-time-picker\n            [mode]=\"getDatePickerMode(f.type)\"\n            [placeholder]=\"\n              f.placeholder ||\n              (f.type === 'date'\n                ? 'Seleccionar fecha'\n                : 'Seleccionar fecha y hora')\n            \"\n            [formControlName]=\"f.key\"\n            [minDate]=\"f.minDate || null\"\n            [maxDate]=\"f.maxDate || null\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'textarea') {\n          <textarea\n            class=\"input textarea\"\n            [placeholder]=\"f.placeholder\"\n            [formControlName]=\"f.key\"\n            rows=\"6\"\n            [readonly]=\"f.readonly || false\"\n          ></textarea>\n          } @if (f.type === 'select') {\n          <lib-select-custom-search\n            [options]=\"f.options ?? []\"\n            [placeholder]=\"f.placeholder || 'Seleccionar...'\"\n            [formControlName]=\"f.key\"\n            [readonly]=\"f.readonly || false\"\n          />\n          } @if (f.type === 'radio') {\n          <div class=\"radio-group\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"radio\">\n                <input\n                  type=\"radio\"\n                  [value]=\"o.value\"\n                  [formControlName]=\"f.key\"\n                  [readonly]=\"f.readonly || false\"\n                />\n                <span class=\"radio-mark\"></span>\n                <span class=\"radio-label\">{{ o.label }}</span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'checkbox') {\n          <div class=\"checkbox-group\"\n            [class.checkbox-group--cards]=\"f.variant === 'cards'\"\n            [class.checkbox-group--lowercase]=\"f.uppercase === false\"\n            [class.checkbox-group--readonly]=\"f.readonly && !f.disabled\">\n            @for (o of f.options ?? []; track o.value) {\n              <label class=\"checkbox\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"getCheckboxArray(f.key)?.at($index)?.value\"\n                  (change)=\"onCheckboxInteract($event, f, $index)\"\n                  [disabled]=\"f.disabled || f.readonly || false\"\n                />\n                <span class=\"checkbox-mark\"></span>\n                <span class=\"checkbox-text\">\n                  <span class=\"checkbox-label\">{{ o.label }}</span>\n                  @if (o.subtitle) {\n                  <span class=\"checkbox-subtitle\">{{ o.subtitle }}</span>\n                  }\n                </span>\n              </label>\n            }\n          </div>\n          } @if (f.type === 'disabled') {\n          <input\n            class=\"input input--disabled\"\n            [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\n            disabled\n          />\n          } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\n          <div class=\"error\">\n            @if (ctrl(f.key)?.errors?.['required']) {\n            <span>Campo requerido</span>\n            } @if (ctrl(f.key)?.errors?.['email']) {\n            <span>Correo inv\u00E1lido</span>\n            } @if (ctrl(f.key)?.errors?.['pattern']) {\n            <span>\n              @switch (f.patternType) { @case ('numbers') { Solo se permiten\n              n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\n              ('text') { Solo se permiten letras y espacios } @case ('username') {\n              Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\n              inicio ni al final) } @case ('alphanumeric') { Solo se permiten\n              letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\n            </span>\n            } @if (ctrl(f.key)?.errors?.['notMatching']) {\n            <span>Las contrase\u00F1as no coinciden</span>\n            }\n          </div>\n          }\n\n          @if(f.label && f.type !== 'toggle') {\n          <label\n            [class.label-radio]=\"f.type === 'radio'\"\n            [class.label-checkbox]=\"f.type === 'checkbox'\"\n            [class.label-disabled]=\"f.readonly || f.disabled\"\n            class=\"label\"\n          >\n            {{ f.label }} </label>\n          }\n        </div>\n        }\n        }\n\n      }\n    </div>\n  </section>\n  }\n</form>\n}\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.form.form--compact .grid{gap:12px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.col--group-wrapper{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:0}.form.form--compact .col--group-wrapper{gap:12px}.group-item--full{grid-column:span 4}.form.form--compact .col{padding-bottom:0}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--sl-form-surface, #E3E3D1);padding:0 4px;font-weight:500;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;box-shadow:0 0 0 1000px var(--sl-form-surface, #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 var(--sl-form-surface, #E3E3D1) inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group,.checkbox-group{display:flex;gap:2rem;padding:.5rem 0}.form.form--compact .checkbox-group{padding:0 8px 0 0}.checkbox,.radio{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:1.4rem;color:#1c1c12;-webkit-user-select:none;user-select:none}.checkbox:has(.checkbox-subtitle){align-items:flex-start}.checkbox:has(.checkbox-subtitle) .checkbox-mark,.checkbox-group--cards .checkbox-mark{margin-top:2px}.checkbox-text{display:flex;flex-direction:column;gap:2px}.checkbox-subtitle{font-size:1.2rem;color:#787861;font-weight:400;line-height:1.3}.checkbox-label,.checkbox-subtitle{text-transform:uppercase}.checkbox-group--lowercase .checkbox-label,.checkbox-group--lowercase .checkbox-subtitle{text-transform:none}.checkbox:hover{color:#454733}.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}.checkbox-mark{width:18px;height:18px;border:2px solid #787861;border-radius:4px;background-color:transparent;position:relative;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease}.checkbox input:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox input:checked+.checkbox-mark:after{content:\"\";position:absolute;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg);top:50%;left:50%}.radio-mark{width:18px;height:18px;border:2px solid #787861;border-radius:50%;background-color:transparent;position:relative;transition:all .2s ease}.radio input:checked+.radio-mark{border-color:#596300}.radio input:checked+.radio-mark:after{content:\"\";width:8px;height:8px;background-color:#454733;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio:hover .radio-mark{border-color:#a9a97f}.checkbox input:disabled+.checkbox-mark,.radio input:disabled+.radio-mark{border-color:#a9a97f;background-color:var(--sl-form-surface, #E3E3D1);cursor:not-allowed}.checkbox:has(input:disabled),.radio:has(input:disabled){cursor:not-allowed}.checkbox:has(input:disabled) .checkbox-text,.radio:has(input:disabled) .radio-label{color:#1c1c1266}.checkbox-group--cards .checkbox:has(input:disabled){opacity:.5;pointer-events:none}.checkbox-group--readonly .checkbox{opacity:.6;pointer-events:none;cursor:not-allowed}.checkbox-group--readonly .checkbox input:disabled+.checkbox-mark{border-color:#787861;background-color:transparent}.checkbox-group--readonly .checkbox input:disabled:checked+.checkbox-mark{background-color:#596300;border-color:#596300}.checkbox-group--cards.checkbox-group--readonly .checkbox{opacity:.8;pointer-events:none}.checkbox-group--cards .checkbox{display:flex;align-items:flex-start;width:100%;gap:12px;padding:14px 16px;background-color:#f0f0db;font-size:14px;font-weight:300;text-transform:uppercase;border-radius:10px;border:1px solid transparent;transition:all .2s ease;cursor:pointer;position:relative}.checkbox-group--cards .checkbox:hover{background-color:#dee58f}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a9a97f transparent}.textarea::-webkit-scrollbar{width:8px}.textarea::-webkit-scrollbar-track{background:transparent;margin:4px 0}.textarea::-webkit-scrollbar-thumb{background:#a9a97f;border-radius:4px}.textarea::-webkit-scrollbar-thumb:hover{background:#787861}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--sl-form-surface, #E3E3D1) inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;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:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
 
 class WizardForm {
@@ -2973,6 +3181,7 @@ class DialogAlertComponent {
                             key: "observations",
                             label: "Observaciones",
                             type: "textarea",
+                            readonly: true,
                             placeholder: "Escriba las observaciones...",
                             col: 12,
                         }
@@ -4638,7 +4847,8 @@ echarts.use([
     GraphicComponent,
     DataZoomComponent,
     VisualMapComponent,
-    LegendComponent
+    LegendComponent,
+    TitleComponent
 ]);
 const UI_CHART_TOKENS = {
     fontFamily: 'Inter, sans-serif',
@@ -4682,20 +4892,25 @@ const UI_CHART_TOKENS = {
 class BaseChart {
     options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
     chartClick = output();
+    chartInit = output();
     onChartClick(event) {
         this.chartClick.emit(event);
     }
+    onChartInit(chart) {
+        this.chartInit.emit(chart);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BaseChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: BaseChart, isStandalone: true, selector: "lib-base-chart", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { chartClick: "chartClick" }, providers: [provideEchartsCore({ echarts })], ngImport: i0, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\" (chartClick)=\"onChartClick($event)\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: BaseChart, isStandalone: true, selector: "lib-base-chart", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { chartClick: "chartClick", chartInit: "chartInit" }, providers: [provideEchartsCore({ echarts })], ngImport: i0, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\" (chartClick)=\"onChartClick($event)\" (chartInit)=\"onChartInit($event)\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BaseChart, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-base-chart', imports: [NgxEchartsDirective], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\" (chartClick)=\"onChartClick($event)\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"] }]
-        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }] } });
+            args: [{ selector: 'lib-base-chart', imports: [NgxEchartsDirective], providers: [provideEchartsCore({ echarts })], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div echarts class=\"ui-base-chart\" [options]=\"options()\" [autoResize]=\"true\" (chartClick)=\"onChartClick($event)\" (chartInit)=\"onChartInit($event)\">\r\n</div>", styles: [".ui-base-chart{display:block;width:100%;height:100%;min-height:320px}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], chartClick: [{ type: i0.Output, args: ["chartClick"] }], chartInit: [{ type: i0.Output, args: ["chartInit"] }] } });
 
 function buildBarChartOptions(data, multiSeries, horizontal = false) {
-    const showScroll = data.length > 12;
-    const zoomEnd = showScroll ? Math.floor((12 / data.length) * 100) : 100;
+    const threshold = horizontal ? 6 : 12;
+    const showScroll = data.length > threshold;
+    const zoomEnd = showScroll ? Math.floor((threshold / data.length) * 100) : 100;
     const isMulti = !!multiSeries && multiSeries.length > 0;
     const xAxisData = data.map(item => item.label);
     const series = isMulti
@@ -4900,7 +5115,7 @@ class BarChart {
     toggleExpand = () => this.isExpanded.update(v => !v);
     options = computed(() => buildBarChartOptions(this.data(), this.multiSeries(), this.horizontal()), ...(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 }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", 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"], outputs: ["chartClick"] }] });
+    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 }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", 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"], outputs: ["chartClick", "chartInit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BarChart, decorators: [{
             type: Component,
@@ -5122,7 +5337,7 @@ class LineChart {
     toggleExpand = () => this.isExpanded.update(v => !v);
     options = computed(() => buildLineChartOptions(this.data(), this.multiSeries()), ...(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 }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, 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"], outputs: ["chartClick"] }] });
+    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 }, multiSeries: { classPropertyName: "multiSeries", publicName: "multiSeries", isSignal: true, isRequired: false, 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"], outputs: ["chartClick", "chartInit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LineChart, decorators: [{
             type: Component,
@@ -5136,6 +5351,25 @@ function buildDonutChartOptions(data) {
     const total = getTotal(data);
     const showLegend = data.length > 10;
     const splitLegend = data.length > 14;
+    // Legend tooltip: shows name + value on hover
+    const dataMap = new Map(data.map(d => [d.label, d.value]));
+    const legendTooltip = {
+        show: true,
+        backgroundColor: '#ffffff',
+        borderColor: '#d9dcc7',
+        borderWidth: 1,
+        textStyle: {
+            color: UI_CHART_TOKENS.text,
+            fontSize: 12,
+            fontFamily: UI_CHART_TOKENS.fontFamily,
+        },
+        extraCssText: 'border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.10);padding:8px 10px;',
+        formatter: (params) => {
+            const name = typeof params === 'string' ? params : params?.name;
+            const val = dataMap.get(name);
+            return val !== undefined ? `${name}: <b>${val}</b>` : name;
+        },
+    };
     let legendConfig = {};
     if (showLegend) {
         if (splitLegend) {
@@ -5153,6 +5387,7 @@ function buildDonutChartOptions(data) {
                         itemWidth: 12,
                         itemHeight: 12,
                         itemGap: 10,
+                        tooltip: legendTooltip,
                         textStyle: {
                             fontSize: 11,
                             fontFamily: UI_CHART_TOKENS.fontFamily,
@@ -5171,6 +5406,7 @@ function buildDonutChartOptions(data) {
                         itemWidth: 12,
                         itemHeight: 12,
                         itemGap: 10,
+                        tooltip: legendTooltip,
                         textStyle: {
                             fontSize: 11,
                             fontFamily: UI_CHART_TOKENS.fontFamily,
@@ -5193,6 +5429,7 @@ function buildDonutChartOptions(data) {
                     itemWidth: 12,
                     itemHeight: 12,
                     itemGap: 10,
+                    tooltip: legendTooltip,
                     textStyle: {
                         fontSize: 11,
                         fontFamily: UI_CHART_TOKENS.fontFamily,
@@ -5357,15 +5594,29 @@ class DonutChart {
             this.drilledGroup.set(clickedItem.label);
         }
     }
+    chartInstance = null;
+    onChartInit(chart) {
+        this.chartInstance = chart;
+        chart.on('legendselectchanged', (event) => {
+            const selected = event.selected;
+            const currentData = this.displayData();
+            const visibleTotal = currentData
+                .filter(item => selected[item.label] !== false)
+                .reduce((sum, item) => sum + item.value, 0);
+            chart.setOption({
+                title: { text: `${visibleTotal}` }
+            });
+        });
+    }
     resetDrillDown() {
         this.drilledGroup.set(null);
     }
     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 }, drillDown: { classPropertyName: "drillDown", publicName: "drillDown", isSignal: true, isRequired: false, transformFunction: null }, groupByPrefix: { classPropertyName: "groupByPrefix", publicName: "groupByPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sectionClick: "sectionClick" }, 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()\" (chartClick)=\"onChartClick($event)\" class=\"chart-wrapper\" />\r\n  \r\n  @if (drilledGroup()) {\r\n    <button class=\"back-btn\" (click)=\"resetDrillDown()\" type=\"button\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>\r\n      <span>Volver</span>\r\n    </button>\r\n  }\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}.back-btn{position:absolute;top:24px;right:60px;display:flex;align-items:center;gap:6px;background-color:#d9df88;border:1px solid rgba(97,102,31,.2);padding:6px 12px;border-radius:12px;cursor:pointer;color:#61661f;font-family:Inter,sans-serif;font-size:13px;font-weight:500;box-shadow:0 4px 12px #0000000d;transition:all .2s ease;z-index:100}.back-btn:hover{background-color:#61661f;color:#fff;box-shadow:0 6px 14px #61661f33;transform:translateY(-1px)}.back-btn:active{transform:translateY(0)}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick"] }, { kind: "ngmodule", type: CommonModule }] });
+    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 }, drillDown: { classPropertyName: "drillDown", publicName: "drillDown", isSignal: true, isRequired: false, transformFunction: null }, groupByPrefix: { classPropertyName: "groupByPrefix", publicName: "groupByPrefix", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sectionClick: "sectionClick" }, host: { properties: { "attr.title": "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()\" (chartClick)=\"onChartClick($event)\" (chartInit)=\"onChartInit($event)\" class=\"chart-wrapper\" />\r\n  \r\n  @if (drilledGroup()) {\r\n    <button class=\"back-btn\" (click)=\"resetDrillDown()\" type=\"button\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>\r\n      <span>Volver</span>\r\n    </button>\r\n  }\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}.back-btn{position:absolute;top:24px;right:60px;display:flex;align-items:center;gap:6px;background-color:#d9df88;border:1px solid rgba(97,102,31,.2);padding:6px 12px;border-radius:12px;cursor:pointer;color:#61661f;font-family:Inter,sans-serif;font-size:13px;font-weight:500;box-shadow:0 4px 12px #0000000d;transition:all .2s ease;z-index:100}.back-btn:hover{background-color:#61661f;color:#fff;box-shadow:0 6px 14px #61661f33;transform:translateY(-1px)}.back-btn:active{transform:translateY(0)}\n"], dependencies: [{ kind: "component", type: BaseChart, selector: "lib-base-chart", inputs: ["options"], outputs: ["chartClick", "chartInit"] }, { kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DonutChart, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-donut-chart', standalone: true, imports: [BaseChart, CommonModule], 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()\" (chartClick)=\"onChartClick($event)\" class=\"chart-wrapper\" />\r\n  \r\n  @if (drilledGroup()) {\r\n    <button class=\"back-btn\" (click)=\"resetDrillDown()\" type=\"button\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>\r\n      <span>Volver</span>\r\n    </button>\r\n  }\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}.back-btn{position:absolute;top:24px;right:60px;display:flex;align-items:center;gap:6px;background-color:#d9df88;border:1px solid rgba(97,102,31,.2);padding:6px 12px;border-radius:12px;cursor:pointer;color:#61661f;font-family:Inter,sans-serif;font-size:13px;font-weight:500;box-shadow:0 4px 12px #0000000d;transition:all .2s ease;z-index:100}.back-btn:hover{background-color:#61661f;color:#fff;box-shadow:0 6px 14px #61661f33;transform:translateY(-1px)}.back-btn:active{transform:translateY(0)}\n"] }]
+            args: [{ selector: 'lib-donut-chart', standalone: true, imports: [BaseChart, CommonModule], host: { '[attr.title]': 'null' }, 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()\" (chartClick)=\"onChartClick($event)\" (chartInit)=\"onChartInit($event)\" class=\"chart-wrapper\" />\r\n  \r\n  @if (drilledGroup()) {\r\n    <button class=\"back-btn\" (click)=\"resetDrillDown()\" type=\"button\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m15 18-6-6 6-6\"/></svg>\r\n      <span>Volver</span>\r\n    </button>\r\n  }\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}.back-btn{position:absolute;top:24px;right:60px;display:flex;align-items:center;gap:6px;background-color:#d9df88;border:1px solid rgba(97,102,31,.2);padding:6px 12px;border-radius:12px;cursor:pointer;color:#61661f;font-family:Inter,sans-serif;font-size:13px;font-weight:500;box-shadow:0 4px 12px #0000000d;transition:all .2s ease;z-index:100}.back-btn:hover{background-color:#61661f;color:#fff;box-shadow:0 6px 14px #61661f33;transform:translateY(-1px)}.back-btn:active{transform:translateY(0)}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], drillDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "drillDown", required: false }] }], groupByPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupByPrefix", required: false }] }], sectionClick: [{ type: i0.Output, args: ["sectionClick"] }] } });
 
 function buildHeatmapOptions(config) {
@@ -5446,18 +5697,24 @@ function buildHeatmapOptions(config) {
             },
         },
         visualMap: {
+            type: 'piecewise',
             min: minVal,
             max: maxVal,
-            calculable: false,
+            splitNumber: 5,
             orient: 'horizontal',
             left: 'center',
             bottom: '0',
-            itemWidth: 12,
-            itemHeight: 120,
+            itemWidth: 14,
+            itemHeight: 14,
+            itemGap: 8,
+            itemSymbol: 'rect',
+            showLabel: false, // Hide the "10-20" piece labels
+            text: ['Más', 'Menos'], // Labels at the max and min ends
             textStyle: {
                 color: UI_CHART_TOKENS.muted,
-                fontSize: 11,
+                fontSize: 12,
                 fontFamily: UI_CHART_TOKENS.fontFamily,
+                fontWeight: 500
             },
             inRange: {
                 color: [
@@ -5504,7 +5761,7 @@ class Heatmap {
     }
     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"], outputs: ["chartClick"] }] });
+    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"], outputs: ["chartClick", "chartInit"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Heatmap, decorators: [{
             type: Component,
@@ -5513,21 +5770,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
 class GeoAPIMaps {
     points = input([], ...(ngDevMode ? [{ debugName: "points" }] : []));
+    cameras = input([], ...(ngDevMode ? [{ debugName: "cameras" }] : []));
+    mapContainer;
     map;
     markers = [];
+    cameraMarkers = [];
     constructor() {
+        // Reactivo a cambios de puntos
         effect(() => {
             const pts = this.points();
             if (this.map && pts.length > 0) {
                 this.renderPoints(pts);
             }
         });
+        // Reactivo a cambios de cámaras
+        effect(() => {
+            const cams = this.cameras();
+            if (this.map && cams.length > 0) {
+                this.renderCameras(cams);
+            }
+        });
     }
     ngAfterViewInit() {
         this.initMap();
     }
     initMap() {
-        const mapElement = document.getElementById('map');
+        const mapElement = this.mapContainer?.nativeElement;
         if (!mapElement)
             return;
         this.map = new google.maps.Map(mapElement, {
@@ -5549,6 +5817,10 @@ class GeoAPIMaps {
         if (this.points().length > 0) {
             this.renderPoints(this.points());
         }
+        // Render cameras if they already exist when map is ready
+        if (this.cameras().length > 0) {
+            this.renderCameras(this.cameras());
+        }
     }
     goToLocation(lat, lng) {
         if (!this.map)
@@ -5583,33 +5855,42 @@ class GeoAPIMaps {
                 map: this.map,
                 content: dot,
             });
+            const statusColor = point.immobilized ? '#ef4444' : '#3b82f6';
             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 style="padding:0 12px 12px 12px;font-family:'Inter',-apple-system,sans-serif;
+                  min-width:200px;color:#374151;">
+        <div style="font-weight:700;font-size:15px;color:#111827;">
+          ${point.subpoenaNumber}
+          ${point.immobilized ? '<span style="font-size:11px;background:#ef4444;color:white;border-radius:4px;padding:1px 6px;margin-bottom:8px;vertical-align:middle;">Inmovilizado</span>' : ''}
+        </div>
+
+        <div style="font-size:12px;color:#9ca3af;margin-bottom:10px;display:flex;gap:8px;">
+          <span>📍 ${point.locationLabel}</span>
+        </div>
+
+        <div style="display:flex;flex-direction:column;gap:4px;">
+          <div style="display:flex;justify-content:space-between;gap:16px;font-size:13px;">
+            <span style="color:#9ca3af;">Fecha</span>
+            <span style="font-weight:600;color:#374151;">${new Date(point.dateTime).toLocaleString('es-CO', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false })}</span>
           </div>
-          <div style="font-size: 14px; color: #4b5563; margin-bottom: 4px;">
-            ${point.locationLabel}
+          <div style="display:flex;justify-content:space-between;gap:16px;font-size:13px;">
+            <span style="color:#9ca3af;">Infracción</span>
+            <span style="font-weight:600;color:#374151;">${point.infractionCode}</span>
           </div>
-          <div style="font-size: 14px; color: #6b7280; margin-bottom: 4px;">
-            ${point.dateTime.replace('T', ' - ').substring(0, 18)}
+          <div style="display:flex;justify-content:space-between;gap:16px;font-size:13px;">
+            <span style="color:#9ca3af;">Placa</span>
+            <span style="font-weight:600;color:#374151;">${point.plate}</span>
           </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>
+          <div style="border-top:1px solid #e5e7eb;margin-top:6px;padding-top:6px;
+                      display:flex;justify-content:space-between;font-size:13px;font-weight:700;">
+            <span style="color:${statusColor};">Estado</span>
+            <span style="display:flex;align-items:center;gap:6px;color:${statusColor};">
+              <span style="width:8px;height:8px;border-radius:50%;background-color:${statusColor};"></span>
               ${point.immobilized ? 'Inmovilizado' : 'Normal'}
-            </div>
+            </span>
           </div>
         </div>
-      `;
+      </div>`;
             marker.addListener('mouseover', () => {
                 if (!lockedMarker) {
                     infoWindow.setContent(content);
@@ -5638,28 +5919,124 @@ class GeoAPIMaps {
             this.map.fitBounds(bounds);
         }
     }
+    // ─── GeoPointCameras markers ─────────────────────────────────────────────────
+    clearCameraMarkers() {
+        this.cameraMarkers.forEach(m => (m.map = null));
+        this.cameraMarkers = [];
+    }
+    renderCameras(cameras) {
+        this.clearCameraMarkers();
+        const infoWindow = new google.maps.InfoWindow();
+        let lockedMarker = null;
+        // 1. Encontrar el total mayor para destacarlo
+        const maxTotal = Math.max(...cameras.map(c => c.total));
+        // 2. Centrar el mapa para que se vean todas las cámaras al inicio
+        if (cameras.length > 0) {
+            const bounds = new google.maps.LatLngBounds();
+            cameras.forEach(c => bounds.extend({ lat: c.latitude, lng: c.longitude }));
+            this.map.fitBounds(bounds);
+        }
+        cameras.forEach(cam => {
+            // 3. Color diferente si es el de mayor total
+            const isTop = cam.total === maxTotal;
+            const bgColor = isTop ? '#dc2626' : '#7c3aed'; // rojo para el top, morado para el resto
+            const pin = document.createElement('div');
+            pin.innerHTML = `
+      <div style="
+        background:${bgColor}; color:white; border-radius:8px;
+        padding:4px 8px; font-size:12px; font-weight:700;
+        border:2px solid white; box-shadow:0 2px 6px rgba(0,0,0,.3);
+        display:flex; align-items:center; gap:4px; cursor:pointer; white-space:nowrap;">
+        <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24"
+             fill="white">
+          <path d="M15 8v8H5V8h10m1-2H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0
+                   1-1v-3.5l4 4v-11l-4 4V7a1 1 0 0 0-1-1z"/>
+        </svg>
+        ${cam.total}
+      </div>`;
+            const marker = new google.maps.marker.AdvancedMarkerElement({
+                position: { lat: cam.latitude, lng: cam.longitude },
+                map: this.map,
+                content: pin,
+                title: cam.name,
+            });
+            const codesHtml = Object.entries(cam.by_code)
+                .map(([code, count]) => `
+        <div style="display:flex;justify-content:space-between;gap:16px;font-size:13px;">
+          <span style="color:#9ca3af;">${code}</span>
+          <span style="font-weight:600;color:#374151;">${count}</span>
+        </div>`)
+                .join('');
+            const content = `
+      <div style="padding:0 12px 12px 12px;font-family:'Inter',-apple-system,sans-serif;
+                  min-width:200px;color:#374151;">
+        <div style="font-weight:700;font-size:15px;color:#111827;">
+          ${cam.name}
+          ${isTop ? '<span style="font-size:11px;background:#dc2626;color:white;border-radius:4px;padding:1px 6px;margin-bottom:8px;vertical-align:middle;">Más Infracciones</span>' : ''}
+        </div>
+        <!-- <div style="font-size:12px;color:#9ca3af;margin-bottom:4px;">ID: ${cam.id}</div> -->
+
+        <!-- 4. Coordenadas en el tooltip -->
+        <div style="font-size:12px;color:#9ca3af;margin-bottom:10px;display:flex;gap:8px;">
+          <span>📍 ${cam.locationLabel}</span>
+        </div>
+
+        <div style="display:flex;flex-direction:column;gap:4px;">
+          <div style="margin-top:8px;font-size:14px;color:#6b7280;">Código(s) de Infracciones</div>
+          ${codesHtml}
+          <div style="border-top:1px solid #e5e7eb;margin-top:6px;padding-top:6px;
+                      display:flex;justify-content:space-between;font-size:13px;font-weight:700;">
+            <span style="color:${bgColor};">Total</span>
+            <span style="color:${bgColor};">${cam.total}</span>
+          </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.cameraMarkers.push(marker);
+        });
+    }
     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 }] });
+    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 }, cameras: { classPropertyName: "cameras", publicName: "cameras", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "mapContainer", first: true, predicate: ["mapContainer"], descendants: true, static: true }], ngImport: i0, template: "<div #mapContainer class=\"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 }] }] } });
+            args: [{ selector: 'lib-geo-api-maps', standalone: true, imports: [CommonModule], template: "<div #mapContainer class=\"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 }] }], cameras: [{ type: i0.Input, args: [{ isSignal: true, alias: "cameras", required: false }] }], mapContainer: [{
+                type: ViewChild,
+                args: ['mapContainer', { static: true }]
+            }] } });
 
 class MapGeo {
     title = input('Mapa Geográfico', ...(ngDevMode ? [{ debugName: "title" }] : []));
     isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
     points = input([], ...(ngDevMode ? [{ debugName: "points" }] : []));
+    cameras = input([], ...(ngDevMode ? [{ debugName: "cameras" }] : []));
+    immobilizedCount = computed(() => this.points().filter(p => p.immobilized).length, ...(ngDevMode ? [{ debugName: "immobilizedCount" }] : []));
+    normalCount = computed(() => this.points().filter(p => !p.immobilized).length, ...(ngDevMode ? [{ debugName: "normalCount" }] : []));
+    totalCameras = computed(() => this.cameras().length, ...(ngDevMode ? [{ debugName: "totalCameras" }] : []));
     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"] }] });
+    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 }, cameras: { classPropertyName: "cameras", publicName: "cameras", 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()\" [cameras]=\"cameras()\" />\r\n  </div>\r\n  @if (points().length > 0) {\r\n    <div class=\"map-summary\">\r\n      <span class=\"map-badge blue\">\r\n        <span class=\"map-dot blue\"></span>\r\n        Normal: {{ normalCount() }}\r\n      </span>\r\n      <span class=\"map-badge red\">\r\n        <span class=\"map-dot red\"></span>\r\n        Inmovilizado: {{ immobilizedCount() }}\r\n      </span>\r\n      <span class=\"map-badge total\">Total: {{ points().length }}</span>\r\n    </div>\r\n  }\r\n  @if (cameras().length > 0) {\r\n    <div class=\"map-summary\">\r\n      <span class=\"map-badge purple\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n          <path d=\"M15 8v8H5V8h10m1-2H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4V7a1 1 0 0 0-1-1z\"/>\r\n        </svg>\r\n        C\u00E1maras: {{ totalCameras() }}\r\n      </span>\r\n    </div>\r\n  }\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}.map-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.map-badge{display:inline-flex;align-items:center;gap:5px;font-family:Inter,sans-serif;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap}.map-badge.blue{background-color:#3b82f61f;color:#2563eb}.map-badge.red{background-color:#ef44441f;color:#dc2626}.map-badge.purple{background-color:#7c3aed1f;color:#7c3aed}.map-badge.total{background-color:#3741511a;color:#374151}.map-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.map-dot.blue{background-color:#3b82f6}.map-dot.red{background-color:#ef4444}\n"], dependencies: [{ kind: "component", type: GeoAPIMaps, selector: "lib-geo-api-maps", inputs: ["points", "cameras"] }] });
 }
 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 }] }] } });
+            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()\" [cameras]=\"cameras()\" />\r\n  </div>\r\n  @if (points().length > 0) {\r\n    <div class=\"map-summary\">\r\n      <span class=\"map-badge blue\">\r\n        <span class=\"map-dot blue\"></span>\r\n        Normal: {{ normalCount() }}\r\n      </span>\r\n      <span class=\"map-badge red\">\r\n        <span class=\"map-dot red\"></span>\r\n        Inmovilizado: {{ immobilizedCount() }}\r\n      </span>\r\n      <span class=\"map-badge total\">Total: {{ points().length }}</span>\r\n    </div>\r\n  }\r\n  @if (cameras().length > 0) {\r\n    <div class=\"map-summary\">\r\n      <span class=\"map-badge purple\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n          <path d=\"M15 8v8H5V8h10m1-2H4a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-3.5l4 4v-11l-4 4V7a1 1 0 0 0-1-1z\"/>\r\n        </svg>\r\n        C\u00E1maras: {{ totalCameras() }}\r\n      </span>\r\n    </div>\r\n  }\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}.map-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.map-badge{display:inline-flex;align-items:center;gap:5px;font-family:Inter,sans-serif;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap}.map-badge.blue{background-color:#3b82f61f;color:#2563eb}.map-badge.red{background-color:#ef44441f;color:#dc2626}.map-badge.purple{background-color:#7c3aed1f;color:#7c3aed}.map-badge.total{background-color:#3741511a;color:#374151}.map-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.map-dot.blue{background-color:#3b82f6}.map-dot.red{background-color:#ef4444}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], points: [{ type: i0.Input, args: [{ isSignal: true, alias: "points", required: false }] }], cameras: [{ type: i0.Input, args: [{ isSignal: true, alias: "cameras", required: false }] }] } });
 
 class TableChart {
     title = input('Table Chart', ...(ngDevMode ? [{ debugName: "title" }] : []));
@@ -5962,6 +6339,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'lib-document-upload', standalone: true, imports: [], template: "<div class=\"upload-container\" (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave()\" (drop)=\"onDrop($event)\"\r\n  [class.dragging]=\"isDragging()\">\r\n\r\n  <input type=\"file\" #fileInput [accept]=\"accept()\" [multiple]=\"multiple()\" (change)=\"onFileSelect($event)\" hidden />\r\n\r\n  <div class=\"upload-zone\" (click)=\"fileInput.click()\">\r\n    <svg class=\"upload-icon\" viewBox=\"0 0 486.3 486.3\" xmlns=\"http://www.w3.org/2000/svg\">\r\n      <g>\r\n        <path d=\"M395.5,135.8c-5.2-30.9-20.5-59.1-43.9-80.5c-26-23.8-59.8-36.9-95-36.9c-27.2,0-53.7,7.8-76.4,22.5 c-18.9,12.2-34.6,28.7-45.7,48.1c-4.8-0.9-9.8-1.4-14.8-1.4c-42.5,0-77.1,34.6-77.1,77.1c0,5.5,0.6,10.8,1.6,16 C16.7,200.7,0,232.9,0,267.2c0,27.7,10.3,54.6,29.1,75.9c19.3,21.8,44.8,34.7,72,36.2c0.3,0,0.5,0,0.8,0h86 c7.5,0,13.5-6,13.5-13.5s-6-13.5-13.5-13.5h-85.6C61.4,349.8,27,310.9,27,267.1c0-28.3,15.2-54.7,39.7-69 c5.7-3.3,8.1-10.2,5.9-16.4c-2-5.4-3-11.1-3-17.2c0-27.6,22.5-50.1,50.1-50.1c5.9,0,11.7,1,17.1,3c6.6,2.4,13.9-0.6,16.9-6.9 c18.7-39.7,59.1-65.3,103-65.3c59,0,107.7,44.2,113.3,102.8c0.6,6.1,5.2,11,11.2,12c44.5,7.6,78.1,48.7,78.1,95.6 c0,49.7-39.1,92.9-87.3,96.6h-73.7c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5h74.2c0.3,0,0.6,0,1,0c30.5-2.2,59-16.2,80.2-39.6 c21.1-23.2,32.6-53,32.6-84C486.2,199.5,447.9,149.6,395.5,135.8z\"/>\r\n        <path d=\"M324.2,280c5.3-5.3,5.3-13.8,0-19.1l-71.5-71.5c-2.5-2.5-6-4-9.5-4s-7,1.4-9.5,4l-71.5,71.5c-5.3,5.3-5.3,13.8,0,19.1 c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4l48.5-48.5v222.9c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5V231.5l48.5,48.5 C310.4,285.3,318.9,285.3,324.2,280z\"/>\r\n      </g>\r\n    </svg>\r\n    <p class=\"upload-label\"><strong>{{ label() }}</strong></p>\r\n    <small class=\"upload-helper\">{{ helperText() }}</small>\r\n  </div>\r\n\r\n  @if (files().length > 0) {\r\n  <div class=\"files-row\">\r\n    @for (file of files(); track file.name) {\r\n    <div class=\"file-card\">\r\n      <button type=\"button\" class=\"file-card-remove\" (click)=\"removeFile(file)\" title=\"Eliminar archivo\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\r\n        </svg>\r\n      </button>\r\n      <svg class=\"file-card-icon\" viewBox=\"0 0 64 64\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <path d=\"M12 4 L12 60 L52 60 L52 20 L36 4 Z\" fill=\"#e3e3d1\" stroke=\"#8a9a2f\" stroke-width=\"2.5\" stroke-linejoin=\"round\"/>\r\n        <path d=\"M36 4 L36 20 L52 20\" fill=\"none\" stroke=\"#8a9a2f\" stroke-width=\"2.5\" stroke-linejoin=\"round\"/>\r\n        <rect x=\"20\" y=\"30\" width=\"24\" height=\"2.5\" rx=\"1.25\" fill=\"#8a9a2f\"/>\r\n        <rect x=\"20\" y=\"37\" width=\"24\" height=\"2.5\" rx=\"1.25\" fill=\"#8a9a2f\"/>\r\n        <rect x=\"20\" y=\"44\" width=\"16\" height=\"2.5\" rx=\"1.25\" fill=\"#8a9a2f\"/>\r\n      </svg>\r\n      <span class=\"file-card-ext\">{{ getFileExtension(file) }}</span>\r\n      <span class=\"file-card-name\" [title]=\"file.name\">{{ file.name }}</span>\r\n      <span class=\"file-card-size\">{{ formatSize(file.size) }}</span>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".upload-container{display:flex;flex-direction:column;gap:16px}.upload-zone{border:2px dashed #8a9a2f;border-radius:8px;padding:48px;text-align:center;cursor:pointer;background-color:#f5f7e8;transition:background .2s}.upload-zone:hover,.dragging .upload-zone{background-color:#eaeecc}.upload-icon{width:56px;height:56px;fill:#8a9a2f;display:block;margin:0 auto 12px}.upload-label{font-size:1.4rem;color:#454733;margin:0 0 6px}.upload-helper{font-size:1.2rem;color:#8a9a2f}.files-row{display:flex;flex-direction:row;gap:12px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;scrollbar-color:#8a9a2f #f0f0e0}.files-row::-webkit-scrollbar{height:6px}.files-row::-webkit-scrollbar-track{background:#f0f0e0;border-radius:3px}.files-row::-webkit-scrollbar-thumb{background:#8a9a2f;border-radius:3px}.file-card{position:relative;flex-shrink:0;width:132px;height:140px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;padding:10px 10px 12px;border:1px solid #c5c9a0;border-radius:10px;background-color:#f5f7e8;transition:border-color .2s,background .2s;overflow:hidden}.file-card:hover{border-color:#8a9a2f;background-color:#eaeecc}.file-card-icon{width:52px;height:52px;flex-shrink:0;margin-bottom:2px}.file-card-ext{font-size:1rem;font-weight:700;color:#8a9a2f;letter-spacing:.04em;line-height:1}.file-card-name{width:100%;font-size:1.1rem;color:#454733;text-align:center;overflow:hidden;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical;line-height:1.3;word-break:break-all}.file-card-size{font-size:1rem;color:#8a9a6e;line-height:1}.file-card-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:#ffffffd9;border:1px solid #c5c9a0;border-radius:50%;cursor:pointer;color:#787861;padding:0;transition:background .15s,color .15s,border-color .15s;line-height:1}.file-card-remove:hover{background:#c33;border-color:#c33;color:#fff}.file-card-remove svg{width:12px;height:12px}\n"] }]
         }], propDecorators: { filesChanged: [{ type: i0.Output, args: ["filesChanged"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], maxSizeMB: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMB", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }] } });
 
+class CardHistory {
+    DataCard = input(...(ngDevMode ? [undefined, { debugName: "DataCard" }] : []));
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
+    months = [
+        'enero',
+        'febrero',
+        'marzo',
+        'abril',
+        'mayo',
+        'junio',
+        'julio',
+        'agosto',
+        'septiembre',
+        'octubre',
+        'noviembre',
+        'diciembre',
+    ];
+    toggleExpanded() {
+        this.isExpanded.set(!this.isExpanded());
+    }
+    formatDate(isoDate) {
+        const date = new Date(isoDate);
+        const day = date.getDate();
+        const month = this.months[date.getMonth()];
+        const year = date.getFullYear();
+        return `${day} ${month} ${year}`;
+    }
+    // getBadgeClass(status: string): string {
+    //   const statusLower = status.toLowerCase();
+    //   if (statusLower.includes('operativo') || statusLower.includes('operacional')) {
+    //     return 'badge-operational';
+    //   } else if (statusLower.includes('mantenimiento')) {
+    //     return 'badge-maintenance';
+    //   } else if (statusLower.includes('sin ficha') || statusLower.includes('sin fecha')) {
+    //     return 'badge-no-date';
+    //   }
+    //   return 'badge-operational'; 
+    // }
+    statusData = {
+        activo: { label: 'Activo', class: 'badge-active' },
+        inactivo: { label: 'Inactivo', class: 'badge-inactive' },
+        eliminado: { label: 'Eliminado', class: 'badge-retired' },
+        obsoleto: { label: 'Obsoleto', class: 'badge-obsolete' },
+        operativo: { label: 'Operativo', class: 'badge-operativo' },
+        mantenimiento: { label: 'En mantenimiento', class: 'badge-maintenance' },
+        fallas: { label: 'Con fallas', class: 'badge-failures' },
+        baja: { label: 'Dado de baja', class: 'badge-deactivated' },
+        default: { label: 'Desconocido', class: 'badge-default' },
+    };
+    getBadgeClass(status) {
+        const normalizedStatus = status?.toLowerCase().trim();
+        return this.statusData[normalizedStatus]?.class ?? this.statusData['default'].class;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardHistory, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: CardHistory, isStandalone: true, selector: "lib-card-history", inputs: { DataCard: { classPropertyName: "DataCard", publicName: "DataCard", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"card-history\">\r\n  <span class=\"card-date\">{{ formatDate(DataCard()?.date || \"\") }}</span>\r\n  <div class=\"event-card\" [class.expanded]=\"isExpanded()\">\r\n    <div class=\"event-header\" (click)=\"toggleExpanded()\">\r\n      <div class=\"event-info\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"expand-icon icon icon-tabler icons-tabler-outline icon-tabler-chevron-up\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n          <path d=\"M6 15l6 -6l6 6\" />\r\n        </svg>\r\n        <span class=\"event-type\">{{ DataCard()?.title }}</span>\r\n        <span class=\"event-time\">{{ DataCard()?.time }}</span>\r\n      </div>\r\n      <div class=\"status-badges\">\r\n        <span\r\n          class=\"badge\"\r\n          [ngClass]=\"getBadgeClass(DataCard()?.previousStatus || '')\"\r\n        >\r\n          {{ DataCard()?.previousStatus }}\r\n        </span>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevrons-right\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n          <path d=\"M7 7l5 5l-5 5\" />\r\n          <path d=\"M13 7l5 5l-5 5\" />\r\n        </svg>\r\n\r\n        <span\r\n          class=\"badge\"\r\n          [ngClass]=\"getBadgeClass(DataCard()?.currentStatus || '')\"\r\n        >\r\n          {{ DataCard()?.currentStatus }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"event-details\">\r\n      <div class=\"responsible-info\">\r\n        <div class=\"avatar\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-user\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n            <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n            <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n          </svg>\r\n        </div>\r\n        <div class=\"responsible-details\">\r\n          <h4>Responsable</h4>\r\n          <div class=\"responsible-name\">{{ DataCard()?.responsible }}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"technical-description\">\r\n        <div class=\"tech-label\">Descripci\u00F3n t\u00E9cnica</div>\r\n        <div class=\"tech-content\">\r\n          {{ DataCard()?.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".card-history{display:flex;flex-direction:column;gap:15px}.card-date{color:#1c1c12;font-size:1.4rem;font-weight:600}.event-card{background-color:#f0f0db;border-radius:8px;margin-bottom:15px;overflow:hidden;border:1px solid #c7c7ad}.event-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.event-header:hover{background-color:#e0e0c8}.event-info{display:flex;align-items:center;gap:8px}.expand-icon{font-size:12px;transform:rotate(180deg);transition:transform .2s}.event-card.expanded .expand-icon{transform:rotate(90deg)}.event-type{font-weight:600;font-size:1.4rem;color:#1c1c12}.event-time{color:#454733;font-size:1.1rem}.status-badges{display:flex;align-items:center;gap:8px}.badge{padding:6px 10px;border-radius:6px;font-size:1.2rem;font-weight:600;border:none}.badge-maintenance{background:#bfd100;color:#4f5700}.badge-operational{background-color:#78db5c;color:#0f5e00}.badge-no-date{background-color:#bfe9ff;color:#004d65}.event-details{max-height:0;overflow:hidden;padding:0 10px;background-color:#f0f0e0;transition:max-height .3s ease-in-out,padding .3s ease-in-out}.event-card.expanded .event-details{max-height:300px;padding:20px 10px}.responsible-info{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:20px 10px;background-color:#ebe8d6;border-radius:8px}.avatar{width:36px;height:36px;border-radius:50%;background-color:#bfd100;display:flex;align-items:center;justify-content:center;font-weight:700}.avatar img{width:24px;height:24px}.responsible-details h4{font-size:1.2rem;color:#454733;margin-bottom:2px;font-weight:400}.responsible-name{font-size:1.4rem;font-weight:600;color:#1c1c12}.technical-description{padding:20px 10px;background-color:#ebe8d6;border-radius:8px;height:120px}.tech-label{font-size:1.2rem;color:#454733;margin-bottom:5px}.tech-content{font-size:1.4rem;color:#1c1c12;font-weight:600}.badge-active{color:#006d2f;font-weight:600;background-color:#c6f6c1;border-radius:8px;padding:6px 10px}.badge-inactive{color:#454733e7;font-weight:600;background-color:#e0e0e0;border-radius:8px;padding:6px 10px}.badge-retired{color:#ba1a1a;font-weight:600;background-color:#ffe5e5;border-radius:8px;padding:6px 10px}.badge-obsolete{color:#454733;font-weight:600;border:1px solid #c7c7ad;border-radius:8px;padding:6px 10px}.badge-operativo{color:#0f5e00;font-weight:600;background-color:#80ff66;border-radius:8px;padding:6px 10px}.badge-maintenance{color:#4f5700;font-weight:600;background-color:#bfd100;border-radius:8px;padding:6px 10px}.badge-failures{color:#94000a;font-weight:600;background-color:#fcd;border-radius:8px;padding:6px 10px}.badge-deactivated{color:#ba1a1a;font-weight:600;border:1px solid #ba1a1a;border-radius:8px;padding:6px 10px}.badge-default{color:#6b6b47;font-weight:600;border:1px dashed #c7c7ad;border-radius:8px;padding:6px 10px;font-style:italic}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardHistory, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-card-history', imports: [NgClass], template: "<div class=\"card-history\">\r\n  <span class=\"card-date\">{{ formatDate(DataCard()?.date || \"\") }}</span>\r\n  <div class=\"event-card\" [class.expanded]=\"isExpanded()\">\r\n    <div class=\"event-header\" (click)=\"toggleExpanded()\">\r\n      <div class=\"event-info\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"expand-icon icon icon-tabler icons-tabler-outline icon-tabler-chevron-up\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n          <path d=\"M6 15l6 -6l6 6\" />\r\n        </svg>\r\n        <span class=\"event-type\">{{ DataCard()?.title }}</span>\r\n        <span class=\"event-time\">{{ DataCard()?.time }}</span>\r\n      </div>\r\n      <div class=\"status-badges\">\r\n        <span\r\n          class=\"badge\"\r\n          [ngClass]=\"getBadgeClass(DataCard()?.previousStatus || '')\"\r\n        >\r\n          {{ DataCard()?.previousStatus }}\r\n        </span>\r\n\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevrons-right\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n          <path d=\"M7 7l5 5l-5 5\" />\r\n          <path d=\"M13 7l5 5l-5 5\" />\r\n        </svg>\r\n\r\n        <span\r\n          class=\"badge\"\r\n          [ngClass]=\"getBadgeClass(DataCard()?.currentStatus || '')\"\r\n        >\r\n          {{ DataCard()?.currentStatus }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"event-details\">\r\n      <div class=\"responsible-info\">\r\n        <div class=\"avatar\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-tabler icons-tabler-outline icon-tabler-user\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\"/>\r\n            <path d=\"M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0\" />\r\n            <path d=\"M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2\" />\r\n          </svg>\r\n        </div>\r\n        <div class=\"responsible-details\">\r\n          <h4>Responsable</h4>\r\n          <div class=\"responsible-name\">{{ DataCard()?.responsible }}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"technical-description\">\r\n        <div class=\"tech-label\">Descripci\u00F3n t\u00E9cnica</div>\r\n        <div class=\"tech-content\">\r\n          {{ DataCard()?.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".card-history{display:flex;flex-direction:column;gap:15px}.card-date{color:#1c1c12;font-size:1.4rem;font-weight:600}.event-card{background-color:#f0f0db;border-radius:8px;margin-bottom:15px;overflow:hidden;border:1px solid #c7c7ad}.event-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.event-header:hover{background-color:#e0e0c8}.event-info{display:flex;align-items:center;gap:8px}.expand-icon{font-size:12px;transform:rotate(180deg);transition:transform .2s}.event-card.expanded .expand-icon{transform:rotate(90deg)}.event-type{font-weight:600;font-size:1.4rem;color:#1c1c12}.event-time{color:#454733;font-size:1.1rem}.status-badges{display:flex;align-items:center;gap:8px}.badge{padding:6px 10px;border-radius:6px;font-size:1.2rem;font-weight:600;border:none}.badge-maintenance{background:#bfd100;color:#4f5700}.badge-operational{background-color:#78db5c;color:#0f5e00}.badge-no-date{background-color:#bfe9ff;color:#004d65}.event-details{max-height:0;overflow:hidden;padding:0 10px;background-color:#f0f0e0;transition:max-height .3s ease-in-out,padding .3s ease-in-out}.event-card.expanded .event-details{max-height:300px;padding:20px 10px}.responsible-info{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding:20px 10px;background-color:#ebe8d6;border-radius:8px}.avatar{width:36px;height:36px;border-radius:50%;background-color:#bfd100;display:flex;align-items:center;justify-content:center;font-weight:700}.avatar img{width:24px;height:24px}.responsible-details h4{font-size:1.2rem;color:#454733;margin-bottom:2px;font-weight:400}.responsible-name{font-size:1.4rem;font-weight:600;color:#1c1c12}.technical-description{padding:20px 10px;background-color:#ebe8d6;border-radius:8px;height:120px}.tech-label{font-size:1.2rem;color:#454733;margin-bottom:5px}.tech-content{font-size:1.4rem;color:#1c1c12;font-weight:600}.badge-active{color:#006d2f;font-weight:600;background-color:#c6f6c1;border-radius:8px;padding:6px 10px}.badge-inactive{color:#454733e7;font-weight:600;background-color:#e0e0e0;border-radius:8px;padding:6px 10px}.badge-retired{color:#ba1a1a;font-weight:600;background-color:#ffe5e5;border-radius:8px;padding:6px 10px}.badge-obsolete{color:#454733;font-weight:600;border:1px solid #c7c7ad;border-radius:8px;padding:6px 10px}.badge-operativo{color:#0f5e00;font-weight:600;background-color:#80ff66;border-radius:8px;padding:6px 10px}.badge-maintenance{color:#4f5700;font-weight:600;background-color:#bfd100;border-radius:8px;padding:6px 10px}.badge-failures{color:#94000a;font-weight:600;background-color:#fcd;border-radius:8px;padding:6px 10px}.badge-deactivated{color:#ba1a1a;font-weight:600;border:1px solid #ba1a1a;border-radius:8px;padding:6px 10px}.badge-default{color:#6b6b47;font-weight:600;border:1px dashed #c7c7ad;border-radius:8px;padding:6px 10px;font-style:italic}\n"] }]
+        }], propDecorators: { DataCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "DataCard", required: false }] }] } });
+
 // src/app/components/public-api.ts
 // Exportar los componentes
 
@@ -5969,5 +6407,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, DocumentUpload, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, PdfViewer, PdfViewerService, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
+export { BarChart, BaseChart, Button, ButtonCards, CARD_BG, CardContent, CardHistory, Colors, DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DocumentUpload, DonutChart, DynamicFormFields, FeatureCard, Footer, GeoAPIMaps, Heatmap, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, InputTimeFilter, KpiCard, LineChart, LoadImage, Loader, MapGeo, ModalForm, NotFoundModal, NotFoundSection, NotificationModal, OptionCard, PaginationComponent, PdfViewer, PdfViewerService, ProcessingOverlay, ProgressBar, ProgressFormService, QuickAccessCards, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TableChart, Tabs, TitleFilters, Toast, ToastHelper, ToastService, ToggleCustom, UI_CHART_TOKENS, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map