@neofaceid/web-sdk 1.31.0 → 1.33.0

package/dist/index.d.ts

@@ -1626,7 +1626,7 @@ export declare const validateToken: (applicationToken: string) => Promise<boolea
  * MINOR: Incrementado quando adicionamos funcionalidades mantendo compatibilidade
  * PATCH: Incrementado quando corrigimos bugs mantendo compatibilidade
  */
-export declare const VERSION = "1.31.0";
+export declare const VERSION = "1.33.0";
 
 /**
  * Executa `fn(sessionId)`. Se o servidor devolver 410 (sessão consumida/expirada),

package/dist/neoface-id-sdk.es.js

@@ -4362,6 +4362,12 @@ const INK = {
   900: "#111C2B",
   950: "#0A1320"
 };
+const SEMANTIC = {
+  success: { fg: "#046C4E", bg: "#E7F7F0", solid: "#0E9F6E" },
+  attention: { fg: "#6E5600", bg: "#FFF6D9", solid: "#F1BE00" },
+  critical: { fg: "#9B1C1C", bg: "#FDEAEA", solid: "#E02424" },
+  info: { fg: "#00449A", bg: "#EBF6FE", solid: "#0073F4" }
+};
 const LIGHT_TOKENS = {
   ground: INK[25],
   surface: "#FFFFFF",
@@ -10059,7 +10065,7 @@ class EmailPasswordModal {
     }
   }
 }
-const MAX_ATTEMPTS = 2;
+const MAX_ATTEMPTS$1 = 2;
 const RETRY_DELAY = 500;
 const CAMERA_READY_DELAY = 200;
 const CAMERA_STABILITY_DELAY = 100;
@@ -10477,7 +10483,7 @@ async function executeBiometricLoginFlow(options) {
         ErrorType.UNKNOWN
       );
       overlay.updateStatus("error");
-      if (attempts < MAX_ATTEMPTS) {
+      if (attempts < MAX_ATTEMPTS$1) {
         setTimeout(() => {
           tryLogin();
         }, RETRY_DELAY);
@@ -10860,7 +10866,7 @@ const biometricDetection = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.
   initializeBiometricDetection,
   isAdvancedDetectionAvailable
 }, Symbol.toStringTag, { value: "Module" }));
-const VERSION = "1.31.0";
+const VERSION = "1.33.0";
 const RELEASE_DATE = "2026-09-02";
 let cachedSession = null;
 function getCachedCaptureSession() {
@@ -12153,6 +12159,306 @@ function pointsFor(g) {
       return ["24 24", "24 24", "24 24"];
   }
 }
+function StatusPill({ tone, children, icon, className }) {
+  const palette = SEMANTIC[tone];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "4px 10px",
+        borderRadius: 9999,
+        background: palette.bg,
+        color: palette.fg,
+        fontSize: 13,
+        fontWeight: 600,
+        fontFamily: "inherit",
+        lineHeight: 1.3
+      },
+      children: [
+        icon,
+        children
+      ]
+    }
+  );
+}
+const DEFAULT = {
+  title: "Não deu certo desta vez",
+  hint: "Tente se posicionar em um ambiente mais estável.",
+  actions: [
+    "Segure o dispositivo firme",
+    "Fique de frente para uma luz suave"
+  ]
+};
+const MAP = {
+  LIVENESS_LOW: {
+    title: "Precisamos ver com mais nitidez",
+    hint: "A prova de vida veio abaixo do esperado.",
+    actions: [
+      "Faça o movimento com calma até o fim",
+      "Aproxime o rosto sem cortar as bordas"
+    ]
+  },
+  NO_FACE_DETECTED: {
+    title: "Não vi seu rosto",
+    hint: "A câmera não conseguiu identificar um rosto na moldura.",
+    actions: [
+      "Centralize o rosto no oval",
+      "Afaste-se um pouco se estiver muito próximo"
+    ]
+  },
+  LOW_LIGHT: {
+    title: "A luz está baixa demais",
+    hint: "Falta contraste para o algoritmo distinguir seu rosto.",
+    actions: [
+      "Fique de frente para uma janela ou lâmpada",
+      "Evite luz vindo por trás — deixa o rosto em sombra"
+    ]
+  },
+  LOOK_STRAIGHT: {
+    title: "Olhe direto para a câmera",
+    hint: "O rosto está um pouco de lado para reconhecimento facial.",
+    actions: [
+      "Fique de frente para a câmera",
+      "Mantenha o queixo paralelo ao chão"
+    ]
+  },
+  RECOGNITION_FAILED: {
+    title: "Não consegui confirmar",
+    hint: "A imagem não bate com o cadastro que temos.",
+    actions: [
+      "Retire óculos ou máscara temporariamente",
+      "Faça em um lugar mais iluminado"
+    ]
+  },
+  INVALID_TOKEN: {
+    title: "Sessão expirada",
+    hint: "A conexão com o serviço perdeu validade.",
+    actions: [
+      "Volte à tela anterior e tente novamente",
+      "Se persistir, entre em contato com o suporte"
+    ]
+  },
+  NETWORK: {
+    title: "A conexão está oscilando",
+    hint: "A imagem não chegou até nosso servidor.",
+    actions: [
+      "Verifique a rede do dispositivo",
+      "Repita a captura em alguns segundos"
+    ]
+  }
+};
+function copyForErrorCode(code) {
+  if (!code) return DEFAULT;
+  const key = code.toUpperCase();
+  return MAP[key] ?? DEFAULT;
+}
+function detectBrowser(ua = navigator.userAgent) {
+  const s = ua.toLowerCase();
+  if (s.includes("edg/")) return "edge";
+  if (s.includes("firefox")) return "firefox";
+  if (s.includes("chrome") && !s.includes("edg/")) return "chrome";
+  if (s.includes("safari") && !s.includes("chrome")) return "safari";
+  return "unknown";
+}
+const CAMERA_INSTRUCTIONS = {
+  chrome: "Clique no cadeado da barra de endereço → Configurações do site → Câmera → Permitir. Recarregue a página.",
+  edge: "Clique no cadeado da barra de endereço → Permissões do site → Câmera → Permitir. Recarregue a página.",
+  firefox: 'Clique no ícone da câmera bloqueada na barra de endereço e escolha "Permitir". Recarregue a página.',
+  safari: "Menu Safari → Configurações → Sites → Câmera → Permitir para este site. Recarregue a página.",
+  unknown: 'Abra as configurações do navegador, procure por "câmera" e permita o acesso para este site. Depois recarregue a página.'
+};
+function cameraInstructionFor(browser) {
+  return CAMERA_INSTRUCTIONS[browser];
+}
+function classifyMediaError(err) {
+  if (!err || typeof err !== "object") return "UNKNOWN";
+  const name = (err.name ?? "").toString();
+  if (name === "NotAllowedError" || name === "SecurityError") return "PERMISSION_DENIED";
+  if (name === "NotFoundError" || name === "OverconstrainedError") return "NO_CAMERA";
+  if (name === "NotReadableError" || name === "TrackStartError") return "IN_USE";
+  return "UNKNOWN";
+}
+const STYLE_ID$1 = "neofaceid-state-views-styles";
+const CSS = `
+.neofaceid-root .nfid-state {
+  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
+  padding: 8px 8px 4px;
+}
+.neofaceid-root .nfid-state h2 {
+  margin: 6px 0 0; font-size: 20px; font-weight: 700; color: var(--nfid-text); line-height: 1.25;
+  letter-spacing: -0.015em;
+}
+.neofaceid-root .nfid-state p {
+  margin: 0; font-size: 14px; color: var(--nfid-text-muted); line-height: 1.5;
+}
+.neofaceid-root .nfid-state-actions {
+  display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 12px;
+}
+.neofaceid-root .nfid-state-actions--row {
+  flex-direction: row; justify-content: center;
+}
+.neofaceid-root .nfid-state-icon-success {
+  width: 64px; height: 64px; color: #0E9F6E;
+  animation: nfidCelebrate 500ms cubic-bezier(.2,1.4,.4,1) both;
+}
+@keyframes nfidCelebrate {
+  0% { transform: scale(0.6); opacity: 0; }
+  60% { transform: scale(1.08); opacity: 1; }
+  100% { transform: scale(1); }
+}
+.neofaceid-root .nfid-state-warn-icon { width: 56px; height: 56px; color: #F1BE00; }
+.neofaceid-root .nfid-state-cameraoff-icon { width: 56px; height: 56px; color: var(--nfid-text-muted); }
+.neofaceid-root .nfid-state-hints {
+  display: flex; flex-direction: column; gap: 6px; margin-top: 8px; text-align: left; width: 100%;
+}
+.neofaceid-root .nfid-state-hint {
+  display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--nfid-text);
+  padding: 8px 12px; background: var(--nfid-surface-muted); border-radius: 12px;
+}
+.neofaceid-root .nfid-state-hint::before { content: "•"; color: var(--nfid-action); font-weight: 700; }
+.neofaceid-root .nfid-state-attempt {
+  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
+  color: var(--nfid-text-subtle);
+}
+.neofaceid-root .nfid-state-techcode {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 11px; color: var(--nfid-text-subtle); margin-top: 8px;
+}
+`;
+function useStateStyles() {
+  useEffect(() => {
+    injectThemeStyles$1();
+    injectScopedStyles$1(STYLE_ID$1, CSS);
+  }, []);
+}
+function AuthorizeSuccess({ appName, onContinue }) {
+  useStateStyles();
+  return /* @__PURE__ */ jsxs("div", { className: "nfid-state", role: "status", "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "nfid-state-icon-success",
+        viewBox: "0 0 64 64",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "4",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r: "28" }),
+          /* @__PURE__ */ jsx("path", { d: "M20 33 L28 41 L44 24" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("h2", { children: "Identidade confirmada" }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      "Você já pode continuar no ",
+      appName,
+      "."
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "nfid-state-actions", children: /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onContinue, children: "Continuar" }) })
+  ] });
+}
+function formatHms(d) {
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  const ss = String(d.getSeconds()).padStart(2, "0");
+  return `${hh}:${mm}:${ss}`;
+}
+function AuthorizeFailure({
+  errorCode,
+  attempt,
+  maxAttempts,
+  timestamp,
+  onRetry,
+  onFallback
+}) {
+  useStateStyles();
+  const copy = copyForErrorCode(errorCode);
+  const stamp = timestamp ?? /* @__PURE__ */ new Date();
+  return /* @__PURE__ */ jsxs("div", { className: "nfid-state", role: "alert", "aria-live": "assertive", children: [
+    /* @__PURE__ */ jsxs(StatusPill, { tone: "attention", children: [
+      "Tentativa ",
+      attempt,
+      " de ",
+      maxAttempts
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "nfid-state-warn-icon",
+        viewBox: "0 0 64 64",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "3",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M32 8 L58 54 H6 Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M32 26 V38" }),
+          /* @__PURE__ */ jsx("circle", { cx: "32", cy: "45", r: "2", fill: "currentColor" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("h2", { children: copy.title }),
+    /* @__PURE__ */ jsx("p", { children: copy.hint }),
+    /* @__PURE__ */ jsxs("div", { className: "nfid-state-hints", "aria-label": "O que fazer", children: [
+      /* @__PURE__ */ jsx("div", { className: "nfid-state-hint", children: copy.actions[0] }),
+      /* @__PURE__ */ jsx("div", { className: "nfid-state-hint", children: copy.actions[1] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "nfid-state-actions", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onRetry, children: "Tentar de novo" }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onFallback, children: "Verificar de outro jeito" })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "nfid-state-techcode", children: [
+      (errorCode ?? "UNKNOWN").toUpperCase(),
+      " · ",
+      formatHms(stamp)
+    ] })
+  ] });
+}
+function AuthorizePermissionDenied({
+  browser,
+  onFallback,
+  onCancel
+}) {
+  useStateStyles();
+  const detected = browser ?? detectBrowser();
+  const instruction = cameraInstructionFor(detected);
+  return /* @__PURE__ */ jsxs("div", { className: "nfid-state", role: "alert", "aria-live": "assertive", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "nfid-state-cameraoff-icon",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.75",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "m3 3 18 18" }),
+          /* @__PURE__ */ jsx("path", { d: "M20.66 15.34A2 2 0 0 0 22 13.5V7.5a2 2 0 0 0-3.13-1.65L15 8.5" }),
+          /* @__PURE__ */ jsx("path", { d: "M9 6H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("h2", { children: "Câmera bloqueada" }),
+    /* @__PURE__ */ jsx("p", { children: "Precisamos da câmera para confirmar que é você." }),
+    /* @__PURE__ */ jsx("p", { style: { marginTop: 8 }, children: instruction }),
+    /* @__PURE__ */ jsxs("div", { className: "nfid-state-actions", children: [
+      /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onFallback, children: "Verificar de outro jeito" }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onCancel, children: "Agora não" })
+    ] })
+  ] });
+}
 const STYLE_ID = "neofaceid-authorize-styles";
 const GESTURE_TO_GLYPH = {
   center: "center",
@@ -12186,6 +12492,7 @@ function formatCurrency(amount, locale) {
     return `R$ ${amount.toFixed(2)}`;
   }
 }
+const MAX_ATTEMPTS = 3;
 function AuthorizeModalComponent({
   applicationToken,
   appName,
@@ -12201,6 +12508,10 @@ function AuthorizeModalComponent({
   const [progress, setProgress] = useState(0);
   const [currentGesture, setCurrentGesture] = useState(null);
   const [phase, setPhase] = useState("preparing");
+  const [attempt, setAttempt] = useState(1);
+  const [failureCode, setFailureCode] = useState(void 0);
+  const [failureAt, setFailureAt] = useState(void 0);
+  const [runCounter, setRunCounter] = useState(0);
   const cancelRef = useRef(false);
   const locale = getLocale();
   const headerAppName = appName ?? getAppName() ?? "sua aplicação";
@@ -12237,11 +12548,27 @@ function AuthorizeModalComponent({
   }, []);
   useEffect(() => {
     let stream = null;
+    cancelRef.current = false;
+    setPhase("preparing");
+    setProgress(0);
+    setCurrentGesture(null);
     async function run() {
       try {
-        stream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 } }
-        });
+        try {
+          stream = await navigator.mediaDevices.getUserMedia({
+            video: { facingMode: "user", width: { ideal: 1280 }, height: { ideal: 720 } }
+          });
+        } catch (mediaErr) {
+          const kind = classifyMediaError(mediaErr);
+          if (kind === "PERMISSION_DENIED") {
+            setPhase("permission-denied");
+            return;
+          }
+          throw new NeoFaceError(
+            kind === "NO_CAMERA" ? "Câmera não encontrada" : kind === "IN_USE" ? "Câmera em uso por outro app" : "Falha ao acessar a câmera",
+            ErrorType.CAMERA_ERROR
+          );
+        }
         if (videoRef.current) {
           videoRef.current.srcObject = stream;
           videoRef.current.play().catch(() => {
@@ -12262,13 +12589,23 @@ function AuthorizeModalComponent({
             return frame ? [frame] : [];
           }
         });
-        setPhase("done");
+        if (stream) stream.getTracks().forEach((t) => t.stop());
+        stream = null;
+        if (result.success === false || result.liveness_passed === false) {
+          setFailureCode("LIVENESS_LOW");
+          setFailureAt(/* @__PURE__ */ new Date());
+          setPhase("failure");
+          return;
+        }
+        setPhase("success");
         if (onSuccess) onSuccess(result);
-        onClose();
       } catch (err) {
+        if (cancelRef.current) return;
         const nfe = err instanceof NeoFaceError ? err : new NeoFaceError(err instanceof Error ? err.message : "Falha", ErrorType.UNKNOWN);
+        setFailureCode(nfe.type);
+        setFailureAt(/* @__PURE__ */ new Date());
+        setPhase("failure");
         if (onError) onError(nfe);
-        onClose();
       } finally {
         if (stream) stream.getTracks().forEach((t) => t.stop());
       }
@@ -12278,14 +12615,55 @@ function AuthorizeModalComponent({
       cancelRef.current = true;
       if (stream) stream.getTracks().forEach((t) => t.stop());
     };
-  }, []);
+  }, [runCounter]);
   const handleClose = () => {
     cancelRef.current = true;
     if (onCancel) onCancel();
     onClose();
   };
+  const handleRetry = () => {
+    if (attempt >= MAX_ATTEMPTS) {
+      handleClose();
+      return;
+    }
+    setAttempt((a) => a + 1);
+    setFailureCode(void 0);
+    setFailureAt(void 0);
+    setRunCounter((c) => c + 1);
+  };
+  const handleFallback = () => {
+    cancelRef.current = true;
+    if (onError) {
+      onError(
+        new NeoFaceError(
+          "Fluxo alternativo solicitado pelo usuário",
+          ErrorType.CONSENT_DENIED
+        )
+      );
+    }
+    onClose();
+  };
   const gestureKey = currentGesture ? GESTURE_TO_GLYPH[currentGesture.gesture_key] ?? "center" : "center";
   const instruction = currentGesture ? GESTURE_TO_INSTRUCTION[currentGesture.gesture_key] ?? "Siga a instrução" : "Preparando a câmera…";
+  if (phase === "success") {
+    return /* @__PURE__ */ jsx(Sheet, { open: true, dismissOnOverlay: false, ariaLabel: "Identidade confirmada", children: /* @__PURE__ */ jsx(AuthorizeSuccess, { appName: headerAppName, onContinue: onClose }) });
+  }
+  if (phase === "permission-denied") {
+    return /* @__PURE__ */ jsx(Sheet, { open: true, dismissOnOverlay: false, ariaLabel: "Câmera bloqueada", children: /* @__PURE__ */ jsx(AuthorizePermissionDenied, { onFallback: handleFallback, onCancel: handleClose }) });
+  }
+  if (phase === "failure") {
+    return /* @__PURE__ */ jsx(Sheet, { open: true, dismissOnOverlay: false, ariaLabel: "Não foi possível confirmar", children: /* @__PURE__ */ jsx(
+      AuthorizeFailure,
+      {
+        errorCode: failureCode,
+        attempt,
+        maxAttempts: MAX_ATTEMPTS,
+        timestamp: failureAt,
+        onRetry: handleRetry,
+        onFallback: handleFallback
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsx(Sheet, { open: true, onDismiss: void 0, dismissOnOverlay: false, ariaLabel: "Autorização por biometria", children: /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -12557,7 +12935,7 @@ class DocumentCaptureModal {
           </div>
           <div class="neoface-doc-instruction">
             <svg class="neoface-doc-instruction-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
-            <span>Evite reflexos e sombras</span>
+            <span>Sem reflexo do flash sobre o texto</span>
           </div>
         </div>
       </div>
@@ -12613,15 +12991,16 @@ class DocumentCaptureModal {
       <div class="neoface-doc-body">
         <div class="neoface-doc-preview-single">
           <span class="neoface-doc-preview-label">${label}</span>
-          <img class="neoface-doc-preview-img neoface-doc-preview-current" />
+          <img class="neoface-doc-preview-img neoface-doc-preview-current" alt="Prévia do documento capturado" />
         </div>
-        
+
+        <h3 class="neoface-doc-preview-question" id="neoface-doc-preview-question">Está legível?</h3>
         <div class="neoface-doc-preview-hint">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
-          <span>Verifique se todos os dados estão legíveis</span>
+          <span>Confira se dá para ler nome, número e data sem esforço.</span>
         </div>
       </div>
-      
+
       <div class="neoface-doc-footer">
         <button class="neoface-doc-btn neoface-doc-btn-secondary neoface-doc-retake-btn">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -12630,11 +13009,11 @@ class DocumentCaptureModal {
           </svg>
           Refazer
         </button>
-        <button class="neoface-doc-btn neoface-doc-btn-success neoface-doc-confirm-btn">
+        <button class="neoface-doc-btn neoface-doc-btn-primary neoface-doc-confirm-btn">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M20 6L9 17l-5-5"/>
           </svg>
-          ${isLastStep ? "Confirmar e Enviar" : "Próximo"}
+          ${isLastStep ? "Sim, enviar" : "Sim, próximo"}
         </button>
       </div>
       
@@ -13051,8 +13430,8 @@ class DocumentCaptureModal {
       }
       
       .neoface-doc-select-option:hover {
-        background: rgba(0, 200, 255, 0.1);
-        border-color: rgba(0, 200, 255, 0.4);
+        background: rgba(0, 145, 246, 0.1);
+        border-color: rgba(0, 145, 246, 0.4);
         transform: translateX(4px);
       }
       
@@ -13062,7 +13441,7 @@ class DocumentCaptureModal {
         justify-content: center;
         width: 44px;
         height: 44px;
-        background: rgba(0, 200, 255, 0.15);
+        background: rgba(0, 145, 246, 0.15);
         border-radius: 12px;
         color: #0091F6;
       }
@@ -13098,8 +13477,8 @@ class DocumentCaptureModal {
         align-items: center;
         justify-content: center;
         padding: 14px 16px;
-        background: rgba(0, 200, 255, 0.08);
-        border: 1px solid rgba(0, 200, 255, 0.15);
+        background: rgba(0, 145, 246, 0.08);
+        border: 1px solid rgba(0, 145, 246, 0.15);
         border-radius: 10px;
         color: rgba(255, 255, 255, 0.8);
         font-size: 13px;
@@ -13116,13 +13495,13 @@ class DocumentCaptureModal {
         flex-shrink: 0;
       }
       
-      /* Camera */
+      /* Camera — ISO/IEC 7810 ID-1 (85.60 × 53.98 mm ≈ 1.586:1) */
       .neoface-doc-camera-container {
         position: relative;
         background: #000;
         border-radius: 16px;
         overflow: hidden;
-        aspect-ratio: 4/3;
+        aspect-ratio: 1.586 / 1;
       }
       
       .neoface-doc-video {
@@ -13144,20 +13523,19 @@ class DocumentCaptureModal {
         pointer-events: none;
       }
       
+      /* Moldura Focus Frame — proporção ID-1 (1.586:1), sem borda contínua. */
       .neoface-doc-frame {
-        width: 75%;
-        height: 65%;
+        width: 82%;
+        aspect-ratio: 1.586 / 1;
         position: relative;
-        border: 2px dashed rgba(0, 200, 255, 0.5);
         border-radius: 12px;
-        background: rgba(0, 200, 255, 0.03);
       }
-      
+
       .neoface-doc-corner {
         position: absolute;
         width: 28px;
         height: 28px;
-        border-color: #0091F6;
+        border-color: var(--nfid-action, #0059C4);
         border-style: solid;
       }
       
@@ -13246,23 +13624,31 @@ class DocumentCaptureModal {
         width: 75%;
         height: auto;
         border-radius: 12px;
-        border: 2px solid rgba(0, 200, 255, 0.3);
+        border: 2px solid rgba(0, 145, 246, 0.3);
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
       }
       
+      .neoface-doc-preview-question {
+        margin: 12px 0 4px;
+        font-size: 17px;
+        font-weight: 700;
+        color: var(--nfid-text, #0A1320);
+        text-align: center;
+      }
+
       .neoface-doc-preview-hint {
         display: flex;
         align-items: center;
         gap: 10px;
         padding: 12px 16px;
-        background: rgba(0, 200, 255, 0.08);
-        border: 1px solid rgba(0, 200, 255, 0.15);
+        background: rgba(0, 145, 246, 0.08);
+        border: 1px solid rgba(0, 145, 246, 0.15);
         border-radius: 10px;
         font-size: 13px;
         color: rgba(255, 255, 255, 0.8);
         margin-top: 8px;
       }
-      
+
       .neoface-doc-preview-hint svg {
         color: #0091F6;
         flex-shrink: 0;
@@ -13297,7 +13683,7 @@ class DocumentCaptureModal {
       
       .neoface-doc-btn-primary:hover {
         transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(0, 200, 255, 0.4);
+        box-shadow: 0 6px 20px rgba(0, 145, 246, 0.4);
       }
       
       .neoface-doc-btn-success {