valtech-components 4.0.56 → 4.0.57

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.56';
+const VERSION = '4.0.57';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -7341,6 +7341,20 @@ const VALTECH_DEFAULT_CONTENT = {
             mfaTOTP: 'Ingresa el código de tu app de autenticación',
             mfaEmail: 'Ingresa el código enviado a tu correo',
             mfaSMS: 'Ingresa el código enviado a tu teléfono',
+            mfaBackupCode: 'Ingresa uno de tus códigos de respaldo',
+            mfaUseBackupLink: '¿Perdiste tu dispositivo?',
+            mfaUseBackupAction: 'Usa un código de respaldo',
+            mfaUseTotpAction: 'Volver al código de la app',
+            backupCodeMinLength: 'El código de respaldo tiene 8 caracteres',
+            mfaLostBackupLink: '¿Sin acceso a tu segundo factor?',
+            mfaResetAction: 'Restablecer MFA por correo',
+            mfaResetTitle: 'Restablecer MFA',
+            mfaResetRequestDescription: 'Te enviaremos un código a tu correo para deshabilitar la verificación en dos pasos.',
+            mfaResetConfirmDescription: 'Ingresa el código que enviamos a tu correo.',
+            mfaResetSubmit: 'Enviar código',
+            mfaResetConfirmSubmit: 'Deshabilitar MFA',
+            mfaResetCodeSent: 'Si la cuenta existe, enviamos un código a tu correo.',
+            mfaResetDone: 'MFA deshabilitado. Inicia sesión nuevamente.',
             // Forgot/Reset password
             forgotTitle: 'Recuperar contraseña',
             forgotDescription: 'Ingresa tu correo electrónico y te enviaremos un código.',
@@ -7526,6 +7540,20 @@ const VALTECH_DEFAULT_CONTENT = {
             mfaTOTP: 'Enter the code from your authenticator app',
             mfaEmail: 'Enter the code sent to your email',
             mfaSMS: 'Enter the code sent to your phone',
+            mfaBackupCode: 'Enter one of your backup codes',
+            mfaUseBackupLink: 'Lost your device?',
+            mfaUseBackupAction: 'Use a backup code',
+            mfaUseTotpAction: 'Back to authenticator code',
+            backupCodeMinLength: 'The backup code is 8 characters',
+            mfaLostBackupLink: 'No access to your second factor?',
+            mfaResetAction: 'Reset MFA by email',
+            mfaResetTitle: 'Reset MFA',
+            mfaResetRequestDescription: 'We will email you a code to disable two-step verification.',
+            mfaResetConfirmDescription: 'Enter the code we sent to your email.',
+            mfaResetSubmit: 'Send code',
+            mfaResetConfirmSubmit: 'Disable MFA',
+            mfaResetCodeSent: 'If the account exists, we sent a code to your email.',
+            mfaResetDone: 'MFA disabled. Please sign in again.',
             // Forgot/Reset password
             forgotTitle: 'Recover password',
             forgotDescription: 'Enter your email and we will send you a code.',
@@ -8762,6 +8790,25 @@ class AuthService {
             .post(`${this.baseUrl}/reset-password`, request)
             .pipe(catchError(error => this.handleAuthError(error)));
     }
+    /**
+     * Inicia el reset de MFA por email cuando el user perdió su 2º factor
+     * (TOTP + backup codes). Envía un código de 6 dígitos al email verificado.
+     * Response siempre genérica (anti-enumeración).
+     */
+    requestMFAReset(request) {
+        return this.http
+            .post(`${this.baseUrl}/mfa/reset-request`, request)
+            .pipe(catchError(error => this.handleAuthError(error)));
+    }
+    /**
+     * Confirma el reset de MFA con el código recibido por email → deshabilita MFA.
+     * Tras esto el user inicia sesión normalmente (sin 2º factor) y re-enrola.
+     */
+    confirmMFAReset(request) {
+        return this.http
+            .post(`${this.baseUrl}/mfa/reset`, request)
+            .pipe(catchError(error => this.handleAuthError(error)));
+    }
     /**
      * Activa una cuenta pre-aprovisionada por una organización (ADR-023): define
      * la contraseña con el token del enlace de email. En éxito el backend devuelve
@@ -40691,6 +40738,16 @@ class LoginComponent {
         this._verifyFormSectionName = signal('');
         this._mfaVerifyFormState = signal(ComponentStates.ENABLED);
         this._mfaMethod = signal('TOTP');
+        /** Método MFA pendiente — expuesto al template para gatear el link de backup (solo TOTP). */
+        this.mfaMethod = this._mfaMethod.asReadonly();
+        /** A: el user togglea a "código de respaldo" (8 chars alfanuméricos) cuando perdió el 2º factor. */
+        this.mfaUseBackupCode = signal(false);
+        // B: reset de MFA por email (cuando el user no tiene backup codes).
+        this.isMFAResetModalOpen = false;
+        this._mfaResetStep = signal('request');
+        this.mfaResetStep = this._mfaResetStep.asReadonly();
+        this._mfaResetFormState = signal(ComponentStates.ENABLED);
+        this._mfaResetEmail = signal('');
         this._forgotPasswordFormState = signal(ComponentStates.ENABLED);
         this._resetPasswordFormState = signal(ComponentStates.ENABLED);
         this._resetFormSectionName = signal('');
@@ -40857,7 +40914,51 @@ class LoginComponent {
         // ==========================================
         this.mfaVerifyFormProps = computed(() => {
             const method = this._mfaMethod();
-            const sectionName = method === 'TOTP' ? this.t('mfaTOTP') : method === 'EMAIL' ? this.t('mfaEmail') : this.t('mfaSMS');
+            const useBackup = this.mfaUseBackupCode();
+            const sectionName = useBackup
+                ? this.t('mfaBackupCode')
+                : method === 'TOTP'
+                    ? this.t('mfaTOTP')
+                    : method === 'EMAIL'
+                        ? this.t('mfaEmail')
+                        : this.t('mfaSMS');
+            // A: backup code = 8 chars alfanuméricos → input de texto (el PIN de 6
+            // celdas numéricas no puede capturarlo). El backend rutea por longitud.
+            const codeField = useBackup
+                ? {
+                    type: InputType.TEXT,
+                    label: '',
+                    name: 'code',
+                    token: 'mfa-backup',
+                    hint: '',
+                    placeholder: '',
+                    errorKeys: {
+                        required: 'codeRequired',
+                        minlength: 'backupCodeMinLength',
+                    },
+                    validators: [Validators.required, Validators.minLength(8)],
+                    order: 0,
+                    state: ComponentStates.ENABLED,
+                    autoFocus: true,
+                }
+                : {
+                    type: InputType.PIN_CODE,
+                    label: '',
+                    name: 'code',
+                    token: 'mfa-pin',
+                    hint: '',
+                    placeholder: '',
+                    errorKeys: {
+                        required: 'codeRequired',
+                        minlength: 'codeMinLength',
+                    },
+                    validators: [Validators.required, Validators.minLength(6)],
+                    order: 0,
+                    state: ComponentStates.ENABLED,
+                    length: 6,
+                    allowNumbersOnly: true,
+                    autoFocus: true,
+                };
             return this.i18nHelper.resolveForm({
                 nameKey: 'mfaTitle',
                 i18nNamespace: '_auth',
@@ -40865,26 +40966,7 @@ class LoginComponent {
                     {
                         name: sectionName,
                         order: 0,
-                        fields: [
-                            {
-                                type: InputType.PIN_CODE,
-                                label: '',
-                                name: 'code',
-                                token: 'mfa-pin',
-                                hint: '',
-                                placeholder: '',
-                                errorKeys: {
-                                    required: 'codeRequired',
-                                    minlength: 'codeMinLength',
-                                },
-                                validators: [Validators.required, Validators.minLength(6)],
-                                order: 0,
-                                state: ComponentStates.ENABLED,
-                                length: 6,
-                                allowNumbersOnly: true,
-                                autoFocus: true,
-                            },
-                        ],
+                        fields: [codeField],
                     },
                 ],
                 actions: {
@@ -40896,6 +40978,79 @@ class LoginComponent {
             });
         });
         // ==========================================
+        // MFA RESET FORM (computed) — B: recovery por email
+        // ==========================================
+        this.mfaResetRequestFormProps = computed(() => this.i18nHelper.resolveForm({
+            nameKey: 'mfaResetTitle',
+            i18nNamespace: '_auth',
+            sections: [
+                {
+                    name: this.t('mfaResetRequestDescription'),
+                    order: 0,
+                    fields: [
+                        {
+                            type: InputType.EMAIL,
+                            label: '',
+                            name: 'email',
+                            token: 'mfa-reset-email',
+                            hint: '',
+                            placeholderKey: 'emailPlaceholder',
+                            value: this._mfaResetEmail(),
+                            errorKeys: {
+                                required: 'emailRequired',
+                                email: 'emailInvalid',
+                            },
+                            validators: [Validators.required, Validators.email],
+                            order: 0,
+                            state: ComponentStates.ENABLED,
+                        },
+                    ],
+                },
+            ],
+            actions: {
+                ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
+                token: 'mfa-reset-request-submit',
+                textKey: 'mfaResetSubmit',
+            },
+            state: this._mfaResetFormState(),
+        }));
+        this.mfaResetConfirmFormProps = computed(() => this.i18nHelper.resolveForm({
+            nameKey: 'mfaResetTitle',
+            i18nNamespace: '_auth',
+            sections: [
+                {
+                    name: this.t('mfaResetConfirmDescription'),
+                    order: 0,
+                    fields: [
+                        {
+                            type: InputType.PIN_CODE,
+                            label: '',
+                            name: 'code',
+                            token: 'mfa-reset-pin',
+                            hint: '',
+                            placeholder: '',
+                            errorKeys: {
+                                required: 'codeRequired',
+                                minlength: 'codeMinLength',
+                            },
+                            validators: [Validators.required, Validators.minLength(6)],
+                            order: 0,
+                            state: ComponentStates.ENABLED,
+                            length: 6,
+                            allowNumbersOnly: true,
+                            autoFocus: true,
+                        },
+                    ],
+                },
+            ],
+            actions: {
+                ...button({ text: '', type: 'submit', fill: 'solid', expand: 'block' }),
+                token: 'mfa-reset-confirm-submit',
+                textKey: 'mfaResetConfirmSubmit',
+            },
+            state: this._mfaResetFormState(),
+        }));
+        // ==========================================
         // FORGOT PASSWORD FORM (computed)
         // ==========================================
         this.forgotPasswordFormProps = computed(() => this.i18nHelper.resolveForm({
@@ -41026,6 +41181,7 @@ class LoginComponent {
             next: () => {
                 this._loginFormState.set(ComponentStates.ENABLED);
                 if (this.authService.mfaPending().required) {
+                    this._mfaResetEmail.set(email); // B: prefill del reset por email
                     this.openMFAVerifyModal();
                     return;
                 }
@@ -41154,6 +41310,7 @@ class LoginComponent {
     openMFAVerifyModal() {
         const method = this.authService.mfaPending().method;
         this._mfaMethod.set(method);
+        this.mfaUseBackupCode.set(false);
         this._mfaVerifyFormState.set(ComponentStates.ENABLED);
         this.isMFAVerifyModalOpen = true;
         this.onMFARequired.emit({ method });
@@ -41161,6 +41318,60 @@ class LoginComponent {
     closeMFAVerifyModal() {
         this.isMFAVerifyModalOpen = false;
     }
+    /** A: alterna entre el código TOTP (6 díg) y un código de respaldo (8 chars). */
+    toggleMFABackupCode() {
+        this.mfaUseBackupCode.update(v => !v);
+    }
+    // ==========================================
+    // MFA RESET HANDLERS — B: recovery por email
+    // ==========================================
+    openMFAResetModal() {
+        this._mfaResetStep.set('request');
+        this._mfaResetFormState.set(ComponentStates.ENABLED);
+        this.isMFAResetModalOpen = true;
+    }
+    closeMFAResetModal() {
+        this.isMFAResetModalOpen = false;
+        this._mfaResetStep.set('request');
+    }
+    mfaResetRequestHandler(event) {
+        const email = event.fields['email'];
+        if (!email) {
+            this.showToast(this.t('enterEmail'));
+            return;
+        }
+        this._mfaResetFormState.set(ComponentStates.WORKING);
+        this._mfaResetEmail.set(email);
+        this.authService.requestMFAReset({ email }).subscribe({
+            next: () => {
+                this._mfaResetFormState.set(ComponentStates.ENABLED);
+                this._mfaResetStep.set('confirm');
+                this.showToast(this.t('mfaResetCodeSent'));
+            },
+            error: err => {
+                this._mfaResetFormState.set(ComponentStates.ENABLED);
+                this.handleError(err, 'mfa');
+            },
+        });
+    }
+    mfaResetConfirmHandler(event) {
+        const code = event.fields['code'];
+        this._mfaResetFormState.set(ComponentStates.WORKING);
+        this.authService.confirmMFAReset({ email: this._mfaResetEmail(), code }).subscribe({
+            next: () => {
+                this._mfaResetFormState.set(ComponentStates.ENABLED);
+                // MFA deshabilitado → cerramos ambos modales; el user reinicia el login
+                // (ahora sin 2º factor) y re-enrola TOTP desde ajustes.
+                this.closeMFAResetModal();
+                this.closeMFAVerifyModal();
+                this.showToast(this.t('mfaResetDone'));
+            },
+            error: err => {
+                this._mfaResetFormState.set(ComponentStates.ENABLED);
+                this.handleError(err, 'mfa');
+            },
+        });
+    }
     verifyMFAHandler(event) {
         const code = event.fields['code'];
         this._mfaVerifyFormState.set(ComponentStates.WORKING);
@@ -41377,7 +41588,7 @@ class LoginComponent {
         this.stopResetResendCooldown();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoginComponent, isStandalone: true, selector: "val-login", inputs: { props: "props" }, outputs: { onSuccess: "onSuccess", onError: "onError", onMFARequired: "onMFARequired" }, ngImport: i0, template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo \u2014 default de marca (--main-logo) si el consumer no pasa logo -->\n  <div class=\"logo-container\">\n    <val-image [props]=\"resolvedLogo\" />\n  </div>\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LoginComponent, isStandalone: true, selector: "val-login", inputs: { props: "props" }, outputs: { onSuccess: "onSuccess", onError: "onError", onMFARequired: "onMFARequired" }, ngImport: i0, template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo \u2014 default de marca (--main-logo) si el consumer no pasa logo -->\n  <div class=\"logo-container\">\n    <val-image [props]=\"resolvedLogo\" />\n  </div>\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            @if (mfaUseBackupCode()) {\n            <a (click)=\"toggleMFABackupCode()\">{{ t('mfaUseTotpAction') }}</a>\n            } @else { {{ t('mfaUseBackupLink') }}\n            <a (click)=\"toggleMFABackupCode()\">{{ t('mfaUseBackupAction') }}</a>\n            }\n          </ion-text>\n        </div>\n        }\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('mfaLostBackupLink') }}\n            <a (click)=\"openMFAResetModal()\">{{ t('mfaResetAction') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Reset Modal (B) \u2014 recovery por email cuando no hay backup codes -->\n<ion-modal [isOpen]=\"isMFAResetModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"closeMFAResetModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAResetModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        @if (mfaResetStep() === 'request') {\n        <val-form [props]=\"mfaResetRequestFormProps()\" (onSubmit)=\"mfaResetRequestHandler($event)\" />\n        } @else {\n        <val-form [props]=\"mfaResetConfirmFormProps()\" (onSubmit)=\"mfaResetConfirmHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: ImageComponent, selector: "val-image", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -41393,7 +41604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonToolbar,
                         FormComponent,
                         ImageComponent,
-                    ], template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo \u2014 default de marca (--main-logo) si el consumer no pasa logo -->\n  <div class=\"logo-container\">\n    <val-image [props]=\"resolvedLogo\" />\n  </div>\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"] }]
+                    ], template: "<div class=\"val-login\" [class.val-login--card]=\"config.showCard\">\n  <!-- Logo \u2014 default de marca (--main-logo) si el consumer no pasa logo -->\n  <div class=\"logo-container\">\n    <val-image [props]=\"resolvedLogo\" />\n  </div>\n\n  <!-- Login Form -->\n  <val-form [props]=\"loginFormProps()\" (onSubmit)=\"loginHandler($event)\" />\n\n  <!-- OAuth Section -->\n  @if (config.showOAuth && config.oauthProviders.length > 0) {\n  <div class=\"oauth-separator\">\n    <span>{{ t('orContinueWith') }}</span>\n  </div>\n\n  <div class=\"oauth-buttons\">\n    @for (provider of config.oauthProviders; track provider) {\n    <ion-button\n      expand=\"block\"\n      fill=\"outline\"\n      color=\"dark\"\n      (click)=\"loginWithOAuth(provider)\"\n      [disabled]=\"isOAuthLoading\"\n    >\n      @switch (provider) { @case ('google') {\n      <ion-icon slot=\"start\" name=\"logo-google\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithGoogle') }} } @case ('apple') {\n      <ion-icon slot=\"start\" name=\"logo-apple\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithApple') }} } @case ('microsoft') {\n      <ion-icon slot=\"start\" name=\"logo-microsoft\" aria-hidden=\"true\"></ion-icon>\n      {{ isOAuthLoading ? t('connecting') : t('continueWithMicrosoft') }} } }\n    </ion-button>\n    }\n  </div>\n  }\n\n  <!-- Register Link -->\n  @if (config.showRegister) {\n  <div class=\"auth-link\">\n    <ion-text color=\"dark\">\n      {{ t('noAccount') }}\n      <a (click)=\"openRegisterModal()\">{{ t('register') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Forgot Password Link -->\n  @if (config.showForgotPassword) {\n  <div class=\"auth-link forgot-password\">\n    <ion-text color=\"dark\">\n      {{ t('forgotLink') }}\n      <a (click)=\"openForgotPasswordModal()\">{{ t('recoverPassword') }}</a>\n    </ion-text>\n  </div>\n  }\n\n  <!-- Legal Notice -->\n  @if (props.legal) {\n  <div class=\"legal-notice\">\n    <ion-text color=\"dark\">\n      <p>\n        {{ t('legalPrefix') }} @if (resolvedCompanyLink) {\n        <a [href]=\"resolvedCompanyLink\" target=\"_blank\" rel=\"noopener noreferrer\"\n          ><strong>{{ props.legal.companyName }}</strong></a\n        >\n        } @else {\n        <strong>{{ props.legal.companyName }}</strong>\n        } {{ t('legalSuffix') }} @if (props.legal.termsLink) {\n        <a [href]=\"props.legal.termsLink\">{{ t('termsAndConditions') }}</a>\n        } @else {\n        <span>{{ t('termsAndConditions') }}</span>\n        } {{ t('and') }} @if (props.legal.privacyLink) {\n        <a [href]=\"props.legal.privacyLink\">{{ t('privacyPolicy') }}</a>\n        } @else {\n        <span>{{ t('privacyPolicy') }}</span>\n        }.\n      </p>\n    </ion-text>\n  </div>\n  }\n</div>\n\n<!-- Register Modal -->\n<ion-modal [isOpen]=\"isRegisterModalOpen\" (didDismiss)=\"closeRegisterModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeRegisterModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"registerFormProps()\" (onSubmit)=\"registerHandler($event)\" />\n        <div class=\"auth-link\">\n          <ion-text color=\"dark\">\n            {{ t('hasAccount') }}\n            <a (click)=\"closeRegisterModal()\">{{ t('signIn') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Verify Email Modal -->\n<ion-modal [isOpen]=\"isVerifyModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"verifyFormProps()\" (onSubmit)=\"verifyHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Forgot Password Modal -->\n<ion-modal [isOpen]=\"isForgotPasswordModalOpen\" (didDismiss)=\"closeForgotPasswordModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeForgotPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"forgotPasswordFormProps()\" (onSubmit)=\"forgotPasswordHandler($event)\" />\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- Reset Password Modal -->\n<ion-modal [isOpen]=\"isResetPasswordModalOpen\" [backdropDismiss]=\"false\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeResetPasswordModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"resetPasswordFormProps()\" (onSubmit)=\"resetPasswordHandler($event)\" />\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('noCodeReceived') }} @if (resetResendCooldown > 0) {\n            <span class=\"cooldown\">{{ t('resendIn', { seconds: resetResendCooldown.toString() }) }}</span>\n            } @else {\n            <a (click)=\"resendResetCode()\">{{ t('resend') }}</a>\n            }\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Verify Modal -->\n<ion-modal [isOpen]=\"isMFAVerifyModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"onMFAVerifyDismissed()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAVerifyModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        <val-form [props]=\"mfaVerifyFormProps()\" (onSubmit)=\"verifyMFAHandler($event)\" />\n        @if (mfaMethod() === 'TOTP') {\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            @if (mfaUseBackupCode()) {\n            <a (click)=\"toggleMFABackupCode()\">{{ t('mfaUseTotpAction') }}</a>\n            } @else { {{ t('mfaUseBackupLink') }}\n            <a (click)=\"toggleMFABackupCode()\">{{ t('mfaUseBackupAction') }}</a>\n            }\n          </ion-text>\n        </div>\n        }\n        <div class=\"resend-link\">\n          <ion-text color=\"dark\">\n            {{ t('mfaLostBackupLink') }}\n            <a (click)=\"openMFAResetModal()\">{{ t('mfaResetAction') }}</a>\n          </ion-text>\n        </div>\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n\n<!-- MFA Reset Modal (B) \u2014 recovery por email cuando no hay backup codes -->\n<ion-modal [isOpen]=\"isMFAResetModalOpen\" [backdropDismiss]=\"false\" (didDismiss)=\"closeMFAResetModal()\">\n  <ng-template>\n    <ion-header>\n      <ion-toolbar>\n        <ion-buttons slot=\"end\">\n          <ion-button fill=\"clear\" [attr.aria-label]=\"t('close')\" (click)=\"closeMFAResetModal()\">\n            <ion-icon name=\"close-outline\" aria-hidden=\"true\"></ion-icon>\n          </ion-button>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n    <ion-content class=\"ion-padding\">\n      <section class=\"modal-form-section\">\n        <div class=\"logo-container\">\n          <val-image [props]=\"resolvedLogo\" />\n        </div>\n        @if (mfaResetStep() === 'request') {\n        <val-form [props]=\"mfaResetRequestFormProps()\" (onSubmit)=\"mfaResetRequestHandler($event)\" />\n        } @else {\n        <val-form [props]=\"mfaResetConfirmFormProps()\" (onSubmit)=\"mfaResetConfirmHandler($event)\" />\n        }\n      </section>\n    </ion-content>\n  </ng-template>\n</ion-modal>\n", styles: [".val-login{width:100%}.val-login--card{padding:1rem .75rem;background:var(--ion-color-light);border-radius:16px;box-shadow:0 2px 8px #00000014}.logo-container{max-width:130px;margin-bottom:1.5rem}.auth-link{text-align:center;margin-top:1rem;font-size:.9rem}.auth-link a{color:var(--ion-color-primary);text-decoration:none;font-weight:500;cursor:pointer}.auth-link a:hover{text-decoration:underline}.oauth-separator{display:flex;align-items:center;margin:1.5rem 0}.oauth-separator:before,.oauth-separator:after{content:\"\";flex:1;height:1px;background:var(--ion-color-medium-tint)}.oauth-separator span{padding:0 1rem;color:var(--ion-color-dark);font-size:.85rem}.oauth-buttons{margin-bottom:1rem}.oauth-buttons ion-button{--border-radius: 8px;--border-width: 1px}.oauth-buttons ion-icon{font-size:1.2rem;margin-right:.5rem}.legal-notice{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ion-color-medium-tint)}.legal-notice p{font-size:.75rem;line-height:1.5;text-align:center;margin:0}.legal-notice a{color:var(--ion-color-primary);text-decoration:none}.legal-notice a:hover{text-decoration:underline}.resend-link{text-align:center;margin-top:1rem;font-size:.9rem}.resend-link a{color:var(--ion-color-primary);cursor:pointer;font-weight:500}.resend-link a:hover{text-decoration:underline}.resend-link .cooldown{color:var(--ion-color-medium)}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }], onSuccess: [{
@@ -52178,7 +52389,7 @@ const ORGANIZATION_VIEW_I18N = {
         inviteSuccess: 'Invitación enviada.',
         inviteError: 'No se pudo enviar la invitación.',
         membersError: 'No se pudieron cargar los miembros.',
-        leaveTitle: 'Salir de la organización',
+        leaveTitle: '⚠️ Salir de la organización',
         leaveHint: 'Dejarás de tener acceso a esta organización.',
         leaveCta: 'Salir',
         leaveOwnerHint: 'Eres el propietario. Transfiere la propiedad antes de salir.',
@@ -52194,7 +52405,7 @@ const ORGANIZATION_VIEW_I18N = {
         retry: 'Reintentar',
         saveError: 'No se pudo guardar. Intenta de nuevo.',
         leaveError: 'No se pudo salir. Intenta de nuevo.',
-        transferTitle: 'Transferir propiedad',
+        transferTitle: '⚠️ Transferir propiedad',
         transferHint: 'Elige un miembro para transferirle la propiedad de la organización.',
         transferSelect: 'Seleccionar nuevo propietario',
         transferCta: 'Transferir',
@@ -52245,7 +52456,10 @@ const ORGANIZATION_VIEW_I18N = {
         permDelete: 'Eliminar',
         permManage: 'Gestionar',
         membersShowMore: 'Ver más',
-        deleteTitle: 'Eliminar organización',
+        orgsNewQuestion: '¿Necesitas otra organización?',
+        orgsNewHint: 'Crea un espacio separado para otro equipo, empresa o proyecto.',
+        orgsNewCta: 'Nueva organización',
+        deleteTitle: '⚠️ Eliminar organización',
         deleteHint: 'Esta acción es permanente e irreversible. Todos los miembros perderán el acceso.',
         deleteCta: 'Eliminar organización',
         deleteConfirm: '¿Estás seguro? Esta acción eliminará permanentemente la organización y no se puede deshacer.',
@@ -52289,7 +52503,7 @@ const ORGANIZATION_VIEW_I18N = {
         retry: 'Retry',
         saveError: 'Could not save. Please try again.',
         leaveError: 'Could not leave. Please try again.',
-        transferTitle: 'Transfer ownership',
+        transferTitle: '⚠️ Transfer ownership',
         transferHint: 'Choose a member to transfer ownership of this organization.',
         transferSelect: 'Select new owner',
         transferCta: 'Transfer',
@@ -52340,7 +52554,10 @@ const ORGANIZATION_VIEW_I18N = {
         permDelete: 'Delete',
         permManage: 'Manage',
         membersShowMore: 'Show more',
-        deleteTitle: 'Delete organization',
+        orgsNewQuestion: 'Need another organization?',
+        orgsNewHint: 'Create a separate space for another team, company or project.',
+        orgsNewCta: 'New organization',
+        deleteTitle: '⚠️ Delete organization',
         deleteHint: 'This action is permanent and irreversible. All members will lose access.',
         deleteCta: 'Delete organization',
         deleteConfirm: 'Are you sure? This action will permanently delete the organization and cannot be undone.',
@@ -52406,6 +52623,7 @@ class OrganizationViewComponent {
                 showMembers: merged.showMembers ?? true,
                 showRoles: merged.showRoles ?? true,
                 showInvite: merged.showInvite ?? true,
+                showNewOrgCta: merged.showNewOrgCta ?? false,
                 showTransferOwnership: merged.showTransferOwnership ?? true,
                 showLeave: merged.showLeave ?? true,
                 showDeleteOrg: merged.showDeleteOrg ?? true,
@@ -52418,6 +52636,7 @@ class OrganizationViewComponent {
                 onOwnershipTransferred: merged.onOwnershipTransferred,
                 onLeftOrg: merged.onLeftOrg,
                 onOrgDeleted: merged.onOrgDeleted,
+                onOrgCreated: merged.onOrgCreated,
             };
         });
         this.org = signal(null);
@@ -52426,6 +52645,7 @@ class OrganizationViewComponent {
         this.loading = signal(false);
         this.leaving = signal(false);
         this.permissionsOpen = signal(false);
+        this.createOrgModalOpen = signal(false);
         this.orgLoadError = signal(null);
         this.orgErrorState = computed(() => {
             this.i18n.lang();
@@ -52571,6 +52791,28 @@ class OrganizationViewComponent {
             type: 'button',
             state: this.deleting() ? ComponentStates.DISABLED : ComponentStates.ENABLED,
         }));
+        this.newOrgCtaProps = computed(() => ({
+            title: this.tt('orgsNewQuestion'),
+            description: this.tt('orgsNewHint'),
+            padding: '16px',
+            borderRadius: '14px',
+            actions: {
+                position: 'right',
+                columned: false,
+                buttons: [
+                    {
+                        text: this.tt('orgsNewCta'),
+                        color: 'primary',
+                        fill: 'solid',
+                        shape: 'round',
+                        size: 'default',
+                        type: 'button',
+                        state: 'ENABLED',
+                        token: 'org-new',
+                    },
+                ],
+            },
+        }));
         /** Guarda para detectar el primer disparo del effect (evita doble carga). */
         this.lastLoadedOrgId = null;
         const ns = this.ns;
@@ -52680,6 +52922,13 @@ class OrganizationViewComponent {
             this.deleting.set(false);
         }
     }
+    onNewOrg() {
+        this.createOrgModalOpen.set(true);
+    }
+    onOrgCreated(newOrg) {
+        this.createOrgModalOpen.set(false);
+        this.resolvedConfig().onOrgCreated?.(newOrg);
+    }
     onOpenInvite() {
         void this.modalService.openAdaptive({
             component: InviteMemberModalComponent,
@@ -53124,6 +53373,13 @@ class OrganizationViewComponent {
         </section>
       }
 
+      @if (resolvedConfig().showNewOrgCta) {
+        <!-- Nueva org CTA -->
+        <section class="settings-section">
+          <val-cta-card [props]="newOrgCtaProps()" (onAction)="onNewOrg()" />
+        </section>
+      }
+
       @if (resolvedConfig().showInvite) {
         <!-- Invite: solo admin+ (gating RBAC interno) -->
         <section *valHasPermission="'users:*'" class="settings-section" data-testid="org-invite-section">
@@ -53272,12 +53528,19 @@ class OrganizationViewComponent {
         [config]="{ i18nNamespace: resolvedConfig().i18nNamespace }"
         (dismissed)="permissionsOpen.set(false)"
       />
+      <val-create-org-modal
+        [isOpen]="createOrgModalOpen()"
+        (dismissed)="createOrgModalOpen.set(false)"
+        (created)="onOrgCreated($event)"
+      />
     </div>
-  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}.org-info-logo{display:flex;justify-content:center;padding:8px 0 16px}.org-logo-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--ion-color-light)}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}.section-title-danger{display:flex;align-items:center;gap:8px}.section-title-danger val-title{display:block}.danger-icon{display:block;font-size:1.125rem;color:var(--ion-color-warning-shade, #d4a017);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "directive", type: HasPermissionDirective, selector: "[valHasPermission]", inputs: ["valHasPermission"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: MemberCardComponent, selector: "val-member-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: PermissionsModalComponent, selector: "val-permissions-modal", inputs: ["isOpen", "config"], outputs: ["dismissed"] }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}.org-info-logo{display:flex;justify-content:center;padding:8px 0 16px}.org-logo-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--ion-color-light)}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}.section-title-danger{display:flex;align-items:center;gap:8px}.section-title-danger val-title{display:block}.danger-icon{display:block;font-size:1.125rem;color:var(--ion-color-warning-shade, #d4a017);flex-shrink:0}\n"], dependencies: [{ kind: "component", type: CreateOrgModalComponent, selector: "val-create-org-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed", "created"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "directive", type: HasPermissionDirective, selector: "[valHasPermission]", inputs: ["valHasPermission"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: MemberCardComponent, selector: "val-member-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: PermissionsModalComponent, selector: "val-permissions-modal", inputs: ["isOpen", "config"], outputs: ["dismissed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OrganizationViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-organization-view', standalone: true, imports: [
+                        CreateOrgModalComponent,
+                        CtaCardComponent,
                         DisplayComponent,
                         EmptyStateComponent,
                         HasPermissionDirective,
@@ -53448,6 +53711,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </section>
       }
 
+      @if (resolvedConfig().showNewOrgCta) {
+        <!-- Nueva org CTA -->
+        <section class="settings-section">
+          <val-cta-card [props]="newOrgCtaProps()" (onAction)="onNewOrg()" />
+        </section>
+      }
+
       @if (resolvedConfig().showInvite) {
         <!-- Invite: solo admin+ (gating RBAC interno) -->
         <section *valHasPermission="'users:*'" class="settings-section" data-testid="org-invite-section">
@@ -53596,6 +53866,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         [config]="{ i18nNamespace: resolvedConfig().i18nNamespace }"
         (dismissed)="permissionsOpen.set(false)"
       />
+      <val-create-org-modal
+        [isOpen]="createOrgModalOpen()"
+        (dismissed)="createOrgModalOpen.set(false)"
+        (created)="onOrgCreated($event)"
+      />
     </div>
   `, styles: [".page{padding:16px 0;max-width:720px;margin:0 auto}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}.org-info-logo{display:flex;justify-content:center;padding:8px 0 16px}.org-logo-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--ion-color-light)}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}.section-title-danger{display:flex;align-items:center;gap:8px}.section-title-danger val-title{display:block}.danger-icon{display:block;font-size:1.125rem;color:var(--ion-color-warning-shade, #d4a017);flex-shrink:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{