/* ==========================================================================
   Step-specific layout tweaks
   ========================================================================== */

/* ---------- Step 4: review data grid ---------- */
.review-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: var(--text-base);
  margin-bottom: var(--space-4);
}

.review-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface-muted);
  margin-bottom: var(--space-6);
}

.excluir-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-danger);
  background: none;
  border: none;
  font-size: var(--text-xs);
  font-weight: 600;
}

.excluir-btn:hover {
  text-decoration: underline;
}

/* ---------- Step 4: facial confirmation ---------- */
.facial-progress {
  margin-bottom: var(--space-5);
}

.facial-progress__bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.facial-progress__fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.3s ease;
}

.facial-progress__label {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

.facial-current {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}

.facial-current__body {
  flex: 1;
  min-width: 0;
}

.facial-current__name {
  font-weight: 700;
  font-size: var(--text-base);
}

.facial-current__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.facial-camera {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  background: var(--color-dark);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.facial-camera__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror, like a real mirror/selfie camera */
}

.facial-camera__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  color: var(--color-text-inverse);
  padding: var(--space-5);
}

.facial-camera__placeholder .spinner--lg {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: var(--color-text-inverse);
}

.facial-camera__placeholder--error svg {
  color: var(--color-danger);
}

.facial-camera__error-title {
  font-weight: 700;
}

.facial-camera__error-desc {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.75);
  max-width: 34ch;
}

/* Camera-shutter flash — plays once right as a photo is taken (see handleCapturar in
   step4-emissao.js), then fades out on its own; the element is simply gone on the next render. */
.facial-camera__flash {
  position: absolute;
  inset: 0;
  background: #fff;
  animation: facial-flash 350ms ease-out forwards;
  pointer-events: none;
}

@keyframes facial-flash {
  0% {
    opacity: 0.9;
    box-shadow: inset 0 0 80px 20px rgba(0, 0, 0, 0.5);
  }
  100% {
    opacity: 0;
    box-shadow: inset 0 0 80px 20px rgba(0, 0, 0, 0);
  }
}

.facial-camera__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-4);
  background: rgba(11, 13, 26, 0.72);
  color: var(--color-text-inverse);
}

.facial-camera__overlay p {
  font-size: var(--text-sm);
  font-weight: 600;
  max-width: 32ch;
}

.facial-camera__overlay--success svg {
  color: var(--color-success);
}

.facial-camera__overlay--failure svg {
  color: var(--color-danger);
}

.facial-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.facial-actions__hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* ---------- Step 4: employee sign-off table ---------- */
.sign-cell {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.status-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-dot--pending {
  background: var(--color-surface-muted);
  border: 2px solid var(--color-border-strong);
}

.status-dot--done {
  background: var(--color-success);
  color: var(--color-text-inverse);
}

/* ---------- Step 4 success (batch complete) ---------- */
.success-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
}

.success-banner__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-success-light);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-banner__title {
  font-size: var(--text-xl);
  font-weight: 700;
}

.success-banner__desc {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  max-width: 48ch;
}

.success-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}