@jaak.ai/stamps 2.1.0-dev.2 → 2.1.0-dev.20

package/dist/esm/jaak-stamps.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BP1Q4KOg.js';
+import { r as registerInstance, c as createEvent, g as getElement, h } from './index-Drbzcuq-.js';
 
 class EventBusService {
     events = new Map();
@@ -204,7 +204,21 @@ class CameraService {
                 tempStream.getTracks().forEach(track => track.stop());
             }
             const devices = await navigator.mediaDevices.enumerateDevices();
-            this.availableCameras = devices.filter(device => device.kind === 'videoinput');
+            const allCameras = devices.filter(device => device.kind === 'videoinput');
+            // Filter out virtual cameras
+            this.availableCameras = allCameras.filter(camera => {
+                const isVirtual = this.isVirtualCamera(camera);
+                if (isVirtual) {
+                    console.log(`Virtual camera detected and filtered: ${camera.label}`);
+                }
+                return !isVirtual;
+            });
+            // Check if there are physical cameras available
+            if (this.availableCameras.length === 0) {
+                console.log('No physical cameras available');
+                this.eventBus.emit('error', new Error('Cámaras virtuales no están permitidas. Use una cámara física.'));
+                return [];
+            }
             // Cache the results for optimization
             CameraService.deviceEnumerationCache = {
                 devices: this.availableCameras,
@@ -254,6 +268,21 @@ class CameraService {
             });
             this.lastStreamConstraints = finalConstraints;
             const stream = await this.currentStreamPromise;
+            // Validate that active stream is not from a virtual camera
+            const videoTrack = stream.getVideoTracks()[0];
+            if (videoTrack) {
+                const settings = videoTrack.getSettings();
+                const deviceId = settings.deviceId;
+                if (deviceId) {
+                    const devices = await navigator.mediaDevices.enumerateDevices();
+                    const currentDevice = devices.find(device => device.deviceId === deviceId);
+                    if (currentDevice && this.isVirtualCamera(currentDevice)) {
+                        console.log(`Virtual camera detected in active stream: ${currentDevice.label}`);
+                        stream.getTracks().forEach(track => track.stop());
+                        throw new Error('Cámaras virtuales no están permitidas. Use una cámara física.');
+                    }
+                }
+            }
             return stream;
         }
         catch (error) {
@@ -271,7 +300,23 @@ class CameraService {
                 audio: false
             });
             this.lastStreamConstraints = basicConstraints;
