shared-lib-angular 2.0.2 → 2.0.4

package/fesm2022/shared-lib-angular.mjs

@@ -20,14 +20,14 @@ import { CommonModule } from '@angular/common';
  * Versión actual de la librería @dinafi/frmk
  * Sincronizada con package.json
  */
-const VERSION = '2.0.2';
+const VERSION = '2.0.4';
 /**
  * Información completa de la versión
  */
 const VERSION_INFO = {
-    version: '2.0.2',
+    version: '2.0.4',
     name: 'shared-lib-angular',
-    buildDate: '2026-02-05T20:47:48.315Z',
+    buildDate: '2026-02-09T22:43:40.953Z',
     angular: '^20.0.0'
 };
 
@@ -340,19 +340,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+/**
+ * Keys de tokens OAuth/OIDC manejados por angular-oauth2-oidc y Keycloak.
+ * Única fuente de verdad — elimina listas duplicadas e inconsistentes.
+ */
+const TOKEN_KEYS = [
+    'access_token',
+    'refresh_token',
+    'id_token',
+    'token_type',
+    'expires_at',
+    'nonce',
+    'PKCE_verifier',
+    'code_verifier',
+    'session_state',
+    'id_token_claims_obj',
+    'id_token_expires_at',
+    'id_token_stored_at',
+    'access_token_stored_at'
+];
+/**
+ * Keys de estado OAuth que deben preservarse durante un callback
+ * (necesarias para validar code + state en el intercambio PKCE).
+ */
+const STATE_KEYS = new Set([
+    'nonce',
+    'PKCE_verifier',
+    'code_verifier',
+    'session_state',
+    'state'
+]);
+/**
+ * Servicio centralizado para gestión de tokens en localStorage / sessionStorage.
+ *
+ * - Elimina las 4+ listas de keys duplicadas e inconsistentes que existían en AuthService.
+ * - Opera simétricamente sobre ambos storages.
+ * - Soporta la key dinámica `refresh_token_{clientId}` que usa angular-oauth2-oidc.
+ * - Expone métodos públicos para que la plantilla pueda leer tokens sin acceder a storage directamente.
+ *
+ * @example
+ * // Desde la librería (AuthService):
+ * this.tokenStorage.clearAll();
+ *
+ * // Desde la plantilla (skeleton):
+ * const expired = this.tokenStorage.isTokenExpired();
+ */
+class TokenStorageService {
+    // ── Limpieza ──────────────────────────────────────────────────────
+    /**
+     * Limpia TODOS los tokens y estado OAuth de ambos storages.
+     * Incluye la key dinámica `refresh_token_{clientId}` si se proporciona.
+     *
+     * @param clientId — clientId de OAuth para limpiar `refresh_token_{clientId}` (opcional)
+     */
+    clearAll(clientId) {
+        TOKEN_KEYS.forEach(key => {
+            localStorage.removeItem(key);
+            sessionStorage.removeItem(key);
+        });
+        // Key dinámica de angular-oauth2-oidc
+        if (clientId) {
+            localStorage.removeItem(`refresh_token_${clientId}`);
+            sessionStorage.removeItem(`refresh_token_${clientId}`);
+        }
+        // También limpiar 'state' que no está en TOKEN_KEYS pero puede persistir
+        localStorage.removeItem('state');
+        sessionStorage.removeItem('state');
+    }
+    /**
+     * Limpia tokens pero MANTIENE las keys de estado OAuth necesarias para
+     * validar el callback (nonce, PKCE_verifier, code_verifier, session_state, state).
+     *
+     * Usar durante un callback OAuth antes de procesar el authorization code.
+     */
+    clearTokensKeepState() {
+        TOKEN_KEYS.forEach(key => {
+            if (!STATE_KEYS.has(key)) {
+                localStorage.removeItem(key);
+                sessionStorage.removeItem(key);
+            }
+        });
+        console.log('[TokenStorageService] Cleared tokens, kept state/nonce/PKCE for callback validation');
+    }
+    // ── Lectura ───────────────────────────────────────────────────────
+    /**
+     * Lee un valor de localStorage o sessionStorage (en ese orden de prioridad).
+     */
+    getItem(key) {
+        return localStorage.getItem(key) ?? sessionStorage.getItem(key);
+    }
+    /**
+     * Obtiene el refresh_token, incluyendo la variante dinámica `refresh_token_{clientId}`.
+     *
+     * @param clientId — clientId de OAuth (opcional)
+     */
+    getRefreshToken(clientId) {
+        const token = this.getItem('refresh_token');
+        if (token)
+            return token;
+        if (clientId) {
+            return localStorage.getItem(`refresh_token_${clientId}`)
+                ?? sessionStorage.getItem(`refresh_token_${clientId}`)
+                ?? null;
+        }
+        return null;
+    }
+    /**
+     * Obtiene el access_token de cualquier storage.
+     */
+    getAccessToken() {
+        return this.getItem('access_token');
+    }
+    // ── Estado ────────────────────────────────────────────────────────
+    /**
+     * Verifica si hay un token almacenado y está expirado.
+     * Retorna `false` si no existe `expires_at` (no hay token, no está "expirado").
+     */
+    isTokenExpired() {
+        const expiresAt = this.getItem('expires_at');
+        if (!expiresAt) {
+            return false;
+        }
+        return parseInt(expiresAt, 10) < Date.now();
+    }
+    // ── Utilidades ────────────────────────────────────────────────────
+    /**
+     * Elimina una key específica de ambos storages.
+     */
+    removeItem(key) {
+        localStorage.removeItem(key);
+        sessionStorage.removeItem(key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TokenStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TokenStorageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TokenStorageService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 class AuthService {
     oauthService;
     router;
     store;
+    tokenStorage;
     isAuthenticatedSubject$ = new BehaviorSubject(false);
     isAuthenticated$ = this.isAuthenticatedSubject$.asObservable();
     isDoneLoadingSubject$ = new BehaviorSubject(false);
     isDoneLoading$ = this.isDoneLoadingSubject$.asObservable();
     isInitialLogin = true;
-    constructor(oauthService, router, store) {
+    constructor(oauthService, router, store, tokenStorage) {
         this.oauthService = oauthService;
         this.router = router;
         this.store = store;
+        this.tokenStorage = tokenStorage;
         // IMPORTANTE: Limpiar tokens expirados ANTES de cualquier otra operación
         this.clearExpiredTokensOnStartup();
         this.oauthService.events
@@ -392,48 +533,11 @@ class AuthService {
             return;
         }
         // Verificar si hay un token y si está expirado
-        const expiresAt = localStorage.getItem('expires_at') || sessionStorage.getItem('expires_at');
-        if (expiresAt) {
-            const expirationTime = parseInt(expiresAt, 10);
-            const now = Date.now();
-            if (expirationTime < now) {
-                console.log('[AuthService] Expired token detected, clearing storage');
-                this.clearAllTokens();
-            }
+        if (this.tokenStorage.isTokenExpired()) {
+            console.log('[AuthService] Expired token detected, clearing storage');
+            this.tokenStorage.clearAll();
         }
     }
-    /**
-     * Limpia todos los tokens del storage
-     */
-    clearAllTokens() {
-        const keysToRemove = [
-            'access_token', 'refresh_token', 'id_token', 'token_type',
-            'expires_at', 'nonce', 'PKCE_verifier', 'session_state',
-            'id_token_claims_obj', 'id_token_expires_at', 'id_token_stored_at',
-            'access_token_stored_at'
-        ];
-        keysToRemove.forEach(key => {
-            localStorage.removeItem(key);
-            sessionStorage.removeItem(key);
-        });
-    }
-    /**
-     * Limpia tokens antiguos pero MANTIENE state, nonce y PKCE_verifier
-     * que son necesarios para validar el callback OAuth
-     */
-    clearOldTokensKeepState() {
-        // Solo limpiar tokens, NO state/nonce/PKCE_verifier
-        const keysToRemove = [
-            'access_token', 'refresh_token', 'id_token', 'token_type',
-            'expires_at', 'id_token_claims_obj', 'id_token_expires_at',
-            'id_token_stored_at', 'access_token_stored_at'
-        ];
-        keysToRemove.forEach(key => {
-            localStorage.removeItem(key);
-            sessionStorage.removeItem(key);
-        });
-        console.log('[AuthService] Cleared old tokens, kept state/nonce/PKCE for callback validation');
-    }
     handleSuccessfulAuthentication() {
         if (this.oauthService.hasValidAccessToken()) {
             this.isAuthenticatedSubject$.next(true);
@@ -484,28 +588,23 @@ class AuthService {
         this.isDoneLoadingSubject$.next(true);
     }
     /**
-     * Limpia todos los tokens del storage
+     * Limpia todos los tokens del storage y resetea OAuthService
      */
     clearTokenStorage() {
         this.oauthService.logOut(true); // true = no redirect, solo limpiar
-        localStorage.removeItem('access_token');
-        localStorage.removeItem('refresh_token');
-        localStorage.removeItem('id_token');
-        localStorage.removeItem('nonce');
-        localStorage.removeItem('expires_at');
-        sessionStorage.removeItem('access_token');
-        sessionStorage.removeItem('refresh_token');
-        sessionStorage.removeItem('id_token');
+        this.tokenStorage.clearAll();
     }
     /**
      * Verifica si el token actual está expirado
      */
     isTokenExpired() {
+        // Primero verificar vía OAuthService (tokens en memoria)
         const expiresAt = this.oauthService.getAccessTokenExpiration();
-        if (!expiresAt) {
-            return false; // Si no hay token, no está "expirado", simplemente no existe
+        if (expiresAt) {
+            return expiresAt < Date.now();
         }
-        return expiresAt < Date.now();
+        // Fallback: verificar en storage
+        return this.tokenStorage.isTokenExpired();
     }
     async runInitialLoginSequence() {
         try {
@@ -529,7 +628,7 @@ class AuthService {
             if (isOAuthCallback) {
                 console.log('[AuthService] OAuth callback detected, clearing old tokens before processing');
                 // Limpiar solo tokens, NO el state/nonce que necesitamos para validar el callback
-                this.clearOldTokensKeepState();
+                this.tokenStorage.clearTokensKeepState();
                 this.isInitialLogin = true;
                 await this.oauthService.tryLoginCodeFlow();
             }
@@ -571,18 +670,16 @@ class AuthService {
         if (hasCode) {
             console.log('[AuthService] OAuth callback detected: resetting OAuthService state');
             // Limpiar storage EXCEPTO state/nonce/PKCE
-            this.clearOldTokensKeepState();
+            this.tokenStorage.clearTokensKeepState();
             // CRÍTICO: Resetear propiedades internas de OAuthService
             // para que no valide tokens viejos en memoria
             this.resetOAuthServiceInternalState();
         }
         else {
             // No es callback - verificar si hay tokens expirados
-            const expiresAt = localStorage.getItem('expires_at');
-            const isExpired = expiresAt && parseInt(expiresAt, 10) < Date.now();
-            if (isExpired) {
+            if (this.tokenStorage.isTokenExpired()) {
                 console.log('[AuthService] Clearing all expired tokens before configure');
-                this.clearAllTokens();
+                this.tokenStorage.clearAll();
                 this.resetOAuthServiceInternalState();
             }
         }
@@ -640,9 +737,7 @@ class AuthService {
         const logoutUrl = authConfig.logoutUrl;
         let refreshToken = this.oauthService.getRefreshToken();
         if (!refreshToken) {
-            refreshToken = localStorage.getItem('refresh_token')
-                || localStorage.getItem('refresh_token_' + authConfig.clientId)
-                || sessionStorage.getItem('refresh_token');
+            refreshToken = this.tokenStorage.getRefreshToken(authConfig.clientId);
         }
         if (!logoutUrl) {
             console.warn('Logout URL not configured, skipping Keycloak logout');
@@ -675,20 +770,9 @@ class AuthService {
         }
     }
     performLocalLogout() {
+        const authConfig = this.store.authConfig();
         this.oauthService.logOut(true);
-        // Limpiar tokens del localStorage
-        localStorage.removeItem('access_token');
-        localStorage.removeItem('id_token');
-        localStorage.removeItem('refresh_token');
-        localStorage.removeItem('code_verifier');
-        localStorage.removeItem('nonce');
-        localStorage.removeItem('PKCE_verifier');
-        // Limpiar tokens del sessionStorage
-        sessionStorage.removeItem('access_token');
-        sessionStorage.removeItem('id_token');
-        sessionStorage.removeItem('refresh_token');
-        sessionStorage.removeItem('nonce');
-        sessionStorage.removeItem('PKCE_verifier');
+        this.tokenStorage.clearAll(authConfig.clientId);
         this.isAuthenticatedSubject$.next(false);
         this.isDoneLoadingSubject$.next(true);
         const currentUrl = this.router.url;
@@ -765,7 +849,7 @@ class AuthService {
             if (accessToken) {
                 try {
                     const payload = this.decodeJwtPayload(accessToken);
-                    console.log('[AuthService] Access token payload:', payload);
+                    // console.log('[AuthService] Access token payload:', payload);
                     // Extract groups from access token
                     if (payload.groups) {
                         if (Array.isArray(payload.groups)) {
@@ -794,7 +878,7 @@ class AuthService {
             }
         }
         const uniqueGroups = [...new Set(groups)];
-        console.log('[AuthService] getUserGroups result:', uniqueGroups);
+        // console.log('[AuthService] getUserGroups result:', uniqueGroups);
         return uniqueGroups;
     }
     decodeJwtPayload(token) {
@@ -812,7 +896,7 @@ class AuthService {
             return {};
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthService, deps: [{ token: i1.OAuthService }, { token: i4.Router }, { token: FrmkConfigStore }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthService, deps: [{ token: i1.OAuthService }, { token: i4.Router }, { token: FrmkConfigStore }, { token: TokenStorageService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AuthService, decorators: [{
@@ -820,7 +904,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1.OAuthService }, { type: i4.Router }, { type: FrmkConfigStore }] });
+        }], ctorParameters: () => [{ type: i1.OAuthService }, { type: i4.Router }, { type: FrmkConfigStore }, { type: TokenStorageService }] });
 
 class ConfigService {
     http;
@@ -1405,11 +1489,11 @@ class DashboardComponent {
         document.body.style.overflow = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardComponent, deps: [{ token: AuthService }, { token: AuthorizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DashboardComponent, isStandalone: true, selector: "lib-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"dashboard\">\r\n  <!-- Header -->\r\n  <header class=\"dashboard-header\">\r\n    <!-- Mobile Header Top -->\r\n    <div class=\"header-mobile-top\">\r\n      <div class=\"ministry-logo-mobile\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n      </div>\r\n      <h1 class=\"mobile-title\">{{ getConfig('title') }}</h1>\r\n    </div>\r\n\r\n    <!-- Mobile Header Bottom -->\r\n    <div class=\"header-mobile-bottom\">\r\n      <button class=\"hamburger-btn\" \r\n              (click)=\"toggleMobileMenu()\"\r\n              [class.active]=\"isMobileMenuOpen\"\r\n              aria-label=\"Toggle menu\">\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n      </button>\r\n\r\n      <div class=\"user-profile mobile-user\" *ngIf=\"userInfo\">\r\n        <button class=\"user-info-trigger\" \r\n                (click)=\"toggleUserPanel($event)\"\r\n                [attr.aria-expanded]=\"isUserPanelOpen\"\r\n                aria-label=\"Abrir men\u00FA de usuario\">\r\n          <div class=\"user-avatar\">\r\n            <span>{{ getUserInitials() }}</span>\r\n          </div>\r\n          <div class=\"user-details\">\r\n            <span class=\"user-name\">{{ getUsername() }}</span>\r\n          </div>\r\n          <span class=\"material-symbols-outlined dropdown-icon\">\r\n            {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n          </span>\r\n        </button>\r\n        \r\n        <!-- User Panel -->\r\n        <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Desktop Header -->\r\n    <div class=\"header-desktop-layout\">\r\n      <div class=\"header-left\">\r\n        <div class=\"ministry-logo\">\r\n          <div class=\"logo-icon\">\r\n            <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n          </div>\r\n          <div class=\"ministry-info\">\r\n            <h1>{{ getConfig('title') }}</h1>\r\n            <span class=\"subtitle\" *ngIf=\"getConfig('subtitle')\">{{ getConfig('subtitle') }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      \r\n      <div class=\"header-right\">\r\n        <div class=\"user-profile desktop-user\" *ngIf=\"userInfo\">\r\n          <button class=\"user-info-trigger\" \r\n                  (click)=\"toggleUserPanel($event)\"\r\n                  [attr.aria-expanded]=\"isUserPanelOpen\"\r\n                  aria-label=\"Abrir men\u00FA de usuario\">\r\n            <div class=\"user-avatar\">\r\n              <span>{{ getUserInitials() }}</span>\r\n            </div>\r\n            <div class=\"user-details\">\r\n              <span class=\"user-name\">{{ getUsername() }}</span>\r\n            </div>\r\n            <span class=\"material-symbols-outlined dropdown-icon\">\r\n              {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n            </span>\r\n          </button>\r\n          \r\n          <!-- User Panel -->\r\n          <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <!-- User Panel Template -->\r\n  <ng-template #userPanelTemplate>\r\n    <div class=\"user-panel\" *ngIf=\"isUserPanelOpen\">\r\n      <div class=\"user-panel-header\">\r\n        <span class=\"panel-title\">Perfil de Usuario</span>\r\n      </div>\r\n      <div class=\"user-panel-content\">\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">person</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">C\u00F3digo de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUsername() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">badge</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Nombre de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUserFullName() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">credit_card</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Documento:</span>\r\n            <span class=\"info-value\">{{ getDocument() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">business</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Instituci\u00F3n:</span>\r\n            <span class=\"info-value\">{{ getInstitution() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">apartment</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Dependencia:</span>\r\n            <span class=\"info-value\">{{ getDependency() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">work</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Rol:</span>\r\n            <span class=\"info-value\">{{ getRole() }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"user-panel-footer\">\r\n        <button class=\"logout-btn-panel\" (click)=\"logoutAndRedirect()\" title=\"Cerrar sesi\u00F3n\">\r\n          <span class=\"material-symbols-outlined\">logout</span>\r\n          <span class=\"logout-text\">CERRAR SESI\u00D3N</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Mobile Menu Overlay -->\r\n  <div class=\"nav-overlay\" *ngIf=\"isMobileMenuOpen\" (click)=\"closeMobileMenu()\"></div>\r\n\r\n  <!-- Navigation (Horizontal Desktop / Sidebar Mobile) -->\r\n  <nav class=\"dashboard-nav\" [class.mobile-open]=\"isMobileMenuOpen\">\r\n    <div class=\"nav-mobile-header\">\r\n      <div class=\"nav-mobile-logo\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n        <span class=\"nav-mobile-title\">Men\u00FA</span>\r\n      </div>\r\n      <button class=\"nav-close-btn\" (click)=\"closeMobileMenu()\" aria-label=\"Cerrar men\u00FA\">\r\n        <span class=\"material-symbols-outlined\">close</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"nav-container\">\r\n      <!-- Static Menu Items -->\r\n      <ng-container *ngIf=\"getConfig('showStaticMenu')\">\r\n        <a routerLink=\".\" \r\n           routerLinkActive=\"active\" \r\n           [routerLinkActiveOptions]=\"{exact: true}\" \r\n           class=\"nav-item\"\r\n           (click)=\"closeMobileMenu()\">\r\n          <span class=\"material-symbols-outlined nav-icon\">home</span>\r\n          <span class=\"nav-text\">Inicio</span>\r\n        </a>\r\n      </ng-container>\r\n\r\n      <!-- Separator -->\r\n      <div class=\"nav-separator\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\"></div>\r\n      \r\n      <!-- Dynamic Menu -->\r\n      <div class=\"dynamic-menu\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\">\r\n        <ng-container *ngFor=\"let rootItem of getRootMenuItems()\">\r\n          <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(rootItem)\">\r\n            <a \r\n              [routerLink]=\"hasChildren(rootItem) ? null : rootItem.path\" \r\n              routerLinkActive=\"active\" \r\n              class=\"nav-item root-item\"\r\n              [class.expandable]=\"hasChildren(rootItem)\"\r\n              (click)=\"onMenuItemClick($event, rootItem)\">\r\n              <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(rootItem) }}</span>\r\n              <span class=\"nav-text\">{{ rootItem.name }}</span>\r\n              <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(rootItem)\">\r\n                {{ isMenuItemOpen(rootItem.code) ? 'expand_more' : 'chevron_right' }}\r\n              </span>\r\n            </a>\r\n            \r\n            <!-- Submenu -->\r\n            <div class=\"submenu\" *ngIf=\"hasChildren(rootItem) && isMenuItemOpen(rootItem.code)\">\r\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { items: rootItem.children, level: 2 }\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      \r\n      <!-- Loading Indicator -->\r\n      <div class=\"menu-loading\" *ngIf=\"isLoadingMenu\">\r\n        <span class=\"material-symbols-outlined nav-icon\">hourglass_empty</span>\r\n        <span class=\"nav-text\">Cargando men\u00FA...</span>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n\r\n  <!-- Recursive Menu Template -->\r\n  <ng-template #menuTemplate let-items=\"items\" let-level=\"level\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n      <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(item)\" [attr.data-level]=\"level\">\r\n        <a \r\n          [routerLink]=\"hasChildren(item) ? null : item.path\" \r\n          routerLinkActive=\"active\" \r\n          class=\"nav-item submenu-item\"\r\n          [class.expandable]=\"hasChildren(item)\"\r\n          (click)=\"onMenuItemClick($event, item)\">\r\n          <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(item) }}</span>\r\n          <span class=\"nav-text\">{{ item.name }}</span>\r\n          <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(item)\">\r\n            {{ isMenuItemOpen(item.code) ? 'expand_more' : 'chevron_right' }}\r\n          </span>\r\n        </a>\r\n\r\n        <!-- Recursive Submenu (max 5 levels) -->\r\n        <div class=\"submenu\" *ngIf=\"hasChildren(item) && isMenuItemOpen(item.code) && level < 5\">\r\n          <ng-container *ngTemplateOutlet=\"menuTemplate; context: { items: item.children, level: level + 1 }\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <!-- Main Content -->\r\n  <main class=\"dashboard-content\">\r\n    <div class=\"content-wrapper\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <!-- Footer -->\r\n  <footer class=\"dashboard-footer\">\r\n    <div class=\"footer-content\">\r\n      <span class=\"footer-text\">\r\n        {{ getConfig('footerText') }}\r\n        <ng-container *ngIf=\"getConfig('showVersion')\">\r\n          Versi\u00F3n {{ appVersion }}.\r\n        </ng-container>\r\n        Todos los derechos reservados.\r\n      </span>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-height:100vh}.dashboard{min-height:100vh;display:flex;flex-direction:column;background:var(--color-primary, #313945);font-family:var(--font-family-primary, \"Museo Sans\", sans-serif)}.dashboard-header{background:var(--color-primary, #313945);color:var(--color-white, #ffffff);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000}@media(max-width:768px){.dashboard-header{flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem);align-items:stretch}}.header-mobile-top{display:none}@media(max-width:768px){.header-mobile-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem)}}.ministry-logo-mobile{display:none}@media(max-width:768px){.ministry-logo-mobile{display:flex;align-items:center}.ministry-logo-mobile img{height:50px;width:auto;filter:brightness(0) invert(1)}}.mobile-title{display:none}@media(max-width:768px){.mobile-title{display:block;font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff);margin:0;text-align:right;flex:1}}.header-mobile-bottom{display:none}@media(max-width:768px){.header-mobile-bottom{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem);padding-top:var(--spacing-1, .25rem)}}.header-desktop-layout{display:flex;justify-content:space-between;align-items:center;width:100%}@media(max-width:768px){.header-desktop-layout{display:none}}.header-left{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.header-right{display:flex;align-items:center}.ministry-logo{display:flex;align-items:center;gap:var(--spacing-3, .75rem)}.ministry-logo .logo-icon{display:flex;width:80px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.ministry-logo .logo-icon img{width:100%;height:auto}.ministry-logo .ministry-info h1{font-family:var(--font-family-primary, sans-serif);font-size:var(--font-size-xl, 1.25rem);font-weight:var(--font-weight-bold, 700);margin:0;color:var(--color-white, #ffffff);line-height:1.2}.ministry-logo .ministry-info .subtitle{font-size:var(--font-size-xs, .75rem);color:#ffffffd9;font-weight:var(--font-weight-medium, 500)}.hamburger-btn{display:none;flex-direction:column;justify-content:space-around;width:36px;height:36px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;padding:6px;z-index:1003;transition:all .3s ease;flex-shrink:0}@media(max-width:768px){.hamburger-btn{display:flex}}.hamburger-btn .hamburger-line{width:100%;height:2px;background:var(--color-white, #ffffff);border-radius:2px;transition:all .3s ease;transform-origin:center}.hamburger-btn.active{background:#fff3}.hamburger-btn.active .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger-btn.active .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.active .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hamburger-btn:hover{background:#fff3}.user-profile{position:relative;display:flex;align-items:center}.user-profile .user-info-trigger{display:flex;align-items:center;gap:var(--spacing-2, .5rem);background:#ffffff1a;padding:var(--spacing-1, .25rem) var(--spacing-3, .75rem);border-radius:var(--border-radius-lg, .5rem);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s ease;color:inherit;font-family:inherit}.user-profile .user-info-trigger:hover{background:#ffffff26}.user-profile .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--color-white, #ffffff) 0%,#e2e8f0 100%);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold, 700);color:var(--color-primary, #313945);font-size:var(--font-size-sm, .875rem);box-shadow:0 2px 6px #0000001a}.user-profile .user-details{display:flex;flex-direction:column}.user-profile .user-details .user-name{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #ffffff)}.user-profile .dropdown-icon{color:#fffc;font-size:18px;transition:transform .2s ease}.user-panel{position:absolute;top:calc(100% + var(--spacing-2, .5rem));right:0;min-width:320px;background:var(--color-white, #ffffff);border-radius:var(--border-radius-lg, .5rem);box-shadow:0 10px 40px #0003;border:1px solid var(--color-gray-200, #e9ecef);z-index:1100;overflow:hidden;animation:slideDown .2s ease}@media(max-width:768px){.user-panel{position:absolute;top:calc(100% + var(--spacing-1, .25rem));right:0;left:auto;min-width:280px;max-width:calc(100vw - 1rem);max-height:80vh;overflow-y:auto}}.user-panel-header{background:linear-gradient(135deg,#3c4557,#2a3142);padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem)}.user-panel-header .panel-title{font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff)}.user-panel-content{padding:var(--spacing-3, .75rem)}.user-info-item{display:flex;align-items:flex-start;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);border-bottom:1px solid var(--color-gray-100, #f1f3f4)}.user-info-item:last-child{border-bottom:none}.user-info-item .info-icon{font-size:var(--font-size-lg, 1.125rem);flex-shrink:0;color:var(--color-primary, #313945)}.user-info-item .info-content{display:flex;flex-direction:column;gap:2px;flex:1}.user-info-item .info-content .info-label{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-600, #5a6268);text-transform:uppercase;letter-spacing:.5px}.user-info-item .info-content .info-value{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-900, #212529);word-break:break-word}@media(max-width:768px){.mobile-hidden{display:none!important}}.user-panel-footer{padding:var(--spacing-3, .75rem);background:var(--color-gray-50, #f8f9fa);border-top:1px solid var(--color-gray-200, #e9ecef)}.user-panel-footer .logout-btn-panel{width:100%;background:linear-gradient(135deg,#dc2626,#b91c1c);color:var(--color-white, #ffffff);border:none;padding:var(--spacing-3, .75rem);border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2, .5rem);text-transform:uppercase}.user-panel-footer .logout-btn-panel:hover{background:linear-gradient(135deg,#b91c1c,#991b1b)}.nav-overlay{display:none}@media(max-width:768px){.nav-overlay{display:block;position:fixed;inset:0;background:#00000080;z-index:1001;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}.dashboard-nav{background-color:#3c4557;box-shadow:0 2px 8px #0000001a}@media(max-width:768px){.dashboard-nav{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85%;transform:translate(-100%);z-index:1002;overflow-y:auto;box-shadow:2px 0 10px #0000004d;transition:transform .3s ease}.dashboard-nav.mobile-open{transform:translate(0)}}.dashboard-nav .nav-mobile-header{display:none}@media(max-width:768px){.dashboard-nav .nav-mobile-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-3, .75rem);background:var(--color-primary, #313945);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:10}}.dashboard-nav .nav-mobile-logo{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.dashboard-nav .nav-mobile-logo img{width:36px;height:auto;filter:brightness(0) invert(1)}.dashboard-nav .nav-mobile-logo .nav-mobile-title{color:var(--color-white, #ffffff);font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-semibold, 600)}.dashboard-nav .nav-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;color:var(--color-white, #ffffff)}.dashboard-nav .nav-close-btn:hover{background:#fff3}.nav-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1, .25rem);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem)}@media(max-width:768px){.nav-container{flex-direction:column;align-items:stretch;padding:var(--spacing-3, .75rem);gap:var(--spacing-1, .25rem)}}.nav-item{display:flex;align-items:center;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);color:var(--color-white, #ffffff);text-decoration:none;border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);transition:all .2s ease;cursor:pointer;background:transparent;border:none;font-family:inherit;white-space:nowrap}.nav-item:hover{background:#ffffff1a}.nav-item.active{background:#fff3}.nav-item .nav-icon{font-size:18px;flex-shrink:0}.nav-item .nav-text{flex:1;text-align:left}.nav-item .expand-icon{font-size:16px;flex-shrink:0;margin-left:var(--spacing-1, .25rem)}@media(max-width:768px){.nav-item{width:100%;padding:var(--spacing-3, .75rem)}}.nav-separator{width:1px;height:20px;background:#fff3;margin:0 var(--spacing-1, .25rem);align-self:center}@media(max-width:768px){.nav-separator{width:100%;height:1px;margin:var(--spacing-2, .5rem) 0}}.dynamic-menu{display:flex;flex-wrap:wrap;gap:var(--spacing-1, .25rem);align-items:flex-start}@media(max-width:768px){.dynamic-menu{flex-direction:column;width:100%}}.menu-item-container{position:relative}@media(max-width:768px){.menu-item-container{width:100%}}@media(min-width:769px){.menu-item-container>.submenu{position:absolute;top:100%;left:0;min-width:220px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1000;margin-top:var(--spacing-1, .25rem)}}@media(max-width:768px){.menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}@media(min-width:769px){.submenu{min-width:200px}}@media(max-width:768px){.submenu{width:100%}}.submenu .menu-item-container{width:100%}@media(min-width:769px){.submenu .menu-item-container>.submenu{position:absolute;top:0;left:100%;min-width:200px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1001;margin-left:2px}}@media(max-width:768px){.submenu .menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}.submenu .submenu-item{padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);font-size:var(--font-size-sm, .875rem);width:100%;box-sizing:border-box}.submenu .submenu-item:hover{background:#ffffff1a}.menu-loading{display:flex;align-items:center;gap:var(--spacing-2, .5rem);color:#ffffffb3;padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);font-size:var(--font-size-sm, .875rem)}.dashboard-content{flex:1;background:var(--color-white, #ffffff)}.dashboard-content .content-wrapper{padding:var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);max-width:1400px;margin:0 auto}@media(max-width:768px){.dashboard-content .content-wrapper{padding:var(--spacing-3, .75rem)}}.dashboard-footer{background:#3c4557;color:#c5c8cf;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border-top:1px solid rgba(255,255,255,.1)}.dashboard-footer .footer-content{text-align:center}.dashboard-footer .footer-text{font-size:var(--font-size-xs, .75rem)}@media(min-width:769px){.mobile-user{display:none}}@media(max-width:768px){.desktop-user{display:none}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DashboardComponent, isStandalone: true, selector: "lib-dashboard", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"dashboard\">\r\n  <!-- Header -->\r\n  <header class=\"dashboard-header\">\r\n    <!-- Mobile Header Top -->\r\n    <div class=\"header-mobile-top\">\r\n      <div class=\"ministry-logo-mobile\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n      </div>\r\n      <h1 class=\"mobile-title\">{{ getConfig('title') }}</h1>\r\n    </div>\r\n\r\n    <!-- Mobile Header Bottom -->\r\n    <div class=\"header-mobile-bottom\">\r\n      <button class=\"hamburger-btn\" (click)=\"toggleMobileMenu()\" [class.active]=\"isMobileMenuOpen\"\r\n        aria-label=\"Toggle menu\">\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n      </button>\r\n\r\n      <div class=\"user-profile mobile-user\" *ngIf=\"userInfo\">\r\n        <button class=\"user-info-trigger\" (click)=\"toggleUserPanel($event)\" [attr.aria-expanded]=\"isUserPanelOpen\"\r\n          aria-label=\"Abrir men\u00FA de usuario\">\r\n          <div class=\"user-avatar\">\r\n            <span>{{ getUserInitials() }}</span>\r\n          </div>\r\n          <div class=\"user-details\">\r\n            <span class=\"user-name\">{{ getUsername() }}</span>\r\n          </div>\r\n          <span class=\"material-symbols-outlined dropdown-icon\">\r\n            {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n          </span>\r\n        </button>\r\n\r\n        <!-- User Panel -->\r\n        <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Desktop Header -->\r\n    <div class=\"header-desktop-layout\">\r\n      <div class=\"header-left\">\r\n        <div class=\"ministry-logo\">\r\n          <div class=\"logo-icon\">\r\n            <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n          </div>\r\n          <div class=\"ministry-info\">\r\n            <h1>{{ getConfig('title') }}</h1>\r\n            <span class=\"subtitle\" *ngIf=\"getConfig('subtitle')\">{{ getConfig('subtitle') }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"header-right\">\r\n        <div class=\"user-profile desktop-user\" *ngIf=\"userInfo\">\r\n          <button class=\"user-info-trigger\" (click)=\"toggleUserPanel($event)\" [attr.aria-expanded]=\"isUserPanelOpen\"\r\n            aria-label=\"Abrir men\u00FA de usuario\">\r\n            <div class=\"user-avatar\">\r\n              <span>{{ getUserInitials() }}</span>\r\n            </div>\r\n            <div class=\"user-details\">\r\n              <span class=\"user-name\">{{ getUsername() }}</span>\r\n            </div>\r\n            <span class=\"material-symbols-outlined dropdown-icon\">\r\n              {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n            </span>\r\n          </button>\r\n\r\n          <!-- User Panel -->\r\n          <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <!-- User Panel Template -->\r\n  <ng-template #userPanelTemplate>\r\n    <div class=\"user-panel\" *ngIf=\"isUserPanelOpen\">\r\n      <div class=\"user-panel-header\">\r\n        <span class=\"panel-title\">Perfil de Usuario</span>\r\n      </div>\r\n      <div class=\"user-panel-content\">\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">person</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">C\u00F3digo de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUsername() }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">badge</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Nombre de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUserFullName() }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">credit_card</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Documento:</span>\r\n            <span class=\"info-value\">{{ getDocument() }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">business</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Instituci\u00F3n:</span>\r\n            <span class=\"info-value\">{{ getInstitution() }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">apartment</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Dependencia:</span>\r\n            <span class=\"info-value\">{{ getDependency() }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">work</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Rol:</span>\r\n            <span class=\"info-value\">{{ getRole() }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"user-panel-footer\">\r\n        <button class=\"logout-btn-panel\" (click)=\"logoutAndRedirect()\" title=\"Cerrar sesi\u00F3n\">\r\n          <span class=\"material-symbols-outlined\">logout</span>\r\n          <span class=\"logout-text\">CERRAR SESI\u00D3N</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Mobile Menu Overlay -->\r\n  <div class=\"nav-overlay\" *ngIf=\"isMobileMenuOpen\" (click)=\"closeMobileMenu()\"></div>\r\n\r\n  <!-- Navigation (Horizontal Desktop / Sidebar Mobile) -->\r\n  <nav class=\"dashboard-nav\" [class.mobile-open]=\"isMobileMenuOpen\">\r\n    <div class=\"nav-mobile-header\">\r\n      <div class=\"nav-mobile-logo\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n        <span class=\"nav-mobile-title\">Men\u00FA</span>\r\n      </div>\r\n      <button class=\"nav-close-btn\" (click)=\"closeMobileMenu()\" aria-label=\"Cerrar men\u00FA\">\r\n        <span class=\"material-symbols-outlined\">close</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"nav-container\">\r\n      <!-- Static Menu Items -->\r\n      <ng-container *ngIf=\"getConfig('showStaticMenu')\">\r\n        <a routerLink=\".\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{exact: true}\" class=\"nav-item\"\r\n          (click)=\"closeMobileMenu()\">\r\n          <span class=\"material-symbols-outlined nav-icon\">home</span>\r\n          <span class=\"nav-text\">Inicio</span>\r\n        </a>\r\n      </ng-container>\r\n\r\n      <!-- Separator -->\r\n      <div class=\"nav-separator\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\"></div>\r\n\r\n      <!-- Dynamic Menu -->\r\n      <div class=\"dynamic-menu\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\">\r\n        <ng-container *ngFor=\"let rootItem of getRootMenuItems()\">\r\n          <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(rootItem)\">\r\n            <a [routerLink]=\"hasChildren(rootItem) ? null : rootItem.path\" routerLinkActive=\"active\"\r\n              class=\"nav-item root-item\" [class.expandable]=\"hasChildren(rootItem)\"\r\n              (click)=\"onMenuItemClick($event, rootItem)\">\r\n              <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(rootItem) }}</span>\r\n              <span class=\"nav-text\">{{ rootItem.name }}</span>\r\n              <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(rootItem)\">\r\n                {{ isMenuItemOpen(rootItem.code) ? 'expand_more' : 'chevron_right' }}\r\n              </span>\r\n            </a>\r\n\r\n            <!-- Submenu -->\r\n            <div class=\"submenu\" *ngIf=\"hasChildren(rootItem) && isMenuItemOpen(rootItem.code)\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"menuTemplate; context: { items: rootItem.children, level: 2 }\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Loading Indicator -->\r\n      <div class=\"menu-loading\" *ngIf=\"isLoadingMenu\">\r\n        <span class=\"material-symbols-outlined nav-icon\">hourglass_empty</span>\r\n        <span class=\"nav-text\">Cargando men\u00FA...</span>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n\r\n  <!-- Recursive Menu Template -->\r\n  <ng-template #menuTemplate let-items=\"items\" let-level=\"level\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n      <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(item)\" [attr.data-level]=\"level\">\r\n        <a [routerLink]=\"hasChildren(item) ? null : item.path\" routerLinkActive=\"active\" class=\"nav-item submenu-item\"\r\n          [class.expandable]=\"hasChildren(item)\" (click)=\"onMenuItemClick($event, item)\">\r\n          <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(item) }}</span>\r\n          <span class=\"nav-text\">{{ item.name }}</span>\r\n          <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(item)\">\r\n            {{ isMenuItemOpen(item.code) ? 'expand_more' : 'chevron_right' }}\r\n          </span>\r\n        </a>\r\n\r\n        <!-- Recursive Submenu (max 5 levels) -->\r\n        <div class=\"submenu\" *ngIf=\"hasChildren(item) && isMenuItemOpen(item.code) && level < 5\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"menuTemplate; context: { items: item.children, level: level + 1 }\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <!-- Main Content -->\r\n  <main class=\"dashboard-content\">\r\n    <div class=\"content-wrapper\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <!-- Footer -->\r\n  <footer class=\"dashboard-footer\">\r\n    <div class=\"footer-content\">\r\n      <span class=\"footer-text\">\r\n        {{ getConfig('footerText') }}\r\n        <ng-container *ngIf=\"getConfig('showVersion')\">\r\n          Versi\u00F3n {{ appVersion }}.\r\n        </ng-container>\r\n        Todos los derechos reservados.\r\n      </span>\r\n    </div>\r\n  </footer>\r\n</div>", styles: [":host{display:block;width:100%;min-height:100vh}.dashboard{min-height:100vh;display:flex;flex-direction:column;background:var(--color-primary, #313945);font-family:var(--font-family-primary, \"Museo Sans\", sans-serif)}.dashboard-header{background:var(--color-primary, #313945);color:var(--color-white, #ffffff);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000}@media(max-width:768px){.dashboard-header{flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem);align-items:stretch}}.header-mobile-top{display:none}@media(max-width:768px){.header-mobile-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem)}}.ministry-logo-mobile{display:none}@media(max-width:768px){.ministry-logo-mobile{display:flex;align-items:center}.ministry-logo-mobile img{height:50px;width:auto;filter:brightness(0) invert(1)}}.mobile-title{display:none}@media(max-width:768px){.mobile-title{display:block;font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff);margin:0;text-align:right;flex:1}}.header-mobile-bottom{display:none}@media(max-width:768px){.header-mobile-bottom{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem);padding-top:var(--spacing-1, .25rem)}}.header-desktop-layout{display:flex;justify-content:space-between;align-items:center;width:100%}@media(max-width:768px){.header-desktop-layout{display:none}}.header-left{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.header-right{display:flex;align-items:center}.ministry-logo{display:flex;align-items:center;gap:var(--spacing-3, .75rem)}.ministry-logo .logo-icon{display:flex;width:80px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.ministry-logo .logo-icon img{width:100%;height:auto}.ministry-logo .ministry-info h1{font-family:var(--font-family-primary, sans-serif);font-size:var(--font-size-xl, 1.25rem);font-weight:var(--font-weight-bold, 700);margin:0;color:var(--color-white, #ffffff);line-height:1.2}.ministry-logo .ministry-info .subtitle{font-size:var(--font-size-xs, .75rem);color:#ffffffd9;font-weight:var(--font-weight-medium, 500)}.hamburger-btn{display:none;flex-direction:column;justify-content:space-around;width:36px;height:36px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;padding:6px;z-index:1003;transition:all .3s ease;flex-shrink:0}@media(max-width:768px){.hamburger-btn{display:flex}}.hamburger-btn .hamburger-line{width:100%;height:2px;background:var(--color-white, #ffffff);border-radius:2px;transition:all .3s ease;transform-origin:center}.hamburger-btn.active{background:#fff3}.hamburger-btn.active .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger-btn.active .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.active .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hamburger-btn:hover{background:#fff3}.user-profile{position:relative;display:flex;align-items:center}.user-profile .user-info-trigger{display:flex;align-items:center;gap:var(--spacing-2, .5rem);background:#ffffff1a;padding:var(--spacing-1, .25rem) var(--spacing-3, .75rem);border-radius:var(--border-radius-lg, .5rem);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s ease;color:inherit;font-family:inherit}.user-profile .user-info-trigger:hover{background:#ffffff26}.user-profile .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--color-white, #ffffff) 0%,#e2e8f0 100%);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold, 700);color:var(--color-primary, #313945);font-size:var(--font-size-sm, .875rem);box-shadow:0 2px 6px #0000001a}.user-profile .user-details{display:flex;flex-direction:column}.user-profile .user-details .user-name{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #ffffff)}.user-profile .dropdown-icon{color:#fffc;font-size:18px;transition:transform .2s ease}.user-panel{position:absolute;top:calc(100% + var(--spacing-2, .5rem));right:0;min-width:320px;background:var(--color-white, #ffffff);border-radius:var(--border-radius-lg, .5rem);box-shadow:0 10px 40px #0003;border:1px solid var(--color-gray-200, #e9ecef);z-index:1100;overflow:hidden;animation:slideDown .2s ease}@media(max-width:768px){.user-panel{position:absolute;top:calc(100% + var(--spacing-1, .25rem));right:0;left:auto;min-width:280px;max-width:calc(100vw - 1rem);max-height:80vh;overflow-y:auto}}.user-panel-header{background:linear-gradient(135deg,#3c4557,#2a3142);padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem)}.user-panel-header .panel-title{font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff)}.user-panel-content{padding:var(--spacing-3, .75rem)}.user-info-item{display:flex;align-items:flex-start;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);border-bottom:1px solid var(--color-gray-100, #f1f3f4)}.user-info-item:last-child{border-bottom:none}.user-info-item .info-icon{font-size:var(--font-size-lg, 1.125rem);flex-shrink:0;color:var(--color-primary, #313945)}.user-info-item .info-content{display:flex;flex-direction:column;gap:2px;flex:1}.user-info-item .info-content .info-label{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-600, #5a6268);text-transform:uppercase;letter-spacing:.5px}.user-info-item .info-content .info-value{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-900, #212529);word-break:break-word}@media(max-width:768px){.mobile-hidden{display:none!important}}.user-panel-footer{padding:var(--spacing-3, .75rem);background:var(--color-gray-50, #f8f9fa);border-top:1px solid var(--color-gray-200, #e9ecef)}.user-panel-footer .logout-btn-panel{width:100%;background:linear-gradient(135deg,#dc2626,#b91c1c);color:var(--color-white, #ffffff);border:none;padding:var(--spacing-3, .75rem);border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2, .5rem);text-transform:uppercase}.user-panel-footer .logout-btn-panel:hover{background:linear-gradient(135deg,#b91c1c,#991b1b)}.nav-overlay{display:none}@media(max-width:768px){.nav-overlay{display:block;position:fixed;inset:0;background:#00000080;z-index:1001;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}.dashboard-nav{background-color:#3c4557;box-shadow:0 2px 8px #0000001a}@media(max-width:768px){.dashboard-nav{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85%;transform:translate(-100%);z-index:1002;overflow-y:auto;box-shadow:2px 0 10px #0000004d;transition:transform .3s ease}.dashboard-nav.mobile-open{transform:translate(0)}}.dashboard-nav .nav-mobile-header{display:none}@media(max-width:768px){.dashboard-nav .nav-mobile-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-3, .75rem);background:var(--color-primary, #313945);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:10}}.dashboard-nav .nav-mobile-logo{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.dashboard-nav .nav-mobile-logo img{width:36px;height:auto;filter:brightness(0) invert(1)}.dashboard-nav .nav-mobile-logo .nav-mobile-title{color:var(--color-white, #ffffff);font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-semibold, 600)}.dashboard-nav .nav-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;color:var(--color-white, #ffffff)}.dashboard-nav .nav-close-btn:hover{background:#fff3}.nav-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1, .25rem);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem)}@media(max-width:768px){.nav-container{flex-direction:column;align-items:stretch;padding:var(--spacing-3, .75rem);gap:var(--spacing-1, .25rem)}}.nav-item{display:flex;align-items:center;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);color:var(--color-white, #ffffff);text-decoration:none;border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);transition:all .2s ease;cursor:pointer;background:transparent;border:none;font-family:inherit;white-space:nowrap}.nav-item:hover{background:#ffffff1a}.nav-item.active{background:#fff3}.nav-item .nav-icon{font-size:18px;flex-shrink:0}.nav-item .nav-text{flex:1;text-align:left}.nav-item .expand-icon{font-size:16px;flex-shrink:0;margin-left:var(--spacing-1, .25rem)}@media(max-width:768px){.nav-item{width:100%;padding:var(--spacing-3, .75rem)}}.nav-separator{width:1px;height:20px;background:#fff3;margin:0 var(--spacing-1, .25rem);align-self:center}@media(max-width:768px){.nav-separator{width:100%;height:1px;margin:var(--spacing-2, .5rem) 0}}.dynamic-menu{display:flex;flex-wrap:wrap;gap:var(--spacing-1, .25rem);align-items:flex-start}@media(max-width:768px){.dynamic-menu{flex-direction:column;width:100%}}.menu-item-container{position:relative}@media(max-width:768px){.menu-item-container{width:100%}}@media(min-width:769px){.menu-item-container>.submenu{position:absolute;top:100%;left:0;min-width:220px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1000;margin-top:var(--spacing-1, .25rem)}}@media(max-width:768px){.menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}@media(min-width:769px){.submenu{min-width:200px}}@media(max-width:768px){.submenu{width:100%}}.submenu .menu-item-container{width:100%}@media(min-width:769px){.submenu .menu-item-container>.submenu{position:absolute;top:0;left:100%;min-width:200px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1001;margin-left:2px}}@media(max-width:768px){.submenu .menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}.submenu .submenu-item{padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);font-size:var(--font-size-sm, .875rem);width:100%;box-sizing:border-box}.submenu .submenu-item:hover{background:#ffffff1a}.menu-loading{display:flex;align-items:center;gap:var(--spacing-2, .5rem);color:#ffffffb3;padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);font-size:var(--font-size-sm, .875rem)}.dashboard-content{flex:1;background:var(--color-white, #ffffff)}.dashboard-content .content-wrapper{padding:var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);max-width:1400px;margin:0 auto}@media(max-width:768px){.dashboard-content .content-wrapper{padding:var(--spacing-3, .75rem)}}.dashboard-footer{background:#3c4557;color:#c5c8cf;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border-top:1px solid rgba(255,255,255,.1)}.dashboard-footer .footer-content{text-align:center}.dashboard-footer .footer-text{font-size:var(--font-size-xs, .75rem)}@media(min-width:769px){.mobile-user{display:none}}@media(max-width:768px){.desktop-user{display:none}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DashboardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dashboard', standalone: true, imports: [CommonModule, RouterModule], template: "<div class=\"dashboard\">\r\n  <!-- Header -->\r\n  <header class=\"dashboard-header\">\r\n    <!-- Mobile Header Top -->\r\n    <div class=\"header-mobile-top\">\r\n      <div class=\"ministry-logo-mobile\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n      </div>\r\n      <h1 class=\"mobile-title\">{{ getConfig('title') }}</h1>\r\n    </div>\r\n\r\n    <!-- Mobile Header Bottom -->\r\n    <div class=\"header-mobile-bottom\">\r\n      <button class=\"hamburger-btn\" \r\n              (click)=\"toggleMobileMenu()\"\r\n              [class.active]=\"isMobileMenuOpen\"\r\n              aria-label=\"Toggle menu\">\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n      </button>\r\n\r\n      <div class=\"user-profile mobile-user\" *ngIf=\"userInfo\">\r\n        <button class=\"user-info-trigger\" \r\n                (click)=\"toggleUserPanel($event)\"\r\n                [attr.aria-expanded]=\"isUserPanelOpen\"\r\n                aria-label=\"Abrir men\u00FA de usuario\">\r\n          <div class=\"user-avatar\">\r\n            <span>{{ getUserInitials() }}</span>\r\n          </div>\r\n          <div class=\"user-details\">\r\n            <span class=\"user-name\">{{ getUsername() }}</span>\r\n          </div>\r\n          <span class=\"material-symbols-outlined dropdown-icon\">\r\n            {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n          </span>\r\n        </button>\r\n        \r\n        <!-- User Panel -->\r\n        <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Desktop Header -->\r\n    <div class=\"header-desktop-layout\">\r\n      <div class=\"header-left\">\r\n        <div class=\"ministry-logo\">\r\n          <div class=\"logo-icon\">\r\n            <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n          </div>\r\n          <div class=\"ministry-info\">\r\n            <h1>{{ getConfig('title') }}</h1>\r\n            <span class=\"subtitle\" *ngIf=\"getConfig('subtitle')\">{{ getConfig('subtitle') }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      \r\n      <div class=\"header-right\">\r\n        <div class=\"user-profile desktop-user\" *ngIf=\"userInfo\">\r\n          <button class=\"user-info-trigger\" \r\n                  (click)=\"toggleUserPanel($event)\"\r\n                  [attr.aria-expanded]=\"isUserPanelOpen\"\r\n                  aria-label=\"Abrir men\u00FA de usuario\">\r\n            <div class=\"user-avatar\">\r\n              <span>{{ getUserInitials() }}</span>\r\n            </div>\r\n            <div class=\"user-details\">\r\n              <span class=\"user-name\">{{ getUsername() }}</span>\r\n            </div>\r\n            <span class=\"material-symbols-outlined dropdown-icon\">\r\n              {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n            </span>\r\n          </button>\r\n          \r\n          <!-- User Panel -->\r\n          <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <!-- User Panel Template -->\r\n  <ng-template #userPanelTemplate>\r\n    <div class=\"user-panel\" *ngIf=\"isUserPanelOpen\">\r\n      <div class=\"user-panel-header\">\r\n        <span class=\"panel-title\">Perfil de Usuario</span>\r\n      </div>\r\n      <div class=\"user-panel-content\">\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">person</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">C\u00F3digo de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUsername() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">badge</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Nombre de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUserFullName() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">credit_card</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Documento:</span>\r\n            <span class=\"info-value\">{{ getDocument() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">business</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Instituci\u00F3n:</span>\r\n            <span class=\"info-value\">{{ getInstitution() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">apartment</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Dependencia:</span>\r\n            <span class=\"info-value\">{{ getDependency() }}</span>\r\n          </div>\r\n        </div>\r\n        \r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">work</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Rol:</span>\r\n            <span class=\"info-value\">{{ getRole() }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"user-panel-footer\">\r\n        <button class=\"logout-btn-panel\" (click)=\"logoutAndRedirect()\" title=\"Cerrar sesi\u00F3n\">\r\n          <span class=\"material-symbols-outlined\">logout</span>\r\n          <span class=\"logout-text\">CERRAR SESI\u00D3N</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Mobile Menu Overlay -->\r\n  <div class=\"nav-overlay\" *ngIf=\"isMobileMenuOpen\" (click)=\"closeMobileMenu()\"></div>\r\n\r\n  <!-- Navigation (Horizontal Desktop / Sidebar Mobile) -->\r\n  <nav class=\"dashboard-nav\" [class.mobile-open]=\"isMobileMenuOpen\">\r\n    <div class=\"nav-mobile-header\">\r\n      <div class=\"nav-mobile-logo\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n        <span class=\"nav-mobile-title\">Men\u00FA</span>\r\n      </div>\r\n      <button class=\"nav-close-btn\" (click)=\"closeMobileMenu()\" aria-label=\"Cerrar men\u00FA\">\r\n        <span class=\"material-symbols-outlined\">close</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"nav-container\">\r\n      <!-- Static Menu Items -->\r\n      <ng-container *ngIf=\"getConfig('showStaticMenu')\">\r\n        <a routerLink=\".\" \r\n           routerLinkActive=\"active\" \r\n           [routerLinkActiveOptions]=\"{exact: true}\" \r\n           class=\"nav-item\"\r\n           (click)=\"closeMobileMenu()\">\r\n          <span class=\"material-symbols-outlined nav-icon\">home</span>\r\n          <span class=\"nav-text\">Inicio</span>\r\n        </a>\r\n      </ng-container>\r\n\r\n      <!-- Separator -->\r\n      <div class=\"nav-separator\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\"></div>\r\n      \r\n      <!-- Dynamic Menu -->\r\n      <div class=\"dynamic-menu\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\">\r\n        <ng-container *ngFor=\"let rootItem of getRootMenuItems()\">\r\n          <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(rootItem)\">\r\n            <a \r\n              [routerLink]=\"hasChildren(rootItem) ? null : rootItem.path\" \r\n              routerLinkActive=\"active\" \r\n              class=\"nav-item root-item\"\r\n              [class.expandable]=\"hasChildren(rootItem)\"\r\n              (click)=\"onMenuItemClick($event, rootItem)\">\r\n              <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(rootItem) }}</span>\r\n              <span class=\"nav-text\">{{ rootItem.name }}</span>\r\n              <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(rootItem)\">\r\n                {{ isMenuItemOpen(rootItem.code) ? 'expand_more' : 'chevron_right' }}\r\n              </span>\r\n            </a>\r\n            \r\n            <!-- Submenu -->\r\n            <div class=\"submenu\" *ngIf=\"hasChildren(rootItem) && isMenuItemOpen(rootItem.code)\">\r\n              <ng-container *ngTemplateOutlet=\"menuTemplate; context: { items: rootItem.children, level: 2 }\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      \r\n      <!-- Loading Indicator -->\r\n      <div class=\"menu-loading\" *ngIf=\"isLoadingMenu\">\r\n        <span class=\"material-symbols-outlined nav-icon\">hourglass_empty</span>\r\n        <span class=\"nav-text\">Cargando men\u00FA...</span>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n\r\n  <!-- Recursive Menu Template -->\r\n  <ng-template #menuTemplate let-items=\"items\" let-level=\"level\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n      <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(item)\" [attr.data-level]=\"level\">\r\n        <a \r\n          [routerLink]=\"hasChildren(item) ? null : item.path\" \r\n          routerLinkActive=\"active\" \r\n          class=\"nav-item submenu-item\"\r\n          [class.expandable]=\"hasChildren(item)\"\r\n          (click)=\"onMenuItemClick($event, item)\">\r\n          <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(item) }}</span>\r\n          <span class=\"nav-text\">{{ item.name }}</span>\r\n          <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(item)\">\r\n            {{ isMenuItemOpen(item.code) ? 'expand_more' : 'chevron_right' }}\r\n          </span>\r\n        </a>\r\n\r\n        <!-- Recursive Submenu (max 5 levels) -->\r\n        <div class=\"submenu\" *ngIf=\"hasChildren(item) && isMenuItemOpen(item.code) && level < 5\">\r\n          <ng-container *ngTemplateOutlet=\"menuTemplate; context: { items: item.children, level: level + 1 }\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <!-- Main Content -->\r\n  <main class=\"dashboard-content\">\r\n    <div class=\"content-wrapper\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <!-- Footer -->\r\n  <footer class=\"dashboard-footer\">\r\n    <div class=\"footer-content\">\r\n      <span class=\"footer-text\">\r\n        {{ getConfig('footerText') }}\r\n        <ng-container *ngIf=\"getConfig('showVersion')\">\r\n          Versi\u00F3n {{ appVersion }}.\r\n        </ng-container>\r\n        Todos los derechos reservados.\r\n      </span>\r\n    </div>\r\n  </footer>\r\n</div>\r\n", styles: [":host{display:block;width:100%;min-height:100vh}.dashboard{min-height:100vh;display:flex;flex-direction:column;background:var(--color-primary, #313945);font-family:var(--font-family-primary, \"Museo Sans\", sans-serif)}.dashboard-header{background:var(--color-primary, #313945);color:var(--color-white, #ffffff);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000}@media(max-width:768px){.dashboard-header{flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem);align-items:stretch}}.header-mobile-top{display:none}@media(max-width:768px){.header-mobile-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem)}}.ministry-logo-mobile{display:none}@media(max-width:768px){.ministry-logo-mobile{display:flex;align-items:center}.ministry-logo-mobile img{height:50px;width:auto;filter:brightness(0) invert(1)}}.mobile-title{display:none}@media(max-width:768px){.mobile-title{display:block;font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff);margin:0;text-align:right;flex:1}}.header-mobile-bottom{display:none}@media(max-width:768px){.header-mobile-bottom{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem);padding-top:var(--spacing-1, .25rem)}}.header-desktop-layout{display:flex;justify-content:space-between;align-items:center;width:100%}@media(max-width:768px){.header-desktop-layout{display:none}}.header-left{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.header-right{display:flex;align-items:center}.ministry-logo{display:flex;align-items:center;gap:var(--spacing-3, .75rem)}.ministry-logo .logo-icon{display:flex;width:80px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.ministry-logo .logo-icon img{width:100%;height:auto}.ministry-logo .ministry-info h1{font-family:var(--font-family-primary, sans-serif);font-size:var(--font-size-xl, 1.25rem);font-weight:var(--font-weight-bold, 700);margin:0;color:var(--color-white, #ffffff);line-height:1.2}.ministry-logo .ministry-info .subtitle{font-size:var(--font-size-xs, .75rem);color:#ffffffd9;font-weight:var(--font-weight-medium, 500)}.hamburger-btn{display:none;flex-direction:column;justify-content:space-around;width:36px;height:36px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;padding:6px;z-index:1003;transition:all .3s ease;flex-shrink:0}@media(max-width:768px){.hamburger-btn{display:flex}}.hamburger-btn .hamburger-line{width:100%;height:2px;background:var(--color-white, #ffffff);border-radius:2px;transition:all .3s ease;transform-origin:center}.hamburger-btn.active{background:#fff3}.hamburger-btn.active .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger-btn.active .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.active .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hamburger-btn:hover{background:#fff3}.user-profile{position:relative;display:flex;align-items:center}.user-profile .user-info-trigger{display:flex;align-items:center;gap:var(--spacing-2, .5rem);background:#ffffff1a;padding:var(--spacing-1, .25rem) var(--spacing-3, .75rem);border-radius:var(--border-radius-lg, .5rem);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s ease;color:inherit;font-family:inherit}.user-profile .user-info-trigger:hover{background:#ffffff26}.user-profile .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--color-white, #ffffff) 0%,#e2e8f0 100%);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold, 700);color:var(--color-primary, #313945);font-size:var(--font-size-sm, .875rem);box-shadow:0 2px 6px #0000001a}.user-profile .user-details{display:flex;flex-direction:column}.user-profile .user-details .user-name{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #ffffff)}.user-profile .dropdown-icon{color:#fffc;font-size:18px;transition:transform .2s ease}.user-panel{position:absolute;top:calc(100% + var(--spacing-2, .5rem));right:0;min-width:320px;background:var(--color-white, #ffffff);border-radius:var(--border-radius-lg, .5rem);box-shadow:0 10px 40px #0003;border:1px solid var(--color-gray-200, #e9ecef);z-index:1100;overflow:hidden;animation:slideDown .2s ease}@media(max-width:768px){.user-panel{position:absolute;top:calc(100% + var(--spacing-1, .25rem));right:0;left:auto;min-width:280px;max-width:calc(100vw - 1rem);max-height:80vh;overflow-y:auto}}.user-panel-header{background:linear-gradient(135deg,#3c4557,#2a3142);padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem)}.user-panel-header .panel-title{font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff)}.user-panel-content{padding:var(--spacing-3, .75rem)}.user-info-item{display:flex;align-items:flex-start;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);border-bottom:1px solid var(--color-gray-100, #f1f3f4)}.user-info-item:last-child{border-bottom:none}.user-info-item .info-icon{font-size:var(--font-size-lg, 1.125rem);flex-shrink:0;color:var(--color-primary, #313945)}.user-info-item .info-content{display:flex;flex-direction:column;gap:2px;flex:1}.user-info-item .info-content .info-label{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-600, #5a6268);text-transform:uppercase;letter-spacing:.5px}.user-info-item .info-content .info-value{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-900, #212529);word-break:break-word}@media(max-width:768px){.mobile-hidden{display:none!important}}.user-panel-footer{padding:var(--spacing-3, .75rem);background:var(--color-gray-50, #f8f9fa);border-top:1px solid var(--color-gray-200, #e9ecef)}.user-panel-footer .logout-btn-panel{width:100%;background:linear-gradient(135deg,#dc2626,#b91c1c);color:var(--color-white, #ffffff);border:none;padding:var(--spacing-3, .75rem);border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2, .5rem);text-transform:uppercase}.user-panel-footer .logout-btn-panel:hover{background:linear-gradient(135deg,#b91c1c,#991b1b)}.nav-overlay{display:none}@media(max-width:768px){.nav-overlay{display:block;position:fixed;inset:0;background:#00000080;z-index:1001;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}.dashboard-nav{background-color:#3c4557;box-shadow:0 2px 8px #0000001a}@media(max-width:768px){.dashboard-nav{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85%;transform:translate(-100%);z-index:1002;overflow-y:auto;box-shadow:2px 0 10px #0000004d;transition:transform .3s ease}.dashboard-nav.mobile-open{transform:translate(0)}}.dashboard-nav .nav-mobile-header{display:none}@media(max-width:768px){.dashboard-nav .nav-mobile-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-3, .75rem);background:var(--color-primary, #313945);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:10}}.dashboard-nav .nav-mobile-logo{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.dashboard-nav .nav-mobile-logo img{width:36px;height:auto;filter:brightness(0) invert(1)}.dashboard-nav .nav-mobile-logo .nav-mobile-title{color:var(--color-white, #ffffff);font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-semibold, 600)}.dashboard-nav .nav-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;color:var(--color-white, #ffffff)}.dashboard-nav .nav-close-btn:hover{background:#fff3}.nav-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1, .25rem);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem)}@media(max-width:768px){.nav-container{flex-direction:column;align-items:stretch;padding:var(--spacing-3, .75rem);gap:var(--spacing-1, .25rem)}}.nav-item{display:flex;align-items:center;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);color:var(--color-white, #ffffff);text-decoration:none;border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);transition:all .2s ease;cursor:pointer;background:transparent;border:none;font-family:inherit;white-space:nowrap}.nav-item:hover{background:#ffffff1a}.nav-item.active{background:#fff3}.nav-item .nav-icon{font-size:18px;flex-shrink:0}.nav-item .nav-text{flex:1;text-align:left}.nav-item .expand-icon{font-size:16px;flex-shrink:0;margin-left:var(--spacing-1, .25rem)}@media(max-width:768px){.nav-item{width:100%;padding:var(--spacing-3, .75rem)}}.nav-separator{width:1px;height:20px;background:#fff3;margin:0 var(--spacing-1, .25rem);align-self:center}@media(max-width:768px){.nav-separator{width:100%;height:1px;margin:var(--spacing-2, .5rem) 0}}.dynamic-menu{display:flex;flex-wrap:wrap;gap:var(--spacing-1, .25rem);align-items:flex-start}@media(max-width:768px){.dynamic-menu{flex-direction:column;width:100%}}.menu-item-container{position:relative}@media(max-width:768px){.menu-item-container{width:100%}}@media(min-width:769px){.menu-item-container>.submenu{position:absolute;top:100%;left:0;min-width:220px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1000;margin-top:var(--spacing-1, .25rem)}}@media(max-width:768px){.menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}@media(min-width:769px){.submenu{min-width:200px}}@media(max-width:768px){.submenu{width:100%}}.submenu .menu-item-container{width:100%}@media(min-width:769px){.submenu .menu-item-container>.submenu{position:absolute;top:0;left:100%;min-width:200px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1001;margin-left:2px}}@media(max-width:768px){.submenu .menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}.submenu .submenu-item{padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);font-size:var(--font-size-sm, .875rem);width:100%;box-sizing:border-box}.submenu .submenu-item:hover{background:#ffffff1a}.menu-loading{display:flex;align-items:center;gap:var(--spacing-2, .5rem);color:#ffffffb3;padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);font-size:var(--font-size-sm, .875rem)}.dashboard-content{flex:1;background:var(--color-white, #ffffff)}.dashboard-content .content-wrapper{padding:var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);max-width:1400px;margin:0 auto}@media(max-width:768px){.dashboard-content .content-wrapper{padding:var(--spacing-3, .75rem)}}.dashboard-footer{background:#3c4557;color:#c5c8cf;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border-top:1px solid rgba(255,255,255,.1)}.dashboard-footer .footer-content{text-align:center}.dashboard-footer .footer-text{font-size:var(--font-size-xs, .75rem)}@media(min-width:769px){.mobile-user{display:none}}@media(max-width:768px){.desktop-user{display:none}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: 'lib-dashboard', standalone: true, imports: [CommonModule, RouterModule], template: "<div class=\"dashboard\">\r\n  <!-- Header -->\r\n  <header class=\"dashboard-header\">\r\n    <!-- Mobile Header Top -->\r\n    <div class=\"header-mobile-top\">\r\n      <div class=\"ministry-logo-mobile\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n      </div>\r\n      <h1 class=\"mobile-title\">{{ getConfig('title') }}</h1>\r\n    </div>\r\n\r\n    <!-- Mobile Header Bottom -->\r\n    <div class=\"header-mobile-bottom\">\r\n      <button class=\"hamburger-btn\" (click)=\"toggleMobileMenu()\" [class.active]=\"isMobileMenuOpen\"\r\n        aria-label=\"Toggle menu\">\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n        <span class=\"hamburger-line\"></span>\r\n      </button>\r\n\r\n      <div class=\"user-profile mobile-user\" *ngIf=\"userInfo\">\r\n        <button class=\"user-info-trigger\" (click)=\"toggleUserPanel($event)\" [attr.aria-expanded]=\"isUserPanelOpen\"\r\n          aria-label=\"Abrir men\u00FA de usuario\">\r\n          <div class=\"user-avatar\">\r\n            <span>{{ getUserInitials() }}</span>\r\n          </div>\r\n          <div class=\"user-details\">\r\n            <span class=\"user-name\">{{ getUsername() }}</span>\r\n          </div>\r\n          <span class=\"material-symbols-outlined dropdown-icon\">\r\n            {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n          </span>\r\n        </button>\r\n\r\n        <!-- User Panel -->\r\n        <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Desktop Header -->\r\n    <div class=\"header-desktop-layout\">\r\n      <div class=\"header-left\">\r\n        <div class=\"ministry-logo\">\r\n          <div class=\"logo-icon\">\r\n            <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n          </div>\r\n          <div class=\"ministry-info\">\r\n            <h1>{{ getConfig('title') }}</h1>\r\n            <span class=\"subtitle\" *ngIf=\"getConfig('subtitle')\">{{ getConfig('subtitle') }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"header-right\">\r\n        <div class=\"user-profile desktop-user\" *ngIf=\"userInfo\">\r\n          <button class=\"user-info-trigger\" (click)=\"toggleUserPanel($event)\" [attr.aria-expanded]=\"isUserPanelOpen\"\r\n            aria-label=\"Abrir men\u00FA de usuario\">\r\n            <div class=\"user-avatar\">\r\n              <span>{{ getUserInitials() }}</span>\r\n            </div>\r\n            <div class=\"user-details\">\r\n              <span class=\"user-name\">{{ getUsername() }}</span>\r\n            </div>\r\n            <span class=\"material-symbols-outlined dropdown-icon\">\r\n              {{ isUserPanelOpen ? 'expand_less' : 'expand_more' }}\r\n            </span>\r\n          </button>\r\n\r\n          <!-- User Panel -->\r\n          <ng-container *ngTemplateOutlet=\"userPanelTemplate\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </header>\r\n\r\n  <!-- User Panel Template -->\r\n  <ng-template #userPanelTemplate>\r\n    <div class=\"user-panel\" *ngIf=\"isUserPanelOpen\">\r\n      <div class=\"user-panel-header\">\r\n        <span class=\"panel-title\">Perfil de Usuario</span>\r\n      </div>\r\n      <div class=\"user-panel-content\">\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">person</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">C\u00F3digo de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUsername() }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">badge</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Nombre de Usuario:</span>\r\n            <span class=\"info-value\">{{ getUserFullName() }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"user-info-item\">\r\n          <span class=\"material-symbols-outlined info-icon\">credit_card</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Documento:</span>\r\n            <span class=\"info-value\">{{ getDocument() }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">business</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Instituci\u00F3n:</span>\r\n            <span class=\"info-value\">{{ getInstitution() }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">apartment</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Dependencia:</span>\r\n            <span class=\"info-value\">{{ getDependency() }}</span>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"user-info-item mobile-hidden\">\r\n          <span class=\"material-symbols-outlined info-icon\">work</span>\r\n          <div class=\"info-content\">\r\n            <span class=\"info-label\">Rol:</span>\r\n            <span class=\"info-value\">{{ getRole() }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"user-panel-footer\">\r\n        <button class=\"logout-btn-panel\" (click)=\"logoutAndRedirect()\" title=\"Cerrar sesi\u00F3n\">\r\n          <span class=\"material-symbols-outlined\">logout</span>\r\n          <span class=\"logout-text\">CERRAR SESI\u00D3N</span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n\r\n  <!-- Mobile Menu Overlay -->\r\n  <div class=\"nav-overlay\" *ngIf=\"isMobileMenuOpen\" (click)=\"closeMobileMenu()\"></div>\r\n\r\n  <!-- Navigation (Horizontal Desktop / Sidebar Mobile) -->\r\n  <nav class=\"dashboard-nav\" [class.mobile-open]=\"isMobileMenuOpen\">\r\n    <div class=\"nav-mobile-header\">\r\n      <div class=\"nav-mobile-logo\">\r\n        <img [src]=\"getConfig('logoUrl')\" [alt]=\"getConfig('logoAlt')\" />\r\n        <span class=\"nav-mobile-title\">Men\u00FA</span>\r\n      </div>\r\n      <button class=\"nav-close-btn\" (click)=\"closeMobileMenu()\" aria-label=\"Cerrar men\u00FA\">\r\n        <span class=\"material-symbols-outlined\">close</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"nav-container\">\r\n      <!-- Static Menu Items -->\r\n      <ng-container *ngIf=\"getConfig('showStaticMenu')\">\r\n        <a routerLink=\".\" routerLinkActive=\"active\" [routerLinkActiveOptions]=\"{exact: true}\" class=\"nav-item\"\r\n          (click)=\"closeMobileMenu()\">\r\n          <span class=\"material-symbols-outlined nav-icon\">home</span>\r\n          <span class=\"nav-text\">Inicio</span>\r\n        </a>\r\n      </ng-container>\r\n\r\n      <!-- Separator -->\r\n      <div class=\"nav-separator\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\"></div>\r\n\r\n      <!-- Dynamic Menu -->\r\n      <div class=\"dynamic-menu\" *ngIf=\"!isLoadingMenu && menuHierarchy.length > 0\">\r\n        <ng-container *ngFor=\"let rootItem of getRootMenuItems()\">\r\n          <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(rootItem)\">\r\n            <a [routerLink]=\"hasChildren(rootItem) ? null : rootItem.path\" routerLinkActive=\"active\"\r\n              class=\"nav-item root-item\" [class.expandable]=\"hasChildren(rootItem)\"\r\n              (click)=\"onMenuItemClick($event, rootItem)\">\r\n              <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(rootItem) }}</span>\r\n              <span class=\"nav-text\">{{ rootItem.name }}</span>\r\n              <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(rootItem)\">\r\n                {{ isMenuItemOpen(rootItem.code) ? 'expand_more' : 'chevron_right' }}\r\n              </span>\r\n            </a>\r\n\r\n            <!-- Submenu -->\r\n            <div class=\"submenu\" *ngIf=\"hasChildren(rootItem) && isMenuItemOpen(rootItem.code)\">\r\n              <ng-container\r\n                *ngTemplateOutlet=\"menuTemplate; context: { items: rootItem.children, level: 2 }\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- Loading Indicator -->\r\n      <div class=\"menu-loading\" *ngIf=\"isLoadingMenu\">\r\n        <span class=\"material-symbols-outlined nav-icon\">hourglass_empty</span>\r\n        <span class=\"nav-text\">Cargando men\u00FA...</span>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n\r\n  <!-- Recursive Menu Template -->\r\n  <ng-template #menuTemplate let-items=\"items\" let-level=\"level\">\r\n    <ng-container *ngFor=\"let item of items\">\r\n      <div class=\"menu-item-container\" [class.has-children]=\"hasChildren(item)\" [attr.data-level]=\"level\">\r\n        <a [routerLink]=\"hasChildren(item) ? null : item.path\" routerLinkActive=\"active\" class=\"nav-item submenu-item\"\r\n          [class.expandable]=\"hasChildren(item)\" (click)=\"onMenuItemClick($event, item)\">\r\n          <span class=\"material-symbols-outlined nav-icon\">{{ getMenuIcon(item) }}</span>\r\n          <span class=\"nav-text\">{{ item.name }}</span>\r\n          <span class=\"material-symbols-outlined expand-icon\" *ngIf=\"hasChildren(item)\">\r\n            {{ isMenuItemOpen(item.code) ? 'expand_more' : 'chevron_right' }}\r\n          </span>\r\n        </a>\r\n\r\n        <!-- Recursive Submenu (max 5 levels) -->\r\n        <div class=\"submenu\" *ngIf=\"hasChildren(item) && isMenuItemOpen(item.code) && level < 5\">\r\n          <ng-container\r\n            *ngTemplateOutlet=\"menuTemplate; context: { items: item.children, level: level + 1 }\"></ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <!-- Main Content -->\r\n  <main class=\"dashboard-content\">\r\n    <div class=\"content-wrapper\">\r\n      <router-outlet></router-outlet>\r\n    </div>\r\n  </main>\r\n\r\n  <!-- Footer -->\r\n  <footer class=\"dashboard-footer\">\r\n    <div class=\"footer-content\">\r\n      <span class=\"footer-text\">\r\n        {{ getConfig('footerText') }}\r\n        <ng-container *ngIf=\"getConfig('showVersion')\">\r\n          Versi\u00F3n {{ appVersion }}.\r\n        </ng-container>\r\n        Todos los derechos reservados.\r\n      </span>\r\n    </div>\r\n  </footer>\r\n</div>", styles: [":host{display:block;width:100%;min-height:100vh}.dashboard{min-height:100vh;display:flex;flex-direction:column;background:var(--color-primary, #313945);font-family:var(--font-family-primary, \"Museo Sans\", sans-serif)}.dashboard-header{background:var(--color-primary, #313945);color:var(--color-white, #ffffff);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1000}@media(max-width:768px){.dashboard-header{flex-direction:column;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem);align-items:stretch}}.header-mobile-top{display:none}@media(max-width:768px){.header-mobile-top{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem)}}.ministry-logo-mobile{display:none}@media(max-width:768px){.ministry-logo-mobile{display:flex;align-items:center}.ministry-logo-mobile img{height:50px;width:auto;filter:brightness(0) invert(1)}}.mobile-title{display:none}@media(max-width:768px){.mobile-title{display:block;font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff);margin:0;text-align:right;flex:1}}.header-mobile-bottom{display:none}@media(max-width:768px){.header-mobile-bottom{display:flex;justify-content:space-between;align-items:center;width:100%;gap:var(--spacing-2, .5rem);padding-top:var(--spacing-1, .25rem)}}.header-desktop-layout{display:flex;justify-content:space-between;align-items:center;width:100%}@media(max-width:768px){.header-desktop-layout{display:none}}.header-left{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.header-right{display:flex;align-items:center}.ministry-logo{display:flex;align-items:center;gap:var(--spacing-3, .75rem)}.ministry-logo .logo-icon{display:flex;width:80px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.ministry-logo .logo-icon img{width:100%;height:auto}.ministry-logo .ministry-info h1{font-family:var(--font-family-primary, sans-serif);font-size:var(--font-size-xl, 1.25rem);font-weight:var(--font-weight-bold, 700);margin:0;color:var(--color-white, #ffffff);line-height:1.2}.ministry-logo .ministry-info .subtitle{font-size:var(--font-size-xs, .75rem);color:#ffffffd9;font-weight:var(--font-weight-medium, 500)}.hamburger-btn{display:none;flex-direction:column;justify-content:space-around;width:36px;height:36px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;padding:6px;z-index:1003;transition:all .3s ease;flex-shrink:0}@media(max-width:768px){.hamburger-btn{display:flex}}.hamburger-btn .hamburger-line{width:100%;height:2px;background:var(--color-white, #ffffff);border-radius:2px;transition:all .3s ease;transform-origin:center}.hamburger-btn.active{background:#fff3}.hamburger-btn.active .hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.hamburger-btn.active .hamburger-line:nth-child(2){opacity:0}.hamburger-btn.active .hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hamburger-btn:hover{background:#fff3}.user-profile{position:relative;display:flex;align-items:center}.user-profile .user-info-trigger{display:flex;align-items:center;gap:var(--spacing-2, .5rem);background:#ffffff1a;padding:var(--spacing-1, .25rem) var(--spacing-3, .75rem);border-radius:var(--border-radius-lg, .5rem);border:1px solid rgba(255,255,255,.2);cursor:pointer;transition:all .2s ease;color:inherit;font-family:inherit}.user-profile .user-info-trigger:hover{background:#ffffff26}.user-profile .user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--color-white, #ffffff) 0%,#e2e8f0 100%);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold, 700);color:var(--color-primary, #313945);font-size:var(--font-size-sm, .875rem);box-shadow:0 2px 6px #0000001a}.user-profile .user-details{display:flex;flex-direction:column}.user-profile .user-details .user-name{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-white, #ffffff)}.user-profile .dropdown-icon{color:#fffc;font-size:18px;transition:transform .2s ease}.user-panel{position:absolute;top:calc(100% + var(--spacing-2, .5rem));right:0;min-width:320px;background:var(--color-white, #ffffff);border-radius:var(--border-radius-lg, .5rem);box-shadow:0 10px 40px #0003;border:1px solid var(--color-gray-200, #e9ecef);z-index:1100;overflow:hidden;animation:slideDown .2s ease}@media(max-width:768px){.user-panel{position:absolute;top:calc(100% + var(--spacing-1, .25rem));right:0;left:auto;min-width:280px;max-width:calc(100vw - 1rem);max-height:80vh;overflow-y:auto}}.user-panel-header{background:linear-gradient(135deg,#3c4557,#2a3142);padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem)}.user-panel-header .panel-title{font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-bold, 700);color:var(--color-white, #ffffff)}.user-panel-content{padding:var(--spacing-3, .75rem)}.user-info-item{display:flex;align-items:flex-start;gap:var(--spacing-3, .75rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);border-bottom:1px solid var(--color-gray-100, #f1f3f4)}.user-info-item:last-child{border-bottom:none}.user-info-item .info-icon{font-size:var(--font-size-lg, 1.125rem);flex-shrink:0;color:var(--color-primary, #313945)}.user-info-item .info-content{display:flex;flex-direction:column;gap:2px;flex:1}.user-info-item .info-content .info-label{font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);color:var(--color-gray-600, #5a6268);text-transform:uppercase;letter-spacing:.5px}.user-info-item .info-content .info-value{font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);color:var(--color-gray-900, #212529);word-break:break-word}@media(max-width:768px){.mobile-hidden{display:none!important}}.user-panel-footer{padding:var(--spacing-3, .75rem);background:var(--color-gray-50, #f8f9fa);border-top:1px solid var(--color-gray-200, #e9ecef)}.user-panel-footer .logout-btn-panel{width:100%;background:linear-gradient(135deg,#dc2626,#b91c1c);color:var(--color-white, #ffffff);border:none;padding:var(--spacing-3, .75rem);border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-bold, 700);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:var(--spacing-2, .5rem);text-transform:uppercase}.user-panel-footer .logout-btn-panel:hover{background:linear-gradient(135deg,#b91c1c,#991b1b)}.nav-overlay{display:none}@media(max-width:768px){.nav-overlay{display:block;position:fixed;inset:0;background:#00000080;z-index:1001;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}}.dashboard-nav{background-color:#3c4557;box-shadow:0 2px 8px #0000001a}@media(max-width:768px){.dashboard-nav{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85%;transform:translate(-100%);z-index:1002;overflow-y:auto;box-shadow:2px 0 10px #0000004d;transition:transform .3s ease}.dashboard-nav.mobile-open{transform:translate(0)}}.dashboard-nav .nav-mobile-header{display:none}@media(max-width:768px){.dashboard-nav .nav-mobile-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-3, .75rem);background:var(--color-primary, #313945);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:10}}.dashboard-nav .nav-mobile-logo{display:flex;align-items:center;gap:var(--spacing-2, .5rem)}.dashboard-nav .nav-mobile-logo img{width:36px;height:auto;filter:brightness(0) invert(1)}.dashboard-nav .nav-mobile-logo .nav-mobile-title{color:var(--color-white, #ffffff);font-size:var(--font-size-md, 1rem);font-weight:var(--font-weight-semibold, 600)}.dashboard-nav .nav-close-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:var(--border-radius-md, .375rem);cursor:pointer;color:var(--color-white, #ffffff)}.dashboard-nav .nav-close-btn:hover{background:#fff3}.nav-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-1, .25rem);padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem)}@media(max-width:768px){.nav-container{flex-direction:column;align-items:stretch;padding:var(--spacing-3, .75rem);gap:var(--spacing-1, .25rem)}}.nav-item{display:flex;align-items:center;gap:var(--spacing-2, .5rem);padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);color:var(--color-white, #ffffff);text-decoration:none;border-radius:var(--border-radius-md, .375rem);font-size:var(--font-size-sm, .875rem);font-weight:var(--font-weight-medium, 500);transition:all .2s ease;cursor:pointer;background:transparent;border:none;font-family:inherit;white-space:nowrap}.nav-item:hover{background:#ffffff1a}.nav-item.active{background:#fff3}.nav-item .nav-icon{font-size:18px;flex-shrink:0}.nav-item .nav-text{flex:1;text-align:left}.nav-item .expand-icon{font-size:16px;flex-shrink:0;margin-left:var(--spacing-1, .25rem)}@media(max-width:768px){.nav-item{width:100%;padding:var(--spacing-3, .75rem)}}.nav-separator{width:1px;height:20px;background:#fff3;margin:0 var(--spacing-1, .25rem);align-self:center}@media(max-width:768px){.nav-separator{width:100%;height:1px;margin:var(--spacing-2, .5rem) 0}}.dynamic-menu{display:flex;flex-wrap:wrap;gap:var(--spacing-1, .25rem);align-items:flex-start}@media(max-width:768px){.dynamic-menu{flex-direction:column;width:100%}}.menu-item-container{position:relative}@media(max-width:768px){.menu-item-container{width:100%}}@media(min-width:769px){.menu-item-container>.submenu{position:absolute;top:100%;left:0;min-width:220px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1000;margin-top:var(--spacing-1, .25rem)}}@media(max-width:768px){.menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}@media(min-width:769px){.submenu{min-width:200px}}@media(max-width:768px){.submenu{width:100%}}.submenu .menu-item-container{width:100%}@media(min-width:769px){.submenu .menu-item-container>.submenu{position:absolute;top:0;left:100%;min-width:200px;background:#3c4557;border-radius:var(--border-radius-md, .375rem);box-shadow:0 4px 12px #0000004d;padding:var(--spacing-2, .5rem) 0;z-index:1001;margin-left:2px}}@media(max-width:768px){.submenu .menu-item-container>.submenu{padding-left:var(--spacing-4, 1rem)}}.submenu .submenu-item{padding:var(--spacing-2, .5rem) var(--spacing-4, 1rem);font-size:var(--font-size-sm, .875rem);width:100%;box-sizing:border-box}.submenu .submenu-item:hover{background:#ffffff1a}.menu-loading{display:flex;align-items:center;gap:var(--spacing-2, .5rem);color:#ffffffb3;padding:var(--spacing-2, .5rem) var(--spacing-3, .75rem);font-size:var(--font-size-sm, .875rem)}.dashboard-content{flex:1;background:var(--color-white, #ffffff)}.dashboard-content .content-wrapper{padding:var(--spacing-4, 1rem) var(--spacing-6, 1.5rem);max-width:1400px;margin:0 auto}@media(max-width:768px){.dashboard-content .content-wrapper{padding:var(--spacing-3, .75rem)}}.dashboard-footer{background:#3c4557;color:#c5c8cf;padding:var(--spacing-3, .75rem) var(--spacing-4, 1rem);border-top:1px solid rgba(255,255,255,.1)}.dashboard-footer .footer-content{text-align:center}.dashboard-footer .footer-text{font-size:var(--font-size-xs, .75rem)}@media(min-width:769px){.mobile-user{display:none}}@media(max-width:768px){.desktop-user{display:none}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [{ type: AuthService }, { type: AuthorizationService }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -1425,5 +1509,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AuthService, AuthorizationService, ConfigService, DEFAULT_DASHBOARD_CONFIG, DEFAULT_LIBRARY_CONFIG, DEFAULT_LOGIN_CONFIG, DashboardComponent, FrmkConfigStore, LoginComponent, VERSION, VERSION_INFO, authGuard };
+export { AuthService, AuthorizationService, ConfigService, DEFAULT_DASHBOARD_CONFIG, DEFAULT_LIBRARY_CONFIG, DEFAULT_LOGIN_CONFIG, DashboardComponent, FrmkConfigStore, LoginComponent, TokenStorageService, VERSION, VERSION_INFO, authGuard };
 //# sourceMappingURL=shared-lib-angular.mjs.map