ngx-dsxlibrary 2.21.70 → 2.21.72

package/fesm2022/ngx-dsxlibrary.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { input, forwardRef, Component, EventEmitter, effect, Output, viewChild, signal, Input, model, inject, computed, Injectable, isDevMode, InjectionToken, output, HostBinding, ChangeDetectorRef, untracked, Pipe, ViewEncapsulation, HostListener, Directive, NgZone, ElementRef, ChangeDetectionStrategy, NgModule, Injector, ViewChild } from '@angular/core';
+import { input, forwardRef, Component, EventEmitter, effect, Output, viewChild, signal, Input, model, inject, computed, Injectable, isDevMode, InjectionToken, output, HostBinding, ChangeDetectorRef, untracked, ViewEncapsulation, HostListener, Directive, NgZone, ElementRef, ChangeDetectionStrategy, NgModule, Pipe, Injector, ViewChild } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, AbstractControl, FormControl, NG_VALIDATORS, FormBuilder, Validators, ReactiveFormsModule, NgControl, FormGroup } from '@angular/forms';
 import * as i2 from 'primeng/togglebutton';
 import { ToggleButtonModule } from 'primeng/togglebutton';
 import * as i1$1 from '@angular/common';
-import { CommonModule, AsyncPipe, DecimalPipe, Location, JsonPipe } from '@angular/common';
+import { CommonModule, AsyncPipe, JsonPipe, DatePipe, DecimalPipe, Location } from '@angular/common';
 import * as i2$1 from 'primeng/tree';
 import { TreeModule } from 'primeng/tree';
 import * as i3 from 'primeng/api';
@@ -60,6 +60,7 @@ import { DrawerModule } from 'primeng/drawer';
 import { FieldsetModule } from 'primeng/fieldset';
 import { IconFieldModule } from 'primeng/iconfield';
 import { InputIconModule } from 'primeng/inputicon';
+import * as i1$8 from 'primeng/inputmask';
 import { InputMaskModule } from 'primeng/inputmask';
 import { InputNumberModule, InputNumber } from 'primeng/inputnumber';
 import { InputTextModule } from 'primeng/inputtext';
@@ -2184,6 +2185,181 @@ function provideEnvironment(environment) {
     };
 }
 
