valtech-components 4.0.27 → 4.0.28

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.27';
+const VERSION = '4.0.28';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -33564,11 +33564,11 @@ class ChangePasswordModalComponent {
         this.toast.show({ message, duration: 3500 });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangePasswordModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangePasswordModalComponent, isStandalone: true, selector: "val-change-password-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChangePasswordModalComponent, isStandalone: true, selector: "val-change-password-modal", inputs: { isOpen: "isOpen" }, outputs: { changed: "changed", dismissed: "dismissed" }, ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChangePasswordModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-change-password-modal', standalone: true, imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonSpinner, IonToolbar, FormComponent], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
+            args: [{ selector: 'val-change-password-modal', standalone: true, imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonSpinner, IonToolbar, FormComponent], template: "<ion-modal [isOpen]=\"isOpen\" (didDismiss)=\"close()\" cssClass=\"val-modal-adaptive\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" color=\"dark\" shape=\"round\" (click)=\"close()\">\n            <strong>{{ t('close') }}</strong>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        @if (mode() === 'loading') {\n        <div class=\"modal-loading\">\n          <ion-spinner name=\"crescent\"></ion-spinner>\n        </div>\n        } @else {\n        <val-form [props]=\"formProps()\" (onSubmit)=\"submitHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.modal-loading{display:flex;justify-content:center;padding:40px 0}\n"] }]
         }], propDecorators: { isOpen: [{
                 type: Input
             }], changed: [{
@@ -46678,6 +46678,16 @@ const DEFAULT_NAMESPACE$h = 'CreateOrgModal';
  * `CreateOrgModal`.
  */
 class CreateOrgModalComponent {
+    set isOpen(value) {
+        const opening = value && !this._isOpen;
+        this._isOpen = value;
+        if (opening) {
+            this._busy.set(false);
+        }
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
     constructor() {
         this.i18n = inject(I18nService);
         this.orgService = inject(OrgService);
@@ -46686,6 +46696,9 @@ class CreateOrgModalComponent {
         this.errors = inject(ValtechErrorService);
         /** Namespace i18n con que la vista resuelve sus textos. */
         this.i18nNamespace = DEFAULT_NAMESPACE$h;
+        this._isOpen = false;
+        this.dismissed = new EventEmitter();
+        this.created = new EventEmitter();
         this._busy = signal(false);
         if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$h)) {
             this.i18n.registerContent(DEFAULT_NAMESPACE$h, CREATE_ORG_MODAL_I18N);
@@ -46731,8 +46744,8 @@ class CreateOrgModalComponent {
                 duration: 3500,
             });
             await this.orgSwitch.switchTo(newOrg.id);
-            this.onSuccess?.(newOrg);
-            this._modalRef?.dismiss(newOrg, 'confirm');
+            this.created.emit(newOrg);
+            this.dismissed.emit();
         }
         catch (err) {
             this.errors.handle(err, { i18nNamespace: this.i18nNamespace });
@@ -46742,7 +46755,10 @@ class CreateOrgModalComponent {
         }
     }
     dismiss() {
-        this._modalRef?.dismiss(null, 'cancel');
+        this.dismissed.emit();
+    }
+    close() {
+        this.dismissed.emit();
     }
     buildFormMeta() {
         const nameField = {
@@ -46822,71 +46838,81 @@ class CreateOrgModalComponent {
         return this.i18n.t(key, this.i18nNamespace);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CreateOrgModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CreateOrgModalComponent, isStandalone: true, selector: "val-create-org-modal", inputs: { _modalRef: "_modalRef", onSuccess: "onSuccess", i18nNamespace: "i18nNamespace" }, ngImport: i0, template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: t('pageTitle'), size: 'small', color: 'dark' }" />
-      <val-title
-        [props]="{
-          content: t('pageDescription'),
-          size: 'large',
-          color: '',
-          bold: false,
-        }"
-      />
-      <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
-      <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
-          {{ t('close') }}
-        </ion-button>
-      </div>
-    </ion-content>
-  `, isInline: true, styles: [".modal-close-bottom{margin-top:16px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CreateOrgModalComponent, isStandalone: true, selector: "val-create-org-modal", inputs: { i18nNamespace: "i18nNamespace", isOpen: "isOpen" }, outputs: { dismissed: "dismissed", created: "created" }, ngImport: i0, template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <val-display [props]="{ content: t('pageTitle'), size: 'small', color: 'dark' }" />
+          <val-title
+            [props]="{
+              content: t('pageDescription'),
+              size: 'large',
+              color: '',
+              bold: false,
+            }"
+          />
+          <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
+          <div class="modal-close-bottom">
+            <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
+              {{ t('close') }}
+            </ion-button>
+          </div>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `, isInline: true, styles: [".modal-close-bottom{margin-top:16px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CreateOrgModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-create-org-modal', standalone: true, imports: [IonHeader, IonToolbar, IonButtons, IonButton, IonContent, FormComponent, DisplayComponent, TitleComponent], template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: t('pageTitle'), size: 'small', color: 'dark' }" />
-      <val-title
-        [props]="{
-          content: t('pageDescription'),
-          size: 'large',
-          color: '',
-          bold: false,
-        }"
-      />
-      <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
-      <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
-          {{ t('close') }}
-        </ion-button>
-      </div>
-    </ion-content>
+            args: [{ selector: 'val-create-org-modal', standalone: true, imports: [IonModal, IonHeader, IonToolbar, IonButtons, IonButton, IonContent, FormComponent, DisplayComponent, TitleComponent], template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <val-display [props]="{ content: t('pageTitle'), size: 'small', color: 'dark' }" />
+          <val-title
+            [props]="{
+              content: t('pageDescription'),
+              size: 'large',
+              color: '',
+              bold: false,
+            }"
+          />
+          <val-form [props]="formMeta()" (onSubmit)="onSubmit($event)" />
+          <div class="modal-close-bottom">
+            <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
+              {{ t('close') }}
+            </ion-button>
+          </div>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
   `, styles: [".modal-close-bottom{margin-top:16px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _modalRef: [{
-                type: Input
-            }], onSuccess: [{
+        }], ctorParameters: () => [], propDecorators: { i18nNamespace: [{
                 type: Input
-            }], i18nNamespace: [{
+            }], isOpen: [{
                 type: Input
+            }], dismissed: [{
+                type: Output
+            }], created: [{
+                type: Output
             }] } });
 
 /**
@@ -46949,6 +46975,21 @@ const DEFAULT_NAMESPACE$g = 'Settings.DeleteAccount';
  * proveyó el namespace `Settings.DeleteAccount`.
  */
 class DeleteAccountModalComponent {
+    set isOpen(value) {
+        const opening = value && !this._isOpen;
+        this._isOpen = value;
+        if (opening) {
+            this.hasPassword.set(null);
+            this.codeSent.set(false);
+            this.formState.set(ComponentStates.ENABLED);
+            firstValueFrom(this.auth.getProfile())
+                .then(profile => this.hasPassword.set(profile.hasPassword ?? true))
+                .catch(() => this.hasPassword.set(true));
+        }
+    }
+    get isOpen() {
+        return this._isOpen;
+    }
     constructor() {
         this.auth = inject(AuthService);
         this.errors = inject(ValtechErrorService);
@@ -46956,6 +46997,8 @@ class DeleteAccountModalComponent {
         this.toast = inject(ToastService);
         /** Namespace i18n con que la vista resuelve sus textos. */
         this.i18nNamespace = DEFAULT_NAMESPACE$g;
+        this._isOpen = false;
+        this.dismissed = new EventEmitter();
         this.hasPassword = signal(null);
         this.codeSent = signal(false);
         this.formState = signal(ComponentStates.ENABLED);
@@ -47026,11 +47069,6 @@ class DeleteAccountModalComponent {
             this.i18n.registerContent(DEFAULT_NAMESPACE$g, DELETE_ACCOUNT_MODAL_I18N);
         }
     }
-    ngOnInit() {
-        firstValueFrom(this.auth.getProfile())
-            .then(profile => this.hasPassword.set(profile.hasPassword ?? true))
-            .catch(() => this.hasPassword.set(true));
-    }
     submitBtn(token, textKey) {
         return {
             text: this.t(textKey),
@@ -47045,7 +47083,7 @@ class DeleteAccountModalComponent {
         };
     }
     close() {
-        this._modalRef?.dismiss(undefined, 'cancel');
+        this.dismissed.emit();
     }
     async onPasswordSubmit(event) {
         const password = event.fields['password'];
@@ -47105,89 +47143,99 @@ class DeleteAccountModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeleteAccountModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DeleteAccountModalComponent, isStandalone: true, selector: "val-delete-account-modal", inputs: { _modalRef: "_modalRef", i18nNamespace: "i18nNamespace" }, ngImport: i0, template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DeleteAccountModalComponent, isStandalone: true, selector: "val-delete-account-modal", inputs: { i18nNamespace: "i18nNamespace", isOpen: "isOpen" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="close()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
 
-    <ion-content class="ion-padding">
-      <section class="modal-form-section">
-        @if (hasPassword() === null) {
-          <div class="spinner-center">
-            <ion-spinner name="crescent" />
-          </div>
-        } @else if (hasPassword()) {
-          <val-form [props]="passwordFormProps()" (onSubmit)="onPasswordSubmit($event)" />
-        } @else if (!codeSent()) {
-          <val-form [props]="sendCodeFormProps()" (onSubmit)="onSendCode()" />
-        } @else {
-          <val-form [props]="codeFormProps()" (onSubmit)="onCodeSubmit($event)" />
-          <div class="resend-row">
-            <ion-button
-              fill="clear"
-              color="medium"
-              size="small"
-              [disabled]="formState() === 'WORKING'"
-              (click)="onResendCode()"
-            >
-              {{ t('resend') }}
-            </ion-button>
-          </div>
-        }
-      </section>
-    </ion-content>
-  `, isInline: true, styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.resend-row{display:flex;justify-content:center;margin-top:-8px}.spinner-center{display:flex;justify-content:center;padding-top:32px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }] }); }
+        <ion-content class="ion-padding">
+          <section class="modal-form-section">
+            @if (hasPassword() === null) {
+              <div class="spinner-center">
+                <ion-spinner name="crescent" />
+              </div>
+            } @else if (hasPassword()) {
+              <val-form [props]="passwordFormProps()" (onSubmit)="onPasswordSubmit($event)" />
+            } @else if (!codeSent()) {
+              <val-form [props]="sendCodeFormProps()" (onSubmit)="onSendCode()" />
+            } @else {
+              <val-form [props]="codeFormProps()" (onSubmit)="onCodeSubmit($event)" />
+              <div class="resend-row">
+                <ion-button
+                  fill="clear"
+                  color="medium"
+                  size="small"
+                  [disabled]="formState() === 'WORKING'"
+                  (click)="onResendCode()"
+                >
+                  {{ t('resend') }}
+                </ion-button>
+              </div>
+            }
+          </section>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `, isInline: true, styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.resend-row{display:flex;justify-content:center;margin-top:-8px}.spinner-center{display:flex;justify-content:center;padding-top:32px}\n"], dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DeleteAccountModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-delete-account-modal', standalone: true, imports: [IonHeader, IonToolbar, IonButtons, IonButton, IonContent, IonSpinner, FormComponent], template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="close()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
+            args: [{ selector: 'val-delete-account-modal', standalone: true, imports: [IonModal, IonHeader, IonToolbar, IonButtons, IonButton, IonContent, IonSpinner, FormComponent], template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="close()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
 
-    <ion-content class="ion-padding">
-      <section class="modal-form-section">
-        @if (hasPassword() === null) {
-          <div class="spinner-center">
-            <ion-spinner name="crescent" />
-          </div>
-        } @else if (hasPassword()) {
-          <val-form [props]="passwordFormProps()" (onSubmit)="onPasswordSubmit($event)" />
-        } @else if (!codeSent()) {
-          <val-form [props]="sendCodeFormProps()" (onSubmit)="onSendCode()" />
-        } @else {
-          <val-form [props]="codeFormProps()" (onSubmit)="onCodeSubmit($event)" />
-          <div class="resend-row">
-            <ion-button
-              fill="clear"
-              color="medium"
-              size="small"
-              [disabled]="formState() === 'WORKING'"
-              (click)="onResendCode()"
-            >
-              {{ t('resend') }}
-            </ion-button>
-          </div>
-        }
-      </section>
-    </ion-content>
+        <ion-content class="ion-padding">
+          <section class="modal-form-section">
+            @if (hasPassword() === null) {
+              <div class="spinner-center">
+                <ion-spinner name="crescent" />
+              </div>
+            } @else if (hasPassword()) {
+              <val-form [props]="passwordFormProps()" (onSubmit)="onPasswordSubmit($event)" />
+            } @else if (!codeSent()) {
+              <val-form [props]="sendCodeFormProps()" (onSubmit)="onSendCode()" />
+            } @else {
+              <val-form [props]="codeFormProps()" (onSubmit)="onCodeSubmit($event)" />
+              <div class="resend-row">
+                <ion-button
+                  fill="clear"
+                  color="medium"
+                  size="small"
+                  [disabled]="formState() === 'WORKING'"
+                  (click)="onResendCode()"
+                >
+                  {{ t('resend') }}
+                </ion-button>
+              </div>
+            }
+          </section>
+        </ion-content>
+      </ng-template>
+    </ion-modal>
   `, styles: [".modal-form-section{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;padding-top:8px}.resend-row{display:flex;justify-content:center;margin-top:-8px}.spinner-center{display:flex;justify-content:center;padding-top:32px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { _modalRef: [{
+        }], ctorParameters: () => [], propDecorators: { i18nNamespace: [{
                 type: Input
-            }], i18nNamespace: [{
+            }], isOpen: [{
                 type: Input
+            }], dismissed: [{
+                type: Output
             }] } });
 
 /**
@@ -47878,6 +47926,8 @@ class AccountViewComponent {
                 retrying: this.orgsLoading(),
             });
         });
+        this.createOrgOpen = signal(false);
+        this.deleteAccountOpen = signal(false);
         this.pendingInvites = signal([]);
         this.pendingInvitesLoading = signal(false);
         this.inviteAccepting = signal(null);
@@ -47991,40 +48041,18 @@ class AccountViewComponent {
         });
     }
     onDeleteAccount() {
-        void this.modalService.open({
-            component: DeleteAccountModalComponent,
-            componentProps: {
-                i18nNamespace: 'Settings.DeleteAccount',
-            },
-            breakpoints: {
-                breakpoints: [0, 0.85],
-                initialBreakpoint: 0.85,
-                showHandle: true,
-            },
-            backdropDismiss: false,
-        });
+        this.deleteAccountOpen.set(true);
         this.resolvedConfig().onAccountDeleted?.();
     }
     onManageOrg() {
         this.nav.navigateByUrl(this.resolvedConfig().manageOrgRoute);
     }
     onNewOrg() {
-        void this.modalService.open({
-            component: CreateOrgModalComponent,
-            componentProps: {
-                i18nNamespace: 'CreateOrgModal',
-                onSuccess: (newOrg) => {
-                    this.loadOrgs();
-                    this.resolvedConfig().onOrgCreated?.(newOrg);
-                },
-            },
-            breakpoints: {
-                breakpoints: [0, 0.92],
-                initialBreakpoint: 0.92,
-                showHandle: true,
-            },
-            backdropDismiss: true,
-        });
+        this.createOrgOpen.set(true);
+    }
+    onOrgCreated(newOrg) {
+        this.loadOrgs();
+        this.resolvedConfig().onOrgCreated?.(newOrg);
     }
     onMoreInfo() {
         void this.modalService.open({
@@ -48314,8 +48342,19 @@ class AccountViewComponent {
           </div>
         </section>
       }
+      <val-create-org-modal
+        [isOpen]="createOrgOpen()"
+        [i18nNamespace]="'CreateOrgModal'"
+        (dismissed)="createOrgOpen.set(false)"
+        (created)="onOrgCreated($event)"
+      />
+      <val-delete-account-modal
+        [isOpen]="deleteAccountOpen()"
+        [i18nNamespace]="'Settings.DeleteAccount'"
+        (dismissed)="deleteAccountOpen.set(false)"
+      />
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.settings-section val-title{display:block;margin-bottom:12px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;flex-wrap:wrap;gap:8px}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.org-new-cta-card{display:block;margin-top:12px}.orgs-empty-card{background:var(--ion-color-secondary-tint, rgba(var(--ion-color-secondary-rgb, 130, 101, 208), .2));border-radius:18px;padding:18px 16px 12px;display:flex;flex-direction:column;gap:8px}.orgs-empty-card__main{display:flex;align-items:center;gap:10px}.orgs-empty-card__icon{font-size:20px;flex-shrink:0;color:var(--ion-color-dark)}.orgs-empty-card__text{font-size:.875rem;color:var(--ion-color-dark)}.orgs-empty-card__link{background:none;border:none;padding:0;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);text-align:left;text-decoration:underline;text-underline-offset:2px;font-family:inherit}.orgs-list{display:flex;flex-direction:column;gap:8px}.org-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.org-card:active{opacity:.75}.org-card--active{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 8%,transparent)}:host-context(body.dark) .org-card,:host-context(html.ion-palette-dark) .org-card,:host-context([data-theme=\"dark\"]) .org-card{background:#ffffff0d}:host-context(body.dark) .org-card--active,:host-context(html.ion-palette-dark) .org-card--active,:host-context([data-theme=\"dark\"]) .org-card--active{background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent)}.org-card__icon{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--ion-color-primary)}.org-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.org-card__name{font-weight:600;font-size:.95rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.org-card__meta{display:flex;flex-direction:column;gap:1px;margin-top:3px}.org-card__meta-item{font-size:.78rem;color:var(--ion-color-dark)}.org-card__meta-label{font-weight:600;color:var(--ion-color-dark);margin-right:4px}.org-card__end{display:flex;align-items:center;gap:8px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: InvitationCardComponent, selector: "val-invitation-card", inputs: ["props"], outputs: ["onAccept", "onDecline"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.settings-section val-title{display:block;margin-bottom:12px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;flex-wrap:wrap;gap:8px}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.org-new-cta-card{display:block;margin-top:12px}.orgs-empty-card{background:var(--ion-color-secondary-tint, rgba(var(--ion-color-secondary-rgb, 130, 101, 208), .2));border-radius:18px;padding:18px 16px 12px;display:flex;flex-direction:column;gap:8px}.orgs-empty-card__main{display:flex;align-items:center;gap:10px}.orgs-empty-card__icon{font-size:20px;flex-shrink:0;color:var(--ion-color-dark)}.orgs-empty-card__text{font-size:.875rem;color:var(--ion-color-dark)}.orgs-empty-card__link{background:none;border:none;padding:0;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);text-align:left;text-decoration:underline;text-underline-offset:2px;font-family:inherit}.orgs-list{display:flex;flex-direction:column;gap:8px}.org-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.org-card:active{opacity:.75}.org-card--active{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 8%,transparent)}:host-context(body.dark) .org-card,:host-context(html.ion-palette-dark) .org-card,:host-context([data-theme=\"dark\"]) .org-card{background:#ffffff0d}:host-context(body.dark) .org-card--active,:host-context(html.ion-palette-dark) .org-card--active,:host-context([data-theme=\"dark\"]) .org-card--active{background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent)}.org-card__icon{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--ion-color-primary)}.org-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.org-card__name{font-weight:600;font-size:.95rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.org-card__meta{display:flex;flex-direction:column;gap:1px;margin-top:3px}.org-card__meta-item{font-size:.78rem;color:var(--ion-color-dark)}.org-card__meta-label{font-weight:600;color:var(--ion-color-dark);margin-right:4px}.org-card__end{display:flex;align-items:center;gap:8px;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: InvitationCardComponent, selector: "val-invitation-card", inputs: ["props"], outputs: ["onAccept", "onDecline"] }, { kind: "component", type: CreateOrgModalComponent, selector: "val-create-org-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed", "created"] }, { kind: "component", type: DeleteAccountModalComponent, selector: "val-delete-account-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccountViewComponent, decorators: [{
             type: Component,
@@ -48328,6 +48367,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ButtonComponent,
                         CtaCardComponent,
                         InvitationCardComponent,
+                        CreateOrgModalComponent,
+                        DeleteAccountModalComponent,
                         IonIcon,
                         IonButton,
                         TitleCasePipe,
@@ -48501,6 +48542,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           </div>
         </section>
       }
+      <val-create-org-modal
+        [isOpen]="createOrgOpen()"
+        [i18nNamespace]="'CreateOrgModal'"
+        (dismissed)="createOrgOpen.set(false)"
+        (created)="onOrgCreated($event)"
+      />
+      <val-delete-account-modal
+        [isOpen]="deleteAccountOpen()"
+        [i18nNamespace]="'Settings.DeleteAccount'"
+        (dismissed)="deleteAccountOpen.set(false)"
+      />
     </div>
   `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.settings-section val-title{display:block;margin-bottom:12px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;flex-wrap:wrap;gap:8px}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.org-new-cta-card{display:block;margin-top:12px}.orgs-empty-card{background:var(--ion-color-secondary-tint, rgba(var(--ion-color-secondary-rgb, 130, 101, 208), .2));border-radius:18px;padding:18px 16px 12px;display:flex;flex-direction:column;gap:8px}.orgs-empty-card__main{display:flex;align-items:center;gap:10px}.orgs-empty-card__icon{font-size:20px;flex-shrink:0;color:var(--ion-color-dark)}.orgs-empty-card__text{font-size:.875rem;color:var(--ion-color-dark)}.orgs-empty-card__link{background:none;border:none;padding:0;cursor:pointer;font-size:.8125rem;color:var(--ion-color-primary);text-align:left;text-decoration:underline;text-underline-offset:2px;font-family:inherit}.orgs-list{display:flex;flex-direction:column;gap:8px}.org-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:var(--ion-color-light, #f4f5f8);border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s}.org-card:active{opacity:.75}.org-card--active{border-color:var(--ion-color-primary);background:color-mix(in srgb,var(--ion-color-primary) 8%,transparent)}:host-context(body.dark) .org-card,:host-context(html.ion-palette-dark) .org-card,:host-context([data-theme=\"dark\"]) .org-card{background:#ffffff0d}:host-context(body.dark) .org-card--active,:host-context(html.ion-palette-dark) .org-card--active,:host-context([data-theme=\"dark\"]) .org-card--active{background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent)}.org-card__icon{width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--ion-color-primary) 15%,transparent);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;color:var(--ion-color-primary)}.org-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.org-card__name{font-weight:600;font-size:.95rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.org-card__meta{display:flex;flex-direction:column;gap:1px;margin-top:3px}.org-card__meta-item{font-size:.78rem;color:var(--ion-color-dark)}.org-card__meta-label{font-weight:600;color:var(--ion-color-dark);margin-right:4px}.org-card__end{display:flex;align-items:center;gap:8px;flex-shrink:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
@@ -50004,246 +50056,938 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }] } });
 
 /**
- * Defaults i18n (es/en) embebidos en `val-transfer-ownership-modal`.
- * Auto-registrados en el constructor del componente si el consumer no proveyó el
- * namespace (`Settings.TransferModal` por default). SOLO incluye las keys que el
- * modal usa.
+ * Defaults i18n (es/en) embebidos en `val-permissions-view`. Auto-registrados en
+ * el constructor del componente si el consumer no proveyó el namespace
+ * (`Settings.Permissions` por default). SOLO incluye las keys que la vista usa.
+ *
+ * Portado EXACTO de `PERMISSIONS_I18N` (showcase) bajo el proceso de ADR-021.
  */
