/* Captura guiada — sobreposição na câmera (estilo verificação facial: setas animadas, ícones e etapas). */
.camera .oval { transition: border-color .2s, box-shadow .2s, border-width .2s; }
.camera.guide-none .oval { border-color: #ef4444; }
.camera.guide-adjust .oval { border-color: #f5b301; }
.camera.guide-ok .oval { border-color: #22c55e; border-width: 5px; }
.camera.guide-ok .instruction { background: linear-gradient(transparent, rgba(21,115,71,.92)); }
.camera .instruction { font-size: 1.05rem; line-height: 1.3; padding: 18px 12px 14px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }

.guide-progress { position: absolute; left: 22%; right: 22%; top: 9%; height: 5px; border-radius: 99px; background: rgba(255,255,255,.25); overflow: hidden; }
.guide-progress > span { display: block; height: 100%; width: 0; background: #22c55e; transition: width .2s; }

/* etapas */
.fg-steps { position: absolute; top: 3%; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
.fg-steps i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); background: transparent; }
.fg-steps i.done { background: #22c55e; border-color: #22c55e; }
.fg-steps i.current { background: #fff; animation: fg-pulse 1.2s ease-in-out infinite; }

/* setas (chevrons) */
.fg-arrow { position: absolute; display: none; pointer-events: none; color: #fff; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.fg-arrow svg { width: 100%; height: 100%; overflow: visible; }
.fg-arrow path { fill: none; stroke: currentColor; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .25; }
.fg-arrow.on { display: block; }
.fg-arrow.dir-left, .fg-arrow.dir-right { top: 50%; width: 15%; height: 22%; transform: translateY(-50%); }
.fg-arrow.dir-left { left: 1.5%; }
.fg-arrow.dir-right { right: 1.5%; }
.fg-arrow.dir-right svg { transform: scaleX(-1); }
.fg-arrow.dir-up, .fg-arrow.dir-down { left: 50%; width: 22%; height: 11%; transform: translateX(-50%); }
.fg-arrow.dir-up { top: 9%; }
.fg-arrow.dir-down { bottom: 20%; }
.fg-arrow.dir-up svg { transform: rotate(90deg); }
.fg-arrow.dir-down svg { transform: rotate(-90deg); }
/* onda: o chevron mais próximo da direção acende por último, sugerindo movimento */
.fg-arrow.on path { animation: fg-wave 1.1s ease-in-out infinite; }
.fg-arrow.on path:nth-child(1) { animation-delay: .44s; }
.fg-arrow.on path:nth-child(2) { animation-delay: .22s; }
.fg-arrow.on path:nth-child(3) { animation-delay: 0s; }
.camera.guide-ok .fg-arrow { color: #86efac; }

/* ícone central (distância, luz, cabeça reta, parado, rosto, ok) */
.fg-icon { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: none;
  pointer-events: none; color: #fff; background: rgba(0,0,0,.35); border-radius: 50%; padding: 12px; }
.fg-icon.on { display: block; animation: fg-pop .25s ease-out; }
.fg-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fg-icon.icon-check { background: #22c55e; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding: 16px; }
.fg-icon.icon-check svg { stroke-width: 3; }

@keyframes fg-wave { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes fg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes fg-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fg-arrow.on path { animation: none; opacity: 1; }
  .fg-steps i.current, .fg-icon.on { animation: none; }
}

.guide-checks { display: flex; flex-wrap: wrap; gap: 4px; font-size: .75rem; }
.guide-checks span { padding: 1px 7px; border-radius: 99px; border: 1px solid currentColor; }
.guide-checks .ok { color: #157347; } .guide-checks .bad { color: #b42318; }