/* GRAJA-SIGN — páginas do cliente (assinatura e verificação).
 *
 * Quem abre é o cliente, quase sempre no celular e quase sempre uma vez só.
 * Então: alvos grandes, uma coluna, e nada que exija procurar. Depende de
 * tema.css, que define os tokens e o claro/escuro.
 */

/* ─────────────────── Estrutura ─────────────────── */
.topo{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:13px 20px;border-bottom:1px solid var(--borda);
  background:var(--cartao);   /* fallback: color-mix abaixo é o caminho feliz */
  background:color-mix(in srgb, var(--cartao) 88%, transparent);
  backdrop-filter:saturate(1.5) blur(10px);-webkit-backdrop-filter:saturate(1.5) blur(10px)}
.topo .marca{font-weight:700;font-size:15px;letter-spacing:-.01em}
.topo .m{margin:0;font-size:12px;color:var(--suave)}
.topo .espaco{flex:1}

.folha{max-width:780px;margin:0 auto;padding:22px 20px}
.bloco{background:var(--cartao);border:1px solid var(--borda);border-radius:var(--r-g);
  padding:24px 26px;margin-bottom:16px;box-shadow:var(--sombra)}
.bloco h1{margin:0 0 6px;font-size:22px;letter-spacing:-.02em}
.bloco h2{margin:0 0 12px;font-size:17px}
.m{color:var(--suave);font-size:13.5px}
.mini{font-size:12.5px;color:var(--suave)}
code{background:var(--cartao-alto);border:1px solid var(--borda);padding:2px 6px;
  border-radius:6px;font-size:12.5px;word-break:break-all;font-family:var(--mono)}
.rodape{max-width:780px;margin:0 auto;padding:4px 20px 40px;font-size:12px;color:var(--suave)}

/* ─────────────────── Passos ─────────────────── */
/* O cliente precisa saber quantos passos faltam antes de começar: sem isso,
   pedir foto depois do aceite parece que algo deu errado. */
.passos{display:flex;align-items:center;gap:8px;margin:0 0 18px;padding:0;list-style:none;
  font-size:12.5px;color:var(--suave);flex-wrap:wrap}
.passos li{display:flex;align-items:center;gap:7px}
.passos li::after{content:"";width:18px;height:1px;background:var(--borda);margin-left:2px}
.passos li:last-child::after{display:none}
.passos .bolha{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--borda);background:var(--cartao-alto);
  font-size:11px;font-weight:700;color:var(--suave)}
.passos .agora{color:var(--texto);font-weight:650}
.passos .agora .bolha{background:var(--acento);border-color:var(--acento);color:var(--acento-contraste)}
.passos .feito .bolha{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok)}

/* ─────────────────── Visor do PDF ─────────────────── */
.visor{width:100%;height:64vh;min-height:340px;border:1px solid var(--borda);
  border-radius:var(--r-m);background:var(--cartao-alto)}
@media (max-width:640px){ .visor{height:50vh} }

/* ─────────────────── Vistos ─────────────────── */
.aceite{display:flex;gap:13px;align-items:flex-start;background:var(--cartao-alto);
  border:1px solid var(--borda);border-radius:var(--r-m);padding:15px 16px;margin:12px 0;
  transition:border-color var(--transicao),background-color var(--transicao)}
.aceite:hover{border-color:var(--borda-forte)}
.aceite:has(input:checked){border-color:var(--ok-borda);background:var(--ok-fundo)}
.aceite input{margin-top:2px;width:20px;height:20px;flex:0 0 auto;accent-color:var(--acento);cursor:pointer}
.aceite label{font-size:14.5px;line-height:1.6;cursor:pointer}

/* ─────────────────── Captura de imagens ─────────────────── */
/* Destacado do resto porque a autorização precisa ser específica: a pessoa tem
   de perceber que está consentindo com algo a mais, e não marcando mais uma
   caixa do formulário. */
.imagens{border:1px solid var(--borda);border-left:4px solid var(--acento);
  border-radius:var(--r-m);padding:20px;margin:22px 0;background:var(--cartao-alto)}
