valtech-components 2.0.1001 → 2.0.1002

package/fesm2022/valtech-components.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, InjectionToken, makeEnvironmentProviders, APP_INITIALIZER, ErrorHandler, Injectable, DestroyRef, Inject, signal, computed, PLATFORM_ID, isDevMode, Optional, runInInjectionContext, effect, Pipe, TemplateRef, ViewContainerRef, input, Directive, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, HostBinding, HostListener, NgZone, ViewChild, ChangeDetectorRef, output, ContentChild, ElementRef, viewChild, untracked, Injector, isSignal, ViewEncapsulation } from '@angular/core';
-import { BehaviorSubject, throwError, Subject, map, distinctUntilChanged, filter as filter$1, take as take$1, firstValueFrom, of, from, EMPTY, Observable, interval, debounceTime, switchMap as switchMap$1, catchError as catchError$1, takeUntil, isObservable, forkJoin, race, timer, shareReplay } from 'rxjs';
+import { BehaviorSubject, throwError, Subject, map, distinctUntilChanged, filter as filter$1, take as take$1, firstValueFrom, of, from, EMPTY, Observable, interval, debounceTime, switchMap as switchMap$1, catchError as catchError$1, takeUntil, isObservable, race, timer, forkJoin, shareReplay } from 'rxjs';
 import { catchError, switchMap, finalize, filter, take, map as map$1, tap, distinctUntilChanged as distinctUntilChanged$1, retry, timeout, debounceTime as debounceTime$1, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import * as i1$3 from '@angular/common/http';
 import { provideHttpClient, withInterceptors, HttpClient, HttpErrorResponse } from '@angular/common/http';
@@ -25,7 +25,7 @@ import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app'
 import * as i2$1 from '@ionic/angular/standalone';
 import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonInput, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonRippleEffect, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, IonDatetimeButton, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, menuOutline } from 'ionicons/icons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, notificationsOffOutline, menuOutline } from 'ionicons/icons';
 import { Browser } from '@capacitor/browser';
 import * as i1$6 from '@angular/platform-browser';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
@@ -54,7 +54,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.1001';
+const VERSION = '2.0.1002';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -50044,488 +50044,702 @@ function provideValtechOrganizationRoutes(opts) {
 }
 
 /**
- * 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.
+ * Helper para montar el bloque completo de Settings en una app del factory: el
+ * HUB de navegación (`val-settings-hub`) en el index + las vistas promovidas
+ * (Perfil, Preferencias) + las rutas propias de la app (`extraRoutes`).
  *
- * Portado del override `Settings.Notifications` (showcase) bajo el proceso de
- * ADR-021.
+ * Pensado para apps nuevas (greenfield) que adoptan el set entero. showcase NO
+ * lo usa hoy (preserva su `settings.routes.ts` por la semántica de sus muchas
+ * secciones no promovidas — ver guía de promoción), pero el provider debe
+ * existir y compilar para el resto de apps.
+ *
+ * @example
+ * ```ts
+ * // app.routes.ts
+ * import { provideValtechSettingsRoutes } from 'valtech-components';
+ *
+ * export const routes: Routes = [
+ *   {
+ *     path: 'app',
+ *     children: [
+ *       ...provideValtechSettingsRoutes({
+ *         hubConfig: { onLogout: () => auth.logoutWithConfirmation() },
+ *         extraRoutes: [
+ *           { path: 'security', loadComponent: () => ... },
+ *         ],
+ *       }),
+ *     ],
+ *   },
+ * ];
+ * ```
  */
-const NOTIFICATION_PREFERENCES_VIEW_I18N = {
+function provideValtechSettingsRoutes(opts) {
+    const basePath = opts?.basePath ?? 'settings';
+    const includeProfile = opts?.includeProfile ?? true;
+    const includePreferences = opts?.includePreferences ?? true;
+    const includeSecurity = opts?.includeSecurity ?? true;
+    const includeAccount = opts?.includeAccount ?? true;
+    const includeOrganization = opts?.includeOrganization ?? true;
+    return [
+        {
+            path: basePath,
+            children: [
+                {
+                    path: '',
+                    component: SettingsHubComponent,
+                    data: { settingsHubConfig: opts?.hubConfig },
+                },
+                ...(includeProfile ? provideValtechProfileRoutes({ config: opts?.profileConfig }) : []),
+                ...(includePreferences
+                    ? provideValtechPreferencesRoutes({
+                        path: opts?.preferencesPath ?? 'preferences',
+                        config: opts?.preferencesConfig,
+                    })
+                    : []),
+                ...(includeSecurity ? provideValtechSecurityRoutes({ config: opts?.securityConfig }) : []),
+                ...(includeAccount ? provideValtechAccountRoutes({ config: opts?.accountConfig }) : []),
+                ...(includeOrganization
+                    ? provideValtechOrganizationRoutes({ config: opts?.organizationConfig })
+                    : []),
+                ...(opts?.extraRoutes ?? []),
+            ],
+        },
+    ];
+}
+
+/**
+ * Refreshable Stream
+ *
+ * Helper estándar para vistas que consumen datos de Firestore. Soporta DOS
+ * modos — el caller decide cuál vía la `factory`:
+ *
+ *  - **one-shot** (recomendado por defecto): `() => from(svc.getAllOnce())`.
+ *    Carga una vez y completa. Más barato — sin listener vivo.
+ *  - **real-time**: `() => svc.getAll()`. Listener Firestore que auto-actualiza.
+ *    Solo donde importa (inbox de notificaciones, badges).
+ *
+ * En ambos modos la primera suscripción se gatea por `firebaseAuthReady`
+ * (sesión de Firebase Auth lista) — así el listener/lectura nunca se adjunta
+ * antes de que `request.auth` esté disponible en las reglas de Firestore, lo
+ * que cierra la ventana de `permission-denied` en cold start de PWA.
+ *
+ * El `retry` con backoff corto es solo red de seguridad para reconexiones
+ * transitorias (no para cubrir cold start — eso lo cubre el gate de auth).
+ */
+/**
+ * Crea un stream refrescable a partir de una factory de Observable.
+ *
+ * DEBE llamarse en un injection context (field initializer o constructor) —
+ * usa `toSignal`/`toObservable`/`inject` internamente.
+ *
+ * @param factory - Función que produce el Observable a consumir. El caller
+ *   decide el modo: `() => from(svc.getAllOnce())` (one-shot) o
+ *   `() => svc.getAll()` (real-time).
+ * @param options - Configuración opcional (fallback, retry, gate).
+ *
+ * @example
+ * ```typescript
+ * // one-shot (recomendado por defecto)
+ * private readonly stream = createRefreshableStream(
+ *   () => from(this.svc.getAllOnce()),
+ * );
+ *
+ * // real-time (inbox)
+ * private readonly stream = createRefreshableStream(
+ *   () => this.notifs.getAll(50),
+ * );
+ *
+ * readonly items = this.stream.data;
+ * readonly loading = this.stream.loading;
+ *
+ * ionViewWillEnter() {
+ *   this.pageRefresh.register(() => this.stream.reload());
+ * }
+ * ```
+ */
+function createRefreshableStream(factory, options) {
+    const injector = options?.injector ?? inject(Injector);
+    const fallback = (options?.fallback ?? null);
+    const retryCount = options?.retryCount ?? 4;
+    const retryBaseDelayMs = options?.retryBaseDelayMs ?? 500;
+    const gateOnFirebaseAuth = options?.gateOnFirebaseAuth ?? true;
+    const authGateTimeoutMs = options?.authGateTimeoutMs ?? 20000;
+    const firstEmitTimeoutMs = options?.firstEmitTimeoutMs ?? 20000;
+    // FirebaseService es opcional — sin él (apps sin Firebase) no se gatea.
+    const firebase = gateOnFirebaseAuth ? injector.get(FirebaseService, null) : null;
+    const _reload = signal(0);
+    const _loading = signal(true);
+    const _error = signal(false);
+    // Gate de Firebase Auth: el stream no abre la primera suscripción hasta que
+    // la sesión esté confirmada. `race` con un `timer` de seguridad — si la
+    // sesión NUNCA se establece (token inválido, signInWithFirebase falló), el
+    // gate igual se libera tras `authGateTimeoutMs` y la factory procede: si no
+    // hay permiso terminará en estado `error`, jamás en skeleton infinito.
+    // Tag los dos inputs del `race` para distinguir en logs cuál ganó: la sesión
+    // de Firebase Auth (`auth-ready`) o el timeout de seguridad (`timeout`).
+    const authGate$ = firebase
+        ? race(firebase.firebaseAuthReady$.pipe(map$1(() => 'auth-ready')), timer(authGateTimeoutMs).pipe(map$1(() => 'timeout'))).pipe(take(1), tap(winner => {
+            if (winner === 'timeout') {
+                console.warn(`[RefreshStream] auth gate resolved by TIMEOUT after ${authGateTimeoutMs}ms ` +
+                    '(Firebase Auth session never confirmed)');
+            }
+            else {
+                console.log('[RefreshStream] auth gate resolved by firebaseAuthReady$ (session ready)');
+            }
+        }))
+        : of(true);
+    const data = toSignal(toObservable(_reload, { injector }).pipe(tap(() => {
+        _loading.set(true);
+        _error.set(false);
+    }), 
+    // Esperar a Firebase Auth listo antes de cada (re)suscripción. Como
+    // `firebaseAuthReady$` completa tras la primera emisión, las reloads
+    // posteriores resuelven el gate de inmediato (auth ya está listo).
+    switchMap(() => authGate$.pipe(switchMap(() => factory().pipe(tap(() => {
+        _loading.set(false);
+        _error.set(false);
+        console.log('[RefreshStream] factory emitted first value — loading=false');
+    }), 
+    // Backoff corto exponencial acotado — solo red de seguridad para
+    // reconexiones transitorias, NO para cubrir cold start.
+    retry({
+        count: retryCount,
+        delay: (_err, attempt) => timer(Math.min(retryBaseDelayMs * 2 ** (attempt - 1), 4000)),
+    }), 
+    // Techo absoluto para la PRIMERA emisión. Si la factory no emite
+    // ni valor ni error (servicio nunca inicializado → `EMPTY` →
+    // silencio), `timeout` dispara un error → `catchError` → estado
+    // `error`. Nunca skeleton perpetuo. Va DESPUÉS de `retry` para
+    // que cuente el tiempo total, no por intento.
+    timeout({ first: firstEmitTimeoutMs }), catchError(err => {
+        _loading.set(false);
+        _error.set(true);
+        console.error(`[RefreshStream] factory failed/timed out → error state: ${err instanceof Error ? err.message : String(err)}`);
+        return of(fallback);
+    })))))), { initialValue: null, injector });
+    return {
+        data,
+        loading: _loading.asReadonly(),
+        error: _error.asReadonly(),
+        reload: () => _reload.update(n => n + 1),
+    };
+}
+
+/**
+ * Defaults i18n (es/en) embebidos en `val-notifications-view`. Auto-registrados
+ * en el constructor del componente si el consumer no proveyó el namespace
+ * (`Notifications` por default). SOLO incluye las keys que la vista usa.
+ *
+ * Portado del override `Notifications` (showcase) bajo el proceso de ADR-021.
+ */
+const NOTIFICATIONS_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.',
+        pageDescription: 'Tu bandeja de mensajes y actualizaciones',
+        groupToday: 'Hoy',
+        groupThisMonth: 'Este mes',
+        groupEarlier: 'Anteriores',
+        empty: 'Aún no tienes notificaciones',
+        emptyHint: 'Activa las notificaciones para recibir actualizaciones, alertas y novedades importantes.',
+        emptyCta: 'Ir a configuración',
+        loadErrorTitle: 'No pudimos cargar tus notificaciones',
+        loadErrorHint: 'Revisa tu conexión e inténtalo de nuevo. Tus notificaciones siguen guardadas.',
+        offlineTitle: 'Sin conexión',
+        offlineHint: 'No hay acceso a la red. Reconéctate e intenta de nuevo.',
         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',
+        pushOffTitle: 'No recibirás avisos',
+        pushOffHint: 'Puedes leer tus mensajes aquí, pero las notificaciones push están desactivadas. Actívalas para recibir avisos en tu dispositivo.',
+        pushOffCta: 'Activar notificaciones',
+        loading: 'Cargando…',
+        loadMore: 'Cargar más',
+        seeMore: 'Ver más',
+        seeLess: 'Ver menos',
+        open: 'Ver',
+        markAll: 'Marcar todas como leídas',
+        unread: 'No leída',
+        crossApp: 'Desde {app}',
+        timeNow: 'ahora',
+        timeMinutes: 'hace {n} min',
+        timeHours: 'hace {n} h',
+        timeDays: 'hace {n} d',
+        markedAllSuccess: 'Notificaciones marcadas como leídas.',
+        markedAllError: 'No se pudo marcar todas como leídas.',
+        openError: 'No se pudo abrir la notificación.',
     },
     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.",
