/*
 * Verificação facial — o palco de captura e tudo que o acompanha (assinatura-facial-epi-ged).
 *
 * Saiu de `centralrh-portal-colaborador.css` em 2026-10-06 porque o bloco NÃO é só do Portal: o mesmo
 * HTML (`[data-crh-facial]`, as classes `pf-facial-*`) e o mesmo `crh-facial.js` servem o Portal, a
 * ficha e a entrega de EPI e a TELA PÚBLICA de assinatura de documento — que usa o layout `app` e
 * nunca carregou a folha do Portal. Sem estas regras, o `<video>` nascia no tamanho NATIVO da câmera
 * (640×480 na prova, bem mais num celular) e estourava a tela: a pessoa clicava em "Verificar meu
 * rosto agora" e via um retângulo gigante e deslocado, não o enquadramento. Medido no incidente de
 * 06/10/2026, em produção.
 *
 * Os tokens continuam sendo os `--pf-*` do Portal. Fora dele, quem carrega esta folha MAPEIA os
 * tokens dela para o próprio design system (ver `.gedas-page` em `ged-assinatura.css`).
 */


/* ==== Verificação facial (assinatura-facial-epi-ged, TASK-005) ==================================
   Tela "Reconhecimento facial" e quadro de captura. O <video> espelha (selfie) e o quadro
   respeita a largura do card — nada de estilo inline nas views (CLAUDE.md §7). */
/* ==== Reconhecimento facial (Portal) — redesenho 2026-10-03 ====================================
   Um só vocabulário para CADASTRO guiado e VERIFICAÇÃO (Portal, EPI e GED): palco centrado de proporção
   fixa (4:3; retrato 3:4 no celular), guia oval com ESTADO (aguardando → capturando → verificando → ok/
   falha, via `data-facial-estado` no contêiner, posto pelo crh-facial.js), faixa de progresso sobreposta,
   passos do cadastro e resultado em caixa. Sem desfoque de vidro (CLAUDE.md §7) e sem estilo inline. */
.pf-facial-status-titulo { font-weight: 700; margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.pf-facial-status-texto { margin: 0 0 .75rem; color: var(--pf-tm); line-height: 1.5; }
.pf-facial-meta { margin: 0; color: var(--pf-ts); font-size: 13px; }
/* Sucesso da verificação: sem esta regra a classe existia na view e não pintava nada — a frase
   "concluída" saía no mesmo cinza do texto neutro (2026-08-21). */
.pf-facial-ok { color: var(--pf-ok); font-weight: 600; }
/* Termo de consentimento com cara de documento (2026-10-03): cabeçalho com ícone, filete lateral, leitura
   confortável (largura de ~70 caracteres) e a abertura de cada parágrafo em destaque — o texto é íntegro. */
.pf-facial-consentimento { border-left: 4px solid var(--pf-primary); }
.pf-facial-consentimento__cab { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .9rem; }
.pf-facial-consentimento__cab .pf-h2 { margin: 0; }
.pf-facial-consentimento__icone { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pf-primary-soft); color: var(--pf-primary-ink); }
.pf-facial-consentimento p { margin: 0 0 .75rem; line-height: 1.6; max-width: 70ch; color: var(--pf-tm); }
.pf-facial-consentimento p:last-child { margin-bottom: 0; }
.pf-facial-consentimento p strong { color: var(--pf-tx); }
/* Dicas do cadastro: três linhas com ícone. */
.pf-facial-dicas { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .5rem; }
.pf-facial-dicas li { display: flex; align-items: center; gap: .65rem; color: var(--pf-tm); line-height: 1.4; }
.pf-facial-dicas__icone { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pf-primary-soft); color: var(--pf-primary-ink); }
@media (min-width: 700px) { .pf-facial-dicas { grid-template-columns: repeat(3, 1fr); } .pf-facial-dicas li { flex-direction: column; text-align: center; align-items: center; gap: .45rem; padding: .75rem .5rem; border: 1px solid var(--pf-bd2); border-radius: var(--pf-radius-sm); background: var(--pf-sf2); } }
.pf-facial-oculos.pf-confirma { margin: 0 0 .9rem; color: var(--pf-tx); border: 1px solid var(--pf-bd); border-radius: var(--pf-radius-sm); }
.pf-facial-oculos.pf-confirma small { display: block; color: var(--pf-ts); font-size: 12.5px; margin-top: 2px; }

