/* ====== Facial (namespaced) ====== */
.facial-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  z-index:9998;
  display:none;
}

/* =========================================================
   FACIAL — ACABAMENTO PREMIUM FINAL
   ========================================================= */

.facial-modal{
  width:min(780px, calc(100vw - 28px));
  max-height:min(92vh, 820px);
  overflow-y:auto;
  overflow-x:hidden;
  padding:18px;
  gap:12px;
  border-radius:24px;
  border:1px solid rgba(226,232,240,.95);
  background:
    linear-gradient(180deg, rgba(248,250,252,.98) 0%, rgba(255,255,255,.995) 18%, #ffffff 100%);
  box-shadow:
    0 30px 80px rgba(2,6,23,.20),
    0 12px 28px rgba(15,23,42,.08);
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}

.facial-modal::-webkit-scrollbar{
  width:10px;
}
.facial-modal::-webkit-scrollbar-thumb{
  background:#cbd5e1;
  border-radius:999px;
}
.facial-modal::-webkit-scrollbar-track{
  background:transparent;
}

/* cabeçalho premium */
.facial-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0;
}

.facial-title{
  margin:0;
  padding:0;
  font-size:20px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-.02em;
  color:#0f172a;
  background:transparent;
}

.facial-close-top{
  width:40px !important;
  min-width:40px;
  height:40px;
  padding:0;
  border:1px solid #dbe5ef;
  border-radius:14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color:#334155 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:
    0 8px 18px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.92);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.facial-close-top:hover{
  transform:translateY(-1px);
  border-color:#cbd5e1;
  box-shadow:
    0 12px 22px rgba(15,23,42,.07),
    inset 0 1px 0 rgba(255,255,255,.96);
}

.facial-close-top span{
  font-size:22px;
  line-height:1;
  font-weight:400;
  transform:translateY(-1px);
}

/* barra superior */
.facial-topbar{
  margin:0 0 2px !important;
  padding:10px 12px !important;
  border-radius:16px;
  border:1px solid #e2e8f0;
  background:linear-gradient(180deg, #fbfdff 0%, #f7fafc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 8px 18px rgba(15,23,42,.04);
  flex-shrink:0;
}

.facial-topbar .facial-cam-label{
  font-size:13px !important;
  font-weight:800 !important;
  color:#334155 !important;
}

.facial-topbar .facial-cam-select{
  height:42px;
  border-radius:14px;
  border:1px solid #d7e2ee;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
  font-size:13px;
  font-weight:700;
}

.facial-topbar .facial-cam-select:focus{
  border-color:#93c5fd;
  box-shadow:
    0 0 0 4px rgba(59,130,246,.10),
    0 10px 20px rgba(15,23,42,.05);
}

.facial-topbar .facial-cam-refresh{
  height:42px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid #cfd8e3;
  background:linear-gradient(180deg,#ffffff,#eef2f7);
  color:#0f172a !important;
  font-size:13px;
  font-weight:900;
  box-shadow:
    0 8px 18px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.facial-topbar .facial-cam-refresh:hover{
  transform:translateY(-1px);
  box-shadow:
    0 12px 22px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.92);
}

/* área da câmera mais premium e menos “espalhada” */
.facial-video-wrap{
  width:min(100%, 560px);
  margin:0 auto;
  flex:0 0 auto;
  aspect-ratio:4 / 3;
  height:auto;
  min-height:unset;
  max-height:none;
  border-radius:22px;
  overflow:hidden;
  border:1px solid #d8e3ee;
  background:
    radial-gradient(circle at top, rgba(56,189,248,.08), rgba(8,17,31,0) 42%),
    linear-gradient(180deg, #06111f 0%, #081321 100%);
  box-shadow:
    0 18px 40px rgba(2,6,23,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}

#faceVideo{
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
}

/* oval mais elegante */
.facial-aim{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -52%);
  width:clamp(170px, 34vw, 220px);
  height:clamp(220px, 46vw, 290px);
  max-width:none;
  max-height:none;
  border-radius:999px;
  border:1.5px solid rgba(203,213,225,.52);
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.06) 0%,
      rgba(255,255,255,.025) 52%,
      rgba(255,255,255,0) 74%
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 0 0 1px rgba(125,211,252,.06),
    0 0 28px rgba(59,130,246,.10);
}

.facial-aim::before{
  content:'';
  position:absolute;
  inset:10px;
  border-radius:999px;
  border:1px dashed rgba(255,255,255,.16);
}

.facial-aim.almost{
  border-color:rgba(96,165,250,.72);
  box-shadow:
    inset 0 0 0 1px rgba(147,197,253,.12),
    0 0 24px rgba(96,165,250,.10);
}

.facial-aim.ok{
  border-color:rgba(34,197,94,.80);
  box-shadow:
    inset 0 0 0 1px rgba(134,239,172,.12),
    0 0 24px rgba(34,197,94,.12);
}

.facial-ring,
.facial-eyeline{
  display:none !important;
}

.facial-dots{
  top:16px;
}

.facial-countdown{
  bottom:34px;
}

/* card de orientação fora da câmera com cara enterprise */
#facialHint{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  transform:none;
  width:100%;
  max-width:none;
  margin:0;
  padding:14px 16px 15px;
  border-radius:18px;
  border:1px solid rgba(219,229,239,.98);
  background:linear-gradient(180deg,#f8fafc 0%, #f1f5f9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 10px 24px rgba(15,23,42,.05);
  color:#0f172a;
}

#facialHint::before{
  content:'';
  position:absolute;
  left:14px;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#60a5fa,#2563eb);
  box-shadow:0 0 14px rgba(59,130,246,.16);
}

#facialHint .facial-hint__eyebrow{
  display:block;
  margin-left:14px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#1d4ed8;
}

#facialHint .facial-hint__title{
  display:block;
  margin:5px 0 0 14px;
  font-size:15px;
  line-height:1.28;
  font-weight:900;
  color:#0f172a;
}

#facialHint .facial-hint__meta{
  display:block;
  margin:6px 0 0 14px;
  font-size:12px;
  line-height:1.45;
  color:#64748b;
}

/* estados */
#facialHint.is-processing{
  border-color:rgba(96,165,250,.18);
  background:linear-gradient(180deg,#f8fbff 0%, #eff6ff 100%);
}

#facialHint.is-warning{
  border-color:rgba(245,158,11,.16);
  background:linear-gradient(180deg,#fffaf0 0%, #fffbeb 100%);
}

