/* ═══════════════════════════════════════════════════════════
   BIOMETRIC MODULE — Premium Styles
   ═══════════════════════════════════════════════════════════ */

/* Scanner overlay animation */
.bio-scanner-overlay {
  position: absolute; inset: 0;
  border: 3px solid rgba(6,182,212,0.6);
  border-radius: 1.5rem;
  animation: bio-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bio-pulse {
  0%,100% { border-color: rgba(6,182,212,0.3); box-shadow: inset 0 0 30px rgba(6,182,212,0.05); }
  50% { border-color: rgba(6,182,212,0.8); box-shadow: inset 0 0 60px rgba(6,182,212,0.15); }
}

/* Scan line animation */
.bio-scan-line {
  position: absolute; left: 5%; right: 5%; height: 2px;
  background: linear-gradient(90deg, transparent, #06b6d4, transparent);
  animation: bio-scan 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bio-scan {
  0% { top: 10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 90%; opacity: 0; }
}

/* Corner brackets */
.bio-corner { position: absolute; width: 30px; height: 30px; pointer-events: none; }
.bio-corner::before, .bio-corner::after { content: ''; position: absolute; background: #06b6d4; }
.bio-corner--tl { top: 8px; left: 8px; }
.bio-corner--tl::before { top: 0; left: 0; width: 30px; height: 3px; }
.bio-corner--tl::after { top: 0; left: 0; width: 3px; height: 30px; }
.bio-corner--tr { top: 8px; right: 8px; }
.bio-corner--tr::before { top: 0; right: 0; width: 30px; height: 3px; }
.bio-corner--tr::after { top: 0; right: 0; width: 3px; height: 30px; }
.bio-corner--bl { bottom: 8px; left: 8px; }
.bio-corner--bl::before { bottom: 0; left: 0; width: 30px; height: 3px; }
.bio-corner--bl::after { bottom: 0; left: 0; width: 3px; height: 30px; }
.bio-corner--br { bottom: 8px; right: 8px; }
.bio-corner--br::before { bottom: 0; right: 0; width: 30px; height: 3px; }
.bio-corner--br::after { bottom: 0; right: 0; width: 3px; height: 30px; }

/* Video container */
.bio-video-wrap {
  position: relative; width: 100%; max-width: 520px; aspect-ratio: 4/3;
  margin: 0 auto; border-radius: 1.5rem; overflow: hidden;
  background: #0f172a;
}
.bio-video-wrap video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1); border-radius: 1.5rem;
}
.bio-video-wrap canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: scaleX(-1); pointer-events: none;
}

/* Liveness indicator */
.bio-liveness-ring {
  width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid #334155; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.bio-liveness-ring svg { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); }
.bio-liveness-ring circle {
  fill: none; stroke: #06b6d4; stroke-width: 4;
  stroke-dasharray: 188.5; stroke-dashoffset: 188.5;
  transition: stroke-dashoffset 0.5s ease;
}

/* Action buttons */
.bio-action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 2.5rem 2rem; border-radius: 2rem;
  border: 2px solid transparent; cursor: pointer;
  transition: all 0.3s ease; position: relative; overflow: hidden;
  min-width: 220px;
}
.bio-action-btn::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.3s ease;
}
.bio-action-btn:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
.bio-action-btn:active { transform: translateY(-1px) scale(0.98); }

.bio-btn-ingreso {
  background: linear-gradient(135deg, #059669, #10b981, #34d399);
  color: white; box-shadow: 0 8px 30px rgba(5,150,105,0.3);
}
.bio-btn-salida {
  background: linear-gradient(135deg, #dc2626, #ef4444, #f87171);
  color: white; box-shadow: 0 8px 30px rgba(220,38,38,0.3);
}

/* Status badge */
.bio-status { 
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 1rem; border-radius: 2rem;
  font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
}
.bio-status--ok { background: rgba(16,185,129,0.1); color: #10b981; border: 1px solid rgba(16,185,129,0.2); }
.bio-status--warn { background: rgba(245,158,11,0.1); color: #f59e0b; border: 1px solid rgba(245,158,11,0.2); }
.bio-status--fail { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }

/* Challenge text */
.bio-challenge {
  background: rgba(6,182,212,0.1); border: 1px solid rgba(6,182,212,0.3);
  border-radius: 1rem; padding: 0.75rem 1.5rem;
  color: #06b6d4; font-weight: 700; font-size: 0.875rem;
  text-align: center; animation: bio-challenge-pulse 1.5s ease-in-out infinite;
}
@keyframes bio-challenge-pulse {
  0%,100% { opacity: 0.8; } 50% { opacity: 1; }
}

/* Result overlay */
.bio-result-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  background: rgba(15,23,42,0.85); backdrop-filter: blur(8px);
  border-radius: 1.5rem; z-index: 10; animation: bio-fadein 0.3s ease;
}
@keyframes bio-fadein { from { opacity: 0; } to { opacity: 1; } }

.bio-result-icon {
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
}
.bio-result-icon--ok { background: rgba(16,185,129,0.2); color: #10b981; border: 3px solid #10b981; }
.bio-result-icon--fail { background: rgba(239,68,68,0.2); color: #ef4444; border: 3px solid #ef4444; }