@ajuarezso/sui-design-system 0.11.1 → 0.11.3

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

@@ -10698,6 +10698,7 @@ class SuiModalSheet {
     }
     ngOnDestroy() {
         this.removeEscapeHandler();
+        this.detachTouchSuppressor();
         this.unlockBodyScroll();
         if (this.wasOpen) {
             this.navbarVisibility?.release(this._sheetId);
@@ -10726,16 +10727,73 @@ class SuiModalSheet {
         setTimeout(() => {
             const initial = this.initialBreakpoint();
             this.snapTo(initial, false);
+            this.attachTouchSuppressor();
         }, 0);
     }
     onClose() {
         this.removeEscapeHandler();
+        this.detachTouchSuppressor();
         this.unlockBodyScroll();
         this.navbarVisibility?.release(this._sheetId);
         this.liveProgress.set(0);
         this.currentBreakpoint.set(0);
         this.closed.emit();
     }
+    // ── Supresor de scroll nativo (handoff scroll→drag en iOS WKWebView) ──────
+    //
+    // GOTCHA WKWebView: con el body en touch-action pan-y (sheet al max), apenas
+    // WebKit inicia el scroll nativo dispara `pointercancel` y deja de emitir
+    // pointermove — el drag del sheet nunca recibe el gesto. Síntoma real
+    // (iPhone, 2026-07-24): sheet al 100%, scroll en top 0, jalar hacia abajo →
+    // el contenido rubber-bandea y el sheet no se reduce.
+    //
+    // Fix canon: touchmove NO-pasivo que hace preventDefault SOLO cuando el drag
+    // debe tomar el gesto (scrollTop ≤ 0 + dedo hacia abajo, o drag ya activo).
+    // Con el default prevenido, el scroll nativo nunca arranca y los pointer
+    // events siguen fluyendo hacia la lógica de drag existente. Los touch
+    // handlers de Angular son pasivos por default — por eso se atachan a mano.
+    touchStartY = 0;
+    touchStartHandler;
+    touchMoveHandler;
+    attachTouchSuppressor() {
+        const body = this.bodyRef?.nativeElement;
+        if (!body || this.touchMoveHandler)
+            return;
+        this.touchStartHandler = (e) => {
+            this.touchStartY = e.touches[0]?.clientY ?? 0;
+        };
+        this.touchMoveHandler = (e) => {
+            const y = e.touches[0]?.clientY ?? 0;
+            const dy = y - this.touchStartY;
+            /* Drag del sheet ya activo → el scroll nativo no debe pelear. */
+            if (this.dragging()) {
+                if (e.cancelable)
+                    e.preventDefault();
+                return;
+            }
+            /* Sheet al max + body en top + dedo hacia abajo → este gesto es del
+               sheet (reducir), no del scroll. Prevenir ANTES de que WebKit lo tome. */
+            if (this.atMaxBreakpoint()) {
+                const el = this.bodyRef?.nativeElement;
+                if (el && el.scrollTop <= 0 && dy > 0 && e.cancelable) {
+                    e.preventDefault();
+                }
+            }
+        };
+        body.addEventListener('touchstart', this.touchStartHandler, { passive: true });
+        body.addEventListener('touchmove', this.touchMoveHandler, { passive: false });
+    }
+    detachTouchSuppressor() {
+        const body = this.bodyRef?.nativeElement;
+        if (body) {
+            if (this.touchStartHandler)
+                body.removeEventListener('touchstart', this.touchStartHandler);
+            if (this.touchMoveHandler)
+                body.removeEventListener('touchmove', this.touchMoveHandler);
+        }
+        this.touchStartHandler = undefined;
+        this.touchMoveHandler = undefined;
+    }
     // ── Drag gesture ──────────────────────────────────────────────────────────
     onPointerDown(event) {
         /* Solo eventos primarios (un dedo, click izquierdo). Multi-touch zoom etc.
@@ -11012,13 +11070,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.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;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-sheet{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none!important;filter:drop-shadow(0 -3px 8px rgba(14,18,27,.07))}}.sui-sheet{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}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.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}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\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;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-sheet{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none!important;filter:drop-shadow(0 -3px 8px rgba(14,18,27,.07))}}.sui-sheet{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}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.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;overscroll-behavior-y:contain}.sui-sheet__body--full{padding:0}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\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.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;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-sheet{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none!important;filter:drop-shadow(0 -3px 8px rgba(14,18,27,.07))}}.sui-sheet{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}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.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}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\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;corner-shape:squircle}@supports (clip-path: shape(from 0 0,close)){.sui-sheet{--sq-t: 45px;--sq-b: 68px;clip-path:shape(from 0 var(--sq-t),curve to var(--sq-t) 0 with 0 0/0 0,hline to calc(100% - var(--sq-t)),curve to 100% var(--sq-t) with 100% 0/100% 0,vline to calc(100% - var(--sq-b)),curve to calc(100% - var(--sq-b)) 100% with 100% 100%/100% 100%,hline to var(--sq-b),curve to 0 calc(100% - var(--sq-b)) with 0 100%/0 100%,close);box-shadow:none!important;filter:drop-shadow(0 -3px 8px rgba(14,18,27,.07))}}.sui-sheet{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}:host-context(html.platform-android) .sui-sheet{border-radius:var(--sui-radius-20, 20px);--sq-t: 25px;--sq-b: 25px}.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;overscroll-behavior-y:contain}.sui-sheet__body--full{padding:0}@media(max-width:767px){.sui-sheet__body{scrollbar-width:none}.sui-sheet__body::-webkit-scrollbar{display:none}}\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']
@@ -14543,7 +14601,7 @@ class SuiSidebar {
         this.searchSubmitted.emit(this.searchValue());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSidebar, isStandalone: true, selector: "sui-sidebar", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButton: { classPropertyName: "showHeaderButton", publicName: "showHeaderButton", isSignal: true, isRequired: false, transformFunction: null }, headerButtonActive: { classPropertyName: "headerButtonActive", publicName: "headerButtonActive", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, secondaryItems: { classPropertyName: "secondaryItems", publicName: "secondaryItems", isSignal: true, isRequired: false, transformFunction: null }, supportingItems: { classPropertyName: "supportingItems", publicName: "supportingItems", isSignal: true, isRequired: false, transformFunction: null }, supportingAnchorBottom: { classPropertyName: "supportingAnchorBottom", publicName: "supportingAnchorBottom", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryItemsLabel: { classPropertyName: "secondaryItemsLabel", publicName: "secondaryItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, supportingItemsLabel: { classPropertyName: "supportingItemsLabel", publicName: "supportingItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, profileDropdown: { classPropertyName: "profileDropdown", publicName: "profileDropdown", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnItemClick: { classPropertyName: "closeOnItemClick", publicName: "closeOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", mobileOpen: "mobileOpenChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, properties: { "attr.title": "null", "attr.data-sui-open": "mobileOpen() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n     Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n  <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n     pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n     detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n  class=\"sui-sidebar\"\n  [class.sui-sidebar--open]=\"mobileOpen()\"\n  [class.sui-sidebar--collapsed]=\"collapsed()\"\n  role=\"navigation\"\n  [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n  [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <header class=\"sui-sidebar__header\">\n    <div class=\"sui-sidebar__header-card\">\n      <div class=\"sui-sidebar__brand-logo\">\n        @if (brandCfg().logo) {\n          <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n        } @else if (brandCfg().fallback) {\n          <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n        } @else {\n          <sui-icon name=\"building-line\" [size]=\"20\" />\n        }\n      </div>\n      @if (!collapsed()) {\n        <div class=\"sui-sidebar__header-info\">\n          <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n          @if (brandCfg().subtitle) {\n            @if (brandCfg().subtitleAsBadge) {\n              <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n            } @else {\n              <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n            }\n          }\n        </div>\n        @if (showHeaderButton()) {\n          <button\n            type=\"button\"\n            class=\"sui-sidebar__compact-btn\"\n            [class.sui-sidebar__compact-btn--active]=\"headerButtonActive()\"\n            [attr.aria-expanded]=\"headerButtonActive()\"\n            aria-label=\"Cambiar workspace\"\n            (click)=\"onHeaderButtonClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n          >\n            <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n          </button>\n        }\n      }\n    </div>\n    <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n  </header>\n\n  <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"sui-sidebar__content\">\n    <!-- Search slot (Figma prop search=true) -->\n    @if (!collapsed() && searchCfg(); as s) {\n      <div class=\"sui-sidebar__search\">\n        <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n        <input\n          class=\"sui-sidebar__search-input\"\n          type=\"text\"\n          [placeholder]=\"s.placeholder\"\n          [value]=\"searchValue()\"\n          (input)=\"onSearchInput($any($event.target).value)\"\n          (keydown.enter)=\"onSearchSubmit()\"\n        />\n        @if (s.shortcut) {\n          <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n        }\n      </div>\n    }\n\n    @if (items().length > 0) {\n      <div class=\"sui-sidebar__section\">\n        @if (itemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of items(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    @if (secondaryItems().length > 0) {\n      <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n        @if (secondaryItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of secondaryItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n    @if (supportingItems().length > 0) {\n      <div\n        class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n        [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n      >\n        @if (supportingItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of supportingItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n    @if (!collapsed()) {\n      <div class=\"sui-sidebar__feature-card\">\n        <ng-content select=\"[feature-card]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (profile(); as p) {\n    <footer class=\"sui-sidebar__footer\">\n      <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n      <div class=\"sui-sidebar__profile\">\n        <sui-avatar\n          size=\"lg\"\n          [src]=\"p.avatarUrl ?? null\"\n          [alt]=\"p.name\"\n          [initials]=\"p.initials ?? ''\"\n          [status]=\"p.status ?? null\"\n          color=\"slate\"\n        />\n        @if (!collapsed()) {\n          <div class=\"sui-sidebar__profile-info\">\n            <div class=\"sui-sidebar__profile-name-row\">\n              <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n              @if (p.verified) {\n                <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n                     cercano en RemixIcon es verified-badge-fill. -->\n                <sui-icon\n                  class=\"sui-sidebar__profile-verified\"\n                  name=\"verified-badge-fill\"\n                  [size]=\"20\"\n                  aria-label=\"Verificado\"\n                />\n              }\n            </div>\n            @if (p.email) {\n              <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n            }\n          </div>\n          @if (profileDropdown()) {\n            <button\n              type=\"button\"\n              class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n              aria-label=\"Opciones de perfil\"\n              (click)=\"onProfileButtonClick($event)\"\n              (touchstart)=\"$event.currentTarget\"\n              (touchend)=\"$any($event.currentTarget).blur()\"\n            >\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </button>\n          }\n        }\n      </div>\n    </footer>\n  }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n  @if (item.route && !item.action) {\n    <a\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [routerLink]=\"item.route\"\n      routerLinkActive=\"sui-sidebar__item--active\"\n      [attr.target]=\"item.external ? '_blank' : null\"\n      [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #itemBody let-item>\n  @if (item.colorDot) {\n    <span\n      class=\"sui-sidebar__item-dot\"\n      [style.background-color]=\"item.colorDot\"\n      aria-hidden=\"true\"\n    ></span>\n  } @else if (item.icon) {\n    <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n  }\n  @if (!collapsed()) {\n    <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n    @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n      <sui-badge\n        class=\"sui-sidebar__item-badge\"\n        variant=\"filled\"\n        [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n        size=\"small\"\n        type=\"number\"\n      >{{ item.badge }}</sui-badge>\n    }\n    @if (item.shortcut) {\n      <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n    }\n    <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n         .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n    <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__compact-btn--active,.sui-sidebar__compact-btn--active:hover,.sui-sidebar__compact-btn--active:active{background:var(--sui-bg-strong-950, #171717);border-color:var(--sui-bg-strong-950, #171717);color:var(--sui-text-white-0, #ffffff)}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;box-sizing:border-box;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SuiSidebar, isStandalone: true, selector: "sui-sidebar", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, indicatorColor: { classPropertyName: "indicatorColor", publicName: "indicatorColor", isSignal: true, isRequired: false, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: false, transformFunction: null }, showHeaderButton: { classPropertyName: "showHeaderButton", publicName: "showHeaderButton", isSignal: true, isRequired: false, transformFunction: null }, headerButtonActive: { classPropertyName: "headerButtonActive", publicName: "headerButtonActive", isSignal: true, isRequired: false, transformFunction: null }, search: { classPropertyName: "search", publicName: "search", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, secondaryItems: { classPropertyName: "secondaryItems", publicName: "secondaryItems", isSignal: true, isRequired: false, transformFunction: null }, supportingItems: { classPropertyName: "supportingItems", publicName: "supportingItems", isSignal: true, isRequired: false, transformFunction: null }, supportingAnchorBottom: { classPropertyName: "supportingAnchorBottom", publicName: "supportingAnchorBottom", isSignal: true, isRequired: false, transformFunction: null }, itemsLabel: { classPropertyName: "itemsLabel", publicName: "itemsLabel", isSignal: true, isRequired: false, transformFunction: null }, secondaryItemsLabel: { classPropertyName: "secondaryItemsLabel", publicName: "secondaryItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, supportingItemsLabel: { classPropertyName: "supportingItemsLabel", publicName: "supportingItemsLabel", isSignal: true, isRequired: false, transformFunction: null }, activeRoute: { classPropertyName: "activeRoute", publicName: "activeRoute", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, profileDropdown: { classPropertyName: "profileDropdown", publicName: "profileDropdown", isSignal: true, isRequired: false, transformFunction: null }, mobileOpen: { classPropertyName: "mobileOpen", publicName: "mobileOpen", isSignal: true, isRequired: false, transformFunction: null }, closeOnItemClick: { classPropertyName: "closeOnItemClick", publicName: "closeOnItemClick", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, mobileMode: { classPropertyName: "mobileMode", publicName: "mobileMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchValue: "searchValueChange", mobileOpen: "mobileOpenChange", itemClicked: "itemClicked", logoutClicked: "logoutClicked", backdropClicked: "backdropClicked", headerButtonClicked: "headerButtonClicked", profileClicked: "profileClicked", searchSubmitted: "searchSubmitted" }, host: { listeners: { "document:keydown.escape": "onEscapeKey()" }, properties: { "attr.title": "null", "attr.data-sui-open": "mobileOpen() ? \"\" : null", "attr.data-sui-mobile-mode": "mobileMode()", "attr.data-sui-collapsed": "collapsed() ? \"\" : null", "attr.data-sui-indicator": "indicatorColor()" } }, ngImport: i0, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n     Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n  <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n     pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n     detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n  class=\"sui-sidebar\"\n  [class.sui-sidebar--open]=\"mobileOpen()\"\n  [class.sui-sidebar--collapsed]=\"collapsed()\"\n  role=\"navigation\"\n  [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n  [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <header class=\"sui-sidebar__header\">\n    <div class=\"sui-sidebar__header-card\">\n      <div class=\"sui-sidebar__brand-logo\">\n        @if (brandCfg().logo) {\n          <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n        } @else if (brandCfg().fallback) {\n          <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n        } @else {\n          <sui-icon name=\"building-line\" [size]=\"20\" />\n        }\n      </div>\n      @if (!collapsed()) {\n        <div class=\"sui-sidebar__header-info\">\n          <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n          @if (brandCfg().subtitle) {\n            @if (brandCfg().subtitleAsBadge) {\n              <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n            } @else {\n              <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n            }\n          }\n        </div>\n        @if (showHeaderButton()) {\n          <button\n            type=\"button\"\n            class=\"sui-sidebar__compact-btn\"\n            [class.sui-sidebar__compact-btn--active]=\"headerButtonActive()\"\n            [attr.aria-expanded]=\"headerButtonActive()\"\n            aria-label=\"Cambiar workspace\"\n            (click)=\"onHeaderButtonClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n          >\n            <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n          </button>\n        }\n      }\n    </div>\n    <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n  </header>\n\n  <!-- Slot libre bajo el header: panel del workspace switcher u overlays\n       anclados al header (canon template marketing SUI). -->\n  <ng-content select=\"[header-panel]\"></ng-content>\n\n  <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"sui-sidebar__content\">\n    <!-- Search slot (Figma prop search=true) -->\n    @if (!collapsed() && searchCfg(); as s) {\n      <div class=\"sui-sidebar__search\">\n        <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n        <input\n          class=\"sui-sidebar__search-input\"\n          type=\"text\"\n          [placeholder]=\"s.placeholder\"\n          [value]=\"searchValue()\"\n          (input)=\"onSearchInput($any($event.target).value)\"\n          (keydown.enter)=\"onSearchSubmit()\"\n        />\n        @if (s.shortcut) {\n          <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n        }\n      </div>\n    }\n\n    @if (items().length > 0) {\n      <div class=\"sui-sidebar__section\">\n        @if (itemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of items(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    @if (secondaryItems().length > 0) {\n      <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n        @if (secondaryItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of secondaryItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n    @if (supportingItems().length > 0) {\n      <div\n        class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n        [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n      >\n        @if (supportingItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of supportingItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n    @if (!collapsed()) {\n      <div class=\"sui-sidebar__feature-card\">\n        <ng-content select=\"[feature-card]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (profile(); as p) {\n    <footer class=\"sui-sidebar__footer\">\n      <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n      <div class=\"sui-sidebar__profile\">\n        <sui-avatar\n          size=\"lg\"\n          [src]=\"p.avatarUrl ?? null\"\n          [alt]=\"p.name\"\n          [initials]=\"p.initials ?? ''\"\n          [status]=\"p.status ?? null\"\n          color=\"slate\"\n        />\n        @if (!collapsed()) {\n          <div class=\"sui-sidebar__profile-info\">\n            <div class=\"sui-sidebar__profile-name-row\">\n              <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n              @if (p.verified) {\n                <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n                     cercano en RemixIcon es verified-badge-fill. -->\n                <sui-icon\n                  class=\"sui-sidebar__profile-verified\"\n                  name=\"verified-badge-fill\"\n                  [size]=\"20\"\n                  aria-label=\"Verificado\"\n                />\n              }\n            </div>\n            @if (p.email) {\n              <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n            }\n          </div>\n          @if (profileDropdown()) {\n            <button\n              type=\"button\"\n              class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n              aria-label=\"Opciones de perfil\"\n              (click)=\"onProfileButtonClick($event)\"\n              (touchstart)=\"$event.currentTarget\"\n              (touchend)=\"$any($event.currentTarget).blur()\"\n            >\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </button>\n          }\n        }\n      </div>\n    </footer>\n  }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n  @if (item.route && !item.action) {\n    <a\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [routerLink]=\"item.route\"\n      routerLinkActive=\"sui-sidebar__item--active\"\n      [attr.target]=\"item.external ? '_blank' : null\"\n      [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #itemBody let-item>\n  @if (item.colorDot) {\n    <span\n      class=\"sui-sidebar__item-dot\"\n      [style.background-color]=\"item.colorDot\"\n      aria-hidden=\"true\"\n    ></span>\n  } @else if (item.icon) {\n    <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n  }\n  @if (!collapsed()) {\n    <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n    @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n      <sui-badge\n        class=\"sui-sidebar__item-badge\"\n        variant=\"filled\"\n        [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n        size=\"small\"\n        type=\"number\"\n      >{{ item.badge }}</sui-badge>\n    }\n    @if (item.shortcut) {\n      <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n    }\n    <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n         .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n    <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__compact-btn--active,.sui-sidebar__compact-btn--active:hover,.sui-sidebar__compact-btn--active:active{background:var(--sui-bg-strong-950, #171717);border-color:var(--sui-bg-strong-950, #171717);color:var(--sui-text-white-0, #ffffff)}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;box-sizing:border-box;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: SuiIcon, selector: "sui-icon", inputs: ["name", "size", "color"] }, { kind: "component", type: SuiAvatar, selector: "sui-avatar", inputs: ["size", "src", "alt", "initials", "color", "status", "memojiSrc", "illustrationSrc", "icon", "companyLogoSrc", "topBadge", "bgColor"] }, { kind: "component", type: SuiBadge, selector: "sui-badge", inputs: ["color", "variant", "size", "type", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SuiSidebar, decorators: [{
             type: Component,
@@ -14556,7 +14614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         '[attr.data-sui-indicator]': 'indicatorColor()',
                         /* A11y drawer: Escape cierra el drawer móvil (no-op en desktop). */
                         '(document:keydown.escape)': 'onEscapeKey()',
-                    }, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n     Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n  <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n     pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n     detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n  class=\"sui-sidebar\"\n  [class.sui-sidebar--open]=\"mobileOpen()\"\n  [class.sui-sidebar--collapsed]=\"collapsed()\"\n  role=\"navigation\"\n  [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n  [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <header class=\"sui-sidebar__header\">\n    <div class=\"sui-sidebar__header-card\">\n      <div class=\"sui-sidebar__brand-logo\">\n        @if (brandCfg().logo) {\n          <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n        } @else if (brandCfg().fallback) {\n          <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n        } @else {\n          <sui-icon name=\"building-line\" [size]=\"20\" />\n        }\n      </div>\n      @if (!collapsed()) {\n        <div class=\"sui-sidebar__header-info\">\n          <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n          @if (brandCfg().subtitle) {\n            @if (brandCfg().subtitleAsBadge) {\n              <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n            } @else {\n              <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n            }\n          }\n        </div>\n        @if (showHeaderButton()) {\n          <button\n            type=\"button\"\n            class=\"sui-sidebar__compact-btn\"\n            [class.sui-sidebar__compact-btn--active]=\"headerButtonActive()\"\n            [attr.aria-expanded]=\"headerButtonActive()\"\n            aria-label=\"Cambiar workspace\"\n            (click)=\"onHeaderButtonClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n          >\n            <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n          </button>\n        }\n      }\n    </div>\n    <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n  </header>\n\n  <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"sui-sidebar__content\">\n    <!-- Search slot (Figma prop search=true) -->\n    @if (!collapsed() && searchCfg(); as s) {\n      <div class=\"sui-sidebar__search\">\n        <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n        <input\n          class=\"sui-sidebar__search-input\"\n          type=\"text\"\n          [placeholder]=\"s.placeholder\"\n          [value]=\"searchValue()\"\n          (input)=\"onSearchInput($any($event.target).value)\"\n          (keydown.enter)=\"onSearchSubmit()\"\n        />\n        @if (s.shortcut) {\n          <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n        }\n      </div>\n    }\n\n    @if (items().length > 0) {\n      <div class=\"sui-sidebar__section\">\n        @if (itemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of items(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    @if (secondaryItems().length > 0) {\n      <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n        @if (secondaryItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of secondaryItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n    @if (supportingItems().length > 0) {\n      <div\n        class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n        [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n      >\n        @if (supportingItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of supportingItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n    @if (!collapsed()) {\n      <div class=\"sui-sidebar__feature-card\">\n        <ng-content select=\"[feature-card]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (profile(); as p) {\n    <footer class=\"sui-sidebar__footer\">\n      <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n      <div class=\"sui-sidebar__profile\">\n        <sui-avatar\n          size=\"lg\"\n          [src]=\"p.avatarUrl ?? null\"\n          [alt]=\"p.name\"\n          [initials]=\"p.initials ?? ''\"\n          [status]=\"p.status ?? null\"\n          color=\"slate\"\n        />\n        @if (!collapsed()) {\n          <div class=\"sui-sidebar__profile-info\">\n            <div class=\"sui-sidebar__profile-name-row\">\n              <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n              @if (p.verified) {\n                <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n                     cercano en RemixIcon es verified-badge-fill. -->\n                <sui-icon\n                  class=\"sui-sidebar__profile-verified\"\n                  name=\"verified-badge-fill\"\n                  [size]=\"20\"\n                  aria-label=\"Verificado\"\n                />\n              }\n            </div>\n            @if (p.email) {\n              <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n            }\n          </div>\n          @if (profileDropdown()) {\n            <button\n              type=\"button\"\n              class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n              aria-label=\"Opciones de perfil\"\n              (click)=\"onProfileButtonClick($event)\"\n              (touchstart)=\"$event.currentTarget\"\n              (touchend)=\"$any($event.currentTarget).blur()\"\n            >\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </button>\n          }\n        }\n      </div>\n    </footer>\n  }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n  @if (item.route && !item.action) {\n    <a\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [routerLink]=\"item.route\"\n      routerLinkActive=\"sui-sidebar__item--active\"\n      [attr.target]=\"item.external ? '_blank' : null\"\n      [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #itemBody let-item>\n  @if (item.colorDot) {\n    <span\n      class=\"sui-sidebar__item-dot\"\n      [style.background-color]=\"item.colorDot\"\n      aria-hidden=\"true\"\n    ></span>\n  } @else if (item.icon) {\n    <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n  }\n  @if (!collapsed()) {\n    <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n    @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n      <sui-badge\n        class=\"sui-sidebar__item-badge\"\n        variant=\"filled\"\n        [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n        size=\"small\"\n        type=\"number\"\n      >{{ item.badge }}</sui-badge>\n    }\n    @if (item.shortcut) {\n      <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n    }\n    <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n         .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n    <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__compact-btn--active,.sui-sidebar__compact-btn--active:hover,.sui-sidebar__compact-btn--active:active{background:var(--sui-bg-strong-950, #171717);border-color:var(--sui-bg-strong-950, #171717);color:var(--sui-text-white-0, #ffffff)}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;box-sizing:border-box;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
+                    }, template: "<!-- Backdrop solo en m\u00F3vil: en desktop el sidebar es fijo y mobileOpen es inocuo.\n     Color canon = overlay del sui-modal (Figma 480:2474): rgba(51,51,51,0.24). -->\n@if (isMobile() && showBackdrop() && mobileOpen()) {\n  <div class=\"sui-sidebar-backdrop\" (click)=\"onBackdropClick()\" aria-hidden=\"true\"></div>\n}\n\n<!-- Drawer cerrado en m\u00F3vil: aria-hidden + inert \u2192 invisible para lectores de\n     pantalla y el foco no puede entrar al drawer oculto (ni quedar atrapado\n     detr\u00E1s del backdrop al cerrarse). En desktop ambos quedan null. -->\n<aside\n  class=\"sui-sidebar\"\n  [class.sui-sidebar--open]=\"mobileOpen()\"\n  [class.sui-sidebar--collapsed]=\"collapsed()\"\n  role=\"navigation\"\n  [attr.aria-hidden]=\"isMobile() && !mobileOpen() ? 'true' : null\"\n  [attr.inert]=\"isMobile() && !mobileOpen() ? '' : null\"\n>\n  <!-- \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <header class=\"sui-sidebar__header\">\n    <div class=\"sui-sidebar__header-card\">\n      <div class=\"sui-sidebar__brand-logo\">\n        @if (brandCfg().logo) {\n          <img [src]=\"brandCfg().logo\" [alt]=\"brandCfg().name\" referrerpolicy=\"no-referrer\" />\n        } @else if (brandCfg().fallback) {\n          <span class=\"sui-sidebar__brand-fallback\">{{ brandCfg().fallback }}</span>\n        } @else {\n          <sui-icon name=\"building-line\" [size]=\"20\" />\n        }\n      </div>\n      @if (!collapsed()) {\n        <div class=\"sui-sidebar__header-info\">\n          <span class=\"sui-sidebar__header-name\">{{ brandCfg().name }}</span>\n          @if (brandCfg().subtitle) {\n            @if (brandCfg().subtitleAsBadge) {\n              <sui-badge variant=\"filled\" color=\"orange\" size=\"small\">{{ brandCfg().subtitle }}</sui-badge>\n            } @else {\n              <span class=\"sui-sidebar__header-subtitle\">{{ brandCfg().subtitle }}</span>\n            }\n          }\n        </div>\n        @if (showHeaderButton()) {\n          <button\n            type=\"button\"\n            class=\"sui-sidebar__compact-btn\"\n            [class.sui-sidebar__compact-btn--active]=\"headerButtonActive()\"\n            [attr.aria-expanded]=\"headerButtonActive()\"\n            aria-label=\"Cambiar workspace\"\n            (click)=\"onHeaderButtonClick($event)\"\n            (touchstart)=\"$event.currentTarget\"\n            (touchend)=\"$any($event.currentTarget).blur()\"\n          >\n            <sui-icon name=\"expand-up-down-line\" [size]=\"20\" />\n          </button>\n        }\n      }\n    </div>\n    <div class=\"sui-sidebar__divider\" role=\"separator\"></div>\n  </header>\n\n  <!-- Slot libre bajo el header: panel del workspace switcher u overlays\n       anclados al header (canon template marketing SUI). -->\n  <ng-content select=\"[header-panel]\"></ng-content>\n\n  <!-- \u2500\u2500 Content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"sui-sidebar__content\">\n    <!-- Search slot (Figma prop search=true) -->\n    @if (!collapsed() && searchCfg(); as s) {\n      <div class=\"sui-sidebar__search\">\n        <sui-icon class=\"sui-sidebar__search-icon\" name=\"search-2-line\" [size]=\"20\" />\n        <input\n          class=\"sui-sidebar__search-input\"\n          type=\"text\"\n          [placeholder]=\"s.placeholder\"\n          [value]=\"searchValue()\"\n          (input)=\"onSearchInput($any($event.target).value)\"\n          (keydown.enter)=\"onSearchSubmit()\"\n        />\n        @if (s.shortcut) {\n          <span class=\"sui-sidebar__shortcut\">{{ s.shortcut }}</span>\n        }\n      </div>\n    }\n\n    @if (items().length > 0) {\n      <div class=\"sui-sidebar__section\">\n        @if (itemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ itemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of items(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    @if (secondaryItems().length > 0) {\n      <div class=\"sui-sidebar__section sui-sidebar__section--secondary\">\n        @if (secondaryItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ secondaryItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of secondaryItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Supporting Content (Figma supContent) \u2014 ancla al fondo cuando aplica -->\n    @if (supportingItems().length > 0) {\n      <div\n        class=\"sui-sidebar__section sui-sidebar__section--supporting\"\n        [class.sui-sidebar__section--anchor-bottom]=\"supportingAnchorBottom()\"\n      >\n        @if (supportingItemsLabel()) {\n          <div class=\"sui-sidebar__section-label\" [class.sui-sidebar__section-label--collapsed]=\"collapsed()\">{{ supportingItemsLabel() }}</div>\n        }\n        <nav class=\"sui-sidebar__nav\">\n          @for (item of supportingItems(); track item.value) {\n            <ng-container *ngTemplateOutlet=\"itemTpl; context: { $implicit: item }\"></ng-container>\n          }\n        </nav>\n      </div>\n    }\n\n    <!-- Feature Card slot (Figma FeatureCard=On) \u2014 promo opcional, oculto en collapsed -->\n    @if (!collapsed()) {\n      <div class=\"sui-sidebar__feature-card\">\n        <ng-content select=\"[feature-card]\"></ng-content>\n      </div>\n    }\n  </div>\n\n  <!-- \u2500\u2500 Footer (profile) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (profile(); as p) {\n    <footer class=\"sui-sidebar__footer\">\n      <div class=\"sui-sidebar__divider sui-sidebar__divider--top\" role=\"separator\"></div>\n      <div class=\"sui-sidebar__profile\">\n        <sui-avatar\n          size=\"lg\"\n          [src]=\"p.avatarUrl ?? null\"\n          [alt]=\"p.name\"\n          [initials]=\"p.initials ?? ''\"\n          [status]=\"p.status ?? null\"\n          color=\"slate\"\n        />\n        @if (!collapsed()) {\n          <div class=\"sui-sidebar__profile-info\">\n            <div class=\"sui-sidebar__profile-name-row\">\n              <span class=\"sui-sidebar__profile-name\">{{ p.name }}</span>\n              @if (p.verified) {\n                <!-- Figma usa verified-fill (glyph propio SUI); el match m\u00E1s\n                     cercano en RemixIcon es verified-badge-fill. -->\n                <sui-icon\n                  class=\"sui-sidebar__profile-verified\"\n                  name=\"verified-badge-fill\"\n                  [size]=\"20\"\n                  aria-label=\"Verificado\"\n                />\n              }\n            </div>\n            @if (p.email) {\n              <span class=\"sui-sidebar__profile-email\">{{ p.email }}</span>\n            }\n          </div>\n          @if (profileDropdown()) {\n            <button\n              type=\"button\"\n              class=\"sui-sidebar__compact-btn sui-sidebar__compact-btn--ghost\"\n              aria-label=\"Opciones de perfil\"\n              (click)=\"onProfileButtonClick($event)\"\n              (touchstart)=\"$event.currentTarget\"\n              (touchend)=\"$any($event.currentTarget).blur()\"\n            >\n              <sui-icon name=\"arrow-right-s-line\" [size]=\"20\" />\n            </button>\n          }\n        }\n      </div>\n    </footer>\n  }\n</aside>\n\n<!-- \u2500\u2500 Item template (compartido entre todas las secciones) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<ng-template #itemTpl let-item>\n  @if (item.route && !item.action) {\n    <a\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [routerLink]=\"item.route\"\n      routerLinkActive=\"sui-sidebar__item--active\"\n      [attr.target]=\"item.external ? '_blank' : null\"\n      [attr.rel]=\"item.external ? 'noopener noreferrer' : null\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </a>\n  } @else {\n    <button\n      type=\"button\"\n      class=\"sui-sidebar__item\"\n      [class.sui-sidebar__item--active]=\"isItemActive(item)\"\n      [class.sui-sidebar__item--danger]=\"item.variant === 'danger'\"\n      [attr.title]=\"collapsed() ? (item.tooltip ?? item.label) : null\"\n      [attr.aria-label]=\"collapsed() ? item.label : null\"\n      (click)=\"onItemClick(item, $event)\"\n      (touchstart)=\"$event.currentTarget\"\n      (touchend)=\"$any($event.currentTarget).blur()\"\n    >\n      <ng-container *ngTemplateOutlet=\"itemBody; context: { $implicit: item }\"></ng-container>\n    </button>\n  }\n</ng-template>\n\n<ng-template #itemBody let-item>\n  @if (item.colorDot) {\n    <span\n      class=\"sui-sidebar__item-dot\"\n      [style.background-color]=\"item.colorDot\"\n      aria-hidden=\"true\"\n    ></span>\n  } @else if (item.icon) {\n    <sui-icon class=\"sui-sidebar__item-icon\" [name]=\"item.icon\" [size]=\"20\" />\n  }\n  @if (!collapsed()) {\n    <span class=\"sui-sidebar__item-label\">{{ item.label }}</span>\n    @if (item.badge !== undefined && item.badge !== null && item.badge !== '') {\n      <sui-badge\n        class=\"sui-sidebar__item-badge\"\n        variant=\"filled\"\n        [color]=\"item.variant === 'danger' ? 'red' : 'orange'\"\n        size=\"small\"\n        type=\"number\"\n      >{{ item.badge }}</sui-badge>\n    }\n    @if (item.shortcut) {\n      <span class=\"sui-sidebar__shortcut\">{{ item.shortcut }}</span>\n    }\n    <!-- Chevron del item activo (Figma): visibilidad controlada por CSS via\n         .sui-sidebar__item--active (cubre tanto isItemActive como RouterLinkActive). -->\n    <sui-icon class=\"sui-sidebar__item-chevron\" name=\"arrow-right-s-line\" [size]=\"20\" />\n  }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents;font-family:var(--font-sans, \"Satoshi\", system-ui, sans-serif)}.sui-sidebar-backdrop{position:fixed;inset:0;z-index:299;background:#3333333d;animation:sui-sidebar-fade-in .2s ease-out}.sui-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:272px;height:100dvh;background:var(--sui-bg-white-0, #ffffff);border-right:1px solid var(--sui-stroke-soft-200, #ebebeb);font-feature-settings:\"ss11\" 1,\"calt\" 0,\"liga\" 0}.sui-sidebar__header{position:relative;padding:12px;padding-top:calc(12px + env(safe-area-inset-top,0px))}.sui-sidebar__header-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);background:var(--sui-bg-white-0, #ffffff);overflow:hidden}.sui-sidebar__brand-logo{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-sub-600, #5c5c5c);overflow:hidden}.sui-sidebar__brand-logo img{width:100%;height:100%;object-fit:cover;display:block}.sui-sidebar__brand-fallback{font-size:18px;line-height:1}.sui-sidebar__compact-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1px;border-radius:var(--sui-radius-6, 6px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));color:var(--sui-text-sub-600, #5c5c5c);cursor:pointer;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__compact-btn:hover{background:var(--sui-bg-weak-50, #f7f7f7);color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__compact-btn:focus-visible{outline:2px solid var(--sui-state-information-base, #335cff);outline-offset:-1px}.sui-sidebar__compact-btn:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__compact-btn--ghost{border-color:transparent;box-shadow:none;background:transparent}.sui-sidebar__compact-btn--active,.sui-sidebar__compact-btn--active:hover,.sui-sidebar__compact-btn--active:active{background:var(--sui-bg-strong-950, #171717);border-color:var(--sui-bg-strong-950, #171717);color:var(--sui-text-white-0, #ffffff)}.sui-sidebar__header-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;align-items:flex-start}.sui-sidebar__header-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__header-subtitle{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sui-sidebar__divider{position:absolute;bottom:0;left:20px;right:20px;height:1px;background:var(--sui-stroke-soft-200, #ebebeb)}.sui-sidebar__divider--top{top:0;bottom:auto}.sui-sidebar__content{flex:1;display:flex;flex-direction:column;gap:20px;padding:20px 20px 16px;overflow-y:auto;overflow-x:hidden;min-height:0;scrollbar-width:none}.sui-sidebar__content::-webkit-scrollbar{display:none}.sui-sidebar__section{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.sui-sidebar__section--secondary,.sui-sidebar__section--supporting{gap:6px}.sui-sidebar__section--anchor-bottom{margin-top:auto}.sui-sidebar__section-label{padding:4px;font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__section-label--collapsed{padding:4px 0;text-align:center}.sui-sidebar__search{display:flex;align-items:center;gap:8px;width:100%;padding:8px 8px 8px 10px;border-radius:var(--sui-radius-8, 8px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);background:var(--sui-bg-white-0, #ffffff);box-shadow:var(--sui-regular-shadow-x-small, 0 1px 2px 0 rgba(10, 13, 20, .031372549));box-sizing:border-box}.sui-sidebar__search-icon{flex-shrink:0;display:inline-flex;color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__search-input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;font-weight:400;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717)}.sui-sidebar__search-input::placeholder{color:var(--sui-text-soft-400, #a3a3a3)}.sui-sidebar__shortcut{flex-shrink:0;display:inline-flex;align-items:center;box-sizing:border-box;padding:2px 6px;border-radius:var(--sui-radius-4, 4px);border:1px solid var(--sui-stroke-soft-200, #ebebeb);font-size:12px;font-weight:500;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--sui-text-soft-400, #a3a3a3);white-space:nowrap}.sui-sidebar__nav{display:flex;flex-direction:column;gap:4px}.sui-sidebar__item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--sui-radius-8, 8px);width:100%;box-sizing:border-box;background:transparent;border:none;font-family:inherit;text-align:left;text-decoration:none;color:inherit;cursor:pointer;position:relative;transition:background-color .12s ease-out,color .12s ease-out}@media(hover:hover)and (pointer:fine){.sui-sidebar__item:hover{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item:hover .sui-sidebar__item-label,.sui-sidebar__item:hover .sui-sidebar__item-icon{color:var(--sui-text-strong-950, #171717)}}.sui-sidebar__item:focus-visible{outline:2px solid var(--_sui-sidebar-indicator, var(--sui-primary-base, #fa7319));outline-offset:-2px}.sui-sidebar__item:active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--sui-text-sub-600, #5c5c5c);transition:color .12s ease-out}.sui-sidebar__item-label{flex:1;font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .12s ease-out}.sui-sidebar__item-badge{flex-shrink:0}.sui-sidebar__item-dot{flex-shrink:0;width:8px;height:8px;margin:6px;border-radius:999px}.sui-sidebar__item-chevron{flex-shrink:0;display:none;color:var(--sui-text-sub-600, #5c5c5c)}:host{--_sui-sidebar-indicator: var(--sui-primary-base, #fa7319)}:host([data-sui-indicator=information]){--_sui-sidebar-indicator: var(--sui-state-information-base, #335cff)}.sui-sidebar__item--active{background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item--active .sui-sidebar__item-label{color:var(--sui-text-strong-950, #171717)}.sui-sidebar__item--active .sui-sidebar__item-icon{color:var(--_sui-sidebar-indicator)}.sui-sidebar__item--active .sui-sidebar__item-chevron{display:inline-flex;color:var(--sui-text-sub-600, #5c5c5c)}.sui-sidebar__item--active:before{content:\"\";position:absolute;left:-20px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--_sui-sidebar-indicator);border-radius:0 4px 4px 0}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--active:hover{background:var(--sui-bg-weak-50, #f7f7f7)}}.sui-sidebar__item--danger .sui-sidebar__item-icon,.sui-sidebar__item--danger .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}@media(hover:hover)and (pointer:fine){.sui-sidebar__item--danger:hover{background:var(--sui-red-alpha-10, rgba(251, 55, 72, .0980392157))}.sui-sidebar__item--danger:hover .sui-sidebar__item-icon,.sui-sidebar__item--danger:hover .sui-sidebar__item-label{color:var(--sui-state-error-base, #fb3748)}}.sui-sidebar__item--danger:active{background:var(--sui-red-alpha-16, rgba(251, 55, 72, .1607843137))}.sui-sidebar__footer{position:relative;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.sui-sidebar__profile{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--sui-radius-10, 10px);overflow:hidden}.sui-sidebar__profile-info{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;height:40px;justify-content:center}.sui-sidebar__profile-name-row{display:flex;align-items:center;gap:2px;min-width:0}.sui-sidebar__profile-name{font-size:14px;font-weight:500;line-height:20px;letter-spacing:-.006em;color:var(--sui-text-strong-950, #171717);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__profile-verified{flex-shrink:0;display:inline-flex;color:var(--sui-state-verified-base, #47c2ff)}.sui-sidebar__profile-email{font-size:12px;font-weight:400;line-height:16px;color:var(--sui-text-sub-600, #5c5c5c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sui-sidebar__feature-card{width:100%}.sui-sidebar__feature-card:not(:has(*)){display:none}:host([data-sui-collapsed]) .sui-sidebar{width:80px}:host([data-sui-collapsed]) .sui-sidebar__header-card,:host([data-sui-collapsed]) .sui-sidebar__profile{justify-content:center}:host([data-sui-collapsed]) .sui-sidebar__content{padding-inline:12px}:host([data-sui-collapsed]) .sui-sidebar__item{justify-content:center;width:36px;height:36px;padding:8px;margin-inline:auto}:host([data-sui-collapsed]) .sui-sidebar__item--active:before{left:-22px}@media(max-width:767px){.sui-sidebar{position:fixed;top:0;left:0;bottom:0;height:100dvh;z-index:300;width:min(86vw,360px);box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);transform:translate(-100%);transition:transform .24s cubic-bezier(.23,1,.32,1);border-right:none;border-radius:0 24px 24px 0;overflow:hidden;box-shadow:4px 0 24px #0e121b00}.sui-sidebar--open{transform:translate(0);box-shadow:4px 0 24px #0e121b1a}:host([data-sui-mobile-mode=sheet]) .sui-sidebar{width:calc(100vw - 40px);max-width:none}.sui-sidebar__item{gap:14px;padding:14px 12px;border-radius:var(--sui-radius-10, 10px);transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .16s cubic-bezier(.23,1,.32,1)}.sui-sidebar__item:active{transform:scale(.98);background:var(--sui-bg-weak-50, #f7f7f7)}.sui-sidebar__item-icon{width:24px;height:24px}.sui-sidebar__item-label{font-size:17px;line-height:24px;letter-spacing:-.01em}}@keyframes sui-sidebar-fade-in{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], indicatorColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorColor", required: false }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: false }] }], showHeaderButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderButton", required: false }] }], headerButtonActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerButtonActive", required: false }] }], search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }, { type: i0.Output, args: ["searchValueChange"] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], secondaryItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryItems", required: false }] }], supportingItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingItems", required: false }] }], supportingAnchorBottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingAnchorBottom", required: false }] }], itemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLabel", required: false }] }], secondaryItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondaryItemsLabel", required: false }] }], supportingItemsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "supportingItemsLabel", required: false }] }], activeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRoute", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], profileDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "profileDropdown", required: false }] }], mobileOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileOpen", required: false }] }, { type: i0.Output, args: ["mobileOpenChange"] }], closeOnItemClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnItemClick", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], mobileMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileMode", required: false }] }], itemClicked: [{ type: i0.Output, args: ["itemClicked"] }], logoutClicked: [{ type: i0.Output, args: ["logoutClicked"] }], backdropClicked: [{ type: i0.Output, args: ["backdropClicked"] }], headerButtonClicked: [{ type: i0.Output, args: ["headerButtonClicked"] }], profileClicked: [{ type: i0.Output, args: ["profileClicked"] }], searchSubmitted: [{ type: i0.Output, args: ["searchSubmitted"] }] } });
 
 class SuiSlider {