/* Palco: proporção FIXA (nasce no tamanho final — a guia não "cresce do nada" quando a câmera entrega o
   primeiro quadro), centrado e limitado no desktop, retrato no celular. O vídeo preenche o palco
   (`object-fit: cover`); o recorte enviado ao serviço é medido sobre a mesma região visível (`regiaoVisivel`). */
.pf-facial-video-wrap {
    position: relative;
    margin: .9rem auto;
    max-width: 520px;
    aspect-ratio: 4 / 3;
    max-height: 60vh;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--pf-shadow);
}
@media (max-width: 600px) { .pf-facial-video-wrap { max-width: none; aspect-ratio: 3 / 4; max-height: 68vh; border-radius: 14px; } }
.pf-facial-video-wrap video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* preview espelhado: convenção de selfie */
    background: #000;
}
/* Guia oval: o recorte enviado ao servidor é a região dela (60% da largura, 80% da altura, centrada) com folga. */
.pf-facial-guia {
    position: absolute;
    left: 20%;
    top: 10%;
    width: 60%;
    height: 80%;
    border: 3px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .38);
    pointer-events: none;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.pf-facial-guia::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 3px solid transparent;
    opacity: 0;
    transition: opacity .25s ease;
}
[data-facial-estado="aguardando"] .pf-facial-guia { border-color: rgba(255, 255, 255, .55); border-style: dashed; }
[data-facial-estado="capturando"] .pf-facial-guia { border-color: var(--pf-primary); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .38), 0 0 0 6px color-mix(in srgb, var(--pf-primary) 35%, transparent); }
[data-facial-estado="capturando"] .pf-facial-guia::after { opacity: 1; border-color: var(--pf-primary); animation: pf-facial-pulso 1.1s ease-in-out infinite; }
[data-facial-estado="verificando"] .pf-facial-guia { border-color: var(--pf-primary); }
/* Sem giro na guia: girar uma ELIPSE desloca o arco para fora dela (iPhone, 2026-10-06) — o "carregando"
   fica no spinner redondo da faixa de texto. */
[data-facial-estado="verificando"] .pf-facial-guia::after { opacity: 0; }
[data-facial-estado="ok"] .pf-facial-guia { border-color: var(--pf-ok); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .38), 0 0 0 6px color-mix(in srgb, var(--pf-ok) 35%, transparent); }
[data-facial-estado="falha"] .pf-facial-guia { border-color: var(--pf-danger); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .38), 0 0 0 6px color-mix(in srgb, var(--pf-danger) 35%, transparent); }
@keyframes pf-facial-pulso { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.035); opacity: .35; } }
@keyframes pf-facial-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pf-facial-guia::after { animation: none !important; } }

/* Faixa de progresso ("Foto 1 de 4…", "Olhe para a tela", "Verificando…"): sobreposta na base do vídeo —
   dentro do palco recortado ela sumia abaixo do vídeo (2026-10-03). */
