/**
 * Face scan UI — modal full-screen com overlay oval + anéis animados.
 * Usado tanto no login quanto no cadastro do perfil.
 */

.face-scan-modal { background: #000; }
.face-scan-modal .modal-dialog { margin: 0; max-width: 100%; height: 100vh; }
.face-scan-modal .modal-content {
    height: 100vh; background: #000; border: 0; border-radius: 0; position: relative; overflow: hidden;
}

/* Desktop: modal centralizado em tamanho razoável (não fullscreen). */
@media (min-width: 768px) {
    .face-scan-modal .modal-dialog {
        max-width: 460px; height: auto;
        margin: 2.5vh auto;
    }
    .face-scan-modal .modal-content {
        height: min(720px, 90vh); border-radius: 18px;
    }
}

.face-scan__video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transform: scaleX(-1); /* espelha como o usuário se vê no espelho */
}

/* Stage SVG — ocupa o modal inteiro com:
   - máscara escura (tudo menos a oval no centro)
   - guia oval + linhas animadas na MESMA coordenada
   Garante alinhamento perfeito em qualquer aspect ratio. */
.face-scan__stage {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none;
}
.face-scan__stage ellipse { fill: none; stroke-linecap: round; }

/* Borda guia — fica fixa, bem leve. */
.face-scan__svg-base {
    stroke: rgba(255, 255, 255, .22);
    stroke-width: 2.5;
}

/* Tracinhos radiais ao redor do oval — estilo Face ID da Apple.
   São <line>s injetadas via JS (FaceAuth.montarScanUI), apontando pra fora
   da borda do oval. Começam BRANCOS e vão ficando VERDES conforme cada
   pose é capturada (cima/esquerda/direita/baixo). */
.face-scan__tick {
    stroke: rgba(255, 255, 255, .5);
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke .4s ease, filter .4s ease;
}
.face-scan__tick.is-feita {
    stroke: #22c55e;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, .8));
}

/* Pulse sutil do lado pro qual o user deve virar — chama atenção sem ofuscar
   o arco-guia dentro do oval. */
.face-scan-modal[data-pose="esquerda"] .face-scan__tick[data-side="esquerda"]:not(.is-feita),
.face-scan-modal[data-pose="direita"]  .face-scan__tick[data-side="direita"]:not(.is-feita),
.face-scan-modal[data-pose="frente"]   .face-scan__tick[data-side="cima"]:not(.is-feita),
.face-scan-modal[data-pose="sorriso"]  .face-scan__tick[data-side="baixo"]:not(.is-feita) {
    animation: face-scan-tick-target 1.4s ease-in-out infinite;
}
@keyframes face-scan-tick-target {
    0%, 100% { stroke: rgba(255, 255, 255, .55); }
    50%      { stroke: rgba(255, 255, 255, .95); filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); }
}

/* ============================================================
   Guias visuais por pose durante o cadastro:
   - frente: ponto pulsante no centro
   - esquerda: 3 chevrons à esquerda, "puxando" pra fora
   - direita: 3 chevrons à direita, "puxando" pra fora
   - sorriso: emoji pulsante
   ============================================================ */
.face-scan__guide {
    position: absolute; top: 42%; transform: translateY(-50%);
    pointer-events: none;
    display: none;
    z-index: 4;
}
.face-scan-modal[data-pose="esquerda"] .face-scan__guide--esquerda,
.face-scan-modal[data-pose="direita"]  .face-scan__guide--direita,
.face-scan-modal[data-pose="frente"]   .face-scan__guide--frente,
.face-scan-modal[data-pose="sorriso"]  .face-scan__guide--sorriso {
    display: flex; align-items: center; gap: 6px;
}

/* Arco "reflexo" DENTRO do oval — atravessa a face pro lado que o user
   precisa virar. Conectado ao topo e à base do oval; a curvatura indica
   a direção. Estilo o reflexo branco do Face ID da Apple. */
.face-scan__guide--esquerda,
.face-scan__guide--direita {
    top: 41.6%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(60vw, 280px); height: 55.5%;
    background: none;
    overflow: visible;
}
.face-scan__cursor {
    position: absolute; top: 0;
    width: 40px; height: 100%;
}
.face-scan__cursor svg {
    width: 100%; height: 100%; overflow: visible;
}
.face-scan__cursor path {
    fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
/* Linha principal — branca brilhante */
.face-scan__cursor path:nth-child(2) {
    stroke: rgba(255, 255, 255, .95);
    stroke-width: 3;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .8));
}
/* Halo — duplicado mais largo + blur pra dar profundidade 3D */
.face-scan__cursor path:nth-child(1) {
    stroke: rgba(255, 255, 255, .35);
    stroke-width: 10;
    filter: blur(4px);
}

/* ESQUERDA: arco entra pela DIREITA do oval e atravessa até a esquerda.
   2s de atraso pro user ler a instrução antes do reflexo começar. */