+        pageDescription: 'Your inbox of messages and updates',
+        groupToday: 'Today',
+        groupThisMonth: 'This month',
+        groupEarlier: 'Earlier',
+        empty: 'No notifications yet',
+        emptyHint: 'Enable notifications to receive updates, alerts and important news.',
+        emptyCta: 'Go to settings',
+        loadErrorTitle: "We couldn't load your notifications",
+        loadErrorHint: 'Check your connection and try again. Your notifications are still saved.',
+        offlineTitle: 'No connection',
+        offlineHint: 'No network access. Reconnect and try again.',
         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',
+        pushOffTitle: "You won't get alerts",
+        pushOffHint: 'You can read your messages here, but push notifications are off. Turn them on to get alerts on your device.',
+        pushOffCta: 'Enable notifications',
+        loading: 'Loading…',
+        loadMore: 'Load more',
+        seeMore: 'See more',
+        seeLess: 'See less',
+        open: 'Open',
+        markAll: 'Mark all as read',
+        unread: 'Unread',
+        crossApp: 'From {app}',
+        timeNow: 'now',
+        timeMinutes: '{n} min ago',
+        timeHours: '{n} h ago',
+        timeDays: '{n} d ago',
+        markedAllSuccess: 'Notifications marked as read.',
+        markedAllError: 'Could not mark all as read.',
+        openError: 'Could not open notification.',
     },
 };
 
 addIcons({
-    alertCircleOutline,
-    chevronDownOutline,
-    chevronUpOutline,
-    closeCircleOutline,
+    alarmOutline,
+    chatboxEllipsesOutline,
+    chatbubbleOutline,
+    checkmarkCircleOutline,
+    checkmarkDoneOutline,
+    cloudOfflineOutline,
+    cogOutline,
+    documentTextOutline,
     notificationsOffOutline,
     notificationsOutline,
-    refreshOutline,
+    openOutline,
+    personOutline,
 });
-const DEFAULT_NAMESPACE$2 = 'Settings.Notifications';
+const DEFAULT_NAMESPACE$2 = 'Notifications';
+const DEFAULT_SETTINGS_PATH = '/app/settings/notifications';
+const DEFAULT_PAGE_SIZE = 10;
+const DEFAULT_MAX_LOAD = 50;
 /**
- * `val-notification-preferences-view` — **preferencias de notificaciones push**
- * (FCM) full-feature autocontenida (organism). Promovida desde `showcase` bajo el
- * proceso de ADR-021.
+ * `val-notifications-view` — inbox de notificaciones full-feature autocontenido
+ * (organism). Promovido 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.
+ * Separado de `/app/settings/notifications` (que controla permiso FCM + master
+ * toggle). Aquí el user lee/abre/marca-leídas sus mensajes.
  *
- * 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.
+ * - **Stream real-time** vía `NotificationsService.getAll(maxLoad)` envuelto en
+ *   `createRefreshableStream` (gateado por `firebaseAuthReady`, retry corto,
+ *   `firstEmitTimeoutMs: 15000`). Estados: loading (skeleton), error
+ *   (`val-empty-state` + reintentar), empty (`val-empty-state` + CTA), data
+ *   (lista agrupada Hoy / Este mes / Anteriores).
+ * - **Abrir** una notif → `NotificationActionService.open()` (markRead +
+ *   switch-org + navegar/handoff cross-app). Hook `onNotificationOpen` opcional.
+ * - **Marcar todas como leídas** (gateado por `enableMarkAll`).
+ * - **CTA push-off** cuando el permiso del navegador no está concedido (gateado
+ *   por `showPushOffCta`); navega a `settingsNotificationsPath`.
+ * - **Paginación soft** — slice local (`pageSize`, +`pageSize` por click) sobre el
+ *   cache del stream; el tope de fetch es `maxLoad`.
+ * - **i18n auto-registrado** es/en bajo `i18nNamespace` (default `Notifications`).
  *
- * NO renderiza ion-content — vive dentro de val-page-wrapper. `ActivatedRoute` se
- * inyecta `{ optional: true }` → funciona sin router (embebida / Storybook).
+ * NO renderiza ion-content — vive dentro de val-page-wrapper. `Router` y
+ * `ActivatedRoute` se inyectan `{ optional: true }` → funciona sin router
+ * (embebida / Storybook). El forward-compat icon resolver lee `notif.payload.icon`
+ * si existe (`{ type, value, color? }`), cae a un mapa por `notif.type`, luego a
+ * `notifications-outline`.
  */
