/* ============================================================================
   ASSINAR PELA INFORA (08/10/2026) — só o que esta página tem a mais que a
   assinar-govbr.html. Cores, cartões, botões, conta, véu e o popup animado vêm
   de infora.css, assinar.css e assinar-govbr.css (carregados antes deste).
   🚨 Nada de style="" nem <style>: a CSP da página é style-src 'self'.
   ========================================================================== */

/* a frase da lei, logo abaixo do subtítulo */
.if-lei{margin:12px 0 0;max-width:80ch;padding:9px 12px;border-left:3px solid var(--alerta);border-radius:0 8px 8px 0;
  background:rgba(255,179,71,.07);color:var(--texto);font-size:14px;line-height:1.5}
.if-lei b{color:var(--alerta)}

/* os 3 passos (a trilha e o popup) */
.if-tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){ .if-tres{grid-template-columns:1fr} }
.if-guia{max-width:860px}
.if-guia-passos{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){ .if-guia-passos{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:700px){ .if-guia-passos{grid-template-columns:minmax(0,1fr)} }

/* desenho do passo 2: dois campos sendo digitados e a caixa "sou eu" marcada */
.if-campo-f{fill:rgba(234,245,240,.1);stroke:rgba(234,245,240,.55);stroke-width:1.6}
.if-caixa-f{fill:rgba(234,245,240,.1);stroke:var(--marca2);stroke-width:1.8}
.if-digita{fill:none;stroke:#eaf5f0;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:3 4;stroke-dashoffset:0}
.if-marca{fill:none;stroke:var(--marca2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
@keyframes if-digita{0%{stroke-dasharray:0 100}60%,100%{stroke-dasharray:100 0}}
@keyframes if-marca{0%,62%{stroke-dashoffset:100}82%,100%{stroke-dashoffset:0}}
[data-destaque] .if-d1{animation:if-digita 3s steps(14,end) infinite}
[data-destaque] .if-d2{animation:if-digita 3s steps(11,end) infinite;animation-delay:.5s}
[data-destaque] .if-marca{animation:if-marca 3s ease-out infinite}
@media (prefers-reduced-motion:reduce){ .if-digita,.if-marca{animation:none !important} }

/* os campos de nome e CPF */
.if-campos{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;margin-bottom:8px}
.if-campos .etiq{margin:0}
.if-campo{padding-right:14px}
#nome.if-campo{text-transform:uppercase}
.if-cpf{font-family:var(--dado);letter-spacing:.04em;max-width:240px}
@media (max-width:520px){ .if-campos{grid-template-columns:minmax(0,1fr)} .if-cpf{max-width:none} }

/* a caixa "sou eu" */
.if-consente{display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:10px;margin:6px 0 10px;padding:11px 12px;
  border:1px solid var(--borda2);border-radius:9px;background:rgba(5,10,8,.5);color:var(--texto);font-size:14.5px;line-height:1.45;cursor:pointer}
.if-consente:hover{border-color:var(--marca)}
.if-consente input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--marca);cursor:pointer}
.if-consente:has(input:checked){border-color:rgba(31,191,107,.6);background:rgba(31,191,107,.08)}
.if-consente:has(input:focus-visible){outline:3px solid rgba(76,237,153,.35);outline-offset:2px}
.as-nota code{color:var(--marca3);font:500 12.5px/1.3 var(--dado)}

/* o resultado */
.if-pronto{display:grid;gap:10px;margin-top:12px}
.if-pronto .as-fatos{margin:0}
.if-ver{text-align:center;text-decoration:none}
.if-pronto .as-link{justify-self:start}

/* prévia do selo na página: o mesmo verde do selo, com o texto da variante "pela Infora" */
.if-selo-pre strong{display:block;font-size:.95em;color:#d7f8e7;letter-spacing:.03em}
.if-selo-pre span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.if-selo-pre small{display:block;color:var(--marca2);font-weight:500}

/* ============================================================================
   VERSÃO 2 (08/10/2026): até 5 pessoas no mesmo documento, cada uma pela própria conta.
   A lista de quem assina, os links de cada pessoa (copiar · WhatsApp · "Sou eu"), "Meus documentos pela Infora".
   ========================================================================== */
/* quem assina: nome + CPF por linha, numeradas */
.if-pessoas{display:grid;gap:8px;margin:0 0 10px;padding:0;list-style:none;counter-reset:pessoa}
.if-pessoa{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px}
.if-pessoa::before{counter-increment:pessoa;content:counter(pessoa);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:rgba(31,191,107,.14);color:var(--marca2);font:600 12px/1 var(--display)}
.if-pessoa-campos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,190px);gap:8px;min-width:0}
.if-pessoa .if-nome{text-transform:uppercase}
.if-pessoa .if-cpf{max-width:none}
.if-pessoa .as-campo:disabled{opacity:.7}
@media (max-width:560px){ .if-pessoa-campos{grid-template-columns:minmax(0,1fr)} }

/* o resultado: a situação e o link de cada pessoa */
.if-falta{margin:0;padding:9px 12px;border-left:3px solid var(--alerta);border-radius:0 8px 8px 0;background:rgba(255,179,71,.07);color:var(--texto);font-size:14px;line-height:1.5}
.if-falta[data-estado="completo"]{border-left-color:var(--marca);background:rgba(31,191,107,.08)}
.if-convites{display:grid;gap:8px;margin:0;padding:0;list-style:none;min-width:0}
.if-convite{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 10px;padding:10px 12px;min-width:0;
  border:1px solid var(--borda);border-left:3px solid var(--alerta);border-radius:0 var(--raio) var(--raio) 0;background:rgba(255,179,71,.04)}
.if-convite.feito{border-left-color:var(--marca);background:rgba(31,191,107,.05)}
.if-convite-estado{display:inline-block;padding:2px 8px;border-radius:999px;background:rgba(255,179,71,.14);color:var(--alerta);font:600 11px/1.4 var(--display);letter-spacing:.04em}
.if-convite.feito .if-convite-estado{background:rgba(31,191,107,.14);color:var(--marca2)}
.if-convite.travado{border-left-color:var(--erro);background:rgba(214,69,69,.05)}
.if-convite.travado .if-convite-estado{background:rgba(214,69,69,.14);color:var(--erro)}
.if-convite-txt{min-width:0}
.if-convite-txt strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--texto);font:600 14.5px/1.3 var(--display)}
.if-convite-txt small{display:block;margin-top:2px;color:var(--fraco);font-size:12.5px;line-height:1.45;overflow-wrap:anywhere}
.if-convite-acoes{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.if-convite-acoes .botao{padding:8px 13px;font-size:13.5px}
.if-soueu{grid-column:1 / -1;display:grid;gap:8px;padding:10px;border:1px solid var(--borda2);border-radius:9px;background:rgba(5,10,8,.5)}
.if-soueu-tit{margin:0;color:var(--texto);font-size:13.5px;font-weight:600;overflow-wrap:anywhere}
.if-soueu .if-cpf{max-width:240px}
.if-soueu .if-consente{margin:0}
.if-soueu .botao{justify-self:start}
@media (max-width:520px){ .if-soueu .if-cpf{max-width:none} .if-soueu .botao{justify-self:stretch} .if-convite-acoes .botao{flex:1 1 auto;text-align:center} }
.if-copia{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0}

/* Meus documentos pela Infora */
.if-meus{margin-top:22px}
.if-item{grid-template-columns:minmax(0,1fr) auto}
.if-item[data-situacao="completo"]{border-left-color:var(--marca);background:rgba(31,191,107,.04)}
.if-item[data-situacao="completo"] .gv-item-estado{background:rgba(31,191,107,.14);color:var(--marca2)}
.if-item[data-situacao="cancelado"]{border-left-color:var(--neutro);background:rgba(90,122,143,.06)}
.if-item[data-situacao="cancelado"] .gv-item-estado{background:rgba(90,122,143,.18);color:#9db6c7}
.if-item .if-convites-lista{grid-column:1 / -1}
.if-item .if-convites-lista .if-convite{padding:8px 10px}
.if-cancelar{color:var(--erro)}
@media (max-width:640px){ .if-item{grid-template-columns:minmax(0,1fr)} .if-item .gv-item-acoes{justify-content:flex-start} }

/* a página do convite (assinar-convite.html) */
.if-cv-situacao{margin-top:14px}
.if-cv-situacao .as-fatos{margin:0 0 10px}
.if-cv-situacao .as-fatos dd{overflow-wrap:anywhere}
.if-cv-nav{display:inline-flex;gap:12px;margin-left:auto}
.as-palco-barra{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
#cartao-assinar .if-cpf{max-width:240px;margin-bottom:6px}
@media (max-width:520px){ #cartao-assinar .if-cpf{max-width:none} }

/* == 08/10 (identidade) =====================================================
   Cada pessoa pelo e-mail da conta (padrão) ou, sem conta, por nome + CPF. O botão que troca fica embaixo do
   campo, alinhado ao texto; nada passa da largura no celular (min-width:0 em toda a cadeia do grid). */
.if-pessoa-meio{display:grid;gap:4px;min-width:0}
.if-pessoa .if-pessoa-email{grid-template-columns:minmax(0,1fr)}
.if-pessoa .if-email{text-transform:none}
.if-modo{justify-self:start;padding:4px 0;font-size:12.5px;text-align:left}
.if-ident{margin-top:6px;line-height:1.5}
.if-ident code{font-family:var(--dado)}
.if-ident .if-ok{color:var(--marca2)}
.if-ident .if-alerta{color:var(--alerta)}
.if-ident a{color:var(--marca2);font-weight:600}
.if-conferir{margin:8px 0;padding-left:20px;display:grid;gap:4px;font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.if-conferir code{font-family:var(--dado)}
/* a página do convite: quem assina (o cadastro da conta) e por que ainda não pode */
.if-eu{display:grid;gap:4px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--borda2);border-left:3px solid var(--marca);border-radius:9px;font-size:13.5px;line-height:1.5;overflow-wrap:anywhere}
.if-eu[data-estado="alerta"]{border-left-color:var(--alerta)}
.if-eu p{margin:0}
.if-eu code{font-family:var(--dado)}
.if-eu .if-ok{color:var(--marca2)}
.if-eu .if-alerta{color:var(--alerta)}
.if-eu a{color:var(--marca2);font-weight:600}
.if-lei a{color:var(--alerta);font-weight:600}

/* == 16/10 (Jr: "documento assinado precisa ter uma espécie de cadeado em tudo"; "o usuário precisa ser levado ao próximo passo") ==
   Registrado = a mesa trava (cadeado em cada passo, sem "Trocar"/"Tirar"); o PDF só libera com todos assinados; e, quando a
   própria pessoa também assina, a caixa dela já vem aberta e chamando a atenção. */
.if-cad-ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.if-cadeado{display:inline-flex;align-items:center;gap:5px;margin-left:auto;align-self:center;padding:3px 9px;border-radius:999px;
  background:rgba(31,191,107,.12);color:var(--marca2);font:600 11.5px/1.3 var(--display);letter-spacing:.03em;white-space:nowrap}
.as-cartao[data-travado]{opacity:.82}
.as-cartao[data-travado] .as-cartao-topo{display:flex;align-items:flex-start;gap:10px}
.as-cartao[data-travado] select,.as-cartao[data-travado] input{cursor:not-allowed}
.if-trava{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--borda2);border-left:3px solid var(--marca);
  border-radius:0 var(--raio) var(--raio) 0;background:rgba(31,191,107,.07)}
.if-trava > .if-cad-ico{width:26px;height:26px;margin-top:1px;color:var(--marca2)}
.if-trava strong{display:block;color:var(--texto);font:600 16px/1.3 var(--display)}
.if-trava p{margin:3px 0 0;color:var(--fraco);font-size:13.5px;line-height:1.5}
.if-trava[data-estado="completo"]{background:rgba(31,191,107,.13)}
.if-trava[data-estado="completo"] strong{color:var(--marca2);font-size:17px}
.if-minha-vez{display:grid;gap:6px;padding:14px;border:2px solid var(--marca);border-radius:var(--raio);background:rgba(31,191,107,.06);
  animation:if-chama 1.8s ease-in-out 3}
.if-minha-vez-etiq{margin:0;color:var(--marca2);font:600 11px/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase}
.if-minha-vez-tit{color:var(--texto);font:600 18px/1.25 var(--display)}
.if-minha-vez .if-soueu{margin-top:4px}
.if-minha-vez .if-soueu .botao{width:100%;min-height:50px;font-size:16px}
@keyframes if-chama{0%,100%{box-shadow:0 0 0 0 rgba(31,191,107,0)}50%{box-shadow:0 0 0 6px rgba(31,191,107,.22)}}
@media (prefers-reduced-motion: reduce){ .if-minha-vez{animation:none} }
.if-ver-acima{color:var(--marca2);font:600 13px/1.3 var(--display)}
a.botao.travado{display:flex;align-items:center;justify-content:center;gap:8px;cursor:not-allowed;background:transparent;
  border:1px dashed var(--borda2);color:var(--fraco);pointer-events:none}
.if-pdf-trava{display:inline-flex;align-items:center;gap:5px;color:var(--fraco2);font-size:13px}