@jaak.ai/stamps 2.0.0-dev.39 → 2.0.0-dev.41

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

@@ -447,6 +447,8 @@ class CameraService {
             const capabilities = videoTrack.getCapabilities();
             tempStream.getTracks().forEach(track => track.stop());
             const constraints = { ...videoConstraints };
+            // Enhanced focus and image quality settings
+            this.applyAdvancedCameraSettings(constraints, capabilities);
             if (capabilities.width && capabilities.height) {
                 const maxWidth = Math.min(capabilities.width.max, 1920);
                 const maxHeight = Math.min(capabilities.height.max, 1080);
@@ -460,6 +462,10 @@ class CameraService {
                     constraints.height = { ideal: maxHeight };
                 }
             }
+            this.logger.state('CONFIGURACION_CAMARA_OPTIMIZADA', {
+                constraints,
+                capabilities: this.getCapabilitiesSummary(capabilities)
+            });
             return constraints;
         }
         catch (err) {
@@ -469,6 +475,8 @@ class CameraService {
                 width: { ideal: isTablet ? 1280 : 1920 },
                 height: { ideal: isTablet ? 720 : 1080 }
             };
+            // Apply basic focus settings even for fallback
+            this.applyBasicFocusSettings(fallbackConstraints);
             if (this.selectedCameraId) {
                 fallbackConstraints.deviceId = { exact: this.selectedCameraId };
             }
@@ -481,6 +489,159 @@ class CameraService {
             return fallbackConstraints;
         }
     }
+    applyAdvancedCameraSettings(constraints, capabilities) {
+        // Apply standard camera settings that are widely supported
+        // Frame rate optimization
+        if (capabilities.frameRate) {
+            constraints.frameRate = {
+                ideal: 30,
+                min: 15,
+                max: 60
+            };
+        }
+        // Width and height constraints for optimal resolution
+        if (capabilities.width && capabilities.height) {
+            constraints.width = {
+                ideal: Math.min(1920, capabilities.width.max || 1920),
+                min: 640
+            };
+            constraints.height = {
+                ideal: Math.min(1080, capabilities.height.max || 1080),
+                min: 480
+            };
+        }
+        // Apply enhanced constraints through advanced array for better browser compatibility
+        const advancedConstraints = [];
+        // Try to set optimal settings through advanced constraints
+        const advanced = {};
+        // Focus mode - use 'any' type to bypass TypeScript limitations
+        if (capabilities.focusMode) {
+            if (capabilities.focusMode.includes('continuous')) {
+                advanced.focusMode = 'continuous';
+            }
+            else if (capabilities.focusMode.includes('single-shot')) {
+                advanced.focusMode = 'single-shot';
+            }
+        }
+        // Focus distance for close objects
+        if (capabilities.focusDistance) {
+            advanced.focusDistance = {
+                ideal: 0.4, // 40cm - optimal for document capture
+                min: 0.2,
+                max: 1.0
+            };
+        }
+        // Zoom control
+        if (capabilities.zoom) {
+            advanced.zoom = {
+                ideal: 1.0,
+                min: capabilities.zoom.min,
+                max: Math.min(capabilities.zoom.max, 3.0)
+            };
+        }
+        // Add advanced constraints if any were set
+        if (Object.keys(advanced).length > 0) {
+            advancedConstraints.push(advanced);
+        }
+        if (advancedConstraints.length > 0) {
+            constraints.advanced = advancedConstraints;
+        }
+    }
+    applyBasicFocusSettings(constraints) {
+        // Apply basic focus settings when capabilities are not available
+        // Use advanced constraints for non-standard properties
+        const advanced = {
+            focusMode: 'continuous',
+            exposureMode: 'continuous',
+            whiteBalanceMode: 'continuous'
+        };
+        if (!constraints.advanced) {
+            constraints.advanced = [];
+        }
+        constraints.advanced.push(advanced);
+        constraints.frameRate = { ideal: 30 };
+    }
+    getCapabilitiesSummary(capabilities) {
+        return {
+            hasAutoFocus: !!capabilities.focusMode,
+            hasFocusDistance: !!capabilities.focusDistance,
+            hasExposureControl: !!capabilities.exposureMode,
+            hasWhiteBalance: !!capabilities.whiteBalanceMode,
+            hasZoom: !!capabilities.zoom,
+            hasTorch: capabilities.torch !== undefined,
+            hasImageControls: !!(capabilities.brightness || capabilities.contrast || capabilities.saturation || capabilities.sharpness),
+            resolutionRange: capabilities.width && capabilities.height ?
+                `${capabilities.width.min}x${capabilities.height.min} - ${capabilities.width.max}x${capabilities.height.max}` : 'unknown'
+        };
+    }
+    // New method to enable torch/flash for better illumination
+    async setTorchEnabled(enabled, stream) {
+        try {
+            if (!stream) {
+                this.logger.warn('No hay stream disponible para controlar el flash');
+                return false;
+            }
+            const videoTrack = stream.getVideoTracks()[0];
+            if (!videoTrack) {
+                this.logger.warn('No hay track de video disponible');
+                return false;
+            }
+            const capabilities = videoTrack.getCapabilities();
+            if (capabilities.torch === undefined) {
+                this.logger.warn('El dispositivo no soporta control de flash');
+                return false;
+            }
+            await videoTrack.applyConstraints({
+                advanced: [{ torch: enabled }]
+            });
+            this.logger.state('FLASH_CONTROLADO', { enabled });
+            return true;
+        }
+        catch (error) {
+            this.logger.error('Error al controlar el flash:', error);
+            return false;
+        }
+    }
+    // Method to manually trigger focus on a specific point
+    async focusAtPoint(x, y, stream) {
+        try {
+            if (!stream) {
+                this.logger.warn('No hay stream disponible para enfocar');
+                return false;
+            }
+            const videoTrack = stream.getVideoTracks()[0];
+            if (!videoTrack) {
+                this.logger.warn('No hay track de video disponible');
+                return false;
+            }
+            const capabilities = videoTrack.getCapabilities();
+            if (!capabilities.focusMode || !capabilities.focusMode.includes('single-shot')) {
+                this.logger.warn('El dispositivo no soporta enfoque manual');
+                return false;
+            }
+            // Trigger single-shot focus
+            await videoTrack.applyConstraints({
+                advanced: [{ focusMode: 'single-shot' }]
+            });
+            // Return to continuous focus after a short delay
+            setTimeout(async () => {
+                try {
+                    await videoTrack.applyConstraints({
+                        advanced: [{ focusMode: 'continuous' }]
+                    });
+                }
+                catch (error) {
+                    this.logger.warn('Error al volver a enfoque continuo:', error);
+                }
+            }, 1000);
+            this.logger.state('ENFOQUE_MANUAL_ACTIVADO', { x, y });
+            return true;
+        }
+        catch (error) {
+            this.logger.error('Error al enfocar manualmente:', error);
+            return false;
+        }
+    }
 }
 
 class LowMemoryDeviceStrategy {
@@ -557,15 +718,346 @@ class DeviceStrategyFactory {
     }
 }
 
