/* rostro.css — el círculo de la cámara del ingreso y del registro por rostro. Lo comparten el login (pantalla de perfiles),
   «Mi perfil» y «Bienvenida»; por eso va aparte de login-perfiles.css (que «Mi perfil» no carga). */

/* ── Rostro: la cámara en un círculo ─────────────────────────────────── */

.rostro-visor {
    position: relative;
    width: min(232px, 62vw);
    aspect-ratio: 1 / 1;
    margin: 0.4rem auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    background: #0b1220;
    box-shadow:
        0 0 0 5px #ffffff,
        0 0 0 6px rgba(15, 23, 42, 0.10),
        0 22px 40px -20px rgba(15, 23, 42, 0.5);
}

.rostro-visor video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);               /* como un espejo: así es natural acomodarse */
    display: block;
}

.rostro-marco {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35);
    pointer-events: none;
    transition: border-color 200ms ease;
}

.rostro-visor.rostro-ok .rostro-marco {
    border-color: #34c759;
}

.rostro-mensaje {
    min-height: 2.6em;
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    color: var(--t3);
}

/* ── Ingreso por rostro, estilo Face ID ──────────────────────────────────────────────────────────────
   Durante el INGRESO la cámara trabaja en segundo plano y no se muestra la imagen de la persona (como Face ID): solo este indicador.
   Safari NO decodifica un <video> escondido (display:none, 2 px, casi transparente o fuera de pantalla): sin cuadros nuevos nunca ve la
   cara y el ingreso falla. Por eso el video está dentro del indicador, a tamaño normal y opaco, y encima lleva un disco blanco opaco
   (.faceid-tapa) que lo tapa por completo; el dibujo del indicador va sobre el disco. */
.faceid {
    --fi-color: var(--accent, #0a84ff);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(112px, 22vh, 148px);
    width: clamp(112px, 22dvh, 148px);
    aspect-ratio: 1 / 1;
    margin: 0.6rem auto 0.9rem;
    border-radius: 50%;
    color: var(--fi-color);
    transition: color 220ms ease;
}

.faceid-video {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

.faceid-tapa {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.06),
        0 16px 30px -18px rgba(15, 23, 42, 0.38);
    pointer-events: none;
}

.faceid svg {
    position: relative;                  /* sobre el disco */
    width: 76%;
    height: 76%;
    display: block;
    overflow: visible;
}

.faceid .fi-marcos,
.faceid .fi-cara,
.faceid .fi-giro,
.faceid .fi-ok {
    transform-origin: 60px 60px;
    transition: opacity 220ms ease, transform 280ms ease;
}

/* buscando: los marcos laten suave y la cara «respira» */
.faceid .fi-marcos { animation: fiPulso 2.2s ease-in-out infinite; }
.faceid .fi-cara   { animation: fiRespira 2.2s ease-in-out infinite; }
.faceid .fi-giro   { opacity: 0; stroke-dasharray: 50 140; }
.faceid .fi-ok     { opacity: 0; }
.faceid .fi-ok circle { stroke-dasharray: 227; stroke-dashoffset: 227; }
.faceid .fi-ok path   { stroke-dasharray: 60;  stroke-dashoffset: 60; }

/* verificando: la cara se disuelve y gira un anillo */
.faceid[data-estado="verificando"] .fi-marcos { animation: none; transform: scale(0.9); }
.faceid[data-estado="verificando"] .fi-cara   { animation: none; opacity: 0; transform: scale(0.85); }
.faceid[data-estado="verificando"] .fi-giro   { opacity: 1; animation: fiGira 0.9s linear infinite; }

/* ok: palomita verde que se dibuja */
.faceid[data-estado="ok"] { --fi-color: #34c759; }
.faceid[data-estado="ok"] .fi-marcos { animation: none; opacity: 0; transform: scale(1.18); }
.faceid[data-estado="ok"] .fi-cara,
.faceid[data-estado="ok"] .fi-giro   { animation: none; opacity: 0; }
.faceid[data-estado="ok"] .fi-ok     { opacity: 1; }
.faceid[data-estado="ok"] .fi-ok circle { animation: fiTrazo 420ms ease-out forwards; }
.faceid[data-estado="ok"] .fi-ok path   { animation: fiTrazo 320ms ease-out 260ms forwards; }

/* error: sacudida y rojo, un instante, antes de pasar al PIN */
.faceid[data-estado="error"] { --fi-color: #ff3b30; animation: fiSacudir 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
.faceid[data-estado="error"] .fi-marcos,
.faceid[data-estado="error"] .fi-cara { animation: none; }
.faceid[data-estado="error"] .fi-cara { opacity: 0.5; }

/* Solo con ?depurar=1 en el login */
.rostro-depurar {
    margin: 0.4rem auto 0.6rem;
    max-width: 100%;
    font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-align: left;
    white-space: pre-wrap;
    color: var(--t3);
}

@keyframes fiPulso    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes fiRespira  { 0%, 100% { opacity: 0.95; } 50% { opacity: 0.45; } }
@keyframes fiGira     { to { transform: rotate(360deg); } }
@keyframes fiTrazo    { to { stroke-dashoffset: 0; } }
@keyframes fiSacudir  {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(4px); }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60% { transform: translateX(7px); }
}

@media (prefers-reduced-motion: reduce) {
    .faceid *,
    .faceid { animation: none !important; transition: none !important; }
    .faceid[data-estado="ok"] .fi-ok circle,
    .faceid[data-estado="ok"] .fi-ok path { stroke-dashoffset: 0; }
    .faceid[data-estado="verificando"] .fi-giro { opacity: 1; }
}

/* iPad horizontal y pantallas bajas: el alto es lo escaso */
@media (min-width: 700px) and (max-height: 860px) {
    .rostro-visor { width: 196px; }
}