#facialHint.is-warning::before{
  background:linear-gradient(180deg,#f59e0b,#d97706);
  box-shadow:0 0 12px rgba(245,158,11,.14);
}

#facialHint.is-warning .facial-hint__eyebrow{
  color:#b45309;
}

#facialHint.is-error{
  border-color:rgba(239,68,68,.16);
  background:linear-gradient(180deg,#fff7f7 0%, #fef2f2 100%);
}

#facialHint.is-error::before{
  background:linear-gradient(180deg,#ef4444,#dc2626);
  box-shadow:0 0 12px rgba(239,68,68,.14);
}

#facialHint.is-error .facial-hint__eyebrow{
  color:#b91c1c;
}

#facialHint.is-success,
#facialHint.is-ready{
  border-color:rgba(16,185,129,.16);
  background:linear-gradient(180deg,#f4fffb 0%, #ecfdf5 100%);
}

#facialHint.is-success::before,
#facialHint.is-ready::before{
  background:linear-gradient(180deg,#10b981,#059669);
  box-shadow:0 0 12px rgba(16,185,129,.14);
}

#facialHint.is-success .facial-hint__eyebrow,
#facialHint.is-ready .facial-hint__eyebrow{
  color:#047857;
}

/* métricas */
.facial-metrics{
  margin:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  flex-shrink:0;
}

.facial-badge{
  min-height:38px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid #dbe7ff;
  background:linear-gradient(180deg,#f8fbff,#eef4ff);
  color:#1d4ed8;
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 8px 16px rgba(37,99,235,.05);
}

/* rodapé sempre legível */
.facial-actions{
  margin:0;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  flex-shrink:0;
}

.facial-actions .facial-btn{
  flex:1 1 180px;
  min-height:46px;
  border-radius:15px;
  font-size:14px;
  font-weight:900;
}

.facial-btn--ghost{
  background:linear-gradient(180deg,#f8fafc 0%, #eef2f7 100%);
  color:#0f172a;
  border:1px solid #d8e1ea;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 8px 16px rgba(15,23,42,.04);
}

.facial-btn--ghost:hover{
  transform:translateY(-1px);
}

.facial-btn--ok{
  background:linear-gradient(180deg,#133b63 0%, #123253 100%);
  color:#ffffff;
  border:1px solid rgba(15,23,42,.18);
  box-shadow:
    0 14px 24px rgba(18,50,83,.24),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.facial-btn--ok:hover{
  transform:translateY(-1px);
}

@media (max-width: 640px){
  .facial-modal{
    width:min(100vw - 18px, 780px);
    padding:14px;
    border-radius:20px;
  }

  .facial-title{
    font-size:18px;
  }

  .facial-topbar{
    flex-wrap:wrap !important;
  }

  .facial-topbar .facial-cam-select{
    min-width:100%;
  }

  .facial-video-wrap{
    width:100%;
    aspect-ratio:1 / 1.08;
    border-radius:18px;
  }

  .facial-aim{
    width:clamp(150px, 44vw, 190px);
    height:clamp(195px, 58vw, 245px);
  }

  .facial-metrics{
    grid-template-columns:1fr;
  }

  .facial-actions{
    flex-direction:column;
  }

  .facial-actions .facial-btn{
    flex:1 1 auto;
    width:100%;
  }

  #facialHint{
    padding:12px 14px 13px;
    border-radius:16px;
  }

  #facialHint .facial-hint__title{
    font-size:14px;
  }

  #facialHint .facial-hint__meta{
    font-size:11px;
  }
}
.facial-modal{
  position:fixed;
  z-index:9999;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  width:min(760px, 92vw);
  max-height:min(86vh, 760px);

  /* SEM rolagem */
  overflow:hidden;

  background:#ffffff;
  border-radius:16px;
  box-shadow:0 22px 70px rgba(2,6,23,.35);

  padding:18px;

  /* Layout SaaS */
  display:none;            /* continua escondido por padrão */
  flex-direction:column;
  gap:12px;

  box-sizing:border-box;
}
.facial-modal *{ box-sizing:border-box; }
.facial-title{ margin:0 0 8px 0; font-weight:700; font-size:18px; }
.facial-video-wrap{
  position:relative;
  width:100%;
  flex:1 1 auto;                 /* ocupa o espaço que sobrar no modal */
  min-height:260px;
  max-height:58vh;               /* evita estourar a tela */
  height:clamp(260px, 52vh, 520px);

  background:#0b1220;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  /* moldura tecnológica */
  box-shadow: 0 0 20px rgba(0,229,255,0.08);
}
#faceVideo{
  width:100%;
  height:100%;
  object-fit:contain; /* ← MUDE AQUI */
  background:#0b1220;
}

/* Barra de seleção de câmera */
.facial-topbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 0 10px 0;
}

.facial-cam-label{
  font-size:13px;
  font-weight:600;
  color:#223;
}

/* Estilo do select - aparência SaaS */
.facial-cam-select{
  flex:1 1 auto;
  min-width:260px;
  height:36px;

  padding:0 12px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:10px;
  background:#fff;
  color:#0f172a;

  outline:none;
}

.facial-cam-select:focus{
  border-color: rgba(0,90,255,.55);
  box-shadow: 0 0 0 3px rgba(0,90,255,.14);
}

/* Botão refresh - não expandir e texto visível */
.facial-cam-refresh{
  /* anula CSS global que deixa button full e texto branco */
  width:auto !important;
  flex:0 0 auto;
  white-space:nowrap;

  padding:8px 12px;
  height:36px;
  border:1px solid rgba(15,23,42,.14);
  border-radius:10px;

  background:#eef2f7;         /* cinza premium */
  color:#0f172a !important;   /* texto visível */
  font-weight:800;
  cursor:pointer;
}

.facial-cam-refresh:hover{
  background:#e9eef6;
}