-const TRANSFER_OWNERSHIP_MODAL_I18N = {
+const PERMISSIONS_VIEW_I18N = {
     es: {
-        title: 'Transferir propiedad',
-        hint: 'Selecciona el nuevo propietario de la organización.',
-        searchPlaceholder: 'Buscar miembro...',
-        empty: 'No hay otros miembros disponibles.',
-        noResults: 'Sin resultados para',
-        confirmCta: 'Confirmar transferencia',
-        close: 'Cancelar',
+        pageTitle: 'Permisos',
+        pageDescription: 'Roles y permisos de esta app en la organización activa',
+        systemRolesTitle: 'Roles del sistema',
+        systemRolesHint: 'Predefinidos por la plataforma. No editables.',
+        customRolesTitle: 'Roles personalizados',
+        customRolesHint: 'Definidos por tu organización.',
+        systemBadge: 'Sistema',
+        noCustomRoles: 'Esta organización no tiene roles personalizados.',
+        noPermissions: 'Sin permisos asignados.',
+        // Grupos de alcance
+        groupApp: 'Permisos de la app',
+        groupOrg: 'Permisos de la organización',
+        groupPlatform: 'Permisos de plataforma',
+        groupOther: 'Otras apps',
+        // Roles del sistema
+        roleViewer: 'Visor',
+        roleEditor: 'Editor',
+        roleAdmin: 'Administrador',
+        roleSuperAdmin: 'Super Administrador',
+        roleBingoAdmin: 'Bingo · Administrador',
+        roleBingoTesorero: 'Bingo · Tesorero',
+        roleBingoTaquilla: 'Bingo · Taquilla',
+        roleBingoOperator: 'Bingo · Operador',
+        // Apps
+        app_showcase: 'Showcase',
+        app_bingo: 'Bingo',
+        // Recursos
+        permUsers: 'Usuarios',
+        permRoles: 'Roles',
+        permRbac: 'Control de acceso',
+        permApps: 'Apps',
+        'permApi-keys': 'API keys',
+        'permEmail-logs': 'Logs de correo',
+        'permSms-logs': 'Logs de SMS',
+        permDocuments: 'Documentos',
+        permMedia: 'Media',
+        permTemplates: 'Plantillas',
+        permRequests: 'Solicitudes',
+        permBingo: 'Bingo',
+        // Acciones
+        permRead: 'Leer',
+        permWrite: 'Escribir',
+        permCreate: 'Crear',
+        permDelete: 'Eliminar',
+        permManage: 'Gestionar',
+        permEdit: 'Editar',
+        permSell: 'Vender',
+        permCheckin: 'Canjear',
+        permSettle: 'Rendir',
+        permExport: 'Exportar',
+        permOperate: 'Operar',
+        permAll: 'Todo',
+        // Loading / error
+        errorTitle: 'Error al cargar permisos',
+        retry: 'Reintentar',
     },
     en: {
-        title: 'Transfer ownership',
-        hint: 'Select the new owner of the organization.',
-        searchPlaceholder: 'Search member...',
-        empty: 'No other members available.',
-        noResults: 'No results for',
-        confirmCta: 'Confirm transfer',
-        close: 'Cancel',
+        pageTitle: 'Permissions',
+        pageDescription: 'Roles and permissions of this app in the active organization',
+        systemRolesTitle: 'System roles',
+        systemRolesHint: 'Defined by the platform. Not editable.',
+        customRolesTitle: 'Custom roles',
+        customRolesHint: 'Defined by your organization.',
+        systemBadge: 'System',
+        noCustomRoles: 'This organization has no custom roles.',
+        noPermissions: 'No permissions assigned.',
+        groupApp: 'App permissions',
+        groupOrg: 'Organization permissions',
+        groupPlatform: 'Platform permissions',
+        groupOther: 'Other apps',
+        roleViewer: 'Viewer',
+        roleEditor: 'Editor',
+        roleAdmin: 'Administrator',
+        roleSuperAdmin: 'Super Administrator',
+        roleBingoAdmin: 'Bingo · Administrator',
+        roleBingoTesorero: 'Bingo · Treasurer',
+        roleBingoTaquilla: 'Bingo · Box office',
+        roleBingoOperator: 'Bingo · Operator',
+        app_showcase: 'Showcase',
+        app_bingo: 'Bingo',
+        permUsers: 'Users',
+        permRoles: 'Roles',
+        permRbac: 'Access control',
+        permApps: 'Apps',
+        'permApi-keys': 'API keys',
+        'permEmail-logs': 'Email logs',
+        'permSms-logs': 'SMS logs',
+        permDocuments: 'Documents',
+        permMedia: 'Media',
+        permTemplates: 'Templates',
+        permRequests: 'Requests',
+        permBingo: 'Bingo',
+        permRead: 'Read',
+        permWrite: 'Write',
+        permCreate: 'Create',
+        permDelete: 'Delete',
+        permManage: 'Manage',
+        permEdit: 'Edit',
+        permSell: 'Sell',
+        permCheckin: 'Check-in',
+        permSettle: 'Settle',
+        permExport: 'Export',
+        permOperate: 'Operate',
+        permAll: 'All',
+        errorTitle: 'Error loading permissions',
+        retry: 'Retry',
     },
 };
 
-const DEFAULT_NAMESPACE$9 = 'Settings.TransferModal';
+const DEFAULT_NAMESPACE$9 = 'Settings.Permissions';
 /**
- * `val-transfer-ownership-modal` — selector de miembro para transferir la
- * propiedad de la organización. Promovido desde `showcase` bajo el proceso de
- * ADR-021.
+ * `val-permissions-view` — vista Permisos full-feature autocontenida (organism).
+ * Visor RBAC de solo lectura: muestra los roles del sistema (Visor/Editor/Admin +
+ * roles de plataforma) y los roles personalizados de la org activa, con el
+ * catálogo de permisos agrupado por alcance (app actual / plataforma / otras apps).
+ * Promovida desde `showcase` bajo el proceso de ADR-021.
  *
- * Recibe la lista de candidatos por `members` (todos excepto el owner actual),
- * permite filtrarlos con `val-searchbar` y, al confirmar, ejecuta el callback
- * `onConfirm(newOwnerId)`. La ejecución real de la transferencia (vía
- * `OrgService.transferOwnership`) queda en el consumer.
+ * **RBAC interno** (como `organization-view`): lee la org activa vía
+ * `AuthService.user().activeOrgId`. La vista NO muta nada — el control de quién
+ * puede verla es responsabilidad del guard de ruta del consumer; no hay gating
+ * fino interno ni se expone como config.
  *
- * Abierto vía `ModalService` — recibe `_modalRef` por `componentProps`. Header
- * canónico (Regla #5): sin `ion-title`, botón Cerrar texto en `slot=end`,
- * título/subtítulo en el body con `val-display`/`val-title`.
+ * Datos: `forkJoin` de `OrgService.listOrgRoles(orgId)` (roles de la org) +
+ * `PermissionCatalogService.getCatalog(orgId)` (catálogo + appId actual). El
+ * catálogo define el alcance (`scope`/`appId`) de cada recurso para agrupar.
  *
- * Auto-registra sus defaults i18n (es/en) si el consumer no proveyó el namespace
- * `Settings.TransferModal`.
+ * NO renderiza ion-content — vive dentro de val-page-wrapper. `ActivatedRoute` se
+ * inyecta `{ optional: true }` solo para leer el route data de config. Auto-registra
+ * sus defaults i18n (es/en) si el consumer no proveyó el namespace (default
+ * `Settings.Permissions`).
  */
-class TransferOwnershipModalComponent {
+class PermissionsViewComponent {
+    /** Namespace i18n resuelto (capturado para llamadas no-reactivas). */
+    get ns() {
+        return this.resolvedConfig().i18nNamespace;
+    }
     constructor() {
         this.i18n = inject(I18nService);
-        /** Lista de miembros transferibles (todos excepto el owner actual). */
-        this.members = [];
-        /** Namespace i18n con que la vista resuelve sus textos. */
-        this.i18nNamespace = DEFAULT_NAMESPACE$9;
-        this.query = signal('');
-        this.selectedId = signal('');
-        this.filtered = computed(() => {
-            const q = this.query().trim().toLowerCase();
-            if (!q)
-                return this.members;
-            return this.members.filter(m => m.name?.toLowerCase().includes(q) || m.email?.toLowerCase().includes(q) || m.userId.toLowerCase().includes(q));
+        this.orgService = inject(OrgService);
+        this.catalog = inject(PermissionCatalogService);
+        this.auth = inject(AuthService);
+        this.nav = inject(NavigationService);
+        this.route = inject(ActivatedRoute, { optional: true });
+        /**
+         * Cuando `true`, la vista está embebida en un modal — suprime el back-header
+         * (lo gestiona el modal padre). Default `false` (uso como ruta).
+         */
+        this.isModal = false;
+        this.resolvedConfig = computed(() => {
+            const fromRoute = (this.route?.snapshot.data['permissionsConfig'] ?? {});
+            const merged = { ...fromRoute, ...(this.config ?? {}) };
+            return {
+                showSystemRoles: merged.showSystemRoles ?? true,
+                showCustomRoles: merged.showCustomRoles ?? true,
+                i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$9,
+            };
         });
-        this.noResultsLabel = computed(() => `${this.t('noResults')} "${this.query()}"`);
-        if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$9)) {
-            this.i18n.registerContent(DEFAULT_NAMESPACE$9, TRANSFER_OWNERSHIP_MODAL_I18N);
+        this.loading = signal(false);
+        this.loadError = signal(null);
+        this.roles = signal([]);
+        this.systemRoles = computed(() => this.roles().filter(r => r.isSystem));
+        this.customRoles = computed(() => this.roles().filter(r => !r.isSystem));
+        this.activeOrgId = computed(() => {
+            const u = this.auth.user();
+            return u?.activeOrgId ?? u?.activeOrg ?? '';
+        });
+        this.retryButtonProps = computed(() => ({
+            text: this.tt('retry'),
+            color: 'dark',
+            fill: 'outline',
+            size: 'default',
+            type: 'button',
+            state: this.loading() ? ComponentStates.DISABLED : ComponentStates.ENABLED,
+        }));
+        const ns = this.ns;
+        if (!this.i18n.hasNamespace(ns)) {
+            this.i18n.registerContent(ns, PERMISSIONS_VIEW_I18N);
         }
+        this.load();
+        connectPageRefresh(() => this.load());
     }
     ngOnInit() {
-        if (!this.i18n.hasNamespace(this.i18nNamespace)) {
-            this.i18n.registerContent(this.i18nNamespace, TRANSFER_OWNERSHIP_MODAL_I18N);
+        if (!this.isModal) {
+            this.nav.setBackHeader('pageTitle', this.ns, { withMenu: true });
         }
     }
-    confirm() {
-        const id = this.selectedId();
-        if (!id)
+    load() {
+        const orgId = this.activeOrgId();
+        if (!orgId)
             return;
-        this.onConfirm?.(id);
-        this.dismiss();
-    }
-    dismiss() {
-        this._modalRef?.dismiss(null, 'cancel');
-    }
-    t(key) {
-        return this.i18n.t(key, this.i18nNamespace);
+        this.loading.set(true);
+        this.loadError.set(null);
+        forkJoin({
+            roles: this.orgService.listOrgRoles(orgId),
+            catalog: this.catalog.getCatalog(orgId),
+        }).subscribe({
+            next: ({ roles: rawRoles, catalog }) => {
+                const byResource = new Map();
+                for (const r of catalog.permissions)
+                    byResource.set(r.resource, r);
+                const currentAppId = catalog.appId;
+                // Labeler con la SSOT del backend (labels del catálogo) — reemplaza el
+                // mapa hardcodeado `perm*`. Locale del momento de carga (igual que antes:
+                // los labels se hornean en el RoleView; cambio de idioma requiere reload).
+                const labeler = createPermissionLabeler(catalog, this.i18n.lang(), {
+                    allLabel: this.tt('permAll'),
+                });
+                this.roles.set((rawRoles ?? []).map((r) => this.buildRoleView({
+                    id: r.id,
+                    name: r.name,
+                    description: r.description,
+                    permissions: r.permissions ?? [],
+                    isSystem: r.isSystem ?? false,
+                }, byResource, currentAppId, labeler)));
+                this.loading.set(false);
+            },
+            error: err => {
+                this.loadError.set(err);
+                this.loading.set(false);
+            },
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransferOwnershipModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TransferOwnershipModalComponent, isStandalone: true, selector: "val-transfer-ownership-modal", inputs: { members: "members", onConfirm: "onConfirm", _modalRef: "_modalRef", i18nNamespace: "i18nNamespace" }, ngImport: i0, template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
-      <val-title
-        [props]="{
-          content: t('hint'),
-          size: 'large',
-          color: '',
-          bold: false,
-        }"
-      />
-
-      <val-searchbar
-        [props]="{ placeholder: t('searchPlaceholder'), debounce: 150 }"
-        (filterEvent)="query.set($event)"
-      />
-
-      @if (members.length === 0) {
-        <val-text
-          [props]="{
-            content: t('empty'),
-            size: 'medium',
-            color: 'medium',
-            bold: false,
-          }"
-        />
-      } @else if (filtered().length === 0) {
-        <val-text
+    buildRoleView(role, byResource, currentAppId, labeler) {
+        const appPerms = [];
+        const orgPerms = [];
+        const otherByApp = new Map();
+        for (const perm of role.permissions) {
+            const [resource] = perm.split(':');
+            const entry = byResource.get(resource);
+            // Sin entrada en el catálogo (el backend omite los recursos internal para
+            // no-platform-admins) o entrada internal → NUNCA se muestra a nivel de
+            // producto. Defensa en profundidad junto al filtro del backend (ADR-024).
+            // Nota: el rol puede traer el permiso aunque el recurso esté filtrado del
+            // catálogo (ej. admin tiene templates:*); por eso se descarta lo no resuelto.
+            if (!entry || entry.scope === 'internal') {
+                continue;
+            }
+            const label = labeler(perm);
+            if (entry.scope === 'app') {
+                if (entry.appId === currentAppId) {
+                    appPerms.push(label);
+                }
+                else {
+                    const appId = entry.appId ?? '?';
+                    const arr = otherByApp.get(appId) ?? [];
+                    arr.push(label);
+                    otherByApp.set(appId, arr);
+                }
+            }
+            else {
+                // scope === 'org' → gestión de la organización del cliente
+                orgPerms.push(label);
+            }
+        }
+        const groups = [];
+        if (appPerms.length) {
+            groups.push({ key: 'app', label: this.tt('groupApp'), perms: appPerms });
+        }
+        if (orgPerms.length) {
+            groups.push({
+                key: 'org',
+                label: this.tt('groupOrg'),
+                perms: orgPerms,
+            });
+        }
+        for (const [appId, perms] of otherByApp) {
+            groups.push({
+                key: `other:${appId}`,
+                label: `${this.tt('groupOther')}: ${this.appLabel(appId)}`,
+                perms,
+            });
+        }
+        return {
+            id: role.id,
+            name: role.name,
+            description: role.description,
+            isSystem: role.isSystem,
+            groups,
+            hasPerms: groups.length > 0,
+        };
+    }
+    tt(key) {
+        return this.i18n.t(key, this.ns);
+    }
+    appLabel(appId) {
+        const key = `app_${appId}`;
+        const label = this.tt(key);
+        return label === key ? appId : label;
+    }
+    roleLabel(name) {
+        const map = {
+            viewer: 'roleViewer',
+            editor: 'roleEditor',
+            admin: 'roleAdmin',
+            super_admin: 'roleSuperAdmin',
+            bingo_admin: 'roleBingoAdmin',
+            bingo_tesorero: 'roleBingoTesorero',
+            bingo_taquilla: 'roleBingoTaquilla',
+            bingo_operator: 'roleBingoOperator',
+        };
+        return this.tt(map[name] ?? name);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PermissionsViewComponent, isStandalone: true, selector: "val-permissions-view", inputs: { config: "config", isModal: "isModal" }, ngImport: i0, template: `
+    <div class="page">
+      <header class="page-header">
+        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
+        <val-title
           [props]="{
-            content: noResultsLabel(),
-            size: 'medium',
-            color: 'medium',
+            size: 'large',
+            color: 'dark',
             bold: false,
+            content: tt('pageDescription'),
           }"
         />
+      </header>
+
+      @if (loading()) {
+        <div class="spinner-row">
+          <ion-spinner name="crescent" />
+        </div>
+      } @else if (loadError()) {
+        <div class="error-row">
+          <val-text
+            [props]="{
+              content: tt('errorTitle'),
+              size: 'medium',
+              color: 'medium',
+              bold: false,
+            }"
+          />
+          <val-button [props]="retryButtonProps()" (click)="load()" />
+        </div>
       } @else {
-        <div class="transfer-member-list">
-          @for (m of filtered(); track m.userId) {
-            <button
-              class="transfer-member-row"
-              [class.transfer-member-row--selected]="selectedId() === m.userId"
-              (click)="selectedId.set(m.userId)"
-              type="button"
-            >
-              <span class="transfer-member-name">{{ m.name || m.email || m.userId }}</span>
-              @if (selectedId() === m.userId) {
-                <span class="transfer-member-check">&#10003;</span>
+        @if (resolvedConfig().showSystemRoles) {
+          <section class="perm-section">
+            <div class="perm-section__header">
+              <val-title
+                [props]="{
+                  size: 'medium',
+                  color: 'dark',
+                  bold: true,
+                  content: tt('systemRolesTitle'),
+                }"
+              />
+              <val-text
+                [props]="{
+                  content: tt('systemRolesHint'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            </div>
+            <div class="role-list">
+              @for (role of systemRoles(); track role.id) {
+                <div class="role-card">
+                  <div class="role-card__header">
+                    <span class="role-card__name">{{ roleLabel(role.name) }}</span>
+                    <val-pill
+                      [props]="{
+                        label: tt('systemBadge'),
+                        color: 'primary',
+                        weight: 'bold',
+                      }"
+                    />
+                  </div>
+                  @if (role.description) {
+                    <span class="role-card__desc">{{ role.description }}</span>
+                  }
+                  @if (!role.hasPerms) {
+                    <div class="perm-chips">
+                      <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
+                    </div>
+                  } @else {
+                    @for (g of role.groups; track g.key) {
+                      <div class="perm-group">
+                        <span class="perm-group__label">{{ g.label }}</span>
+                        <div class="perm-chips">
+                          @for (p of g.perms; track p) {
+                            <span class="perm-chip">{{ p }}</span>
+                          }
+                        </div>
+                      </div>
+                    }
+                  }
+                </div>
               }
-            </button>
-          }
-        </div>
-      }
-
-      <div class="transfer-confirm-row">
-        <ion-button expand="block" color="dark" shape="round" [disabled]="!selectedId()" (click)="confirm()">
-          {{ t('confirmCta') }}
-        </ion-button>
-      </div>
+            </div>
+          </section>
+        }
 
-      <div class="modal-close-bottom">
-        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
-          {{ t('close') }}
-        </ion-button>
-      </div>
-    </ion-content>
-  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:16px}val-searchbar{display:block;margin-bottom:12px}.transfer-member-list{display:flex;flex-direction:column;gap:4px}.transfer-member-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:10px;border:1.5px solid var(--ion-color-light);background:transparent;cursor:pointer;width:100%;text-align:left;font-size:15px;color:var(--ion-color-dark);transition:border-color .15s}.transfer-member-row--selected{border-color:var(--ion-color-dark);background:var(--ion-color-light)}.transfer-member-check{font-size:17px;color:var(--ion-color-dark)}.transfer-confirm-row{margin-top:24px}.modal-close-bottom{margin-top:12px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["preset", "props"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
+        @if (resolvedConfig().showCustomRoles) {
+          <section class="perm-section">
+            <div class="perm-section__header">
+              <val-title
+                [props]="{
+                  size: 'medium',
+                  color: 'dark',
+                  bold: true,
+                  content: tt('customRolesTitle'),
+                }"
+              />
+              <val-text
+                [props]="{
+                  content: tt('customRolesHint'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            </div>
+            @if (customRoles().length === 0) {
+              <val-text
+                [props]="{
+                  content: tt('noCustomRoles'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            } @else {
+              <div class="role-list">
+                @for (role of customRoles(); track role.id) {
+                  <div class="role-card">
+                    <div class="role-card__header">
+                      <span class="role-card__name">{{ role.name }}</span>
+                    </div>
+                    @if (role.description) {
+                      <span class="role-card__desc">{{ role.description }}</span>
+                    }
+                    @if (!role.hasPerms) {
+                      <div class="perm-chips">
+                        <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
+                      </div>
+                    } @else {
+                      @for (g of role.groups; track g.key) {
+                        <div class="perm-group">
+                          <span class="perm-group__label">{{ g.label }}</span>
+                          <div class="perm-chips">
+                            @for (p of g.perms; track p) {
+                              <span class="perm-chip">{{ p }}</span>
+                            }
+                          </div>
+                        </div>
+                      }
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </section>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:24px}.spinner-row,.error-row{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0}.perm-section{margin-bottom:32px}.perm-section__header{margin-bottom:12px}.role-list{display:flex;flex-direction:column;gap:10px}.role-card{border:1.5px solid var(--ion-color-light);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.role-card__header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.role-card__name{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.role-card__desc{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.perm-group{display:flex;flex-direction:column;gap:6px}.perm-group__label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium)}.perm-chips{display:flex;flex-wrap:wrap;gap:6px}.perm-chip{font-size:.75rem;padding:3px 10px;border-radius:20px;background:var(--ion-color-light);color:var(--ion-color-dark)}.perm-chip--empty{color:var(--ion-color-medium);background:transparent;padding-left:0}\n"], dependencies: [{ kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: PillComponent, selector: "val-pill", inputs: ["preset", "props"], outputs: ["pillClick", "pillAction"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransferOwnershipModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-transfer-ownership-modal', standalone: true, imports: [
-                        IonHeader,
-                        IonToolbar,
-                        IonButtons,
-                        IonButton,
-                        IonContent,
-                        SearchbarComponent,
-                        DisplayComponent,
-                        TextComponent,
-                        TitleComponent,
-                    ], template: `
-    <ion-header>
-      <ion-toolbar>
-        <ion-buttons slot="end">
-          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
-            <strong>{{ t('close') }}</strong>
-          </ion-button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-header>
-
-    <ion-content class="ion-padding">
-      <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
-      <val-title
-        [props]="{
-          content: t('hint'),
-          size: 'large',
-          color: '',
-          bold: false,
-        }"
-      />
-
-      <val-searchbar
-        [props]="{ placeholder: t('searchPlaceholder'), debounce: 150 }"
-        (filterEvent)="query.set($event)"
-      />
-
-      @if (members.length === 0) {
-        <val-text
-          [props]="{
-            content: t('empty'),
-            size: 'medium',
-            color: 'medium',
-            bold: false,
-          }"
-        />
-      } @else if (filtered().length === 0) {
-        <val-text
+            args: [{ selector: 'val-permissions-view', standalone: true, imports: [IonSpinner, DisplayComponent, PillComponent, TitleComponent, TextComponent, ButtonComponent], template: `
+    <div class="page">
+      <header class="page-header">
+        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
+        <val-title
           [props]="{
-            content: noResultsLabel(),
-            size: 'medium',
-            color: 'medium',
+            size: 'large',
+            color: 'dark',
             bold: false,
+            content: tt('pageDescription'),
           }"
         />
+      </header>
+
+      @if (loading()) {
+        <div class="spinner-row">
+          <ion-spinner name="crescent" />
+        </div>
+      } @else if (loadError()) {
+        <div class="error-row">
+          <val-text
+            [props]="{
+              content: tt('errorTitle'),
+              size: 'medium',
+              color: 'medium',
+              bold: false,
+            }"
+          />
+          <val-button [props]="retryButtonProps()" (click)="load()" />
+        </div>
       } @else {
-        <div class="transfer-member-list">
-          @for (m of filtered(); track m.userId) {
-            <button
-              class="transfer-member-row"
-              [class.transfer-member-row--selected]="selectedId() === m.userId"
-              (click)="selectedId.set(m.userId)"
-              type="button"
-            >
-              <span class="transfer-member-name">{{ m.name || m.email || m.userId }}</span>
-              @if (selectedId() === m.userId) {
-                <span class="transfer-member-check">&#10003;</span>
+        @if (resolvedConfig().showSystemRoles) {
+          <section class="perm-section">
+            <div class="perm-section__header">
+              <val-title
+                [props]="{
+                  size: 'medium',
+                  color: 'dark',
+                  bold: true,
+                  content: tt('systemRolesTitle'),
+                }"
+              />
+              <val-text
+                [props]="{
+                  content: tt('systemRolesHint'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            </div>
+            <div class="role-list">
+              @for (role of systemRoles(); track role.id) {
+                <div class="role-card">
+                  <div class="role-card__header">
+                    <span class="role-card__name">{{ roleLabel(role.name) }}</span>
+                    <val-pill
+                      [props]="{
+                        label: tt('systemBadge'),
+                        color: 'primary',
+                        weight: 'bold',
+                      }"
+                    />
+                  </div>
+                  @if (role.description) {
+                    <span class="role-card__desc">{{ role.description }}</span>
+                  }
+                  @if (!role.hasPerms) {
+                    <div class="perm-chips">
+                      <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
+                    </div>
+                  } @else {
+                    @for (g of role.groups; track g.key) {
+                      <div class="perm-group">
+                        <span class="perm-group__label">{{ g.label }}</span>
+                        <div class="perm-chips">
+                          @for (p of g.perms; track p) {
+                            <span class="perm-chip">{{ p }}</span>
+                          }
+                        </div>
+                      </div>
+                    }
+                  }
+                </div>
               }
-            </button>
-          }
-        </div>
+            </div>
+          </section>
+        }
+
+        @if (resolvedConfig().showCustomRoles) {
+          <section class="perm-section">
+            <div class="perm-section__header">
+              <val-title
+                [props]="{
+                  size: 'medium',
+                  color: 'dark',
+                  bold: true,
+                  content: tt('customRolesTitle'),
+                }"
+              />
+              <val-text
+                [props]="{
+                  content: tt('customRolesHint'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            </div>
+            @if (customRoles().length === 0) {
+              <val-text
+                [props]="{
+                  content: tt('noCustomRoles'),
+                  size: 'medium',
+                  color: 'medium',
+                  bold: false,
+                }"
+              />
+            } @else {
+              <div class="role-list">
+                @for (role of customRoles(); track role.id) {
+                  <div class="role-card">
+                    <div class="role-card__header">
+                      <span class="role-card__name">{{ role.name }}</span>
+                    </div>
+                    @if (role.description) {
+                      <span class="role-card__desc">{{ role.description }}</span>
+                    }
+                    @if (!role.hasPerms) {
+                      <div class="perm-chips">
+                        <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
+                      </div>
+                    } @else {
+                      @for (g of role.groups; track g.key) {
+                        <div class="perm-group">
+                          <span class="perm-group__label">{{ g.label }}</span>
+                          <div class="perm-chips">
+                            @for (p of g.perms; track p) {
+                              <span class="perm-chip">{{ p }}</span>
+                            }
+                          </div>
+                        </div>
+                      }
+                    }
+                  </div>
+                }
+              </div>
+            }
+          </section>
+        }
       }
+    </div>
+  `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:24px}.spinner-row,.error-row{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0}.perm-section{margin-bottom:32px}.perm-section__header{margin-bottom:12px}.role-list{display:flex;flex-direction:column;gap:10px}.role-card{border:1.5px solid var(--ion-color-light);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.role-card__header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.role-card__name{font-size:.9375rem;font-weight:600;color:var(--ion-color-dark)}.role-card__desc{font-size:.8125rem;color:var(--ion-color-medium);line-height:1.4}.perm-group{display:flex;flex-direction:column;gap:6px}.perm-group__label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium)}.perm-chips{display:flex;flex-wrap:wrap;gap:6px}.perm-chip{font-size:.75rem;padding:3px 10px;border-radius:20px;background:var(--ion-color-light);color:var(--ion-color-dark)}.perm-chip--empty{color:var(--ion-color-medium);background:transparent;padding-left:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }], isModal: [{
+                type: Input
+            }] } });
 
-      <div class="transfer-confirm-row">
-        <ion-button expand="block" color="dark" shape="round" [disabled]="!selectedId()" (click)="confirm()">
-          {{ t('confirmCta') }}
-        </ion-button>
-      </div>
+class PermissionsModalComponent {
+    constructor() {
+        this.i18n = inject(I18nService);
+        this.isOpen = false;
+        this.dismissed = new EventEmitter();
+    }
+    close() {
+        this.dismissed.emit();
+    }
+    t(key) {
+        return this.i18n.t(key, '_global');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PermissionsModalComponent, isStandalone: true, selector: "val-permissions-modal", inputs: { isOpen: "isOpen", config: "config" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="close()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <val-permissions-view [config]="config" [isModal]="true" />
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `, isInline: true, dependencies: [{ kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: PermissionsViewComponent, selector: "val-permissions-view", inputs: ["config", "isModal"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'val-permissions-modal',
+                    standalone: true,
+                    imports: [IonModal, IonHeader, IonToolbar, IonButtons, IonButton, IonContent, PermissionsViewComponent],
+                    template: `
+    <ion-modal [isOpen]="isOpen" (didDismiss)="close()" cssClass="val-modal-adaptive">
+      <ng-template>
+        <ion-header>
+          <ion-toolbar>
+            <ion-buttons slot="end">
+              <ion-button fill="clear" color="dark" shape="round" (click)="close()">
+                <strong>{{ t('close') }}</strong>
+              </ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <val-permissions-view [config]="config" [isModal]="true" />
+        </ion-content>
+      </ng-template>
+    </ion-modal>
+  `,
+                }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], dismissed: [{
+                type: Output
+            }] } });
+
+/**
+ * Defaults i18n (es/en) embebidos en `val-transfer-ownership-modal`.
+ * Auto-registrados en el constructor del componente si el consumer no proveyó el
+ * namespace (`Settings.TransferModal` por default). SOLO incluye las keys que el
+ * modal usa.
+ */
+const TRANSFER_OWNERSHIP_MODAL_I18N = {
+    es: {
+        title: 'Transferir propiedad',
+        hint: 'Selecciona el nuevo propietario de la organización.',
+        searchPlaceholder: 'Buscar miembro...',
+        empty: 'No hay otros miembros disponibles.',
+        noResults: 'Sin resultados para',
+        confirmCta: 'Confirmar transferencia',
+        close: 'Cancelar',
+    },
+    en: {
+        title: 'Transfer ownership',
+        hint: 'Select the new owner of the organization.',
+        searchPlaceholder: 'Search member...',
+        empty: 'No other members available.',
+        noResults: 'No results for',
+        confirmCta: 'Confirm transfer',
+        close: 'Cancel',
+    },
+};
+
+const DEFAULT_NAMESPACE$8 = 'Settings.TransferModal';
+/**
+ * `val-transfer-ownership-modal` — selector de miembro para transferir la
+ * propiedad de la organización. Promovido desde `showcase` bajo el proceso de
+ * ADR-021.
+ *
+ * Recibe la lista de candidatos por `members` (todos excepto el owner actual),
+ * permite filtrarlos con `val-searchbar` y, al confirmar, ejecuta el callback
+ * `onConfirm(newOwnerId)`. La ejecución real de la transferencia (vía
+ * `OrgService.transferOwnership`) queda en el consumer.
+ *
+ * Abierto vía `ModalService` — recibe `_modalRef` por `componentProps`. Header
+ * canónico (Regla #5): sin `ion-title`, botón Cerrar texto en `slot=end`,
+ * título/subtítulo en el body con `val-display`/`val-title`.
+ *
+ * Auto-registra sus defaults i18n (es/en) si el consumer no proveyó el namespace
+ * `Settings.TransferModal`.
+ */
+class TransferOwnershipModalComponent {
+    constructor() {
+        this.i18n = inject(I18nService);
+        /** Lista de miembros transferibles (todos excepto el owner actual). */
+        this.members = [];
+        /** Namespace i18n con que la vista resuelve sus textos. */
+        this.i18nNamespace = DEFAULT_NAMESPACE$8;
+        this.query = signal('');
+        this.selectedId = signal('');
+        this.filtered = computed(() => {
+            const q = this.query().trim().toLowerCase();
+            if (!q)
+                return this.members;
+            return this.members.filter(m => m.name?.toLowerCase().includes(q) || m.email?.toLowerCase().includes(q) || m.userId.toLowerCase().includes(q));
+        });
+        this.noResultsLabel = computed(() => `${this.t('noResults')} "${this.query()}"`);
+        if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$8)) {
+            this.i18n.registerContent(DEFAULT_NAMESPACE$8, TRANSFER_OWNERSHIP_MODAL_I18N);
+        }
+    }
+    ngOnInit() {
+        if (!this.i18n.hasNamespace(this.i18nNamespace)) {
+            this.i18n.registerContent(this.i18nNamespace, TRANSFER_OWNERSHIP_MODAL_I18N);
+        }
+    }
+    confirm() {
+        const id = this.selectedId();
+        if (!id)
+            return;
+        this.onConfirm?.(id);
+        this.dismiss();
+    }
+    dismiss() {
+        this._modalRef?.dismiss(null, 'cancel');
+    }
+    t(key) {
+        return this.i18n.t(key, this.i18nNamespace);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransferOwnershipModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TransferOwnershipModalComponent, isStandalone: true, selector: "val-transfer-ownership-modal", inputs: { members: "members", onConfirm: "onConfirm", _modalRef: "_modalRef", i18nNamespace: "i18nNamespace" }, ngImport: i0, template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
+            <strong>{{ t('close') }}</strong>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
+      <val-title
+        [props]="{
+          content: t('hint'),
+          size: 'large',
+          color: '',
+          bold: false,
+        }"
+      />
+
+      <val-searchbar
+        [props]="{ placeholder: t('searchPlaceholder'), debounce: 150 }"
+        (filterEvent)="query.set($event)"
+      />
+
+      @if (members.length === 0) {
+        <val-text
+          [props]="{
+            content: t('empty'),
+            size: 'medium',
+            color: 'medium',
+            bold: false,
+          }"
+        />
+      } @else if (filtered().length === 0) {
+        <val-text
+          [props]="{
+            content: noResultsLabel(),
+            size: 'medium',
+            color: 'medium',
+            bold: false,
+          }"
+        />
+      } @else {
+        <div class="transfer-member-list">
+          @for (m of filtered(); track m.userId) {
+            <button
+              class="transfer-member-row"
+              [class.transfer-member-row--selected]="selectedId() === m.userId"
+              (click)="selectedId.set(m.userId)"
+              type="button"
+            >
+              <span class="transfer-member-name">{{ m.name || m.email || m.userId }}</span>
+              @if (selectedId() === m.userId) {
+                <span class="transfer-member-check">&#10003;</span>
+              }
+            </button>
+          }
+        </div>
+      }
+
+      <div class="transfer-confirm-row">
+        <ion-button expand="block" color="dark" shape="round" [disabled]="!selectedId()" (click)="confirm()">
+          {{ t('confirmCta') }}
+        </ion-button>
+      </div>
+
+      <div class="modal-close-bottom">
+        <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
+          {{ t('close') }}
+        </ion-button>
+      </div>
+    </ion-content>
+  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:16px}val-searchbar{display:block;margin-bottom:12px}.transfer-member-list{display:flex;flex-direction:column;gap:4px}.transfer-member-row{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:10px;border:1.5px solid var(--ion-color-light);background:transparent;cursor:pointer;width:100%;text-align:left;font-size:15px;color:var(--ion-color-dark);transition:border-color .15s}.transfer-member-row--selected{border-color:var(--ion-color-dark);background:var(--ion-color-light)}.transfer-member-check{font-size:17px;color:var(--ion-color-dark)}.transfer-confirm-row{margin-top:24px}.modal-close-bottom{margin-top:12px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: SearchbarComponent, selector: "val-searchbar", inputs: ["preset", "props"], outputs: ["filterEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TransferOwnershipModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-transfer-ownership-modal', standalone: true, imports: [
+                        IonHeader,
+                        IonToolbar,
+                        IonButtons,
+                        IonButton,
+                        IonContent,
+                        SearchbarComponent,
+                        DisplayComponent,
+                        TextComponent,
+                        TitleComponent,
+                    ], template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="end">
+          <ion-button fill="clear" color="dark" shape="round" (click)="dismiss()">
+            <strong>{{ t('close') }}</strong>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding">
+      <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
+      <val-title
+        [props]="{
+          content: t('hint'),
+          size: 'large',
+          color: '',
+          bold: false,
+        }"
+      />
+
+      <val-searchbar
+        [props]="{ placeholder: t('searchPlaceholder'), debounce: 150 }"
+        (filterEvent)="query.set($event)"
+      />
+
+      @if (members.length === 0) {
+        <val-text
+          [props]="{
+            content: t('empty'),
+            size: 'medium',
+            color: 'medium',
+            bold: false,
+          }"
+        />
+      } @else if (filtered().length === 0) {
+        <val-text
+          [props]="{
+            content: noResultsLabel(),
+            size: 'medium',
+            color: 'medium',
+            bold: false,
+          }"
+        />
+      } @else {
+        <div class="transfer-member-list">
+          @for (m of filtered(); track m.userId) {
+            <button
+              class="transfer-member-row"
+              [class.transfer-member-row--selected]="selectedId() === m.userId"
+              (click)="selectedId.set(m.userId)"
+              type="button"
+            >
+              <span class="transfer-member-name">{{ m.name || m.email || m.userId }}</span>
+              @if (selectedId() === m.userId) {
+                <span class="transfer-member-check">&#10003;</span>
+              }
+            </button>
+          }
+        </div>
+      }
+
+      <div class="transfer-confirm-row">
+        <ion-button expand="block" color="dark" shape="round" [disabled]="!selectedId()" (click)="confirm()">
+          {{ t('confirmCta') }}
+        </ion-button>
+      </div>
 
       <div class="modal-close-bottom">
         <ion-button expand="block" fill="outline" color="dark" shape="round" (click)="dismiss()">
@@ -50341,7 +51085,7 @@ const MEMBER_IMPORT_MODAL_I18N = {
     },
 };
 
-const DEFAULT_NAMESPACE$8 = 'Settings.ImportModal';
+const DEFAULT_NAMESPACE$7 = 'Settings.ImportModal';
 addIcons({ cloudUploadOutline, documentTextOutline });
 /**
  * `val-member-import-modal` — panel de carga masiva de miembros (ADR-023 fase 6).
@@ -50361,7 +51105,7 @@ class MemberImportModalComponent {
         /** Nombres de roles disponibles (para el hint). Opcional. */
         this.availableRoles = [];
         /** Namespace i18n. */
-        this.i18nNamespace = DEFAULT_NAMESPACE$8;
+        this.i18nNamespace = DEFAULT_NAMESPACE$7;
         this.csv = '';
         this.importMode = signal('file');
         this.onConflictControl = new FormControl('assignRole');
@@ -50403,8 +51147,8 @@ class MemberImportModalComponent {
                 return this.t('summary');
             return `${this.t('summary')}: ${s.created} ${this.t('created')} · ${s.assigned} ${this.t('assigned')} · ${s.skipped} ${this.t('skipped')} · ${s.failed} ${this.t('failed')}`;
         });
-        if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$8)) {
-            this.i18n.registerContent(DEFAULT_NAMESPACE$8, MEMBER_IMPORT_MODAL_I18N);
+        if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$7)) {
+            this.i18n.registerContent(DEFAULT_NAMESPACE$7, MEMBER_IMPORT_MODAL_I18N);
         }
     }
     ngOnInit() {
@@ -50996,7 +51740,7 @@ const ORGANIZATION_VIEW_I18N = {
     },
 };
 
-const DEFAULT_NAMESPACE$7 = 'Settings.Organization';
+const DEFAULT_NAMESPACE$6 = 'Settings.Organization';
 const DEFAULT_VIEW_PERMISSIONS_ROUTE = '/app/settings/permissions';
 const DEFAULT_API_KEYS_ROUTE = '/app/settings/api-keys';
 const DEFAULT_LEAVE_REDIRECT_ROUTE = '/app/settings/account';
@@ -51054,7 +51798,7 @@ class OrganizationViewComponent {
                 showInvite: merged.showInvite ?? true,
                 showTransferOwnership: merged.showTransferOwnership ?? true,
                 showLeave: merged.showLeave ?? true,
-                i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$7,
+                i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$6,
                 viewPermissionsRoute: merged.viewPermissionsRoute ?? DEFAULT_VIEW_PERMISSIONS_ROUTE,
                 apiKeysRoute: merged.apiKeysRoute ?? DEFAULT_API_KEYS_ROUTE,
                 leaveRedirectRoute: merged.leaveRedirectRoute ?? DEFAULT_LEAVE_REDIRECT_ROUTE,
@@ -51067,6 +51811,7 @@ class OrganizationViewComponent {
         this.org = signal(null);
         this.loading = signal(false);
         this.leaving = signal(false);
+        this.permissionsOpen = signal(false);
         this.orgLoadError = signal(null);
         this.orgErrorState = computed(() => {
             this.i18n.lang();
@@ -51365,7 +52110,7 @@ class OrganizationViewComponent {
         });
     }
     onViewPermissions() {
-        this.nav.navigateByUrl(this.resolvedConfig().viewPermissionsRoute);
+        this.permissionsOpen.set(true);
     }
     onOpenTransfer() {
         void this.modalService.openAdaptive({
@@ -51838,8 +52583,13 @@ class OrganizationViewComponent {
           </div>
         </section>
       }
+      <val-permissions-modal
+        [isOpen]="permissionsOpen()"
+        [config]="{ i18nNamespace: resolvedConfig().i18nNamespace }"
+        (dismissed)="permissionsOpen.set(false)"
+      />
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "directive", type: HasPermissionDirective, selector: "[valHasPermission]", inputs: ["valHasPermission"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: MemberCardComponent, selector: "val-member-card", inputs: ["props"], outputs: ["onAction"] }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "directive", type: HasPermissionDirective, selector: "[valHasPermission]", inputs: ["valHasPermission"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: MemberCardComponent, selector: "val-member-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: PermissionsModalComponent, selector: "val-permissions-modal", inputs: ["isOpen", "config"], outputs: ["dismissed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OrganizationViewComponent, decorators: [{
             type: Component,
@@ -51852,6 +52602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         TextComponent,
                         ButtonComponent,
                         MemberCardComponent,
+                        PermissionsModalComponent,
                         TransferOwnershipModalComponent,
                         MemberImportModalComponent,
                         OrgInfoSheetComponent,
@@ -51928,1618 +52679,1007 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <val-title
             [props]="{
               size: 'medium',
-              color: 'dark',
-              bold: true,
-              content: tt('membersTitle'),
-            }"
-          />
-          <div class="section-body">
-            @if (membersLoading()) {
-              <val-skeleton-layout [props]="{ preset: 'list', rows: 3 }" />
-            } @else if (membersErrorState()) {
-              <val-empty-state [props]="membersErrorState()!" />
-            } @else if (members().length === 0) {
-              <val-text
-                [props]="{
-                  content: tt('membersEmpty'),
-                  size: 'medium',
-                  color: 'dark',
-                  bold: false,
-                }"
-              />
-            } @else {
-              <div class="members-list">
-                @for (m of visibleMembers(); track m.userId) {
-                  <val-member-card
-                    [attr.data-testid]="'org-member-' + m.userId"
-                    [props]="{
-                      id: m.userId,
-                      name: m.name,
-                      handle: m.handle,
-                      email: m.email,
-                      avatarUrl: m.avatar,
-                      roleLabel: m.roles[0] ? roleLabel(m.roles[0]) : '',
-                      actionAriaLabel: tt('viewMemberCta'),
-                    }"
-                    (onAction)="onViewMember(m)"
-                  />
-                }
-              </div>
-              @if (!showAllMembers() && members().length > 3) {
-                <button class="members-show-more" (click)="showAllMembers.set(true)">
-                  {{ tt('membersShowMore') }} ({{ members().length - 3 }})
-                </button>
-              }
-              @if (showAllMembers() && membersNextToken()) {
-                <button class="members-show-more" [disabled]="loadingMoreMembers()" (click)="loadMoreMembers()">
-                  {{ loadingMoreMembers() ? '…' : tt('membersShowMore') }}
-                </button>
-              }
-            }
-          </div>
-        </section>
-      }
-
-      @if (resolvedConfig().showRoles) {
-        <!-- Roles y permisos: seccion explicativa, detalle en la ruta de permisos -->
-        <section class="settings-section">
-          <val-title
-            [props]="{
-              size: 'medium',
-              color: 'dark',
-              bold: true,
-              content: tt('rolesSectionTitle'),
-            }"
-          />
-          <div class="section-body">
-            <val-text
-              [props]="{
-                content: tt('rolesHint'),
-                size: 'medium',
-                color: 'dark',
-                bold: false,
-              }"
-            />
-            <div class="row-actions">
-              <val-button [props]="viewPermissionsButtonProps()" (click)="onViewPermissions()" />
-            </div>
-          </div>
-        </section>
-      }
-
-      @if (resolvedConfig().showInvite) {
-        <!-- Invite: solo admin+ (gating RBAC interno) -->
-        <section *valHasPermission="'users:*'" class="settings-section" data-testid="org-invite-section">
-          <div class="invite-cta">
-            <div class="invite-cta__text">
-              <val-title
-                [props]="{
-                  size: 'medium',
-                  color: 'dark',
-                  bold: true,
-                  content: tt('inviteCtaTitle'),
-                }"
-              />
-              <val-text
-                [props]="{
-                  size: 'medium',
-                  color: 'dark',
-                  bold: false,
-                  content: tt('inviteCtaHint'),
-                }"
-              />
-            </div>
-            <div class="invite-cta__actions">
-              <val-button [props]="openInviteButtonProps()" (click)="onOpenInvite()" />
-              <val-button [props]="openImportButtonProps()" (click)="onOpenImport()" />
-            </div>
-          </div>
-        </section>
-      }
-
-      <!-- API Keys: sección propia. Integraciones M2M (import de miembros, etc.). -->
-      <section *valHasPermission="'api-keys:read'" class="settings-section" data-testid="org-apikeys-section">
-        <div class="invite-cta">
-          <div class="invite-cta__text">
-            <val-title [props]="{ size: 'medium', color: 'dark', bold: true, content: tt('apiKeysSectionTitle') }" />
-            <val-text [props]="{ size: 'medium', color: 'dark', bold: false, content: tt('apiKeysSectionHint') }" />
-            <button class="org-more-info-link" type="button" (click)="onApiKeysInfo()">
-              {{ tt('apiKeysMoreInfo') }}
-            </button>
-          </div>
-          <div class="invite-cta__actions">
-            <val-button [props]="openApiKeysButtonProps()" (click)="onOpenApiKeys()" />
-          </div>
-        </div>
-      </section>
-
-      @if (resolvedConfig().showTransferOwnership && isOwner()) {
-        <!-- Transfer ownership: solo owner (gating RBAC interno) -->
-        <section class="settings-section" data-testid="org-transfer-section">
-          <val-title
-            [props]="{
-              size: 'medium',
-              color: 'dark',
-              bold: true,
-              content: tt('transferTitle'),
-            }"
-          />
-          <div class="section-body">
-            <val-text
-              [props]="{
-                content: tt('transferHint'),
-                size: 'medium',
-                color: 'dark',
-                bold: false,
-              }"
-            />
-            @if (transferableMembers().length > 0) {
-              <div class="row-actions">
-                <val-button [props]="transferButtonProps()" (click)="onOpenTransfer()" />
-              </div>
-            } @else {
-              <val-text
-                [props]="{
-                  content: tt('membersEmpty'),
-                  size: 'medium',
-                  color: 'dark',
-                  bold: false,
-                }"
-              />
-            }
-          </div>
-        </section>
-      }
-
-      @if (resolvedConfig().showLeave) {
-        <!-- Leave org -->
-        <section class="settings-section">
-          <val-title
-            [props]="{
-              size: 'medium',
-              color: 'dark',
-              bold: true,
-              content: tt('leaveTitle'),
-            }"
-          />
-          <div class="section-body">
-            <val-text
-              [props]="{
-                content: isOwner() ? tt('leaveOwnerHint') : tt('leaveHint'),
-                size: 'medium',
-                color: 'dark',
-                bold: false,
-              }"
-            />
-            <div class="row-actions">
-              <val-button [props]="leaveButtonProps()" (click)="onLeave()" />
-            </div>
-          </div>
-        </section>
-      }
-
-      @if (isDebug) {
-        <section class="settings-section rbac-debug">
-          <div class="section-header-row">
-            <val-title
-              [props]="{
-                content: 'RBAC (live)',
-                size: 'small',
-                color: 'medium',
-                bold: false,
-              }"
-            />
-          </div>
-          <div class="rbac-debug__body">
-            <div class="rbac-debug__row">
-              <span class="rbac-debug__label">Roles</span>
-              <span class="rbac-debug__value">{{ auth.roles().join(', ') || '—' }}</span>
-            </div>
-            <div class="rbac-debug__row">
-              <span class="rbac-debug__label">Permisos</span>
-              <span class="rbac-debug__value rbac-debug__value--perms">{{ auth.permissions().join(', ') || '—' }}</span>
-            </div>
-          </div>
-        </section>
-      }
-    </div>
-  `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{
-                type: Input
-            }] } });
-
-/**
- * Helper para montar la vista Gestión de organización (`val-organization-view`)
- * como ruta en una app del factory. El `config` se pasa por route `data`
- * (`organizationConfig`) y el componente lo lee como fallback de su
- * `@Input() config`.
- *
- * @example
- * ```ts
- * // settings.routes.ts
- * export const settingsRoutes: Routes = [
- *   ...provideValtechOrganizationRoutes(),                 // → /app/settings/organization
- *   { path: 'preferences', loadComponent: () => ... },
- * ];
- *
- * // con config acotada:
- * ...provideValtechOrganizationRoutes({ config: { showLeave: false } }),
- * ...provideValtechOrganizationRoutes({ config: { viewPermissionsRoute: '/app/roles' } }),
- * ```
- */
-function provideValtechOrganizationRoutes(opts) {
-    return [
-        {
-            path: opts?.path ?? 'organization',
-            component: OrganizationViewComponent,
-            data: { organizationConfig: opts?.config },
-        },
-    ];
-}
-
-/**
- * Defaults i18n (es/en) embebidos en `val-notification-preferences-view`.
- * Auto-registrados en el constructor del componente si el consumer no proveyó
- * el namespace (`Settings.Notifications` por default). SOLO incluye las keys que
- * la vista usa.
- *
- * Portado del override `Settings.Notifications` (showcase) bajo el proceso de
- * ADR-021.
- */
-const NOTIFICATION_PREFERENCES_VIEW_I18N = {
-    es: {
-        pageTitle: 'Notificaciones',
-        pageDescription: 'Configura como quieres recibir notificaciones',
-        // Control principal (UX simplificado)
-        simpleTitle: 'Notificaciones push en este dispositivo',
-        simpleDescription: 'Recibe alertas en tiempo real incluso con la app cerrada.',
-        enabling: 'Activando…',
-        disabling: 'Desactivando…',
-        enabled: 'Activadas',
-        errorGeneric: 'No pudimos completar la configuración. Verifica los permisos del navegador y reintenta.',
-        retryCta: 'Reintentar',
-        // Mensajes contextuales
-        permissionUnsupported: 'Tu navegador no soporta notificaciones push.',
-        permissionDeniedInfo: 'Tu navegador esta bloqueando las notificaciones. Para habilitarlas, ve a la configuracion del sitio y permitelas manualmente.',
-        // iOS PWA install
-        iosInstallTitle: 'En iOS, instala la app para recibir notificaciones',
-        iosInstallHint: 'Las notificaciones push en iOS (iPhone/iPad) solo funcionan cuando la app está instalada en la pantalla de inicio. Edge, Chrome y Firefox en iOS comparten esta limitación.',
-        iosInstallStep1: 'Abre este sitio en Safari (no en Chrome/Edge).',
-        iosInstallStep2: 'Toca el botón Compartir (□ con flecha hacia arriba).',
-        iosInstallStep3: "Elige 'Añadir a pantalla de inicio'.",
-        iosInstallStep4: 'Abre la app desde el ícono recién creado y vuelve aquí.',
-        // Detalles técnicos (expandible)
-        detailsShow: 'Ver detalles técnicos',
-        detailsHide: 'Ocultar detalles',
-        detailsToken: 'Token',
-        detailsNone: 'Sin registrar',
-        diagnosticsPermission: 'Permiso del navegador',
-        diagnosticsSupported: 'Soporte del navegador',
-        // Toasts
-        enableSuccess: 'Notificaciones habilitadas',
-        disableSuccess: 'Notificaciones deshabilitadas',
-    },
-    en: {
-        pageTitle: 'Notifications',
-        pageDescription: 'Configure how you want to receive notifications',
-        simpleTitle: 'Push notifications on this device',
-        simpleDescription: 'Get real-time alerts even when the app is closed.',
-        enabling: 'Enabling…',
-        disabling: 'Disabling…',
-        enabled: 'Enabled',
-        errorGeneric: "We couldn't complete the setup. Check your browser permissions and retry.",
-        retryCta: 'Retry',
-        permissionUnsupported: 'Your browser does not support push notifications.',
-        permissionDeniedInfo: 'Your browser is blocking notifications. To enable them, go to site settings and allow them manually.',
-        iosInstallTitle: 'On iOS, install the app to receive notifications',
-        iosInstallHint: 'Push notifications on iOS (iPhone/iPad) only work when the app is installed on the Home Screen. Edge, Chrome and Firefox on iOS share this limitation.',
-        iosInstallStep1: 'Open this site in Safari (not Chrome/Edge).',
-        iosInstallStep2: 'Tap the Share button (□ with an up arrow).',
-        iosInstallStep3: "Choose 'Add to Home Screen'.",
-        iosInstallStep4: 'Open the app from the new icon and come back here.',
-        detailsShow: 'View technical details',
-        detailsHide: 'Hide details',
-        detailsToken: 'Token',
-        detailsNone: 'Not registered',
-        diagnosticsPermission: 'Browser permission',
-        diagnosticsSupported: 'Browser support',
-        enableSuccess: 'Notifications enabled',
-        disableSuccess: 'Notifications disabled',
-    },
-};
-
-addIcons({
-    alertCircleOutline,
-    chevronDownOutline,
-    chevronUpOutline,
-    closeCircleOutline,
-    notificationsOffOutline,
-    notificationsOutline,
-    refreshOutline,
-});
-const DEFAULT_NAMESPACE$6 = 'Settings.Notifications';
-/**
- * `val-notification-preferences-view` — **preferencias de notificaciones push**
- * (FCM) full-feature autocontenida (organism). Promovida desde `showcase` bajo el
- * proceso de ADR-021.
- *
- * Separada de `val-notifications-view` (el inbox / feed). Aquí el user **activa o
- * desactiva** las notificaciones push en este dispositivo.
- *
- * UX simplificado: UN solo toggle que ejecuta toda la secuencia (pedir permiso →
- * SW ready → getToken → registrar en backend → set master pref) vía
- * `MessagingService.enable()`. El registro del device en el backend va como
- * callback (la lib no depende de `AuthService` para evitar ciclos). Mensajes
- * contextuales y botón "Reintentar" aparecen solo cuando aplican.
- *
- * NO renderiza ion-content — vive dentro de val-page-wrapper. `ActivatedRoute` se
- * inyecta `{ optional: true }` → funciona sin router (embebida / Storybook).
- */
-class NotificationPreferencesViewComponent {
-    /** Namespace i18n resuelto (capturado para llamadas no-reactivas). */
-    get ns() {
-        return this.resolvedConfig().i18nNamespace;
-    }
-    // ---------------------------------------------------------------------------
-    // Lifecycle
-    // ---------------------------------------------------------------------------
-    constructor() {
-        this.nav = inject(NavigationService);
-        this.i18n = inject(I18nService);
-        this.toast = inject(ToastService);
-        this.auth = inject(AuthService);
-        this.messaging = inject(MessagingService);
-        this.pageRefresh = inject(PageRefreshService);
-        this.prefs = inject(PreferencesService);
-        // `ActivatedRoute` opcional → la vista funciona embebida / en Storybook sin
-        // router (solo lo usa para leer el route data de config como fallback).
-        this.route = inject(ActivatedRoute, { optional: true });
-        this.resolvedConfig = computed(() => {
-            const fromRoute = (this.route?.snapshot.data['notificationPreferencesConfig'] ??
-                {});
-            const merged = { ...fromRoute, ...(this.config ?? {}) };
-            return {
-                showDetails: merged.showDetails ?? true,
-                i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$6,
-                onPushEnabled: merged.onPushEnabled,
-                onPushDisabled: merged.onPushDisabled,
-            };
-        });
-        /** Operación en curso (gobierna spinner del toggle + label "Activando…"). */
-        this._busy = signal(null);
-        /** True si el último intento falló — gobierna estado `error` + retry button. */
-        this._lastFailed = signal(false);
-        /** True mientras se re-obtiene el token FCM en background (no afecta la UI). */
-        this._repairingToken = false;
-        /** Toggle del expand de detalles técnicos. */
-        this.showDetails = signal(false);
-        this.permission = signal('default');
-        this.isSupported = signal(false);
-        this.currentToken = signal(null);
-        this.needsIOSInstall = signal(this.detectNeedsIOSInstall());
-        /** FormControl del toggle (sync-eado con `isEnabled` via effect). */
-        this.toggleControl = new FormControl(false, {
-            nonNullable: true,
-        });
-        /** Handler del listener `focus` — referencia guardada para poder removerlo. */
-        this.onWindowFocus = () => this.scheduleBrowserRefresh();
-        /** Timer del debounce del refresh disparado por `focus`. */
-        this.focusDebounceTimer = null;
-        /** Ventana de debounce (ms) para el refresh disparado por `focus`. */
-        this.FOCUS_DEBOUNCE_MS = 500;
-        // ---------------------------------------------------------------------------
-        // Estado derivado
-        // ---------------------------------------------------------------------------
-        this.pageTitle = computed(() => this.tt('pageTitle'));
-        this.pageDescription = computed(() => this.tt('pageDescription'));
-        /**
-         * Estado efectivo del toggle: "el usuario tiene push activo".
-         *
-         * Se deriva SOLO de la decisión del usuario (`master`) y del permiso del SO
-         * (`permission`). El token FCM NO forma parte del estado de UI: vive en
-         * memoria, se pierde en cada recarga/suspensión de la PWA y produciría flicker.
-         * Si falta token con `master && granted`, es un detalle reparable en
-         * background (ver `repairTokenIfNeeded`), no un cambio del toggle.
-         */
-        this.isEnabled = computed(() => this.prefs.notificationsMaster() && this.permission() === 'granted');
-        this.state = computed(() => {
-            if (this.needsIOSInstall())
-                return 'needs-install';
-            if (this.permission() === 'unsupported' || !this.isSupported()) {
-                // iOS standalone aún puede dar isSupported false temprano antes de init —
-                // solo bloqueamos si el browser explícitamente no soporta APIs.
-                if (this.permission() === 'unsupported')
-                    return 'unsupported';
-            }
-            const busy = this._busy();
-            if (busy === 'enabling')
-                return 'enabling';
-            if (busy === 'disabling')
-                return 'disabling';
-            if (this.isEnabled())
-                return 'enabled';
-            if (this.permission() === 'denied')
-                return 'blocked';
-            if (this._lastFailed())
-                return 'error';
-            return 'idle';
-        });
-        this.busyLabel = computed(() => {
-            const s = this.state();
-            if (s === 'enabling')
-                return this.tt('enabling');
-            if (s === 'disabling')
-                return this.tt('disabling');
-            return null;
-        });
-        this.contextMessage = computed(() => {
-            switch (this.state()) {
-                case 'unsupported':
-                    return this.tt('permissionUnsupported');
-                case 'blocked':
-                    return this.tt('permissionDeniedInfo');
-                case 'error':
-                    return this.tt('errorGeneric');
-                default:
-                    return null;
-            }
-        });
-        this.alertVariant = computed(() => {
-            const s = this.state();
-            if (s === 'error' || s === 'blocked')
-                return 'warning';
-            if (s === 'unsupported')
-                return 'danger';
-            return 'info';
-        });
-        this.alertIcon = computed(() => {
-            const s = this.state();
-            if (s === 'unsupported')
-                return 'close-circle-outline';
-            return 'alert-circle-outline';
-        });
-        this.toggleProps = computed(() => ({
-            control: this.toggleControl,
-            color: 'primary',
-            disabled: this._busy() !== null ||
-                this.state() === 'unsupported' ||
-                this.state() === 'needs-install' ||
-                this.state() === 'blocked',
-        }));
-        this.retryButtonProps = computed(() => ({
-            text: this.tt('retryCta'),
-            color: 'dark',
-            fill: 'outline',
-            size: 'default',
-            shape: 'round',
-            type: 'button',
-            icon: { name: 'refresh-outline', slot: 'start' },
-            state: this._busy() !== null ? ComponentStates.WORKING : ComponentStates.ENABLED,
-        }));
-        this.tokenPreview = computed(() => {
-            const t = this.currentToken();
-            if (!t)
-                return null;
-            return `${t.slice(0, 22)}…${t.slice(-6)}`;
-        });
-        const ns = this.ns;
-        if (!this.i18n.hasNamespace(ns)) {
-            this.i18n.registerContent(ns, NOTIFICATION_PREFERENCES_VIEW_I18N);
-        }
-        this.nav.setBackHeader('pageTitle', ns, { withMenu: true });
-        void this.refreshBrowserState();
-        // Re-aplicar header en cambio de idioma.
-        effect(() => {
-            this.i18n.lang();
-            this.nav.setBackHeader('pageTitle', this.ns, { withMenu: true });
-        }, { allowSignalWrites: true });
-        // Sync FormControl ←→ estado efectivo. Cuando el estado cambia (cambio de
-        // permission por el browser, o snapshot Firestore de `master`), el toggle se
-        // re-alinea con la realidad.
-        //
-        // IMPORTANTE: se ignoran los cambios mientras hay una operación en curso
-        // (`_busy() !== null`). Durante `onEnable`/`onDisable` las señales fuente se
-        // actualizan en momentos distintos y producirían estados intermedios →
-        // flicker visible. El toggle se re-alinea UNA sola vez en el `finally`.
-        effect(() => {
-            const eff = this.isEnabled();
-            if (this._busy() !== null)
-                return;
-            if (this.toggleControl.value !== eff) {
-                this.toggleControl.setValue(eff, { emitEvent: false });
-            }
-        }, { allowSignalWrites: true });
-        // Interceptar click del user: el toggle ya cambió visualmente, ejecutar
-        // la acción correspondiente.
-        this.toggleControl.valueChanges.subscribe(v => {
-            if (this._busy() !== null)
-                return;
-            if (v && !this.isEnabled()) {
-                void this.onEnable();
-            }
-            else if (!v && this.isEnabled()) {
-                void this.onDisable();
-            }
-        });
-        // Detectar regreso a la pestaña — el user pudo haber cambiado permisos
-        // desde la config del browser. El refresh va con debounce para no
-        // dispararse en ráfagas (en PWA mobile `focus` salta con cada cambio de
-        // app / aparición del teclado). El listener se remueve en ngOnDestroy.
-        if (typeof window !== 'undefined') {
-            window.addEventListener('focus', this.onWindowFocus);
-        }
-    }
-    /**
-     * Registra el pull-to-refresh estándar. Aunque esta vista no muestra una
-     * lista remota, sí refleja estado mutable del browser (permiso, token,
-     * soporte FCM) que puede cambiar fuera de la app — el refresh re-evalúa todo.
-     *
-     * Se usa `ngOnInit`/`ngOnDestroy` (NO `ionViewWillEnter`) porque
-     * `val-page-wrapper` usa `<router-outlet>` plano — los hooks `ionView*` solo
-     * disparan dentro de `<ion-router-outlet>`.
-     */
-    ngOnInit() {
-        this.pageRefresh.register(() => this.refreshBrowserState());
-    }
-    ngOnDestroy() {
-        this.pageRefresh.unregister();
-        if (typeof window !== 'undefined') {
-            window.removeEventListener('focus', this.onWindowFocus);
-        }
-        if (this.focusDebounceTimer !== null) {
-            clearTimeout(this.focusDebounceTimer);
-            this.focusDebounceTimer = null;
-        }
-    }
-    /** Refresca el estado del browser con debounce — evita ráfagas de `focus`. */
-    scheduleBrowserRefresh() {
-        if (this.focusDebounceTimer !== null) {
-            clearTimeout(this.focusDebounceTimer);
-        }
-        this.focusDebounceTimer = setTimeout(() => {
-            this.focusDebounceTimer = null;
-            void this.refreshBrowserState();
-        }, this.FOCUS_DEBOUNCE_MS);
-    }
-    // ---------------------------------------------------------------------------
-    // Actions
-    // ---------------------------------------------------------------------------
-    /**
-     * Secuencia completa de activación.
-     *
-     * Toda la mecánica (permission → SW ready → getToken con retry → watchdog de
-     * auto-reload) vive en `MessagingService.enable()` de la lib. El paso de
-     * registro del device en el backend se pasa como callback (`registerDevice`)
-     * porque la lib no puede depender de `AuthService` sin crear un ciclo.
-     *
-     * `enable()` no hace throw: resuelve con un `EnablePushResult` descriptivo.
-     */
-    async onEnable() {
-        this._busy.set('enabling');
-        this._lastFailed.set(false);
-        try {
-            const result = await this.messaging.enable({
-                registerDevice: token => this.auth.registerDevice(token).then(r => r.registered),
-            });
-            if (result.status === 'enabled') {
-                // Persistir flag master si aún no estaba activo.
-                if (!this.prefs.notificationsMaster()) {
-                    await this.prefs.setNotificationsMaster(true);
-                }
-                this.toast.show({
-                    message: this.tt('enableSuccess'),
-                    duration: 2000,
-                    color: 'dark',
-                    position: 'top',
-                });
-                this.resolvedConfig().onPushEnabled?.();
-            }
-            else if (result.status === 'timeout' && result.reloaded) {
-                // La lib disparó el auto-reload — la página está por recargarse.
-                return;
-            }
-            else {
-                // denied / unsupported / error / timeout sin reload → fallo recuperable.
-                this._lastFailed.set(true);
-                this.toast.show({
-                    message: this.tt('errorGeneric'),
-                    duration: 3000,
-                    color: 'dark',
-                    position: 'top',
-                });
-            }
-        }
-        catch {
-            // `enable()` no hace throw, pero el callback de registro sí puede.
-            this._lastFailed.set(true);
-            this.toast.show({
-                message: this.tt('errorGeneric'),
-                duration: 3000,
-                color: 'dark',
-                position: 'top',
-            });
-        }
-        finally {
-            // Único refresh final: re-alinea el toggle UNA sola vez con el estado real.
-            await this.refreshBrowserState();
-            this._busy.set(null);
-        }
-    }
-    async onDisable() {
-        this._busy.set('disabling');
-        this._lastFailed.set(false);
-        try {
-            await this.auth.disableNotifications();
-            if (this.prefs.notificationsMaster()) {
-                await this.prefs.setNotificationsMaster(false);
-            }
-            this.toast.show({
-                message: this.tt('disableSuccess'),
-                duration: 2000,
-                color: 'dark',
-                position: 'top',
-            });
-            this.resolvedConfig().onPushDisabled?.();
-        }
-        catch {
-            this._lastFailed.set(true);
-        }
-        finally {
-            await this.refreshBrowserState();
-            this._busy.set(null);
-        }
-    }
-    /** Reintentar la secuencia completa de activación, sin importar el estado actual. */
-    async onRetry() {
-        this._lastFailed.set(false);
-        await this.onEnable();
-    }
-    toggleDetails() {
-        this.showDetails.update(v => !v);
-    }
-    // ---------------------------------------------------------------------------
-    // Privados
-    // ---------------------------------------------------------------------------
-    async refreshBrowserState() {
-        this.isSupported.set(await this.messaging.isSupported());
-        this.permission.set(this.auth.getNotificationPermissionState());
-        this.currentToken.set(this.messaging.currentToken ?? null);
-        void this.repairTokenIfNeeded();
-    }
-    /**
-     * Repara el token FCM en background.
-     *
-     * Si el usuario tiene push activo (`master && granted`) pero no hay token en
-     * memoria — caso típico tras un cold start de la PWA — re-obtenemos el token
-     * y re-registramos el device sin tocar el toggle ni mostrar un error
-     * alarmista. El token es un detalle de implementación reparable, no parte del
-     * estado de UI (ver `isEnabled`).
-     */
-    async repairTokenIfNeeded() {
-        if (this._busy() !== null)
-            return;
-        if (this._repairingToken)
-            return;
-        if (!this.isEnabled())
-            return;
-        if (this.currentToken())
-            return;
-        this._repairingToken = true;
-        try {
-            const token = await this.messaging.getToken();
-            if (token) {
-                this.currentToken.set(token);
-                await this.auth.registerDevice(token);
+              color: 'dark',
+              bold: true,
+              content: tt('membersTitle'),
+            }"
+          />
+          <div class="section-body">
+            @if (membersLoading()) {
+              <val-skeleton-layout [props]="{ preset: 'list', rows: 3 }" />
+            } @else if (membersErrorState()) {
+              <val-empty-state [props]="membersErrorState()!" />
+            } @else if (members().length === 0) {
+              <val-text
+                [props]="{
+                  content: tt('membersEmpty'),
+                  size: 'medium',
+                  color: 'dark',
+                  bold: false,
+                }"
+              />
+            } @else {
+              <div class="members-list">
+                @for (m of visibleMembers(); track m.userId) {
+                  <val-member-card
+                    [attr.data-testid]="'org-member-' + m.userId"
+                    [props]="{
+                      id: m.userId,
+                      name: m.name,
+                      handle: m.handle,
+                      email: m.email,
+                      avatarUrl: m.avatar,
+                      roleLabel: m.roles[0] ? roleLabel(m.roles[0]) : '',
+                      actionAriaLabel: tt('viewMemberCta'),
+                    }"
+                    (onAction)="onViewMember(m)"
+                  />
+                }
+              </div>
+              @if (!showAllMembers() && members().length > 3) {
+                <button class="members-show-more" (click)="showAllMembers.set(true)">
+                  {{ tt('membersShowMore') }} ({{ members().length - 3 }})
+                </button>
+              }
+              @if (showAllMembers() && membersNextToken()) {
+                <button class="members-show-more" [disabled]="loadingMoreMembers()" (click)="loadMoreMembers()">
+                  {{ loadingMoreMembers() ? '…' : tt('membersShowMore') }}
+                </button>
+              }
             }
-        }
-        catch {
-            // Reparación best-effort: no degradamos el toggle ni mostramos error.
-        }
-        finally {
-            this._repairingToken = false;
-        }
-    }
-    /**
-     * iOS browser sin estar instalado como PWA — push web no disponible.
-     * Aplica a Safari y a Edge/Chrome/Firefox en iOS (todos WebKit por mandato Apple).
-     */
-    detectNeedsIOSInstall() {
-        if (typeof window === 'undefined' || typeof navigator === 'undefined') {
-            return false;
-        }
-        const ua = navigator.userAgent || '';
-        const isIOS = /iPad|iPhone|iPod/.test(ua);
-        if (!isIOS)
-            return false;
-        const isStandalone = window.matchMedia?.('(display-mode: standalone)').matches ||
-            navigator.standalone === true;
-        return !isStandalone;
-    }
-    tt(key) {
-        return this.i18n.t(key, this.ns);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationPreferencesViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NotificationPreferencesViewComponent, isStandalone: true, selector: "val-notification-preferences-view", inputs: { config: "config" }, ngImport: i0, template: `
-    <div class="page">
-      <header class="page-header">
-        <val-display [props]="{ size: 'small', color: 'dark', content: pageTitle() }" />
-        <val-title
-          [props]="{
-            size: 'large',
-            color: 'dark',
-            bold: false,
-            content: pageDescription(),
-          }"
-        />
-      </header>
+          </div>
+        </section>
+      }
 
-      @if (state() === 'needs-install') {
+      @if (resolvedConfig().showRoles) {
+        <!-- Roles y permisos: seccion explicativa, detalle en la ruta de permisos -->
         <section class="settings-section">
           <val-title
             [props]="{
               size: 'medium',
               color: 'dark',
               bold: true,
-              content: tt('iosInstallTitle'),
+              content: tt('rolesSectionTitle'),
             }"
           />
           <div class="section-body">
             <val-text
               [props]="{
-                size: 'small',
-                color: 'medium',
+                content: tt('rolesHint'),
+                size: 'medium',
+                color: 'dark',
                 bold: false,
-                content: tt('iosInstallHint'),
               }"
             />
-            <ol class="install-steps">
-              <li>{{ tt('iosInstallStep1') }}</li>
-              <li>{{ tt('iosInstallStep2') }}</li>
-              <li>{{ tt('iosInstallStep3') }}</li>
-              <li>{{ tt('iosInstallStep4') }}</li>
-            </ol>
+            <div class="row-actions">
+              <val-button [props]="viewPermissionsButtonProps()" (click)="onViewPermissions()" />
+            </div>
           </div>
         </section>
       }
 
-      <section class="settings-section">
-        <div class="notif-row">
-          <div class="notif-row__icon">
-            <ion-icon name="notifications-outline" aria-hidden="true" />
+      @if (resolvedConfig().showInvite) {
+        <!-- Invite: solo admin+ (gating RBAC interno) -->
+        <section *valHasPermission="'users:*'" class="settings-section" data-testid="org-invite-section">
+          <div class="invite-cta">
+            <div class="invite-cta__text">
+              <val-title
+                [props]="{
+                  size: 'medium',
+                  color: 'dark',
+                  bold: true,
+                  content: tt('inviteCtaTitle'),
+                }"
+              />
+              <val-text
+                [props]="{
+                  size: 'medium',
+                  color: 'dark',
+                  bold: false,
+                  content: tt('inviteCtaHint'),
+                }"
+              />
+            </div>
+            <div class="invite-cta__actions">
+              <val-button [props]="openInviteButtonProps()" (click)="onOpenInvite()" />
+              <val-button [props]="openImportButtonProps()" (click)="onOpenImport()" />
+            </div>
           </div>
-          <div class="notif-row__body">
-            <val-title
+        </section>
+      }
+
+      <!-- API Keys: sección propia. Integraciones M2M (import de miembros, etc.). -->
+      <section *valHasPermission="'api-keys:read'" class="settings-section" data-testid="org-apikeys-section">
+        <div class="invite-cta">
+          <div class="invite-cta__text">
+            <val-title [props]="{ size: 'medium', color: 'dark', bold: true, content: tt('apiKeysSectionTitle') }" />
+            <val-text [props]="{ size: 'medium', color: 'dark', bold: false, content: tt('apiKeysSectionHint') }" />
+            <button class="org-more-info-link" type="button" (click)="onApiKeysInfo()">
+              {{ tt('apiKeysMoreInfo') }}
+            </button>
+          </div>
+          <div class="invite-cta__actions">
+            <val-button [props]="openApiKeysButtonProps()" (click)="onOpenApiKeys()" />
+          </div>
+        </div>
+      </section>
+
+      @if (resolvedConfig().showTransferOwnership && isOwner()) {
+        <!-- Transfer ownership: solo owner (gating RBAC interno) -->
+        <section class="settings-section" data-testid="org-transfer-section">
+          <val-title
+            [props]="{
+              size: 'medium',
+              color: 'dark',
+              bold: true,
+              content: tt('transferTitle'),
+            }"
+          />
+          <div class="section-body">
+            <val-text
               [props]="{
+                content: tt('transferHint'),
                 size: 'medium',
                 color: 'dark',
-                bold: true,
-                content: tt('simpleTitle'),
-              }"
-            />
-            <val-text
-              [props]="{
-                size: 'small',
-                color: 'medium',
                 bold: false,
-                content: tt('simpleDescription'),
               }"
             />
-            @if (busyLabel(); as label) {
-              <span class="notif-row__busy">{{ label }}</span>
+            @if (transferableMembers().length > 0) {
+              <div class="row-actions">
+                <val-button [props]="transferButtonProps()" (click)="onOpenTransfer()" />
+              </div>
+            } @else {
+              <val-text
+                [props]="{
+                  content: tt('membersEmpty'),
+                  size: 'medium',
+                  color: 'dark',
+                  bold: false,
+                }"
+              />
             }
           </div>
-          <div class="notif-row__control">
-            <val-toggle-input [props]="toggleProps()" />
-          </div>
-        </div>
-
-        @if (contextMessage(); as msg) {
-          <div class="alert" [class]="'alert--' + alertVariant()">
-            <ion-icon [name]="alertIcon()" aria-hidden="true" />
-            <span>{{ msg }}</span>
-          </div>
-        }
-
-        @if (state() === 'error') {
-          <div class="row-actions">
-            <val-button [props]="retryButtonProps()" (click)="onRetry()" />
-          </div>
-        }
-      </section>
-
-      @if (resolvedConfig().showDetails && state() !== 'needs-install' && state() !== 'unsupported') {
-        <section class="settings-section">
-          <button class="details-toggle" type="button" (click)="toggleDetails()">
-            <span>{{ showDetails() ? tt('detailsHide') : tt('detailsShow') }}</span>
-            <ion-icon [name]="showDetails() ? 'chevron-up-outline' : 'chevron-down-outline'" aria-hidden="true" />
-          </button>
-          @if (showDetails()) {
-            <dl class="details">
-              <div class="details__row">
-                <dt>{{ tt('detailsToken') }}</dt>
-                <dd>{{ tokenPreview() ?? tt('detailsNone') }}</dd>
-              </div>
-              <div class="details__row">
-                <dt>{{ tt('diagnosticsPermission') }}</dt>
-                <dd>{{ permission() }}</dd>
-              </div>
-              <div class="details__row">
-                <dt>{{ tt('diagnosticsSupported') }}</dt>
-                <dd>{{ isSupported() ? '✓' : '✗' }}</dd>
-              </div>
-            </dl>
-          }
         </section>
       }
-    </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:8px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-body{margin-top:16px;display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.notif-row{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center}.notif-row__icon{width:44px;height:44px;border-radius:50%;background:var(--ion-color-light, rgba(0, 0, 0, .06));display:flex;align-items:center;justify-content:center}.notif-row__icon ion-icon{font-size:22px;color:var(--ion-color-dark, #1a1a1a)}.notif-row__body{display:flex;flex-direction:column;gap:4px;min-width:0}.notif-row__busy{font-size:12px;color:var(--ion-color-medium, #92949c);font-style:italic;margin-top:4px}.notif-row__control{flex-shrink:0}.alert{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.45;background:var(--ion-color-light, rgba(0, 0, 0, .04));color:var(--ion-color-dark, #1a1a1a)}.alert ion-icon{font-size:18px;flex-shrink:0;margin-top:1px}.alert--warning ion-icon{color:var(--ion-color-warning-shade, #c79e08)}.alert--danger ion-icon{color:var(--ion-color-danger-shade, #cf3c4f)}.alert--info ion-icon{color:var(--ion-color-medium, #6b6b6b)}.install-steps{margin:0;padding-left:20px;font-size:13px;line-height:1.6;color:var(--ion-color-dark, #1a1a1a)}.install-steps li+li{margin-top:4px}.details-toggle{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;font-size:13px;color:var(--ion-color-medium, #6b6b6b);cursor:pointer}.details-toggle ion-icon{font-size:14px}.details{margin:12px 0 0;display:flex;flex-direction:column;gap:6px}.details__row{display:grid;grid-template-columns:140px 1fr;gap:12px;font-size:12px;align-items:baseline}.details__row dt{margin:0;color:var(--ion-color-medium, #6b6b6b);text-transform:uppercase;letter-spacing:.4px;font-weight:500}.details__row dd{margin:0;color:var(--ion-color-dark, #1a1a1a);font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;word-break:break-all}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ToggleInputComponent, selector: "val-toggle-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationPreferencesViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-notification-preferences-view', standalone: true, imports: [IonIcon, ToggleInputComponent, ButtonComponent, DisplayComponent, TitleComponent, TextComponent], template: `
-    <div class="page">
-      <header class="page-header">
-        <val-display [props]="{ size: 'small', color: 'dark', content: pageTitle() }" />
-        <val-title
-          [props]="{
-            size: 'large',
-            color: 'dark',
-            bold: false,
-            content: pageDescription(),
-          }"
-        />
-      </header>
 
-      @if (state() === 'needs-install') {
+      @if (resolvedConfig().showLeave) {
+        <!-- Leave org -->
         <section class="settings-section">
           <val-title
             [props]="{
               size: 'medium',
               color: 'dark',
               bold: true,
-              content: tt('iosInstallTitle'),
+              content: tt('leaveTitle'),
             }"
           />
           <div class="section-body">
             <val-text
               [props]="{
-                size: 'small',
-                color: 'medium',
+                content: isOwner() ? tt('leaveOwnerHint') : tt('leaveHint'),
+                size: 'medium',
+                color: 'dark',
                 bold: false,
-                content: tt('iosInstallHint'),
               }"
             />
-            <ol class="install-steps">
-              <li>{{ tt('iosInstallStep1') }}</li>
-              <li>{{ tt('iosInstallStep2') }}</li>
-              <li>{{ tt('iosInstallStep3') }}</li>
-              <li>{{ tt('iosInstallStep4') }}</li>
-            </ol>
+            <div class="row-actions">
+              <val-button [props]="leaveButtonProps()" (click)="onLeave()" />
+            </div>
           </div>
         </section>
       }
 
-      <section class="settings-section">
-        <div class="notif-row">
-          <div class="notif-row__icon">
-            <ion-icon name="notifications-outline" aria-hidden="true" />
-          </div>
-          <div class="notif-row__body">
+      @if (isDebug) {
+        <section class="settings-section rbac-debug">
+          <div class="section-header-row">
             <val-title
               [props]="{
-                size: 'medium',
-                color: 'dark',
-                bold: true,
-                content: tt('simpleTitle'),
-              }"
-            />
-            <val-text
-              [props]="{
+                content: 'RBAC (live)',
                 size: 'small',
                 color: 'medium',
                 bold: false,
-                content: tt('simpleDescription'),
               }"
             />
