@ajuarezso/sui-design-system 0.7.3 → 0.7.5

package/fesm2022/ajuarezso-sui-design-system.mjs

@@ -10236,11 +10236,13 @@ class SuiModalSheet {
     backdropOpacity = computed(() => this.computeBackdropOpacity(this.liveProgress()), ...(ngDevMode ? [{ debugName: "backdropOpacity" }] : /* istanbul ignore next */ []));
     /** True si el backdrop debe capturar pointer events (current > backdropBreakpoint). */
     backdropInteractive = computed(() => this.liveProgress() > this.backdropBreakpoint(), ...(ngDevMode ? [{ debugName: "backdropInteractive" }] : /* istanbul ignore next */ []));
-    /** Altura del sheet en dvh — `progress * 100`. Cuando progress=0.25 el
-        sheet ocupa 25dvh y los otros 75dvh quedan VACÍOS → contenido detrás
-        (mapa) totalmente interactivo sin necesidad de truquitos de
-        pointer-events. */
-    heightCss = computed(() => `${this.liveProgress() * 100}dvh`, ...(ngDevMode ? [{ debugName: "heightCss" }] : /* istanbul ignore next */ []));
+    /** CAP de altura del sheet — `min(progress·100dvh, viewport - safe-top - 16)`.
+        Se bindea como max-height con `height: max-content` en el scss: el sheet
+        NUNCA mide más que su contenido (sin espacio vacío al final cuando el
+        contenido termina antes del breakpoint), y el breakpoint actúa como techo.
+        Cuando progress=0.25 el sheet ocupa a lo sumo 25dvh y el resto del
+        viewport queda VACÍO → contenido detrás (mapa) interactivo. */
+    heightCss = computed(() => `min(${this.liveProgress() * 100}dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 16px))`, ...(ngDevMode ? [{ debugName: "heightCss" }] : /* istanbul ignore next */ []));
     /** True cuando el sheet está al breakpoint máximo del array. En ese punto
         habilitamos scroll del body (touch-action: pan-y) — el user ya no puede
         expandir más, así que se prioriza ver el contenido sobre el drag. En el
@@ -10605,13 +10607,13 @@ class SuiModalSheet {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModalSheet, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModalSheet, isStandalone: true, selector: "sui-modal-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, initialBreakpoint: { classPropertyName: "initialBreakpoint", publicName: "initialBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, backdropBreakpoint: { classPropertyName: "backdropBreakpoint", publicName: "backdropBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", breakpointChange: "breakpointChange" }, host: { properties: { "attr.data-sui-sheet-open": "open() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "handleRef", first: true, predicate: ["handle"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Backdrop con opacity din\u00E1mica.\n       pointer-events: none cuando current \u2264 backdropBreakpoint para dejar\n       interactivo el contenido debajo (ej. mapa). -->\n  <div\n    class=\"sui-sheet__backdrop\"\n    [style.opacity]=\"backdropOpacity()\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Sheet container \u2014 anclado al bottom, altura din\u00E1mica.\n       Usar `height` en vez de transform para que el \u00E1rea \"no cubierta\" del\n       viewport (donde se ve el mapa) NO sea parte del DOM del sheet \u2014\n       contenido de fondo autom\u00E1ticamente interactivo, scroll del body\n       respeta la altura visible (no fantasma). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [class.sui-sheet--dragging]=\"dragging()\"\n    [style.height]=\"heightCss()\"\n    [style.--sheet-progress]=\"liveProgress()\"\n  >\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;transition:opacity .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging~.sui-sheet__backdrop,:host([data-sui-sheet-open]) .sui-sheet--dragging+.sui-sheet__backdrop{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px);background:var(--sui-bg-white-0, #ffffff);border-radius:36px;box-shadow:0 -8px 32px -12px #0e121b2e;overflow:hidden;overscroll-behavior:contain;will-change:height;transition:height .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging{transition:none}.sui-sheet__handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sui-sheet__handle:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:none;padding:0 20px 20px}.sui-sheet__body--scrollable{touch-action:pan-y}.sui-sheet__body--full{padding:0}.sui-sheet__body:not(.sui-sheet__body--full){padding-bottom:max(20px,env(safe-area-inset-bottom,20px))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModalSheet, isStandalone: true, selector: "sui-modal-sheet", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, breakpoints: { classPropertyName: "breakpoints", publicName: "breakpoints", isSignal: true, isRequired: false, transformFunction: null }, initialBreakpoint: { classPropertyName: "initialBreakpoint", publicName: "initialBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, backdropBreakpoint: { classPropertyName: "backdropBreakpoint", publicName: "backdropBreakpoint", isSignal: true, isRequired: false, transformFunction: null }, showHandle: { classPropertyName: "showHandle", publicName: "showHandle", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed", breakpointChange: "breakpointChange" }, host: { properties: { "attr.data-sui-sheet-open": "open() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "handleRef", first: true, predicate: ["handle"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Backdrop con opacity din\u00E1mica.\n       pointer-events: none cuando current \u2264 backdropBreakpoint para dejar\n       interactivo el contenido debajo (ej. mapa). -->\n  <div\n    class=\"sui-sheet__backdrop\"\n    [style.opacity]=\"backdropOpacity()\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Sheet container \u2014 anclado al bottom, altura din\u00E1mica.\n       Usar `height` en vez de transform para que el \u00E1rea \"no cubierta\" del\n       viewport (donde se ve el mapa) NO sea parte del DOM del sheet \u2014\n       contenido de fondo autom\u00E1ticamente interactivo, scroll del body\n       respeta la altura visible (no fantasma). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [class.sui-sheet--dragging]=\"dragging()\"\n    [style.max-height]=\"heightCss()\"\n    [style.--sheet-progress]=\"liveProgress()\"\n  >\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;transition:opacity .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging~.sui-sheet__backdrop,:host([data-sui-sheet-open]) .sui-sheet--dragging+.sui-sheet__backdrop{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 54px 54px;box-shadow:0 -8px 32px -12px #0e121b2e;overflow:hidden;overscroll-behavior:contain;will-change:max-height;transition:max-height .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging{transition:none}.sui-sheet__handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sui-sheet__handle:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:none;padding:0 20px 20px}.sui-sheet__body--scrollable{touch-action:pan-y}.sui-sheet__body--full{padding:0}.sui-sheet__body:not(.sui-sheet__body--full){padding-bottom:max(20px,env(safe-area-inset-bottom,20px))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModalSheet, decorators: [{
             type: Component,
             args: [{ selector: 'sui-modal-sheet', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                         '[attr.data-sui-sheet-open]': 'open() ? "" : null',
-                    }, template: "@if (open()) {\n  <!-- Backdrop con opacity din\u00E1mica.\n       pointer-events: none cuando current \u2264 backdropBreakpoint para dejar\n       interactivo el contenido debajo (ej. mapa). -->\n  <div\n    class=\"sui-sheet__backdrop\"\n    [style.opacity]=\"backdropOpacity()\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Sheet container \u2014 anclado al bottom, altura din\u00E1mica.\n       Usar `height` en vez de transform para que el \u00E1rea \"no cubierta\" del\n       viewport (donde se ve el mapa) NO sea parte del DOM del sheet \u2014\n       contenido de fondo autom\u00E1ticamente interactivo, scroll del body\n       respeta la altura visible (no fantasma). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [class.sui-sheet--dragging]=\"dragging()\"\n    [style.height]=\"heightCss()\"\n    [style.--sheet-progress]=\"liveProgress()\"\n  >\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;transition:opacity .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging~.sui-sheet__backdrop,:host([data-sui-sheet-open]) .sui-sheet--dragging+.sui-sheet__backdrop{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px);background:var(--sui-bg-white-0, #ffffff);border-radius:36px;box-shadow:0 -8px 32px -12px #0e121b2e;overflow:hidden;overscroll-behavior:contain;will-change:height;transition:height .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging{transition:none}.sui-sheet__handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sui-sheet__handle:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:none;padding:0 20px 20px}.sui-sheet__body--scrollable{touch-action:pan-y}.sui-sheet__body--full{padding:0}.sui-sheet__body:not(.sui-sheet__body--full){padding-bottom:max(20px,env(safe-area-inset-bottom,20px))}\n"] }]
+                    }, template: "@if (open()) {\n  <!-- Backdrop con opacity din\u00E1mica.\n       pointer-events: none cuando current \u2264 backdropBreakpoint para dejar\n       interactivo el contenido debajo (ej. mapa). -->\n  <div\n    class=\"sui-sheet__backdrop\"\n    [style.opacity]=\"backdropOpacity()\"\n    [style.pointer-events]=\"backdropInteractive() ? 'auto' : 'none'\"\n    (click)=\"onBackdropClick()\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Sheet container \u2014 anclado al bottom, altura din\u00E1mica.\n       Usar `height` en vez de transform para que el \u00E1rea \"no cubierta\" del\n       viewport (donde se ve el mapa) NO sea parte del DOM del sheet \u2014\n       contenido de fondo autom\u00E1ticamente interactivo, scroll del body\n       respeta la altura visible (no fantasma). -->\n  <div\n    #container\n    class=\"sui-sheet\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [class.sui-sheet--dragging]=\"dragging()\"\n    [style.max-height]=\"heightCss()\"\n    [style.--sheet-progress]=\"liveProgress()\"\n  >\n    @if (showHandle()) {\n      <!-- Drag handle (pill). Solo este elemento captura los pointer events\n           del drag \u2014 el resto del sheet permite scroll/clicks normales. -->\n      <div\n        #handle\n        class=\"sui-sheet__handle\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerCancel($event)\"\n      >\n        <div class=\"sui-sheet__handle-pill\"></div>\n      </div>\n    }\n\n    <!-- Body con scroll interno. Consumer proyecta su contenido aqu\u00ED.\n         Acepta drag con patr\u00F3n scroll-then-drag (iOS canon):\n         - Si el body est\u00E1 scrolleado (scrollTop > 0), el drag se ignora y\n           el touch hace scroll normal.\n         - Si est\u00E1 en top (scrollTop === 0) y el user arrastra hacia abajo,\n           se inicia drag del sheet.\n         - Si est\u00E1 en max breakpoint y user arrastra hacia abajo, se inicia\n           drag (incluso con scrollTop === 0 ya cubre eso).\n         - Drag hacia arriba siempre permite scroll del body (no roba el gesto). -->\n    <div\n      #body\n      class=\"sui-sheet__body\"\n      [class.sui-sheet__body--full]=\"fullBody()\"\n      [class.sui-sheet__body--scrollable]=\"atMaxBreakpoint()\"\n      (pointerdown)=\"onBodyPointerDown($event)\"\n      (pointermove)=\"onBodyPointerMove($event)\"\n      (pointerup)=\"onPointerUp($event)\"\n      (pointercancel)=\"onPointerCancel($event)\"\n    >\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-sheet__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;transition:opacity .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging~.sui-sheet__backdrop,:host([data-sui-sheet-open]) .sui-sheet--dragging+.sui-sheet__backdrop{transition:none}.sui-sheet{position:fixed;bottom:8px;left:8px;right:8px;z-index:1001;display:flex;flex-direction:column;box-sizing:border-box;height:max-content;background:var(--sui-bg-white-0, #ffffff);border-radius:36px 36px 54px 54px;box-shadow:0 -8px 32px -12px #0e121b2e;overflow:hidden;overscroll-behavior:contain;will-change:max-height;transition:max-height .35s cubic-bezier(.32,.72,0,1)}.sui-sheet--dragging{transition:none}.sui-sheet__handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.sui-sheet__handle:active{cursor:grabbing}.sui-sheet__handle-pill{width:36px;height:5px;border-radius:999px;background:var(--sui-bg-soft-200, #d4d4d8)}.sui-sheet__body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:none;padding:0 20px 20px}.sui-sheet__body--scrollable{touch-action:pan-y}.sui-sheet__body--full{padding:0}.sui-sheet__body:not(.sui-sheet__body--full){padding-bottom:max(20px,env(safe-area-inset-bottom,20px))}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], breakpoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "breakpoints", required: false }] }], initialBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialBreakpoint", required: false }] }], backdropBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropBreakpoint", required: false }] }], showHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHandle", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], fullBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullBody", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], breakpointChange: [{ type: i0.Output, args: ["breakpointChange"] }], containerRef: [{
                 type: ViewChild,
                 args: ['container']
@@ -11125,7 +11127,7 @@ class SuiModal {
         container?.focus({ preventScroll: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModal, isStandalone: true, selector: "sui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, statusAlignment: { classPropertyName: "statusAlignment", publicName: "statusAlignment", isSignal: true, isRequired: false, transformFunction: null }, backdropBlur: { classPropertyName: "backdropBlur", publicName: "backdropBlur", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-modal-open": "open() ? \"\" : null", "attr.data-sui-modal-fullscreen": "fullscreen() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyEl"], descendants: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Overlay backdrop -->\n  <div\n    class=\"sui-modal__backdrop\"\n    [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n  <div\n    class=\"sui-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"description() ? descId : null\"\n  >\n    <!-- Container \u2014 click stops propagation so it doesn't close.\n         tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n         (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n    <div\n      #container\n      class=\"sui-modal__container\"\n      [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n      [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n      [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n      [attr.data-sui-size]=\"size()\"\n      tabindex=\"-1\"\n      (click)=\"onContainerClick($event)\"\n    >\n      <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n           Figma 466:4778). En modo Status el icono+texto viven en el body\n           (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n      @if (isStatus()) {\n        @if (showClose()) {\n          <sui-compact-button\n            class=\"sui-modal__close-floating\"\n            icon=\"close-line\"\n            variantStyle=\"ghost\"\n            size=\"large\"\n            ariaLabel=\"Cerrar\"\n            (clicked)=\"close()\"\n          />\n        }\n      } @else if (title() || showClose()) {\n        <sui-modal-header\n          class=\"sui-modal__header\"\n          [title]=\"title() ?? ''\"\n          [description]=\"description()\"\n          [size]=\"description() ? 'medium' : 'small'\"\n          [iconVariant]=\"iconVariant()\"\n          [icon]=\"headerIcon()\"\n          [showClose]=\"showClose()\"\n          [titleId]=\"titleId\"\n          [descriptionId]=\"descId\"\n          (closed)=\"close()\"\n        />\n      }\n\n      <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n      <div #bodyEl\n           class=\"sui-modal__body\"\n           [class.sui-modal__body--full]=\"fullBody()\"\n           [class.sui-modal__body--status]=\"isStatus()\">\n\n        <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n             centrado; horizontal (480:1366) = tile + texto en fila, alineado\n             a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n        @if (isStatus()) {\n          <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n            <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n              <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n            </div>\n            @if (title() || description()) {\n              <div class=\"sui-modal__status-text\">\n                @if (title()) {\n                  <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n                }\n                @if (description()) {\n                  <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <ng-content />\n      </div>\n\n      <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n           o markup custom. -->\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiModalHeader, selector: "sui-modal-header", inputs: ["title", "description", "size", "iconVariant", "icon", "showClose", "titleId", "descriptionId"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiModal, isStandalone: true, selector: "sui-modal", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, iconVariant: { classPropertyName: "iconVariant", publicName: "iconVariant", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, statusAlignment: { classPropertyName: "statusAlignment", publicName: "statusAlignment", isSignal: true, isRequired: false, transformFunction: null }, backdropBlur: { classPropertyName: "backdropBlur", publicName: "backdropBlur", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, fullBody: { classPropertyName: "fullBody", publicName: "fullBody", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", closed: "closed" }, host: { properties: { "attr.title": "null", "attr.data-sui-modal-open": "open() ? \"\" : null", "attr.data-sui-modal-fullscreen": "fullscreen() ? \"\" : null" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyEl"], descendants: true }], ngImport: i0, template: "@if (open()) {\n  <!-- Overlay backdrop -->\n  <div\n    class=\"sui-modal__backdrop\"\n    [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n  <div\n    class=\"sui-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"description() ? descId : null\"\n  >\n    <!-- Container \u2014 click stops propagation so it doesn't close.\n         tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n         (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n    <div\n      #container\n      class=\"sui-modal__container\"\n      [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n      [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n      [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n      [attr.data-sui-size]=\"size()\"\n      tabindex=\"-1\"\n      (click)=\"onContainerClick($event)\"\n    >\n      <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n           Figma 466:4778). En modo Status el icono+texto viven en el body\n           (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n      @if (isStatus()) {\n        @if (showClose()) {\n          <sui-compact-button\n            class=\"sui-modal__close-floating\"\n            icon=\"close-line\"\n            variantStyle=\"ghost\"\n            size=\"large\"\n            ariaLabel=\"Cerrar\"\n            (clicked)=\"close()\"\n          />\n        }\n      } @else if (title() || showClose()) {\n        <sui-modal-header\n          class=\"sui-modal__header\"\n          [title]=\"title() ?? ''\"\n          [description]=\"description()\"\n          [size]=\"description() ? 'medium' : 'small'\"\n          [iconVariant]=\"iconVariant()\"\n          [icon]=\"headerIcon()\"\n          [showClose]=\"showClose()\"\n          [titleId]=\"titleId\"\n          [descriptionId]=\"descId\"\n          (closed)=\"close()\"\n        />\n      }\n\n      <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n      <div #bodyEl\n           class=\"sui-modal__body\"\n           [class.sui-modal__body--full]=\"fullBody()\"\n           [class.sui-modal__body--status]=\"isStatus()\">\n\n        <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n             centrado; horizontal (480:1366) = tile + texto en fila, alineado\n             a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n        @if (isStatus()) {\n          <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n            <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n              <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n            </div>\n            @if (title() || description()) {\n              <div class=\"sui-modal__status-text\">\n                @if (title()) {\n                  <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n                }\n                @if (description()) {\n                  <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <ng-content />\n      </div>\n\n      <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n           o markup custom. -->\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"], dependencies: [{ kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiCompactButton, selector: "sui-compact-button", inputs: ["icon", "variantStyle", "size", "fullRadius", "disabled", "href", "target", "rel", "type", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: SuiModalHeader, selector: "sui-modal-header", inputs: ["title", "description", "size", "iconVariant", "icon", "showClose", "titleId", "descriptionId"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiModal, decorators: [{
             type: Component,
@@ -11134,7 +11136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.title]': 'null',
                         '[attr.data-sui-modal-open]': 'open() ? "" : null',
                         '[attr.data-sui-modal-fullscreen]': 'fullscreen() ? "" : null',
-                    }, template: "@if (open()) {\n  <!-- Overlay backdrop -->\n  <div\n    class=\"sui-modal__backdrop\"\n    [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n  <div\n    class=\"sui-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"description() ? descId : null\"\n  >\n    <!-- Container \u2014 click stops propagation so it doesn't close.\n         tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n         (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n    <div\n      #container\n      class=\"sui-modal__container\"\n      [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n      [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n      [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n      [attr.data-sui-size]=\"size()\"\n      tabindex=\"-1\"\n      (click)=\"onContainerClick($event)\"\n    >\n      <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n           Figma 466:4778). En modo Status el icono+texto viven en el body\n           (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n      @if (isStatus()) {\n        @if (showClose()) {\n          <sui-compact-button\n            class=\"sui-modal__close-floating\"\n            icon=\"close-line\"\n            variantStyle=\"ghost\"\n            size=\"large\"\n            ariaLabel=\"Cerrar\"\n            (clicked)=\"close()\"\n          />\n        }\n      } @else if (title() || showClose()) {\n        <sui-modal-header\n          class=\"sui-modal__header\"\n          [title]=\"title() ?? ''\"\n          [description]=\"description()\"\n          [size]=\"description() ? 'medium' : 'small'\"\n          [iconVariant]=\"iconVariant()\"\n          [icon]=\"headerIcon()\"\n          [showClose]=\"showClose()\"\n          [titleId]=\"titleId\"\n          [descriptionId]=\"descId\"\n          (closed)=\"close()\"\n        />\n      }\n\n      <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n      <div #bodyEl\n           class=\"sui-modal__body\"\n           [class.sui-modal__body--full]=\"fullBody()\"\n           [class.sui-modal__body--status]=\"isStatus()\">\n\n        <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n             centrado; horizontal (480:1366) = tile + texto en fila, alineado\n             a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n        @if (isStatus()) {\n          <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n            <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n              <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n            </div>\n            @if (title() || description()) {\n              <div class=\"sui-modal__status-text\">\n                @if (title()) {\n                  <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n                }\n                @if (description()) {\n                  <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <ng-content />\n      </div>\n\n      <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n           o markup custom. -->\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"] }]
+                    }, template: "@if (open()) {\n  <!-- Overlay backdrop -->\n  <div\n    class=\"sui-modal__backdrop\"\n    [class.sui-modal__backdrop--no-blur]=\"!backdropBlur()\"\n    (click)=\"onBackdropClick()\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n  ></div>\n\n  <!-- Dialog wrapper (also acts as click-outside target when backdrop is disabled) -->\n  <div\n    class=\"sui-modal\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-labelledby]=\"title() ? titleId : null\"\n    [attr.aria-describedby]=\"description() ? descId : null\"\n  >\n    <!-- Container \u2014 click stops propagation so it doesn't close.\n         tabindex=-1 hace que el container sea focusable program\u00E1ticamente\n         (para a11y al abrir el modal) pero NO entra en el tab order. */ -->\n    <div\n      #container\n      class=\"sui-modal__container\"\n      [class.sui-modal__container--scroll-active]=\"scrollActive()\"\n      [class.sui-modal__container--fullscreen]=\"fullscreen()\"\n      [class.sui-modal__container--status-vertical]=\"isStatusVertical()\"\n      [attr.data-sui-size]=\"size()\"\n      tabindex=\"-1\"\n      (click)=\"onContainerClick($event)\"\n    >\n      <!-- Header \u2014 delegado a sui-modal-header (fuente \u00FAnica de la anatom\u00EDa,\n           Figma 466:4778). En modo Status el icono+texto viven en el body\n           (Figma 480:1372 no tiene header) y solo queda el close flotante. -->\n      @if (isStatus()) {\n        @if (showClose()) {\n          <sui-compact-button\n            class=\"sui-modal__close-floating\"\n            icon=\"close-line\"\n            variantStyle=\"ghost\"\n            size=\"large\"\n            ariaLabel=\"Cerrar\"\n            (clicked)=\"close()\"\n          />\n        }\n      } @else if (title() || showClose()) {\n        <sui-modal-header\n          class=\"sui-modal__header\"\n          [title]=\"title() ?? ''\"\n          [description]=\"description()\"\n          [size]=\"description() ? 'medium' : 'small'\"\n          [iconVariant]=\"iconVariant()\"\n          [icon]=\"headerIcon()\"\n          [showClose]=\"showClose()\"\n          [titleId]=\"titleId\"\n          [descriptionId]=\"descId\"\n          (closed)=\"close()\"\n        />\n      }\n\n      <!-- Body \u2014 default slot (ng-content). El consumer proyecta cualquier markup aqu\u00ED. -->\n      <div #bodyEl\n           class=\"sui-modal__body\"\n           [class.sui-modal__body--full]=\"fullBody()\"\n           [class.sui-modal__body--status]=\"isStatus()\">\n\n        <!-- Status Modal (Figma 480:1372): vertical = icono arriba + texto\n             centrado; horizontal (480:1366) = tile + texto en fila, alineado\n             a la izquierda. Tipograf\u00EDa escalada (Label/Medium 16 + Paragraph/Small 14). -->\n        @if (isStatus()) {\n          <div class=\"sui-modal__status\" [class.sui-modal__status--row]=\"isStatusHorizontal()\">\n            <div class=\"sui-modal__icon\" [attr.data-variant]=\"resolvedIconVariant()\">\n              <sui-icon [name]=\"iconName()\" [size]=\"24\" />\n            </div>\n            @if (title() || description()) {\n              <div class=\"sui-modal__status-text\">\n                @if (title()) {\n                  <h2 [id]=\"titleId\" class=\"sui-modal__status-title\">{{ title() }}</h2>\n                }\n                @if (description()) {\n                  <p [id]=\"descId\" class=\"sui-modal__status-description\">{{ description() }}</p>\n                }\n              </div>\n            }\n          </div>\n        }\n\n        <ng-content />\n      </div>\n\n      <!-- Footer \u2014 named slot: proyectar <sui-modal-footer slot=\"footer\"> (canon)\n           o markup custom. -->\n      <ng-content select=\"[slot=footer]\" />\n    </div>\n  </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.sui-modal__backdrop{position:fixed;inset:0;z-index:1000;background-color:#3333333d;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:sui-modal-backdrop-in var(--sui-motion-duration-fast, .2s) var(--sui-motion-ease-out, cubic-bezier(0, 0, .2, 1)) both}.sui-modal__backdrop--no-blur{backdrop-filter:none;-webkit-backdrop-filter:none}.sui-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;pointer-events:none}.sui-modal__container{position:relative;display:flex;flex-direction:column;overflow:hidden;pointer-events:auto;background:var(--sui-bg-white-0, #ffffff);border:1px solid var(--sui-stroke-soft-200, #ebebeb);border-radius:var(--sui-radius-20, 20px);box-shadow:var(--sui-regular-shadow-medium, 0 16px 32px -12px rgba(14, 18, 27, .1));width:100%;margin-inline:auto;max-height:calc(100dvh - 32px);overflow-y:auto;animation:sui-modal-container-in .18s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}.sui-modal__container[data-sui-size=small]{max-width:400px}.sui-modal__container[data-sui-size=medium]{max-width:440px}.sui-modal__container[data-sui-size=large]{max-width:560px}.sui-modal__container[data-sui-size=xlarge]{max-width:720px}.sui-modal__header{flex-shrink:0}.sui-modal__close-floating{position:absolute;top:16px;right:16px;z-index:1;flex-shrink:0}.sui-modal__body{display:flex;flex-direction:column;gap:20px;padding:20px;flex:1 1 auto;background:var(--sui-bg-white-0, #ffffff);overflow-y:auto;max-height:calc(100dvh - 200px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.sui-modal__body:empty{display:none}.sui-modal__body--full{padding:0;gap:0}.sui-modal__status{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.sui-modal__status .sui-modal__icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;align-self:center;padding:8px;border-radius:var(--sui-radius-10, 10px)}.sui-modal__status .sui-modal__icon[data-variant=error]{background:var(--sui-state-error-lighter, #ffebec);color:var(--sui-state-error-base, #fb3748)}.sui-modal__status .sui-modal__icon[data-variant=warning]{background:var(--sui-state-warning-lighter, #fff3eb);color:var(--sui-state-warning-base, #fa7319)}.sui-modal__status .sui-modal__icon[data-variant=success]{background:var(--sui-state-success-lighter, #e3f7ec);color:var(--sui-state-success-base, #1fc16b)}.sui-modal__status .sui-modal__icon[data-variant=info]{background:var(--sui-state-information-lighter, #ebf1ff);color:var(--sui-state-information-base, #335cff)}.sui-modal__status .sui-modal__icon[data-variant=neutral]{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c)}.sui-modal__status--row{flex-direction:row;align-items:flex-start;text-align:left}.sui-modal__status--row .sui-modal__icon{align-self:flex-start}.sui-modal__status--row .sui-modal__status-text{align-items:flex-start}.sui-modal__status-text{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}.sui-modal__status-title{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-label-md-size, 16px);font-weight:var(--sui-type-label-md-weight, 500);line-height:var(--sui-type-label-md-line, 24px);letter-spacing:var(--sui-type-label-md-spacing, -.011em);color:var(--sui-text-strong-950, #171717);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-modal__status-description{margin:0;font-family:var(--sui-font-sans);font-size:var(--sui-type-paragraph-sm-size, 14px);font-weight:var(--sui-type-paragraph-sm-weight, 400);line-height:var(--sui-type-paragraph-sm-line, 20px);letter-spacing:var(--sui-type-paragraph-sm-spacing, -.006em);color:var(--sui-text-sub-600, #5c5c5c);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}::ng-deep sui-modal-footer[slot=footer]{flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}::ng-deep [slot=footer]:not(sui-modal-footer),.sui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 20px;box-sizing:border-box;border-top:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);flex-shrink:0;position:relative;transition:box-shadow var(--sui-motion-duration-x-fast, .1s) var(--sui-motion-ease-out)}.sui-modal__container--scroll-active ::ng-deep [slot=footer],.sui-modal__container--scroll-active .sui-modal__footer{box-shadow:0 -4px 8px #0e121b0f}@keyframes sui-modal-backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes sui-modal-container-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.sui-modal__container:focus{outline:none}@media(max-width:768px){.sui-modal{align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) max(16px,env(safe-area-inset-right,16px)) max(16px,env(safe-area-inset-bottom,16px)) max(16px,env(safe-area-inset-left,16px));box-sizing:border-box}.sui-modal__container{width:100%;max-width:100%;max-height:calc(50dvh - 16px);overflow:hidden;display:flex;flex-direction:column}.sui-modal__body{overflow-y:auto;flex:1 1 auto;max-height:calc(50dvh - 100px);-webkit-overflow-scrolling:touch;overscroll-behavior:contain}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen){max-height:calc(100dvh - 16px)}:host-context(html.platform-android) .sui-modal--kb-open .sui-modal__container:not(.sui-modal__container--fullscreen) .sui-modal__body{max-height:calc(100dvh - 200px)}.sui-modal__header,::ng-deep [slot=footer],.sui-modal__footer{flex-shrink:0}.sui-modal:has(.sui-modal__container--fullscreen){align-items:stretch;justify-content:stretch;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px 8px}:host-context(html.platform-android) .sui-modal:has(.sui-modal__container--fullscreen){padding-bottom:calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 8px)}.sui-modal__container--fullscreen,.sui-modal__container--fullscreen[data-sui-size=small],.sui-modal__container--fullscreen[data-sui-size=medium],.sui-modal__container--fullscreen[data-sui-size=large],.sui-modal__container--fullscreen[data-sui-size=xlarge]{width:100%;max-width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - 16px - var(--sui-keyboard-h, 0px));border-radius:36px 36px 54px 54px;transition:height .22s ease,max-height .22s ease}:host-context(html.platform-android) .sui-modal__container--fullscreen,:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=small],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=medium],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=large],:host-context(html.platform-android) .sui-modal__container--fullscreen[data-sui-size=xlarge]{height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px);max-height:calc(100dvh - env(safe-area-inset-top,0px) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) - 16px)}.sui-modal__container--fullscreen .sui-modal__body{max-height:none;flex:1 1 auto;min-height:0;overflow-y:auto}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], iconVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconVariant", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], statusAlignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusAlignment", required: false }] }], backdropBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropBlur", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], fullBody: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullBody", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], containerRef: [{
                 type: ViewChild,
                 args: ['container']