/* Ajuste do label dentro do topo para sobrepor reset global */
.facial-topbar .facial-cam-label{
  margin:0 !important;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#64748b;
  font-weight:800;
}
.facial-hint{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  background:rgba(0,0,0,.55); color:#fff; padding:6px 10px; border-radius:14px; font-size:14px;
}
.facial-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
.facial-btn{ appearance:none; border:0; border-radius:10px; padding:8px 12px; cursor:pointer; }
.facial-btn--ghost{ background:#eef2f7; color:#0f172a; }
.facial-btn--ok{ background:#1e4a6c; color:#fff; }
.facial-metrics{ margin-top:8px; font-size:12px; color:#334155; display:flex; gap:10px; flex-wrap:wrap; }
.facial-badge{ background:#eef2ff; border:1px solid #e0e7ff; color:#1e40af; border-radius:999px; padding:4px 8px; font-size:12px; }

/* === Overlay facial (canvas por cima do vídeo) === */
.facial-video-wrap {
  position: relative;
}
.facial-video-wrap > .facial-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ====== GUIA DE CADASTRO FACIAL (overlay leve) ====== */
.facial-video-wrap > div.facial-overlay {
  position:absolute; inset:0;
  pointer-events:none;
  display:grid; place-items:center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.facial-aim {
  width: 58vmin; height: 58vmin; max-width: 520px; max-height: 520px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25) inset;
  transition: box-shadow .12s linear, transform .12s linear;
}

.facial-aim.ok     { box-shadow: 0 0 0 4px rgba(0,180,80,.9) inset; }
.facial-aim.almost { box-shadow: 0 0 0 4px rgba(255,200,0,.85) inset; }
.facial-aim.off    { box-shadow: 0 0 0 3px rgba(255,255,255,.25) inset; }

.facial-ring {
  position: absolute; width: 44vmin; height: 44vmin; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.15) inset;
}

.facial-eyeline {
  position: absolute; width: 34vmin; height: 0; border-top: 3px solid rgba(255,255,255,.25);
  transform-origin: center; top: 42%;
}
.facial-eyeline.ok { border-top-color: rgba(0,180,80,.9); }

/* setas laterais removidas intencionalmente para UI sem indicação de virar */

.facial-hint {
  position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.45); color: #fff; padding: 8px 12px; border-radius: 10px;
  font-size: 14px; line-height: 1.2; max-width: min(90vw, 520px); text-align: center;
}

.facial-dots {
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px;
}
.facial-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(255,255,255,.3);
}
.facial-dot.active  { background: rgba(255,255,255,.8); }
.facial-dot.done    { background: rgba(0,180,80,.9); }

.facial-countdown {
  position: absolute; bottom: 18%; left: 50%; transform: translateX(-50%);
  font-size: 28px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

.facial-toast {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.55); color: #fff; padding: 8px 10px; border-radius: 8px;
  font-size: 13px; opacity: 0; transition: opacity .15s linear;
}
.facial-toast.show { opacity: 1; }

/* Adicionado: topbar + seletor de câmera (aparece apenas no modal facial) */
.facial-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.facial-camera{
  display:flex;
  align-items:center;
  gap:8px;
}

.facial-camera-label{
  font-size:12px;
  color:#6b7280;
  font-weight:600;
}

.facial-camera-select{
  height:34px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  padding:0 10px;
  background:#fff;
  font-size:13px;
}

/* Mantém título e barra de câmera visíveis se o modal rolar */
.facial-title{
  position: sticky;
  top: 0;
  z-index: 5;
  background: #fff;
  padding: 6px 0 6px 0;
  margin: 0 0 6px 0;
}

.facial-topbar{
  position: sticky;
  top: 34px;                  /* abaixo do título */
  z-index: 5;
  background:#fff;
  padding: 4px 0 10px 0;
  margin: 0 0 10px 0;
  border-bottom: 1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;             /* não quebra no mobile */
}

/* Opcional: botões mais padronizados */
.facial-actions{
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-top:12px;
}

.facial-actions .facial-btn{
  flex:1;
  height:44px;
  border-radius:12px;
  font-weight:800;
}

/* ===== Ajuste PROFISSIONAL: topbar câmera (blindado contra CSS global) ===== */
.facial-topbar{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:nowrap !important;

  padding:10px 12px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  background:#f8fafc;
}

.facial-topbar .facial-cam-label{
  display:inline-flex !important;
  align-items:center;
  margin:0 !important;
  padding:0 !important;
  white-space:nowrap;
  font-size:12px;
  font-weight:800;
  color:#334155;
}

.facial-topbar .facial-cam-select{
  width:auto !important;         /* mata width:100% global */
  margin:0 !important;           /* mata margin-bottom global */
  flex:1 1 auto;
  min-width:260px;
  height:36px;

  border:1px solid rgba(15,23,42,.14);
  border-radius:12px;
  padding:0 12px;
  background:#fff;
  color:#0f172a;
  outline:none;
}

.facial-topbar .facial-cam-refresh{
  width:auto !important;         /* mata button width:100% global */
  margin:0 !important;
  flex:0 0 auto;
  height:36px;

  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:#eef2f7;
  color:#0f172a !important;
  font-weight:900;
  cursor:pointer;
}

.facial-topbar .facial-cam-refresh:hover{
  background:#e9eef6;
}

/* no mobile pode quebrar linha (bonito e sem estourar) */
@media (max-width: 560px){
  .facial-topbar{ flex-wrap:wrap !important; }
  .facial-topbar .facial-cam-select{ min-width:100%; }
}

/* Camadas dentro do vídeo */

/* limpeza visual do guia facial */
.facial-ring,
.facial-eyeline {
  display: none !important;
}

/* deixa só a moldura principal, pontos e texto */
.facial-aim {
  width: 46vmin;
  height: 46vmin;
  max-width: 420px;
  max-height: 420px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.22) inset;
}

.facial-hint {
  bottom: 8%;
  max-width: min(88vw, 460px);
}
#faceVideo{ position:relative; z-index:1; }
#faceOverlay{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  width:100%;
  height:100%;
  transform: scaleX(-1);
  transform-origin: center;
}
.facial-video-wrap > div.facial-overlay{ z-index:3; }  /* guia */
.facial-hint{ z-index:4; }

/* Camada de análise durante a verificação */
.facial-video-wrap.is-dimmed::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(5,11,20,.55), rgba(9,14,24,.78));
  backdrop-filter: blur(3px) saturate(110%);
  z-index:11;
}

#faceVideo.facial-video--blur{
  filter: blur(2px) brightness(.92);
}

.facial-analyzing{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(5,11,20,.35), rgba(9,14,24,.62));
  color:#e2e8f0;
  z-index:12;
  pointer-events:none;
}

.facial-analyzing__content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  background:rgba(7,13,23,.65);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}

.facial-spinner{
  width:48px;
  height:48px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.22);
  border-top-color:#38bdf8;
  animation: facialSpin .9s linear infinite;
}

.facial-analyzing__text{
  font-size:14px;
  font-weight:800;
  text-align:center;
  max-width:240px;
  line-height:1.3;
}

@keyframes facialSpin{
  to{ transform:rotate(360deg); }
}