+/**
+ * action-message.model.ts
+ *
+ * Centraliza los tipos de acción y la configuración de mensajes para acciones de botones y operaciones comunes en la UI.
+ *
+ * - Define los tipos de acción estándar usados en dsx-button y otros componentes.
+ * - Permite mantener uniformidad y evitar errores por typos en los tipos de acción.
+ * - Provee la función getActionMessageConfig para obtener los textos, títulos e íconos de confirmación según la acción y el estado.
+ * - Si se usa una acción válida pero sin mensaje configurado, en modo desarrollo muestra un warning para facilitar el mantenimiento.
+ *
+ * Uso recomendado:
+ *   - Importa ACTION_TYPES y ActionType donde se requiera validar o tipar acciones de botones.
+ *   - Usa getActionMessageConfig para obtener la configuración de confirmación antes de ejecutar acciones destructivas o de restauración.
+ *
+ * Ejemplo:
+ *   import { ACTION_TYPES, ActionType, getActionMessageConfig } from '.../action-message.model';
+ *   const config = getActionMessageConfig('softDelete', true);
+ *   // config: { title, message, icon }
+ *
+ * Si agregas un nuevo tipo de acción, recuerda añadir su mensaje en getActionMessageConfig.
+ */
+/**
+ * Tipos de acción disponibles para el componente `dsx-button`.
+ *
+ * Usa `ACTION_TYPES` en el consumidor para evitar typos.
+ *
+ * **Persistencia de datos (formulario)**
+ * - `create`      → Navega a la ruta de nuevo registro (azul)
+ * - `saveOrUpdate` → Muestra "Guardar" si `id` es 0, "Actualizar" si `id` > 0 (amarillo)
+ *
+ * **Eliminar**
+ * - `delete`     → Eliminar registro permanentemente (rojo)
+ * - `softDelete` → Borrar registro con borrado lógico (amarillo)
+ *
+ * **Formulario**
+ * - `validate` → Validar formulario sin guardar (gris)
+ * - `restore`  → Restaurar datos originales (gris)
+ *
+ * **Navegación / Utilidades**
+ * - `home`    → Ir al inicio (gris)
+ * - `refresh` → Recargar datos desde el servidor (morado)
+ *
+ * **Consulta / Descarga**
+ * - `details`  → Ver el detalle de un registro (azul índigo)
+ * - `view`     → Previsualizar o abrir detalle (azul cielo)
+ * - `export`   → Exportar información a Excel (verde Excel)
+ * - `download` → Descargar archivo o recurso (ámbar cálido)
+ * - `import`   → Importar datos desde archivo (azul acero)
+ */
+const ACTION_TYPES = {
+    hardDelete: 'hardDelete',
+    softDelete: 'softDelete',
+    return: 'return',
+    home: 'home',
+    validate: 'validate',
+    restore: 'restore',
+    edit: 'edit',
+    create: 'create',
+    save: 'save',
+    update: 'update',
+    refresh: 'refresh',
+    details: 'details',
+    view: 'view',
+    export: 'export',
+    download: 'download',
+    import: 'import',
+};
+function getActionMessageConfig(action, secondArg, thirdArg) {
+    const isActive = action === 'softDelete' || action === 'hardDelete'
+        ? typeof secondArg === 'boolean'
+            ? secondArg
+            : true
+        : true;
+    const dataPreview = action === 'softDelete' || action === 'hardDelete'
+        ? thirdArg
+        : typeof secondArg === 'string'
+            ? secondArg
+            : undefined;
+    // Valores por defecto para todas las propiedades
+    const defaults = {
+        title: '',
+        message: '',
+        icon: undefined,
+        confirmButtonText: undefined,
+        cancelButtonText: undefined,
+        showConfirmButton: undefined,
+        showCancelButton: undefined,
+    };
+    if (action === 'softDelete') {
+        if (isActive) {
+            return {
+                ...defaults,
+                title: '¿Borrar registro?',
+                message: 'El registro dejará de estar disponible en las listas principales.' +
+                    (dataPreview ? `<br>${dataPreview}` : ''),
+                icono: 'icon/trash-bin.png',
+                confirmButtonText: 'Eliminar',
+                cancelButtonText: 'Cancelar',
+                showConfirmButton: true,
+                showCancelButton: true,
+            };
+        }
+        else {
+            return {
+                ...defaults,
+                title: '¿Restaurar registro?',
+                message: 'El registro volverá a estar <strong>activo</strong> y visible en todas las listas principales del sistema.' +
+                    (dataPreview ? `<br>${dataPreview}` : ''),
+                icono: 'icon/documentation.png',
+                confirmButtonText: 'Sí, restaurar',
+                cancelButtonText: 'Dejar archivado',
+                showConfirmButton: true,
+                showCancelButton: true,
+            };
+        }
+    }
+    if (action === 'hardDelete') {
+        return {
+            ...defaults,
+            title: '¿Eliminar permanentemente?',
+            message: 'Esta acción <strong>no se puede deshacer</strong>. Se perderán todos los datos asociados a este registro de forma inmediata.' +
+                (dataPreview ? `<br>${dataPreview}` : ''),
+            icono: 'icon/delete.png',
+            confirmButtonText: 'Eliminar permanentemente',
+            cancelButtonText: 'Cancelar',
+            showConfirmButton: true,
+            showCancelButton: true,
+        };
+    }
+    if (action === 'save') {
+        return {
+            ...defaults,
+            title: '¿Guardar registro?',
+            message: 'El nuevo registro se guardará en el sistema.' +
+                (dataPreview ? `<br>${dataPreview}` : ''),
+            icono: 'icon2/save_2029637.png',
+            confirmButtonText: 'Guardar',
+            cancelButtonText: 'Cancelar',
+            showConfirmButton: true,
+            showCancelButton: true,
+        };
+    }
+    if (action === 'update') {
+        return {
+            ...defaults,
+            title: '¿Actualizar registro?',
+            message: 'Los cambios realizados se actualizarán en el sistema.' +
+                (dataPreview ? `<br>${dataPreview}` : ''),
+            icono: 'icon2/save_2029637.png',
+            confirmButtonText: 'Actualizar',
+            cancelButtonText: 'Cancelar',
+            showConfirmButton: true,
+            showCancelButton: true,
+        };
+    }
+    if (action === 'restore') {
+        return {
+            ...defaults,
+            title: '¿Revertir cambios?',
+            message: 'Se perderán todos los cambios que hayas realizado en el formulario y se volverán a cargar los datos originales.',
+            icono: 'icon/data-recovery.png',
+            confirmButtonText: 'Restaurar',
+            cancelButtonText: 'Cancelar',
+            showConfirmButton: true,
+            showCancelButton: true,
+        };
+    }
+    if (typeof ngDevMode !== 'undefined' && ngDevMode) {
+        console.warn(`[getActionMessageConfig] Acción "${action}" existe pero no tiene mensaje configurado. ` +
+            'Agrega la configuración correspondiente para evitar este warning.');
+    }
+    // Retorna los valores por defecto si la acción no es válida
+    return { ...defaults };
+}
+
 const INITIAL_PARAMETERS = new InjectionToken('InitialParameters');
 
 /**
@@ -4103,222 +4279,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }] });
 
 /**
- * action-message.model.ts
- *
- * Centraliza los tipos de acción y la configuración de mensajes para acciones de botones y operaciones comunes en la UI.
- *
- * - Define los tipos de acción estándar usados en dsx-button y otros componentes.
- * - Permite mantener uniformidad y evitar errores por typos en los tipos de acción.
- * - Provee la función getActionMessageConfig para obtener los textos, títulos e íconos de confirmación según la acción y el estado.
- * - Si se usa una acción válida pero sin mensaje configurado, en modo desarrollo muestra un warning para facilitar el mantenimiento.
- *
- * Uso recomendado:
- *   - Importa ACTION_TYPES y ActionType donde se requiera validar o tipar acciones de botones.
- *   - Usa getActionMessageConfig para obtener la configuración de confirmación antes de ejecutar acciones destructivas o de restauración.
- *
- * Ejemplo:
- *   import { ACTION_TYPES, ActionType, getActionMessageConfig } from '.../action-message.model';
- *   const config = getActionMessageConfig('softDelete', true);
- *   // config: { title, message, icon }
- *
- * Si agregas un nuevo tipo de acción, recuerda añadir su mensaje en getActionMessageConfig.
- */
-/**
- * Tipos de acción disponibles para el componente `dsx-button`.
- *
- * Usa `ACTION_TYPES` en el consumidor para evitar typos.
- *
- * **Persistencia de datos (formulario)**
- * - `create`      → Navega a la ruta de nuevo registro (azul)
- * - `saveOrUpdate` → Muestra "Guardar" si `id` es 0, "Actualizar" si `id` > 0 (amarillo)
- *
- * **Eliminar**
- * - `delete`     → Eliminar registro permanentemente (rojo)
- * - `softDelete` → Borrar registro con borrado lógico (amarillo)
- *
- * **Formulario**
- * - `validate` → Validar formulario sin guardar (gris)
- * - `restore`  → Restaurar datos originales (gris)
+ * Paleta corporativa de colores para `dsx-button`.
  *
- * **Navegación / Utilidades**
- * - `home`    → Ir al inicio (gris)
- * - `refresh` → Recargar datos desde el servidor (morado)
+ * Cada token tiene un significado semántico fijo. Úsala como referencia
+ * para asignar `colorToken` al añadir nuevos tipos de botón.
  *
- * **Consulta / Descarga**
- * - `details`  → Ver el detalle de un registro (azul índigo)
- * - `view`     → Previsualizar o abrir detalle (azul cielo)
- * - `export`   → Exportar información a Excel (verde Excel)
- * - `download` → Descargar archivo o recurso (ámbar cálido)
- * - `import`   → Importar datos desde archivo (azul acero)
- */
-const ACTION_TYPES = {
-    hardDelete: 'hardDelete',
-    softDelete: 'softDelete',
-    return: 'return',
-    home: 'home',
-    validate: 'validate',
-    restore: 'restore',
-    edit: 'edit',
-    create: 'create',
-    save: 'save',
-    update: 'update',
-    refresh: 'refresh',
-    details: 'details',
-    view: 'view',
-    export: 'export',
-    download: 'download',
-    import: 'import',
-};
-function getActionMessageConfig(action, secondArg, thirdArg) {
-    const isActive = action === 'softDelete' || action === 'hardDelete'
-        ? typeof secondArg === 'boolean'
-            ? secondArg
-            : true
-        : true;
-    const dataPreview = action === 'softDelete' || action === 'hardDelete'
-        ? thirdArg
-        : typeof secondArg === 'string'
-            ? secondArg
-            : undefined;
-    // Valores por defecto para todas las propiedades
-    const defaults = {
-        title: '',
-        message: '',
-        icon: undefined,
-        confirmButtonText: undefined,
-        cancelButtonText: undefined,
-        showConfirmButton: undefined,
-        showCancelButton: undefined,
-    };
-    if (action === 'softDelete') {
-        if (isActive) {
-            return {
-                ...defaults,
-                title: '¿Borrar registro?',
-                message: 'El registro dejará de estar disponible en las listas principales.' +
-                    (dataPreview ? `<br>${dataPreview}` : ''),
-                icono: 'icon/trash-bin.png',
-                confirmButtonText: 'Eliminar',
-                cancelButtonText: 'Cancelar',
-                showConfirmButton: true,
-                showCancelButton: true,
-            };
-        }
-        else {
-            return {
-                ...defaults,
-                title: '¿Restaurar registro?',
-                message: 'El registro volverá a estar <strong>activo</strong> y visible en todas las listas principales del sistema.' +
-                    (dataPreview ? `<br>${dataPreview}` : ''),
-                icono: 'icon/documentation.png',
-                confirmButtonText: 'Sí, restaurar',
-                cancelButtonText: 'Dejar archivado',
-                showConfirmButton: true,
-                showCancelButton: true,
-            };
-        }
-    }
-    if (action === 'hardDelete') {
-        return {
-            ...defaults,
-            title: '¿Eliminar permanentemente?',
-            message: 'Esta acción <strong>no se puede deshacer</strong>. Se perderán todos los datos asociados a este registro de forma inmediata.' +
-                (dataPreview ? `<br>${dataPreview}` : ''),
-            icono: 'icon/delete.png',
-            confirmButtonText: 'Eliminar permanentemente',
-            cancelButtonText: 'Cancelar',
-            showConfirmButton: true,
-            showCancelButton: true,
-        };
-    }
-    if (action === 'save') {
-        return {
-            ...defaults,
-            title: '¿Guardar registro?',
-            message: 'El nuevo registro se guardará en el sistema.' +
-                (dataPreview ? `<br>${dataPreview}` : ''),
-            icono: 'icon2/save_2029637.png',
-            confirmButtonText: 'Guardar',
-            cancelButtonText: 'Cancelar',
-            showConfirmButton: true,
-            showCancelButton: true,
-        };
-    }
-    if (action === 'update') {
-        return {
-            ...defaults,
-            title: '¿Actualizar registro?',
-            message: 'Los cambios realizados se actualizarán en el sistema.' +
-                (dataPreview ? `<br>${dataPreview}` : ''),
-            icono: 'icon2/save_2029637.png',
-            confirmButtonText: 'Actualizar',
-            cancelButtonText: 'Cancelar',
-            showConfirmButton: true,
-            showCancelButton: true,
-        };
-    }
-    if (action === 'restore') {
-        return {
-            ...defaults,
-            title: '¿Revertir cambios?',
-            message: 'Se perderán todos los cambios que hayas realizado en el formulario y se volverán a cargar los datos originales.',
-            icono: 'icon/data-recovery.png',
-            confirmButtonText: 'Restaurar',
-            cancelButtonText: 'Cancelar',
-            showConfirmButton: true,
-            showCancelButton: true,
-        };
-    }
-    if (typeof ngDevMode !== 'undefined' && ngDevMode) {
-        console.warn(`[getActionMessageConfig] Acción "${action}" existe pero no tiene mensaje configurado. ` +
-            'Agrega la configuración correspondiente para evitar este warning.');
-    }
-    // Retorna los valores por defecto si la acción no es válida
-    return { ...defaults };
-}
-
-/**
- * Paleta corporativa de colores para `dsx-button`.
- *
- * Cada token tiene un significado semántico fijo. Úsala como referencia
- * para asignar `colorToken` al añadir nuevos tipos de botón.
- *
- * | Token     | Color          | Uso semántico                                     |
- * |-----------|----------------|---------------------------------------------------|
- * | danger    | Coral rojo     | Acción destructiva e irreversible (eliminar)      |
- * | warning   | Naranja cálido | Acción con riesgo moderado / borrado lógico       |
- * | caution   | Ámbar dorado   | Requiere verificación del usuario (actualizar)    |
- * | success   | Verde menta    | Guardar nuevo registro / agregar                  |
- * | primary   | Azul claro     | Editar / navegar con contexto de registro         |
- * | info      | Cian suave     | Recargar datos / refrescar vista                  |
- * | neutral   | Gris azulado   | Acción secundaria / navegación sin contexto       |
- * | restore   | Violeta suave  | Deshacer / restaurar estado anterior              |
- * | view      | Teal profundo  | Ver / previsualizar detalle                       |
- * | excel     | Verde Excel    | Exportar información a hoja de cálculo            |
- * | download  | Naranja quemado| Descargar archivo o recurso                       |
- * | import    | Azul acero     | Importar información desde archivo                |
- * | details   | Azul índigo    | Abrir detalle de registro                         |
+ * | Token     | Color          | Uso semántico                                     |
+ * |-----------|----------------|---------------------------------------------------|
+ * | danger    | Coral rojo     | Acción destructiva e irreversible (eliminar)      |
+ * | warning   | Naranja cálido | Acción con riesgo moderado / borrado lógico       |
+ * | caution   | Ámbar dorado   | Requiere verificación del usuario (actualizar)    |
+ * | success   | Verde menta    | Guardar nuevo registro / agregar                  |
+ * | primary   | Azul claro     | Editar / navegar con contexto de registro         |
+ * | info      | Cian suave     | Recargar datos / refrescar vista                  |
+ * | neutral   | Gris azulado   | Acción secundaria / navegación sin contexto       |
+ * | restore   | Violeta suave  | Deshacer / restaurar estado anterior              |
+ * | view      | Teal profundo  | Ver / previsualizar detalle                       |
+ * | excel     | Verde Excel    | Exportar información a hoja de cálculo            |
+ * | download  | Naranja quemado| Descargar archivo o recurso                       |
+ * | import    | Azul acero     | Importar información desde archivo                |
+ * | details   | Azul índigo    | Abrir detalle de registro                         |
  */
 const DSX_PALETTE = {
     danger: '#EF5350',
     warning: '#FF7043',
     caution: '#FFB300',
-    success: '#0ba055', // Verde para Guardar
-    primary: '#0066cc', // Azul para Actualizar
+    success: '#0ba055',
+    primary: '#0066cc',
     info: '#26C6DA',
     neutral: '#90A4AE',
-    restore: '#B0BEC5', // Gris suave, menos resaltado
-    return: '#11438d', // Azul violeta para "Regresar registro archivado"
+    restore: '#B0BEC5',
+    return: '#11438d',
     view: '#00838F',
     excel: '#217346',
     download: '#E65100',
     import: '#546E7A',
     details: '#3949AB',
-    magenta: '#D81B60', // Magenta vibrante
-    cyan: '#00BCD4', // Cian brillante
-    olive: '#808000', // Verde oliva
-    brown: '#8D6E63', // Marrón suave
-    slate: '#607D8B', // Azul pizarra
+    magenta: '#D81B60',
+    cyan: '#00BCD4',
+    olive: '#808000',
+    brown: '#8D6E63',
+    slate: '#607D8B',
 };
 /** Tipos que necesitan un `[id]` mayor a 0 para poder mostrarse. */
 const TYPES_REQUIRING_ID = [
@@ -4331,23 +4332,56 @@ class DsxButtonComponent {
     renderCount = 0;
     _paramService = inject((ParameterValuesService));
     _router = inject(Router);
-    // Agrega un input para el tamaño
+    _isDev = isDevMode();
+    lastValidationState = null;
     size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     _environment = inject(ENVIRONMENT, {
         optional: true,
     });
     constructor() {
-        if (isDevMode()) {
+        // Solo activar efectos de debug en desarrollo
+        if (this._isDev) {
+            // Efecto principal que captura todo el estado
             effect(() => {
                 if (!this.debug())
                     return;
                 this.renderCount++;
-                console.log(`[dsx-button:${this.type()}] render #${this.renderCount}`, {
-                    id: this.id(),
-                    type: this.type(),
-                    disabled: this.disabled(),
-                    routerLink: this.routerLink(),
-                });
+                this.logFullState();
+            });
+            // Efecto específico para validaciones
+            effect(() => {
+                if (!this.debug())
+                    return;
+                const visible = this.visible();
+                const validations = {
+                    global: this.passesGlobalVisibilityPolicy(),
+                    parameter: this.passesParameterValidation(),
+                    id: this.passesIdValidation(),
+                    visible,
+                };
+                const stateKey = JSON.stringify(validations);
+                if (stateKey !== this.lastValidationState) {
+                    this.lastValidationState = stateKey;
+                    this.logValidationIssues(validations);
+                }
+            });
+            // Efecto para detectar problemas con IDs
+            effect(() => {
+                if (!this.debug())
+                    return;
+                const type = this.type();
+                if (TYPES_REQUIRING_ID.includes(type)) {
+                    const id = this.getNormalizedId();
+                    const routeId = this.getIdFromNavigationTarget(this.effectiveRouterLink());
+                    if (!id && !routeId) {
+                        console.warn(`%c⚠️ [dsx-button:${type}] ID no disponible para acción que lo requiere`, 'color:#ed6c02;font-weight:bold', {
+                            type,
+                            explicitId: this.id(),
+                            routeId,
+                            requireIdInput: this.requireIdInput(),
+                        });
+                    }
+                }
             });
         }
     }
@@ -4357,17 +4391,7 @@ class DsxButtonComponent {
     type = input(ACTION_TYPES.hardDelete, ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
     routerLink = input(undefined, ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
-    /**
-     * Ruta de navegación simplificada. La `/` inicial se agrega automáticamente.
-     * Cada segmento solo admite: letras, números, `-`, `_`, `.` y `:` (params de ruta).
-     * Ejemplos válidos:   `'home'`, `'container/nuevo'`, `'item/123'`
-     * Ejemplos inválidos: `'item/*'`, `'item?foo=bar'`, `'item/../other'`
-     * Para rutas dinámicas complejas usa `[routerLink]` directamente.
-     */
     routerPath = input(undefined, ...(ngDevMode ? [{ debugName: "routerPath" }] : /* istanbul ignore next */ []));
-    /** Ancho del botón. Usa `rem` para que escale con la preferencia de fuente del usuario.
-     *  Ejemplo: `'8rem'`, `'12rem'`. Valor por defecto: `'9rem'`.
-     */
     width = input('9rem', ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
     iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
     iconOnlyWidth = input('2.5rem', ...(ngDevMode ? [{ debugName: "iconOnlyWidth" }] : /* istanbul ignore next */ []));
@@ -4383,24 +4407,12 @@ class DsxButtonComponent {
     tooltipOverride = input(undefined, ...(ngDevMode ? [{ debugName: "tooltipOverride" }] : /* istanbul ignore next */ []));
     iconOverride = input(undefined, ...(ngDevMode ? [{ debugName: "iconOverride" }] : /* istanbul ignore next */ []));
     primeIconOverride = input(undefined, ...(ngDevMode ? [{ debugName: "primeIconOverride" }] : /* istanbul ignore next */ []));
-    /** Permite personalizar el color usando únicamente tokens de la paleta DSX. */
     colorOverride = input(undefined, ...(ngDevMode ? [{ debugName: "colorOverride" }] : /* istanbul ignore next */ []));
-    /** Permite forzar estilo outlined o sólido por instancia. */
     outlinedOverride = input(undefined, ...(ngDevMode ? [{ debugName: "outlinedOverride" }] : /* istanbul ignore next */ []));
-    /**
-     * Override por instancia para el botón `validate`.
-     * Tiene prioridad sobre `environment.showValidateButton`.
-     */
     showValidateButtonOverride = input(undefined, ...(ngDevMode ? [{ debugName: "showValidateButtonOverride" }] : /* istanbul ignore next */ []));
-    /**
-     * Override por instancia para el botón `restore`.
-     * Tiene prioridad sobre `environment.showRestoreButton`.
-     */
     showRestoreButtonOverride = input(undefined, ...(ngDevMode ? [{ debugName: "showRestoreButtonOverride" }] : /* istanbul ignore next */ []));
     action = output();
-    /** Valida y normaliza `routerPath`: agrega `/` inicial y rechaza caracteres inválidos. */
     resolvedRouterLink = computed(() => {
-        this.log('computed resolvedRouterLink');
         const raw = this.routerPath();
         if (!raw)
             return undefined;
@@ -4409,23 +4421,22 @@ class DsxButtonComponent {
         const rawSegments = normalizedRaw.split('/');
         const hasEmptySegments = normalizedRaw.length > 0 && rawSegments.some((s) => s.length === 0);
         if (hasEmptySegments) {
-            console.warn(`[dsx-button] routerPath contiene segmentos vacíos ("//" o "/" al final). ` +
-                `Ruta recibida: "${raw}"`);
+            if (this._isDev && this.debug()) {
+                console.warn(`[dsx-button] routerPath contiene segmentos vacíos: "${raw}"`);
+            }
             return undefined;
         }
         const segments = rawSegments.filter(Boolean);
         const invalid = segments.filter((s) => !VALID_SEGMENT.test(s));
         if (invalid.length > 0) {
-            console.warn(`[dsx-button] routerPath contiene segmentos inválidos: "${invalid.join('", "')}". ` +
-                `Solo se permiten letras, números, guion (-), guion bajo (_), punto (.) y dos puntos (:). ` +
-                `Ruta recibida: "${raw}"`);
+            if (this._isDev && this.debug()) {
+                console.warn(`[dsx-button] routerPath contiene segmentos inválidos: "${invalid.join('", "')}"`);
+            }
             return undefined;
         }
         return `/${segments.join('/')}`;
     }, ...(ngDevMode ? [{ debugName: "resolvedRouterLink" }] : /* istanbul ignore next */ []));
-    /** Prioriza routerPath (validado) sobre routerLink (libre). */
     effectiveRouterLink = computed(() => {
-        this.log('computed effectiveRouterLink');
         const resolvedPath = this.resolvedRouterLink();
         if (resolvedPath) {
             return resolvedPath;
@@ -4438,7 +4449,6 @@ class DsxButtonComponent {
         if (!trimmed) {
             return link;
         }
-        // URLs externas no se normalizan ni validan como rutas internas.
         if (/^[a-zA-Z][a-zA-Z0-9+.-]*:\/\//.test(trimmed)) {
             return link;
         }
@@ -4448,20 +4458,20 @@ class DsxButtonComponent {
         const hasEmptySegments = pathForValidation.length > 0 &&
             rawSegments.some((segment) => segment.length === 0);
         if (hasEmptySegments) {
-            console.warn(`[dsx-button] routerLink contiene segmentos vacíos ("//" o "/" al final). ` +
-                `Ruta recibida: "${link}"`);
+            if (this._isDev && this.debug()) {
+                console.warn(`[dsx-button] routerLink contiene segmentos vacíos: "${link}"`);
+            }
             return link;
         }
         const invalid = rawSegments
             .filter(Boolean)
             .filter((segment) => !VALID_SEGMENT.test(segment));
         if (invalid.length > 0) {
-            console.warn(`[dsx-button] routerLink contiene segmentos inválidos: "${invalid.join('", "')}". ` +
-                `Solo se permiten letras, números, guion (-), guion bajo (_), punto (.) y dos puntos (:). ` +
-                `Ruta recibida: "${link}"`);
+            if (this._isDev && this.debug()) {
+                console.warn(`[dsx-button] routerLink contiene segmentos inválidos: "${invalid.join('", "')}"`);
+            }
             return link;
         }
-        // Si llega una ruta simple sin prefijo, se normaliza a absoluta para evitar navegación relativa inesperada.
         if (link.startsWith('/') ||
             link.startsWith('./') ||
             link.startsWith('../')) {
@@ -4472,23 +4482,6 @@ class DsxButtonComponent {
         }
         return `/${trimmed.split('/').filter(Boolean).join('/')}`;
     }, ...(ngDevMode ? [{ debugName: "effectiveRouterLink" }] : /* istanbul ignore next */ []));
-    // get buttonStyle(): Record<string, string> {
-    //   this.log('getter buttonStyle');
-    //   const color = DSX_PALETTE[this.config.colorToken];
-    //   const width = this.iconOnly() ? this.iconOnlyWidth() : this.width();
-    //   if (this.isCompactIconButton) {
-    //     return {
-    //       width,
-    //       background: 'transparent',
-    //       borderColor: 'transparent',
-    //       color,
-    //     };
-    //   }
-    //   if (this.config.outlined) {
-    //     return { width, background: 'transparent', borderColor: color, color };
-    //   }
-    //   return { width, background: color, borderColor: color, color: '#ffffff' };
-    // }
     buttonStyleComputed = computed(() => {
         const color = DSX_PALETTE[this.config.colorToken];
         const width = this.iconOnly() ? this.iconOnlyWidth() : this.width();
@@ -4518,17 +4511,13 @@ class DsxButtonComponent {
     get buttonLabel() {
         return this.iconOnly() ? undefined : this.label;
     }
-    // Y modifica el getter buttonSize
     get buttonSize() {
-        // Si el usuario especificó un tamaño, úsalo
         if (this.size()) {
             return this.size();
         }
-        // Si es compacto, siempre small
         if (this.isCompactIconButton) {
             return 'small';
         }
-        // Por defecto, small para todos los botones
         return 'small';
     }
     get buttonStyleClass() {
@@ -4541,7 +4530,6 @@ class DsxButtonComponent {
         const cfg = ACTION_CONFIG[this.type()];
         const colorOverride = this.colorOverride();
         const outlinedOverride = this.outlinedOverride();
-        // Ya no se gestiona softDelete/return como modo, cada acción es independiente
         return {
             ...cfg,
             colorToken: colorOverride ?? cfg.colorToken,
@@ -4551,10 +4539,6 @@ class DsxButtonComponent {
     get label() {
         return this.labelOverride() ?? this.config.label;
     }
-    // get tooltip(): string {
-    //   this.log('getter tooltip');
-    //   return this.tooltipOverride() ?? this.config.tooltip;
-    // }
     tooltip = computed(() => {
         return this.tooltipOverride() ?? this.config.tooltip;
     }, ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
@@ -4570,18 +4554,6 @@ class DsxButtonComponent {
         }
         return 'primeIcon' in this.config ? this.config.primeIcon : undefined;
     }
-    // showButton(): boolean {
-    //   this.time('showButton');
-    //   const result =
-    //     this.passesGlobalVisibilityPolicy() &&
-    //     this.passesParameterValidation() &&
-    //     this.passesIdValidation();
-    //   this.log('showButton()', {
-    //     result,
-    //   });
-    //   this.timeEnd('showButton');
-    //   return result;
-    // }
     visible = computed(() => {
         return (this.passesGlobalVisibilityPolicy() &&
             this.passesParameterValidation() &&
@@ -4606,45 +4578,44 @@ class DsxButtonComponent {
         return true;
     }
     async onButtonClick() {
-        this.log('click', {
-            id: this.id(),
-            target: this.effectiveRouterLink(),
-        });
+        if (this._isDev && this.debug()) {
+            console.group(`%c🖱️ [dsx-button:${this.type()}] Click`, 'color:#1976d2;font-weight:bold;font-size:13px');
+            console.log('ID:', this.id());
+            console.log('Target:', this.effectiveRouterLink());
+            console.log('Disabled:', this.disabled());
+            console.groupEnd();
+        }
         this.action.emit();
         const target = this.effectiveRouterLink();
         if (target == null) {
-            if (this.type() === 'home') {
-                console.warn('[dsx-button] El botón tipo "home" no tiene routerLink ni routerPath configurado.');
+            if (this.type() === 'home' && this._isDev && this.debug()) {
+                console.warn(`[dsx-button:${this.type()}] No tiene routerLink ni routerPath configurado.`);
             }
             return;
         }
         try {
             const start = performance.now();
             const navigated = await this.navigateToTarget(target);
-            this.log('navigation', {
-                target,
-                navigated,
-                durationMs: Math.round(performance.now() - start),
-            });
+            const duration = Math.round(performance.now() - start);
+            if (this._isDev && this.debug()) {
+                const emoji = navigated ? '✅' : '⚠️';
+                const color = navigated ? '#2e7d32' : '#ed6c02';
+                console.log(`%c${emoji} Navegación ${navigated ? 'exitosa' : 'rechazada'} (${duration}ms)`, `color:${color};font-weight:bold`, target);
+            }
             if (!navigated) {
-                // El router rechazó la navegación, lo más común durante hot-reload
-                // es que un guard de autenticación aún no tiene el estado listo.
-                // Se reintenta una vez tras un tick para darle tiempo al guard.
                 const retried = await new Promise((resolve) => setTimeout(async () => resolve(await this.navigateToTarget(target)), 0));
-                if (!retried) {
-                    console.warn('[dsx-button] Navegación rechazada (posiblemente por un route guard). ' +
-                        'Si ocurre solo tras hot-reload, es normal que el guard rechace ' +
-                        'la primera navegación mientras los servicios de autenticación ' +
-                        'no han terminado de restaurar su estado.', target);
+                if (!retried && this._isDev && this.debug()) {
+                    console.warn(`[dsx-button:${this.type()}] Navegación rechazada por route guard.`, target);
                 }
             }
         }
         catch (error) {
-            console.warn('[dsx-button] Error al navegar desde el botón.', target, error);
+            if (this._isDev && this.debug()) {
+                console.error(`[dsx-button:${this.type()}] Error al navegar:`, target, error);
+            }
         }
     }
     passesIdValidation() {
-        this.log('passesIdValidation');
         const explicitId = this.getNormalizedId();
         const routeId = this.getIdFromNavigationTarget(this.effectiveRouterLink());
         const id = explicitId ?? routeId;
@@ -4653,7 +4624,6 @@ class DsxButtonComponent {
             this.type() === 'softDelete' ||
             this.type() === 'restore' ||
             this.type() === 'return';
-        // Permite exigir que venga [id] cuando el caso de uso lo requiera.
         if (this.requireIdInput() && typeof id !== 'number') {
             return false;
         }
@@ -4713,16 +4683,6 @@ class DsxButtonComponent {
         }
         return undefined;
     }
-    hasExplicitIdInput() {
-        const value = this.id();
-        if (value === null || value === undefined) {
-            return false;
-        }
-        if (typeof value === 'string') {
-            return value.trim() !== '';
-        }
-        return true;
-    }
     navigateToTarget(target) {
         if (Array.isArray(target)) {
             return this._router.navigate(target);
@@ -4734,41 +4694,154 @@ class DsxButtonComponent {
         return this._router.navigateByUrl(target);
     }
     passesParameterValidation() {
-        this.log('passesParameterValidation');
         const parameterName = this.parameterName();
-        // Si no se define un parámetro de seguridad, el botón se muestra sin restricción.
         if (!parameterName) {
             return true;
         }
-        // Mantiene una UX estable durante refresh de parámetros: evita parpadeo
-        // y no evalúa permisos hasta que ParameterValuesService termine de cargar.
         if (!this._paramService.loaded) {
             return false;
         }
-        // Conserva el comportamiento original del servicio:
-        // - retorna false si no cumple el valor esperado
-        // - alerta si el parámetro no existe (ayuda a detectar typos)
         return this._paramService.isParameterValue(parameterName, this.parameterExpectedValue(), this.parameterIndex());
     }
-    log(message, data) {
-        if (!this.debug())
+    // ============ MÉTODOS DE DEBUG ============
+    logFullState() {
+        if (!this._isDev || !this.debug())
             return;
-        console.log(`%c[dsx-button:${this.type()}] ${message}`, 'color:#1976d2;font-weight:bold', data ?? '');
+        const id = this.getNormalizedId();
+        const routeId = this.getIdFromNavigationTarget(this.effectiveRouterLink());
+        const paramName = this.parameterName();
+        const paramLoaded = this._paramService.loaded;
+        const paramValue = paramName && paramLoaded
+            ? this._paramService.getValue(paramName, this.parameterIndex())
+            : undefined;
+        console.group(`%c📊 [dsx-button:${this.type()}] Render #${this.renderCount}`, 'color:#1976d2;font-weight:bold;font-size:14px');
+        // 1. Estado general
+        console.log('🎯 Estado:', {
+            visible: this.visible(),
+            disabled: this.disabled(),
+            type: this.type(),
+            size: this.size(),
+            iconOnly: this.iconOnly(),
+            rounded: this.rounded(),
+            isCompact: this.isCompactIconButton,
+        });
+        // 2. Configuración
+        console.log('⚙️ Configuración:', {
+            label: this.label,
+            icon: this.icon,
+            primeIcon: this.primeIcon,
+            colorToken: this.config.colorToken,
+            outlined: this.config.outlined,
+            tooltip: this.tooltip(),
+        });
+        // 3. Router
+        console.log('🔗 Router:', {
+            routerLink: this.routerLink(),
+            routerPath: this.routerPath(),
+            resolvedRouterLink: this.resolvedRouterLink(),
+            effectiveRouterLink: this.effectiveRouterLink(),
+        });
+        // 4. IDs
+        console.log('🆔 IDs:', {
+            inputId: this.id(),
+            normalizedId: id,
+            routeId: routeId,
+            requireIdInput: this.requireIdInput(),
+            requiresExistingRecord: this.requiresIdGreaterThanZero() ||
+                ['hardDelete', 'softDelete', 'restore', 'return'].includes(this.type()),
+        });
+        // 5. Parámetros
+        if (paramName) {
+            console.log('🔐 Parámetros:', {
+                name: paramName,
+                expected: this.parameterExpectedValue(),
+                index: this.parameterIndex(),
+                loaded: paramLoaded,
+                actual: paramValue,
+                matches: paramLoaded
+                    ? paramValue === this.parameterExpectedValue()
+                    : 'No cargado',
+            });
+        }
+        // 6. Overrides
+        const overrides = {
+            label: this.labelOverride(),
+            tooltip: this.tooltipOverride(),
+            icon: this.iconOverride(),
+            primeIcon: this.primeIconOverride(),
+            color: this.colorOverride(),
+            outlined: this.outlinedOverride(),
+            showValidate: this.showValidateButtonOverride(),
+            showRestore: this.showRestoreButtonOverride(),
+        };
+        const activeOverrides = Object.entries(overrides)
+            .filter(([_, value]) => value !== undefined)
+            .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {});
+        if (Object.keys(activeOverrides).length > 0) {
+            console.log('🔄 Overrides activos:', activeOverrides);
+        }
+        // 7. Validaciones
+        console.log('✅ Validaciones:', {
+            globalVisibility: this.passesGlobalVisibilityPolicy(),
+            parameterValidation: this.passesParameterValidation(),
+            idValidation: this.passesIdValidation(),
+            visible: this.visible(),
+        });
+        // 8. Estilos
+        console.log('🎨 Estilos:', {
+            width: this.iconOnly() ? this.iconOnlyWidth() : this.width(),
+            style: this.buttonStyleComputed(),
+            styleClass: this.buttonStyleClass,
+            size: this.buttonSize,
+        });
+        console.groupEnd();
     }
-    warn(message, data) {
-        if (!this.debug())
+    logValidationIssues(validations) {
+        if (!this._isDev || !this.debug())
             return;
-        console.warn(`[dsx-button:${this.type()}] ${message}`, data ?? '');
+        if (!validations.visible) {
+            console.group(`%c❌ [dsx-button:${this.type()}] NO VISIBLE`, 'color:#d32f2f;font-weight:bold;font-size:13px');
+            console.log('Validaciones fallidas:', {
+                globalVisibility: validations.global,
+                parameterValidation: validations.parameter,
+                idValidation: validations.id,
+            });
+            if (!validations.id) {
+                const id = this.getNormalizedId();
+                const routeId = this.getIdFromNavigationTarget(this.effectiveRouterLink());
+                console.warn('⚠️ Problema con ID:', {
+                    explicitId: this.id(),
+                    normalizedId: id,
+                    routeId: routeId,
+                    requireIdInput: this.requireIdInput(),
+                    requiresExistingRecord: this.requiresIdGreaterThanZero() ||
+                        ['hardDelete', 'softDelete', 'restore', 'return'].includes(this.type()),
+                });
+            }
+            if (!validations.parameter && this.parameterName()) {
+                console.warn('⚠️ Problema con parámetro:', {
+                    name: this.parameterName(),
+                    expected: this.parameterExpectedValue(),
+                    index: this.parameterIndex(),
+                    loaded: this._paramService.loaded,
+                    actualValue: this._paramService.loaded
+                        ? this._paramService.getValue(this.parameterName(), this.parameterIndex())
+                        : 'No cargado',
+                });
+            }
+            console.groupEnd();
+        }
     }
-    time(label) {
-        if (!this.debug())
+    // Métodos de log existentes mejorados
+    log(message, data) {
+        if (!this._isDev || !this.debug())
             return;
-        console.time(`[dsx-button:${this.type()}] ${label}`);
+        console.log(`%c[dsx-button:${this.type()}] ${message}`, 'color:#1976d2;font-weight:bold', data ?? '');
     }
-    timeEnd(label) {
-        if (!this.debug())
+    warn(message, data) {
+        if (!this._isDev || !this.debug())
             return;
-        console.timeEnd(`[dsx-button:${this.type()}] ${label}`);
+        console.warn(`[dsx-button:${this.type()}] ${message}`, data ?? '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxButtonComponent, isStandalone: true, selector: "dsx-button", inputs: { debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, routerPath: { classPropertyName: "routerPath", publicName: "routerPath", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, iconOnlyWidth: { classPropertyName: "iconOnlyWidth", publicName: "iconOnlyWidth", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, parameterName: { classPropertyName: "parameterName", publicName: "parameterName", isSignal: true, isRequired: false, transformFunction: null }, parameterExpectedValue: { classPropertyName: "parameterExpectedValue", publicName: "parameterExpectedValue", isSignal: true, isRequired: false, transformFunction: null }, parameterIndex: { classPropertyName: "parameterIndex", publicName: "parameterIndex", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, requireIdInput: { classPropertyName: "requireIdInput", publicName: "requireIdInput", isSignal: true, isRequired: false, transformFunction: null }, requiresIdGreaterThanZero: { classPropertyName: "requiresIdGreaterThanZero", publicName: "requiresIdGreaterThanZero", isSignal: true, isRequired: false, transformFunction: null }, labelOverride: { classPropertyName: "labelOverride", publicName: "labelOverride", isSignal: true, isRequired: false, transformFunction: null }, tooltipOverride: { classPropertyName: "tooltipOverride", publicName: "tooltipOverride", isSignal: true, isRequired: false, transformFunction: null }, iconOverride: { classPropertyName: "iconOverride", publicName: "iconOverride", isSignal: true, isRequired: false, transformFunction: null }, primeIconOverride: { classPropertyName: "primeIconOverride", publicName: "primeIconOverride", isSignal: true, isRequired: false, transformFunction: null }, colorOverride: { classPropertyName: "colorOverride", publicName: "colorOverride", isSignal: true, isRequired: false, transformFunction: null }, outlinedOverride: { classPropertyName: "outlinedOverride", publicName: "outlinedOverride", isSignal: true, isRequired: false, transformFunction: null }, showValidateButtonOverride: { classPropertyName: "showValidateButtonOverride", publicName: "showValidateButtonOverride", isSignal: true, isRequired: false, transformFunction: null }, showRestoreButtonOverride: { classPropertyName: "showRestoreButtonOverride", publicName: "showRestoreButtonOverride", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { properties: { "class.dsx-button-compact-host": "this.compactHostClass" } }, ngImport: i0, template: "<!--Bot\u00F3n con las configuraciones din\u00E1micas para CRUD -->\r\n@if (visible()) {\r\n<p-button\r\n  [label]=\"buttonLabel\"\r\n  [style]=\"buttonStyleComputed()\"\r\n  [styleClass]=\"buttonStyleClass\"\r\n  [pTooltip]=\"tooltip()\"\r\n  [tooltipDisabled]=\"disabled()\"\r\n  tooltipPosition=\"top\"\r\n  [rounded]=\"rounded()\"\r\n  [text]=\"isCompactIconButton\"\r\n  [size]=\"buttonSize\"\r\n  severity=\"secondary\"\r\n  [disabled]=\"disabled()\"\r\n  [icon]=\"iconOnly() ? primeIcon : undefined\"\r\n  (click)=\"onButtonClick()\"\r\n>\r\n  @if (!iconOnly()) {\r\n  <span class=\"material-symbols-outlined dsx-button-icon-small\"\r\n    >{{ materialIcon }}</span\r\n  >\r\n  }\r\n</p-button>\r\n}\r\n", styles: [".dsx-button-icon-small{font-size:1.25rem;vertical-align:middle}:host{display:inline-flex;margin-bottom:.25rem}:host.dsx-button-compact-host{margin-bottom:0}:host ::ng-deep .p-button.dsx-button-compact{min-height:2rem;padding-block:.2rem}:host ::ng-deep .p-button .material-symbols-outlined.p-button-icon{line-height:1;vertical-align:middle}:host ::ng-deep .p-button.dsx-button-compact .p-button-icon{margin:0;font-size:1.2rem;line-height:1}:host ::ng-deep .p-button.dsx-button-compact .material-symbols-outlined.p-button-icon{font-variation-settings:\"FILL\" 1,\"wght\" 500,\"GRAD\" 0,\"opsz\" 24}:host ::ng-deep .p-button:disabled,:host ::ng-deep .p-button.p-disabled{cursor:not-allowed!important;opacity:.45!important;filter:grayscale(.2) saturate(.75)}:host ::ng-deep .p-button:disabled *,:host ::ng-deep .p-button.p-disabled *{cursor:not-allowed!important}.p-button.dsx-button-outlined-neutral,.p-button.dsx-button-outlined-info{background:#f5f7fa!important;border:1.5px solid #0066cc!important;color:#06c!important}.p-button.dsx-button-outlined-neutral:disabled,.p-button.dsx-button-outlined-info:disabled{background:#f5f7fa!important;border:1.5px solid #b0bec5!important;color:#b0bec5!important}\n"], dependencies: [{ kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i1$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }] });
@@ -4873,7 +4946,7 @@ const ACTION_CONFIG = {
     view: {
         label: 'Visualizar',
         icon: 'visibility',
-        primeIcon: 'pi pi-eye',
+        primeIcon: 'fa-solid fa-eye',
         colorToken: 'view',
         tooltip: 'Vista previa',
     },
@@ -4906,7 +4979,6 @@ class FileComponent {
     existingFileName = input(null, ...(ngDevMode ? [{ debugName: "existingFileName" }] : /* istanbul ignore next */ []));
     overrideFileName = input(null, ...(ngDevMode ? [{ debugName: "overrideFileName" }] : /* istanbul ignore next */ []));
     debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
-    required = input(true, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     accept = input('.xls,.xlsx', ...(ngDevMode ? [{ debugName: "accept" }] : /* istanbul ignore next */ []));
     pTooltipOverride = input('Seleccione un archivo', ...(ngDevMode ? [{ debugName: "pTooltipOverride" }] : /* istanbul ignore next */ []));
     tooltipPositionOverride = input('top', ...(ngDevMode ? [{ debugName: "tooltipPositionOverride" }] : /* istanbul ignore next */ []));
@@ -4918,6 +4990,7 @@ class FileComponent {
     // Signals de estado
     isReplacing = signal(false, ...(ngDevMode ? [{ debugName: "isReplacing" }] : /* istanbul ignore next */ []));
     disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    errorMessage = signal(null, ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     isViewActive = signal(false, ...(ngDevMode ? [{ debugName: "isViewActive" }] : /* istanbul ignore next */ []));
     value = null;
     touched = false;
@@ -4925,7 +4998,31 @@ class FileComponent {
     // Dependencias
     cdr = inject(ChangeDetectorRef);
     fileUpload = viewChild('fileUpload', ...(ngDevMode ? [{ debugName: "fileUpload" }] : /* istanbul ignore next */ []));
-    // Computed properties (solo se "activan" si la vista está activa)
+    // --- Para el manejo de errores del formulario y debug ---
+    _control = null;
+    // Computed para el control de errores
+    errorControl = computed(() => {
+        return this._control;
+    }, ...(ngDevMode ? [{ debugName: "errorControl" }] : /* istanbul ignore next */ []));
+    // Signal para errores del control
+    controlErrors = signal(null, ...(ngDevMode ? [{ debugName: "controlErrors" }] : /* istanbul ignore next */ []));
+    // Estado del control
+    controlValid = signal(true, ...(ngDevMode ? [{ debugName: "controlValid" }] : /* istanbul ignore next */ []));
+    controlTouched = signal(false, ...(ngDevMode ? [{ debugName: "controlTouched" }] : /* istanbul ignore next */ []));
+    controlDirty = signal(false, ...(ngDevMode ? [{ debugName: "controlDirty" }] : /* istanbul ignore next */ []));
+    // --- Detección de modo desarrollo ---
+    get isDevMode() {
+        return (typeof ngDevMode !== 'undefined' &&
+            ngDevMode !== null &&
+            ngDevMode !== false);
+    }
+    // ✅ Método para detectar si el control es requerido
+    isRequired() {
+        if (!this._control)
+            return false;
+        return this._control.errors?.['required'] ?? false;
+    }
+    // Computed properties
     hasExistingFile = computed(() => {
         if (!this.isViewActive())
             return false;
@@ -4961,14 +5058,27 @@ class FileComponent {
             return true;
         return false;
     }, ...(ngDevMode ? [{ debugName: "isReplaceButtonDisabled" }] : /* istanbul ignore next */ []));
-    // --- Constructor: Aquí se crean los effects (contexto de inyección válido) ---
+    allowedFileTypeLabel = computed(() => {
+        if (!this.isViewActive())
+            return 'archivo';
+        const acceptStr = this.accept();
+        if (!acceptStr)
+            return 'archivo';
+        const extensions = acceptStr.split(',').map((ext) => ext.trim());
+        const cleanExtensions = extensions
+            .map((ext) => ext.replace('.', '').toUpperCase())
+            .filter((ext) => ext.length > 0);
+        if (cleanExtensions.length === 0)
+            return 'archivo';
+        if (cleanExtensions.length === 1)
+            return cleanExtensions[0];
+        return cleanExtensions.join(' o ');
+    }, ...(ngDevMode ? [{ debugName: "allowedFileTypeLabel" }] : /* istanbul ignore next */ []));
+    // --- Constructor ---
     constructor() {
-        // Efecto 1: Re-evaluar validación cuando cambie el estado relevante
         effect(() => {
-            // Solo ejecutar si la vista está activa
             if (!this.isViewActive())
                 return;
-            // "Tocar" estas signals para que el efecto dependa de ellas
             const hasFile = this.hasExistingFile();
             const replacing = this.isReplacing();
             const fileName = this.existingFileName();
@@ -4979,14 +5089,12 @@ class FileComponent {
                     fileName,
                 });
             if (this.control) {
-                // Usar untracked para no crear bucles infinitos
                 untracked(() => {
                     this.control?.updateValueAndValidity({ emitEvent: false });
                 });
             }
             this.cdr.detectChanges();
         });
-        // Efecto 2: Cancelar reemplazo si el componente se deshabilita
         effect(() => {
             if (!this.isViewActive())
                 return;
@@ -5000,104 +5108,341 @@ class FileComponent {
         });
     }
     ngAfterViewInit() {
-        // Activar el componente después de que la vista esté lista
         setTimeout(() => {
             this.isViewActive.set(true);
-            if (this.debug())
-                console.log('[FileComponent] View activated');
+            if (this.debug()) {
+                console.log('[FileComponent] ✅ View activated');
+                console.log('[FileComponent] 📋 Configuración actual:', {
+                    accept: this.accept(),
+                    maxFileSize: this.maxFileSize(),
+                    debug: this.debug(),
+                    isDevMode: this.isDevMode,
+                });
+            }
         });
     }
     ngOnDestroy() {
         this.isViewActive.set(false);
         if (this.debug())
-            console.log('[FileComponent] Component destroyed');
+            console.log('[FileComponent] 🗑️ Component destroyed');
+    }
+    // --- Método para validar archivo manualmente ---
+    validateFile(file) {
+        if (this.debug()) {
+            this.log('🔍 validateFile - Iniciando validación manual', {
+                fileName: file.name,
+                fileSize: file.size,
+                fileType: file.type,
+                accept: this.accept(),
+                maxSize: this.maxFileSize(),
+            });
+        }
+        // Validar tipo de archivo
+        const acceptStr = this.accept();
+        if (acceptStr) {
+            const acceptedExtensions = acceptStr
+                .split(',')
+                .map((ext) => ext.trim().toLowerCase());
+            const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
+            if (this.debug()) {
+                this.log('🔍 validateFile - Verificando extensión', {
+                    fileExtension,
+                    acceptedExtensions,
+                    matches: acceptedExtensions.includes(fileExtension),
+                });
+            }
+            if (!acceptedExtensions.includes(fileExtension)) {
+                const detail = this.invalidDetail().replace('{0}', this.allowedFileTypeLabel());
+                const message = `${this.invalidSummary()} ${detail}`;
+                if (this.debug())
+                    this.log('❌ validateFile - Tipo de archivo no permitido', {
+                        message,
+                    });
+                return { valid: false, error: message };
+            }
+        }
+        // Validar tamaño
+        const maxSizeBytes = this.maxFileSize() * 1024 * 1024;
+        if (this.debug()) {
+            this.log('🔍 validateFile - Verificando tamaño', {
+                fileSize: file.size,
+                maxSizeBytes,
+                maxSizeMB: this.maxFileSize(),
+            });
+        }
+        if (file.size > maxSizeBytes) {
+            const detail = this.invalidSizeDetail().replace('{0}', `${this.maxFileSize()} MB`);
+            const message = `${this.invalidSizeSummary()} ${detail}`;
+            if (this.debug())
+                this.log('❌ validateFile - Tamaño excedido', { message });
+            return { valid: false, error: message };
+        }
+        if (this.debug())
+            this.log('✅ validateFile - Archivo válido');
+        return { valid: true };
+    }
+    // --- Métodos para el manejo de errores ---
+    showError() {
+        return !!(this._control && this._control.invalid && this._control.touched);
+    }
+    // Actualizar estado del control
+    updateControlState() {
+        if (this._control) {
+            this.controlValid.set(this._control.valid);
+            this.controlTouched.set(this._control.touched);
+            this.controlDirty.set(this._control.dirty);
+            this.controlErrors.set(this._control.errors);
+        }
     }
-    // --- Métodos públicos y ControlValueAccessor ---
+    // Forzar recarga (para debug)
+    forceReload() {
+        if (this.debug()) {
+            console.log('[FileComponent] 🔄 Force reload');
+            if (this._control) {
+                this._control.updateValueAndValidity();
+                this.updateControlState();
+            }
+            this.cdr.detectChanges();
+        }
+    }
+    // --- Métodos públicos ---
     onSelect(event) {
-        if (!this.isViewActive())
+        const startTime = performance.now();
+        if (this.debug()) {
+            this.log('📤 onSelect - Evento recibido', {
+                files: event.files,
+                currentFiles: event.currentFiles,
+                isFileUploadEnabled: this.isFileUploadEnabled(),
+            });
+        }
+        if (!this.isViewActive()) {
+            if (this.debug())
+                this.log('⚠️ Componente no activo, ignorando selección');
             return;
+        }
         if (!this.isFileUploadEnabled()) {
-            console.warn('File upload is disabled');
+            console.warn('[FileComponent] ⚠️ File upload is disabled');
             this.fileUpload()?.clear();
             return;
         }
         const file = event.files?.[0] ?? null;
-        if (this.debug())
-            this.log('File selected', { name: file?.name });
-        this.value = file;
-        this.onChange(file);
+        if (!file) {
+            if (this.debug())
+                this.log('⚠️ No se seleccionó ningún archivo');
+            return;
+        }
+        if (this.debug()) {
+            this.log('📄 Archivo seleccionado', {
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                sizeFormatted: this.formatFileSize(file.size),
+            });
+        }
+        // Validar archivo manualmente
+        const validation = this.validateFile(file);
+        if (!validation.valid) {
+            // Archivo inválido - mostrar error y limpiar
+            this.errorMessage.set(validation.error || 'Archivo inválido');
+            this.fileUpload()?.clear();
+            this.value = null;
+            this.onChange(null);
+            if (this.debug()) {
+                this.log('❌ Archivo inválido - Limpiando selección', {
+                    error: validation.error,
+                });
+            }
+            // Auto-ocultar error después de 5 segundos
+            setTimeout(() => {
+                this.errorMessage.set(null);
+                if (this.debug())
+                    this.log('⏰ Mensaje de error auto-ocultado después de 5s');
+            }, 5000);
+            // Actualizar estado del control
+            this.updateControlState();
+            return;
+        }
+        // Archivo válido
+        this.errorMessage.set(null);
+        this.value = file;
+        this.onChange(file);
         this.markAsTouched();
         if (this.isReplacing() && file) {
             this.isReplacing.set(false);
+            if (this.debug())
+                this.log('🔄 Reemplazo completado');
         }
         if (this.control) {
             this.control.updateValueAndValidity();
         }
+        // Actualizar estado del control
+        this.updateControlState();
+        const endTime = performance.now();
+        if (this.debug()) {
+            this.log(`⏱️ onSelect completado en ${(endTime - startTime).toFixed(2)}ms`);
+        }
     }
     clear() {
+        if (this.debug())
+            this.log('🧹 clear() - Limpiando componente');
         if (!this.isViewActive())
             return;
         this.fileUpload()?.clear();
         this.value = null;
+        this.errorMessage.set(null);
         this.onChange(null);
         this.markAsTouched();
         if (this.control)
             this.control.updateValueAndValidity();
+        this.updateControlState();
+        if (this.debug())
+            this.log('✅ Limpieza completada');
     }
-    writeValue(value) {
+    clearFile() {
+        if (this.debug())
+            this.log('🧹 clearFile() - Limpiando archivo seleccionado');
         if (!this.isViewActive())
             return;
+        this.fileUpload()?.clear();
+        this.value = null;
+        this.errorMessage.set(null);
+        this.onChange(null);
+        this.markAsTouched();
+        if (this.control)
+            this.control.updateValueAndValidity();
+        this.updateControlState();
         if (this.debug())
-            this.log('writeValue', { value: value?.name || null });
+            this.log('✅ Archivo limpiado');
+    }
+    writeValue(value) {
+        if (!this.isViewActive())
+            return;
+        if (this.debug()) {
+            this.log('✍️ writeValue', {
+                value: value?.name || null,
+                size: value?.size ? this.formatFileSize(value.size) : null,
+            });
+        }
         this.value = value;
     }
     registerOnChange(fn) {
+        if (this.debug())
+            this.log('📝 registerOnChange');
         this.onChange = fn;
     }
     registerOnTouched(fn) {
+        if (this.debug())
+            this.log('📝 registerOnTouched');
         this.onTouched = fn;
     }
     setDisabledState(isDisabled) {
         if (!this.isViewActive())
             return;
+        if (this.debug()) {
+            this.log('🔒 setDisabledState', {
+                isDisabled,
+                previousState: this.disabled(),
+            });
+        }
         this.disabled.set(isDisabled);
     }
     startReplace() {
+        if (this.debug())
+            this.log('🔄 startReplace - Iniciando reemplazo');
         if (!this.isViewActive())
             return;
-        if (this.disabled())
+        if (this.disabled()) {
+            if (this.debug())
+                this.log('⛔ Reemplazo cancelado - componente deshabilitado');
             return;
+        }
         this.fileUpload()?.clear();
         this.value = null;
+        this.errorMessage.set(null);
         this.onChange(null);
         this.isReplacing.set(true);
         if (this.debug())
-            this.log('startReplace');
+            this.log('✅ Reemplazo iniciado');
     }
     cancelReplace() {
+        if (this.debug())
+            this.log('❌ cancelReplace - Cancelando reemplazo');
         if (!this.isViewActive())
             return;
         this.isReplacing.set(false);
         this.fileUpload()?.clear();
         this.value = null;
+        this.errorMessage.set(null);
         this.onChange(null);
         this.markAsTouched();
         if (this.debug())
-            this.log('cancelReplace');
+            this.log('✅ Reemplazo cancelado');
+    }
+    choose(event, chooseCallback) {
+        if (this.debug())
+            this.log('🔍 choose - Abriendo selector de archivos');
+        chooseCallback();
+    }
+    formatFileSize(bytes) {
+        if (!bytes)
+            return '';
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        const value = (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0);
+        return `${value} ${sizes[i]}`;
     }
     // --- Validación ---
     validate(control) {
+        const startTime = performance.now();
+        this._control = control;
         this.control = control;
-        if (!this.isViewActive())
+        if (!this.isViewActive()) {
+            if (this.debug())
+                this.log('⚠️ validate - Componente no activo');
             return null;
-        if (!this.required())
+        }
+        if (this.debug()) {
+            this.log('🔍 validate - Ejecutando validación', {
+                isRequired: this.isRequired(),
+                hasExistingFile: this.hasExistingFile(),
+                isReplacing: this.isReplacing(),
+                hasValue: !!this.value,
+                valueName: this.value?.name || null,
+                errorMessage: this.errorMessage(),
+            });
+        }
+        // Actualizar estado del control
+        this.updateControlState();
+        // Si hay un mensaje de error, consideramos que la validación falla
+        if (this.errorMessage()) {
+            if (this.debug())
+                this.log('❌ validate - Error: Hay un mensaje de error activo');
+            return { invalidFile: true };
+        }
+        if (!this.isRequired()) {
+            if (this.debug())
+                this.log('✅ validate - No requerido, pasa validación');
             return null;
-        if (this.hasExistingFile())
+        }
+        if (this.hasExistingFile()) {
+            if (this.debug())
+                this.log('✅ validate - Archivo existente, pasa validación');
             return null;
-        if (this.isReplacing() && !this.value)
+        }
+        if (this.isReplacing() && !this.value) {
+            if (this.debug())
+                this.log('❌ validate - Error: Reemplazando pero sin archivo');
             return { required: true };
-        if (!this.hasExistingFile() && !this.value)
+        }
+        if (!this.hasExistingFile() && !this.value) {
+            if (this.debug())
+                this.log('❌ validate - Error: Sin archivo seleccionado');
             return { required: true };
+        }
+        const endTime = performance.now();
+        if (this.debug()) {
+            this.log(`✅ validate - Validación exitosa en ${(endTime - startTime).toFixed(2)}ms`);
+        }
         return null;
     }
     // --- Privados ---
@@ -5107,13 +5452,15 @@ class FileComponent {
         if (!this.touched) {
             this.touched = true;
             this.onTouched();
+            if (this.debug())
+                this.log('👆 markAsTouched - Componente marcado como touched');
         }
     }
     log(method, data) {
         console.log(`[FileComponent] ${method}`, data || '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FileComponent, isStandalone: true, selector: "dsx-file-upload", inputs: { existingFile: { classPropertyName: "existingFile", publicName: "existingFile", isSignal: true, isRequired: false, transformFunction: null }, existingFileName: { classPropertyName: "existingFileName", publicName: "existingFileName", isSignal: true, isRequired: false, transformFunction: null }, overrideFileName: { classPropertyName: "overrideFileName", publicName: "overrideFileName", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, pTooltipOverride: { classPropertyName: "pTooltipOverride", publicName: "pTooltipOverride", isSignal: true, isRequired: false, transformFunction: null }, tooltipPositionOverride: { classPropertyName: "tooltipPositionOverride", publicName: "tooltipPositionOverride", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, invalidSummary: { classPropertyName: "invalidSummary", publicName: "invalidSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidDetail: { classPropertyName: "invalidDetail", publicName: "invalidDetail", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeSummary: { classPropertyName: "invalidSizeSummary", publicName: "invalidSizeSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeDetail: { classPropertyName: "invalidSizeDetail", publicName: "invalidSizeDetail", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FileComponent, isStandalone: true, selector: "dsx-file-upload", inputs: { existingFile: { classPropertyName: "existingFile", publicName: "existingFile", isSignal: true, isRequired: false, transformFunction: null }, existingFileName: { classPropertyName: "existingFileName", publicName: "existingFileName", isSignal: true, isRequired: false, transformFunction: null }, overrideFileName: { classPropertyName: "overrideFileName", publicName: "overrideFileName", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, accept: { classPropertyName: "accept", publicName: "accept", isSignal: true, isRequired: false, transformFunction: null }, pTooltipOverride: { classPropertyName: "pTooltipOverride", publicName: "pTooltipOverride", isSignal: true, isRequired: false, transformFunction: null }, tooltipPositionOverride: { classPropertyName: "tooltipPositionOverride", publicName: "tooltipPositionOverride", isSignal: true, isRequired: false, transformFunction: null }, maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null }, invalidSummary: { classPropertyName: "invalidSummary", publicName: "invalidSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidDetail: { classPropertyName: "invalidDetail", publicName: "invalidDetail", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeSummary: { classPropertyName: "invalidSizeSummary", publicName: "invalidSizeSummary", isSignal: true, isRequired: false, transformFunction: null }, invalidSizeDetail: { classPropertyName: "invalidSizeDetail", publicName: "invalidSizeDetail", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FileComponent),
@@ -5124,11 +5471,11 @@ class FileComponent {
                 useExisting: forwardRef(() => FileComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex items-center gap-2\">\r\n    <p-fileUpload\r\n      #fileUpload\r\n      mode=\"basic\"\r\n      [accept]=\"accept()\"\r\n      [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n      [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n      [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n      [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n      [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n      (onSelect)=\"onSelect($event)\"\r\n      [disabled]=\"!isFileUploadEnabled()\"\r\n      [pTooltip]=\"pTooltipOverride()\"\r\n      [tooltipPosition]=\"tooltipPositionOverride()\"\r\n    />\r\n\r\n    @if (isReplacing() || existingFile()) {\r\n      <p-button\r\n        icon=\"pi pi-times\"\r\n        [rounded]=\"true\"\r\n        severity=\"secondary\"\r\n        (click)=\"cancelReplace()\"\r\n        [disabled]=\"disabled()\"\r\n        pTooltip=\"Cancelar reemplazo\"\r\n        tooltipPosition=\"top\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }] });
+        ], viewQueries: [{ propertyName: "fileUpload", first: true, predicate: ["fileUpload"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex flex-col gap-1\">\r\n    <div class=\"flex items-center gap-2\">\r\n      <p-fileUpload\r\n        fluid\r\n        #fileUpload\r\n        chooseIcon=\"fa-solid fa-file-arrow-up\"\r\n        [accept]=\"accept()\"\r\n        [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n        [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n        [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n        [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n        [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n        (onSelect)=\"onSelect($event)\"\r\n        [disabled]=\"!isFileUploadEnabled()\"\r\n        [pTooltip]=\"`${pTooltipOverride()} ${allowedFileTypeLabel()}`\"\r\n        [tooltipPosition]=\"tooltipPositionOverride()\"\r\n      >\r\n        <ng-template\r\n          #header\r\n          let-files\r\n          let-chooseCallback=\"chooseCallback\"\r\n          let-clearCallback=\"clearCallback\"\r\n        >\r\n          <!-- Mostrar el bot\u00F3n de upload SOLO si NO hay archivo seleccionado -->\r\n          @if (!files || files.length === 0) {\r\n            <p-button\r\n              (onClick)=\"choose($event, chooseCallback)\"\r\n              icon=\"fa-solid fa-cloud-arrow-up\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n            />\r\n          }\r\n\r\n          <span class=\"file-upload-placeholder\">\r\n            <i class=\"fa-regular fa-file-lines placeholder-icon\"></i>\r\n            <span class=\"placeholder-text\">\r\n              @if (files && files.length > 0) {\r\n                <span class=\"file-selected\">\r\n                  <i class=\"fa-regular fa-file-pdf file-icon\"></i>\r\n                  {{ files[0]?.name }}\r\n                  <span class=\"file-size\"\r\n                    >({{ formatFileSize(files[0]?.size) }})</span\r\n                  >\r\n                </span>\r\n              } @else if (allowedFileTypeLabel() !== \"archivo\") {\r\n                <span class=\"empty-warning\">Ning\u00FAn</span>\r\n                <span class=\"file-type empty-warning-type\">{{\r\n                  allowedFileTypeLabel()\r\n                }}</span>\r\n                <span class=\"empty-warning\">seleccionado</span>\r\n              } @else {\r\n                <span class=\"empty-warning\">Ning\u00FAn archivo seleccionado</span>\r\n              }\r\n            </span>\r\n          </span>\r\n\r\n          <!-- Mostrar bot\u00F3n de limpiar SOLO si hay archivo seleccionado -->\r\n          @if (files && files.length > 0) {\r\n            <p-button\r\n              icon=\"fa-solid fa-xmark\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              (onClick)=\"clearFile()\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n              styleClass=\"clear-button\"\r\n            />\r\n          }\r\n        </ng-template>\r\n        <!-- Ocultar la vista previa por defecto -->\r\n        <ng-template #content></ng-template>\r\n        <ng-template #file></ng-template>\r\n      </p-fileUpload>\r\n\r\n      @if (isReplacing() || existingFile()) {\r\n        <p-button\r\n          icon=\"pi pi-times\"\r\n          [rounded]=\"true\"\r\n          severity=\"secondary\"\r\n          (click)=\"cancelReplace()\"\r\n          [disabled]=\"disabled()\"\r\n          pTooltip=\"Cancelar reemplazo\"\r\n          tooltipPosition=\"top\"\r\n        />\r\n      }\r\n    </div>\r\n\r\n    <!-- Mensajes de error (validaci\u00F3n de PrimeNG) -->\r\n    @if (errorMessage()) {\r\n      <div class=\"file-error-message\">\r\n        <i class=\"pi pi-exclamation-circle\"></i>\r\n        {{ errorMessage() }}\r\n      </div>\r\n    }\r\n\r\n    <!-- Mensaje de error del formulario (dsx-message-error) -->\r\n    @if (showError() && errorControl()) {\r\n      <dsx-message-error [control]=\"errorControl()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n  <div class=\"debug-panel\">\r\n    <div class=\"debug-header\">\r\n      <div class=\"debug-info\">\r\n        <strong>\uD83D\uDD0D Debug File Upload:</strong>\r\n        <span class=\"debug-item\"\r\n          >Archivo: {{ value ? value.name : \"Ninguno\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Tama\u00F1o: {{ value ? formatFileSize(value.size) : \"-\" }}</span\r\n        >\r\n        <span class=\"debug-item\">Tipo: {{ value ? value.type : \"-\" }}</span>\r\n        <span\r\n          class=\"debug-item\"\r\n          [style.color]=\"controlValid() ? '#10b981' : '#ef4444'\"\r\n        >\r\n          {{ controlValid() ? \"\u2705 V\u00E1lido\" : \"\u274C Inv\u00E1lido\" }}\r\n        </span>\r\n        <!-- Cambiar esta l\u00EDnea en el panel de debug -->\r\n        <span class=\"debug-item\"\r\n          >Required: {{ isRequired() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Reemplazando: {{ isReplacing() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n      </div>\r\n      <div class=\"debug-actions\">\r\n        <button (click)=\"forceReload()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDD04 Recargar\r\n        </button>\r\n        <button (click)=\"clearFile()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83E\uDDF9 Limpiar\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if (errorMessage()) {\r\n      <div class=\"debug-error\">\r\n        <strong>\u26A0\uFE0F Error activo:</strong> {{ errorMessage() }}\r\n      </div>\r\n    }\r\n    @if (controlErrors()) {\r\n      <div class=\"debug-errors\">\r\n        <strong>\u274C Errores del formulario:</strong>\r\n        <pre>{{ controlErrors() | json }}</pre>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}::ng-deep .p-fileupload .p-fileupload-header{display:flex!important;align-items:center!important;gap:.75rem!important;padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{background:transparent!important;border:2px dashed #d1d5db!important;border-radius:8px!important;padding:.5rem 1rem!important;margin:.5rem!important;min-height:40px!important;min-width:40px!important;transition:all .25s ease!important;color:#6b7280!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:not(:disabled):hover{border-color:#3b82f6!important;background:#eff6ff!important;box-shadow:0 0 0 3px #3b82f61a!important;color:#3b82f6!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:#e5e7eb!important;color:#9ca3af!important}::ng-deep .p-fileupload .p-fileupload-header .p-button .p-button-icon{font-size:1.2rem!important;transition:color .25s ease!important}.file-upload-placeholder{display:flex;align-items:center;gap:.75rem;pointer-events:none;white-space:nowrap;padding:0 .5rem}.placeholder-icon{font-size:1.35rem;color:#94a3b8;transition:all .3s ease}.placeholder-text{color:#94a3b8;font-size:.875rem;font-weight:400;transition:all .3s ease;letter-spacing:.01em}.placeholder-text .file-type{color:#64748b;font-size:.8rem;font-weight:600;transition:all .3s ease;letter-spacing:.03em;text-transform:uppercase;background:#f1f5f9;padding:.1rem .4rem;border-radius:4px;margin:0 .1rem}.placeholder-text .empty-warning{color:#d97706;font-weight:500;transition:color .3s ease}.placeholder-text .file-type.empty-warning-type{color:#b45309;background:#fef3c7;font-weight:600}.file-selected{display:flex;align-items:center;gap:.5rem;color:#1f2937;font-weight:500;font-size:.85rem}.file-selected .file-icon{font-size:1.2rem;color:#bb1589}.file-selected .file-size{color:#9ca3af;font-weight:400;font-size:.75rem;margin-left:.25rem}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-icon{color:#3b82f6}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text{color:#1f2937}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text .empty-warning{color:#2563eb}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type.empty-warning-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-buttonbar{display:none!important}::ng-deep .p-fileupload .p-fileupload-content{padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-button.clear-button{background:transparent!important;border:none!important;border-radius:8px!important;padding:.5rem!important;min-width:40px!important;height:40px!important;transition:all .25s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}::ng-deep .p-fileupload .p-fileupload-header .p-button.clear-button:not(:disabled):hover{background:none!important;border:none!important;box-shadow:none!important;transform:scale(1.05)!important}::ng-deep .p-button.clear-button .p-button-icon{color:#6b7280!important;font-size:1.1rem!important;transition:all .25s ease!important}::ng-deep .p-button.clear-button:not(:disabled):hover .p-button-icon{color:#ef4444!important}::ng-deep .p-button.clear-button:disabled{opacity:.5!important;cursor:not-allowed!important}.file-error-message{display:flex;align-items:center;gap:.5rem;color:#dc2626;font-size:.875rem;font-weight:400;padding:.25rem .75rem;background:#fef2f2;border-radius:6px;border:1px solid #fecaca;animation:slideDown .3s ease}.file-error-message i{font-size:1rem;color:#dc2626;flex-shrink:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.debug-panel{margin-top:8px;font-size:11px;color:#374151;background:#f8fafc;padding:8px 12px;border-radius:6px;font-family:monospace;border:1px solid #e2e8f0;width:100%}.debug-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.debug-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.debug-item{font-size:11px;color:#475569}.debug-item strong{color:#1e293b}.debug-actions{display:flex;gap:6px}.debug-btn{font-size:10px;padding:2px 10px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s ease;color:#475569;font-family:monospace}.debug-btn:hover{background:#f1f5f9;border-color:#94a3b8}.debug-error,.debug-errors{margin-top:6px;padding:4px 8px;background:#fef2f2;border-radius:4px;color:#dc2626;font-size:11px;border:1px solid #fecaca}.debug-errors pre{margin:4px 0 0;font-size:10px;color:#991b1b;white-space:pre-wrap;word-break:break-all}@media(max-width:640px){.placeholder-icon{font-size:1.1rem!important}.placeholder-text{font-size:.75rem!important}.placeholder-text .file-type{font-size:.7rem!important;padding:.05rem .3rem!important}.file-selected{font-size:.75rem!important}.file-selected .file-icon{font-size:1rem!important}.file-selected .file-size{font-size:.65rem!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{padding:.4rem .75rem!important;min-height:34px!important;min-width:34px!important}::ng-deep .p-button.clear-button{min-width:34px!important;height:34px!important}.file-error-message{font-size:.75rem!important;padding:.2rem .5rem!important}.debug-panel{font-size:10px;padding:6px 8px}.debug-item{font-size:10px}.debug-btn{font-size:9px;padding:2px 6px}}\n"], dependencies: [{ kind: "component", type: FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dsx-file-upload', imports: [FileUpload, Tooltip, Button], providers: [
+            args: [{ selector: 'dsx-file-upload', imports: [FileUpload, Tooltip, Button, JsonPipe, AppMessageErrorComponent], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => FileComponent),
@@ -5139,119 +5486,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => FileComponent),
                             multi: true,
                         },
-                    ], template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex items-center gap-2\">\r\n    <p-fileUpload\r\n      #fileUpload\r\n      mode=\"basic\"\r\n      [accept]=\"accept()\"\r\n      [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n      [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n      [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n      [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n      [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n      (onSelect)=\"onSelect($event)\"\r\n      [disabled]=\"!isFileUploadEnabled()\"\r\n      [pTooltip]=\"pTooltipOverride()\"\r\n      [tooltipPosition]=\"tooltipPositionOverride()\"\r\n    />\r\n\r\n    @if (isReplacing() || existingFile()) {\r\n      <p-button\r\n        icon=\"pi pi-times\"\r\n        [rounded]=\"true\"\r\n        severity=\"secondary\"\r\n        (click)=\"cancelReplace()\"\r\n        [disabled]=\"disabled()\"\r\n        pTooltip=\"Cancelar reemplazo\"\r\n        tooltipPosition=\"top\"\r\n      />\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { existingFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFile", required: false }] }], existingFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFileName", required: false }] }], overrideFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "overrideFileName", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], pTooltipOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTooltipOverride", required: false }] }], tooltipPositionOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPositionOverride", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], invalidSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSummary", required: false }] }], invalidDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidDetail", required: false }] }], invalidSizeSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeSummary", required: false }] }], invalidSizeDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeDetail", required: false }] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
-
-class JsonHighlightPipe {
-    /**
-     * Stringifica el JSON manteniendo arrays en una línea para una vista más compacta
-     */
-    compactStringify(obj, indent = 0) {
-        const spaces = ' '.repeat(indent);
-        if (obj === null) {
-            return 'null';
-        }
-        if (typeof obj !== 'object') {
-            if (typeof obj === 'string') {
-                return JSON.stringify(obj);
-            }
-            return String(obj);
-        }
-        if (obj instanceof Date) {
-            return JSON.stringify(obj.toISOString());
-        }
-        if (Array.isArray(obj)) {
-            // Mantener arrays en una línea
-            const items = obj.map((item) => {
-                if (item instanceof Date) {
-                    return JSON.stringify(item.toISOString());
-                }
-                if (typeof item === 'object' && item !== null) {
-                    return this.compactStringify(item, indent);
-                }
-                return typeof item === 'string'
-                    ? JSON.stringify(item)
-                    : item === null
-                        ? 'null'
-                        : String(item);
-            });
-            return `[${items.join(', ')}]`;
-        }
-        // Para objetos, mantener la indentación
-        const keys = Object.keys(obj);
-        if (keys.length === 0) {
-            return '{}';
-        }
-        const innerIndent = indent + 2;
-        const innerSpaces = ' '.repeat(innerIndent);
-        const lines = keys.map((key) => {
-            const value = obj[key];
-            const stringified = value instanceof Date
-                ? JSON.stringify(value.toISOString())
-                : typeof value === 'object' && value !== null
-                    ? this.compactStringify(value, innerIndent)
-                    : typeof value === 'string'
-                        ? JSON.stringify(value)
-                        : value === null
-                            ? 'null'
-                            : String(value);
-            return `${innerSpaces}"${key}": ${stringified}`;
-        });
-        return `{\n${lines.join(',\n')}\n${spaces}}`;
-    }
-    instanceId = Math.random().toString(36).slice(2, 8);
-    executions = 0;
-    transform(value) {
-        if (isDevMode()) {
-            this.executions++;
-            if (this.executions % 10 === 0) {
-                console.log(`[jsonHighlight:${this.instanceId}] ${this.executions}`);
-            }
-        }
-        if (!value) {
-            return '';
-        }
-        const json = this.compactStringify(value);
-        // Detecta fechas ISO: "YYYY-MM-DDTHH:MM:SS.mmmZ"
-        const ISO_DATE_RE = /^"(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2}\.\d{3}Z)"$/;
-        // Aplica estilo y colores para diferenciar claves, valores, booleanos, números, etc.
-        return json
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)/g, (match) => {
-            // Si es una clave (tiene dos puntos al final)
-            if (/:$/.test(match)) {
-                return `<span class="json-key">${match}</span>`;
-            }
-            // Detectar fechas ISO (YYYY-MM-DDTHH:MM:SS.mmmZ)
-            const isoMatch = match.match(ISO_DATE_RE);
-            if (isoMatch) {
-                return `<span class="json-string json-date">"<span class="json-date-part">${isoMatch[1]}</span><span class="json-date-sep">T</span><span class="json-date-time">${isoMatch[2]}</span>"</span>`;
-            }
-            // Si es un string (no tiene dos puntos)
-            return `<span class="json-string">${match}</span>`;
-        })
-            .replace(/\b(true|false|null)\b/g, (match) => {
-            if (match === 'null') {
-                return '<span class="json-null">null</span>';
-            }
-            return `<span class="json-boolean">${match}</span>`;
-        })
-            .replace(/\b(\d+\.?\d*)\b/g, '<span class="json-number">$1</span>')
-            .replace(/[{}\[\]]/g, '<span class="json-bracket">$&</span>')
-            .replace(/,/g, '<span class="json-comma">$&</span>')
-            .replace(/:/g, '<span class="json-colon">$&</span>');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, isStandalone: true, name: "jsonHighlight" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'jsonHighlight',
-                }]
-        }] });
+                    ], template: "@if (showExistingFile() && !existingFile()) {\r\n  <div class=\"flex items-center gap-2\">\r\n    <span class=\"file-name\">\r\n      \uD83D\uDCC4 {{ overrideFileName() ?? existingFileName() }}\r\n    </span>\r\n\r\n    <p-button\r\n      icon=\"pi pi-cloud-upload\"\r\n      [rounded]=\"true\"\r\n      severity=\"info\"\r\n      (click)=\"startReplace()\"\r\n      [disabled]=\"isReplaceButtonDisabled()\"\r\n      pTooltip=\"Reemplazar archivo\"\r\n      tooltipPosition=\"top\"\r\n    />\r\n  </div>\r\n} @else {\r\n  <div class=\"flex flex-col gap-1\">\r\n    <div class=\"flex items-center gap-2\">\r\n      <p-fileUpload\r\n        fluid\r\n        #fileUpload\r\n        chooseIcon=\"fa-solid fa-file-arrow-up\"\r\n        [accept]=\"accept()\"\r\n        [maxFileSize]=\"maxFileSize() * 1024 * 1024\"\r\n        [invalidFileTypeMessageSummary]=\"invalidSummary()\"\r\n        [invalidFileTypeMessageDetail]=\"invalidDetail()\"\r\n        [invalidFileSizeMessageSummary]=\"invalidSizeSummary()\"\r\n        [invalidFileSizeMessageDetail]=\"invalidSizeDetail()\"\r\n        (onSelect)=\"onSelect($event)\"\r\n        [disabled]=\"!isFileUploadEnabled()\"\r\n        [pTooltip]=\"`${pTooltipOverride()} ${allowedFileTypeLabel()}`\"\r\n        [tooltipPosition]=\"tooltipPositionOverride()\"\r\n      >\r\n        <ng-template\r\n          #header\r\n          let-files\r\n          let-chooseCallback=\"chooseCallback\"\r\n          let-clearCallback=\"clearCallback\"\r\n        >\r\n          <!-- Mostrar el bot\u00F3n de upload SOLO si NO hay archivo seleccionado -->\r\n          @if (!files || files.length === 0) {\r\n            <p-button\r\n              (onClick)=\"choose($event, chooseCallback)\"\r\n              icon=\"fa-solid fa-cloud-arrow-up\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n            />\r\n          }\r\n\r\n          <span class=\"file-upload-placeholder\">\r\n            <i class=\"fa-regular fa-file-lines placeholder-icon\"></i>\r\n            <span class=\"placeholder-text\">\r\n              @if (files && files.length > 0) {\r\n                <span class=\"file-selected\">\r\n                  <i class=\"fa-regular fa-file-pdf file-icon\"></i>\r\n                  {{ files[0]?.name }}\r\n                  <span class=\"file-size\"\r\n                    >({{ formatFileSize(files[0]?.size) }})</span\r\n                  >\r\n                </span>\r\n              } @else if (allowedFileTypeLabel() !== \"archivo\") {\r\n                <span class=\"empty-warning\">Ning\u00FAn</span>\r\n                <span class=\"file-type empty-warning-type\">{{\r\n                  allowedFileTypeLabel()\r\n                }}</span>\r\n                <span class=\"empty-warning\">seleccionado</span>\r\n              } @else {\r\n                <span class=\"empty-warning\">Ning\u00FAn archivo seleccionado</span>\r\n              }\r\n            </span>\r\n          </span>\r\n\r\n          <!-- Mostrar bot\u00F3n de limpiar SOLO si hay archivo seleccionado -->\r\n          @if (files && files.length > 0) {\r\n            <p-button\r\n              icon=\"fa-solid fa-xmark\"\r\n              [rounded]=\"true\"\r\n              [outlined]=\"true\"\r\n              (onClick)=\"clearFile()\"\r\n              [disabled]=\"!isFileUploadEnabled()\"\r\n              styleClass=\"clear-button\"\r\n            />\r\n          }\r\n        </ng-template>\r\n        <!-- Ocultar la vista previa por defecto -->\r\n        <ng-template #content></ng-template>\r\n        <ng-template #file></ng-template>\r\n      </p-fileUpload>\r\n\r\n      @if (isReplacing() || existingFile()) {\r\n        <p-button\r\n          icon=\"pi pi-times\"\r\n          [rounded]=\"true\"\r\n          severity=\"secondary\"\r\n          (click)=\"cancelReplace()\"\r\n          [disabled]=\"disabled()\"\r\n          pTooltip=\"Cancelar reemplazo\"\r\n          tooltipPosition=\"top\"\r\n        />\r\n      }\r\n    </div>\r\n\r\n    <!-- Mensajes de error (validaci\u00F3n de PrimeNG) -->\r\n    @if (errorMessage()) {\r\n      <div class=\"file-error-message\">\r\n        <i class=\"pi pi-exclamation-circle\"></i>\r\n        {{ errorMessage() }}\r\n      </div>\r\n    }\r\n\r\n    <!-- Mensaje de error del formulario (dsx-message-error) -->\r\n    @if (showError() && errorControl()) {\r\n      <dsx-message-error [control]=\"errorControl()\" />\r\n    }\r\n  </div>\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n  <div class=\"debug-panel\">\r\n    <div class=\"debug-header\">\r\n      <div class=\"debug-info\">\r\n        <strong>\uD83D\uDD0D Debug File Upload:</strong>\r\n        <span class=\"debug-item\"\r\n          >Archivo: {{ value ? value.name : \"Ninguno\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Tama\u00F1o: {{ value ? formatFileSize(value.size) : \"-\" }}</span\r\n        >\r\n        <span class=\"debug-item\">Tipo: {{ value ? value.type : \"-\" }}</span>\r\n        <span\r\n          class=\"debug-item\"\r\n          [style.color]=\"controlValid() ? '#10b981' : '#ef4444'\"\r\n        >\r\n          {{ controlValid() ? \"\u2705 V\u00E1lido\" : \"\u274C Inv\u00E1lido\" }}\r\n        </span>\r\n        <!-- Cambiar esta l\u00EDnea en el panel de debug -->\r\n        <span class=\"debug-item\"\r\n          >Required: {{ isRequired() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n        <span class=\"debug-item\"\r\n          >Reemplazando: {{ isReplacing() ? \"\u2705\" : \"\u274C\" }}</span\r\n        >\r\n      </div>\r\n      <div class=\"debug-actions\">\r\n        <button (click)=\"forceReload()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83D\uDD04 Recargar\r\n        </button>\r\n        <button (click)=\"clearFile()\" class=\"debug-btn\" type=\"button\">\r\n          \uD83E\uDDF9 Limpiar\r\n        </button>\r\n      </div>\r\n    </div>\r\n    @if (errorMessage()) {\r\n      <div class=\"debug-error\">\r\n        <strong>\u26A0\uFE0F Error activo:</strong> {{ errorMessage() }}\r\n      </div>\r\n    }\r\n    @if (controlErrors()) {\r\n      <div class=\"debug-errors\">\r\n        <strong>\u274C Errores del formulario:</strong>\r\n        <pre>{{ controlErrors() | json }}</pre>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".file-name{display:inline-block;font-size:clamp(.85rem,1vw + .5rem,1.4rem);font-weight:500;color:#2c3e50;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}::ng-deep .p-fileupload .p-fileupload-header{display:flex!important;align-items:center!important;gap:.75rem!important;padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{background:transparent!important;border:2px dashed #d1d5db!important;border-radius:8px!important;padding:.5rem 1rem!important;margin:.5rem!important;min-height:40px!important;min-width:40px!important;transition:all .25s ease!important;color:#6b7280!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:not(:disabled):hover{border-color:#3b82f6!important;background:#eff6ff!important;box-shadow:0 0 0 3px #3b82f61a!important;color:#3b82f6!important}::ng-deep .p-fileupload .p-fileupload-header .p-button:disabled{opacity:.5!important;cursor:not-allowed!important;border-color:#e5e7eb!important;color:#9ca3af!important}::ng-deep .p-fileupload .p-fileupload-header .p-button .p-button-icon{font-size:1.2rem!important;transition:color .25s ease!important}.file-upload-placeholder{display:flex;align-items:center;gap:.75rem;pointer-events:none;white-space:nowrap;padding:0 .5rem}.placeholder-icon{font-size:1.35rem;color:#94a3b8;transition:all .3s ease}.placeholder-text{color:#94a3b8;font-size:.875rem;font-weight:400;transition:all .3s ease;letter-spacing:.01em}.placeholder-text .file-type{color:#64748b;font-size:.8rem;font-weight:600;transition:all .3s ease;letter-spacing:.03em;text-transform:uppercase;background:#f1f5f9;padding:.1rem .4rem;border-radius:4px;margin:0 .1rem}.placeholder-text .empty-warning{color:#d97706;font-weight:500;transition:color .3s ease}.placeholder-text .file-type.empty-warning-type{color:#b45309;background:#fef3c7;font-weight:600}.file-selected{display:flex;align-items:center;gap:.5rem;color:#1f2937;font-weight:500;font-size:.85rem}.file-selected .file-icon{font-size:1.2rem;color:#bb1589}.file-selected .file-size{color:#9ca3af;font-weight:400;font-size:.75rem;margin-left:.25rem}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-icon{color:#3b82f6}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text{color:#1f2937}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .placeholder-text .empty-warning{color:#2563eb}::ng-deep .p-fileupload .p-fileupload-header:has(.p-button:not(:disabled):hover) .file-type.empty-warning-type{color:#2563eb;background:#dbeafe}::ng-deep .p-fileupload .p-fileupload-buttonbar{display:none!important}::ng-deep .p-fileupload .p-fileupload-content{padding:0!important;border:none!important;background:transparent!important}::ng-deep .p-button.clear-button{background:transparent!important;border:none!important;border-radius:8px!important;padding:.5rem!important;min-width:40px!important;height:40px!important;transition:all .25s ease!important;display:flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important}::ng-deep .p-fileupload .p-fileupload-header .p-button.clear-button:not(:disabled):hover{background:none!important;border:none!important;box-shadow:none!important;transform:scale(1.05)!important}::ng-deep .p-button.clear-button .p-button-icon{color:#6b7280!important;font-size:1.1rem!important;transition:all .25s ease!important}::ng-deep .p-button.clear-button:not(:disabled):hover .p-button-icon{color:#ef4444!important}::ng-deep .p-button.clear-button:disabled{opacity:.5!important;cursor:not-allowed!important}.file-error-message{display:flex;align-items:center;gap:.5rem;color:#dc2626;font-size:.875rem;font-weight:400;padding:.25rem .75rem;background:#fef2f2;border-radius:6px;border:1px solid #fecaca;animation:slideDown .3s ease}.file-error-message i{font-size:1rem;color:#dc2626;flex-shrink:0}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.debug-panel{margin-top:8px;font-size:11px;color:#374151;background:#f8fafc;padding:8px 12px;border-radius:6px;font-family:monospace;border:1px solid #e2e8f0;width:100%}.debug-header{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}.debug-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.debug-item{font-size:11px;color:#475569}.debug-item strong{color:#1e293b}.debug-actions{display:flex;gap:6px}.debug-btn{font-size:10px;padding:2px 10px;border-radius:4px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s ease;color:#475569;font-family:monospace}.debug-btn:hover{background:#f1f5f9;border-color:#94a3b8}.debug-error,.debug-errors{margin-top:6px;padding:4px 8px;background:#fef2f2;border-radius:4px;color:#dc2626;font-size:11px;border:1px solid #fecaca}.debug-errors pre{margin:4px 0 0;font-size:10px;color:#991b1b;white-space:pre-wrap;word-break:break-all}@media(max-width:640px){.placeholder-icon{font-size:1.1rem!important}.placeholder-text{font-size:.75rem!important}.placeholder-text .file-type{font-size:.7rem!important;padding:.05rem .3rem!important}.file-selected{font-size:.75rem!important}.file-selected .file-icon{font-size:1rem!important}.file-selected .file-size{font-size:.65rem!important}::ng-deep .p-fileupload .p-fileupload-header .p-button{padding:.4rem .75rem!important;min-height:34px!important;min-width:34px!important}::ng-deep .p-button.clear-button{min-width:34px!important;height:34px!important}.file-error-message{font-size:.75rem!important;padding:.2rem .5rem!important}.debug-panel{font-size:10px;padding:6px 8px}.debug-item{font-size:10px}.debug-btn{font-size:9px;padding:2px 6px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { existingFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFile", required: false }] }], existingFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "existingFileName", required: false }] }], overrideFileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "overrideFileName", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], accept: [{ type: i0.Input, args: [{ isSignal: true, alias: "accept", required: false }] }], pTooltipOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTooltipOverride", required: false }] }], tooltipPositionOverride: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPositionOverride", required: false }] }], maxFileSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFileSize", required: false }] }], invalidSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSummary", required: false }] }], invalidDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidDetail", required: false }] }], invalidSizeSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeSummary", required: false }] }], invalidSizeDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidSizeDetail", required: false }] }], fileUpload: [{ type: i0.ViewChild, args: ['fileUpload', { isSignal: true }] }] } });
 
 function uid() {
     return Math.random().toString(36).substring(2, 8);
@@ -5259,67 +5495,245 @@ function uid() {
 class JsonValuesDebujComponent {
     form = input(null, ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
     debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
+    debounceTime = input(300, ...(ngDevMode ? [{ debugName: "debounceTime" }] : /* istanbul ignore next */ [])); // ✅ Configurable
     debugValue = signal(null, ...(ngDevMode ? [{ debugName: "debugValue" }] : /* istanbul ignore next */ []));
+    serializedValue = signal('', ...(ngDevMode ? [{ debugName: "serializedValue" }] : /* istanbul ignore next */ []));
+    fileInfo = signal(null, ...(ngDevMode ? [{ debugName: "fileInfo" }] : /* istanbul ignore next */ []));
+    isDevModeSignal = computed(() => isDevMode(), ...(ngDevMode ? [{ debugName: "isDevModeSignal" }] : /* istanbul ignore next */ []));
+    isDebugEnabledSignal = computed(() => {
+        const isDev = this.isDevModeSignal();
+        const debug = this.debug();
+        const result = isDev && debug;
+        if (this._lastDebugState !== result) {
+            this._lastDebugState = result;
+            if (result) {
+                console.log(`[JsonDebug:${this.id}] 📝 Logs activados`, {
+                    isDevMode: isDev,
+                    debug: debug,
+                });
+            }
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "isDebugEnabledSignal" }] : /* istanbul ignore next */ []));
+    _lastDebugState = null;
+    _lastVisualState = null;
     id = uid();
     subscription;
     changesCount = 0;
-    // Indica si debemos mostrar el componente visualmente
-    get shouldShowVisual() {
-        // Solo mostrar visualmente en modo desarrollo
-        return isDevMode();
-    }
-    // Indica si debemos mostrar logs en consola
-    get shouldShowLogs() {
-        // Solo logs en desarrollo Y cuando debug está explícitamente true
-        return isDevMode() && this.debug() === true;
-    }
+    isInitialized = false;
+    lastLogTime = 0;
+    shouldShowVisual = computed(() => {
+        const show = this.isDevModeSignal();
+        if (this._lastVisualState !== show) {
+            this._lastVisualState = show;
+            if (this.shouldShowLogs()) {
+                console.log(`[JsonDebug:${this.id}] 👁️ Visual: ${show}`, {
+                    isDevMode: isDevMode(),
+                    reason: show ? 'Modo desarrollo activo' : 'Modo producción',
+                });
+            }
+        }
+        return show;
+    }, ...(ngDevMode ? [{ debugName: "shouldShowVisual" }] : /* istanbul ignore next */ []));
+    shouldShowLogs = computed(() => {
+        const isDev = this.isDevModeSignal();
+        const debug = this.debug();
+        const show = isDev && debug;
+        if (this._lastDebugState !== show) {
+            this._lastDebugState = show;
+            if (show) {
+                console.log(`[JsonDebug:${this.id}] 📝 Logs activados`, {
+                    isDevMode: isDev,
+                    debug: debug,
+                });
+            }
+        }
+        return show;
+    }, ...(ngDevMode ? [{ debugName: "shouldShowLogs" }] : /* istanbul ignore next */ []));
     constructor() {
-        if (this.shouldShowLogs) {
-            console.log('[JsonDebug] CONSTRUCTOR', this.id);
+        if (this.shouldShowLogs()) {
+            console.log(`[JsonDebug:${this.id}] 🏗️ Constructor`, {
+                id: this.id,
+                isDevMode: isDevMode(),
+                debug: this.debug(),
+                debounceTime: this.debounceTime(),
+            });
         }
         effect((onCleanup) => {
             const form = this.form();
-            if (!form)
+            if (!form) {
+                if (this.shouldShowLogs() && this.isInitialized) {
+                    console.log(`[JsonDebug:${this.id}] ⚠️ Formulario eliminado`);
+                }
+                if (this.subscription) {
+                    this.subscription.unsubscribe();
+                    this.subscription = undefined;
+                }
+                this.isInitialized = false;
+                return;
+            }
+            if (this.isInitialized && this.subscription) {
+                if (this.shouldShowLogs()) {
+                    console.log(`[JsonDebug:${this.id}] 🔄 Formulario ya inicializado, saltando...`);
+                }
                 return;
-            if (this.shouldShowLogs) {
-                console.log(`[json-debug:${this.id}] EFFECT INIT`, {
+            }
+            if (this.shouldShowLogs()) {
+                console.log(`[JsonDebug:${this.id}] 🔄 Effect iniciado`, {
                     controls: Object.keys(form.controls).length,
+                    timestamp: new Date().toISOString(),
+                    debounceTime: this.debounceTime(),
+                });
+            }
+            if (this.subscription) {
+                this.subscription.unsubscribe();
+                this.subscription = undefined;
+            }
+            const rawValue = form.getRawValue();
+            this.debugValue.set(rawValue);
+            this.updateSerializedValue(rawValue);
+            this.updateFileInfo(rawValue);
+            if (this.shouldShowLogs()) {
+                console.log(`[JsonDebug:${this.id}] 📊 Procesamiento inicial`, {
+                    hasFile: !!rawValue?.file,
+                    fileType: rawValue?.file ? typeof rawValue.file : 'N/A',
+                    serializedLength: this.serializedValue().length,
                 });
             }
-            this.subscription?.unsubscribe();
-            this.debugValue.set(form.getRawValue());
-            this.subscription = form.valueChanges.subscribe(() => {
-                this.debugValue.set(form.getRawValue());
-                if (this.shouldShowLogs) {
-                    this.changesCount++;
-                    console.log(`[json-debug:${this.id}] CHANGE #${this.changesCount}`, {
-                        formValue: form.getRawValue(),
+            // ✅ Aplicar debounce y distinctUntilChanged para reducir logs
+            this.subscription = form.valueChanges
+                .pipe(debounceTime(this.debounceTime()), // ✅ Esperar 300ms antes de emitir
+            distinctUntilChanged((prev, curr) => {
+                // ✅ Comparar si los valores son iguales
+                return JSON.stringify(prev) === JSON.stringify(curr);
+            }))
+                .subscribe(() => {
+                const startTime = performance.now();
+                const rawValue = form.getRawValue();
+                this.debugValue.set(rawValue);
+                this.updateSerializedValue(rawValue);
+                this.updateFileInfo(rawValue);
+                this.changesCount++;
+                const endTime = performance.now();
+                if (this.shouldShowLogs()) {
+                    const elapsed = endTime - startTime;
+                    console.log(`[JsonDebug:${this.id}] 🔄 Cambio #${this.changesCount}`, {
+                        tiempoMs: elapsed.toFixed(2),
+                        hasFile: !!rawValue?.file,
+                        serializedLength: this.serializedValue().length,
+                        warning: elapsed > 10 ? '⚠️ Cambio lento' : '✅ OK',
                     });
+                    if (this.changesCount % 10 === 0) {
+                        console.log(`[JsonDebug:${this.id}] 📊 Estadísticas`, {
+                            cambios: this.changesCount,
+                            promedioMs: (elapsed / this.changesCount).toFixed(2),
+                            ultimoMs: elapsed.toFixed(2),
+                        });
+                    }
                 }
             });
+            this.isInitialized = true;
             onCleanup(() => {
-                this.subscription?.unsubscribe();
+                if (this.shouldShowLogs()) {
+                    console.log(`[JsonDebug:${this.id}] 🧹 Limpieza effect`, {
+                        cambiosProcesados: this.changesCount,
+                        isInitialized: this.isInitialized,
+                    });
+                }
             });
         });
     }
-    ngOnDestroy() {
-        if (this.shouldShowLogs) {
-            console.log('[JsonDebug] DESTROY', this.id);
+    updateSerializedValue(value) {
+        if (!value) {
+            this.serializedValue.set('');
+            return;
+        }
+        try {
+            const copy = { ...value };
+            if (copy.file && typeof copy.file === 'object') {
+                const fileProps = {};
+                if ('name' in copy.file && copy.file.name !== undefined) {
+                    fileProps.name = copy.file.name;
+                }
+                if ('size' in copy.file && copy.file.size !== undefined) {
+                    fileProps.size = copy.file.size;
+                }
+                if ('type' in copy.file && copy.file.type !== undefined) {
+                    fileProps.type = copy.file.type;
+                }
+                if ('lastModified' in copy.file &&
+                    copy.file.lastModified !== undefined) {
+                    fileProps.lastModified = copy.file.lastModified;
+                }
+                const otherProps = Object.keys(copy.file).filter((key) => !['name', 'size', 'type', 'lastModified'].includes(key));
+                otherProps.forEach((key) => {
+                    fileProps[key] = copy.file[key];
+                });
+                copy.file = fileProps;
+            }
+            this.serializedValue.set(JSON.stringify(copy, null, 2));
+        }
+        catch (error) {
+            this.serializedValue.set('Error al serializar: ' + error);
+            if (this.shouldShowLogs()) {
+                console.error('[JsonDebug] Error serializing value:', error);
+            }
+        }
+    }
+    updateFileInfo(value) {
+        if (!value || !value.file) {
+            this.fileInfo.set(null);
+            return;
+        }
+        const file = value.file;
+        const info = {
+            exists: true,
+            isFile: file instanceof File,
+            isBlob: file instanceof Blob,
+            hasName: 'name' in file,
+            hasSize: 'size' in file,
+            hasType: 'type' in file,
+            hasLastModified: 'lastModified' in file,
+        };
+        if ('name' in file && file.name !== undefined) {
+            info.name = file.name;
+        }
+        if ('size' in file && file.size !== undefined) {
+            info.size = file.size;
         }
-        this.subscription?.unsubscribe();
-        if (this.shouldShowLogs) {
-            console.log(`[json-debug:${this.id}] DESTROY SUMMARY`, {
+        if ('type' in file && file.type !== undefined) {
+            info.mimeType = file.type;
+        }
+        if ('lastModified' in file && file.lastModified !== undefined) {
+            info.lastModified = file.lastModified;
+        }
+        this.fileInfo.set(info);
+    }
+    hasFile() {
+        return !!this.fileInfo();
+    }
+    getFileInfo() {
+        return this.fileInfo();
+    }
+    ngOnDestroy() {
+        if (this.shouldShowLogs()) {
+            console.log(`[JsonDebug:${this.id}] 💀 Destroy`, {
                 totalChanges: this.changesCount,
+                tiempoVida: `${(performance.now() / 1000).toFixed(2)}s`,
             });
         }
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = undefined;
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonValuesDebujComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JsonValuesDebujComponent, isStandalone: true, selector: "app-json-values-debuj", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form() && shouldShowVisual) {\r\n  <div class=\"custom-container\">\r\n    <pre class=\"custom-pre\" [innerHTML]=\"debugValue() | jsonHighlight\"></pre>\r\n  </div>\r\n}\r\n", styles: [".custom-container{width:100%;overflow:auto;max-height:700px;background:#1e1e1e;border:1px solid #333;border-radius:8px;box-shadow:0 4px 12px #0000004d;padding:1.25rem;margin-bottom:1.25rem}.custom-pre{margin:0;white-space:pre-wrap;word-break:break-word;word-wrap:break-word;font-family:Segoe UI,Fira Code,JetBrains Mono,Consolas,Monaco,Courier New,monospace;font-size:15px;line-height:1.65;color:#d4d4d4;font-weight:400}.json-key{color:#9cdcfe;font-weight:600;font-size:15px}.json-string{color:#ce9178;font-size:15px}.json-number{color:#b5cea8;font-weight:600;font-size:15px}.json-boolean{color:#569cd6;font-weight:700;font-size:15px}.json-null{color:gray;font-style:italic;font-size:15px}.json-bracket{color:gold;font-weight:700;font-size:16px}.json-colon{color:#d4d4d4;font-weight:500}.json-comma{color:gray;font-size:14px}.json-date-part{color:#4fc1ff;font-weight:600;font-size:15px}.json-date-sep{color:gray}.json-date-time{color:#c586c0;font-size:15px}.custom-container::-webkit-scrollbar{width:12px;height:12px}.custom-container::-webkit-scrollbar-track{background:#252526;border-radius:6px}.custom-container::-webkit-scrollbar-thumb{background:#555;border-radius:6px;transition:background .2s ease}.custom-container::-webkit-scrollbar-thumb:hover{background:#777}.custom-container::-webkit-scrollbar-corner{background:#1e1e1e}.custom-container{font-smooth:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.json-null,.json-undefined{color:#f48771;font-style:italic;opacity:.8}.json-empty{color:gray;font-style:italic}.json-comma+br{margin-bottom:2px}\n"], dependencies: [{ kind: "pipe", type: JsonHighlightPipe, name: "jsonHighlight" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JsonValuesDebujComponent, isStandalone: true, selector: "app-json-values-debuj", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, debounceTime: { classPropertyName: "debounceTime", publicName: "debounceTime", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- json-values-debuj.component.html -->\r\n@if (shouldShowVisual()) {\r\n  <div class=\"json-debug-container\">\r\n    <div class=\"json-debug-header\">\r\n      <span class=\"json-debug-id\">\uD83D\uDD0D Debug #{{ id }}</span>\r\n      <span class=\"json-debug-info\">\r\n        @if (debugValue()) {\r\n          <span class=\"badge badge-success\">\u2713 Formulario activo</span>\r\n        } @else {\r\n          <span class=\"badge badge-danger\">\u2717 Sin formulario</span>\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    @if (debugValue()) {\r\n      <div class=\"json-debug-content\">\r\n        <!-- Informaci\u00F3n del archivo (si existe) -->\r\n        @if (hasFile()) {\r\n          <div class=\"file-info-box\">\r\n            <div class=\"file-info-header\">\uD83D\uDCC1 Archivo seleccionado</div>\r\n            <div class=\"file-info-grid\">\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Nombre:</span>\r\n                <span class=\"value\">{{ getFileInfo()?.name || \"N/A\" }}</span>\r\n              </div>\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Tama\u00F1o:</span>\r\n                <span class=\"value\"\r\n                  >{{ getFileInfo()?.size | number }} bytes</span\r\n                >\r\n              </div>\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Tipo:</span>\r\n                <span class=\"value\">{{\r\n                  getFileInfo()?.mimeType || \"N/A\"\r\n                }}</span>\r\n              </div>\r\n              @if (getFileInfo()?.lastModified) {\r\n                <div class=\"file-info-item\">\r\n                  <span class=\"label\">Modificado:</span>\r\n                  <span class=\"value\">{{\r\n                    getFileInfo()?.lastModified | date: \"medium\"\r\n                  }}</span>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        <!-- JSON -->\r\n        <div class=\"json-display\">\r\n          <pre class=\"json-colored\">{{ serializedValue() }}</pre>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".json-debug-container{margin:10px 0;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;box-shadow:0 2px 8px #0000001a}.json-debug-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px 8px 0 0;color:#fff}.json-debug-id{font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge{padding:4px 14px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-success{background-color:#10b981;color:#fff;box-shadow:0 2px 4px #10b9814d}.badge-danger{background-color:#ef4444;color:#fff;box-shadow:0 2px 4px #ef44444d}.json-debug-content{padding:16px 20px}.file-info-box{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;border-radius:6px;padding:12px 16px;margin-bottom:16px}.file-info-header{font-weight:600;color:#0369a1;font-size:13px;margin-bottom:8px}.file-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}.file-info-item{padding:4px 8px;background-color:#fff;border-radius:4px;border:1px solid #e5e7eb}.file-info-item .label{font-weight:600;color:#6b7280;margin-right:8px;font-size:12px}.file-info-item .value{color:#0369a1;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px}.json-display{margin-top:0}.json-colored{margin:0;padding:16px 20px;background-color:#1e1e1e;border-radius:6px;overflow:auto;font-size:13px;line-height:1.7;color:#d4d4d4;min-height:50px;max-height:500px;font-family:Consolas,Monaco,Courier New,monospace;white-space:pre}.json-colored::-webkit-scrollbar{width:10px;height:10px}.json-colored::-webkit-scrollbar-track{background:#2d2d2d;border-radius:4px}.json-colored::-webkit-scrollbar-thumb{background:#666;border-radius:4px}.json-colored::-webkit-scrollbar-thumb:hover{background:#888}@media(max-width:768px){.json-debug-header{flex-direction:column;gap:8px;padding:10px 16px}.json-debug-content{padding:12px 16px}.file-info-grid{grid-template-columns:1fr}.json-colored{font-size:11px;padding:12px 14px;max-height:300px}}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonValuesDebujComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-json-values-debuj', standalone: true, imports: [JsonHighlightPipe], encapsulation: ViewEncapsulation.None, template: "@if (form() && shouldShowVisual) {\r\n  <div class=\"custom-container\">\r\n    <pre class=\"custom-pre\" [innerHTML]=\"debugValue() | jsonHighlight\"></pre>\r\n  </div>\r\n}\r\n", styles: [".custom-container{width:100%;overflow:auto;max-height:700px;background:#1e1e1e;border:1px solid #333;border-radius:8px;box-shadow:0 4px 12px #0000004d;padding:1.25rem;margin-bottom:1.25rem}.custom-pre{margin:0;white-space:pre-wrap;word-break:break-word;word-wrap:break-word;font-family:Segoe UI,Fira Code,JetBrains Mono,Consolas,Monaco,Courier New,monospace;font-size:15px;line-height:1.65;color:#d4d4d4;font-weight:400}.json-key{color:#9cdcfe;font-weight:600;font-size:15px}.json-string{color:#ce9178;font-size:15px}.json-number{color:#b5cea8;font-weight:600;font-size:15px}.json-boolean{color:#569cd6;font-weight:700;font-size:15px}.json-null{color:gray;font-style:italic;font-size:15px}.json-bracket{color:gold;font-weight:700;font-size:16px}.json-colon{color:#d4d4d4;font-weight:500}.json-comma{color:gray;font-size:14px}.json-date-part{color:#4fc1ff;font-weight:600;font-size:15px}.json-date-sep{color:gray}.json-date-time{color:#c586c0;font-size:15px}.custom-container::-webkit-scrollbar{width:12px;height:12px}.custom-container::-webkit-scrollbar-track{background:#252526;border-radius:6px}.custom-container::-webkit-scrollbar-thumb{background:#555;border-radius:6px;transition:background .2s ease}.custom-container::-webkit-scrollbar-thumb:hover{background:#777}.custom-container::-webkit-scrollbar-corner{background:#1e1e1e}.custom-container{font-smooth:antialiased;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.json-null,.json-undefined{color:#f48771;font-style:italic;opacity:.8}.json-empty{color:gray;font-style:italic}.json-comma+br{margin-bottom:2px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
+            args: [{ selector: 'app-json-values-debuj', standalone: true, imports: [DatePipe, DecimalPipe], encapsulation: ViewEncapsulation.None, template: "<!-- json-values-debuj.component.html -->\r\n@if (shouldShowVisual()) {\r\n  <div class=\"json-debug-container\">\r\n    <div class=\"json-debug-header\">\r\n      <span class=\"json-debug-id\">\uD83D\uDD0D Debug #{{ id }}</span>\r\n      <span class=\"json-debug-info\">\r\n        @if (debugValue()) {\r\n          <span class=\"badge badge-success\">\u2713 Formulario activo</span>\r\n        } @else {\r\n          <span class=\"badge badge-danger\">\u2717 Sin formulario</span>\r\n        }\r\n      </span>\r\n    </div>\r\n\r\n    @if (debugValue()) {\r\n      <div class=\"json-debug-content\">\r\n        <!-- Informaci\u00F3n del archivo (si existe) -->\r\n        @if (hasFile()) {\r\n          <div class=\"file-info-box\">\r\n            <div class=\"file-info-header\">\uD83D\uDCC1 Archivo seleccionado</div>\r\n            <div class=\"file-info-grid\">\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Nombre:</span>\r\n                <span class=\"value\">{{ getFileInfo()?.name || \"N/A\" }}</span>\r\n              </div>\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Tama\u00F1o:</span>\r\n                <span class=\"value\"\r\n                  >{{ getFileInfo()?.size | number }} bytes</span\r\n                >\r\n              </div>\r\n              <div class=\"file-info-item\">\r\n                <span class=\"label\">Tipo:</span>\r\n                <span class=\"value\">{{\r\n                  getFileInfo()?.mimeType || \"N/A\"\r\n                }}</span>\r\n              </div>\r\n              @if (getFileInfo()?.lastModified) {\r\n                <div class=\"file-info-item\">\r\n                  <span class=\"label\">Modificado:</span>\r\n                  <span class=\"value\">{{\r\n                    getFileInfo()?.lastModified | date: \"medium\"\r\n                  }}</span>\r\n                </div>\r\n              }\r\n            </div>\r\n          </div>\r\n        }\r\n\r\n        <!-- JSON -->\r\n        <div class=\"json-display\">\r\n          <pre class=\"json-colored\">{{ serializedValue() }}</pre>\r\n        </div>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".json-debug-container{margin:10px 0;border:1px solid #dee2e6;border-radius:8px;background-color:#f8f9fa;font-family:Consolas,Monaco,Courier New,monospace;font-size:13px;box-shadow:0 2px 8px #0000001a}.json-debug-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:8px 8px 0 0;color:#fff}.json-debug-id{font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.badge{padding:4px 14px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.badge-success{background-color:#10b981;color:#fff;box-shadow:0 2px 4px #10b9814d}.badge-danger{background-color:#ef4444;color:#fff;box-shadow:0 2px 4px #ef44444d}.json-debug-content{padding:16px 20px}.file-info-box{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #bae6fd;border-radius:6px;padding:12px 16px;margin-bottom:16px}.file-info-header{font-weight:600;color:#0369a1;font-size:13px;margin-bottom:8px}.file-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px}.file-info-item{padding:4px 8px;background-color:#fff;border-radius:4px;border:1px solid #e5e7eb}.file-info-item .label{font-weight:600;color:#6b7280;margin-right:8px;font-size:12px}.file-info-item .value{color:#0369a1;font-family:Consolas,Monaco,Courier New,monospace;font-size:12px}.json-display{margin-top:0}.json-colored{margin:0;padding:16px 20px;background-color:#1e1e1e;border-radius:6px;overflow:auto;font-size:13px;line-height:1.7;color:#d4d4d4;min-height:50px;max-height:500px;font-family:Consolas,Monaco,Courier New,monospace;white-space:pre}.json-colored::-webkit-scrollbar{width:10px;height:10px}.json-colored::-webkit-scrollbar-track{background:#2d2d2d;border-radius:4px}.json-colored::-webkit-scrollbar-thumb{background:#666;border-radius:4px}.json-colored::-webkit-scrollbar-thumb:hover{background:#888}@media(max-width:768px){.json-debug-header{flex-direction:column;gap:8px;padding:10px 16px}.json-debug-content{padding:12px 16px}.file-info-grid{grid-template-columns:1fr}.json-colored{font-size:11px;padding:12px 14px;max-height:300px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], debounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounceTime", required: false }] }] } });
 
 class IcoLabel {
     ico = input.required(...(ngDevMode ? [{ debugName: "ico" }] : /* istanbul ignore next */ []));
@@ -8197,67 +8611,395 @@ class JoinByPipe {
             .filter((value) => value.length > 0)
             .join(separator);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JoinByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: JoinByPipe, isStandalone: true, name: "joinBy" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JoinByPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'joinBy',
-                    standalone: true,
-                }]
-        }] });
-
-class TruncatePipe {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JoinByPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: JoinByPipe, isStandalone: true, name: "joinBy" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JoinByPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'joinBy',
+                    standalone: true,
+                }]
+        }] });
+
+class JsonHighlightPipe {
+    /**
+     * Stringifica el JSON manteniendo arrays en una línea para una vista más compacta
+     */
+    compactStringify(obj, indent = 0) {
+        const spaces = ' '.repeat(indent);
+        if (obj === null) {
+            return 'null';
+        }
+        if (typeof obj !== 'object') {
+            if (typeof obj === 'string') {
+                return JSON.stringify(obj);
+            }
+            return String(obj);
+        }
+        if (obj instanceof Date) {
+            return JSON.stringify(obj.toISOString());
+        }
+        if (Array.isArray(obj)) {
+            // Mantener arrays en una línea
+            const items = obj.map((item) => {
+                if (item instanceof Date) {
+                    return JSON.stringify(item.toISOString());
+                }
+                if (typeof item === 'object' && item !== null) {
+                    return this.compactStringify(item, indent);
+                }
+                return typeof item === 'string'
+                    ? JSON.stringify(item)
+                    : item === null
+                        ? 'null'
+                        : String(item);
+            });
+            return `[${items.join(', ')}]`;
+        }
+        // Para objetos, mantener la indentación
+        const keys = Object.keys(obj);
+        if (keys.length === 0) {
+            return '{}';
+        }
+        const innerIndent = indent + 2;
+        const innerSpaces = ' '.repeat(innerIndent);
+        const lines = keys.map((key) => {
+            const value = obj[key];
+            const stringified = value instanceof Date
+                ? JSON.stringify(value.toISOString())
+                : typeof value === 'object' && value !== null
+                    ? this.compactStringify(value, innerIndent)
+                    : typeof value === 'string'
+                        ? JSON.stringify(value)
+                        : value === null
+                            ? 'null'
+                            : String(value);
+            return `${innerSpaces}"${key}": ${stringified}`;
+        });
+        return `{\n${lines.join(',\n')}\n${spaces}}`;
+    }
+    instanceId = Math.random().toString(36).slice(2, 8);
+    executions = 0;
+    transform(value) {
+        if (isDevMode()) {
+            this.executions++;
+            if (this.executions % 10 === 0) {
+                console.log(`[jsonHighlight:${this.instanceId}] ${this.executions}`);
+            }
+        }
+        if (!value) {
+            return '';
+        }
+        const json = this.compactStringify(value);
+        // Detecta fechas ISO: "YYYY-MM-DDTHH:MM:SS.mmmZ"
+        const ISO_DATE_RE = /^"(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2}\.\d{3}Z)"$/;
+        // Aplica estilo y colores para diferenciar claves, valores, booleanos, números, etc.
+        return json
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?)/g, (match) => {
+            // Si es una clave (tiene dos puntos al final)
+            if (/:$/.test(match)) {
+                return `<span class="json-key">${match}</span>`;
+            }
+            // Detectar fechas ISO (YYYY-MM-DDTHH:MM:SS.mmmZ)
+            const isoMatch = match.match(ISO_DATE_RE);
+            if (isoMatch) {
+                return `<span class="json-string json-date">"<span class="json-date-part">${isoMatch[1]}</span><span class="json-date-sep">T</span><span class="json-date-time">${isoMatch[2]}</span>"</span>`;
+            }
+            // Si es un string (no tiene dos puntos)
+            return `<span class="json-string">${match}</span>`;
+        })
+            .replace(/\b(true|false|null)\b/g, (match) => {
+            if (match === 'null') {
+                return '<span class="json-null">null</span>';
+            }
+            return `<span class="json-boolean">${match}</span>`;
+        })
+            .replace(/\b(\d+\.?\d*)\b/g, '<span class="json-number">$1</span>')
+            .replace(/[{}\[\]]/g, '<span class="json-bracket">$&</span>')
+            .replace(/,/g, '<span class="json-comma">$&</span>')
+            .replace(/:/g, '<span class="json-colon">$&</span>');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, isStandalone: true, name: "jsonHighlight" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JsonHighlightPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'jsonHighlight',
+                }]
+        }] });
+
+class TruncatePipe {
+    /**
+     * Transforma una cadena de texto truncándola según los parámetros proporcionados.
+     *
+     * @param value - La cadena de texto que se desea truncar.
+     * @param limit - El número máximo de caracteres permitidos. Por defecto es 100. Si no se encuentra un espacio dentro del límite, usa el límite original (15).
+     * @param completeWords - Si es true, evita cortar palabras a la mitad. Por defecto es false.
+     * @param ellipsis - La cadena que se añadirá al final del texto truncado. Por defecto es '...'.
+     * @returns La cadena truncada con el ellipsis añadido, si es necesario.
+     */
+    transform(value, limit = 20, completeWords = false, ellipsis = '...') {
+        // Si el valor es nulo o indefinido, devuelve una cadena vacía para evitar errores.
+        if (!value) {
+            return '';
+        }
+        // Si completeWords es true, ajusta el límite para no cortar palabras.
+        if (completeWords) {
+            // Encuentra el último espacio dentro del límite para evitar cortar palabras.
+            limit = value.slice(0, limit).lastIndexOf(' ');
+            // Si no se encuentra un espacio dentro del límite, usa el límite original.
+            if (limit < 0) {
+                limit = 15; // Valor por defecto si no hay espacios.
+            }
+        }
+        // Trunca el texto y añade el ellipsis si la longitud del texto supera el límite.
+        return value.length > limit ? value.slice(0, limit) + ellipsis : value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TruncatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'truncate',
+                    standalone: true,
+                }]
+        }] });
+
+// dsxdate-short.ts
+class DsxdateShort {
+    injector = inject(Injector);
+    // ✅ Exponer isDevMode como propiedad pública
+    isDevMode = isDevMode();
+    // === INPUTS CONFIGURABLES ===
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    dateFormat = input('dd/mm/yy', ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
+    showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
+    showOnFocus = input(false, ...(ngDevMode ? [{ debugName: "showOnFocus" }] : /* istanbul ignore next */ []));
+    showButtonBar = input(true, ...(ngDevMode ? [{ debugName: "showButtonBar" }] : /* istanbul ignore next */ []));
+    debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
+    // === STATE ===
+    debugEnabled = signal(false, ...(ngDevMode ? [{ debugName: "debugEnabled" }] : /* istanbul ignore next */ []));
+    // === OBTENER EL CONTROL PADRE ===
+    ngControl = computed(() => {
+        try {
+            return this.injector.get(NgControl);
+        }
+        catch {
+            return null;
+        }
+    }, ...(ngDevMode ? [{ debugName: "ngControl" }] : /* istanbul ignore next */ []));
+    // === CONTROL PADRE PARA ERRORES ===
+    parentControl = computed(() => {
+        const control = this.ngControl();
+        return control?.control || null;
+    }, ...(ngDevMode ? [{ debugName: "parentControl" }] : /* istanbul ignore next */ []));
+    // === CONTROL INTERNO (para el template) ===
+    fechaControl = new FormControl(null);
+    // === CONTROL VALUE ACCESSOR ===
+    onChange = () => { };
+    onTouched = () => { };
+    constructor() {
+        // Debug effect
+        effect(() => {
+            const isDebug = this.debug() && this.isDevMode;
+            this.debugEnabled.set(isDebug);
+            if (isDebug) {
+                console.log('[dsxdate-short] === DEBUG MODE ACTIVADO ===');
+                console.log('[dsxdate-short] Configuración:', {
+                    label: this.label(),
+                    placeholder: this.placeholder(),
+                    dateFormat: this.dateFormat(),
+                    showIcon: this.showIcon(),
+                    showOnFocus: this.showOnFocus(),
+                    showButtonBar: this.showButtonBar(),
+                });
+                console.log('[dsxdate-short] Control padre:', this.parentControl());
+            }
+        });
+        // ✅ SINCRONIZAR VALIDADORES DEL PADRE AL CONTROL INTERNO
+        effect(() => {
+            const parentCtrl = this.parentControl();
+            if (parentCtrl) {
+                // Copiar validadores del padre al control interno
+                const validators = parentCtrl.validator;
+                const asyncValidators = parentCtrl.asyncValidator;
+                if (this.debugEnabled()) {
+                    console.log('[dsxdate-short] 🔄 Sincronizando validadores del padre');
+                    console.log('[dsxdate-short] Validadores del padre:', validators);
+                }
+                this.fechaControl.setValidators(validators ? [validators] : []);
+                this.fechaControl.setAsyncValidators(asyncValidators ? [asyncValidators] : []);
+                this.fechaControl.updateValueAndValidity({ emitEvent: false });
+                if (this.debugEnabled()) {
+                    console.log('[dsxdate-short] ✅ Validadores sincronizados');
+                    console.log('[dsxdate-short] Estado del control interno:', {
+                        valid: this.fechaControl.valid,
+                        invalid: this.fechaControl.invalid,
+                        errors: this.fechaControl.errors,
+                    });
+                }
+            }
+        });
+        // Monitorear cambios del control padre
+        effect(() => {
+            if (this.debugEnabled()) {
+                const parentCtrl = this.parentControl();
+                console.log('[dsxdate-short] 📊 Parent Control state:', {
+                    value: parentCtrl?.value,
+                    status: parentCtrl?.status,
+                    errors: parentCtrl?.errors,
+                    valid: parentCtrl?.valid,
+                    invalid: parentCtrl?.invalid,
+                    touched: parentCtrl?.touched,
+                    dirty: parentCtrl?.dirty,
+                });
+            }
+        });
+        // Sincronizar cambios del control interno al padre
+        this.fechaControl.valueChanges.subscribe((value) => {
+            if (this.debugEnabled()) {
+                console.log('[dsxdate-short] 🔄 valueChanges - Nuevo valor:', value);
+            }
+            this.onChange(value);
+        });
+        // Sincronizar touched
+        this.fechaControl.statusChanges.subscribe(() => {
+            if (this.debugEnabled()) {
+                console.log('[dsxdate-short] 📊 statusChanges - Estado:', this.fechaControl.status);
+            }
+            this.onTouched();
+        });
+    }
+    // === MÉTODOS DE DEBUG ===
+    log(message, data) {
+        if (this.debugEnabled() && this.isDevMode) {
+            if (data !== undefined) {
+                console.log(`[dsxdate-short] ${message}`, data);
+            }
+            else {
+                console.log(`[dsxdate-short] ${message}`);
+            }
+        }
+    }
     /**
-     * Transforma una cadena de texto truncándola según los parámetros proporcionados.
-     *
-     * @param value - La cadena de texto que se desea truncar.
-     * @param limit - El número máximo de caracteres permitidos. Por defecto es 100. Si no se encuentra un espacio dentro del límite, usa el límite original (15).
-     * @param completeWords - Si es true, evita cortar palabras a la mitad. Por defecto es false.
-     * @param ellipsis - La cadena que se añadirá al final del texto truncado. Por defecto es '...'.
-     * @returns La cadena truncada con el ellipsis añadido, si es necesario.
+     * Convierte cualquier fecha (string ISO, Date, moment) a Date válido
      */
-    transform(value, limit = 20, completeWords = false, ellipsis = '...') {
-        // Si el valor es nulo o indefinido, devuelve una cadena vacía para evitar errores.
-        if (!value) {
-            return '';
+    convertirFechaADate(fecha) {
+        if (this.debugEnabled()) {
+            this.log('🔄 convertirFechaADate - entrada:', fecha);
         }
-        // Si completeWords es true, ajusta el límite para no cortar palabras.
-        if (completeWords) {
-            // Encuentra el último espacio dentro del límite para evitar cortar palabras.
-            limit = value.slice(0, limit).lastIndexOf(' ');
-            // Si no se encuentra un espacio dentro del límite, usa el límite original.
-            if (limit < 0) {
-                limit = 15; // Valor por defecto si no hay espacios.
+        if (!fecha) {
+            this.log('convertirFechaADate - fecha vacía, retornando null');
+            return null;
+        }
+        if (fecha instanceof Date && !isNaN(fecha.getTime())) {
+            this.log('✅ convertirFechaADate - es Date válido:', fecha);
+            return fecha;
+        }
+        if (typeof fecha === 'string') {
+            this.log('📝 convertirFechaADate - procesando string:', fecha);
+            const momentDate = moment(fecha);
+            if (momentDate.isValid()) {
+                const result = momentDate.toDate();
+                this.log('✅ convertirFechaADate - string convertido a Date:', result);
+                return result;
             }
+            this.log('❌ convertirFechaADate - string inválido para moment');
         }
-        // Trunca el texto y añade el ellipsis si la longitud del texto supera el límite.
-        return value.length > limit ? value.slice(0, limit) + ellipsis : value;
+        if (moment.isMoment(fecha)) {
+            this.log('✅ convertirFechaADate - es objeto moment');
+            return fecha.toDate();
+        }
+        const parsed = new Date(fecha);
+        if (!isNaN(parsed.getTime())) {
+            this.log('✅ convertirFechaADate - parseo directo exitoso:', parsed);
+            return parsed;
+        }
+        this.log('❌ convertirFechaADate - no se pudo convertir, retornando null');
+        return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" });
+    // === CONTROL VALUE ACCESSOR IMPLEMENTATION ===
+    writeValue(value) {
+        if (this.debugEnabled()) {
+            this.log('📥 writeValue - Valor recibido:', value);
+        }
+        const fechaConvertida = this.convertirFechaADate(value);
+        if (this.debugEnabled()) {
+            this.log('📥 writeValue - Valor convertido:', fechaConvertida);
+        }
+        this.fechaControl.setValue(fechaConvertida, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        if (this.debugEnabled()) {
+            this.log('📞 registerOnChange - Callback registrado');
+        }
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        if (this.debugEnabled()) {
+            this.log('📞 registerOnTouched - Callback registrado');
+        }
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.debugEnabled()) {
+            this.log(`🚫 setDisabledState - Deshabilitado: ${isDisabled}`);
+        }
+        if (isDisabled) {
+            this.fechaControl.disable({ emitEvent: false });
+        }
+        else {
+            this.fechaControl.enable({ emitEvent: false });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateShort, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxdateShort, isStandalone: true, selector: "dsxdate-short", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "showOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DsxdateShort),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    fluid\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$8.InputMaskDirective, selector: "[pInputMask]", inputs: ["pInputMaskPT", "pInputMaskUnstyled", "pInputMask", "slotChar", "autoClear", "characterPattern", "keepBuffer"], outputs: ["onComplete", "onUnmaskedChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TruncatePipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'truncate',
-                    standalone: true,
-                }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateShort, decorators: [{
+            type: Component,
+            args: [{ selector: 'dsxdate-short', imports: [
+                        AppMessageErrorComponent,
+                        CommonModule,
+                        DatePicker,
+                        FloatLabel,
+                        InputMaskModule,
+                        JsonPipe,
+                        ReactiveFormsModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DsxdateShort),
+                            multi: true,
+                        },
+                    ], template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    fluid\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnFocus", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
 
-// dsxdate-short.ts
-class DsxdateShort {
+class DsxdateTime {
     injector = inject(Injector);
     // ✅ Exponer isDevMode como propiedad pública
     isDevMode = isDevMode();
     // === INPUTS CONFIGURABLES ===
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    placeholder = input('dd/mm/yyyy', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    placeholder = input('dd/mm/yyyy 00:00', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     dateFormat = input('dd/mm/yy', ...(ngDevMode ? [{ debugName: "dateFormat" }] : /* istanbul ignore next */ []));
     showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []));
     showOnFocus = input(false, ...(ngDevMode ? [{ debugName: "showOnFocus" }] : /* istanbul ignore next */ []));
     showButtonBar = input(true, ...(ngDevMode ? [{ debugName: "showButtonBar" }] : /* istanbul ignore next */ []));
+    showTime = input(true, ...(ngDevMode ? [{ debugName: "showTime" }] : /* istanbul ignore next */ []));
+    hourFormat = input('24', ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
     debug = input(false, ...(ngDevMode ? [{ debugName: "debug" }] : /* istanbul ignore next */ []));
     // === STATE ===
     debugEnabled = signal(false, ...(ngDevMode ? [{ debugName: "debugEnabled" }] : /* istanbul ignore next */ []));
@@ -8286,16 +9028,18 @@ class DsxdateShort {
             const isDebug = this.debug() && this.isDevMode;
             this.debugEnabled.set(isDebug);
             if (isDebug) {
-                console.log('[dsxdate-short] === DEBUG MODE ACTIVADO ===');
-                console.log('[dsxdate-short] Configuración:', {
+                console.log('[dsxdate-datetime] === DEBUG MODE ACTIVADO ===');
+                console.log('[dsxdate-datetime] Configuración:', {
                     label: this.label(),
                     placeholder: this.placeholder(),
                     dateFormat: this.dateFormat(),
                     showIcon: this.showIcon(),
                     showOnFocus: this.showOnFocus(),
                     showButtonBar: this.showButtonBar(),
+                    showTime: this.showTime(),
+                    hourFormat: this.hourFormat(),
                 });
-                console.log('[dsxdate-short] Control padre:', this.parentControl());
+                console.log('[dsxdate-datetime] Control padre:', this.parentControl());
             }
         });
         // ✅ SINCRONIZAR VALIDADORES DEL PADRE AL CONTROL INTERNO
@@ -8306,15 +9050,15 @@ class DsxdateShort {
                 const validators = parentCtrl.validator;
                 const asyncValidators = parentCtrl.asyncValidator;
                 if (this.debugEnabled()) {
-                    console.log('[dsxdate-short] 🔄 Sincronizando validadores del padre');
-                    console.log('[dsxdate-short] Validadores del padre:', validators);
+                    console.log('[dsxdate-datetime] 🔄 Sincronizando validadores del padre');
+                    console.log('[dsxdate-datetime] Validadores del padre:', validators);
                 }
                 this.fechaControl.setValidators(validators ? [validators] : []);
                 this.fechaControl.setAsyncValidators(asyncValidators ? [asyncValidators] : []);
                 this.fechaControl.updateValueAndValidity({ emitEvent: false });
                 if (this.debugEnabled()) {
-                    console.log('[dsxdate-short] ✅ Validadores sincronizados');
-                    console.log('[dsxdate-short] Estado del control interno:', {
+                    console.log('[dsxdate-datetime] ✅ Validadores sincronizados');
+                    console.log('[dsxdate-datetime] Estado del control interno:', {
                         valid: this.fechaControl.valid,
                         invalid: this.fechaControl.invalid,
                         errors: this.fechaControl.errors,
@@ -8326,7 +9070,7 @@ class DsxdateShort {
         effect(() => {
             if (this.debugEnabled()) {
                 const parentCtrl = this.parentControl();
-                console.log('[dsxdate-short] 📊 Parent Control state:', {
+                console.log('[dsxdate-datetime] 📊 Parent Control state:', {
                     value: parentCtrl?.value,
                     status: parentCtrl?.status,
                     errors: parentCtrl?.errors,
@@ -8340,14 +9084,14 @@ class DsxdateShort {
         // Sincronizar cambios del control interno al padre
         this.fechaControl.valueChanges.subscribe((value) => {
             if (this.debugEnabled()) {
-                console.log('[dsxdate-short] 🔄 valueChanges - Nuevo valor:', value);
+                console.log('[dsxdate-datetime] 🔄 valueChanges - Nuevo valor:', value);
             }
             this.onChange(value);
         });
         // Sincronizar touched
         this.fechaControl.statusChanges.subscribe(() => {
             if (this.debugEnabled()) {
-                console.log('[dsxdate-short] 📊 statusChanges - Estado:', this.fechaControl.status);
+                console.log('[dsxdate-datetime] 📊 statusChanges - Estado:', this.fechaControl.status);
             }
             this.onTouched();
         });
@@ -8356,10 +9100,10 @@ class DsxdateShort {
     log(message, data) {
         if (this.debugEnabled() && this.isDevMode) {
             if (data !== undefined) {
-                console.log(`[dsxdate-short] ${message}`, data);
+                console.log(`[dsxdate-datetime] ${message}`, data);
             }
             else {
-                console.log(`[dsxdate-short] ${message}`);
+                console.log(`[dsxdate-datetime] ${message}`);
             }
         }
     }
@@ -8434,32 +9178,33 @@ class DsxdateShort {
             this.fechaControl.enable({ emitEvent: false });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateShort, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxdateShort, isStandalone: true, selector: "dsxdate-short", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "showOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateTime, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DsxdateTime, isStandalone: true, selector: "dsxdate-time", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, showOnFocus: { classPropertyName: "showOnFocus", publicName: "showOnFocus", isSignal: true, isRequired: false, transformFunction: null }, showButtonBar: { classPropertyName: "showButtonBar", publicName: "showButtonBar", isSignal: true, isRequired: false, transformFunction: null }, showTime: { classPropertyName: "showTime", publicName: "showTime", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => DsxdateShort),
+                useExisting: forwardRef(() => DsxdateTime),
                 multi: true,
             },
-        ], ngImport: i0, template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
+        ], ngImport: i0, template: "<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    fluid\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999 99:99\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$8.InputMaskDirective, selector: "[pInputMask]", inputs: ["pInputMaskPT", "pInputMaskUnstyled", "pInputMask", "slotChar", "autoClear", "characterPattern", "keepBuffer"], outputs: ["onComplete", "onUnmaskedChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateShort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxdateTime, decorators: [{
             type: Component,
-            args: [{ selector: 'dsxdate-short', imports: [
+            args: [{ selector: 'dsxdate-time', imports: [
+                        AppMessageErrorComponent,
                         CommonModule,
-                        FloatLabel,
                         DatePicker,
-                        ReactiveFormsModule,
-                        AppMessageErrorComponent,
+                        FloatLabel,
+                        InputMaskModule,
                         JsonPipe,
+                        ReactiveFormsModule,
                     ], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => DsxdateShort),
+                            useExisting: forwardRef(() => DsxdateTime),
                             multi: true,
                         },
-                    ], template: "<!-- dsxdate-short.html -->\r\n<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnFocus", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
+                    ], template: "<p-floatLabel variant=\"on\">\r\n  <p-datepicker\r\n    fluid\r\n    appendTo=\"body\"\r\n    [formControl]=\"fechaControl\"\r\n    [fluid]=\"true\"\r\n    [showIcon]=\"showIcon()\"\r\n    [showOnFocus]=\"showOnFocus()\"\r\n    [showButtonBar]=\"showButtonBar()\"\r\n    [showTime]=\"showTime()\"\r\n    [hourFormat]=\"hourFormat()\"\r\n    [dateFormat]=\"dateFormat()\"\r\n    [placeholder]=\"placeholder()\"\r\n    pInputMask=\"99/99/9999 99:99\"\r\n  />\r\n  <label>{{ label() }}</label>\r\n</p-floatLabel>\r\n\r\n<!-- \u2705 SIN CONDICI\u00D3N - IGUAL QUE EL ORIGINAL -->\r\n<dsx-message-error [control]=\"fechaControl\" />\r\n\r\n<!-- Debug info -->\r\n@if (debugEnabled() && isDevMode) {\r\n<div\r\n  class=\"debug-info\"\r\n  style=\"\r\n    font-size: 12px;\r\n    color: #666;\r\n    margin-top: 4px;\r\n    border-top: 1px dashed #ccc;\r\n    padding-top: 4px;\r\n  \"\r\n>\r\n  <small>\r\n    <strong>Debug:</strong>\r\n    Value: {{ fechaControl.value | json }} | Valid: {{ fechaControl.valid }} |\r\n    Invalid: {{ fechaControl.invalid }} | Errors: {{ fechaControl.errors | json\r\n    }} | Dirty: {{ fechaControl.dirty }} | Touched: {{ fechaControl.touched }} |\r\n    Status: {{ fechaControl.status }}\r\n  </small>\r\n</div>\r\n}\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], showOnFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOnFocus", required: false }] }], showButtonBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showButtonBar", required: false }] }], showTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTime", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }] } });
 
 // dsx-input-currency.ts
 class DsxInputCurrency {
@@ -8702,6 +9447,10 @@ class DsxAutocomplete {
     ngControl = null;
     isDevModeInternal = isDevMode();
     controlSignal = signal(null, ...(ngDevMode ? [{ debugName: "controlSignal" }] : /* istanbul ignore next */ []));
+    // ✅ Almacenar IDs pendientes (privado)
+    pendingIdsInternal = [];
+    pendingValue = null;
+    pendingLogs = [];
     datasource = input.required(...(ngDevMode ? [{ debugName: "datasource" }] : /* istanbul ignore next */ []));
     optionLabel = input.required(...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
     label = input('Seleccionar', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
@@ -8723,6 +9472,14 @@ class DsxAutocomplete {
     get isDevMode() {
         return this.isDevModeInternal;
     }
+    // ✅ Getter público para IDs pendientes (solo para debug)
+    get pendingIds() {
+        return this.pendingIdsInternal;
+    }
+    // ✅ Getter para logs de pendientes
+    get pendingLogsInfo() {
+        return this.pendingLogs.join(' | ');
+    }
     get formValue() {
         return this.ngControl?.control?.value;
     }
@@ -8773,11 +9530,19 @@ class DsxAutocomplete {
                 });
             }
         });
+        // ✅ Effect mejorado para recargar cuando cambia el datasource
         effect(() => {
             const ds = this.datasource();
-            if (ds.length > 0 && this.initialValueSet) {
+            if (ds.length > 0) {
                 this.logDebug('📚 Datasource actualizado:', ds.length);
-                if (this.ngControl?.control?.value) {
+                // ✅ Si hay IDs pendientes, intentar cargarlos
+                if (this.pendingIdsInternal.length > 0) {
+                    this.logDebug('🔄 Procesando IDs pendientes:', this.pendingIdsInternal);
+                    this.procesarIdsPendientes(this.pendingIdsInternal);
+                    // ✅ No limpiamos inmediatamente para poder ver el estado en debug
+                }
+                // ✅ Si ya se inicializó y hay valor en el formulario, recargar
+                if (this.initialValueSet && this.ngControl?.control?.value) {
                     this.logDebug('🔄 Recargando valor con nuevo datasource');
                     this.writeValue(this.ngControl.control.value);
                 }
@@ -8824,6 +9589,70 @@ class DsxAutocomplete {
         this.lastLogTime = now;
         console.log(`[DsxAutocomplete] ${message}`, data || '');
     }
+    // ✅ Método para registrar eventos de pendientes
+    logPending(message, ids) {
+        if (!this.shouldDebug())
+            return;
+        const timestamp = new Date().toISOString().substring(11, 19);
+        const logEntry = `[${timestamp}] ${message} ${ids ? `IDs: [${ids.join(', ')}]` : ''}`;
+        this.pendingLogs.push(logEntry);
+        // Mantener solo los últimos 10 logs
+        if (this.pendingLogs.length > 10) {
+            this.pendingLogs.shift();
+        }
+        console.log(`[DsxAutocomplete] ⏳ PENDING: ${logEntry}`, {
+            pendingIds: this.pendingIdsInternal,
+            totalPending: this.pendingIdsInternal.length,
+        });
+    }
+    // ✅ Nuevo método: Procesar IDs pendientes con logs mejorados
+    procesarIdsPendientes(ids) {
+        if (ids.length === 0) {
+            this.logDebug('✅ No hay IDs pendientes para procesar');
+            return;
+        }
+        const sourceData = this.datasource();
+        if (sourceData.length === 0) {
+            this.logPending('⚠️ Datasource vacío, no se pueden procesar IDs pendientes', ids);
+            return;
+        }
+        this.logPending(`🔍 Procesando ${ids.length} IDs pendientes`, ids);
+        const objetos = sourceData.filter((item) => ids.includes(Number(item[this.idKey()])));
+        const objetosOrdenados = ids
+            .map((id) => objetos.find((item) => Number(item[this.idKey()]) === id))
+            .filter((item) => item !== undefined);
+        const encontrados = objetosOrdenados.length;
+        const noEncontrados = ids.length - encontrados;
+        this.logPending(`✅ Procesados: ${encontrados} encontrados, ${noEncontrados} no encontrados`, ids);
+        if (noEncontrados > 0) {
+            const idsNoEncontrados = ids.filter((id) => !objetos.some((item) => Number(item[this.idKey()]) === id));
+            this.logPending(`⚠️ IDs no encontrados en datasource:`, idsNoEncontrados);
+        }
+        // Si se encontraron todos los objetos, actualizar la vista
+        if (encontrados > 0) {
+            if (this.isMultiple()) {
+                this.value = objetosOrdenados;
+            }
+            else {
+                this.value = objetosOrdenados.length > 0 ? objetosOrdenados[0] : null;
+            }
+            this.cdr.detectChanges();
+            // ✅ Limpiar pendientes solo si se encontraron todos
+            if (noEncontrados === 0) {
+                this.pendingIdsInternal = [];
+                this.logPending('✅ Todos los IDs pendientes fueron resueltos', ids);
+            }
+            else {
+                // Mantener solo los no encontrados
+                const idsNoEncontrados = ids.filter((id) => !objetos.some((item) => Number(item[this.idKey()]) === id));
+                this.pendingIdsInternal = idsNoEncontrados;
+                this.logPending(`⏳ ${idsNoEncontrados.length} IDs pendientes aún no resueltos`, idsNoEncontrados);
+            }
+        }
+        else {
+            this.logPending('❌ Ningún ID pendiente pudo ser resuelto', ids);
+        }
+    }
     searchRequisitos(event) {
         const inicio = performance.now();
         const label = this.optionLabel();
@@ -8862,13 +9691,10 @@ class DsxAutocomplete {
             .replace(/\s+/g, ' ')
             .trim();
     }
-    // ✨ CORREGIDO: evaluarYAgregar para manejar valores no encontrados
     evaluarYAgregar(event) {
         const valorInput = event.target.value?.trim();
         if (!valorInput) {
             this.dataFiltrada.set([]);
-            // Si el input está vacío y hay valor seleccionado, mantenerlo
-            // Si no hay valor, asegurar que el formulario tenga null o []
             if (this.obtenerArrayValue().length === 0) {
                 this.actualizarFormulario([]);
             }
@@ -8929,11 +9755,8 @@ class DsxAutocomplete {
             this.logDebug('🆕 Nuevo elemento creado', valorInput);
         }
         else {
-            // ✅ NO permite crear: limpiar el valor a null o []
             this.logDebug('⚠️ No se encontraron coincidencias y no se permite crear', valorInput);
-            // ✨ IMPORTANTE: Limpiar la selección a null o []
             this.actualizarFormulario([]);
-            // Marcar como touched para mostrar validación
             if (this.ngControl?.control) {
                 this.ngControl.control.markAsTouched();
                 this.onTouched();
@@ -9059,9 +9882,7 @@ class DsxAutocomplete {
             this.timeoutLimpieza = null;
         }
     }
-    // ✨ MEJORADO: actualizarFormulario para manejar correctamente valores vacíos
     actualizarFormulario(nuevaLista) {
-        // Si la lista está vacía, siempre enviar null o [] según el modo
         if (nuevaLista.length === 0) {
             if (this.isMultiple()) {
                 this.value = [];
@@ -9077,7 +9898,6 @@ class DsxAutocomplete {
             });
             return;
         }
-        // Si hay elementos, procesar normalmente
         if (this.isMultiple()) {
             this.value = nuevaLista;
         }
@@ -9096,6 +9916,7 @@ class DsxAutocomplete {
     getFormControlName() {
         return this.ngControl?.name || null;
     }
+    // ✨ MEJORADO: writeValue con manejo de IDs pendientes y logs
     writeValue(value) {
         const timestamp = new Date().toISOString();
         this.logDebug(`🔄 writeValue INVOCADO ${timestamp}`, {
@@ -9113,10 +9934,16 @@ class DsxAutocomplete {
             isMultiple: this.isMultiple(),
             hasDatasource: this.datasource().length > 0,
             datasourceSize: this.datasource().length,
+            pendingIdsActuales: this.pendingIdsInternal,
         });
         if (value === null || value === undefined) {
             this.logDebug(`⚠️ Valor null/undefined, limpiando selección`);
             this.value = this.isMultiple() ? [] : null;
+            if (this.pendingIdsInternal.length > 0) {
+                this.logPending('🧹 Limpiando IDs pendientes por null/undefined', this.pendingIdsInternal);
+                this.pendingIdsInternal = [];
+            }
+            this.pendingValue = null;
             this.initialValueSet = true;
             this.cdr.markForCheck();
             this.cdr.detectChanges();
@@ -9127,6 +9954,11 @@ class DsxAutocomplete {
         if (Array.isArray(value)) {
             if (value.length === 0) {
                 this.value = this.isMultiple() ? [] : null;
+                if (this.pendingIdsInternal.length > 0) {
+                    this.logPending('🧹 Limpiando IDs pendientes por array vacío', this.pendingIdsInternal);
+                    this.pendingIdsInternal = [];
+                }
+                this.pendingValue = null;
                 this.initialValueSet = true;
                 this.cdr.markForCheck();
                 this.cdr.detectChanges();
@@ -9134,41 +9966,73 @@ class DsxAutocomplete {
             }
             if (typeof value[0] === 'number') {
                 ids = value;
+                this.logDebug(`📊 Recibidos ${ids.length} IDs:`, ids);
             }
             else if (typeof value[0] === 'object' && value[0] !== null) {
                 items = value;
+                this.logDebug(`📊 Recibidos ${items.length} objetos:`, items.map((i) => i[this.optionLabel()]));
             }
         }
         else if (typeof value === 'number') {
             ids = [value];
+            this.logDebug(`📊 Recibido 1 ID:`, [value]);
         }
         else if (typeof value === 'object' && value !== null) {
             items = [value];
+            this.logDebug(`📊 Recibido 1 objeto:`, value[this.optionLabel()]);
         }
         else {
             this.value = this.isMultiple() ? [] : null;
+            if (this.pendingIdsInternal.length > 0) {
+                this.logPending('🧹 Limpiando IDs pendientes por tipo no soportado', this.pendingIdsInternal);
+                this.pendingIdsInternal = [];
+            }
+            this.pendingValue = null;
             this.initialValueSet = true;
             this.cdr.markForCheck();
             this.cdr.detectChanges();
             return;
         }
         const sourceData = this.datasource();
-        if (ids.length > 0) {
-            if (sourceData.length === 0) {
-                this.logDebug(`⚠️ Datasource vacío, guardando IDs para luego`);
-                this.value = this.isMultiple() ? [] : null;
-                this.initialValueSet = true;
-                this.cdr.markForCheck();
-                this.cdr.detectChanges();
-                return;
-            }
+        // ✅ Si tenemos IDs y el datasource está vacío, guardarlos para después
+        if (ids.length > 0 && sourceData.length === 0) {
+            this.logPending(`⏳ Datasource vacío (${sourceData.length}), guardando ${ids.length} IDs para procesar después`, ids);
+            this.pendingIdsInternal = ids;
+            this.pendingValue = value;
+            this.initialValueSet = true;
+            // ✅ Mostrar un placeholder visual mientras se cargan los datos
+            this.value = this.isMultiple() ? [] : null;
+            this.cdr.markForCheck();
+            this.cdr.detectChanges();
+            this.logDebug(`⏳ IDs guardados como pendientes:`, this.pendingIdsInternal);
+            return;
+        }
+        // ✅ Si tenemos IDs y el datasource existe, buscar los objetos
+        if (ids.length > 0 && sourceData.length > 0) {
+            this.logDebug(`🔍 Buscando ${ids.length} IDs en datasource de ${sourceData.length} elementos`);
             const objetos = sourceData.filter((item) => ids.includes(Number(item[this.idKey()])));
             const objetosOrdenados = ids
                 .map((id) => objetos.find((item) => Number(item[this.idKey()]) === id))
                 .filter((item) => item !== undefined);
             items = objetosOrdenados;
+            // ✅ Si no se encontraron algunos IDs, guardarlos como pendientes
+            const idsNoEncontrados = ids.filter((id) => !objetos.some((item) => Number(item[this.idKey()]) === id));
+            if (idsNoEncontrados.length > 0) {
+                this.logPending(`⚠️ ${idsNoEncontrados.length} IDs no encontrados en datasource`, idsNoEncontrados);
+                this.pendingIdsInternal = idsNoEncontrados;
+                this.pendingValue = value;
+            }
+            else {
+                // ✅ Todos los IDs fueron encontrados
+                if (this.pendingIdsInternal.length > 0) {
+                    this.logPending('✅ Todos los IDs pendientes fueron resueltos', this.pendingIdsInternal);
+                    this.pendingIdsInternal = [];
+                    this.pendingValue = null;
+                }
+            }
             this.logDebug(`🔍 Encontrados ${items.length} de ${ids.length} IDs`);
         }
+        // ✅ Verificar que los items existan en el datasource
         if (items.length > 0 && sourceData.length > 0) {
             const itemsValidos = items.filter((item) => sourceData.some((s) => s[this.idKey()] === item[this.idKey()]));
             if (itemsValidos.length !== items.length) {
@@ -9179,6 +10043,7 @@ class DsxAutocomplete {
                 items = itemsValidos;
             }
         }
+        // ✅ Asignar el valor
         if (this.isMultiple()) {
             this.value = items;
         }
@@ -9188,6 +10053,9 @@ class DsxAutocomplete {
         this.initialValueSet = true;
         this.cdr.detectChanges();
         this.logDebug(`✅ Vista actualizada con ${items.length} elementos (${this.isMultiple() ? 'multiple' : 'single'})`);
+        if (this.pendingIdsInternal.length > 0) {
+            this.logDebug(`⏳ IDs pendientes actuales:`, this.pendingIdsInternal);
+        }
     }
     forceReload() {
         this.logDebug('🔄 Forzando recarga');
@@ -9214,7 +10082,7 @@ class DsxAutocomplete {
                 useExisting: forwardRef(() => DsxAutocomplete),
                 multi: true,
             },
-        ], ngImport: i0, template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    appendTo=\"body\"\r\n    [multiple]=\"isMultiple()\"\r\n    [dropdown]=\"true\"\r\n    [showClear]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onNgModelChange($event)\"\r\n    (onBlur)=\"onTouched()\"\r\n    (onShow)=\"onShow()\"\r\n    (onHide)=\"onHide()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n    placeholder=\"Ingresa un texto....\"\r\n    [inputStyle]=\"{'text-transform': 'uppercase'}\"\r\n  >\r\n    <ng-template let-item pTemplate=\"selectedItem\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n\r\n    <ng-template let-item pTemplate=\"item\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n\r\n<!-- Bot\u00F3n de limpiar para modo single -->\r\n@if (!isMultiple() && value) {\r\n<button\r\n  type=\"button\"\r\n  (click)=\"clearSelection()\"\r\n  style=\"\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    background: transparent;\r\n    border: none;\r\n    cursor: pointer;\r\n    color: #999;\r\n    font-size: 14px;\r\n    z-index: 1;\r\n  \"\r\n  aria-label=\"Limpiar selecci\u00F3n\"\r\n>\r\n  \u2715\r\n</button>\r\n}\r\n\r\n<!-- Mensaje de error -->\r\n@if (showError() && errorControl()) {\r\n<dsx-message-error [control]=\"errorControl()\" />\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n<div\r\n  style=\"\r\n    margin-top: 8px;\r\n    font-size: 11px;\r\n    color: #666;\r\n    background: #f5f5f5;\r\n    padding: 6px 10px;\r\n    border-radius: 4px;\r\n    font-family: monospace;\r\n    border: 1px solid #ddd;\r\n  \"\r\n>\r\n  <div\r\n    style=\"\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      gap: 8px;\r\n      flex-wrap: wrap;\r\n    \"\r\n  >\r\n    <div>\r\n      <strong>\uD83D\uDD0D Debug:</strong>\r\n      <span style=\"margin-left: 8px\">Items: {{ getValueLength() }}</span>\r\n      <span style=\"margin-left: 8px\">IDs: {{ getValueDisplay('id') }}</span>\r\n      <span style=\"margin-left: 8px\"\r\n        >Nombres: {{ getValueDisplay('nombre') }}</span\r\n      >\r\n      <span style=\"margin-left: 8px; color: #888; font-size: 10px\">\r\n        | returnID: {{ returnID() ? '\u2705 IDs' : '\u274C Objetos' }} | Multiple: {{\r\n        isMultiple() ? '\u2705' : '\u274C' }} | Control: {{ controlName || 'sin nombre'\r\n        }}\r\n      </span>\r\n    </div>\r\n    <div\r\n      style=\"\r\n        font-size: 10px;\r\n        color: #333;\r\n        background: #e8e8e8;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n      \"\r\n    >\r\n      <strong>\uD83D\uDCCA Validaci\u00F3n:</strong>\r\n      <span [style.color]=\"controlValid ? 'green' : 'red'\">\r\n        {{ controlValid ? '\u2705 V\u00E1lido' : '\u274C Inv\u00E1lido' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Touched: {{ controlTouched ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Dirty: {{ controlDirty ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      @if (controlErrors) {\r\n      <span style=\"margin-left: 4px; color: red\">\r\n        | Errors: {{ controlErrors | json }}\r\n      </span>\r\n      }\r\n    </div>\r\n    <button\r\n      (click)=\"forceReload()\"\r\n      style=\"\r\n        font-size: 10px;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n        border: 1px solid #ccc;\r\n        background: white;\r\n        cursor: pointer;\r\n      \"\r\n      type=\"button\"\r\n    >\r\n      \uD83D\uDD04 Recargar\r\n    </button>\r\n  </div>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: JsonPipe, name: "json" }] });
+        ], ngImport: i0, template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    [multiple]=\"isMultiple()\"\r\n    [dropdown]=\"true\"\r\n    [showClear]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onNgModelChange($event)\"\r\n    (onBlur)=\"onTouched()\"\r\n    (onShow)=\"onShow()\"\r\n    (onHide)=\"onHide()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n    placeholder=\"Ingresa un texto....\"\r\n    [inputStyle]=\"{'text-transform': 'uppercase'}\"\r\n  >\r\n    <ng-template let-item pTemplate=\"selectedItem\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n\r\n    <ng-template let-item pTemplate=\"item\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n\r\n<!-- \u2728 Indicador de carga (cuando hay IDs pendientes) -->\r\n@if (pendingIds.length > 0 && debug() && isDevMode) {\r\n<div\r\n  style=\"\r\n    font-size: 10px;\r\n    color: #f59e0b;\r\n    margin-top: 2px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n  \"\r\n>\r\n  <span>\u23F3</span>\r\n  <span\r\n    >Cargando datos pendientes ({{ pendingIds.length }} IDs: [{{\r\n    pendingIds.join(', ') }}])</span\r\n  >\r\n</div>\r\n}\r\n\r\n<!-- \u2728 Bot\u00F3n de limpiar para modo single -->\r\n@if (!isMultiple() && value) {\r\n<button\r\n  type=\"button\"\r\n  (click)=\"clearSelection()\"\r\n  style=\"\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    background: transparent;\r\n    border: none;\r\n    cursor: pointer;\r\n    color: #999;\r\n    font-size: 14px;\r\n    z-index: 1;\r\n  \"\r\n  aria-label=\"Limpiar selecci\u00F3n\"\r\n>\r\n  \u2715\r\n</button>\r\n}\r\n\r\n<!-- Mensaje de error -->\r\n@if (showError() && errorControl()) {\r\n<dsx-message-error [control]=\"errorControl()\" />\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n<div\r\n  style=\"\r\n    margin-top: 8px;\r\n    font-size: 11px;\r\n    color: #666;\r\n    background: #f5f5f5;\r\n    padding: 6px 10px;\r\n    border-radius: 4px;\r\n    font-family: monospace;\r\n    border: 1px solid #ddd;\r\n  \"\r\n>\r\n  <div\r\n    style=\"\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      gap: 8px;\r\n      flex-wrap: wrap;\r\n    \"\r\n  >\r\n    <div>\r\n      <strong>\uD83D\uDD0D Debug:</strong>\r\n      <span style=\"margin-left: 8px\">Items: {{ getValueLength() }}</span>\r\n      <span style=\"margin-left: 8px\">IDs: {{ getValueDisplay('id') }}</span>\r\n      <span style=\"margin-left: 8px\"\r\n        >Nombres: {{ getValueDisplay('nombre') }}</span\r\n      >\r\n      <span style=\"margin-left: 8px; color: #888; font-size: 10px\">\r\n        | returnID: {{ returnID() ? '\u2705 IDs' : '\u274C Objetos' }} | Multiple: {{\r\n        isMultiple() ? '\u2705' : '\u274C' }} | Control: {{ controlName || 'sin nombre'\r\n        }}\r\n      </span>\r\n      @if (pendingIds.length > 0) {\r\n      <span style=\"margin-left: 8px; color: #f59e0b; font-weight: bold\">\r\n        | \u23F3 Pendientes: {{ pendingIds.length }} ({{ pendingIds.join(', ') }})\r\n      </span>\r\n      } @else {\r\n      <span style=\"margin-left: 8px; color: #10b981; font-weight: bold\">\r\n        | \u2705 Sin pendientes\r\n      </span>\r\n      }\r\n      <span style=\"margin-left: 8px; color: #888; font-size: 9px\">\r\n        | Logs: {{ pendingLogsInfo }}\r\n      </span>\r\n    </div>\r\n    <div\r\n      style=\"\r\n        font-size: 10px;\r\n        color: #333;\r\n        background: #e8e8e8;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n      \"\r\n    >\r\n      <strong>\uD83D\uDCCA Validaci\u00F3n:</strong>\r\n      <span [style.color]=\"controlValid ? 'green' : 'red'\">\r\n        {{ controlValid ? '\u2705 V\u00E1lido' : '\u274C Inv\u00E1lido' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Touched: {{ controlTouched ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Dirty: {{ controlDirty ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      @if (controlErrors) {\r\n      <span style=\"margin-left: 4px; color: red\">\r\n        | Errors: {{ controlErrors | json }}\r\n      </span>\r\n      }\r\n    </div>\r\n    <button\r\n      (click)=\"forceReload()\"\r\n      style=\"\r\n        font-size: 10px;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n        border: 1px solid #ccc;\r\n        background: white;\r\n        cursor: pointer;\r\n      \"\r\n      type=\"button\"\r\n    >\r\n      \uD83D\uDD04 Recargar\r\n    </button>\r\n  </div>\r\n</div>\r\n}\r\n", styles: [""], dependencies: [{ kind: "component", type: AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }, { kind: "component", type: AppMessageErrorComponent, selector: "dsx-message-error", inputs: ["control", "form", "debugMode"] }, { kind: "pipe", type: JsonPipe, name: "json" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxAutocomplete, decorators: [{
             type: Component,
@@ -9230,7 +10098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => DsxAutocomplete),
                             multi: true,
                         },
-                    ], template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    appendTo=\"body\"\r\n    [multiple]=\"isMultiple()\"\r\n    [dropdown]=\"true\"\r\n    [showClear]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onNgModelChange($event)\"\r\n    (onBlur)=\"onTouched()\"\r\n    (onShow)=\"onShow()\"\r\n    (onHide)=\"onHide()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n    placeholder=\"Ingresa un texto....\"\r\n    [inputStyle]=\"{'text-transform': 'uppercase'}\"\r\n  >\r\n    <ng-template let-item pTemplate=\"selectedItem\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n\r\n    <ng-template let-item pTemplate=\"item\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n\r\n<!-- Bot\u00F3n de limpiar para modo single -->\r\n@if (!isMultiple() && value) {\r\n<button\r\n  type=\"button\"\r\n  (click)=\"clearSelection()\"\r\n  style=\"\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    background: transparent;\r\n    border: none;\r\n    cursor: pointer;\r\n    color: #999;\r\n    font-size: 14px;\r\n    z-index: 1;\r\n  \"\r\n  aria-label=\"Limpiar selecci\u00F3n\"\r\n>\r\n  \u2715\r\n</button>\r\n}\r\n\r\n<!-- Mensaje de error -->\r\n@if (showError() && errorControl()) {\r\n<dsx-message-error [control]=\"errorControl()\" />\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n<div\r\n  style=\"\r\n    margin-top: 8px;\r\n    font-size: 11px;\r\n    color: #666;\r\n    background: #f5f5f5;\r\n    padding: 6px 10px;\r\n    border-radius: 4px;\r\n    font-family: monospace;\r\n    border: 1px solid #ddd;\r\n  \"\r\n>\r\n  <div\r\n    style=\"\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      gap: 8px;\r\n      flex-wrap: wrap;\r\n    \"\r\n  >\r\n    <div>\r\n      <strong>\uD83D\uDD0D Debug:</strong>\r\n      <span style=\"margin-left: 8px\">Items: {{ getValueLength() }}</span>\r\n      <span style=\"margin-left: 8px\">IDs: {{ getValueDisplay('id') }}</span>\r\n      <span style=\"margin-left: 8px\"\r\n        >Nombres: {{ getValueDisplay('nombre') }}</span\r\n      >\r\n      <span style=\"margin-left: 8px; color: #888; font-size: 10px\">\r\n        | returnID: {{ returnID() ? '\u2705 IDs' : '\u274C Objetos' }} | Multiple: {{\r\n        isMultiple() ? '\u2705' : '\u274C' }} | Control: {{ controlName || 'sin nombre'\r\n        }}\r\n      </span>\r\n    </div>\r\n    <div\r\n      style=\"\r\n        font-size: 10px;\r\n        color: #333;\r\n        background: #e8e8e8;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n      \"\r\n    >\r\n      <strong>\uD83D\uDCCA Validaci\u00F3n:</strong>\r\n      <span [style.color]=\"controlValid ? 'green' : 'red'\">\r\n        {{ controlValid ? '\u2705 V\u00E1lido' : '\u274C Inv\u00E1lido' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Touched: {{ controlTouched ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Dirty: {{ controlDirty ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      @if (controlErrors) {\r\n      <span style=\"margin-left: 4px; color: red\">\r\n        | Errors: {{ controlErrors | json }}\r\n      </span>\r\n      }\r\n    </div>\r\n    <button\r\n      (click)=\"forceReload()\"\r\n      style=\"\r\n        font-size: 10px;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n        border: 1px solid #ccc;\r\n        background: white;\r\n        cursor: pointer;\r\n      \"\r\n      type=\"button\"\r\n    >\r\n      \uD83D\uDD04 Recargar\r\n    </button>\r\n  </div>\r\n</div>\r\n}\r\n" }]
+                    ], template: "<p-floatlabel variant=\"on\">\r\n  <p-autoComplete\r\n    fluid\r\n    [multiple]=\"isMultiple()\"\r\n    [dropdown]=\"true\"\r\n    [showClear]=\"true\"\r\n    [suggestions]=\"dataFiltrada()\"\r\n    (completeMethod)=\"searchRequisitos($event)\"\r\n    [(ngModel)]=\"value\"\r\n    (ngModelChange)=\"onNgModelChange($event)\"\r\n    (onBlur)=\"onTouched()\"\r\n    (onShow)=\"onShow()\"\r\n    (onHide)=\"onHide()\"\r\n    [disabled]=\"disabled\"\r\n    [optionLabel]=\"optionLabel()\"\r\n    [dataKey]=\"dataKey() || idKey()\"\r\n    (keyup.enter)=\"evaluarYAgregar($event)\"\r\n    [delay]=\"delay()\"\r\n    placeholder=\"Ingresa un texto....\"\r\n    [inputStyle]=\"{'text-transform': 'uppercase'}\"\r\n  >\r\n    <ng-template let-item pTemplate=\"selectedItem\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n\r\n    <ng-template let-item pTemplate=\"item\">\r\n      {{ item[optionLabel()] }}\r\n    </ng-template>\r\n  </p-autoComplete>\r\n  <label>{{ label() }}</label>\r\n</p-floatlabel>\r\n\r\n<!-- \u2728 Indicador de carga (cuando hay IDs pendientes) -->\r\n@if (pendingIds.length > 0 && debug() && isDevMode) {\r\n<div\r\n  style=\"\r\n    font-size: 10px;\r\n    color: #f59e0b;\r\n    margin-top: 2px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 4px;\r\n  \"\r\n>\r\n  <span>\u23F3</span>\r\n  <span\r\n    >Cargando datos pendientes ({{ pendingIds.length }} IDs: [{{\r\n    pendingIds.join(', ') }}])</span\r\n  >\r\n</div>\r\n}\r\n\r\n<!-- \u2728 Bot\u00F3n de limpiar para modo single -->\r\n@if (!isMultiple() && value) {\r\n<button\r\n  type=\"button\"\r\n  (click)=\"clearSelection()\"\r\n  style=\"\r\n    position: absolute;\r\n    right: 10px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    background: transparent;\r\n    border: none;\r\n    cursor: pointer;\r\n    color: #999;\r\n    font-size: 14px;\r\n    z-index: 1;\r\n  \"\r\n  aria-label=\"Limpiar selecci\u00F3n\"\r\n>\r\n  \u2715\r\n</button>\r\n}\r\n\r\n<!-- Mensaje de error -->\r\n@if (showError() && errorControl()) {\r\n<dsx-message-error [control]=\"errorControl()\" />\r\n}\r\n\r\n<!-- Panel de Debug -->\r\n@if (debug() && isDevMode) {\r\n<div\r\n  style=\"\r\n    margin-top: 8px;\r\n    font-size: 11px;\r\n    color: #666;\r\n    background: #f5f5f5;\r\n    padding: 6px 10px;\r\n    border-radius: 4px;\r\n    font-family: monospace;\r\n    border: 1px solid #ddd;\r\n  \"\r\n>\r\n  <div\r\n    style=\"\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      gap: 8px;\r\n      flex-wrap: wrap;\r\n    \"\r\n  >\r\n    <div>\r\n      <strong>\uD83D\uDD0D Debug:</strong>\r\n      <span style=\"margin-left: 8px\">Items: {{ getValueLength() }}</span>\r\n      <span style=\"margin-left: 8px\">IDs: {{ getValueDisplay('id') }}</span>\r\n      <span style=\"margin-left: 8px\"\r\n        >Nombres: {{ getValueDisplay('nombre') }}</span\r\n      >\r\n      <span style=\"margin-left: 8px; color: #888; font-size: 10px\">\r\n        | returnID: {{ returnID() ? '\u2705 IDs' : '\u274C Objetos' }} | Multiple: {{\r\n        isMultiple() ? '\u2705' : '\u274C' }} | Control: {{ controlName || 'sin nombre'\r\n        }}\r\n      </span>\r\n      @if (pendingIds.length > 0) {\r\n      <span style=\"margin-left: 8px; color: #f59e0b; font-weight: bold\">\r\n        | \u23F3 Pendientes: {{ pendingIds.length }} ({{ pendingIds.join(', ') }})\r\n      </span>\r\n      } @else {\r\n      <span style=\"margin-left: 8px; color: #10b981; font-weight: bold\">\r\n        | \u2705 Sin pendientes\r\n      </span>\r\n      }\r\n      <span style=\"margin-left: 8px; color: #888; font-size: 9px\">\r\n        | Logs: {{ pendingLogsInfo }}\r\n      </span>\r\n    </div>\r\n    <div\r\n      style=\"\r\n        font-size: 10px;\r\n        color: #333;\r\n        background: #e8e8e8;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n      \"\r\n    >\r\n      <strong>\uD83D\uDCCA Validaci\u00F3n:</strong>\r\n      <span [style.color]=\"controlValid ? 'green' : 'red'\">\r\n        {{ controlValid ? '\u2705 V\u00E1lido' : '\u274C Inv\u00E1lido' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Touched: {{ controlTouched ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      <span style=\"margin-left: 4px\">\r\n        | Dirty: {{ controlDirty ? '\u2705' : '\u274C' }}\r\n      </span>\r\n      @if (controlErrors) {\r\n      <span style=\"margin-left: 4px; color: red\">\r\n        | Errors: {{ controlErrors | json }}\r\n      </span>\r\n      }\r\n    </div>\r\n    <button\r\n      (click)=\"forceReload()\"\r\n      style=\"\r\n        font-size: 10px;\r\n        padding: 2px 8px;\r\n        border-radius: 4px;\r\n        border: 1px solid #ccc;\r\n        background: white;\r\n        cursor: pointer;\r\n      \"\r\n      type=\"button\"\r\n    >\r\n      \uD83D\uDD04 Recargar\r\n    </button>\r\n  </div>\r\n</div>\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { datasource: [{ type: i0.Input, args: [{ isSignal: true, alias: "datasource", required: true }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], idKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "idKey", required: true }] }], dataKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataKey", required: false }] }], permitirCrear: [{ type: i0.Input, args: [{ isSignal: true, alias: "permitirCrear", required: false }] }], isMultiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiple", required: false }] }], debug: [{ type: i0.Input, args: [{ isSignal: true, alias: "debug", required: false }] }], factoryNuevoRegistro: [{ type: i0.Input, args: [{ isSignal: true, alias: "factoryNuevoRegistro", required: false }] }], returnID: [{ type: i0.Input, args: [{ isSignal: true, alias: "returnID", required: false }] }], showError: [{ type: i0.Input, args: [{ isSignal: true, alias: "showError", required: false }] }] } });
 
 // dsx-select.component.ts
@@ -9823,35 +10691,210 @@ class ResultFileService {
      *    FileContents|fileContents, FileDownloadName|fileDownloadName,
      *    ContentType|contentType, title y message.
      *
-     * Si el backend no cumple alguno de estos formatos, la conversión puede fallar
-     * y el cliente recibirá data: null con isSuccess: false.
-     */
-    /**
-     * Procesa un ServiceResult<FileData> para visualizar o descargar.
-     */
-    processFileResult(result, visualizar = false) {
-        if (!result.isSuccess || !result.data?.blob) {
-            this._alertaService.alertaHtmlSuccess(result.title, result.message, {
-                icon: 'question',
-                icono: '',
-                showConfirmButton: true,
-            });
-            return;
-        }
-        const { blob, fileName } = result.data;
-        if (visualizar) {
-            this.PdfView(blob);
-            return;
-        }
-        this.descargarBlob(blob, fileName);
-    }
-    /**
-     * Realiza un GET para descarga y normaliza la respuesta a ServiceResult<FileData>.
+     * Si el backend no cumple alguno de estos formatos, la conversión puede fallar
+     * y el cliente recibirá data: null con isSuccess: false.
+     */
+    /**
+     * Procesa un ServiceResult<FileData> para visualizar o descargar.
+     */
+    processFileResult(result, visualizar = false) {
+        if (!result.isSuccess || !result.data?.blob) {
+            this._alertaService.alertaHtmlSuccess(result.title, result.message, {
+                icon: 'question',
+                icono: '',
+                showConfirmButton: true,
+            });
+            return;
+        }
+        const { blob, fileName } = result.data;
+        if (visualizar) {
+            this.PdfView(blob);
+            return;
+        }
+        this.descargarBlob(blob, fileName);
+    }
+    /**
+     * Realiza una petición GET para descargar un archivo y normaliza la respuesta a un ServiceResult<FileData>.
+     *
+     * 📋 **Descripción General:**
+     * Este método unifica la forma en que se manejan las descargas de archivos, soportando múltiples
+     * formatos de respuesta del backend y normalizándolos a una estructura consistente.
+     *
+     * 🔄 **Formatos de Respuesta Soportados:**
+     *
+     * 1. **Binario Directo** (Recomendado):
+     *    - El backend retorna directamente el archivo binario.
+     *    - El nombre del archivo se obtiene del header `Content-Disposition`.
+     *    - Mensajes opcionales via headers: `x-title`, `x-message`, `title`, `message`.
+     *    - Ejemplo:
+     *      ```
+     *      Content-Type: application/pdf
+     *      Content-Disposition: attachment; filename="documento.pdf"
+     *      x-title: Éxito
+     *      x-message: Descarga completada exitosamente
+     *
+     *      [bytes del archivo]
+     *      ```
+     *
+     * 2. **JSON Serializado con ServiceResult**:
+     *    - El backend retorna un JSON con estructura ServiceResult<FileContentResult>.
+     *    - El archivo viene codificado en Base64 o como array de bytes.
+     *    - Soporta campos en PascalCase o camelCase.
+     *    - Ejemplo:
+     *      ```json
+     *      {
+     *        "isSuccess": true,
+     *        "title": "Éxito",
+     *        "message": "Archivo generado correctamente",
+     *        "data": {
+     *          "fileContents": "base64EncodedString...",
+     *          "fileDownloadName": "reporte.xlsx",
+     *          "contentType": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+     *        }
+     *      }
+     *      ```
+     *
+     * 3. **Error del Backend**:
+     *    - Retorna un ServiceResult con isSuccess: false.
+     *    - Se extrae el título y mensaje de error.
+     *    - Ejemplo:
+     *      ```json
+     *      {
+     *        "isSuccess": false,
+     *        "title": "Error de Validación",
+     *        "message": "El ID del documento no existe"
+     *      }
+     *      ```
+     *
+     * 4. **Error de Red/HTTP**:
+     *    - Captura errores de conexión, timeout, etc.
+     *    - Retorna un ServiceResult con isSuccess: false y mensaje genérico.
+     *
+     * 🎯 **Método de Uso Recomendado:**
+     * ```typescript
+     * // Opción 1: Descarga automática
+     * this.resultFileService.getDownloadableFile('/api/documentos/123')
+     *   .subscribe(result => {
+     *     this.resultFileService.processFileResult(result, false);
+     *   });
+     *
+     * // Opción 2: Visualización de PDF
+     * this.resultFileService.getDownloadableFile('/api/documentos/123')
+     *   .subscribe(result => {
+     *     this.resultFileService.processFileResult(result, true);
+     *   });
+     *
+     * // Opción 3: Procesamiento personalizado
+     * this.resultFileService.getDownloadableFile('/api/documentos/123')
+     *   .subscribe({
+     *     next: (result) => {
+     *       if (result.isSuccess && result.data?.blob) {
+     *         // Procesar el blob manualmente
+     *         const { blob, fileName } = result.data;
+     *         // Hacer algo con el archivo
+     *       } else {
+     *         // Manejar error
+     *         console.error(result.title, result.message);
+     *       }
+     *     },
+     *     error: (error) => {
+     *       console.error('Error de red:', error);
+     *     }
+     *   });
+     * ```
+     *
+     * 📝 **Parámetros:**
+     * @param url - URL del endpoint de descarga.
+     * @param options - Opciones adicionales para la solicitud.
+     * @param options.params - Parámetros de consulta (Query params). Soporta:
+     *   - `string`: valor simple
+     *   - `string[]`: múltiples valores para el mismo parámetro
+     *   - `Date`: se convierte automáticamente a ISO string
+     *   - `number`: se convierte a string
+     *   - `HttpParams`: instancia directamente
+     * @param options.headers - Headers HTTP personalizados (HttpHeaders).
+     * @param options.withCredentials - Enviar cookies/credenciales en la solicitud.
+     *
+     * 🔍 **Estructura de Retorno:**
+     * ```typescript
+     * Observable<ServiceResult<FileData>>
+     * ```
+     *
+     * Donde `ServiceResult<FileData>` tiene:
+     * ```typescript
+     * {
+     *   data: {
+     *     blob: Blob,        // El archivo como Blob
+     *     fileName: string   // Nombre del archivo (con extensión)
+     *   } | null,
+     *   isSuccess: boolean,  // Indica si la operación fue exitosa
+     *   title: string,       // Título del resultado (éxito o error)
+     *   message: string      // Mensaje descriptivo
+     * }
+     * ```
+     *
+     * ⚠️ **Notas Importantes:**
+     * - El método siempre retorna un Observable que emite un ServiceResult.
+     * - Nunca emite error en el Observable (los errores se convierten a ServiceResult con isSuccess: false).
+     * - Para descarga automática usar `processFileResult(result, false)`.
+     * - Para visualización de PDF usar `processFileResult(result, true)`.
+     * - El nombre del archivo se determina en este orden de prioridad:
+     *   1. `Content-Disposition` header (si existe)
+     *   2. `fileDownloadName` del JSON (si es respuesta JSON)
+     *   3. `fileName` del JSON (si es respuesta JSON)
+     *   4. Valor por defecto: 'document'
+     *
+     * 💡 **Ejemplos de Uso Adicionales:**
+     *
+     * ```typescript
+     * // Con parámetros de consulta
+     * const options = {
+     *   params: {
+     *     id: 123,
+     *     formato: 'pdf',
+     *     fechas: ['2024-01-01', '2024-12-31']
+     *   }
+     * };
+     * this.resultFileService.getDownloadableFile('/api/reportes', options)
+     *   .subscribe(result => {
+     *     this.resultFileService.processFileResult(result);
+     *   });
+     *
+     * // Con headers personalizados (ej: autenticación)
+     * const options = {
+     *   headers: new HttpHeaders({
+     *     'Authorization': 'Bearer ' + token,
+     *     'X-Custom-Header': 'valor'
+     *   })
+     * };
+     * this.resultFileService.getDownloadableFile('/api/documentos', options)
+     *   .subscribe(result => {
+     *     this.resultFileService.processFileResult(result);
+     *   });
+     *
+     * // Con credenciales
+     * const options = {
+     *   withCredentials: true
+     * };
+     * this.resultFileService.getDownloadableFile('/api/documentos', options)
+     *   .subscribe(result => {
+     *     this.resultFileService.processFileResult(result);
+     *   });
+     * ```
+     *
+     * 🚀 **Flujo de Trabajo Típico:**
+     * 1. Llamar a `getDownloadableFile(url, options)` con la URL del endpoint.
+     * 2. Suscribirse al Observable.
+     * 3. En el `next`, recibir el `ServiceResult<FileData>`.
+     * 4. Usar `processFileResult(result, visualizar)` para:
+     *    - Descargar automáticamente (visualizar: false)
+     *    - Visualizar PDF en nueva pestaña (visualizar: true)
+     * 5. Alternativamente, procesar el blob manualmente si se necesita.
      *
-     * Nota de integración backend:
-     * - Para nombre de archivo en binario directo, enviar Content-Disposition.
-     * - Para mensajes de éxito, enviar x-title/x-message o title/message en JSON.
-     * - Si se envía JSON serializado, incluir los campos de FileContentResult.
+     * @see processFileResult - Para descargar o visualizar el archivo obtenido.
+     * @see FileData - Estructura de datos del archivo.
+     * @see BlobRequestOptions - Opciones de configuración para la solicitud.
+     * @see ServiceResult - Estructura de resultado estandarizada.
      */
     getDownloadableFile(url, options = {}) {
         return this.http
@@ -10056,25 +11099,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }] });
 
 class SweetAlert2DialogService {
-    /**
-     * Configuración del entorno inyectada (opcional).
-     * Se usa para obtener el tema global de SweetAlert2 desde el environment.
-     */
     environment = inject(ENVIRONMENT, { optional: true });
-    /**
-     * Tema visual por defecto para todas las alertas SweetAlert2.
-     * Se inicializa desde el environment si está configurado, o puede establecerse
-     * manualmente llamando a setDefaultTheme().
-     *
-     * **Prioridad de temas:**
-     * 1. Tema específico pasado en options de cada alerta
-     * 2. Tema establecido con setDefaultTheme()
-     * 3. Tema configurado en environment.sweetAlertTheme
-     * 4. Tema por defecto de SweetAlert2
-     */
     defaultTheme = undefined;
+    NATIVE_ICONS = [
+        'success',
+        'error',
+        'warning',
+        'info',
+        'question',
+    ];
     constructor() {
-        // Inicializar el tema desde el environment si está disponible
         if (this.environment?.sweetAlertTheme) {
             const allowed = SWEET_ALERT_THEMES;
             const themeValue = this.environment.sweetAlertTheme;
@@ -10094,59 +11128,102 @@ class SweetAlert2DialogService {
             img.onerror = (err) => reject(err);
         });
     }
-    // 4. Implementación real del método
-    // 5. Implementación unificada final
-    Dialog(firstParam, text, icoOrIcono, options = {}) {
+    // Implementación unificada
+    Dialog(firstParam, text, secondOrThird, thirdOrOptions) {
         let title = '';
-        let finalOptions = { ...options };
-        let finalIcoOrIcono = icoOrIcono;
-        // DETECTAR SI EL PRIMER PARÁMETRO ES EL OBJETO COMPLETO
+        let messageContent = '';
+        let options = {};
+        let iconFromParam = null;
+        let imageFromOptions = null;
+        // === PROCESAR PARÁMETROS ===
         if (typeof firstParam === 'object' && firstParam !== null) {
-            const { title: cTitle, message: cMessage, icon, icono, ...cOptions } = firstParam;
-            title = cTitle;
-            text = cMessage;
-            finalIcoOrIcono = icon || icono || '';
-            finalOptions = { ...cOptions };
+            // Caso 1: ActionMessageConfig
+            const config = firstParam;
+            title = config.title;
+            messageContent = config.message;
+            // Extraer opciones
+            const { title: _title, message: _message, icon: _icon, icono: _icono, html: _html, footer: _footer, ...restOptions } = config;
+            options = { ...restOptions };
+            if (_html)
+                options.html = _html;
+            if (_footer)
+                options.footer = _footer;
+            // ✅ Si hay icono en el config, es el parámetro
+            if (config.icon) {
+                iconFromParam = config.icon;
+            }
+            // ✅ Si hay icono personalizado en el config
+            if (config.icono) {
+                imageFromOptions = config.icono;
+            }
         }
         else {
+            // Caso 2, 3, 4: Parámetros tradicionales
             title = firstParam;
-        }
-        // A partir de aquí, tu lógica interna se mantiene exactamente igual usando las variables normalizadas
-        let ico = null;
-        let iconoImg = null;
-        if (finalIcoOrIcono) {
-            const nativeIcons = [
-                'success',
-                'error',
-                'warning',
-                'info',
-                'question',
-            ];
-            if (nativeIcons.includes(finalIcoOrIcono)) {
-                ico = finalIcoOrIcono;
+            messageContent = text || '';
+            // Determinar qué tipo de parámetros tenemos
+            if (secondOrThird !== undefined && secondOrThird !== null) {
+                if (typeof secondOrThird === 'string') {
+                    // ✅ Es un icono nativo (Caso 4)
+                    if (this.NATIVE_ICONS.includes(secondOrThird)) {
+                        iconFromParam = secondOrThird;
+                    }
+                    options = thirdOrOptions || {};
+                }
+                else if (typeof secondOrThird === 'object') {
+                    // ✅ Son opciones (Caso 3)
+                    options = secondOrThird;
+                    // ✅ Si hay icono personalizado en options
+                    if (options.icono) {
+                        imageFromOptions = options.icono;
+                    }
+                }
             }
             else {
-                iconoImg = finalIcoOrIcono;
+                // Solo título y texto (Caso 2)
+                options = thirdOrOptions || {};
+                if (options.icono) {
+                    imageFromOptions = options.icono;
+                }
             }
         }
-        // Configuración por defecto de botones y estilos
-        const { confirmButtonText = `Aceptar!`, cancelButtonText = `Cancelar`, showCloseButton = true, showCancelButton = true, imageWidth = 150, imageHeight = 150, theme, ...rest } = finalOptions;
+        // ✅ PRIORIDAD: imageFromOptions (imagen) > iconFromParam (icono nativo)
+        let ico = null;
+        let iconoImg = null;
+        // 1. Si hay imagen en options, usarla (máxima prioridad)
+        if (imageFromOptions) {
+            iconoImg = imageFromOptions;
+        }
+        // 2. Si hay icono en el parámetro, usarlo
+        else if (iconFromParam) {
+            ico = iconFromParam;
+        }
+        // === CONFIGURACIÓN DE LA ALERTA ===
+        const { confirmButtonText = 'Aceptar', cancelButtonText = 'Cancelar', showCloseButton = true, showCancelButton = true, imageWidth = 150, imageHeight = 150, theme, ...rest } = options;
         const alertTheme = theme !== undefined ? theme : this.defaultTheme;
+        // === CONSTRUIR FOOTER ===
         const year = new Date().getFullYear();
-        const baseFooter = this.environment?.sweetAlertFooter ?? 'DEVSOFTXela';
-        const footer = `${baseFooter} <strong>${year}</strong>`;
+        const footerText = options.footer ?? this.environment?.sweetAlertFooter ?? 'DEVSOFTXela';
+        const footer = `${footerText} <strong>${year}</strong>`;
+        // === CONSTRUIR CONFIGURACIÓN DE SWEETALERT ===
         const alertConfig = {
             title,
-            html: text,
             footer,
             showCloseButton,
             showCancelButton,
             confirmButtonText,
             cancelButtonText,
-            //reverseButtons: true,
             ...(alertTheme !== undefined && { theme: alertTheme }),
             ...rest,
         };
+        // === PRIORIDAD DEL CONTENIDO HTML ===
+        if (options.html) {
+            alertConfig.html = options.html;
+        }
+        else if (messageContent) {
+            alertConfig.html = messageContent;
+        }
+        // === IMAGEN O ICONO ===
         if (iconoImg) {
             alertConfig.imageUrl = `/${iconoImg}`;
             alertConfig.imageWidth = imageWidth;
@@ -10170,6 +11247,320 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+class DsxMessagesService {
+    AlertaService = inject(AlertaService);
+    SweetDialog = inject(SweetAlert2DialogService);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Obtiene los datos de un FormGroup excluyendo TODAS las propiedades de tipo File
+ *
+ * @param form - FormGroup del cual extraer los datos
+ * @returns Objeto con los datos (sin archivos) y la lista de archivos encontrados
+ *
+ * @internal
+ */
+function getFormDataExcludingFiles(form) {
+    const rawValue = form.getRawValue();
+    const entries = Object.entries(rawValue);
+    const files = [];
+    const data = {};
+    for (const [key, value] of entries) {
+        if (value instanceof File) {
+            files.push(value);
+        }
+        else {
+            data[key] = value;
+        }
+    }
+    return { data: data, files };
+}
+/**
+ * Servicio para guardar entidades y subir archivos automáticamente.
+ *
+ * Este servicio centraliza el flujo común de:
+ * 1. Extraer automáticamente el archivo del FormGroup (por tipo `File`)
+ * 2. Guardar la entidad (sin el archivo) en la base de datos
+ * 3. Si el guardado es exitoso y hay archivo, subirlo
+ * 4. Manejar errores de forma consistente
+ * 5. Resetear el formulario automáticamente en caso de éxito
+ *
+ * @example
+ * // En tu componente:
+ *
+ * // Guardar sin archivo
+ * this._saveEntityPostFile.saveOnly(
+ *   this.form,
+ *   this._baseService.save.bind(this._baseService),
+ *   (response) => {
+ *     this.formState.emit(response);
+ *   }
+ * );
+ *
+ * // Guardar con archivo (se extrae automáticamente)
+ * this._saveEntityPostFile.saveWithFile(
+ *   this.form,
+ *   this._baseService.save.bind(this._baseService),
+ *   this._baseService.AdjuntarSoporte.bind(this._baseService),
+ *   (response) => {
+ *     this.formState.emit(response);
+ *   }
+ * );
+ */
+class SaveEntityPostFileService {
+    /** Servicio para mostrar mensajes al usuario */
+    _dsxMessageService = inject(DsxMessagesService);
+    /** Configuración del entorno (para controlar debug) */
+    environment = inject(ENVIRONMENT);
+    /**
+     * Determina si el debug está activo
+     *
+     * @param debug - Solicitud explícita de debug
+     * @returns `true` solo si `debug=true` Y no estamos en producción
+     *
+     * @internal
+     */
+    shouldLog(debug) {
+        return debug && !this.environment.production;
+    }
+    /**
+     * Guarda una entidad Y sube automáticamente el archivo extraído del FormGroup.
+     *
+     * El servicio extrae automáticamente el archivo del FormGroup (por tipo `File`),
+     * lo excluye del objeto que se envía al backend, y después de guardar
+     * exitosamente, procede a subir el archivo usando el ID generado.
+     *
+     * @param form - FormGroup que contiene los datos del formulario
+     * @param saveMethod - Método de save que recibe los datos (sin archivo)
+     * @param uploadMethod - Método de upload que recibe (id, file) y retorna Observable
+     * @param onSuccess - Callback de éxito (opcional)
+     * @param onError - Callback de error (opcional)
+     * @param resetForm - Función para resetear el formulario (opcional)
+     * @param debug - Activa logs en consola (solo funciona en desarrollo). Por defecto `false`.
+     *
+     * @example
+     * // Uso básico
+     * this._saveEntityPostFile.saveWithFile(
+     *   this.form,
+     *   this._baseService.save.bind(this._baseService),
+     *   this._baseService.AdjuntarSoporte.bind(this._baseService),
+     *   (response) => {
+     *     this.formState.emit(response);
+     *   }
+     * );
+     *
+     * @example
+     * // Con reset personalizado
+     * this._saveEntityPostFile.saveWithFile(
+     *   this.form,
+     *   this._baseService.save.bind(this._baseService),
+     *   this._baseService.AdjuntarSoporte.bind(this._baseService),
+     *   (response) => {
+     *     this.formState.emit(response);
+     *   },
+     *   (error) => {
+     *     console.error('Error:', error);
+     *   },
+     *   () => {
+     *     this.form.reset();
+     *     this.getForm();
+     *     this.cleanFileInput();
+     *   }
+     * );
+     */
+    saveWithFile(form, saveMethod, uploadMethod, deleteMethod, onSuccess, onError, resetForm, debug = false) {
+        this.execute(form, saveMethod, uploadMethod, deleteMethod, onSuccess, onError, resetForm, debug);
+    }
+    /**
+     * Ejecuta el flujo completo de guardado y subida de archivo.
+     *
+     * Este método es privado y contiene la lógica central del servicio.
+     *
+     * ## Flujo de ejecución:
+     * 1. Extrae el archivo del FormGroup (por tipo `File`)
+     * 2. Construye el objeto de datos sin el archivo
+     * 3. Ejecuta el `saveMethod` con los datos limpios
+     * 4. Si el save es exitoso y hay archivo, ejecuta el `uploadMethod`
+     * 5. Si todo es exitoso, ejecuta `resetForm` y `onSuccess`
+     * 6. Si hay error en cualquier paso, ejecuta `onError`
+     *
+     * @param form - FormGroup que contiene los datos del formulario
+     * @param saveMethod - Método de save que recibe los datos (sin archivo)
+     * @param uploadMethod - Método de upload que recibe (id, file) (opcional)
+     * @param onSuccess - Callback de éxito (opcional)
+     * @param onError - Callback de error (opcional)
+     * @param resetForm - Función para resetear el formulario (opcional)
+     * @param debug - Activa logs en consola (solo funciona en desarrollo)
+     *
+     * @internal
+     */
+    execute(form, saveMethod, uploadMethod, deleteMethod, onSuccess, onError, resetForm, debug = false) {
+        const log = this.shouldLog(debug);
+        // 1️⃣ Extraer archivo y datos del FormGroup
+        const { data: saveData, files } = getFormDataExcludingFiles(form);
+        const fileUpload = files.length > 0 ? files[0] : null;
+        if (log) {
+            console.group('📤 [SaveEntityPostFile] Preparando datos');
+            console.log('📄 Datos a guardar (sin archivo):', saveData);
+            console.log('📎 Archivo encontrado:', fileUpload?.name || 'Ninguno');
+            console.groupEnd();
+        }
+        // 2️⃣ Crear el observable del save con los datos sin archivo
+        const save$ = saveMethod(saveData);
+        // 3️⃣ Ejecutar el flujo completo
+        save$.subscribe({
+            next: (saveResult) => {
+                // 📥 Log del save
+                if (log) {
+                    console.group('📥 [SaveEntityPostFile] Respuesta del save');
+                    console.log('Resultado:', saveResult);
+                    console.groupEnd();
+                }
+                // ❌ Si el guardado falla
+                if (!saveResult.isSuccess) {
+                    this._dsxMessageService.SweetDialog.Dialog(saveResult.title || 'Error', saveResult.message || 'Error al guardar los datos', 'error', { showConfirmButton: true, showCancelButton: false });
+                    onError?.(saveResult);
+                    return;
+                }
+                // ✅ Si el guardado es exitoso y hay archivo
+                if (uploadMethod && fileUpload && saveResult.data) {
+                    if (log)
+                        console.log('📤 [SaveEntityPostFile] Subiendo archivo...');
+                    uploadMethod(saveResult.data, fileUpload).subscribe({
+                        next: (uploadResult) => {
+                            // 📥 Log del upload
+                            if (log) {
+                                console.group('📥 [SaveEntityPostFile] Respuesta del upload');
+                                console.log('Resultado:', uploadResult);
+                                console.groupEnd();
+                            }
+                            if (uploadResult.isSuccess) {
+                                // ✅ Éxito: guardado + archivo
+                                if (log)
+                                    console.log('✅ [SaveEntityPostFile] Subida exitosa');
+                                resetForm?.();
+                                onSuccess?.(uploadResult);
+                            }
+                            else {
+                                // ❌ Error en la subida
+                                if (log)
+                                    console.warn('⚠️ [SaveEntityPostFile] Subida falló');
+                                const htmlContent = `
+                    <div style="text-align: left; font-family: -apple-system, system-ui, sans-serif;">
+                      
+                      <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 12px;">
+                        <span style="font-size: 22px;">⚠️</span>
+                        <span style="font-size: 17px; font-weight: 600; color: #1a1a1a;">Archivo no subido</span>
+                      </div>
+
+                      <p style="color: #555; font-size: 14px; line-height: 1.5; margin: 0 0 8px 0;">
+                        El registro se guardó, pero el archivo falló.
+                      </p>
+
+                      <div style="background: #f8f4ec; padding: 6px 12px; border-radius: 4px; margin: 6px 0 14px 0;">
+                        <span style="color: #7a6b4a; font-size: 13px;">
+                          <strong>Motivo:</strong> ${uploadResult.message}
+                        </span>
+                      </div>
+
+                      <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee;">
+                        <p style="font-weight: 500; color: #1a1a1a; font-size: 13px; margin: 0 0 6px 0;">
+                          ¿Qué deseas hacer?
+                        </p>
+                        <div style="font-size: 13px; color: #555; line-height: 1.7;">
+                          <div>📁 Guardar sin archivo <span style="color: #999; font-size: 12px;">(subir después)</span></div>
+                          <div>🗑️ Eliminar registro <span style="color: #999; font-size: 12px;">(corregir y reintentar)</span></div>
+                        </div>
+                      </div>
+
+                    </div>`;
+                                this._dsxMessageService.SweetDialog.Dialog(uploadResult.title || 'Error', '', 'error', {
+                                    html: htmlContent,
+                                    showConfirmButton: true,
+                                    confirmButtonText: 'Guardar',
+                                    showCancelButton: true,
+                                    cancelButtonText: 'Eliminar',
+                                }).then((isConfirmed) => {
+                                    if (isConfirmed) {
+                                        if (log)
+                                            console.warn('⚠️ [SaveEntityPostFile] Se conservo el registro');
+                                        resetForm?.();
+                                        onSuccess?.(saveResult);
+                                    }
+                                    else {
+                                        if (log)
+                                            console.warn('❌ [SaveEntityPostFile] Se elimino el registro');
+                                        // 2️⃣ Crear el observable del save con los datos sin archivo
+                                        const delete$ = deleteMethod(saveResult.data, false);
+                                        delete$.subscribe({
+                                            next: (deleteResult) => {
+                                                // 📥 Log del save
+                                                if (log) {
+                                                    console.group('📥 [SaveEntityPostFile] Respuesta del delete');
+                                                    console.log('Resultado:', deleteResult);
+                                                    console.groupEnd();
+                                                }
+                                                if (deleteResult.isSuccess) {
+                                                    if (log)
+                                                        console.log('✅ [SaveEntityPostFile] Registro eliminado');
+                                                    onSuccess?.(deleteResult);
+                                                }
+                                                else {
+                                                    this._dsxMessageService.SweetDialog.Dialog('❌ Error al eliminar', deleteResult.message ||
+                                                        'No se pudo eliminar el registro.', 'error', {
+                                                        showConfirmButton: true,
+                                                        showCancelButton: false,
+                                                    });
+                                                    onError?.(deleteResult);
+                                                }
+                                            },
+                                            error: (err) => console.warn(err),
+                                            complete: () => '',
+                                        });
+                                    }
+                                });
+                                onError?.(uploadResult);
+                            }
+                        },
+                        error: (uploadError) => {
+                            // ❌ Error en la subida (excepción)
+                            console.warn('Error no controlado en upload:', uploadError);
+                            onError?.(uploadError);
+                        },
+                    });
+                    return;
+                }
+                // ✅ Éxito sin archivo
+                if (log)
+                    console.log('✅ [SaveEntityPostFile] Proceso completado (sin archivo)');
+                resetForm?.();
+                onSuccess?.(saveResult);
+            },
+            error: (error) => {
+                // ❌ Error en el save (excepción)
+                console.warn('Error no controlado en save:', error);
+                onError?.(error);
+            },
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SaveEntityPostFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SaveEntityPostFileService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SaveEntityPostFileService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class NextToastNotifyService {
     // Configuraciones iniciales por defecto (ambos activados como en tus switches)
     defaultOptions = {
@@ -10213,8 +11604,10 @@ class ResultResponseService {
             else {
                 const guideHtml = this.buildAssociatedGuideHtml(response?.data);
                 const mainMessage = this.formatPrimaryAlertMessage(response.message);
-                this._sweetAlert2DialogService.Dialog(response.title, `${mainMessage}${guideHtml}`, // Se concatena limpiamente sin alterar la lógica
-                'icon/sign.png', {
+                this._sweetAlert2DialogService.Dialog(response.title, 
+                // Se concatena limpiamente sin alterar la lógica
+                `${mainMessage}${guideHtml}`, {
+                    icono: 'icon/sign.png',
                     showCancelButton: false,
                     showConfirmButton: true,
                 });
@@ -10260,10 +11653,407 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
+/**
+ * Servicio especializado para extraer y procesar archivos (Blob) desde respuestas del backend.
+ *
+ * 📋 **Propósito:**
+ * Este servicio actúa como un puente entre la respuesta del backend (normalizada como ServiceResult<FileData>)
+ * y el consumidor final, extrayendo el archivo (Blob) y su nombre de forma segura y validada.
+ *
+ * 🎯 **Cuándo usar este servicio:**
+ * - Cuando necesitas obtener el Blob y el nombre de archivo de un Observable<ServiceResult<FileData>>
+ * - Cuando quieres validar que el archivo existe y no está vacío antes de procesarlo
+ * - Cuando necesitas asegurar que el nombre del archivo tenga la extensión correcta
+ * - Cuando quieres un manejo de errores detallado y estructurado
+ *
+ * 🔄 **Flujo de Trabajo:**
+ * 1. El backend retorna un ServiceResult<FileData> (normalizado por getDownloadableFile)
+ * 2. Este servicio extrae el Blob y el fileName
+ * 3. Valida que el archivo exista y tenga contenido
+ * 4. Asegura que el nombre tenga la extensión correcta según el MIME type
+ * 5. Retorna un objeto con { blob, fileName } o un error estructurado
+ *
+ * 🔗 **Relación con otros servicios:**
+ * - **ResultFileService**: Proporciona el Observable<ServiceResult<FileData>> de entrada
+ * - **AlertaService**: Para mostrar mensajes al usuario
+ *
+ * @see ResultFileService - Servicio que realiza la petición HTTP
+ * @see FileData - Estructura de datos del archivo
+ * @see ServiceResult - Estructura de resultado estandarizada
+ * @see Blob - API nativa de Blob de JavaScript
+ */
+class ResultFileReturnBlobNameService {
+    /** Configuración del entorno (para controlar debug) */
+    environment = inject(ENVIRONMENT);
+    /**
+     * Extrae el Blob y el nombre de archivo de un Observable<ServiceResult<FileData>>,
+     * realizando validaciones exhaustivas y manejo de errores detallado.
+     *
+     * 📝 **Descripción:**
+     * Este método toma el Observable resultante de `getDownloadableFile` y extrae
+     * el archivo (Blob) y su nombre, validando que todo sea correcto antes de
+     * entregar el resultado al consumidor.
+     *
+     * 🔍 **Validaciones Realizadas:**
+     * 1. ✅ Resultado nulo o indefinido → Error: "El resultado es nulo o indefinido"
+     * 2. ✅ isSuccess = false → Error con title y message del backend
+     * 3. ✅ data es null → Error: "El resultado no contiene datos"
+     * 4. ✅ blob es null → Error: "El blob del archivo no está presente"
+     * 5. ✅ blob.size = 0 → Error: "El archivo descargado está vacío (0 bytes)"
+     * 6. ✅ Error de conexión → Error: "No se pudo obtener el archivo del servidor"
+     *
+     * 📁 **Gestión de Extensiones:**
+     * El método automáticamente asegura que el nombre del archivo tenga la extensión
+     * correcta basada en el MIME type. Si el nombre ya tiene extensión, la mantiene.
+     *
+     * 💡 **Ejemplos de Uso:**
+     *
+     * ```typescript
+     * // EJEMPLO 1: Uso básico con descarga automática
+     * const fileObservable = this.resultFileService.getDownloadableFile('/api/documentos/123');
+     *
+     * this.resultFileReturnBlobNameService.extractFileDataFromServiceResultEnhanced(fileObservable)
+     *   .subscribe({
+     *     next: ({ blob, fileName }) => {
+     *       // Descargar el archivo automáticamente
+     *       this.resultFileService.descargarBlob(blob, fileName);
+     *     },
+     *     error: (error) => {
+     *       // Error estructurado
+     *       this.alertaService.mostrarError(error.title, error.message);
+     *     }
+     *   });
+     *
+     * // EJEMPLO 2: Visualizar PDF
+     * const fileObservable = this.resultFileService.getDownloadableFile('/api/documentos/123');
+     *
+     * this.resultFileReturnBlobNameService.extractFileDataFromServiceResultEnhanced(fileObservable)
+     *   .subscribe({
+     *     next: ({ blob, fileName }) => {
+     *       // Crear URL para visualizar
+     *       const url = URL.createObjectURL(blob);
+     *       window.open(url, '_blank');
+     *     },
+     *     error: (error) => {
+     *       console.error('Error al visualizar:', error);
+     *     }
+     *   });
+     *
+     * // EJEMPLO 3: Procesamiento personalizado con validación
+     * const fileObservable = this.resultFileService.getDownloadableFile('/api/reportes', {
+     *   params: { formato: 'excel' }
+     * });
+     *
+     * this.resultFileReturnBlobNameService.extractFileDataFromServiceResultEnhanced(
+     *   fileObservable,
+     *   'reporte_generado'  // fallbackFileName
+     * ).subscribe({
+     *   next: ({ blob, fileName }) => {
+     *     // Procesar el blob según necesidades
+     *     if (fileName.endsWith('.xlsx')) {
+     *       this.procesarExcel(blob);
+     *     } else {
+     *       this.descargarArchivo(blob, fileName);
+     *     }
+     *   },
+     *   error: (error) => {
+     *     // Manejo detallado de errores
+     *     if (error.title === 'Archivo vacío') {
+     *       this.alertaService.advertencia('El archivo está vacío');
+     *     } else if (error.title === 'Error de conexión') {
+     *       this.alertaService.error('Error de red', 'Verifica tu conexión');
+     *     } else {
+     *       this.alertaService.error(error.title, error.message);
+     *     }
+     *   }
+     * });
+     *
+     * // EJEMPLO 4: Uso con loading state
+     * cargando = false;
+     *
+     * descargarDocumento(id: number): void {
+     *   this.cargando = true;
+     *   const fileObservable = this.resultFileService.getDownloadableFile(`/api/documentos/${id}`);
+     *
+     *   this.resultFileReturnBlobNameService.extractFileDataFromServiceResultEnhanced(
+     *     fileObservable,
+     *     `documento_${id}`
+     *   ).subscribe({
+     *     next: ({ blob, fileName }) => {
+     *       this.cargando = false;
+     *       this.resultFileService.descargarBlob(blob, fileName);
+     *       this.alertaService.exito('Descarga completada');
+     *     },
+     *     error: (error) => {
+     *       this.cargando = false;
+     *       this.alertaService.error('Error', error.message);
+     *     }
+     *   });
+     * }
+     *
+     * // EJEMPLO 5: Combinación con otros operadores RxJS
+     * const fileObservable = this.resultFileService.getDownloadableFile('/api/documentos/123');
+     *
+     * this.resultFileReturnBlobNameService.extractFileDataFromServiceResultEnhanced(fileObservable)
+     *   .pipe(
+     *     tap(({ blob, fileName }) => {
+     *       console.log(`Archivo: ${fileName}, Tamaño: ${blob.size} bytes`);
+     *     }),
+     *     delay(1000), // Simular procesamiento
+     *     map(({ blob, fileName }) => ({
+     *       blob,
+     *       fileName,
+     *       tipo: this.obtenerTipoArchivo(fileName)
+     *     }))
+     *   )
+     *   .subscribe(({ blob, fileName, tipo }) => {
+     *     console.log(`Tipo de archivo: ${tipo}`);
+     *   });
+     * ```
+     *
+     * @param fileObservable - Observable que emite un ServiceResult<FileData>
+     * @param fallbackFileName - Nombre alternativo si no se puede determinar el nombre (por defecto: 'archivo sin nombre')
+     *
+     * @returns Observable que emite un objeto con:
+     *   - blob: Blob - El archivo extraído
+     *   - fileName: string - Nombre del archivo con extensión
+     *   - headers?: HttpHeaders - Headers de la respuesta (opcional, actualmente no implementado)
+     *
+     * @throws {Object} En caso de error, emite un objeto con:
+     *   - success: false
+     *   - title: string - Título del error
+     *   - message: string - Mensaje descriptivo
+     *   - error?: any - Error original (en caso de error de conexión)
+     *
+     * @see ResultFileService.getDownloadableFile - Método que genera el Observable de entrada
+     * @see ResultFileService.descargarBlob - Para descargar el archivo extraído
+     * @see ResultFileService.PdfView - Para visualizar PDFs
+     */
+    extractFileDataFromServiceResultEnhanced(fileObservable, fallbackFileName = 'archivo sin nombre') {
+        return new Observable((observer) => {
+            fileObservable.subscribe({
+                next: (result) => {
+                    // Validación completa del resultado
+                    if (!result) {
+                        observer.error({
+                            success: false,
+                            title: 'Resultado nulo',
+                            message: 'El resultado es nulo o indefinido',
+                        });
+                        return;
+                    }
+                    if (!result.isSuccess) {
+                        observer.error({
+                            success: false,
+                            title: result.title || 'Error en la operación',
+                            message: result.message || 'El servidor reportó un error',
+                        });
+                        return;
+                    }
+                    if (!result.data) {
+                        observer.error({
+                            success: false,
+                            title: 'Datos no disponibles',
+                            message: 'El resultado no contiene datos',
+                        });
+                        return;
+                    }
+                    const blob = result.data.blob;
+                    if (!blob) {
+                        observer.error({
+                            success: false,
+                            title: 'Archivo no disponible',
+                            message: 'El blob del archivo no está presente',
+                        });
+                        return;
+                    }
+                    // Validar que el blob tenga tamaño
+                    if (blob.size === 0) {
+                        observer.error({
+                            success: false,
+                            title: 'Archivo vacío',
+                            message: 'El archivo descargado está vacío (0 bytes)',
+                        });
+                        return;
+                    }
+                    // Procesar nombre de archivo
+                    let fileName = result.data.fileName || fallbackFileName;
+                    fileName = this.ensureFileNameWithExtension(fileName, blob.type);
+                    // Log para debugging
+                    this.logIfNotProduction('✅ Archivo extraído exitosamente:', {
+                        tamaño: this.formatFileSize(blob.size),
+                        tipo: blob.type,
+                        nombre: fileName,
+                    });
+                    observer.next({
+                        blob: blob,
+                        fileName: fileName,
+                    });
+                    observer.complete();
+                },
+                error: (err) => {
+                    this.logIfNotProduction('❌ Error extrayendo archivo:', err);
+                    observer.error({
+                        success: false,
+                        title: 'Error de conexión',
+                        message: 'No se pudo obtener el archivo del servidor',
+                        error: err,
+                    });
+                },
+            });
+        });
+    }
+    /**
+     * Asegura que el nombre de archivo tenga una extensión válida.
+     *
+     * 📋 **Funcionamiento:**
+     * 1. Si el nombre ya tiene una extensión (contiene un punto), lo retorna sin cambios.
+     * 2. Si no tiene extensión, intenta obtenerla del MIME type.
+     * 3. Si se puede determinar la extensión, la agrega al nombre.
+     * 4. Si no se puede determinar, retorna el nombre sin cambios.
+     *
+     * 💡 **Ejemplos:**
+     * - `ensureFileNameWithExtension('documento', 'application/pdf')` → `'documento.pdf'`
+     * - `ensureFileNameWithExtension('foto', 'image/jpeg')` → `'foto.jpg'`
+     * - `ensureFileNameWithExtension('archivo.txt', 'text/plain')` → `'archivo.txt'` (ya tiene extensión)
+     * - `ensureFileNameWithExtension('reporte', 'application/unknown')` → `'reporte'`
+     *
+     * @param fileName - Nombre del archivo (puede o no tener extensión)
+     * @param mimeType - Tipo MIME del archivo
+     * @returns Nombre del archivo con extensión (si fue posible determinarla)
+     */
+    ensureFileNameWithExtension(fileName, mimeType) {
+        // Si ya tiene extensión, retornarlo
+        if (fileName.includes('.')) {
+            return fileName;
+        }
+        // Obtener extensión del MIME type
+        const extension = this.getExtensionFromMimeType(mimeType);
+        return extension ? `${fileName}.${extension}` : fileName;
+    }
+    /**
+     * Obtiene la extensión del archivo basado en el MIME type.
+     *
+     * 📁 **Mapa de MIME Types Soportados:**
+     *
+     * | MIME Type | Extensión |
+     * |-----------|-----------|
+     * | application/pdf | pdf |
+     * | application/msword | doc |
+     * | application/vnd.openxmlformats-officedocument.wordprocessingml.document | docx |
+     * | application/vnd.ms-excel | xls |
+     * | application/vnd.openxmlformats-officedocument.spreadsheetml.sheet | xlsx |
+     * | application/vnd.ms-powerpoint | ppt |
+     * | application/vnd.openxmlformats-officedocument.presentationml.presentation | pptx |
+     * | image/jpeg | jpg |
+     * | image/png | png |
+     * | image/gif | gif |
+     * | text/plain | txt |
+     * | application/json | json |
+     * | application/zip | zip |
+     * | application/octet-stream | bin |
+     *
+     * 🔄 **Comportamiento:**
+     * 1. Busca el MIME type en el mapa predefinido.
+     * 2. Si lo encuentra, retorna la extensión correspondiente.
+     * 3. Si no lo encuentra, intenta extraer el subtipo del MIME (ej: 'pdf' de 'application/pdf').
+     * 4. Si el subtipo es 'octet-stream' o no se puede determinar, retorna 'file'.
+     *
+     * @param mimeType - Tipo MIME del archivo
+     * @returns Extensión del archivo (sin el punto) o 'file' si no se puede determinar
+     */
+    getExtensionFromMimeType(mimeType) {
+        const mimeMap = {
+            'application/pdf': 'pdf',
+            'application/msword': 'doc',
+            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'docx',
+            'application/vnd.ms-excel': 'xls',
+            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'xlsx',
+            'application/vnd.ms-powerpoint': 'ppt',
+            'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'pptx',
+            'image/jpeg': 'jpg',
+            'image/png': 'png',
+            'image/gif': 'gif',
+            'text/plain': 'txt',
+            'application/json': 'json',
+            'application/zip': 'zip',
+            'application/octet-stream': 'bin',
+        };
+        // Buscar extensión en el mapa
+        const extension = mimeMap[mimeType];
+        if (extension) {
+            return extension;
+        }
+        // Si no está en el mapa, intentar extraer del MIME type
+        const mimeParts = mimeType.split('/');
+        if (mimeParts.length === 2) {
+            const type = mimeParts[1];
+            if (type !== 'octet-stream') {
+                return type;
+            }
+        }
+        // Si no se puede determinar, devolver 'file'
+        return 'file';
+    }
+    /**
+     * Formatea el tamaño del archivo para logging.
+     *
+     * 📊 **Formato de Salida:**
+     * - Bytes: `"123 B"`
+     * - Kilobytes: `"1.5 KB"`
+     * - Megabytes: `"2.3 MB"`
+     * - Gigabytes: `"1.2 GB"`
+     *
+     * 💡 **Ejemplos:**
+     * - `formatFileSize(0)` → `"0 B"`
+     * - `formatFileSize(1024)` → `"1.00 KB"`
+     * - `formatFileSize(1536)` → `"1.50 KB"`
+     * - `formatFileSize(1048576)` → `"1.00 MB"`
+     *
+     * @param bytes - Tamaño en bytes
+     * @returns String formateado del tamaño
+     */
+    formatFileSize(bytes) {
+        if (bytes === 0)
+            return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+    }
+    /**
+     * Registra mensajes de log solo en entornos de desarrollo.
+     *
+     * 🛠️ **Comportamiento:**
+     * - En desarrollo (production = false): Muestra los logs en consola
+     * - En producción (production = true): No muestra nada
+     *
+     * 📝 **Uso Interno:**
+     * Se utiliza para depuración sin afectar el rendimiento en producción.
+     *
+     * @param args - Argumentos para mostrar en el log
+     */
+    logIfNotProduction(...args) {
+        if (!this.environment.production) {
+            console.log('[ResultFileService]', ...args);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ResultFileReturnBlobNameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ResultFileReturnBlobNameService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ResultFileReturnBlobNameService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class HelpersService {
     Array = inject(ArrayHelpersService);
+    ServiceEntityPostFile = inject(SaveEntityPostFileService);
     ServiceResultFile = inject(ResultFileService);
     ServiceResultResponse = inject(ResultResponseService);
+    ServiceResultFileReturnBlobName = inject(ResultFileReturnBlobNameService);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HelpersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: HelpersService, providedIn: 'root' });
 }
@@ -10721,19 +12511,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 }]
         }] });
 
-class DsxMessagesService {
-    AlertaService = inject(AlertaService);
-    SweetDialog = inject(SweetAlert2DialogService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DsxMessagesService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 // form-preview.service.ts
 class FormPreviewService {
     environment;
@@ -11980,5 +13757,5 @@ function sorensenDiceValidator(dataSource, key, umbral = 0.7) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, AppMessageHelpComponent, ArrowNavigationDirective, AuthorizeService, AutoScrollHeightDirective, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxAutocomplete, DsxButtonComponent, DsxEnableDisable, DsxInputCurrency, DsxMessagesService, DsxSelect, DsxStatusToggle, DsxdateShort, DteService, ENVIRONMENT, EndpointService, ErrorHandlerService, FileComponent, FormPreviewService, GTQFormatter, HeaderDsx, HelpersService, HttpHelpersService, INITIAL_PARAMETERS, IcoLabel, IconDsxComponent, JoinByPipe, JsonHighlightPipe, JsonValuesDebujComponent, JsonViewerComponent, KpicardComponent, LoadingComponent, LoadingLottieComponent, LogoDsxComponent, MasterDetailChangeService, NavbarDsxComponent, NetworkStatusComponent, OnlyRangoPatternDirective, ParameterValuesService, PdfPreviewComponent, PrimeNgModule, QrGenerator, ResultFileService, SWEET_ALERT_THEMES, ScreenInspector, SecurityService, SelectAllOnFocusDirective, SpinnerLoadingService, SweetAlert2DialogService, TablePreviewService, TemplateHighlight, TokenPurposeLogin, TruncatePipe, UtilityAddService, asyncExistsValidator, atLeastOneFieldRequiredValidator, chainControlGroups, createCurrencyFormatter, createInitialCache, createTypedCacheProvider, cuiValidator, dateMinMaxValidator, dateRangeValidator, dateRangeValidatorFromTo, developmentEnvironment, getActionMessageConfig, getZeroBasedRolIndex, guardTokenPurposeGuard, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, sorensenDiceValidator, templateStructureValidator, templateVariablesValidator, validateEnvironmentConfig };
+export { ACTION_TYPES, AlertaService, AppMessageErrorComponent, AppMessageHelpComponent, ArrowNavigationDirective, AuthorizeService, AutoScrollHeightDirective, BaseCRUDService, CACHE_KEYS, CacheService, CssV2Component, DSX_PALETTE, DateIndicator, DocxPreviewComponent, DsxAddToolsModule, DsxAutocomplete, DsxButtonComponent, DsxEnableDisable, DsxInputCurrency, DsxMessagesService, DsxSelect, DsxStatusToggle, DsxdateShort, DsxdateTime, DteService, ENVIRONMENT, EndpointService, ErrorHandlerService, FileComponent, FormPreviewService, GTQFormatter, HeaderDsx, HelpersService, HttpHelpersService, INITIAL_PARAMETERS, IcoLabel, IconDsxComponent, JoinByPipe, JsonHighlightPipe, JsonValuesDebujComponent, JsonViewerComponent, KpicardComponent, LoadingComponent, LoadingLottieComponent, LogoDsxComponent, MasterDetailChangeService, NavbarDsxComponent, NetworkStatusComponent, OnlyRangoPatternDirective, ParameterValuesService, PdfPreviewComponent, PrimeNgModule, QrGenerator, ResultFileService, SWEET_ALERT_THEMES, ScreenInspector, SecurityService, SelectAllOnFocusDirective, SpinnerLoadingService, SweetAlert2DialogService, TablePreviewService, TemplateHighlight, TokenPurposeLogin, TruncatePipe, UtilityAddService, asyncExistsValidator, atLeastOneFieldRequiredValidator, chainControlGroups, createCurrencyFormatter, createInitialCache, createTypedCacheProvider, cuiValidator, dateMinMaxValidator, dateRangeValidator, dateRangeValidatorFromTo, developmentEnvironment, getActionMessageConfig, getZeroBasedRolIndex, guardTokenPurposeGuard, httpAuthorizeInterceptor, minimumAgeValidator, nitValidator, productionEnvironment, provideEnvironment, sorensenDiceValidator, templateStructureValidator, templateVariablesValidator, validateEnvironmentConfig };
 //# sourceMappingURL=ngx-dsxlibrary.mjs.map