/* 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. */

@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: 700; 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: 24px; 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: 4px; }

.a3-selo-titulo { margin: 4px 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -.012em; color: var(--tinta); }
.a3-selo-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.a3-selo-barra label { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--tinta-fraca); }
.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: 8px; font-size: 18px; line-height: 1; }
.a3-selo-barra [data-sugerida-a3] { margin-left: auto; }

.a3-selo-palco {
  display: flex; justify-content: center; overflow: hidden; padding: 14px;
  border: 1px solid var(--linha); border-radius: var(--raio-grande, 14px);
  background: var(--superficie-terciaria, #eef0f4);
}
.a3-folha {
  position: relative; flex: none; background: #fff; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 28px -12px rgba(0, 0, 0, .28);
}
.a3-folha canvas { display: block; width: 100%; height: 100%; border-radius: 2px; }

.a3-selo-caixa {
  position: absolute; box-sizing: border-box; touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: grab; border: 1px solid #c4cfdb; background: #f8fafc;
  outline: 2px solid var(--acento, #0a66d6); outline-offset: 3px;
  box-shadow: 0 6px 18px -8px rgba(10, 60, 120, .45);
}
.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;
}
.a3-alca { position: absolute; width: 24px; height: 24px; margin: -12px; display: grid; place-items: center; touch-action: none; }
.a3-alca::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff;
  border: 2px solid var(--acento, #0a66d6); box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.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: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--tinta); }
.a3-selo-teclas { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--tinta-fraca); }
.assinatura-a3-dialog .a3-aviso-selo {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45;
  color: var(--tinta); background: var(--ambar-claro, #fdf5e4); border: 1px solid var(--ambar-borda, #efd9a6);
}
.assinatura-a3-dialog .a3-aviso-selo[hidden] { display: none; }

html[data-tema="escuro"] .a3-folha { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 30px -12px rgba(0, 0, 0, .8); }
html[data-tema="escuro"] .a3-selo-caixa { box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7); }

@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: 12px; }
}
@media (max-width: 500px) {
  .a3-selo-palco { padding: 8px; }
  .a3-selo-barra [data-sugerida-a3] { margin-left: 0; flex: 1 1 100%; }
}