/* ══════════════════════════════════════════════════════════
   Acréscimos da versão servida: identidade do usuário na
   credencial, nota do menu, módulo de usuários e paginação.
   ══════════════════════════════════════════════════════════ */

/* ── credencial ────────────────────────────────────────────── */

.cred .lvlbtn.entrar,
.cred .lvlbtn.sair{
  text-decoration:none;display:inline-flex;align-items:center;
}
.cred .lvlbtn.entrar{
  background:var(--roxo);border-color:var(--roxo);color:#fff;font-weight:600;
}
.cred .lvlbtn.entrar:hover{background:var(--roxo-2);border-color:var(--roxo-2)}
.cred .lvlbtn.sair:hover{border-color:var(--bloq);color:var(--bloq)}
.cred #credWho b{color:#fff}

/* ── nota do menu para quem não entrou ─────────────────────── */

.rail-nota{padding:14px 4px 6px}
.rail-nota p{
  font-size:12px;line-height:1.55;color:var(--tinta-3);margin:0 0 10px;
}
.rail-nota .btn{width:100%;justify-content:center}

/* ── grade de três indicadores ─────────────────────────────── */

.grid3{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;margin-top:16px;
}

/* ── paginação do CRM ──────────────────────────────────────── */

.paginacao{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linha);
}
.paginacao .pag-info{
  font-family:var(--fm);font-size:11.5px;color:var(--tinta-3);letter-spacing:.04em;
}
.paginacao .sp{flex:1}

/* ── módulo de usuários ────────────────────────────────────── */

.perfil-chip{
  display:inline-block;font-family:var(--fm);font-size:10px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;padding:2px 8px;border-radius:3px;
  border:1px solid transparent;
}
.perfil-chip.admin   {background:var(--roxo-wash);border-color:var(--roxo-line);color:var(--roxo)}
.perfil-chip.socio   {background:var(--pend-wash);border-color:rgba(184,100,26,.34);color:var(--pend)}
.perfil-chip.parceiro{background:var(--papel-2);border-color:var(--linha-2);color:var(--tinta-2)}

.us-inativo td{opacity:.5}
.us-inativo td:last-child{opacity:1}

.us-eu{
  font-family:var(--fm);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--roxo);border:1px solid var(--roxo-line);border-radius:3px;
  padding:1px 5px;margin-left:6px;
}

/* ── carregando ────────────────────────────────────────────── */

.carregando{
  display:flex;align-items:center;gap:10px;padding:22px 0;
  font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3);
}
.carregando:before{
  content:'';width:13px;height:13px;border-radius:50%;
  border:2px solid var(--linha-2);border-top-color:var(--roxo);
  animation:gira .7s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.carregando:before{animation:none}}

/* ── falha de comunicação com a API ────────────────────────── */

.falha-api{
  border:1px solid var(--bloq);background:var(--bloq-wash);
  border-radius:4px;padding:14px 16px;font-size:13px;line-height:1.55;
  color:var(--tinta);margin:14px 0;
}
.falha-api b{display:block;margin-bottom:4px}

/* ── impressão ─────────────────────────────────────────────── */

@media print{
  .cred .lvlbtn, .rail-nota, .paginacao{display:none}
}

/* ══════════════════════════════════════════════════════════
   Assinatura do termo · v3.1
   Cada papel vira um cartão que mostra o traço e a prova que o
   acompanha: quem colheu, de onde, e sobre qual versão.
   ══════════════════════════════════════════════════════════ */

.assinaturas{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;margin-top:14px;
}

.as-card{
  border:1px solid var(--linha-2);border-radius:5px;padding:16px 18px 14px;
  background:var(--branco);display:flex;flex-direction:column;
}
.as-card.ok{border-color:rgba(31,122,76,.34)}
.as-card.rev{border-color:var(--linha);background:var(--papel-2)}
.as-card.div{border-color:var(--pend)}

.as-card header{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;
}
.as-card h4{
  font-family:var(--fd);font-size:13.5px;font-weight:700;margin:0;flex:1;
  line-height:1.3;color:var(--tinta);
}

/* o traço, sobre pauta — a linha diz onde a assinatura se apoia */
.as-traco{
  border-bottom:1.5px solid var(--linha-2);padding:6px 0 4px;margin-bottom:8px;
  min-height:62px;display:flex;align-items:flex-end;justify-content:center;
}
.as-traco img{max-width:100%;max-height:76px;display:block}

.as-nome{
  font-family:var(--fd);font-size:14px;font-weight:600;color:var(--tinta);
  margin:0 0 10px;line-height:1.35;
}
.as-nome span{font-family:var(--fm);font-size:11.5px;font-weight:400;color:var(--tinta-3)}

.as-prova{margin:0;display:grid;gap:5px}
.as-prova div{display:flex;gap:8px;align-items:baseline}
.as-prova dt{
  font-family:var(--fm);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinta-3);flex:0 0 108px;
}
.as-prova dd{margin:0;font-size:12px;color:var(--tinta-2);line-height:1.4}
.as-prova code{font-family:var(--fm);font-size:11px;color:var(--roxo)}

.as-vazio{
  font-size:12.5px;color:var(--tinta-3);line-height:1.5;
  padding:14px 0;border-top:1px dashed var(--linha-2);
  border-bottom:1px dashed var(--linha-2);
}

.as-acts{margin-top:auto;padding-top:12px;display:flex;gap:8px}

/* ── o quadro onde se assina ────────────────────────────────── */

.assinacx{
  margin-top:14px;border:1px solid var(--linha-2);border-radius:5px;
  background:var(--branco);overflow:hidden;
}
.assinatopo{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-bottom:1px solid var(--linha);background:var(--papel-2);
}
.assinatopo span{
  flex:1;font-family:var(--fm);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-3);
}
#asCanvas{
  display:block;width:100%;height:auto;aspect-ratio:1040/360;
  background:#fff;cursor:crosshair;touch-action:none;
}
.assinalinha{
  position:relative;margin:0 34px 16px;border-top:1.5px solid var(--linha-2);
  text-align:center;
}
.assinalinha span{
  display:inline-block;margin-top:5px;font-family:var(--fm);font-size:10px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);
}

@media print{
  .as-acts{display:none}
  .assinaturas{grid-template-columns:repeat(2,1fr)}
  .as-card{break-inside:avoid}
}