-class NotificationPreferencesViewComponent {
+class NotificationsViewComponent {
     /** Namespace i18n resuelto (capturado para llamadas no-reactivas). */
     get ns() {
         return this.resolvedConfig().i18nNamespace;
     }
-    // ---------------------------------------------------------------------------
-    // Lifecycle
-    // ---------------------------------------------------------------------------
+    /** Paso de paginación soft (revela +N por "cargar más"). */
+    get pageStep() {
+        return this.resolvedConfig().pageSize;
+    }
     constructor() {
         this.nav = inject(NavigationService);
         this.i18n = inject(I18nService);
+        this.notifs = inject(NotificationsService);
+        this.action = inject(NotificationActionService);
         this.toast = inject(ToastService);
+        this.errors = inject(ValtechErrorService);
         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).
+        // router (solo lo usa para leer el route data de config como fallback). La
+        // navegación va por `NavigationService` (wrapper opcional sobre `Router`).
         this.route = inject(ActivatedRoute, { optional: true });
         this.resolvedConfig = computed(() => {
-            const fromRoute = (this.route?.snapshot.data['notificationPreferencesConfig'] ??
-                {});
+            const fromRoute = (this.route?.snapshot.data['notificationsConfig'] ?? {});
             const merged = { ...fromRoute, ...(this.config ?? {}) };
             return {
-                showDetails: merged.showDetails ?? true,
+                showPushOffCta: merged.showPushOffCta ?? true,
+                enableMarkAll: merged.enableMarkAll ?? true,
+                settingsNotificationsPath: merged.settingsNotificationsPath ?? DEFAULT_SETTINGS_PATH,
                 i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE$2,
-                onPushEnabled: merged.onPushEnabled,
-                onPushDisabled: merged.onPushDisabled,
+                pageSize: merged.pageSize ?? DEFAULT_PAGE_SIZE,
+                maxLoad: merged.maxLoad ?? DEFAULT_MAX_LOAD,
+                onNotificationOpen: merged.onNotificationOpen,
             };
         });
-        /** 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'));
+        this._expanded = signal(new Set());
+        this._pageSize = signal(this.resolvedConfig().pageSize);
+        this._bulkBusy = signal(false);
+        this._loadingMore = signal(false);
         /**
-         * Estado efectivo del toggle: "el usuario tiene push activo".
+         * Push activado = permiso del navegador en `granted`. Si NO está activado,
+         * el user puede leer el inbox (Firestore) pero NO recibirá push en su
+         * dispositivo → mostramos una card que lo invita a ir a configuración.
+         * Se evalúa en cada montaje de la vista.
+         */
+        this.pushEnabled = signal(this.auth.getNotificationPermissionState() === 'granted');
+        /**
+         * Stream firestore real-time vía el helper estándar `createRefreshableStream`
+         * (modo real-time: factory devuelve un listener vivo `notifs.getAll(maxLoad)`).
          *
-         * 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.
+         * El helper gatea la primera suscripción por `firebaseAuthReady`, aplica un
+         * `retry` corto con backoff y, tras agotar reintentos, emite el fallback (`[]`)
+         * y marca `error` — estado de error en UI, no skeleton infinito. `reload()`
+         * re-suscribe el stream completo (lo usa el pull-to-refresh).
          */
-        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._stream = createRefreshableStream(() => this.notifs.getAll(this.resolvedConfig().maxLoad), {
+            fallback: [],
+            // `notifs.getAll()` YA gatea internamente por `firebaseAuthReady`. Si el
+            // stream también gateara, serían DOS esperas de auth apiladas.
+            gateOnFirebaseAuth: false,
+            // Cold start de PWA en iOS puede pasar de 8s en redes lentas; con 15s
+            // evitamos el falso estado de error.
+            firstEmitTimeoutMs: 15000,
         });
-        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;
+        /** True si el stream falló tras agotar reintentos → muestra estado de error. */
+        this.streamError = this._stream.error;
+        this.loading = computed(() => this._stream.data() === null);
+        /**
+         * Notifs reales mostradas. Filtramos docs sin título Y sin body — son ruido
+         * (típicamente sentinel/system writes pre-schema con title/body opcionales).
+         */
+        this.allNotifs = computed(() => (this._stream.data() ?? []).filter(n => !!(n.title && n.title.trim()) || !!(n.body && n.body.trim())));
+        this.hasMore = computed(() => this.allNotifs().length > this._pageSize());
+        this.showMarkAll = computed(() => this.resolvedConfig().enableMarkAll && !this.loading() && this.allNotifs().some(n => !n.isRead));
+        /** Sub-conjunto paginado, agrupado por período. */
+        this.groups = computed(() => {
+            const items = this.allNotifs().slice(0, this._pageSize());
+            const now = new Date();
+            const buckets = {
+                today: [],
+                thisMonth: [],
+                earlier: [],
+            };
+            for (const n of items) {
+                buckets[this.bucketOf(n, now)].push(n);
             }
+            const out = [];
+            if (buckets.today.length) {
+                out.push({ key: 'today', label: this.tt('groupToday'), items: buckets.today });
+            }
+            if (buckets.thisMonth.length) {
+                out.push({
+                    key: 'thisMonth',
+                    label: this.tt('groupThisMonth'),
+                    items: buckets.thisMonth,
+                });
+            }
+            if (buckets.earlier.length) {
+                out.push({ key: 'earlier', label: this.tt('groupEarlier'), items: buckets.earlier });
+            }
+            return out;
         });
-        this.alertVariant = computed(() => {
-            const s = this.state();
-            if (s === 'error' || s === 'blocked')
-                return 'warning';
-            if (s === 'unsupported')
-                return 'danger';
-            return 'info';
+        this.pageTitle = computed(() => this.tt('pageTitle'));
+        this.pageDescription = computed(() => this.tt('pageDescription'));
+        // CTA "activa las notificaciones push" — visible cuando pushEnabled() es false.
+        this.ctaTitle = computed(() => this.tt('pushOffTitle'));
+        this.ctaHint = computed(() => this.tt('pushOffHint'));
+        this.ctaButtonProps = computed(() => ({
+            text: this.tt('pushOffCta'),
+            color: 'dark',
+            fill: 'outline',
+            size: 'small',
+            shape: 'round',
+            type: 'button',
+        }));
+        /**
+         * Estado de error de carga: convierte el error del stream en
+         * `EmptyStateMetadata` via el helper canónico `createErrorStateProps`.
+         * El helper decide variante (`offline` vs `error`) por `isNetwork`.
+         * Null cuando el stream no ha fallado.
+         */
+        this.errorState = computed(() => {
+            this.i18n.lang();
+            const err = this.streamError();
+            if (!err)
+                return null;
+            return createErrorStateProps(err, {
+                title: {
+                    offline: this.tt('offlineTitle'),
+                    error: this.tt('loadErrorTitle'),
+                },
+                description: {
+                    offline: this.tt('offlineHint'),
+                    error: interpretError(err).message || this.tt('loadErrorHint'),
+                },
+                retryLabel: this.tt('retryCta'),
+                onRetry: () => this._stream.reload(),
+                retrying: this.loading(),
+            });
         });
-        this.alertIcon = computed(() => {
-            const s = this.state();
-            if (s === 'unsupported')
-                return 'close-circle-outline';
-            return 'alert-circle-outline';
+        /**
+         * Estado vacío (lista real = 0 notificaciones, sin error de carga).
+         * Se construye manualmente con `variant: 'empty'` — sin helper de error.
+         */
+        this.emptyStateProps = computed(() => {
+            this.i18n.lang();
+            return {
+                variant: 'empty',
+                icon: 'notifications-off-outline',
+                title: this.tt('empty'),
+                description: this.tt('emptyHint'),
+                action: {
+                    label: this.tt('emptyCta'),
+                    handler: () => this.onGoToSettings(),
+                },
+            };
         });
-        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'),
+        this.seeMore = computed(() => this.tt('seeMore'));
+        this.seeLess = computed(() => this.tt('seeLess'));
+        this.markAllButtonProps = computed(() => ({
+            text: this.tt('markAll'),
             color: 'dark',
             fill: 'outline',
+            size: 'small',
+            shape: 'round',
+            type: 'button',
+            icon: { name: 'checkmark-done-outline', slot: 'start' },
+            state: this._bulkBusy() ? ComponentStates.WORKING : ComponentStates.ENABLED,
+        }));
+        this.loadMoreButtonProps = computed(() => ({
+            text: this.tt('loadMore'),
+            color: 'dark',
+            fill: 'clear',
             size: 'default',
             shape: 'round',
             type: 'button',
-            icon: { name: 'refresh-outline', slot: 'start' },
-            state: this._busy() !== null ? ComponentStates.WORKING : ComponentStates.ENABLED,
+            state: this._loadingMore() ? 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.i18n.registerContent(ns, NOTIFICATIONS_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>`.
+     * Registra el pull-to-refresh estándar. Usamos `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());
+        this.pageRefresh.register(() => this.reload());
     }
+    /** Quita el handler al destruir la vista — el refresher desaparece. */
     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);
+    /**
+     * Refresh manual: re-suscribe el stream Firestore (listener nuevo) vía el
+     * helper. Resuelve tras un margen breve — el stream es real-time y re-emite
+     * en milisegundos; el delay sólo mantiene el spinner visible lo justo.
+     */
+    async reload() {
+        this._stream.reload();
+        await new Promise(r => setTimeout(r, 700));
     }
     // ---------------------------------------------------------------------------
-    // Actions
+    // Per-item helpers (puros — usables desde template).
     // ---------------------------------------------------------------------------
+    openButtonProps() {
+        return {
+            text: this.tt('open'),
+            color: 'dark',
+            fill: 'clear',
+            size: 'small',
+            shape: 'round',
+            type: 'button',
+            icon: { name: 'open-outline', slot: 'end' },
+        };
+    }
+    isExpanded(id) {
+        return this._expanded().has(id);
+    }
+    toggleExpand(id) {
+        const next = new Set(this._expanded());
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        this._expanded.set(next);
+    }
+    isLong(body) {
+        if (!body)
+            return false;
+        return body.length > 110 || body.includes('\n');
+    }
     /**
-     * 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.
+     * Icon resolver con orden de fallback:
+     * 1. notif.payload.icon (forward-compat, sin breaking change en schema)
+     * 2. mapa por notif.type
+     * 3. default notifications-outline
      */
-    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;
+    resolveIcon(n) {
+        const hint = n.payload?.['icon'];
+        if (hint?.value) {
+            if (hint.type === 'image' || hint.type === 'avatar') {
+                return { kind: hint.type, src: hint.value };
             }
-            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',
-                });
+            // Ignoramos hint.color — todos los iconos van en dark por convención UX.
+            return { kind: 'ionicon', name: hint.value, color: 'dark' };
+        }
+        const t = n.type;
+        const name = (() => {
+            switch (t) {
+                case 'approval':
+                    return 'checkmark-circle-outline';
+                case 'chat':
+                case 'chatbot':
+                    return 'chatbubble-outline';
+                case 'comment':
+                    return 'chatbox-ellipses-outline';
+                case 'reminder':
+                    return 'alarm-outline';
+                case 'system':
+                    return 'cog-outline';
+                case 'user':
+                case 'mention':
+                    return 'person-outline';
+                case 'document':
+                    return 'document-text-outline';
+                default:
+                    return 'notifications-outline';
             }
+        })();
+        return { kind: 'ionicon', name, color: 'dark' };
+    }
+    ioniconName(n) {
+        const r = this.resolveIcon(n);
+        return r.kind === 'ionicon' ? r.name : '';
+    }
+    ioniconColor(n) {
+        const r = this.resolveIcon(n);
+        return r.kind === 'ionicon' ? r.color : undefined;
+    }
+    imageSrc(n) {
+        const r = this.resolveIcon(n);
+        return r.kind === 'image' || r.kind === 'avatar' ? r.src : '';
+    }
+    ionColor(token) {
+        if (!token)
+            return 'var(--ion-color-primary)';
+        return `var(--ion-color-${token})`;
+    }
+    relativeTime(n) {
+        const d = n.createdAt instanceof Date ? n.createdAt : null;
+        if (!d)
+            return '';
+        const diffMs = Date.now() - d.getTime();
+        const min = Math.floor(diffMs / 60000);
+        if (min < 1)
+            return this.tt('timeNow');
+        if (min < 60)
+            return this.tt('timeMinutes').replace('{n}', String(min));
+        const h = Math.floor(min / 60);
+        if (h < 24)
+            return this.tt('timeHours').replace('{n}', String(h));
+        const days = Math.floor(h / 24);
+        return this.tt('timeDays').replace('{n}', String(days));
+    }
+    /** Devuelve label "Desde {appName}" si la notif viene de otra app, sino null. */
+    showCrossAppBadge(n) {
+        const currentApp = 'showcase';
+        if (!n.appId || n.appId === currentApp)
+            return null;
+        return this.tt('crossApp').replace('{app}', n.appId);
+    }
+    // ---------------------------------------------------------------------------
+    // Actions
+    // ---------------------------------------------------------------------------
+    async onOpen(n) {
+        try {
+            const result = await this.action.open(n);
+            this.resolvedConfig().onNotificationOpen?.(n, result);
         }
-        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',
+        catch (err) {
+            this.errors.handle(err, {
+                context: 'notifications.open',
+                fallbackKey: 'openError',
+                i18nNamespace: this.ns,
             });
         }
-        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);
+    async onMarkAll() {
+        if (this._bulkBusy())
+            return;
+        this._bulkBusy.set(true);
         try {
-            await this.auth.disableNotifications();
-            if (this.prefs.notificationsMaster()) {
-                await this.prefs.setNotificationsMaster(false);
-            }
+            await this.notifs.markAllAsRead();
             this.toast.show({
-                message: this.tt('disableSuccess'),
-                duration: 2000,
+                message: this.tt('markedAllSuccess'),
                 color: 'dark',
+                duration: 2500,
                 position: 'top',
             });
-            this.resolvedConfig().onPushDisabled?.();
         }
-        catch {
-            this._lastFailed.set(true);
+        catch (err) {
+            this.errors.handle(err, {
+                context: 'notifications.markAll',
+                fallbackKey: 'markedAllError',
+                i18nNamespace: this.ns,
+            });
         }
         finally {
-            await this.refreshBrowserState();
-            this._busy.set(null);
+            this._bulkBusy.set(false);
         }
     }
-    /** Reintentar la secuencia completa de activación, sin importar el estado actual. */
-    async onRetry() {
-        this._lastFailed.set(false);
-        await this.onEnable();
+    onLoadMore() {
+        if (this._loadingMore())
+            return;
+        this._loadingMore.set(true);
+        // Slice viene del cache local — no hay fetch real, pero un breve spinner
+        // confirma al user que el click registró y suaviza la aparición de items.
+        setTimeout(() => {
+            this._pageSize.update(n => n + this.pageStep);
+            this._loadingMore.set(false);
+        }, 250);
     }
-    toggleDetails() {
-        this.showDetails.update(v => !v);
+    onGoToSettings() {
+        this.nav.navigateByUrl(this.resolvedConfig().settingsNotificationsPath);
     }
     // ---------------------------------------------------------------------------
-    // Privados
+    // Grouping helpers
     // ---------------------------------------------------------------------------
-    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;
+    bucketOf(n, now) {
+        const d = n.createdAt instanceof Date ? n.createdAt : null;
+        if (!d)
+            return 'earlier';
+        if (d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate()) {
+            return 'today';
         }
-    }
-    /**
-     * 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;
+        if (d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth()) {
+            return 'thisMonth';
         }
-        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;
+        return 'earlier';
     }
     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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NotificationsViewComponent, isStandalone: true, selector: "val-notifications-view", inputs: { config: "config" }, ngImport: i0, template: `
     <div class="page">
       <header class="page-header">
         <val-display [props]="{ size: 'small', color: 'dark', content: pageTitle() }" />
@@ -50537,112 +50751,135 @@ class NotificationPreferencesViewComponent {
             content: pageDescription(),
           }"
         />
+        @if (showMarkAll()) {
+          <div class="row-actions">
+            <val-button [props]="markAllButtonProps()" (click)="onMarkAll()" />
+          </div>
+        }
       </header>
 
-      @if (state() === 'needs-install') {
-        <section class="settings-section">
-          <val-title
-            [props]="{
-              size: 'medium',
-              color: 'dark',
-              bold: true,
-              content: tt('iosInstallTitle'),
-            }"
-          />
-          <div class="section-body">
+      @if (resolvedConfig().showPushOffCta && !pushEnabled()) {
+        <section class="notif-cta">
+          <ion-icon class="notif-cta__icon" name="notifications-off-outline" aria-hidden="true" />
+          <div class="notif-cta__body">
+            <val-text
+              [props]="{
+                content: ctaTitle(),
+                size: 'medium',
+                color: 'dark',
+                bold: true,
+              }"
+            />
             <val-text
               [props]="{
+                content: ctaHint(),
                 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 class="row-actions">
+              <val-button [props]="ctaButtonProps()" (click)="onGoToSettings()" />
+            </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 (loading()) {
+        <val-skeleton-layout [props]="{ preset: 'list', rows: 6 }" />
+      } @else if (errorState()) {
+        <val-empty-state [props]="errorState()!" />
+      } @else if (allNotifs().length === 0) {
+        <val-empty-state [props]="emptyStateProps()" />
+      } @else {
+        @for (group of groups(); track group.key) {
+          <section class="group">
             <val-title
               [props]="{
                 size: 'medium',
                 color: 'dark',
                 bold: true,
-                content: tt('simpleTitle'),
+                content: group.label,
               }"
             />
-            <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>
+            <ul class="notif-list">
+              @for (n of group.items; track n.id) {
+                <li class="notif" [class.notif--unread]="!n.isRead">
+                  <div class="notif__icon">
+                    @switch (resolveIcon(n).kind) {
+                      @case ('ionicon') {
+                        <ion-icon
+                          [name]="ioniconName(n)"
+                          [style.color]="ionColor(ioniconColor(n))"
+                          aria-hidden="true"
+                        />
+                      }
+                      @case ('image') {
+                        <img [src]="imageSrc(n)" alt="" loading="lazy" />
+                      }
+                      @case ('avatar') {
+                        <img class="notif__avatar" [src]="imageSrc(n)" alt="" loading="lazy" />
+                      }
+                    }
+                  </div>
 
-        @if (contextMessage(); as msg) {
-          <div class="alert" [class]="'alert--' + alertVariant()">
-            <ion-icon [name]="alertIcon()" aria-hidden="true" />
-            <span>{{ msg }}</span>
-          </div>
+                  <div class="notif__body">
+                    <div class="notif__head">
+                      <val-text
+                        [props]="{
+                          content: n.title || '—',
+                          size: 'medium',
+                          color: 'dark',
+                          bold: true,
+                        }"
+                      />
+                      <span class="notif__time">{{ relativeTime(n) }}</span>
+                    </div>
+                    @if (n.body) {
+                      <p class="notif__text" [class.notif__text--clamped]="!isExpanded(n.id) && isLong(n.body)">
+                        {{ n.body }}
+                      </p>
+                      @if (isLong(n.body)) {
+                        <button class="notif__expand" type="button" (click)="toggleExpand(n.id)">
+                          {{ isExpanded(n.id) ? seeLess() : seeMore() }}
+                        </button>
+                      }
+                    }
+                    @if (showCrossAppBadge(n); as appName) {
+                      <span class="notif__app">{{ appName }}</span>
+                    }
+                    @if (n.actionRoute) {
+                      <div class="row-actions row-actions--end">
+                        <val-button [props]="openButtonProps()" (click)="onOpen(n)" />
+                      </div>
+                    }
+                  </div>
+                </li>
+              }
+            </ul>
+          </section>
         }
 
-        @if (state() === 'error') {
-          <div class="row-actions">
-            <val-button [props]="retryButtonProps()" (click)="onRetry()" />
+        @if (hasMore()) {
+          <div class="row-actions row-actions--center">
+            <val-button [props]="loadMoreButtonProps()" (click)="onLoadMore()" />
           </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"] }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.row-actions{margin-top:12px}.row-actions--center{display:flex;justify-content:center;margin-top:20px}.row-actions--end{display:flex;justify-content:flex-end;margin-top:8px}.notif-cta{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:16px;border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));border-radius:14px;background:var(--ion-color-light)}.notif-cta__icon{font-size:24px;color:var(--ion-color-dark, #1a1a1a);flex-shrink:0;margin-top:2px}.notif-cta__body{display:flex;flex-direction:column;gap:2px}.group{padding:12px 0}.group+.group{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.notif-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px}.notif{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px;border-radius:12px;background:transparent;transition:background .12s ease}.notif--unread{background:var(--ion-color-light, rgba(0, 0, 0, .04))}.notif__icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ion-color-light, rgba(0, 0, 0, .06));overflow:hidden}.notif__icon ion-icon{font-size:22px}.notif__icon img{width:100%;height:100%;object-fit:cover}.notif__avatar{border-radius:50%}.notif__body{display:flex;flex-direction:column;gap:4px;min-width:0}.notif__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.notif__time{font-size:12px;color:var(--ion-color-medium, #92949c);flex-shrink:0}.notif__text{margin:0;font-size:14px;line-height:1.4;color:var(--ion-color-dark, #1a1a1a);white-space:pre-wrap}.notif__text--clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notif__expand{background:none;border:0;padding:0;font-size:13px;color:var(--ion-color-dark, #1a1a1a);cursor:pointer;align-self:flex-start;text-decoration:underline}.notif__app{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ion-color-medium, #92949c);margin-top:2px}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationPreferencesViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-notification-preferences-view', standalone: true, imports: [IonIcon, ToggleInputComponent, ButtonComponent, DisplayComponent, TitleComponent, TextComponent], template: `
+            args: [{ selector: 'val-notifications-view', standalone: true, imports: [
+                        IonIcon,
+                        DisplayComponent,
+                        TitleComponent,
+                        TextComponent,
+                        ButtonComponent,
+                        SkeletonLayoutComponent,
+                        EmptyStateComponent,
+                    ], template: `
     <div class="page">
       <header class="page-header">
         <val-display [props]="{ size: 'small', color: 'dark', content: pageTitle() }" />
@@ -50654,1827 +50891,1577 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             content: pageDescription(),
           }"
         />
+        @if (showMarkAll()) {
+          <div class="row-actions">
+            <val-button [props]="markAllButtonProps()" (click)="onMarkAll()" />
+          </div>
+        }
       </header>
 
-      @if (state() === 'needs-install') {
-        <section class="settings-section">
-          <val-title
-            [props]="{
-              size: 'medium',
-              color: 'dark',
-              bold: true,
-              content: tt('iosInstallTitle'),
-            }"
-          />
-          <div class="section-body">
+      @if (resolvedConfig().showPushOffCta && !pushEnabled()) {
+        <section class="notif-cta">
+          <ion-icon class="notif-cta__icon" name="notifications-off-outline" aria-hidden="true" />
+          <div class="notif-cta__body">
+            <val-text
+              [props]="{
+                content: ctaTitle(),
+                size: 'medium',
+                color: 'dark',
+                bold: true,
+              }"
+            />
             <val-text
               [props]="{
+                content: ctaHint(),
                 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 class="row-actions">
+              <val-button [props]="ctaButtonProps()" (click)="onGoToSettings()" />
+            </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 (loading()) {
+        <val-skeleton-layout [props]="{ preset: 'list', rows: 6 }" />
+      } @else if (errorState()) {
+        <val-empty-state [props]="errorState()!" />
+      } @else if (allNotifs().length === 0) {
+        <val-empty-state [props]="emptyStateProps()" />
+      } @else {
+        @for (group of groups(); track group.key) {
+          <section class="group">
             <val-title
               [props]="{
                 size: 'medium',
                 color: 'dark',
                 bold: true,
-                content: tt('simpleTitle'),
-              }"
-            />
-            <val-text
-              [props]="{
-                size: 'small',
-                color: 'medium',
-                bold: false,
-                content: tt('simpleDescription'),
+                content: group.label,
               }"
             />
-            @if (busyLabel(); as label) {
-              <span class="notif-row__busy">{{ label }}</span>
-            }
-          </div>
-          <div class="notif-row__control">
-            <val-toggle-input [props]="toggleProps()" />
-          </div>
-        </div>
+            <ul class="notif-list">
+              @for (n of group.items; track n.id) {
+                <li class="notif" [class.notif--unread]="!n.isRead">
+                  <div class="notif__icon">
+                    @switch (resolveIcon(n).kind) {
+                      @case ('ionicon') {
+                        <ion-icon
+                          [name]="ioniconName(n)"
+                          [style.color]="ionColor(ioniconColor(n))"
+                          aria-hidden="true"
+                        />
+                      }
+                      @case ('image') {
+                        <img [src]="imageSrc(n)" alt="" loading="lazy" />
+                      }
+                      @case ('avatar') {
+                        <img class="notif__avatar" [src]="imageSrc(n)" alt="" loading="lazy" />
+                      }
+                    }
+                  </div>
 
-        @if (contextMessage(); as msg) {
-          <div class="alert" [class]="'alert--' + alertVariant()">
-            <ion-icon [name]="alertIcon()" aria-hidden="true" />
-            <span>{{ msg }}</span>
-          </div>
+                  <div class="notif__body">
+                    <div class="notif__head">
+                      <val-text
+                        [props]="{
+                          content: n.title || '—',
+                          size: 'medium',
+                          color: 'dark',
+                          bold: true,
+                        }"
+                      />
+                      <span class="notif__time">{{ relativeTime(n) }}</span>
+                    </div>
+                    @if (n.body) {
+                      <p class="notif__text" [class.notif__text--clamped]="!isExpanded(n.id) && isLong(n.body)">
+                        {{ n.body }}
+                      </p>
+                      @if (isLong(n.body)) {
+                        <button class="notif__expand" type="button" (click)="toggleExpand(n.id)">
+                          {{ isExpanded(n.id) ? seeLess() : seeMore() }}
+                        </button>
+                      }
+                    }
+                    @if (showCrossAppBadge(n); as appName) {
+                      <span class="notif__app">{{ appName }}</span>
+                    }
+                    @if (n.actionRoute) {
+                      <div class="row-actions row-actions--end">
+                        <val-button [props]="openButtonProps()" (click)="onOpen(n)" />
+                      </div>
+                    }
+                  </div>
+                </li>
+              }
+            </ul>
+          </section>
         }
 
-        @if (state() === 'error') {
-          <div class="row-actions">
-            <val-button [props]="retryButtonProps()" (click)="onRetry()" />
+        @if (hasMore()) {
+          <div class="row-actions row-actions--center">
+            <val-button [props]="loadMoreButtonProps()" (click)="onLoadMore()" />
           </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: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}.page-header{margin-bottom:16px}.row-actions{margin-top:12px}.row-actions--center{display:flex;justify-content:center;margin-top:20px}.row-actions--end{display:flex;justify-content:flex-end;margin-top:8px}.notif-cta{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:16px;border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));border-radius:14px;background:var(--ion-color-light)}.notif-cta__icon{font-size:24px;color:var(--ion-color-dark, #1a1a1a);flex-shrink:0;margin-top:2px}.notif-cta__body{display:flex;flex-direction:column;gap:2px}.group{padding:12px 0}.group+.group{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.notif-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px}.notif{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px;border-radius:12px;background:transparent;transition:background .12s ease}.notif--unread{background:var(--ion-color-light, rgba(0, 0, 0, .04))}.notif__icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ion-color-light, rgba(0, 0, 0, .06));overflow:hidden}.notif__icon ion-icon{font-size:22px}.notif__icon img{width:100%;height:100%;object-fit:cover}.notif__avatar{border-radius:50%}.notif__body{display:flex;flex-direction:column;gap:4px;min-width:0}.notif__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.notif__time{font-size:12px;color:var(--ion-color-medium, #92949c);flex-shrink:0}.notif__text{margin:0;font-size:14px;line-height:1.4;color:var(--ion-color-dark, #1a1a1a);white-space:pre-wrap}.notif__text--clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notif__expand{background:none;border:0;padding:0;font-size:13px;color:var(--ion-color-dark, #1a1a1a);cursor:pointer;align-self:flex-start;text-decoration:underline}.notif__app{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ion-color-medium, #92949c);margin-top:2px}\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 el inbox de notificaciones (`val-notifications-view`) como
+ * ruta en una app del factory. El `config` se pasa por route `data`
+ * (`notificationsConfig`) y el componente lo lee como fallback de su
+ * `@Input() config`.
  *
  * @example
  * ```ts
- * // app.routes.ts (típicamente bajo settings)
- * export const settingsRoutes: Routes = [
- *   ...provideValtechNotificationPreferencesRoutes(),       // → notifications
+ * // app.routes.ts
+ * export const appRoutes: Routes = [
+ *   ...provideValtechNotificationsRoutes(),                 // → /app/notifications
+ *   { path: 'settings', loadChildren: () => ... },
  * ];
  *
  * // con config acotada:
- * ...provideValtechNotificationPreferencesRoutes({ config: { showDetails: false } }),
- * ...provideValtechNotificationPreferencesRoutes({ path: 'push' }),
+ * ...provideValtechNotificationsRoutes({ config: { enableMarkAll: false } }),
+ * ...provideValtechNotificationsRoutes({
+ *   config: { settingsNotificationsPath: '/app/preferences/push' },
+ * }),
  * ```
  */
-function provideValtechNotificationPreferencesRoutes(opts) {
+function provideValtechNotificationsRoutes(opts) {
     return [
         {
             path: opts?.path ?? 'notifications',
-            component: NotificationPreferencesViewComponent,
-            data: { notificationPreferencesConfig: opts?.config },
+            component: NotificationsViewComponent,
+            data: { notificationsConfig: opts?.config },
         },
     ];
 }
 
 /**
- * Consume el catálogo de permisos del backend (`GET /org/{orgId}/permissions-catalog`).
- * El backend es la fuente de verdad de qué permisos existen y de su alcance
- * (globales de plataforma vs. propios de una app). La respuesta incluye el
- * `appId` del request para que la vista distinga la app actual.
+ * 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.
  *
- * Promovido desde `showcase` a la lib bajo el proceso de ADR-021. Usa
- * `VALTECH_AUTH_CONFIG.apiUrl` (como `OrgService`) en vez del `environment` de la
- * app — la lib no importa el environment del consumer.
+ * Portado del override `Settings.Notifications` (showcase) bajo el proceso de
+ * ADR-021.
  */
-class PermissionCatalogService {
-    constructor(config, http) {
-        this.config = config;
-        this.http = http;
-    }
-    getCatalog(orgId) {
-        return this.http.get(`${this.config.apiUrl}/org/${orgId}/permissions-catalog`);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [VALTECH_AUTH_CONFIG]
-                }] }, { type: i1$3.HttpClient }] });
+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$1 = 'Settings.Notifications';
 /**
- * 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.
+ * `val-notification-preferences-view` — **preferencias de notificaciones push**
+ * (FCM) full-feature autocontenida (organism). Promovida desde `showcase` bajo el
+ * proceso de ADR-021.
  *
- * Portado EXACTO de `PERMISSIONS_I18N` (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).
  */
-const PERMISSIONS_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',
-    },
-};
-
-const DEFAULT_NAMESPACE$1 = 'Settings.Permissions';
-/**
- * `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.
- *
- * **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.
- *
- * 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.
- *
- * 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 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$1,
+                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;
-                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)));
-                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) {
-        const appPerms = [];
-        const orgPerms = [];
-        const otherByApp = new Map();
-        for (const perm of role.permissions) {
-            const [resource, action] = perm.split(':');
-            const entry = byResource.get(resource);
-            // internal (operación de plataforma) NUNCA se muestra a nivel de producto
-            // — defensa en profundidad junto al filtro del backend (ADR-024).
-            if (entry?.scope === 'internal') {
-                continue;
-            }
-            const label = this.permLabel(resource, action);
-            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 {
-                // org o desconocido → 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?.();
+        }
+        catch {
+            this._lastFailed.set(true);
+        }
+        finally {
+            await this.refreshBrowserState();
+            this._busy.set(null);
         }
-        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);
+    /** Reintentar la secuencia completa de activación, sin importar el estado actual. */
+    async onRetry() {
+        this._lastFailed.set(false);
+        await this.onEnable();
     }
-    appLabel(appId) {
-        const key = `app_${appId}`;
-        const label = this.tt(key);
-        return label === key ? appId : label;
+    toggleDetails() {
+        this.showDetails.update(v => !v);
     }
-    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);
+    // ---------------------------------------------------------------------------
+    // 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();
     }
-    permLabel(resource, action) {
-        if (resource === '*' && action === '*')
-            return this.tt('permAll');
-        const resKey = resource === '*' ? 'permAll' : `perm${resource.charAt(0).toUpperCase()}${resource.slice(1)}`;
-        const actKey = action === '*' ? 'permAll' : `perm${action.charAt(0).toUpperCase()}${action.slice(1)}`;
-        const res = this.tt(resKey);
-        const act = this.tt(actKey);
-        return `${res}: ${act}`;
+    /**
+     * 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;
+        }
     }
-    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: `
-    <div class="page">
-      <header class="page-header">
-        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
-        <val-title
-          [props]="{
-            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
+    /**
+     * 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>
+
+      @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 la vista Permisos (`val-permissions-view`) como ruta en una
- * app del factory. El `config` se pasa por route `data` (`permissionsConfig`) y el
+ * 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
- * // settings.routes.ts
+ * // app.routes.ts (típicamente bajo settings)
  * export const settingsRoutes: Routes = [
- *   ...provideValtechPermissionsRoutes(),                  // → /app/settings/permissions
- *   { path: 'preferences', loadComponent: () => ... },
+ *   ...provideValtechNotificationPreferencesRoutes(),       // → notifications
  * ];
  *
  * // con config acotada:
- * ...provideValtechPermissionsRoutes({ config: { showCustomRoles: false } }),
- * ...provideValtechPermissionsRoutes({ path: 'roles' }),
- * ```
- */
-function provideValtechPermissionsRoutes(opts) {
-    return [
-        {
-            path: opts?.path ?? 'permissions',
-            component: PermissionsViewComponent,
-            data: { permissionsConfig: opts?.config },
-        },
-    ];
-}
-
-/**
- * Helper para montar el bloque completo de Settings en una app del factory: el
- * HUB de navegación (`val-settings-hub`) + TODAS las vistas promovidas (Perfil,
- * Preferencias, Seguridad, Cuenta, Gestión org, Preferencias de notificaciones,
- * Permisos) + las rutas propias de la app (`extraRoutes`). Cada `include*` permite
- * apagar una sección; `hubPath`/`indexRedirectTo`/`*Path` permiten reubicar el hub
- * y las vistas para preservar URLs existentes.
- *
- * showcase lo consume (ver `settings.routes.ts` de showcase): hub en `preferences`,
- * preferences-view en `general`, index→redirect, `organization/new` por `extraRoutes`.
- *
- * @example
- * ```ts
- * // app.routes.ts
- * import { provideValtechSettingsRoutes } from 'valtech-components';
- *
- * export const routes: Routes = [
- *   {
- *     path: 'app',
- *     children: [
- *       ...provideValtechSettingsRoutes({
- *         hubConfig: { onLogout: () => auth.logoutWithConfirmation() },
- *         extraRoutes: [
- *           { path: 'security', loadComponent: () => ... },
- *         ],
- *       }),
- *     ],
- *   },
- * ];
+ * ...provideValtechNotificationPreferencesRoutes({ config: { showDetails: false } }),
+ * ...provideValtechNotificationPreferencesRoutes({ path: 'push' }),
  * ```
  */
-function provideValtechSettingsRoutes(opts) {
-    const basePath = opts?.basePath ?? 'settings';
-    const hubPath = opts?.hubPath ?? '';
-    const includeProfile = opts?.includeProfile ?? true;
-    const includePreferences = opts?.includePreferences ?? true;
-    const includeSecurity = opts?.includeSecurity ?? true;
-    const includeAccount = opts?.includeAccount ?? true;
-    const includeOrganization = opts?.includeOrganization ?? true;
-    const includeNotificationPreferences = opts?.includeNotificationPreferences ?? true;
-    const includePermissions = opts?.includePermissions ?? true;
+function provideValtechNotificationPreferencesRoutes(opts) {
     return [
         {
-            path: basePath,
-            children: [
-                ...(opts?.indexRedirectTo
-                    ? [{ path: '', redirectTo: opts.indexRedirectTo, pathMatch: 'full' }]
-                    : []),
-                {
-                    path: hubPath,
-                    component: SettingsHubComponent,
-                    data: { settingsHubConfig: opts?.hubConfig },
-                },
-                ...(includeProfile ? provideValtechProfileRoutes({ config: opts?.profileConfig }) : []),
-                ...(includePreferences
-                    ? provideValtechPreferencesRoutes({
-                        path: opts?.preferencesPath ?? 'preferences',
-                        config: opts?.preferencesConfig,
-                    })
-                    : []),
-                ...(includeSecurity ? provideValtechSecurityRoutes({ config: opts?.securityConfig }) : []),
-                ...(includeAccount ? provideValtechAccountRoutes({ config: opts?.accountConfig }) : []),
-                ...(includeOrganization
-                    ? provideValtechOrganizationRoutes({ config: opts?.organizationConfig })
-                    : []),
-                ...(includeNotificationPreferences
-                    ? provideValtechNotificationPreferencesRoutes({
-                        path: opts?.notificationPreferencesPath ?? 'notifications',
-                        config: opts?.notificationPreferencesConfig,
-                    })
-                    : []),
-                ...(includePermissions
-                    ? provideValtechPermissionsRoutes({ config: opts?.permissionsConfig })
-                    : []),
-                ...(opts?.extraRoutes ?? []),
-            ],
+            path: opts?.path ?? 'notifications',
+            component: NotificationPreferencesViewComponent,
+            data: { notificationPreferencesConfig: opts?.config },
         },
     ];
 }
 
 /**
- * Refreshable Stream
- *
- * Helper estándar para vistas que consumen datos de Firestore. Soporta DOS
- * modos — el caller decide cuál vía la `factory`:
- *
- *  - **one-shot** (recomendado por defecto): `() => from(svc.getAllOnce())`.
- *    Carga una vez y completa. Más barato — sin listener vivo.
- *  - **real-time**: `() => svc.getAll()`. Listener Firestore que auto-actualiza.
- *    Solo donde importa (inbox de notificaciones, badges).
- *
- * En ambos modos la primera suscripción se gatea por `firebaseAuthReady`
- * (sesión de Firebase Auth lista) — así el listener/lectura nunca se adjunta
- * antes de que `request.auth` esté disponible en las reglas de Firestore, lo
- * que cierra la ventana de `permission-denied` en cold start de PWA.
- *
- * El `retry` con backoff corto es solo red de seguridad para reconexiones
- * transitorias (no para cubrir cold start — eso lo cubre el gate de auth).
- */
-/**
- * Crea un stream refrescable a partir de una factory de Observable.
- *
- * DEBE llamarse en un injection context (field initializer o constructor) —
- * usa `toSignal`/`toObservable`/`inject` internamente.
- *
- * @param factory - Función que produce el Observable a consumir. El caller
- *   decide el modo: `() => from(svc.getAllOnce())` (one-shot) o
- *   `() => svc.getAll()` (real-time).
- * @param options - Configuración opcional (fallback, retry, gate).
- *
- * @example
- * ```typescript
- * // one-shot (recomendado por defecto)
- * private readonly stream = createRefreshableStream(
- *   () => from(this.svc.getAllOnce()),
- * );
- *
- * // real-time (inbox)
- * private readonly stream = createRefreshableStream(
- *   () => this.notifs.getAll(50),
- * );
- *
- * readonly items = this.stream.data;
- * readonly loading = this.stream.loading;
+ * Consume el catálogo de permisos del backend (`GET /org/{orgId}/permissions-catalog`).
+ * El backend es la fuente de verdad de qué permisos existen y de su alcance
+ * (globales de plataforma vs. propios de una app). La respuesta incluye el
+ * `appId` del request para que la vista distinga la app actual.
  *
- * ionViewWillEnter() {
- *   this.pageRefresh.register(() => this.stream.reload());
- * }
- * ```
+ * Promovido desde `showcase` a la lib bajo el proceso de ADR-021. Usa
+ * `VALTECH_AUTH_CONFIG.apiUrl` (como `OrgService`) en vez del `environment` de la
+ * app — la lib no importa el environment del consumer.
  */
-function createRefreshableStream(factory, options) {
-    const injector = options?.injector ?? inject(Injector);
-    const fallback = (options?.fallback ?? null);
-    const retryCount = options?.retryCount ?? 4;
-    const retryBaseDelayMs = options?.retryBaseDelayMs ?? 500;
-    const gateOnFirebaseAuth = options?.gateOnFirebaseAuth ?? true;
-    const authGateTimeoutMs = options?.authGateTimeoutMs ?? 20000;
-    const firstEmitTimeoutMs = options?.firstEmitTimeoutMs ?? 20000;
-    // FirebaseService es opcional — sin él (apps sin Firebase) no se gatea.
-    const firebase = gateOnFirebaseAuth ? injector.get(FirebaseService, null) : null;
-    const _reload = signal(0);
-    const _loading = signal(true);
-    const _error = signal(false);
-    // Gate de Firebase Auth: el stream no abre la primera suscripción hasta que
-    // la sesión esté confirmada. `race` con un `timer` de seguridad — si la
-    // sesión NUNCA se establece (token inválido, signInWithFirebase falló), el
-    // gate igual se libera tras `authGateTimeoutMs` y la factory procede: si no
-    // hay permiso terminará en estado `error`, jamás en skeleton infinito.
-    // Tag los dos inputs del `race` para distinguir en logs cuál ganó: la sesión
-    // de Firebase Auth (`auth-ready`) o el timeout de seguridad (`timeout`).
-    const authGate$ = firebase
-        ? race(firebase.firebaseAuthReady$.pipe(map$1(() => 'auth-ready')), timer(authGateTimeoutMs).pipe(map$1(() => 'timeout'))).pipe(take(1), tap(winner => {
-            if (winner === 'timeout') {
-                console.warn(`[RefreshStream] auth gate resolved by TIMEOUT after ${authGateTimeoutMs}ms ` +
-                    '(Firebase Auth session never confirmed)');
-            }
-            else {
-                console.log('[RefreshStream] auth gate resolved by firebaseAuthReady$ (session ready)');
-            }
-        }))
-        : of(true);
-    const data = toSignal(toObservable(_reload, { injector }).pipe(tap(() => {
-        _loading.set(true);
-        _error.set(false);
-    }), 
-    // Esperar a Firebase Auth listo antes de cada (re)suscripción. Como
-    // `firebaseAuthReady$` completa tras la primera emisión, las reloads
-    // posteriores resuelven el gate de inmediato (auth ya está listo).
-    switchMap(() => authGate$.pipe(switchMap(() => factory().pipe(tap(() => {
-        _loading.set(false);
-        _error.set(false);
-        console.log('[RefreshStream] factory emitted first value — loading=false');
-    }), 
-    // Backoff corto exponencial acotado — solo red de seguridad para
-    // reconexiones transitorias, NO para cubrir cold start.
-    retry({
-        count: retryCount,
-        delay: (_err, attempt) => timer(Math.min(retryBaseDelayMs * 2 ** (attempt - 1), 4000)),
-    }), 
-    // Techo absoluto para la PRIMERA emisión. Si la factory no emite
-    // ni valor ni error (servicio nunca inicializado → `EMPTY` →
-    // silencio), `timeout` dispara un error → `catchError` → estado
-    // `error`. Nunca skeleton perpetuo. Va DESPUÉS de `retry` para
-    // que cuente el tiempo total, no por intento.
-    timeout({ first: firstEmitTimeoutMs }), catchError(err => {
-        _loading.set(false);
-        _error.set(true);
-        console.error(`[RefreshStream] factory failed/timed out → error state: ${err instanceof Error ? err.message : String(err)}`);
-        return of(fallback);
-    })))))), { initialValue: null, injector });
-    return {
-        data,
-        loading: _loading.asReadonly(),
-        error: _error.asReadonly(),
-        reload: () => _reload.update(n => n + 1),
-    };
+class PermissionCatalogService {
+    constructor(config, http) {
+        this.config = config;
+        this.http = http;
+    }
+    getCatalog(orgId) {
+        return this.http.get(`${this.config.apiUrl}/org/${orgId}/permissions-catalog`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, deps: [{ token: VALTECH_AUTH_CONFIG }, { token: i1$3.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, providedIn: 'root' }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionCatalogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [VALTECH_AUTH_CONFIG]
+                }] }, { type: i1$3.HttpClient }] });
 
 /**
- * Defaults i18n (es/en) embebidos en `val-notifications-view`. Auto-registrados
- * en el constructor del componente si el consumer no proveyó el namespace
- * (`Notifications` por default). SOLO incluye las keys que la vista 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 del override `Notifications` (showcase) bajo el proceso de ADR-021.
+ * Portado EXACTO de `PERMISSIONS_I18N` (showcase) bajo el proceso de ADR-021.
  */
-const NOTIFICATIONS_VIEW_I18N = {
+const PERMISSIONS_VIEW_I18N = {
     es: {
-        pageTitle: 'Notificaciones',
-        pageDescription: 'Tu bandeja de mensajes y actualizaciones',
-        groupToday: 'Hoy',
-        groupThisMonth: 'Este mes',
-        groupEarlier: 'Anteriores',
-        empty: 'Aún no tienes notificaciones',
-        emptyHint: 'Activa las notificaciones para recibir actualizaciones, alertas y novedades importantes.',
-        emptyCta: 'Ir a configuración',
-        loadErrorTitle: 'No pudimos cargar tus notificaciones',
-        loadErrorHint: 'Revisa tu conexión e inténtalo de nuevo. Tus notificaciones siguen guardadas.',
-        offlineTitle: 'Sin conexión',
-        offlineHint: 'No hay acceso a la red. Reconéctate e intenta de nuevo.',
-        retryCta: 'Reintentar',
-        pushOffTitle: 'No recibirás avisos',
-        pushOffHint: 'Puedes leer tus mensajes aquí, pero las notificaciones push están desactivadas. Actívalas para recibir avisos en tu dispositivo.',
-        pushOffCta: 'Activar notificaciones',
-        loading: 'Cargando…',
-        loadMore: 'Cargar más',
-        seeMore: 'Ver más',
-        seeLess: 'Ver menos',
-        open: 'Ver',
-        markAll: 'Marcar todas como leídas',
-        unread: 'No leída',
-        crossApp: 'Desde {app}',
-        timeNow: 'ahora',
-        timeMinutes: 'hace {n} min',
-        timeHours: 'hace {n} h',
-        timeDays: 'hace {n} d',
-        markedAllSuccess: 'Notificaciones marcadas como leídas.',
-        markedAllError: 'No se pudo marcar todas como leídas.',
-        openError: 'No se pudo abrir la notificación.',
+        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: 'Notifications',
-        pageDescription: 'Your inbox of messages and updates',
-        groupToday: 'Today',
-        groupThisMonth: 'This month',
-        groupEarlier: 'Earlier',
-        empty: 'No notifications yet',
-        emptyHint: 'Enable notifications to receive updates, alerts and important news.',
-        emptyCta: 'Go to settings',
-        loadErrorTitle: "We couldn't load your notifications",
-        loadErrorHint: 'Check your connection and try again. Your notifications are still saved.',
-        offlineTitle: 'No connection',
-        offlineHint: 'No network access. Reconnect and try again.',
-        retryCta: 'Retry',
-        pushOffTitle: "You won't get alerts",
-        pushOffHint: 'You can read your messages here, but push notifications are off. Turn them on to get alerts on your device.',
-        pushOffCta: 'Enable notifications',
-        loading: 'Loading…',
-        loadMore: 'Load more',
-        seeMore: 'See more',
-        seeLess: 'See less',
-        open: 'Open',
-        markAll: 'Mark all as read',
-        unread: 'Unread',
-        crossApp: 'From {app}',
-        timeNow: 'now',
-        timeMinutes: '{n} min ago',
-        timeHours: '{n} h ago',
-        timeDays: '{n} d ago',
-        markedAllSuccess: 'Notifications marked as read.',
-        markedAllError: 'Could not mark all as read.',
-        openError: 'Could not open notification.',
-    },
-};
-
-addIcons({
-    alarmOutline,
-    chatboxEllipsesOutline,
-    chatbubbleOutline,
-    checkmarkCircleOutline,
-    checkmarkDoneOutline,
-    cloudOfflineOutline,
-    cogOutline,
-    documentTextOutline,
-    notificationsOffOutline,
-    notificationsOutline,
-    openOutline,
-    personOutline,
-});
-const DEFAULT_NAMESPACE = 'Notifications';
-const DEFAULT_SETTINGS_PATH = '/app/settings/notifications';
-const DEFAULT_PAGE_SIZE = 10;
-const DEFAULT_MAX_LOAD = 50;
+        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 = 'Settings.Permissions';
 /**
- * `val-notifications-view` — inbox de notificaciones full-feature autocontenido
- * (organism). 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.
  *
- * Separado de `/app/settings/notifications` (que controla permiso FCM + master
- * toggle). Aquí el user lee/abre/marca-leídas sus mensajes.
+ * **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.
  *
- * - **Stream real-time** vía `NotificationsService.getAll(maxLoad)` envuelto en
- *   `createRefreshableStream` (gateado por `firebaseAuthReady`, retry corto,
- *   `firstEmitTimeoutMs: 15000`). Estados: loading (skeleton), error
- *   (`val-empty-state` + reintentar), empty (`val-empty-state` + CTA), data
- *   (lista agrupada Hoy / Este mes / Anteriores).
- * - **Abrir** una notif → `NotificationActionService.open()` (markRead +
- *   switch-org + navegar/handoff cross-app). Hook `onNotificationOpen` opcional.
- * - **Marcar todas como leídas** (gateado por `enableMarkAll`).
- * - **CTA push-off** cuando el permiso del navegador no está concedido (gateado
- *   por `showPushOffCta`); navega a `settingsNotificationsPath`.
- * - **Paginación soft** — slice local (`pageSize`, +`pageSize` por click) sobre el
- *   cache del stream; el tope de fetch es `maxLoad`.
- * - **i18n auto-registrado** es/en bajo `i18nNamespace` (default `Notifications`).
+ * 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.
  *
- * NO renderiza ion-content — vive dentro de val-page-wrapper. `Router` y
- * `ActivatedRoute` se inyectan `{ optional: true }` → funciona sin router
- * (embebida / Storybook). El forward-compat icon resolver lee `notif.payload.icon`
- * si existe (`{ type, value, color? }`), cae a un mapa por `notif.type`, luego a
- * `notifications-outline`.
+ * 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 NotificationsViewComponent {
+class PermissionsViewComponent {
     /** Namespace i18n resuelto (capturado para llamadas no-reactivas). */
     get ns() {
         return this.resolvedConfig().i18nNamespace;
     }
-    /** Paso de paginación soft (revela +N por "cargar más"). */
-    get pageStep() {
-        return this.resolvedConfig().pageSize;
-    }
     constructor() {
-        this.nav = inject(NavigationService);
         this.i18n = inject(I18nService);
-        this.notifs = inject(NotificationsService);
-        this.action = inject(NotificationActionService);
-        this.toast = inject(ToastService);
-        this.errors = inject(ValtechErrorService);
+        this.orgService = inject(OrgService);
+        this.catalog = inject(PermissionCatalogService);
         this.auth = inject(AuthService);
-        this.pageRefresh = inject(PageRefreshService);
-        // `ActivatedRoute` opcional → la vista funciona embebida / en Storybook sin
-        // router (solo lo usa para leer el route data de config como fallback). La
-        // navegación va por `NavigationService` (wrapper opcional sobre `Router`).
+        this.nav = inject(NavigationService);
         this.route = inject(ActivatedRoute, { optional: true });
         this.resolvedConfig = computed(() => {
-            const fromRoute = (this.route?.snapshot.data['notificationsConfig'] ?? {});
+            const fromRoute = (this.route?.snapshot.data['permissionsConfig'] ?? {});
             const merged = { ...fromRoute, ...(this.config ?? {}) };
             return {
-                showPushOffCta: merged.showPushOffCta ?? true,
-                enableMarkAll: merged.enableMarkAll ?? true,
-                settingsNotificationsPath: merged.settingsNotificationsPath ?? DEFAULT_SETTINGS_PATH,
+                showSystemRoles: merged.showSystemRoles ?? true,
+                showCustomRoles: merged.showCustomRoles ?? true,
                 i18nNamespace: merged.i18nNamespace ?? DEFAULT_NAMESPACE,
-                pageSize: merged.pageSize ?? DEFAULT_PAGE_SIZE,
-                maxLoad: merged.maxLoad ?? DEFAULT_MAX_LOAD,
-                onNotificationOpen: merged.onNotificationOpen,
-            };
-        });
-        this._expanded = signal(new Set());
-        this._pageSize = signal(this.resolvedConfig().pageSize);
-        this._bulkBusy = signal(false);
-        this._loadingMore = signal(false);
-        /**
-         * Push activado = permiso del navegador en `granted`. Si NO está activado,
-         * el user puede leer el inbox (Firestore) pero NO recibirá push en su
-         * dispositivo → mostramos una card que lo invita a ir a configuración.
-         * Se evalúa en cada montaje de la vista.
-         */
-        this.pushEnabled = signal(this.auth.getNotificationPermissionState() === 'granted');
-        /**
-         * Stream firestore real-time vía el helper estándar `createRefreshableStream`
-         * (modo real-time: factory devuelve un listener vivo `notifs.getAll(maxLoad)`).
-         *
-         * El helper gatea la primera suscripción por `firebaseAuthReady`, aplica un
-         * `retry` corto con backoff y, tras agotar reintentos, emite el fallback (`[]`)
-         * y marca `error` — estado de error en UI, no skeleton infinito. `reload()`
-         * re-suscribe el stream completo (lo usa el pull-to-refresh).
-         */
-        this._stream = createRefreshableStream(() => this.notifs.getAll(this.resolvedConfig().maxLoad), {
-            fallback: [],
-            // `notifs.getAll()` YA gatea internamente por `firebaseAuthReady`. Si el
-            // stream también gateara, serían DOS esperas de auth apiladas.
-            gateOnFirebaseAuth: false,
-            // Cold start de PWA en iOS puede pasar de 8s en redes lentas; con 15s
-            // evitamos el falso estado de error.
-            firstEmitTimeoutMs: 15000,
-        });
-        /** True si el stream falló tras agotar reintentos → muestra estado de error. */
-        this.streamError = this._stream.error;
-        this.loading = computed(() => this._stream.data() === null);
-        /**
-         * Notifs reales mostradas. Filtramos docs sin título Y sin body — son ruido
-         * (típicamente sentinel/system writes pre-schema con title/body opcionales).
-         */
-        this.allNotifs = computed(() => (this._stream.data() ?? []).filter(n => !!(n.title && n.title.trim()) || !!(n.body && n.body.trim())));
-        this.hasMore = computed(() => this.allNotifs().length > this._pageSize());
-        this.showMarkAll = computed(() => this.resolvedConfig().enableMarkAll && !this.loading() && this.allNotifs().some(n => !n.isRead));
-        /** Sub-conjunto paginado, agrupado por período. */
-        this.groups = computed(() => {
-            const items = this.allNotifs().slice(0, this._pageSize());
-            const now = new Date();
-            const buckets = {
-                today: [],
-                thisMonth: [],
-                earlier: [],
             };
-            for (const n of items) {
-                buckets[this.bucketOf(n, now)].push(n);
-            }
-            const out = [];
-            if (buckets.today.length) {
-                out.push({ key: 'today', label: this.tt('groupToday'), items: buckets.today });
-            }
-            if (buckets.thisMonth.length) {
-                out.push({
-                    key: 'thisMonth',
-                    label: this.tt('groupThisMonth'),
-                    items: buckets.thisMonth,
-                });
-            }
-            if (buckets.earlier.length) {
-                out.push({ key: 'earlier', label: this.tt('groupEarlier'), items: buckets.earlier });
-            }
-            return out;
-        });
-        this.pageTitle = computed(() => this.tt('pageTitle'));
-        this.pageDescription = computed(() => this.tt('pageDescription'));
-        // CTA "activa las notificaciones push" — visible cuando pushEnabled() es false.
-        this.ctaTitle = computed(() => this.tt('pushOffTitle'));
-        this.ctaHint = computed(() => this.tt('pushOffHint'));
-        this.ctaButtonProps = computed(() => ({
-            text: this.tt('pushOffCta'),
-            color: 'dark',
-            fill: 'outline',
-            size: 'small',
-            shape: 'round',
-            type: 'button',
-        }));
-        /**
-         * Estado de error de carga: convierte el error del stream en
-         * `EmptyStateMetadata` via el helper canónico `createErrorStateProps`.
-         * El helper decide variante (`offline` vs `error`) por `isNetwork`.
-         * Null cuando el stream no ha fallado.
-         */
-        this.errorState = computed(() => {
-            this.i18n.lang();
-            const err = this.streamError();
-            if (!err)
-                return null;
-            return createErrorStateProps(err, {
-                title: {
-                    offline: this.tt('offlineTitle'),
-                    error: this.tt('loadErrorTitle'),
-                },
-                description: {
-                    offline: this.tt('offlineHint'),
-                    error: interpretError(err).message || this.tt('loadErrorHint'),
-                },
-                retryLabel: this.tt('retryCta'),
-                onRetry: () => this._stream.reload(),
-                retrying: this.loading(),
-            });
         });
-        /**
-         * Estado vacío (lista real = 0 notificaciones, sin error de carga).
-         * Se construye manualmente con `variant: 'empty'` — sin helper de error.
-         */
-        this.emptyStateProps = computed(() => {
-            this.i18n.lang();
-            return {
-                variant: 'empty',
-                icon: 'notifications-off-outline',
-                title: this.tt('empty'),
-                description: this.tt('emptyHint'),
-                action: {
-                    label: this.tt('emptyCta'),
-                    handler: () => this.onGoToSettings(),
-                },
-            };
+        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.seeMore = computed(() => this.tt('seeMore'));
-        this.seeLess = computed(() => this.tt('seeLess'));
-        this.markAllButtonProps = computed(() => ({
-            text: this.tt('markAll'),
+        this.retryButtonProps = computed(() => ({
+            text: this.tt('retry'),
             color: 'dark',
             fill: 'outline',
-            size: 'small',
-            shape: 'round',
-            type: 'button',
-            icon: { name: 'checkmark-done-outline', slot: 'start' },
-            state: this._bulkBusy() ? ComponentStates.WORKING : ComponentStates.ENABLED,
-        }));
-        this.loadMoreButtonProps = computed(() => ({
-            text: this.tt('loadMore'),
-            color: 'dark',
-            fill: 'clear',
             size: 'default',
-            shape: 'round',
             type: 'button',
-            state: this._loadingMore() ? ComponentStates.WORKING : ComponentStates.ENABLED,
+            state: this.loading() ? ComponentStates.DISABLED : ComponentStates.ENABLED,
         }));
         const ns = this.ns;
         if (!this.i18n.hasNamespace(ns)) {
-            this.i18n.registerContent(ns, NOTIFICATIONS_VIEW_I18N);
+            this.i18n.registerContent(ns, PERMISSIONS_VIEW_I18N);
         }
         this.nav.setBackHeader('pageTitle', ns, { withMenu: true });
-        // Re-aplicar header en cambio de idioma.
-        effect(() => {
-            this.i18n.lang();
-            this.nav.setBackHeader('pageTitle', this.ns, { withMenu: true });
-        }, { allowSignalWrites: true });
-    }
-    /**
-     * Registra el pull-to-refresh estándar. Usamos `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.reload());
-    }
-    /** Quita el handler al destruir la vista — el refresher desaparece. */
-    ngOnDestroy() {
-        this.pageRefresh.unregister();
-    }
-    /**
-     * Refresh manual: re-suscribe el stream Firestore (listener nuevo) vía el
-     * helper. Resuelve tras un margen breve — el stream es real-time y re-emite
-     * en milisegundos; el delay sólo mantiene el spinner visible lo justo.
-     */
-    async reload() {
-        this._stream.reload();
-        await new Promise(r => setTimeout(r, 700));
-    }
-    // ---------------------------------------------------------------------------
-    // Per-item helpers (puros — usables desde template).
-    // ---------------------------------------------------------------------------
-    openButtonProps() {
-        return {
-            text: this.tt('open'),
-            color: 'dark',
-            fill: 'clear',
-            size: 'small',
-            shape: 'round',
-            type: 'button',
-            icon: { name: 'open-outline', slot: 'end' },
-        };
-    }
-    isExpanded(id) {
-        return this._expanded().has(id);
-    }
-    toggleExpand(id) {
-        const next = new Set(this._expanded());
-        if (next.has(id))
-            next.delete(id);
-        else
-            next.add(id);
-        this._expanded.set(next);
+        this.load();
+        connectPageRefresh(() => this.load());
     }
-    isLong(body) {
-        if (!body)
-            return false;
-        return body.length > 110 || body.includes('\n');
+    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;
+                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)));
+                this.loading.set(false);
+            },
+            error: err => {
+                this.loadError.set(err);
+                this.loading.set(false);
+            },
+        });
     }
-    /**
-     * Icon resolver con orden de fallback:
-     * 1. notif.payload.icon (forward-compat, sin breaking change en schema)
-     * 2. mapa por notif.type
-     * 3. default notifications-outline
-     */
-    resolveIcon(n) {
-        const hint = n.payload?.['icon'];
-        if (hint?.value) {
-            if (hint.type === 'image' || hint.type === 'avatar') {
-                return { kind: hint.type, src: hint.value };
+    buildRoleView(role, byResource, currentAppId) {
+        const appPerms = [];
+        const orgPerms = [];
+        const otherByApp = new Map();
+        for (const perm of role.permissions) {
+            const [resource, action] = 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;
             }
-            // Ignoramos hint.color — todos los iconos van en dark por convención UX.
-            return { kind: 'ionicon', name: hint.value, color: 'dark' };
-        }
-        const t = n.type;
-        const name = (() => {
-            switch (t) {
-                case 'approval':
-                    return 'checkmark-circle-outline';
-                case 'chat':
-                case 'chatbot':
-                    return 'chatbubble-outline';
-                case 'comment':
-                    return 'chatbox-ellipses-outline';
-                case 'reminder':
-                    return 'alarm-outline';
-                case 'system':
-                    return 'cog-outline';
-                case 'user':
-                case 'mention':
-                    return 'person-outline';
-                case 'document':
-                    return 'document-text-outline';
-                default:
-                    return 'notifications-outline';
+            const label = this.permLabel(resource, action);
+            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);
             }
-        })();
-        return { kind: 'ionicon', name, color: 'dark' };
-    }
-    ioniconName(n) {
-        const r = this.resolveIcon(n);
-        return r.kind === 'ionicon' ? r.name : '';
-    }
-    ioniconColor(n) {
-        const r = this.resolveIcon(n);
-        return r.kind === 'ionicon' ? r.color : undefined;
-    }
-    imageSrc(n) {
-        const r = this.resolveIcon(n);
-        return r.kind === 'image' || r.kind === 'avatar' ? r.src : '';
-    }
-    ionColor(token) {
-        if (!token)
-            return 'var(--ion-color-primary)';
-        return `var(--ion-color-${token})`;
-    }
-    relativeTime(n) {
-        const d = n.createdAt instanceof Date ? n.createdAt : null;
-        if (!d)
-            return '';
-        const diffMs = Date.now() - d.getTime();
-        const min = Math.floor(diffMs / 60000);
-        if (min < 1)
-            return this.tt('timeNow');
-        if (min < 60)
-            return this.tt('timeMinutes').replace('{n}', String(min));
-        const h = Math.floor(min / 60);
-        if (h < 24)
-            return this.tt('timeHours').replace('{n}', String(h));
-        const days = Math.floor(h / 24);
-        return this.tt('timeDays').replace('{n}', String(days));
-    }
-    /** Devuelve label "Desde {appName}" si la notif viene de otra app, sino null. */
-    showCrossAppBadge(n) {
-        const currentApp = 'showcase';
-        if (!n.appId || n.appId === currentApp)
-            return null;
-        return this.tt('crossApp').replace('{app}', n.appId);
-    }
-    // ---------------------------------------------------------------------------
-    // Actions
-    // ---------------------------------------------------------------------------
-    async onOpen(n) {
-        try {
-            const result = await this.action.open(n);
-            this.resolvedConfig().onNotificationOpen?.(n, result);
         }
-        catch (err) {
-            this.errors.handle(err, {
-                context: 'notifications.open',
-                fallbackKey: 'openError',
-                i18nNamespace: this.ns,
-            });
+        const groups = [];
+        if (appPerms.length) {
+            groups.push({ key: 'app', label: this.tt('groupApp'), perms: appPerms });
         }
-    }
-    async onMarkAll() {
-        if (this._bulkBusy())
-            return;
-        this._bulkBusy.set(true);
-        try {
-            await this.notifs.markAllAsRead();
-            this.toast.show({
-                message: this.tt('markedAllSuccess'),
-                color: 'dark',
-                duration: 2500,
-                position: 'top',
+        if (orgPerms.length) {
+            groups.push({
+                key: 'org',
+                label: this.tt('groupOrg'),
+                perms: orgPerms,
             });
         }
-        catch (err) {
-            this.errors.handle(err, {
-                context: 'notifications.markAll',
-                fallbackKey: 'markedAllError',
-                i18nNamespace: this.ns,
+        for (const [appId, perms] of otherByApp) {
+            groups.push({
+                key: `other:${appId}`,
+                label: `${this.tt('groupOther')}: ${this.appLabel(appId)}`,
+                perms,
             });
         }
-        finally {
-            this._bulkBusy.set(false);
-        }
+        return {
+            id: role.id,
+            name: role.name,
+            description: role.description,
+            isSystem: role.isSystem,
+            groups,
+            hasPerms: groups.length > 0,
+        };
     }
-    onLoadMore() {
-        if (this._loadingMore())
-            return;
-        this._loadingMore.set(true);
-        // Slice viene del cache local — no hay fetch real, pero un breve spinner
-        // confirma al user que el click registró y suaviza la aparición de items.
-        setTimeout(() => {
-            this._pageSize.update(n => n + this.pageStep);
-            this._loadingMore.set(false);
-        }, 250);
+    tt(key) {
+        return this.i18n.t(key, this.ns);
     }
-    onGoToSettings() {
-        this.nav.navigateByUrl(this.resolvedConfig().settingsNotificationsPath);
+    appLabel(appId) {
+        const key = `app_${appId}`;
+        const label = this.tt(key);
+        return label === key ? appId : label;
     }
-    // ---------------------------------------------------------------------------
-    // Grouping helpers
-    // ---------------------------------------------------------------------------
-    bucketOf(n, now) {
-        const d = n.createdAt instanceof Date ? n.createdAt : null;
-        if (!d)
-            return 'earlier';
-        if (d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate()) {
-            return 'today';
-        }
-        if (d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth()) {
-            return 'thisMonth';
-        }
-        return 'earlier';
+    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);
     }
-    tt(key) {
-        return this.i18n.t(key, this.ns);
+    permLabel(resource, action) {
+        if (resource === '*' && action === '*')
+            return this.tt('permAll');
+        const resKey = resource === '*' ? 'permAll' : `perm${resource.charAt(0).toUpperCase()}${resource.slice(1)}`;
+        const actKey = action === '*' ? 'permAll' : `perm${action.charAt(0).toUpperCase()}${action.slice(1)}`;
+        const res = this.tt(resKey);
+        const act = this.tt(actKey);
+        return `${res}: ${act}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationsViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: NotificationsViewComponent, isStandalone: true, selector: "val-notifications-view", inputs: { config: "config" }, ngImport: i0, template: `
+    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: `
     <div class="page">
       <header class="page-header">
-        <val-display [props]="{ size: 'small', color: 'dark', content: pageTitle() }" />
+        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
         <val-title
           [props]="{
             size: 'large',
             color: 'dark',
             bold: false,
-            content: pageDescription(),
+            content: tt('pageDescription'),
           }"
         />
-        @if (showMarkAll()) {
-          <div class="row-actions">
-            <val-button [props]="markAllButtonProps()" (click)="onMarkAll()" />
-          </div>
-        }
       </header>
 
-      @if (resolvedConfig().showPushOffCta && !pushEnabled()) {
-        <section class="notif-cta">
-          <ion-icon class="notif-cta__icon" name="notifications-off-outline" aria-hidden="true" />
-          <div class="notif-cta__body">
-            <val-text
-              [props]="{
-                content: ctaTitle(),
-                size: 'medium',
-                color: 'dark',
-                bold: true,
-              }"
-            />
-            <val-text
-              [props]="{
-                content: ctaHint(),
-                size: 'small',
-                color: 'medium',
-                bold: false,
-              }"
-            />
-            <div class="row-actions">
-              <val-button [props]="ctaButtonProps()" (click)="onGoToSettings()" />
-            </div>
-          </div>
-        </section>
-      }
-
       @if (loading()) {
-        <val-skeleton-layout [props]="{ preset: 'list', rows: 6 }" />
-      } @else if (errorState()) {
-        <val-empty-state [props]="errorState()!" />
-      } @else if (allNotifs().length === 0) {
-        <val-empty-state [props]="emptyStateProps()" />
+        <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 {
-        @for (group of groups(); track group.key) {
-          <section class="group">
-            <val-title
-              [props]="{
-                size: 'medium',
-                color: 'dark',
-                bold: true,
-                content: group.label,
-              }"
-            />
-            <ul class="notif-list">
-              @for (n of group.items; track n.id) {
-                <li class="notif" [class.notif--unread]="!n.isRead">
-                  <div class="notif__icon">
-                    @switch (resolveIcon(n).kind) {
-                      @case ('ionicon') {
-                        <ion-icon
-                          [name]="ioniconName(n)"
-                          [style.color]="ionColor(ioniconColor(n))"
-                          aria-hidden="true"
-                        />
-                      }
-                      @case ('image') {
-                        <img [src]="imageSrc(n)" alt="" loading="lazy" />
-                      }
-                      @case ('avatar') {
-                        <img class="notif__avatar" [src]="imageSrc(n)" alt="" loading="lazy" />
-                      }
-                    }
+        @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>
-
-                  <div class="notif__body">
-                    <div class="notif__head">
-                      <val-text
-                        [props]="{
-                          content: n.title || '—',
-                          size: 'medium',
-                          color: 'dark',
-                          bold: true,
-                        }"
-                      />
-                      <span class="notif__time">{{ relativeTime(n) }}</span>
+                  @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>
-                    @if (n.body) {
-                      <p class="notif__text" [class.notif__text--clamped]="!isExpanded(n.id) && isLong(n.body)">
-                        {{ n.body }}
-                      </p>
-                      @if (isLong(n.body)) {
-                        <button class="notif__expand" type="button" (click)="toggleExpand(n.id)">
-                          {{ isExpanded(n.id) ? seeLess() : seeMore() }}
-                        </button>
-                      }
-                    }
-                    @if (showCrossAppBadge(n); as appName) {
-                      <span class="notif__app">{{ appName }}</span>
-                    }
-                    @if (n.actionRoute) {
-                      <div class="row-actions row-actions--end">
-                        <val-button [props]="openButtonProps()" (click)="onOpen(n)" />
+                  } @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>
-                </li>
+                  }
+                </div>
               }
-            </ul>
+            </div>
           </section>
         }
 
-        @if (hasMore()) {
-          <div class="row-actions row-actions--center">
-            <val-button [props]="loadMoreButtonProps()" (click)="onLoadMore()" />
-          </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>
         }
       }
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.row-actions{margin-top:12px}.row-actions--center{display:flex;justify-content:center;margin-top:20px}.row-actions--end{display:flex;justify-content:flex-end;margin-top:8px}.notif-cta{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:16px;border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));border-radius:14px;background:var(--ion-color-light)}.notif-cta__icon{font-size:24px;color:var(--ion-color-dark, #1a1a1a);flex-shrink:0;margin-top:2px}.notif-cta__body{display:flex;flex-direction:column;gap:2px}.group{padding:12px 0}.group+.group{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.notif-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px}.notif{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px;border-radius:12px;background:transparent;transition:background .12s ease}.notif--unread{background:var(--ion-color-light, rgba(0, 0, 0, .04))}.notif__icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ion-color-light, rgba(0, 0, 0, .06));overflow:hidden}.notif__icon ion-icon{font-size:22px}.notif__icon img{width:100%;height:100%;object-fit:cover}.notif__avatar{border-radius:50%}.notif__body{display:flex;flex-direction:column;gap:4px;min-width:0}.notif__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.notif__time{font-size:12px;color:var(--ion-color-medium, #92949c);flex-shrink:0}.notif__text{margin:0;font-size:14px;line-height:1.4;color:var(--ion-color-dark, #1a1a1a);white-space:pre-wrap}.notif__text--clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notif__expand{background:none;border:0;padding:0;font-size:13px;color:var(--ion-color-dark, #1a1a1a);cursor:pointer;align-self:flex-start;text-decoration:underline}.notif__app{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ion-color-medium, #92949c);margin-top:2px}\n"], dependencies: [{ kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }] }); }
+  `, 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationsViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionsViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-notifications-view', standalone: true, imports: [
-                        IonIcon,
-                        DisplayComponent,
-                        TitleComponent,
-                        TextComponent,
-                        ButtonComponent,
-                        SkeletonLayoutComponent,
-                        EmptyStateComponent,
-                    ], template: `
+            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: pageTitle() }" />
+        <val-display [props]="{ size: 'small', color: 'dark', content: tt('pageTitle') }" />
         <val-title
           [props]="{
             size: 'large',
             color: 'dark',
             bold: false,
-            content: pageDescription(),
+            content: tt('pageDescription'),
           }"
         />
-        @if (showMarkAll()) {
-          <div class="row-actions">
-            <val-button [props]="markAllButtonProps()" (click)="onMarkAll()" />
-          </div>
-        }
       </header>
 
-      @if (resolvedConfig().showPushOffCta && !pushEnabled()) {
-        <section class="notif-cta">
-          <ion-icon class="notif-cta__icon" name="notifications-off-outline" aria-hidden="true" />
-          <div class="notif-cta__body">
-            <val-text
-              [props]="{
-                content: ctaTitle(),
-                size: 'medium',
-                color: 'dark',
-                bold: true,
-              }"
-            />
-            <val-text
-              [props]="{
-                content: ctaHint(),
-                size: 'small',
-                color: 'medium',
-                bold: false,
-              }"
-            />
-            <div class="row-actions">
-              <val-button [props]="ctaButtonProps()" (click)="onGoToSettings()" />
-            </div>
-          </div>
-        </section>
-      }
-
       @if (loading()) {
-        <val-skeleton-layout [props]="{ preset: 'list', rows: 6 }" />
-      } @else if (errorState()) {
-        <val-empty-state [props]="errorState()!" />
-      } @else if (allNotifs().length === 0) {
-        <val-empty-state [props]="emptyStateProps()" />
+        <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 {
-        @for (group of groups(); track group.key) {
-          <section class="group">
-            <val-title
-              [props]="{
-                size: 'medium',
-                color: 'dark',
-                bold: true,
-                content: group.label,
-              }"
-            />
-            <ul class="notif-list">
-              @for (n of group.items; track n.id) {
-                <li class="notif" [class.notif--unread]="!n.isRead">
-                  <div class="notif__icon">
-                    @switch (resolveIcon(n).kind) {
-                      @case ('ionicon') {
-                        <ion-icon
-                          [name]="ioniconName(n)"
-                          [style.color]="ionColor(ioniconColor(n))"
-                          aria-hidden="true"
-                        />
-                      }
-                      @case ('image') {
-                        <img [src]="imageSrc(n)" alt="" loading="lazy" />
-                      }
-                      @case ('avatar') {
-                        <img class="notif__avatar" [src]="imageSrc(n)" alt="" loading="lazy" />
-                      }
-                    }
+        @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>
-
-                  <div class="notif__body">
-                    <div class="notif__head">
-                      <val-text
-                        [props]="{
-                          content: n.title || '—',
-                          size: 'medium',
-                          color: 'dark',
-                          bold: true,
-                        }"
-                      />
-                      <span class="notif__time">{{ relativeTime(n) }}</span>
+                  @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>
-                    @if (n.body) {
-                      <p class="notif__text" [class.notif__text--clamped]="!isExpanded(n.id) && isLong(n.body)">
-                        {{ n.body }}
-                      </p>
-                      @if (isLong(n.body)) {
-                        <button class="notif__expand" type="button" (click)="toggleExpand(n.id)">
-                          {{ isExpanded(n.id) ? seeLess() : seeMore() }}
-                        </button>
-                      }
-                    }
-                    @if (showCrossAppBadge(n); as appName) {
-                      <span class="notif__app">{{ appName }}</span>
-                    }
-                    @if (n.actionRoute) {
-                      <div class="row-actions row-actions--end">
-                        <val-button [props]="openButtonProps()" (click)="onOpen(n)" />
+                  } @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>
-                </li>
+                  }
+                </div>
               }
-            </ul>
+            </div>
           </section>
         }
 
-        @if (hasMore()) {
-          <div class="row-actions row-actions--center">
-            <val-button [props]="loadMoreButtonProps()" (click)="onLoadMore()" />
-          </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>
         }
       }
     </div>
-  `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.page-header{margin-bottom:16px}.row-actions{margin-top:12px}.row-actions--center{display:flex;justify-content:center;margin-top:20px}.row-actions--end{display:flex;justify-content:flex-end;margin-top:8px}.notif-cta{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;margin-bottom:16px;border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));border-radius:14px;background:var(--ion-color-light)}.notif-cta__icon{font-size:24px;color:var(--ion-color-dark, #1a1a1a);flex-shrink:0;margin-top:2px}.notif-cta__body{display:flex;flex-direction:column;gap:2px}.group{padding:12px 0}.group+.group{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.notif-list{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:10px}.notif{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px;border-radius:12px;background:transparent;transition:background .12s ease}.notif--unread{background:var(--ion-color-light, rgba(0, 0, 0, .04))}.notif__icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--ion-color-light, rgba(0, 0, 0, .06));overflow:hidden}.notif__icon ion-icon{font-size:22px}.notif__icon img{width:100%;height:100%;object-fit:cover}.notif__avatar{border-radius:50%}.notif__body{display:flex;flex-direction:column;gap:4px;min-width:0}.notif__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.notif__time{font-size:12px;color:var(--ion-color-medium, #92949c);flex-shrink:0}.notif__text{margin:0;font-size:14px;line-height:1.4;color:var(--ion-color-dark, #1a1a1a);white-space:pre-wrap}.notif__text--clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notif__expand{background:none;border:0;padding:0;font-size:13px;color:var(--ion-color-dark, #1a1a1a);cursor:pointer;align-self:flex-start;text-decoration:underline}.notif__app{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ion-color-medium, #92949c);margin-top:2px}\n"] }]
+  `, 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"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }] } });
 
 /**
- * Helper para montar el inbox de notificaciones (`val-notifications-view`) como
- * ruta en una app del factory. El `config` se pasa por route `data`
- * (`notificationsConfig`) y el componente lo lee como fallback de su
- * `@Input() 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
+ * componente lo lee como fallback de su `@Input() config`.
  *
  * @example
  * ```ts
- * // app.routes.ts
- * export const appRoutes: Routes = [
- *   ...provideValtechNotificationsRoutes(),                 // → /app/notifications
- *   { path: 'settings', loadChildren: () => ... },
+ * // settings.routes.ts
+ * export const settingsRoutes: Routes = [
+ *   ...provideValtechPermissionsRoutes(),                  // → /app/settings/permissions
+ *   { path: 'preferences', loadComponent: () => ... },
  * ];
  *
  * // con config acotada:
- * ...provideValtechNotificationsRoutes({ config: { enableMarkAll: false } }),
- * ...provideValtechNotificationsRoutes({
- *   config: { settingsNotificationsPath: '/app/preferences/push' },
- * }),
+ * ...provideValtechPermissionsRoutes({ config: { showCustomRoles: false } }),
+ * ...provideValtechPermissionsRoutes({ path: 'roles' }),
  * ```
  */
-function provideValtechNotificationsRoutes(opts) {
+function provideValtechPermissionsRoutes(opts) {
     return [
         {
-            path: opts?.path ?? 'notifications',
-            component: NotificationsViewComponent,
-            data: { notificationsConfig: opts?.config },
+            path: opts?.path ?? 'permissions',
+            component: PermissionsViewComponent,
+            data: { permissionsConfig: opts?.config },
         },
     ];
 }