metag-sdk-ionic 1.2.11 → 1.3.0-gforms

package/dist/src/app/pages/id-vision/components/simple-acuerdo-video/simple-acuerdo-video.component.js

@@ -461,11 +461,11 @@ export class SimpleAcuerdoVideoComponent {
             i0.ɵɵproperty("isOpen", ctx.isModalOpen);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("isOpen", ctx.isModalVoiceOpen);
-        } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, i1.IonLabel, i1.IonToolbar, i1.IonModal], styles: [".camera-container[_ngcontent-%COMP%] {\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 50%; // Antes era 70%\r\n  background-color: white;\r\n}\r\n\r\n.video-wrapper[_ngcontent-%COMP%] {\r\n  position: relative;\r\n  width: 300px;\r\n  height: 300px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}\r\n\r\nvideo[_ngcontent-%COMP%] {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  border-radius: 50%;\r\n}\r\n\r\n.progress-ring[_ngcontent-%COMP%] {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  transform: rotate(-90deg); \n\r\n}\r\n\r\n.progress-ring__circle[_ngcontent-%COMP%] {\r\n  fill: transparent;\r\n  stroke: purple;\r\n  stroke-width: 12;\r\n  stroke-dasharray: 945; \n\r\n  stroke-dashoffset: 880; \n\r\n  transition: stroke-dashoffset 12s linear; \n\r\n}\r\n\r\n.progress-active[_ngcontent-%COMP%]   .progress-ring__circle[_ngcontent-%COMP%] {\r\n  animation: _ngcontent-%COMP%_progress-animation 5s linear forwards;\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_progress-animation {\r\n  from {\r\n    stroke-dashoffset: 880;\r\n  }\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n//[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]   //[_ngcontent-%COMP%]  {\r\n//   color: #ffffff;\r\n//   font-weight: 50px;\r\n//   border-radius: 20px;\r\n//   margin-top: 20px;\r\n//   //width: 90%;\r\n//   //max-width: 300px;\r\n//   align-self: center;\r\n//   text-transform: none;\r\n\r\n//   --background: var(--purple-primary);\r\n//   --background-hover: var(--purple-secondary);\r\n//   --background-activated: var(--purple-secondary);\r\n//   --background-focused: var(--purple-secondary);\r\n\r\n//   --color: var(--purple-primary);\r\n\r\n//   --border-radius: 20px;\r\n//   --border-color: var(--purple-primary);\r\n//   --border-style: solid;\r\n//   --border-width: 1px;\r\n\r\n//   --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n\r\n//   --ripple-color: var(--purple-secondary);\r\n\r\n\r\n//   --padding-top: 10px;\r\n//   --padding-bottom: 10px;\r\n// }\r\n\r\n.text-container[_ngcontent-%COMP%] {\r\n  height: 40px;\r\n  color: black;\r\n}\r\n\r\nion-header[_ngcontent-%COMP%] {\r\n  --background: #ffffff; \n\r\n}\r\n\r\n\r\n\r\n.centered-title[_ngcontent-%COMP%] {\r\n  text-align: center;\r\n  width: 100%; \n\r\n  font-weight: bold;\r\n}\r\n\r\n.fixed-footer[_ngcontent-%COMP%] {\r\n\r\n  position: fixed;\r\n  bottom: 0;\r\n  // left: 0;\r\n  left: 50%;\r\n  // width: 100%;\r\n  width: auto;\r\n  transform: translateX(-50%); \n\r\n  justify-content: center;\r\n  padding: 10px;\r\n  background-color: #fff; // Color de fondo, opcional\r\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n\r\n  ion-button {\r\n  //   width: 90%;\r\n  //   max-width: 300px; // anteriormente 300\r\n  width: auto;\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    --background: var(--purple-primary);\r\n    --background-hover: var(--purple-secondary);\r\n    --background-activated: var(--purple-secondary);\r\n    --background-focused: var(--purple-secondary);\r\n  \r\n    --color: var(--purple-primary);\r\n  \r\n    --border-radius: 20px;\r\n    --border-color: var(--purple-primary);\r\n    --border-style: solid;\r\n    --border-width: 1px;\r\n  \r\n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n  \r\n    --ripple-color: var(--purple-secondary);\r\n  \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\r\nion-header[_ngcontent-%COMP%] {\r\n  --background: #ffffff; \n\r\n  color: #000000; \n\r\n}\r\n\r\nion-toolbar[_ngcontent-%COMP%] {\r\n  --ion-background-color: #ffffff !important;\r\n  --background: #ffffff !important;\r\n  color: #000000;\r\n}\r\n\r\n\r\nion-header[_ngcontent-%COMP%] {\r\n  --background: #ffffff; \n\r\n}\r\n\r\nion-toolbar[_ngcontent-%COMP%] {\r\n  --ion-background-color: #ffffff !important;\r\n  --background: #ffffff !important;\r\n  color: #000000;\r\n  display: flex;\r\n  justify-content: space-between; \n\r\n  align-items: center;\r\n}\r\n\r\n.centered-title[_ngcontent-%COMP%] {\r\n  flex: 1;\r\n  text-align: center; \n\r\n  font-weight: bold;\r\n  color: #000000;\r\n  margin: 0; \n\r\n}\r\n\r\nion-buttons[_ngcontent-%COMP%] {\r\n  justify-content: flex-end; \n\r\n}\r\n.countdown-overlay[_ngcontent-%COMP%] {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.6); \n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0;\r\n  padding: 0;\r\n  z-index: 1000; \n\r\n  animation: _ngcontent-%COMP%_fadeIn 0.5s ease-out, _ngcontent-%COMP%_fadeOut 0.5s ease-out 2.5s; \n\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n\r\n}\r\n\r\nion-content.custom-content[_ngcontent-%COMP%] {\r\n  --padding-top: 0;\r\n  --padding-bottom: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n  height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\r\n}\r\n\r\n.countdown[_ngcontent-%COMP%] {\r\n  font-size: 100px;\r\n  font-weight: bold;\r\n  color: white;\r\n  animation: _ngcontent-%COMP%_scaleUp 0.5s ease-out, _ngcontent-%COMP%_scaleDown 0.5s ease-out 2.5s; \n\r\n}\r\n\r\n\n\r\n@keyframes _ngcontent-%COMP%_fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_fadeOut {\r\n  from {\r\n    opacity: 1;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n\n\r\n@keyframes _ngcontent-%COMP%_scaleUp {\r\n  from {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes _ngcontent-%COMP%_scaleDown {\r\n  from {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n  to {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n.red[_ngcontent-%COMP%] {\r\n  padding: 10px;\r\n  color: red;\r\n}\r\n\r\n.text-center[_ngcontent-%COMP%]{\r\n  text-align: center;\r\n  padding-left: 20%;\r\n  padding-right: 20%;\r\n  color: #333;\r\n}\r\n\r\n.loading-overlay[_ngcontent-%COMP%] {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.8); \n\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 1000; \n\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n}\r\n\r\nion-spinner[_ngcontent-%COMP%] {\r\n  color: white;\r\n  width: 50px;\r\n  height: 50px;\r\n}\r\n\r\n.main-header[_ngcontent-%COMP%] {\r\n  padding-left: 24px;\r\n  padding-right: 24px;\r\n}\r\n\r\n.main-title[_ngcontent-%COMP%] {\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n  color: var(--purple-secondary);\r\n}\r\n\r\n.acuerdo-text[_ngcontent-%COMP%] {\r\n  font-size: 14px;\r\n  color: black;\r\n}\r\n\r\n//TTS\r\n\r\n.subtitle[_ngcontent-%COMP%] {\r\n  padding: 0px 24px;\r\n  text-align: left;\r\n  font-size: 17px;\r\n}\r\n.subtitle-word[_ngcontent-%COMP%] {\r\n  display: inline-block;\r\n  margin: 0 3px;\r\n  transition: background-color 0.3s ease, color 0.3s ease;\r\n  border-radius: 10px;\r\n\r\n}\r\n\r\n.subtitle-word.highlight[_ngcontent-%COMP%] {\r\n  background-color: purple;\r\n  border-radius: 6px;\r\n  color: white;\r\n  padding: 4px;\r\n  font-weight: 600;\r\n}\r\n\r\n\r\n.subtitle-word.read[_ngcontent-%COMP%] {\r\n  color: gray; \n\r\n}\r\n\r\n.button-container[_ngcontent-%COMP%] {\r\n  justify-content: center;\r\n  display: flex;\r\n}\r\n\r\n\r\n//[_ngcontent-%COMP%]   MODAL\r\n\r\nion-modal[_ngcontent-%COMP%] {\r\n--display: flex;\r\n--height: 100%;\r\n--width: 100%;\r\n// --border-radius: 16px;\r\n// --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\r\n// --background: rgba(0, 0, 0, 0.30) !important;\r\n}\r\n\r\n.full-content[_ngcontent-%COMP%] {\r\nwidth: 100%;\r\nheight: 100%;\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nbackground-color: rgba(0, 0, 0, 0.30) !important;\r\n\r\n}\r\n\r\n.modal-content[_ngcontent-%COMP%] {\r\ntext-align: center;\r\npadding: 10px;\r\nleft: 50%;\r\nborder-radius: 16px;\r\nheight: 370px;\r\nwidth: 80%;\r\nbackground-color: white;\r\n justify-content: center;\r\nalign-items: center; \r\n\r\nh2 {\r\n  color: var(--purple-primary);\r\n}\r\n\r\n.subtitle {\r\n  margin-bottom: 20px;\r\n}\r\n\r\nion-button {\r\n  //   width: 90%;\r\n  //   max-width: 300px; // anteriormente 300\r\n  width: auto;\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    --background: var(--orange-primary);\r\n    --background-hover: var(--orange-secondary);\r\n    --background-activated: var(--orange-secondary);\r\n    --background-focused: var(--orange-secondary);\r\n  \r\n    --color: var(--orange-primary);\r\n  \r\n    --border-radius: 20px;\r\n    --border-color: var(--orange-primary);\r\n    --border-style: solid;\r\n    --border-width: 1px;\r\n  \r\n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n  \r\n    --ripple-color: var(--orange-secondary);\r\n  \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  // .button-container {\r\n  //   display: block;\r\n  //   // position: fixed;\r\n  //   // bottom: 32%;\r\n  //   // left: 0;\r\n  //   left: 50%;\r\n  //   // width: 100%;\r\n  //   width: auto;\r\n  //   transform: translateX(-50%); \n\r\n  //   justify-content: center;\r\n  //   padding: 5px;\r\n  // }\r\n}\r\nion-modal[_ngcontent-%COMP%]::part(backdrop) {\r\nbackground: rgb(136, 138, 142);\r\nopacity: 1;\r\n}\r\n\r\nion-modal[_ngcontent-%COMP%]   ion-toolbar[_ngcontent-%COMP%] {\r\n--background: rgb(14 116 144);\r\n--color: white;\r\n}\r\n\r\nion-modal.stack-modal[_ngcontent-%COMP%] {\r\n--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);\r\n--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);\r\n}\r\n\r\n\r\n.modal-content-2[_ngcontent-%COMP%] {\r\nbackground-color: white;\r\npadding: 20px;\r\ntext-align: center;\r\nborder-radius: 12px;\r\nheight: auto;\r\nwidth: 80%;\r\njustify-content: center;\r\nalign-items: center;\r\n}\r\n\r\n.modal-header[_ngcontent-%COMP%]   ion-icon[_ngcontent-%COMP%] {\r\ncolor: #ff9a00; \n\r\nmargin-bottom: 10px;\r\nfont-size: 3rem !important\r\n;\r\n}\r\n\r\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\n// font-size: 18px;\r\nmargin-bottom: 20px;\r\n}\r\n\r\n.icons-container[_ngcontent-%COMP%] {\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nmargin-top: 20px;\r\ngap: 15px; \r\n\r\n}\r\n\r\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\r\nfont-size: 20px;\r\n}\r\n.custom-text[_ngcontent-%COMP%] {\r\nbackground-color: var(--orange-primary);\r\ncolor: white;\r\nborder-radius: 10px;\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}\r\n\r\n.o-text[_ngcontent-%COMP%] {\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}"] }); }
+        } }, dependencies: [i3.NgClass, i3.NgForOf, i3.NgIf, i1.IonButton, i1.IonButtons, i1.IonContent, i1.IonHeader, i1.IonIcon, i1.IonLabel, i1.IonToolbar, i1.IonModal], styles: [".camera-container[_ngcontent-%COMP%] {\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 50%; // Antes era 70%\n  background-color: white;\n}\n\n.video-wrapper[_ngcontent-%COMP%] {\n  position: relative;\n  width: 300px;\n  height: 300px;\n  border-radius: 50%;\n  overflow: hidden;\n}\n\nvideo[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n.progress-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: rotate(-90deg); \n\n}\n\n.progress-ring__circle[_ngcontent-%COMP%] {\n  fill: transparent;\n  stroke: purple;\n  stroke-width: 12;\n  stroke-dasharray: 945; \n\n  stroke-dashoffset: 880; \n\n  transition: stroke-dashoffset 12s linear; \n\n}\n\n.progress-active[_ngcontent-%COMP%]   .progress-ring__circle[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_progress-animation 5s linear forwards;\n}\n\n@keyframes _ngcontent-%COMP%_progress-animation {\n  from {\n    stroke-dashoffset: 880;\n  }\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n//[_ngcontent-%COMP%]   div[_ngcontent-%COMP%]   //[_ngcontent-%COMP%]  {\n//   color: #ffffff;\n//   font-weight: 50px;\n//   border-radius: 20px;\n//   margin-top: 20px;\n//   //width: 90%;\n//   //max-width: 300px;\n//   align-self: center;\n//   text-transform: none;\n\n//   --background: var(--purple-primary);\n//   --background-hover: var(--purple-secondary);\n//   --background-activated: var(--purple-secondary);\n//   --background-focused: var(--purple-secondary);\n\n//   --color: var(--purple-primary);\n\n//   --border-radius: 20px;\n//   --border-color: var(--purple-primary);\n//   --border-style: solid;\n//   --border-width: 1px;\n\n//   --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\n\n//   --ripple-color: var(--purple-secondary);\n\n\n//   --padding-top: 10px;\n//   --padding-bottom: 10px;\n// }\n\n.text-container[_ngcontent-%COMP%] {\n  height: 40px;\n  color: black;\n}\n\nion-header[_ngcontent-%COMP%] {\n  --background: #ffffff; \n\n}\n\n\n\n.centered-title[_ngcontent-%COMP%] {\n  text-align: center;\n  width: 100%; \n\n  font-weight: bold;\n}\n\n.fixed-footer[_ngcontent-%COMP%] {\n\n  position: fixed;\n  bottom: 0;\n  // left: 0;\n  left: 50%;\n  // width: 100%;\n  width: auto;\n  transform: translateX(-50%); \n\n  justify-content: center;\n  padding: 10px;\n  background-color: #fff; // Color de fondo, opcional\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n\n  ion-button {\n  //   width: 90%;\n  //   max-width: 300px; // anteriormente 300\n  width: auto;\n    margin: 0 auto;\n    background-color: #ffcc00;\n    color: #ffffff;\n    font-weight: bold;\n    border-radius: 20px;\n\n    --background: var(--purple-primary);\n    --background-hover: var(--purple-secondary);\n    --background-activated: var(--purple-secondary);\n    --background-focused: var(--purple-secondary);\n  \n    --color: var(--purple-primary);\n  \n    --border-radius: 20px;\n    --border-color: var(--purple-primary);\n    --border-style: solid;\n    --border-width: 1px;\n  \n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\n  \n    --ripple-color: var(--purple-secondary);\n  \n\n    &:hover {\n      background-color: #ffb300;\n    }\n\n    &:active {\n      background-color: #e6a800;\n    }\n  }\n}\n\n\nion-header[_ngcontent-%COMP%] {\n  --background: #ffffff; \n\n  color: #000000; \n\n}\n\nion-toolbar[_ngcontent-%COMP%] {\n  --ion-background-color: #ffffff !important;\n  --background: #ffffff !important;\n  color: #000000;\n}\n\n\nion-header[_ngcontent-%COMP%] {\n  --background: #ffffff; \n\n}\n\nion-toolbar[_ngcontent-%COMP%] {\n  --ion-background-color: #ffffff !important;\n  --background: #ffffff !important;\n  color: #000000;\n  display: flex;\n  justify-content: space-between; \n\n  align-items: center;\n}\n\n.centered-title[_ngcontent-%COMP%] {\n  flex: 1;\n  text-align: center; \n\n  font-weight: bold;\n  color: #000000;\n  margin: 0; \n\n}\n\nion-buttons[_ngcontent-%COMP%] {\n  justify-content: flex-end; \n\n}\n.countdown-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.6); \n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  z-index: 1000; \n\n  animation: _ngcontent-%COMP%_fadeIn 0.5s ease-out, _ngcontent-%COMP%_fadeOut 0.5s ease-out 2.5s; \n\n  box-sizing: border-box;\n  border-radius: 0px;\n\n}\n\nion-content.custom-content[_ngcontent-%COMP%] {\n  --padding-top: 0;\n  --padding-bottom: 0;\n  margin: 0;\n  padding: 0;\n  margin-top: 10vh; // Levanta el contenido un 10% desde el tope\n  height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\n}\n\n.countdown[_ngcontent-%COMP%] {\n  font-size: 100px;\n  font-weight: bold;\n  color: white;\n  animation: _ngcontent-%COMP%_scaleUp 0.5s ease-out, _ngcontent-%COMP%_scaleDown 0.5s ease-out 2.5s; \n\n}\n\n\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n\n\n@keyframes _ngcontent-%COMP%_scaleUp {\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_scaleDown {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n}\n\n.red[_ngcontent-%COMP%] {\n  padding: 10px;\n  color: red;\n}\n\n.text-center[_ngcontent-%COMP%]{\n  text-align: center;\n  padding-left: 20%;\n  padding-right: 20%;\n  color: #333;\n}\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.8); \n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000; \n\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  border-radius: 0px;\n}\n\nion-spinner[_ngcontent-%COMP%] {\n  color: white;\n  width: 50px;\n  height: 50px;\n}\n\n.main-header[_ngcontent-%COMP%] {\n  padding-left: 24px;\n  padding-right: 24px;\n}\n\n.main-title[_ngcontent-%COMP%] {\n  font-size: 24px;\n  font-weight: bold;\n  color: var(--purple-secondary);\n}\n\n.acuerdo-text[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: black;\n}\n\n//TTS\n\n.subtitle[_ngcontent-%COMP%] {\n  padding: 0px 24px;\n  text-align: left;\n  font-size: 17px;\n}\n.subtitle-word[_ngcontent-%COMP%] {\n  display: inline-block;\n  margin: 0 3px;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  border-radius: 10px;\n\n}\n\n.subtitle-word.highlight[_ngcontent-%COMP%] {\n  background-color: purple;\n  border-radius: 6px;\n  color: white;\n  padding: 4px;\n  font-weight: 600;\n}\n\n\n.subtitle-word.read[_ngcontent-%COMP%] {\n  color: gray; \n\n}\n\n.button-container[_ngcontent-%COMP%] {\n  justify-content: center;\n  display: flex;\n}\n\n\n//[_ngcontent-%COMP%]   MODAL\n\nion-modal[_ngcontent-%COMP%] {\n--display: flex;\n--height: 100%;\n--width: 100%;\n// --border-radius: 16px;\n// --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n// --background: rgba(0, 0, 0, 0.30) !important;\n}\n\n.full-content[_ngcontent-%COMP%] {\nwidth: 100%;\nheight: 100%;\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nbackground-color: rgba(0, 0, 0, 0.30) !important;\n\n}\n\n.modal-content[_ngcontent-%COMP%] {\ntext-align: center;\npadding: 10px;\nleft: 50%;\nborder-radius: 16px;\nheight: 370px;\nwidth: 80%;\nbackground-color: white;\n justify-content: center;\nalign-items: center; \n\nh2 {\n  color: var(--purple-primary);\n}\n\n.subtitle {\n  margin-bottom: 20px;\n}\n\nion-button {\n  //   width: 90%;\n  //   max-width: 300px; // anteriormente 300\n  width: auto;\n    margin: 0 auto;\n    background-color: #ffcc00;\n    color: #ffffff;\n    font-weight: bold;\n    border-radius: 20px;\n\n    --background: var(--orange-primary);\n    --background-hover: var(--orange-secondary);\n    --background-activated: var(--orange-secondary);\n    --background-focused: var(--orange-secondary);\n  \n    --color: var(--orange-primary);\n  \n    --border-radius: 20px;\n    --border-color: var(--orange-primary);\n    --border-style: solid;\n    --border-width: 1px;\n  \n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\n  \n    --ripple-color: var(--orange-secondary);\n  \n\n    &:hover {\n      background-color: #ffb300;\n    }\n\n    &:active {\n      background-color: #e6a800;\n    }\n  }\n\n  // .button-container {\n  //   display: block;\n  //   // position: fixed;\n  //   // bottom: 32%;\n  //   // left: 0;\n  //   left: 50%;\n  //   // width: 100%;\n  //   width: auto;\n  //   transform: translateX(-50%); \n\n  //   justify-content: center;\n  //   padding: 5px;\n  // }\n}\nion-modal[_ngcontent-%COMP%]::part(backdrop) {\nbackground: rgb(136, 138, 142);\nopacity: 1;\n}\n\nion-modal[_ngcontent-%COMP%]   ion-toolbar[_ngcontent-%COMP%] {\n--background: rgb(14 116 144);\n--color: white;\n}\n\nion-modal.stack-modal[_ngcontent-%COMP%] {\n--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);\n--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);\n}\n\n\n.modal-content-2[_ngcontent-%COMP%] {\nbackground-color: white;\npadding: 20px;\ntext-align: center;\nborder-radius: 12px;\nheight: auto;\nwidth: 80%;\njustify-content: center;\nalign-items: center;\n}\n\n.modal-header[_ngcontent-%COMP%]   ion-icon[_ngcontent-%COMP%] {\ncolor: #ff9a00; \n\nmargin-bottom: 10px;\nfont-size: 3rem !important\n;\n}\n\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n// font-size: 18px;\nmargin-bottom: 20px;\n}\n\n.icons-container[_ngcontent-%COMP%] {\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nmargin-top: 20px;\ngap: 15px; \n\n}\n\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\nfont-size: 20px;\n}\n.custom-text[_ngcontent-%COMP%] {\nbackground-color: var(--orange-primary);\ncolor: white;\nborder-radius: 10px;\npadding: 0 15px;\nfont-size: 22px;\n}\n\n.o-text[_ngcontent-%COMP%] {\npadding: 0 15px;\nfont-size: 22px;\n}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SimpleAcuerdoVideoComponent, [{
         type: Component,
-        args: [{ selector: 'app-simple-acuerdo-video', encapsulation: ViewEncapsulation.Emulated, template: "<ion-content color=\"light\" class=\"custom-content\">\r\n  <!-- Loading deshabilitado para evitar conflictos con loading principal -->\r\n  <!-- <div *ngIf=\"isLoading\" class=\"loading-overlay\">\r\n    <ion-spinner name=\"crescent\"></ion-spinner>\r\n  </div> -->\r\n  \r\n  <div *ngIf=\"countdown > 0\" class=\"countdown-overlay\">\r\n    <div class=\"countdown\">{{ countdown }}</div>\r\n  </div>\r\n  <ion-header class=\"ion-no-border\">\r\n    <ion-toolbar color=\"light\">\r\n      <!-- <ion-title class=\"centered-title\">Video Selfie</ion-title> -->\r\n      <ion-buttons slot=\"end\">\r\n        <ion-button (click)=\"closeOverlayVideo()\" [disabled]=\"!canStopRecording\">\r\n          <ion-icon name=\"close\"></ion-icon>\r\n        </ion-button>\r\n      </ion-buttons>\r\n    </ion-toolbar>\r\n  </ion-header>\r\n\r\n  <div class=\"main-header\">\r\n    <div class=\"main-title\">\r\n      <h1>Acuerdo de Video</h1>\r\n    </div>\r\n    <div class=\"acuerdo-text\">\r\n      <p>Contesta \u00FAnicamente \"S\u00ED\" si est\u00E1s de acuerdo con el cr\u00E9dito y contesta \"No\" para cancelar el proceso.</p>\r\n    </div>\r\n  </div>\r\n  <!-- Contenedor de la c\u00E1mara y progresi\u00F3n -->\r\n  <div class=\"camera-container\">\r\n    <div class=\"video-wrapper\">\r\n      <video #videoElement muted autoplay playsinline style=\"transform: scaleX(-1)\"></video>\r\n      <svg class=\"progress-ring\" #progressRing width=\"300\" height=\"300\">\r\n        <circle class=\"progress-ring__circle\" cx=\"150\" cy=\"150\" r=\"150\" />\r\n      </svg>\r\n    </div>\r\n    <ion-label [ngClass]=\"{'red': isRecording}\">00:{{ timeRemaining < 10 ? '0' + timeRemaining : timeRemaining\r\n        }}</ion-label>\r\n\r\n    <div class=\"text-container\" *ngIf=\"showTextAcuerdo\">\r\n      <!-- Mostrar las palabras como subt\u00EDtulos -->\r\n      <p class=\"subtitle\">\r\n        <span *ngFor=\"let word of words; let i = index\" class=\"subtitle-word\">\r\n          {{ word }} \r\n        </span>\r\n      </p>\r\n    </div>\r\n        <!-- <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del circulo</p> -->\r\n\r\n        \r\n      <!-- Botones de grabaci\u00F3n -->\r\n      <div class=\"fixed-footer\">\r\n        <ion-button *ngIf=\"!isRecording\" size=\"large\" expand=\"block\" (click)=\"recordVideo()\" shape=\"round\"><ion-icon slot=\"icon-only\" name=\"camera-outline\"></ion-icon></ion-button>\r\n        <ion-button *ngIf=\"isRecording\" size=\"large\" expand=\"block\" (click)=\"stopRecording()\" [disabled]=\"!canStopRecording\"><ion-icon slot=\"icon-only\" name=\"stop-outline\"></ion-icon></ion-button>\r\n      </div>\r\n  </div>\r\n\r\n  <ion-modal id=\"example-modal\" [isOpen]=\"isModalOpen\" (didDismiss)=\"closeModal()\">\r\n    <ng-template>\r\n      <div class=\"full-content\">     \r\n        <div class=\"modal-content\">\r\n          <img src=\"https://placeholder.pics/svg/150x150\" alt=\"\">\r\n          <h2>Instrucciones</h2>          \r\n          <!-- Subt\u00EDtulos din\u00E1micos y TTS -->\r\n          <div class=\"subtitle\">\r\n            <span *ngFor=\"let word of instructionWords; let i = index\" class=\"subtitle-word\">\r\n              {{ word }}\r\n            </span>\r\n          </div>\r\n          <div class=\"button-container\">\r\n            <ion-button (click)=\"closeModal()\" [disabled]=\"isSpeaking\">Comenzar</ion-button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </ion-modal>\r\n\r\n  <ion-modal id=\"voice-modal\" [isOpen]=\"isModalVoiceOpen\" (didDismiss)=\"closeModalVoice()\">\r\n    <ng-template>\r\n      <div class=\"full-content\">\r\n        <div class=\"modal-content-2\">\r\n          <div class=\"modal-header\">\r\n            <ion-icon name=\"mic\" size=\"large\" style=\"width: 50px !important; height: 50px !important;\"></ion-icon>\r\n          </div>\r\n          <div class=\"modal-body\">\r\n            <p>Contesta con tu voz</p>\r\n            <div class=\"icons-container\">\r\n              <div class=\"custom-text\">\r\n                <p>S\u00ED</p>\r\n              </div>\r\n              <div class=\"o-text\">\r\n                <p>o</p>\r\n              </div>\r\n              <div class=\"custom-text\">\r\n                <p>No</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-template>\r\n  </ion-modal>\r\n</ion-content>", styles: [".camera-container {\r\n  justify-content: center;\r\n  align-items: center;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 50%; // Antes era 70%\r\n  background-color: white;\r\n}\r\n\r\n.video-wrapper {\r\n  position: relative;\r\n  width: 300px;\r\n  height: 300px;\r\n  border-radius: 50%;\r\n  overflow: hidden;\r\n}\r\n\r\nvideo {\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  border-radius: 50%;\r\n}\r\n\r\n.progress-ring {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  transform: rotate(-90deg); /* Rotamos el c\u00EDrculo para que la animaci\u00F3n inicie desde arriba */\r\n}\r\n\r\n.progress-ring__circle {\r\n  fill: transparent;\r\n  stroke: purple;\r\n  stroke-width: 12;\r\n  stroke-dasharray: 945; /* La circunferencia del c\u00EDrculo  880*/\r\n  stroke-dashoffset: 880; /* Oculto por completo al inicio */\r\n  transition: stroke-dashoffset 12s linear; /* Esto controlar\u00E1 el llenado progresivo */\r\n}\r\n\r\n.progress-active .progress-ring__circle {\r\n  animation: progress-animation 5s linear forwards;\r\n}\r\n\r\n@keyframes progress-animation {\r\n  from {\r\n    stroke-dashoffset: 880;\r\n  }\r\n  to {\r\n    stroke-dashoffset: 0;\r\n  }\r\n}\r\n\r\n// div \r\n//  {\r\n//   color: #ffffff;\r\n//   font-weight: 50px;\r\n//   border-radius: 20px;\r\n//   margin-top: 20px;\r\n//   //width: 90%;\r\n//   //max-width: 300px;\r\n//   align-self: center;\r\n//   text-transform: none;\r\n\r\n//   --background: var(--purple-primary);\r\n//   --background-hover: var(--purple-secondary);\r\n//   --background-activated: var(--purple-secondary);\r\n//   --background-focused: var(--purple-secondary);\r\n\r\n//   --color: var(--purple-primary);\r\n\r\n//   --border-radius: 20px;\r\n//   --border-color: var(--purple-primary);\r\n//   --border-style: solid;\r\n//   --border-width: 1px;\r\n\r\n//   --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n\r\n//   --ripple-color: var(--purple-secondary);\r\n\r\n\r\n//   --padding-top: 10px;\r\n//   --padding-bottom: 10px;\r\n// }\r\n\r\n.text-container {\r\n  height: 40px;\r\n  color: black;\r\n}\r\n\r\nion-header {\r\n  --background: #ffffff; /* Fondo blanco para el header */\r\n}\r\n\r\n\r\n\r\n.centered-title {\r\n  text-align: center;\r\n  width: 100%; /* Asegura que el t\u00EDtulo est\u00E9 centrado */\r\n  font-weight: bold;\r\n}\r\n\r\n.fixed-footer {\r\n\r\n  position: fixed;\r\n  bottom: 0;\r\n  // left: 0;\r\n  left: 50%;\r\n  // width: 100%;\r\n  width: auto;\r\n  transform: translateX(-50%); /* Centra el contenedor */\r\n  justify-content: center;\r\n  padding: 10px;\r\n  background-color: #fff; // Color de fondo, opcional\r\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\r\n\r\n  ion-button {\r\n  //   width: 90%;\r\n  //   max-width: 300px; // anteriormente 300\r\n  width: auto;\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    --background: var(--purple-primary);\r\n    --background-hover: var(--purple-secondary);\r\n    --background-activated: var(--purple-secondary);\r\n    --background-focused: var(--purple-secondary);\r\n  \r\n    --color: var(--purple-primary);\r\n  \r\n    --border-radius: 20px;\r\n    --border-color: var(--purple-primary);\r\n    --border-style: solid;\r\n    --border-width: 1px;\r\n  \r\n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n  \r\n    --ripple-color: var(--purple-secondary);\r\n  \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\r\nion-header {\r\n  --background: #ffffff; /* Fondo blanco */\r\n  color: #000000; /* Texto negro */\r\n}\r\n\r\nion-toolbar {\r\n  --ion-background-color: #ffffff !important;\r\n  --background: #ffffff !important;\r\n  color: #000000;\r\n}\r\n\r\n\r\nion-header {\r\n  --background: #ffffff; /* Fondo blanco */\r\n}\r\n\r\nion-toolbar {\r\n  --ion-background-color: #ffffff !important;\r\n  --background: #ffffff !important;\r\n  color: #000000;\r\n  display: flex;\r\n  justify-content: space-between; /* Espacio entre t\u00EDtulo y bot\u00F3n */\r\n  align-items: center;\r\n}\r\n\r\n.centered-title {\r\n  flex: 1;\r\n  text-align: center; /* Centrar el t\u00EDtulo */\r\n  font-weight: bold;\r\n  color: #000000;\r\n  margin: 0; /* Quita cualquier margen del t\u00EDtulo */\r\n}\r\n\r\nion-buttons {\r\n  justify-content: flex-end; /* Alinea el bot\u00F3n a la derecha */\r\n}\r\n.countdown-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  margin: 0;\r\n  padding: 0;\r\n  z-index: 1000; /* Asegurarse de que est\u00E9 encima de otros elementos */\r\n  animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-out 2.5s; /* Animaciones de entrada y salida */\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n\r\n}\r\n\r\nion-content.custom-content {\r\n  --padding-top: 0;\r\n  --padding-bottom: 0;\r\n  margin: 0;\r\n  padding: 0;\r\n  margin-top: 10vh; // Levanta el contenido un 10% desde el tope\r\n  height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\r\n}\r\n\r\n.countdown {\r\n  font-size: 100px;\r\n  font-weight: bold;\r\n  color: white;\r\n  animation: scaleUp 0.5s ease-out, scaleDown 0.5s ease-out 2.5s; /* Escalar en entrada y salida */\r\n}\r\n\r\n/* Animaci\u00F3n para desvanecer la superposici\u00F3n */\r\n@keyframes fadeIn {\r\n  from {\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes fadeOut {\r\n  from {\r\n    opacity: 1;\r\n  }\r\n  to {\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n/* Animaci\u00F3n para escalar el n\u00FAmero */\r\n@keyframes scaleUp {\r\n  from {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n  to {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n}\r\n\r\n@keyframes scaleDown {\r\n  from {\r\n    transform: scale(1);\r\n    opacity: 1;\r\n  }\r\n  to {\r\n    transform: scale(0.8);\r\n    opacity: 0;\r\n  }\r\n}\r\n\r\n.red {\r\n  padding: 10px;\r\n  color: red;\r\n}\r\n\r\n.text-center{\r\n  text-align: center;\r\n  padding-left: 20%;\r\n  padding-right: 20%;\r\n  color: #333;\r\n}\r\n\r\n.loading-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 1000; /* Aseg\u00FArate de que est\u00E9 por encima del contenido */\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n  border-radius: 0px;\r\n}\r\n\r\nion-spinner {\r\n  color: white;\r\n  width: 50px;\r\n  height: 50px;\r\n}\r\n\r\n.main-header {\r\n  padding-left: 24px;\r\n  padding-right: 24px;\r\n}\r\n\r\n.main-title {\r\n  font-size: 24px;\r\n  font-weight: bold;\r\n  color: var(--purple-secondary);\r\n}\r\n\r\n.acuerdo-text {\r\n  font-size: 14px;\r\n  color: black;\r\n}\r\n\r\n//TTS\r\n\r\n.subtitle {\r\n  padding: 0px 24px;\r\n  text-align: left;\r\n  font-size: 17px;\r\n}\r\n.subtitle-word {\r\n  display: inline-block;\r\n  margin: 0 3px;\r\n  transition: background-color 0.3s ease, color 0.3s ease;\r\n  border-radius: 10px;\r\n\r\n}\r\n\r\n.subtitle-word.highlight {\r\n  background-color: purple;\r\n  border-radius: 6px;\r\n  color: white;\r\n  padding: 4px;\r\n  font-weight: 600;\r\n}\r\n\r\n\r\n.subtitle-word.read {\r\n  color: gray; /* Color para el texto ya le\u00EDdo */\r\n}\r\n\r\n.button-container {\r\n  justify-content: center;\r\n  display: flex;\r\n}\r\n\r\n\r\n// MODAL\r\n\r\nion-modal {\r\n--display: flex;\r\n--height: 100%;\r\n--width: 100%;\r\n// --border-radius: 16px;\r\n// --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\r\n// --background: rgba(0, 0, 0, 0.30) !important;\r\n}\r\n\r\n.full-content {\r\nwidth: 100%;\r\nheight: 100%;\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nbackground-color: rgba(0, 0, 0, 0.30) !important;\r\n\r\n}\r\n\r\n.modal-content {\r\ntext-align: center;\r\npadding: 10px;\r\nleft: 50%;\r\nborder-radius: 16px;\r\nheight: 370px;\r\nwidth: 80%;\r\nbackground-color: white;\r\n justify-content: center;\r\nalign-items: center; \r\n\r\nh2 {\r\n  color: var(--purple-primary);\r\n}\r\n\r\n.subtitle {\r\n  margin-bottom: 20px;\r\n}\r\n\r\nion-button {\r\n  //   width: 90%;\r\n  //   max-width: 300px; // anteriormente 300\r\n  width: auto;\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    --background: var(--orange-primary);\r\n    --background-hover: var(--orange-secondary);\r\n    --background-activated: var(--orange-secondary);\r\n    --background-focused: var(--orange-secondary);\r\n  \r\n    --color: var(--orange-primary);\r\n  \r\n    --border-radius: 20px;\r\n    --border-color: var(--orange-primary);\r\n    --border-style: solid;\r\n    --border-width: 1px;\r\n  \r\n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\r\n  \r\n    --ripple-color: var(--orange-secondary);\r\n  \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  // .button-container {\r\n  //   display: block;\r\n  //   // position: fixed;\r\n  //   // bottom: 32%;\r\n  //   // left: 0;\r\n  //   left: 50%;\r\n  //   // width: 100%;\r\n  //   width: auto;\r\n  //   transform: translateX(-50%); /* Centra el contenedor */\r\n  //   justify-content: center;\r\n  //   padding: 5px;\r\n  // }\r\n}\r\nion-modal::part(backdrop) {\r\nbackground: rgb(136, 138, 142);\r\nopacity: 1;\r\n}\r\n\r\nion-modal ion-toolbar {\r\n--background: rgb(14 116 144);\r\n--color: white;\r\n}\r\n\r\nion-modal.stack-modal {\r\n--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);\r\n--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);\r\n}\r\n\r\n\r\n.modal-content-2 {\r\nbackground-color: white;\r\npadding: 20px;\r\ntext-align: center;\r\nborder-radius: 12px;\r\nheight: auto;\r\nwidth: 80%;\r\njustify-content: center;\r\nalign-items: center;\r\n}\r\n\r\n.modal-header ion-icon {\r\ncolor: #ff9a00; /* Color del micr\u00F3fono */\r\nmargin-bottom: 10px;\r\nfont-size: 3rem !important\r\n;\r\n}\r\n\r\n.modal-body p {\r\n// font-size: 18px;\r\nmargin-bottom: 20px;\r\n}\r\n\r\n.icons-container {\r\ndisplay: flex;\r\njustify-content: center;\r\nalign-items: center;\r\nmargin-top: 20px;\r\ngap: 15px; \r\n\r\n}\r\n\r\n.modal-body p {\r\nfont-size: 20px;\r\n}\r\n.custom-text {\r\nbackground-color: var(--orange-primary);\r\ncolor: white;\r\nborder-radius: 10px;\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}\r\n\r\n.o-text {\r\npadding: 0 15px;\r\nfont-size: 22px;\r\n}\r\n"] }]
+        args: [{ selector: 'app-simple-acuerdo-video', encapsulation: ViewEncapsulation.Emulated, template: "<ion-content color=\"light\" class=\"custom-content\">\n  <!-- Loading deshabilitado para evitar conflictos con loading principal -->\n  <!-- <div *ngIf=\"isLoading\" class=\"loading-overlay\">\n    <ion-spinner name=\"crescent\"></ion-spinner>\n  </div> -->\n  \n  <div *ngIf=\"countdown > 0\" class=\"countdown-overlay\">\n    <div class=\"countdown\">{{ countdown }}</div>\n  </div>\n  <ion-header class=\"ion-no-border\">\n    <ion-toolbar color=\"light\">\n      <!-- <ion-title class=\"centered-title\">Video Selfie</ion-title> -->\n      <ion-buttons slot=\"end\">\n        <ion-button (click)=\"closeOverlayVideo()\" [disabled]=\"!canStopRecording\">\n          <ion-icon name=\"close\"></ion-icon>\n        </ion-button>\n      </ion-buttons>\n    </ion-toolbar>\n  </ion-header>\n\n  <div class=\"main-header\">\n    <div class=\"main-title\">\n      <h1>Acuerdo de Video</h1>\n    </div>\n    <div class=\"acuerdo-text\">\n      <p>Contesta \u00FAnicamente \"S\u00ED\" si est\u00E1s de acuerdo con el cr\u00E9dito y contesta \"No\" para cancelar el proceso.</p>\n    </div>\n  </div>\n  <!-- Contenedor de la c\u00E1mara y progresi\u00F3n -->\n  <div class=\"camera-container\">\n    <div class=\"video-wrapper\">\n      <video #videoElement muted autoplay playsinline style=\"transform: scaleX(-1)\"></video>\n      <svg class=\"progress-ring\" #progressRing width=\"300\" height=\"300\">\n        <circle class=\"progress-ring__circle\" cx=\"150\" cy=\"150\" r=\"150\" />\n      </svg>\n    </div>\n    <ion-label [ngClass]=\"{'red': isRecording}\">00:{{ timeRemaining < 10 ? '0' + timeRemaining : timeRemaining\n        }}</ion-label>\n\n    <div class=\"text-container\" *ngIf=\"showTextAcuerdo\">\n      <!-- Mostrar las palabras como subt\u00EDtulos -->\n      <p class=\"subtitle\">\n        <span *ngFor=\"let word of words; let i = index\" class=\"subtitle-word\">\n          {{ word }} \n        </span>\n      </p>\n    </div>\n        <!-- <p class=\"text-center\">Permanece quieto, con tu rostro en el centro del circulo</p> -->\n\n        \n      <!-- Botones de grabaci\u00F3n -->\n      <div class=\"fixed-footer\">\n        <ion-button *ngIf=\"!isRecording\" size=\"large\" expand=\"block\" (click)=\"recordVideo()\" shape=\"round\"><ion-icon slot=\"icon-only\" name=\"camera-outline\"></ion-icon></ion-button>\n        <ion-button *ngIf=\"isRecording\" size=\"large\" expand=\"block\" (click)=\"stopRecording()\" [disabled]=\"!canStopRecording\"><ion-icon slot=\"icon-only\" name=\"stop-outline\"></ion-icon></ion-button>\n      </div>\n  </div>\n\n  <ion-modal id=\"example-modal\" [isOpen]=\"isModalOpen\" (didDismiss)=\"closeModal()\">\n    <ng-template>\n      <div class=\"full-content\">     \n        <div class=\"modal-content\">\n          <img src=\"https://placeholder.pics/svg/150x150\" alt=\"\">\n          <h2>Instrucciones</h2>          \n          <!-- Subt\u00EDtulos din\u00E1micos y TTS -->\n          <div class=\"subtitle\">\n            <span *ngFor=\"let word of instructionWords; let i = index\" class=\"subtitle-word\">\n              {{ word }}\n            </span>\n          </div>\n          <div class=\"button-container\">\n            <ion-button (click)=\"closeModal()\" [disabled]=\"isSpeaking\">Comenzar</ion-button>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </ion-modal>\n\n  <ion-modal id=\"voice-modal\" [isOpen]=\"isModalVoiceOpen\" (didDismiss)=\"closeModalVoice()\">\n    <ng-template>\n      <div class=\"full-content\">\n        <div class=\"modal-content-2\">\n          <div class=\"modal-header\">\n            <ion-icon name=\"mic\" size=\"large\" style=\"width: 50px !important; height: 50px !important;\"></ion-icon>\n          </div>\n          <div class=\"modal-body\">\n            <p>Contesta con tu voz</p>\n            <div class=\"icons-container\">\n              <div class=\"custom-text\">\n                <p>S\u00ED</p>\n              </div>\n              <div class=\"o-text\">\n                <p>o</p>\n              </div>\n              <div class=\"custom-text\">\n                <p>No</p>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n    </ng-template>\n  </ion-modal>\n</ion-content>", styles: [".camera-container {\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 50%; // Antes era 70%\n  background-color: white;\n}\n\n.video-wrapper {\n  position: relative;\n  width: 300px;\n  height: 300px;\n  border-radius: 50%;\n  overflow: hidden;\n}\n\nvideo {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 50%;\n}\n\n.progress-ring {\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: rotate(-90deg); /* Rotamos el c\u00EDrculo para que la animaci\u00F3n inicie desde arriba */\n}\n\n.progress-ring__circle {\n  fill: transparent;\n  stroke: purple;\n  stroke-width: 12;\n  stroke-dasharray: 945; /* La circunferencia del c\u00EDrculo  880*/\n  stroke-dashoffset: 880; /* Oculto por completo al inicio */\n  transition: stroke-dashoffset 12s linear; /* Esto controlar\u00E1 el llenado progresivo */\n}\n\n.progress-active .progress-ring__circle {\n  animation: progress-animation 5s linear forwards;\n}\n\n@keyframes progress-animation {\n  from {\n    stroke-dashoffset: 880;\n  }\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n// div \n//  {\n//   color: #ffffff;\n//   font-weight: 50px;\n//   border-radius: 20px;\n//   margin-top: 20px;\n//   //width: 90%;\n//   //max-width: 300px;\n//   align-self: center;\n//   text-transform: none;\n\n//   --background: var(--purple-primary);\n//   --background-hover: var(--purple-secondary);\n//   --background-activated: var(--purple-secondary);\n//   --background-focused: var(--purple-secondary);\n\n//   --color: var(--purple-primary);\n\n//   --border-radius: 20px;\n//   --border-color: var(--purple-primary);\n//   --border-style: solid;\n//   --border-width: 1px;\n\n//   --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\n\n//   --ripple-color: var(--purple-secondary);\n\n\n//   --padding-top: 10px;\n//   --padding-bottom: 10px;\n// }\n\n.text-container {\n  height: 40px;\n  color: black;\n}\n\nion-header {\n  --background: #ffffff; /* Fondo blanco para el header */\n}\n\n\n\n.centered-title {\n  text-align: center;\n  width: 100%; /* Asegura que el t\u00EDtulo est\u00E9 centrado */\n  font-weight: bold;\n}\n\n.fixed-footer {\n\n  position: fixed;\n  bottom: 0;\n  // left: 0;\n  left: 50%;\n  // width: 100%;\n  width: auto;\n  transform: translateX(-50%); /* Centra el contenedor */\n  justify-content: center;\n  padding: 10px;\n  background-color: #fff; // Color de fondo, opcional\n // box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n\n  ion-button {\n  //   width: 90%;\n  //   max-width: 300px; // anteriormente 300\n  width: auto;\n    margin: 0 auto;\n    background-color: #ffcc00;\n    color: #ffffff;\n    font-weight: bold;\n    border-radius: 20px;\n\n    --background: var(--purple-primary);\n    --background-hover: var(--purple-secondary);\n    --background-activated: var(--purple-secondary);\n    --background-focused: var(--purple-secondary);\n  \n    --color: var(--purple-primary);\n  \n    --border-radius: 20px;\n    --border-color: var(--purple-primary);\n    --border-style: solid;\n    --border-width: 1px;\n  \n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\n  \n    --ripple-color: var(--purple-secondary);\n  \n\n    &:hover {\n      background-color: #ffb300;\n    }\n\n    &:active {\n      background-color: #e6a800;\n    }\n  }\n}\n\n\nion-header {\n  --background: #ffffff; /* Fondo blanco */\n  color: #000000; /* Texto negro */\n}\n\nion-toolbar {\n  --ion-background-color: #ffffff !important;\n  --background: #ffffff !important;\n  color: #000000;\n}\n\n\nion-header {\n  --background: #ffffff; /* Fondo blanco */\n}\n\nion-toolbar {\n  --ion-background-color: #ffffff !important;\n  --background: #ffffff !important;\n  color: #000000;\n  display: flex;\n  justify-content: space-between; /* Espacio entre t\u00EDtulo y bot\u00F3n */\n  align-items: center;\n}\n\n.centered-title {\n  flex: 1;\n  text-align: center; /* Centrar el t\u00EDtulo */\n  font-weight: bold;\n  color: #000000;\n  margin: 0; /* Quita cualquier margen del t\u00EDtulo */\n}\n\nion-buttons {\n  justify-content: flex-end; /* Alinea el bot\u00F3n a la derecha */\n}\n.countdown-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.6); /* Fondo semi-transparente */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  z-index: 1000; /* Asegurarse de que est\u00E9 encima de otros elementos */\n  animation: fadeIn 0.5s ease-out, fadeOut 0.5s ease-out 2.5s; /* Animaciones de entrada y salida */\n  box-sizing: border-box;\n  border-radius: 0px;\n\n}\n\nion-content.custom-content {\n  --padding-top: 0;\n  --padding-bottom: 0;\n  margin: 0;\n  padding: 0;\n  margin-top: 10vh; // Levanta el contenido un 10% desde el tope\n  height: 90vh; // Ajusta la altura para que junto con el margin sea 100%\n}\n\n.countdown {\n  font-size: 100px;\n  font-weight: bold;\n  color: white;\n  animation: scaleUp 0.5s ease-out, scaleDown 0.5s ease-out 2.5s; /* Escalar en entrada y salida */\n}\n\n/* Animaci\u00F3n para desvanecer la superposici\u00F3n */\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n/* Animaci\u00F3n para escalar el n\u00FAmero */\n@keyframes scaleUp {\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n@keyframes scaleDown {\n  from {\n    transform: scale(1);\n    opacity: 1;\n  }\n  to {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n}\n\n.red {\n  padding: 10px;\n  color: red;\n}\n\n.text-center{\n  text-align: center;\n  padding-left: 20%;\n  padding-right: 20%;\n  color: #333;\n}\n\n.loading-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000; /* Aseg\u00FArate de que est\u00E9 por encima del contenido */\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  border-radius: 0px;\n}\n\nion-spinner {\n  color: white;\n  width: 50px;\n  height: 50px;\n}\n\n.main-header {\n  padding-left: 24px;\n  padding-right: 24px;\n}\n\n.main-title {\n  font-size: 24px;\n  font-weight: bold;\n  color: var(--purple-secondary);\n}\n\n.acuerdo-text {\n  font-size: 14px;\n  color: black;\n}\n\n//TTS\n\n.subtitle {\n  padding: 0px 24px;\n  text-align: left;\n  font-size: 17px;\n}\n.subtitle-word {\n  display: inline-block;\n  margin: 0 3px;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  border-radius: 10px;\n\n}\n\n.subtitle-word.highlight {\n  background-color: purple;\n  border-radius: 6px;\n  color: white;\n  padding: 4px;\n  font-weight: 600;\n}\n\n\n.subtitle-word.read {\n  color: gray; /* Color para el texto ya le\u00EDdo */\n}\n\n.button-container {\n  justify-content: center;\n  display: flex;\n}\n\n\n// MODAL\n\nion-modal {\n--display: flex;\n--height: 100%;\n--width: 100%;\n// --border-radius: 16px;\n// --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n// --background: rgba(0, 0, 0, 0.30) !important;\n}\n\n.full-content {\nwidth: 100%;\nheight: 100%;\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nbackground-color: rgba(0, 0, 0, 0.30) !important;\n\n}\n\n.modal-content {\ntext-align: center;\npadding: 10px;\nleft: 50%;\nborder-radius: 16px;\nheight: 370px;\nwidth: 80%;\nbackground-color: white;\n justify-content: center;\nalign-items: center; \n\nh2 {\n  color: var(--purple-primary);\n}\n\n.subtitle {\n  margin-bottom: 20px;\n}\n\nion-button {\n  //   width: 90%;\n  //   max-width: 300px; // anteriormente 300\n  width: auto;\n    margin: 0 auto;\n    background-color: #ffcc00;\n    color: #ffffff;\n    font-weight: bold;\n    border-radius: 20px;\n\n    --background: var(--orange-primary);\n    --background-hover: var(--orange-secondary);\n    --background-activated: var(--orange-secondary);\n    --background-focused: var(--orange-secondary);\n  \n    --color: var(--orange-primary);\n  \n    --border-radius: 20px;\n    --border-color: var(--orange-primary);\n    --border-style: solid;\n    --border-width: 1px;\n  \n    --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25);\n  \n    --ripple-color: var(--orange-secondary);\n  \n\n    &:hover {\n      background-color: #ffb300;\n    }\n\n    &:active {\n      background-color: #e6a800;\n    }\n  }\n\n  // .button-container {\n  //   display: block;\n  //   // position: fixed;\n  //   // bottom: 32%;\n  //   // left: 0;\n  //   left: 50%;\n  //   // width: 100%;\n  //   width: auto;\n  //   transform: translateX(-50%); /* Centra el contenedor */\n  //   justify-content: center;\n  //   padding: 5px;\n  // }\n}\nion-modal::part(backdrop) {\nbackground: rgb(136, 138, 142);\nopacity: 1;\n}\n\nion-modal ion-toolbar {\n--background: rgb(14 116 144);\n--color: white;\n}\n\nion-modal.stack-modal {\n--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);\n--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);\n}\n\n\n.modal-content-2 {\nbackground-color: white;\npadding: 20px;\ntext-align: center;\nborder-radius: 12px;\nheight: auto;\nwidth: 80%;\njustify-content: center;\nalign-items: center;\n}\n\n.modal-header ion-icon {\ncolor: #ff9a00; /* Color del micr\u00F3fono */\nmargin-bottom: 10px;\nfont-size: 3rem !important\n;\n}\n\n.modal-body p {\n// font-size: 18px;\nmargin-bottom: 20px;\n}\n\n.icons-container {\ndisplay: flex;\njustify-content: center;\nalign-items: center;\nmargin-top: 20px;\ngap: 15px; \n\n}\n\n.modal-body p {\nfont-size: 20px;\n}\n.custom-text {\nbackground-color: var(--orange-primary);\ncolor: white;\nborder-radius: 10px;\npadding: 0 15px;\nfont-size: 22px;\n}\n\n.o-text {\npadding: 0 15px;\nfont-size: 22px;\n}\n"] }]
     }], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i0.Renderer2 }, { type: i1.AlertController }, { type: i0.ChangeDetectorRef }], { videoElement: [{
             type: ViewChild,
             args: ['videoElement']
@@ -477,5 +477,5 @@ export class SimpleAcuerdoVideoComponent {
         }], closeRequested: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SimpleAcuerdoVideoComponent, { className: "SimpleAcuerdoVideoComponent", filePath: "src\\app\\pages\\id-vision\\components\\simple-acuerdo-video\\simple-acuerdo-video.component.ts", lineNumber: 15 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SimpleAcuerdoVideoComponent, { className: "SimpleAcuerdoVideoComponent" }); })();
 //# sourceMappingURL=simple-acuerdo-video.component.js.map

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