-            @if (busyLabel(); as label) {
-              <span class="notif-row__busy">{{ label }}</span>
-            }
-          </div>
-          <div class="notif-row__control">
-            <val-toggle-input [props]="toggleProps()" />
           </div>
-        </div>
-
-        @if (contextMessage(); as msg) {
-          <div class="alert" [class]="'alert--' + alertVariant()">
-            <ion-icon [name]="alertIcon()" aria-hidden="true" />
-            <span>{{ msg }}</span>
-          </div>
-        }
-
-        @if (state() === 'error') {
-          <div class="row-actions">
-            <val-button [props]="retryButtonProps()" (click)="onRetry()" />
+          <div class="rbac-debug__body">
+            <div class="rbac-debug__row">
+              <span class="rbac-debug__label">Roles</span>
+              <span class="rbac-debug__value">{{ auth.roles().join(', ') || '—' }}</span>
+            </div>
+            <div class="rbac-debug__row">
+              <span class="rbac-debug__label">Permisos</span>
+              <span class="rbac-debug__value rbac-debug__value--perms">{{ auth.permissions().join(', ') || '—' }}</span>
+            </div>
           </div>
-        }
-      </section>
-
-      @if (resolvedConfig().showDetails && state() !== 'needs-install' && state() !== 'unsupported') {
-        <section class="settings-section">
-          <button class="details-toggle" type="button" (click)="toggleDetails()">
-            <span>{{ showDetails() ? tt('detailsHide') : tt('detailsShow') }}</span>
-            <ion-icon [name]="showDetails() ? 'chevron-up-outline' : 'chevron-down-outline'" aria-hidden="true" />
-          </button>
-          @if (showDetails()) {
-            <dl class="details">
-              <div class="details__row">
-                <dt>{{ tt('detailsToken') }}</dt>
-                <dd>{{ tokenPreview() ?? tt('detailsNone') }}</dd>
-              </div>
-              <div class="details__row">
-                <dt>{{ tt('diagnosticsPermission') }}</dt>
-                <dd>{{ permission() }}</dd>
-              </div>
-              <div class="details__row">
-                <dt>{{ tt('diagnosticsSupported') }}</dt>
-                <dd>{{ isSupported() ? '✓' : '✗' }}</dd>
-              </div>
-            </dl>
-          }
         </section>
       }
