@jaak.ai/stamps 2.1.0-dev.1 → 2.1.0-dev.11

package/dist/components/jaak-stamps.js

@@ -630,6 +630,7 @@ class DeviceStrategyFactory {
 class DetectionService {
     debug;
     useDocumentClassification;
+    useDocumentDetector;
     session;
     mobileNetSession;
     mobileNetClassMap;
@@ -647,9 +648,10 @@ class DetectionService {
     // Static canvas pool for reuse across instances
     static canvasPool = new Map();
     static MAX_POOL_SIZE = 5;
-    constructor(debug = false, useDocumentClassification = false) {
+    constructor(debug = false, useDocumentClassification = false, useDocumentDetector = true) {
         this.debug = debug;
         this.useDocumentClassification = useDocumentClassification;
+        this.useDocumentDetector = useDocumentDetector;
         this.deviceStrategy = DeviceStrategyFactory.createStrategy();
         this.initializeCanvasPool();
     }
@@ -657,13 +659,23 @@ class DetectionService {
         if (this.modelLoaded || this.session) {
             return;
         }
+        if (!this.useDocumentDetector) {
+            // Skip loading the detection model but mark as "loaded" for compatibility
+            this.modelLoaded = true;
+            return;
+        }
         try {
             const sessionOptions = this.deviceStrategy.getSessionOptions(this.debug);
             try {
                 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',
@@ -673,8 +685,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;
@@ -714,7 +735,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',
@@ -724,8 +750,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;
@@ -737,6 +772,10 @@ class DetectionService {
         }
     }
     isModelLoaded() {
+        if (!this.useDocumentDetector) {
+            // If detector is disabled, consider it "loaded" for compatibility
+            return this.modelLoaded;
+        }
         return this.modelLoaded && !!this.session;
     }
     preprocess(video) {
@@ -761,6 +800,10 @@ class DetectionService {
         return new window.ort.Tensor("float16", float16Data, [1, 3, this.INPUT_SIZE, this.INPUT_SIZE]);
     }
     async runInference(inputTensor) {
+        if (!this.useDocumentDetector) {
+            // Return empty array when document detector is disabled
+            return [];
+        }
         if (!this.session) {
             throw new Error('Detection model not loaded');
         }
@@ -1038,7 +1081,7 @@ class ServiceContainer {
         const eventBus = new EventBusService();
         const stateManager = new StateManagerService(eventBus);
         const cameraService = new CameraService(eventBus, config.preferredCamera);
-        const detectionService = new DetectionService(config.debug, config.useDocumentClassification);
+        const detectionService = new DetectionService(config.debug, config.useDocumentClassification, config.useDocumentDetector);
         // Register services
         this.services.set('eventBus', eventBus);
         this.services.set('stateManager', stateManager);
@@ -1074,7 +1117,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%);color:#fff;font-size:14px;font-weight:600;text-align:center;white-space:normal;background:rgba(0, 0, 0, 0.25);backdrop-filter:blur(12px);padding:12px 20px;border-radius:8px;max-width:300px;z-index:20;border:1px solid rgba(255, 255, 255, 0.1)}.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}.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}.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)}}.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}}.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:slideInFromLeft 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}}";
+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,.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$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H {
     constructor() {
@@ -1090,6 +1133,7 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
     maskSize = 90;
     cropMargin = 20;
     useDocumentClassification = false;
+    useDocumentDetector = true;
     preferredCamera = 'auto';
     captureDelay = 1500;
     enableBackDocumentTimer = false;
@@ -1130,6 +1174,11 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
         detectionRate: 0
     };
     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;
@@ -1148,12 +1197,12 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
     alignmentStartTime;
     alignmentTimer;
     backDocumentTimer;
+    orientationTimer;
     // Performance monitoring
     performanceMetrics = {
         fps: 0,
         inferenceTime: 0,
         memoryUsage: 0,
-        cpuUsage: 0,
         onnxLoadTime: 0,
         frameProcessingTime: 0,
         totalDetections: 0,
@@ -1172,18 +1221,29 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
     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() {
@@ -1193,6 +1253,7 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             maskSize: this.maskSize,
             cropMargin: this.cropMargin,
             useDocumentClassification: this.useDocumentClassification,
+            useDocumentDetector: this.useDocumentDetector,
             preferredCamera: this.preferredCamera,
             captureDelay: this.captureDelay
         };
@@ -1203,14 +1264,8 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
         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() {
@@ -1250,27 +1305,39 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             document.head.appendChild(script);
             await new Promise((resolve) => {
                 script.onload = () => {
-                    setTimeout(() => {
-                        this.finalizeInitialization();
+                    setTimeout(async () => {
+                        await this.finalizeInitialization();
                         resolve(undefined);
                     }, 300);
                 };
             });
         }
         else {
-            setTimeout(() => {
-                this.finalizeInitialization();
+            setTimeout(async () => {
+                await this.finalizeInitialization();
             }, 300);
         }
     }
-    finalizeInitialization() {
+    async finalizeInitialization() {
         this.stateManager.updateCaptureState({ isLoading: false });
-        this.currentStatus = {
-            message: 'Listo para capturar',
-            description: '',
-            type: 'ready',
-            isInitialized: true
-        };
+        // Check camera permissions before showing "ready" status
+        const hasPermissions = await this.checkCameraPermissions();
+        if (hasPermissions) {
+            this.currentStatus = {
+                message: 'Listo para capturar',
+                description: '',
+                type: 'ready',
+                isInitialized: true
+            };
+        }
+        else {
+            this.currentStatus = {
+                message: 'Permisos de cámara requeridos',
+                description: 'Por favor, otorgue permisos de cámara para continuar',
+                type: 'error',
+                isInitialized: true
+            };
+        }
         this.emitReadyEvent();
     }
     updateStatus(message, description, type = 'loading') {
@@ -1285,7 +1352,28 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
         const isDocumentReady = !!window.ort && this.detectionService.isModelLoaded();
         this.isReady.emit(isDocumentReady);
     }
-    handleStateChange(data) {
+    async checkCameraPermissions() {
+        try {
+            if (!navigator.permissions) {
+                // Fallback: try to access camera directly
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+                    stream.getTracks().forEach(track => track.stop());
+                    return true;
+                }
+                catch {
+                    return false;
+                }
+            }
+            const permission = await navigator.permissions.query({ name: 'camera' });
+            return permission.state === 'granted';
+        }
+        catch (error) {
+            return false;
+        }
+    }
+    handleStateChange() {
+        // Handle state changes from StateManager if needed
     }
     initializeResizeObserver() {
         if ('ResizeObserver' in window && this.detectionContainer) {
@@ -1294,6 +1382,18 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             });
             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) {
@@ -1302,6 +1402,36 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             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) {
+                return 'Posicione el frente de su documento en el marco y presione el botón para capturar';
+            }
+            // Instrucción básica de alineación
+            return 'Alinee su identificación con el marco';
+        }
+        else if (step === 'back') {
+            // Para el reverso, mostrar instrucciones específicas según el modo
+            if (this.useDocumentDetector) {
+                return 'Si tu documento no tiene lado trasero, da clic en el botón para continuar con el proceso';
+            }
+            else {
+                return 'Posicione el reverso de su documento en el marco y capture, o salte este paso';
+            }
+        }
+        return 'Alinee su identificación con el marco';
+    }
     updateMaskDimensions(containerRect) {
         if (!this.videoRef)
             return;
@@ -1440,8 +1570,14 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
         }
     }
     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 {
@@ -1458,6 +1594,10 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
         catch (error) {
             return { success: false, error: error.message };
         }
+        finally {
+            // Always clear processing state when done
+            this.processingButton = null;
+        }
     }
     async getStatus() {
         const readyCheck = this.isComponentReady();
@@ -1512,9 +1652,21 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             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
@@ -1623,17 +1775,63 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
         // 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
@@ -1643,14 +1841,40 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             }
             // 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
-            this.updateStatus('Captura activa', 'Buscando documento en el marco de captura', 'active');
-            await this.initializeVideoStream(stream);
+            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('Analizando estabilidad...', 'Evaluando rendimiento del sistema', 'loading');
+            }
+            else {
+                this.updateStatus('Captura activa', '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;
@@ -1660,6 +1884,10 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             // Finalizar e iniciar captura
             this.startTime = Date.now();
             this.stateManager.updateCaptureState({ isLoading: false });
+            // Mostrar botón manual si el detector está deshabilitado
+            if (!this.useDocumentDetector) {
+                this.showManualCaptureButton = true;
+            }
             this.detectFrame();
         }
         catch (err) {
@@ -1677,6 +1905,12 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
                 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();
                 };
             });
@@ -1691,6 +1925,18 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             const captureState = this.stateManager.getCaptureState();
             if (!this.videoRef || !this.detectionContainer || !this.detectionService.isModelLoaded())
                 return;
+            // 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') {
+                    this.animationId = requestAnimationFrame(() => this.detectFrame());
+                }
+                return;
+            }
+            else if (!this.performanceDegradedMode) {
+                this.showManualCaptureButton = false;
+            }
             if (captureState.isDetectionPaused) {
                 if (captureState.step !== 'completed') {
                     this.animationId = requestAnimationFrame(() => this.detectFrame());
@@ -1718,10 +1964,27 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             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);
@@ -1760,9 +2023,30 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             }
             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
@@ -1798,6 +2082,12 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             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;
@@ -1818,7 +2108,7 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             isCapturing: false
         };
         const cameraInfo = this.cameraInfoWithAutofocus;
-        return (h("div", { key: '69a8df7969288e19088e8809f1fefcc89b237cda', class: "detector-container" }, h("div", { key: '79e59a315d266be9d4fb5eed5740e5ad825d5890', class: "video-container" }, h("video", { key: 'a3312788c739748b774a25acb30c2dcea7f01695', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: 'ddab107500c2dab24c140049bef0b44aafc35dc7', 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: 'dda3e3054a18dac59fd6dab4bf722f405d1c1b0f', class: "detector-container" }, h("div", { key: 'c260bf52307e072a634cddcc273c1f55037d01ef', class: "video-container" }, h("video", { key: '5f20ce9d95c5ece7ab90a2da30f28034b86a57a0', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '6afd8a46c16592c67e6bb93f1655de1660338f30', 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`,
@@ -1827,9 +2117,9 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (h("div", { key: '370337089a3de949b8cb4ae84dc0037e6044b2d5', class: "overlay-mask" }, h("div", { key: 'cb35c2e42bf1729ad02a8fe7e7abaf27cf1a8d7a', class: "card-outline" }, h("div", { key: '637d72ada63805e7f25051cd1ad9093030cb025a', class: "side side-top" }), h("div", { key: 'c7a465aa686afa41f80433d949715b40f6f349dc', class: "side side-right" }), h("div", { key: '384aade0610b5bc7bdd7db350a70d82f9bebd8ab', class: "side side-bottom" }), h("div", { key: '5506cc346f3fd718e3fda4365f69ea780304b6d6', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: 'f5b9b62937eabab7c096b7417a13bbf6f822ee8a', class: "guide-text" }, "Alinee su identificaci\u00F3n con el marco"))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '74b122125a42839d2600cf99fb855140042ab761', class: "skip-section" }, h("div", { key: '0b4a39d1599854d6c445e2c35dcc89a0e4970846', class: "skip-explanation" }, "Si tu documento no tiene lado trasero, da clic en el bot\u00F3n para continuar con el proceso"), h("button", { key: 'b52b47df390cc099c8847ca8a676270bb154294d', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
+            } })))), this.isMaskReady && (h("div", { key: '178f2022bed334f8c9c8c866a92b44c8cb0369b1', class: "overlay-mask" }, h("div", { key: 'acb1bc996409095afd29ffa5a038c3eeae6c7ed9', class: "card-outline" }, h("div", { key: 'dcc952d9011c5fd13b229f3a759cc74721a1ee11', class: "side side-top" }), h("div", { key: 'addb25f6c41ad10a09b6918e6357052294d14adf', class: "side side-right" }), h("div", { key: 'a1ec08f3bf1b16731a224c034c76dd8c6412597b', class: "side side-bottom" }), h("div", { key: '22f3c158f2c2bb1dc582f796c39ea60bc11505dd', class: "side side-left" })), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '5b150f7df5b0c5402e42bae4601936d4e5d1f5d4', class: `guide-text ${this.showPerformanceMessage ? 'performance-warning-text' : ''}` }, this.getGuideText(captureState.step))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '17b0a81437eb8691cb4dc5042c72bda01ac92be0', class: "back-capture-section" }, h("div", { key: 'a65ccbd5f53b06ec340b36a0a2348cf04920b3df', class: "back-capture-buttons" }, (!this.useDocumentDetector || this.performanceDegradedMode) && (h("button", { key: '383d7398079dbb8b1adfe695407cc598059b2a94', class: "capture-button primary-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-back' && (h("span", { key: '86bddcfeb6f90da9b18926f4c6e1208296502dcf', class: "button-spinner" })), "Capturar Reverso")), h("button", { key: '5c9d116cbb9b5bc16481b2b90c8451182ad436c5', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'skip-back' && (h("span", { key: '881f00cfc3a24167bc6b8da5849cb404101b692d', class: "button-spinner" })), this.enableBackDocumentTimer && this.backDocumentTimerRemaining > 0
             ? `Saltar reverso (${this.backDocumentTimerRemaining}s)`
-            : 'Saltar reverso'))), captureState.isVideoActive && (h("div", { key: 'f04e47749a25197c434b849844c67eadca5c6af3', class: "camera-controls" }, h("button", { key: '82625eef057f59b6dac11c4443ccb315231eac7f', 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: '61cfb89cd9bb549cfff2cb70293db06ee6cdf06b', class: "camera-selector-dropdown" }, h("div", { key: '60f751d8db7b305f2bdfdc089d2110bcff940150', class: "camera-selector-header" }, h("span", { key: '9dae045a34cc06f323ff4850921b495fc845be47' }, "Seleccionar C\u00E1mara"), h("button", { key: '4584d7964d91ddd7f3d980c3e5e90493530d33bd', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '9881f2b4fc6ffbdc76db06a7b49d060cefbe6277', 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: '3dfe9ffc7b4cc9afb199a78026cef6d4b469805e', class: "device-info" }, h("small", { key: 'bddc865a30469bd2724624b2f7c8f641f9d97a07' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (h("div", { key: '2fd963e44f69f80d17c6bbbfa3c9b5e11bc816be', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: 'ba4872ea5388a0ac3134be61feff5412373465ab', class: "flip-animation" }, h("div", { key: 'e83a92cea79f3e85aefc6964c5d9de7b495d511e', class: "id-card-icon" }), h("div", { key: '1d06b51fd6ad14d9b37aa6bca72bd13c951a386a', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '503c377896d5fdc3ae8476b09f511d571f23ae72', class: "success-animation" }, h("div", { key: 'e1929c245b0d1479a6fb1513b0b37c53070c4291', class: "check-icon" }), h("div", { key: '024c897c70427b205390770fc3dfb999ffcc84d3', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '54e350707628e5c88ae2900e412e6bda2eace943', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: '82ea10569ed46285686cf3e63885ca1941bb559c', class: "status-spinner" })), h("div", { key: '1fecf179c10965cccf1be3dc0a54afd377ba38ad', class: "status-content" }, h("div", { key: '1b301c1bbb02e5cac2e6babcb20c190662d45c68', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '5b6c61308d17176daade02c951a436d114a74100', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: 'b8104db64208dc87a617a072957c007f28055194', class: "performance-monitor" }, h("div", { key: 'e66aec071f10821be2713858dcc251c04f480e63', class: "performance-expanded" }, h("div", { key: '1ae09a91d0704ab21b9eb51097cf452fd5f44359', class: "metrics-row" }, h("div", { key: '340d4d16d048a5217fe13d5de63618c9ea221165', class: "metric-compact" }, h("span", { key: '20cfda14969ef70d232edd68f2e9902bd44b5d9a', class: "metric-label" }, "FPS"), h("span", { key: '3a089c2814a71ed6513bf05b0120a66aa159daee', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: '23f700def988c3220fc5df37aeb57a0a20ff56b3', class: "metric-compact" }, h("span", { key: '441e8490a871469813a6d832114e03583d375e91', class: "metric-label" }, "MEM"), h("span", { key: '51f7c49164c9d5e699141c92c88375fc99b312ed', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: '6547fee80e2a1db7c9ff889a1c478fc8248159e6', class: "metrics-row" }, h("div", { key: '7b2d1642fd122ee0fbed36387afb23152afe10c2', class: "metric-compact" }, h("span", { key: 'a9137119bf7da366f18feaf8f28807ee40ad7a25', class: "metric-label" }, "INF"), h("span", { key: '5cbc0c040102688f1039cdcd4bb58020248cf700', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: 'cb4a86f5da46e4081d997c8b8bb6a899f06dfcd2', class: "metric-compact" }, h("span", { key: '88ad5e1d842eb156cf6813ecaa9d2bec76a5999e', class: "metric-label" }, "FRAME"), h("span", { key: 'a9b14cd98b64dcfc058d3b68a3c168a9e092fb3c', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '86e01f3596682cb8ad2ff5464748e6ecb7db374a', class: "metrics-row" }, h("div", { key: 'e73b9d39e9bcbc5d46fa0ba0a737700e3e5566d9', class: "metric-compact" }, h("span", { key: '8ecfe969dfe77c87d9da76d7390706014b4872f3', class: "metric-label" }, "DET"), h("span", { key: 'bd1a6a52e0bd1fb4d377413d7515e4e0f00da10f', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '36539ae98787fd60642082db1bf89031003c4bef', class: "metric-compact" }, h("span", { key: '7f3a81629c09053e3beeca97f485da0f60412052', class: "metric-label" }, "RATE"), h("span", { key: '72399e0ac39270c82b265ce64e402f84cda9fb2c', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '4e3a914ba2f5993f85de7b9dd6dc93d76b41c96d', class: "watermark" }, h("img", { key: 'aa634c2ba2090f64ee9b41aa1d75a9114d46fd63', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            : 'Saltar reverso')))), captureState.isVideoActive && (h("div", { key: 'd929fc0eeeeee944f3d722fde98c52642443e9a5', class: "camera-controls" }, h("button", { key: '1afcfae9d4a23aaede153f27ba6895a33182ada1', 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: 'f37feefd9def935417467dffb52b9fe8d8acea79', class: "camera-selector-dropdown" }, h("div", { key: 'a8479ec6a6c4076b5dc40677e1988295100e4d0d', class: "camera-selector-header" }, h("span", { key: '074f02967354293a1e5df4e3ac8a126faee33d04' }, "Seleccionar C\u00E1mara"), h("button", { key: 'd6ba0252fb269c3a04967fb0e5c075166f202d71', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '63f5f9be2b05da71f4fe5a4e38b11ab3e39fb1e0', 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: '4ca46fdebe0eaa078f1dae4d2f1af03321577c7f', class: "device-info" }, h("small", { key: '10c54ddc5a196b11a69077b045119187ed09f4be' }, "Dispositivo: ", cameraInfo.deviceType)))), this.showManualCaptureButton && captureState.step === 'front' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '25393018948798f4d9d5f44738e61c7a0a6be990', class: "manual-capture-section" }, h("button", { key: '7a6c8686c0db3e352f9689bc41f7fd3f612c800c', class: "manual-capture-button", onClick: () => this.takeManualScreenshot(), type: "button", disabled: this.processingButton !== null }, this.processingButton === 'capture-front' && (h("span", { key: '1916b97da3f8dce7d06b86b21f0361dd7ce10b95', class: "button-spinner" })), "Capturar Frente"))))), captureState.isCapturing && (h("div", { key: 'aed05a3280dc96121564ffea87945f441d4286f6', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '63d262e5e10325d145fada8e91a878c47305f2b9', class: "flip-animation" }, h("div", { key: '2a3699f47e595c5e4ab00dfd11e1e66ab2e13039', class: "id-card-icon" }), h("div", { key: 'df195fe9a6db4ec3e14b04b4e932d55adb7c3f3c', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '670341c302a31c8017a9083ebf35e2988122ac3f', class: "success-animation" }, h("div", { key: '27b0b0d91de6a882182b6ccdebecc7c440997e36', class: "check-icon" }), h("div", { key: '71ee5327faf48ea26c2ae36a8a6906c448c3a389', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '39c92aa0b82f6169058b1092894845fcba3f27b4', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: '74b02ba81756f0e8bfb6e2feafdb2c44fb80afad', class: "status-spinner" })), h("div", { key: 'c7419efb2c6e2760019ecce619534e24ae3d7351', class: "status-content" }, h("div", { key: '57f315384630f17f6332eddfea628b333299e831', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: 'ac8632fdd68c24ed00192cb04a13026ada1f953d', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: 'e51286a839795b18cfac2874e7e1f6e9f8e3bb4b', class: "performance-monitor" }, h("div", { key: 'f8cd289d260af9df2daf23bdfb8db70fe8bf6f45', class: "performance-expanded" }, h("div", { key: 'bf2becb2ee3ad3bffb82b0e90246a4385a19f567', class: "metrics-row" }, h("div", { key: 'f334c2b5de45df73aec6e06cd371151110789a45', class: "metric-compact" }, h("span", { key: 'cbf32f72eb3aaf1bf770d651c32123a43b81035c', class: "metric-label" }, "FPS"), h("span", { key: '9d2d2f46ba3fdb23c010f781044f00b1dd1250e6', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'f29406e8a5b00f5838a144de9fda77ce53177d43', class: "metric-compact" }, h("span", { key: '8f44e29f6134c340f0a58f8aa321612c8a9bbfb8', class: "metric-label" }, "MEM"), h("span", { key: '7a58e164d292329d95054b2679a90e031f6fe4c2', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'd0284a0e65fc2879557d73fc2e03295c29f512ae', class: "metrics-row" }, h("div", { key: '78dcbce552e65c95fcd01158f3aa8916ef0e7175', class: "metric-compact" }, h("span", { key: '673cfbc8c9dabb020a3d3c18ee07558a61da9b51', class: "metric-label" }, "INF"), h("span", { key: '833761b7a875c931a8b31913930c3b132f71f618', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '324801e3e69a8de181755367201d8e8c643e8d72', class: "metric-compact" }, h("span", { key: 'f928d9b2dfbf81f5738ab08a42ebb76ff4a483de', class: "metric-label" }, "FRAME"), h("span", { key: 'dc9f2e4a1e848be4d240d89c89126203555ae203', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '7ca0a7b44719b1884334edab586267f021cf86c1', class: "metrics-row" }, h("div", { key: '262667c4320d337dae2220b77f142cf293542562', class: "metric-compact" }, h("span", { key: '578b53d251e58933f654a5afe558931e4333f022', class: "metric-label" }, "DET"), h("span", { key: '4fb36eaebebd73e5cb06d582fa3b4ece61463761', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: 'c17192e3964164ad603427de3befa1615b027022', class: "metric-compact" }, h("span", { key: 'd004e74797b9468e94c2af996bb62c1a3ca8d58e', class: "metric-label" }, "RATE"), h("span", { key: '0960e8760fd0ac2456a9e76598e5392c24e42d3b', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '3588fba1fe51af1335d643107ba0355aca6f4f8c', class: "watermark" }, h("img", { key: 'd53ec6b0ee9f97f602f4f8857ec605427b2ee478', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -1944,6 +2234,141 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             }
         }
     }
+    async takeManualScreenshot() {
+        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() {
+        if (!this.videoRef || !this.detectionContainer)
+            return;
+        this.stateManager.updateCaptureState({ isCapturing: true });
+        this.triggerCaptureAnimation();
+        // Use pooled canvas for optimization
+        const captureCanvas = this.getPooledCanvas(this.videoRef.videoWidth, this.videoRef.videoHeight);
+        const captureCtx = captureCanvas.getContext('2d', { alpha: false });
+        captureCtx.clearRect(0, 0, captureCanvas.width, captureCanvas.height);
+        captureCtx.drawImage(this.videoRef, 0, 0, captureCanvas.width, captureCanvas.height);
+        // Calculate mask coordinates for cropping
+        const container = this.detectionContainer.parentElement;
+        const containerRect = container.getBoundingClientRect();
+        // Get mask dimensions from CSS properties
+        const maskWidthPercent = parseFloat(this.el.style.getPropertyValue('--mask-width').replace('%', '')) || 90;
+        const maskHeightPercent = parseFloat(this.el.style.getPropertyValue('--mask-height').replace('%', '')) || 56.25;
+        const maskCenterXPercent = parseFloat(this.el.style.getPropertyValue('--mask-center-x').replace('%', '')) || 50;
+        const maskCenterYPercent = parseFloat(this.el.style.getPropertyValue('--mask-center-y').replace('%', '')) || 50;
+        // Convert percentages to actual video coordinates
+        const videoWidth = this.videoRef.videoWidth;
+        const videoHeight = this.videoRef.videoHeight;
+        const videoAspectRatio = videoWidth / videoHeight;
+        const containerAspectRatio = containerRect.width / containerRect.height;
+        let displayedVideoWidth, displayedVideoHeight;
+        let videoOffsetX = 0, videoOffsetY = 0;
+        if (videoAspectRatio > containerAspectRatio) {
+            displayedVideoWidth = containerRect.width;
+            displayedVideoHeight = containerRect.width / videoAspectRatio;
+            videoOffsetY = (containerRect.height - displayedVideoHeight) / 2;
+        }
+        else {
+            displayedVideoHeight = containerRect.height;
+            displayedVideoWidth = containerRect.height * videoAspectRatio;
+            videoOffsetX = (containerRect.width - displayedVideoWidth) / 2;
+        }
+        // Calculate mask coordinates in video space
+        const maskWidthInContainer = (maskWidthPercent / 100) * containerRect.width;
+        const maskHeightInContainer = (maskHeightPercent / 100) * containerRect.height;
+        const maskCenterXInContainer = (maskCenterXPercent / 100) * containerRect.width;
+        const maskCenterYInContainer = (maskCenterYPercent / 100) * containerRect.height;
+        // Convert to video coordinates
+        const scaleX = videoWidth / displayedVideoWidth;
+        const scaleY = videoHeight / displayedVideoHeight;
+        const maskCenterXInVideo = (maskCenterXInContainer - videoOffsetX) * scaleX;
+        const maskCenterYInVideo = (maskCenterYInContainer - videoOffsetY) * scaleY;
+        const maskWidthInVideo = maskWidthInContainer * scaleX;
+        const maskHeightInVideo = maskHeightInContainer * scaleY;
+        // Calculate crop coordinates
+        const cropX = Math.max(0, maskCenterXInVideo - (maskWidthInVideo / 2) - this.cropMargin);
+        const cropY = Math.max(0, maskCenterYInVideo - (maskHeightInVideo / 2) - this.cropMargin);
+        const cropWidth = Math.min(maskWidthInVideo + (2 * this.cropMargin), videoWidth - cropX);
+        const cropHeight = Math.min(maskHeightInVideo + (2 * this.cropMargin), videoHeight - cropY);
+        // Use pooled canvas for cropped version
+        const croppedCanvas = this.getPooledCanvas(cropWidth, cropHeight);
+        const croppedCtx = croppedCanvas.getContext('2d', { alpha: false });
+        croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
+        croppedCtx.drawImage(this.videoRef, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
+        const captureState = this.stateManager.getCaptureState();
+        if (captureState.step === 'front') {
+            this.stateManager.setCapturedImages({
+                front: {
+                    fullFrame: captureCanvas.toDataURL('image/png'),
+                    cropped: croppedCanvas.toDataURL('image/png')
+                }
+            });
+            // Check if document classification is enabled (independent of detector)
+            if (this.useDocumentClassification) {
+                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({
+                step: 'back',
+                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')
+                }
+            });
+            this.completeProcess(false);
+            // Clear processing button after back capture completes
+            this.processingButton = null;
+        }
+        // Return canvases to pool after use
+        this.returnCanvasToPool(captureCanvas);
+        this.returnCanvasToPool(croppedCanvas);
+    }
     async takeScreenshot() {
         if (!this.videoRef || !this.lastDetectedBox)
             return;
@@ -1977,10 +2402,15 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             });
             // 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({
@@ -2017,6 +2447,135 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
             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');
+        // Ocultar mensaje después de 5 segundos
+        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',
@@ -2130,6 +2689,13 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
         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;
@@ -2233,6 +2799,24 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
         // 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
@@ -2264,12 +2848,13 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
         // If pool is full, let the canvas be garbage collected
     }
     static get style() { return myComponentCss; }
-}, [1, "jaak-stamps", {
+}, [257, "jaak-stamps", {
         "debug": [4],
         "alignmentTolerance": [2, "alignment-tolerance"],
         "maskSize": [2, "mask-size"],
         "cropMargin": [2, "crop-margin"],
         "useDocumentClassification": [4, "use-document-classification"],
+        "useDocumentDetector": [4, "use-document-detector"],
         "preferredCamera": [1, "preferred-camera"],
         "captureDelay": [2, "capture-delay"],
         "enableBackDocumentTimer": [4, "enable-back-document-timer"],
@@ -2285,6 +2870,11 @@ const JaakStamps$1 = /*@__PURE__*/ proxyCustomElement(class JaakStamps extends H
         "currentStatus": [32],
         "performanceData": [32],
         "backDocumentTimerRemaining": [32],
+        "showManualCaptureButton": [32],
+        "performanceDegradedMode": [32],
+        "showPerformanceMessage": [32],
+        "captureStateVersion": [32],
+        "processingButton": [32],
         "getCapturedImages": [64],
         "isProcessCompleted": [64],
         "startCapture": [64],