.imagens h3{margin:0 0 6px;font-size:16px}
.imagens .aceite{background:var(--alerta-fundo);border-color:var(--alerta-borda);margin:14px 0 8px}
.imagens .aceite:has(input:checked){background:var(--ok-fundo);border-color:var(--ok-borda)}
.imagens label{display:block;margin:16px 0 6px;font-size:14px;font-weight:650}
.imagens input[type=file]{width:100%;padding:16px;border:1.5px dashed var(--borda-forte);
  border-radius:var(--r-m);background:var(--cartao);font-size:14px;font-family:inherit;
  color:var(--texto);cursor:pointer}
.imagens input[type=file]:hover{border-color:var(--acento);background:var(--acento-suave)}
.imagem-ok{color:var(--ok);font-weight:650}
.imagem-ok .trocar{display:inline;font-weight:400;color:var(--acento);cursor:pointer}
.imagem-ok .trocar input[type=file]{margin-top:6px;padding:10px;font-weight:400}

/* ─────────────────── Botões ─────────────────── */
button,.botao{display:inline-block;padding:14px 28px;border:0;border-radius:var(--r-m);
  background:var(--acento);color:var(--acento-contraste);font-size:16px;font-weight:650;
  font-family:inherit;cursor:pointer;text-decoration:none;text-align:center;
  transition:background-color var(--transicao),transform var(--transicao)}
button:hover,.botao:hover{background:var(--acento-forte);color:var(--acento-contraste)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
button.largo{width:100%}
.botao-suave{background:var(--cartao-alto);color:var(--acento);border:1px solid var(--borda);
  padding:11px 20px;font-size:14px;font-weight:600}
.botao-suave:hover{background:var(--acento-suave);color:var(--acento-forte);border-color:var(--acento)}

/* ─────────────────── Código OTP ─────────────────── */
.codigo{width:100%;max-width:300px;padding:16px;font-size:30px;letter-spacing:12px;
  text-align:center;border:1px solid var(--borda);border-radius:var(--r-m);
  font-family:var(--mono);background:var(--cartao-alto);color:var(--texto)}
.codigo:focus{outline:none;border-color:var(--acento);box-shadow:var(--anel)}

/* ─────────────────── Avisos ─────────────────── */
.erro,.aviso{padding:13px 15px;border-radius:var(--r-m);font-size:14px;margin-bottom:14px;border:1px solid}
.erro{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro)}
.aviso{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok)}

/* ─────────────────── Selo de conclusão ─────────────────── */
.selo{text-align:center;padding:10px 0 18px}
.selo .marca-ok{display:grid;place-items:center;width:68px;height:68px;margin:0 auto;
  border-radius:50%;background:var(--ok-fundo);border:1px solid var(--ok-borda);
  font-size:34px;line-height:1;color:var(--ok)}

/* Etiquetas de situação, na mesma linguagem do painel. O selo grande do
   sucesso tem regra própria acima e continua ganhando por especificidade. */
.marca-alerta,.marca-erro,.marca-suave{
  display:inline-block;padding:2px 9px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:650;border:1px solid;white-space:nowrap}
.marca-alerta{color:var(--alerta);background:var(--alerta-fundo);border-color:var(--alerta-borda)}
.marca-erro{color:var(--erro);background:var(--erro-fundo);border-color:var(--erro-borda)}
.marca-suave{color:var(--suave);background:var(--cartao-alto);border-color:var(--borda)}

/* ─────────────────── Tabela de dados ─────────────────── */
.dados{width:100%;border-collapse:collapse;font-size:14px;margin-top:8px}
.dados th{text-align:left;font-weight:500;color:var(--suave);padding:8px 14px 8px 0;
  white-space:nowrap;vertical-align:top;width:1%;border-bottom:1px solid var(--borda)}
.dados td{padding:8px 0;vertical-align:top;border-bottom:1px solid var(--borda)}
.dados tr:last-child th,.dados tr:last-child td{border-bottom:0}

/* ─────────────────── Formulários públicos ─────────────────── */
label{display:block;font-size:13.5px;font-weight:600;color:var(--texto-medio);margin:14px 0 6px}
input[type=text],input[type=file],textarea,select{
  width:100%;padding:12px 14px;border-radius:var(--r-m);border:1px solid var(--borda);
  background:var(--cartao-alto);color:var(--texto);font-size:15px;font-family:inherit}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--acento);box-shadow:var(--anel)}

@media (max-width:640px){
  .folha{padding:16px 14px}
  .bloco{padding:20px 18px;border-radius:var(--r-m)}
  button,.botao{width:100%}
  .passos{font-size:11.5px;gap:6px}
  .passos li::after{width:10px}
}

