metag-sdk-ionic 1.2.7-dev-0.58 → 1.2.7-dev-0.60

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

@@ -1,481 +1,481 @@
-import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Camera } from '@capacitor/camera';
-import { ScreenBrightness } from '@capacitor-community/screen-brightness';
-import { Capacitor } from '@capacitor/core';
-import * as i0 from "@angular/core";
-import * as i1 from "@ionic/angular";
-import * as i2 from "@angular/platform-browser";
-import * as i3 from "@angular/common";
-const _c0 = ["videoElement"];
-const _c1 = ["progressRing"];
-const _c2 = a0 => ({ "red": a0 });
-function SimpleAcuerdoVideoComponent_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24)(1, "div", 25);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.countdown);
-} }
-function SimpleAcuerdoVideoComponent_div_23_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 29);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const word_r3 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", word_r3, " ");
-} }
-function SimpleAcuerdoVideoComponent_div_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26)(1, "p", 27);
-    i0.ɵɵtemplate(2, SimpleAcuerdoVideoComponent_div_23_span_2_Template, 2, 1, "span", 28);
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.words);
-} }
-function SimpleAcuerdoVideoComponent_ion_button_25_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ion-button", 30);
-    i0.ɵɵlistener("click", function SimpleAcuerdoVideoComponent_ion_button_25_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.recordVideo()); });
-    i0.ɵɵelement(1, "ion-icon", 31);
-    i0.ɵɵelementEnd();
-} }
-function SimpleAcuerdoVideoComponent_ion_button_26_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "ion-button", 32);
-    i0.ɵɵlistener("click", function SimpleAcuerdoVideoComponent_ion_button_26_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.stopRecording()); });
-    i0.ɵɵelement(1, "ion-icon", 33);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("disabled", !ctx_r1.canStopRecording);
-} }
-function SimpleAcuerdoVideoComponent_ng_template_28_span_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 29);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const word_r7 = ctx.$implicit;
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", word_r7, " ");
-} }
-function SimpleAcuerdoVideoComponent_ng_template_28_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35);
-    i0.ɵɵelement(2, "img", 36);
-    i0.ɵɵelementStart(3, "h2");
-    i0.ɵɵtext(4, "Instrucciones");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 27);
-    i0.ɵɵtemplate(6, SimpleAcuerdoVideoComponent_ng_template_28_span_6_Template, 2, 1, "span", 28);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 37)(8, "ion-button", 7);
-    i0.ɵɵlistener("click", function SimpleAcuerdoVideoComponent_ng_template_28_Template_ion_button_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeModal()); });
-    i0.ɵɵtext(9, "Comenzar");
-    i0.ɵɵelementEnd()()()();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngForOf", ctx_r1.instructionWords);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ctx_r1.isSpeaking);
-} }
-function SimpleAcuerdoVideoComponent_ng_template_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34)(1, "div", 38)(2, "div", 39);
-    i0.ɵɵelement(3, "ion-icon", 40);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 41)(5, "p");
-    i0.ɵɵtext(6, "Contesta con tu voz");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 42)(8, "div", 43)(9, "p");
-    i0.ɵɵtext(10, "S\u00ED");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 44)(12, "p");
-    i0.ɵɵtext(13, "o");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 43)(15, "p");
-    i0.ɵɵtext(16, "No");
-    i0.ɵɵelementEnd()()()()()();
-} }
-//import { TextToSpeech } from '@capacitor-community/text-to-speech';
-export class SimpleAcuerdoVideoComponent {
-    constructor(platform, modalController, sanitizer, renderer, alertController, changeDetector) {
-        this.platform = platform;
-        this.modalController = modalController;
-        this.sanitizer = sanitizer;
-        this.renderer = renderer;
-        this.alertController = alertController;
-        this.changeDetector = changeDetector;
-        this.closeRequested = new EventEmitter();
-        this.stream = null;
-        this.isRecording = false;
-        this.mediaRecorder = null;
-        this.recordedChunks = [];
-        this.countdown = 0; // Propiedad para la cuenta regresiva
-        this.minRecordingTime = 3000; // 3 seconds
-        this.maxRecordingTime = 5000; // 5 seconds
-        this.timeRemaining = this.maxRecordingTime / 1000; // Inicializar con el tiempo máximo en segundos
-        this.canStopRecording = true;
-        this.isLoading = true; // Variable para mostrar el loader
-        this.defaultBrightness = null; // Para guardar el brillo original del dispositivo
-        this.isModalOpen = false;
-        this.isModalVoiceOpen = false;
-        //TTS
-        this.text = '¿Acepta los términos y condiciones del crédito que está solicitando en Fundación Génesis Empresarial?';
-        this.instructions = 'Por favor contesta "SI" o "NO" a la pregunta para completar el proceso.';
-        this.words = [];
-        this.instructionWords = [];
-        this.currentIndex = 0;
-        this.timePerWord = 380; //350
-        this.isSpeaking = false;
-        this.showTextAcuerdo = false;
-        this.isAndroid = this.platform.is('android');
-        this.isIOS = this.platform.is('ios');
-    }
-    async ngAfterViewInit() {
-        // this.isModalOpen = true;
-        this.openModal();
-        // this.openModalVoice();
-        this.words = this.text.split(' ');
-        this.instructionWords = this.instructions.split(' ');
-        setTimeout(() => {
-            this.speakText(this.instructionWords, this.instructions);
-        }, 500);
-        if (this.isAndroid || this.isIOS) {
-            try {
-                const { brightness } = await ScreenBrightness.getBrightness();
-                this.defaultBrightness = brightness;
-                await ScreenBrightness.setBrightness({ brightness: 1.0 });
-            }
-            catch (error) {
-                console.warn('Error al obtener el brillo de la pantalla:', error);
-            }
-            await this.requestPermissions();
-        }
-        await this.initCamera();
-        // await this.startRecording();
-        await this.waitForCameraReady();
-    }
-    async ngOnDestroy() {
-        this.stopCamera();
-        try {
-            if (this.defaultBrightness !== null) {
-                await ScreenBrightness.setBrightness({
-                    brightness: this.defaultBrightness,
-                });
-            }
-        }
-        catch (error) {
-            console.warn('Error al restaurar el brillo original:', error);
-        }
-    }
-    // Función para abrir la modal
-    openModal() {
-        this.isModalOpen = true; // Abrir la modal
-    }
-    openModalVoice() {
-        this.isModalVoiceOpen = true;
-    }
-    closeModalVoice() {
-        this.isModalVoiceOpen = false;
-    }
-    // Función para cerrar la modal
-    closeModal() {
-        this.isModalOpen = false; // Cerrar la modal
-    }
-    async waitForCameraReady() {
-        return new Promise((resolve) => {
-            this.videoElement.nativeElement.onloadedmetadata = () => {
-                resolve();
-            };
-        });
-    }
-    async requestPermissions() {
-        if (Capacitor.getPlatform() !== 'web') {
-            if (this.isAndroid || this.isIOS) {
-                const permissions = await Camera.requestPermissions();
-                if (permissions.camera === 'denied') {
-                    console.error('Permiso de cámara denegado');
-                    return;
-                }
-            }
-        }
-    }
-    async initCamera() {
-        let isCameraReady = false;
-        try {
-            const constraints = {
-                video: {
-                    width: { ideal: 640 },
-                    height: { ideal: 480 },
-                    facingMode: 'user',
-                },
-            };
-            this.stream = await navigator.mediaDevices.getUserMedia(constraints);
-            this.videoElement.nativeElement.srcObject = this.stream;
-            // Esperar hasta que la cámara esté lista
-            this.videoElement.nativeElement.onloadedmetadata = () => {
-                isCameraReady = true;
-            };
-            // Espera activa para asegurarte de que está lista
-            await new Promise((resolve) => {
-                const interval = setInterval(() => {
-                    if (isCameraReady) {
-                        clearInterval(interval);
-                        resolve(true);
-                    }
-                }, 100);
-            });
-            this.isLoading = false;
-            await this.startRecording();
-        }
-        catch (error) {
-            console.error('Error al inicializar la cámara:', error);
-            this.isLoading = false;
-        }
-    }
-    async startRecording() {
-        if (!this.stream)
-            return;
-        const options = {
-            mimeType: this.isIOS ? 'video/mp4' : 'video/webm',
-            videoBitsPerSecond: 400000,
-        };
-        this.mediaRecorder = new MediaRecorder(this.stream, options);
-        let chunks = [];
-        this.mediaRecorder.ondataavailable = (event) => {
-            if (event.data.size > 0) {
-                chunks.push(event.data);
-            }
-            else {
-            }
-        };
-        this.mediaRecorder.onstop = async () => {
-            if (chunks.length === 0) {
-                console.error('No se capturaron datos en la grabación.');
-                return;
-            }
-            const fileType = this.isIOS ? 'video/mp4' : 'video/webm';
-            const fileExtension = this.isIOS ? 'mp4' : 'webm';
-            const videoBlob = new Blob(chunks, { type: fileType });
-            const videoFile = this.blobToFile(videoBlob, `video-selfie.${fileExtension}`);
-            if (this.backFunction) {
-                await this.backFunction(videoFile);
-            }
-        };
-    }
-    blobToFile(blob, fileName) {
-        const b = blob;
-        b.lastModified = new Date().getTime();
-        b.lastModifiedDate = new Date();
-        b.name = fileName;
-        //Cast to a File() type
-        return b;
-    }
-    async recordVideo() {
-        // Mostrar la cuenta regresiva antes de iniciar la grabación
-        this.countdown = 3;
-        const countdownInterval = setInterval(async () => {
-            this.countdown -= 1;
-            if (this.countdown <= 0) {
-                this.showTextAcuerdo = true;
-                clearInterval(countdownInterval);
-                await this.speakText(this.words, this.text);
-                this.openModalVoice();
-                this.startVideoRecord(); // Iniciar la grabación después de la cuenta regresiva
-            }
-            this.changeDetector.detectChanges(); // Actualizar la vista
-        }, 1000);
-    }
-    async startVideoRecord() {
-        if (this.mediaRecorder && !this.isRecording) {
-            await new Promise((resolve) => setTimeout(resolve, 500));
-            this.mediaRecorder.start(100);
-            this.isRecording = true;
-            this.canStopRecording = false; // Deshabilitar el botón de detener inicialmente
-            this.renderer.addClass(this.progressRing.nativeElement, 'progress-active');
-            this.timeRemaining = this.maxRecordingTime / 1000; // Reiniciar el tiempo restante
-            this.updateTimeRemaining(); // Iniciar la actualización del tiempo restante
-            // Habilitar el botón de detener después de minRecordingTime
-            setTimeout(() => {
-                this.canStopRecording = true;
-            }, this.minRecordingTime);
-            this.recordingTimer = setTimeout(async () => {
-                await this.stopRecording();
-            }, this.maxRecordingTime);
-        }
-    }
-    updateTimeRemaining() {
-        const interval = 1000; // Actualizar cada segundo
-        const timer = setInterval(() => {
-            if (this.isRecording) {
-                this.timeRemaining -= 1;
-                if (this.timeRemaining <= 0) {
-                    clearInterval(timer);
-                }
-            }
-            else {
-                clearInterval(timer);
-            }
-            this.changeDetector.detectChanges(); // Actualizar la vista
-        }, interval);
-    }
-    async stopRecording() {
-        if (this.mediaRecorder && this.isRecording && this.canStopRecording) {
-            this.closeModalVoice();
-            console.log(this.capVideo);
-            await this.backFunction(this.capVideo);
-            this.mediaRecorder.stop();
-            this.isRecording = false;
-        }
-        if (this.scanTimeout) {
-            clearTimeout(this.scanTimeout);
-        }
-        // Detiene la animación del borde circular
-        this.renderer.removeClass(this.progressRing.nativeElement, 'progress-active');
-    }
-    async closeOverlayVideo() {
-        this.stopCamera();
-        // Restaura el brillo original si estaba guardado
-        if (this.defaultBrightness !== null) {
-            await ScreenBrightness.setBrightness({
-                brightness: this.defaultBrightness,
-            });
-        }
-        this.modalController.dismiss();
-    }
-    stopCamera() {
-        if (this.stream) {
-            this.stream.getTracks().forEach((track) => track.stop());
-            this.stream = null;
-        }
-        if (this.scanTimeout)
-            clearTimeout(this.scanTimeout);
-    }
-    //TTS
-    async speakText(words, text) {
-        if (this.isSpeaking) {
-            return; // Si ya se está hablando, no hacer nada
-        }
-        this.isSpeaking = true; // Establecer que el proceso está en marcha
-        this.currentIndex = 0;
-        this.highlightWord(this.currentIndex); // Resaltar la primera palabra
-        await this.speakSentenceWithHighlights(words, text); // Hablar la oración y resaltar simultáneamente
-    }
-    async speakSentenceWithHighlights(words, text) {
-        // Leer todo el texto fluido
-        // Resaltar las palabras mientras se lee el texto
-        words.forEach((word, index) => {
-            setTimeout(() => {
-                this.currentIndex = index;
-                this.highlightWord(this.currentIndex); // Resaltar la palabra
-            }, this.timePerWord * index); // Sincroniza con el tiempo de la palabra
-        });
-        // await TextToSpeech.speak({
-        //   text: text,
-        //   lang: 'es-MX',
-        //   rate: 0.85,
-        //   volume: 1.0,
-        //   pitch: 1.2,
-        // });
-        // Una vez que se termine, habilitar nuevamente el botón
-        this.isSpeaking = false;
-    }
-    // Función para resaltar la palabra que está siendo leída
-    highlightWord(index) {
-        const wordElements = document.querySelectorAll('.subtitle-word');
-        wordElements.forEach((el, idx) => {
-            if (idx === index) {
-                el.classList.add('highlight'); // Resalta la palabra actual
-                el.classList.remove('read'); // Elimina el color de texto leído
-            }
-            else {
-                el.classList.remove('highlight');
-                el.classList.add('read'); // Marca como leído
-            }
-        });
-    }
-    static { this.ɵfac = function SimpleAcuerdoVideoComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SimpleAcuerdoVideoComponent)(i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i1.AlertController), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SimpleAcuerdoVideoComponent, selectors: [["app-simple-acuerdo-video"]], viewQuery: function SimpleAcuerdoVideoComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 5);
-            i0.ɵɵviewQuery(_c1, 5);
-        } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.videoElement = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.progressRing = _t.first);
-        } }, inputs: { backFunction: "backFunction" }, outputs: { closeRequested: "closeRequested" }, decls: 31, vars: 11, consts: [["videoElement", ""], ["progressRing", ""], ["color", "light", 1, "custom-content"], ["class", "countdown-overlay", 4, "ngIf"], [1, "ion-no-border"], ["color", "light"], ["slot", "end"], [3, "click", "disabled"], ["name", "close"], [1, "main-header"], [1, "main-title"], [1, "acuerdo-text"], [1, "camera-container"], [1, "video-wrapper"], ["muted", "", "autoplay", "", "playsinline", "", 2, "transform", "scaleX(-1)"], ["width", "300", "height", "300", 1, "progress-ring"], ["cx", "150", "cy", "150", "r", "150", 1, "progress-ring__circle"], [3, "ngClass"], ["class", "text-container", 4, "ngIf"], [1, "fixed-footer"], ["size", "large", "expand", "block", "shape", "round", 3, "click", 4, "ngIf"], ["size", "large", "expand", "block", 3, "disabled", "click", 4, "ngIf"], ["id", "example-modal", 3, "didDismiss", "isOpen"], ["id", "voice-modal", 3, "didDismiss", "isOpen"], [1, "countdown-overlay"], [1, "countdown"], [1, "text-container"], [1, "subtitle"], ["class", "subtitle-word", 4, "ngFor", "ngForOf"], [1, "subtitle-word"], ["size", "large", "expand", "block", "shape", "round", 3, "click"], ["slot", "icon-only", "name", "camera-outline"], ["size", "large", "expand", "block", 3, "click", "disabled"], ["slot", "icon-only", "name", "stop-outline"], [1, "full-content"], [1, "modal-content"], ["src", "https://placeholder.pics/svg/150x150", "alt", ""], [1, "button-container"], [1, "modal-content-2"], [1, "modal-header"], ["name", "mic", "size", "large", 2, "width", "50px !important", "height", "50px !important"], [1, "modal-body"], [1, "icons-container"], [1, "custom-text"], [1, "o-text"]], template: function SimpleAcuerdoVideoComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "ion-content", 2);
-            i0.ɵɵtemplate(1, SimpleAcuerdoVideoComponent_div_1_Template, 3, 1, "div", 3);
-            i0.ɵɵelementStart(2, "ion-header", 4)(3, "ion-toolbar", 5)(4, "ion-buttons", 6)(5, "ion-button", 7);
-            i0.ɵɵlistener("click", function SimpleAcuerdoVideoComponent_Template_ion_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeOverlayVideo()); });
-            i0.ɵɵelement(6, "ion-icon", 8);
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(7, "div", 9)(8, "div", 10)(9, "h1");
-            i0.ɵɵtext(10, "Acuerdo de Video");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(11, "div", 11)(12, "p");
-            i0.ɵɵtext(13, "Contesta \u00FAnicamente \"S\u00ED\" si est\u00E1s de acuerdo con el cr\u00E9dito y contesta \"No\" para cancelar el proceso.");
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(14, "div", 12)(15, "div", 13);
-            i0.ɵɵelement(16, "video", 14, 0);
-            i0.ɵɵnamespaceSVG();
-            i0.ɵɵelementStart(18, "svg", 15, 1);
-            i0.ɵɵelement(20, "circle", 16);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵnamespaceHTML();
-            i0.ɵɵelementStart(21, "ion-label", 17);
-            i0.ɵɵtext(22);
-            i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(23, SimpleAcuerdoVideoComponent_div_23_Template, 3, 1, "div", 18);
-            i0.ɵɵelementStart(24, "div", 19);
-            i0.ɵɵtemplate(25, SimpleAcuerdoVideoComponent_ion_button_25_Template, 2, 0, "ion-button", 20)(26, SimpleAcuerdoVideoComponent_ion_button_26_Template, 2, 1, "ion-button", 21);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(27, "ion-modal", 22);
-            i0.ɵɵlistener("didDismiss", function SimpleAcuerdoVideoComponent_Template_ion_modal_didDismiss_27_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeModal()); });
-            i0.ɵɵtemplate(28, SimpleAcuerdoVideoComponent_ng_template_28_Template, 10, 2, "ng-template");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(29, "ion-modal", 23);
-            i0.ɵɵlistener("didDismiss", function SimpleAcuerdoVideoComponent_Template_ion_modal_didDismiss_29_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeModalVoice()); });
-            i0.ɵɵtemplate(30, SimpleAcuerdoVideoComponent_ng_template_30_Template, 17, 0, "ng-template");
-            i0.ɵɵelementEnd()();
-        } if (rf & 2) {
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.countdown > 0);
-            i0.ɵɵadvance(4);
-            i0.ɵɵproperty("disabled", !ctx.canStopRecording);
-            i0.ɵɵadvance(16);
-            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2, ctx.isRecording));
-            i0.ɵɵadvance();
-            i0.ɵɵtextInterpolate1("00:", ctx.timeRemaining < 10 ? "0" + ctx.timeRemaining : ctx.timeRemaining, "");
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showTextAcuerdo);
-            i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", !ctx.isRecording);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.isRecording);
-            i0.ɵɵadvance();
-            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}"] }); }
-}
-(() => { (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"] }]
-    }], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i0.Renderer2 }, { type: i1.AlertController }, { type: i0.ChangeDetectorRef }], { videoElement: [{
-            type: ViewChild,
-            args: ['videoElement']
-        }], progressRing: [{
-            type: ViewChild,
-            args: ['progressRing']
-        }], backFunction: [{
-            type: Input
-        }], 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 }); })();
+import { Component, EventEmitter, Input, Output, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Camera } from '@capacitor/camera';
+import { ScreenBrightness } from '@capacitor-community/screen-brightness';
+import { Capacitor } from '@capacitor/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@ionic/angular";
+import * as i2 from "@angular/platform-browser";
+import * as i3 from "@angular/common";
+const _c0 = ["videoElement"];
+const _c1 = ["progressRing"];
+const _c2 = a0 => ({ "red": a0 });
+function SimpleAcuerdoVideoComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24)(1, "div", 25);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.countdown);
+} }
+function SimpleAcuerdoVideoComponent_div_23_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const word_r3 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", word_r3, " ");
+} }
+function SimpleAcuerdoVideoComponent_div_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26)(1, "p", 27);
+    i0.ɵɵtemplate(2, SimpleAcuerdoVideoComponent_div_23_span_2_Template, 2, 1, "span", 28);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.words);
+} }
+function SimpleAcuerdoVideoComponent_ion_button_25_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-button", 30);
+    i0.ɵɵlistener("click", function SimpleAcuerdoVideoComponent_ion_button_25_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.recordVideo()); });
+    i0.ɵɵelement(1, "ion-icon", 31);
+    i0.ɵɵelementEnd();
+} }
+function SimpleAcuerdoVideoComponent_ion_button_26_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "ion-button", 32);
+    i0.ɵɵlistener("click", function SimpleAcuerdoVideoComponent_ion_button_26_Template_ion_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.stopRecording()); });
+    i0.ɵɵelement(1, "ion-icon", 33);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("disabled", !ctx_r1.canStopRecording);
+} }
+function SimpleAcuerdoVideoComponent_ng_template_28_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const word_r7 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", word_r7, " ");
+} }
+function SimpleAcuerdoVideoComponent_ng_template_28_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35);
+    i0.ɵɵelement(2, "img", 36);
+    i0.ɵɵelementStart(3, "h2");
+    i0.ɵɵtext(4, "Instrucciones");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 27);
+    i0.ɵɵtemplate(6, SimpleAcuerdoVideoComponent_ng_template_28_span_6_Template, 2, 1, "span", 28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 37)(8, "ion-button", 7);
+    i0.ɵɵlistener("click", function SimpleAcuerdoVideoComponent_ng_template_28_Template_ion_button_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeModal()); });
+    i0.ɵɵtext(9, "Comenzar");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngForOf", ctx_r1.instructionWords);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isSpeaking);
+} }
+function SimpleAcuerdoVideoComponent_ng_template_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "div", 38)(2, "div", 39);
+    i0.ɵɵelement(3, "ion-icon", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 41)(5, "p");
+    i0.ɵɵtext(6, "Contesta con tu voz");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 42)(8, "div", 43)(9, "p");
+    i0.ɵɵtext(10, "S\u00ED");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 44)(12, "p");
+    i0.ɵɵtext(13, "o");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 43)(15, "p");
+    i0.ɵɵtext(16, "No");
+    i0.ɵɵelementEnd()()()()()();
+} }
+//import { TextToSpeech } from '@capacitor-community/text-to-speech';
+export class SimpleAcuerdoVideoComponent {
+    constructor(platform, modalController, sanitizer, renderer, alertController, changeDetector) {
+        this.platform = platform;
+        this.modalController = modalController;
+        this.sanitizer = sanitizer;
+        this.renderer = renderer;
+        this.alertController = alertController;
+        this.changeDetector = changeDetector;
+        this.closeRequested = new EventEmitter();
+        this.stream = null;
+        this.isRecording = false;
+        this.mediaRecorder = null;
+        this.recordedChunks = [];
+        this.countdown = 0; // Propiedad para la cuenta regresiva
+        this.minRecordingTime = 3000; // 3 seconds
+        this.maxRecordingTime = 5000; // 5 seconds
+        this.timeRemaining = this.maxRecordingTime / 1000; // Inicializar con el tiempo máximo en segundos
+        this.canStopRecording = true;
+        this.isLoading = true; // Variable para mostrar el loader
+        this.defaultBrightness = null; // Para guardar el brillo original del dispositivo
+        this.isModalOpen = false;
+        this.isModalVoiceOpen = false;
+        //TTS
+        this.text = '¿Acepta los términos y condiciones del crédito que está solicitando en Fundación Génesis Empresarial?';
+        this.instructions = 'Por favor contesta "SI" o "NO" a la pregunta para completar el proceso.';
+        this.words = [];
+        this.instructionWords = [];
+        this.currentIndex = 0;
+        this.timePerWord = 380; //350
+        this.isSpeaking = false;
+        this.showTextAcuerdo = false;
+        this.isAndroid = this.platform.is('android');
+        this.isIOS = this.platform.is('ios');
+    }
+    async ngAfterViewInit() {
+        // this.isModalOpen = true;
+        this.openModal();
+        // this.openModalVoice();
+        this.words = this.text.split(' ');
+        this.instructionWords = this.instructions.split(' ');
+        setTimeout(() => {
+            this.speakText(this.instructionWords, this.instructions);
+        }, 500);
+        if (this.isAndroid || this.isIOS) {
+            try {
+                const { brightness } = await ScreenBrightness.getBrightness();
+                this.defaultBrightness = brightness;
+                await ScreenBrightness.setBrightness({ brightness: 1.0 });
+            }
+            catch (error) {
+                console.warn('Error al obtener el brillo de la pantalla:', error);
+            }
+            await this.requestPermissions();
+        }
+        await this.initCamera();
+        // await this.startRecording();
+        await this.waitForCameraReady();
+    }
+    async ngOnDestroy() {
+        this.stopCamera();
+        try {
+            if (this.defaultBrightness !== null) {
+                await ScreenBrightness.setBrightness({
+                    brightness: this.defaultBrightness,
+                });
+            }
+        }
+        catch (error) {
+            console.warn('Error al restaurar el brillo original:', error);
+        }
+    }
+    // Función para abrir la modal
+    openModal() {
+        this.isModalOpen = true; // Abrir la modal
+    }
+    openModalVoice() {
+        this.isModalVoiceOpen = true;
+    }
+    closeModalVoice() {
+        this.isModalVoiceOpen = false;
+    }
+    // Función para cerrar la modal
+    closeModal() {
+        this.isModalOpen = false; // Cerrar la modal
+    }
+    async waitForCameraReady() {
+        return new Promise((resolve) => {
+            this.videoElement.nativeElement.onloadedmetadata = () => {
+                resolve();
+            };
+        });
+    }
+    async requestPermissions() {
+        if (Capacitor.getPlatform() !== 'web') {
+            if (this.isAndroid || this.isIOS) {
+                const permissions = await Camera.requestPermissions();
+                if (permissions.camera === 'denied') {
+                    console.error('Permiso de cámara denegado');
+                    return;
+                }
+            }
+        }
+    }
+    async initCamera() {
+        let isCameraReady = false;
+        try {
+            const constraints = {
+                video: {
+                    width: { ideal: 640 },
+                    height: { ideal: 480 },
+                    facingMode: 'user',
+                },
+            };
+            this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+            this.videoElement.nativeElement.srcObject = this.stream;
+            // Esperar hasta que la cámara esté lista
+            this.videoElement.nativeElement.onloadedmetadata = () => {
+                isCameraReady = true;
+            };
+            // Espera activa para asegurarte de que está lista
+            await new Promise((resolve) => {
+                const interval = setInterval(() => {
+                    if (isCameraReady) {
+                        clearInterval(interval);
+                        resolve(true);
+                    }
+                }, 100);
+            });
+            this.isLoading = false;
+            await this.startRecording();
+        }
+        catch (error) {
+            console.error('Error al inicializar la cámara:', error);
+            this.isLoading = false;
+        }
+    }
+    async startRecording() {
+        if (!this.stream)
+            return;
+        const options = {
+            mimeType: this.isIOS ? 'video/mp4' : 'video/webm',
+            videoBitsPerSecond: 400000,
+        };
+        this.mediaRecorder = new MediaRecorder(this.stream, options);
+        let chunks = [];
+        this.mediaRecorder.ondataavailable = (event) => {
+            if (event.data.size > 0) {
+                chunks.push(event.data);
+            }
+            else {
+            }
+        };
+        this.mediaRecorder.onstop = async () => {
+            if (chunks.length === 0) {
+                console.error('No se capturaron datos en la grabación.');
+                return;
+            }
+            const fileType = this.isIOS ? 'video/mp4' : 'video/webm';
+            const fileExtension = this.isIOS ? 'mp4' : 'webm';
+            const videoBlob = new Blob(chunks, { type: fileType });
+            const videoFile = this.blobToFile(videoBlob, `video-selfie.${fileExtension}`);
+            if (this.backFunction) {
+                await this.backFunction(videoFile);
+            }
+        };
+    }
+    blobToFile(blob, fileName) {
+        const b = blob;
+        b.lastModified = new Date().getTime();
+        b.lastModifiedDate = new Date();
+        b.name = fileName;
+        //Cast to a File() type
+        return b;
+    }
+    async recordVideo() {
+        // Mostrar la cuenta regresiva antes de iniciar la grabación
+        this.countdown = 3;
+        const countdownInterval = setInterval(async () => {
+            this.countdown -= 1;
+            if (this.countdown <= 0) {
+                this.showTextAcuerdo = true;
+                clearInterval(countdownInterval);
+                await this.speakText(this.words, this.text);
+                this.openModalVoice();
+                this.startVideoRecord(); // Iniciar la grabación después de la cuenta regresiva
+            }
+            this.changeDetector.detectChanges(); // Actualizar la vista
+        }, 1000);
+    }
+    async startVideoRecord() {
+        if (this.mediaRecorder && !this.isRecording) {
+            await new Promise((resolve) => setTimeout(resolve, 500));
+            this.mediaRecorder.start(100);
+            this.isRecording = true;
+            this.canStopRecording = false; // Deshabilitar el botón de detener inicialmente
+            this.renderer.addClass(this.progressRing.nativeElement, 'progress-active');
+            this.timeRemaining = this.maxRecordingTime / 1000; // Reiniciar el tiempo restante
+            this.updateTimeRemaining(); // Iniciar la actualización del tiempo restante
+            // Habilitar el botón de detener después de minRecordingTime
+            setTimeout(() => {
+                this.canStopRecording = true;
+            }, this.minRecordingTime);
+            this.recordingTimer = setTimeout(async () => {
+                await this.stopRecording();
+            }, this.maxRecordingTime);
+        }
+    }
+    updateTimeRemaining() {
+        const interval = 1000; // Actualizar cada segundo
+        const timer = setInterval(() => {
+            if (this.isRecording) {
+                this.timeRemaining -= 1;
+                if (this.timeRemaining <= 0) {
+                    clearInterval(timer);
+                }
+            }
+            else {
+                clearInterval(timer);
+            }
+            this.changeDetector.detectChanges(); // Actualizar la vista
+        }, interval);
+    }
+    async stopRecording() {
+        if (this.mediaRecorder && this.isRecording && this.canStopRecording) {
+            this.closeModalVoice();
+            console.log(this.capVideo);
+            await this.backFunction(this.capVideo);
+            this.mediaRecorder.stop();
+            this.isRecording = false;
+        }
+        if (this.scanTimeout) {
+            clearTimeout(this.scanTimeout);
+        }
+        // Detiene la animación del borde circular
+        this.renderer.removeClass(this.progressRing.nativeElement, 'progress-active');
+    }
+    async closeOverlayVideo() {
+        this.stopCamera();
+        // Restaura el brillo original si estaba guardado
+        if (this.defaultBrightness !== null) {
+            await ScreenBrightness.setBrightness({
+                brightness: this.defaultBrightness,
+            });
+        }
+        this.modalController.dismiss();
+    }
+    stopCamera() {
+        if (this.stream) {
+            this.stream.getTracks().forEach((track) => track.stop());
+            this.stream = null;
+        }
+        if (this.scanTimeout)
+            clearTimeout(this.scanTimeout);
+    }
+    //TTS
+    async speakText(words, text) {
+        if (this.isSpeaking) {
+            return; // Si ya se está hablando, no hacer nada
+        }
+        this.isSpeaking = true; // Establecer que el proceso está en marcha
+        this.currentIndex = 0;
+        this.highlightWord(this.currentIndex); // Resaltar la primera palabra
+        await this.speakSentenceWithHighlights(words, text); // Hablar la oración y resaltar simultáneamente
+    }
+    async speakSentenceWithHighlights(words, text) {
+        // Leer todo el texto fluido
+        // Resaltar las palabras mientras se lee el texto
+        words.forEach((word, index) => {
+            setTimeout(() => {
+                this.currentIndex = index;
+                this.highlightWord(this.currentIndex); // Resaltar la palabra
+            }, this.timePerWord * index); // Sincroniza con el tiempo de la palabra
+        });
+        // await TextToSpeech.speak({
+        //   text: text,
+        //   lang: 'es-MX',
+        //   rate: 0.85,
+        //   volume: 1.0,
+        //   pitch: 1.2,
+        // });
+        // Una vez que se termine, habilitar nuevamente el botón
+        this.isSpeaking = false;
+    }
+    // Función para resaltar la palabra que está siendo leída
+    highlightWord(index) {
+        const wordElements = document.querySelectorAll('.subtitle-word');
+        wordElements.forEach((el, idx) => {
+            if (idx === index) {
+                el.classList.add('highlight'); // Resalta la palabra actual
+                el.classList.remove('read'); // Elimina el color de texto leído
+            }
+            else {
+                el.classList.remove('highlight');
+                el.classList.add('read'); // Marca como leído
+            }
+        });
+    }
+    static { this.ɵfac = function SimpleAcuerdoVideoComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SimpleAcuerdoVideoComponent)(i0.ɵɵdirectiveInject(i1.Platform), i0.ɵɵdirectiveInject(i1.ModalController), i0.ɵɵdirectiveInject(i2.DomSanitizer), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i1.AlertController), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SimpleAcuerdoVideoComponent, selectors: [["app-simple-acuerdo-video"]], viewQuery: function SimpleAcuerdoVideoComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+            i0.ɵɵviewQuery(_c1, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.videoElement = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.progressRing = _t.first);
+        } }, inputs: { backFunction: "backFunction" }, outputs: { closeRequested: "closeRequested" }, decls: 31, vars: 11, consts: [["videoElement", ""], ["progressRing", ""], ["color", "light", 1, "custom-content"], ["class", "countdown-overlay", 4, "ngIf"], [1, "ion-no-border"], ["color", "light"], ["slot", "end"], [3, "click", "disabled"], ["name", "close"], [1, "main-header"], [1, "main-title"], [1, "acuerdo-text"], [1, "camera-container"], [1, "video-wrapper"], ["muted", "", "autoplay", "", "playsinline", "", 2, "transform", "scaleX(-1)"], ["width", "300", "height", "300", 1, "progress-ring"], ["cx", "150", "cy", "150", "r", "150", 1, "progress-ring__circle"], [3, "ngClass"], ["class", "text-container", 4, "ngIf"], [1, "fixed-footer"], ["size", "large", "expand", "block", "shape", "round", 3, "click", 4, "ngIf"], ["size", "large", "expand", "block", 3, "disabled", "click", 4, "ngIf"], ["id", "example-modal", 3, "didDismiss", "isOpen"], ["id", "voice-modal", 3, "didDismiss", "isOpen"], [1, "countdown-overlay"], [1, "countdown"], [1, "text-container"], [1, "subtitle"], ["class", "subtitle-word", 4, "ngFor", "ngForOf"], [1, "subtitle-word"], ["size", "large", "expand", "block", "shape", "round", 3, "click"], ["slot", "icon-only", "name", "camera-outline"], ["size", "large", "expand", "block", 3, "click", "disabled"], ["slot", "icon-only", "name", "stop-outline"], [1, "full-content"], [1, "modal-content"], ["src", "https://placeholder.pics/svg/150x150", "alt", ""], [1, "button-container"], [1, "modal-content-2"], [1, "modal-header"], ["name", "mic", "size", "large", 2, "width", "50px !important", "height", "50px !important"], [1, "modal-body"], [1, "icons-container"], [1, "custom-text"], [1, "o-text"]], template: function SimpleAcuerdoVideoComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "ion-content", 2);
+            i0.ɵɵtemplate(1, SimpleAcuerdoVideoComponent_div_1_Template, 3, 1, "div", 3);
+            i0.ɵɵelementStart(2, "ion-header", 4)(3, "ion-toolbar", 5)(4, "ion-buttons", 6)(5, "ion-button", 7);
+            i0.ɵɵlistener("click", function SimpleAcuerdoVideoComponent_Template_ion_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeOverlayVideo()); });
+            i0.ɵɵelement(6, "ion-icon", 8);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(7, "div", 9)(8, "div", 10)(9, "h1");
+            i0.ɵɵtext(10, "Acuerdo de Video");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(11, "div", 11)(12, "p");
+            i0.ɵɵtext(13, "Contesta \u00FAnicamente \"S\u00ED\" si est\u00E1s de acuerdo con el cr\u00E9dito y contesta \"No\" para cancelar el proceso.");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(14, "div", 12)(15, "div", 13);
+            i0.ɵɵelement(16, "video", 14, 0);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(18, "svg", 15, 1);
+            i0.ɵɵelement(20, "circle", 16);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵnamespaceHTML();
+            i0.ɵɵelementStart(21, "ion-label", 17);
+            i0.ɵɵtext(22);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(23, SimpleAcuerdoVideoComponent_div_23_Template, 3, 1, "div", 18);
+            i0.ɵɵelementStart(24, "div", 19);
+            i0.ɵɵtemplate(25, SimpleAcuerdoVideoComponent_ion_button_25_Template, 2, 0, "ion-button", 20)(26, SimpleAcuerdoVideoComponent_ion_button_26_Template, 2, 1, "ion-button", 21);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(27, "ion-modal", 22);
+            i0.ɵɵlistener("didDismiss", function SimpleAcuerdoVideoComponent_Template_ion_modal_didDismiss_27_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeModal()); });
+            i0.ɵɵtemplate(28, SimpleAcuerdoVideoComponent_ng_template_28_Template, 10, 2, "ng-template");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(29, "ion-modal", 23);
+            i0.ɵɵlistener("didDismiss", function SimpleAcuerdoVideoComponent_Template_ion_modal_didDismiss_29_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.closeModalVoice()); });
+            i0.ɵɵtemplate(30, SimpleAcuerdoVideoComponent_ng_template_30_Template, 17, 0, "ng-template");
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.countdown > 0);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("disabled", !ctx.canStopRecording);
+            i0.ɵɵadvance(16);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2, ctx.isRecording));
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1("00:", ctx.timeRemaining < 10 ? "0" + ctx.timeRemaining : ctx.timeRemaining, "");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showTextAcuerdo);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", !ctx.isRecording);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isRecording);
+            i0.ɵɵadvance();
+            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}"] }); }
+}
+(() => { (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"] }]
+    }], () => [{ type: i1.Platform }, { type: i1.ModalController }, { type: i2.DomSanitizer }, { type: i0.Renderer2 }, { type: i1.AlertController }, { type: i0.ChangeDetectorRef }], { videoElement: [{
+            type: ViewChild,
+            args: ['videoElement']
+        }], progressRing: [{
+            type: ViewChild,
+            args: ['progressRing']
+        }], backFunction: [{
+            type: Input
+        }], 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 }); })();
 //# sourceMappingURL=simple-acuerdo-video.component.js.map