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

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

@@ -720,346 +720,15 @@ 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";
@@ -1069,13 +738,11 @@ class DetectionService {
     preprocessCanvas;
     preprocessCtx;
     captureCanvas;
-    constructor(logger, debug = false, useDocumentClassification = false, qualityThresholds = {}) {
+    constructor(logger, debug = false, useDocumentClassification = false) {
         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() {
@@ -1419,164 +1086,6 @@ 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 {
@@ -1590,12 +1099,7 @@ 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, {
-            minQualityScore: config.minQualityScore,
-            minFocusScore: config.minFocusScore,
-            minBlurScore: config.minBlurScore,
-            maxReflectionScore: config.maxReflectionScore
-        });
+        const detectionService = new DetectionService(logger, config.debug, config.useDocumentClassification);
         // Register services
         this.services.set('eventBus', eventBus);
         this.services.set('logger', logger);
@@ -1639,7 +1143,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}.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 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}}.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 JaakStamps = class {
     constructor(hostRef) {
@@ -1649,18 +1153,12 @@ const JaakStamps = class {
     }
     get el() { return index.getElement(this); }
     debug = false;
-    alignmentTolerance = 10;
-    maskSize = 90;
-    cropMargin = 0;
+    alignmentTolerance = 20;
+    maskSize = 80;
+    cropMargin = 20;
     useDocumentClassification = false;
     preferredCamera = 'auto';
     captureDelay = 1000;
-    enableQualityValidation = true;
-    qualityThreshold = 60;
-    minQualityScore = 45;
-    minFocusScore = 16;
-    minBlurScore = 22;
-    maxReflectionScore = 15;
     captureCompleted;
     isReady;
     // State derived from services
@@ -1679,12 +1177,6 @@ const JaakStamps = class {
         type: 'initializing',
         isInitialized: false
     };
-    qualityFeedback = {
-        message: 'Analizando calidad...',
-        score: 0,
-        hasIssues: false,
-        canCapture: false
-    };
     performanceData = {
         fps: 0,
         inferenceTime: 0,
@@ -1753,13 +1245,7 @@ const JaakStamps = class {
             cropMargin: this.cropMargin,
             useDocumentClassification: this.useDocumentClassification,
             preferredCamera: this.preferredCamera,
-            captureDelay: this.captureDelay,
-            enableQualityValidation: this.enableQualityValidation,
-            qualityThreshold: this.qualityThreshold,
-            minQualityScore: this.minQualityScore,
-            minFocusScore: this.minFocusScore,
-            minBlurScore: this.minBlurScore,
-            maxReflectionScore: this.maxReflectionScore
+            captureDelay: this.captureDelay
         };
         this.serviceContainer = new ServiceContainer(config);
         this.logger = this.serviceContainer.getLogger();
@@ -1819,26 +1305,6 @@ const JaakStamps = class {
             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) {
@@ -2085,63 +1551,6 @@ const JaakStamps = class {
             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');
@@ -2243,36 +1652,8 @@ const JaakStamps = class {
             // Measure preprocessing and inference time
             const inferenceStartTime = performance.now();
             const inputTensor = this.detectionService.preprocess(this.videoRef);
-            // 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
-                };
-            }
+            // Standard detection without quality validation
+            const detections = await this.detectionService.runInference(inputTensor);
             const inferenceTime = performance.now() - inferenceStartTime;
             // Record ONNX performance metrics
             if (this.debug) {
@@ -2280,7 +1661,7 @@ const JaakStamps = class {
             }
             // Update best score logic
             if (this.startTime && Date.now() - this.startTime < 5000) {
-                detections.forEach(detection => {
+                detections.forEach((detection) => {
                     const isWellPositioned = this.detectionService.isCardInFrame(detection);
                     const effectiveScore = isWellPositioned ? detection.score * 1.2 : detection.score;
                     if (effectiveScore > captureState.bestScore) {
@@ -2366,7 +1747,7 @@ const JaakStamps = class {
             availableCameras: [],
             selectedCameraId: null,
             deviceType: 'desktop'};
-        return (index.h("div", { key: 'd71fc140c7fc87160ceaf479f9b9beae7685e9bc', class: "detector-container" }, index.h("div", { key: 'd83347ab6ccacfe940fb66d17adc21cff126d875', class: "video-container" }, index.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' } }), index.h("div", { key: 'c957341c1a750a1732afd6bb1045c1ba9bb2993d', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index$1) => (index.h("div", { key: index$1, class: "detection-box", style: {
+        return (index.h("div", { key: '7af79a0ff25b51790a9477cd7b338a0584172fc2', class: "detector-container" }, index.h("div", { key: 'ebf6a3811e0e599f29e98325b975a645e3bfb5e0', class: "video-container" }, index.h("video", { key: '5208fc9574fa78b1149be5839bc26d04bf9bcdfc', ref: el => this.videoRef = el, autoplay: true, muted: true, playsinline: true, class: this.shouldMirrorVideo ? 'mirror' : '', style: { display: captureState.isVideoActive ? 'block' : 'none' } }), index.h("div", { key: 'b507c786eccbd21acdd884ef50bc6ec280b9d437', ref: el => this.detectionContainer = el, class: `detection-overlay ${this.shouldMirrorVideo ? 'mirror' : ''}` }, this.debug && this.detectionBoxes.map((box, index$1) => (index.h("div", { key: index$1, class: "detection-box", style: {
                 position: 'absolute',
                 left: `${box.x}px`,
                 top: `${box.y}px`,
@@ -2375,9 +1756,7 @@ const JaakStamps = class {
                 border: '2px solid #32406C',
                 pointerEvents: 'none',
                 boxSizing: 'border-box'
-            } })))), this.isMaskReady && (index.h("div", { key: 'cf81504f7f129a2bb2789dd7addfe8d365fd7973', class: "overlay-mask" }, index.h("div", { key: 'b0f8ab1e02d1731295b95cbca4b44be430c6104d', class: "card-outline" }, index.h("div", { key: 'fadb33b8dc3c2cbfbb78aa0ff4d273b2b26a3565', class: "side side-top" }), index.h("div", { key: '3f3ca187195c78f2c3daffa481cc275f970c68a5', class: "side side-right" }), index.h("div", { key: '1e6bac145a85bbee2dab24da81b8064bc4ac282b', class: "side side-bottom" }), index.h("div", { key: '9bef1cd7afcef6cb1975a1103ec57d33d89f7640', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.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 && (index.h("div", { key: '04afa661c1d988d9bedb48c78672de233dd49f9b', class: `quality-indicator ${this.qualityFeedback.hasIssues ? 'warning' : 'good'}` }, index.h("div", { key: 'bc789e19894de1d3dfd4a232e05e612d804e0e6c', class: "quality-score" }, this.qualityFeedback.score > 0 ? `${this.qualityFeedback.score}%` : ''), index.h("div", { key: '0750f5e5dfdb7a7c054d01965146d34a5bb4485a', class: `quality-status ${this.qualityFeedback.canCapture ? 'ready' : 'not-ready'}` }, this.qualityFeedback.canCapture ? '✓' : '!')))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("button", { key: 'cbe391726b5d62acbb466c36b135e0556fc488f7', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), captureState.isVideoActive && (index.h("div", { key: '929f8fe054b30e3c30bf066319e957a633fa587c', class: "camera-controls" }, index.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 ? (index.h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (index.h("div", { key: 'c9315ff70704fdc265af07bf765b6247814563e6', class: "camera-selector-dropdown" }, index.h("div", { key: 'f4950e7e3c3e279c48310a4049550f3143fb4d3f', class: "camera-selector-header" }, index.h("span", { key: '4cfacf909549b0e18bd8ac6e54e127ce09b75335' }, "Seleccionar C\u00E1mara"), index.h("button", { key: '13d7679c5235f41f0dbc38b9f397483cf4ec9ffd', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), index.h("div", { key: '6c97cb8ba9486c33a633901d9dd49765f87d92ed', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (index.h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, index.h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`), cameraInfo.selectedCameraId === camera.id && (index.h("span", { class: "selected-indicator" }, "\u2713")))))), index.h("div", { key: '35796316fc950b8491f6167303b549b098abbf58', class: "device-info" }, index.h("small", { key: '83c59a8cb0c0b67a37163fe75c1f1f383fcb00f4' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (index.h("div", { key: 'be5b316abb21c06cf5bb69ed090d43d45537a9e6', class: "capture-animation" })), captureState.showFlipAnimation && (index.h("div", { key: '43e64fcc325c7c96871a99838c5fa094c6774af2', class: "flip-animation" }, index.h("div", { key: '39223d9b593716e76912ade58b556c7212a7e05f', class: "id-card-icon" }), index.h("div", { key: '79463b43724c3c56c45bd5b41337117d7d415618', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (index.h("div", { key: '7be8ca4d0bd59b1e4127254ff68e41321aa387cc', class: "success-animation" }, index.h("div", { key: '03a3e625f622c546a3016f85e029f9ea165f65c3', class: "check-icon" }), index.h("div", { key: '9c63faad517dad4b2ede8ec5a0998ad0b5c807d5', class: "success-text" }, "\u00A1Proceso completado!"))), index.h("div", { key: '94aa38c67fdaf328e74a2c1ec476987bf8e483d5', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (index.h("div", { key: '52a460f2fe11505158331cc06d7121db80bdfed9', class: "status-spinner" })), index.h("div", { key: '1eabfed00df31ff30fdf818f3d33cd837a7f31a5', class: "status-content" }, index.h("div", { key: '4bdbadf18fc48f2fad5dafd9ddf4a78f0a81dbf5', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (index.h("div", { key: '14c41346fc9fc306315cdda1c54ec1e828c38f62', class: "status-description" }, this.currentStatus.description)))), this.debug && (index.h("div", { key: '21fb0ca08547143648097f2aa4f3eb3ade73bce1', class: "performance-monitor" }, index.h("div", { key: '88c990f42b5c87c9bc971acd228fc84bacec861b', class: "performance-expanded" }, index.h("div", { key: '351215f4b8ab202b42a4c9b0bfa8665485469f64', class: "metrics-row" }, index.h("div", { key: '28a2c5386ba99850f7dc41add6fb4ef073a6b8cb', class: "metric-compact" }, index.h("span", { key: '7a2ab758f9baf1264cd4ad70ff30f42a35c41065', class: "metric-label" }, "FPS"), index.h("span", { key: '1c4370d016f2bdcf61275b4869bddbd8109a7b2a', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), index.h("div", { key: 'e79c27b4cbad3e70f2df917a5147dd125d51304d', class: "metric-compact" }, index.h("span", { key: 'aee4c178ae751cfe94735ef9fcb78f273f9cb885', class: "metric-label" }, "MEM"), index.h("span", { key: '823e98dec413968ee5080b29839729e6ac9f91d2', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), index.h("div", { key: 'e29037f684c82579a711aff022060c97ab9d93cf', class: "metrics-row" }, index.h("div", { key: '2917f3c4b026e3106fad741944e582aff36e10e0', class: "metric-compact" }, index.h("span", { key: 'e8783e8e2b18b29b37342eea376a75f257a46850', class: "metric-label" }, "INF"), index.h("span", { key: '30cdc1db3189135bc772aab5c31e081294ebd431', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), index.h("div", { key: 'c481ec26394e35efe38047e5fa1b835e520f49b8', class: "metric-compact" }, index.h("span", { key: 'c806cae91f3fcad896bd6053b6a0391ab518ab6f', class: "metric-label" }, "FRAME"), index.h("span", { key: 'af9996e2093c918ea903d036e637905baeef1aa2', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), index.h("div", { key: '48422447a6d00f78a9f861bfc50de4ef5a628a57', class: "metrics-row" }, index.h("div", { key: 'c88a03fbff56f68796df33187256fd5a5a68f763', class: "metric-compact" }, index.h("span", { key: '5e366c35865f8bf45aecac126ce98e0e17be0825', class: "metric-label" }, "DET"), index.h("span", { key: '123570ac9ae59cf5ef1b992ea6c4563b753990c3', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), index.h("div", { key: 'dea3a496f84e80f9d6f27173c8fa2e4149bf8e0b', class: "metric-compact" }, index.h("span", { key: 'fe47d6c16ca84fff8824bef92d8ce9efe50dfa38', class: "metric-label" }, "RATE"), index.h("span", { key: '873846eb42c1ed97f4e9493871e51741766c852f', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), index.h("div", { key: 'b485b1d8fafee0314ffbf1c7934ffc9a3d4c6902', class: "watermark" }, index.h("img", { key: 'f5fae340c3e96ecafe26aa819dbc2411038aa953', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
+            } })))), this.isMaskReady && (index.h("div", { key: '53066c626b23daae351ea9a80409e8882434b0dd', class: "overlay-mask" }, index.h("div", { key: '77bb4048d43e328e57a5c7e1909e0a59c8957217', class: "card-outline" }, index.h("div", { key: 'ea0f2610d903f985286856ab69f8be24fd42148e', class: "side side-top" }), index.h("div", { key: 'dc671111ef4adf33aa41f4457fdf344ede23eb80', class: "side side-right" }), index.h("div", { key: '2475ec41577dca92b425542c8861c570ed7ecd3b', class: "side side-bottom" }), index.h("div", { key: 'a06171c8eb1bd6353a6464485604560d73ac04b7', class: "side side-left" }), !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("div", { key: 'ecfd98f36d457fe7282b26f6a0efef5361380c76', class: "guide-text" }, "Alinee su identificaci\u00F3n con el marco"))), captureState.step === 'back' && !captureState.showFlipAnimation && !captureState.showSuccessAnimation && (index.h("button", { key: 'f3c7b66500110437e9e4a7442cb327f2fdc6d71f', class: "skip-button", onClick: () => this.skipBackCapture(), type: "button" }, "Saltar reverso")), captureState.isVideoActive && (index.h("div", { key: 'b5b2a8dfc6dbcf381c32c4caa562c27ced2e3e56', class: "camera-controls" }, index.h("button", { key: '6b40d4649dfa22c5ea8ca90cacce35cd0ca53ff3', class: `camera-selector-button ${this.isSwitchingCamera ? 'loading' : ''}`, onClick: () => this.toggleCameraSelector(), type: "button", title: "Seleccionar c\u00E1mara", disabled: this.isSwitchingCamera }, this.isSwitchingCamera ? (index.h("div", { class: "button-spinner" })) : ('Cámaras')))), this.showCameraSelector && cameraInfo.availableCameras.length > 0 && (index.h("div", { key: '41feec90287510b08bd1090ad15586b323007c30', class: "camera-selector-dropdown" }, index.h("div", { key: '8310ebe3db842c463ad428b973f841053315a76f', class: "camera-selector-header" }, index.h("span", { key: '6693bdfa33643dfe73798d4f25b0c2d9de7aac7c' }, "Seleccionar C\u00E1mara"), index.h("button", { key: '8552d45e1482c570d7ff85588d4404eec7c369d7', class: "close-selector", onClick: () => this.toggleCameraSelector(), type: "button" }, "\u00D7")), index.h("div", { key: '5333ec0e5fb2c50a07a7c0b7d4dfb1bb4ee0df1c', class: "camera-list" }, cameraInfo.availableCameras.map((camera) => (index.h("button", { key: camera.id, class: `camera-option ${cameraInfo.selectedCameraId === camera.id ? 'selected' : ''}`, onClick: () => this.handleCameraSwitch(camera.id), type: "button" }, index.h("span", { class: "camera-label" }, camera.label || `Cámara ${cameraInfo.availableCameras.indexOf(camera) + 1}`), cameraInfo.selectedCameraId === camera.id && (index.h("span", { class: "selected-indicator" }, "\u2713")))))), index.h("div", { key: '8adf70b0e632c56a4784dec44621688809a3ff56', class: "device-info" }, index.h("small", { key: '2ea23922386ecda4a9011b50faba5efe4b4e60bb' }, "Dispositivo: ", cameraInfo.deviceType)))))), captureState.isCapturing && (index.h("div", { key: '8e693db67fe1e6ae8f11082b8993682b6d19b11d', class: "capture-animation" })), captureState.showFlipAnimation && (index.h("div", { key: '474489ed7848cdc163c492a5e19f5f13231e17b3', class: "flip-animation" }, index.h("div", { key: 'a9bd24ca21330882f001b7811077630eb1c30f50', class: "id-card-icon" }), index.h("div", { key: 'ffadb660a61e0f5e3e29bdc473d987e87dc4ad8a', class: "flip-text" }, "\u00A1Voltea tu identificaci\u00F3n!"))), captureState.showSuccessAnimation && (index.h("div", { key: 'd2522ee33aa159d49f040a293775892fb1cb81b5', class: "success-animation" }, index.h("div", { key: 'e7f899fac58bc9a3d51cf2cb89ee33bb320b241f', class: "check-icon" }), index.h("div", { key: 'd5d0ee1f37dbc659ca625ad03cbce325be0cf0a6', class: "success-text" }, "\u00A1Proceso completado!"))), index.h("div", { key: '425d347666032c3982a660ebee13b47670b996cb', class: `component-status status-${this.currentStatus.type}` }, (this.currentStatus.type === 'loading' || this.currentStatus.type === 'initializing') && (index.h("div", { key: '4d396fa107872f9a1e526fd59dc4edf279a05792', class: "status-spinner" })), index.h("div", { key: '232e9ae24c8cf5ef8ac0e3442e45a920799c724d', class: "status-content" }, index.h("div", { key: 'fe9dc0ca6d8e8276052bac7d2d44f1c7c9730364', class: "status-message" }, this.currentStatus.message), this.currentStatus.description && (index.h("div", { key: '6910c7ac78fd89e6fa1165446ec6d46fb356035c', class: "status-description" }, this.currentStatus.description)))), this.debug && (index.h("div", { key: '7282b8afaf03da53b01a23d04babd772528c3c14', class: "performance-monitor" }, index.h("div", { key: 'b582b3124fed13387cd70a02a34ab2bb541f3bfc', class: "performance-expanded" }, index.h("div", { key: '764bac2d61224b9a5f306f50934d410e1bd27787', class: "metrics-row" }, index.h("div", { key: '261563f8314a9f6069b1ac6362eb9c38936a9dc7', class: "metric-compact" }, index.h("span", { key: '4feea98eff86620c1bc90eb65d9799102423109d', class: "metric-label" }, "FPS"), index.h("span", { key: 'eb15f13b27b8aa50701ad3d11c4cf87200010b67', class: `metric-value ${this.performanceData.fps < 15 ? 'warning' : this.performanceData.fps < 10 ? 'danger' : 'good'}` }, this.performanceData.fps)), index.h("div", { key: '0813c35c2c33286f2276bfb5adce59b32c7bb597', class: "metric-compact" }, index.h("span", { key: '201e7bcb556e63b141e42a3ffc3419eb4284bfa8', class: "metric-label" }, "MEM"), index.h("span", { key: '4f6703cbe0128440d0f2f22f631035ab85422c64', class: `metric-value ${this.performanceData.memoryUsage > 100 ? 'warning' : this.performanceData.memoryUsage > 200 ? 'danger' : 'good'}` }, this.performanceData.memoryUsage, "MB"))), index.h("div", { key: '6343c361c93138b9ea66e8ae8acd361b93333f8c', class: "metrics-row" }, index.h("div", { key: 'd3c81fe597004bf380fae2d32f3a8314317e7769', class: "metric-compact" }, index.h("span", { key: 'fce572af3e200a611974dceef4da02f6aecedffc', class: "metric-label" }, "INF"), index.h("span", { key: '18dd78d54dcecfb70ddf59b782f87f8c6f208b0f', class: `metric-value ${this.performanceData.inferenceTime > 100 ? 'warning' : this.performanceData.inferenceTime > 200 ? 'danger' : 'good'}` }, this.performanceData.inferenceTime, "ms")), index.h("div", { key: '4c31ebfd835b017fd3e41b23d6bd9b19add511aa', class: "metric-compact" }, index.h("span", { key: '66b1a380b9479a8fc1e8c2385cb72aa4158dc74e', class: "metric-label" }, "FRAME"), index.h("span", { key: '3c6e41f7f11123c524d3a9df409345929d63f352', class: `metric-value ${this.performanceData.frameProcessingTime > 50 ? 'warning' : this.performanceData.frameProcessingTime > 100 ? 'danger' : 'good'}` }, this.performanceData.frameProcessingTime, "ms"))), index.h("div", { key: '3b522e2cdfe4bd9f1dd6eb0f91ee3577dc43e490', class: "metrics-row" }, index.h("div", { key: 'fa1e6f687b43aa2582b8b3426feb03a16c6493fc', class: "metric-compact" }, index.h("span", { key: 'a9355091e71a33a6a0d7cc6c11171dcda2e51b22', class: "metric-label" }, "DET"), index.h("span", { key: 'beca5a7ccf4853675cf8366bcf577ebfbd46c4f0', class: "metric-value good" }, this.performanceData.successfulDetections, "/", this.performanceData.totalDetections)), index.h("div", { key: '4b07fc9b3d35f99bc6e77c8726192cde0476a787', class: "metric-compact" }, index.h("span", { key: 'a1674b538f45328ee0afb00e582c07e0b4ccf553', class: "metric-label" }, "RATE"), index.h("span", { key: 'fd384a5137bc3df6c939d3d698a3ef80e9087030', class: `metric-value ${this.performanceData.detectionRate < 30 ? 'danger' : this.performanceData.detectionRate < 60 ? 'warning' : 'good'}` }, this.performanceData.detectionRate, "%")))))), index.h("div", { key: 'ebbaf15a0ad96e4da5bbf746c32d7a4abb51b973', class: "watermark" }, index.h("img", { key: '8e7d274b529d1f7020ec4a7225579792763f871a', src: "https://storage.googleapis.com/jaak-static/commons/powered-by-jaak.png", alt: "Powered by Jaak" })))));
     }
     // Utility methods
     updateDetectionBoxes(boxes) {
@@ -2449,19 +1828,14 @@ const JaakStamps = class {
         if (allSidesAligned && bestBox) {
             cardOutline?.classList.add('perfect-match');
             corners?.forEach(corner => corner.classList.add('perfect-match'));
-            // 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) {
+            if (!this.hasScreenshotTaken) {
                 const currentTime = Date.now();
                 // Initialize alignment start time if not set
                 if (!this.alignmentStartTime) {
@@ -2478,8 +1852,7 @@ const JaakStamps = class {
                 if (alignmentDuration >= this.captureDelay) {
                     this.logger.state('TRIGGERING_CAPTURE', {
                         alignmentDuration,
-                        captureDelay: this.captureDelay,
-                        qualityScore: this.qualityFeedback.score
+                        captureDelay: this.captureDelay
                     });
                     this.lastDetectedBox = bestBox;
                     this.takeScreenshot().catch(error => {
@@ -2492,17 +1865,6 @@ 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');