/* Scan line animada dentro do vídeo (efeito biometria) */
.facial-scan-line {
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, transparent, #00e5ff, transparent);
  animation: scanMove 2s linear infinite;
  pointer-events: none;
  z-index: 5;
}

@keyframes scanMove {
  0% { top:0%; }
  100% { top:100%; }
}

/* reforço visual da moldura do vídeo (opcional) */
.facial-video-wrap{
  border: 2px solid rgba(0,229,255,0.06);
  box-shadow: 0 0 20px rgba(0,229,255,0.06);
}

/* Card de orientação antes da captura */
.facial-orientation-card{
  width:min(100%, 560px);
  margin:0 auto 10px;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(203,213,225,.9);
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow:0 10px 24px rgba(15,23,42,.07);
}

.facial-orientation-card__title{
  margin:0 0 8px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.02em;
  color:#0f172a;
}

.facial-orientation-card__list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:4px;
  color:#1e293b;
  font-size:13px;
  line-height:1.35;
}

.facial-orientation-card__prep{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.facial-prep-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid transparent;
}

.facial-prep-pill.is-loading{
  color:#334155;
  background:#f1f5f9;
  border-color:#cbd5e1;
}

.facial-prep-pill.is-ready{
  color:#166534;
  background:#ecfdf3;
  border-color:#86efac;
}

/* Mensagem principal fora da camera para nao cobrir o rosto */
#facialHint{
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  transform:none;
  width:100%;
  max-width:none;
  margin:10px 0 0;
}

.facial-overlay .facial-hint{
  display:none !important;
}

/* ===== Premium guidance layer ===== */
#facialHint,
.facial-overlay .facial-hint{
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  transform:none;
  max-width:none;
  padding:14px 16px 15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(8,15,29,.86), rgba(13,24,43,.70)),
    rgba(8,15,29,.82);
  box-shadow:
    0 18px 36px rgba(2,6,23,.36),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(135%);
  color:#f8fbff;
  text-align:left;
  z-index:8;
}

#facialHint::before,
.facial-overlay .facial-hint::before{
  content:'';
  position:absolute;
  left:16px;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(125,211,252,.95), rgba(56,189,248,.25));
  box-shadow:0 0 18px rgba(56,189,248,.38);
}

#facialHint .facial-hint__eyebrow,
.facial-overlay .facial-hint .facial-hint__eyebrow{
  display:block;
  margin-left:14px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#9dd8ff;
}

#facialHint .facial-hint__title,
.facial-overlay .facial-hint .facial-hint__title{
  display:block;
  margin:5px 0 0 14px;
  font-size:16px;
  line-height:1.22;
  font-weight:800;
  letter-spacing:-.02em;
  color:#f8fbff;
}

#facialHint .facial-hint__meta,
.facial-overlay .facial-hint .facial-hint__meta{
  display:block;
  margin:6px 0 0 14px;
  font-size:12px;
  line-height:1.45;
  color:rgba(226,238,255,.78);
}

#facialHint.is-ready,
.facial-overlay .facial-hint.is-ready{
  border-color:rgba(74,222,128,.28);
  background:linear-gradient(135deg, rgba(5,22,16,.86), rgba(9,37,25,.72));
}

#facialHint.is-ready::before,
.facial-overlay .facial-hint.is-ready::before{
  background:linear-gradient(180deg, rgba(74,222,128,.98), rgba(22,163,74,.30));
  box-shadow:0 0 18px rgba(74,222,128,.32);
}

#facialHint.is-processing,
.facial-overlay .facial-hint.is-processing{
  border-color:rgba(125,211,252,.25);
}

#facialHint.is-warning,
.facial-overlay .facial-hint.is-warning{
  border-color:rgba(251,191,36,.28);
  background:linear-gradient(135deg, rgba(33,20,4,.88), rgba(51,33,8,.72));
}

#facialHint.is-warning::before,
.facial-overlay .facial-hint.is-warning::before{
  background:linear-gradient(180deg, rgba(251,191,36,.96), rgba(245,158,11,.28));
  box-shadow:0 0 16px rgba(245,158,11,.26);
}

#facialHint.is-error,
.facial-overlay .facial-hint.is-error{
  border-color:rgba(248,113,113,.30);
  background:linear-gradient(135deg, rgba(34,8,12,.90), rgba(56,13,19,.78));
}

#facialHint.is-error::before,
.facial-overlay .facial-hint.is-error::before{
  background:linear-gradient(180deg, rgba(248,113,113,.98), rgba(220,38,38,.28));
  box-shadow:0 0 16px rgba(248,113,113,.24);
}

#facialHint.is-success,
.facial-overlay .facial-hint.is-success{
  border-color:rgba(52,211,153,.32);
  background:linear-gradient(135deg, rgba(5,27,21,.88), rgba(7,47,37,.72));
}

#facialHint.is-success::before,
.facial-overlay .facial-hint.is-success::before{
  background:linear-gradient(180deg, rgba(52,211,153,.98), rgba(5,150,105,.28));
  box-shadow:0 0 16px rgba(16,185,129,.24);
}

@media (max-width: 640px){
  #facialHint,
  .facial-overlay .facial-hint{
    left:12px;
    right:12px;
    bottom:12px;
    padding:12px 14px 13px;
    border-radius:16px;
  }

  #facialHint .facial-hint__title,
  .facial-overlay .facial-hint .facial-hint__title{
    font-size:14px;
  }

  #facialHint .facial-hint__meta,
  .facial-overlay .facial-hint .facial-hint__meta{
    font-size:11px;
  }
}
/* =========================================================
   FACIAL — REFINO VISUAL ENTERPRISE FINAL
   Mantém a lógica intacta e só corrige a composição visual
   ========================================================= */

