metag-verify 0.1.0 → 0.1.1

package/fesm2022/metag-verify.mjs

@@ -145,7 +145,7 @@ async function isVirtualCamera(stream) {
 }
 
 /** Versión que se envía en el header sdk-version (el backend no la valida). */
-const METAG_VERIFY_VERSION = '0.1.0';
+const METAG_VERIFY_VERSION = '0.1.1';
 
 // ARCHIVO GENERADO por scripts/brand.mjs (npm run brand). No editar a mano.
 // Recursos de marca incrustados para que el SDK no dependa de archivos externos.
@@ -277,6 +277,126 @@ class BrightnessBoost {
     }
 }
 
+// Apertura de la cámara. La trasera se elige con la misma regla que el SDK actual (captura de DPI):
+// 1) el lente "camera2 0" (el principal en Android, con enfoque automático), 2) la trasera con el número
+// más bajo ("camera 0, facing back"), 3) cualquiera "back/rear", 4) la que entregue facingMode "environment".
+const VIDEO_SIZE = { width: { ideal: 1920 }, height: { ideal: 1080 } };
+const REAR_LABEL = /back|rear|environment/i;
+const MAIN_REAR_LABEL = /camera2\s?0/i;
+const CAMERA_INDEX = /camera2?\s*(\d+)/i;
+async function openCamera(facing) {
+    if (facing === 'user') {
+        return getStream({ ...VIDEO_SIZE, facingMode: 'user' });
+    }
+    // Si ya hay permiso, los nombres están disponibles y se abre directo el lente principal.
+    const known = await preferredRearCamera();
+    let stream = await getStream(known ? { ...VIDEO_SIZE, deviceId: { exact: known } } : { ...VIDEO_SIZE, facingMode: { ideal: 'environment' } });
+    // Primera vez: los nombres aparecen después del permiso; si hay un lente mejor, se cambia a ese.
+    if (!known) {
+        const preferred = await preferredRearCamera();
+        const current = stream.getVideoTracks()[0]?.getSettings().deviceId;
+        if (preferred && preferred !== current) {
+            stopStream(stream);
+            stream = await getStream({ ...VIDEO_SIZE, deviceId: { exact: preferred } });
+        }
+    }
+    return stream;
+}
+/** Indica si el dispositivo tiene más de una cámara (para mostrar el botón de cambiar). */
+async function hasMultipleCameras() {
+    try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        return devices.filter(d => d.kind === 'videoinput').length > 1;
+    }
+    catch {
+        return false;
+    }
+}
+/** Android reporta los modos de enfoque unos instantes después de abrir la cámara: se reintenta. */
+const CAPABILITY_ATTEMPTS = 6;
+const CAPABILITY_RETRY_MS = 250;
+async function getCameraControls(stream) {
+    const caps = await readCapabilities(stream);
+    // Enfoque automático continuo cuando el lente lo soporta.
+    if (caps?.focusMode?.includes('continuous'))
+        await applyAdvanced(stream, { focusMode: 'continuous' });
+    return { tapFocus: caps?.focusMode?.includes('single-shot') === true };
+}
+/** Enfoca en un punto del cuadro; x e y van de 0 a 1 sobre la imagen real del lente. */
+function focusAt(stream, x, y) {
+    return applyAdvanced(stream, { focusMode: 'single-shot', pointsOfInterest: [{ x, y }] });
+}
+/** Vuelve al enfoque automático continuo después de enfocar al tocar. */
+function resumeAutofocus(stream) {
+    return applyAdvanced(stream, { focusMode: 'continuous' });
+}
+async function applyAdvanced(stream, constraint) {
+    const track = stream?.getVideoTracks()[0];
+    if (!track)
+        return false;
+    try {
+        await track.applyConstraints({ advanced: [constraint] });
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+function stopStream(stream) {
+    stream?.getTracks().forEach(track => track.stop());
+}
+function getStream(video) {
+    return navigator.mediaDevices.getUserMedia({ video, audio: false });
+}
+/**
+ * Lee las capacidades del lente esperando a que Android las reporte. ImageCapture obliga a Chrome
+ * a cargarlas; luego se reintenta unas veces hasta que aparezcan los modos de enfoque.
+ */
+async function readCapabilities(stream) {
+    const track = stream?.getVideoTracks()[0];
+    if (!track?.getCapabilities)
+        return undefined;
+    const ImageCaptureCtor = globalThis.ImageCapture;
+    if (ImageCaptureCtor) {
+        try {
+            await new ImageCaptureCtor(track).getPhotoCapabilities();
+        }
+        catch {
+            // Sin soporte: se sigue con los reintentos.
+        }
+    }
+    let caps = track.getCapabilities();
+    for (let i = 1; i < CAPABILITY_ATTEMPTS && !caps.focusMode?.length; i++) {
+        await new Promise(resolve => setTimeout(resolve, CAPABILITY_RETRY_MS));
+        if (track.readyState !== 'live')
+            return undefined;
+        caps = track.getCapabilities();
+    }
+    return caps;
+}
+/**
+ * Android numera las cámaras ("camera 0, facing back", "camera2 2, facing back"...) y la principal,
+ * la que tiene flash y enfoque automático, es la trasera con el número más bajo.
+ */
+function lowestIndexed(cams) {
+    const indexed = cams
+        .map(d => ({ d, n: Number(CAMERA_INDEX.exec(d.label)?.[1]) }))
+        .filter(c => Number.isFinite(c.n));
+    indexed.sort((a, b) => a.n - b.n);
+    return indexed[0]?.d;
+}
+async function preferredRearCamera() {
+    try {
+        const cams = (await navigator.mediaDevices.enumerateDevices()).filter(d => d.kind === 'videoinput' && d.label);
+        const rear = cams.filter(d => REAR_LABEL.test(d.label));
+        const chosen = rear.find(d => MAIN_REAR_LABEL.test(d.label)) ?? lowestIndexed(rear) ?? rear.find(d => /back/i.test(d.label)) ?? rear[0];
+        return chosen?.deviceId || null;
+    }
+    catch {
+        return null;
+    }
+}
+
 const JPEG_QUALITY = 0.75;
 /** Cuenta regresiva antes de tomar la foto: 3, 2, 1. */
 const COUNTDOWN_FROM = 3;
@@ -294,6 +414,9 @@ const TIPS = [
 const EMPTY_POSTER = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
 /** Tiempo que se muestra "Verificación completada" antes de cerrar. */
 const SUCCESS_HOLD_MS = 1200;
+/** Tiempo que se muestra el círculo de enfoque y tras el cual vuelve el enfoque continuo. */
+const FOCUS_RING_MS = 800;
+const FOCUS_HOLD_MS = 3000;
 const CAMERA_ERROR_MESSAGE = 'No pudimos acceder a la cámara. Revisa los permisos e intenta de nuevo.';
 /**
  * Foto Selfie, diseño A: cámara al 100% de la pantalla y botón rectangular "Tomar Fotografía".
@@ -310,6 +433,12 @@ class SelfieComponent {
         this.emptyPoster = EMPTY_POSTER;
         /** La cámara ya está transmitiendo imagen. */
         this.cameraReady = signal(false);
+        /** Por defecto la trasera; la frontal queda disponible con el botón de cambiar cámara. */
+        this.facing = signal('environment');
+        this.canSwitchCamera = signal(false);
+        this.tapFocus = false;
+        /** Punto donde se tocó para enfocar (px dentro de la pantalla); el id reinicia la animación. */
+        this.focusPoint = signal(null);
         this.tips = TIPS;
         this.tipIndex = signal(0);
         this.tipLeaving = signal(false);
@@ -323,6 +452,8 @@ class SelfieComponent {
         this.tipTimer = null;
         this.tipLeaveTimer = null;
         this.successTimer = null;
+        this.focusRingTimer = null;
+        this.focusHoldTimer = null;
         this.destroyed = false;
     }
     async ngAfterViewInit() {
@@ -334,6 +465,7 @@ class SelfieComponent {
         this.stopTips();
         if (this.successTimer)
             clearTimeout(this.successTimer);
+        this.clearFocusTimers();
         this.stopCountdown();
         this.stopCamera();
     }
@@ -352,6 +484,29 @@ class SelfieComponent {
             void this.captureAndSend();
         }, 1000);
     }
+    switchCamera() {
+        if (this.sending() || this.success() || this.countdown() !== null || !this.cameraReady())
+            return;
+        this.facing.update(f => (f === 'environment' ? 'user' : 'environment'));
+        this.stopCamera();
+        void this.startCamera();
+    }
+    /** Enfocar al tocar: se ignoran los toques sobre botones y textos. */
+    async onTap(event) {
+        if (!this.tapFocus || !this.cameraReady() || this.sending() || this.success())
+            return;
+        if (event.target.closest('button, .mv-hint'))
+            return;
+        const video = this.videoRef.nativeElement;
+        const rect = video.getBoundingClientRect();
+        const point = this.toVideoPoint(video, rect, event.clientX, event.clientY);
+        if (!point || !(await focusAt(this.stream, point.x, point.y)))
+            return;
+        this.clearFocusTimers();
+        this.focusPoint.set({ x: event.clientX - rect.left, y: event.clientY - rect.top, id: Date.now() });
+        this.focusRingTimer = setTimeout(() => this.focusPoint.set(null), FOCUS_RING_MS);
+        this.focusHoldTimer = setTimeout(() => void resumeAutofocus(this.stream), FOCUS_HOLD_MS);
+    }
     close() {
         if (this.sending() || this.success())
             return;
@@ -371,11 +526,9 @@ class SelfieComponent {
         void this.videoRef.nativeElement.play().catch(() => undefined);
     }
     async startCamera() {
+        this.cameraReady.set(false);
         try {
-            this.stream = await navigator.mediaDevices.getUserMedia({
-                video: { width: { ideal: 1920 }, height: { ideal: 1080 }, facingMode: 'user' },
-                audio: false,
-            });
+            this.stream = await openCamera(this.facing());
         }
         catch {
             this.dialog.set({ message: CAMERA_ERROR_MESSAGE, fatal: true });
@@ -392,8 +545,43 @@ class SelfieComponent {
         }
         const video = this.videoRef.nativeElement;
         video.srcObject = this.stream;
-        void this.brightness.raise();
+        // El brillo al máximo solo sirve con la frontal: la pantalla ilumina el rostro.
+        if (this.facing() === 'user')
+            void this.brightness.raise();
+        this.canSwitchCamera.set(await hasMultipleCameras());
         await video.play().catch(() => undefined);
+        // Las capacidades se leen con el video ya transmitiendo: algunos Android no reportan la linterna antes.
+        const stream = this.stream;
+        const controls = await getCameraControls(stream);
+        // Si mientras tanto se cambió o cerró la cámara, estos controles ya no aplican.
+        if (this.destroyed || stream !== this.stream)
+            return;
+        this.tapFocus = controls.tapFocus;
+    }
+    /**
+     * Convierte el toque en pantalla a coordenadas 0-1 de la imagen real del lente,
+     * considerando el recorte de object-fit: cover y el espejo de la frontal.
+     */
+    toVideoPoint(video, rect, clientX, clientY) {
+        if (!video.videoWidth || !video.videoHeight)
+            return null;
+        const scale = Math.max(rect.width / video.videoWidth, rect.height / video.videoHeight);
+        const shownW = video.videoWidth * scale;
+        const shownH = video.videoHeight * scale;
+        let x = (clientX - rect.left - (rect.width - shownW) / 2) / shownW;
+        const y = (clientY - rect.top - (rect.height - shownH) / 2) / shownH;
+        if (this.facing() === 'user')
+            x = 1 - x;
+        const clamp = (v) => Math.min(1, Math.max(0, v));
+        return { x: clamp(x), y: clamp(y) };
+    }
+    clearFocusTimers() {
+        if (this.focusRingTimer)
+            clearTimeout(this.focusRingTimer);
+        if (this.focusHoldTimer)
+            clearTimeout(this.focusHoldTimer);
+        this.focusRingTimer = null;
+        this.focusHoldTimer = null;
     }
     async captureAndSend() {
         const video = this.videoRef.nativeElement;
@@ -476,16 +664,19 @@ class SelfieComponent {
         this.countdown.set(null);
     }
     stopCamera() {
-        this.stream?.getTracks().forEach(track => track.stop());
+        stopStream(this.stream);
         this.stream = null;
+        this.tapFocus = false;
+        this.clearFocusTimers();
+        this.focusPoint.set(null);
         void this.brightness.restore();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelfieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelfieComponent, isStandalone: true, selector: "mv-selfie", inputs: { submit: "submit" }, outputs: { completed: "completed", closed: "closed", blocked: "blocked", failed: "failed" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"mv-camera\">\n  <!-- poster transparente: evita el \u00EDcono gris de \"play\" que Android WebView muestra mientras arranca la c\u00E1mara -->\n  <video #video class=\"mv-video\" [class.mv-video--ready]=\"cameraReady()\" [poster]=\"emptyPoster\"\n         muted autoplay playsinline (playing)=\"cameraReady.set(true)\"></video>\n  <div class=\"mv-scrim\" aria-hidden=\"true\"></div>\n\n  <div class=\"mv-ui\">\n    <header class=\"mv-head\">\n      <div class=\"mv-title-group\">\n        <img class=\"mv-title-logo\" [src]=\"gLogo\" alt=\"\" aria-hidden=\"true\" />\n        <h2 class=\"mv-title\">Foto Selfie</h2>\n      </div>\n      <button type=\"button\" class=\"mv-close\" aria-label=\"Cerrar\" [disabled]=\"sending() || success()\" (click)=\"close()\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" /></svg>\n      </button>\n    </header>\n\n    <div class=\"mv-spacer\"></div>\n\n    <footer class=\"mv-foot\">\n      @if (countdown() !== null) {\n        <!-- @for recrea el elemento en cada n\u00FAmero para repetir la animaci\u00F3n -->\n        @for (n of [countdown()]; track n) {\n          <p class=\"mv-hint mv-countdown\" aria-live=\"assertive\">{{ n }}</p>\n        }\n      } @else if (success()) {\n        <p class=\"mv-hint mv-success-text\" role=\"status\" aria-live=\"polite\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12.5l4.5 4.5L19 7.5\" /></svg>\n          Verificaci\u00F3n completada\n        </p>\n      } @else {\n        @if (sending()) {\n          <p class=\"mv-hint\" aria-live=\"polite\">Validando foto...</p>\n        } @else {\n          <!-- Tips rotativos: el recuadro se queda fijo y solo cambia el contenido -->\n          <div class=\"mv-hint mv-tips\">\n            <span class=\"mv-sr-only\">{{ tips[0].text }}</span>\n            @for (i of [tipIndex()]; track i) {\n              <span class=\"mv-tip\" [class.mv-tip--leaving]=\"tipLeaving()\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 24 24\"><path [attr.d]=\"tips[i].icon\" /></svg>\n                {{ tips[i].text }}\n              </span>\n            }\n          </div>\n        }\n      }\n      @if (sending()) {\n        <span class=\"mv-sending-bar\" aria-hidden=\"true\"></span>\n      } @else if (success()) {\n        <span class=\"mv-success-bar\" aria-hidden=\"true\"></span>\n      }\n      <!-- Oculto mientras se env\u00EDa y al confirmar el \u00E9xito; vuelve a aparecer si hay error para reintentar -->\n      @if (!sending() && !success()) {\n        <button type=\"button\" class=\"mv-button\" [disabled]=\"!cameraReady() || countdown() !== null\" (click)=\"takePhoto()\">\n          Tomar Fotograf\u00EDa\n        </button>\n      }\n    </footer>\n  </div>\n\n  @if (dialog(); as d) {\n    <mv-dialog [message]=\"d.message\" (closed)=\"onDialogClosed()\"></mv-dialog>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.mv-camera{position:relative;height:100%;overflow:hidden;background:#000}.mv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#000;opacity:0;transition:opacity .3s ease}.mv-video--ready{opacity:1}.mv-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00000080,#0000 22% 62%,#0009)}.mv-ui{position:absolute;inset:0;display:flex;flex-direction:column;padding:max(22px,env(safe-area-inset-top)) 22px max(22px,env(safe-area-inset-bottom));color:#fff}.mv-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.mv-title-group{display:flex;align-items:center;gap:10px;min-width:0}.mv-title-logo{flex-shrink:0;width:36px;height:36px}.mv-title{margin:0;font-family:var(--mv-font);font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.2;font-size:26px;line-height:36px;color:#fff}.mv-close{flex-shrink:0;width:36px;height:36px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#ffffff2e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer}.mv-close svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}.mv-close:disabled{opacity:.4;cursor:default}.mv-close:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.mv-spacer{flex:1}.mv-foot{display:flex;flex-direction:column;gap:16px}.mv-hint{margin:0 0 16px;font-family:var(--mv-font);font-size:14px;font-weight:400;line-height:1.5;align-self:center;max-width:100%;padding:10px 18px;border-radius:14px;background:#09090b80;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:18px;font-weight:500;color:#fff;text-align:center}.mv-tips{width:min(100%,300px);overflow:hidden}.mv-tip{display:inline-flex;align-items:center;justify-content:center;gap:8px;animation:mv-tip-in .3s ease-out backwards;transition:opacity .25s ease,transform .25s ease}.mv-tip svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mv-tip--leaving{opacity:0;transform:translateY(-6px)}@keyframes mv-tip-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.mv-tip{animation:none;transition:none}}.mv-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.mv-countdown{min-width:64px;font-size:28px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:#fff;animation:mv-count-pop .35s ease-out both}@keyframes mv-count-pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.mv-countdown{animation:none}}.mv-button{height:52px;border:0;border-radius:14px;font-family:var(--mv-font);font-size:15px;font-weight:600;letter-spacing:-.01em;width:100%;background:var(--mv-primary);color:#fff;cursor:pointer;transition:background-color .15s ease,transform .12s ease,opacity .15s ease;font-size:18px}.mv-button:hover{background:var(--mv-primary-hover)}.mv-button:active{transform:scale(.985)}.mv-button:disabled{opacity:.5;cursor:default;transform:none}.mv-button:focus-visible{outline:2px solid var(--mv-primary);outline-offset:3px}.mv-sending-bar{position:relative;height:8px;border-radius:999px;background:#ffffff4d;overflow:hidden}.mv-sending-bar:after{content:\"\";position:absolute;top:0;bottom:0;width:40%;border-radius:999px;background:var(--mv-accent);animation:mv-track-slide 1.1s cubic-bezier(.6,.1,.4,.9) infinite}@keyframes mv-track-slide{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion: reduce){.mv-sending-bar:after{animation-duration:2.4s}}.mv-success-bar{height:8px;border-radius:999px;background:#ffffff4d;overflow:hidden}.mv-success-bar:after{content:\"\";display:block;height:100%;border-radius:999px;background:var(--mv-success);animation:mv-success-fill .35s ease-out both}@keyframes mv-success-fill{0%{width:40%}to{width:100%}}.mv-success-text{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;animation:mv-count-pop .3s ease-out both}.mv-success-text svg{width:22px;height:22px;flex-shrink:0;stroke:var(--mv-success);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}@media (prefers-reduced-motion: reduce){.mv-success-bar:after,.mv-success-text{animation:none}}@media (min-width: 768px){.mv-ui{padding:28px 32px}.mv-foot{width:100%;max-width:380px;margin:0 auto}}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "mv-dialog", inputs: ["title", "message", "buttonLabel"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelfieComponent, isStandalone: true, selector: "mv-selfie", inputs: { submit: "submit" }, outputs: { completed: "completed", closed: "closed", blocked: "blocked", failed: "failed" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"mv-camera\">\n  <!-- poster transparente: evita el \u00EDcono gris de \"play\" que Android WebView muestra mientras arranca la c\u00E1mara -->\n  <video #video class=\"mv-video\" [class.mv-video--ready]=\"cameraReady()\" [class.mv-video--mirror]=\"facing() === 'user'\" [poster]=\"emptyPoster\"\n         muted autoplay playsinline (playing)=\"cameraReady.set(true)\"></video>\n  <div class=\"mv-scrim\" aria-hidden=\"true\"></div>\n\n  @if (focusPoint(); as p) {\n    @for (id of [p.id]; track id) {\n      <span class=\"mv-focus-ring\" [style.left.px]=\"p.x\" [style.top.px]=\"p.y\" aria-hidden=\"true\"></span>\n    }\n  }\n\n  <!-- Tocar la imagen enfoca en ese punto (si el lente lo soporta) -->\n  <div class=\"mv-ui\" (click)=\"onTap($event)\">\n    <header class=\"mv-head\">\n      <div class=\"mv-title-group\">\n        <img class=\"mv-title-logo\" [src]=\"gLogo\" alt=\"\" aria-hidden=\"true\" />\n        <h2 class=\"mv-title\">Foto Selfie</h2>\n      </div>\n      <!-- La X arriba y debajo los controles en columna, como en las apps de c\u00E1mara -->\n      <div class=\"mv-actions\">\n        <button type=\"button\" class=\"mv-close\" aria-label=\"Cerrar\" [disabled]=\"sending() || success()\" (click)=\"close()\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" /></svg>\n        </button>\n        @if (!sending() && !success()) {\n          <div class=\"mv-tools\">\n            @if (canSwitchCamera()) {\n              <button type=\"button\" class=\"mv-close mv-tool\" aria-label=\"Cambiar c\u00E1mara\"\n                      [disabled]=\"!cameraReady() || countdown() !== null\" (click)=\"switchCamera()\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5 M13 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5 M12 9a3 3 0 1 0 0 6a3 3 0 1 0 0-6 M18 22l-3-3l3-3 M6 2l3 3l-3 3\" /></svg>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    </header>\n\n    <div class=\"mv-spacer\"></div>\n\n    <footer class=\"mv-foot\">\n      @if (countdown() !== null) {\n        <!-- @for recrea el elemento en cada n\u00FAmero para repetir la animaci\u00F3n -->\n        @for (n of [countdown()]; track n) {\n          <p class=\"mv-hint mv-countdown\" aria-live=\"assertive\">{{ n }}</p>\n        }\n      } @else if (success()) {\n        <p class=\"mv-hint mv-success-text\" role=\"status\" aria-live=\"polite\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12.5l4.5 4.5L19 7.5\" /></svg>\n          Verificaci\u00F3n completada\n        </p>\n      } @else {\n        @if (sending()) {\n          <p class=\"mv-hint\" aria-live=\"polite\">Validando foto...</p>\n        } @else {\n          <!-- Tips rotativos: el recuadro se queda fijo y solo cambia el contenido -->\n          <div class=\"mv-hint mv-tips\">\n            <span class=\"mv-sr-only\">{{ tips[0].text }}</span>\n            @for (i of [tipIndex()]; track i) {\n              <span class=\"mv-tip\" [class.mv-tip--leaving]=\"tipLeaving()\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 24 24\"><path [attr.d]=\"tips[i].icon\" /></svg>\n                {{ tips[i].text }}\n              </span>\n            }\n          </div>\n        }\n      }\n      @if (sending()) {\n        <span class=\"mv-sending-bar\" aria-hidden=\"true\"></span>\n      } @else if (success()) {\n        <span class=\"mv-success-bar\" aria-hidden=\"true\"></span>\n      }\n      <!-- Oculto mientras se env\u00EDa y al confirmar el \u00E9xito; vuelve a aparecer si hay error para reintentar -->\n      @if (!sending() && !success()) {\n        <button type=\"button\" class=\"mv-button\" [disabled]=\"!cameraReady() || countdown() !== null\" (click)=\"takePhoto()\">\n          Tomar Fotograf\u00EDa\n        </button>\n      }\n    </footer>\n  </div>\n\n  @if (dialog(); as d) {\n    <mv-dialog [message]=\"d.message\" (closed)=\"onDialogClosed()\"></mv-dialog>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.mv-camera{position:relative;height:100%;overflow:hidden;background:#000}.mv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .3s ease}.mv-video--mirror{transform:scaleX(-1)}.mv-video--ready{opacity:1}.mv-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00000080,#0000 22% 62%,#0009)}.mv-focus-ring{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #fff;pointer-events:none;animation:mv-focus .8s ease-out both}@keyframes mv-focus{0%{opacity:0;transform:scale(1.4)}25%{opacity:1;transform:scale(1)}75%{opacity:1}to{opacity:0;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.mv-focus-ring{animation:none}}.mv-ui{position:absolute;inset:0;display:flex;flex-direction:column;padding:max(22px,env(safe-area-inset-top)) 22px max(22px,env(safe-area-inset-bottom));color:#fff}.mv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.mv-title-group{display:flex;align-items:center;gap:10px;min-width:0}.mv-title-logo{flex-shrink:0;width:36px;height:36px}.mv-title{margin:0;font-family:var(--mv-font);font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.2;font-size:26px;line-height:36px;color:#fff}.mv-close{flex-shrink:0;width:36px;height:36px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#ffffff2e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer}.mv-close svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}.mv-close:disabled{opacity:.4;cursor:default}.mv-close:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.mv-actions{display:flex;flex-direction:column;align-items:center;gap:16px}.mv-tools{display:flex;flex-direction:column;gap:12px}.mv-tool svg{width:20px;height:20px;stroke-width:2;stroke-linejoin:round}.mv-spacer{flex:1}.mv-foot{display:flex;flex-direction:column;gap:16px}.mv-hint{margin:0 0 16px;font-family:var(--mv-font);font-size:14px;font-weight:400;line-height:1.5;align-self:center;max-width:100%;padding:10px 18px;border-radius:14px;background:#09090b80;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:18px;font-weight:500;color:#fff;text-align:center}.mv-tips{width:min(100%,300px);overflow:hidden}.mv-tip{display:inline-flex;align-items:center;justify-content:center;gap:8px;animation:mv-tip-in .3s ease-out backwards;transition:opacity .25s ease,transform .25s ease}.mv-tip svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mv-tip--leaving{opacity:0;transform:translateY(-6px)}@keyframes mv-tip-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.mv-tip{animation:none;transition:none}}.mv-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.mv-countdown{min-width:64px;font-size:28px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:#fff;animation:mv-count-pop .35s ease-out both}@keyframes mv-count-pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.mv-countdown{animation:none}}.mv-button{height:52px;border:0;border-radius:14px;font-family:var(--mv-font);font-size:15px;font-weight:600;letter-spacing:-.01em;width:100%;background:var(--mv-primary);color:#fff;cursor:pointer;transition:background-color .15s ease,transform .12s ease,opacity .15s ease;font-size:18px}.mv-button:hover{background:var(--mv-primary-hover)}.mv-button:active{transform:scale(.985)}.mv-button:disabled{opacity:.5;cursor:default;transform:none}.mv-button:focus-visible{outline:2px solid var(--mv-primary);outline-offset:3px}.mv-sending-bar{position:relative;height:8px;border-radius:999px;background:#ffffff4d;overflow:hidden}.mv-sending-bar:after{content:\"\";position:absolute;top:0;bottom:0;width:40%;border-radius:999px;background:var(--mv-accent);animation:mv-track-slide 1.1s cubic-bezier(.6,.1,.4,.9) infinite}@keyframes mv-track-slide{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion: reduce){.mv-sending-bar:after{animation-duration:2.4s}}.mv-success-bar{height:8px;border-radius:999px;background:#ffffff4d;overflow:hidden}.mv-success-bar:after{content:\"\";display:block;height:100%;border-radius:999px;background:var(--mv-success);animation:mv-success-fill .35s ease-out both}@keyframes mv-success-fill{0%{width:40%}to{width:100%}}.mv-success-text{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;animation:mv-count-pop .3s ease-out both}.mv-success-text svg{width:22px;height:22px;flex-shrink:0;stroke:var(--mv-success);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}@media (prefers-reduced-motion: reduce){.mv-success-bar:after,.mv-success-text{animation:none}}@media (min-width: 768px){.mv-ui{padding:28px 32px}.mv-foot{width:100%;max-width:380px;margin:0 auto}}\n"], dependencies: [{ kind: "component", type: DialogComponent, selector: "mv-dialog", inputs: ["title", "message", "buttonLabel"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelfieComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mv-selfie', standalone: true, imports: [DialogComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mv-camera\">\n  <!-- poster transparente: evita el \u00EDcono gris de \"play\" que Android WebView muestra mientras arranca la c\u00E1mara -->\n  <video #video class=\"mv-video\" [class.mv-video--ready]=\"cameraReady()\" [poster]=\"emptyPoster\"\n         muted autoplay playsinline (playing)=\"cameraReady.set(true)\"></video>\n  <div class=\"mv-scrim\" aria-hidden=\"true\"></div>\n\n  <div class=\"mv-ui\">\n    <header class=\"mv-head\">\n      <div class=\"mv-title-group\">\n        <img class=\"mv-title-logo\" [src]=\"gLogo\" alt=\"\" aria-hidden=\"true\" />\n        <h2 class=\"mv-title\">Foto Selfie</h2>\n      </div>\n      <button type=\"button\" class=\"mv-close\" aria-label=\"Cerrar\" [disabled]=\"sending() || success()\" (click)=\"close()\">\n        <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" /></svg>\n      </button>\n    </header>\n\n    <div class=\"mv-spacer\"></div>\n\n    <footer class=\"mv-foot\">\n      @if (countdown() !== null) {\n        <!-- @for recrea el elemento en cada n\u00FAmero para repetir la animaci\u00F3n -->\n        @for (n of [countdown()]; track n) {\n          <p class=\"mv-hint mv-countdown\" aria-live=\"assertive\">{{ n }}</p>\n        }\n      } @else if (success()) {\n        <p class=\"mv-hint mv-success-text\" role=\"status\" aria-live=\"polite\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12.5l4.5 4.5L19 7.5\" /></svg>\n          Verificaci\u00F3n completada\n        </p>\n      } @else {\n        @if (sending()) {\n          <p class=\"mv-hint\" aria-live=\"polite\">Validando foto...</p>\n        } @else {\n          <!-- Tips rotativos: el recuadro se queda fijo y solo cambia el contenido -->\n          <div class=\"mv-hint mv-tips\">\n            <span class=\"mv-sr-only\">{{ tips[0].text }}</span>\n            @for (i of [tipIndex()]; track i) {\n              <span class=\"mv-tip\" [class.mv-tip--leaving]=\"tipLeaving()\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 24 24\"><path [attr.d]=\"tips[i].icon\" /></svg>\n                {{ tips[i].text }}\n              </span>\n            }\n          </div>\n        }\n      }\n      @if (sending()) {\n        <span class=\"mv-sending-bar\" aria-hidden=\"true\"></span>\n      } @else if (success()) {\n        <span class=\"mv-success-bar\" aria-hidden=\"true\"></span>\n      }\n      <!-- Oculto mientras se env\u00EDa y al confirmar el \u00E9xito; vuelve a aparecer si hay error para reintentar -->\n      @if (!sending() && !success()) {\n        <button type=\"button\" class=\"mv-button\" [disabled]=\"!cameraReady() || countdown() !== null\" (click)=\"takePhoto()\">\n          Tomar Fotograf\u00EDa\n        </button>\n      }\n    </footer>\n  </div>\n\n  @if (dialog(); as d) {\n    <mv-dialog [message]=\"d.message\" (closed)=\"onDialogClosed()\"></mv-dialog>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.mv-camera{position:relative;height:100%;overflow:hidden;background:#000}.mv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:#000;opacity:0;transition:opacity .3s ease}.mv-video--ready{opacity:1}.mv-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00000080,#0000 22% 62%,#0009)}.mv-ui{position:absolute;inset:0;display:flex;flex-direction:column;padding:max(22px,env(safe-area-inset-top)) 22px max(22px,env(safe-area-inset-bottom));color:#fff}.mv-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.mv-title-group{display:flex;align-items:center;gap:10px;min-width:0}.mv-title-logo{flex-shrink:0;width:36px;height:36px}.mv-title{margin:0;font-family:var(--mv-font);font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.2;font-size:26px;line-height:36px;color:#fff}.mv-close{flex-shrink:0;width:36px;height:36px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#ffffff2e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer}.mv-close svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}.mv-close:disabled{opacity:.4;cursor:default}.mv-close:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.mv-spacer{flex:1}.mv-foot{display:flex;flex-direction:column;gap:16px}.mv-hint{margin:0 0 16px;font-family:var(--mv-font);font-size:14px;font-weight:400;line-height:1.5;align-self:center;max-width:100%;padding:10px 18px;border-radius:14px;background:#09090b80;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:18px;font-weight:500;color:#fff;text-align:center}.mv-tips{width:min(100%,300px);overflow:hidden}.mv-tip{display:inline-flex;align-items:center;justify-content:center;gap:8px;animation:mv-tip-in .3s ease-out backwards;transition:opacity .25s ease,transform .25s ease}.mv-tip svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mv-tip--leaving{opacity:0;transform:translateY(-6px)}@keyframes mv-tip-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.mv-tip{animation:none;transition:none}}.mv-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.mv-countdown{min-width:64px;font-size:28px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:#fff;animation:mv-count-pop .35s ease-out both}@keyframes mv-count-pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.mv-countdown{animation:none}}.mv-button{height:52px;border:0;border-radius:14px;font-family:var(--mv-font);font-size:15px;font-weight:600;letter-spacing:-.01em;width:100%;background:var(--mv-primary);color:#fff;cursor:pointer;transition:background-color .15s ease,transform .12s ease,opacity .15s ease;font-size:18px}.mv-button:hover{background:var(--mv-primary-hover)}.mv-button:active{transform:scale(.985)}.mv-button:disabled{opacity:.5;cursor:default;transform:none}.mv-button:focus-visible{outline:2px solid var(--mv-primary);outline-offset:3px}.mv-sending-bar{position:relative;height:8px;border-radius:999px;background:#ffffff4d;overflow:hidden}.mv-sending-bar:after{content:\"\";position:absolute;top:0;bottom:0;width:40%;border-radius:999px;background:var(--mv-accent);animation:mv-track-slide 1.1s cubic-bezier(.6,.1,.4,.9) infinite}@keyframes mv-track-slide{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion: reduce){.mv-sending-bar:after{animation-duration:2.4s}}.mv-success-bar{height:8px;border-radius:999px;background:#ffffff4d;overflow:hidden}.mv-success-bar:after{content:\"\";display:block;height:100%;border-radius:999px;background:var(--mv-success);animation:mv-success-fill .35s ease-out both}@keyframes mv-success-fill{0%{width:40%}to{width:100%}}.mv-success-text{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;animation:mv-count-pop .3s ease-out both}.mv-success-text svg{width:22px;height:22px;flex-shrink:0;stroke:var(--mv-success);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}@media (prefers-reduced-motion: reduce){.mv-success-bar:after,.mv-success-text{animation:none}}@media (min-width: 768px){.mv-ui{padding:28px 32px}.mv-foot{width:100%;max-width:380px;margin:0 auto}}\n"] }]
+            args: [{ selector: 'mv-selfie', standalone: true, imports: [DialogComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mv-camera\">\n  <!-- poster transparente: evita el \u00EDcono gris de \"play\" que Android WebView muestra mientras arranca la c\u00E1mara -->\n  <video #video class=\"mv-video\" [class.mv-video--ready]=\"cameraReady()\" [class.mv-video--mirror]=\"facing() === 'user'\" [poster]=\"emptyPoster\"\n         muted autoplay playsinline (playing)=\"cameraReady.set(true)\"></video>\n  <div class=\"mv-scrim\" aria-hidden=\"true\"></div>\n\n  @if (focusPoint(); as p) {\n    @for (id of [p.id]; track id) {\n      <span class=\"mv-focus-ring\" [style.left.px]=\"p.x\" [style.top.px]=\"p.y\" aria-hidden=\"true\"></span>\n    }\n  }\n\n  <!-- Tocar la imagen enfoca en ese punto (si el lente lo soporta) -->\n  <div class=\"mv-ui\" (click)=\"onTap($event)\">\n    <header class=\"mv-head\">\n      <div class=\"mv-title-group\">\n        <img class=\"mv-title-logo\" [src]=\"gLogo\" alt=\"\" aria-hidden=\"true\" />\n        <h2 class=\"mv-title\">Foto Selfie</h2>\n      </div>\n      <!-- La X arriba y debajo los controles en columna, como en las apps de c\u00E1mara -->\n      <div class=\"mv-actions\">\n        <button type=\"button\" class=\"mv-close\" aria-label=\"Cerrar\" [disabled]=\"sending() || success()\" (click)=\"close()\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M6 6l12 12M18 6L6 18\" /></svg>\n        </button>\n        @if (!sending() && !success()) {\n          <div class=\"mv-tools\">\n            @if (canSwitchCamera()) {\n              <button type=\"button\" class=\"mv-close mv-tool\" aria-label=\"Cambiar c\u00E1mara\"\n                      [disabled]=\"!cameraReady() || countdown() !== null\" (click)=\"switchCamera()\">\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M11 19H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h5 M13 5h7a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5 M12 9a3 3 0 1 0 0 6a3 3 0 1 0 0-6 M18 22l-3-3l3-3 M6 2l3 3l-3 3\" /></svg>\n              </button>\n            }\n          </div>\n        }\n      </div>\n    </header>\n\n    <div class=\"mv-spacer\"></div>\n\n    <footer class=\"mv-foot\">\n      @if (countdown() !== null) {\n        <!-- @for recrea el elemento en cada n\u00FAmero para repetir la animaci\u00F3n -->\n        @for (n of [countdown()]; track n) {\n          <p class=\"mv-hint mv-countdown\" aria-live=\"assertive\">{{ n }}</p>\n        }\n      } @else if (success()) {\n        <p class=\"mv-hint mv-success-text\" role=\"status\" aria-live=\"polite\">\n          <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M5 12.5l4.5 4.5L19 7.5\" /></svg>\n          Verificaci\u00F3n completada\n        </p>\n      } @else {\n        @if (sending()) {\n          <p class=\"mv-hint\" aria-live=\"polite\">Validando foto...</p>\n        } @else {\n          <!-- Tips rotativos: el recuadro se queda fijo y solo cambia el contenido -->\n          <div class=\"mv-hint mv-tips\">\n            <span class=\"mv-sr-only\">{{ tips[0].text }}</span>\n            @for (i of [tipIndex()]; track i) {\n              <span class=\"mv-tip\" [class.mv-tip--leaving]=\"tipLeaving()\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 24 24\"><path [attr.d]=\"tips[i].icon\" /></svg>\n                {{ tips[i].text }}\n              </span>\n            }\n          </div>\n        }\n      }\n      @if (sending()) {\n        <span class=\"mv-sending-bar\" aria-hidden=\"true\"></span>\n      } @else if (success()) {\n        <span class=\"mv-success-bar\" aria-hidden=\"true\"></span>\n      }\n      <!-- Oculto mientras se env\u00EDa y al confirmar el \u00E9xito; vuelve a aparecer si hay error para reintentar -->\n      @if (!sending() && !success()) {\n        <button type=\"button\" class=\"mv-button\" [disabled]=\"!cameraReady() || countdown() !== null\" (click)=\"takePhoto()\">\n          Tomar Fotograf\u00EDa\n        </button>\n      }\n    </footer>\n  </div>\n\n  @if (dialog(); as d) {\n    <mv-dialog [message]=\"d.message\" (closed)=\"onDialogClosed()\"></mv-dialog>\n  }\n</div>\n", styles: [":host{display:block;height:100%}.mv-camera{position:relative;height:100%;overflow:hidden;background:#000}.mv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .3s ease}.mv-video--mirror{transform:scaleX(-1)}.mv-video--ready{opacity:1}.mv-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#00000080,#0000 22% 62%,#0009)}.mv-focus-ring{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #fff;pointer-events:none;animation:mv-focus .8s ease-out both}@keyframes mv-focus{0%{opacity:0;transform:scale(1.4)}25%{opacity:1;transform:scale(1)}75%{opacity:1}to{opacity:0;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.mv-focus-ring{animation:none}}.mv-ui{position:absolute;inset:0;display:flex;flex-direction:column;padding:max(22px,env(safe-area-inset-top)) 22px max(22px,env(safe-area-inset-bottom));color:#fff}.mv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.mv-title-group{display:flex;align-items:center;gap:10px;min-width:0}.mv-title-logo{flex-shrink:0;width:36px;height:36px}.mv-title{margin:0;font-family:var(--mv-font);font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.2;font-size:26px;line-height:36px;color:#fff}.mv-close{flex-shrink:0;width:36px;height:36px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#ffffff2e;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer}.mv-close svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}.mv-close:disabled{opacity:.4;cursor:default}.mv-close:focus-visible{outline:2px solid #ffffff;outline-offset:2px}.mv-actions{display:flex;flex-direction:column;align-items:center;gap:16px}.mv-tools{display:flex;flex-direction:column;gap:12px}.mv-tool svg{width:20px;height:20px;stroke-width:2;stroke-linejoin:round}.mv-spacer{flex:1}.mv-foot{display:flex;flex-direction:column;gap:16px}.mv-hint{margin:0 0 16px;font-family:var(--mv-font);font-size:14px;font-weight:400;line-height:1.5;align-self:center;max-width:100%;padding:10px 18px;border-radius:14px;background:#09090b80;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:18px;font-weight:500;color:#fff;text-align:center}.mv-tips{width:min(100%,300px);overflow:hidden}.mv-tip{display:inline-flex;align-items:center;justify-content:center;gap:8px;animation:mv-tip-in .3s ease-out backwards;transition:opacity .25s ease,transform .25s ease}.mv-tip svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mv-tip--leaving{opacity:0;transform:translateY(-6px)}@keyframes mv-tip-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.mv-tip{animation:none;transition:none}}.mv-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.mv-countdown{min-width:64px;font-size:28px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:#fff;animation:mv-count-pop .35s ease-out both}@keyframes mv-count-pop{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.mv-countdown{animation:none}}.mv-button{height:52px;border:0;border-radius:14px;font-family:var(--mv-font);font-size:15px;font-weight:600;letter-spacing:-.01em;width:100%;background:var(--mv-primary);color:#fff;cursor:pointer;transition:background-color .15s ease,transform .12s ease,opacity .15s ease;font-size:18px}.mv-button:hover{background:var(--mv-primary-hover)}.mv-button:active{transform:scale(.985)}.mv-button:disabled{opacity:.5;cursor:default;transform:none}.mv-button:focus-visible{outline:2px solid var(--mv-primary);outline-offset:3px}.mv-sending-bar{position:relative;height:8px;border-radius:999px;background:#ffffff4d;overflow:hidden}.mv-sending-bar:after{content:\"\";position:absolute;top:0;bottom:0;width:40%;border-radius:999px;background:var(--mv-accent);animation:mv-track-slide 1.1s cubic-bezier(.6,.1,.4,.9) infinite}@keyframes mv-track-slide{0%{left:-40%}to{left:100%}}@media (prefers-reduced-motion: reduce){.mv-sending-bar:after{animation-duration:2.4s}}.mv-success-bar{height:8px;border-radius:999px;background:#ffffff4d;overflow:hidden}.mv-success-bar:after{content:\"\";display:block;height:100%;border-radius:999px;background:var(--mv-success);animation:mv-success-fill .35s ease-out both}@keyframes mv-success-fill{0%{width:40%}to{width:100%}}.mv-success-text{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;animation:mv-count-pop .3s ease-out both}.mv-success-text svg{width:22px;height:22px;flex-shrink:0;stroke:var(--mv-success);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}@media (prefers-reduced-motion: reduce){.mv-success-bar:after,.mv-success-text{animation:none}}@media (min-width: 768px){.mv-ui{padding:28px 32px}.mv-foot{width:100%;max-width:380px;margin:0 auto}}\n"] }]
         }], propDecorators: { submit: [{
                 type: Input,
                 args: [{ required: true }]