.face-scan__guide--esquerda .face-scan__cursor {
    animation: face-scan-go-left 2.6s ease-in-out 2s infinite both;
}
@keyframes face-scan-go-left {
    0%   { right: -20px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { right: 100%;  opacity: 0; }
}
/* DIREITA: espelho. */
.face-scan__guide--direita .face-scan__cursor {
    animation: face-scan-go-right 2.6s ease-in-out 2s infinite both;
}
@keyframes face-scan-go-right {
    0%   { left: -20px; opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { left: 100%;  opacity: 0; }
}

/* Guia central pra frente/sorriso — apenas ícone translúcido SEM fundo,
   pra não obscurecer o rosto no centro do oval. Posicionado fora do oval
   (no topo / na base) pra deixar o centro completamente limpo. */
.face-scan__guide--frente {
    top: 13.9%; left: 50%; /* logo acima do topo do oval */
    transform: translate(-50%, -100%);
    color: rgba(255, 255, 255, .85); font-size: 26px;
    animation: face-scan-pulse 1.6s ease-in-out infinite;
    background: none;
}
.face-scan__guide--sorriso {
    top: 69.4%; left: 50%; /* logo abaixo da base do oval */
    transform: translate(-50%, 0);
    color: rgba(255, 255, 255, .85); font-size: 26px;
    animation: face-scan-pulse 1.6s ease-in-out infinite;
    background: none;
}
@keyframes face-scan-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* Estado "sucesso" — para todas as animações, ticks ficam sólidos em verde. */
.face-scan-modal.is-success .face-scan__tick {
    animation: none;
    stroke: #22c55e;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, .8));
}
.face-scan-modal.is-success .face-scan__svg-base { stroke: rgba(34, 197, 94, .5); }

/* Topo: instrução / status. */
.face-scan__top {
    position: absolute; left: 0; right: 0; top: 0;
    padding: 14px 20px 22px;
    background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.4) 60%, transparent);
    color: #fff; text-align: center;
}
.face-scan__top h3 { margin: 0 0 3px; font-size: .95rem; font-weight: 700; letter-spacing: .02em; }
.face-scan__top p  { margin: 0; font-size: .78rem; opacity: .8; }
.face-scan__logo {
    display: block; margin: 0 auto 8px;
    height: 30px; width: auto;
    opacity: .9;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .5));
}

/* Desktop: modal é menor (460×~650px), então o topo não pode "comer" o oval.
   Compacta ainda mais e remove a descrição (já tá no botão / no site). */
@media (min-width: 768px) {
    .face-scan__top { padding: 12px 20px 16px; }
    .face-scan__top p { display: none; }
    .face-scan__logo { height: 26px; margin-bottom: 6px; }
}

/* Botão de fechar (canto sup direito). */
.face-scan__close {
    position: absolute; top: 14px; right: 14px;
    background: rgba(255, 255, 255, .12); color: #fff; border: 0;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer; z-index: 5;
}
.face-scan__close:hover { background: rgba(255, 255, 255, .22); }

/* Rodapé: instrução grande + botão de ação + (opcional) input de email. */
.face-scan__bottom {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 24px 20px 32px;
    background: linear-gradient(transparent, rgba(0,0,0,.78));
    color: #fff; text-align: center;
}
.face-scan__msg {
    font-size: 1.05rem; font-weight: 600; margin-bottom: 18px; min-height: 1.5em;
}
.face-scan__email {
    max-width: 320px; margin: 0 auto 14px;
}
.face-scan__email input {
    width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08); color: #fff; font-size: 1rem; text-align: center;
}
.face-scan__email input::placeholder { color: rgba(255,255,255,.5); }

.face-scan__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border-radius: 12px; border: 0;
    background: #22c55e; color: #fff; font-weight: 700; font-size: 1rem;
    cursor: pointer; transition: transform .12s, background .12s;
}
.face-scan__btn:hover:not(:disabled) { background: #16a34a; transform: translateY(-1px); }
.face-scan__btn:disabled { opacity: .55; cursor: not-allowed; }

/* Progresso de poses durante cadastro. */
.face-scan__progress {
    display: flex; justify-content: center; gap: 6px; margin-bottom: 14px;
}
.face-scan__progress span {
    width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2);
}
.face-scan__progress span.is-feita { background: #22c55e; }
.face-scan__progress span.is-atual { background: rgba(255,255,255,.85); }

/* ============================================================
   Variante CLARA (.face-scan-modal--claro) — usada no CAIXA.
   Balcão costuma ter pouca luz e a câmera fica no monitor; um fundo BRANCO com
   faixas brancas em cima/embaixo transforma a tela num refletor e ilumina o
   rosto, melhorando o reconhecimento. Não afeta o cadastro do perfil (dark).
   ============================================================ */
.face-scan-modal--claro,
.face-scan-modal--claro .modal-content { background: #fff; }
.face-scan-modal--claro .face-scan__top {
    background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.55) 60%, transparent);
    color: #0f1720;
}
.face-scan-modal--claro .face-scan__top p { color: #3a4a42; }
.face-scan-modal--claro .face-scan__bottom {
    background: linear-gradient(transparent, rgba(255,255,255,.95));
    color: #0f1720;
}
.face-scan-modal--claro .face-scan__msg { color: #0f1720; }
.face-scan-modal--claro .face-scan__close {
    background: rgba(0,0,0,.10); color: #0f1720;
}
.face-scan-modal--claro .face-scan__close:hover { background: rgba(0,0,0,.18); }
/* Oval e guias mais escuros p/ contraste sobre a tela clara. */
.face-scan-modal--claro .face-scan__svg-base { stroke: rgba(0,0,0,.30); }
.face-scan-modal--claro .face-scan__guide--frente,
.face-scan-modal--claro .face-scan__guide--sorriso { color: rgba(15,23,32,.75); }