/* modal mais coesa e menos "quadrada" */
.facial-modal{
  width:min(790px, calc(100vw - 28px));
  border-radius:22px;
  padding:18px 18px 16px;
  gap:10px;
  background:
    linear-gradient(180deg, rgba(248,250,252,.98) 0%, rgba(255,255,255,.99) 18%, #ffffff 100%);
  border:1px solid rgba(226,232,240,.95);
  box-shadow:
    0 28px 72px rgba(2,6,23,.18),
    0 10px 24px rgba(15,23,42,.08);
}

/* título mais corporativo */
.facial-title{
  position:relative;
  top:auto;
  margin:0;
  padding:2px 4px 4px;
  background:transparent;
  font-size:17px;
  font-weight:900;
  letter-spacing:-.02em;
  color:#0f172a;
}

/* topo mais elegante, sem ficar pesado */
.facial-topbar{
  position:relative;
  top:auto;
  margin:2px 0 10px !important;
  padding:10px 12px !important;
  border-radius:16px;
  border:1px solid #e2e8f0;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f7fafc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 8px 18px rgba(15,23,42,.04);
  border-bottom:1px solid #e2e8f0;
}

.facial-topbar .facial-cam-label{
  font-size:13px !important;
  color:#334155 !important;
  font-weight:800 !important;
}

.facial-topbar .facial-cam-select{
  height:42px;
  border-radius:14px;
  border:1px solid #d7e2ee;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  font-size:13px;
  font-weight:600;
}

.facial-topbar .facial-cam-select:focus{
  border-color:#93c5fd;
  box-shadow:
    0 0 0 4px rgba(59,130,246,.10),
    0 10px 20px rgba(15,23,42,.05);
}

.facial-topbar .facial-cam-refresh{
  height:42px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid #cfd8e3;
  background:linear-gradient(180deg,#ffffff,#eef2f7);
  color:#0f172a !important;
  font-size:13px;
  font-weight:900;
  box-shadow:
    0 8px 18px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.facial-topbar .facial-cam-refresh:hover{
  transform:translateY(-1px);
  box-shadow:
    0 12px 22px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.92);
}

/* área da câmera com acabamento melhor */
.facial-video-wrap{
  margin:0;
  min-height:276px;
  height:clamp(276px, 48vh, 520px);
  max-height:58vh;
  border-radius:20px;
  border:1px solid rgba(148,163,184,.20);
  background:
    radial-gradient(circle at top, rgba(56,189,248,.07), transparent 28%),
    linear-gradient(180deg,#071224 0%, #08172a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 16px 36px rgba(2,6,23,.14);
  overflow:hidden;
}

.facial-video-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    inset 0 -50px 70px rgba(2,6,23,.14);
}

#faceVideo{
  background:
    radial-gradient(circle at center, rgba(15,23,42,.08), rgba(2,6,23,.42));
}

/* remove a dica sobre o vídeo para não cobrir o rosto */
.facial-overlay .facial-hint{
  display:none !important;
}

/* transforma a mensagem principal em card abaixo do vídeo */
#facialHint{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:100%;
  max-width:none !important;
  margin:10px 0 0 !important;
  padding:14px 16px 14px 18px;
  border-radius:18px;
  border:1px solid rgba(226,232,240,.95);
  background:
    linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
  box-shadow:
    0 12px 26px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.95);
  text-align:left;
  z-index:auto !important;
}

#facialHint::before{
  content:"";
  position:absolute;
  left:14px;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, #60a5fa, #2563eb);
  box-shadow:0 0 12px rgba(37,99,235,.14);
}

#facialHint .facial-hint__eyebrow{
  display:block;
  margin-left:16px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#2563eb;
}

#facialHint .facial-hint__title{
  display:block;
  margin:7px 0 0 16px;
  font-size:15px;
  line-height:1.22;
  font-weight:900;
  letter-spacing:-.02em;
  color:#0f172a;
}

#facialHint .facial-hint__meta{
  display:block;
  margin:6px 0 0 16px;
  font-size:12px;
  line-height:1.45;
  color:#64748b;
}

/* tons mais elegantes por estado */
#facialHint.is-ready{
  border-color:rgba(34,197,94,.18);
  background:linear-gradient(180deg,#f6fef9 0%, #f0fdf4 100%);
}

#facialHint.is-ready::before{
  background:linear-gradient(180deg,#22c55e,#16a34a);
  box-shadow:0 0 12px rgba(34,197,94,.14);
}

#facialHint.is-ready .facial-hint__eyebrow{
  color:#15803d;
}

#facialHint.is-processing{
  border-color:rgba(96,165,250,.18);
  background:linear-gradient(180deg,#f8fbff 0%, #eff6ff 100%);
}

#facialHint.is-warning{
  border-color:rgba(245,158,11,.16);
  background:linear-gradient(180deg,#fffaf0 0%, #fffbeb 100%);
}

#facialHint.is-warning::before{
  background:linear-gradient(180deg,#f59e0b,#d97706);
  box-shadow:0 0 12px rgba(245,158,11,.14);
}

#facialHint.is-warning .facial-hint__eyebrow{
  color:#b45309;
}

#facialHint.is-error{
  border-color:rgba(239,68,68,.16);
  background:linear-gradient(180deg,#fff7f7 0%, #fef2f2 100%);
}

#facialHint.is-error::before{
  background:linear-gradient(180deg,#ef4444,#dc2626);
  box-shadow:0 0 12px rgba(239,68,68,.14);
}

#facialHint.is-error .facial-hint__eyebrow{
  color:#b91c1c;
}

#facialHint.is-success{
  border-color:rgba(16,185,129,.16);
  background:linear-gradient(180deg,#f4fffb 0%, #ecfdf5 100%);
}

#facialHint.is-success::before{
  background:linear-gradient(180deg,#10b981,#059669);
  box-shadow:0 0 12px rgba(16,185,129,.14);
}

#facialHint.is-success .facial-hint__eyebrow{
  color:#047857;
}

/* métricas com mais presença */
.facial-metrics{
  margin:10px 0 0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}

.facial-badge{
  min-height:36px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid #dbe7ff;
  background:linear-gradient(180deg,#f8fbff,#eef4ff);
  color:#1d4ed8;
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 8px 16px rgba(37,99,235,.05);
}

/* rodapé melhor resolvido */
.facial-actions{
  margin:12px 0 0 !important;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
}

.facial-actions .facial-btn:only-child{
  grid-column:1 / -1;
  max-width:280px;
  margin:0 auto;
}

.facial-actions .facial-btn{
  min-height:46px;
  border-radius:15px;
  font-size:14px;
  font-weight:900;
}

.facial-btn--ghost{
  background:linear-gradient(180deg,#f8fafc,#edf2f7);
  border:1px solid #d8e1eb;
  color:#0f172a;
  box-shadow:
    0 8px 18px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.facial-btn--ghost:hover{
  background:linear-gradient(180deg,#ffffff,#eef2f7);
  box-shadow:
    0 12px 22px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.92);
}

/* responsivo */
@media (max-width: 640px){
  .facial-modal{
    width:min(96vw, 96vw);
    border-radius:20px;
    padding:14px 14px 14px;
  }

  .facial-video-wrap{
    min-height:236px;
    height:clamp(236px, 40vh, 380px);
    border-radius:18px;
  }

  #facialHint{
    padding:12px 14px 12px 16px;
    border-radius:16px;
  }

  #facialHint .facial-hint__title{
    font-size:14px;
  }

  #facialHint .facial-hint__meta{
    font-size:11px;
  }

  .facial-metrics{
    grid-template-columns:1fr;
  }

  .facial-actions{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   FACIAL — OVAL GUIDE PREMIUM
   Adicionar no FINAL do arquivo
   ========================================================= */

/* reativa só o guia principal em formato oval */
.facial-aim{
  position:absolute;
  left:50%;
  top:49.5%;
  transform:translate(-50%, -50%);

  width:clamp(150px, 20vw, 190px);
  height:clamp(195px, 26vw, 250px);

  border-radius:50% / 44%;
  border:1.5px solid rgba(255,255,255,.26);
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.035) 0%,
      rgba(255,255,255,.015) 56%,
      rgba(255,255,255,0) 76%
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 18px rgba(255,255,255,.03);

  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    transform .16s ease;
}

/* linha interna mais sutil */
.facial-aim::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:inherit;
  border:1px dashed rgba(255,255,255,.10);
  pointer-events:none;
}

