@cerca/design-system 1.0.2 → 1.0.4

package/fesm2022/cerca-design-system.mjs

@@ -224,6 +224,7 @@ class AdInputComponent {
     size = input('small', ...(ngDevMode ? [{ debugName: "size" }] : []));
     prefix = input(undefined, ...(ngDevMode ? [{ debugName: "prefix" }] : []));
     suffix = input(undefined, ...(ngDevMode ? [{ debugName: "suffix" }] : []));
+    mask = input(undefined, ...(ngDevMode ? [{ debugName: "mask" }] : []));
     value = '';
     passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : []));
     onChange = () => { };
@@ -234,19 +235,61 @@ class AdInputComponent {
         }
         return this.type();
     }, ...(ngDevMode ? [{ debugName: "inputType" }] : []));
+    isIcon(name) {
+        if (!name)
+            return false;
+        // Simple heuristic: if it contains '$' or is just one character, it's likely text
+        // In our system, icon names are usually strings like 'user', 'lock', etc.
+        // We can also check against a known set of icons if needed, but for now:
+        const knownIcons = ['user', 'lock', 'eye', 'plus', 'download', 'eye-invisible', 'email', 'person', 'search', 'logout', 'menu'];
+        return knownIcons.includes(name);
+    }
     onInputChange(event) {
         const target = event.target;
-        this.value = target.value;
-        this.onChange(this.value);
+        let val = target.value;
+        if (this.mask() === 'currency') {
+            // 1. Remove all non-numeric characters except the decimal separator (comma)
+            let cleanValue = val.replace(/[^\d,]/g, '');
+            // 2. Handle multiple commas (keep only the first one)
+            const parts = cleanValue.split(',');
+            if (parts.length > 2) {
+                cleanValue = parts[0] + ',' + parts.slice(1).join('');
+            }
+            // 3. Format for display (Thousand separators as dots)
+            const formatted = this.formatCurrencyDisplay(cleanValue);
+            target.value = formatted;
+            this.value = formatted;
+            // 4. Update the model with numeric value
+            const numericValue = parseFloat(cleanValue.replace(',', '.'));
+            this.onChange(isNaN(numericValue) ? null : numericValue);
+        }
+        else {
+            this.value = val;
+            this.onChange(this.value);
+        }
         this.onTouched();
     }
+    formatCurrencyDisplay(value) {
+        if (!value)
+            return '';
+        const parts = value.split(',');
+        // Add dots every 3 digits
+        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+        return parts.join(',');
+    }
     togglePasswordVisibility() {
         if (this.type() === 'password') {
             this.passwordVisible.update(visible => !visible);
         }
     }
     writeValue(value) {
-        this.value = value || '';
+        if (this.mask() === 'currency' && value !== undefined && value !== null) {
+            const stringValue = value.toString().replace('.', ',');
+            this.value = this.formatCurrencyDisplay(stringValue);
+        }
+        else {
+            this.value = value || '';
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -258,13 +301,13 @@ class AdInputComponent {
         this._disabled.set(isDisabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdInputComponent, isStandalone: true, selector: "ad-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdInputComponent, isStandalone: true, selector: "ad-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => AdInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "@if (label()) {\r\n<label class=\"block text-sm font-medium leading-6 text-slate-900 mb-2\">{{ label() }}</label>\r\n}\r\n\r\n<div class=\"flex items-center w-full rounded-md border border-slate-300 bg-white px-3 py-1.5 shadow-sm transition-all focus-within:border-cerca-primary\"\r\n    [class.bg-slate-50]=\"disabled\" [class.text-slate-500]=\"disabled\" [class.cursor-not-allowed]=\"disabled\"\r\n    [class.border-cerca-alert]=\"error()\" [class.text-cerca-alert-text]=\"error()\"\r\n    [class.focus-within:border-cerca-alert]=\"error()\">\r\n\r\n    @if (prefix()) {\r\n    <span class=\"mr-2 flex items-center\" [class.text-slate-500]=\"!error()\" [class.text-cerca-alert-text]=\"error()\">\r\n        <ad-icon [name]=\"prefix()!\" size=\"sm\"></ad-icon>\r\n    </span>\r\n    }\r\n\r\n    @if (type() === 'textarea') {\r\n    <textarea [rows]=\"rows()\" [placeholder]=\"placeholder()\" [disabled]=\"disabled\" [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"onChange($event)\" (blur)=\"onTouched()\"\r\n        class=\"block w-full border-0 p-0 text-slate-900 placeholder:text-slate-400 focus:ring-0 outline-none sm:text-sm sm:leading-6 bg-transparent disabled:cursor-not-allowed resize-none\"></textarea>\r\n    } @else {\r\n    <input [type]=\"inputType()\" [placeholder]=\"placeholder()\" [disabled]=\"disabled\" [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"onChange($event)\" (blur)=\"onTouched()\"\r\n        class=\"block w-full border-0 p-0 text-slate-900 placeholder:text-slate-400 focus:ring-0 outline-none sm:text-sm sm:leading-6 bg-transparent disabled:cursor-not-allowed\" />\r\n    }\r\n\r\n    @if (type() === 'password') {\r\n    <button type=\"button\" (click)=\"togglePasswordVisibility()\"\r\n        class=\"ml-2 text-slate-500 hover:text-slate-700 focus:outline-none cursor-pointer\">\r\n        <ad-icon [name]=\"passwordVisible() ? 'eye-invisible' : 'eye'\" size=\"sm\"></ad-icon>\r\n    </button>\r\n    }\r\n\r\n    @if (type() !== 'password' && suffix()) {\r\n    <span class=\"ml-2 text-slate-500 flex items-center\">\r\n        <ad-icon [name]=\"suffix()!\" size=\"sm\"></ad-icon>\r\n    </span>\r\n    }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AdIconComponent, selector: "ad-icon", inputs: ["name", "size", "color"] }] });
+        ], ngImport: i0, template: "@if (label()) {\r\n<label class=\"block text-sm font-medium leading-6 text-slate-900 mb-2\">{{ label() }}</label>\r\n}\r\n\r\n<div class=\"flex items-center w-full rounded-md border border-slate-300 bg-white px-3 py-1.5 shadow-sm transition-all focus-within:border-cerca-primary\"\r\n    [class.bg-slate-50]=\"disabled\" [class.text-slate-500]=\"disabled\" [class.cursor-not-allowed]=\"disabled\"\r\n    [class.border-cerca-alert]=\"error()\" [class.text-cerca-alert-text]=\"error()\"\r\n    [class.focus-within:border-cerca-alert]=\"error()\">\r\n\r\n    @if (prefix()) {\r\n    <span class=\"mr-2 flex items-center whitespace-nowrap\" [class.text-slate-500]=\"!error()\"\r\n        [class.text-cerca-alert-text]=\"error()\">\r\n        @if (isIcon(prefix())) {\r\n        <ad-icon [name]=\"prefix()!\" size=\"sm\"></ad-icon>\r\n        } @else {\r\n        <span class=\"text-sm font-medium\">{{ prefix() }}</span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n    @if (type() === 'textarea') {\r\n    <textarea [rows]=\"rows()\" [placeholder]=\"placeholder()\" [disabled]=\"disabled\" [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"onChange($event)\" (blur)=\"onTouched()\"\r\n        class=\"block w-full border-0 p-0 text-slate-900 placeholder:text-slate-400 focus:ring-0 outline-none sm:text-sm sm:leading-6 bg-transparent disabled:cursor-not-allowed resize-none\"></textarea>\r\n    } @else {\r\n    <input [type]=\"inputType()\" [placeholder]=\"placeholder()\" [disabled]=\"disabled\" [value]=\"value\"\r\n        (input)=\"onInputChange($event)\" (blur)=\"onTouched()\"\r\n        class=\"block w-full border-0 p-0 text-slate-900 placeholder:text-slate-400 focus:ring-0 outline-none sm:text-sm sm:leading-6 bg-transparent disabled:cursor-not-allowed\" />\r\n    }\r\n\r\n    @if (type() === 'password') {\r\n    <button type=\"button\" (click)=\"togglePasswordVisibility()\"\r\n        class=\"ml-2 text-slate-500 hover:text-slate-700 focus:outline-none cursor-pointer\">\r\n        <ad-icon [name]=\"passwordVisible() ? 'eye-invisible' : 'eye'\" size=\"sm\"></ad-icon>\r\n    </button>\r\n    }\r\n\r\n    @if (type() !== 'password' && suffix()) {\r\n    <span class=\"ml-2 text-slate-500 flex items-center\">\r\n        <ad-icon [name]=\"suffix()!\" size=\"sm\"></ad-icon>\r\n    </span>\r\n    }\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AdIconComponent, selector: "ad-icon", inputs: ["name", "size", "color"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdInputComponent, decorators: [{
             type: Component,
@@ -278,10 +321,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                             useExisting: forwardRef(() => AdInputComponent),
                             multi: true
                         }
-                    ], template: "@if (label()) {\r\n<label class=\"block text-sm font-medium leading-6 text-slate-900 mb-2\">{{ label() }}</label>\r\n}\r\n\r\n<div class=\"flex items-center w-full rounded-md border border-slate-300 bg-white px-3 py-1.5 shadow-sm transition-all focus-within:border-cerca-primary\"\r\n    [class.bg-slate-50]=\"disabled\" [class.text-slate-500]=\"disabled\" [class.cursor-not-allowed]=\"disabled\"\r\n    [class.border-cerca-alert]=\"error()\" [class.text-cerca-alert-text]=\"error()\"\r\n    [class.focus-within:border-cerca-alert]=\"error()\">\r\n\r\n    @if (prefix()) {\r\n    <span class=\"mr-2 flex items-center\" [class.text-slate-500]=\"!error()\" [class.text-cerca-alert-text]=\"error()\">\r\n        <ad-icon [name]=\"prefix()!\" size=\"sm\"></ad-icon>\r\n    </span>\r\n    }\r\n\r\n    @if (type() === 'textarea') {\r\n    <textarea [rows]=\"rows()\" [placeholder]=\"placeholder()\" [disabled]=\"disabled\" [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"onChange($event)\" (blur)=\"onTouched()\"\r\n        class=\"block w-full border-0 p-0 text-slate-900 placeholder:text-slate-400 focus:ring-0 outline-none sm:text-sm sm:leading-6 bg-transparent disabled:cursor-not-allowed resize-none\"></textarea>\r\n    } @else {\r\n    <input [type]=\"inputType()\" [placeholder]=\"placeholder()\" [disabled]=\"disabled\" [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"onChange($event)\" (blur)=\"onTouched()\"\r\n        class=\"block w-full border-0 p-0 text-slate-900 placeholder:text-slate-400 focus:ring-0 outline-none sm:text-sm sm:leading-6 bg-transparent disabled:cursor-not-allowed\" />\r\n    }\r\n\r\n    @if (type() === 'password') {\r\n    <button type=\"button\" (click)=\"togglePasswordVisibility()\"\r\n        class=\"ml-2 text-slate-500 hover:text-slate-700 focus:outline-none cursor-pointer\">\r\n        <ad-icon [name]=\"passwordVisible() ? 'eye-invisible' : 'eye'\" size=\"sm\"></ad-icon>\r\n    </button>\r\n    }\r\n\r\n    @if (type() !== 'password' && suffix()) {\r\n    <span class=\"ml-2 text-slate-500 flex items-center\">\r\n        <ad-icon [name]=\"suffix()!\" size=\"sm\"></ad-icon>\r\n    </span>\r\n    }\r\n</div>" }]
+                    ], template: "@if (label()) {\r\n<label class=\"block text-sm font-medium leading-6 text-slate-900 mb-2\">{{ label() }}</label>\r\n}\r\n\r\n<div class=\"flex items-center w-full rounded-md border border-slate-300 bg-white px-3 py-1.5 shadow-sm transition-all focus-within:border-cerca-primary\"\r\n    [class.bg-slate-50]=\"disabled\" [class.text-slate-500]=\"disabled\" [class.cursor-not-allowed]=\"disabled\"\r\n    [class.border-cerca-alert]=\"error()\" [class.text-cerca-alert-text]=\"error()\"\r\n    [class.focus-within:border-cerca-alert]=\"error()\">\r\n\r\n    @if (prefix()) {\r\n    <span class=\"mr-2 flex items-center whitespace-nowrap\" [class.text-slate-500]=\"!error()\"\r\n        [class.text-cerca-alert-text]=\"error()\">\r\n        @if (isIcon(prefix())) {\r\n        <ad-icon [name]=\"prefix()!\" size=\"sm\"></ad-icon>\r\n        } @else {\r\n        <span class=\"text-sm font-medium\">{{ prefix() }}</span>\r\n        }\r\n    </span>\r\n    }\r\n\r\n    @if (type() === 'textarea') {\r\n    <textarea [rows]=\"rows()\" [placeholder]=\"placeholder()\" [disabled]=\"disabled\" [(ngModel)]=\"value\"\r\n        (ngModelChange)=\"onChange($event)\" (blur)=\"onTouched()\"\r\n        class=\"block w-full border-0 p-0 text-slate-900 placeholder:text-slate-400 focus:ring-0 outline-none sm:text-sm sm:leading-6 bg-transparent disabled:cursor-not-allowed resize-none\"></textarea>\r\n    } @else {\r\n    <input [type]=\"inputType()\" [placeholder]=\"placeholder()\" [disabled]=\"disabled\" [value]=\"value\"\r\n        (input)=\"onInputChange($event)\" (blur)=\"onTouched()\"\r\n        class=\"block w-full border-0 p-0 text-slate-900 placeholder:text-slate-400 focus:ring-0 outline-none sm:text-sm sm:leading-6 bg-transparent disabled:cursor-not-allowed\" />\r\n    }\r\n\r\n    @if (type() === 'password') {\r\n    <button type=\"button\" (click)=\"togglePasswordVisibility()\"\r\n        class=\"ml-2 text-slate-500 hover:text-slate-700 focus:outline-none cursor-pointer\">\r\n        <ad-icon [name]=\"passwordVisible() ? 'eye-invisible' : 'eye'\" size=\"sm\"></ad-icon>\r\n    </button>\r\n    }\r\n\r\n    @if (type() !== 'password' && suffix()) {\r\n    <span class=\"ml-2 text-slate-500 flex items-center\">\r\n        <ad-icon [name]=\"suffix()!\" size=\"sm\"></ad-icon>\r\n    </span>\r\n    }\r\n</div>" }]
         }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], disabled: [{
                 type: Input
-            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }] } });
+            }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }] } });
 
 class AdSelectComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -435,10 +478,10 @@ class DynamicFieldComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: DynamicFieldComponent, isStandalone: true, selector: "ad-dynamic-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <div class="mb-4" [formGroup]="form()">