+      <val-permissions-modal
+        [isOpen]="permissionsOpen()"
+        [config]="{ i18nNamespace: resolvedConfig().i18nNamespace }"
+        (dismissed)="permissionsOpen.set(false)"
+      />
     </div>
-  `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:8px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-body{margin-top:16px;display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.notif-row{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center}.notif-row__icon{width:44px;height:44px;border-radius:50%;background:var(--ion-color-light, rgba(0, 0, 0, .06));display:flex;align-items:center;justify-content:center}.notif-row__icon ion-icon{font-size:22px;color:var(--ion-color-dark, #1a1a1a)}.notif-row__body{display:flex;flex-direction:column;gap:4px;min-width:0}.notif-row__busy{font-size:12px;color:var(--ion-color-medium, #92949c);font-style:italic;margin-top:4px}.notif-row__control{flex-shrink:0}.alert{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.45;background:var(--ion-color-light, rgba(0, 0, 0, .04));color:var(--ion-color-dark, #1a1a1a)}.alert ion-icon{font-size:18px;flex-shrink:0;margin-top:1px}.alert--warning ion-icon{color:var(--ion-color-warning-shade, #c79e08)}.alert--danger ion-icon{color:var(--ion-color-danger-shade, #cf3c4f)}.alert--info ion-icon{color:var(--ion-color-medium, #6b6b6b)}.install-steps{margin:0;padding-left:20px;font-size:13px;line-height:1.6;color:var(--ion-color-dark, #1a1a1a)}.install-steps li+li{margin-top:4px}.details-toggle{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;font-size:13px;color:var(--ion-color-medium, #6b6b6b);cursor:pointer}.details-toggle ion-icon{font-size:14px}.details{margin:12px 0 0;display:flex;flex-direction:column;gap:6px}.details__row{display:grid;grid-template-columns:140px 1fr;gap:12px;font-size:12px;align-items:baseline}.details__row dt{margin:0;color:var(--ion-color-medium, #6b6b6b);text-transform:uppercase;letter-spacing:.4px;font-weight:500}.details__row dd{margin:0;color:var(--ion-color-dark, #1a1a1a);font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;word-break:break-all}\n"] }]
+  `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }] } });
 
 /**
- * Helper para montar las **preferencias de notificaciones push**
- * (`val-notification-preferences-view`) como ruta en una app del factory. El
- * `config` se pasa por route `data` (`notificationPreferencesConfig`) y el
- * componente lo lee como fallback de su `@Input() config`.
- *
- * No confundir con `provideValtechNotificationsRoutes` (el inbox / feed).
+ * Helper para montar la vista Gestión de organización (`val-organization-view`)
+ * como ruta en una app del factory. El `config` se pasa por route `data`
+ * (`organizationConfig`) y el componente lo lee como fallback de su
+ * `@Input() config`.
  *
  * @example
  * ```ts
- * // app.routes.ts (típicamente bajo settings)
+ * // settings.routes.ts
  * export const settingsRoutes: Routes = [
- *   ...provideValtechNotificationPreferencesRoutes(),       // → notifications
+ *   ...provideValtechOrganizationRoutes(),                 // → /app/settings/organization
+ *   { path: 'preferences', loadComponent: () => ... },
  * ];
  *
  * // con config acotada:
- * ...provideValtechNotificationPreferencesRoutes({ config: { showDetails: false } }),
- * ...provideValtechNotificationPreferencesRoutes({ path: 'push' }),
+ * ...provideValtechOrganizationRoutes({ config: { showLeave: false } }),
+ * ...provideValtechOrganizationRoutes({ config: { viewPermissionsRoute: '/app/roles' } }),
  * ```
  */
