/* Flujo de verificación (index.html). Los colores y la fuente salen SOLO de los tokens de
marca/marca.css (dos temas por body[data-tema]); acá no se define ningún color de marca.
Rediseño 2026-09-29: marca Prestanza, tono impersonal y los 15 puntos de la crítica UX
(ver docs/superpowers/specs/2026-09-29-rediseno-visual-flujo-design.md). */
:root { --barra-alto: 84px; }
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; height: 100%; }
body {
background: var(--bg);
color: var(--texto);
font-family: var(--fuente);
-webkit-font-smoothing: antialiased;
margin: 0;
/* Altura FIJA al viewport (app shell): nada empuja la barra de acciones fuera de la
pantalla. Lo que no cabe (bienvenida, instrucciones) se desplaza dentro de su propia caja. */
height: 100vh;
height: 100dvh;
overflow: hidden;
display: flex;
flex-direction: column;
transition: background-color 250ms ease, color 250ms ease;
}
:focus-visible { outline: 3px solid var(--estado); outline-offset: 3px; }
/* --- encabezado: logo + "Paso N de 4", y debajo la barra por pasos y el nombre del paso --- */
header {
flex: 0 0 auto;
position: relative; /* ancla de .version */
padding: calc(0.9rem + env(safe-area-inset-top, 0px)) 1.25rem 0.9rem;
}
/* versión del build: invisible; solo aparece (roja) si el dispositivo quedó con caché vieja */
.version { display: none; }
.version.desactualizada {
display: block;
position: absolute; top: calc(0.3rem + env(safe-area-inset-top, 0px)); right: 0.5rem;
font-size: 0.7rem; line-height: 1; font-weight: 700; color: var(--error);
font-variant-numeric: tabular-nums; pointer-events: none;
}
.encabezado {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: 30px;
}
.logo {
width: 104px; height: 30px; flex: 0 0 auto; /* legalFace + "powered by legalCheck" (alto del logo anterior) */
background: var(--logo) left center / contain no-repeat;
}
.paso-numero {
font-size: 0.95rem; font-weight: 700; color: var(--texto-tenue);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.progreso { margin-top: 0.85rem; }
/* 4 segmentos: el flujo SÍ es una secuencia de 4 pasos; cada uno se llena por su cuenta */
.progreso-segmentos {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.progreso-segmentos li {
height: 5px; border-radius: 999px; background: var(--borde-superficie); overflow: hidden;
}
.progreso-segmentos span {
display: block; height: 100%; width: 0%; border-radius: 999px; background: var(--estado);
transition: width 450ms cubic-bezier(.4, 0, .2, 1);
}
.progreso-etapa {
margin: 0.6rem 0 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25;
letter-spacing: -0.01em; color: var(--texto);
}
/* --- pantallas de texto (bienvenida, puente, instrucción): a la izquierda, como se lee --- */
h1 { font-weight: 700; letter-spacing: -0.02em; }
.bienvenida-cuerpo, .puente-cuerpo {
flex: 1 1 0; min-height: 0; overflow-y: auto;
padding: 0.5rem 1.25rem 0.75rem;
}
.bienvenida-cuerpo h1, .puente-cuerpo h1 {
font-size: 1.9rem; line-height: 1.12; margin: 0.4rem 0 0.5rem;
}
.logo-armado { width: 76px; height: 70px; margin: 0.2rem 0 0.3rem; } /* animaciones-logo.js "armado" */
.bienvenida-intro { color: var(--texto-tenue); font-size: 1.1rem; line-height: 1.45; margin: 0 0 1.25rem; }
/* los 4 pasos que vienen: número en círculo, el nombre al lado */
.pasos-lista {
list-style: none; margin: 0 0 1.4rem; padding: 0;
display: flex; flex-direction: column; gap: 0.7rem;
}
.pasos-lista li { display: flex; align-items: center; gap: 0.85rem; font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.paso-num {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
display: grid; place-items: center;
border: 2px solid var(--texto); color: var(--texto);
font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.consejos-titulo { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.7rem; color: var(--texto); }
.consejos {
list-style: none; margin: 0; padding: 0.35rem 1rem; border-radius: 16px;
background: var(--superficie);
display: flex; flex-direction: column;
}
.consejos li {
display: flex; gap: 0.8rem; align-items: center; padding: 0.6rem 0;
font-size: 1.05rem; line-height: 1.35;
}
.consejos li + li { border-top: 1px solid var(--borde-superficie); }
.consejos svg { flex: 0 0 auto; width: 26px; height: 26px; stroke: var(--texto); }
.confianza {
display: flex; gap: 0.55rem; align-items: flex-start;
margin: 1.1rem 0 0; color: var(--texto-tenue); font-size: 0.98rem; line-height: 1.4;
}
.confianza svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; stroke: currentColor; }
@media (max-height: 680px) {
.bienvenida-cuerpo h1, .puente-cuerpo h1 { font-size: 1.55rem; }
.bienvenida-intro { margin-bottom: 0.9rem; }
.pasos-lista { gap: 0.45rem; margin-bottom: 1rem; }
.consejos li { padding: 0.45rem 0; font-size: 1rem; }
}
/* puente a Didit: escudo arriba, explicación, un solo botón */
/* centradas (2026-10-01): son pantallas de un solo mensaje con su ícono, no texto a leer de corrido */
.puente-cuerpo { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.puente-icono {
width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 0.9rem;
display: grid; place-items: center; background: var(--estado-tenue);
}
.puente-icono svg { width: 34px; height: 34px; stroke: var(--estado); }
.puente-cuerpo p { margin: 0 0 0.8rem; font-size: 1.1rem; line-height: 1.5; color: var(--texto-tenue); max-width: 34ch; }
/* --- contenido de cada paso: el video ocupa el espacio disponible --- */
.paso-contenido {
flex: 1 1 0;
display: flex; flex-direction: column;
min-height: 0; /* permite que el video se achique si hace falta, sin desbordar */
}
.paso-contenido[hidden] { display: none !important; }
.visor {
flex: 1 1 0; min-height: 0;
container-type: size; /* el óvalo se dimensiona con cqw/cqh: entra siempre, también en pantallas bajas */
background: var(--bg);
position: relative;
overflow: hidden;
}
/* Absoluto: el video se recorta al visor y NUNCA le impone su alto natural. */
.visor video {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
}
#video-selfie, #video-mano { transform: scaleX(-1); } /* cámara frontal: efecto espejo, como se ven */
/* --- marco de captura: corchetes de esquina --- */
.marco-documento {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 88%; aspect-ratio: 1.58 / 1;
pointer-events: none;
}
.marco-documento::before {
content: ""; position: absolute; inset: 0;
box-shadow: 0 0 0 999px var(--mascara);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 14px;
}
.esquina { position: absolute; width: 38px; height: 38px; }
/* Blancas mientras busca, menta cuando encontró la cédula: el color ES el estado. */
.esquina::before, .esquina::after {
content: ""; position: absolute; background: #FFFFFF; border-radius: 2px;
transition: background-color 200ms ease;
}
.esquina::before { width: 100%; height: 4px; }
.esquina::after { width: 4px; height: 100%; }
.esquina.sup-izq { top: -1px; left: -1px; }
.esquina.sup-izq::before, .esquina.sup-izq::after { top: 0; left: 0; }
.esquina.sup-der { top: -1px; right: -1px; }
.esquina.sup-der::before { top: 0; right: 0; }
.esquina.sup-der::after { top: 0; right: 0; }
.esquina.inf-izq { bottom: -1px; left: -1px; }
.esquina.inf-izq::before { bottom: 0; left: 0; }
.esquina.inf-izq::after { bottom: 0; left: 0; }
.esquina.inf-der { bottom: -1px; right: -1px; }
.esquina.inf-der::before { bottom: 0; right: 0; }
.esquina.inf-der::after { bottom: 0; right: 0; }
.marco-documento.detectado .esquina::before,
.marco-documento.detectado .esquina::after { background: var(--estado); }
@keyframes pulso-marco {
0%, 100% { opacity: .6; } 50% { opacity: 1; }
}
.marco-documento:not(.detectado):not(.escaneando) .esquina { animation: pulso-marco 1.8s ease-in-out infinite; }
/* --- efecto de escáner: una línea menta con estela que barre la cédula de arriba hacia abajo ---
Tres ritmos, un solo elemento: buscando (lento y tenue: "estoy mirando"), cédula encontrada
(más rápido y nítido) y .escaneando (ráfaga + revisión en el servidor sobre la foto
congelada: rápido, con una trama de líneas finas). Siempre de arriba hacia abajo, como un
escáner de verdad: con ida y vuelta la estela quedaba del lado equivocado al volver. */
.escaner {
position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
pointer-events: none; opacity: .55; transition: opacity 250ms ease;
}
.escaner::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%;
background: linear-gradient(to bottom, rgba(51, 213, 173, 0), rgba(51, 213, 173, .16) 70%, rgba(51, 213, 173, .45));
border-bottom: 2px solid var(--marca-lima);
box-shadow: 0 4px 16px rgba(51, 213, 173, .6);
/* translateY en % de su PROPIO alto: -100 % = justo arriba del marco; 100/38 ≈ 263 % = el
borde de arriba llega al de abajo del marco */
transform: translateY(-100%);
animation: barrido 2.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
/* trama fina: solo al escanear de verdad */
.escaner::after {
content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 250ms ease;
background: repeating-linear-gradient(to bottom, rgba(51, 213, 173, .14) 0 1px, transparent 1px 6px);
}
@keyframes barrido { to { transform: translateY(263%); } }
.marco-documento.detectado .escaner { opacity: .9; }
.marco-documento.detectado .escaner::before { animation-duration: 1.7s; }
.marco-documento.escaneando .escaner { opacity: 1; }
.marco-documento.escaneando .escaner::before { animation-duration: 1.1s; }
.marco-documento.escaneando .escaner::after { opacity: 1; }
.marco-documento.escaneando .esquina::before,
.marco-documento.escaneando .esquina::after { background: var(--estado); }
/* foto recién tomada, congelada bajo el escáner mientras el servidor la revisa (app.js) */
.foto-congelada {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
/* --- siluetas guía: qué va dentro del marco/óvalo. Visibles hasta que el video reproduce --- */
.guia-documento {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 88%; aspect-ratio: 1.58 / 1; padding: 6%;
display: flex; align-items: center; justify-content: center;
pointer-events: none; transition: opacity 300ms ease;
}
.guia-rostro {
position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
width: 62%; aspect-ratio: 3 / 4; padding: 12% 10% 0;
display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border-radius: 50%;
pointer-events: none; transition: opacity 300ms ease;
}
.guia-documento svg, .guia-rostro svg { width: 100%; height: 100%; stroke: rgba(255, 255, 255, 0.28); }
.guia-documento.oculta, .guia-rostro.oculta { opacity: 0; }
/* --- "cédula junto al rostro": instrucción PREVIA a pedir la cámara (tema claro), con la foto
de referencia a tamaño completo. Se lee, se toca "Abrir la cámara", recién ahí el visor. */
.instruccion-previa {
flex: 1 1 0; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 0.6rem; padding: 0.5rem 1.25rem;
}
.instruccion-previa img {
max-width: 64%; max-height: 50vh; margin-bottom: 0.4rem;
border-radius: 18px; object-fit: contain;
box-shadow: 0 8px 28px rgba(10, 10, 10, 0.14);
}
.instruccion-previa h1 { margin: 0; font-size: 1.55rem; line-height: 1.15; text-align: center; }
.instruccion-previa p {
margin: 0; text-align: center; font-size: 1.1rem; line-height: 1.45;
color: var(--texto-tenue); max-width: 32ch;
}
.instruccion-previa[hidden] { display: none; }
/* --- guía del rostro (selfie): contorno de CABEZA, no óvalo ---
Cráneo ancho arriba, se angosta hacia la mandíbula, mentón redondeado (reporte 2026-09-29:
la versión con border-radius tenía la base ancha y plana — "invertida" respecto a una cabeza
real). La caja 3:4 solo da el tamaño; la forma, la máscara y la línea son el SVG
.contorno-rostro (index.html), y el arco del giro / borde de progreso usan las mismas curvas. */
.ovalo-rostro {
position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%);
width: 62%; aspect-ratio: 3 / 4;
pointer-events: none;
transition: width 450ms cubic-bezier(.4, 0, .2, 1);
}
/* viewBox 3:4 = caja 3:4: escala uniforme. overflow visible: la máscara (un rectángulo enorme
con el hueco de la cabeza, evenodd) cubre todo el visor, que la recorta. */
.contorno-rostro {
position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
.mascara-rostro { fill: var(--mascara); }
.linea-rostro {
fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 3px;
vector-effect: non-scaling-stroke; /* 3 px reales a cualquier tamaño (sin guiones: no rompe nada) */
transition: stroke 200ms ease;
}
.ovalo-rostro.rostro-detectado .linea-rostro,
.ovalo-rostro.completo .linea-rostro { stroke: var(--estado); }
/* "Acerca el teléfono": el óvalo crece para marcar hasta dónde llenar; "Aléjalo": vuelve.
80 % (no más): si la cara se sale del cuadro MediaPipe la pierde y no hay qué evaluar. */
.ovalo-rostro.cerca { width: 80%; }
/* Limitado por el ALTO del visor además del ancho: en teléfonos bajos el óvalo de 62 % de
ancho medía más que el visor y se cortaba arriba. */
@supports (height: 1cqh) {
.ovalo-rostro, .guia-rostro {
top: 45%; width: auto; height: min(74cqh, calc(62cqw * 4 / 3));
}
.ovalo-rostro { transition: height 450ms cubic-bezier(.4, 0, .2, 1); }
.ovalo-rostro.cerca { width: auto; height: min(86cqh, calc(80cqw * 4 / 3)); }
}
/* --- guía del giro: una cabeza real que HACE el gesto (video) + arco que se llena en vivo ---
.demo = el video llena el visor (instrucción a pantalla completa); .mini = pasa a un círculo
ARRIBA, en la esquina del lado pedido (abajo chocaba con la píldora de instrucciones). */
.guia-giro {
position: absolute; inset: 0;
opacity: 0; pointer-events: none;
overflow: hidden;
transition: opacity 320ms ease;
}
.guia-giro.demo { opacity: 1; background: var(--bg); }
/* contain en la demo: con cover la cabeza se recortaba en pantallas altas */
.guia-giro-video { display: block; width: 100%; height: 100%; object-fit: contain; }
.guia-giro.mini {
opacity: 1; inset: auto;
top: 12px; left: 12px;
width: 26%; max-width: 104px; aspect-ratio: 1 / 1;
border-radius: 50%; border: 3px solid var(--estado); background: #000;
box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.guia-giro.mini[data-dir="derecha"] { left: auto; right: 12px; }
/* en el círculo el encuadre sube: la cabeza queda centrada, no el cuello */
.guia-giro.mini .guia-giro-video { object-fit: cover; object-position: 50% 30%; }
/* arco: medio óvalo (el lado pedido) que se llena de arriba hacia abajo con el yaw real */
.arco-giro {
position: absolute; inset: 0; width: 100%; height: 100%; /* encima de .linea-rostro */
overflow: visible; opacity: 0; transition: opacity 200ms ease;
}
.arco-giro.visible { opacity: 1; }
.arco-giro path {
/* grosor en unidades del viewBox. SIN vector-effect:non-scaling-stroke: rompe la
normalización de pathLength (el arco salía fragmentado). */
fill: none; stroke: var(--estado); stroke-width: 2.8; stroke-linecap: round;
stroke-dasharray: 0 100;
transition: stroke-dasharray 160ms linear; /* interpola entre frames de 10 fps */
}
.borde-progreso path { stroke: var(--estado); }
/* --- check grande de paso completado --- */
.check-grande {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.4);
width: 92px; height: 92px; border-radius: 50%;
background: var(--estado);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
transition: opacity 260ms ease, transform 260ms cubic-bezier(.34,1.56,.64,1);
}
.check-grande.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.check-grande svg { width: 46px; height: 46px; stroke: var(--marca-tinta); }
/* 2026-10-07: el check de cada paso es la animación "reagrupar en el check" (animaciones-logo.js)
sobre un disco oscuro translúcido, legible sobre cualquier video */
.check-grande { width: 132px; height: 132px; background: rgba(10, 10, 10, .62); --ola-tinta: #fff; }
.check-grande .logo-check { width: 100px; height: 92px; }
.check-grande .logo-check svg { width: 100%; height: 100%; stroke: none; }
.instruccion {
position: absolute; bottom: 16px; left: 14px; right: 14px; text-align: center;
pointer-events: none; transition: opacity 200ms ease;
}
/* píldora: legible sobre cualquier video. Centrada con márgenes automáticos (con translateX
la píldora solo usaba la MITAD del ancho y hasta un texto corto se partía). */
.instruccion:not(:empty) {
width: -moz-fit-content; width: fit-content; max-width: 100%; margin-inline: auto;
padding: .6rem 1.1rem; border-radius: 999px;
background: var(--pildora); color: #FFFFFF;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
font-weight: 700; font-size: 1.3rem; letter-spacing: -.005em; line-height: 1.3;
}
/* felicitación entre gestos: la misma píldora con un check menta delante */
.instruccion.logro:not(:empty)::before {
content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .4em;
vertical-align: -0.12em; background: var(--estado);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* --- pantalla de proceso: tapa la cámara mientras el servidor trabaja (pantalla-proceso.js) --- */
.proceso {
position: absolute; inset: 0;
background: var(--bg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 0 1.75rem; text-align: center; overflow-y: auto;
animation: aparecer 220ms ease-out;
transition: background-color 250ms ease;
}
@keyframes aparecer { from { opacity: 0; } }
.proceso-anillo {
position: relative; width: 80px; height: 80px; margin-bottom: 1.5rem;
transition: width 300ms ease, height 300ms ease;
}
.proceso.listo .proceso-anillo { width: 104px; height: 104px; }
/* transform-box/origin explícitos: Chrome/Android rota el