-            return await this.currentStreamPromise;
+            const stream = await this.currentStreamPromise;
+            // Validate fallback stream as well
+            const videoTrack = stream.getVideoTracks()[0];
+            if (videoTrack) {
+                const settings = videoTrack.getSettings();
+                const deviceId = settings.deviceId;
+                if (deviceId) {
+                    const devices = await navigator.mediaDevices.enumerateDevices();
+                    const currentDevice = devices.find(device => device.deviceId === deviceId);
+                    if (currentDevice && this.isVirtualCamera(currentDevice)) {
+                        console.log(`Virtual camera detected in fallback stream: ${currentDevice.label}`);
+                        stream.getTracks().forEach(track => track.stop());
+                        throw new Error('Cámaras virtuales no están permitidas. Use una cámara física.');
+                    }
+                }
+            }
+            return stream;
         }
     }
     async switchCamera(cameraId) {
@@ -280,6 +325,12 @@ class CameraService {
             await this.enumerateDevices();
             return;
         }
+        // Validate that the target camera is not virtual
+        if (this.isVirtualCamera(selectedCamera)) {
+            console.log(`Attempted to switch to virtual camera: ${selectedCamera.label}`);
+            this.eventBus.emit('error', new Error('No se puede cambiar a cámara virtual'));
+            return;
+        }
         await this.setSelectedCamera(cameraId);
     }
     isRearCamera(stream) {
@@ -551,6 +602,37 @@ class CameraService {
     invalidateDeviceCache() {
         CameraService.deviceEnumerationCache = null;
     }
+    isVirtualCamera(device) {
+        const label = device.label.toLowerCase();
+        const virtualCameraIndicators = [
+            'obs',
+            'virtual',
+            'snap camera',
+            'manycam',
+            'xsplit',
+            'camtwist',
+            'ecamm',
+            'nvidia broadcast',
+            'droidcam',
+            'iriun',
+            'elgato',
+            'streamlabs',
+            'wirecast',
+            'zoom virtual',
+            'teams virtual',
+            'mmhmm',
+            'camo',
+            'reincubate camo',
+            'webcamoid',
+            'splitcam',
+            'cheese',
+            'guvcview',
+            'yawcam',
+            'webcam 7',
+            'altserver'
+        ];
+        return virtualCameraIndicators.some(indicator => label.includes(indicator));
+    }
 }
 
 class LowMemoryDeviceStrategy {
@@ -670,7 +752,12 @@ class DetectionService {
                 this.session = await window.ort.InferenceSession.create(this.MODEL_PATH, sessionOptions);
             }
             catch (error) {
-                if (error.message.includes('failed to allocate a buffer')) {
+                // Múltiples tipos de errores de memoria que pueden ocurrir
+                const isMemoryError = error.message.includes('failed to allocate a buffer') ||
+                    error.message.includes('Out of memory') ||
+                    error.message.includes('RangeError: Out of memory') ||
+                    error.message.includes('no available backend found');
+                if (isMemoryError) {
                     const fallbackOptions = {
                         executionProviders: ['wasm'],
                         graphOptimizationLevel: 'disabled',
@@ -680,8 +767,17 @@ class DetectionService {
                         executionMode: 'sequential',
                         interOpNumThreads: 1,
                         intraOpNumThreads: 1,
+                        // Configuraciones adicionales para dispositivos con poca memoria
+                        enableProfiling: false,
+                        sessionLogSeverityLevel: 4,
+                        sessionLogVerbosityLevel: 0,
                     };
-                    this.session = await window.ort.InferenceSession.create(this.MODEL_PATH, fallbackOptions);
+                    try {
+                        this.session = await window.ort.InferenceSession.create(this.MODEL_PATH, fallbackOptions);
+                    }
+                    catch (fallbackError) {
+                        throw new Error(`no available backend found. ERR: [wasm] RangeError: Out of memory`);
+                    }
                 }
                 else {
                     throw error;
@@ -721,7 +817,12 @@ class DetectionService {
                 this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, sessionOptions);
             }
             catch (error) {
-                if (error.message.includes('failed to allocate a buffer')) {
+                // Múltiples tipos de errores de memoria que pueden ocurrir
+                const isMemoryError = error.message.includes('failed to allocate a buffer') ||
+                    error.message.includes('Out of memory') ||
+                    error.message.includes('RangeError: Out of memory') ||
+                    error.message.includes('no available backend found');
+                if (isMemoryError) {
                     const fallbackOptions = {
                         executionProviders: ['wasm'],
                         graphOptimizationLevel: 'disabled',
@@ -731,8 +832,17 @@ class DetectionService {
                         executionMode: 'sequential',
                         interOpNumThreads: 1,
                         intraOpNumThreads: 1,
+                        // Configuraciones adicionales para dispositivos con poca memoria
+                        enableProfiling: false,
+                        sessionLogSeverityLevel: 4,
+                        sessionLogVerbosityLevel: 0,
                     };
-                    this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, fallbackOptions);
+                    try {
+                        this.mobileNetSession = await window.ort.InferenceSession.create(this.MOBILENET_MODEL_PATH, fallbackOptions);
+                    }
+                    catch (fallbackError) {
+                        throw new Error(`no available backend found. ERR: [wasm] RangeError: Out of memory`);
+                    }
                 }
                 else {
                     throw error;
@@ -1089,7 +1199,7 @@ class ServiceContainer {
     }
 }
 
-const myComponentCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background:#333;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}video,.detection-overlay{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,.detection-overlay.mirror{transform:rotateY(180deg)}.detection-overlay{z-index:1;pointer-events:none}video{z-index:0}.detection-box{transition:opacity 0.2s ease}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;opacity:0.8}.side{position:absolute;background:#999;transition:background-color 0.3s ease;border-radius:1px}.side-top.aligned{border-left-color:#28a745;border-top-color:#28a745}.side-right.aligned{border-right-color:#28a745;border-top-color:#28a745}.side-bottom.aligned{border-left-color:#28a745;border-bottom-color:#28a745}.side-left.aligned{border-right-color:#28a745;border-bottom-color:#28a745}.side-top{top:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-right{top:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-bottom{bottom:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.side-left{bottom:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);color:#ffffff;font-size:12px;font-weight:500;text-align:center;white-space:normal;padding:13px;max-width:300px;z-index:20;height:fit-content;width:fit-content;animation:slideInFromTopCentered 0.3s ease-out}.quality-indicator{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:8px;background:rgba(0, 0, 0, 0.8);padding:8px 12px;border-radius:20px;z-index:25;transition:all 0.3s ease}.quality-indicator.warning{background:rgba(255, 152, 0, 0.9)}.quality-indicator.good{background:rgba(76, 175, 80, 0.9)}.quality-score{color:#fff;font-size:12px;font-weight:600;min-width:30px;text-align:center}.quality-status{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;color:#fff;transition:all 0.3s ease}.quality-status.ready{background:#4CAF50}.quality-status.not-ready{background:#f44336}.card-outline.quality-warning{animation:qualityWarning 1s ease-in-out infinite alternate}@keyframes qualityWarning{0%{box-shadow:0 0 0 3px rgba(255, 152, 0, 0.6)}100%{box-shadow:0 0 0 6px rgba(255, 152, 0, 0.3)}}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);animation:drawCheck 0.4s ease-out 0.2s both}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}.back-capture-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:320px}.back-capture-buttons{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.capture-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.capture-button:hover{background:#f8f9fa}.capture-button:active{background:#e9ecef;transform:translateY(1px)}.capture-button:disabled{background:#e9ecef;color:#6c757d;cursor:not-allowed;transform:none}@media (max-width: 480px){.back-capture-section{bottom:16px;max-width:300px}.back-capture-buttons{flex-direction:column;gap:8px;width:100%}.capture-button,.back-capture-buttons .skip-button{width:100%;max-width:200px;padding:10px 20px;font-size:13px}}.skip-explanation{background:rgba(0, 0, 0, 0.5);color:#ffffff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;text-align:center;margin-bottom:12px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.1);animation:fadeIn 0.3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.skip-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateY(1px)}.camera-controls{position:absolute;top:16px;right:16px;z-index:25;display:flex;gap:8px;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}.camera-selector-button{height:32px;padding:0 10px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.camera-selector-button:hover{background:rgba(0, 0, 0, 0.8);border-color:rgba(255, 255, 255, 0.2);transform:translateY(-1px)}.camera-selector-button:active{transform:translateY(0);background:rgba(0, 0, 0, 0.9)}.camera-selector-button:disabled,.camera-selector-button.loading{opacity:0.7;cursor:not-allowed;pointer-events:none}.camera-selector-button:disabled:hover,.camera-selector-button.loading:hover{transform:none;background:rgba(0, 0, 0, 0.6);border-color:rgba(255, 255, 255, 0.1)}.button-spinner{width:16px;height:16px;border:2px solid rgba(255, 255, 255, 0.3);border-top:2px solid #ffffff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.camera-selector-dropdown{position:absolute;top:56px;right:16px;z-index:30;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;min-width:260px;max-width:300px;border:1px solid rgba(255, 255, 255, 0.1);overflow:hidden;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes slideInFromTopCentered{0%{opacity:0;transform:translate(-50%, -50%) translateY(-8px) scale(0.95)}100%{opacity:1;transform:translate(-50%, -50%) translateY(0) scale(1)}}.camera-selector-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.camera-selector-header span{font-weight:500;color:#ffffff;font-size:13px;opacity:0.9}.close-selector{width:20px;height:20px;border:none;background:none;color:rgba(255, 255, 255, 0.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-selector:hover{background:rgba(255, 255, 255, 0.1);color:#ffffff}.camera-list{padding:4px 0;max-height:240px;overflow-y:auto}.camera-option{width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:flex-start;align-items:center;gap:8px;color:rgba(255, 255, 255, 0.9)}.camera-option:hover{background:rgba(255, 255, 255, 0.08)}.camera-option.selected{background:rgba(255, 255, 255, 0.12);color:#ffffff}.camera-label{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0;font-weight:400;display:flex;align-items:center;gap:6px}.camera-label .autofocus-icon{font-size:12px;color:#ffffff !important;opacity:0.8;flex-shrink:0}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9;flex-shrink:0}.device-info{padding:6px 12px;border-top:1px solid rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.device-info small{color:rgba(255, 255, 255, 0.6);font-size:11px;text-transform:capitalize;font-weight:400}@media (max-width: 480px){.camera-controls{top:12px;right:12px;gap:6px}.camera-selector-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-dropdown{right:12px;top:48px;min-width:240px;max-width:calc(100vw - 24px)}.camera-selector-header{padding:6px 10px}.camera-option{padding:6px 10px}.device-info{padding:4px 10px}}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.component-status{position:absolute;top:16px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);display:flex;align-items:center;gap:6px;padding:6px 10px;z-index:40;height:32px;width:fit-content;animation:slideInFromTop 0.3s ease-out}.status-spinner{width:16px;height:16px;border:1px solid rgba(255, 255, 255, 0.3);border-top:1px solid #ffffff;border-radius:50%;animation:statusSpin 1s linear infinite;flex-shrink:0}.status-content{display:flex;flex-direction:column;gap:1px}.status-message{color:#ffffff;font-size:12px;font-weight:500;margin:0}.status-description{color:rgba(255, 255, 255, 0.7);font-size:10px;line-height:1.2;margin:0}@keyframes statusSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width: 480px){.component-status{top:12px;left:12px;padding:4px 8px;gap:4px;height:28px;border-radius:8px}.status-spinner{width:14px;height:14px}.status-message{font-size:11px}.status-description{font-size:9px}.guide-text{font-size:11px;padding:4px 8px;border-radius:8px}}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:8px}.loading-spinner{width:50px;height:50px;border:3px solid rgba(255, 255, 255, 0.15);border-top:3px solid #28a745;border-radius:50%;animation:spin 1s ease-in-out infinite;margin-bottom:16px}.loading-text{color:#ffffff;font-size:14px;font-weight:500;text-align:center;opacity:0.9;margin-bottom:4px}.loading-description{color:rgba(255, 255, 255, 0.7);font-size:12px;text-align:center;opacity:0.8}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.performance-monitor{position:absolute;top:70px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromTop 0.3s ease-out;transition:all 0.3s ease}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-20px) scale(0.95)}100%{opacity:1;transform:translateX(0) scale(1)}}.performance-expanded{padding:6px 10px}.metrics-row{display:flex;gap:8px;margin-bottom:4px}.metrics-row:last-child{margin-bottom:0}.metric-compact{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px}.metric-label{font-size:9px;color:rgba(255, 255, 255, 0.6);font-weight:500;text-transform:uppercase;letter-spacing:0.3px}.metric-value{font-size:10px;font-weight:600;font-family:'Monaco', 'Menlo', 'Consolas', monospace;padding:2px 4px;border-radius:3px;text-align:center;white-space:nowrap}.metric-value.good{color:#4ade80;background:rgba(74, 222, 128, 0.1);border:1px solid rgba(74, 222, 128, 0.2)}.metric-value.warning{color:#fbbf24;background:rgba(251, 191, 36, 0.1);border:1px solid rgba(251, 191, 36, 0.2)}.metric-value.danger{color:#f87171;background:rgba(248, 113, 113, 0.1);border:1px solid rgba(248, 113, 113, 0.2)}@media (max-width: 480px){.performance-monitor{top:60px;left:12px;width:fit-content}.performance-expanded{padding:4px 8px}.metrics-row{gap:6px;margin-bottom:3px}.metric-compact{min-width:45px;gap:1px}.metric-label{font-size:8px}.metric-value{font-size:9px;padding:1px 3px}}.quality-monitor{position:absolute;top:200px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromLeft 0.3s ease-out;transition:all 0.3s ease}.quality-text{padding:6px 10px;font-size:11px;color:white;font-family:'Monaco', 'Menlo', 'Consolas', monospace;line-height:1.4}.quality-fail{color:#ff9999}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.metric-value.danger{animation:pulse 2s infinite}@media (max-width: 480px){.quality-monitor{top:160px;left:12px}.quality-text{padding:4px 8px;font-size:10px}}.manual-capture-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}.manual-capture-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.manual-capture-button:hover{background:#f8f9fa}.manual-capture-button:active{background:#e9ecef;transform:translateY(1px)}.manual-capture-button:disabled{background:#e9ecef;color:#6c757d;cursor:not-allowed;transform:none}@media (max-width: 480px){.manual-capture-section{bottom:16px;max-width:280px}.manual-capture-button{padding:10px 20px;font-size:13px}}";
+const myComponentCss = ":host{display:block;width:100%;height:100%;font-family:system-ui, -apple-system, sans-serif;color:#1a1a1a}.detector-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}h1{font-size:24px;font-weight:500;color:#333;margin:0 0 24px 0}.video-container{position:relative;width:100%;height:100%;background:#333;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}video,.detection-overlay{position:absolute;width:100%;height:100%;border-radius:8px}video.mirror,.detection-overlay.mirror{transform:rotateY(180deg)}.detection-overlay{z-index:1;pointer-events:none}video{z-index:0}.detection-box{transition:opacity 0.2s ease}.status{margin-top:16px;font-size:12px;color:#666}.overlay-mask{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:block;pointer-events:none}.card-outline{position:absolute;top:var(--mask-center-y, 50%);left:var(--mask-center-x, 50%);transform:translate(-50%, -50%);width:var(--mask-width, 88%);height:var(--mask-height, 55%);border:none;border-radius:4px;background:transparent;opacity:0.8}.side{position:absolute;background:#999;transition:background-color 0.3s ease;border-radius:1px}.side-top.aligned{border-left-color:#28a745;border-top-color:#28a745}.side-right.aligned{border-right-color:#28a745;border-top-color:#28a745}.side-bottom.aligned{border-left-color:#28a745;border-bottom-color:#28a745}.side-left.aligned{border-right-color:#28a745;border-bottom-color:#28a745}.side-top{top:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-right{top:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-top:6px solid #ffffff;background:transparent}.side-bottom{bottom:-3px;left:-3px;width:30px;height:30px;border-left:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.side-left{bottom:-3px;right:-3px;width:30px;height:30px;border-right:6px solid #ffffff;border-bottom:6px solid #ffffff;background:transparent}.guide-text{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);color:#ffffff;font-size:12px;font-weight:500;text-align:center;white-space:normal;padding:13px;max-width:300px;z-index:20;height:fit-content;width:fit-content;animation:slideInFromTopCentered 0.3s ease-out}.quality-indicator{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:8px;background:rgba(0, 0, 0, 0.8);padding:8px 12px;border-radius:20px;z-index:25;transition:all 0.3s ease}.quality-indicator.warning{background:rgba(255, 152, 0, 0.9)}.quality-indicator.good{background:rgba(76, 175, 80, 0.9)}.quality-score{color:#fff;font-size:12px;font-weight:600;min-width:30px;text-align:center}.quality-status{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;color:#fff;transition:all 0.3s ease}.quality-status.ready{background:#4CAF50}.quality-status.not-ready{background:#f44336}.card-outline.quality-warning{animation:qualityWarning 1s ease-in-out infinite alternate}@keyframes qualityWarning{0%{box-shadow:0 0 0 3px rgba(255, 152, 0, 0.6)}100%{box-shadow:0 0 0 6px rgba(255, 152, 0, 0.3)}}.capture-animation{position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;z-index:30;pointer-events:none;animation:captureFlash 0.6s ease-out}@keyframes captureFlash{0%{opacity:0}15%{opacity:0.8}30%{opacity:0}45%{opacity:0.4}60%{opacity:0}100%{opacity:0}}.card-outline.capturing{animation:pulseGreen 0.6s ease-out}@keyframes pulseGreen{0%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}50%{border-color:#28a745;box-shadow:0 0 0 8px rgba(40, 167, 69, 0.6)}100%{border-color:#28a745;box-shadow:0 0 0 4px rgba(40, 167, 69, 0)}}.flip-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showFlipInstruction 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.id-card-icon{width:80px;height:50px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:8px;position:relative;animation:flipCard 2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0, 0, 0, 0.3)}.id-card-icon::before{content:'';position:absolute;top:8px;left:8px;width:16px;height:12px;background:rgba(255, 255, 255, 0.9);border-radius:2px}.id-card-icon::after{content:'';position:absolute;top:25px;left:8px;width:64px;height:3px;background:rgba(255, 255, 255, 0.7);border-radius:1px;box-shadow:0 6px 0 rgba(255, 255, 255, 0.7), 0 12px 0 rgba(255, 255, 255, 0.7)}.flip-text{margin-top:12px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px}@keyframes showFlipInstruction{0%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.8)}}@keyframes flipCard{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.success-animation{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:35;pointer-events:none;opacity:0;animation:showSuccessMessage 3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center}.check-icon{width:80px;height:80px;background:linear-gradient(135deg, #6c757d 0%, #495057 100%);border-radius:50%;position:relative;animation:bounceSuccess 0.6s ease-out;box-shadow:0 4px 16px rgba(108, 117, 125, 0.4);display:flex;align-items:center;justify-content:center}.check-icon::before{content:'';position:absolute;width:20px;height:35px;border:4px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);}.success-text{margin-top:16px;color:#fff;font-size:14px;font-weight:600;text-align:center;background:rgba(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;animation:fadeInUp 0.5s ease-out 0.4s both}@keyframes showSuccessMessage{0%{opacity:0;transform:translate(-50%, -50%) scale(0.5)}15%{opacity:1;transform:translate(-50%, -50%) scale(1)}85%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.9)}}@keyframes bounceSuccess{0%{transform:scale(0)}50%{transform:scale(1.1)}100%{transform:scale(1)}}@keyframes drawCheck{0%{width:0;height:0}50%{width:20px;height:0}100%{width:20px;height:35px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}.skip-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}.back-capture-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:320px}.back-capture-buttons{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.capture-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.capture-button:hover{background:#f8f9fa}.capture-button:active{background:#e9ecef;transform:translateY(1px)}.capture-button:disabled,.capture-button.primary-button:disabled{cursor:not-allowed !important;transform:none !important;opacity:0.7 !important;transition:none !important}@media (max-width: 480px){.back-capture-section{bottom:16px;max-width:300px}.back-capture-buttons{flex-direction:column;gap:8px;width:100%}.capture-button,.back-capture-buttons .skip-button{width:100%;max-width:200px;padding:10px 20px;font-size:13px}.capture-button:disabled,.capture-button.primary-button:disabled,.skip-button:disabled{opacity:0.7 !important;cursor:not-allowed !important}}.skip-explanation{background:rgba(0, 0, 0, 0.5);color:#ffffff;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;text-align:center;margin-bottom:12px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.2);backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.1);animation:fadeIn 0.3s ease-in-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.guide-text.performance-warning-text{animation:gentlePulse 2s ease-in-out infinite;background:rgba(255, 107, 107, 0.3);border:1px solid rgba(255, 107, 107, 0.5)}@keyframes gentlePulse{0%,100%{transform:translate(-50%, -50%) scale(1);background:rgba(255, 107, 107, 0.3)}50%{transform:translate(-50%, -50%) scale(1.02);background:rgba(255, 107, 107, 0.4)}}.skip-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.skip-button:hover{background:#f8f9fa}.skip-button:active{background:#e9ecef;transform:translateY(1px)}.skip-button:disabled{cursor:not-allowed !important;transform:none !important;opacity:0.7 !important;transition:none !important}.camera-controls{position:absolute;top:16px;right:16px;z-index:25;display:flex;gap:8px;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}.camera-selector-button{height:32px;padding:0 10px;border:none;border-radius:8px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(12px);color:#ffffff;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255, 255, 255, 0.1);white-space:nowrap;min-width:fit-content}.camera-selector-button:hover{background:rgba(0, 0, 0, 0.8);border-color:rgba(255, 255, 255, 0.2);transform:translateY(-1px)}.camera-selector-button:active{transform:translateY(0);background:rgba(0, 0, 0, 0.9)}.camera-selector-button:disabled,.camera-selector-button.loading{opacity:0.7;cursor:not-allowed;pointer-events:none}.camera-selector-button:disabled:hover,.camera-selector-button.loading:hover{transform:none;background:rgba(0, 0, 0, 0.6);border-color:rgba(255, 255, 255, 0.1)}.button-spinner{width:16px;height:16px;border:2px solid rgba(0, 0, 0, 0.2);border-top:2px solid #333333;border-radius:50%;animation:spin 1s linear infinite;display:inline-block;margin-right:8px;vertical-align:middle}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.camera-selector-dropdown{position:absolute;top:56px;right:16px;z-index:30;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;min-width:260px;max-width:300px;border:1px solid rgba(255, 255, 255, 0.1);overflow:hidden;pointer-events:auto;animation:slideInFromTop 0.3s ease-out}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-8px) scale(0.95)}100%{opacity:1;transform:translateY(0) scale(1)}}@keyframes slideInFromTopCentered{0%{opacity:0;transform:translate(-50%, -50%) translateY(-8px) scale(0.95)}100%{opacity:1;transform:translate(-50%, -50%) translateY(0) scale(1)}}.camera-selector-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid rgba(255, 255, 255, 0.1)}.camera-selector-header span{font-weight:500;color:#ffffff;font-size:13px;opacity:0.9}.close-selector{width:20px;height:20px;border:none;background:none;color:rgba(255, 255, 255, 0.7);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all 0.2s ease}.close-selector:hover{background:rgba(255, 255, 255, 0.1);color:#ffffff}.camera-list{padding:4px 0;max-height:240px;overflow-y:auto}.camera-option{width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;transition:all 0.2s ease;display:flex;justify-content:flex-start;align-items:center;gap:8px;color:rgba(255, 255, 255, 0.9)}.camera-option:hover{background:rgba(255, 255, 255, 0.08)}.camera-option.selected{background:rgba(255, 255, 255, 0.12);color:#ffffff}.camera-label{font-size:13px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:0;font-weight:400;display:flex;align-items:center;gap:6px}.camera-label .autofocus-icon{font-size:12px;color:#ffffff !important;opacity:0.8;flex-shrink:0}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9;flex-shrink:0}.device-info{padding:6px 12px;border-top:1px solid rgba(255, 255, 255, 0.1);background:rgba(255, 255, 255, 0.05)}.device-info small{color:rgba(255, 255, 255, 0.6);font-size:11px;text-transform:capitalize;font-weight:400}@media (max-width: 480px){.camera-controls{top:12px;right:12px;gap:6px}.camera-selector-button{height:36px;padding:0 12px;font-size:11px;border-radius:6px}.camera-selector-dropdown{right:12px;top:48px;min-width:240px;max-width:calc(100vw - 24px)}.camera-selector-header{padding:6px 10px}.camera-option{padding:6px 10px}.device-info{padding:4px 10px}}.watermark{position:absolute;bottom:12px;right:12px;z-index:15;pointer-events:none;opacity:0.7}.watermark img{height:24px;width:auto;filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.component-status{position:absolute;top:16px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);display:flex;align-items:center;gap:6px;padding:6px 10px;z-index:40;height:32px;width:fit-content;animation:slideInFromTop 0.3s ease-out}.status-spinner{width:16px;height:16px;border:1px solid rgba(255, 255, 255, 0.3);border-top:1px solid #ffffff;border-radius:50%;animation:statusSpin 1s linear infinite;flex-shrink:0}.status-content{display:flex;flex-direction:column;gap:1px}.status-message{color:#ffffff;font-size:12px;font-weight:500;margin:0}.status-description{color:rgba(255, 255, 255, 0.7);font-size:10px;line-height:1.2;margin:0}@keyframes statusSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@media (max-width: 480px){.component-status{top:12px;left:12px;padding:4px 8px;gap:4px;height:28px;border-radius:8px}.status-spinner{width:14px;height:14px}.status-message{font-size:11px}.status-description{font-size:9px}.guide-text{font-size:11px;padding:4px 8px;border-radius:8px}}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.85);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:30;border-radius:8px}.loading-spinner{width:50px;height:50px;border:3px solid rgba(255, 255, 255, 0.15);border-top:3px solid #28a745;border-radius:50%;animation:spin 1s ease-in-out infinite;margin-bottom:16px}.loading-text{color:#ffffff;font-size:14px;font-weight:500;text-align:center;opacity:0.9;margin-bottom:4px}.loading-description{color:rgba(255, 255, 255, 0.7);font-size:12px;text-align:center;opacity:0.8}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.performance-monitor{position:absolute;top:70px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromTop 0.3s ease-out;transition:all 0.3s ease}@keyframes slideInFromLeft{0%{opacity:0;transform:translateX(-20px) scale(0.95)}100%{opacity:1;transform:translateX(0) scale(1)}}.performance-expanded{padding:6px 10px}.metrics-row{display:flex;gap:8px;margin-bottom:4px}.metrics-row:last-child{margin-bottom:0}.metric-compact{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:50px}.metric-label{font-size:9px;color:rgba(255, 255, 255, 0.6);font-weight:500;text-transform:uppercase;letter-spacing:0.3px}.metric-value{font-size:10px;font-weight:600;font-family:'Monaco', 'Menlo', 'Consolas', monospace;padding:2px 4px;border-radius:3px;text-align:center;white-space:nowrap}.metric-value.good{color:#4ade80;background:rgba(74, 222, 128, 0.1);border:1px solid rgba(74, 222, 128, 0.2)}.metric-value.warning{color:#fbbf24;background:rgba(251, 191, 36, 0.1);border:1px solid rgba(251, 191, 36, 0.2)}.metric-value.danger{color:#f87171;background:rgba(248, 113, 113, 0.1);border:1px solid rgba(248, 113, 113, 0.2)}@media (max-width: 480px){.performance-monitor{top:60px;left:12px;width:fit-content}.performance-expanded{padding:4px 8px}.metrics-row{gap:6px;margin-bottom:3px}.metric-compact{min-width:45px;gap:1px}.metric-label{font-size:8px}.metric-value{font-size:9px;padding:1px 3px}}.quality-monitor{position:absolute;top:200px;left:16px;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(20px);border-radius:12px;border:1px solid rgba(255, 255, 255, 0.1);z-index:35;width:fit-content;animation:slideInFromLeft 0.3s ease-out;transition:all 0.3s ease}.quality-text{padding:6px 10px;font-size:11px;color:white;font-family:'Monaco', 'Menlo', 'Consolas', monospace;line-height:1.4}.quality-fail{color:#ff9999}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.metric-value.danger{animation:pulse 2s infinite}@media (max-width: 480px){.quality-monitor{top:160px;left:12px}.quality-text{padding:4px 8px;font-size:10px}}.manual-capture-section{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px}.manual-capture-button{pointer-events:auto;background:#fff;color:#333;border:none;border-radius:25px;padding:12px 24px;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.manual-capture-button:hover{background:#f8f9fa}.manual-capture-button:active{background:#e9ecef;transform:translateY(1px)}.manual-capture-button:disabled{cursor:not-allowed !important;transform:none !important;opacity:0.7 !important;transition:none !important}@media (max-width: 480px){.manual-capture-section{bottom:16px;max-width:280px}.manual-capture-button{padding:10px 20px;font-size:13px}.manual-capture-button:disabled{opacity:0.7 !important;cursor:not-allowed !important}}";
 
 const JaakStamps = class {
     constructor(hostRef) {
@@ -1145,6 +1255,10 @@ const JaakStamps = class {
     };
     backDocumentTimerRemaining = 0;
     showManualCaptureButton = false;
+    performanceDegradedMode = false; // Auto-switched to manual mode due to performance
+    showPerformanceMessage = false; // Show performance message temporarily
+    captureStateVersion = 0; // Triggers re-render when StateManager changes
+    processingButton = null; // Track which button is processing
     // Services
     serviceContainer;
     eventBus;
@@ -1163,12 +1277,12 @@ const JaakStamps = class {
     alignmentStartTime;
     alignmentTimer;
     backDocumentTimer;
+    orientationTimer;
     // Performance monitoring
     performanceMetrics = {
         fps: 0,
         inferenceTime: 0,
         memoryUsage: 0,
-        cpuUsage: 0,
         onnxLoadTime: 0,
         frameProcessingTime: 0,
         totalDetections: 0,
@@ -1187,18 +1301,29 @@ const JaakStamps = class {
     MIN_INFERENCE_INTERVAL = 50;
     performanceHistory = [];
     PERFORMANCE_HISTORY_SIZE = 10;
+    // Sistema simplificado de monitoreo de rendimiento
+    PERFORMANCE_THRESHOLD_MS = 2000; // Umbral único para todos los frames
+    SLOW_FRAMES_TO_TRIGGER = 2; // Cuántos frames lentos consecutivos antes de cambiar
+    slowFrameCount = 0; // Contador de frames consecutivos lentos
+    processedFramesCount = 0; // Contador total de frames procesados
+    hasAutoSwitchedToManual = false;
     // Canvas pool for optimized screenshot capture
     canvasPool = [];
     MAX_CANVAS_POOL_SIZE = 3;
     async componentDidLoad() {
-        this.updateStatus('Preparando capturador...', 'Configurando herramientas de captura', 'initializing');
-        await this.initializeServices();
-        this.updateStatus('Preparando funciones...', 'Configurando herramientas de trabajo', 'initializing');
-        await this.setupEventListeners();
-        this.updateStatus('Configurando cámara...', 'Detectando dispositivos disponibles', 'initializing');
-        await this.initializeComponent();
-        if (this.debug) {
-            this.initializePerformanceMonitor();
+        try {
+            this.updateStatus('Preparando capturador...', 'Configurando herramientas de captura', 'initializing');
+            await this.initializeServices();
+            this.updateStatus('Preparando funciones...', 'Configurando herramientas de trabajo', 'initializing');
+            await this.setupEventListeners();
+            this.updateStatus('Configurando cámara...', 'Detectando dispositivos disponibles', 'initializing');
+            await this.initializeComponent();
+            if (this.debug) {
+                this.initializePerformanceMonitor();
+            }
+        }
+        catch (error) {
+            this.updateStatus('Error de inicialización', error.message, 'error');
         }
     }
     async initializeServices() {
@@ -1219,14 +1344,8 @@ const JaakStamps = class {
         this.detectionService = this.serviceContainer.getDetectionService();
     }
     async setupEventListeners() {
-        this.eventBus.on('state-changed', (data) => {
-            this.handleStateChange(data);
-        });
-        this.eventBus.on('camera-changed', () => {
-            // Camera changed event
-        });
-        this.eventBus.on('error', () => {
-            // Handle service errors
+        this.eventBus.on('state-changed', () => {
+            this.handleStateChange();
         });
     }
     async initializeComponent() {
@@ -1262,7 +1381,7 @@ const JaakStamps = class {
         if (!window.ort) {
             this.updateStatus('Preparando herramientas...', 'Configurando funciones de captura', 'initializing');
             const script = document.createElement('script');
-            script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js';
+            script.src = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.0/dist/ort.min.js';
             document.head.appendChild(script);
             await new Promise((resolve) => {
                 script.onload = () => {
@@ -1333,7 +1452,8 @@ const JaakStamps = class {
             return false;
         }
     }
-    handleStateChange(data) {
+    handleStateChange() {
+        // Handle state changes from StateManager if needed
     }
     initializeResizeObserver() {
         if ('ResizeObserver' in window && this.detectionContainer) {
@@ -1342,6 +1462,18 @@ const JaakStamps = class {
             });
             resizeObserver.observe(this.detectionContainer.parentElement);
         }
+        // Handle mobile device orientation changes
+        window.addEventListener('orientationchange', () => {
+            // Clear any existing orientation timer
+            if (this.orientationTimer) {
+                clearTimeout(this.orientationTimer);
+            }
+            // Add delay to ensure video dimensions are updated after rotation
+            this.orientationTimer = window.setTimeout(() => {
+                this.handleResize();
+                this.orientationTimer = undefined;
+            }, 300);
+        });
     }
     handleResize() {
         if (this.detectionContainer) {
@@ -1350,10 +1482,17 @@ const JaakStamps = class {
             this.updateMaskDimensions(rect);
         }
     }
+    triggerRerender() {
+        this.captureStateVersion = this.captureStateVersion + 1;
+    }
     getGuideText(step) {
         if (step === 'completed') {
             return 'Proceso completado';
         }
+        // Check if we should show performance message
+        if (this.showPerformanceMessage && step === 'front') {
+            return 'Modo manual activado por rendimiento. Use el botón para capturar.';
+        }
         if (step === 'front') {
             // Para el frente, si el detector manual está activo, mostrar instrucciones de captura manual
             if (this.showManualCaptureButton) {
@@ -1511,8 +1650,14 @@ const JaakStamps = class {
         }
     }
     async skipBackCapture() {
+        console.log('🟡 Botón clicked: Saltar reverso');
+        // Set processing state immediately
+        this.processingButton = 'skip-back';
+        // Add small delay to show spinner
+        await new Promise(resolve => setTimeout(resolve, 100));
         const readyCheck = this.isComponentReady();
         if (!readyCheck.ready) {
+            this.processingButton = null;
             return { success: false, error: readyCheck.message };
         }
         try {
@@ -1529,6 +1674,10 @@ const JaakStamps = class {
         catch (error) {
             return { success: false, error: error.message };
         }
+        finally {
+            // Always clear processing state when done
+            this.processingButton = null;
+        }
     }
     async getStatus() {
         const readyCheck = this.isComponentReady();
@@ -1583,9 +1732,21 @@ const JaakStamps = class {
             if (this.stateManager) {
                 this.stateManager.updateCaptureState({ isLoading: true });
             }
-            await this.detectionService.loadModel();
+            try {
+                await this.detectionService.loadModel();
+            }
+            catch (modelError) {
+                this.switchToManualModeWithError('Error al cargar modelo de detección');
+                throw modelError;
+            }
             this.updateStatus('Optimizando detección...', 'Configurando reconocimiento de documentos', 'loading');
-            await this.detectionService.loadClassificationModel();
+            try {
+                await this.detectionService.loadClassificationModel();
+            }
+            catch (classificationError) {
+                this.switchToManualModeWithError('Error al cargar modelo de clasificación');
+                throw classificationError;
+            }
             const loadEndTime = performance.now();
             const loadTime = loadEndTime - loadStartTime;
             // Record ONNX load time
@@ -1694,17 +1855,63 @@ const JaakStamps = class {
         // Always allow getting capture delay, even during initialization
         return this.captureDelay;
     }
+    // Memory and device capability detection
+    checkDeviceCapabilities() {
+        const deviceMemory = navigator.deviceMemory;
+        // Siempre intentar usar ML, independientemente del dispositivo
+        // Las restricciones anteriores no eran confiables
+        return {
+            canUseML: true,
+            reason: 'Dispositivo compatible con detección automática.',
+            memoryMB: deviceMemory ? deviceMemory * 1024 : null
+        };
+    }
     // DETECTION METHODS
     async startDetection() {
         try {
+            // Verificar capacidades del dispositivo antes de cargar modelos
+            const capabilities = this.checkDeviceCapabilities();
+            // Si el dispositivo no puede usar ML o tenemos problemas de memoria, usar modo manual
+            if (!capabilities.canUseML && this.useDocumentDetector) {
+                this.switchToManualModeWithWarning(capabilities.reason);
+                return;
+            }
             // Paso 1: Verificar y cargar modelos si es necesario
             if (!this.detectionService.isModelLoaded()) {
                 const loadStartTime = performance.now();
                 this.updateStatus('Preparando reconocimiento...', 'Configurando detección de documentos', 'loading');
                 this.stateManager.updateCaptureState({ isLoading: true });
-                await this.detectionService.loadModel();
+                try {
+                    await this.detectionService.loadModel();
+                }
+                catch (modelError) {
+                    // Si es un error de memoria, cambiar a modo manual con mensaje específico
+                    if (modelError.message.includes('Out of memory') || modelError.message.includes('no available backend')) {
+                        const memoryInfo = navigator.deviceMemory ? `(${navigator.deviceMemory}GB disponible)` : '';
+                        this.switchToManualModeWithWarning(`Memoria insuficiente para detección automática ${memoryInfo}. Modo manual activado - funciona igual de bien!`);
+                        return;
+                    }
+                    else {
+                        this.switchToManualModeWithError('Error al cargar modelo de detección');
+                        throw modelError;
+                    }
+                }
                 this.updateStatus('Optimizando detección...', 'Configurando reconocimiento de documentos', 'loading');
-                await this.detectionService.loadClassificationModel();
+                try {
+                    await this.detectionService.loadClassificationModel();
+                }
+                catch (classificationError) {
+                    // Si es un error de memoria, cambiar a modo manual con mensaje específico
+                    if (classificationError.message.includes('Out of memory') || classificationError.message.includes('no available backend')) {
+                        const memoryInfo = navigator.deviceMemory ? `(${navigator.deviceMemory}GB disponible)` : '';
+                        this.switchToManualModeWithWarning(`Memoria insuficiente para clasificación automática ${memoryInfo}. Modo manual activado para optimizar rendimiento.`);
+                        return;
+                    }
+                    else {
+                        this.switchToManualModeWithError('Error al cargar modelo de clasificación');
+                        throw classificationError;
+                    }
+                }
                 const loadEndTime = performance.now();
                 const loadTime = loadEndTime - loadStartTime;
                 // Record ONNX load time
@@ -1714,19 +1921,40 @@ const JaakStamps = class {
             }
             // Paso 2: Detectar y configurar dispositivos
             this.updateStatus('Configurando cámara...', 'Buscando dispositivos disponibles', 'loading');
-            await this.cameraService.enumerateDevices();
-            await this.updateCameraInfoWithAutofocus();
+            try {
+                await this.cameraService.enumerateDevices();
+            }
+            catch (enumerateError) {
+                throw new Error(`Error al enumerar dispositivos: ${enumerateError.message}`);
+            }
+            try {
+                await this.updateCameraInfoWithAutofocus();
+            }
+            catch (cameraInfoError) {
+                throw new Error(`Error al actualizar información de cámara: ${cameraInfoError.message}`);
+            }
             // Paso 3: Configurar cámara seleccionada
             this.updateStatus('Ajustando cámara...', 'Configurando calidad de imagen', 'loading');
-            const stream = await this.cameraService.setupCamera();
-            // Paso 4: Inicializar video y ocultar estado inmediatamente
+            let stream;
+            try {
+                stream = await this.cameraService.setupCamera();
+            }
+            catch (setupError) {
+                throw new Error(`Error al configurar cámara: ${setupError.message}`);
+            }
+            // Paso 4: Inicializar video y mostrar estado de análisis inicial
             if (this.useDocumentDetector) {
-                this.updateStatus('Captura activa', 'Buscando documento en el marco de captura', 'active');
+                this.updateStatus('Analizando estabilidad...', 'Evaluando rendimiento del sistema', 'loading');
             }
             else {
                 this.updateStatus('Captura activa', 'Posicione su documento y use el botón para capturar', 'active');
             }
-            await this.initializeVideoStream(stream);
+            try {
+                await this.initializeVideoStream(stream);
+            }
+            catch (videoError) {
+                throw new Error(`Error al inicializar video: ${videoError.message}`);
+            }
             // Paso 5: Calibrar máscara
             if (this.detectionContainer) {
                 const container = this.detectionContainer.parentElement;
@@ -1757,6 +1985,12 @@ const JaakStamps = class {
                 this.videoRef.onloadedmetadata = async () => {
                     await this.videoRef.play();
                     this.stateManager.updateCaptureState({ isVideoActive: true });
+                    // Recalculate mask dimensions when new camera stream loads
+                    if (this.detectionContainer) {
+                        const container = this.detectionContainer.parentElement;
+                        const rect = container.getBoundingClientRect();
+                        this.updateMaskDimensions(rect);
+                    }
                     resolve();
                 };
             });
@@ -1771,8 +2005,8 @@ const JaakStamps = class {
             const captureState = this.stateManager.getCaptureState();
             if (!this.videoRef || !this.detectionContainer || !this.detectionService.isModelLoaded())
                 return;
-            // Show manual capture button when document detector is disabled
-            if (!this.useDocumentDetector) {
+            // Show manual capture button when document detector is disabled or performance is degraded
+            if (!this.useDocumentDetector || this.performanceDegradedMode) {
                 this.showManualCaptureButton = true;
                 // Continue the loop for UI updates but skip detection logic
                 if (captureState.step !== 'completed') {
@@ -1780,7 +2014,7 @@ const JaakStamps = class {
                 }
                 return;
             }
-            else {
+            else if (!this.performanceDegradedMode) {
                 this.showManualCaptureButton = false;
             }
             if (captureState.isDetectionPaused) {
@@ -1810,10 +2044,27 @@ const JaakStamps = class {
             this.lastInferenceTime = currentTime;
             // Measure preprocessing and inference time
             const inferenceStartTime = performance.now();
-            const inputTensor = this.detectionService.preprocess(this.videoRef);
-            // Standard detection without quality validation
-            const detections = await this.detectionService.runInference(inputTensor);
-            const inferenceTime = performance.now() - inferenceStartTime;
+            let inputTensor;
+            let detections;
+            let inferenceTime;
+            try {
+                inputTensor = this.detectionService.preprocess(this.videoRef);
+            }
+            catch (preprocessError) {
+                this.switchToManualModeWithError('Error al procesar imagen');
+                return;
+            }
+            try {
+                // Standard detection without timeout (timeout is handled by frame counting)
+                detections = await this.detectionService.runInference(inputTensor);
+                inferenceTime = performance.now() - inferenceStartTime;
+            }
+            catch (inferenceError) {
+                this.switchToManualModeWithError('Error en detección automática');
+                return;
+            }
+            // Increment frame count
+            this.processedFramesCount++;
             // Record ONNX performance metrics
             if (this.debug) {
                 this.recordOnnxPerformance(0, inferenceTime);
@@ -1852,9 +2103,30 @@ const JaakStamps = class {
             }
             this.updateMaskColor(detections);
             // Record frame processing metrics
+            const frameEndTime = performance.now();
+            const totalFrameTime = frameEndTime - frameStartTime;
+            // Sistema simplificado: Verificar rendimiento de cada frame (solo si no se ha cambiado a manual)
+            if (this.useDocumentDetector && !this.hasAutoSwitchedToManual) {
+                // Verificar si el frame es lento
+                if (totalFrameTime >= this.PERFORMANCE_THRESHOLD_MS) {
+                    this.slowFrameCount++;
+                    // Si tenemos suficientes frames lentos consecutivos, cambiar a manual
+                    if (this.slowFrameCount >= this.SLOW_FRAMES_TO_TRIGGER) {
+                        this.switchToManualMode();
+                    }
+                }
+                else {
+                    // Frame rápido, reiniciar contador
+                    if (this.slowFrameCount > 0) {
+                        this.slowFrameCount = 0;
+                    }
+                }
+                // Cambiar mensaje de estado después de analizar los primeros 2 frames
+                if (this.processedFramesCount === 2) {
+                    this.updateStatus('Captura activa', 'Buscando documento en el marco de captura', 'active');
+                }
+            }
             if (this.debug) {
-                const frameEndTime = performance.now();
-                const totalFrameTime = frameEndTime - frameStartTime;
                 this.recordFrameProcessing(totalFrameTime, detections.length);
             }
             // Continue detection loop
@@ -1890,6 +2162,12 @@ const JaakStamps = class {
             clearTimeout(this.alignmentTimer);
             this.alignmentTimer = undefined;
         }
+        if (this.orientationTimer) {
+            clearTimeout(this.orientationTimer);
+            this.orientationTimer = undefined;
+        }
+        // Liberar recursos de ONNX al limpiar el componente
+        this.releaseOnnxResources();
         if (this.performanceUpdateInterval) {
             clearInterval(this.performanceUpdateInterval);
             this.performanceUpdateInterval = undefined;
@@ -1910,7 +2188,7 @@ const JaakStamps = class {
             isCapturing: false
         };
         const cameraInfo = this.cameraInfoWithAutofocus;
-        return (h("div", { key: 'e0b32b1b41b58e3a58b552199384080e8f2c069b', class: "detector-container" }, h("div", { key: '03c77af311ff12d936994d629d58550cbaae190c', class: "video-container" }, h("video", { key: '94f15b34f34367a10d17816a31cd147adb57bc90', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '982be192792dfaf644eb173bfee9b26ebd229288', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index) => (h("div", { key: index, class: "detection-box", style: {
+        return (h("div", { key: 'f9cbca2fd6b8548a29ace7fcb972b53f402f61af', class: "detector-container" }, h("div", { key: '4f3cac734eb6bfd44a8de644eadca17e7893e11a', class: "video-container" }, h("video", { key: '5e15a38c989a72d5274281272d41ba064447ca6f', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '38c8ad8b691db60e9b5a2a8b641fe6febbeacfca', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index) => (h("div", { key: index, class: "detection-box", style: {
                 position: 'absolute',
                 left: `${box.x}px`,
                 top: `${box.y}px`,
@@ -1919,9 +2197,9 @@ const JaakStamps = class {
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (h("div", { key: 'f5212ff70db65d2b836a3ac456a1701701630660', class: "overlay-mask" }, h("div", { key: '5080217f4962c2c7152def39cc978ba1c40a3a1c', class: "card-outline" }, h("div", { key: 'd37f1ca8723d79b10d1c6a3afaf54e2f2657ae79', class: "side side-top" }), h("div", { key: 'c5bb4f7d646a991f43598688ffa909c04697bb06', class: "side side-right" }), h("div", { key: '4a5040b4a236367dcdf72f4e72d497b8b6dee6c0', class: "side side-bottom" }), h("div", { key: 'c74ecef56eee8e92cd9491d693fa89a6c01bdbbd', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '2a2932b0c03835193ebf86ddb5f13173b1dba367', class: "guide-text" }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '41fcf2d79106d3ed928fc2842cb6a6725ba4d4f6', class: "back-capture-section" }, h("div", { key: '98dbe1bbe454bad42c3e155247f25a9151aaf1f9', class: "back-capture-buttons" }, !this.useDocumentDetector && (h("button", { key: '01693bc0d6915a4d02f318268020dfbcf3a70b94', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: captureState.isCapturing }, captureState.isCapturing ? 'Capturando...' : 'Capturar Reverso')), h("button", { key: '0a4ba55cbbea867b936a83a16a622a3c36a225f9', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
+            } })))), this.isMaskReady && (h("div", { key: 'c56fde56b7a86a4e8a4cf558745291ea5cde12fd', class: "overlay-mask" }, h("div", { key: '04ed3f01f271dc84eed594cb4b60c2453645bd41', class: "card-outline" }, h("div", { key: '648bd423a5e886d4768115237de5896c7223b30b', class: "side side-top" }), h("div", { key: 'b8878059493ca61961b9b3c82ecc18b50b79ac85', class: "side side-right" }), h("div", { key: '09e5ad64ff33dbd5c112bf52b71e14409ab6aa65', class: "side side-bottom" }), h("div", { key: 'b8ba3d83c9bc1b4a0da859d7ed4b9a15eaddcc2a', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '3279701a240f77ac96e68a34ad95c099340c9a6a', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '2adf96d0a57e482372fd9586229dac2301b64fd4', class: "back-capture-section" }, h("div", { key: '305a147c9cfee854c60ac946a48a1d21b2792725', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode || this.showManualCaptureButton) && (h("button", { key: '43270a0647f39307229c540dd5130fb58b1ff4fb', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (h("span", { key: 'eb4666603774564eef95a120ac13faeb9e10c8b4', class: "button-spinner" })), "Capturar Reverso")), h("button", { key: 'cac667d9548ae2314ad5a677c5ed90f25184f728', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (h("span", { key: '0af7aa4106ce189ae2d79bec78ede01abe25b1e7', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
             ? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
-            : 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: '1db208a53dea37211bdd88254e575142b7abf91f', class: "camera-controls" }, h("button", { key: '90755839358f997c3ce2f4c36a8d17d39ea5f8ad', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: 'ef7889ab82f9eaabcabec3e3dc3ebb7850818dd4', class: "camera-selector-dropdown" }, h("div", { key: 'e28fb005316a742318be3cf8582f520392b71bba', class: "camera-selector-header" }, h("span", { key: '97338030b1aedb50c5f5a588ea03c0f19bcb0ddd' }, "Seleccionar C\u00E1mara"), h("button", { key: '1537c907dfab17c232a256f9fc9210cbd0125cc6', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '509178119e6eed5fe0a6ea287904a53bd9fbecbc', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`, camera.hasAutofocus && (h("span", { class: "autofocus-icon", title: "Autofoco disponible" }, "\u29BF"))), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '485f7e1a97c43ed280a106bde3c6ee910625025c', class: "device-info" }, h("small", { key: 'd76edba943f4e06c14024923496555fa1fe6d845' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'c5184dd93aa41cff61b88ea2046b481efc87c1f2', class: "manual-capture-section" }, h("button", { key: '6e45d9a0fec60469eb926ff353cb1a440d59f5fe', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: captureState.isCapturing }, captureState.isCapturing ? 'Capturando...' : 'Capturar Frente'))))), captureState.isCapturing && (h("div", { key: '9e296a942ba51cc1fd152e76ae406620c84ed721', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '517db50f7273788d94d5e6db6c40f65e00e18784', class: "flip-animation" }, h("div", { key: 'fbf6a26c4cc0539bd16b45899d19984af3449610', class: "id-card-icon" }), h("div", { key: 'fb3a201864d04531a078074458aa6e7f6580d565', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '10c694e233d26523d538ff0d2edbf6dcfb8e37c8', class: "success-animation" }, h("div", { key: '87e545650825ab805e887667281ecdf8bdb34c45', class: "check-icon" }), h("div", { key: '359da71f391d68e9437b749b949ee90685b96b3f', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '7c5533bb875eb3d9cdcc6cfdfc20e4d5bd98d103', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'f32df46ab83279387de606eadf53cd4a4009f449', class: "status-spinner" })), h("div", { key: 'dd640de5a3b64f5f99363318e2fc70e32ccbc7db', class: "status-content" }, h("div", { key: '618c0ab9cb0a24b0af3f6946052beab0d660fe6d', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'e52c2a4945c7f5a190a446ac588aa1668c21f26d', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '61cea10bc3438fb74aa176d71c4238b070cb0f09', class: "performance-monitor" }, h("div", { key: '44f6b1accb56d99a236b22c0769f870638d9c768', class: "performance-expanded" }, h("div", { key: '6febc85e319752b0aebc0a4e4050ea6d597375a7', class: "metrics-row" }, h("div", { key: '96b81895ad3cd742c96308ed53a2126af76eb619', class: "metric-compact" }, h("span", { key: '774a11c6fed6a87db7673b018b3cdc378c5252ef', class: "metric-label" }, "FPS"), h("span", { key: 'cb866dcbea661e5f715b82c4dd760f786fd5bb2a', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'a935aaadb83ea400bfaa984d1d845bdfd87becc8', class: "metric-compact" }, h("span", { key: 'ffacaa2cb7838403a297145b70586e255cc845c7', class: "metric-label" }, "MEM"), h("span", { key: 'a1d7a7abec97dc0544d50b11b372f699f750b76f', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'bb3d156a46569a8c290bc518c42ec7957bc5b94e', class: "metrics-row" }, h("div", { key: '4cadd8f845e4c12120ed549e4a73e02c6cbd9257', class: "metric-compact" }, h("span", { key: '1fc5661222f495b79fd7eb126e04f52eecab6fb3', class: "metric-label" }, "INF"), h("span", { key: 'eca1f59d1c41ab99158eec81592bc7150bfeabe1', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: 'f708e2757adcb03e633111d96bd6786fb6b80ea6', class: "metric-compact" }, h("span", { key: 'a13099ded64180996d6f65bf215483ba83daccbc', class: "metric-label" }, "FRAME"), h("span", { key: '2765cd1f7c1a49df9de64639cc1b777c79f89f4c', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '13aaf85a1b4b66294c4204f02d956b64665aa766', class: "metrics-row" }, h("div", { key: '40012f3f646d70c535a606ebbe581a2fe6fd2e50', class: "metric-compact" }, h("span", { key: '03f8b17746fe404485820d06a50173678db2fd25', class: "metric-label" }, "DET"), h("span", { key: 'c4f87430f142355054d9361330d6a5d508974b70', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: 'cf366a41d7f7cda6046c32cc7c514eb7b46b05d1', class: "metric-compact" }, h("span", { key: '925e7de15b96ba4dbbcdbf8a9f0e3173bae49573', class: "metric-label" }, "RATE"), h("span", { key: '9701e60c7793f2c205f3c9ffd254b6a115b8a68c', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '636aeb9b2b8dd992d8a28a8db44b213e12514096', class: "watermark" }, h("img", { key: '0407b550d962a6113e05ad75e25a1a1bbd76d9ce', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            : 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: 'de6e5c4fad4d4d996b894457c9af52bc71e533fb', class: "camera-controls" }, h("button", { key: 'cfddcf2420d5f5923a6b02ca446bbe1b8e9fc5e4', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (h("div", { key: '5fb73f958b9a5a6f9242032c4530b0bdab84f6c5', class: "camera-selector-dropdown" }, h("div", { key: '8ee2d26b1001e571e7b6c326e927926fa08287fd', class: "camera-selector-header" }, h("span", { key: '78350b0fb1bd933f7c8c59d8dab0b7122ffbe363' }, "Seleccionar C\u00E1mara"), h("button", { key: 'bb750e0ddd5a1ee5ff96bd57805a7f90b8821e9f', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: 'd0f6343cf1b7367f3da33ec8cf64891109d923b8', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`, camera.hasAutofocus && (h("span", { class: "autofocus-icon", title: "Autofoco disponible" }, "\u29BF"))), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: 'c9642fbfb0acea766d3f0542f4cc9f17f4af4d7b', class: "device-info" }, h("small", { key: 'b6e9507ff7addf011f339f6c22a88a96b40db68a' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '04ae9262409284782850b90945eb7038673e2097', class: "manual-capture-section" }, h("button", { key: '27c315e503ccba468b89ebd58d6b70f40ddd06ba', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (h("span", { key: '8f2dcd2df9a218b37eb0b8204a8724362cfeaa53', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (h("div", { key: '6fd6fe1d0213b01c8119a67fb8108f73227feee1', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: 'fba3816b48b99ca64510ecbefc0d41431569c9ae', class: "flip-animation" }, h("div", { key: 'beea1c8245b5d81f1008efc6d1b079a61c821e7f', class: "id-card-icon" }), h("div", { key: 'f0fbc34f619a653e2c0ade764ca99e7aa582d157', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: 'e4a0e6d31112e3a50024d1d0430b4ad997049fe7', class: "success-animation" }, h("div", { key: '5dd3f781f55630bc904c81207548ae35bc79b452', class: "check-icon" }), h("div", { key: 'a10ebc557582325091efb0abd12d62b27a43b98c', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '975865955dee1803b5215ecf049701c98b324855', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: '84f6f67202e26ce80f7fc5d5f321e23b5bc55c57', class: "status-spinner" })), h("div", { key: 'a1ae56ed156e8feb279a1bf160f749c5d0b5ce45', class: "status-content" }, h("div", { key: 'd62932554cea257ce19763df26e0ba702e50eeca', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'c5506fa12dd0d37d26dc26c9f2381c843330451f', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '2097eda63185f336f7319014fae2ef6db1e41761', class: "performance-monitor" }, h("div", { key: 'd611c494c6b1a5930ef64aebdcba41e5d94c9ee6', class: "performance-expanded" }, h("div", { key: '800d46831e7b9bec260d9c5e67ea1a3eb9c2933e', class: "metrics-row" }, h("div", { key: 'dd0db1faa9050d98e71da4b5cd26a4a484c37c64', class: "metric-compact" }, h("span", { key: 'f0e6ea61a35ddb2ae5c2a6aff8c255a02c5c1219', class: "metric-label" }, "FPS"), h("span", { key: 'cbf4df4d142f6f01e45f566a8ede8fbbf29ad673', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: '83861ad31fa46c8199a5583e4b3f8eefd44bacd6', class: "metric-compact" }, h("span", { key: '41b8de4cda47959dfc9df393e95fdadde534dd21', class: "metric-label" }, "MEM"), h("span", { key: 'b268f13cc78066e240ed158f1443113a94827aff', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: '9f9a9d0690906b186492af23b900c5fa0f5cff89', class: "metrics-row" }, h("div", { key: '84fa6e453dc36e4a74e8b573447b17230766229e', class: "metric-compact" }, h("span", { key: 'f17d52899090c89f532d74c552dd8c5338fc2d83', class: "metric-label" }, "INF"), h("span", { key: '2beca0d7ce55ed574f6b01efc086c5846983e024', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '981e300cf076e81bfe946974f6cffd63619eacde', class: "metric-compact" }, h("span", { key: '3dfb0c996a69eb87b0f711322675cad69c471146', class: "metric-label" }, "FRAME"), h("span", { key: '3ae2ac6e90cda77f23e559f3197c3b761f9bdc40', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '2c51216838d87728d9d7764e5ba8a50fa02eb493', class: "metrics-row" }, h("div", { key: 'eda810ffb80ec38ab84583f59b26706f90a50fc9', class: "metric-compact" }, h("span", { key: '978ba9c0c67d6da6b29b3535af33a314bab9276a', class: "metric-label" }, "DET"), h("span", { key: '3e5e169fd4a3906283d8f918b5bbc7c5df6ccd0f', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: 'b4b915c745e35c09470a4dc5edfc112d32cfb8b6', class: "metric-compact" }, h("span", { key: '3e2a7b88a4446813c955efb0dfa9e2958e8e1448', class: "metric-label" }, "RATE"), h("span", { key: 'f4f073f7ee622167a241c6a1c535ef580c13d9ab', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '76c556e92f6d7980539f1a30efe8751f665164fb', class: "watermark" }, h("img", { key: 'af23e115d6b4e92a72e55d6d98fde0e4b1d09e9b', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -2037,9 +2315,24 @@ const JaakStamps = class {
         }
     }
     async takeManualScreenshot() {
-        if (!this.videoRef)
+        console.log('🔵 Botón clicked: Capturar (Frente/Reverso)');
+        // Set processing state immediately
+        const captureState = this.stateManager?.getCaptureState();
+        if (captureState?.step === 'front') {
+            this.processingButton = 'capture-front';
+        }
+        else if (captureState?.step === 'back') {
+            this.processingButton = 'capture-back';
+        }
+        console.log('🔵 processingButton set to:', this.processingButton);
+        // Add small delay to show spinner
+        await new Promise(resolve => setTimeout(resolve, 100));
+        if (!this.videoRef) {
+            this.processingButton = null;
             return;
+        }
         // When using manual capture, use mask coordinates for cropping
+        // Note: processingButton will be cleared inside takeScreenshotWithMaskCoordinates
         await this.takeScreenshotWithMaskCoordinates();
     }
     async takeScreenshotWithMaskCoordinates() {
@@ -2103,18 +2396,25 @@ const JaakStamps = class {
         if (captureState.step === 'front') {
             this.stateManager.setCapturedImages({
                 front: {
-                    fullFrame: captureCanvas.toDataURL('image/png'),
-                    cropped: croppedCanvas.toDataURL('image/png')
+                    fullFrame: captureCanvas.toDataURL('image/jpeg'),
+                    cropped: croppedCanvas.toDataURL('image/jpeg')
                 }
             });
             // Check if document classification is enabled (independent of detector)
             if (this.useDocumentClassification) {
-                const classification = await this.detectionService.classifyDocument(croppedCanvas);
-                if (classification && classification.class === 'passport') {
-                    this.completeProcess(true);
-                    this.returnCanvasToPool(captureCanvas);
-                    this.returnCanvasToPool(croppedCanvas);
-                    return;
+                try {
+                    const classification = await this.detectionService.classifyDocument(croppedCanvas);
+                    if (classification && classification.class === 'passport') {
+                        this.completeProcess(true);
+                        this.returnCanvasToPool(captureCanvas);
+                        this.returnCanvasToPool(croppedCanvas);
+                        // Clear processing button when passport is detected
+                        this.processingButton = null;
+                        return;
+                    }
+                }
+                catch (classifyError) {
+                    // No cambiar a manual aquí, solo registrar el error y continuar
                 }
             }
             this.stateManager.updateCaptureState({
@@ -2122,22 +2422,28 @@ const JaakStamps = class {
                 isDetectionPaused: true,
                 showFlipAnimation: true
             });
+            this.triggerRerender();
             setTimeout(() => {
                 this.stateManager.updateCaptureState({
                     showFlipAnimation: false,
                     isDetectionPaused: false
                 });
+                this.triggerRerender();
                 this.startBackDocumentTimer();
+                // Clear processing button after animation completes
+                this.processingButton = null;
             }, 3000);
         }
         else if (captureState.step === 'back') {
             this.stateManager.setCapturedImages({
                 back: {
-                    fullFrame: captureCanvas.toDataURL('image/png'),
-                    cropped: croppedCanvas.toDataURL('image/png')
+                    fullFrame: captureCanvas.toDataURL('image/jpeg'),
+                    cropped: croppedCanvas.toDataURL('image/jpeg')
                 }
             });
             this.completeProcess(false);
+            // Clear processing button after back capture completes
+            this.processingButton = null;
         }
         // Return canvases to pool after use
         this.returnCanvasToPool(captureCanvas);
@@ -2170,16 +2476,21 @@ const JaakStamps = class {
         if (captureState.step === 'front') {
             this.stateManager.setCapturedImages({
                 front: {
-                    fullFrame: captureCanvas.toDataURL('image/png'),
-                    cropped: croppedCanvas.toDataURL('image/png')
+                    fullFrame: captureCanvas.toDataURL('image/jpeg'),
+                    cropped: croppedCanvas.toDataURL('image/jpeg')
                 }
             });
             // Check if document classification is enabled
             if (this.useDocumentClassification) {
-                const classification = await this.detectionService.classifyDocument(croppedCanvas);
-                if (classification && classification.class === 'passport') {
-                    this.completeProcess(true);
-                    return;
+                try {
+                    const classification = await this.detectionService.classifyDocument(croppedCanvas);
+                    if (classification && classification.class === 'passport') {
+                        this.completeProcess(true);
+                        return;
+                    }
+                }
+                catch (classifyError) {
+                    // No cambiar a manual aquí, solo registrar el error y continuar
                 }
             }
             this.stateManager.updateCaptureState({
@@ -2198,8 +2509,8 @@ const JaakStamps = class {
         else if (captureState.step === 'back') {
             this.stateManager.setCapturedImages({
                 back: {
-                    fullFrame: captureCanvas.toDataURL('image/png'),
-                    cropped: croppedCanvas.toDataURL('image/png')
+                    fullFrame: captureCanvas.toDataURL('image/jpeg'),
+                    cropped: croppedCanvas.toDataURL('image/jpeg')
                 }
             });
             this.completeProcess(false);
@@ -2216,6 +2527,138 @@ const JaakStamps = class {
             cardOutline?.classList.remove('capturing');
         }, 600);
     }
+    // Método simplificado para cambio a modo manual
+    switchToManualMode() {
+        // Only switch if detector is enabled and not already switched
+        if (!this.useDocumentDetector || this.hasAutoSwitchedToManual) {
+            return;
+        }
+        // Detener todo el monitoreo de performance
+        this.stopPerformanceMonitoring();
+        // Liberar recursos de ONNX
+        this.releaseOnnxResources();
+        // Resetear máscara a blanco y limpiar detecciones
+        this.resetMaskToWhite();
+        this.detectionBoxes = [];
+        this.hasAutoSwitchedToManual = true;
+        this.performanceDegradedMode = true;
+        this.showManualCaptureButton = true;
+        this.showPerformanceMessage = true;
+        // Hide performance message after 5 seconds
+        setTimeout(() => {
+            this.showPerformanceMessage = false;
+        }, 5000);
+    }
+    // Método para cambiar a modo manual por errores de ONNX
+    switchToManualModeWithWarning(warningMessage) {
+        // Solo cambiar si el detector está habilitado y no se ha cambiado ya
+        if (!this.useDocumentDetector || this.hasAutoSwitchedToManual) {
+            return;
+        }
+        // No necesitamos liberar recursos ONNX porque no se han cargado aún
+        // Resetear máscara a blanco y limpiar detecciones
+        this.resetMaskToWhite();
+        this.detectionBoxes = [];
+        // Cambiar a modo manual
+        this.hasAutoSwitchedToManual = true;
+        this.performanceDegradedMode = true;
+        this.showManualCaptureButton = true;
+        this.useDocumentDetector = false; // Desactivar detector automático
+        // Actualizar el estado con mensaje informativo (no error)
+        this.updateStatus('Modo manual activado', warningMessage, 'active');
+        // Continuar con la configuración de cámara
+        this.continueWithCameraSetup();
+    }
+    async continueWithCameraSetup() {
+        try {
+            // Paso 2: Detectar y configurar dispositivos
+            this.updateStatus('Configurando cámara...', 'Buscando dispositivos disponibles', 'loading');
+            try {
+                await this.cameraService.enumerateDevices();
+            }
+            catch (enumerateError) {
+                throw new Error(`Error al enumerar dispositivos: ${enumerateError.message}`);
+            }
+            try {
+                await this.updateCameraInfoWithAutofocus();
+            }
+            catch (cameraInfoError) {
+                throw new Error(`Error al actualizar información de cámara: ${cameraInfoError.message}`);
+            }
+            // Paso 3: Configurar cámara seleccionada
+            this.updateStatus('Ajustando cámara...', 'Configurando calidad de imagen', 'loading');
+            let stream;
+            try {
+                stream = await this.cameraService.setupCamera();
+            }
+            catch (setupError) {
+                throw new Error(`Error al configurar cámara: ${setupError.message}`);
+            }
+            // Paso 4: Inicializar video
+            this.updateStatus('Captura manual', 'Posicione su documento y use el botón para capturar', 'active');
+            try {
+                await this.initializeVideoStream(stream);
+            }
+            catch (videoError) {
+                throw new Error(`Error al inicializar video: ${videoError.message}`);
+            }
+            // Paso 5: Calibrar máscara
+            if (this.detectionContainer) {
+                const container = this.detectionContainer.parentElement;
+                const rect = container.getBoundingClientRect();
+                this.updateMaskDimensions(rect);
+            }
+            // Finalizar
+            this.startTime = Date.now();
+            this.stateManager.updateCaptureState({ isLoading: false });
+            // Mostrar botón manual (ya debe estar habilitado)
+            this.showManualCaptureButton = true;
+        }
+        catch (error) {
+            this.updateStatus('Error de cámara', error.message, 'error');
+            throw error;
+        }
+    }
+    switchToManualModeWithError(errorMessage) {
+        // Solo cambiar si el detector está habilitado y no se ha cambiado ya
+        if (!this.useDocumentDetector || this.hasAutoSwitchedToManual) {
+            return;
+        }
+        // Liberar recursos de ONNX inmediatamente
+        this.releaseOnnxResources();
+        // Resetear máscara a blanco y limpiar detecciones
+        this.resetMaskToWhite();
+        this.detectionBoxes = [];
+        // Cambiar a modo manual
+        this.hasAutoSwitchedToManual = true;
+        this.performanceDegradedMode = true;
+        this.showManualCaptureButton = true;
+        this.useDocumentDetector = false; // Desactivar detector automático
+        // Actualizar el estado con mensaje de error
+        this.updateStatus('Modo manual activado', errorMessage, 'error');
+        // Continuar con la configuración de cámara para mostrar el video
+        this.continueWithCameraSetup().catch(() => {
+            // Si falla la configuración de cámara, mantener el mensaje de error pero cambiar el estado
+            setTimeout(() => {
+                this.updateStatus('Captura manual', 'Use el botón para capturar', 'ready');
+            }, 5000);
+        });
+    }
+    stopPerformanceMonitoring() {
+        // Nota: No necesitamos limpiar más variables porque ya no se usarán
+        // El sistema automáticamente saltará la lógica de performance una vez que hasAutoSwitchedToManual = true
+    }
+    // Método para liberar recursos de ONNX cuando se cambia a modo manual
+    releaseOnnxResources() {
+        try {
+            // Liberar recursos del servicio de detección
+            if (this.detectionService) {
+                this.detectionService.cleanup();
+            }
+        }
+        catch (error) {
+        }
+    }
     completeProcess(skippedBack = false) {
         this.stateManager.updateCaptureState({
             step: 'completed',
@@ -2286,6 +2729,12 @@ const JaakStamps = class {
         try {
             // Close the selector immediately when user selects a camera
             this.showCameraSelector = false;
+            // Check if user selected the same camera that's already active
+            const currentCameraId = this.cameraService.getSelectedCameraId();
+            if (currentCameraId === cameraId) {
+                // Same camera selected, just close the selector without switching
+                return;
+            }
             this.isSwitchingCamera = true;
             // Stop current video stream
             if (this.videoStream) {
@@ -2329,6 +2778,13 @@ const JaakStamps = class {
         this.detectionBoxes = [];
         this.alignmentStartTime = undefined;
         this.hasDocumentDetected = false;
+        // Reset sistema simplificado
+        this.processedFramesCount = 0;
+        this.slowFrameCount = 0;
+        // Reset performance degradation state
+        this.hasAutoSwitchedToManual = false;
+        this.performanceDegradedMode = false;
+        this.showPerformanceMessage = false;
         if (this.alignmentTimer) {
             clearTimeout(this.alignmentTimer);
             this.alignmentTimer = undefined;
@@ -2432,6 +2888,24 @@ const JaakStamps = class {
         // Performance is good, use base frame skip
         return this.BASE_FRAME_SKIP;
     }
+    // Método para resetear la máscara a color blanco
+    resetMaskToWhite() {
+        const cardOutline = this.el.shadowRoot?.querySelector('.card-outline');
+        const corners = this.el.shadowRoot?.querySelectorAll('.corner');
+        const topSide = this.el.shadowRoot?.querySelector('.side-top');
+        const rightSide = this.el.shadowRoot?.querySelector('.side-right');
+        const bottomSide = this.el.shadowRoot?.querySelector('.side-bottom');
+        const leftSide = this.el.shadowRoot?.querySelector('.side-left');
+        // Remover todas las clases de alineación y estado perfecto
+        cardOutline?.classList.remove('perfect-match');
+        corners?.forEach(corner => corner.classList.remove('perfect-match'));
+        topSide?.classList.remove('aligned');
+        rightSide?.classList.remove('aligned');
+        bottomSide?.classList.remove('aligned');
+        leftSide?.classList.remove('aligned');
+        // Resetear estado de alineación
+        this.sideAlignment = { top: false, right: false, bottom: false, left: false };
+    }
     // Canvas pool management for screenshots
     getPooledCanvas(width, height) {
         // Try to find a canvas with matching dimensions