-function provideValtechNotificationPreferencesRoutes(opts) {
+function provideValtechOrganizationRoutes(opts) {
     return [
         {
-            path: opts?.path ?? 'notifications',
-            component: NotificationPreferencesViewComponent,
-            data: { notificationPreferencesConfig: opts?.config },
+            path: opts?.path ?? 'organization',
+            component: OrganizationViewComponent,
+            data: { organizationConfig: opts?.config },
         },
     ];
 }
 
 /**
- * Defaults i18n (es/en) embebidos en `val-permissions-view`. Auto-registrados en
- * el constructor del componente si el consumer no proveyó el namespace
- * (`Settings.Permissions` por default). SOLO incluye las keys que la vista usa.
+ * Defaults i18n (es/en) embebidos en `val-notification-preferences-view`.
+ * Auto-registrados en el constructor del componente si el consumer no proveyó
+ * el namespace (`Settings.Notifications` por default). SOLO incluye las keys que
+ * la vista usa.
  *
- * Portado EXACTO de `PERMISSIONS_I18N` (showcase) bajo el proceso de ADR-021.
+ * Portado del override `Settings.Notifications` (showcase) bajo el proceso de
+ * ADR-021.
  */
-const PERMISSIONS_VIEW_I18N = {
+const NOTIFICATION_PREFERENCES_VIEW_I18N = {
     es: {
-        pageTitle: 'Permisos',
-        pageDescription: 'Roles y permisos de esta app en la organización activa',
-        systemRolesTitle: 'Roles del sistema',
-        systemRolesHint: 'Predefinidos por la plataforma. No editables.',
-        customRolesTitle: 'Roles personalizados',
-        customRolesHint: 'Definidos por tu organización.',
-        systemBadge: 'Sistema',
-        noCustomRoles: 'Esta organización no tiene roles personalizados.',
-        noPermissions: 'Sin permisos asignados.',
-        // Grupos de alcance
-        groupApp: 'Permisos de la app',
-        groupOrg: 'Permisos de la organización',
-        groupPlatform: 'Permisos de plataforma',
-        groupOther: 'Otras apps',
-        // Roles del sistema
-        roleViewer: 'Visor',
-        roleEditor: 'Editor',
-        roleAdmin: 'Administrador',
-        roleSuperAdmin: 'Super Administrador',
-        roleBingoAdmin: 'Bingo · Administrador',
-        roleBingoTesorero: 'Bingo · Tesorero',
-        roleBingoTaquilla: 'Bingo · Taquilla',
-        roleBingoOperator: 'Bingo · Operador',
-        // Apps
-        app_showcase: 'Showcase',
-        app_bingo: 'Bingo',
-        // Recursos
-        permUsers: 'Usuarios',
-        permRoles: 'Roles',
-        permRbac: 'Control de acceso',
-        permApps: 'Apps',
-        'permApi-keys': 'API keys',
-        'permEmail-logs': 'Logs de correo',
-        'permSms-logs': 'Logs de SMS',
-        permDocuments: 'Documentos',
-        permMedia: 'Media',
-        permTemplates: 'Plantillas',
-        permRequests: 'Solicitudes',
-        permBingo: 'Bingo',
-        // Acciones
-        permRead: 'Leer',
-        permWrite: 'Escribir',
-        permCreate: 'Crear',
-        permDelete: 'Eliminar',
-        permManage: 'Gestionar',
-        permEdit: 'Editar',
-        permSell: 'Vender',
-        permCheckin: 'Canjear',
-        permSettle: 'Rendir',
-        permExport: 'Exportar',
-        permOperate: 'Operar',
-        permAll: 'Todo',
-        // Loading / error
-        errorTitle: 'Error al cargar permisos',
-        retry: 'Reintentar',
-    },
-    en: {
-        pageTitle: 'Permissions',
-        pageDescription: 'Roles and permissions of this app in the active organization',
-        systemRolesTitle: 'System roles',
-        systemRolesHint: 'Defined by the platform. Not editable.',
-        customRolesTitle: 'Custom roles',
-        customRolesHint: 'Defined by your organization.',
-        systemBadge: 'System',
-        noCustomRoles: 'This organization has no custom roles.',
-        noPermissions: 'No permissions assigned.',
-        groupApp: 'App permissions',
-        groupOrg: 'Organization permissions',
-        groupPlatform: 'Platform permissions',
-        groupOther: 'Other apps',
-        roleViewer: 'Viewer',
-        roleEditor: 'Editor',
-        roleAdmin: 'Administrator',
-        roleSuperAdmin: 'Super Administrator',
-        roleBingoAdmin: 'Bingo · Administrator',
-        roleBingoTesorero: 'Bingo · Treasurer',
-        roleBingoTaquilla: 'Bingo · Box office',
-        roleBingoOperator: 'Bingo · Operator',
-        app_showcase: 'Showcase',
-        app_bingo: 'Bingo',
-        permUsers: 'Users',
-        permRoles: 'Roles',
-        permRbac: 'Access control',
-        permApps: 'Apps',
-        'permApi-keys': 'API keys',
-        'permEmail-logs': 'Email logs',
-        'permSms-logs': 'SMS logs',
-        permDocuments: 'Documents',
-        permMedia: 'Media',
-        permTemplates: 'Templates',
-        permRequests: 'Requests',
-        permBingo: 'Bingo',
-        permRead: 'Read',
-        permWrite: 'Write',
-        permCreate: 'Create',
-        permDelete: 'Delete',
-        permManage: 'Manage',
-        permEdit: 'Edit',
-        permSell: 'Sell',
-        permCheckin: 'Check-in',
-        permSettle: 'Settle',
-        permExport: 'Export',
-        permOperate: 'Operate',
-        permAll: 'All',
-        errorTitle: 'Error loading permissions',
-        retry: 'Retry',
+        pageTitle: 'Notificaciones',
+        pageDescription: 'Configura como quieres recibir notificaciones',
+        // Control principal (UX simplificado)
+        simpleTitle: 'Notificaciones push en este dispositivo',
+        simpleDescription: 'Recibe alertas en tiempo real incluso con la app cerrada.',
+        enabling: 'Activando…',
+        disabling: 'Desactivando…',
+        enabled: 'Activadas',
+        errorGeneric: 'No pudimos completar la configuración. Verifica los permisos del navegador y reintenta.',
+        retryCta: 'Reintentar',
+        // Mensajes contextuales
+        permissionUnsupported: 'Tu navegador no soporta notificaciones push.',
+        permissionDeniedInfo: 'Tu navegador esta bloqueando las notificaciones. Para habilitarlas, ve a la configuracion del sitio y permitelas manualmente.',
+        // iOS PWA install
+        iosInstallTitle: 'En iOS, instala la app para recibir notificaciones',
+        iosInstallHint: 'Las notificaciones push en iOS (iPhone/iPad) solo funcionan cuando la app está instalada en la pantalla de inicio. Edge, Chrome y Firefox en iOS comparten esta limitación.',
+        iosInstallStep1: 'Abre este sitio en Safari (no en Chrome/Edge).',
+        iosInstallStep2: 'Toca el botón Compartir (□ con flecha hacia arriba).',
+        iosInstallStep3: "Elige 'Añadir a pantalla de inicio'.",
+        iosInstallStep4: 'Abre la app desde el ícono recién creado y vuelve aquí.',
+        // Detalles técnicos (expandible)
+        detailsShow: 'Ver detalles técnicos',
+        detailsHide: 'Ocultar detalles',
+        detailsToken: 'Token',
+        detailsNone: 'Sin registrar',
+        diagnosticsPermission: 'Permiso del navegador',
+        diagnosticsSupported: 'Soporte del navegador',
+        // Toasts
+        enableSuccess: 'Notificaciones habilitadas',
+        disableSuccess: 'Notificaciones deshabilitadas',
+    },
+    en: {
+        pageTitle: 'Notifications',
+        pageDescription: 'Configure how you want to receive notifications',
+        simpleTitle: 'Push notifications on this device',
+        simpleDescription: 'Get real-time alerts even when the app is closed.',
+        enabling: 'Enabling…',
+        disabling: 'Disabling…',
+        enabled: 'Enabled',
+        errorGeneric: "We couldn't complete the setup. Check your browser permissions and retry.",
+        retryCta: 'Retry',
+        permissionUnsupported: 'Your browser does not support push notifications.',
+        permissionDeniedInfo: 'Your browser is blocking notifications. To enable them, go to site settings and allow them manually.',
+        iosInstallTitle: 'On iOS, install the app to receive notifications',
+        iosInstallHint: 'Push notifications on iOS (iPhone/iPad) only work when the app is installed on the Home Screen. Edge, Chrome and Firefox on iOS share this limitation.',
+        iosInstallStep1: 'Open this site in Safari (not Chrome/Edge).',
+        iosInstallStep2: 'Tap the Share button (□ with an up arrow).',
+        iosInstallStep3: "Choose 'Add to Home Screen'.",
+        iosInstallStep4: 'Open the app from the new icon and come back here.',
+        detailsShow: 'View technical details',
+        detailsHide: 'Hide details',
+        detailsToken: 'Token',
+        detailsNone: 'Not registered',
+        diagnosticsPermission: 'Browser permission',
+        diagnosticsSupported: 'Browser support',
+        enableSuccess: 'Notifications enabled',
+        disableSuccess: 'Notifications disabled',
     },
 };
 
-const DEFAULT_NAMESPACE$5 = 'Settings.Permissions';
+addIcons({
+    alertCircleOutline,
+    chevronDownOutline,
+    chevronUpOutline,
+    closeCircleOutline,
+    notificationsOffOutline,
+    notificationsOutline,
+    refreshOutline,
+});
+const DEFAULT_NAMESPACE$5 = 'Settings.Notifications';
 /**
- * `val-permissions-view` — vista Permisos full-feature autocontenida (organism).
- * Visor RBAC de solo lectura: muestra los roles del sistema (Visor/Editor/Admin +
- * roles de plataforma) y los roles personalizados de la org activa, con el
- * catálogo de permisos agrupado por alcance (app actual / plataforma / otras apps).
- * Promovida desde `showcase` bajo el proceso de ADR-021.
+ * `val-notification-preferences-view` — **preferencias de notificaciones push**
+ * (FCM) full-feature autocontenida (organism). Promovida desde `showcase` bajo el
+ * proceso de ADR-021.
  *
- * **RBAC interno** (como `organization-view`): lee la org activa vía
- * `AuthService.user().activeOrgId`. La vista NO muta nada — el control de quién
- * puede verla es responsabilidad del guard de ruta del consumer; no hay gating
- * fino interno ni se expone como config.
+ * Separada de `val-notifications-view` (el inbox / feed). Aquí el user **activa o
+ * desactiva** las notificaciones push en este dispositivo.
  *
- * Datos: `forkJoin` de `OrgService.listOrgRoles(orgId)` (roles de la org) +
- * `PermissionCatalogService.getCatalog(orgId)` (catálogo + appId actual). El
- * catálogo define el alcance (`scope`/`appId`) de cada recurso para agrupar.
+ * UX simplificado: UN solo toggle que ejecuta toda la secuencia (pedir permiso →
+ * SW ready → getToken → registrar en backend → set master pref) vía
+ * `MessagingService.enable()`. El registro del device en el backend va como
+ * callback (la lib no depende de `AuthService` para evitar ciclos). Mensajes
+ * contextuales y botón "Reintentar" aparecen solo cuando aplican.
  *
  * NO renderiza ion-content — vive dentro de val-page-wrapper. `ActivatedRoute` se
- * inyecta `{ optional: true }` solo para leer el route data de config. Auto-registra
- * sus defaults i18n (es/en) si el consumer no proveyó el namespace (default
- * `Settings.Permissions`).
+ * inyecta `{ optional: true }` → funciona sin router (embebida / Storybook).
  */
-class PermissionsViewComponent {
+class NotificationPreferencesViewComponent {
     /** Namespace i18n resuelto (capturado para llamadas no-reactivas). */
     get ns() {
         return this.resolvedConfig().i18nNamespace;
     }
+    // ---------------------------------------------------------------------------
+    // Lifecycle
+    // ---------------------------------------------------------------------------
     constructor() {
+        this.nav = inject(NavigationService);
         this.i18n = inject(I18nService);
-        this.orgService = inject(OrgService);
-        this.catalog = inject(PermissionCatalogService);
+        this.toast = inject(ToastService);
         this.auth = inject(AuthService);
-        this.nav = inject(NavigationService);
+        this.messaging = inject(MessagingService);
+        this.pageRefresh = inject(PageRefreshService);
+        this.prefs = inject(PreferencesService);
+        // `ActivatedRoute` opcional → la vista funciona embebida / en Storybook sin
+        // router (solo lo usa para leer el route data de config como fallback).
         this.route = inject(ActivatedRoute, { optional: true });
         this.resolvedConfig = computed(() => {
-            const fromRoute = (this.route?.snapshot.data['permissionsConfig'] ?? {});
+            const fromRoute = (this.route?.snapshot.data['notificationPreferencesConfig'] ??
+                {});
             const merged = { ...fromRoute, ...(this.config ?? {}) };
             return {
-                showSystemRoles: merged.showSystemRoles ?? true,
-                showCustomRoles: merged.showCustomRoles ?? true,
+                showDetails: merged.showDetails ?? true,
                 i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$5,
+                onPushEnabled: merged.onPushEnabled,
+                onPushDisabled: merged.onPushDisabled,
             };
         });
-        this.loading = signal(false);
-        this.loadError = signal(null);
-        this.roles = signal([]);
-        this.systemRoles = computed(() => this.roles().filter(r => r.isSystem));
-        this.customRoles = computed(() => this.roles().filter(r => !r.isSystem));
-        this.activeOrgId = computed(() => {
-            const u = this.auth.user();
-            return u?.activeOrgId ?? u?.activeOrg ?? '';
+        /** Operación en curso (gobierna spinner del toggle + label "Activando…"). */
+        this._busy = signal(null);
+        /** True si el último intento falló — gobierna estado `error` + retry button. */
+        this._lastFailed = signal(false);
+        /** True mientras se re-obtiene el token FCM en background (no afecta la UI). */
+        this._repairingToken = false;
+        /** Toggle del expand de detalles técnicos. */
+        this.showDetails = signal(false);
+        this.permission = signal('default');
+        this.isSupported = signal(false);
+        this.currentToken = signal(null);
+        this.needsIOSInstall = signal(this.detectNeedsIOSInstall());
+        /** FormControl del toggle (sync-eado con `isEnabled` via effect). */
+        this.toggleControl = new FormControl(false, {
+            nonNullable: true,
+        });
+        /** Handler del listener `focus` — referencia guardada para poder removerlo. */
+        this.onWindowFocus = () => this.scheduleBrowserRefresh();
+        /** Timer del debounce del refresh disparado por `focus`. */
+        this.focusDebounceTimer = null;
+        /** Ventana de debounce (ms) para el refresh disparado por `focus`. */
+        this.FOCUS_DEBOUNCE_MS = 500;
+        // ---------------------------------------------------------------------------
+        // Estado derivado
+        // ---------------------------------------------------------------------------
+        this.pageTitle = computed(() => this.tt('pageTitle'));
+        this.pageDescription = computed(() => this.tt('pageDescription'));
+        /**
+         * Estado efectivo del toggle: "el usuario tiene push activo".
+         *
+         * Se deriva SOLO de la decisión del usuario (`master`) y del permiso del SO
+         * (`permission`). El token FCM NO forma parte del estado de UI: vive en
+         * memoria, se pierde en cada recarga/suspensión de la PWA y produciría flicker.
+         * Si falta token con `master && granted`, es un detalle reparable en
+         * background (ver `repairTokenIfNeeded`), no un cambio del toggle.
+         */
+        this.isEnabled = computed(() => this.prefs.notificationsMaster() && this.permission() === 'granted');
+        this.state = computed(() => {
+            if (this.needsIOSInstall())
+                return 'needs-install';
+            if (this.permission() === 'unsupported' || !this.isSupported()) {
+                // iOS standalone aún puede dar isSupported false temprano antes de init —
+                // solo bloqueamos si el browser explícitamente no soporta APIs.
+                if (this.permission() === 'unsupported')
+                    return 'unsupported';
+            }
+            const busy = this._busy();
+            if (busy === 'enabling')
+                return 'enabling';
+            if (busy === 'disabling')
+                return 'disabling';
+            if (this.isEnabled())
+                return 'enabled';
+            if (this.permission() === 'denied')
+                return 'blocked';
+            if (this._lastFailed())
+                return 'error';
+            return 'idle';
+        });
+        this.busyLabel = computed(() => {
+            const s = this.state();
+            if (s === 'enabling')
+                return this.tt('enabling');
+            if (s === 'disabling')
+                return this.tt('disabling');
+            return null;
+        });
+        this.contextMessage = computed(() => {
+            switch (this.state()) {
+                case 'unsupported':
+                    return this.tt('permissionUnsupported');
+                case 'blocked':
+                    return this.tt('permissionDeniedInfo');
+                case 'error':
+                    return this.tt('errorGeneric');
+                default:
+                    return null;
+            }
+        });
+        this.alertVariant = computed(() => {
+            const s = this.state();
+            if (s === 'error' || s === 'blocked')
+                return 'warning';
+            if (s === 'unsupported')
+                return 'danger';
+            return 'info';
+        });
+        this.alertIcon = computed(() => {
+            const s = this.state();
+            if (s === 'unsupported')
+                return 'close-circle-outline';
+            return 'alert-circle-outline';
         });
+        this.toggleProps = computed(() => ({
+            control: this.toggleControl,
+            color: 'primary',
+            disabled: this._busy() !== null ||
+                this.state() === 'unsupported' ||
+                this.state() === 'needs-install' ||
+                this.state() === 'blocked',
+        }));
         this.retryButtonProps = computed(() => ({
-            text: this.tt('retry'),
+            text: this.tt('retryCta'),
             color: 'dark',
             fill: 'outline',
             size: 'default',
+            shape: 'round',
             type: 'button',
-            state: this.loading() ? ComponentStates.DISABLED : ComponentStates.ENABLED,
+            icon: { name: 'refresh-outline', slot: 'start' },
+            state: this._busy() !== null ? ComponentStates.WORKING : ComponentStates.ENABLED,
         }));
+        this.tokenPreview = computed(() => {
+            const t = this.currentToken();
+            if (!t)
+                return null;
+            return `${t.slice(0, 22)}…${t.slice(-6)}`;
+        });
         const ns = this.ns;
         if (!this.i18n.hasNamespace(ns)) {
-            this.i18n.registerContent(ns, PERMISSIONS_VIEW_I18N);
+            this.i18n.registerContent(ns, NOTIFICATION_PREFERENCES_VIEW_I18N);
         }
         this.nav.setBackHeader('pageTitle', ns, { withMenu: true });
-        this.load();
-        connectPageRefresh(() => this.load());
-    }
-    load() {
-        const orgId = this.activeOrgId();
-        if (!orgId)
-            return;
-        this.loading.set(true);
-        this.loadError.set(null);
-        forkJoin({
-            roles: this.orgService.listOrgRoles(orgId),
-            catalog: this.catalog.getCatalog(orgId),
-        }).subscribe({
-            next: ({ roles: rawRoles, catalog }) => {
-                const byResource = new Map();
-                for (const r of catalog.permissions)
-                    byResource.set(r.resource, r);
-                const currentAppId = catalog.appId;
-                // Labeler con la SSOT del backend (labels del catálogo) — reemplaza el
-                // mapa hardcodeado `perm*`. Locale del momento de carga (igual que antes:
-                // los labels se hornean en el RoleView; cambio de idioma requiere reload).
-                const labeler = createPermissionLabeler(catalog, this.i18n.lang(), {
-                    allLabel: this.tt('permAll'),
-                });
-                this.roles.set((rawRoles ?? []).map((r) => this.buildRoleView({
-                    id: r.id,
-                    name: r.name,
-                    description: r.description,
-                    permissions: r.permissions ?? [],
-                    isSystem: r.isSystem ?? false,
-                }, byResource, currentAppId, labeler)));
-                this.loading.set(false);
-            },
-            error: err => {
-                this.loadError.set(err);
-                this.loading.set(false);
-            },
+        void this.refreshBrowserState();
+        // Re-aplicar header en cambio de idioma.
+        effect(() => {
+            this.i18n.lang();
+            this.nav.setBackHeader('pageTitle', this.ns, { withMenu: true });
+        }, { allowSignalWrites: true });
+        // Sync FormControl ←→ estado efectivo. Cuando el estado cambia (cambio de
+        // permission por el browser, o snapshot Firestore de `master`), el toggle se
+        // re-alinea con la realidad.
+        //
+        // IMPORTANTE: se ignoran los cambios mientras hay una operación en curso
+        // (`_busy() !== null`). Durante `onEnable`/`onDisable` las señales fuente se
+        // actualizan en momentos distintos y producirían estados intermedios →
+        // flicker visible. El toggle se re-alinea UNA sola vez en el `finally`.
+        effect(() => {
+            const eff = this.isEnabled();
+            if (this._busy() !== null)
+                return;
+            if (this.toggleControl.value !== eff) {
+                this.toggleControl.setValue(eff, { emitEvent: false });
+            }
+        }, { allowSignalWrites: true });
+        // Interceptar click del user: el toggle ya cambió visualmente, ejecutar
+        // la acción correspondiente.
+        this.toggleControl.valueChanges.subscribe(v => {
+            if (this._busy() !== null)
+                return;
+            if (v && !this.isEnabled()) {
+                void this.onEnable();
+            }
+            else if (!v && this.isEnabled()) {
+                void this.onDisable();
+            }
         });
+        // Detectar regreso a la pestaña — el user pudo haber cambiado permisos
+        // desde la config del browser. El refresh va con debounce para no
+        // dispararse en ráfagas (en PWA mobile `focus` salta con cada cambio de
+        // app / aparición del teclado). El listener se remueve en ngOnDestroy.
+        if (typeof window !== 'undefined') {
+            window.addEventListener('focus', this.onWindowFocus);
+        }
     }
-    buildRoleView(role, byResource, currentAppId, labeler) {
-        const appPerms = [];
-        const orgPerms = [];
-        const otherByApp = new Map();
-        for (const perm of role.permissions) {
-            const [resource] = perm.split(':');
-            const entry = byResource.get(resource);
-            // Sin entrada en el catálogo (el backend omite los recursos internal para
-            // no-platform-admins) o entrada internal → NUNCA se muestra a nivel de
-            // producto. Defensa en profundidad junto al filtro del backend (ADR-024).
-            // Nota: el rol puede traer el permiso aunque el recurso esté filtrado del
-            // catálogo (ej. admin tiene templates:*); por eso se descarta lo no resuelto.
-            if (!entry || entry.scope === 'internal') {
-                continue;
-            }
-            const label = labeler(perm);
-            if (entry.scope === 'app') {
-                if (entry.appId === currentAppId) {
-                    appPerms.push(label);
-                }
-                else {
-                    const appId = entry.appId ?? '?';
-                    const arr = otherByApp.get(appId) ?? [];
-                    arr.push(label);
-                    otherByApp.set(appId, arr);
+    /**
+     * Registra el pull-to-refresh estándar. Aunque esta vista no muestra una
+     * lista remota, sí refleja estado mutable del browser (permiso, token,
+     * soporte FCM) que puede cambiar fuera de la app — el refresh re-evalúa todo.
+     *
+     * Se usa `ngOnInit`/`ngOnDestroy` (NO `ionViewWillEnter`) porque
+     * `val-page-wrapper` usa `<router-outlet>` plano — los hooks `ionView*` solo
+     * disparan dentro de `<ion-router-outlet>`.
+     */
+    ngOnInit() {
+        this.pageRefresh.register(() => this.refreshBrowserState());
+    }
+    ngOnDestroy() {
+        this.pageRefresh.unregister();
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('focus', this.onWindowFocus);
+        }
+        if (this.focusDebounceTimer !== null) {
+            clearTimeout(this.focusDebounceTimer);
+            this.focusDebounceTimer = null;
+        }
+    }
+    /** Refresca el estado del browser con debounce — evita ráfagas de `focus`. */
+    scheduleBrowserRefresh() {
+        if (this.focusDebounceTimer !== null) {
+            clearTimeout(this.focusDebounceTimer);
+        }
+        this.focusDebounceTimer = setTimeout(() => {
+            this.focusDebounceTimer = null;
+            void this.refreshBrowserState();
+        }, this.FOCUS_DEBOUNCE_MS);
+    }
+    // ---------------------------------------------------------------------------
+    // Actions
+    // ---------------------------------------------------------------------------
+    /**
+     * Secuencia completa de activación.
+     *
+     * Toda la mecánica (permission → SW ready → getToken con retry → watchdog de
+     * auto-reload) vive en `MessagingService.enable()` de la lib. El paso de
+     * registro del device en el backend se pasa como callback (`registerDevice`)
+     * porque la lib no puede depender de `AuthService` sin crear un ciclo.
+     *
+     * `enable()` no hace throw: resuelve con un `EnablePushResult` descriptivo.
+     */
+    async onEnable() {
+        this._busy.set('enabling');
+        this._lastFailed.set(false);
+        try {
+            const result = await this.messaging.enable({
+                registerDevice: token => this.auth.registerDevice(token).then(r => r.registered),
+            });
+            if (result.status === 'enabled') {
+                // Persistir flag master si aún no estaba activo.
+                if (!this.prefs.notificationsMaster()) {
+                    await this.prefs.setNotificationsMaster(true);
                 }
+                this.toast.show({
+                    message: this.tt('enableSuccess'),
+                    duration: 2000,
+                    color: 'dark',
+                    position: 'top',
+                });
+                this.resolvedConfig().onPushEnabled?.();
+            }
+            else if (result.status === 'timeout' && result.reloaded) {
+                // La lib disparó el auto-reload — la página está por recargarse.
+                return;
             }
             else {
-                // scope === 'org' → gestión de la organización del cliente
-                orgPerms.push(label);
+                // denied / unsupported / error / timeout sin reload → fallo recuperable.
+                this._lastFailed.set(true);
+                this.toast.show({
+                    message: this.tt('errorGeneric'),
+                    duration: 3000,
+                    color: 'dark',
+                    position: 'top',
+                });
             }
         }
-        const groups = [];
-        if (appPerms.length) {
-            groups.push({ key: 'app', label: this.tt('groupApp'), perms: appPerms });
-        }
-        if (orgPerms.length) {
-            groups.push({
-                key: 'org',
-                label: this.tt('groupOrg'),
-                perms: orgPerms,
+        catch {
+            // `enable()` no hace throw, pero el callback de registro sí puede.
+            this._lastFailed.set(true);
+            this.toast.show({
+                message: this.tt('errorGeneric'),
+                duration: 3000,
+                color: 'dark',
+                position: 'top',
             });
         }
-        for (const [appId, perms] of otherByApp) {
-            groups.push({
-                key: `other:${appId}`,
-                label: `${this.tt('groupOther')}: ${this.appLabel(appId)}`,
-                perms,
+        finally {
+            // Único refresh final: re-alinea el toggle UNA sola vez con el estado real.
+            await this.refreshBrowserState();
+            this._busy.set(null);
+        }
+    }
+    async onDisable() {
+        this._busy.set('disabling');
+        this._lastFailed.set(false);
+        try {
+            await this.auth.disableNotifications();
+            if (this.prefs.notificationsMaster()) {
+                await this.prefs.setNotificationsMaster(false);
+            }
+            this.toast.show({
+                message: this.tt('disableSuccess'),
+                duration: 2000,
+                color: 'dark',
+                position: 'top',
             });
+            this.resolvedConfig().onPushDisabled?.();
         }
-        return {
-            id: role.id,
-            name: role.name,
-            description: role.description,
-            isSystem: role.isSystem,
-            groups,
-            hasPerms: groups.length > 0,
-        };
+        catch {
+            this._lastFailed.set(true);
+        }
+        finally {
+            await this.refreshBrowserState();
+            this._busy.set(null);
+        }
+    }
+    /** Reintentar la secuencia completa de activación, sin importar el estado actual. */
+    async onRetry() {
+        this._lastFailed.set(false);
+        await this.onEnable();
+    }
+    toggleDetails() {
+        this.showDetails.update(v => !v);
+    }
+    // ---------------------------------------------------------------------------
+    // Privados
+    // ---------------------------------------------------------------------------
+    async refreshBrowserState() {
+        this.isSupported.set(await this.messaging.isSupported());
+        this.permission.set(this.auth.getNotificationPermissionState());
+        this.currentToken.set(this.messaging.currentToken ?? null);
+        void this.repairTokenIfNeeded();
+    }
+    /**
+     * Repara el token FCM en background.
+     *
+     * Si el usuario tiene push activo (`master && granted`) pero no hay token en
+     * memoria — caso típico tras un cold start de la PWA — re-obtenemos el token
+     * y re-registramos el device sin tocar el toggle ni mostrar un error
+     * alarmista. El token es un detalle de implementación reparable, no parte del
+     * estado de UI (ver `isEnabled`).
+     */
+    async repairTokenIfNeeded() {
+        if (this._busy() !== null)
+            return;
+        if (this._repairingToken)
+            return;
+        if (!this.isEnabled())
+            return;
+        if (this.currentToken())
+            return;
+        this._repairingToken = true;
+        try {
+            const token = await this.messaging.getToken();
+            if (token) {
+                this.currentToken.set(token);
+                await this.auth.registerDevice(token);
+            }
+        }
+        catch {
+            // Reparación best-effort: no degradamos el toggle ni mostramos error.
+        }
+        finally {
+            this._repairingToken = false;
+        }
+    }
+    /**
+     * iOS browser sin estar instalado como PWA — push web no disponible.
+     * Aplica a Safari y a Edge/Chrome/Firefox en iOS (todos WebKit por mandato Apple).
+     */
+    detectNeedsIOSInstall() {
+        if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+            return false;
+        }
+        const ua = navigator.userAgent || '';
+        const isIOS = /iPad|iPhone|iPod/.test(ua);
+        if (!isIOS)
+            return false;
+        const isStandalone = window.matchMedia?.('(display-mode: standalone)').matches ||
+            navigator.standalone === true;
+        return !isStandalone;
     }
     tt(key) {
         return this.i18n.t(key, this.ns);
     }
-    appLabel(appId) {
-        const key = `app_${appId}`;
-        const label = this.tt(key);
-        return label === key ? appId : label;
-    }
-    roleLabel(name) {
-        const map = {
-            viewer: 'roleViewer',
-            editor: 'roleEditor',
-            admin: 'roleAdmin',
-            super_admin: 'roleSuperAdmin',
-            bingo_admin: 'roleBingoAdmin',
-            bingo_tesorero: 'roleBingoTesorero',
-            bingo_taquilla: 'roleBingoTaquilla',
-            bingo_operator: 'roleBingoOperator',
-        };
-        return this.tt(map[name] ?? name);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PermissionsViewComponent, isStandalone: true, selector: "val-permissions-view", inputs: { config: "config" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationPreferencesViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NotificationPreferencesViewComponent, isStandalone: true, selector: "val-notification-preferences-view", inputs: { config: "config" }, ngImport: i0, template: `
     <div class="page">
       <header class="page-header">
-        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
+        <val-display [props]="{ size: 'small', color: 'dark', content: pageTitle() }" />
         <val-title
           [props]="{
             size: 'large',
             color: 'dark',
             bold: false,
-            content: tt('pageDescription'),
+            content: pageDescription(),
           }"
         />
       </header>
 
-      @if (loading()) {
-        <div class="spinner-row">
-          <ion-spinner name="crescent" />
-        </div>
-      } @else if (loadError()) {
-        <div class="error-row">
-          <val-text
+      @if (state() === 'needs-install') {
+        <section class="settings-section">
+          <val-title
             [props]="{
-              content: tt('errorTitle'),
               size: 'medium',
-              color: 'medium',
-              bold: false,
+              color: 'dark',
+              bold: true,
+              content: tt('iosInstallTitle'),
             }"
           />
-          <val-button [props]="retryButtonProps()" (click)="load()" />
+          <div class="section-body">
+            <val-text
+              [props]="{
+                size: 'small',
+                color: 'medium',
+                bold: false,
+                content: tt('iosInstallHint'),
+              }"
+            />
+            <ol class="install-steps">
+              <li>{{ tt('iosInstallStep1') }}</li>
+              <li>{{ tt('iosInstallStep2') }}</li>
+              <li>{{ tt('iosInstallStep3') }}</li>
+              <li>{{ tt('iosInstallStep4') }}</li>
+            </ol>
+          </div>
+        </section>
+      }
+
+      <section class="settings-section">
+        <div class="notif-row">
+          <div class="notif-row__icon">
+            <ion-icon name="notifications-outline" aria-hidden="true" />
+          </div>
+          <div class="notif-row__body">
+            <val-title
+              [props]="{
+                size: 'medium',
+                color: 'dark',
+                bold: true,
+                content: tt('simpleTitle'),
+              }"
+            />
+            <val-text
+              [props]="{
+                size: 'small',
+                color: 'medium',
+                bold: false,
+                content: tt('simpleDescription'),
+              }"
+            />
+            @if (busyLabel(); as label) {
+              <span class="notif-row__busy">{{ label }}</span>
+            }
+          </div>
+          <div class="notif-row__control">
+            <val-toggle-input [props]="toggleProps()" />
+          </div>
         </div>
-      } @else {
-        @if (resolvedConfig().showSystemRoles) {
-          <section class="perm-section">
-            <div class="perm-section__header">
-              <val-title
-                [props]="{
-                  size: 'medium',
-                  color: 'dark',
-                  bold: true,
-                  content: tt('systemRolesTitle'),
-                }"
-              />
-              <val-text
-                [props]="{
-                  content: tt('systemRolesHint'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            </div>
-            <div class="role-list">
-              @for (role of systemRoles(); track role.id) {
-                <div class="role-card">
-                  <div class="role-card__header">
-                    <span class="role-card__name">{{ roleLabel(role.name) }}</span>
-                    <val-pill
-                      [props]="{
-                        label: tt('systemBadge'),
-                        color: 'primary',
-                        weight: 'bold',
-                      }"
-                    />
-                  </div>
-                  @if (role.description) {
-                    <span class="role-card__desc">{{ role.description }}</span>
-                  }
-                  @if (!role.hasPerms) {
-                    <div class="perm-chips">
-                      <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
-                    </div>
-                  } @else {
-                    @for (g of role.groups; track g.key) {
-                      <div class="perm-group">
-                        <span class="perm-group__label">{{ g.label }}</span>
-                        <div class="perm-chips">
-                          @for (p of g.perms; track p) {
-                            <span class="perm-chip">{{ p }}</span>
-                          }
-                        </div>
-                      </div>
-                    }
-                  }
-                </div>
-              }
-            </div>
-          </section>
+
+        @if (contextMessage(); as msg) {
+          <div class="alert" [class]="'alert--' + alertVariant()">
+            <ion-icon [name]="alertIcon()" aria-hidden="true" />
+            <span>{{ msg }}</span>
+          </div>
         }
 
-        @if (resolvedConfig().showCustomRoles) {
-          <section class="perm-section">
-            <div class="perm-section__header">
-              <val-title
-                [props]="{
-                  size: 'medium',
-                  color: 'dark',
-                  bold: true,
-                  content: tt('customRolesTitle'),
-                }"
-              />
-              <val-text
-                [props]="{
-                  content: tt('customRolesHint'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            </div>
-            @if (customRoles().length === 0) {
-              <val-text
-                [props]="{
-                  content: tt('noCustomRoles'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            } @else {
-              <div class="role-list">
-                @for (role of customRoles(); track role.id) {
-                  <div class="role-card">
-                    <div class="role-card__header">
-                      <span class="role-card__name">{{ role.name }}</span>
-                    </div>
-                    @if (role.description) {
-                      <span class="role-card__desc">{{ role.description }}</span>
-                    }
-                    @if (!role.hasPerms) {
-                      <div class="perm-chips">
-                        <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
-                      </div>
-                    } @else {
-                      @for (g of role.groups; track g.key) {
-                        <div class="perm-group">
-                          <span class="perm-group__label">{{ g.label }}</span>
-                          <div class="perm-chips">
-                            @for (p of g.perms; track p) {
-                              <span class="perm-chip">{{ p }}</span>
-                            }
-                          </div>
-                        </div>
-                      }
-                    }
-                  </div>
-                }
-              </div>
-            }
-          </section>
+        @if (state() === 'error') {
+          <div class="row-actions">
+            <val-button [props]="retryButtonProps()" (click)="onRetry()" />
+          </div>
         }
+      </section>
+
+      @if (resolvedConfig().showDetails && state() !== 'needs-install' && state() !== 'unsupported') {
+        <section class="settings-section">
+          <button class="details-toggle" type="button" (click)="toggleDetails()">
+            <span>{{ showDetails() ? tt('detailsHide') : tt('detailsShow') }}</span>
+            <ion-icon [name]="showDetails() ? 'chevron-up-outline' : 'chevron-down-outline'" aria-hidden="true" />
+          </button>
+          @if (showDetails()) {
+            <dl class="details">
+              <div class="details__row">
+                <dt>{{ tt('detailsToken') }}</dt>
+                <dd>{{ tokenPreview() ?? tt('detailsNone') }}</dd>
+              </div>
+              <div class="details__row">
+                <dt>{{ tt('diagnosticsPermission') }}</dt>
+                <dd>{{ permission() }}</dd>
+              </div>
+              <div class="details__row">
+                <dt>{{ tt('diagnosticsSupported') }}</dt>
+                <dd>{{ isSupported() ? '✓' : '✗' }}</dd>
+              </div>
+            </dl>
+          }
+        </section>
       }
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:24px}.spinner-row,.error-row{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0}.perm-section{margin-bottom:32px}.perm-section__header{margin-bottom:12px}.role-list{display:flex;flex-direction:column;gap:10px}.role-card{border:1.5px solid var(--ion-color-light);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.role-card__header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.role-card__name{font-size:15px;font-weight:600;color:var(--ion-color-dark)}.role-card__desc{font-size:13px;color:var(--ion-color-medium);line-height:1.4}.perm-group{display:flex;flex-direction:column;gap:6px}.perm-group__label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium)}.perm-chips{display:flex;flex-wrap:wrap;gap:6px}.perm-chip{font-size:12px;padding:3px 10px;border-radius:20px;background:var(--ion-color-light);color:var(--ion-color-dark)}.perm-chip--empty{color:var(--ion-color-medium);background:transparent;padding-left:0}\n"], dependencies: [{ kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: PillComponent, selector: "val-pill", inputs: ["preset", "props"], outputs: ["pillClick", "pillAction"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:8px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-body{margin-top:16px;display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.notif-row{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center}.notif-row__icon{width:44px;height:44px;border-radius:50%;background:var(--ion-color-light, rgba(0, 0, 0, .06));display:flex;align-items:center;justify-content:center}.notif-row__icon ion-icon{font-size:22px;color:var(--ion-color-dark, #1a1a1a)}.notif-row__body{display:flex;flex-direction:column;gap:4px;min-width:0}.notif-row__busy{font-size:12px;color:var(--ion-color-medium, #92949c);font-style:italic;margin-top:4px}.notif-row__control{flex-shrink:0}.alert{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.45;background:var(--ion-color-light, rgba(0, 0, 0, .04));color:var(--ion-color-dark, #1a1a1a)}.alert ion-icon{font-size:18px;flex-shrink:0;margin-top:1px}.alert--warning ion-icon{color:var(--ion-color-warning-shade, #c79e08)}.alert--danger ion-icon{color:var(--ion-color-danger-shade, #cf3c4f)}.alert--info ion-icon{color:var(--ion-color-medium, #6b6b6b)}.install-steps{margin:0;padding-left:20px;font-size:13px;line-height:1.6;color:var(--ion-color-dark, #1a1a1a)}.install-steps li+li{margin-top:4px}.details-toggle{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;font-size:13px;color:var(--ion-color-medium, #6b6b6b);cursor:pointer}.details-toggle ion-icon{font-size:14px}.details{margin:12px 0 0;display:flex;flex-direction:column;gap:6px}.details__row{display:grid;grid-template-columns:140px 1fr;gap:12px;font-size:12px;align-items:baseline}.details__row dt{margin:0;color:var(--ion-color-medium, #6b6b6b);text-transform:uppercase;letter-spacing:.4px;font-weight:500}.details__row dd{margin:0;color:var(--ion-color-dark, #1a1a1a);font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;word-break:break-all}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: ToggleInputComponent, selector: "val-toggle-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationPreferencesViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-permissions-view', standalone: true, imports: [IonSpinner, DisplayComponent, PillComponent, TitleComponent, TextComponent, ButtonComponent], template: `
+            args: [{ selector: 'val-notification-preferences-view', standalone: true, imports: [IonIcon, ToggleInputComponent, ButtonComponent, DisplayComponent, TitleComponent, TextComponent], template: `
     <div class="page">
       <header class="page-header">
-        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
+        <val-display [props]="{ size: 'small', color: 'dark', content: pageTitle() }" />
         <val-title
           [props]="{
             size: 'large',
             color: 'dark',
             bold: false,
-            content: tt('pageDescription'),
+            content: pageDescription(),
           }"
         />
       </header>
 
-      @if (loading()) {
-        <div class="spinner-row">
-          <ion-spinner name="crescent" />
-        </div>
-      } @else if (loadError()) {
-        <div class="error-row">
-          <val-text
+      @if (state() === 'needs-install') {
+        <section class="settings-section">
+          <val-title
             [props]="{
-              content: tt('errorTitle'),
               size: 'medium',
-              color: 'medium',
-              bold: false,
+              color: 'dark',
+              bold: true,
+              content: tt('iosInstallTitle'),
             }"
           />
-          <val-button [props]="retryButtonProps()" (click)="load()" />
+          <div class="section-body">
+            <val-text
+              [props]="{
+                size: 'small',
+                color: 'medium',
+                bold: false,
+                content: tt('iosInstallHint'),
+              }"
+            />
+            <ol class="install-steps">
+              <li>{{ tt('iosInstallStep1') }}</li>
+              <li>{{ tt('iosInstallStep2') }}</li>
+              <li>{{ tt('iosInstallStep3') }}</li>
+              <li>{{ tt('iosInstallStep4') }}</li>
+            </ol>
+          </div>
+        </section>
+      }
+
+      <section class="settings-section">
+        <div class="notif-row">
+          <div class="notif-row__icon">
+            <ion-icon name="notifications-outline" aria-hidden="true" />
+          </div>
+          <div class="notif-row__body">
+            <val-title
+              [props]="{
+                size: 'medium',
+                color: 'dark',
+                bold: true,
+                content: tt('simpleTitle'),
+              }"
+            />
+            <val-text
+              [props]="{
+                size: 'small',
+                color: 'medium',
+                bold: false,
+                content: tt('simpleDescription'),
+              }"
+            />
+            @if (busyLabel(); as label) {
+              <span class="notif-row__busy">{{ label }}</span>
+            }
+          </div>
+          <div class="notif-row__control">
+            <val-toggle-input [props]="toggleProps()" />
+          </div>
         </div>
-      } @else {
-        @if (resolvedConfig().showSystemRoles) {
-          <section class="perm-section">
-            <div class="perm-section__header">
-              <val-title
-                [props]="{
-                  size: 'medium',
-                  color: 'dark',
-                  bold: true,
-                  content: tt('systemRolesTitle'),
-                }"
-              />
-              <val-text
-                [props]="{
-                  content: tt('systemRolesHint'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            </div>
-            <div class="role-list">
-              @for (role of systemRoles(); track role.id) {
-                <div class="role-card">
-                  <div class="role-card__header">
-                    <span class="role-card__name">{{ roleLabel(role.name) }}</span>
-                    <val-pill
-                      [props]="{
-                        label: tt('systemBadge'),
-                        color: 'primary',
-                        weight: 'bold',
-                      }"
-                    />
-                  </div>
-                  @if (role.description) {
-                    <span class="role-card__desc">{{ role.description }}</span>
-                  }
-                  @if (!role.hasPerms) {
-                    <div class="perm-chips">
-                      <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
-                    </div>
-                  } @else {
-                    @for (g of role.groups; track g.key) {
-                      <div class="perm-group">
-                        <span class="perm-group__label">{{ g.label }}</span>
-                        <div class="perm-chips">
-                          @for (p of g.perms; track p) {
-                            <span class="perm-chip">{{ p }}</span>
-                          }
-                        </div>
-                      </div>
-                    }
-                  }
-                </div>
-              }
-            </div>
-          </section>
+
+        @if (contextMessage(); as msg) {
+          <div class="alert" [class]="'alert--' + alertVariant()">
+            <ion-icon [name]="alertIcon()" aria-hidden="true" />
+            <span>{{ msg }}</span>
+          </div>
         }
 
-        @if (resolvedConfig().showCustomRoles) {
-          <section class="perm-section">
-            <div class="perm-section__header">
-              <val-title
-                [props]="{
-                  size: 'medium',
-                  color: 'dark',
-                  bold: true,
-                  content: tt('customRolesTitle'),
-                }"
-              />
-              <val-text
-                [props]="{
-                  content: tt('customRolesHint'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            </div>
-            @if (customRoles().length === 0) {
-              <val-text
-                [props]="{
-                  content: tt('noCustomRoles'),
-                  size: 'medium',
-                  color: 'medium',
-                  bold: false,
-                }"
-              />
-            } @else {
-              <div class="role-list">
-                @for (role of customRoles(); track role.id) {
-                  <div class="role-card">
-                    <div class="role-card__header">
-                      <span class="role-card__name">{{ role.name }}</span>
-                    </div>
-                    @if (role.description) {
-                      <span class="role-card__desc">{{ role.description }}</span>
-                    }
-                    @if (!role.hasPerms) {
-                      <div class="perm-chips">
-                        <span class="perm-chip perm-chip--empty">{{ tt('noPermissions') }}</span>
-                      </div>
-                    } @else {
-                      @for (g of role.groups; track g.key) {
-                        <div class="perm-group">
-                          <span class="perm-group__label">{{ g.label }}</span>
-                          <div class="perm-chips">
-                            @for (p of g.perms; track p) {
-                              <span class="perm-chip">{{ p }}</span>
-                            }
-                          </div>
-                        </div>
-                      }
-                    }
-                  </div>
-                }
-              </div>
-            }
-          </section>
+        @if (state() === 'error') {
+          <div class="row-actions">
+            <val-button [props]="retryButtonProps()" (click)="onRetry()" />
+          </div>
         }
+      </section>
+
+      @if (resolvedConfig().showDetails && state() !== 'needs-install' && state() !== 'unsupported') {
+        <section class="settings-section">
+          <button class="details-toggle" type="button" (click)="toggleDetails()">
+            <span>{{ showDetails() ? tt('detailsHide') : tt('detailsShow') }}</span>
+            <ion-icon [name]="showDetails() ? 'chevron-up-outline' : 'chevron-down-outline'" aria-hidden="true" />
+          </button>
+          @if (showDetails()) {
+            <dl class="details">
+              <div class="details__row">
+                <dt>{{ tt('detailsToken') }}</dt>
+                <dd>{{ tokenPreview() ?? tt('detailsNone') }}</dd>
+              </div>
+              <div class="details__row">
+                <dt>{{ tt('diagnosticsPermission') }}</dt>
+                <dd>{{ permission() }}</dd>
+              </div>
+              <div class="details__row">
+                <dt>{{ tt('diagnosticsSupported') }}</dt>
+                <dd>{{ isSupported() ? '✓' : '✗' }}</dd>
+              </div>
+            </dl>
+          }
+        </section>
       }
     </div>
-  `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:24px}.spinner-row,.error-row{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 0}.perm-section{margin-bottom:32px}.perm-section__header{margin-bottom:12px}.role-list{display:flex;flex-direction:column;gap:10px}.role-card{border:1.5px solid var(--ion-color-light);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}.role-card__header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.role-card__name{font-size:15px;font-weight:600;color:var(--ion-color-dark)}.role-card__desc{font-size:13px;color:var(--ion-color-medium);line-height:1.4}.perm-group{display:flex;flex-direction:column;gap:6px}.perm-group__label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ion-color-medium)}.perm-chips{display:flex;flex-wrap:wrap;gap:6px}.perm-chip{font-size:12px;padding:3px 10px;border-radius:20px;background:var(--ion-color-light);color:var(--ion-color-dark)}.perm-chip--empty{color:var(--ion-color-medium);background:transparent;padding-left:0}\n"] }]
+  `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:8px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-body{margin-top:16px;display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.notif-row{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center}.notif-row__icon{width:44px;height:44px;border-radius:50%;background:var(--ion-color-light, rgba(0, 0, 0, .06));display:flex;align-items:center;justify-content:center}.notif-row__icon ion-icon{font-size:22px;color:var(--ion-color-dark, #1a1a1a)}.notif-row__body{display:flex;flex-direction:column;gap:4px;min-width:0}.notif-row__busy{font-size:12px;color:var(--ion-color-medium, #92949c);font-style:italic;margin-top:4px}.notif-row__control{flex-shrink:0}.alert{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.45;background:var(--ion-color-light, rgba(0, 0, 0, .04));color:var(--ion-color-dark, #1a1a1a)}.alert ion-icon{font-size:18px;flex-shrink:0;margin-top:1px}.alert--warning ion-icon{color:var(--ion-color-warning-shade, #c79e08)}.alert--danger ion-icon{color:var(--ion-color-danger-shade, #cf3c4f)}.alert--info ion-icon{color:var(--ion-color-medium, #6b6b6b)}.install-steps{margin:0;padding-left:20px;font-size:13px;line-height:1.6;color:var(--ion-color-dark, #1a1a1a)}.install-steps li+li{margin-top:4px}.details-toggle{display:flex;align-items:center;gap:6px;background:none;border:0;padding:0;font-size:13px;color:var(--ion-color-medium, #6b6b6b);cursor:pointer}.details-toggle ion-icon{font-size:14px}.details{margin:12px 0 0;display:flex;flex-direction:column;gap:6px}.details__row{display:grid;grid-template-columns:140px 1fr;gap:12px;font-size:12px;align-items:baseline}.details__row dt{margin:0;color:var(--ion-color-medium, #6b6b6b);text-transform:uppercase;letter-spacing:.4px;font-weight:500}.details__row dd{margin:0;color:var(--ion-color-dark, #1a1a1a);font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;word-break:break-all}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }] } });
 
+/**
+ * Helper para montar las **preferencias de notificaciones push**
+ * (`val-notification-preferences-view`) como ruta en una app del factory. El
+ * `config` se pasa por route `data` (`notificationPreferencesConfig`) y el
+ * componente lo lee como fallback de su `@Input() config`.
+ *
+ * No confundir con `provideValtechNotificationsRoutes` (el inbox / feed).
+ *
+ * @example
+ * ```ts
+ * // app.routes.ts (típicamente bajo settings)
+ * export const settingsRoutes: Routes = [
+ *   ...provideValtechNotificationPreferencesRoutes(),       // → notifications
+ * ];
+ *
+ * // con config acotada:
+ * ...provideValtechNotificationPreferencesRoutes({ config: { showDetails: false } }),
+ * ...provideValtechNotificationPreferencesRoutes({ path: 'push' }),
+ * ```
+ */
+function provideValtechNotificationPreferencesRoutes(opts) {
+    return [
+        {
+            path: opts?.path ?? 'notifications',
+            component: NotificationPreferencesViewComponent,
+            data: { notificationPreferencesConfig: opts?.config },
+        },
+    ];
+}
+
 /**
  * Helper para montar la vista Permisos (`val-permissions-view`) como ruta en una
  * app del factory. El `config` se pasa por route `data` (`permissionsConfig`) y el
@@ -67204,5 +67344,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, APP_VERSION_PLATFORM_PLUGIN, APP_VERSION_REMOTE_PLUGIN, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PermissionCatalogService, PermissionSelectorComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketCardComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPageState, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAppVersionHttp, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
+export { ACTION_CARD_DEFAULTS, AD_SIZE_MAP, API_TABLE_COLUMN_LABELS, APP_VERSION_PLATFORM_PLUGIN, APP_VERSION_REMOTE_PLUGIN, ARTICLE_CARD_DEFAULTS, ARTICLE_SPACING, ARTICLE_STRIP_DEFAULTS, AUTH_CTA_DEFAULTS, AVATAR_UPLOAD_DEFAULTS, AboutViewComponent, AccordionComponent, AccountViewComponent, ActionCardComponent, ActionHeaderComponent, ActionType, AdSlotComponent, AdsLoaderService, AdsService, AlertBoxComponent, AnalyticsErrorHandler, AnalyticsRouterTracker, AnalyticsService, AnimatedTerminalComponent, ApiKeyCreateModalComponent, ApiKeyService, ApiKeysModalComponent, ApiKeysViewComponent, AppConfigService, AppVersionService, ArticleBuilder, ArticleCardComponent, ArticleComponent, ArticleStripComponent, AttachmentUploaderComponent, AuthBackgroundComponent, AuthCtaComponent, AuthService, AuthStateService, AuthStorageService, AuthSyncService, AvatarComponent, AvatarUploadComponent, BOTTOM_NAV_DEFAULTS, BannerComponent, BlogPostBuilder, BottomNavComponent, BoxComponent, BreadcrumbComponent, ButtonComponent, ButtonGroupComponent, CALLOUT_LABELS, CHEV_KEYS, CIRCLE_KEYS, COMMON_COUNTRY_CODES, COMMON_CURRENCIES, CORNER_KEYS, CTA_CARD_DEFAULTS, CURRENCY_INFO, CardComponent, CardSection, CardType, CardsCarouselComponent, ChangeEmailModalComponent, ChangePasswordModalComponent, CheckInputComponent, CheckboxRadioInputComponent, ChipGroupComponent, CodeDisplayComponent, CommandDisplayComponent, CommentComponent, CommentInputComponent, CommentSectionComponent, CompanyFooterComponent, ComponentStates, ConfirmationDialogService, ContainerComponent, ContentLoaderComponent, ContentReactionComponent, ContentService, ContentTransformer, CookieBannerComponent, CountdownComponent, CreateOrgModalComponent, CtaCardComponent, CurrencyInputComponent, DEFAULT_ADS_CONFIG, DEFAULT_APP_CONFIG_SERVICE_CONFIG, DEFAULT_APP_VERSION_SERVICE_CONFIG, DEFAULT_AUTH_CONFIG, DEFAULT_BACK_HEADER, DEFAULT_BUTTON_PRESETS, DEFAULT_CANCEL_BUTTON, DEFAULT_CHECK_INTERVAL_MS, DEFAULT_CONFIRM_BUTTON, DEFAULT_COUNTDOWN_LABELS, DEFAULT_COUNTDOWN_LABELS_EN, DEFAULT_DEBUG_CONSOLE_CONFIG, DEFAULT_DONATION_CONFIG, DEFAULT_EMPTY_STATE, DEFAULT_EMULATOR_CONFIG, DEFAULT_FEEDBACK_CONFIG, DEFAULT_FEEDBACK_TYPE_OPTIONS, DEFAULT_HOME_HEADER, DEFAULT_INFINITE_LIST_METADATA, DEFAULT_MODAL_CANCEL_BUTTON, DEFAULT_MODAL_CONFIRM_BUTTON, DEFAULT_PAGE_SIZE_OPTIONS, DEFAULT_PLATFORMS, DEFAULT_PRESETS, DEFAULT_REFRESHER_METADATA, DEFAULT_SKELETON_CONFIG, DEFAULT_SPLASH_SCREEN_CONFIG, DataTableComponent, DateInputComponent, DatePickerComponent, DateRangeInputComponent, DebugConsoleComponent, DeleteAccountModalComponent, DetailSkeletonComponent, DeviceService, DisplayComponent, DividerComponent, DocsApiTableComponent, DocsBreadcrumbComponent, DocsBuilder, DocsCalloutComponent, DocsCodeExampleComponent, DocsLayoutComponent, DocsNavLinksComponent, DocsNavigationService, DocsPageComponent, DocsSearchComponent, DocsSectionComponent, DocsShellComponent, DocsSidebarComponent, DocsTocComponent, DonationService, DownloadService, EditOrgModalComponent, EmptyStateComponent, ExpandableTextComponent, FEATURES_LIST_DEFAULTS, FUN_MODAL_DEFAULTS, FabComponent, FaqComponent, FeaturesListComponent, FeedbackFormComponent, FeedbackService, FieldListComponent, FileInputComponent, FirebaseService, FirestoreCollectionFactory, FirestoreService, FontSizeOption, FontSizeService, FooterComponent, FooterLinksComponent, FormComponent, FormSkeletonComponent, FunHeaderComponent, FunModalComponent, GlassComponent, GlowCardComponent, GlowComponent, GridSkeletonComponent, HANDOFF_ROUTE_PARAM, HANDOFF_TOKEN_PARAM, HandoffService, HasPermissionDirective, HeaderComponent, HintComponent, HorizontalScrollComponent, HrefComponent, I18nService, IMAGE_DEFAULTS, INITIAL_AUTH_STATE, INITIAL_MFA_STATE, INVITATION_CARD_DEFAULTS, IONIC_COLORS$5 as IONIC_COLORS, Icon, IconComponent, IconService, ImageComponent, ImageCropComponent, ImageService, InAppBrowserService, InfiniteListComponent, InfoComponent, InputI18nHelper, InputType, InvitationCardComponent, InviteMemberModalComponent, ItemListComponent, LANG_STORAGE_KEY$1 as LANG_STORAGE_KEY, LEGAL_CONTENT_CONFIG, LOGIN_DEFAULTS, LandingSplitComponent, LandingStepsComponent, LanguageSelectorComponent, LayeredCardComponent, LegalContentService, LegalLinkService, LinkComponent, LinkProcessorService, LinkedProvidersComponent, LinksAccordionComponent, LinksCakeComponent, ListSkeletonComponent, LoadingDirective, LocalStorageService, LocaleService, LoginAttemptModalComponent, LoginComponent, MEDIA_OBJECT_DEFAULTS, MEMBER_CARD_DEFAULTS, METRIC_CARD_DEFAULTS, MODAL_SIZES, MOTIF_KEYS, MOTION, MaintenancePageComponent, MarkdownArticleParserService, MediaObjectComponent, MemberCardComponent, MemberDetailModalComponent, MemberImportModalComponent, MenuComponent, MessagingService, MetaService, MetricCardComponent, MfaModalComponent, ModalService, ModalShellComponent, MultiSelectSearchComponent, NUM_KEYS, NavigationService, NetworkBannerComponent, NetworkStatusService, NewsBuilder, NoContentComponent, NotesBoxComponent, NotificationActionService, NotificationPreferencesViewComponent, NotificationsService, NotificationsViewComponent, NumberFromToComponent, NumberStepperComponent, OAUTH_PROVIDERS_INFO, OAuthCallbackComponent, OAuthService, OrgInfoSheetComponent, OrgService, OrgSwitchService, OrganizationViewComponent, PATTERN_MOTIFS, PATTERN_PALETTES, PATTERN_STYLE_CONFIGS, PLATFORM_CONFIGS, PageContentComponent, PageLinksComponent, PageRefreshService, PageTemplateComponent, PageWavesComponent, PageWrapperComponent, PaginationComponent, PaginationService, PasswordInputComponent, PatternComponent, PermissionCatalogService, PermissionSelectorComponent, PermissionsModalComponent, PermissionsViewComponent, PhoneInputComponent, PillComponent, PinInputComponent, PlainCodeBoxComponent, PopoverSelectorComponent, PreferencesService, PreferencesViewComponent, PresetService, PriceTagComponent, ProcessLinksPipe, ProfileSkeletonComponent, ProfileViewComponent, ProgressBarComponent, ProgressRingComponent, ProgressStatusComponent, PrompterComponent, QR_PRESETS, QrCodeComponent, QrGeneratorService, QrScannerComponent, QueryBuilder, QuoteBoxComponent, REQUEST_STATUSES, RadioInputComponent, RangeInputComponent, RatingComponent, RefresherComponent, RequestFirestoreService, RequestFormBuilderService, RequestService, RightsFooterComponent, RotatingTextComponent, SEARCH_HEADER_DEFAULTS, SETTINGS_SECTIONS_CATALOG, SHAPE_KEYS, SHARE_PROFILE_MODAL_DEFAULTS, SKELETON_LAYOUT_DEFAULT_ROWS, SKELETON_PRESETS, SOLID_KEYS, STATS_BAR_DEFAULTS, STROKE_KEYS, SearchHeaderComponent, SearchSelectorComponent, SearchbarComponent, SecurityViewComponent, SegmentControlComponent, SelectSearchComponent, SessionListModalComponent, SessionService, SettingsHubComponent, ShareButtonsComponent, ShareProfileModalComponent, SimpleComponent, SkeletonComponent, SkeletonLayoutComponent, SkeletonService, SplashScreenService, StatsBarComponent, StatsCardComponent, StepperComponent, StorageService, SwipeCarouselComponent, SwitchOrgModalComponent, TRI_KEYS, TabbedContentComponent, TableSkeletonComponent, TabsComponent, Terminal404Component, TestimonialCardComponent, TestimonialCarouselComponent, TextComponent, TextInputComponent, TextareaInputComponent, ThemeOption, ThemeService, TicketCardComponent, TimelineComponent, TitleBlockComponent, TitleComponent, ToastService, ToggleInputComponent, TokenService, ToolbarActionType, ToolbarComponent, TransferOwnershipModalComponent, TranslatePipe, TypedCollection, UPDATE_BANNER_DEFAULT_CONTENT, UPDATE_BANNER_I18N_NAMESPACE, UpdateBannerComponent, UserAvatarComponent, UsernameInputComponent, VALTECH_ADS_CONFIG, VALTECH_APP_CONFIG, VALTECH_APP_VERSION, VALTECH_AUTH_CONFIG, VALTECH_COMPANY_LINKS, VALTECH_CONTENT_CONFIG, VALTECH_DEBUG_CONSOLE, VALTECH_DEFAULT_CONTENT, VALTECH_DONATION_CONFIG, VALTECH_FEEDBACK_CONFIG, VALTECH_FIREBASE_CONFIG, VALTECH_FOOTER_I18N, VALTECH_FOOTER_LOGO, VALTECH_LANGUAGE_SELECTOR, VALTECH_LEGAL_CONFIG, VALTECH_NETWORK_ERROR_KEY, VALTECH_SETTINGS_MENU_LINKS, VALTECH_SITE_PATHS, VALTECH_SOCIAL_LINKS, VALTECH_SPLASH_SCREEN, VALTECH_WEB_BASE_URLS, VERSION, ValtechErrorService, WizardComponent, WizardFooterComponent, applyDefaultValueToControl, authGuard, authInterceptor, authPasswordValidator, beautifyLegalArticle, blogPost, buildCompanyFooterProps, buildFooterLinks, buildLegalLinkResolver, buildPath, buildSettingsCards, button, collections, connectPageRefresh, createErrorStateProps, createFirebaseConfig, createGlowCardProps, createInitialPaginationState, createNumberFromToField, createPageState, createPermissionLabeler, createRefreshableStream, createTitleProps, docs, errorLoggingInterceptor, extractPathParams, generatePatternTiles, generateRandomTile, getAppInfo, getAppVersion, getCollectionPath, getDocumentId, getTimeOfDayKey, goToTop, guestGuard, hasEmulators, iconButton, interpretError, isAtEnd, isCollectionPath, isDocumentPath, isEmulatorMode, isIonicColor, isValidPath, joinPath, maxLength, mulberry32, news, parseMarkdownArticle, permissionGuard, permissionGuardFromRoute, provideLegalContent, provideSplashScreen, provideValtechAboutRoutes, provideValtechAccountRoutes, provideValtechAds, provideValtechApiKeysRoutes, provideValtechAppConfig, provideValtechAppVersion, provideValtechAppVersionHttp, provideValtechAuth, provideValtechAuthInterceptor, provideValtechContent, provideValtechDebugConsole, provideValtechDonations, provideValtechErrorHandling, provideValtechFeedback, provideValtechFirebase, provideValtechI18n, provideValtechLegal, provideValtechNotificationPreferencesRoutes, provideValtechNotificationsRoutes, provideValtechOrganizationRoutes, provideValtechPermissionsRoutes, provideValtechPreferencesRoutes, provideValtechPresets, provideValtechProfileRoutes, provideValtechSecurityRoutes, provideValtechSettingsRoutes, provideValtechSite, provideValtechSkeleton, query, renderPatternSvgInner, replaceSpecialChars, resolveColor, resolveInputDefaultValue, resolveIonicColor, resolveWebBaseUrl, roleGuard, storagePaths, superAdminGuard, toArticle };
 //# sourceMappingURL=valtech-components.mjs.map