metag-sdk-ionic 1.2.11 → 1.3.0-security

package/dist/src/app/pages/id-vision/id-vision.component.js

@@ -15,7 +15,9 @@ import { NavigationService } from './services/navigation/navigation.service';
 import { ProcessingService } from './services/processing/processing.service';
 import { DpiService } from './services/dpi/dpi-service.service';
 import { register } from './../../../swiper-wrapper';
-import { DirectPhotoSelfieComponent } from './components/direct-photo-selfie/direct-photo-selfie.component';
+import lottie from 'lottie-web';
+import { AcuerdoVideoPage } from "./acuerdo-video/acuerdo-video.page";
+import { CameraSecurityBlockComponent } from './components/camera-security-block/camera-security-block.component';
 import * as i0 from "@angular/core";
 import * as i1 from "@ionic/angular";
 import * as i2 from "./services/modal-services/modal-dpi-services";
@@ -25,163 +27,223 @@ import * as i5 from "./services/validation/validation.service";
 import * as i6 from "./services/navigation/navigation.service";
 import * as i7 from "./services/processing/processing.service";
 import * as i8 from "./services/dpi/dpi-service.service";
-import * as i9 from "@angular/common";
+import * as i9 from "./services/security/virtual-camera-detection.service";
+import * as i10 from "@angular/common";
 const _c0 = ["dpi"];
 const _c1 = ["swiperContainer"];
-const _c2 = a0 => ({ "content-simple-process": a0 });
-const _c3 = a0 => ({ "blur-effect": a0 });
-function IdVisionComponent_swiper_container_1_swiper_slide_2_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "swiper-slide")(1, "div", 19)(2, "div", 20)(3, "h2", 21);
+const _c2 = a0 => ({ "sdk-metag-blur-effect": a0 });
+function IdVisionComponent_ion_content_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-content", 3)(1, "app-camera-security-block", 12);
+    i0.ɵɵlistener("exitPressed", function IdVisionComponent_ion_content_0_Template_app_camera_security_block_exitPressed_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleInitSecurityExit()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", "Bloqueo por seguridad")("description", "Detectamos una c\u00E1mara virtual o no permitida durante la inicializaci\u00F3n del SDK.")("reason", ctx_r1.initCameraBlockReason)("exitLabel", "Entiendo");
+} }
+function IdVisionComponent_swiper_container_2_swiper_slide_2_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "swiper-slide")(1, "div", 21)(2, "div", 22)(3, "div", 23);
     i0.ɵɵtext(4, "Verifiquemos tu identidad");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "p", 22);
-    i0.ɵɵtext(6, "Para completar tu verificaci\u00F3n, por favor ingresa tu n\u00FAmero de identificaci\u00F3n (DPI).");
+    i0.ɵɵelementStart(5, "div", 24);
+    i0.ɵɵtext(6, " Por favor confirma tu n\u00FAmero de identificaci\u00F3n (DPI) y sigue las instrucciones. ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "ion-item", 23);
-    i0.ɵɵelement(8, "ion-input", 24, 1);
+    i0.ɵɵelementStart(7, "ion-item", 25);
+    i0.ɵɵelement(8, "ion-input", 26, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "ion-grid", 25)(11, "ion-row")(12, "div", 26);
-    i0.ɵɵelement(13, "img", 27);
+    i0.ɵɵelementStart(10, "ion-grid", 27)(11, "ion-row", 28)(12, "ion-col", 29);
+    i0.ɵɵelement(13, "img", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 28)(15, "p", 29);
-    i0.ɵɵtext(16, "Sube fotos de documentos que prueben tu identidad");
+    i0.ɵɵelementStart(14, "ion-col")(15, "div", 31);
+    i0.ɵɵtext(16, " Ten a la mano tu DPI y sube una foto del frente y reverso de tu documento. ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "ion-row")(18, "div", 26);
-    i0.ɵɵelement(19, "img", 30);
+    i0.ɵɵelementStart(17, "ion-row", 28)(18, "ion-col", 29);
+    i0.ɵɵelement(19, "img", 32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 28)(21, "p", 29);
-    i0.ɵɵtext(22, "Graba un video selfie, mant\u00E9n tu rostro centrado en la pantalla y evita moverte.");
-    i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(23, "div", 31)(24, "ion-button", 18);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_1_swiper_slide_2_Template_ion_button_click_24_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.handleClick()); });
-    i0.ɵɵtext(25, "Empecemos");
+    i0.ɵɵelementStart(20, "ion-col")(21, "div", 31);
+    i0.ɵɵtext(22, " Graba un video corto, mant\u00E9n tu rostro dentro del c\u00EDrculo y evita moverte. ");
     i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(23, "ion-button", 20);
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_2_swiper_slide_2_Template_ion_button_click_23_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.handleClick()); });
+    i0.ɵɵtext(24, " Empecemos ");
+    i0.ɵɵelementEnd()()();
 } }
-function IdVisionComponent_swiper_container_1_swiper_slide_3_div_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36)(1, "div", 20)(2, "h2", 21);
+function IdVisionComponent_swiper_container_2_swiper_slide_3_div_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 22)(2, "div", 23);
     i0.ɵɵtext(3, "Acuerdo de v\u00EDdeo");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 29);
-    i0.ɵɵtext(5, "Graba un breve video para completar tu proceso de identificaci\u00F3n.");
+    i0.ɵɵelementStart(4, "div", 24);
+    i0.ɵɵtext(5, "Graba un video corto para completar tu proceso de identificaci\u00F3n.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "ion-grid", 25)(7, "ion-row")(8, "div", 26);
-    i0.ɵɵelement(9, "img", 37);
+    i0.ɵɵelementStart(6, "ion-grid", 27)(7, "ion-row", 28)(8, "ion-col", 29);
+    i0.ɵɵelement(9, "img", 38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 28)(11, "p");
-    i0.ɵɵtext(12, "Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.");
+    i0.ɵɵelementStart(10, "ion-col")(11, "div", 31);
+    i0.ɵɵtext(12, "Tu rostro debe de estar iluminado sin sombra y sin reflejos. ");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "ion-row")(14, "div", 26);
-    i0.ɵɵelement(15, "img", 30);
+    i0.ɵɵelementStart(13, "ion-row", 28)(14, "ion-col", 29);
+    i0.ɵɵelement(15, "img", 32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 28)(17, "p");
-    i0.ɵɵtext(18, "Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.");
+    i0.ɵɵelementStart(16, "ion-col")(17, "div", 31);
+    i0.ɵɵtext(18, "No uses anteojos, ni sombreros, tu rostro debe estar visible.");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(19, "div", 31)(20, "ion-button", 18);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_1_swiper_slide_3_div_2_Template_ion_button_click_20_listener() { i0.ɵɵrestoreView(_r4); const step_r5 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r5.action()); });
-    i0.ɵɵtext(21, "Abrir la c\u00E1mara");
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "ion-button", 20);
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_2_swiper_slide_3_div_2_Template_ion_button_click_19_listener() { i0.ɵɵrestoreView(_r5); const step_r6 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r6.action()); });
+    i0.ɵɵtext(20, "Abrir la c\u00E1mara");
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c3, ctx_r2.simpleProcess));
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c2, ctx_r1.simpleProcess));
 } }
-function IdVisionComponent_swiper_container_1_swiper_slide_3_div_3_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 20)(2, "h2", 21);
-    i0.ɵɵtext(3, "Coloca la parte frontal de tu DPI");
+function IdVisionComponent_swiper_container_2_swiper_slide_3_div_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "div", 22)(2, "div", 23);
+    i0.ɵɵtext(3, "DPI frontal");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 38);
-    i0.ɵɵtext(5, "Evita sombras, reflejos y coloca tu documento dentro del recuadro.");
+    i0.ɵɵelementStart(4, "div", 24);
+    i0.ɵɵtext(5, " Toma una foto de la parte frontal de tu documento, asegurate que este dentro del recuadro, evita sombras y reflejos. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 39);
-    i0.ɵɵelement(7, "img", 40);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 31)(9, "ion-button", 18);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_1_swiper_slide_3_div_3_Template_ion_button_click_9_listener() { i0.ɵɵrestoreView(_r6); const step_r5 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r5.action()); });
-    i0.ɵɵtext(10, "Tomar una foto");
+    i0.ɵɵelementStart(6, "div", 39)(7, "div", 40)(8, "div", 41);
+    i0.ɵɵelement(9, "img", 42);
     i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(10, "ion-button", 20);
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_2_swiper_slide_3_div_3_Template_ion_button_click_10_listener() { i0.ɵɵrestoreView(_r7); const step_r6 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r6.action()); });
+    i0.ɵɵtext(11, "Tomar foto");
+    i0.ɵɵelementEnd()();
 } }
-function IdVisionComponent_swiper_container_1_swiper_slide_3_div_4_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 20)(2, "h2", 21);
-    i0.ɵɵtext(3, "Coloca el reverso de tu DPI");
+function IdVisionComponent_swiper_container_2_swiper_slide_3_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "div", 22)(2, "div", 23);
+    i0.ɵɵtext(3, "DPI reverso");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 38);
-    i0.ɵɵtext(5, "Evita sombras, reflejos y coloca tu documento dentro del recuadro.");
+    i0.ɵɵelementStart(4, "div", 24);
+    i0.ɵɵtext(5, " Voltea tu documento y toma una foto del reverso de tu documento, asegurate que este dentro del recuadro, evita sombras y reflejos. ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 39);
-    i0.ɵɵelement(7, "img", 41);
+    i0.ɵɵelementStart(6, "div", 39)(7, "div", 40)(8, "div", 41);
+    i0.ɵɵelement(9, "img", 42);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 31)(9, "ion-button", 18);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_1_swiper_slide_3_div_4_Template_ion_button_click_9_listener() { i0.ɵɵrestoreView(_r7); const step_r5 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r5.action()); });
-    i0.ɵɵtext(10, "Tomar una foto");
+    i0.ɵɵelementStart(10, "div", 43);
+    i0.ɵɵelement(11, "img", 44);
     i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(12, "ion-button", 45);
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_2_swiper_slide_3_div_4_Template_ion_button_click_12_listener() { i0.ɵɵrestoreView(_r8); const step_r6 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r6.action()); });
+    i0.ɵɵtext(13, "Tomar foto ");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("flip", ctx_r1.flip);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("disabled", ctx_r1.waitFlip);
 } }
-function IdVisionComponent_swiper_container_1_swiper_slide_3_div_5_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 20)(2, "h2", 21);
-    i0.ɵɵtext(3, "Video Selfie");
+function IdVisionComponent_swiper_container_2_swiper_slide_3_div_5_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "div", 22)(2, "div", 23);
+    i0.ɵɵtext(3, "Prueba de vida");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 22);
-    i0.ɵɵtext(5, "Graba un breve video para completar tu proceso de identificaci\u00F3n.");
+    i0.ɵɵelementStart(4, "div", 24);
+    i0.ɵɵtext(5, "Graba un video corto para completar tu proceso de identificaci\u00F3n.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "ion-grid", 25)(7, "ion-row")(8, "ion-row")(9, "div", 26);
-    i0.ɵɵelement(10, "img", 37);
+    i0.ɵɵelementStart(6, "ion-grid", 27)(7, "ion-row", 28)(8, "ion-col", 29);
+    i0.ɵɵelement(9, "img", 38);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 28)(12, "p", 29);
-    i0.ɵɵtext(13, "Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.");
+    i0.ɵɵelementStart(10, "ion-col")(11, "div", 31);
+    i0.ɵɵtext(12, "Tu rostro debe de estar iluminado sin sombra y sin reflejos.");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "ion-row")(15, "div", 26);
-    i0.ɵɵelement(16, "img", 30);
+    i0.ɵɵelementStart(13, "ion-row", 28)(14, "ion-col", 29);
+    i0.ɵɵelement(15, "img", 32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 28)(18, "p", 29);
-    i0.ɵɵtext(19, "Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.");
-    i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(20, "div", 31)(21, "ion-button", 18);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_1_swiper_slide_3_div_5_Template_ion_button_click_21_listener() { i0.ɵɵrestoreView(_r8); const step_r5 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r5.action()); });
-    i0.ɵɵtext(22, "Abrir la c\u00E1mara");
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(16, "ion-col")(17, "div", 31);
+    i0.ɵɵtext(18, "No uses anteojos, ni sombreros, tu rostro debe estar visible.");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(19, "ion-button", 20);
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_2_swiper_slide_3_div_5_Template_ion_button_click_19_listener() { i0.ɵɵrestoreView(_r9); const step_r6 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r6.action()); });
+    i0.ɵɵtext(20, "Abrir la c\u00E1mara");
+    i0.ɵɵelementEnd()();
 } }
-function IdVisionComponent_swiper_container_1_swiper_slide_3_div_6_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "div", 20)(2, "h2", 21);
+function IdVisionComponent_swiper_container_2_swiper_slide_3_div_6_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div")(1, "div", 46)(2, "h2", 47);
     i0.ɵɵtext(3, "Foto Selfie");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 29);
+    i0.ɵɵelementStart(4, "p", 48);
     i0.ɵɵtext(5, "Toma una foto para completar tu proceso de identificaci\u00F3n.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "ion-grid", 25)(7, "ion-row")(8, "ion-row")(9, "div", 26);
-    i0.ɵɵelement(10, "img", 37);
+    i0.ɵɵelementStart(6, "ion-grid", 49)(7, "ion-row")(8, "ion-row")(9, "div", 50);
+    i0.ɵɵelement(10, "img", 51);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 28)(12, "p");
+    i0.ɵɵelementStart(11, "div", 52)(12, "p");
     i0.ɵɵtext(13, "Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "ion-row")(15, "div", 26);
-    i0.ɵɵelement(16, "img", 30);
+    i0.ɵɵelementStart(14, "ion-row")(15, "div", 50);
+    i0.ɵɵelement(16, "img", 53);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 28)(18, "p");
+    i0.ɵɵelementStart(17, "div", 52)(18, "p");
     i0.ɵɵtext(19, "Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.");
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(20, "div", 31)(21, "ion-button", 18);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_1_swiper_slide_3_div_6_Template_ion_button_click_21_listener() { i0.ɵɵrestoreView(_r9); const step_r5 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r5.action()); });
-    i0.ɵɵtext(22, "Abrir la c\u00E1mara");
+    i0.ɵɵelementStart(20, "div", 54)(21, "ion-button", 55);
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_2_swiper_slide_3_div_6_Template_ion_button_click_21_listener() { i0.ɵɵrestoreView(_r10); const step_r6 = i0.ɵɵnextContext().$implicit; return i0.ɵɵresetView(step_r6.action()); });
+    i0.ɵɵtext(22, "Abrir la c\u00E1mara ");
     i0.ɵɵelementEnd()()();
 } }
-function IdVisionComponent_swiper_container_1_swiper_slide_3_div_7_Template(rf, ctx) { if (rf & 1) {
+function IdVisionComponent_swiper_container_2_swiper_slide_3_div_7_ion_button_13_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-button", 65);
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_2_swiper_slide_3_div_7_ion_button_13_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.finalizar()); });
+    i0.ɵɵtext(1, " Continuar ");
+    i0.ɵɵelementEnd();
+} }
+function IdVisionComponent_swiper_container_2_swiper_slide_3_div_7_ion_button_14_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-button", 65);
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_2_swiper_slide_3_div_7_ion_button_14_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.handleExit()); });
+    i0.ɵɵtext(1, " Salir ");
+    i0.ɵɵelementEnd();
+} }
+function IdVisionComponent_swiper_container_2_swiper_slide_3_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div")(1, "div", 56)(2, "div", 22)(3, "div", 23);
+    i0.ɵɵtext(4, "Verificando identidad");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div", 57)(6, "div", 58);
+    i0.ɵɵelement(7, "img", 59)(8, "div", 60);
+    i0.ɵɵelementStart(9, "div", 61)(10, "p", 62);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(12, "ion-progress-bar", 63);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(13, IdVisionComponent_swiper_container_2_swiper_slide_3_div_7_ion_button_13_Template, 2, 0, "ion-button", 64)(14, IdVisionComponent_swiper_container_2_swiper_slide_3_div_7_ion_button_14_Template, 2, 0, "ion-button", 64);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(7);
+    i0.ɵɵpropertyInterpolate("src", ctx_r1.image, i0.ɵɵsanitizeUrl);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("show", ctx_r1.showText);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.currentText, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r1.progress);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.progress === 1 && ctx_r1.comparsionStatus === "success");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.progress === 1 && ctx_r1.comparsionStatus === "error");
+} }
+function IdVisionComponent_swiper_container_2_swiper_slide_3_div_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "h2");
     i0.ɵɵtext(2, "Paso desconocido");
     i0.ɵɵelementEnd()();
 } }