.pf-facial-progresso { margin: .5rem 0 0; font-weight: 600; text-align: center; }
.pf-facial-video-wrap .pf-facial-progresso {
    position: absolute;
    left: 50%;
    bottom: .85rem;
    transform: translateX(-50%);
    max-width: calc(100% - 1.5rem);
    margin: 0;
    padding: .5rem .95rem;
    border-radius: 999px;
    background: rgba(8, 20, 40, .72);
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.pf-facial-video-wrap .pf-facial-progresso:empty { display: none; }
[data-facial-estado="verificando"] .pf-facial-video-wrap .pf-facial-progresso::before {
    content: '';
    width: .85rem;
    height: .85rem;
    flex: none;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: pf-facial-gira .8s linear infinite;
}

/* Passos do cadastro guiado (4 fotos): bolinha numerada + nome da foto (Frente, Esquerda, Direita, Óculos
   ou Mais perto — o quarto acompanha a caixa "Uso óculos"). A atual em cor primária; as feitas com check. */
.pf-facial-passos { display: flex; justify-content: center; gap: 1.1rem; margin: .25rem 0 1rem; padding: 0; list-style: none; }
.pf-facial-passos li { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 3.5rem; }
.pf-facial-passos__num {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--pf-ts);
    background: var(--pf-sf2);
    border: 1px solid var(--pf-bd);
    transition: background .2s ease, color .2s ease;
}
.pf-facial-passos__rotulo { font-size: 12px; color: var(--pf-ts); }
.pf-facial-passos li.is-atual .pf-facial-passos__num { background: var(--pf-primary); color: #fff; border-color: var(--pf-primary); }
.pf-facial-passos li.is-atual .pf-facial-passos__rotulo { color: var(--pf-primary-ink); font-weight: 700; }
.pf-facial-passos li.is-feita .pf-facial-passos__num { background: var(--pf-ok-soft); color: var(--pf-ok); border-color: transparent; }
.pf-facial-passos li.is-feita .pf-facial-passos__num::before { content: '✓'; }
.pf-facial-passos li.is-feita .pf-facial-passos__num span { display: none; }
@media (max-width: 360px) { .pf-facial-passos { gap: .6rem; } .pf-facial-passos li { min-width: 3rem; } }

.pf-facial-erro { margin: .75rem 0 0; padding: .65rem .85rem; border-radius: var(--pf-radius-sm); background: var(--pf-danger-soft); color: var(--pf-danger); font-weight: 600; }
/* Resultado do "Testar o reconhecimento" (tela Reconhecimento facial, 2026-10-03). */
.pf-facial-resultado { margin: .75rem 0 0; padding: .7rem .9rem; border-radius: var(--pf-radius-sm); font-weight: 600; display: flex; align-items: center; gap: .6rem; }
.pf-facial-resultado::before { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.pf-facial-resultado--ok { background: var(--pf-ok-soft); color: var(--pf-ok); }
.pf-facial-resultado--ok::before { content: '✓'; background: var(--pf-ok); color: #fff; }
.pf-facial-resultado--falha { background: var(--pf-danger-soft); color: var(--pf-danger); }
.pf-facial-resultado--falha::before { content: '!'; background: var(--pf-danger); color: #fff; }
/* Confirmação da revogação dentro do cartão (2026-10-03): caixa com tom de perigo e dois botões. */
.pf-facial-confirmacao { margin-top: .9rem; padding: .9rem 1rem; border-radius: var(--pf-radius-sm); background: var(--pf-danger-soft); border: 1px solid color-mix(in srgb, var(--pf-danger) 35%, transparent); }
.pf-facial-confirmacao__titulo { margin: 0 0 .35rem; font-weight: 700; color: var(--pf-danger); }
.pf-facial-confirmacao__texto { margin: 0; color: var(--pf-tm); line-height: 1.5; }
.pf-facial-confirmacao .pf-facial-acoes { margin-top: .8rem; }
.pf-btn--danger-solido { background: var(--pf-danger); color: #fff; border-color: var(--pf-danger); }
@media (hover:hover) { .pf-btn--danger-solido:hover { filter: brightness(1.08); } }
.pf-facial-acoes { display: flex; flex-direction: column; gap: .6rem; margin-top: .9rem; }
.pf-facial-acoes .pf-btn { width: 100%; }
@media (min-width: 600px) { .pf-facial-acoes { flex-direction: row; justify-content: center; } .pf-facial-acoes .pf-btn { width: auto; min-width: 16rem; } }

/* FLASH DE TELA (classe no contêiner quando a luz medida está abaixo do limiar do serviço): fundo branco
   de tela cheia e vídeo encolhido, para a própria tela iluminar o rosto. */
.pf-facial--flash { position: relative; }
.pf-facial--flash::before {
    content: '';
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 40;
}
/* No escuro a tela vira a lâmpada: fundo branco em cheio e o quadro no meio dele. O quadro era de
   42vw (164 px num celular de 390) — a pessoa perdia o próprio rosto de vista e achava que a tela
   tinha quebrado ("do nada fica minúsculo", relato 2026-10-07). Com 56vw/18rem o rosto volta a ser
   visível e o branco ainda ocupa a maior parte da tela, que é o que ilumina. */
.pf-facial--flash .pf-facial-video-wrap {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 56vw;
    max-width: 18rem;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 41;
}
.pf-facial--flash .pf-facial-video-wrap video { max-height: none; }
/* A instrução desce para o BRANCO, logo abaixo do quadro — e por `absolute`, não `fixed`: o quadro
   acima tem `transform`, e um ancestral transformado vira o containing block de qualquer descendente
   fixo. Era por isso que, no flash, "olhe para a tela" caía DENTRO do vídeo, ilegível sobre o rosto,
   em vez de ir para o rodapé da tela. */
.pf-facial--flash .pf-facial-video-wrap .pf-facial-progresso {
    position: absolute;
    left: 50%;
    top: calc(100% + .9rem);
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    max-width: 80vw;
    border-radius: 999px;
    background: rgba(8, 20, 40, .82);
    color: #fff;
    justify-content: center;
    white-space: nowrap;
}
.pf-facial-oculos { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; color: var(--pf-tm); }
.pf-facial-oculos input { width: 1.1rem; height: 1.1rem; }