/* ─────────────────── Quadro da assinatura ─────────────────── */
.rubrica{border:1px solid var(--borda);border-left:4px solid var(--acento);
  border-radius:var(--r-m);padding:20px;margin:22px 0;background:var(--cartao-alto)}
.rubrica h3{margin:0 0 6px;font-size:16px}
#rubrica-quadro{width:100%;height:170px;display:block;margin-top:10px;cursor:crosshair;
  border:1.5px dashed var(--borda-forte);border-radius:var(--r-m);background:#ffffff;
  touch-action:none}   /* sem isto o traço vira rolagem no celular */

/* ─────────────────── Câmera na tela ─────────────────── */
.camera-caixa{margin-top:10px}
.camera-abrir{margin:0;width:auto}
.camera-video,.camera-previa{width:100%;max-height:340px;object-fit:contain;display:block;
  margin-top:10px;border:1px solid var(--borda);border-radius:var(--r-m);background:#0b1020}
.camera-tirar{margin-top:10px;width:100%}
.camera-estado{margin:8px 0 0}

/* Selfie: captura ao vivo obrigatória — o campo de arquivo existe só para o
   formulário enviar; quem o preenche é a câmera. */
.so-camera .input-oculto{display:none}
.so-camera .camera-abrir{width:100%;padding:13px 20px;font-size:15px;font-weight:650}

/* Fallback do visor: aparece quando o navegador (celular) não embute PDF. */
object.visor{display:block}
.visor-alt{height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:24px;background:var(--cartao)}
.visor-alt .botao{width:auto;padding:13px 28px}

/* ─── Guia de enquadramento sobre a câmera (documento e selfie) ─── */
.camera-palco{position:relative;overflow:hidden;border-radius:10px;line-height:0}
.camera-palco .camera-video{display:block;width:100%;border-radius:0}
.camera-guia{position:absolute;inset:0;pointer-events:none}
.camera-guia [data-rotulo]::after{content:attr(data-rotulo);position:absolute;left:50%;
  bottom:-26px;transform:translateX(-50%);white-space:nowrap;line-height:1.4;
  font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9)}
/* Documento: moldura na proporção de cartão (RG/CNH), resto escurecido. */
.guia-cartao{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:78%;aspect-ratio:1.6/1;border:3px dashed rgba(255,255,255,.95);border-radius:10px;
  box-shadow:0 0 0 200vmax rgba(0,0,0,.45)}
/* Selfie: rosto EM CIMA e documento EMBAIXO — empilhado, não lado a lado
   (dono, 24/08/2026: alinhar na horizontal era ruim de acertar). O documento
   fica deitado, como se segura naturalmente abaixo do queixo. */
.guia-rosto{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);
  width:46%;aspect-ratio:3/4;border:3px dashed rgba(255,255,255,.95);border-radius:50%}
.guia-rosto[data-rotulo]::after{bottom:auto;top:-26px}
.guia-docmini{position:absolute;left:50%;top:74%;transform:translate(-50%,-50%);
  width:62%;aspect-ratio:1.6/1;border:3px dashed rgba(255,255,255,.95);border-radius:8px}

/* Rótulo que só o leitor de tela vê — a tela fica limpa, a acessibilidade não. */
.visualmente-oculto{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

/* Preview da câmera frontal em espelho — a captura permanece real. */
.camera-espelho{transform:scaleX(-1)}

/* ─── Telas de foto compactas (dono, 07/09/2026): tudo numa tela só ─── */
/* O vídeo em retrato ocupava a página inteira e empurrava o botão de enviar
   para fora — teto de altura com corte central; o guia continua por cima e a
   FOTO capturada segue sendo o quadro inteiro da câmera. */
.camera-palco{max-height:44vh}
.camera-palco .camera-video{height:100%;max-height:44vh;object-fit:cover}
.camera-previa{max-height:30vh;width:auto;max-width:100%}
/* Passos e títulos mais enxutos no celular */
@media (max-width:640px){
  .passos{margin:6px 0;gap:4px}
  .passos li{font-size:10px}
  .passos .bolha{width:20px;height:20px;font-size:10px}
  .bloco h1{font-size:19px;margin:4px 0 6px}
  .bloco{padding:14px 14px}
  .aceite{margin:8px 0}
}