+class ImageQualityService {
+    logger;
+    // Thresholds for quality assessment
+    BLUR_THRESHOLD = 80; // Reduced from 100 to 80 for better acceptance
+    FOCUS_THRESHOLD = 40; // Reduced from 50 to 40 for better acceptance
+    REFLECTION_THRESHOLD = 240; // Pixel brightness threshold for reflections
+    MIN_BRIGHTNESS = 50; // Minimum acceptable brightness
+    MAX_BRIGHTNESS = 200; // Maximum acceptable brightness
+    MIN_CONTRAST = 30; // Minimum acceptable contrast
+    constructor(logger) {
+        this.logger = logger;
+    }
+    analyzeImageQuality(canvas, documentBounds) {
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Unable to get canvas context');
+        }
+        // Get image data for the document area or full canvas
+        let imageData;
+        if (documentBounds) {
+            imageData = ctx.getImageData(documentBounds.x, documentBounds.y, documentBounds.w, documentBounds.h);
+        }
+        else {
+            imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        }
+        // Perform all quality assessments
+        const blur = this.detectBlur(imageData);
+        const reflection = this.detectReflections(imageData);
+        const focus = this.measureFocus(imageData);
+        const brightness = this.measureBrightness(imageData);
+        const contrast = this.measureContrast(imageData);
+        // Calculate overall quality score (0-100)
+        const qualityScore = this.calculateOverallQuality(blur, reflection, focus, brightness, contrast);
+        const overallQuality = this.getQualityLevel(qualityScore);
+        // Identify issues and recommendations
+        const issues = this.identifyIssues(blur, reflection, focus, brightness, contrast);
+        const recommendations = this.getQualityRecommendations({
+            blur, reflection, focus, brightness, contrast,
+            overallQuality, qualityScore, issues, recommendations: []
+        });
+        const result = {
+            blur,
+            reflection,
+            focus,
+            brightness,
+            contrast,
+            overallQuality,
+            qualityScore,
+            issues,
+            recommendations
+        };
+        this.logger.state('CALIDAD_IMAGEN_ANALIZADA', {
+            qualityScore,
+            overallQuality,
+            issues: issues.length,
+            hasBlur: !blur.isAcceptable,
+            hasReflection: reflection.hasReflection,
+            isFocused: focus.isFocused
+        });
+        return result;
+    }
+    detectBlur(imageData) {
+        const { data, width, height } = imageData;
+        let totalVariance = 0;
+        let pixelCount = 0;
+        // Calculate Laplacian variance for blur detection
+        for (let y = 1; y < height - 1; y++) {
+            for (let x = 1; x < width - 1; x++) {
+                const idx = (y * width + x) * 4;
+                // Convert to grayscale
+                const gray = 0.299 * data[idx] + 0.587 * data[idx + 1] + 0.114 * data[idx + 2];
+                // Calculate Laplacian (edge detection)
+                const neighbors = [
+                    this.getGrayscale(data, x - 1, y - 1, width),
+                    this.getGrayscale(data, x, y - 1, width),
+                    this.getGrayscale(data, x + 1, y - 1, width),
+                    this.getGrayscale(data, x - 1, y, width),
+                    this.getGrayscale(data, x + 1, y, width),
+                    this.getGrayscale(data, x - 1, y + 1, width),
+                    this.getGrayscale(data, x, y + 1, width),
+                    this.getGrayscale(data, x + 1, y + 1, width)
+                ];
+                const laplacian = 8 * gray - neighbors.reduce((sum, val) => sum + val, 0);
+                totalVariance += laplacian * laplacian;
+                pixelCount++;
+            }
+        }
+        const blurScore = Math.sqrt(totalVariance / pixelCount);
+        const isAcceptable = blurScore > this.BLUR_THRESHOLD;
+        return {
+            blurScore,
+            isAcceptable,
+            threshold: this.BLUR_THRESHOLD
+        };
+    }
+    detectReflections(imageData) {
+        const { data, width, height } = imageData;
+        let reflectionPixels = 0;
+        const totalPixels = width * height;
+        const reflectionAreas = [];
+        // Track bright regions that could be reflections
+        const brightRegions = Array(height).fill(null).map(() => Array(width).fill(false));
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const idx = (y * width + x) * 4;
+                const brightness = (data[idx] + data[idx + 1] + data[idx + 2]) / 3;
+                if (brightness > this.REFLECTION_THRESHOLD) {
+                    brightRegions[y][x] = true;
+                    reflectionPixels++;
+                }
+            }
+        }
+        // Find connected bright regions (potential reflections)
+        const visited = Array(height).fill(null).map(() => Array(width).fill(false));
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                if (brightRegions[y][x] && !visited[y][x]) {
+                    const region = this.findConnectedRegion(brightRegions, visited, x, y, width, height);
+                    if (region.size > 100) { // Minimum size for a reflection
+                        reflectionAreas.push({
+                            x: region.minX,
+                            y: region.minY,
+                            width: region.maxX - region.minX,
+                            height: region.maxY - region.minY
+                        });
+                    }
+                }
+            }
+        }
+        const reflectionScore = (reflectionPixels / totalPixels) * 100;
+        const hasReflection = reflectionScore > 5 || reflectionAreas.length > 0; // 5% threshold
+        return {
+            reflectionScore,
+            hasReflection,
+            threshold: 5,
+            reflectionAreas
+        };
+    }
+    measureFocus(imageData) {
+        const { data, width, height } = imageData;
+        let edgeStrength = 0;
+        let edgeCount = 0;
+        // Sobel edge detection for focus measurement
+        for (let y = 1; y < height - 1; y++) {
+            for (let x = 1; x < width - 1; x++) {
+                const gx = this.sobelX(data, x, y, width);
+                const gy = this.sobelY(data, x, y, width);
+                const magnitude = Math.sqrt(gx * gx + gy * gy);
+                edgeStrength += magnitude;
+                edgeCount++;
+            }
+        }
+        const focusScore = edgeCount > 0 ? edgeStrength / edgeCount : 0;
+        const isFocused = focusScore > this.FOCUS_THRESHOLD;
+        return {
+            focusScore,
+            isFocused,
+            threshold: this.FOCUS_THRESHOLD,
+            edgeStrength
+        };
+    }
+    measureBrightness(imageData) {
+        const { data } = imageData;
+        let totalBrightness = 0;
+        const pixelCount = data.length / 4;
+        for (let i = 0; i < data.length; i += 4) {
+            const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
+            totalBrightness += brightness;
+        }
+        const brightness = totalBrightness / pixelCount;
+        const isAcceptable = brightness >= this.MIN_BRIGHTNESS && brightness <= this.MAX_BRIGHTNESS;
+        return {
+            brightness,
+            isAcceptable,
+            minThreshold: this.MIN_BRIGHTNESS,
+            maxThreshold: this.MAX_BRIGHTNESS
+        };
+    }
+    measureContrast(imageData) {
+        const { data } = imageData;
+        let min = 255;
+        let max = 0;
+        for (let i = 0; i < data.length; i += 4) {
+            const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
+            min = Math.min(min, brightness);
+            max = Math.max(max, brightness);
+        }
+        const contrast = max - min;
+        const isAcceptable = contrast > this.MIN_CONTRAST;
+        return {
+            contrast,
+            isAcceptable,
+            threshold: this.MIN_CONTRAST
+        };
+    }
+    getQualityRecommendations(result) {
+        const recommendations = [];
+        if (!result.blur.isAcceptable) {
+            recommendations.push('Mantenga el dispositivo estable para reducir el desenfoque');
+            recommendations.push('Acérquese al documento para mejorar la nitidez');
+        }
+        if (result.reflection.hasReflection) {
+            recommendations.push('Cambie el ángulo del dispositivo para evitar reflejos');
+            recommendations.push('Mejore la iluminación indirecta del área');
+        }
+        if (!result.focus.isFocused) {
+            recommendations.push('Permita que la cámara enfoque automáticamente');
+            recommendations.push('Toque la pantalla sobre el documento para enfocar');
+        }
+        if (!result.brightness.isAcceptable) {
+            if (result.brightness.brightness < result.brightness.minThreshold) {
+                recommendations.push('Aumente la iluminación del área');
+                recommendations.push('Muévase a un lugar con mejor luz');
+            }
+            else {
+                recommendations.push('Reduzca la iluminación directa sobre el documento');
+                recommendations.push('Evite la luz solar directa');
+            }
+        }
+        if (!result.contrast.isAcceptable) {
+            recommendations.push('Mejore la iluminación para aumentar el contraste');
+            recommendations.push('Asegúrese de que el fondo contraste con el documento');
+        }
+        if (recommendations.length === 0) {
+            recommendations.push('La calidad de la imagen es óptima para la captura');
+        }
+        return recommendations;
+    }
+    calculateOverallQuality(blur, reflection, focus, brightness, contrast) {
+        let score = 0;
+        // Blur contribution (25%)
+        score += blur.isAcceptable ? 25 : Math.max(0, (blur.blurScore / this.BLUR_THRESHOLD) * 25);
+        // Reflection contribution (20%)
+        score += reflection.hasReflection ? Math.max(0, 20 - reflection.reflectionScore * 2) : 20;
+        // Focus contribution (25%)
+        score += focus.isFocused ? 25 : Math.max(0, (focus.focusScore / this.FOCUS_THRESHOLD) * 25);
+        // Brightness contribution (15%)
+        if (brightness.isAcceptable) {
+            score += 15;
+        }
+        else {
+            const brightnessPenalty = Math.abs(brightness.brightness - (brightness.minThreshold + brightness.maxThreshold) / 2);
+            score += Math.max(0, 15 - brightnessPenalty / 10);
+        }
+        // Contrast contribution (15%)
+        score += contrast.isAcceptable ? 15 : Math.max(0, (contrast.contrast / this.MIN_CONTRAST) * 15);
+        return Math.round(Math.max(0, Math.min(100, score)));
+    }
+    getQualityLevel(score) {
+        if (score >= 85)
+            return 'excellent';
+        if (score >= 70)
+            return 'good';
+        if (score >= 50)
+            return 'acceptable';
+        return 'poor';
+    }
+    identifyIssues(blur, reflection, focus, brightness, contrast) {
+        const issues = [];
+        if (!blur.isAcceptable) {
+            issues.push('Imagen desenfocada por movimiento');
+        }
+        if (reflection.hasReflection) {
+            issues.push('Reflejos detectados en el documento');
+        }
+        if (!focus.isFocused) {
+            issues.push('Documento fuera de foco');
+        }
+        if (!brightness.isAcceptable) {
+            if (brightness.brightness < brightness.minThreshold) {
+                issues.push('Iluminación insuficiente');
+            }
+            else {
+                issues.push('Imagen sobreexpuesta');
+            }
+        }
+        if (!contrast.isAcceptable) {
+            issues.push('Contraste insuficiente');
+        }
+        return issues;
+    }
+    getGrayscale(data, x, y, width) {
+        const idx = (y * width + x) * 4;
+        return 0.299 * data[idx] + 0.587 * data[idx + 1] + 0.114 * data[idx + 2];
+    }
+    findConnectedRegion(brightRegions, visited, startX, startY, width, height) {
+        const stack = [{ x: startX, y: startY }];
+        let size = 0;
+        let minX = startX, maxX = startX, minY = startY, maxY = startY;
+        while (stack.length > 0) {
+            const { x, y } = stack.pop();
+            if (x < 0 || x >= width || y < 0 || y >= height || visited[y][x] || !brightRegions[y][x]) {
+                continue;
+            }
+            visited[y][x] = true;
+            size++;
+            minX = Math.min(minX, x);
+            maxX = Math.max(maxX, x);
+            minY = Math.min(minY, y);
+            maxY = Math.max(maxY, y);
+            // Add adjacent pixels
+            stack.push({ x: x + 1, y }, { x: x - 1, y }, { x, y: y + 1 }, { x, y: y - 1 });
+        }
+        return { size, minX, maxX, minY, maxY };
+    }
+    sobelX(data, x, y, width) {
+        const kernel = [[-1, 0, 1], [-2, 0, 2], [-1, 0, 1]];
+        let sum = 0;
+        for (let ky = -1; ky <= 1; ky++) {
+            for (let kx = -1; kx <= 1; kx++) {
+                const gray = this.getGrayscale(data, x + kx, y + ky, width);
+                sum += gray * kernel[ky + 1][kx + 1];
+            }
+        }
+        return sum;
+    }
+    sobelY(data, x, y, width) {
+        const kernel = [[-1, -2, -1], [0, 0, 0], [1, 2, 1]];
+        let sum = 0;
+        for (let ky = -1; ky <= 1; ky++) {
+            for (let kx = -1; kx <= 1; kx++) {
+                const gray = this.getGrayscale(data, x + kx, y + ky, width);
+                sum += gray * kernel[ky + 1][kx + 1];
+            }
+        }
+        return sum;
+    }
+}
+
 class DetectionService {
     logger;
     debug;
     useDocumentClassification;
+    qualityThresholds;
     session;
     mobileNetSession;
     mobileNetClassMap;
     modelLoaded = false;
     deviceStrategy;
+    imageQualityService;
     MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/ddmyp-v2.onnx";
     MOBILENET_MODEL_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/cdmmp-v1.onnx";
     MOBILENET_CLASSES_PATH = "https://storage.googleapis.com/jaak-static/web/component/stamps/cdmmp-v1.json";
@@ -575,11 +1067,13 @@ class DetectionService {
     preprocessCanvas;
     preprocessCtx;
     captureCanvas;
-    constructor(logger, debug = false, useDocumentClassification = false) {
+    constructor(logger, debug = false, useDocumentClassification = false, qualityThresholds = {}) {
         this.logger = logger;
         this.debug = debug;
         this.useDocumentClassification = useDocumentClassification;
+        this.qualityThresholds = qualityThresholds;
         this.deviceStrategy = DeviceStrategyFactory.createStrategy();
+        this.imageQualityService = new ImageQualityService(logger);
         this.initializeCanvasPool();
     }
     async loadModel() {
@@ -923,6 +1417,164 @@ class DetectionService {
         }
         return new window.ort.Tensor('float32', arr, [1, 3, 224, 224]);
     }
+    // New methods for image quality validation
+    validateImageQuality(video, detectedBox) {
+        // Create a canvas to capture the current frame
+        const canvas = document.createElement('canvas');
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(video, 0, 0);
+        // If we have a detected document, focus quality analysis on that area
+        let documentBounds;
+        if (detectedBox) {
+            const scaleX = video.videoWidth / this.INPUT_SIZE;
+            const scaleY = video.videoHeight / this.INPUT_SIZE;
+            documentBounds = {
+                x: Math.max(0, detectedBox.x * scaleX),
+                y: Math.max(0, detectedBox.y * scaleY),
+                w: Math.min(detectedBox.w * scaleX, video.videoWidth),
+                h: Math.min(detectedBox.h * scaleY, video.videoHeight)
+            };
+        }
+        return this.imageQualityService.analyzeImageQuality(canvas, documentBounds);
+    }
+    isImageQualityAcceptable(qualityResult) {
+        // Use configurable thresholds with fallback defaults
+        const minQualityScore = this.qualityThresholds.minQualityScore ?? 45;
+        const minFocusScore = this.qualityThresholds.minFocusScore ?? 16;
+        const minBlurScore = this.qualityThresholds.minBlurScore ?? 22;
+        const maxReflectionScore = this.qualityThresholds.maxReflectionScore ?? 15;
+        // Check overall quality score - primary metric
+        if (qualityResult.qualityScore < minQualityScore) {
+            this.logger.state('QUALITY_REJECTION_SCORE', {
+                qualityScore: qualityResult.qualityScore,
+                minQualityScore,
+                reason: 'score_too_low'
+            });
+            return false;
+        }
+        // Check focus score
+        if (qualityResult.focus.focusScore < minFocusScore) {
+            this.logger.state('QUALITY_REJECTION_FOCUS', {
+                focusScore: qualityResult.focus.focusScore,
+                minFocusScore,
+                reason: 'severe_focus_issues'
+            });
+            return false;
+        }
+        // Check blur score
+        if (qualityResult.blur.blurScore < minBlurScore) {
+            this.logger.state('QUALITY_REJECTION_BLUR', {
+                blurScore: qualityResult.blur.blurScore,
+                minBlurScore,
+                reason: 'severe_blur_issues'
+            });
+            return false;
+        }
+        // Check reflection score
+        if (qualityResult.reflection.hasReflection && qualityResult.reflection.reflectionScore > maxReflectionScore) {
+            this.logger.state('QUALITY_REJECTION_REFLECTION', {
+                hasReflection: qualityResult.reflection.hasReflection,
+                reflectionScore: qualityResult.reflection.reflectionScore,
+                maxReflectionScore,
+                reason: 'severe_reflection_issues'
+            });
+            return false;
+        }
+        this.logger.state('QUALITY_ACCEPTANCE', {
+            qualityScore: qualityResult.qualityScore,
+            focusScore: qualityResult.focus.focusScore,
+            blurScore: qualityResult.blur.blurScore,
+            reflectionScore: qualityResult.reflection.reflectionScore,
+            issues: qualityResult.issues,
+            reason: 'quality_acceptable'
+        });
+        return true;
+    }
+    updateQualityThresholds(thresholds) {
+        this.qualityThresholds = { ...this.qualityThresholds, ...thresholds };
+        this.logger.state('QUALITY_THRESHOLDS_UPDATED', {
+            newThresholds: this.qualityThresholds
+        });
+    }
+    getQualityThresholds() {
+        return { ...this.qualityThresholds };
+    }
+    getQualityFeedback(qualityResult) {
+        if (qualityResult.qualityScore >= 85) {
+            return 'Calidad excelente - listo para capturar';
+        }
+        else if (qualityResult.qualityScore >= 70) {
+            return 'Buena calidad - puede capturar';
+        }
+        else if (qualityResult.qualityScore >= 50) {
+            const primaryIssue = qualityResult.issues[0];
+            return primaryIssue ? `Calidad aceptable - ${primaryIssue.toLowerCase()}` : 'Calidad aceptable';
+        }
+        else {
+            const mainIssues = qualityResult.issues.slice(0, 2).join(', ').toLowerCase();
+            return `Calidad insuficiente - ${mainIssues}`;
+        }
+    }
+    // Enhanced detection method that includes quality validation
+    async runInferenceWithQuality(inputTensor, video) {
+        const detections = await this.runInference(inputTensor);
+        // Get the best detection for quality analysis
+        const bestDetection = detections.length > 0 ?
+            detections.reduce((best, current) => current.score > best.score ? current : best) :
+            undefined;
+        const qualityResult = this.validateImageQuality(video, bestDetection);
+        const canCapture = this.isImageQualityAcceptable(qualityResult);
+        const feedback = this.getQualityFeedback(qualityResult);
+        this.logger.state('DETECCION_CON_CALIDAD', {
+            detectionsCount: detections.length,
+            qualityScore: qualityResult.qualityScore,
+            canCapture,
+            issues: qualityResult.issues.length,
+            bestDetectionScore: bestDetection?.score || 0
+        });
+        return {
+            detections,
+            qualityResult,
+            canCapture,
+            feedback
+        };
+    }
+    // Method to get real-time quality feedback without full analysis
+    getQuickQualityFeedback(video) {
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.min(video.videoWidth, 640); // Reduced resolution for performance
+        canvas.height = Math.min(video.videoHeight, 480);
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+        // Quick blur detection
+        const blurMetrics = this.imageQualityService.detectBlur(imageData);
+        // Quick reflection detection
+        const reflectionMetrics = this.imageQualityService.detectReflections(imageData);
+        // Quick focus measurement
+        const focusMetrics = this.imageQualityService.measureFocus(imageData);
+        let feedback = 'Analizando calidad...';
+        if (!blurMetrics.isAcceptable) {
+            feedback = 'Estabilice el dispositivo';
+        }
+        else if (reflectionMetrics.hasReflection) {
+            feedback = 'Evite reflejos en el documento';
+        }
+        else if (!focusMetrics.isFocused) {
+            feedback = 'Permitiendo enfoque automático...';
+        }
+        else {
+            feedback = 'Calidad óptima';
+        }
+        return {
+            hasBlur: !blurMetrics.isAcceptable,
+            hasReflections: reflectionMetrics.hasReflection,
+            isFocused: focusMetrics.isFocused,
+            feedback
+        };
+    }
 }
 
 class ServiceContainer {
@@ -936,7 +1588,12 @@ class ServiceContainer {
         const logger = new LoggerService(config.debug);
         const stateManager = new StateManagerService(eventBus);
         const cameraService = new CameraService(logger, eventBus, config.preferredCamera);
-        const detectionService = new DetectionService(logger, config.debug, config.useDocumentClassification);
+        const detectionService = new DetectionService(logger, config.debug, config.useDocumentClassification, {
+            minQualityScore: config.minQualityScore,
+            minFocusScore: config.minFocusScore,
+            minBlurScore: config.minBlurScore,
+            maxReflectionScore: config.maxReflectionScore
+        });
         // Register services
         this.services.set('eventBus', eventBus);
         this.services.set('logger', logger);
@@ -980,7 +1637,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(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;z-index:20}.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-button{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;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:translateX(-50%) translateY(0)}.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:space-between;align-items:center;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:8px;font-weight:400}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9}.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}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.metric-value.danger{animation:pulse 2s infinite}";
+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(128, 128, 128, 0.8);padding:12px 20px;border-radius:20px;max-width:300px;z-index:20}.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-button{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:25;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:translateX(-50%) translateY(0)}.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:space-between;align-items:center;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:8px;font-weight:400}.selected-indicator{font-size:14px;color:#ffffff;opacity:0.9}.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}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}.metric-value.danger{animation:pulse 2s infinite}";
 
 const JaakStamps = class {
     constructor(hostRef) {
@@ -995,6 +1652,13 @@ const JaakStamps = class {
     cropMargin = 0;
     useDocumentClassification = false;
     preferredCamera = 'auto';
+    captureDelay = 1000;
+    enableQualityValidation = true;
+    qualityThreshold = 60;
+    minQualityScore = 45;
+    minFocusScore = 16;
+    minBlurScore = 22;
+    maxReflectionScore = 15;
     captureCompleted;
     isReady;
     // State derived from services
@@ -1006,12 +1670,19 @@ const JaakStamps = class {
     shouldMirrorVideo = true;
     showCameraSelector = false;
     isSwitchingCamera = false;
+    hasDocumentDetected = false;
     currentStatus = {
         message: 'Inicializando componente...',
         description: 'Configurando servicios y cargando recursos',
         type: 'initializing',
         isInitialized: false
     };
+    qualityFeedback = {
+        message: 'Analizando calidad...',
+        score: 0,
+        hasIssues: false,
+        canCapture: false
+    };
     performanceData = {
         fps: 0,
         inferenceTime: 0,
@@ -1079,7 +1750,14 @@ const JaakStamps = class {
             maskSize: this.maskSize,
             cropMargin: this.cropMargin,
             useDocumentClassification: this.useDocumentClassification,
-            preferredCamera: this.preferredCamera
+            preferredCamera: this.preferredCamera,
+            captureDelay: this.captureDelay,
+            enableQualityValidation: this.enableQualityValidation,
+            qualityThreshold: this.qualityThreshold,
+            minQualityScore: this.minQualityScore,
+            minFocusScore: this.minFocusScore,
+            minBlurScore: this.minBlurScore,
+            maxReflectionScore: this.maxReflectionScore
         };
         this.serviceContainer = new ServiceContainer(config);
         this.logger = this.serviceContainer.getLogger();
@@ -1106,7 +1784,8 @@ const JaakStamps = class {
             maskSize: this.maskSize,
             cropMargin: this.cropMargin,
             useDocumentClassification: this.useDocumentClassification,
-            preferredCamera: this.preferredCamera
+            preferredCamera: this.preferredCamera,
+            captureDelay: this.captureDelay
         });
         this.validateProps();
         if (this.debug) {
@@ -1134,6 +1813,30 @@ const JaakStamps = class {
             this.logger.warn(`Propiedad preferredCamera inválida. Valor: ${this.preferredCamera}, esperado: ${validOptions.join(', ')}. Usando valor por defecto: 'auto'`);
             this.preferredCamera = 'auto';
         }
+        if (this.captureDelay < 0 || this.captureDelay > 10000) {
+            this.logger.warn(`Propiedad captureDelay inválida. Valor: ${this.captureDelay}, esperado: 0-10000. Usando valor por defecto: 1000`);
+            this.captureDelay = 1000;
+        }
+        if (this.qualityThreshold < 0 || this.qualityThreshold > 100) {
+            this.logger.warn(`Propiedad qualityThreshold inválida. Valor: ${this.qualityThreshold}, esperado: 0-100. Usando valor por defecto: 60`);
+            this.qualityThreshold = 60;
+        }
+        if (this.minQualityScore < 0 || this.minQualityScore > 100) {
+            this.logger.warn(`Propiedad minQualityScore inválida. Valor: ${this.minQualityScore}, esperado: 0-100. Usando valor por defecto: 45`);
+            this.minQualityScore = 45;
+        }
+        if (this.minFocusScore < 0 || this.minFocusScore > 100) {
+            this.logger.warn(`Propiedad minFocusScore inválida. Valor: ${this.minFocusScore}, esperado: 0-100. Usando valor por defecto: 16`);
+            this.minFocusScore = 16;
+        }
+        if (this.minBlurScore < 0 || this.minBlurScore > 200) {
+            this.logger.warn(`Propiedad minBlurScore inválida. Valor: ${this.minBlurScore}, esperado: 0-200. Usando valor por defecto: 22`);
+            this.minBlurScore = 22;
+        }
+        if (this.maxReflectionScore < 0 || this.maxReflectionScore > 100) {
+            this.logger.warn(`Propiedad maxReflectionScore inválida. Valor: ${this.maxReflectionScore}, esperado: 0-100. Usando valor por defecto: 15`);
+            this.maxReflectionScore = 15;
+        }
     }
     async loadOnnxRuntime() {
         if (!window.ort) {
@@ -1352,6 +2055,91 @@ const JaakStamps = class {
             availableCameras: this.cameraService.getAvailableCameras().length
         };
     }
+    async setCaptureDelay(delay) {
+        if (delay < 0 || delay > 10000) {
+            throw new Error('Capture delay must be between 0 and 10000 milliseconds');
+        }
+        this.captureDelay = delay;
+        this.serviceContainer.updateConfig({ captureDelay: delay });
+        return {
+            success: true,
+            captureDelay: this.captureDelay
+        };
+    }
+    async getCaptureDelay() {
+        return this.captureDelay;
+    }
+    async setTorchEnabled(enabled) {
+        const torchEnabled = await this.cameraService.setTorchEnabled(enabled, this.videoStream);
+        return {
+            success: torchEnabled,
+            enabled: torchEnabled ? enabled : false
+        };
+    }
+    async focusAtPoint(x, y) {
+        const focused = await this.cameraService.focusAtPoint(x, y, this.videoStream);
+        return {
+            success: focused,
+            coordinates: { x, y }
+        };
+    }
+    async getImageQuality() {
+        if (!this.videoRef || !this.detectionService.isModelLoaded()) {
+            return null;
+        }
+        try {
+            const qualityResult = this.detectionService.validateImageQuality(this.videoRef);
+            return {
+                qualityScore: qualityResult.qualityScore,
+                overallQuality: qualityResult.overallQuality,
+                issues: qualityResult.issues,
+                recommendations: qualityResult.recommendations,
+                canCapture: this.detectionService.isImageQualityAcceptable(qualityResult)
+            };
+        }
+        catch (error) {
+            this.logger.error('Error al analizar calidad de imagen:', error);
+            return null;
+        }
+    }
+    async setQualityThresholds(thresholds) {
+        // Validate thresholds
+        if (thresholds.minQualityScore !== undefined && (thresholds.minQualityScore < 0 || thresholds.minQualityScore > 100)) {
+            throw new Error('minQualityScore must be between 0 and 100');
+        }
+        if (thresholds.minFocusScore !== undefined && (thresholds.minFocusScore < 0 || thresholds.minFocusScore > 100)) {
+            throw new Error('minFocusScore must be between 0 and 100');
+        }
+        if (thresholds.minBlurScore !== undefined && (thresholds.minBlurScore < 0 || thresholds.minBlurScore > 200)) {
+            throw new Error('minBlurScore must be between 0 and 200');
+        }
+        if (thresholds.maxReflectionScore !== undefined && (thresholds.maxReflectionScore < 0 || thresholds.maxReflectionScore > 100)) {
+            throw new Error('maxReflectionScore must be between 0 and 100');
+        }
+        // Update component properties
+        if (thresholds.minQualityScore !== undefined)
+            this.minQualityScore = thresholds.minQualityScore;
+        if (thresholds.minFocusScore !== undefined)
+            this.minFocusScore = thresholds.minFocusScore;
+        if (thresholds.minBlurScore !== undefined)
+            this.minBlurScore = thresholds.minBlurScore;
+        if (thresholds.maxReflectionScore !== undefined)
+            this.maxReflectionScore = thresholds.maxReflectionScore;
+        // Update detection service
+        this.detectionService.updateQualityThresholds(thresholds);
+        return {
+            success: true,
+            thresholds: this.detectionService.getQualityThresholds()
+        };
+    }
+    async getQualityThresholds() {
+        return {
+            minQualityScore: this.minQualityScore,
+            minFocusScore: this.minFocusScore,
+            minBlurScore: this.minBlurScore,
+            maxReflectionScore: this.maxReflectionScore
+        };
+    }
     // DETECTION METHODS
     async startDetection() {
         this.logger.state('INICIANDO_DETECCION');
@@ -1453,7 +2241,36 @@ const JaakStamps = class {
             // Measure preprocessing and inference time
             const inferenceStartTime = performance.now();
             const inputTensor = this.detectionService.preprocess(this.videoRef);
-            const detections = await this.detectionService.runInference(inputTensor);
+            // Enhanced detection with quality validation if enabled
+            let detections;
+            let qualityResult = null;
+            let canCapture = true;
+            if (this.enableQualityValidation) {
+                // Use enhanced detection method with quality validation
+                const enhancedResult = await this.detectionService.runInferenceWithQuality(inputTensor, this.videoRef);
+                detections = enhancedResult.detections;
+                qualityResult = enhancedResult.qualityResult;
+                canCapture = enhancedResult.canCapture;
+                // Update quality feedback state
+                this.qualityFeedback = {
+                    message: enhancedResult.feedback,
+                    score: qualityResult.qualityScore,
+                    hasIssues: qualityResult.issues.length > 0,
+                    canCapture: canCapture
+                };
+            }
+            else {
+                // Standard detection without quality validation
+                detections = await this.detectionService.runInference(inputTensor);
+                // Quick quality feedback for real-time display
+                const quickFeedback = this.detectionService.getQuickQualityFeedback(this.videoRef);
+                this.qualityFeedback = {
+                    message: quickFeedback.feedback,
+                    score: 0, // Not calculated in quick mode
+                    hasIssues: quickFeedback.hasBlur || quickFeedback.hasReflections || !quickFeedback.isFocused,
+                    canCapture: true // Allow capture without strict validation
+                };
+            }
             const inferenceTime = performance.now() - inferenceStartTime;
             // Record ONNX performance metrics
             if (this.debug) {
@@ -1469,6 +2286,8 @@ const JaakStamps = class {
                     }
                 });
             }
+            // Update document detection state
+            this.hasDocumentDetected = detections.length > 0;
             // Adaptive frame rate
             if (detections.length === 0) {
                 this.consecutiveFailures++;
@@ -1530,6 +2349,7 @@ const JaakStamps = class {
         }
         this.detectionBoxes = [];
         this.alignmentStartTime = undefined;
+        this.hasDocumentDetected = false;
         this.serviceContainer?.cleanup();
     }
     render() {
@@ -1544,7 +2364,7 @@ const JaakStamps = class {
             availableCameras: [],
             selectedCameraId: null,
             deviceType: 'desktop'};
-        return (h("div", { key: '91be2bd01dfa62ef439ff4b3d029539248b69364', class: "detector-container" }, h("div", { key: '7dbfbe2b782a8d06e2303ec3edff4b5c68ba4444', class: "video-container" }, h("video", { key: 'a2b7ec84a2f49935a94f1afb12deb1137f472fcd', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: '63cf0b7a05fc6d604f3a273fd902717542ba47f5', 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: 'd71fc140c7fc87160ceaf479f9b9beae7685e9bc', class: "detector-container" }, h("div", { key: 'd83347ab6ccacfe940fb66d17adc21cff126d875', class: "video-container" }, h("video", { key: 'fb69de65e8133c7936cfb03ec86acdf89d2a8112', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), h("div", { key: 'c957341c1a750a1732afd6bb1045c1ba9bb2993d', 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`,
@@ -1553,7 +2373,9 @@ const JaakStamps = class {
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (h("div", { key: '089227de9415e523e99261eeeca5dcb981816a83', class: "overlay-mask" }, h("div", { key: '846bd914025e8da92ca85381a566c6d93caea2ea', class: "card-outline" }, h("div", { key: '1f49ae76e9066a65e848e55e19839547d8b9bef0', class: "side side-top" }), h("div", { key: '5b69c6bcf604042f86383e9bf122204d4fe1aeb1', class: "side side-right" }), h("div", { key: '8aa4c1f09c8b7046a369ed8d7fae1a96a525f778', class: "side side-bottom" }), h("div", { key: 'd8826c0347a219c154703d165ee5b4ced33f7a3f', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '916e038d0d0f80971629916189ef39c2689e4e43', class: "guide-text" }, "Alinee su identificaci\u00F3n con el marco"))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("button", { key: '02b01dff08bdbf042c6df1403f955601964bff28', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), captureState.isVideoActive && (h("div", { key: 'cd88fd0567e5b792ddc623c281616ea35616f8f6', class: "camera-controls" }, h("button", { key: '9d2a63a53926d0c987e551bd49caa8143b4e15d4', 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: '43e9ea946f88498082339de62cf54cba352e765e', class: "camera-selector-dropdown" }, h("div", { key: '9fe39e8fa32ee458e4261d3f0d8fd40d50fefcf4', class: "camera-selector-header" }, h("span", { key: 'edf45c7bd8c5a43df9aba3ff6310cc5d06bb1aa2' }, "Seleccionar C\u00E1mara"), h("button", { key: 'dd5d417bb5eadd3f3b488ecd901d8dfa075c29c8', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '8edcd693f137ddd4ada9654c01615a17c90cb9c3', 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}`), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: 'b7f050513f25af03ca72a735bd8745f71a456d76', class: "device-info" }, h("small", { key: '34305a7ca3418d46bceb2a9923a664fd5a0062fa' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (h("div", { key: '54ec511bd6d22c8c25eb41717abcebd89ed315f8', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '9392bccfd3576b1858610b543c0ac0b747cef153', class: "flip-animation" }, h("div", { key: '030dc63ea455afa24fd0b370425aae14ab322613', class: "id-card-icon" }), h("div", { key: '3f7d8985af2d6eaec21699b87d5aeb0b27d2d55e', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '0da0a234e87013fb2ccc652cb920318cf00b6733', class: "success-animation" }, h("div", { key: 'f6b62ff21e147c8b365ab8c88e42dcb106cb8743', class: "check-icon" }), h("div", { key: '8c8b56561234e140cd658c5fad252cd6a1e0251c', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '684119ec540276cc28a49724d6177c72aff74b02', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: 'abc9a89349b9d8d76e03c765aa0084ec364f73a8', class: "status-spinner" })), h("div", { key: '6903b83962ee971a95a18e9ac793d872a7ce4551', class: "status-content" }, h("div", { key: 'c01dd0268a223ee269b616cea19a9cdb69cc048f', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '1f6ebecc7a1d058c34aca5b4572ace8a81b5ab69', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: 'eff03d22449aafac6c986e71af2aafd487b1776d', class: "performance-monitor" }, h("div", { key: '66dfd57c92f7ee67e7c52293b3ad3f1105793e70', class: "performance-expanded" }, h("div", { key: '0d952f89275e551a1e4cdb9b215e1ba48776ebd4', class: "metrics-row" }, h("div", { key: '36fab2101078e4da16a3a3ac50d927077d9e0874', class: "metric-compact" }, h("span", { key: 'a694bf26ff69522a6462963d735ffa145513d84c', class: "metric-label" }, "FPS"), h("span", { key: '02a250b3863f8f158a4103e0817cf14accdb7b30', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'd6e849779f13ae0ee3641d98148f0ab151877157', class: "metric-compact" }, h("span", { key: '983411baa6e79e3bfe7ad277879361c023dc6d48', class: "metric-label" }, "MEM"), h("span", { key: 'eea7060b9cef780ed47a534b7bc69c94162b67d9', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'e0e5e80c208f1eadc606c20df844efcc66f6599c', class: "metrics-row" }, h("div", { key: 'd27ae06d877097c99c1796c36284427861ae0be3', class: "metric-compact" }, h("span", { key: '229837e3037ce64fc5930a5732ad6a0e323371e9', class: "metric-label" }, "INF"), h("span", { key: '82002332976cddf7dbb2aa6346ad9da0ce0901df', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: '243afc7933e169084eda28cca270198420a4341d', class: "metric-compact" }, h("span", { key: '834e9a69791abc42545dddc1c0de7372a3292d60', class: "metric-label" }, "FRAME"), h("span", { key: '9106f8989818aa9111d7571006224befe7837406', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: 'da911fc95ce6151fb5fb64b8d5df53d6b693ffef', class: "metrics-row" }, h("div", { key: 'c813a7152d51bd2402b9c2bdf5bd1fe09b6df7db', class: "metric-compact" }, h("span", { key: 'b5a7807764a897663ce9d37111188c26bcf2cb6d', class: "metric-label" }, "DET"), h("span", { key: '17ec09407ac24800e0ec965c7b3a037730a6afd4', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: '5aa0b6f4d1643e3ec224d1a9d89d4d37407d3c58', class: "metric-compact" }, h("span", { key: '6b8efdcf07e9eac7d5036a508804b017ccedaea9', class: "metric-label" }, "RATE"), h("span", { key: '038a5c3377185784c806c614f0c098e417360acf', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: '3317e18916b62bce70cc02540cfc274d588b466a', class: "watermark" }, h("img", { key: 'adf070f99c17c3fdfc3e2c69b1a63dfef66ad71e', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            } })))), this.isMaskReady && (h("div", { key: 'cf81504f7f129a2bb2789dd7addfe8d365fd7973', class: "overlay-mask" }, h("div", { key: 'b0f8ab1e02d1731295b95cbca4b44be430c6104d', class: "card-outline" }, h("div", { key: 'fadb33b8dc3c2cbfbb78aa0ff4d273b2b26a3565', class: "side side-top" }), h("div", { key: '3f3ca187195c78f2c3daffa481cc275f970c68a5', class: "side side-right" }), h("div", { key: '1e6bac145a85bbee2dab24da81b8064bc4ac282b', class: "side side-bottom" }), h("div", { key: '9bef1cd7afcef6cb1975a1103ec57d33d89f7640', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '9198d8b8fb1f4a17ec615943a09844f47a639048', class: "guide-text" }, this.enableQualityValidation && this.hasDocumentDetected && this.qualityFeedback.message ?
+            this.qualityFeedback.message :
+            'Alinee su identificación con el marco')), this.enableQualityValidation && this.hasDocumentDetected && captureState.isVideoActive && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("div", { key: '04afa661c1d988d9bedb48c78672de233dd49f9b', class: `quality-indicator ${this.qualityFeedback.hasIssues ? 'warning' : 'good'}` }, h("div", { key: 'bc789e19894de1d3dfd4a232e05e612d804e0e6c', class: "quality-score" }, this.qualityFeedback.score > 0 ? `${this.qualityFeedback.score}%` : ''), h("div", { key: '0750f5e5dfdb7a7c054d01965146d34a5bb4485a', class: `quality-status ${this.qualityFeedback.canCapture ? 'ready' : 'not-ready'}` }, this.qualityFeedback.canCapture ? '✓' : '!')))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (h("button", { key: 'cbe391726b5d62acbb466c36b135e0556fc488f7', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), captureState.isVideoActive && (h("div", { key: '929f8fe054b30e3c30bf066319e957a633fa587c', class: "camera-controls" }, h("button", { key: 'b4f68dd3a6865cba49c3f5d38c43874b7b9b364d', 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: 'c9315ff70704fdc265af07bf765b6247814563e6', class: "camera-selector-dropdown" }, h("div", { key: 'f4950e7e3c3e279c48310a4049550f3143fb4d3f', class: "camera-selector-header" }, h("span", { key: '4cfacf909549b0e18bd8ac6e54e127ce09b75335' }, "Seleccionar C\u00E1mara"), h("button", { key: '13d7679c5235f41f0dbc38b9f397483cf4ec9ffd', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), h("div", { key: '6c97cb8ba9486c33a633901d9dd49765f87d92ed', 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}`), cameraInfo.selectedCameraId === camera.id && (h("span", { class: "selected-indicator" }, "\u2713")))))), h("div", { key: '35796316fc950b8491f6167303b549b098abbf58', class: "device-info" }, h("small", { key: '83c59a8cb0c0b67a37163fe75c1f1f383fcb00f4' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (h("div", { key: 'be5b316abb21c06cf5bb69ed090d43d45537a9e6', class: "capture-animation" })), captureState.showFlipAnimation && (h("div", { key: '43e64fcc325c7c96871a99838c5fa094c6774af2', class: "flip-animation" }, h("div", { key: '39223d9b593716e76912ade58b556c7212a7e05f', class: "id-card-icon" }), h("div", { key: '79463b43724c3c56c45bd5b41337117d7d415618', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (h("div", { key: '7be8ca4d0bd59b1e4127254ff68e41321aa387cc', class: "success-animation" }, h("div", { key: '03a3e625f622c546a3016f85e029f9ea165f65c3', class: "check-icon" }), h("div", { key: '9c63faad517dad4b2ede8ec5a0998ad0b5c807d5', class: "success-text" }, "\u00A1Proceso completado!"))), h("div", { key: '94aa38c67fdaf328e74a2c1ec476987bf8e483d5', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (h("div", { key: '52a460f2fe11505158331cc06d7121db80bdfed9', class: "status-spinner" })), h("div", { key: '1eabfed00df31ff30fdf818f3d33cd837a7f31a5', class: "status-content" }, h("div", { key: '4bdbadf18fc48f2fad5dafd9ddf4a78f0a81dbf5', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (h("div", { key: '14c41346fc9fc306315cdda1c54ec1e828c38f62', class: "status-description" }, this.currentStatus.description)))), this.debug && (h("div", { key: '21fb0ca08547143648097f2aa4f3eb3ade73bce1', class: "performance-monitor" }, h("div", { key: '88c990f42b5c87c9bc971acd228fc84bacec861b', class: "performance-expanded" }, h("div", { key: '351215f4b8ab202b42a4c9b0bfa8665485469f64', class: "metrics-row" }, h("div", { key: '28a2c5386ba99850f7dc41add6fb4ef073a6b8cb', class: "metric-compact" }, h("span", { key: '7a2ab758f9baf1264cd4ad70ff30f42a35c41065', class: "metric-label" }, "FPS"), h("span", { key: '1c4370d016f2bdcf61275b4869bddbd8109a7b2a', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), h("div", { key: 'e79c27b4cbad3e70f2df917a5147dd125d51304d', class: "metric-compact" }, h("span", { key: 'aee4c178ae751cfe94735ef9fcb78f273f9cb885', class: "metric-label" }, "MEM"), h("span", { key: '823e98dec413968ee5080b29839729e6ac9f91d2', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), h("div", { key: 'e29037f684c82579a711aff022060c97ab9d93cf', class: "metrics-row" }, h("div", { key: '2917f3c4b026e3106fad741944e582aff36e10e0', class: "metric-compact" }, h("span", { key: 'e8783e8e2b18b29b37342eea376a75f257a46850', class: "metric-label" }, "INF"), h("span", { key: '30cdc1db3189135bc772aab5c31e081294ebd431', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), h("div", { key: 'c481ec26394e35efe38047e5fa1b835e520f49b8', class: "metric-compact" }, h("span", { key: 'c806cae91f3fcad896bd6053b6a0391ab518ab6f', class: "metric-label" }, "FRAME"), h("span", { key: 'af9996e2093c918ea903d036e637905baeef1aa2', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), h("div", { key: '48422447a6d00f78a9f861bfc50de4ef5a628a57', class: "metrics-row" }, h("div", { key: 'c88a03fbff56f68796df33187256fd5a5a68f763', class: "metric-compact" }, h("span", { key: '5e366c35865f8bf45aecac126ce98e0e17be0825', class: "metric-label" }, "DET"), h("span", { key: '123570ac9ae59cf5ef1b992ea6c4563b753990c3', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), h("div", { key: 'dea3a496f84e80f9d6f27173c8fa2e4149bf8e0b', class: "metric-compact" }, h("span", { key: 'fe47d6c16ca84fff8824bef92d8ce9efe50dfa38', class: "metric-label" }, "RATE"), h("span", { key: '873846eb42c1ed97f4e9493871e51741766c852f', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), h("div", { key: 'b485b1d8fafee0314ffbf1c7934ffc9a3d4c6902', class: "watermark" }, h("img", { key: 'f5fae340c3e96ecafe26aa819dbc2411038aa953', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -1625,15 +2447,38 @@ const JaakStamps = class {
         if (allSidesAligned && bestBox) {
             cardOutline?.classList.add('perfect-match');
             corners?.forEach(corner => corner.classList.add('perfect-match'));
-            if (!this.hasScreenshotTaken) {
+            // Check quality validation before allowing capture
+            const qualityCheckPassed = !this.enableQualityValidation || this.qualityFeedback.canCapture;
+            // Debug logging
+            this.logger.state('CAPTURE_EVALUATION', {
+                allSidesAligned: true,
+                hasScreenshotTaken: this.hasScreenshotTaken,
+                qualityCheckPassed,
+                enableQualityValidation: this.enableQualityValidation,
+                qualityFeedback: this.qualityFeedback,
+                captureDelay: this.captureDelay,
+                alignmentStartTime: this.alignmentStartTime
+            });
+            if (!this.hasScreenshotTaken && qualityCheckPassed) {
                 const currentTime = Date.now();
                 // Initialize alignment start time if not set
                 if (!this.alignmentStartTime) {
                     this.alignmentStartTime = currentTime;
+                    this.logger.state('ALIGNMENT_TIMER_STARTED', { startTime: currentTime });
                 }
-                // Check if document has been aligned for 1 second
+                // Check if document has been aligned for the configured delay
                 const alignmentDuration = currentTime - this.alignmentStartTime;
-                if (alignmentDuration >= 1000) {
+                this.logger.state('ALIGNMENT_DURATION_CHECK', {
+                    alignmentDuration,
+                    captureDelay: this.captureDelay,
+                    readyToCapture: alignmentDuration >= this.captureDelay
+                });
+                if (alignmentDuration >= this.captureDelay) {
+                    this.logger.state('TRIGGERING_CAPTURE', {
+                        alignmentDuration,
+                        captureDelay: this.captureDelay,
+                        qualityScore: this.qualityFeedback.score
+                    });
                     this.lastDetectedBox = bestBox;
                     this.takeScreenshot().catch(error => {
                         this.logger.error('Error al tomar captura de pantalla:', error);
@@ -1645,6 +2490,17 @@ const JaakStamps = class {
                     }, 2000);
                 }
             }
+            else if (!qualityCheckPassed) {
+                // Reset alignment timer if quality check fails
+                this.logger.state('QUALITY_CHECK_FAILED', {
+                    enableQualityValidation: this.enableQualityValidation,
+                    canCapture: this.qualityFeedback.canCapture,
+                    qualityScore: this.qualityFeedback.score,
+                    hasIssues: this.qualityFeedback.hasIssues
+                });
+                this.alignmentStartTime = undefined;
+                cardOutline?.classList.add('quality-warning');
+            }
         }
         else {
             cardOutline?.classList.remove('perfect-match');
@@ -1820,7 +2676,12 @@ const JaakStamps = class {
         }
     }
     resetDetection() {
+        const currentCaptureState = this.stateManager.getCaptureState();
+        const wasVideoActive = currentCaptureState.isVideoActive;
         this.stateManager.reset();
+        if (wasVideoActive) {
+            this.stateManager.updateCaptureState({ isVideoActive: true });
+        }
         this.hasScreenshotTaken = false;
         this.startTime = Date.now();
         this.frameSkipCounter = 0;
@@ -1828,12 +2689,12 @@ const JaakStamps = class {
         this.lastInferenceTime = 0;
         this.detectionBoxes = [];
         this.alignmentStartTime = undefined;
+        this.hasDocumentDetected = false;
         if (this.alignmentTimer) {
             clearTimeout(this.alignmentTimer);
             this.alignmentTimer = undefined;
         }
-        const captureState = this.stateManager.getCaptureState();
-        if (captureState.isVideoActive && this.detectionService.isModelLoaded()) {
+        if (wasVideoActive && this.detectionService.isModelLoaded()) {
             this.updateStatus('Captura reiniciada', 'Buscando documento en el marco de captura', 'active');
             this.detectFrame();
         }
@@ -1847,6 +2708,7 @@ const JaakStamps = class {
             this.videoStream = undefined;
             this.stateManager.updateCaptureState({ isVideoActive: false, isLoading: false });
         }
+        this.isMaskReady = false;
         this.updateStatus('Sesión finalizada', '', 'ready');
         this.detectionBoxes = [];
         this.cleanup();