+    <div [formGroup]="form()">
       <!-- Label -->
       @if (renderType !== 'checkbox' && renderType !== 'switch' && field().label) {
-        <label [for]="controlName" class="block text-sm font-medium leading-6 text-slate-900 dark:text-slate-200 mb-2">
+        <label [for]="controlName" class="block text-sm font-medium leading-6 text-slate-900 dark:text-slate-200 mb-1">
           {{ field().label }}
           @if (isRequired) { <span class="text-cerca-rose">*</span> }
         </label>
@@ -505,6 +548,16 @@ class DynamicFieldComponent {
                 [formControlName]="controlName"
                 [options]="getSwitchOptions()">
              </ad-switch>
+          }
+          @case ('currency') {
+            <ad-input
+              [formControlName]="controlName"
+              [placeholder]="placeholder"
+              type="text"
+              prefix="$"
+              mask="currency"
+              [disabled]="field().disabled || false">
+            </ad-input>
           }
            @case ('custom') {
               @if (getRenderer(controlName); as component) {
@@ -528,7 +581,7 @@ class DynamicFieldComponent {
         </p>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AdInputComponent, selector: "ad-input", inputs: ["type", "placeholder", "label", "error", "rows", "disabled", "size", "prefix", "suffix"] }, { kind: "component", type: AdSelectComponent, selector: "ad-select", inputs: ["options", "placeholder", "label", "size", "allowClear", "showSearch", "disabled"] }, { kind: "component", type: AdSwitchComponent, selector: "ad-switch", inputs: ["options", "disabled"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AdInputComponent, selector: "ad-input", inputs: ["type", "placeholder", "label", "error", "rows", "disabled", "size", "prefix", "suffix", "mask"] }, { kind: "component", type: AdSelectComponent, selector: "ad-select", inputs: ["options", "placeholder", "label", "size", "allowClear", "showSearch", "disabled"] }, { kind: "component", type: AdSwitchComponent, selector: "ad-switch", inputs: ["options", "disabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: DynamicFieldComponent, decorators: [{
             type: Component,
@@ -537,10 +590,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                     standalone: true,
                     imports: [CommonModule, ReactiveFormsModule, AdInputComponent, AdSelectComponent, AdSwitchComponent],
                     template: `
-    <div class="mb-4" [formGroup]="form()">
+    <div [formGroup]="form()">
       <!-- Label -->
       @if (renderType !== 'checkbox' && renderType !== 'switch' && field().label) {
-        <label [for]="controlName" class="block text-sm font-medium leading-6 text-slate-900 dark:text-slate-200 mb-2">
+        <label [for]="controlName" class="block text-sm font-medium leading-6 text-slate-900 dark:text-slate-200 mb-1">
           {{ field().label }}
           @if (isRequired) { <span class="text-cerca-rose">*</span> }
         </label>
@@ -607,6 +660,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                 [formControlName]="controlName"
                 [options]="getSwitchOptions()">
              </ad-switch>
+          }
+          @case ('currency') {
+            <ad-input
+              [formControlName]="controlName"
+              [placeholder]="placeholder"
+              type="text"
+              prefix="$"
+              mask="currency"
+              [disabled]="field().disabled || false">
+            </ad-input>
           }
            @case ('custom') {
               @if (getRenderer(controlName); as component) {
@@ -853,20 +916,27 @@ class AdFormRendererComponent {
     };
     getGridClass(props) {
         const classes = [];
-        // Base Span (Mobile/Default) mapped to MD because our grid starts at MD
+        // Helper to map 24-scale (AntD) to 12-scale (Tailwind)
+        const to12Scale = (val) => {
+            if (!val)
+                return 12;
+            return Math.max(1, Math.min(12, Math.round(val / 2)));
+        };
+        // Base Span (Mobile/Default)
         if (props?.span) {
-            classes.push(this.mdColSpanMap[props.span] || 'md:col-span-12');
+            const span12 = to12Scale(props.span);
+            classes.push(this.mdColSpanMap[span12] || 'md:col-span-12');
         }
         else {
             classes.push('md:col-span-12'); // Default full width
         }
         // LG Override
         if (props?.lg) {
-            classes.push(this.lgColSpanMap[props.lg]);
+            classes.push(this.lgColSpanMap[to12Scale(props.lg)]);
         }
         // XL Override
         if (props?.xl) {
-            classes.push(this.xlColSpanMap[props.xl]);
+            classes.push(this.xlColSpanMap[to12Scale(props.xl)]);
         }
         return classes.join(' ');
     }
@@ -893,7 +963,7 @@ class AdFormRendererComponent {
                 @switch (node.layoutType) {
                     
                     @case ('row') {
-                        <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start w-full md:col-span-12">
+                        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-start w-full md:col-span-12">
                             <ad-form-renderer [nodes]="node.children || []" [form]="form()"></ad-form-renderer>
                         </div>
                     }
@@ -971,7 +1041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                 @switch (node.layoutType) {
                     
                     @case ('row') {
-                        <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start w-full md:col-span-12">
+                        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-start w-full md:col-span-12">
                             <ad-form-renderer [nodes]="node.children || []" [form]="form()"></ad-form-renderer>
                         </div>
                     }
@@ -1034,7 +1104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                 }]
         }], propDecorators: { nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
 
-class FormEngineComponent {
+class AdFormEngineComponent {
     // Inputs (Signals)
     schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : []));
     model = input({}, ...(ngDevMode ? [{ debugName: "model" }] : []));
@@ -1084,14 +1154,14 @@ class FormEngineComponent {
     onCancel() {
         this.formCancel.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormEngineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: FormEngineComponent, isStandalone: true, selector: "ad-form-engine", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, showSubmit: { classPropertyName: "showSubmit", publicName: "showSubmit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdFormEngineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdFormEngineComponent, isStandalone: true, selector: "ad-form-engine", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, showSubmit: { classPropertyName: "showSubmit", publicName: "showSubmit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit", formCancel: "formCancel" }, ngImport: i0, template: `
         @if (form()) {
             <form [formGroup]="form()" class="space-y-6" (ngSubmit)="submit()">
                 
                 <!-- NEW: Recursive Schema Rendering -->
                 @if (schema().fields) {
-                    <div class="grid grid-cols-1 md:grid-cols-12 gap-6 w-full">
+                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 w-full">
                         <ad-form-renderer [nodes]="schema().fields!" [form]="form()"></ad-form-renderer>
                     </div>
                 }
@@ -1129,7 +1199,7 @@ class FormEngineComponent {
         }
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DynamicLayoutComponent, selector: "ad-dynamic-layout", inputs: ["field", "form"] }, { kind: "component", type: AdButtonComponent, selector: "ad-button", inputs: ["variant", "type", "disabled", "loading", "icon", "size", "block"] }, { kind: "component", type: AdFormRendererComponent, selector: "ad-form-renderer", inputs: ["nodes", "form"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: FormEngineComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdFormEngineComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ad-form-engine',
@@ -1141,7 +1211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                 
                 <!-- NEW: Recursive Schema Rendering -->
                 @if (schema().fields) {
-                    <div class="grid grid-cols-1 md:grid-cols-12 gap-6 w-full">
+                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 w-full">
                         <ad-form-renderer [nodes]="schema().fields!" [form]="form()"></ad-form-renderer>
                     </div>
                 }
@@ -1223,14 +1293,14 @@ class AdModalWrapperComponent {
         </div>
       }
     </ad-modal>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AdModalComponent, selector: "ad-modal", inputs: ["resource"], outputs: ["close"] }, { kind: "component", type: FormEngineComponent, selector: "ad-form-engine", inputs: ["schema", "model", "showCancel", "showSubmit"], outputs: ["formSubmit", "formCancel"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AdModalComponent, selector: "ad-modal", inputs: ["resource"], outputs: ["close"] }, { kind: "component", type: AdFormEngineComponent, selector: "ad-form-engine", inputs: ["schema", "model", "showCancel", "showSubmit"], outputs: ["formSubmit", "formCancel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdModalWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ad-modal-wrapper',
                     standalone: true,
-                    imports: [CommonModule, AdModalComponent, FormEngineComponent],
+                    imports: [CommonModule, AdModalComponent, AdFormEngineComponent],
                     template: `
     <ad-modal 
       [resource]="modalResource()"
@@ -1296,25 +1366,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
 
 class TableEngineComponent {
-    // Signals
-    schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : [])); // Optional if using columns directly, but Schema approach implies passing the whole schema object usually.
-    // Actually, keeping flexible to support both direct cols or schema.
-    // Let's support independent inputs for now to match old API but strict typed.
-    // Re-defining inputs to match Core Schema
+    schema = input.required(...(ngDevMode ? [{ debugName: "schema" }] : []));
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
     data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
     loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     total = input(0, ...(ngDevMode ? [{ debugName: "total" }] : []));
     pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
     pageIndex = input(1, ...(ngDevMode ? [{ debugName: "pageIndex" }] : []));
-    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : [])); // Parameterized actions
+    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
     queryParamsChange = output();
     action = output();
     Math = Math;
     displayColumns = computed(() => {
-        // Filter visible if property exists, or default true
-        // CoreTableColumn doesn't have is_v  displayColumns = computed(() => {
-        // Use schema columns if available, otherwise fallback to columns input
         return this.schema().columns || this.columns();
     }, ...(ngDevMode ? [{ debugName: "displayColumns" }] : []));
     hasActions = computed(() => {
@@ -1322,12 +1385,24 @@ class TableEngineComponent {
         const inputActions = this.actions();
         return schemaActions.length > 0 || inputActions.length > 0;
     }, ...(ngDevMode ? [{ debugName: "hasActions" }] : []));
-    // Helper to get combined actions
+    stickyActions = computed(() => {
+        return this.schema().stickyActions ?? false;
+    }, ...(ngDevMode ? [{ debugName: "stickyActions" }] : []));
     getActions = computed(() => {
         const schemaActions = this.schema().actions || [];
         const inputActions = this.actions();
         return [...schemaActions, ...inputActions];
     }, ...(ngDevMode ? [{ debugName: "getActions" }] : []));
+    /**
+     * Returns the box-shadow for a sticky column to create a visual separator
+     */
+    getStickyColumnShadow(sticky) {
+        if (sticky === 'left')
+            return '4px 0 8px -4px rgba(0,0,0,0.08)';
+        if (sticky === 'right')
+            return '-4px 0 8px -4px rgba(0,0,0,0.08)';
+        return null;
+    }
     mapVariant(color) {
         if (color === 'primary')
             return 'primary';
@@ -1353,96 +1428,120 @@ class TableEngineComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: TableEngineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: TableEngineComponent, isStandalone: true, selector: "ad-table-engine", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { queryParamsChange: "queryParamsChange", action: "action" }, ngImport: i0, template: `
     <div class="flow-root">
-      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-          <div class="relative">
-             @if (loading()) {
-                 <div class="absolute inset-0 bg-white/50 z-10 flex items-center justify-center">
-                     <svg class="animate-spin h-8 w-8 text-sky-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                     </svg>
-                 </div>
-             }
-             
-            <table class="min-w-full divide-y divide-slate-300">
-              <thead>
+      <!-- Scroll container: overflow-x-auto allows horizontal scroll, sticky works inside it -->
+      <div class="relative rounded-xl border border-slate-200/70 overflow-x-auto">
+         @if (loading()) {
+             <div class="absolute inset-0 bg-white/60 backdrop-blur-[1px] z-30 flex items-center justify-center">
+                 <svg class="animate-spin h-8 w-8 text-sky-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                 </svg>
+             </div>
+         }
+         
+        <table class="min-w-full">
+          <thead>
+            <tr class="bg-slate-50 border-b border-slate-200">
+              @for (column of displayColumns(); track column.key) {
+                    <th scope="col" 
+                        class="px-5 py-3.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider"
+                        [style.position]="column.sticky ? 'sticky' : null"
+                        [style.left]="column.sticky === 'left' ? '0' : null"
+                        [style.right]="column.sticky === 'right' ? '0' : null"
+                        [style.z-index]="column.sticky ? '20' : null"
+                        [style.background-color]="column.sticky ? '#f8fafc' : null"
+                        [style.box-shadow]="getStickyColumnShadow(column.sticky)"
+                        [style.width]="column.width || 'auto'"
+                        [style.min-width]="column.width || 'auto'"
+                        [style.max-width]="column.width || 'none'">
+                      {{ column.label }}
+                    </th>
+              }
+              @if (hasActions()) {
+                  <th scope="col" 
+                      class="px-5 py-3.5 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider"
+                      [style.position]="stickyActions() ? 'sticky' : null"
+                      [style.right]="stickyActions() ? '0' : null"
+                      [style.z-index]="stickyActions() ? '20' : null"
+                      [style.background-color]="stickyActions() ? '#f8fafc' : null"
+                      [style.box-shadow]="stickyActions() ? '-4px 0 8px -4px rgba(0,0,0,0.08)' : null">
+                    Acciones
+                  </th>
+              }
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-slate-100">
+            @for (item of data(); track item; let idx = $index) {
+              <tr class="hover:bg-slate-50/70 transition-colors duration-150 ease-in-out">
+                 @for (column of displayColumns(); track column.key) {
+                        <td class="whitespace-nowrap px-5 py-4 text-sm text-slate-600 truncate"
+                            [style.position]="column.sticky ? 'sticky' : null"
+                            [style.left]="column.sticky === 'left' ? '0' : null"
+                            [style.right]="column.sticky === 'right' ? '0' : null"
+                            [style.z-index]="column.sticky ? '10' : null"
+                            [style.background-color]="column.sticky ? '#ffffff' : null"
+                            [style.box-shadow]="getStickyColumnShadow(column.sticky)"
+                            [style.width]="column.width || 'auto'"
+                            [style.min-width]="column.width || 'auto'"
+                            [style.max-width]="column.width || 'none'">
+                            {{ item[column.key] }}
+                        </td>
+                 }
+                 @if (hasActions()) {
+                     <td class="whitespace-nowrap px-5 py-4 text-right text-sm"
+                         [style.position]="stickyActions() ? 'sticky' : null"
+                         [style.right]="stickyActions() ? '0' : null"
+                         [style.z-index]="stickyActions() ? '10' : null"
+                         [style.background-color]="stickyActions() ? '#ffffff' : null"
+                         [style.box-shadow]="stickyActions() ? '-4px 0 8px -4px rgba(0,0,0,0.08)' : null">
+                         <div class="flex justify-end items-center gap-2">
+                            @for (act of getActions(); track act.action) {
+                                <ad-button 
+                                    [variant]="mapVariant(act.color)" 
+                                    size="small"
+                                    (click)="onActionClick(act.action, item)">
+                                    @if (act.icon) {
+                                        <ad-icon [name]="act.icon" class="mr-1"></ad-icon>
+                                    }
+                                    {{ act.label }}
+                                </ad-button>
+
+                            }
+                         </div>
+                     </td>
+                 }
+              </tr>
+            }
+            @if (data().length === 0 && !loading()) {
                 <tr>
-                  <!-- Checkbox Column if selectable (Future) -->
-                  
-                  @for (column of displayColumns(); track column.key) {
-                        <th scope="col" 
-                            class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-slate-900 sm:pl-0"
-                            [style.width]="column.width || 'auto'">
-                          {{ column.label }}
-                        </th>
-                  }
-                  @if (hasActions()) {
-                      <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
-                        <span class="sr-only">Acciones</span>
-                      </th>
-                  }
+                    <td [attr.colspan]="displayColumns().length + (hasActions() ? 1 : 0)" 
+                        class="py-12 text-center">
+                        <div class="flex flex-col items-center gap-2">
+                            <span class="material-icons-outlined text-3xl text-slate-300">inbox</span>
+                            <p class="text-sm text-slate-400 font-medium">No hay datos disponibles</p>
+                        </div>
+                    </td>
                 </tr>
-              </thead>
-              <tbody class="divide-y divide-slate-200 bg-white">
-                @for (item of data(); track item) {
-                  <tr>
-                     @for (column of displayColumns(); track column.key) {
-                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-slate-500 sm:pl-0">
-                                <!-- Simple rendering for now. Registry support can be added here -->
-                                {{ item[column.key] }}
-                            </td>
-                     }
-                     @if (hasActions()) {
-                         <td class="whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
-                             <div class="flex justify-end gap-2">
-                                @for (act of getActions(); track act.action) {
-                                    <ad-button 
-                                        [variant]="mapVariant(act.color)" 
-                                        size="small"
-                                        (click)="onActionClick(act.action, item)">
-                                        @if (act.icon) {
-                                            <ad-icon [name]="act.icon" class="mr-1"></ad-icon>
-                                        }
-                                        {{ act.label }}
-                                    </ad-button>
-                                }
-                             </div>
-                         </td>
-                     }
-                  </tr>
-                }
-                @if (data().length === 0 && !loading()) {
-                    <tr>
-                        <td [attr.colspan]="displayColumns().length + (hasActions() ? 1 : 0)" class="py-8 text-center text-sm text-slate-500">
-                            No hay datos disponibles
-                        </td>
-                    </tr>
-                }
-              </tbody>
-            </table>
-          </div>
-        </div>
+            }
+          </tbody>
+        </table>
       </div>
       
       <!-- Pagination -->
-      <div class="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3 sm:px-6 mt-4">
-          <!-- Simplified Pagination for brevity, can be expanded -->
+      <div class="flex items-center justify-between px-2 py-4">
           <div class="flex flex-1 justify-between sm:hidden">
-            <ad-button variant="secondary" [disabled]="pageIndex() === 1" (click)="onPageChange(pageIndex() - 1)">Anterior</ad-button>
-            <ad-button variant="secondary" [disabled]="pageIndex() * pageSize() >= total()" (click)="onPageChange(pageIndex() + 1)">Siguiente</ad-button>
+            <ad-button variant="outline" [disabled]="pageIndex() === 1" (click)="onPageChange(pageIndex() - 1)">Anterior</ad-button>
+            <ad-button variant="outline" [disabled]="pageIndex() * pageSize() >= total()" (click)="onPageChange(pageIndex() + 1)">Siguiente</ad-button>
           </div>
             <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                 <div>
-                  <p class="text-sm text-slate-700">
-                    Mostrando <span class="font-medium">{{ (pageIndex() - 1) * pageSize() + 1 }}</span> a <span class="font-medium">{{ Math.min(pageIndex() * pageSize(), total()) }}</span> de <span class="font-medium">{{ total() }}</span> resultados
+                  <p class="text-sm text-slate-500">
+                    Mostrando <span class="font-semibold text-slate-700">{{ (pageIndex() - 1) * pageSize() + 1 }}</span> a <span class="font-semibold text-slate-700">{{ Math.min(pageIndex() * pageSize(), total()) }}</span> de <span class="font-semibold text-slate-700">{{ total() }}</span> resultados
                   </p>
                 </div>
-                 <div>
-                    <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
-                         <ad-button variant="secondary" class="rounded-l-md" [disabled]="pageIndex() === 1" (click)="onPageChange(pageIndex() - 1)">Ant</ad-button>
-                         <ad-button variant="secondary" class="rounded-r-md" [disabled]="pageIndex() * pageSize() >= total()" (click)="onPageChange(pageIndex() + 1)">Sig</ad-button>
-                    </nav>
+                 <div class="flex items-center gap-2">
+                     <ad-button variant="outline" size="small" [disabled]="pageIndex() === 1" (click)="onPageChange(pageIndex() - 1)">Ant</ad-button>
+                     <ad-button variant="outline" size="small" [disabled]="pageIndex() * pageSize() >= total()" (click)="onPageChange(pageIndex() + 1)">Sig</ad-button>
                  </div>
             </div>
       </div>
@@ -1457,96 +1556,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                     imports: [CommonModule, AdButtonComponent, AdIconComponent],
                     template: `
     <div class="flow-root">
-      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-          <div class="relative">
-             @if (loading()) {
-                 <div class="absolute inset-0 bg-white/50 z-10 flex items-center justify-center">
-                     <svg class="animate-spin h-8 w-8 text-sky-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                     </svg>
-                 </div>
-             }
-             
-            <table class="min-w-full divide-y divide-slate-300">
-              <thead>
+      <!-- Scroll container: overflow-x-auto allows horizontal scroll, sticky works inside it -->
+      <div class="relative rounded-xl border border-slate-200/70 overflow-x-auto">
+         @if (loading()) {
+             <div class="absolute inset-0 bg-white/60 backdrop-blur-[1px] z-30 flex items-center justify-center">
+                 <svg class="animate-spin h-8 w-8 text-sky-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                 </svg>
+             </div>
+         }
+         
+        <table class="min-w-full">
+          <thead>
+            <tr class="bg-slate-50 border-b border-slate-200">
+              @for (column of displayColumns(); track column.key) {
+                    <th scope="col" 
+                        class="px-5 py-3.5 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider"
+                        [style.position]="column.sticky ? 'sticky' : null"
+                        [style.left]="column.sticky === 'left' ? '0' : null"
+                        [style.right]="column.sticky === 'right' ? '0' : null"
+                        [style.z-index]="column.sticky ? '20' : null"
+                        [style.background-color]="column.sticky ? '#f8fafc' : null"
+                        [style.box-shadow]="getStickyColumnShadow(column.sticky)"
+                        [style.width]="column.width || 'auto'"
+                        [style.min-width]="column.width || 'auto'"
+                        [style.max-width]="column.width || 'none'">
+                      {{ column.label }}
+                    </th>
+              }
+              @if (hasActions()) {
+                  <th scope="col" 
+                      class="px-5 py-3.5 text-center text-xs font-semibold text-slate-500 uppercase tracking-wider"
+                      [style.position]="stickyActions() ? 'sticky' : null"
+                      [style.right]="stickyActions() ? '0' : null"
+                      [style.z-index]="stickyActions() ? '20' : null"
+                      [style.background-color]="stickyActions() ? '#f8fafc' : null"
+                      [style.box-shadow]="stickyActions() ? '-4px 0 8px -4px rgba(0,0,0,0.08)' : null">
+                    Acciones
+                  </th>
+              }
+            </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-slate-100">
+            @for (item of data(); track item; let idx = $index) {
+              <tr class="hover:bg-slate-50/70 transition-colors duration-150 ease-in-out">
+                 @for (column of displayColumns(); track column.key) {
+                        <td class="whitespace-nowrap px-5 py-4 text-sm text-slate-600 truncate"
+                            [style.position]="column.sticky ? 'sticky' : null"
+                            [style.left]="column.sticky === 'left' ? '0' : null"
+                            [style.right]="column.sticky === 'right' ? '0' : null"
+                            [style.z-index]="column.sticky ? '10' : null"
+                            [style.background-color]="column.sticky ? '#ffffff' : null"
+                            [style.box-shadow]="getStickyColumnShadow(column.sticky)"
+                            [style.width]="column.width || 'auto'"
+                            [style.min-width]="column.width || 'auto'"
+                            [style.max-width]="column.width || 'none'">
+                            {{ item[column.key] }}
+                        </td>
+                 }
+                 @if (hasActions()) {
+                     <td class="whitespace-nowrap px-5 py-4 text-right text-sm"
+                         [style.position]="stickyActions() ? 'sticky' : null"
+                         [style.right]="stickyActions() ? '0' : null"
+                         [style.z-index]="stickyActions() ? '10' : null"
+                         [style.background-color]="stickyActions() ? '#ffffff' : null"
+                         [style.box-shadow]="stickyActions() ? '-4px 0 8px -4px rgba(0,0,0,0.08)' : null">
+                         <div class="flex justify-end items-center gap-2">
+                            @for (act of getActions(); track act.action) {
+                                <ad-button 
+                                    [variant]="mapVariant(act.color)" 
+                                    size="small"
+                                    (click)="onActionClick(act.action, item)">
+                                    @if (act.icon) {
+                                        <ad-icon [name]="act.icon" class="mr-1"></ad-icon>
+                                    }
+                                    {{ act.label }}
+                                </ad-button>
+
+                            }
+                         </div>
+                     </td>
+                 }
+              </tr>
+            }
+            @if (data().length === 0 && !loading()) {
                 <tr>
-                  <!-- Checkbox Column if selectable (Future) -->
-                  
-                  @for (column of displayColumns(); track column.key) {
-                        <th scope="col" 
-                            class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-slate-900 sm:pl-0"
-                            [style.width]="column.width || 'auto'">
-                          {{ column.label }}
-                        </th>
-                  }
-                  @if (hasActions()) {
-                      <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-0">
-                        <span class="sr-only">Acciones</span>
-                      </th>
-                  }
+                    <td [attr.colspan]="displayColumns().length + (hasActions() ? 1 : 0)" 
+                        class="py-12 text-center">
+                        <div class="flex flex-col items-center gap-2">
+                            <span class="material-icons-outlined text-3xl text-slate-300">inbox</span>
+                            <p class="text-sm text-slate-400 font-medium">No hay datos disponibles</p>
+                        </div>
+                    </td>
                 </tr>
-              </thead>
-              <tbody class="divide-y divide-slate-200 bg-white">
-                @for (item of data(); track item) {
-                  <tr>
-                     @for (column of displayColumns(); track column.key) {
-                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-slate-500 sm:pl-0">
-                                <!-- Simple rendering for now. Registry support can be added here -->
-                                {{ item[column.key] }}
-                            </td>
-                     }
-                     @if (hasActions()) {
-                         <td class="whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0">
-                             <div class="flex justify-end gap-2">
-                                @for (act of getActions(); track act.action) {
-                                    <ad-button 
-                                        [variant]="mapVariant(act.color)" 
-                                        size="small"
-                                        (click)="onActionClick(act.action, item)">
-                                        @if (act.icon) {
-                                            <ad-icon [name]="act.icon" class="mr-1"></ad-icon>
-                                        }
-                                        {{ act.label }}
-                                    </ad-button>
-                                }
-                             </div>
-                         </td>
-                     }
-                  </tr>
-                }
-                @if (data().length === 0 && !loading()) {
-                    <tr>
-                        <td [attr.colspan]="displayColumns().length + (hasActions() ? 1 : 0)" class="py-8 text-center text-sm text-slate-500">
-                            No hay datos disponibles
-                        </td>
-                    </tr>
-                }
-              </tbody>
-            </table>
-          </div>
-        </div>
+            }
+          </tbody>
+        </table>
       </div>
       
       <!-- Pagination -->
-      <div class="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3 sm:px-6 mt-4">
-          <!-- Simplified Pagination for brevity, can be expanded -->
+      <div class="flex items-center justify-between px-2 py-4">
           <div class="flex flex-1 justify-between sm:hidden">
-            <ad-button variant="secondary" [disabled]="pageIndex() === 1" (click)="onPageChange(pageIndex() - 1)">Anterior</ad-button>
-            <ad-button variant="secondary" [disabled]="pageIndex() * pageSize() >= total()" (click)="onPageChange(pageIndex() + 1)">Siguiente</ad-button>
+            <ad-button variant="outline" [disabled]="pageIndex() === 1" (click)="onPageChange(pageIndex() - 1)">Anterior</ad-button>
+            <ad-button variant="outline" [disabled]="pageIndex() * pageSize() >= total()" (click)="onPageChange(pageIndex() + 1)">Siguiente</ad-button>
           </div>
             <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
                 <div>
-                  <p class="text-sm text-slate-700">
-                    Mostrando <span class="font-medium">{{ (pageIndex() - 1) * pageSize() + 1 }}</span> a <span class="font-medium">{{ Math.min(pageIndex() * pageSize(), total()) }}</span> de <span class="font-medium">{{ total() }}</span> resultados
+                  <p class="text-sm text-slate-500">
+                    Mostrando <span class="font-semibold text-slate-700">{{ (pageIndex() - 1) * pageSize() + 1 }}</span> a <span class="font-semibold text-slate-700">{{ Math.min(pageIndex() * pageSize(), total()) }}</span> de <span class="font-semibold text-slate-700">{{ total() }}</span> resultados
                   </p>
                 </div>
-                 <div>
-                    <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
-                         <ad-button variant="secondary" class="rounded-l-md" [disabled]="pageIndex() === 1" (click)="onPageChange(pageIndex() - 1)">Ant</ad-button>
-                         <ad-button variant="secondary" class="rounded-r-md" [disabled]="pageIndex() * pageSize() >= total()" (click)="onPageChange(pageIndex() + 1)">Sig</ad-button>
-                    </nav>
+                 <div class="flex items-center gap-2">
+                     <ad-button variant="outline" size="small" [disabled]="pageIndex() === 1" (click)="onPageChange(pageIndex() - 1)">Ant</ad-button>
+                     <ad-button variant="outline" size="small" [disabled]="pageIndex() * pageSize() >= total()" (click)="onPageChange(pageIndex() + 1)">Sig</ad-button>
                  </div>
             </div>
       </div>
@@ -1713,6 +1836,8 @@ class AdDescriptionHeaderComponent {
     subtitle = computed(() => this.resource().subtitle, ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
     buttons = computed(() => this.resource().buttons, ...(ngDevMode ? [{ debugName: "buttons" }] : []));
     showDivider = computed(() => this.resource().showDivider, ...(ngDevMode ? [{ debugName: "showDivider" }] : []));
+    backButton = computed(() => this.resource().backButton, ...(ngDevMode ? [{ debugName: "backButton" }] : []));
+    onBack = computed(() => this.resource().onBack, ...(ngDevMode ? [{ debugName: "onBack" }] : []));
     getModalTriggerResource(button) {
         return {
             resource: button.modalResource,
@@ -1732,6 +1857,15 @@ class AdDescriptionHeaderComponent {
             onClick();
         }
     }
+    /**
+     * Maneja el clic en el botón de regresar
+     */
+    handleBack() {
+        const onBackFn = this.onBack();
+        if (onBackFn) {
+            onBackFn();
+        }
+    }
     /**
      * Maneja la confirmación de un modal
      * @param onConfirm Callback de confirmación
@@ -1752,11 +1886,11 @@ class AdDescriptionHeaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdDescriptionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdDescriptionHeaderComponent, isStandalone: true, selector: "ad-description-header", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"premium-header-card\">\r\n    <div class=\"header-main\">\r\n        <div class=\"title-group\">\r\n            <h1 class=\"premium-title\">\r\n                {{ title() }}\r\n                @if (accentedTitle()) {\r\n                <span class=\"accent-text\">\r\n                    {{ accentedTitle() }}\r\n                </span>\r\n                }\r\n            </h1>\r\n            @if (subtitle()) {\r\n            <p class=\"premium-subtitle\">\r\n                {{ subtitle() }}\r\n            </p>\r\n            }\r\n        </div>\r\n        @if (buttons() && buttons()!.length > 0) {\r\n        <div class=\"header-actions\">\r\n            @for (button of buttons(); track $index) {\r\n            @if (button.isModalTrigger && button.modalResource) {\r\n            <ad-modal-trigger [resource]=\"getModalTriggerResource(button)\"\r\n                (confirm)=\"handleModalConfirm(button.onModalConfirm, $event)\"\r\n                (cancel)=\"handleModalCancel(button.onModalCancel)\">\r\n            </ad-modal-trigger>\r\n            } @else {\r\n            <ad-button [variant]=\"button.variant || 'primary'\" [type]=\"button.type || 'button'\"\r\n                [disabled]=\"button.disabled || false\" (click)=\"handleButtonClick(button.onClick)\" [icon]=\"button.icon\">\r\n                {{ button.label }}\r\n            </ad-button>\r\n            }\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<!-- Divider is no longer needed with the card style -->\r\n@if (showDivider() && false) {\r\n<div class=\"ad-description-header__divider\"></div>\r\n}", styles: [":root{--color-primary: #002855;--color-primary-hover: #003366;--color-primary-active: #001a38;--color-primary-light: #F1F5F9;--color-primary-accent: #5BC2E7;--color-background: #F8FAFC;--color-surface: #FFFFFF;--color-border: #F1F5F9;--color-secondary: #475569;--color-secondary-light: #94A3B8;--color-success: #A2D033;--color-success-bg: rgba(162, 208, 51, .05);--color-success-text: #7A9F26;--color-alert: #EF4444;--color-alert-bg: rgba(239, 68, 68, .05);--color-alert-text: #DC2626;--color-warning: #F59E0B;--color-warning-bg: rgba(245, 158, 11, .05);--color-warning-text: #D97706;--color-slate-900: #0f172a;--color-slate-800: #1e293b;--color-slate-700: #334155;--color-slate-500: #64748b;--color-slate-400: #94a3b8;--color-slate-200: #e2e8f0;--color-slate-100: #f1f5f9;--color-slate-50: #f8fafc;--color-white: #ffffff;--radius-cerca: 1.25rem;--radius-cerca-sm: .75rem;--radius-cerca-lg: 2rem;--shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, .02), 0 8px 10px -6px rgba(0, 0, 0, .02);--shadow-premium-hover: 0 30px 40px -5px rgba(0, 0, 0, .05), 0 15px 20px -5px rgba(0, 0, 0, .03);--shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, .07);--shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, .05);--shadow-glow-primary: 0 0 20px rgba(91, 194, 231, .15);--gradient-premium: linear-gradient(135deg, #002855 0%, #001a38 100%);--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));--gradient-accent: linear-gradient(135deg, #5BC2E7 0%, #002855 100%);--ant-primary-color: var(--color-primary);--ant-primary-color-hover: var(--color-primary-hover);--ant-primary-color-active: var(--color-primary-active);--ant-primary-color-outline: rgba(0, 40, 85, .2);--ant-success-color: var(--color-success);--ant-success-color-hover: #b3e040;--ant-success-color-active: #8fb82b;--ant-success-color-outline: rgba(162, 208, 51, .2);--ant-info-color: var(--color-primary);--ant-link-color: var(--color-primary-accent);--ant-link-color-hover: #4db3d9;--ant-link-color-active: var(--color-primary)}:root{--font-sans: \"Inter\", system-ui, sans-serif;--font-display: \"Outfit\", sans-serif}:root,[data-theme=light]{--color-bg-primary: var(--color-surface);--color-bg-secondary: var(--color-background);--color-text-primary: var(--color-slate-900);--color-text-secondary: var(--color-secondary);--color-text-muted: var(--color-secondary-light);--color-border-subtle: var(--color-slate-200);--color-border-strong: var(--color-slate-300);--color-brand: var(--color-primary);--color-brand-hover: var(--color-primary-hover);--color-focus-ring: var(--ant-primary-color-outline);--color-success: var(--color-success);--color-danger: var(--color-alert);--surface-glass-bg: rgba(255, 255, 255, .7);--surface-glass-border: rgba(255, 255, 255, .3);--surface-glass-blur: 12px;--surface-glass-shadow: var(--shadow-glass);--font-heading-xl: 32px;--font-heading-lg: 24px;--font-heading-md: 20px;--font-body-lg: 18px;--font-body-md: 16px;--font-caption: 12px;--font-family-base: var(--font-sans);--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--radius-sm: var(--radius-cerca-sm);--radius-md: var(--radius-cerca);--radius-lg: var(--radius-cerca-lg);--radius-xl: 3rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1)}[data-theme=dark]{--color-bg-primary: var(--color-slate-900);--color-bg-secondary: var(--color-slate-800);--color-text-primary: var(--color-white);--color-text-secondary: var(--color-slate-400);--color-text-muted: var(--color-slate-500);--color-border-subtle: var(--color-slate-700);--color-border-strong: var(--color-slate-600);--color-brand: var(--color-primary-light);--color-brand-hover: var(--color-primary-accent);--color-focus-ring: rgba(59, 130, 246, .5);--surface-glass-bg: rgba(15, 23, 42, .8);--surface-glass-border: rgba(255, 255, 255, .1);--surface-glass-blur: 16px;--surface-glass-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3)}:root{--h1-size: var(--font-size-h1);--h1-weight: var(--font-weight-semibold);--h2-size: var(--font-size-h2);--h2-weight: var(--font-weight-semibold);--h3-size: var(--font-size-h3);--h3-weight: var(--font-weight-semibold);--body-size: var(--font-size-body);--body-weight: var(--font-weight-regular);--sm-size: var(--font-size-sm);--sm-weight: var(--font-weight-regular);--caption-size: var(--font-size-caption);--caption-weight: var(--font-weight-regular)}:root{--btn-height-md: 44px;--btn-radius: var(--radius-md);--btn-font-weight: var(--font-weight-medium);--btn-bg-primary: var(--color-brand);--btn-text-primary: #FFFFFF;--btn-shadow-default: var(--shadow-sm);--btn-shadow-hover: var(--shadow-md);--btn-transition: .15s ease;--btn-focus-ring: 0 0 0 2px var(--color-focus-ring)}:root{--card-bg: var(--color-bg-primary);--card-radius: var(--radius-lg);--card-shadow: var(--shadow-sm);--card-shadow-hover: var(--shadow-md)}:root{--input-height-md: 44px;--input-bg: var(--color-bg-primary);--input-radius: var(--radius-md);--input-border-default: var(--color-border-subtle);--input-border-hover: var(--color-border-strong);--input-border-focus: var(--color-brand);--input-border-error: var(--color-danger);--input-transition: .12s ease-in-out;--input-focus-ring: 0 0 0 3px var(--color-focus-ring);--input-error-ring: 0 0 0 3px rgba(239, 68, 68, .15)}.ad-badge-tokens{--badge-radius: var(--radius-sm);--badge-padding-v: var(--space-1);--badge-padding-h: var(--space-2);--badge-font-size: var(--font-size-xs);--badge-font-weight: var(--font-weight-medium);--badge-success-bg: #D1FAE5;--badge-success-text: #065F46;--badge-success-border: #A7F3D0;--badge-warning-bg: #FEF3C7;--badge-warning-text: #92400E;--badge-warning-border: #FDE68A;--badge-error-bg: #FFE4E6;--badge-error-text: #9F1239;--badge-error-border: #FECDD3;--badge-info-bg: var(--color-info-50);--badge-info-text: var(--color-info-700);--badge-info-border: var(--color-info-200);--badge-neutral-bg: var(--color-slate-100);--badge-neutral-text: var(--color-slate-700);--badge-neutral-border: var(--color-slate-200)}.ad-label-tokens{--label-font-size: var(--font-size-sm);--label-font-weight: var(--font-weight-medium);--label-color: var(--color-text-secondary);--label-required-color: var(--color-error-500);--label-margin-bottom: var(--space-2)}.ad-select-tokens{--select-bg: var(--color-bg-primary);--select-border: var(--color-border-subtle);--select-border-hover: var(--color-border-strong);--select-border-focus: var(--color-brand-primary);--select-shadow-focus: var(--shadow-focus);--select-radius: var(--radius-md);--select-height: 44px;--select-padding-h: var(--space-4);--select-dropdown-bg: var(--color-bg-primary);--select-dropdown-shadow: var(--shadow-md);--select-dropdown-max-height: 240px;--select-option-padding: var(--space-3) var(--space-4);--select-option-hover: var(--color-bg-secondary);--select-option-selected-bg: var(--color-brand-50);--select-option-selected-text: var(--color-brand-primary)}.ad-form-field-tokens{--form-field-margin-bottom: var(--space-6);--form-field-label-margin: var(--space-2);--form-field-message-margin: var(--space-1);--form-field-message-font-size: var(--font-size-xs);--form-field-message-color: var(--color-text-muted);--form-field-error-color: var(--color-error-600)}.ad-header-tokens{--header-height: 72px;--header-bg: var(--color-surface);--header-border-color: var(--color-border);--header-padding: 0 var(--space-6);--header-shadow: 0 1px 2px rgba(0, 0, 0, .05);--header-z-index: 100;--header-logo-height: 32px;--header-user-gap: var(--space-4)}.ad-sidebar-tokens{--sidebar-width: 280px;--sidebar-collapsed-width: 80px;--sidebar-bg: var(--color-slate-900);--sidebar-border-color: var(--color-slate-800);--sidebar-padding: var(--space-4);--sidebar-z-index: 101;--sidebar-transition: width .3s cubic-bezier(.4, 0, .2, 1);--sidebar-item-height: 48px;--sidebar-item-radius: var(--radius-lg);--sidebar-item-padding: 0 var(--space-4);--sidebar-item-gap: var(--space-3);--sidebar-accent-color: var(--color-primary);--sidebar-text-color: var(--color-surface);--sidebar-text-muted: var(--color-slate-400)}.ad-data-table-tokens{--table-bg: var(--color-bg-primary);--table-header-bg: var(--color-bg-secondary);--table-border-color: var(--color-border-subtle);--table-header-color: var(--color-text-muted);--table-row-hover: rgba(var(--color-brand-primary-rgb), .04);--table-cell-padding: var(--space-4);--table-font-size: var(--font-size-sm);--table-radius: var(--radius-lg)}:root{--modal-bg: var(--color-surface);--modal-overlay-bg: rgba(0, 0, 0, .5);--modal-radius: var(--radius-cerca);--modal-shadow: var(--shadow-premium);--modal-z-index: 1000;--modal-header-padding: 12px 24px;--modal-body-padding: 24px;--modal-footer-padding: 16px 24px;--modal-sm-width: 400px;--modal-md-width: 600px;--modal-lg-width: 900px}.premium-header-card{background:#fff;padding:1.5rem 2rem;border-radius:16px;box-shadow:var(--shadow-premium, 0 4px 20px -2px rgba(0, 0, 0, .1));margin-bottom:2rem;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.03)}.premium-header-card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(to right,var(--color-primary),var(--color-primary-accent, #00d2ff))}.header-main{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}@media(max-width:768px){.header-main{flex-direction:column;align-items:stretch}}.title-group{display:flex;flex-direction:column;gap:.25rem}.premium-title{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;margin:0;color:var(--color-slate-900, #1e293b);line-height:1.2}.premium-title .accent-text{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-accent, #00d2ff) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-left:.3rem}.premium-subtitle{margin-top:0rem;color:var(--color-slate-500, #64748b);font-size:.9rem;font-weight:500;letter-spacing:-.01em}.header-actions{display:flex;gap:var(--spacing-sm);align-items:center}@media(max-width:768px){.header-actions{width:100%;justify-content:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AdButtonComponent, selector: "ad-button", inputs: ["variant", "type", "disabled", "loading", "icon", "size", "block"] }, { kind: "component", type: AdModalTriggerComponent, selector: "ad-modal-trigger", inputs: ["resource"], outputs: ["confirm", "cancel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdDescriptionHeaderComponent, isStandalone: true, selector: "ad-description-header", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"premium-header-card\">\r\n    <div class=\"header-main\">\r\n        <div class=\"title-wrapper\">\r\n            @if (backButton()) {\r\n            <ad-button variant=\"ghost\" icon=\"arrow_back\" (click)=\"handleBack()\" class=\"back-btn\" />\r\n            }\r\n            <div class=\"title-group\">\r\n                <h1 class=\"premium-title\">\r\n                    {{ title() }}\r\n                    @if (accentedTitle()) {\r\n                    <span class=\"accent-text\">\r\n                        {{ accentedTitle() }}\r\n                    </span>\r\n                    }\r\n                </h1>\r\n                @if (subtitle()) {\r\n                <p class=\"premium-subtitle\">\r\n                    {{ subtitle() }}\r\n                </p>\r\n                }\r\n            </div>\r\n        </div>\r\n        @if (buttons() && buttons()!.length > 0) {\r\n        <div class=\"header-actions\">\r\n            @for (button of buttons(); track $index) {\r\n            @if (button.isModalTrigger && button.modalResource) {\r\n            <ad-modal-trigger [resource]=\"getModalTriggerResource(button)\"\r\n                (confirm)=\"handleModalConfirm(button.onModalConfirm, $event)\"\r\n                (cancel)=\"handleModalCancel(button.onModalCancel)\">\r\n            </ad-modal-trigger>\r\n            } @else {\r\n            <ad-button [variant]=\"button.variant || 'primary'\" [type]=\"button.type || 'button'\"\r\n                [disabled]=\"button.disabled || false\" (click)=\"handleButtonClick(button.onClick)\" [icon]=\"button.icon\">\r\n                {{ button.label }}\r\n            </ad-button>\r\n            }\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<!-- Divider is no longer needed with the card style -->\r\n@if (showDivider() && false) {\r\n<div class=\"ad-description-header__divider\"></div>\r\n}", styles: [":root{--color-primary: #002855;--color-primary-hover: #003366;--color-primary-active: #001a38;--color-primary-light: #F1F5F9;--color-primary-accent: #5BC2E7;--color-background: #F8FAFC;--color-surface: #FFFFFF;--color-border: #F1F5F9;--color-secondary: #475569;--color-secondary-light: #94A3B8;--color-success: #A2D033;--color-success-bg: rgba(162, 208, 51, .05);--color-success-text: #7A9F26;--color-alert: #EF4444;--color-alert-bg: rgba(239, 68, 68, .05);--color-alert-text: #DC2626;--color-warning: #F59E0B;--color-warning-bg: rgba(245, 158, 11, .05);--color-warning-text: #D97706;--color-slate-900: #0f172a;--color-slate-800: #1e293b;--color-slate-700: #334155;--color-slate-500: #64748b;--color-slate-400: #94a3b8;--color-slate-200: #e2e8f0;--color-slate-100: #f1f5f9;--color-slate-50: #f8fafc;--color-white: #ffffff;--radius-cerca: 1.25rem;--radius-cerca-sm: .75rem;--radius-cerca-lg: 2rem;--shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, .02), 0 8px 10px -6px rgba(0, 0, 0, .02);--shadow-premium-hover: 0 30px 40px -5px rgba(0, 0, 0, .05), 0 15px 20px -5px rgba(0, 0, 0, .03);--shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, .07);--shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, .05);--shadow-glow-primary: 0 0 20px rgba(91, 194, 231, .15);--gradient-premium: linear-gradient(135deg, #002855 0%, #001a38 100%);--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));--gradient-accent: linear-gradient(135deg, #5BC2E7 0%, #002855 100%);--ant-primary-color: var(--color-primary);--ant-primary-color-hover: var(--color-primary-hover);--ant-primary-color-active: var(--color-primary-active);--ant-primary-color-outline: rgba(0, 40, 85, .2);--ant-success-color: var(--color-success);--ant-success-color-hover: #b3e040;--ant-success-color-active: #8fb82b;--ant-success-color-outline: rgba(162, 208, 51, .2);--ant-info-color: var(--color-primary);--ant-link-color: var(--color-primary-accent);--ant-link-color-hover: #4db3d9;--ant-link-color-active: var(--color-primary)}:root{--font-sans: \"Inter\", system-ui, sans-serif;--font-display: \"Outfit\", sans-serif}:root,[data-theme=light]{--color-bg-primary: var(--color-surface);--color-bg-secondary: var(--color-background);--color-text-primary: var(--color-slate-900);--color-text-secondary: var(--color-secondary);--color-text-muted: var(--color-secondary-light);--color-border-subtle: var(--color-slate-200);--color-border-strong: var(--color-slate-300);--color-brand: var(--color-primary);--color-brand-hover: var(--color-primary-hover);--color-focus-ring: var(--ant-primary-color-outline);--color-success: var(--color-success);--color-danger: var(--color-alert);--surface-glass-bg: rgba(255, 255, 255, .7);--surface-glass-border: rgba(255, 255, 255, .3);--surface-glass-blur: 12px;--surface-glass-shadow: var(--shadow-glass);--font-heading-xl: 32px;--font-heading-lg: 24px;--font-heading-md: 20px;--font-body-lg: 18px;--font-body-md: 16px;--font-caption: 12px;--font-family-base: var(--font-sans);--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--radius-sm: var(--radius-cerca-sm);--radius-md: var(--radius-cerca);--radius-lg: var(--radius-cerca-lg);--radius-xl: 3rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1)}[data-theme=dark]{--color-bg-primary: var(--color-slate-900);--color-bg-secondary: var(--color-slate-800);--color-text-primary: var(--color-white);--color-text-secondary: var(--color-slate-400);--color-text-muted: var(--color-slate-500);--color-border-subtle: var(--color-slate-700);--color-border-strong: var(--color-slate-600);--color-brand: var(--color-primary-light);--color-brand-hover: var(--color-primary-accent);--color-focus-ring: rgba(59, 130, 246, .5);--surface-glass-bg: rgba(15, 23, 42, .8);--surface-glass-border: rgba(255, 255, 255, .1);--surface-glass-blur: 16px;--surface-glass-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3)}:root{--h1-size: var(--font-size-h1);--h1-weight: var(--font-weight-semibold);--h2-size: var(--font-size-h2);--h2-weight: var(--font-weight-semibold);--h3-size: var(--font-size-h3);--h3-weight: var(--font-weight-semibold);--body-size: var(--font-size-body);--body-weight: var(--font-weight-regular);--sm-size: var(--font-size-sm);--sm-weight: var(--font-weight-regular);--caption-size: var(--font-size-caption);--caption-weight: var(--font-weight-regular)}:root{--btn-height-md: 44px;--btn-radius: var(--radius-md);--btn-font-weight: var(--font-weight-medium);--btn-bg-primary: var(--color-brand);--btn-text-primary: #FFFFFF;--btn-shadow-default: var(--shadow-sm);--btn-shadow-hover: var(--shadow-md);--btn-transition: .15s ease;--btn-focus-ring: 0 0 0 2px var(--color-focus-ring)}:root{--card-bg: var(--color-bg-primary);--card-radius: var(--radius-lg);--card-shadow: var(--shadow-sm);--card-shadow-hover: var(--shadow-md)}:root{--input-height-md: 44px;--input-bg: var(--color-bg-primary);--input-radius: var(--radius-md);--input-border-default: var(--color-border-subtle);--input-border-hover: var(--color-border-strong);--input-border-focus: var(--color-brand);--input-border-error: var(--color-danger);--input-transition: .12s ease-in-out;--input-focus-ring: 0 0 0 3px var(--color-focus-ring);--input-error-ring: 0 0 0 3px rgba(239, 68, 68, .15)}.ad-badge-tokens{--badge-radius: var(--radius-sm);--badge-padding-v: var(--space-1);--badge-padding-h: var(--space-2);--badge-font-size: var(--font-size-xs);--badge-font-weight: var(--font-weight-medium);--badge-success-bg: #D1FAE5;--badge-success-text: #065F46;--badge-success-border: #A7F3D0;--badge-warning-bg: #FEF3C7;--badge-warning-text: #92400E;--badge-warning-border: #FDE68A;--badge-error-bg: #FFE4E6;--badge-error-text: #9F1239;--badge-error-border: #FECDD3;--badge-info-bg: var(--color-info-50);--badge-info-text: var(--color-info-700);--badge-info-border: var(--color-info-200);--badge-neutral-bg: var(--color-slate-100);--badge-neutral-text: var(--color-slate-700);--badge-neutral-border: var(--color-slate-200)}.ad-label-tokens{--label-font-size: var(--font-size-sm);--label-font-weight: var(--font-weight-medium);--label-color: var(--color-text-secondary);--label-required-color: var(--color-error-500);--label-margin-bottom: var(--space-2)}.ad-select-tokens{--select-bg: var(--color-bg-primary);--select-border: var(--color-border-subtle);--select-border-hover: var(--color-border-strong);--select-border-focus: var(--color-brand-primary);--select-shadow-focus: var(--shadow-focus);--select-radius: var(--radius-md);--select-height: 44px;--select-padding-h: var(--space-4);--select-dropdown-bg: var(--color-bg-primary);--select-dropdown-shadow: var(--shadow-md);--select-dropdown-max-height: 240px;--select-option-padding: var(--space-3) var(--space-4);--select-option-hover: var(--color-bg-secondary);--select-option-selected-bg: var(--color-brand-50);--select-option-selected-text: var(--color-brand-primary)}.ad-form-field-tokens{--form-field-margin-bottom: var(--space-6);--form-field-label-margin: var(--space-2);--form-field-message-margin: var(--space-1);--form-field-message-font-size: var(--font-size-xs);--form-field-message-color: var(--color-text-muted);--form-field-error-color: var(--color-error-600)}.ad-header-tokens{--header-height: 72px;--header-bg: var(--color-surface);--header-border-color: var(--color-border);--header-padding: 0 var(--space-6);--header-shadow: 0 1px 2px rgba(0, 0, 0, .05);--header-z-index: 100;--header-logo-height: 32px;--header-user-gap: var(--space-4)}.ad-sidebar-tokens{--sidebar-width: 280px;--sidebar-collapsed-width: 80px;--sidebar-bg: var(--color-slate-900);--sidebar-border-color: var(--color-slate-800);--sidebar-padding: var(--space-4);--sidebar-z-index: 101;--sidebar-transition: width .3s cubic-bezier(.4, 0, .2, 1);--sidebar-item-height: 48px;--sidebar-item-radius: var(--radius-lg);--sidebar-item-padding: 0 var(--space-4);--sidebar-item-gap: var(--space-3);--sidebar-accent-color: var(--color-primary);--sidebar-text-color: var(--color-surface);--sidebar-text-muted: var(--color-slate-400)}.ad-data-table-tokens{--table-bg: var(--color-bg-primary);--table-header-bg: var(--color-bg-secondary);--table-border-color: var(--color-border-subtle);--table-header-color: var(--color-text-muted);--table-row-hover: rgba(var(--color-brand-primary-rgb), .04);--table-cell-padding: var(--space-4);--table-font-size: var(--font-size-sm);--table-radius: var(--radius-lg)}:root{--modal-bg: var(--color-surface);--modal-overlay-bg: rgba(0, 0, 0, .5);--modal-radius: var(--radius-cerca);--modal-shadow: var(--shadow-premium);--modal-z-index: 1000;--modal-header-padding: 12px 24px;--modal-body-padding: 24px;--modal-footer-padding: 16px 24px;--modal-sm-width: 400px;--modal-md-width: 600px;--modal-lg-width: 900px}.premium-header-card{background:#fff;padding:1.5rem 2rem;border-radius:16px;box-shadow:var(--shadow-premium, 0 4px 20px -2px rgba(0, 0, 0, .1));margin-bottom:2rem;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.03)}.premium-header-card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(to right,var(--color-primary),var(--color-primary-accent, #00d2ff))}.header-main{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}@media(max-width:768px){.header-main{flex-direction:column;align-items:stretch}}.title-wrapper{display:flex;align-items:center;gap:1rem}.title-group{display:flex;flex-direction:column;gap:.25rem}.back-btn ::ng-deep button{padding:.5rem;height:2.5rem;width:2.5rem;border-radius:50%;color:var(--color-slate-500, #64748b);display:flex;align-items:center;justify-content:center}.back-btn ::ng-deep button:hover{background-color:var(--color-slate-100, #f1f5f9);color:var(--color-slate-700, #334155)}.premium-title{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;margin:0;color:var(--color-slate-900, #1e293b);line-height:1.2}.premium-title .accent-text{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-accent, #00d2ff) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-left:.3rem}.premium-subtitle{margin-top:0rem;color:var(--color-slate-500, #64748b);font-size:.9rem;font-weight:500;letter-spacing:-.01em}.header-actions{display:flex;gap:var(--spacing-sm);align-items:center}@media(max-width:768px){.header-actions{width:100%;justify-content:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AdButtonComponent, selector: "ad-button", inputs: ["variant", "type", "disabled", "loading", "icon", "size", "block"] }, { kind: "component", type: AdModalTriggerComponent, selector: "ad-modal-trigger", inputs: ["resource"], outputs: ["confirm", "cancel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdDescriptionHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ad-description-header', standalone: true, imports: [CommonModule, AdButtonComponent, AdModalTriggerComponent], template: "<div class=\"premium-header-card\">\r\n    <div class=\"header-main\">\r\n        <div class=\"title-group\">\r\n            <h1 class=\"premium-title\">\r\n                {{ title() }}\r\n                @if (accentedTitle()) {\r\n                <span class=\"accent-text\">\r\n                    {{ accentedTitle() }}\r\n                </span>\r\n                }\r\n            </h1>\r\n            @if (subtitle()) {\r\n            <p class=\"premium-subtitle\">\r\n                {{ subtitle() }}\r\n            </p>\r\n            }\r\n        </div>\r\n        @if (buttons() && buttons()!.length > 0) {\r\n        <div class=\"header-actions\">\r\n            @for (button of buttons(); track $index) {\r\n            @if (button.isModalTrigger && button.modalResource) {\r\n            <ad-modal-trigger [resource]=\"getModalTriggerResource(button)\"\r\n                (confirm)=\"handleModalConfirm(button.onModalConfirm, $event)\"\r\n                (cancel)=\"handleModalCancel(button.onModalCancel)\">\r\n            </ad-modal-trigger>\r\n            } @else {\r\n            <ad-button [variant]=\"button.variant || 'primary'\" [type]=\"button.type || 'button'\"\r\n                [disabled]=\"button.disabled || false\" (click)=\"handleButtonClick(button.onClick)\" [icon]=\"button.icon\">\r\n                {{ button.label }}\r\n            </ad-button>\r\n            }\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<!-- Divider is no longer needed with the card style -->\r\n@if (showDivider() && false) {\r\n<div class=\"ad-description-header__divider\"></div>\r\n}", styles: [":root{--color-primary: #002855;--color-primary-hover: #003366;--color-primary-active: #001a38;--color-primary-light: #F1F5F9;--color-primary-accent: #5BC2E7;--color-background: #F8FAFC;--color-surface: #FFFFFF;--color-border: #F1F5F9;--color-secondary: #475569;--color-secondary-light: #94A3B8;--color-success: #A2D033;--color-success-bg: rgba(162, 208, 51, .05);--color-success-text: #7A9F26;--color-alert: #EF4444;--color-alert-bg: rgba(239, 68, 68, .05);--color-alert-text: #DC2626;--color-warning: #F59E0B;--color-warning-bg: rgba(245, 158, 11, .05);--color-warning-text: #D97706;--color-slate-900: #0f172a;--color-slate-800: #1e293b;--color-slate-700: #334155;--color-slate-500: #64748b;--color-slate-400: #94a3b8;--color-slate-200: #e2e8f0;--color-slate-100: #f1f5f9;--color-slate-50: #f8fafc;--color-white: #ffffff;--radius-cerca: 1.25rem;--radius-cerca-sm: .75rem;--radius-cerca-lg: 2rem;--shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, .02), 0 8px 10px -6px rgba(0, 0, 0, .02);--shadow-premium-hover: 0 30px 40px -5px rgba(0, 0, 0, .05), 0 15px 20px -5px rgba(0, 0, 0, .03);--shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, .07);--shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, .05);--shadow-glow-primary: 0 0 20px rgba(91, 194, 231, .15);--gradient-premium: linear-gradient(135deg, #002855 0%, #001a38 100%);--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));--gradient-accent: linear-gradient(135deg, #5BC2E7 0%, #002855 100%);--ant-primary-color: var(--color-primary);--ant-primary-color-hover: var(--color-primary-hover);--ant-primary-color-active: var(--color-primary-active);--ant-primary-color-outline: rgba(0, 40, 85, .2);--ant-success-color: var(--color-success);--ant-success-color-hover: #b3e040;--ant-success-color-active: #8fb82b;--ant-success-color-outline: rgba(162, 208, 51, .2);--ant-info-color: var(--color-primary);--ant-link-color: var(--color-primary-accent);--ant-link-color-hover: #4db3d9;--ant-link-color-active: var(--color-primary)}:root{--font-sans: \"Inter\", system-ui, sans-serif;--font-display: \"Outfit\", sans-serif}:root,[data-theme=light]{--color-bg-primary: var(--color-surface);--color-bg-secondary: var(--color-background);--color-text-primary: var(--color-slate-900);--color-text-secondary: var(--color-secondary);--color-text-muted: var(--color-secondary-light);--color-border-subtle: var(--color-slate-200);--color-border-strong: var(--color-slate-300);--color-brand: var(--color-primary);--color-brand-hover: var(--color-primary-hover);--color-focus-ring: var(--ant-primary-color-outline);--color-success: var(--color-success);--color-danger: var(--color-alert);--surface-glass-bg: rgba(255, 255, 255, .7);--surface-glass-border: rgba(255, 255, 255, .3);--surface-glass-blur: 12px;--surface-glass-shadow: var(--shadow-glass);--font-heading-xl: 32px;--font-heading-lg: 24px;--font-heading-md: 20px;--font-body-lg: 18px;--font-body-md: 16px;--font-caption: 12px;--font-family-base: var(--font-sans);--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--radius-sm: var(--radius-cerca-sm);--radius-md: var(--radius-cerca);--radius-lg: var(--radius-cerca-lg);--radius-xl: 3rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1)}[data-theme=dark]{--color-bg-primary: var(--color-slate-900);--color-bg-secondary: var(--color-slate-800);--color-text-primary: var(--color-white);--color-text-secondary: var(--color-slate-400);--color-text-muted: var(--color-slate-500);--color-border-subtle: var(--color-slate-700);--color-border-strong: var(--color-slate-600);--color-brand: var(--color-primary-light);--color-brand-hover: var(--color-primary-accent);--color-focus-ring: rgba(59, 130, 246, .5);--surface-glass-bg: rgba(15, 23, 42, .8);--surface-glass-border: rgba(255, 255, 255, .1);--surface-glass-blur: 16px;--surface-glass-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3)}:root{--h1-size: var(--font-size-h1);--h1-weight: var(--font-weight-semibold);--h2-size: var(--font-size-h2);--h2-weight: var(--font-weight-semibold);--h3-size: var(--font-size-h3);--h3-weight: var(--font-weight-semibold);--body-size: var(--font-size-body);--body-weight: var(--font-weight-regular);--sm-size: var(--font-size-sm);--sm-weight: var(--font-weight-regular);--caption-size: var(--font-size-caption);--caption-weight: var(--font-weight-regular)}:root{--btn-height-md: 44px;--btn-radius: var(--radius-md);--btn-font-weight: var(--font-weight-medium);--btn-bg-primary: var(--color-brand);--btn-text-primary: #FFFFFF;--btn-shadow-default: var(--shadow-sm);--btn-shadow-hover: var(--shadow-md);--btn-transition: .15s ease;--btn-focus-ring: 0 0 0 2px var(--color-focus-ring)}:root{--card-bg: var(--color-bg-primary);--card-radius: var(--radius-lg);--card-shadow: var(--shadow-sm);--card-shadow-hover: var(--shadow-md)}:root{--input-height-md: 44px;--input-bg: var(--color-bg-primary);--input-radius: var(--radius-md);--input-border-default: var(--color-border-subtle);--input-border-hover: var(--color-border-strong);--input-border-focus: var(--color-brand);--input-border-error: var(--color-danger);--input-transition: .12s ease-in-out;--input-focus-ring: 0 0 0 3px var(--color-focus-ring);--input-error-ring: 0 0 0 3px rgba(239, 68, 68, .15)}.ad-badge-tokens{--badge-radius: var(--radius-sm);--badge-padding-v: var(--space-1);--badge-padding-h: var(--space-2);--badge-font-size: var(--font-size-xs);--badge-font-weight: var(--font-weight-medium);--badge-success-bg: #D1FAE5;--badge-success-text: #065F46;--badge-success-border: #A7F3D0;--badge-warning-bg: #FEF3C7;--badge-warning-text: #92400E;--badge-warning-border: #FDE68A;--badge-error-bg: #FFE4E6;--badge-error-text: #9F1239;--badge-error-border: #FECDD3;--badge-info-bg: var(--color-info-50);--badge-info-text: var(--color-info-700);--badge-info-border: var(--color-info-200);--badge-neutral-bg: var(--color-slate-100);--badge-neutral-text: var(--color-slate-700);--badge-neutral-border: var(--color-slate-200)}.ad-label-tokens{--label-font-size: var(--font-size-sm);--label-font-weight: var(--font-weight-medium);--label-color: var(--color-text-secondary);--label-required-color: var(--color-error-500);--label-margin-bottom: var(--space-2)}.ad-select-tokens{--select-bg: var(--color-bg-primary);--select-border: var(--color-border-subtle);--select-border-hover: var(--color-border-strong);--select-border-focus: var(--color-brand-primary);--select-shadow-focus: var(--shadow-focus);--select-radius: var(--radius-md);--select-height: 44px;--select-padding-h: var(--space-4);--select-dropdown-bg: var(--color-bg-primary);--select-dropdown-shadow: var(--shadow-md);--select-dropdown-max-height: 240px;--select-option-padding: var(--space-3) var(--space-4);--select-option-hover: var(--color-bg-secondary);--select-option-selected-bg: var(--color-brand-50);--select-option-selected-text: var(--color-brand-primary)}.ad-form-field-tokens{--form-field-margin-bottom: var(--space-6);--form-field-label-margin: var(--space-2);--form-field-message-margin: var(--space-1);--form-field-message-font-size: var(--font-size-xs);--form-field-message-color: var(--color-text-muted);--form-field-error-color: var(--color-error-600)}.ad-header-tokens{--header-height: 72px;--header-bg: var(--color-surface);--header-border-color: var(--color-border);--header-padding: 0 var(--space-6);--header-shadow: 0 1px 2px rgba(0, 0, 0, .05);--header-z-index: 100;--header-logo-height: 32px;--header-user-gap: var(--space-4)}.ad-sidebar-tokens{--sidebar-width: 280px;--sidebar-collapsed-width: 80px;--sidebar-bg: var(--color-slate-900);--sidebar-border-color: var(--color-slate-800);--sidebar-padding: var(--space-4);--sidebar-z-index: 101;--sidebar-transition: width .3s cubic-bezier(.4, 0, .2, 1);--sidebar-item-height: 48px;--sidebar-item-radius: var(--radius-lg);--sidebar-item-padding: 0 var(--space-4);--sidebar-item-gap: var(--space-3);--sidebar-accent-color: var(--color-primary);--sidebar-text-color: var(--color-surface);--sidebar-text-muted: var(--color-slate-400)}.ad-data-table-tokens{--table-bg: var(--color-bg-primary);--table-header-bg: var(--color-bg-secondary);--table-border-color: var(--color-border-subtle);--table-header-color: var(--color-text-muted);--table-row-hover: rgba(var(--color-brand-primary-rgb), .04);--table-cell-padding: var(--space-4);--table-font-size: var(--font-size-sm);--table-radius: var(--radius-lg)}:root{--modal-bg: var(--color-surface);--modal-overlay-bg: rgba(0, 0, 0, .5);--modal-radius: var(--radius-cerca);--modal-shadow: var(--shadow-premium);--modal-z-index: 1000;--modal-header-padding: 12px 24px;--modal-body-padding: 24px;--modal-footer-padding: 16px 24px;--modal-sm-width: 400px;--modal-md-width: 600px;--modal-lg-width: 900px}.premium-header-card{background:#fff;padding:1.5rem 2rem;border-radius:16px;box-shadow:var(--shadow-premium, 0 4px 20px -2px rgba(0, 0, 0, .1));margin-bottom:2rem;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.03)}.premium-header-card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(to right,var(--color-primary),var(--color-primary-accent, #00d2ff))}.header-main{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}@media(max-width:768px){.header-main{flex-direction:column;align-items:stretch}}.title-group{display:flex;flex-direction:column;gap:.25rem}.premium-title{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;margin:0;color:var(--color-slate-900, #1e293b);line-height:1.2}.premium-title .accent-text{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-accent, #00d2ff) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-left:.3rem}.premium-subtitle{margin-top:0rem;color:var(--color-slate-500, #64748b);font-size:.9rem;font-weight:500;letter-spacing:-.01em}.header-actions{display:flex;gap:var(--spacing-sm);align-items:center}@media(max-width:768px){.header-actions{width:100%;justify-content:flex-start}}\n"] }]
+            args: [{ selector: 'ad-description-header', standalone: true, imports: [CommonModule, AdButtonComponent, AdModalTriggerComponent], template: "<div class=\"premium-header-card\">\r\n    <div class=\"header-main\">\r\n        <div class=\"title-wrapper\">\r\n            @if (backButton()) {\r\n            <ad-button variant=\"ghost\" icon=\"arrow_back\" (click)=\"handleBack()\" class=\"back-btn\" />\r\n            }\r\n            <div class=\"title-group\">\r\n                <h1 class=\"premium-title\">\r\n                    {{ title() }}\r\n                    @if (accentedTitle()) {\r\n                    <span class=\"accent-text\">\r\n                        {{ accentedTitle() }}\r\n                    </span>\r\n                    }\r\n                </h1>\r\n                @if (subtitle()) {\r\n                <p class=\"premium-subtitle\">\r\n                    {{ subtitle() }}\r\n                </p>\r\n                }\r\n            </div>\r\n        </div>\r\n        @if (buttons() && buttons()!.length > 0) {\r\n        <div class=\"header-actions\">\r\n            @for (button of buttons(); track $index) {\r\n            @if (button.isModalTrigger && button.modalResource) {\r\n            <ad-modal-trigger [resource]=\"getModalTriggerResource(button)\"\r\n                (confirm)=\"handleModalConfirm(button.onModalConfirm, $event)\"\r\n                (cancel)=\"handleModalCancel(button.onModalCancel)\">\r\n            </ad-modal-trigger>\r\n            } @else {\r\n            <ad-button [variant]=\"button.variant || 'primary'\" [type]=\"button.type || 'button'\"\r\n                [disabled]=\"button.disabled || false\" (click)=\"handleButtonClick(button.onClick)\" [icon]=\"button.icon\">\r\n                {{ button.label }}\r\n            </ad-button>\r\n            }\r\n            }\r\n        </div>\r\n        }\r\n    </div>\r\n</div>\r\n\r\n<!-- Divider is no longer needed with the card style -->\r\n@if (showDivider() && false) {\r\n<div class=\"ad-description-header__divider\"></div>\r\n}", styles: [":root{--color-primary: #002855;--color-primary-hover: #003366;--color-primary-active: #001a38;--color-primary-light: #F1F5F9;--color-primary-accent: #5BC2E7;--color-background: #F8FAFC;--color-surface: #FFFFFF;--color-border: #F1F5F9;--color-secondary: #475569;--color-secondary-light: #94A3B8;--color-success: #A2D033;--color-success-bg: rgba(162, 208, 51, .05);--color-success-text: #7A9F26;--color-alert: #EF4444;--color-alert-bg: rgba(239, 68, 68, .05);--color-alert-text: #DC2626;--color-warning: #F59E0B;--color-warning-bg: rgba(245, 158, 11, .05);--color-warning-text: #D97706;--color-slate-900: #0f172a;--color-slate-800: #1e293b;--color-slate-700: #334155;--color-slate-500: #64748b;--color-slate-400: #94a3b8;--color-slate-200: #e2e8f0;--color-slate-100: #f1f5f9;--color-slate-50: #f8fafc;--color-white: #ffffff;--radius-cerca: 1.25rem;--radius-cerca-sm: .75rem;--radius-cerca-lg: 2rem;--shadow-premium: 0 20px 25px -5px rgba(0, 0, 0, .02), 0 8px 10px -6px rgba(0, 0, 0, .02);--shadow-premium-hover: 0 30px 40px -5px rgba(0, 0, 0, .05), 0 15px 20px -5px rgba(0, 0, 0, .03);--shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, .07);--shadow-sidebar: 4px 0 24px 0 rgba(0, 0, 0, .05);--shadow-glow-primary: 0 0 20px rgba(91, 194, 231, .15);--gradient-premium: linear-gradient(135deg, #002855 0%, #001a38 100%);--gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));--gradient-accent: linear-gradient(135deg, #5BC2E7 0%, #002855 100%);--ant-primary-color: var(--color-primary);--ant-primary-color-hover: var(--color-primary-hover);--ant-primary-color-active: var(--color-primary-active);--ant-primary-color-outline: rgba(0, 40, 85, .2);--ant-success-color: var(--color-success);--ant-success-color-hover: #b3e040;--ant-success-color-active: #8fb82b;--ant-success-color-outline: rgba(162, 208, 51, .2);--ant-info-color: var(--color-primary);--ant-link-color: var(--color-primary-accent);--ant-link-color-hover: #4db3d9;--ant-link-color-active: var(--color-primary)}:root{--font-sans: \"Inter\", system-ui, sans-serif;--font-display: \"Outfit\", sans-serif}:root,[data-theme=light]{--color-bg-primary: var(--color-surface);--color-bg-secondary: var(--color-background);--color-text-primary: var(--color-slate-900);--color-text-secondary: var(--color-secondary);--color-text-muted: var(--color-secondary-light);--color-border-subtle: var(--color-slate-200);--color-border-strong: var(--color-slate-300);--color-brand: var(--color-primary);--color-brand-hover: var(--color-primary-hover);--color-focus-ring: var(--ant-primary-color-outline);--color-success: var(--color-success);--color-danger: var(--color-alert);--surface-glass-bg: rgba(255, 255, 255, .7);--surface-glass-border: rgba(255, 255, 255, .3);--surface-glass-blur: 12px;--surface-glass-shadow: var(--shadow-glass);--font-heading-xl: 32px;--font-heading-lg: 24px;--font-heading-md: 20px;--font-body-lg: 18px;--font-body-md: 16px;--font-caption: 12px;--font-family-base: var(--font-sans);--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--radius-sm: var(--radius-cerca-sm);--radius-md: var(--radius-cerca);--radius-lg: var(--radius-cerca-lg);--radius-xl: 3rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1)}[data-theme=dark]{--color-bg-primary: var(--color-slate-900);--color-bg-secondary: var(--color-slate-800);--color-text-primary: var(--color-white);--color-text-secondary: var(--color-slate-400);--color-text-muted: var(--color-slate-500);--color-border-subtle: var(--color-slate-700);--color-border-strong: var(--color-slate-600);--color-brand: var(--color-primary-light);--color-brand-hover: var(--color-primary-accent);--color-focus-ring: rgba(59, 130, 246, .5);--surface-glass-bg: rgba(15, 23, 42, .8);--surface-glass-border: rgba(255, 255, 255, .1);--surface-glass-blur: 16px;--surface-glass-shadow: 0 10px 15px -3px rgba(0, 0, 0, .3)}:root{--h1-size: var(--font-size-h1);--h1-weight: var(--font-weight-semibold);--h2-size: var(--font-size-h2);--h2-weight: var(--font-weight-semibold);--h3-size: var(--font-size-h3);--h3-weight: var(--font-weight-semibold);--body-size: var(--font-size-body);--body-weight: var(--font-weight-regular);--sm-size: var(--font-size-sm);--sm-weight: var(--font-weight-regular);--caption-size: var(--font-size-caption);--caption-weight: var(--font-weight-regular)}:root{--btn-height-md: 44px;--btn-radius: var(--radius-md);--btn-font-weight: var(--font-weight-medium);--btn-bg-primary: var(--color-brand);--btn-text-primary: #FFFFFF;--btn-shadow-default: var(--shadow-sm);--btn-shadow-hover: var(--shadow-md);--btn-transition: .15s ease;--btn-focus-ring: 0 0 0 2px var(--color-focus-ring)}:root{--card-bg: var(--color-bg-primary);--card-radius: var(--radius-lg);--card-shadow: var(--shadow-sm);--card-shadow-hover: var(--shadow-md)}:root{--input-height-md: 44px;--input-bg: var(--color-bg-primary);--input-radius: var(--radius-md);--input-border-default: var(--color-border-subtle);--input-border-hover: var(--color-border-strong);--input-border-focus: var(--color-brand);--input-border-error: var(--color-danger);--input-transition: .12s ease-in-out;--input-focus-ring: 0 0 0 3px var(--color-focus-ring);--input-error-ring: 0 0 0 3px rgba(239, 68, 68, .15)}.ad-badge-tokens{--badge-radius: var(--radius-sm);--badge-padding-v: var(--space-1);--badge-padding-h: var(--space-2);--badge-font-size: var(--font-size-xs);--badge-font-weight: var(--font-weight-medium);--badge-success-bg: #D1FAE5;--badge-success-text: #065F46;--badge-success-border: #A7F3D0;--badge-warning-bg: #FEF3C7;--badge-warning-text: #92400E;--badge-warning-border: #FDE68A;--badge-error-bg: #FFE4E6;--badge-error-text: #9F1239;--badge-error-border: #FECDD3;--badge-info-bg: var(--color-info-50);--badge-info-text: var(--color-info-700);--badge-info-border: var(--color-info-200);--badge-neutral-bg: var(--color-slate-100);--badge-neutral-text: var(--color-slate-700);--badge-neutral-border: var(--color-slate-200)}.ad-label-tokens{--label-font-size: var(--font-size-sm);--label-font-weight: var(--font-weight-medium);--label-color: var(--color-text-secondary);--label-required-color: var(--color-error-500);--label-margin-bottom: var(--space-2)}.ad-select-tokens{--select-bg: var(--color-bg-primary);--select-border: var(--color-border-subtle);--select-border-hover: var(--color-border-strong);--select-border-focus: var(--color-brand-primary);--select-shadow-focus: var(--shadow-focus);--select-radius: var(--radius-md);--select-height: 44px;--select-padding-h: var(--space-4);--select-dropdown-bg: var(--color-bg-primary);--select-dropdown-shadow: var(--shadow-md);--select-dropdown-max-height: 240px;--select-option-padding: var(--space-3) var(--space-4);--select-option-hover: var(--color-bg-secondary);--select-option-selected-bg: var(--color-brand-50);--select-option-selected-text: var(--color-brand-primary)}.ad-form-field-tokens{--form-field-margin-bottom: var(--space-6);--form-field-label-margin: var(--space-2);--form-field-message-margin: var(--space-1);--form-field-message-font-size: var(--font-size-xs);--form-field-message-color: var(--color-text-muted);--form-field-error-color: var(--color-error-600)}.ad-header-tokens{--header-height: 72px;--header-bg: var(--color-surface);--header-border-color: var(--color-border);--header-padding: 0 var(--space-6);--header-shadow: 0 1px 2px rgba(0, 0, 0, .05);--header-z-index: 100;--header-logo-height: 32px;--header-user-gap: var(--space-4)}.ad-sidebar-tokens{--sidebar-width: 280px;--sidebar-collapsed-width: 80px;--sidebar-bg: var(--color-slate-900);--sidebar-border-color: var(--color-slate-800);--sidebar-padding: var(--space-4);--sidebar-z-index: 101;--sidebar-transition: width .3s cubic-bezier(.4, 0, .2, 1);--sidebar-item-height: 48px;--sidebar-item-radius: var(--radius-lg);--sidebar-item-padding: 0 var(--space-4);--sidebar-item-gap: var(--space-3);--sidebar-accent-color: var(--color-primary);--sidebar-text-color: var(--color-surface);--sidebar-text-muted: var(--color-slate-400)}.ad-data-table-tokens{--table-bg: var(--color-bg-primary);--table-header-bg: var(--color-bg-secondary);--table-border-color: var(--color-border-subtle);--table-header-color: var(--color-text-muted);--table-row-hover: rgba(var(--color-brand-primary-rgb), .04);--table-cell-padding: var(--space-4);--table-font-size: var(--font-size-sm);--table-radius: var(--radius-lg)}:root{--modal-bg: var(--color-surface);--modal-overlay-bg: rgba(0, 0, 0, .5);--modal-radius: var(--radius-cerca);--modal-shadow: var(--shadow-premium);--modal-z-index: 1000;--modal-header-padding: 12px 24px;--modal-body-padding: 24px;--modal-footer-padding: 16px 24px;--modal-sm-width: 400px;--modal-md-width: 600px;--modal-lg-width: 900px}.premium-header-card{background:#fff;padding:1.5rem 2rem;border-radius:16px;box-shadow:var(--shadow-premium, 0 4px 20px -2px rgba(0, 0, 0, .1));margin-bottom:2rem;position:relative;overflow:hidden;border:1px solid rgba(0,0,0,.03)}.premium-header-card:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(to right,var(--color-primary),var(--color-primary-accent, #00d2ff))}.header-main{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}@media(max-width:768px){.header-main{flex-direction:column;align-items:stretch}}.title-wrapper{display:flex;align-items:center;gap:1rem}.title-group{display:flex;flex-direction:column;gap:.25rem}.back-btn ::ng-deep button{padding:.5rem;height:2.5rem;width:2.5rem;border-radius:50%;color:var(--color-slate-500, #64748b);display:flex;align-items:center;justify-content:center}.back-btn ::ng-deep button:hover{background-color:var(--color-slate-100, #f1f5f9);color:var(--color-slate-700, #334155)}.premium-title{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;margin:0;color:var(--color-slate-900, #1e293b);line-height:1.2}.premium-title .accent-text{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-accent, #00d2ff) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-left:.3rem}.premium-subtitle{margin-top:0rem;color:var(--color-slate-500, #64748b);font-size:.9rem;font-weight:500;letter-spacing:-.01em}.header-actions{display:flex;gap:var(--spacing-sm);align-items:center}@media(max-width:768px){.header-actions{width:100%;justify-content:flex-start}}\n"] }]
         }], propDecorators: { resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: true }] }] } });
 
 const DescriptionHeaderButtonSchema = z.object({
@@ -1778,6 +1912,8 @@ const DescriptionHeaderResourceSchema = z.object({
     subtitle: z.string().optional(),
     buttons: z.array(DescriptionHeaderButtonSchema).optional(),
     showDivider: z.boolean().optional(),
+    backButton: z.boolean().optional(),
+    onBack: z.custom().optional(),
 });
 
 class AdFormFieldComponent {
@@ -1790,11 +1926,11 @@ class AdFormFieldComponent {
     forAttr = computed(() => this.resource().for || '', ...(ngDevMode ? [{ debugName: "forAttr" }] : []));
     hasError = computed(() => !!this.errorMessage(), ...(ngDevMode ? [{ debugName: "hasError" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdFormFieldComponent, isStandalone: true, selector: "ad-form-field", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"ad-form-field\" [class.has-error]=\"hasError()\">\r\n    @if (label()) {\r\n    <ad-label [text]=\"label()\" [for]=\"forAttr()\" [required]=\"required()\" [error]=\"hasError()\">\r\n    </ad-label>\r\n    }\r\n\r\n    <div class=\"ad-form-field-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    @if (hint() || errorMessage()) {\r\n    <div class=\"ad-form-field-info\">\r\n        @if (errorMessage()) {\r\n        <span class=\"ad-form-field-error\">{{ errorMessage() }}</span>\r\n        }\r\n        @if (hint() && !errorMessage()) {\r\n        <span class=\"ad-form-field-hint\">{{ hint() }}</span>\r\n        }\r\n    </div>\r\n    }\r\n</div>", styles: [".ad-form-field{display:flex;flex-direction:column;margin-bottom:var(--form-field-margin-bottom);width:100%}.ad-form-field .ad-form-field-content{position:relative;display:flex;flex-direction:column}.ad-form-field .ad-form-field-info{margin-top:var(--form-field-message-margin);min-height:1.25rem}.ad-form-field .ad-form-field-error{color:var(--form-field-error-color);font-size:var(--form-field-message-font-size);font-weight:var(--font-weight-medium);display:block;animation:fadeIn .2s ease-out}.ad-form-field .ad-form-field-hint{color:var(--form-field-message-color);font-size:var(--form-field-message-font-size);display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AdLabelComponent, selector: "ad-label", inputs: ["text", "for", "required", "error"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdFormFieldComponent, isStandalone: true, selector: "ad-form-field", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"ad-form-field\" [class.has-error]=\"hasError()\">\r\n    @if (label()) {\r\n    <ad-label [text]=\"label()\" [for]=\"forAttr()\" [required]=\"required()\" [error]=\"hasError()\">\r\n    </ad-label>\r\n    }\r\n\r\n    <div class=\"ad-form-field-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    @if (hint() || errorMessage()) {\r\n    <div class=\"ad-form-field-info\">\r\n        @if (errorMessage()) {\r\n        <span class=\"ad-form-field-error\">{{ errorMessage() }}</span>\r\n        }\r\n        @if (hint() && !errorMessage()) {\r\n        <span class=\"ad-form-field-hint\">{{ hint() }}</span>\r\n        }\r\n    </div>\r\n    }\r\n</div>", styles: [".ad-form-field{display:flex;flex-direction:column;width:100%}.ad-form-field .ad-form-field-content{position:relative;display:flex;flex-direction:column}.ad-form-field .ad-form-field-info{margin-top:var(--form-field-message-margin);min-height:1.25rem}.ad-form-field .ad-form-field-error{color:var(--form-field-error-color);font-size:var(--form-field-message-font-size);font-weight:var(--font-weight-medium);display:block;animation:fadeIn .2s ease-out}.ad-form-field .ad-form-field-hint{color:var(--form-field-message-color);font-size:var(--form-field-message-font-size);display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AdLabelComponent, selector: "ad-label", inputs: ["text", "for", "required", "error"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdFormFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ad-form-field', standalone: true, imports: [CommonModule, AdLabelComponent], template: "<div class=\"ad-form-field\" [class.has-error]=\"hasError()\">\r\n    @if (label()) {\r\n    <ad-label [text]=\"label()\" [for]=\"forAttr()\" [required]=\"required()\" [error]=\"hasError()\">\r\n    </ad-label>\r\n    }\r\n\r\n    <div class=\"ad-form-field-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    @if (hint() || errorMessage()) {\r\n    <div class=\"ad-form-field-info\">\r\n        @if (errorMessage()) {\r\n        <span class=\"ad-form-field-error\">{{ errorMessage() }}</span>\r\n        }\r\n        @if (hint() && !errorMessage()) {\r\n        <span class=\"ad-form-field-hint\">{{ hint() }}</span>\r\n        }\r\n    </div>\r\n    }\r\n</div>", styles: [".ad-form-field{display:flex;flex-direction:column;margin-bottom:var(--form-field-margin-bottom);width:100%}.ad-form-field .ad-form-field-content{position:relative;display:flex;flex-direction:column}.ad-form-field .ad-form-field-info{margin-top:var(--form-field-message-margin);min-height:1.25rem}.ad-form-field .ad-form-field-error{color:var(--form-field-error-color);font-size:var(--form-field-message-font-size);font-weight:var(--font-weight-medium);display:block;animation:fadeIn .2s ease-out}.ad-form-field .ad-form-field-hint{color:var(--form-field-message-color);font-size:var(--form-field-message-font-size);display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'ad-form-field', standalone: true, imports: [CommonModule, AdLabelComponent], template: "<div class=\"ad-form-field\" [class.has-error]=\"hasError()\">\r\n    @if (label()) {\r\n    <ad-label [text]=\"label()\" [for]=\"forAttr()\" [required]=\"required()\" [error]=\"hasError()\">\r\n    </ad-label>\r\n    }\r\n\r\n    <div class=\"ad-form-field-content\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n\r\n    @if (hint() || errorMessage()) {\r\n    <div class=\"ad-form-field-info\">\r\n        @if (errorMessage()) {\r\n        <span class=\"ad-form-field-error\">{{ errorMessage() }}</span>\r\n        }\r\n        @if (hint() && !errorMessage()) {\r\n        <span class=\"ad-form-field-hint\">{{ hint() }}</span>\r\n        }\r\n    </div>\r\n    }\r\n</div>", styles: [".ad-form-field{display:flex;flex-direction:column;width:100%}.ad-form-field .ad-form-field-content{position:relative;display:flex;flex-direction:column}.ad-form-field .ad-form-field-info{margin-top:var(--form-field-message-margin);min-height:1.25rem}.ad-form-field .ad-form-field-error{color:var(--form-field-error-color);font-size:var(--form-field-message-font-size);font-weight:var(--font-weight-medium);display:block;animation:fadeIn .2s ease-out}.ad-form-field .ad-form-field-hint{color:var(--form-field-message-color);font-size:var(--form-field-message-font-size);display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: true }] }] } });
 
 const FormFieldResourceSchema = z.object({
@@ -2043,7 +2179,7 @@ class AdLoginComponent {
         return (control && control.invalid && (control.dirty || control.touched)) || false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdLoginComponent, isStandalone: true, selector: "ad-login", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loginSubmit: "loginSubmit", forgotPasswordClick: "forgotPasswordClick" }, ngImport: i0, template: "<div class=\"w-full max-w-md space-y-8 bg-white p-8 rounded-xl shadow-lg border border-slate-100\">\r\n    <div class=\"text-center\">\r\n        @if (logo()) {\r\n        <img [src]=\"logo()\" alt=\"Logo\" class=\"mx-auto h-12 w-auto\" />\r\n        } @else if (icon()) {\r\n        <div class=\"mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-sky-100 text-sky-600\">\r\n            <!-- Fallback icon or remove nz-icon -->\r\n            <span class=\"text-2xl font-bold\">C</span>\r\n        </div>\r\n        }\r\n        <h2 class=\"mt-6 text-3xl font-extrabold text-cerca-navy\">\r\n            {{ title() }}\r\n            @if (titleAccent()) {\r\n            <span class=\"accent-text\">{{ titleAccent() }}</span>\r\n            }\r\n        </h2>\r\n        <p class=\"mt-2 text-sm text-slate-600 uppercase tracking-wide\">{{ subtitle() }}</p>\r\n    </div>\r\n\r\n    @if (errorMessage()) {\r\n    <div class=\"bg-red-50 border-l-4 border-red-500 p-4 mb-4 rounded-md\">\r\n        <div class=\"flex\">\r\n            <div class=\"ml-3\">\r\n                <p class=\"text-sm text-red-700\">{{ errorMessage() }}</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <form [formGroup]=\"loginForm\" class=\"mt-8 space-y-6\" (ngSubmit)=\"submitForm()\">\r\n        <div class=\"space-y-4\">\r\n            <div class=\"form-group\">\r\n                <ad-input formControlName=\"email\" placeholder=\"correo@ejemplo.com\" label=\"Correo Electr\u00F3nico\"\r\n                    type=\"email\" prefix=\"user\" [error]=\"fieldInvalid('email')\">\r\n                </ad-input>\r\n                @if (fieldInvalid('email')) {\r\n                <p class=\"mt-1 text-sm text-red-600\">\r\n                    @if (loginForm.get('email')?.hasError('required')) { El campo es requerido }\r\n                    @else { Ingrese un correo v\u00E1lido }\r\n                </p>\r\n                }\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n                <ad-input formControlName=\"password\" placeholder=\"********\" label=\"Contrase\u00F1a\" type=\"password\"\r\n                    prefix=\"lock\" [error]=\"fieldInvalid('password')\">\r\n                </ad-input>\r\n                @if (fieldInvalid('password')) {\r\n                <p class=\"mt-1 text-sm text-red-600\">\r\n                    La contrase\u00F1a es requerida\r\n                </p>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"flex items-center justify-between\">\r\n            <div class=\"flex items-center\">\r\n                <input id=\"remember-me\" formControlName=\"remember\" type=\"checkbox\"\r\n                    class=\"h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-600\">\r\n                <label for=\"remember-me\" class=\"ml-2 block text-sm text-slate-900\">Recordarme</label>\r\n            </div>\r\n\r\n            @if (recoverPasswordUrl()) {\r\n            <a [href]=\"recoverPasswordUrl()\" class=\"text-sm font-medium text-sky-600 hover:text-sky-500\">\r\n                {{ forgotPasswordLabel() }}\r\n            </a>\r\n            } @else {\r\n            <a class=\"text-sm font-medium text-sky-600 hover:text-sky-500 cursor-pointer\"\r\n                (click)=\"forgotPasswordClick.emit()\">\r\n                {{ forgotPasswordLabel() }}\r\n            </a>\r\n            }\r\n        </div>\r\n\r\n        <div>\r\n            <div>\r\n                <ad-button [loading]=\"loading()\" variant=\"primary\" type=\"submit\" [block]=\"true\"\r\n                    class=\"w-full justify-center\" [disabled]=\"loginForm.invalid || loading()\">\r\n                    Iniciar Sesi\u00F3n\r\n                </ad-button>\r\n            </div>\r\n        </div>\r\n    </form>\r\n\r\n    <div class=\"mt-6 text-center text-xs text-slate-400\">\r\n        <p>\u00BFNecesitas ayuda? Contacta a <a [href]=\"'mailto:' + supportEmail()\"\r\n                class=\"hover:text-sky-600 transition-colors\">{{ supportEmail() }}</a></p>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AdInputComponent, selector: "ad-input", inputs: ["type", "placeholder", "label", "error", "rows", "disabled", "size", "prefix", "suffix"] }, { kind: "component", type: AdButtonComponent, selector: "ad-button", inputs: ["variant", "type", "disabled", "loading", "icon", "size", "block"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: AdLoginComponent, isStandalone: true, selector: "ad-login", inputs: { resource: { classPropertyName: "resource", publicName: "resource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { loginSubmit: "loginSubmit", forgotPasswordClick: "forgotPasswordClick" }, ngImport: i0, template: "<div class=\"min-h-screen flex items-center justify-center bg-auth-gradient py-12 px-4 sm:px-6 lg:px-8\">\r\n    <div class=\"w-full max-w-md space-y-8 bg-white p-8 rounded-xl shadow-lg border border-slate-100\">\r\n        <div class=\"text-center\">\r\n            @if (logo()) {\r\n            <img [src]=\"logo()\" alt=\"Logo\" class=\"mx-auto h-12 w-auto\" />\r\n            } @else if (icon()) {\r\n            <div class=\"mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-sky-100 text-sky-600\">\r\n                <!-- Fallback icon or remove nz-icon -->\r\n                <span class=\"text-2xl font-bold\">C</span>\r\n            </div>\r\n            }\r\n            <h2 class=\"mt-6 text-3xl font-extrabold text-cerca-navy\">\r\n                {{ title() }}\r\n                @if (titleAccent()) {\r\n                <span class=\"accent-text\">{{ titleAccent() }}</span>\r\n                }\r\n            </h2>\r\n            <p class=\"mt-2 text-sm text-slate-600 uppercase tracking-wide\">{{ subtitle() }}</p>\r\n        </div>\r\n\r\n        @if (errorMessage()) {\r\n        <div class=\"bg-red-50 border-l-4 border-red-500 p-4 mb-4 rounded-md\">\r\n            <div class=\"flex\">\r\n                <div class=\"ml-3\">\r\n                    <p class=\"text-sm text-red-700\">{{ errorMessage() }}</p>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n        <form [formGroup]=\"loginForm\" class=\"mt-8 space-y-6\" (ngSubmit)=\"submitForm()\">\r\n            <div class=\"space-y-4\">\r\n                <div class=\"form-group\">\r\n                    <ad-input formControlName=\"email\" placeholder=\"correo@ejemplo.com\" label=\"Correo Electr\u00F3nico\"\r\n                        type=\"email\" prefix=\"user\" [error]=\"fieldInvalid('email')\">\r\n                    </ad-input>\r\n                    @if (fieldInvalid('email')) {\r\n                    <p class=\"mt-1 text-sm text-red-600\">\r\n                        @if (loginForm.get('email')?.hasError('required')) { El campo es requerido }\r\n                        @else { Ingrese un correo v\u00E1lido }\r\n                    </p>\r\n                    }\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <ad-input formControlName=\"password\" placeholder=\"********\" label=\"Contrase\u00F1a\" type=\"password\"\r\n                        prefix=\"lock\" [error]=\"fieldInvalid('password')\">\r\n                    </ad-input>\r\n                    @if (fieldInvalid('password')) {\r\n                    <p class=\"mt-1 text-sm text-red-600\">\r\n                        La contrase\u00F1a es requerida\r\n                    </p>\r\n                    }\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"flex items-center justify-between\">\r\n                <div class=\"flex items-center\">\r\n                    <input id=\"remember-me\" formControlName=\"remember\" type=\"checkbox\"\r\n                        class=\"h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-600\">\r\n                    <label for=\"remember-me\" class=\"ml-2 block text-sm text-slate-900\">Recordarme</label>\r\n                </div>\r\n\r\n                @if (recoverPasswordUrl()) {\r\n                <a [href]=\"recoverPasswordUrl()\" class=\"text-sm font-medium text-sky-600 hover:text-sky-500\">\r\n                    {{ forgotPasswordLabel() }}\r\n                </a>\r\n                } @else {\r\n                <a class=\"text-sm font-medium text-sky-600 hover:text-sky-500 cursor-pointer\"\r\n                    (click)=\"forgotPasswordClick.emit()\">\r\n                    {{ forgotPasswordLabel() }}\r\n                </a>\r\n                }\r\n            </div>\r\n\r\n            <div>\r\n                <div>\r\n                    <ad-button [loading]=\"loading()\" variant=\"primary\" type=\"submit\" [block]=\"true\"\r\n                        class=\"w-full justify-center\" [disabled]=\"loginForm.invalid || loading()\">\r\n                        Iniciar Sesi\u00F3n\r\n                    </ad-button>\r\n                </div>\r\n            </div>\r\n        </form>\r\n\r\n        <div class=\"mt-6 text-center text-xs text-slate-400\">\r\n            <p>\u00BFNecesitas ayuda? Contacta a <a [href]=\"'mailto:' + supportEmail()\"\r\n                    class=\"hover:text-sky-600 transition-colors\">{{ supportEmail() }}</a></p>\r\n        </div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: AdInputComponent, selector: "ad-input", inputs: ["type", "placeholder", "label", "error", "rows", "disabled", "size", "prefix", "suffix", "mask"] }, { kind: "component", type: AdButtonComponent, selector: "ad-button", inputs: ["variant", "type", "disabled", "loading", "icon", "size", "block"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: AdLoginComponent, decorators: [{
             type: Component,
@@ -2052,7 +2188,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImpor
                         ReactiveFormsModule,
                         AdInputComponent,
                         AdButtonComponent
-                    ], template: "<div class=\"w-full max-w-md space-y-8 bg-white p-8 rounded-xl shadow-lg border border-slate-100\">\r\n    <div class=\"text-center\">\r\n        @if (logo()) {\r\n        <img [src]=\"logo()\" alt=\"Logo\" class=\"mx-auto h-12 w-auto\" />\r\n        } @else if (icon()) {\r\n        <div class=\"mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-sky-100 text-sky-600\">\r\n            <!-- Fallback icon or remove nz-icon -->\r\n            <span class=\"text-2xl font-bold\">C</span>\r\n        </div>\r\n        }\r\n        <h2 class=\"mt-6 text-3xl font-extrabold text-cerca-navy\">\r\n            {{ title() }}\r\n            @if (titleAccent()) {\r\n            <span class=\"accent-text\">{{ titleAccent() }}</span>\r\n            }\r\n        </h2>\r\n        <p class=\"mt-2 text-sm text-slate-600 uppercase tracking-wide\">{{ subtitle() }}</p>\r\n    </div>\r\n\r\n    @if (errorMessage()) {\r\n    <div class=\"bg-red-50 border-l-4 border-red-500 p-4 mb-4 rounded-md\">\r\n        <div class=\"flex\">\r\n            <div class=\"ml-3\">\r\n                <p class=\"text-sm text-red-700\">{{ errorMessage() }}</p>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    }\r\n\r\n    <form [formGroup]=\"loginForm\" class=\"mt-8 space-y-6\" (ngSubmit)=\"submitForm()\">\r\n        <div class=\"space-y-4\">\r\n            <div class=\"form-group\">\r\n                <ad-input formControlName=\"email\" placeholder=\"correo@ejemplo.com\" label=\"Correo Electr\u00F3nico\"\r\n                    type=\"email\" prefix=\"user\" [error]=\"fieldInvalid('email')\">\r\n                </ad-input>\r\n                @if (fieldInvalid('email')) {\r\n                <p class=\"mt-1 text-sm text-red-600\">\r\n                    @if (loginForm.get('email')?.hasError('required')) { El campo es requerido }\r\n                    @else { Ingrese un correo v\u00E1lido }\r\n                </p>\r\n                }\r\n            </div>\r\n\r\n            <div class=\"form-group\">\r\n                <ad-input formControlName=\"password\" placeholder=\"********\" label=\"Contrase\u00F1a\" type=\"password\"\r\n                    prefix=\"lock\" [error]=\"fieldInvalid('password')\">\r\n                </ad-input>\r\n                @if (fieldInvalid('password')) {\r\n                <p class=\"mt-1 text-sm text-red-600\">\r\n                    La contrase\u00F1a es requerida\r\n                </p>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"flex items-center justify-between\">\r\n            <div class=\"flex items-center\">\r\n                <input id=\"remember-me\" formControlName=\"remember\" type=\"checkbox\"\r\n                    class=\"h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-600\">\r\n                <label for=\"remember-me\" class=\"ml-2 block text-sm text-slate-900\">Recordarme</label>\r\n            </div>\r\n\r\n            @if (recoverPasswordUrl()) {\r\n            <a [href]=\"recoverPasswordUrl()\" class=\"text-sm font-medium text-sky-600 hover:text-sky-500\">\r\n                {{ forgotPasswordLabel() }}\r\n            </a>\r\n            } @else {\r\n            <a class=\"text-sm font-medium text-sky-600 hover:text-sky-500 cursor-pointer\"\r\n                (click)=\"forgotPasswordClick.emit()\">\r\n                {{ forgotPasswordLabel() }}\r\n            </a>\r\n            }\r\n        </div>\r\n\r\n        <div>\r\n            <div>\r\n                <ad-button [loading]=\"loading()\" variant=\"primary\" type=\"submit\" [block]=\"true\"\r\n                    class=\"w-full justify-center\" [disabled]=\"loginForm.invalid || loading()\">\r\n                    Iniciar Sesi\u00F3n\r\n                </ad-button>\r\n            </div>\r\n        </div>\r\n    </form>\r\n\r\n    <div class=\"mt-6 text-center text-xs text-slate-400\">\r\n        <p>\u00BFNecesitas ayuda? Contacta a <a [href]=\"'mailto:' + supportEmail()\"\r\n                class=\"hover:text-sky-600 transition-colors\">{{ supportEmail() }}</a></p>\r\n    </div>\r\n</div>" }]
+                    ], template: "<div class=\"min-h-screen flex items-center justify-center bg-auth-gradient py-12 px-4 sm:px-6 lg:px-8\">\r\n    <div class=\"w-full max-w-md space-y-8 bg-white p-8 rounded-xl shadow-lg border border-slate-100\">\r\n        <div class=\"text-center\">\r\n            @if (logo()) {\r\n            <img [src]=\"logo()\" alt=\"Logo\" class=\"mx-auto h-12 w-auto\" />\r\n            } @else if (icon()) {\r\n            <div class=\"mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-sky-100 text-sky-600\">\r\n                <!-- Fallback icon or remove nz-icon -->\r\n                <span class=\"text-2xl font-bold\">C</span>\r\n            </div>\r\n            }\r\n            <h2 class=\"mt-6 text-3xl font-extrabold text-cerca-navy\">\r\n                {{ title() }}\r\n                @if (titleAccent()) {\r\n                <span class=\"accent-text\">{{ titleAccent() }}</span>\r\n                }\r\n            </h2>\r\n            <p class=\"mt-2 text-sm text-slate-600 uppercase tracking-wide\">{{ subtitle() }}</p>\r\n        </div>\r\n\r\n        @if (errorMessage()) {\r\n        <div class=\"bg-red-50 border-l-4 border-red-500 p-4 mb-4 rounded-md\">\r\n            <div class=\"flex\">\r\n                <div class=\"ml-3\">\r\n                    <p class=\"text-sm text-red-700\">{{ errorMessage() }}</p>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        }\r\n\r\n        <form [formGroup]=\"loginForm\" class=\"mt-8 space-y-6\" (ngSubmit)=\"submitForm()\">\r\n            <div class=\"space-y-4\">\r\n                <div class=\"form-group\">\r\n                    <ad-input formControlName=\"email\" placeholder=\"correo@ejemplo.com\" label=\"Correo Electr\u00F3nico\"\r\n                        type=\"email\" prefix=\"user\" [error]=\"fieldInvalid('email')\">\r\n                    </ad-input>\r\n                    @if (fieldInvalid('email')) {\r\n                    <p class=\"mt-1 text-sm text-red-600\">\r\n                        @if (loginForm.get('email')?.hasError('required')) { El campo es requerido }\r\n                        @else { Ingrese un correo v\u00E1lido }\r\n                    </p>\r\n                    }\r\n                </div>\r\n\r\n                <div class=\"form-group\">\r\n                    <ad-input formControlName=\"password\" placeholder=\"********\" label=\"Contrase\u00F1a\" type=\"password\"\r\n                        prefix=\"lock\" [error]=\"fieldInvalid('password')\">\r\n                    </ad-input>\r\n                    @if (fieldInvalid('password')) {\r\n                    <p class=\"mt-1 text-sm text-red-600\">\r\n                        La contrase\u00F1a es requerida\r\n                    </p>\r\n                    }\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"flex items-center justify-between\">\r\n                <div class=\"flex items-center\">\r\n                    <input id=\"remember-me\" formControlName=\"remember\" type=\"checkbox\"\r\n                        class=\"h-4 w-4 rounded border-slate-300 text-sky-600 focus:ring-sky-600\">\r\n                    <label for=\"remember-me\" class=\"ml-2 block text-sm text-slate-900\">Recordarme</label>\r\n                </div>\r\n\r\n                @if (recoverPasswordUrl()) {\r\n                <a [href]=\"recoverPasswordUrl()\" class=\"text-sm font-medium text-sky-600 hover:text-sky-500\">\r\n                    {{ forgotPasswordLabel() }}\r\n                </a>\r\n                } @else {\r\n                <a class=\"text-sm font-medium text-sky-600 hover:text-sky-500 cursor-pointer\"\r\n                    (click)=\"forgotPasswordClick.emit()\">\r\n                    {{ forgotPasswordLabel() }}\r\n                </a>\r\n                }\r\n            </div>\r\n\r\n            <div>\r\n                <div>\r\n                    <ad-button [loading]=\"loading()\" variant=\"primary\" type=\"submit\" [block]=\"true\"\r\n                        class=\"w-full justify-center\" [disabled]=\"loginForm.invalid || loading()\">\r\n                        Iniciar Sesi\u00F3n\r\n                    </ad-button>\r\n                </div>\r\n            </div>\r\n        </form>\r\n\r\n        <div class=\"mt-6 text-center text-xs text-slate-400\">\r\n            <p>\u00BFNecesitas ayuda? Contacta a <a [href]=\"'mailto:' + supportEmail()\"\r\n                    class=\"hover:text-sky-600 transition-colors\">{{ supportEmail() }}</a></p>\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], propDecorators: { resource: [{ type: i0.Input, args: [{ isSignal: true, alias: "resource", required: true }] }], loginSubmit: [{ type: i0.Output, args: ["loginSubmit"] }], forgotPasswordClick: [{ type: i0.Output, args: ["forgotPasswordClick"] }] } });
 
 const LoginResourceSchema = z.object({
@@ -2861,5 +2997,5 @@ const ListPageTemplateResourceSchema = z.object({
  * Generated bundle index. Do not edit.
  */
 
-export { AdAdminLayoutComponent, AdAuthLayoutComponent, AdBadgeComponent, AdButtonComponent, AdCardComponent, AdDashboardTemplateComponent, AdDataTableComponent, AdDescriptionHeaderComponent, AdDocViewerComponent, AdDocumentationWrapperComponent, AdFormFieldComponent, AdFormLayoutComponent, AdFormPageTemplateComponent, AdFormSectionComponent, AdHeaderComponent, AdIconComponent, AdInputComponent, AdLabelComponent, AdListPageTemplateComponent, AdLoadingComponent, AdLoginComponent, AdModalComponent, AdModalService, AdModalTriggerComponent, AdModalWrapperComponent, AdSearchBarComponent, AdSelectComponent, AdSidebarComponent, AdStatCardComponent, AdSwitchComponent, AdTableColumnSchema, AdTableComponent, AdminLayoutResourceSchema, AdminSectionCardActionSchema, AdminSectionCardComponent, AdminSectionCardResourceSchema, AuthLayoutResourceSchema, CardResourceSchema, ComponentApiInputSchema, ComponentApiOutputSchema, ComponentVariantSchema, DashboardTemplateResourceSchema, DataTableColumnSchema, DataTableResourceSchema, DescriptionHeaderButtonSchema, DescriptionHeaderResourceSchema, DesignSystem, DocStatusSchema, DocViewerResourceSchema, DocumentationWrapperResourceSchema, FieldRendererRegistry, FormEngineComponent, FormEngineService, FormFieldResourceSchema, FormLayoutResourceSchema, FormPageTemplateResourceSchema, FormSectionResourceSchema, HeaderResourceSchema, ListPageTemplateResourceSchema, LoginResourceSchema, ModalResourceSchema, ModalTriggerResourceSchema, NavItemSchema, STAT_CARD_COLOR_MAP, SearchBarResourceSchema, SidebarResourceSchema, StatCardColorSchema, StatCardResourceSchema, TableEngineComponent, TableResourceSchema, UserSchema, ValidatorRegistry };
+export { AdAdminLayoutComponent, AdAuthLayoutComponent, AdBadgeComponent, AdButtonComponent, AdCardComponent, AdDashboardTemplateComponent, AdDataTableComponent, AdDescriptionHeaderComponent, AdDocViewerComponent, AdDocumentationWrapperComponent, AdFormEngineComponent, AdFormFieldComponent, AdFormLayoutComponent, AdFormPageTemplateComponent, AdFormSectionComponent, AdHeaderComponent, AdIconComponent, AdInputComponent, AdLabelComponent, AdListPageTemplateComponent, AdLoadingComponent, AdLoginComponent, AdModalComponent, AdModalService, AdModalTriggerComponent, AdModalWrapperComponent, AdSearchBarComponent, AdSelectComponent, AdSidebarComponent, AdStatCardComponent, AdSwitchComponent, AdTableColumnSchema, AdTableComponent, AdminLayoutResourceSchema, AdminSectionCardActionSchema, AdminSectionCardComponent, AdminSectionCardResourceSchema, AuthLayoutResourceSchema, CardResourceSchema, ComponentApiInputSchema, ComponentApiOutputSchema, ComponentVariantSchema, DashboardTemplateResourceSchema, DataTableColumnSchema, DataTableResourceSchema, DescriptionHeaderButtonSchema, DescriptionHeaderResourceSchema, DesignSystem, DocStatusSchema, DocViewerResourceSchema, DocumentationWrapperResourceSchema, FieldRendererRegistry, FormEngineService, FormFieldResourceSchema, FormLayoutResourceSchema, FormPageTemplateResourceSchema, FormSectionResourceSchema, HeaderResourceSchema, ListPageTemplateResourceSchema, LoginResourceSchema, ModalResourceSchema, ModalTriggerResourceSchema, NavItemSchema, STAT_CARD_COLOR_MAP, SearchBarResourceSchema, SidebarResourceSchema, StatCardColorSchema, StatCardResourceSchema, TableEngineComponent, TableResourceSchema, UserSchema, ValidatorRegistry };
 //# sourceMappingURL=cerca-design-system.mjs.map