/* remove a marca inferior para ficar mais limpo */
.facial-aim::after{
  display:none;
}

/* estado neutro */
.facial-aim.off{
  border-color:rgba(255,255,255,.24);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 14px rgba(255,255,255,.02);
}

/* quase pronto */
.facial-aim.almost{
  border-color:rgba(96,165,250,.72);
  background:
    radial-gradient(
      ellipse at center,
      rgba(96,165,250,.045) 0%,
      rgba(96,165,250,.018) 56%,
      rgba(96,165,250,0) 76%
    );
  box-shadow:
    inset 0 0 0 1px rgba(147,197,253,.10),
    0 0 20px rgba(96,165,250,.10);
}

/* pronto */
.facial-aim.ok{
  border-color:rgba(34,197,94,.80);
  background:
    radial-gradient(
      ellipse at center,
      rgba(34,197,94,.05) 0%,
      rgba(34,197,94,.02) 56%,
      rgba(34,197,94,0) 76%
    );
  box-shadow:
    inset 0 0 0 1px rgba(134,239,172,.10),
    0 0 22px rgba(34,197,94,.10);
}

/* mantém os outros elementos discretos */
.facial-ring,
.facial-eyeline{
  display:none !important;
}

/* posicionamento dos dots um pouco melhor com o oval */
.facial-dots{
  top:16px;
}

.facial-countdown{
  bottom:34px;
}

/* em telas menores, oval um pouco mais compacto */
@media (max-width: 640px){
  .facial-aim{
    width:clamp(140px, 44vw, 180px);
    height:clamp(180px, 56vw, 230px);
    top:49.5%;
  }

  .facial-aim::before{
    inset:8px;
  }
}

/* =========================================================
   FACIAL VERIFY - TELA DE ORIENTACAO PREMIUM LIMPA
   Remove mensagens tecnicas e deixa o modal com aparencia cliente
   ========================================================= */

