/* Assinador da HE — tela de assinatura e tela de conferência.
   Sem fonte de terceiro e sem framework: a CSP desta app é 'self' em tudo, e
   uma tela onde alguém digita CPF não é lugar de carregar script de fora.
   A pilha de fontes do sistema resolve, e ainda economiza uma requisição no
   celular de quem vai assinar. */

:root{
  --tinta:#14202e; --suave:#5b6875; --linha:#dde3e9; --fundo:#f4f6f8;
  --papel:#fff; --azul:#1d5b8f; --azul-forte:#154a76; --azul-claro:#eaf2f9;
  --verde:#166b45; --vermelho:#a3251f;
  --raio:12px;
  --fonte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font:16px/1.55 var(--fonte);
}

/* ------------------------------------------------------------------ topo */
.topo{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.2rem; background:var(--papel);
  border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:5;
}
.marca{ font-weight:700; letter-spacing:-.01em }
.selo{
  font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--azul); background:var(--azul-claro); padding:.32rem .6rem;
  border-radius:999px;
}

main{ max-width:46rem; margin:0 auto; padding:1.2rem 1rem 3rem }

/* --------------------------------------------------------------- cartões */
.cartao{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:1.3rem; margin-bottom:1rem;
}
h1{ font-size:1.35rem; line-height:1.25; margin:.2rem 0 .7rem }
h2{ font-size:1rem; margin:0 0 .8rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--linha) }
p{ margin:.6rem 0 }
.kicker{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--azul); margin:0;
}
.esmaecido{ color:var(--suave) }
.nota{ font-size:.85rem }
.dica{ display:block; margin-top:.4rem; font-size:.82rem }
.mono{ font-family:var(--mono); font-size:.82rem }
.quebra{ overflow-wrap:anywhere }
.oculto{ display:none !important }

dl.dados{ display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem;
  margin:.9rem 0 0; font-size:.88rem }
dl.dados dt{ color:var(--suave) }
dl.dados dd{ margin:0; font-weight:600; min-width:0 }

/* ----------------------------------------------------------- visor do PDF */
.visor{
  border:1px solid var(--linha); border-radius:8px; overflow:hidden;
  background:#e9edf1; height:min(62vh,540px);
}
.visor iframe{ width:100%; height:100%; border:0; display:block }
.acoes-visor{ margin:.8rem 0 }

/* ---------------------------------------------------------------- campos */
.campo{ display:block; margin:.9rem 0 }
.campo>span{ display:block; font-size:.85rem; color:var(--suave); margin-bottom:.3rem }
input[type=text]{
  width:100%; font:inherit; padding:.7rem .8rem; color:var(--tinta);
  background:var(--papel); border:1.5px solid var(--linha); border-radius:8px;
}
input[type=text]:focus-visible{ outline:2px solid var(--azul); outline-offset:1px;
  border-color:var(--azul) }
#f-codigo{ font-family:var(--mono); font-size:1.3rem; letter-spacing:.3em;
  text-align:center; max-width:11rem }

.marcador{ display:flex; gap:.7rem; align-items:flex-start; margin:.9rem 0;
  font-size:.92rem; cursor:pointer }
.marcador input{ width:1.15rem; height:1.15rem; margin:.18rem 0 0; flex:none;
  accent-color:var(--azul) }

/* -------------------------------------------------------------- prancheta */
.prancheta{
  border:1.5px dashed var(--linha); border-radius:8px; background:var(--papel);
  /* touch-action none: sem isto o dedo rola a página em vez de desenhar */
  touch-action:none; overflow:hidden;
}
.prancheta canvas{ display:block; width:100%; height:150px }

/* --------------------------------------------------------------- botões */
.botao{
  font:inherit; font-weight:600; cursor:pointer;
  padding:.72rem 1.1rem; border-radius:8px; border:1.5px solid var(--azul);
  background:var(--azul); color:#fff;
}
.botao:hover{ filter:brightness(1.08) }
.botao:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px }
.botao[disabled]{ opacity:.45; cursor:not-allowed; filter:none }
.botao.secundario{ background:var(--papel); color:var(--azul) }
.botao.grande{ width:100%; padding:.95rem 1.1rem; font-size:1.05rem }
.link-botao{
  font:inherit; color:var(--azul); background:none; border:0; padding:0;
  text-decoration:underline; cursor:pointer;
}
.link{ color:var(--azul) }

.aviso{ min-height:1.2rem; font-size:.9rem; font-weight:600; margin:.5rem 0 }
.aviso.ruim{ color:var(--vermelho) }
.aviso.bom{ color:var(--verde) }

.rodape{ text-align:center; color:var(--suave); font-size:.8rem;
  padding:0 1rem 2rem }

/* ---------------------------------------------------------------- estados */
.etiqueta{ display:inline-block; font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.28rem .6rem;
  border-radius:999px }
.etiqueta.ok{ background:#e4f2ea; color:var(--verde) }
.etiqueta.esperando{ background:#fdf3d8; color:#7a5200 }

table.trilha{ width:100%; border-collapse:collapse; font-size:.82rem;
  margin-top:.6rem }
table.trilha th, table.trilha td{ text-align:left; padding:.42rem .5rem;
  border-bottom:1px solid var(--linha); vertical-align:top }
table.trilha th{ color:var(--suave); font-weight:600 }
.rolagem{ overflow-x:auto }

@media (max-width:520px){
  main{ padding:1rem .8rem 2.5rem }
  .cartao{ padding:1.05rem }
  h1{ font-size:1.2rem }
  dl.dados{ grid-template-columns:1fr; gap:.1rem }
  dl.dados dd{ margin-bottom:.5rem }
}

/* ------------------------------------------------------------- painel HE */
main.largo{ max-width:64rem }
.cartao.estreito{ max-width:26rem; margin-left:auto; margin-right:auto }
.topo-direita{ display:flex; align-items:center; gap:.9rem; font-size:.88rem }
h2.sem-borda{ border:0; padding-bottom:0; margin:0 }
h3.sub{ font-size:.86rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--suave); margin:1.4rem 0 .3rem }

.rot-linha{ display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin:1.2rem 0 .6rem }
.rot{ font-size:.7rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--azul) }

input[type=email], input[type=password], input[type=file]{
  width:100%; font:inherit; padding:.7rem .8rem; color:var(--tinta);
  background:var(--papel); border:1.5px solid var(--linha); border-radius:8px;
}
input[type=email]:focus-visible, input[type=password]:focus-visible,
input[type=file]:focus-visible{ outline:2px solid var(--azul); outline-offset:1px }
input[readonly]{ background:var(--fundo); color:var(--suave) }

/* Uma pessoa por linha; no celular vira uma coluna, porque quatro campos
   lado a lado em 375px não são quatro campos, são quatro tiras. */
.parte-linha{ display:grid; gap:.5rem; margin-bottom:.7rem;
  grid-template-columns:1.4fr 1.4fr 1fr .9fr auto; align-items:center }
.parte-linha input{ min-width:0 }

.link-card{ border:1px solid var(--linha); border-radius:8px; padding:.9rem;
  margin-bottom:.7rem; background:var(--fundo) }
.link-card b{ display:block }
.link-card span{ display:block; margin-bottom:.5rem }
.link-card input{ margin-bottom:.5rem }
.link-card p{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 }
.saida-link:empty{ display:none }
.saida-link{ margin-top:.7rem }

@media (max-width:760px){
  .parte-linha{ grid-template-columns:1fr; padding:.7rem; border:1px solid var(--linha);
    border-radius:8px }
  .parte-linha .p-tirar{ justify-self:end }
}