-function IdVisionComponent_swiper_container_1_swiper_slide_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "swiper-slide")(1, "div", 32);
-    i0.ɵɵtemplate(2, IdVisionComponent_swiper_container_1_swiper_slide_3_div_2_Template, 22, 3, "div", 33)(3, IdVisionComponent_swiper_container_1_swiper_slide_3_div_3_Template, 11, 0, "div", 34)(4, IdVisionComponent_swiper_container_1_swiper_slide_3_div_4_Template, 11, 0, "div", 34)(5, IdVisionComponent_swiper_container_1_swiper_slide_3_div_5_Template, 23, 0, "div", 34)(6, IdVisionComponent_swiper_container_1_swiper_slide_3_div_6_Template, 23, 0, "div", 34)(7, IdVisionComponent_swiper_container_1_swiper_slide_3_div_7_Template, 3, 0, "div", 35);
+function IdVisionComponent_swiper_container_2_swiper_slide_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "swiper-slide")(1, "div", 33);
+    i0.ɵɵtemplate(2, IdVisionComponent_swiper_container_2_swiper_slide_3_div_2_Template, 21, 3, "div", 34)(3, IdVisionComponent_swiper_container_2_swiper_slide_3_div_3_Template, 12, 0, "div", 35)(4, IdVisionComponent_swiper_container_2_swiper_slide_3_div_4_Template, 14, 3, "div", 35)(5, IdVisionComponent_swiper_container_2_swiper_slide_3_div_5_Template, 21, 0, "div", 35)(6, IdVisionComponent_swiper_container_2_swiper_slide_3_div_6_Template, 23, 0, "div", 35)(7, IdVisionComponent_swiper_container_2_swiper_slide_3_div_7_Template, 15, 7, "div", 35)(8, IdVisionComponent_swiper_container_2_swiper_slide_3_div_8_Template, 3, 0, "div", 36);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const step_r5 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const step_r6 = ctx.$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c2, ctx_r2.simpleProcess))("ngSwitch", step_r5.type);
+    i0.ɵɵproperty("ngSwitch", step_r6.type);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngSwitchCase", 1);
     i0.ɵɵadvance();
@@ -192,51 +254,54 @@ function IdVisionComponent_swiper_container_1_swiper_slide_3_Template(rf, ctx) {
     i0.ɵɵproperty("ngSwitchCase", 4);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngSwitchCase", 5);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngSwitchCase", 6);
 } }
-function IdVisionComponent_swiper_container_1_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42)(1, "p", 42);
+function IdVisionComponent_swiper_container_2_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23);
     i0.ɵɵtext(2, "Informaci\u00F3n procesada de manera correcta");
     i0.ɵɵelementEnd()();
 } }
-function IdVisionComponent_swiper_container_1_div_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42)(1, "p", 42);
+function IdVisionComponent_swiper_container_2_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23);
     i0.ɵɵtext(2, "Ocurri\u00F3 un error al procesar la informaci\u00F3n");
     i0.ɵɵelementEnd()();
 } }
-function IdVisionComponent_swiper_container_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "swiper-container", 10, 0);
-    i0.ɵɵtemplate(2, IdVisionComponent_swiper_container_1_swiper_slide_2_Template, 26, 0, "swiper-slide", 11)(3, IdVisionComponent_swiper_container_1_swiper_slide_3_Template, 8, 9, "swiper-slide", 12);
-    i0.ɵɵelementStart(4, "swiper-slide")(5, "div", 13);
-    i0.ɵɵtemplate(6, IdVisionComponent_swiper_container_1_div_6_Template, 3, 0, "div", 14)(7, IdVisionComponent_swiper_container_1_div_7_Template, 3, 0, "div", 14);
-    i0.ɵɵelementStart(8, "div", 15);
-    i0.ɵɵelement(9, "img", 16);
+function IdVisionComponent_swiper_container_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "swiper-container", 13, 0);
+    i0.ɵɵlistener("swiperslidechange", function IdVisionComponent_swiper_container_2_Template_swiper_container_swiperslidechange_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSlideChange()); });
+    i0.ɵɵtemplate(2, IdVisionComponent_swiper_container_2_swiper_slide_2_Template, 25, 0, "swiper-slide", 14)(3, IdVisionComponent_swiper_container_2_swiper_slide_3_Template, 9, 7, "swiper-slide", 15);
+    i0.ɵɵelementStart(4, "swiper-slide")(5, "div", 16);
+    i0.ɵɵtemplate(6, IdVisionComponent_swiper_container_2_div_6_Template, 3, 0, "div", 17)(7, IdVisionComponent_swiper_container_2_div_7_Template, 3, 0, "div", 17);
+    i0.ɵɵelementStart(8, "div", 18);
+    i0.ɵɵelement(9, "img", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 17)(11, "ion-button", 18);
-    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_1_Template_ion_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.handleExit()); });
-    i0.ɵɵtext(12, "Continuar");
-    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(10, "ion-button", 20);
+    i0.ɵɵlistener("click", function IdVisionComponent_swiper_container_2_Template_ion_button_click_10_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.handleExit()); });
+    i0.ɵɵtext(11, "Continuar");
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", !ctx_r2.simpleProcess);
+    i0.ɵɵproperty("ngIf", !ctx_r1.simpleProcess);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.validationConfig);
+    i0.ɵɵproperty("ngForOf", ctx_r1.validationConfig);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r2.isValid);
+    i0.ɵɵproperty("ngIf", ctx_r1.isValid);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.isValid);
+    i0.ɵɵproperty("ngIf", !ctx_r1.isValid);
 } }
