/* e-PGM · selo visível da assinatura com certificado (ponte assinatura-a3.js).
 *
 * Carregada depois de vidro.css e movimento.css. Só desenha a prévia da página
 * e o selo arrastável; o selo em si fica claro também no tema escuro, porque
 * é parte da folha do PDF. A fonte do selo é a Carlito embutida no PDF final. */

@layer telas {

@font-face { font-family: "e-PGM Selo"; src: url("fontes/Carlito-Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "e-PGM Selo"; src: url("fontes/Carlito-Bold.ttf"); font-weight: 600; font-display: swap; }

.assinatura-a3-dialog.a3-com-selo { width: min(1080px, calc(100vw - 32px)); }
.assinatura-a3-dialog.a3-com-selo .a3-corpo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: var(--e-5); align-items: start;
}
.assinatura-a3-dialog .a3-selo, .assinatura-a3-dialog .a3-lateral { min-width: 0; }
.assinatura-a3-dialog.a3-com-selo .a3-lateral .a3-etapas { margin-top: var(--e-1); }

.a3-selo-titulo { margin: var(--e-1) 0 var(--e-3); font-size: var(--fs-4); font-weight: 600; letter-spacing: -.012em; color: var(--texto); }
.a3-selo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-2); margin-bottom: var(--e-3); }
.a3-selo-barra label { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--fs-3); color: var(--texto-2); }
.a3-selo-barra select { min-width: 58px; min-height: 32px; }
.a3-selo-barra [data-anterior-a3], .a3-selo-barra [data-seguinte-a3] { min-width: 34px; padding-inline: var(--e-2); font-size: var(--fs-5); line-height: 1; }
.a3-selo-barra [data-sugerida-a3] { margin-left: auto; }

.a3-selo-palco {
  display: flex; justify-content: center; overflow: hidden; padding: var(--e-4);
  border: 1px solid var(--linha); border-radius: var(--raio-3, 14px);
  background: var(--superficie-3, var(--fundo));
}
.a3-folha {
  position: relative; flex: none; background: var(--papel-fundo); border-radius: var(--raio-1);
  box-shadow: var(--sombra-1);
}
.a3-folha canvas { display: block; width: 100%; height: 100%; border-radius: var(--raio-1); }

.a3-selo-caixa {
  position: absolute; box-sizing: border-box; touch-action: none; user-select: none; -webkit-user-select: none;
  /* Papel, não tela: as cores do selo do PDF (assinatura_visivel.desenhar_selo) nos dois temas. */
  cursor: grab; border: 1px solid var(--selo-borda); background: var(--selo-fundo);
  outline: 2px solid var(--acao); outline-offset: 3px;
  box-shadow: none;
}
.a3-selo-caixa:focus-visible { outline-width: 3px; }
.a3-selo-caixa.a3-arrastando { cursor: grabbing; }
.a3-selo-caixa.a3-travado { cursor: default; outline-style: dashed; }
.a3-selo-texto { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.a3-selo-texto span {
  position: absolute; white-space: nowrap; line-height: 1; letter-spacing: 0;
  font-family: "e-PGM Selo", Carlito, Calibri, sans-serif; font-kerning: normal;
}
/* Identidade do selo (5.22.1): faixa, emblema de conferido e pílula da marca, como no PDF. */
.a3-selo-faixa, .a3-selo-emblema, .a3-selo-pilula { position: absolute; display: block; }
.a3-selo-faixa { left: 0; top: 0; bottom: 0; background: var(--selo-marca); }
.a3-selo-emblema svg { display: block; width: 100%; height: 100%; overflow: visible; }
.a3-selo-emblema circle { fill: var(--selo-marca); }
.a3-selo-emblema path { fill: none; stroke: var(--papel-fundo); stroke-width: .30; stroke-linecap: round; stroke-linejoin: round; }
.a3-selo-pilula { box-sizing: border-box; border-style: solid; border-color: var(--selo-marca); }
.a3-alca { position: absolute; width: 24px; height: 24px; margin: calc(var(--e-3) * -1); display: grid; place-items: center; touch-action: none; }
.a3-alca::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie);
  border: 2px solid var(--acao); box-shadow: var(--sombra-1);
}
.a3-alca[data-alca="no"] { left: 0; top: 0; cursor: nwse-resize; }
.a3-alca[data-alca="nl"] { right: 0; top: 0; cursor: nesw-resize; }
.a3-alca[data-alca="so"] { left: 0; bottom: 0; cursor: nesw-resize; }
.a3-alca[data-alca="sl"] { right: 0; bottom: 0; cursor: nwse-resize; }
.a3-travado .a3-alca { display: none; }
.a3-selo-inativo .a3-selo-caixa { opacity: .5; outline-style: dashed; }

.a3-selo-dica { margin: var(--e-3) 0 0; font-size: var(--fs-3); line-height: 1.45; color: var(--texto); }
.a3-selo-teclas { margin: var(--e-1) 0 0; font-size: var(--fs-2); line-height: 1.45; color: var(--texto-2); }
.assinatura-a3-dialog .a3-aviso-selo {
  margin: var(--e-3) 0 0; padding: var(--e-3) var(--e-3); border-radius: var(--raio-2); font-size: var(--fs-3); line-height: 1.45;
  color: var(--texto); background: var(--atencao-suave); border: 1px solid var(--atencao-linha);
}
.assinatura-a3-dialog .a3-aviso-selo[hidden] { display: none; }

html[data-tema="escuro"] .a3-folha { box-shadow: var(--sombra-1); }
html[data-tema="escuro"] .a3-selo-caixa { box-shadow: none; }

@media (prefers-reduced-motion: no-preference) {
  .a3-selo-caixa { transition: outline-color var(--mov-rapido, 140ms) var(--mov-curva, ease), box-shadow var(--mov-rapido, 140ms) var(--mov-curva, ease); }
}
@media (max-width: 820px) {
  .assinatura-a3-dialog.a3-com-selo .a3-corpo { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
}
@media (max-width: 500px) {
  .a3-selo-palco { padding: var(--e-2); }
  .a3-selo-barra [data-sugerida-a3] { margin-left: 0; flex: 1 1 100%; }
}

}