.facial-modal.is-orientation-step{
  width:min(760px, calc(100vw - 28px)) !important;
  max-height:min(92vh, 780px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:22px 22px 24px !important;
  gap:14px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at top left, rgba(20,184,166,.08), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 42%, #ffffff 100%) !important;
  border:1px solid rgba(226,232,240,.96) !important;
  box-shadow:
    0 34px 90px rgba(2,6,23,.24),
    0 10px 26px rgba(15,23,42,.10) !important;
}

/* Nao mostrar texto tecnico para cliente antes de iniciar */
.facial-modal.is-orientation-step #facialHint,
.facial-modal.is-orientation-step .facial-metrics{
  display:none !important;
}

/* Card central de orientacoes */
.facial-modal.is-orientation-step .facial-orientation-card{
  width:min(100%, 430px) !important;
  margin:6px auto 12px !important;
  padding:24px 24px 22px !important;
  border-radius:22px !important;
  border:1px solid rgba(203,213,225,.90) !important;
  background:
    radial-gradient(circle at top left, rgba(20,184,166,.10), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  box-shadow:
    0 24px 52px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* Titulo ORIENTACOES */
.facial-orientation-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
  color:#102a2c;
  font-size:21px;
  line-height:1;
  font-weight:950;
  letter-spacing:.02em;
}

.facial-orientation-kicker__icon{
  width:32px;
  height:32px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0f766e;
  border:2px solid rgba(15,118,110,.35);
  background:linear-gradient(180deg, #ecfeff 0%, #ccfbf1 100%);
  font-size:17px;
  font-weight:900;
}

.facial-orientation-subtitle{
  margin:0 0 18px;
  font-size:14px;
  font-weight:950;
  letter-spacing:.04em;
  color:#0f172a;
  text-transform:uppercase;
}

.facial-orientation-list{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
}

.facial-orientation-item{
  display:grid;
  grid-template-columns:42px 1fr;
  align-items:center;
  gap:12px;
  min-height:42px;
  color:#111827;
  font-size:13px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.facial-orientation-icon{
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  color:#0f766e;
  background:linear-gradient(180deg, #ccfbf1 0%, #99f6e4 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 8px 16px rgba(20,184,166,.16);
}

.facial-orientation-icon::before{
  font-size:20px;
  line-height:1;
  font-weight:900;
}

.facial-orientation-icon--light::before{
  content:"☀";
}

.facial-orientation-icon--person::before{
  content:"●";
  font-size:18px;
}

.facial-orientation-icon--person::after{
  content:"";
  position:absolute;
  width:18px;
  height:9px;
  left:50%;
  bottom:7px;
  transform:translateX(-50%);
  border-radius:999px 999px 8px 8px;
  background:#0f766e;
}

.facial-orientation-icon--face::before{
  content:"☺";
}

.facial-orientation-icon--block::before{
  content:"⊘";
  font-size:25px;
}

/* Botao INICIAR dentro do card */
.facial-orientation-card__action{
  margin-top:22px;
  display:flex;
}

.facial-orientation-card__action .facial-btn{
  width:100% !important;
  min-height:48px !important;
  border-radius:10px !important;
  border:0 !important;
  background:
    linear-gradient(180deg, #16958f 0%, #0f766e 100%) !important;
  color:#ffffff !important;
  font-size:14px !important;
  font-weight:950 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  box-shadow:
    0 16px 28px rgba(15,118,110,.28),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
}

.facial-orientation-card__action .facial-btn::after{
  content:"→";
  font-size:20px;
  line-height:1;
  transform:translateY(-1px);
}

.facial-orientation-card__action .facial-btn:disabled{
  opacity:.62 !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
}

.facial-orientation-card__action .facial-btn:not(:disabled):hover{
  transform:translateY(-1px) !important;
  box-shadow:
    0 20px 34px rgba(15,118,110,.32),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}

/* Preview da camera antes de iniciar: menor e mais organizado */
.facial-modal.is-orientation-step .facial-video-wrap{
  width:min(100%, 560px) !important;
  height:clamp(210px, 34vh, 330px) !important;
  min-height:210px !important;
  max-height:330px !important;
  margin:0 auto !important;
  border-radius:22px !important;
  border:1px solid rgba(15,23,42,.10) !important;
  background:#07111f !important;
  box-shadow:
    0 18px 36px rgba(2,6,23,.18),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Depois que iniciou, a camera volta a ser protagonista */
.facial-modal.is-capture-step .facial-video-wrap{
  width:100% !important;
  height:clamp(300px, 52vh, 520px) !important;
  min-height:300px !important;
  max-height:58vh !important;
}

.facial-modal.is-capture-step #facialHint{
  display:block !important;
}

/* Rodape sem bagunca quando o botao foi movido para o card */
.facial-modal.is-orientation-step .facial-actions{
  margin-top:0 !important;
  justify-content:center !important;
}

.facial-modal.is-orientation-step .facial-actions .facial-btn--ghost{
  flex:0 0 auto !important;
  min-width:160px !important;
}

/* Responsivo */
@media (max-width:640px){
  .facial-modal.is-orientation-step{
    padding:16px !important;
    border-radius:20px !important;
  }

  .facial-modal.is-orientation-step .facial-orientation-card{
    width:100% !important;
    padding:20px 18px !important;
  }

  .facial-orientation-kicker{
    font-size:19px;
    margin-bottom:22px;
  }

  .facial-orientation-item{
    grid-template-columns:38px 1fr;
    font-size:12px;
  }

  .facial-orientation-icon{
    width:34px;
    height:34px;
  }

  .facial-modal.is-orientation-step .facial-video-wrap{
    height:220px !important;
    min-height:220px !important;
  }
}

/* =========================================================
   BRAZSAFE - MODAL ORIENTACAO FACIAL PREMIUM FINAL
   Visual SaaS premium + camera ativa sem aparecer ao cliente
   ========================================================= */

/* Modal frontal: compacto, limpo, premium */
.facial-modal.is-orientation-step{
  width:min(540px, calc(100vw - 32px)) !important;
  max-height:calc(100vh - 40px) !important;
  height:auto !important;
  overflow:hidden !important;
  padding:0 !important;
  gap:0 !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(20,184,166,.14), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(37,99,235,.06), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border:1px solid rgba(226,232,240,.96) !important;
  box-shadow:
    0 42px 120px rgba(2,6,23,.34),
    0 16px 38px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* Mantem o header apenas para o X funcionar */
.facial-modal.is-orientation-step .facial-header{
  display:block !important;
  position:absolute !important;
  inset:0 0 auto 0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  z-index:30 !important;
  background:transparent !important;
}

/* Esconde o titulo padrao do modal */
.facial-modal.is-orientation-step .facial-title{
  display:none !important;
}

/* Botao fechar premium */
.facial-modal.is-orientation-step .facial-close-top{
  display:inline-flex !important;
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  z-index:40 !important;
  width:40px !important;
  min-width:40px !important;
  height:40px !important;
  border-radius:14px !important;
  border:1px solid rgba(203,213,225,.86) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)) !important;
  color:#334155 !important;
  box-shadow:
    0 10px 22px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.facial-modal.is-orientation-step .facial-close-top:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(148,163,184,.95) !important;
  box-shadow:
    0 14px 26px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
}

/* Esconde elementos tecnicos na etapa de orientacao */
.facial-modal.is-orientation-step .facial-topbar,
.facial-modal.is-orientation-step #facialHint,
.facial-modal.is-orientation-step .facial-metrics,
.facial-modal.is-orientation-step .facial-actions{
  display:none !important;
}

/* IMPORTANTE:
   Nao usar display:none na camera.
   Ela fica ativa/invisivel para preparar o video, mas o cliente nao ve. */
.facial-modal.is-orientation-step .facial-video-wrap{
  display:block !important;
  position:fixed !important;
  left:-10000px !important;
  top:0 !important;
  width:320px !important;
  height:240px !important;
  min-height:240px !important;
  max-height:240px !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  border:0 !important;
  box-shadow:none !important;
}

.facial-modal.is-orientation-step .facial-video-wrap #faceVideo{
  width:320px !important;
  height:240px !important;
  object-fit:cover !important;
}

/* Card vira o conteudo principal do modal */
.facial-modal.is-orientation-step .facial-orientation-card{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:34px 38px 34px !important;
  border:0 !important;
  border-radius:28px !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Topo do card */
.facial-modal.is-orientation-step .facial-orientation-top{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  margin:0 52px 28px 0 !important;
}

/* Icone principal */
.facial-modal.is-orientation-step .facial-orientation-mark{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:
    linear-gradient(180deg, #ecfeff 0%, #ccfbf1 100%) !important;
  border:1px solid rgba(20,184,166,.38) !important;
  box-shadow:
    0 14px 26px rgba(20,184,166,.16),
    inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.facial-modal.is-orientation-step .facial-orientation-mark__icon{
  width:22px !important;
  height:22px !important;
  display:block !important;
  background:#0f766e !important;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8Z'/%3E%3Cpath d='m9 12 2 2 4-5'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
}

/* Titulos */
.facial-modal.is-orientation-step .facial-orientation-heading{
  min-width:0 !important;
}

.facial-modal.is-orientation-step .facial-orientation-kicker{
  margin:0 !important;
  color:#102a2c !important;
  font-size:25px !important;
  line-height:1.05 !important;
  font-weight:950 !important;
  letter-spacing:.01em !important;
}

.facial-modal.is-orientation-step .facial-orientation-subtitle{
  margin:7px 0 0 !important;
  color:#64748b !important;
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
}

/* Lista */
.facial-modal.is-orientation-step .facial-orientation-list{
  display:grid !important;
  gap:15px !important;
  margin:0 !important;
  padding:0 !important;
}

.facial-modal.is-orientation-step .facial-orientation-item{
  display:grid !important;
  grid-template-columns:42px 1fr !important;
  align-items:center !important;
  gap:14px !important;
  min-height:42px !important;
  padding:0 !important;
  color:#0f172a !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:760 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
}

.facial-modal.is-orientation-step .facial-orientation-item__text{
  display:block !important;
  color:#111827 !important;
}

/* Icones minimalistas consistentes */
.facial-modal.is-orientation-step .facial-orientation-icon{
  width:38px !important;
  height:38px !important;
  border-radius:15px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative !important;
  background:
    linear-gradient(180deg, #d9fff7 0%, #a7f3e5 100%) !important;
  border:1px solid rgba(20,184,166,.22) !important;
  box-shadow:
    0 10px 20px rgba(20,184,166,.14),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.facial-modal.is-orientation-step .facial-orientation-icon::before{
  content:"" !important;
  width:21px !important;
  height:21px !important;
  display:block !important;
  background:#0f766e !important;
  -webkit-mask:var(--facial-orientation-icon) center / contain no-repeat !important;
  mask:var(--facial-orientation-icon) center / contain no-repeat !important;
}

.facial-modal.is-orientation-step .facial-orientation-icon--light{
  --facial-orientation-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12c.7.6 1 1.4 1 2h6c0-.6.3-1.4 1-2a7 7 0 0 0-4-12Z'/%3E%3C/svg%3E");
}

.facial-modal.is-orientation-step .facial-orientation-icon--person{
  --facial-orientation-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");
}

.facial-modal.is-orientation-step .facial-orientation-icon--face{
  --facial-orientation-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 10h.01'/%3E%3Cpath d='M15 10h.01'/%3E%3Cpath d='M8 15c1.2 1 2.5 1.5 4 1.5s2.8-.5 4-1.5'/%3E%3C/svg%3E");
}

.facial-modal.is-orientation-step .facial-orientation-icon--block{
  --facial-orientation-icon:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m5.7 18.3 12.6-12.6'/%3E%3C/svg%3E");
}

/* Frase LGPD/confianca */
.facial-modal.is-orientation-step .facial-orientation-trust{
  margin:24px 0 0 !important;
  padding:12px 14px !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  border-radius:16px !important;
  background:
    linear-gradient(180deg, rgba(240,253,250,.92), rgba(236,253,245,.78)) !important;
  border:1px solid rgba(20,184,166,.18) !important;
  color:#475569 !important;
  font-size:12px !important;
  line-height:1.4 !important;
  font-weight:700 !important;
}

.facial-modal.is-orientation-step .facial-orientation-trust__dot{
  width:9px !important;
  height:9px !important;
  min-width:9px !important;
  margin-top:4px !important;
  border-radius:999px !important;
  background:#10b981 !important;
  box-shadow:0 0 0 4px rgba(16,185,129,.12) !important;
}

/* Botao premium */
.facial-modal.is-orientation-step .facial-orientation-card__action{
  display:flex !important;
  margin-top:22px !important;
}

.facial-modal.is-orientation-step .facial-orientation-card__action .facial-btn{
  width:100% !important;
  min-height:52px !important;
  border-radius:15px !important;
  border:0 !important;
  background:
    linear-gradient(180deg, #159b92 0%, #0f766e 100%) !important;
  color:#ffffff !important;
  font-size:14px !important;
  font-weight:950 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase !important;
  box-shadow:
    0 18px 34px rgba(15,118,110,.30),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;
}

.facial-modal.is-orientation-step .facial-orientation-card__action .facial-btn::after{
  content:"→" !important;
  font-size:20px !important;
  line-height:1 !important;
  transform:translateY(-1px) !important;
}

.facial-modal.is-orientation-step .facial-orientation-card__action .facial-btn:not(:disabled):hover{
  transform:translateY(-1px) !important;
  filter:saturate(1.04) !important;
  box-shadow:
    0 22px 40px rgba(15,118,110,.34),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
}

.facial-modal.is-orientation-step .facial-orientation-card__action .facial-btn:disabled{
  opacity:.60 !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
}

/* Captura: quando clicar iniciar, restaura a tela da camera */
.facial-modal.is-capture-step{
  width:min(790px, calc(100vw - 28px)) !important;
  max-height:min(92vh, 820px) !important;
  overflow:hidden !important;
  padding:18px !important;
  gap:12px !important;
  border-radius:24px !important;
}

.facial-modal.is-capture-step .facial-header{
  display:flex !important;
}

.facial-modal.is-capture-step .facial-title{
  display:block !important;
}

.facial-modal.is-capture-step .facial-topbar{
  display:flex !important;
}

.facial-modal.is-capture-step .facial-video-wrap{
  display:block !important;
  position:relative !important;
  left:auto !important;
  top:auto !important;
  opacity:1 !important;
  pointer-events:auto !important;
  width:100% !important;
  height:clamp(300px, 52vh, 520px) !important;
  min-height:300px !important;
  max-height:58vh !important;
  margin:0 !important;
  overflow:hidden !important;
}

.facial-modal.is-capture-step .facial-video-wrap #faceVideo{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

.facial-modal.is-capture-step #facialHint{
  display:block !important;
}

/* Responsivo */
@media (max-width:640px){
  .facial-modal.is-orientation-step{
    width:calc(100vw - 24px) !important;
    max-height:calc(100vh - 28px) !important;
    border-radius:24px !important;
  }

  .facial-modal.is-orientation-step .facial-orientation-card{
    padding:28px 22px 26px !important;
    border-radius:24px !important;
  }

  .facial-modal.is-orientation-step .facial-orientation-top{
    gap:12px !important;
    margin:0 46px 24px 0 !important;
  }

  .facial-modal.is-orientation-step .facial-orientation-mark{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:14px !important;
  }

  .facial-modal.is-orientation-step .facial-orientation-kicker{
    font-size:21px !important;
  }

  .facial-modal.is-orientation-step .facial-orientation-subtitle{
    font-size:12px !important;
  }

  .facial-modal.is-orientation-step .facial-orientation-list{
    gap:13px !important;
  }

  .facial-modal.is-orientation-step .facial-orientation-item{
    grid-template-columns:39px 1fr !important;
    gap:12px !important;
    font-size:13px !important;
  }

  .facial-modal.is-orientation-step .facial-orientation-icon{
    width:36px !important;
    height:36px !important;
    border-radius:14px !important;
  }

  .facial-modal.is-orientation-step .facial-orientation-trust{
    font-size:11.5px !important;
  }

  .facial-modal.is-orientation-step .facial-close-top{
    top:12px !important;
    right:12px !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
  }
}