@@ -18,7 +18,7 @@ export class FrontDpiComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FrontDpiComponent, [{
         type: Component,
-        args: [{ selector: 'app-front-dpi', template: "<p>\r\n  front-dpi works!\r\n</p>\r\n" }]
+        args: [{ selector: 'app-front-dpi', template: "<p>\n  front-dpi works!\n</p>\n" }]
     }], () => [{ type: i1.AlertController }, { type: i1.LoadingController }, { type: i1.ModalController }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FrontDpiComponent, { className: "FrontDpiComponent", filePath: "src\\app\\pages\\id-vision\\dpi\\front-dpi\\front-dpi.component.ts", lineNumber: 10 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FrontDpiComponent, { className: "FrontDpiComponent" }); })();
 //# sourceMappingURL=front-dpi.component.js.map

package/dist/src/app/pages/id-vision/id-vision.component.d.ts

@@ -8,6 +8,7 @@ import { ValidationService, MetaGValidation, StepVisibility } from './services/v
 import { NavigationService } from './services/navigation/navigation.service';
 import { ProcessingService } from './services/processing/processing.service';
 import { DpiService } from './services/dpi/dpi-service.service';
+import { VirtualCameraDetectionService } from './services/security/virtual-camera-detection.service';
 import * as i0 from "@angular/core";
 export declare class IdVisionComponent implements OnInit, AfterViewInit, OnDestroy {
     private modalController;
@@ -24,6 +25,8 @@ export declare class IdVisionComponent implements OnInit, AfterViewInit, OnDestr
     private navigationService;
     private processingService;
     private dpiService;
+    private elementRef;
+    private virtualCameraDetectionService;
     dpi: IonInput;
     swiperContainerRef?: ElementRef;
     private isAndroid;
@@ -34,6 +37,7 @@ export declare class IdVisionComponent implements OnInit, AfterViewInit, OnDestr
     tutoImage4: string;
     isSwipe: boolean;
     dpiCode: string;
+    dpiCodeSecond: string;
     connection: string;
     apikey: string;
     env: string;
@@ -54,13 +58,16 @@ export declare class IdVisionComponent implements OnInit, AfterViewInit, OnDestr
     isValid: boolean;
     configEnv: ConfigEnvironment;
     private loadingElement;
-    constructor(modalController: ModalController, alertController: AlertController, platform: Platform, modalDpiServices: ModalDpiServices, sdkCommunicationService: SdkCommunicationService, navController: NavController, cdRef: ChangeDetectorRef, toastController: ToastController, loadingController: LoadingController, configurationService: ConfigurationService, validationService: ValidationService, navigationService: NavigationService, processingService: ProcessingService, dpiService: DpiService);
+    flip: boolean;
+    waitFlip: boolean;
+    progress: number;
+    image: string;
+    isInitCameraBlocked: boolean;
+    initCameraBlockReason: string;
+    constructor(modalController: ModalController, alertController: AlertController, platform: Platform, modalDpiServices: ModalDpiServices, sdkCommunicationService: SdkCommunicationService, navController: NavController, cdRef: ChangeDetectorRef, toastController: ToastController, loadingController: LoadingController, configurationService: ConfigurationService, validationService: ValidationService, navigationService: NavigationService, processingService: ProcessingService, dpiService: DpiService, elementRef: ElementRef, virtualCameraDetectionService: VirtualCameraDetectionService);
     ngOnInit(): Promise<void>;
     ngAfterViewInit(): void;
     ngOnDestroy(): Promise<void>;
-    private handleCancelProcess;
-    private showCancelConfirmationModal;
-    private disableBackButton;
     private enableBackButton;
     private onBeforeUnload;
     private onPopState;
@@ -74,12 +81,8 @@ export declare class IdVisionComponent implements OnInit, AfterViewInit, OnDestr
     loadMockValidationConfig(): Promise<void>;
     setValidationConfig(): void;
     getStepAction(type: number): () => void;
-    private getSlideIndexForType;
     handleClick(): void;
     handleSlide(slide: number): Promise<void>;
-    handleGetInit(): void;
-    handleNext(): void;
-    handleSkipTutorial(): void;
     moveToNextStep(currentType: number): void;
     handleExit(): void;
     handleExitWithResult(result: boolean, source?: string): Promise<void>;
@@ -87,12 +90,14 @@ export declare class IdVisionComponent implements OnInit, AfterViewInit, OnDestr
     private executeFirstAvailableAction;
     private executeNextActionForSimpleProcess;
     private getValidationKeyForType;
-    private handleInitProcessError;
+    handleInitProcessError(message: string): Promise<void>;
     DpiFrontProccess(filePath: File): Promise<void>;
     DpiBackProccess(filePath: File): Promise<void>;
     VideoSelfieProcccess(file: File): Promise<void>;
     photoVideoSelfieFile(filePath: File): Promise<void>;
     getAcuerdoVideo(file: File): Promise<void>;
+    openFacialValidation2(): Promise<void>;
+    processFacialValidation(): Promise<void>;
     private setupModalSubscriptions;
     closeModalFromParent(): void;
     closeModalVideoSelfie(): void;
@@ -107,16 +112,33 @@ export declare class IdVisionComponent implements OnInit, AfterViewInit, OnDestr
     openCameraOverlayTrasero(): Promise<void>;
     openVideoSelfie(): Promise<void>;
     openPhotoSelfie(): Promise<void>;
-    openDirectPhotoSelfie(): Promise<void>;
     openAcuerdoVideo(): Promise<void>;
     openSimpleAcuerdo(): Promise<void>;
-    validateDPIFront(filePath: File): Promise<boolean>;
-    validateDPIBack(filePath: File): Promise<boolean>;
     getBackModal(file: File): Promise<void>;
-    convertImagePathToFile(imagePath: string, fileName: string): Promise<File>;
     private showAlert;
     copyProccess(): Promise<void>;
     copiarTexto(texto: string): Promise<void>;
+    onSlideChange(): void;
+    animationProgress(): void;
+    private startAnimations;
+    texts: string[];
+    successText: string;
+    errorText: string;
+    currentText: string;
+    showText: boolean;
+    index: number;
+    comparsionStatus: 'none' | 'success' | 'error';
+    animationText(): void;
+    openFacialValidation(): void;
+    animationType(path: string, loop?: boolean): void;
+    comparsion(payload: any): void;
+    actionSuccess(): void;
+    actionError(): void;
+    finalizar(): void;
+    openAcuerdoVideoNew(): Promise<void>;
+    handleInitSecurityExit(): Promise<void>;
+    private evaluateInitialCameraSecurity;
+    private logAvailableVideoInputsOnInit;
     static ɵfac: i0.ɵɵFactoryDeclaration<IdVisionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IdVisionComponent, "app-id-vision", never, { "isSwipe": { "alias": "isSwipe"; "required": false; }; "dpiCode": { "alias": "dpiCode"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "apikey": { "alias": "apikey"; "required": false; }; "env": { "alias": "env"; "required": false; }; "validationConfig": { "alias": "validationConfig"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IdVisionComponent, "app-id-vision", never, { "isSwipe": { "alias": "isSwipe"; "required": false; }; "dpiCode": { "alias": "dpiCode"; "required": false; }; "dpiCodeSecond": { "alias": "dpiCodeSecond"; "required": false; }; "connection": { "alias": "connection"; "required": false; }; "apikey": { "alias": "apikey"; "required": false; }; "env": { "alias": "env"; "required": false; }; "validationConfig": { "alias": "validationConfig"; "required": false; }; }, {}, never, never, true, never>;
 }