-function IdVisionComponent_ion_fab_4_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ion-fab", 43)(1, "ion-fab-button", 44);
-    i0.ɵɵlistener("click", function IdVisionComponent_ion_fab_4_Template_ion_fab_button_click_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.copyProccess()); });
-    i0.ɵɵelement(2, "ion-icon", 45);
+function IdVisionComponent_ion_fab_5_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-fab", 66)(1, "ion-fab-button", 67);
+    i0.ɵɵlistener("click", function IdVisionComponent_ion_fab_5_Template_ion_fab_button_click_1_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyProccess()); });
+    i0.ɵɵelement(2, "ion-icon", 68);
     i0.ɵɵelementEnd()();
 } }
 register();
 export class IdVisionComponent {
-    constructor(modalController, alertController, platform, modalDpiServices, sdkCommunicationService, navController, cdRef, toastController, loadingController, configurationService, validationService, navigationService, processingService, dpiService) {
+    constructor(modalController, alertController, platform, modalDpiServices, sdkCommunicationService, navController, cdRef, toastController, loadingController, configurationService, validationService, navigationService, processingService, dpiService, elementRef, virtualCameraDetectionService) {
         this.modalController = modalController;
         this.alertController = alertController;
         this.platform = platform;
@@ -251,6 +316,8 @@ export class IdVisionComponent {
         this.navigationService = navigationService;
         this.processingService = processingService;
         this.dpiService = dpiService;
+        this.elementRef = elementRef;
+        this.virtualCameraDetectionService = virtualCameraDetectionService;
         // Tutorial images
         this.tutoImage1 = 'assets/imagesIdvision/documentsImage.png';
         this.tutoImage2 = 'assets/imagesIdvision/documentsImage.png';
@@ -259,6 +326,7 @@ export class IdVisionComponent {
         // Component inputs
         this.isSwipe = false;
         this.dpiCode = '';
+        this.dpiCodeSecond = 'N/A';
         this.connection = '';
         this.apikey = '';
         this.env = '';
@@ -278,27 +346,47 @@ export class IdVisionComponent {
             dpiFront: false,
             dpiBack: false,
             videoSelfie: false,
-            photoSelfie: false
+            photoSelfie: false,
+            validateFace: false
         };
         this.stepVisibility = {
             showAcuerdoVideo: false,
             showDpiFront: false,
             showDpiBack: false,
             showVideoSelfie: false,
-            showPhotoSelfie: false
+            showPhotoSelfie: false,
+            showValidationFace: false
         };
         this.isValid = false;
         this.configEnv = { env_endpoint: '', error: false };
         this.loadingElement = null;
+        this.flip = false;
+        this.waitFlip = true;
+        this.progress = 0;
+        this.image = '';
+        this.isInitCameraBlocked = false;
+        this.initCameraBlockReason = '';
+        this.texts = [
+            'Analizando rostro...',
+            'Comparando rostro contra DPI anterior...'
+        ];
+        this.successText = 'Verificación completada';
+        this.errorText = 'No se pudo verificar la identidad';
+        this.currentText = '';
+        this.showText = false;
+        this.index = 0;
+        this.comparsionStatus = 'none';
         this.isAndroid = this.platform.is('android');
         this.isIOS = this.platform.is('ios');
-        // Bind de los event handlers UNA SOLA VEZ en el constructor
-        //  this.boundOnBackButton = this.onBackButton.bind(this);
         this.boundOnBeforeUnload = this.onBeforeUnload.bind(this);
         this.boundOnPopState = this.onPopState.bind(this);
     }
     async ngOnInit() {
         try {
+            await this.logAvailableVideoInputsOnInit();
+            const canContinue = await this.evaluateInitialCameraSecurity();
+            if (!canContinue)
+                return;
             // Ejecutar tareas en paralelo para mejor rendimiento
             const [configResult, sdkVersion] = await Promise.all([
                 this.getURL(this.env == "" || this.env == null ? "PROD_IT_01" : this.env),
@@ -309,25 +397,17 @@ export class IdVisionComponent {
             this.versionSDK = sdkVersion;
             if (!this.configEnv.error) {
                 const stepActionMapper = (type) => this.getStepAction(type);
-                const validationResponse = await this.configurationService.loadValidationConfiguration(this.connection, this.configEnv, stepActionMapper);
+                const validationResponse = await this.configurationService.loadValidationConfiguration(this.connection, this.apikey, this.configEnv, stepActionMapper);
                 this.typeProccess = validationResponse.typeProccess;
                 this.validationConfig = validationResponse.steps;
-                console.log('validationConfig', this.validationConfig);
-                console.log('typeProccess', this.typeProccess);
                 if (this.typeProccess === "BiometricToken") {
                     this.simpleProcess = true;
-                    // Deshabilitar botón de atrás para simpleProcess
-                    //    this.disableBackButton();
                     await this.showLoading();
-                    // Configurar para simpleProcess usando la configuración real
                     await this.loadSimpleProcessConfig();
                     this.setupModalSubscriptions();
                     await this.InitProccess();
                     await this.hideLoading();
-                    // Pequeño delay para asegurar que el loading se cierre completamente
                     await new Promise(resolve => setTimeout(resolve, 100));
-                    // NO llamar a executeFirstAvailableAction aquí - ya se llama dentro de InitProccess
-                    // executeFirstAvailableAction() se ejecuta automáticamente en InitProccess cuando no hay continuation
                 }
                 else {
                     // Proceso normal completo
@@ -341,34 +421,6 @@ export class IdVisionComponent {
                 await this.hideLoading();
                 alert('Error en opción de ambiente');
             }
-            // if (this.simpleProcess) {
-            //   // Para simpleProcess, mostrar loading nativo de Ionic
-            //   await this.showLoading();
-            //   if (!this.configEnv.error) {
-            //     this.setupModalSubscriptions();
-            //     await this.InitProccess();
-            //     // Configuración rápida para simpleProcess
-            //     await this.loadSimpleProcessConfig();
-            //     await this.hideLoading();
-            //     await this.openPhotoSelfie();
-            //   } else {
-            //     alert('Error en opción de ambiente');
-            //   }
-            // } else {
-            //   if (!this.configEnv.error) {
-            //     await this.loadMockValidationConfig();
-            //     // Obtener versión del SDK
-            //     if (this.isAndroid || this.isIOS) {
-            //       const info = await App.getInfo();
-            //       this.versionSDK = info.version;
-            //     } else {
-            //       this.versionSDK = 'web';
-            //     }
-            //     this.setupModalSubscriptions();
-            //   } else {
-            //     alert('Error en opción de ambiente');
-            //   }
-            // }
         }
         catch (error) {
             await this.hideLoading();
@@ -376,21 +428,10 @@ export class IdVisionComponent {
         }
     }
     ngAfterViewInit() {
-        console.log('🟢 [Component] ngAfterViewInit() llamado');
-        console.log('🟢 [Component] simpleProcess:', this.simpleProcess);
-        console.log('🟢 [Component] swiperContainerRef:', this.swiperContainerRef);
-        console.log('🟢 [Component] swiperContainerRef?.nativeElement:', this.swiperContainerRef?.nativeElement);
-        // Solo inicializar si el swiper está en el DOM
         if (this.swiperContainerRef && !this.simpleProcess) {
-            console.log('✅ [Component] Condiciones cumplidas, inicializando Swiper...');
-            console.log('✅ [Component] Pasando elemento al servicio:', this.swiperContainerRef.nativeElement);
             this.navigationService.initializeSwiper(this.swiperContainerRef.nativeElement);
             this.swiperElement.set(this.navigationService.getSwiperRef());
         }
-        else {
-            console.warn('⚠️ [Component] SwiperContainer no está disponible en ngAfterViewInit');
-            console.warn('⚠️ [Component] Razón: swiperContainerRef =', !!this.swiperContainerRef, ', simpleProcess =', this.simpleProcess);
-        }
         if (this.dpi) {
             this.dpi.value = this.dpiCode ?? '';
         }
@@ -403,78 +444,6 @@ export class IdVisionComponent {
         // Rehabilitar el botón de atrás al salir del componente
         this.enableBackButton();
     }
-    // Handler para cancelar el proceso completamente
-    handleCancelProcess() {
-        try {
-            console.log('🔄 Usuario canceló el proceso');
-            // IMPORTANTE: Deshabilitar listeners del botón de atrás
-            this.enableBackButton();
-            console.log('✅ Listeners del botón de atrás deshabilitados');
-            // Limpiar cualquier loader activo
-            this.dpiService.forceCloseAllLoaders();
-            // Emitir resultado falso al SDK
-            this.sdkCommunicationService.emitExit(false);
-            console.log('✅ Resultado false enviado al SDK padre');
-            console.log('⚠️ La app padre debe manejar el cierre del componente <app-id-vision>');
-        }
-        catch (error) {
-            console.error('❌ Error al cancelar proceso:', error);
-            // Intentar emitir de todos modos
-            try {
-                this.sdkCommunicationService.emitExit(false);
-            }
-            catch (e) {
-                console.error('❌ No se pudo emitir resultado:', e);
-            }
-        }
-    }
-    // Método para mostrar modal de confirmación de cancelación
-    async showCancelConfirmationModal() {
-        const alert = await this.alertController.create({
-            header: 'Cancelar proceso',
-            message: '¿Estás seguro que deseas cancelar el proceso de validación?',
-            backdropDismiss: false,
-            buttons: [
-                {
-                    text: 'No, continuar',
-                    role: 'cancel',
-                    cssClass: 'alert-button-cancel'
-                },
-                {
-                    text: 'Sí, cancelar',
-                    role: 'confirm',
-                    cssClass: 'alert-button-confirm'
-                }
-            ]
-        });
-        await alert.present();
-        const { role } = await alert.onDidDismiss();
-        if (role === 'confirm') {
-            console.log('🚪 Usuario confirmó cancelación del proceso');
-            return true;
-        }
-        else {
-            console.log('🔄 Usuario decidió continuar con el proceso');
-            return false;
-        }
-    }
-    // Método para deshabilitar el botón de atrás en simpleProcess
-    disableBackButton() {
-        // Evitar duplicación de listeners
-        if (this.backButtonListenerActive) {
-            console.log('⚠️ Back button listeners ya están activos');
-            return;
-        }
-        console.log('🔒 Deshabilitando botón de atrás');
-        if (this.platform.is('android')) {
-            // Para Android, interceptar el botón de atrás físico
-            //  document.addEventListener('backbutton', this.boundOnBackButton, false);
-        }
-        // Para todas las plataformas, interceptar la navegación del navegador
-        window.addEventListener('beforeunload', this.boundOnBeforeUnload);
-        window.addEventListener('popstate', this.boundOnPopState);
-        this.backButtonListenerActive = true;
-    }
     // Método para rehabilitar el botón de atrás
     enableBackButton() {
         if (!this.backButtonListenerActive) {
@@ -489,22 +458,6 @@ export class IdVisionComponent {
         window.removeEventListener('popstate', this.boundOnPopState);
         this.backButtonListenerActive = false;
     }
-    // Handler para el botón de atrás en Android
-    // private async onBackButton(event: Event): Promise<void> {
-    //   console.log('� Botón de atrás presionado');
-    //   event.preventDefault();
-    //   event.stopPropagation();
-    //   // Mostrar modal de confirmación
-    //   const shouldCancel = await this.showCancelConfirmationModal();
-    //   if (shouldCancel) {
-    //     // Usuario confirmó la cancelación
-    //     console.log('❌ Proceso cancelado por el usuario');
-    //     this.handleCancelProcess();
-    //   } else {
-    //     // Usuario decidió continuar
-    //     console.log('✅ Usuario decidió continuar');
-    //   }
-    // }
     // Handler para beforeunload
     onBeforeUnload(event) {
         console.log('🚫 Navegación bloqueada en simpleProcess');
@@ -575,7 +528,7 @@ export class IdVisionComponent {
         }
         // Forzar cierre de TODOS los loadings que puedan estar activos
         let attempts = 0;
-        const maxAttempts = 3;
+        const maxAttempts = 4;
         while (attempts < maxAttempts) {
             try {
                 console.log(`🔄 Verificando top loader (intento ${attempts + 1})...`);
@@ -624,10 +577,13 @@ export class IdVisionComponent {
         // Usar la configuración real obtenida del servicio, pero solo el primer paso [0]
         if (this.validationConfig && this.validationConfig.length > 0) {
             const firstStep = this.validationConfig[0]; // Siempre usar el primer paso
-            // Mantener la funcionalidad: si el tipo es 5, usar openPhotoSelfie
+            // Mapear acciones específicas según el tipo
             if (firstStep.type === 5) {
                 firstStep.action = () => this.openPhotoSelfie();
             }
+            else if (firstStep.type === 6) {
+                firstStep.action = () => this.openFacialValidation();
+            }
             // Asegurar que solo tenemos un único paso
             this.validationConfig = [firstStep];
         }
@@ -647,14 +603,16 @@ export class IdVisionComponent {
             showDpiFront: stepType === 2,
             showDpiBack: stepType === 3,
             showVideoSelfie: stepType === 4,
-            showPhotoSelfie: stepType === 5
+            showPhotoSelfie: stepType === 5,
+            showValidationFace: stepType === 6
         };
         this.validateMetaG = {
             acuerdoVideo: false,
             dpiFront: false,
             dpiBack: false,
             videoSelfie: false,
-            photoSelfie: false
+            photoSelfie: false,
+            validateFace: false
         };
         this.isValid = false;
     }
@@ -690,7 +648,7 @@ export class IdVisionComponent {
             else {
                 // Proceso normal con servicio
                 const stepActionMapper = (type) => this.getStepAction(type);
-                const validationResponse = await this.configurationService.loadValidationConfiguration(this.connection, this.configEnv, stepActionMapper);
+                const validationResponse = await this.configurationService.loadValidationConfiguration(this.connection, this.apikey, this.configEnv, stepActionMapper);
                 this.typeProccess = validationResponse.typeProccess;
                 this.validationConfig = validationResponse.steps;
             }
@@ -728,19 +686,17 @@ export class IdVisionComponent {
     }
     getStepAction(type) {
         const actions = {
+            0: () => this.openAcuerdoVideoNew(),
             1: () => this.openSimpleAcuerdo(),
             2: () => this.openCameraOverlayFrontal(),
             3: () => this.openCameraOverlayTrasero(),
             4: () => this.openVideoSelfie(),
             5: () => this.openPhotoSelfie(),
-            6: () => this.openAcuerdoVideo(),
+            6: () => this.openFacialValidation(),
+            7: () => this.openAcuerdoVideo(),
         };
         return this.configurationService.getStepAction(type, actions);
     }
-    getSlideIndexForType(type) {
-        const stepIndex = this.validationConfig.findIndex(step => step.type === type);
-        return stepIndex >= 0 ? stepIndex + 1 : 1; // +1 porque el slide 0 es el inicial
-    }
     // Navigation methods
     handleClick() {
         this.InitProccess();
@@ -748,15 +704,6 @@ export class IdVisionComponent {
     async handleSlide(slide) {
         this.navigationService.navigateToSlide(slide);
     }
-    handleGetInit() {
-        this.navigationService.navigateToStart();
-    }
-    handleNext() {
-        this.navigationService.navigateNext();
-    }
-    handleSkipTutorial() {
-        this.navigationService.skipTutorial();
-    }
     moveToNextStep(currentType) {
         this.navigationService.moveToNextStep(currentType);
     }
@@ -777,20 +724,11 @@ export class IdVisionComponent {
         try {
             // Cerrar cualquier loading pendiente
             await this.hideLoading();
-            console.log('✅ Loading cerrado');
             // IMPORTANTE: Deshabilitar listeners del botón de atrás cuando el proceso termina
             this.enableBackButton();
-            console.log('✅ Listeners del botón de atrás deshabilitados');
-            // Enviar resultado al SDK padre
-            console.log('🔔 Emitiendo resultado a través de sdkCommunicationService...');
             this.sdkCommunicationService.emitExit(result);
-            console.log(`✅ Resultado ${result} enviado al SDK padre`);
-            console.log('⚠️ La app padre debe ocultar el componente <app-id-vision> escuchando onExit$');
-            console.log('⚠️ Si no se oculta, verificar que la app padre tenga:');
-            console.log('   this.sdkCommunicationService.onExit$.subscribe(result => { showSDK = false; })');
         }
         catch (error) {
-            console.error('Error en handleExitWithResult:', error);
             // Intentar emitir de todos modos
             try {
                 this.sdkCommunicationService.emitExit(result);
@@ -803,13 +741,10 @@ export class IdVisionComponent {
     // Método para forzar el cierre del SDK de manera agresiva
     // Processing methods
     async InitProccess() {
-        // Debug: Verificar que configEnv tenga la URL correcta
-        console.log('🔍 InitProccess - configEnv:', this.configEnv);
-        console.log('🔍 InitProccess - URL endpoint:', this.configEnv?.env_endpoint);
-        console.log('🔍 InitProccess - simpleProcess:', this.simpleProcess);
         try {
             const response = await this.processingService.initProcess(this.dpiCode + '', this.connection, this.apikey, this.versionSDK, this.configEnv);
             if (!response.error) {
+                this.image = response.datos['FOTO'] || '';
                 if (response.continuation) {
                     const completedItem = this.validationService.processContinuationStatus(response.statusAct || []);
                     if (this.simpleProcess) {
@@ -840,6 +775,7 @@ export class IdVisionComponent {
         }
         catch (error) {
             console.error('Error en InitProcess:', error);
+            this.handleInitProcessError('No es posible iniciar el servicio, favor intente mas tarde.');
         }
     }
     executeFirstAvailableAction() {
@@ -867,17 +803,29 @@ export class IdVisionComponent {
     }
     getValidationKeyForType(type) {
         switch (type) {
-            case 1: return 'acuerdoVideo';
-            case 2: return 'dpiFront';
-            case 3: return 'dpiBack';
-            case 4: return 'videoSelfie';
-            case 5: return 'photoSelfie';
-            default: return null;
+            case 1:
+                return 'acuerdoVideo';
+            case 2:
+                return 'dpiFront';
+            case 3:
+                return 'dpiBack';
+            case 4:
+                return 'videoSelfie';
+            case 5:
+                return 'photoSelfie';
+            case 6:
+                return 'validateFace';
+            default:
+                return null;
         }
     }
-    handleInitProcessError(message) {
-        const dpiValue = this.dpi.value ?? '';
-        if (!dpiValue || dpiValue.trim().length === 0) {
+    async handleInitProcessError(message) {
+        const dpiValue = this.dpiCode ?? '';
+        const isUndefinedError = (message ?? '').toLowerCase().includes("cannot read properties of undefined (reading '0')");
+        if (isUndefinedError) {
+            this.showAlert('Error', 'Por favor, intenta nuevamente.', []);
+        }
+        else if (!dpiValue || dpiValue.trim().length === 0) {
             this.showAlert('Error', 'El campo DPI no puede estar vacío', []);
         }
         else if (dpiValue.length > 12) {
@@ -886,12 +834,10 @@ export class IdVisionComponent {
         else {
             this.showAlert('Error', message, []);
         }
+        await this.handleExitWithResult(false, 'init-process-error');
     }
     // DPI Processing methods
     async DpiFrontProccess(filePath) {
-        // Debug: Verificar que configEnv tenga la URL correcta
-        console.log('🔍 DpiFrontProccess - configEnv:', this.configEnv);
-        console.log('🔍 DpiFrontProccess - URL endpoint:', this.configEnv?.env_endpoint);
         try {
             // El loading se maneja completamente dentro del ProcessingService
             const result = await this.processingService.processFrontDPI(filePath, this.connection, this.apikey, this.configEnv, this.hasInternet);
@@ -915,9 +861,6 @@ export class IdVisionComponent {
         }
     }
     async DpiBackProccess(filePath) {
-        // Debug: Verificar que configEnv tenga la URL correcta
-        console.log('🔍 DpiBackProccess - configEnv:', this.configEnv);
-        console.log('🔍 DpiBackProccess - URL endpoint:', this.configEnv?.env_endpoint);
         try {
             // El loading se maneja completamente dentro del ProcessingService
             const result = await this.processingService.processBackDPI(filePath, this.connection, this.apikey, this.configEnv, this.hasInternet);
@@ -965,12 +908,6 @@ export class IdVisionComponent {
             }
             else {
                 this.validationService.updateValidationStep('videoSelfie', false);
-                // if (result.shouldResumeCamera) {
-                //   this.closeModalVideoSelfie();
-                // } else {
-                //   this.sdkCommunicationService.emitExit(false);
-                //   this.navController.back();
-                // }
                 this.closeModalVideoSelfie();
             }
         }
@@ -980,11 +917,6 @@ export class IdVisionComponent {
     }
     // Photo Selfie Processing
     async photoVideoSelfieFile(filePath) {
-        console.log('🔄 Iniciando procesamiento de foto selfie...');
-        // Debug: Verificar que configEnv tenga la URL correcta
-        console.log('🔍 photoVideoSelfieFile - configEnv:', this.configEnv);
-        console.log('🔍 photoVideoSelfieFile - URL endpoint:', this.configEnv?.env_endpoint);
-        console.log('🔍 photoVideoSelfieFile - simpleProcess:', this.simpleProcess);
         try {
             // El loading se maneja completamente dentro del ProcessingService
             const result = await this.processingService.processPhotoSelfie(filePath, this.connection, this.apikey, this.configEnv, this.simpleProcess, // Pasar flag de proceso simple
@@ -1023,17 +955,17 @@ export class IdVisionComponent {
     // Acuerdo Video Processing
     async getAcuerdoVideo(file) {
         try {
-            const result = await this.processingService.processAcuerdoVideo(file);
+            const result = await this.processingService.processAcuerdoVideo(this.connection, this.apikey, this.configEnv, file);
             if (result.success) {
                 this.closeModalAcuerdoVideo();
                 this.modalController.dismiss();
                 this.validationService.updateValidationStep('acuerdoVideo', true);
-                if (this.simpleProcess) {
-                    this.executeNextActionForSimpleProcess(1);
-                }
-                else {
-                    this.moveToNextStep(1);
-                }
+                await this.handleExitWithResult(true, 'acuerdo-video-close');
+                /*if (this.simpleProcess) {
+                  //this.executeNextActionForSimpleProcess(1);
+                } else {
+                  this.moveToNextStep(0);
+                }*/
             }
             else {
                 this.validationService.updateValidationStep('acuerdoVideo', false);
@@ -1043,6 +975,75 @@ export class IdVisionComponent {
             console.error('Error processing acuerdo video:', error);
         }
     }
+    // Facial Validation Processing
+    async openFacialValidation2() {
+        console.log('🎯 Iniciando validación facial automática...');
+        // Ejecutar directamente el proceso sin modal (es automático)
+        await this.processFacialValidation();
+    }
+    async processFacialValidation() {
+        console.log('🔍 processFacialValidation - iniciando...');
+        try {
+            // Mostrar loading con animación
+            await this.showLoading('Validando rostro...');
+            // Iniciar animación y progreso
+            setTimeout(() => {
+                //this.startScanAnimation();
+            }, 300);
+            // Preparar el payload
+            const payload = {
+                endpoint: `${this.configEnv.env_endpoint}validateFace/api/validate`,
+                headers: {
+                    apiKey: this.apikey,
+                    connectionMg: this.connection
+                },
+                body: {
+                    codigo: localStorage.getItem('codigo') ?? '',
+                    identificadorAnt: this.dpiCodeSecond
+                }
+            };
+            // Llamar al servicio
+            this.dpiService.comparison(payload).subscribe({
+                next: async (response) => {
+                    console.log('✅ Respuesta de validación facial:', response);
+                    await this.hideLoading();
+                    if (!response.error) {
+                        // Validación exitosa
+                        this.validationService.updateValidationStep('validateFace', true);
+                        if (this.simpleProcess) {
+                            // Para simpleProcess, cerrar automáticamente
+                            await this.handleExitWithResult(true, 'facial-validation-success');
+                        }
+                        else {
+                            // Para proceso normal, mover al siguiente paso
+                            this.moveToNextStep(6);
+                        }
+                    }
+                    else {
+                        // Error en la validación
+                        this.validationService.updateValidationStep('validateFace', false);
+                        await this.showAlert('Error', 'La validación facial no fue exitosa. Por favor intenta nuevamente.', []);
+                        if (this.simpleProcess) {
+                            await this.handleExitWithResult(false, 'facial-validation-error');
+                        }
+                    }
+                },
+                error: async (error) => {
+                    console.error('❌ Error en validación facial:', error);
+                    await this.hideLoading();
+                    this.validationService.updateValidationStep('validateFace', false);
+                    await this.showAlert('Error', 'Ocurrió un error durante la validación facial.', []);
+                    if (this.simpleProcess) {
+                        await this.handleExitWithResult(false, 'facial-validation-exception');
+                    }
+                }
+            });
+        }
+        catch (error) {
+            console.error('❌ Error procesando validación facial:', error);
+            await this.hideLoading();
+        }
+    }
     // Modal handling methods
     setupModalSubscriptions() {
         this.modalDpiServices.closeOverlay$.subscribe(() => {
@@ -1204,47 +1205,6 @@ export class IdVisionComponent {
         });
         await modal.present();
     }
-    async openDirectPhotoSelfie() {
-        console.log('🎬 Abriendo DirectPhotoSelfie modal...');
-        // Cerrar cualquier loading antes de abrir la modal
-        await this.hideLoading();
-        const closeRequestedCallback = async () => {
-            console.log('═══════════════════════════════════════════════════════');
-            console.log('🚪 Callback closeRequested invocado en id-vision');
-            console.log('═══════════════════════════════════════════════════════');
-            if (this.simpleProcess) {
-                console.log('🚪 Usuario cerró direct-photo-selfie - cerrando modal y emitiendo resultado');
-                // Cerrar el modal primero
-                await modal.dismiss();
-                console.log('✅ Modal cerrado desde padre');
-                // Ejecutar handleExitWithResult que emite el resultado
-                // La app padre recibirá onExit$ y hará showSDK = false
-                await this.handleExitWithResult(false, 'direct-photo-selfie-close');
-            }
-            else {
-                // Para proceso normal, cerrar modal y limpiar
-                await modal.dismiss();
-                this.closeModalOverlay();
-            }
-        };
-        console.log('📦 Creando modal con props...');
-        console.log('📦 closeRequested callback definido:', !!closeRequestedCallback);
-        const modal = await this.modalController.create({
-            component: DirectPhotoSelfieComponent,
-            componentProps: {
-                onTakePicture: async (file) => {
-                    await this.photoVideoSelfieFile(file);
-                },
-                closeRequested: closeRequestedCallback,
-            },
-            backdropDismiss: false,
-            // Optimización: sin animación para simpleProcess
-            animated: !this.simpleProcess
-        });
-        console.log('✅ Modal creado, presentando...');
-        await modal.present();
-        console.log('✅ Modal presentado correctamente');
-    }
     async openAcuerdoVideo() {
         // Cerrar cualquier loading antes de abrir la modal
         await this.hideLoading();
@@ -1294,25 +1254,12 @@ export class IdVisionComponent {
         });
         await modal.present();
     }
-    // Legacy validation methods (kept for compatibility)
-    async validateDPIFront(filePath) {
-        await this.DpiFrontProccess(filePath);
-        return true;
-    }
-    async validateDPIBack(filePath) {
-        this.modalController.dismiss();
-        await this.DpiBackProccess(filePath);
-        return true;
-    }
     async getBackModal(file) {
         if (!file || file.size === 0) {
             return;
         }
         await this.VideoSelfieProcccess(file);
     }
-    async convertImagePathToFile(imagePath, fileName) {
-        return await this.processingService.convertImagePathToFile(imagePath, fileName);
-    }
     // Utility methods
     async showAlert(header, message, details, onConfirm) {
         const detailsMessage = Array.isArray(details)
@@ -1352,7 +1299,192 @@ export class IdVisionComponent {
         });
         await toast.present();
     }
-    static { this.ɵfac = function IdVisionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || IdVisionComponent)(i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i1.AlertController), i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i2.ModalDpiServices), i0.ɵɵdirectiveInject(i3.SdkCommunicationService), i0.ɵɵdirectiveInject(i1.NavController), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.ToastController), i0.ɵɵdirectiveInject(i1.LoadingController), i0.ɵɵdirectiveInject(i4.ConfigurationService), i0.ɵɵdirectiveInject(i5.ValidationService), i0.ɵɵdirectiveInject(i6.NavigationService), i0.ɵɵdirectiveInject(i7.ProcessingService), i0.ɵɵdirectiveInject(i8.DpiService)); }; }
+    onSlideChange() {
+        const currentIndex = this.swiperContainerRef?.nativeElement?.swiper?.activeIndex;
+        console.log('📍 Slide actual:', currentIndex);
+        if (currentIndex === 2) {
+            this.flip = true;
+            setTimeout(() => {
+                this.waitFlip = false;
+            }, 1500);
+        }
+        // Ejecutar automáticamente la acción del paso actual si es tipo 6 (validación facial)
+        // El índice 0 es el slide inicial, los pasos empiezan desde índice 1
+        if (currentIndex && currentIndex > 0 && this.validationConfig) {
+            const stepIndex = currentIndex - 1; // Ajustar porque slide 0 es inicial
+            // Verificar que el índice esté dentro del rango válido
+            if (stepIndex >= 0 && stepIndex < this.validationConfig.length) {
+                const currentStep = this.validationConfig[stepIndex];
+                console.log(`📋 Step en índice ${stepIndex}:`, {
+                    type: currentStep?.type,
+                    id: currentStep?.id,
+                    order: currentStep?.order
+                });
+                // Ejecutar automáticamente si es tipo 6 (validación facial)
+                if (currentStep && currentStep.type === 6) {
+                    console.log('🎯 Detectado tipo 6 - Ejecutando validación facial automáticamente');
+                    // Pequeño delay para que el slide se renderice completamente
+                    setTimeout(() => {
+                        if (currentStep.action) {
+                            currentStep.action();
+                        }
+                        else {
+                            console.error('❌ No se encontró action para el step tipo 6');
+                        }
+                    }, 500);
+                }
+            }
+            else {
+                console.warn(`⚠️ Índice ${stepIndex} fuera de rango. validationConfig.length: ${this.validationConfig.length}`);
+            }
+        }
+    }
+    animationProgress() {
+        const interval = setInterval(() => {
+            this.progress += 0.02;
+            if (this.progress >= 1) {
+                this.progress = 1;
+                clearInterval(interval);
+            }
+        }, 100);
+    }
+    startAnimations() {
+        this.animationType('assets/imagesIdvision/face_scanning.json');
+        this.animationProgress();
+        this.animationText();
+    }
+    animationText() {
+        this.showText = false;
+        setTimeout(() => {
+            this.showText = true;
+            if (this.index >= this.texts.length) {
+                if (this.comparsionStatus === 'success') {
+                    this.currentText = this.successText;
+                    this.animationType('assets/imagesIdvision/success.json', false);
+                }
+                else {
+                    this.currentText = this.errorText;
+                    this.animationType('assets/imagesIdvision/error.json', false);
+                }
+                return;
+            }
+            this.currentText = this.texts[this.index];
+            this.index++;
+            setTimeout(() => this.animationText(), 2000);
+        }, 300);
+    }
+    openFacialValidation() {
+        this.startAnimations();
+        const payload = {
+            endpoint: `${this.configEnv.env_endpoint}validateFace/api/validate`,
+            headers: {
+                apiKey: this.apikey,
+                connectionMg: this.connection
+            },
+            body: {
+                codigo: localStorage.getItem('codigo') ?? '',
+                identificadorAnt: this.dpiCodeSecond
+            }
+        };
+        this.comparsion(payload);
+    }
+    animationType(path, loop = true) {
+        lottie.destroy();
+        const container = this.elementRef.nativeElement.querySelector('.lottie-container');
+        console.log('container:', container);
+        if (!container) {
+            console.log('No se encontró el contenedor Lottie');
+            return;
+        }
+        lottie.loadAnimation({
+            container: container,
+            renderer: 'svg',
+            loop,
+            autoplay: true,
+            path
+        });
+    }
+    comparsion(payload) {
+        this.dpiService.comparison(payload).subscribe({
+            next: async (response) => {
+                console.log('Respuesta de validación facial:', response);
+                if (!response.error) {
+                    this.actionSuccess();
+                    return;
+                }
+                this.actionError();
+            },
+            error: async (error) => {
+                console.error('Error en validación facial:', error);
+                this.actionError();
+            }
+        });
+    }
+    actionSuccess() {
+        this.comparsionStatus = 'success';
+        this.validationService.updateValidationStep('validateFace', true);
+    }
+    actionError() {
+        this.comparsionStatus = 'error';
+        this.validationService.updateValidationStep('validateFace', false);
+    }
+    finalizar() {
+        this.navigationService.navigateToCompletion();
+    }
+    async openAcuerdoVideoNew() {
+        // Cerrar cualquier loading antes de abrir la modal
+        await this.hideLoading();
+        const modal = await this.modalController.create({
+            component: AcuerdoVideoPage,
+            componentProps: {
+                backFunction: async (file) => {
+                    await this.getAcuerdoVideo(file);
+                },
+                closeRequested: async () => {
+                    await modal.dismiss();
+                    await this.handleExitWithResult(false, 'acuerdo-video-close');
+                },
+            },
+            backdropDismiss: false,
+            animated: !this.simpleProcess
+        });
+        await modal.present();
+    }
+    async handleInitSecurityExit() {
+        await this.handleExitWithResult(false, 'init-camera-security-block');
+    }
+    async evaluateInitialCameraSecurity() {
+        const detection = await this.virtualCameraDetectionService.detectSuspiciousVideoInputs();
+        if (!detection.blocked)
+            return true;
+        this.isInitCameraBlocked = true;
+        this.initCameraBlockReason = detection.reason;
+        this.cdRef.detectChanges();
+        return false;
+    }
+    async logAvailableVideoInputsOnInit() {
+        if (!navigator?.mediaDevices?.enumerateDevices) {
+            console.warn('[mediaDevices] enumerateDevices no está disponible en este entorno.');
+            return;
+        }
+        try {
+            const devices = await navigator.mediaDevices.enumerateDevices();
+            const videoInputs = devices.filter((device) => device.kind === 'videoinput');
+            if (!videoInputs.length) {
+                console.warn('No se detectaron cámaras (videoinput).');
+                return;
+            }
+            console.log(`Cámaras detectadas: ${videoInputs.length}`);
+            videoInputs.forEach((camera, index) => {
+                const safeLabel = camera.label?.trim() ? camera.label : '(sin label, falta permiso de cámara)';
+                console.log(`[Camara] #${index + 1} label="${safeLabel}" deviceId="${camera.deviceId}" groupId="${camera.groupId || '-'}"`);
+            });
+        }
+        catch (error) {
+            console.error('[Camara] Error al enumerar cámaras:', error);
+        }
+    }
+    static { this.ɵfac = function IdVisionComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || IdVisionComponent)(i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i1.AlertController), i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i2.ModalDpiServices), i0.ɵɵdirectiveInject(i3.SdkCommunicationService), i0.ɵɵdirectiveInject(i1.NavController), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.ToastController), i0.ɵɵdirectiveInject(i1.LoadingController), i0.ɵɵdirectiveInject(i4.ConfigurationService), i0.ɵɵdirectiveInject(i5.ValidationService), i0.ɵɵdirectiveInject(i6.NavigationService), i0.ɵɵdirectiveInject(i7.ProcessingService), i0.ɵɵdirectiveInject(i8.DpiService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i9.VirtualCameraDetectionService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: IdVisionComponent, selectors: [["app-id-vision"]], viewQuery: function IdVisionComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
             i0.ɵɵviewQuery(_c1, 5, ElementRef);
@@ -1360,25 +1492,28 @@ export class IdVisionComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dpi = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.swiperContainerRef = _t.first);
-        } }, inputs: { isSwipe: "isSwipe", dpiCode: "dpiCode", connection: "connection", apikey: "apikey", env: "env", validationConfig: "validationConfig" }, standalone: true, features: [i0.ɵɵProvidersFeature([DpiService, ConfigurationService, ValidationService, NavigationService, ProcessingService]), i0.ɵɵStandaloneFeature], decls: 15, vars: 8, consts: [["swiperContainer", ""], ["dpi", ""], ["init", "false", "class", "custom-swiper", 4, "ngIf"], [1, "version"], ["vertical", "top", "horizontal", "end", "slot", "fixed", 4, "ngIf"], [1, "wrapper-no-internet"], [1, "content-no-internet"], [1, "title-no-internet"], ["src", "assets/imagesIdvision/no-internet.svg", "alt", "Error conexi\u00F3n img", 1, "icon-no-internet"], [1, "description-no-internet"], ["init", "false", 1, "custom-swiper"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "confirmation-screen"], ["class", "font-confirmation", 4, "ngIf"], [1, "image-confirmation"], ["src", "assets/imagesIdvision/blue-check.png", "alt", "Check morado"], [1, "button-container"], ["expand", "block", 1, "custom-button", 3, "click"], [1, "content"], [1, "head"], [1, "h-title"], [1, "p-justify", "p-margin"], [1, "rounded-input"], ["type", "number", "disabled", "true", "placeholder", "Digita tu n\u00FAmero de DPI"], [1, "verify-container"], [1, "image-container"], ["src", "assets/imagesIdvision/documentsImage.png", "alt", ""], [1, "container-text"], [1, "p-justify"], ["src", "assets/imagesIdvision/rostroImage.png", "alt", ""], [1, "fixed-footer"], [1, "content", 3, "ngClass", "ngSwitch"], [3, "ngClass", 4, "ngSwitchCase"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "ngClass"], ["src", "assets/imagesIdvision/Foco.png", "alt", ""], [1, "p-center", "p-info", "p-margin"], [1, "dpi-container"], ["src", "assets/imagesIdvision/dpi-front-1.png", "alt", ""], ["src", "assets/imagesIdvision/dpi-back-1.png", "alt", ""], [1, "font-confirmation"], ["vertical", "top", "horizontal", "end", "slot", "fixed"], [1, "button-debug", 3, "click"], ["name", "bug-outline"]], template: function IdVisionComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "ion-content");
-            i0.ɵɵtemplate(1, IdVisionComponent_swiper_container_1_Template, 13, 4, "swiper-container", 2);
-            i0.ɵɵelementStart(2, "div", 3);
-            i0.ɵɵtext(3);
+        } }, inputs: { isSwipe: "isSwipe", dpiCode: "dpiCode", dpiCodeSecond: "dpiCodeSecond", connection: "connection", apikey: "apikey", env: "env", validationConfig: "validationConfig" }, standalone: true, features: [i0.ɵɵProvidersFeature([DpiService, ConfigurationService, ValidationService, NavigationService, ProcessingService]), i0.ɵɵStandaloneFeature], decls: 16, vars: 9, consts: [["swiperContainer", ""], ["dpi", ""], ["class", "content", 4, "ngIf"], [1, "content"], ["init", "false", "class", "custom-swiper", 3, "swiperslidechange", 4, "ngIf"], [1, "sdk-metag-version"], ["vertical", "top", "horizontal", "end", "slot", "fixed", 4, "ngIf"], [1, "sdk-metag-wrapper-no-internet"], [1, "sdk-metag-content-no-internet"], [1, "sdk-metag-title-no-internet"], ["src", "assets/imagesIdvision/no-internet.svg", "alt", "Error conexi\u00F3n img", 1, "sdk-metag-icon-no-internet"], [1, "sdk-metag-description-no-internet"], [3, "exitPressed", "title", "description", "reason", "exitLabel"], ["init", "false", 1, "custom-swiper", 3, "swiperslidechange"], [4, "ngIf"], [4, "ngFor", "ngForOf"], [1, "slide-third"], ["class", "head", 4, "ngIf"], [1, "sdk-metag-image-confirmation"], ["src", "assets/imagesIdvision/blue-check.png", "alt", "Check morado"], ["expand", "block", 1, "action-button", 3, "click"], [1, "slide-one"], [1, "head"], [1, "head-title"], [1, "head-subtitle"], [1, "head-dpi"], ["type", "number", "disabled", "true", "placeholder", "0000000000000"], [1, "instructions"], [1, "instruction"], ["size", "3"], ["src", "assets/imagesIdvision/documentsImage.png", "alt", "", 1, "instruction-img"], [1, "instruction-description"], ["src", "assets/imagesIdvision/rostroImage.png", "alt", "", 1, "instruction-img"], [1, "slide-two", 3, "ngSwitch"], [3, "ngClass", 4, "ngSwitchCase"], [4, "ngSwitchCase"], [4, "ngSwitchDefault"], [3, "ngClass"], ["src", "assets/imagesIdvision/Foco.png", "alt", "", 1, "instruction-img"], [1, "card-wrapper"], [1, "card"], [1, "side", "front"], ["src", "assets/imagesIdvision/dpi_m_f.png", "alt", "Frontal"], [1, "side", "back"], ["src", "assets/imagesIdvision/dpi_t.png", "alt", "Reverso"], ["expand", "block", 1, "action-button", 3, "click", "disabled"], [1, "sdk-metag-head"], [1, "sdk-metag-h-title"], [1, "sdk-metag-p-justify"], [1, "sdk-metag-verify-container"], [1, "sdk-metag-image-container"], ["src", "assets/imagesIdvision/Foco.png", "alt", ""], [1, "sdk-metag-container-text"], ["src", "assets/imagesIdvision/rostroImage.png", "alt", ""], [1, "sdk-metag-fixed-footer"], ["expand", "block", 1, "sdk-metag-custom-button", 3, "click"], [1, "slide-six"], [1, "avatar-wrapper"], [1, "avatar-container"], [1, "avatar", 3, "src"], [1, "lottie-container"], [1, "status-container"], [1, "status-text"], [3, "value"], ["style", "margin: 100px auto 0 !important;", "class", "action-button button-success", "expand", "block", 3, "click", 4, "ngIf"], ["expand", "block", 1, "action-button", "button-success", 2, "margin", "100px auto 0 !important", 3, "click"], ["vertical", "top", "horizontal", "end", "slot", "fixed"], [1, "sdk-metag-button-debug", 3, "click"], ["name", "bug-outline"]], template: function IdVisionComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, IdVisionComponent_ion_content_0_Template, 2, 4, "ion-content", 2);
+            i0.ɵɵelementStart(1, "ion-content", 3);
+            i0.ɵɵtemplate(2, IdVisionComponent_swiper_container_2_Template, 12, 4, "swiper-container", 4);
+            i0.ɵɵelementStart(3, "div", 5);
+            i0.ɵɵtext(4);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(4, IdVisionComponent_ion_fab_4_Template, 3, 0, "ion-fab", 4);
+            i0.ɵɵtemplate(5, IdVisionComponent_ion_fab_5_Template, 3, 0, "ion-fab", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(5, "ion-content")(6, "div", 5)(7, "div", 6)(8, "h2", 7);
-            i0.ɵɵtext(9, "Error de conexi\u00F3n");
+            i0.ɵɵelementStart(6, "ion-content")(7, "div", 7)(8, "div", 8)(9, "h2", 9);
+            i0.ɵɵtext(10, "Error de conexi\u00F3n");
             i0.ɵɵelementEnd();
-            i0.ɵɵelement(10, "img", 8);
-            i0.ɵɵelementStart(11, "p", 9);
-            i0.ɵɵtext(12, " No pudimos cargar la p\u00E1gina. ");
-            i0.ɵɵelement(13, "br");
-            i0.ɵɵtext(14, " Verifica tu internet y prueba de nuevo. ");
+            i0.ɵɵelement(11, "img", 10);
+            i0.ɵɵelementStart(12, "p", 11);
+            i0.ɵɵtext(13, " No pudimos cargar la p\u00E1gina. ");
+            i0.ɵɵelement(14, "br");
+            i0.ɵɵtext(15, " Verifica tu internet y prueba de nuevo. ");
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
-            i0.ɵɵstyleProp("display", ctx.hasInternet ? "block" : "none");
+            i0.ɵɵproperty("ngIf", ctx.isInitCameraBlocked);
+            i0.ɵɵadvance();
+            i0.ɵɵstyleProp("display", ctx.hasInternet && !ctx.isInitCameraBlocked ? "block" : "none");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", !ctx.simpleProcess);
             i0.ɵɵadvance(2);
@@ -1386,13 +1521,13 @@ export class IdVisionComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.showDebug);
             i0.ɵɵadvance();
-            i0.ɵɵstyleProp("display", !ctx.hasInternet ? "block" : "none");
-        } }, dependencies: [IonicModule, i1.IonButton, i1.IonContent, i1.IonFab, i1.IonFabButton, i1.IonGrid, i1.IonIcon, i1.IonInput, i1.IonItem, i1.IonRow, i1.NumericValueAccessor, CommonModule, i9.NgClass, i9.NgForOf, i9.NgIf, i9.NgSwitch, i9.NgSwitchCase, i9.NgSwitchDefault, HttpClientModule], styles: ["// ============================================\r\n// ESTILOS AISLADOS DEL SDK - NO AFECTAN AL PADRE\r\n// ============================================\r\n// Usamos :host para encapsular todo dentro del componente\r\n// y evitar que los estilos globales del padre nos afecten\r\n\r\n:host {\r\n  display: block;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  \r\n  // Reset de estilos globales del padre\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n}\r\n\r\n.content {\r\n  padding: 10px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 90vh;\r\n  background-color: #fff;\r\n  font-size: 18px;\r\n  background-image: url('assets/imagesIdvision/background.png');\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n}\r\n\r\n// Cuando es simpleProcess, levanta el contenido un 10%\r\n.content-simple-process {\r\n  margin-top: 10vh;\r\n  height: 90vh;\r\n}\r\n\r\n.h-title {\r\n  font-size: 1.5em;\r\n  font-weight: bold;\r\n  color: #F38301;\r\n  text-align: center;\r\n  margin-top: 20px;\r\n}\r\n\r\n:host p {\r\n  font-size: 1em;\r\n  color: #666;\r\n  text-align: center;\r\n  margin: 0;\r\n}\r\n\r\n:host ion-grid {\r\n  margin-top: 20px;\r\n}\r\n\r\n:host ion-row {\r\n  margin: 15px 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n:host ion-col {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n}\r\n\r\n:host ion-icon {\r\n  font-size: 3em;\r\n  color: #ff8c00;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.container-text {\r\n  text-align: justify !important;\r\n  width: 180px;\r\n}\r\n\r\n:host p {\r\n  text-align: start;\r\n}\r\n\r\n.p-center {\r\n  text-align: center;\r\n}\r\n\r\n.p-justify {\r\n  text-align: start;\r\n}\r\n\r\n.head {\r\n  padding: 20px;\r\n  margin-top: 20px;\r\n  margin-bottom: 80px;\r\n}\r\n\r\n\r\n.verify-container {\r\n  // padding: 60px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 40%; // Ocupa todo el espacio disponible en el ion-content\r\n  text-align: center;\r\n  //background-color: black;\r\n}\r\n\r\n.fixed-footer {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 0px 10px 25px 10px;\r\n  // background-color: black; // Color de fondo, opcional\r\n  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\r\n\r\n  ion-button {\r\n    width: 90%;\r\n    max-width: 300px;\r\n    margin: 0 auto;\r\n    background-color: #ffcc00;\r\n    color: #ffffff;\r\n    font-weight: bold;\r\n    border-radius: 20px;\r\n\r\n    &:hover {\r\n      background-color: #ffb300;\r\n    }\r\n\r\n    &:active {\r\n      background-color: #e6a800;\r\n    }\r\n  }\r\n}\r\n\r\n.dpi-container {\r\n  display: flex;\r\n  //width: 100%;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 45vh;\r\n}\r\n\r\n.dpi-image {\r\n  width: 200px;\r\n}\r\n\r\n.image-container {\r\n  width: 100px;\r\n  max-width: 90px;\r\n}\r\n\r\n.col-confirmation {\r\n  margin-top: 100px;\r\n  padding: 20px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 20px;\r\n  /* Ajusta el espacio entre los elementos */\r\n}\r\n\r\n.image-item {\r\n  margin-top: 50px;\r\n  padding-top: 70px;\r\n}\r\n\r\n.font-confirmation {\r\n  font-size: 26px;\r\n  text-align: center;\r\n  // color: #005da9;\r\n  color: #82298F;\r\n  font-weight: bold;\r\n}\r\n\r\n\r\n.rounded-input {\r\n  margin-top: 15px;\r\n  background-color: #f4f6fc;\r\n  /* Color de fondo suave */\r\n  border-radius: 10px;\r\n  /* Bordes redondeados */\r\n  padding: 5px 5px;\r\n  /* Espaciado interno */\r\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\r\n  /* Sombra suave */\r\n  --ion-border-color: transparent;\r\n  /* Quita cualquier borde por defecto */\r\n}\r\n\r\n:host ion-input {\r\n  text-align: center;\r\n  color: #F38301;\r\n  --padding-start: 8px;\r\n}\r\n\r\n:host .custom-footer {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  background-color: #ffffff;\r\n}\r\n\r\n:host .custom-footer ion-button {\r\n  flex: 0 0 48%;\r\n}\r\n\r\n:host .custom-footer .left-button {\r\n  max-width: 140px;\r\n  color: black;\r\n  --background: white;\r\n  --color: #82298F;\r\n  --border-radius: 20px;\r\n  --border-color: white;\r\n  margin-right: auto;\r\n  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n}\r\n\r\n:host .custom-footer .right-button {\r\n  margin-left: auto;\r\n}\r\n\r\n.tutorial-head {\r\n  padding-top: 50px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  color: black;\r\n}\r\n\r\n.center-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 60vh;\r\n  /* Ajusta este valor si quieres m\u00E1s o menos espacio vertical */\r\n  width: 100%;\r\n}\r\n\r\n.tutorial-title {\r\n  text-align: center;\r\n}\r\n\r\n.rounded-input ion-input {\r\n  font-size: 14px;\r\n  /* Tama\u00F1o de texto */\r\n  color: #333;\r\n  /* Color del texto */\r\n}\r\n\r\n.rounded-input::part(native) {\r\n  background: transparent;\r\n  /* Fondo transparente para evitar conflictos */\r\n}\r\n\r\n.p-info {\r\n  font-weight: bold;\r\n  color: #714e93\r\n}\r\n\r\n.custom-button {\r\n  --background: var(--purple-primary, #82298F) !important;\r\n  --background-hover: var(--purple-secondary, #2b0d30) !important;\r\n  --background-activated: var(--purple-secondary, #2b0d30) !important;\r\n  --color: #ffffff !important;\r\n  --border-radius: 20px !important;\r\n  --padding-top: 10px !important;\r\n  --padding-bottom: 10px !important;\r\n  --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\r\n  text-transform: none;\r\n  pointer-events: auto;\r\n\r\n}\r\n\r\n//blur effect\r\n\r\n.blur-effect {\r\n  filter: blur(5px);\r\n  pointer-events: none;\r\n}\r\n\r\n.blur-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(255, 255, 255, 0.7);\r\n  z-index: 999;\r\n  filter: blur(5px);\r\n}\r\n\r\n.boton-personalizado {\r\n  background-color: #4caf50;\r\n  /* Verde, por ejemplo */\r\n  color: white;\r\n  font-size: 16px;\r\n}\r\n\r\n.version {\r\n  position: fixed;\r\n  bottom: 10px;\r\n  right: 10px;\r\n  font-size: 12px;\r\n  color: #888;\r\n  z-index: 1000;\r\n}\r\n\r\n.button-debug {\r\n  --background: #ff4081;\r\n  --color: #fff;\r\n}\r\n\r\n\r\n.wrapper-no-internet {\r\n  background-color: #fff;\r\n  height: 100vh;\r\n  display: flex;\r\n  justify-content: center; /* centra en eje vertical */\r\n  align-items: center;     /* centra en eje horizontal */\r\n  padding: 40px;\r\n  background-image: url('assets/imagesIdvision/background.png') !important;\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n  \r\n}\r\n\r\n.content-no-internet {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n  gap: 16px;\r\n}\r\n\r\n.title-no-internet{\r\n  color: #000;\r\n  font-size: 32px;\r\n  font-weight: bold;\r\n}\r\n\r\n.icon-no-internet {\r\n  width: 125px;\r\n  display: block;\r\n  margin-top: 25px;\r\n}\r\n\r\n.description-no-internet {\r\n  margin-top: 25px;\r\n  font-size: 22px;\r\n  color: #000;\r\n  line-height: 1.5;\r\n  text-align: center;\r\n}\r\n.no-border{\r\n  --border-width: 0 !important;\r\n}\r\n\r\n.confirmation-screen {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 80vh; // Se integra al 80% de la vista\r\n  padding: 25px;\r\n  box-sizing: border-box;\r\n  background-image: url('assets/imagesIdvision/background.png');\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n  background-color: white;\r\n  gap: 20px; // Espacio entre elementos\r\n}\r\n\r\n.image-confirmation {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n}\r\n\r\n.image-confirmation img {\r\n  max-width: 300px; // Reducido de 500px a 300px\r\n  width: 50%; // Reducido de 80% a 50%\r\n  height: auto;\r\n}\r\n\r\n.button-container {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 0 10px;\r\n  \r\n  ion-button {\r\n    width: 90%;\r\n    max-width: 300px;\r\n  }\r\n}\r\n\r\n\r\n.close-button {\r\n  position: absolute;\r\n  top: 12px;\r\n  right: 12px; \r\n  z-index: 1000;\r\n  font-size: 15px;\r\n  --color: #888; \r\n}\r\n\r\n.p-margin {\r\n  margin-top: 50px !important;\r\n}\r\n\r\n"], encapsulation: 2 }); }
+            i0.ɵɵstyleProp("display", !ctx.hasInternet && !ctx.isInitCameraBlocked ? "block" : "none");
+        } }, dependencies: [IonicModule, i1.IonButton, i1.IonCol, i1.IonContent, i1.IonFab, i1.IonFabButton, i1.IonGrid, i1.IonIcon, i1.IonInput, i1.IonItem, i1.IonProgressBar, i1.IonRow, i1.NumericValueAccessor, CommonModule, i10.NgClass, i10.NgForOf, i10.NgIf, i10.NgSwitch, i10.NgSwitchCase, i10.NgSwitchDefault, HttpClientModule, CameraSecurityBlockComponent], styles: ["//   ============================================\n//   ESTILOS   AISLADOS   DEL   SDK   -   NO   AFECTAN   AL   PADRE\n//   ============================================\n//   Usamos   [_nghost-%COMP%]   para[_ngcontent-%COMP%]   encapsular[_ngcontent-%COMP%]   todo[_ngcontent-%COMP%]   dentro[_ngcontent-%COMP%]   del[_ngcontent-%COMP%]   componente\n//[_ngcontent-%COMP%]   y[_ngcontent-%COMP%]   evitar[_ngcontent-%COMP%]   que[_ngcontent-%COMP%]   los[_ngcontent-%COMP%]   estilos[_ngcontent-%COMP%]   globales[_ngcontent-%COMP%]   del[_ngcontent-%COMP%]   padre[_ngcontent-%COMP%]   nos[_ngcontent-%COMP%]   afecten\n\n[_ngcontent-%COMP%] {\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  // Reset de estilos globales del padre\n  * {\n    box-sizing: border-box;\n  }\n}\n\n.sdk-metag-content[_ngcontent-%COMP%] {\n  padding: 10px;\n  align-items: center;\n  justify-content: center;\n  height: 90vh;\n  background-color: #fff;\n  font-size: 18px;\n  background-image: url('assets/imagesIdvision/background.png');\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n//[_ngcontent-%COMP%]   Cuando[_ngcontent-%COMP%]   es[_ngcontent-%COMP%]   simpleProcess[_ngcontent-%COMP%], levanta[_ngcontent-%COMP%]   el[_ngcontent-%COMP%]   contenido[_ngcontent-%COMP%]   un[_ngcontent-%COMP%]   10%\n.sdk-metag-content-simple-process[_ngcontent-%COMP%] {\n  margin-top: 10vh;\n  height: 90vh;\n}\n\n.sdk-metag-h-title[_ngcontent-%COMP%] {\n  font-size: 1.5em;\n  font-weight: bold;\n  color: #F38301;\n  text-align: center;\n  margin-top: 20px;\n}\n\n[_nghost-%COMP%]   p[_ngcontent-%COMP%] {\n  font-size: 1em;\n  color: #666;\n  text-align: center;\n  margin: 0;\n}\n\n[_nghost-%COMP%]   ion-grid[_ngcontent-%COMP%] {\n  margin-top: 20px;\n}\n\n[_nghost-%COMP%]   ion-row[_ngcontent-%COMP%] {\n  margin: 15px 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n[_nghost-%COMP%]   ion-col[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n\n[_nghost-%COMP%]   ion-icon[_ngcontent-%COMP%] {\n  font-size: 3em;\n  color: #ff8c00;\n  margin-bottom: 10px;\n}\n\n.sdk-metag-container-text[_ngcontent-%COMP%] {\n  text-align: justify !important;\n  width: 180px;\n}\n\n[_nghost-%COMP%]   p[_ngcontent-%COMP%] {\n  text-align: start;\n}\n\n.sdk-metag-p-center[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.sdk-metag-p-justify[_ngcontent-%COMP%] {\n  text-align: start;\n}\n\n.sdk-metag-head[_ngcontent-%COMP%] {\n  padding: 20px;\n  margin-top: 20px;\n  margin-bottom: 80px;\n}\n\n\n.sdk-metag-verify-container[_ngcontent-%COMP%] {\n  // padding: 60px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 40%; // Ocupa todo el espacio disponible en el ion-content\n  text-align: center;\n  //background-color: black;\n}\n\n.sdk-metag-fixed-footer[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 0px 10px 25px 10px;\n  // background-color: black; // Color de fondo, opcional\n  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\n\n  ion-button {\n    width: 90%;\n    max-width: 300px;\n    margin: 0 auto;\n    background-color: #ffcc00;\n    color: #ffffff;\n    font-weight: bold;\n    border-radius: 20px;\n\n    &:hover {\n      background-color: #ffb300;\n    }\n\n    &:active {\n      background-color: #e6a800;\n    }\n  }\n}\n\n.sdk-metag-dpi-container[_ngcontent-%COMP%] {\n  display: flex;\n  //width: 100%;\n  justify-content: center;\n  align-items: center;\n  height: 45vh;\n  img {\n    width: 90%;\n    transform: rotate(270deg);\n  }\n}\n\n.sdk-metag-dpi-image[_ngcontent-%COMP%] {\n  width: 200px;\n}\n\n.sdk-metag-image-container[_ngcontent-%COMP%] {\n  width: 100px;\n  max-width: 90px;\n}\n\n.sdk-metag-col-confirmation[_ngcontent-%COMP%] {\n  margin-top: 100px;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  \n\n}\n\n.sdk-metag-image-item[_ngcontent-%COMP%] {\n  margin-top: 50px;\n  padding-top: 70px;\n}\n\n.sdk-metag-font-confirmation[_ngcontent-%COMP%] {\n  font-size: 26px;\n  text-align: center;\n  // color: #005da9;\n  color: #82298F;\n  font-weight: bold;\n}\n\n\n.sdk-metag-rounded-input[_ngcontent-%COMP%] {\n  margin-top: 15px;\n  background-color: #f4f6fc;\n  \n\n  border-radius: 10px;\n  \n\n  padding: 5px 5px;\n  \n\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  \n\n  --ion-border-color: transparent;\n  \n\n}\n\n[_nghost-%COMP%]   ion-input[_ngcontent-%COMP%] {\n  text-align: center;\n  color: #F38301;\n  --padding-start: 8px;\n}\n\n[_nghost-%COMP%]   .sdk-metag-custom-footer[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 10px;\n  display: flex;\n  justify-content: space-between;\n  background-color: #ffffff;\n}\n\n[_nghost-%COMP%]   .sdk-metag-custom-footer[_ngcontent-%COMP%]   ion-button[_ngcontent-%COMP%] {\n  flex: 0 0 48%;\n}\n\n[_nghost-%COMP%]   .sdk-metag-custom-footer[_ngcontent-%COMP%]   .sdk-metag-left-button[_ngcontent-%COMP%] {\n  max-width: 140px;\n  color: black;\n  --background: white;\n  --color: #82298F;\n  --border-radius: 20px;\n  --border-color: white;\n  margin-right: auto;\n  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\n}\n\n[_nghost-%COMP%]   .sdk-metag-custom-footer[_ngcontent-%COMP%]   .sdk-metag-right-button[_ngcontent-%COMP%] {\n  margin-left: auto;\n}\n\n.sdk-metag-tutorial-head[_ngcontent-%COMP%] {\n  padding-top: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: black;\n}\n\n.sdk-metag-center-container[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 60vh;\n  \n\n  width: 100%;\n}\n\n.sdk-metag-tutorial-title[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.sdk-metag-rounded-input[_ngcontent-%COMP%]   ion-input[_ngcontent-%COMP%] {\n  font-size: 14px;\n  \n\n  color: #333;\n  \n\n}\n\n.sdk-metag-rounded-input[_ngcontent-%COMP%]::part(native) {\n  background: transparent;\n  \n\n}\n\n.sdk-metag-p-info[_ngcontent-%COMP%] {\n  font-weight: bold;\n  color: #714e93\n}\n\n.sdk-metag-custom-button[_ngcontent-%COMP%] {\n  --background: var(--purple-primary, #82298F) !important;\n  --background-hover: var(--purple-secondary, #2b0d30) !important;\n  --background-activated: var(--purple-secondary, #2b0d30) !important;\n  --color: #ffffff !important;\n  --border-radius: 20px !important;\n  --padding-top: 10px !important;\n  --padding-bottom: 10px !important;\n  --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\n  text-transform: none;\n  pointer-events: auto;\n\n}\n\n//blur[_ngcontent-%COMP%]   effect\n\n.sdk-metag-blur-effect[_ngcontent-%COMP%] {\n  filter: blur(5px);\n  pointer-events: none;\n}\n\n.sdk-metag-blur-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.7);\n  z-index: 999;\n  filter: blur(5px);\n}\n\n.sdk-metag-boton-personalizado[_ngcontent-%COMP%] {\n  background-color: #4caf50;\n  \n\n  color: white;\n  font-size: 16px;\n}\n\n.sdk-metag-version[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  font-size: 12px;\n  z-index: 1000;\n  background: #f4f6fc !important;\n  padding: 10px 15px !important;\n  border-radius: 20px !important;\n}\n\n.sdk-metag-button-debug[_ngcontent-%COMP%] {\n  --background: #ff4081;\n  --color: #fff;\n}\n\n\n.sdk-metag-wrapper-no-internet[_ngcontent-%COMP%] {\n  background-color: #fff;\n  height: 100vh;\n  display: flex;\n  justify-content: center; \n\n  align-items: center; \n\n  padding: 40px;\n  background-image: url('assets/imagesIdvision/background.png') !important;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n\n}\n\n.sdk-metag-content-no-internet[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  gap: 16px;\n}\n\n.sdk-metag-title-no-internet[_ngcontent-%COMP%] {\n  color: #000;\n  font-size: 32px;\n  font-weight: bold;\n}\n\n.sdk-metag-icon-no-internet[_ngcontent-%COMP%] {\n  width: 125px;\n  display: block;\n  margin-top: 25px;\n}\n\n.sdk-metag-description-no-internet[_ngcontent-%COMP%] {\n  margin-top: 25px;\n  font-size: 22px;\n  color: #000;\n  line-height: 1.5;\n  text-align: center;\n}\n\n.sdk-metag-no-border[_ngcontent-%COMP%] {\n  --border-width: 0 !important;\n}\n\n.sdk-metag-confirmation-screen[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 80vh; // Se integra al 80% de la vista\n  padding: 25px;\n  box-sizing: border-box;\n  background-image: url('assets/imagesIdvision/background.png');\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: white;\n  gap: 20px; // Espacio entre elementos\n}\n\n.sdk-metag-image-confirmation[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n\n.sdk-metag-image-confirmation[_ngcontent-%COMP%]   img[_ngcontent-%COMP%] {\n  max-width: 300px; // Reducido de 500px a 300px\n  width: 40%; // Reducido de 80% a 50%\n  height: auto;\n}\n\n.sdk-metag-button-container[_ngcontent-%COMP%] {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 0 10px;\n\n  ion-button {\n    width: 90%;\n    max-width: 300px;\n  }\n}\n\n\n.sdk-metag-close-button[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  z-index: 1000;\n  font-size: 15px;\n  --color: #888;\n}\n\n.sdk-metag-p-margin[_ngcontent-%COMP%] {\n  margin-top: 50px !important;\n}\n\n.content[_ngcontent-%COMP%] {\n  background-color: #ffffff;\n  --background: #ffffff;\n}\n\n\n\n.head[_ngcontent-%COMP%] {\n  padding: 20px;\n}\n\n.head-title[_ngcontent-%COMP%] {\n  font-size: 23px;\n  font-weight: bold;\n  color: #F38301;\n  text-align: center;\n}\n\n.description[_ngcontent-%COMP%] {\n  text-align: center;\n  margin-top: 25px;\n  font-size: 14px;\n  margin-bottom: 25px;\n}\n\n.head-subtitle[_ngcontent-%COMP%] {\n  text-align: justify;\n  margin-top: 25px;\n  font-size: 14px;\n}\n\n.head-dpi[_ngcontent-%COMP%] {\n  margin-top: 25px;\n  //background-color: #f4f6fc;\n  border-radius: 10px;\n  --ion-border-color: transparent;\n  //padding: 5px 5px;\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  --background: #f4f6fc !important;\n\n  ion-input {\n    text-align: center;\n    color: #F38301;\n    font-weight: 500;\n    font-size: 19px;\n  }\n}\n\n.instructions[_ngcontent-%COMP%] {\n}\n\n.instruction[_ngcontent-%COMP%] {\n  margin: 0 !important;\n}\n\n.instruction-img[_ngcontent-%COMP%] {\n  width: 100px;\n  max-width: 100px;\n}\n\n.instruction-description[_ngcontent-%COMP%] {\n  font-size: 13px;\n  text-align: justify;\n  padding-right: 15px;\n}\n\n.action-button[_ngcontent-%COMP%] {\n  width: 300px;\n  max-width: 300px;\n  margin: 25px auto;\n  --background: #82298F;\n  --color: #ffffff;\n  font-weight: bold;\n  --border-radius: 20px;\n  --box-shadow: none;\n}\n\n.exit-button[_ngcontent-%COMP%] {\n  --background: transparent !important;\n  --color: #F38301 !important;\n}\n\n.action-button[_ngcontent-%COMP%]:hover {\n  --background: #82298F;\n}\n\n.action-button[_ngcontent-%COMP%]:active {\n  --background: #82298F;\n}\n\n\n\n.card-wrapper[_ngcontent-%COMP%] {\n  perspective: 1000px;\n  margin: 40px;\n}\n\n\n\n.card[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  height: 350px;\n  transform-style: preserve-3d;\n  transition: transform 1s ease-in-out;\n  cursor: pointer;\n}\n\n\n\n.card.flip[_ngcontent-%COMP%] {\n  transform: rotateY(180deg);\n}\n\n\n\n.side[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n\n  img {\n    transform: rotate(270deg);\n    width: 100%;\n    object-fit: contain;\n  }\n}\n\n.front[_ngcontent-%COMP%] {\n  z-index: 2;\n}\n\n.back[_ngcontent-%COMP%] {\n  transform: rotateY(180deg);\n}\n\n.avatar-wrapper[_ngcontent-%COMP%]{\n  width:100%;\n  display:flex;\n  justify-content:center;\n  margin-bottom:20px;\n}\n\n.avatar-container[_ngcontent-%COMP%]{\n  position:relative;\n  width:300px;\n  height:300px;\n  margin-bottom: 25px;\n}\n\n.avatar[_ngcontent-%COMP%]{\n  width:100%;\n  height:100%;\n  border-radius:50%;\n  object-fit:cover;\n  padding: 35px;\n}\n\n.lottie-container[_ngcontent-%COMP%]{\n  position:absolute;\n  inset:0;\n}\n\nion-progress-bar[_ngcontent-%COMP%]{\n  height:7px;\n  border-radius:10px;\n  --progress-background: #F38301;\n}\n\n.slide-six[_ngcontent-%COMP%] {\n}\n\n\n.status-container[_ngcontent-%COMP%] {\n  text-align: center !important;\n  margin-top: 20px;\n  min-height: 30px;\n}\n\n.status-text[_ngcontent-%COMP%] {\n  text-align: center !important;\n  color: #444;\n  font-size: 14px !important;\n  opacity: 0;\n  transform: translateY(10px);\n  transition: all .4s ease;\n}\n\n.status-text.show[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.button-success[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_checkPop 0.4s ease;\n}\n\n@keyframes _ngcontent-%COMP%_checkPop{\n\n  0%{\n    transform: scale(0);\n    opacity:0;\n  }\n\n  60%{\n    transform: scale(1.2);\n  }\n\n  100%{\n    transform: scale(1);\n    opacity:1;\n  }\n\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(IdVisionComponent, [{
         type: Component,
-        args: [{ selector: 'app-id-vision', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [IonicModule, CommonModule, HttpClientModule], providers: [DpiService, ConfigurationService, ValidationService, NavigationService, ProcessingService], encapsulation: ViewEncapsulation.None, template: "\r\n\r\n<ion-content [style.display]=\"hasInternet ? 'block' : 'none'\">\r\n  \r\n  <swiper-container *ngIf=\"!simpleProcess\" init=\"false\" class=\"custom-swiper\" #swiperContainer>\r\n\r\n    <!-- \uD83D\uDD39 PASO 1: Verificaci\u00F3n de Identidad (Est\u00E1tico) -->\r\n    <swiper-slide *ngIf=\"!simpleProcess\">\r\n      <div class=\"content\">\r\n        <div class=\"head\">\r\n          <h2 class=\"h-title\">Verifiquemos tu identidad</h2>\r\n          <p class=\"p-justify p-margin\">Para completar tu verificaci\u00F3n, por favor ingresa tu n\u00FAmero de identificaci\u00F3n (DPI).</p>\r\n          <ion-item class=\"rounded-input\">\r\n            <ion-input #dpi type=\"number\" disabled=\"true\" placeholder=\"Digita tu n\u00FAmero de DPI\"></ion-input>\r\n          </ion-item>\r\n        </div>\r\n        <ion-grid class=\"verify-container\">\r\n          <ion-row>\r\n            <div class=\"image-container\">\r\n              <img src=\"assets/imagesIdvision/documentsImage.png\" alt=\"\" />\r\n            </div>\r\n            <div class=\"container-text\">\r\n              <p class=\"p-justify\">Sube fotos de documentos que prueben tu identidad</p>\r\n            </div>\r\n          </ion-row>\r\n          <ion-row>\r\n            <div class=\"image-container\">\r\n              <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n            </div>\r\n            <div class=\"container-text\">\r\n              <p class=\"p-justify\">Graba un video selfie, mant\u00E9n tu rostro centrado en la pantalla y evita moverte.</p>\r\n            </div>\r\n          </ion-row>\r\n        </ion-grid>\r\n        <div class=\"fixed-footer\">\r\n          <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleClick()\">Empecemos</ion-button>\r\n        </div>\r\n      </div>\r\n    </swiper-slide>\r\n\r\n    <!-- \uD83D\uDD39 PASOS INTERMEDIOS: Se generan din\u00E1micamente seg\u00FAn el `order` -->\r\n    <swiper-slide *ngFor=\"let step of validationConfig\">\r\n      <div class=\"content\" [ngClass]=\"{'content-simple-process': simpleProcess}\" [ngSwitch]=\"step.type\">\r\n        <!--Acuerdo de video-->\r\n        <div *ngSwitchCase=\"1\" [ngClass]=\"{'blur-effect': simpleProcess}\">\r\n          <div class=\"head\">\r\n            <h2 class=\"h-title\">Acuerdo de v\u00EDdeo</h2>\r\n            <p class=\"p-justify\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\r\n          </div>\r\n          <ion-grid class=\"verify-container\">\r\n            <ion-row>\r\n              <div class=\"image-container\">\r\n                <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\r\n              </div>\r\n              <div class=\"container-text\">\r\n                <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\r\n              </div>\r\n            </ion-row>\r\n            <ion-row>\r\n              <div class=\"image-container\">\r\n                <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n              </div>\r\n              <div class=\"container-text\">\r\n                <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\r\n              </div>\r\n            </ion-row>\r\n          </ion-grid>\r\n          <div class=\"fixed-footer\">\r\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\r\n          </div>\r\n        </div>\r\n        <!-- \uD83D\uDD39 DPI Frontal -->\r\n        <div *ngSwitchCase=\"2\">\r\n          <div class=\"head\">\r\n            <h2 class=\"h-title\">Coloca la parte frontal de tu DPI</h2>\r\n            <p class=\"p-center p-info p-margin\">Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\r\n          </div>\r\n          <div class=\"dpi-container\">\r\n            <img src=\"assets/imagesIdvision/dpi-front-1.png\" alt=\"\" />\r\n          </div>\r\n          <div class=\"fixed-footer\">\r\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Tomar una foto</ion-button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \uD83D\uDD39 DPI Trasero -->\r\n        <div *ngSwitchCase=\"3\">\r\n          <div class=\"head\">\r\n            <h2 class=\"h-title\">Coloca el reverso de tu DPI</h2>\r\n            <p class=\"p-center p-info p-margin\">Evita sombras, reflejos y coloca tu documento dentro del recuadro.</p>\r\n          </div>\r\n          <div class=\"dpi-container\">\r\n            <img src=\"assets/imagesIdvision/dpi-back-1.png\" alt=\"\" />\r\n          </div>\r\n          <div class=\"fixed-footer\">\r\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Tomar una foto</ion-button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- \uD83D\uDD39 Video Selfie -->\r\n        <div *ngSwitchCase=\"4\">\r\n          <div class=\"head\">\r\n            <h2 class=\"h-title\">Video Selfie</h2>\r\n            <p class=\"p-justify p-margin\">Graba un breve video para completar tu proceso de identificaci\u00F3n.</p>\r\n          </div>\r\n          <ion-grid class=\"verify-container\">\r\n            <ion-row>\r\n              <ion-row>\r\n                <div class=\"image-container\">\r\n                  <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\r\n                </div>\r\n                <div class=\"container-text\">\r\n                  <p class=\"p-justify\">Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\r\n                </div>\r\n              </ion-row>\r\n              <ion-row>\r\n                <div class=\"image-container\">\r\n                  <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n                </div>\r\n                <div class=\"container-text\">\r\n                  <p class=\"p-justify\">Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\r\n                </div>\r\n              </ion-row>\r\n            </ion-row>\r\n          </ion-grid>\r\n          <div class=\"fixed-footer\">\r\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\r\n          </div>\r\n        </div>\r\n        <!-- Photo Selfie -->\r\n        <!-- TODO Se debera cambiar a 5, se dejo 1 por acuerdo de video -->\r\n        <div *ngSwitchCase=\"5\">\r\n          <div class=\"head\">\r\n            <h2 class=\"h-title\">Foto Selfie</h2>\r\n            <p class=\"p-justify\">Toma una foto para completar tu proceso de identificaci\u00F3n.</p>\r\n          </div>\r\n          <ion-grid class=\"verify-container\">\r\n            <ion-row>\r\n              <ion-row>\r\n                <div class=\"image-container\">\r\n                  <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\" />\r\n                </div>\r\n                <div class=\"container-text\">\r\n                  <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\r\n                </div>\r\n              </ion-row>\r\n              <ion-row>\r\n                <div class=\"image-container\">\r\n                  <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\" />\r\n                </div>\r\n                <div class=\"container-text\">\r\n                  <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\r\n                </div>\r\n              </ion-row>\r\n            </ion-row>\r\n          </ion-grid>\r\n          <div class=\"fixed-footer\">\r\n            <ion-button class=\"custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\r\n          </div>\r\n        </div>\r\n        <div *ngSwitchDefault>\r\n          <h2>Paso desconocido</h2>\r\n        </div>\r\n      </div>\r\n    </swiper-slide>\r\n    <swiper-slide>\r\n      <div class=\"confirmation-screen\">\r\n        <div class=\"font-confirmation\" *ngIf=\"isValid\">\r\n          <p class=\"font-confirmation\">Informaci\u00F3n procesada de manera correcta</p>\r\n        </div>\r\n        <div class=\"font-confirmation\" *ngIf=\"!isValid\">\r\n          <p class=\"font-confirmation\">Ocurri\u00F3 un error al procesar la informaci\u00F3n</p>\r\n        </div>\r\n        <div class=\"image-confirmation\">\r\n          <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"Check morado\" />\r\n        </div>\r\n        <div class=\"button-container\">\r\n          <ion-button class=\"custom-button\" expand=\"block\" (click)=\"handleExit()\">Continuar</ion-button>\r\n        </div>\r\n      </div>\r\n\r\n\r\n    </swiper-slide>\r\n\r\n  </swiper-container>\r\n  <div class=\"version\">{{versionSDK}} {{configEnv.show_label ?  configEnv.env_name: ''}}</div>\r\n  <ion-fab vertical=\"top\" horizontal=\"end\" slot=\"fixed\" *ngIf=\"showDebug\">\r\n    <ion-fab-button class=\"button-debug\" (click)=\"copyProccess()\">\r\n      <ion-icon name=\"bug-outline\"></ion-icon>\r\n    </ion-fab-button>\r\n  </ion-fab>\r\n\r\n</ion-content>\r\n<!-- pantalla para cuando no exista internet -->\r\n<ion-content [style.display]=\"!hasInternet ? 'block' : 'none'\">\r\n  <div class=\"wrapper-no-internet\">\r\n    <div class=\"content-no-internet\">\r\n      <h2 class=\"title-no-internet\">Error de conexi\u00F3n</h2>\r\n      <img src=\"assets/imagesIdvision/no-internet.svg\" alt=\"Error conexi\u00F3n img\" class=\"icon-no-internet\" />\r\n      <p class=\"description-no-internet\">\r\n        No pudimos cargar la p\u00E1gina. <br>\r\n        Verifica tu internet y prueba de nuevo.\r\n      </p>\r\n    </div>\r\n  </div>\r\n</ion-content>", styles: ["// ============================================\r\n// ESTILOS AISLADOS DEL SDK - NO AFECTAN AL PADRE\r\n// ============================================\r\n// Usamos :host para encapsular todo dentro del componente\r\n// y evitar que los estilos globales del padre nos afecten\r\n\r\n:host {\r\n  display: block;\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  \r\n  // Reset de estilos globales del padre\r\n  * {\r\n    box-sizing: border-box;\r\n  }\r\n}\r\n\r\n.content {\r\n  padding: 10px;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 90vh;\r\n  background-color: #fff;\r\n  font-size: 18px;\r\n  background-image: url('assets/imagesIdvision/background.png');\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n}\r\n\r\n// Cuando es simpleProcess, levanta el contenido un 10%\r\n.content-simple-process {\r\n  margin-top: 10vh;\r\n  height: 90vh;\r\n}\r\n\r\n.h-title {\r\n  font-size: 1.5em;\r\n  font-weight: bold;\r\n  color: #F38301;\r\n  text-align: center;\r\n  margin-top: 20px;\r\n}\r\n\r\n:host p {\r\n  font-size: 1em;\r\n  color: #666;\r\n  text-align: center;\r\n  margin: 0;\r\n}\r\n\r\n:host ion-grid {\r\n  margin-top: 20px;\r\n}\r\n\r\n:host ion-row {\r\n  margin: 15px 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n:host ion-col {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n}\r\n\r\n:host ion-icon {\r\n  font-size: 3em;\r\n  color: #ff8c00;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.container-text {\r\n  text-align: justify !important;\r\n  width: 180px;\r\n}\r\n\r\n:host p {\r\n  text-align: start;\r\n}\r\n\r\n.p-center {\r\n  text-align: center;\r\n}\r\n\r\n.p-justify {\r\n  text-align: start;\r\n}\r\n\r\n.head {\r\n  padding: 20px;\r\n  margin-top: 20px;\r\n  margin-bottom: 80px;\r\n}\r\n\r\n\r\n.verify-container {\r\n  // padding: 60px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 40%; // Ocupa todo el espacio disponible en el ion-content\r\n  text-align: center;\r\n  //background-color: black;\r\n}\r\n\r\n.fixed-footer {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 0px 10px 25px 10px;\r\n  // background-color: black; // Color de fondo, opcional\r\n  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\r\n\r\n  ion-button {\r\n    width: 90%;\r\n    max-width: 300px;\r\n    margin: 0 auto;\r\n    background-color: #ffcc00;\r\n    color: #ffffff;\r\n    font-weight: bold;\r\n    border-radius: 20px;\r\n\r\n    &:hover {\r\n      background-color: #ffb300;\r\n    }\r\n\r\n    &:active {\r\n      background-color: #e6a800;\r\n    }\r\n  }\r\n}\r\n\r\n.dpi-container {\r\n  display: flex;\r\n  //width: 100%;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 45vh;\r\n}\r\n\r\n.dpi-image {\r\n  width: 200px;\r\n}\r\n\r\n.image-container {\r\n  width: 100px;\r\n  max-width: 90px;\r\n}\r\n\r\n.col-confirmation {\r\n  margin-top: 100px;\r\n  padding: 20px;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 20px;\r\n  /* Ajusta el espacio entre los elementos */\r\n}\r\n\r\n.image-item {\r\n  margin-top: 50px;\r\n  padding-top: 70px;\r\n}\r\n\r\n.font-confirmation {\r\n  font-size: 26px;\r\n  text-align: center;\r\n  // color: #005da9;\r\n  color: #82298F;\r\n  font-weight: bold;\r\n}\r\n\r\n\r\n.rounded-input {\r\n  margin-top: 15px;\r\n  background-color: #f4f6fc;\r\n  /* Color de fondo suave */\r\n  border-radius: 10px;\r\n  /* Bordes redondeados */\r\n  padding: 5px 5px;\r\n  /* Espaciado interno */\r\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\r\n  /* Sombra suave */\r\n  --ion-border-color: transparent;\r\n  /* Quita cualquier borde por defecto */\r\n}\r\n\r\n:host ion-input {\r\n  text-align: center;\r\n  color: #F38301;\r\n  --padding-start: 8px;\r\n}\r\n\r\n:host .custom-footer {\r\n  position: fixed;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 10px;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  background-color: #ffffff;\r\n}\r\n\r\n:host .custom-footer ion-button {\r\n  flex: 0 0 48%;\r\n}\r\n\r\n:host .custom-footer .left-button {\r\n  max-width: 140px;\r\n  color: black;\r\n  --background: white;\r\n  --color: #82298F;\r\n  --border-radius: 20px;\r\n  --border-color: white;\r\n  margin-right: auto;\r\n  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\r\n}\r\n\r\n:host .custom-footer .right-button {\r\n  margin-left: auto;\r\n}\r\n\r\n.tutorial-head {\r\n  padding-top: 50px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  color: black;\r\n}\r\n\r\n.center-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 60vh;\r\n  /* Ajusta este valor si quieres m\u00E1s o menos espacio vertical */\r\n  width: 100%;\r\n}\r\n\r\n.tutorial-title {\r\n  text-align: center;\r\n}\r\n\r\n.rounded-input ion-input {\r\n  font-size: 14px;\r\n  /* Tama\u00F1o de texto */\r\n  color: #333;\r\n  /* Color del texto */\r\n}\r\n\r\n.rounded-input::part(native) {\r\n  background: transparent;\r\n  /* Fondo transparente para evitar conflictos */\r\n}\r\n\r\n.p-info {\r\n  font-weight: bold;\r\n  color: #714e93\r\n}\r\n\r\n.custom-button {\r\n  --background: var(--purple-primary, #82298F) !important;\r\n  --background-hover: var(--purple-secondary, #2b0d30) !important;\r\n  --background-activated: var(--purple-secondary, #2b0d30) !important;\r\n  --color: #ffffff !important;\r\n  --border-radius: 20px !important;\r\n  --padding-top: 10px !important;\r\n  --padding-bottom: 10px !important;\r\n  --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\r\n  text-transform: none;\r\n  pointer-events: auto;\r\n\r\n}\r\n\r\n//blur effect\r\n\r\n.blur-effect {\r\n  filter: blur(5px);\r\n  pointer-events: none;\r\n}\r\n\r\n.blur-overlay {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(255, 255, 255, 0.7);\r\n  z-index: 999;\r\n  filter: blur(5px);\r\n}\r\n\r\n.boton-personalizado {\r\n  background-color: #4caf50;\r\n  /* Verde, por ejemplo */\r\n  color: white;\r\n  font-size: 16px;\r\n}\r\n\r\n.version {\r\n  position: fixed;\r\n  bottom: 10px;\r\n  right: 10px;\r\n  font-size: 12px;\r\n  color: #888;\r\n  z-index: 1000;\r\n}\r\n\r\n.button-debug {\r\n  --background: #ff4081;\r\n  --color: #fff;\r\n}\r\n\r\n\r\n.wrapper-no-internet {\r\n  background-color: #fff;\r\n  height: 100vh;\r\n  display: flex;\r\n  justify-content: center; /* centra en eje vertical */\r\n  align-items: center;     /* centra en eje horizontal */\r\n  padding: 40px;\r\n  background-image: url('assets/imagesIdvision/background.png') !important;\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n  \r\n}\r\n\r\n.content-no-internet {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n  gap: 16px;\r\n}\r\n\r\n.title-no-internet{\r\n  color: #000;\r\n  font-size: 32px;\r\n  font-weight: bold;\r\n}\r\n\r\n.icon-no-internet {\r\n  width: 125px;\r\n  display: block;\r\n  margin-top: 25px;\r\n}\r\n\r\n.description-no-internet {\r\n  margin-top: 25px;\r\n  font-size: 22px;\r\n  color: #000;\r\n  line-height: 1.5;\r\n  text-align: center;\r\n}\r\n.no-border{\r\n  --border-width: 0 !important;\r\n}\r\n\r\n.confirmation-screen {\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  height: 80vh; // Se integra al 80% de la vista\r\n  padding: 25px;\r\n  box-sizing: border-box;\r\n  background-image: url('assets/imagesIdvision/background.png');\r\n  background-size: cover;\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n  background-color: white;\r\n  gap: 20px; // Espacio entre elementos\r\n}\r\n\r\n.image-confirmation {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n}\r\n\r\n.image-confirmation img {\r\n  max-width: 300px; // Reducido de 500px a 300px\r\n  width: 50%; // Reducido de 80% a 50%\r\n  height: auto;\r\n}\r\n\r\n.button-container {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 0 10px;\r\n  \r\n  ion-button {\r\n    width: 90%;\r\n    max-width: 300px;\r\n  }\r\n}\r\n\r\n\r\n.close-button {\r\n  position: absolute;\r\n  top: 12px;\r\n  right: 12px; \r\n  z-index: 1000;\r\n  font-size: 15px;\r\n  --color: #888; \r\n}\r\n\r\n.p-margin {\r\n  margin-top: 50px !important;\r\n}\r\n\r\n"] }]
-    }], () => [{ type: i1.ModalController }, { type: i1.AlertController }, { type: i1.Platform }, { type: i2.ModalDpiServices }, { type: i3.SdkCommunicationService }, { type: i1.NavController }, { type: i0.ChangeDetectorRef }, { type: i1.ToastController }, { type: i1.LoadingController }, { type: i4.ConfigurationService }, { type: i5.ValidationService }, { type: i6.NavigationService }, { type: i7.ProcessingService }, { type: i8.DpiService }], { dpi: [{
+        args: [{ selector: 'app-id-vision', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], imports: [IonicModule, CommonModule, HttpClientModule, CameraSecurityBlockComponent], providers: [DpiService, ConfigurationService, ValidationService, NavigationService, ProcessingService], encapsulation: ViewEncapsulation.Emulated, template: "<ion-content *ngIf=\"isInitCameraBlocked\" class=\"content\">\n  <app-camera-security-block\n    [title]=\"'Bloqueo por seguridad'\"\n    [description]=\"'Detectamos una c\u00E1mara virtual o no permitida durante la inicializaci\u00F3n del SDK.'\"\n    [reason]=\"initCameraBlockReason\"\n    [exitLabel]=\"'Entiendo'\"\n    (exitPressed)=\"handleInitSecurityExit()\">\n  </app-camera-security-block>\n</ion-content>\n\n<ion-content class=\"content\" [style.display]=\"hasInternet && !isInitCameraBlocked ? 'block' : 'none'\">\n\n  <swiper-container *ngIf=\"!simpleProcess\" init=\"false\" class=\"custom-swiper\" #swiperContainer\n                    (swiperslidechange)=\"onSlideChange()\">\n\n    <!-- \uD83D\uDD39 PASO 1: Verificaci\u00F3n de Identidad (Est\u00E1tico) -->\n    <swiper-slide *ngIf=\"!simpleProcess\">\n      <div class=\"slide-one\">\n        <div class=\"head\">\n          <div class=\"head-title\">Verifiquemos tu identidad</div>\n          <div class=\"head-subtitle\">\n            Por favor confirma tu n\u00FAmero de identificaci\u00F3n (DPI) y sigue las instrucciones.\n          </div>\n\n          <ion-item class=\"head-dpi\">\n            <ion-input #dpi type=\"number\" disabled=\"true\" placeholder=\"0000000000000\"></ion-input>\n          </ion-item>\n        </div>\n\n        <ion-grid class=\"instructions\">\n          <ion-row class=\"instruction\">\n            <ion-col size=\"3\">\n              <img class=\"instruction-img\" src=\"assets/imagesIdvision/documentsImage.png\" alt=\"\"/>\n            </ion-col>\n            <ion-col>\n              <div class=\"instruction-description\">\n                Ten a la mano tu DPI y sube una foto del frente y reverso de tu documento.\n              </div>\n            </ion-col>\n          </ion-row>\n\n          <ion-row class=\"instruction\">\n            <ion-col size=\"3\">\n              <img class=\"instruction-img\" src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\"/>\n            </ion-col>\n            <ion-col>\n              <div class=\"instruction-description\">\n                Graba un video corto, mant\u00E9n tu rostro dentro del c\u00EDrculo y evita moverte.\n              </div>\n            </ion-col>\n          </ion-row>\n        </ion-grid>\n\n        <ion-button\n          class=\"action-button\"\n          expand=\"block\"\n          (click)=\"handleClick()\">\n          Empecemos\n        </ion-button>\n      </div>\n    </swiper-slide>\n\n    <!-- \uD83D\uDD39 PASOS INTERMEDIOS: Se generan din\u00E1micamente seg\u00FAn el `order` -->\n    <swiper-slide *ngFor=\"let step of validationConfig\">\n      <div class=\"slide-two\" [ngSwitch]=\"step.type\">\n        <!--Acuerdo de video-->\n        <div *ngSwitchCase=\"1\" [ngClass]=\"{'sdk-metag-blur-effect': simpleProcess}\">\n          <div class=\"head\">\n            <div class=\"head-title\">Acuerdo de v\u00EDdeo</div>\n            <div class=\"head-subtitle\">Graba un video corto para completar tu proceso de identificaci\u00F3n.</div>\n          </div>\n          <ion-grid class=\"instructions\">\n            <ion-row class=\"instruction\">\n              <ion-col size=\"3\">\n                <img class=\"instruction-img\" src=\"assets/imagesIdvision/Foco.png\" alt=\"\"/>\n              </ion-col>\n              <ion-col>\n                <div class=\"instruction-description\">Tu rostro debe de estar iluminado sin sombra y sin reflejos.\n                </div>\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"instruction\">\n              <ion-col size=\"3\">\n                <img class=\"instruction-img\" src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\"/>\n              </ion-col>\n              <ion-col>\n                <div class=\"instruction-description\">No uses anteojos, ni sombreros, tu rostro debe estar visible.</div>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n          <ion-button class=\"action-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\n\n        </div>\n        <!-- \uD83D\uDD39 DPI Frontal -->\n        <div *ngSwitchCase=\"2\">\n          <div class=\"head\">\n            <div class=\"head-title\">DPI frontal</div>\n            <div class=\"head-subtitle\">\n              Toma una foto de la parte frontal de tu documento,\n              asegurate que este dentro del recuadro, evita sombras y reflejos.\n            </div>\n          </div>\n\n          <div class=\"card-wrapper\">\n            <div class=\"card\">\n              <div class=\"side front\">\n                <img src=\"assets/imagesIdvision/dpi_m_f.png\" alt=\"Frontal\">\n              </div>\n            </div>\n          </div>\n          <!--<div class=\"sdk-metag-dpi-container\">\n            <img src=\"assets/imagesIdvision/dpi-front-1.png\" alt=\"\"/>\n            <img src=\"assets/imagesIdvision/dpi_m_f.png\" alt=\"\"/>\n          </div>-->\n\n          <ion-button class=\"action-button\" expand=\"block\" (click)=\"step.action()\">Tomar foto</ion-button>\n        </div>\n\n        <!-- \uD83D\uDD39 DPI Trasero -->\n        <div *ngSwitchCase=\"3\">\n          <div class=\"head\">\n            <div class=\"head-title\">DPI reverso</div>\n            <div class=\"head-subtitle\">\n              Voltea tu documento y toma una foto del reverso de tu documento,\n              asegurate que este dentro del recuadro, evita sombras y reflejos.\n            </div>\n          </div>\n\n          <div class=\"card-wrapper\">\n            <div class=\"card\" [class.flip]=\"flip\">\n              <div class=\"side front\">\n                <img src=\"assets/imagesIdvision/dpi_m_f.png\" alt=\"Frontal\">\n              </div>\n              <div class=\"side back\">\n                <img src=\"assets/imagesIdvision/dpi_t.png\" alt=\"Reverso\">\n              </div>\n            </div>\n          </div>\n\n          <!--<div class=\"sdk-metag-dpi-container\">\n            <img src=\"assets/imagesIdvision/dpi-back-1.png\" alt=\"\"/>\n            <img src=\"assets/imagesIdvision/dpi_t.png\" alt=\"\"/>\n          </div>-->\n          <ion-button [disabled]=\"waitFlip\" class=\"action-button\" expand=\"block\" (click)=\"step.action()\">Tomar foto\n          </ion-button>\n        </div>\n\n        <!-- \uD83D\uDD39 Video Selfie -->\n        <div *ngSwitchCase=\"4\">\n          <div class=\"head\">\n            <div class=\"head-title\">Prueba de vida</div>\n            <div class=\"head-subtitle\">Graba un video corto para completar tu proceso de identificaci\u00F3n.</div>\n          </div>\n          <ion-grid class=\"instructions\">\n            <ion-row class=\"instruction\">\n              <ion-col size=\"3\">\n                <img class=\"instruction-img\" src=\"assets/imagesIdvision/Foco.png\" alt=\"\"/>\n              </ion-col>\n              <ion-col>\n                <div class=\"instruction-description\">Tu rostro debe de estar iluminado sin sombra y sin reflejos.</div>\n              </ion-col>\n            </ion-row>\n            <ion-row class=\"instruction\">\n              <ion-col size=\"3\">\n                <img class=\"instruction-img\" src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\"/>\n              </ion-col>\n              <ion-col>\n                <div class=\"instruction-description\">No uses anteojos, ni sombreros, tu rostro debe estar visible.</div>\n              </ion-col>\n            </ion-row>\n          </ion-grid>\n          <ion-button class=\"action-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara</ion-button>\n        </div>\n        <!-- Photo Selfie -->\n        <!-- TODO Se debera cambiar a 5, se dejo 1 por acuerdo de video -->\n        <div *ngSwitchCase=\"5\">\n          <div class=\"sdk-metag-head\">\n            <h2 class=\"sdk-metag-h-title\">Foto Selfie</h2>\n            <p class=\"sdk-metag-p-justify\">Toma una foto para completar tu proceso de identificaci\u00F3n.</p>\n          </div>\n          <ion-grid class=\"sdk-metag-verify-container\">\n            <ion-row>\n              <ion-row>\n                <div class=\"sdk-metag-image-container\">\n                  <img src=\"assets/imagesIdvision/Foco.png\" alt=\"\"/>\n                </div>\n                <div class=\"sdk-metag-container-text\">\n                  <p>Si est\u00E1s en interiores, aseg\u00FArate de que la luz est\u00E9 frente a ti, no detr\u00E1s.</p>\n                </div>\n              </ion-row>\n              <ion-row>\n                <div class=\"sdk-metag-image-container\">\n                  <img src=\"assets/imagesIdvision/rostroImage.png\" alt=\"\"/>\n                </div>\n                <div class=\"sdk-metag-container-text\">\n                  <p>Aseg\u00FArate de que tu rostro sea visible y de no usar anteojos ni sombreros.</p>\n                </div>\n              </ion-row>\n            </ion-row>\n          </ion-grid>\n          <div class=\"sdk-metag-fixed-footer\">\n            <ion-button class=\"sdk-metag-custom-button\" expand=\"block\" (click)=\"step.action()\">Abrir la c\u00E1mara\n            </ion-button>\n          </div>\n        </div>\n        <div *ngSwitchCase=\"6\">\n          <div class=\"slide-six\">\n            <div class=\"head\">\n              <div class=\"head-title\">Verificando identidad</div>\n            </div>\n\n            <div class=\"avatar-wrapper\">\n\n              <div class=\"avatar-container\">\n                <img src=\"{{image}}\" class=\"avatar\">\n                <div class=\"lottie-container\"></div>\n\n                <!--<div class=\"description\">Por favor, espera un momento...</div>-->\n\n                <div class=\"status-container\">\n                  <!--<ion-icon *ngIf=\"progress === 1\" name=\"checkmark-circle\" class=\"success-check\"></ion-icon>-->\n                  <p class=\"status-text\"\n                     [class.show]=\"showText\">\n                    {{ currentText }}\n                  </p>\n                </div>\n\n\n                <ion-progress-bar [value]=\"progress\"></ion-progress-bar>\n              </div>\n            </div>\n            <ion-button\n              style=\"margin: 100px auto 0 !important;\"\n              *ngIf=\"progress === 1 && comparsionStatus === 'success'\"\n              class=\"action-button button-success\"\n              expand=\"block\"\n              (click)=\"finalizar()\">\n              Continuar\n            </ion-button>\n            <ion-button\n              style=\"margin: 100px auto 0 !important;\"\n              *ngIf=\"progress === 1 && comparsionStatus === 'error'\"\n              class=\"action-button button-success\"\n              expand=\"block\"\n              (click)=\"handleExit()\">\n              Salir\n            </ion-button>\n          </div>\n        </div>\n        <div *ngSwitchDefault>\n          <h2>Paso desconocido</h2>\n        </div>\n      </div>\n    </swiper-slide>\n\n    <swiper-slide>\n      <div class=\"slide-third\">\n        <div class=\"head\" *ngIf=\"isValid\">\n          <div class=\"head-title\">Informaci\u00F3n procesada de manera correcta</div>\n        </div>\n        <div class=\"head\" *ngIf=\"!isValid\">\n          <div class=\"head-title\">Ocurri\u00F3 un error al procesar la informaci\u00F3n</div>\n        </div>\n        <div class=\"sdk-metag-image-confirmation\">\n          <img src=\"assets/imagesIdvision/blue-check.png\" alt=\"Check morado\"/>\n        </div>\n        <ion-button class=\"action-button\" expand=\"block\" (click)=\"handleExit()\">Continuar</ion-button>\n      </div>\n    </swiper-slide>\n  </swiper-container>\n\n  <div class=\"sdk-metag-version\">{{ versionSDK }} {{ configEnv.show_label ? configEnv.env_name : '' }}</div>\n\n  <ion-fab vertical=\"top\" horizontal=\"end\" slot=\"fixed\" *ngIf=\"showDebug\">\n    <ion-fab-button class=\"sdk-metag-button-debug\" (click)=\"copyProccess()\">\n      <ion-icon name=\"bug-outline\"></ion-icon>\n    </ion-fab-button>\n  </ion-fab>\n\n</ion-content>\n<!-- pantalla para cuando no exista internet -->\n<ion-content [style.display]=\"!hasInternet && !isInitCameraBlocked ? 'block' : 'none'\">\n  <div class=\"sdk-metag-wrapper-no-internet\">\n    <div class=\"sdk-metag-content-no-internet\">\n      <h2 class=\"sdk-metag-title-no-internet\">Error de conexi\u00F3n</h2>\n      <img src=\"assets/imagesIdvision/no-internet.svg\" alt=\"Error conexi\u00F3n img\" class=\"sdk-metag-icon-no-internet\"/>\n      <p class=\"sdk-metag-description-no-internet\">\n        No pudimos cargar la p\u00E1gina. <br>\n        Verifica tu internet y prueba de nuevo.\n      </p>\n    </div>\n  </div>\n</ion-content>\n", styles: ["// ============================================\n// ESTILOS AISLADOS DEL SDK - NO AFECTAN AL PADRE\n// ============================================\n// Usamos :host para encapsular todo dentro del componente\n// y evitar que los estilos globales del padre nos afecten\n\n:host {\n  display: block;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  // Reset de estilos globales del padre\n  * {\n    box-sizing: border-box;\n  }\n}\n\n.sdk-metag-content {\n  padding: 10px;\n  align-items: center;\n  justify-content: center;\n  height: 90vh;\n  background-color: #fff;\n  font-size: 18px;\n  background-image: url('assets/imagesIdvision/background.png');\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n}\n\n// Cuando es simpleProcess, levanta el contenido un 10%\n.sdk-metag-content-simple-process {\n  margin-top: 10vh;\n  height: 90vh;\n}\n\n.sdk-metag-h-title {\n  font-size: 1.5em;\n  font-weight: bold;\n  color: #F38301;\n  text-align: center;\n  margin-top: 20px;\n}\n\n:host p {\n  font-size: 1em;\n  color: #666;\n  text-align: center;\n  margin: 0;\n}\n\n:host ion-grid {\n  margin-top: 20px;\n}\n\n:host ion-row {\n  margin: 15px 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n:host ion-col {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n\n:host ion-icon {\n  font-size: 3em;\n  color: #ff8c00;\n  margin-bottom: 10px;\n}\n\n.sdk-metag-container-text {\n  text-align: justify !important;\n  width: 180px;\n}\n\n:host p {\n  text-align: start;\n}\n\n.sdk-metag-p-center {\n  text-align: center;\n}\n\n.sdk-metag-p-justify {\n  text-align: start;\n}\n\n.sdk-metag-head {\n  padding: 20px;\n  margin-top: 20px;\n  margin-bottom: 80px;\n}\n\n\n.sdk-metag-verify-container {\n  // padding: 60px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 40%; // Ocupa todo el espacio disponible en el ion-content\n  text-align: center;\n  //background-color: black;\n}\n\n.sdk-metag-fixed-footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 0px 10px 25px 10px;\n  // background-color: black; // Color de fondo, opcional\n  // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); // Sombra suave para que resalte\n\n  ion-button {\n    width: 90%;\n    max-width: 300px;\n    margin: 0 auto;\n    background-color: #ffcc00;\n    color: #ffffff;\n    font-weight: bold;\n    border-radius: 20px;\n\n    &:hover {\n      background-color: #ffb300;\n    }\n\n    &:active {\n      background-color: #e6a800;\n    }\n  }\n}\n\n.sdk-metag-dpi-container {\n  display: flex;\n  //width: 100%;\n  justify-content: center;\n  align-items: center;\n  height: 45vh;\n  img {\n    width: 90%;\n    transform: rotate(270deg);\n  }\n}\n\n.sdk-metag-dpi-image {\n  width: 200px;\n}\n\n.sdk-metag-image-container {\n  width: 100px;\n  max-width: 90px;\n}\n\n.sdk-metag-col-confirmation {\n  margin-top: 100px;\n  padding: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  /* Ajusta el espacio entre los elementos */\n}\n\n.sdk-metag-image-item {\n  margin-top: 50px;\n  padding-top: 70px;\n}\n\n.sdk-metag-font-confirmation {\n  font-size: 26px;\n  text-align: center;\n  // color: #005da9;\n  color: #82298F;\n  font-weight: bold;\n}\n\n\n.sdk-metag-rounded-input {\n  margin-top: 15px;\n  background-color: #f4f6fc;\n  /* Color de fondo suave */\n  border-radius: 10px;\n  /* Bordes redondeados */\n  padding: 5px 5px;\n  /* Espaciado interno */\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  /* Sombra suave */\n  --ion-border-color: transparent;\n  /* Quita cualquier borde por defecto */\n}\n\n:host ion-input {\n  text-align: center;\n  color: #F38301;\n  --padding-start: 8px;\n}\n\n:host .sdk-metag-custom-footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  padding: 10px;\n  display: flex;\n  justify-content: space-between;\n  background-color: #ffffff;\n}\n\n:host .sdk-metag-custom-footer ion-button {\n  flex: 0 0 48%;\n}\n\n:host .sdk-metag-custom-footer .sdk-metag-left-button {\n  max-width: 140px;\n  color: black;\n  --background: white;\n  --color: #82298F;\n  --border-radius: 20px;\n  --border-color: white;\n  margin-right: auto;\n  --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.0);\n}\n\n:host .sdk-metag-custom-footer .sdk-metag-right-button {\n  margin-left: auto;\n}\n\n.sdk-metag-tutorial-head {\n  padding-top: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: black;\n}\n\n.sdk-metag-center-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 60vh;\n  /* Ajusta este valor si quieres m\u00E1s o menos espacio vertical */\n  width: 100%;\n}\n\n.sdk-metag-tutorial-title {\n  text-align: center;\n}\n\n.sdk-metag-rounded-input ion-input {\n  font-size: 14px;\n  /* Tama\u00F1o de texto */\n  color: #333;\n  /* Color del texto */\n}\n\n.sdk-metag-rounded-input::part(native) {\n  background: transparent;\n  /* Fondo transparente para evitar conflictos */\n}\n\n.sdk-metag-p-info {\n  font-weight: bold;\n  color: #714e93\n}\n\n.sdk-metag-custom-button {\n  --background: var(--purple-primary, #82298F) !important;\n  --background-hover: var(--purple-secondary, #2b0d30) !important;\n  --background-activated: var(--purple-secondary, #2b0d30) !important;\n  --color: #ffffff !important;\n  --border-radius: 20px !important;\n  --padding-top: 10px !important;\n  --padding-bottom: 10px !important;\n  --box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25) !important;\n  text-transform: none;\n  pointer-events: auto;\n\n}\n\n//blur effect\n\n.sdk-metag-blur-effect {\n  filter: blur(5px);\n  pointer-events: none;\n}\n\n.sdk-metag-blur-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.7);\n  z-index: 999;\n  filter: blur(5px);\n}\n\n.sdk-metag-boton-personalizado {\n  background-color: #4caf50;\n  /* Verde, por ejemplo */\n  color: white;\n  font-size: 16px;\n}\n\n.sdk-metag-version {\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  font-size: 12px;\n  z-index: 1000;\n  background: #f4f6fc !important;\n  padding: 10px 15px !important;\n  border-radius: 20px !important;\n}\n\n.sdk-metag-button-debug {\n  --background: #ff4081;\n  --color: #fff;\n}\n\n\n.sdk-metag-wrapper-no-internet {\n  background-color: #fff;\n  height: 100vh;\n  display: flex;\n  justify-content: center; /* centra en eje vertical */\n  align-items: center; /* centra en eje horizontal */\n  padding: 40px;\n  background-image: url('assets/imagesIdvision/background.png') !important;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n\n}\n\n.sdk-metag-content-no-internet {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  gap: 16px;\n}\n\n.sdk-metag-title-no-internet {\n  color: #000;\n  font-size: 32px;\n  font-weight: bold;\n}\n\n.sdk-metag-icon-no-internet {\n  width: 125px;\n  display: block;\n  margin-top: 25px;\n}\n\n.sdk-metag-description-no-internet {\n  margin-top: 25px;\n  font-size: 22px;\n  color: #000;\n  line-height: 1.5;\n  text-align: center;\n}\n\n.sdk-metag-no-border {\n  --border-width: 0 !important;\n}\n\n.sdk-metag-confirmation-screen {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  height: 80vh; // Se integra al 80% de la vista\n  padding: 25px;\n  box-sizing: border-box;\n  background-image: url('assets/imagesIdvision/background.png');\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  background-color: white;\n  gap: 20px; // Espacio entre elementos\n}\n\n.sdk-metag-image-confirmation {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n}\n\n.sdk-metag-image-confirmation img {\n  max-width: 300px; // Reducido de 500px a 300px\n  width: 40%; // Reducido de 80% a 50%\n  height: auto;\n}\n\n.sdk-metag-button-container {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 0 10px;\n\n  ion-button {\n    width: 90%;\n    max-width: 300px;\n  }\n}\n\n\n.sdk-metag-close-button {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  z-index: 1000;\n  font-size: 15px;\n  --color: #888;\n}\n\n.sdk-metag-p-margin {\n  margin-top: 50px !important;\n}\n\n.content {\n  background-color: #ffffff;\n  --background: #ffffff;\n}\n\n/* HEAD */\n.head {\n  padding: 20px;\n}\n\n.head-title {\n  font-size: 23px;\n  font-weight: bold;\n  color: #F38301;\n  text-align: center;\n}\n\n.description {\n  text-align: center;\n  margin-top: 25px;\n  font-size: 14px;\n  margin-bottom: 25px;\n}\n\n.head-subtitle {\n  text-align: justify;\n  margin-top: 25px;\n  font-size: 14px;\n}\n\n.head-dpi {\n  margin-top: 25px;\n  //background-color: #f4f6fc;\n  border-radius: 10px;\n  --ion-border-color: transparent;\n  //padding: 5px 5px;\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n  --background: #f4f6fc !important;\n\n  ion-input {\n    text-align: center;\n    color: #F38301;\n    font-weight: 500;\n    font-size: 19px;\n  }\n}\n\n.instructions {\n}\n\n.instruction {\n  margin: 0 !important;\n}\n\n.instruction-img {\n  width: 100px;\n  max-width: 100px;\n}\n\n.instruction-description {\n  font-size: 13px;\n  text-align: justify;\n  padding-right: 15px;\n}\n\n.action-button {\n  width: 300px;\n  max-width: 300px;\n  margin: 25px auto;\n  --background: #82298F;\n  --color: #ffffff;\n  font-weight: bold;\n  --border-radius: 20px;\n  --box-shadow: none;\n}\n\n.exit-button {\n  --background: transparent !important;\n  --color: #F38301 !important;\n}\n\n.action-button:hover {\n  --background: #82298F;\n}\n\n.action-button:active {\n  --background: #82298F;\n}\n\n/* Contenedor padre */\n.card-wrapper {\n  perspective: 1000px;\n  margin: 40px;\n}\n\n/* Tarjeta */\n.card {\n  position: relative;\n  width: 100%;\n  height: 350px;\n  transform-style: preserve-3d;\n  transition: transform 1s ease-in-out;\n  cursor: pointer;\n}\n\n/* Cuando hace flip */\n.card.flip {\n  transform: rotateY(180deg);\n}\n\n/* Lados */\n.side {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n\n  img {\n    transform: rotate(270deg);\n    width: 100%;\n    object-fit: contain;\n  }\n}\n\n.front {\n  z-index: 2;\n}\n\n.back {\n  transform: rotateY(180deg);\n}\n\n.avatar-wrapper{\n  width:100%;\n  display:flex;\n  justify-content:center;\n  margin-bottom:20px;\n}\n\n.avatar-container{\n  position:relative;\n  width:300px;\n  height:300px;\n  margin-bottom: 25px;\n}\n\n.avatar{\n  width:100%;\n  height:100%;\n  border-radius:50%;\n  object-fit:cover;\n  padding: 35px;\n}\n\n.lottie-container{\n  position:absolute;\n  inset:0;\n}\n\nion-progress-bar{\n  height:7px;\n  border-radius:10px;\n  --progress-background: #F38301;\n}\n\n.slide-six {\n}\n\n\n.status-container {\n  text-align: center !important;\n  margin-top: 20px;\n  min-height: 30px;\n}\n\n.status-text {\n  text-align: center !important;\n  color: #444;\n  font-size: 14px !important;\n  opacity: 0;\n  transform: translateY(10px);\n  transition: all .4s ease;\n}\n\n.status-text.show {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.button-success {\n  animation: checkPop 0.4s ease;\n}\n\n@keyframes checkPop{\n\n  0%{\n    transform: scale(0);\n    opacity:0;\n  }\n\n  60%{\n    transform: scale(1.2);\n  }\n\n  100%{\n    transform: scale(1);\n    opacity:1;\n  }\n\n}\n"] }]
+    }], () => [{ type: i1.ModalController }, { type: i1.AlertController }, { type: i1.Platform }, { type: i2.ModalDpiServices }, { type: i3.SdkCommunicationService }, { type: i1.NavController }, { type: i0.ChangeDetectorRef }, { type: i1.ToastController }, { type: i1.LoadingController }, { type: i4.ConfigurationService }, { type: i5.ValidationService }, { type: i6.NavigationService }, { type: i7.ProcessingService }, { type: i8.DpiService }, { type: i0.ElementRef }, { type: i9.VirtualCameraDetectionService }], { dpi: [{
             type: ViewChild,
             args: ['dpi', { static: false }]
         }], swiperContainerRef: [{
@@ -1402,6 +1537,8 @@ export class IdVisionComponent {
             type: Input
         }], dpiCode: [{
             type: Input
+        }], dpiCodeSecond: [{
+            type: Input
         }], connection: [{
             type: Input
         }], apikey: [{
@@ -1411,5 +1548,5 @@ export class IdVisionComponent {
         }], validationConfig: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(IdVisionComponent, { className: "IdVisionComponent", filePath: "src\\app\\pages\\id-vision\\id-vision.component.ts", lineNumber: 55 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(IdVisionComponent, { className: "IdVisionComponent" }); })();
 //# sourceMappingURL=id-vision.component.js.map