/* White converter shell for Assinatura PNG. The pad stays in assinatura-desenhar.js. */

.sigpng-page { --sp-blue: #2563eb; --sp-green: #16a34a; --sp-gold: #f5b400; }
.sigpng-page [hidden] { display: none !important; }

@media (min-width: 1100px) {
  .sigpng-page { --cv-aside: clamp(230px, 18vw, 280px); }
  .sigpng-page .conv-board {
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  }
}

.sigpng-page .conv-title {
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  letter-spacing: -0.04em;
  line-height: 1.08;
  hyphens: manual;
  overflow-wrap: normal;
}
.article .sigpng-page .conv-lede {
  margin: 0 0 16px;
  color: #3b4d9a;
  font-size: 1.02rem;
  line-height: 1.4;
}
.article .sigpng-page .conv-perks { gap: 14px; }
.article .sigpng-page .conv-perks li { font-size: 0.84rem; }
.sigpng-page .conv-perks strong { color: #1d3fd8; }
.article .sigpng-page img.conv-art {
  max-width: 260px;
  margin-top: 22px;
}

.sigpng-page .sigpng-app {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cv-ink, #172033);
}
.sigpng-page .conv-board,
.sigpng-page .conv-stack { gap: 12px; }
.sigpng-page .conv-card,
.sigpng-page .conv-steps {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sigpng-page .conv-steps [data-conv-step="1"] > span:first-child { background: var(--sp-blue); color: #fff; }
.sigpng-page .conv-steps [data-conv-step="1"] strong { color: var(--sp-blue); }
.sigpng-page:has(.sig-pad-wrap.is-dirty) .conv-steps [data-conv-step="1"] > span:first-child { background: var(--sp-green); color: #fff; }
.sigpng-page:has(.sig-pad-wrap.is-dirty) .conv-steps [data-conv-step="1"] strong { color: var(--cv-ink, #172033); }
.sigpng-page:has(.sig-pad-wrap.is-dirty) .conv-steps [data-conv-step="2"] > span:first-child { background: var(--sp-blue); color: #fff; }
.sigpng-page:has(.sig-pad-wrap.is-dirty) .conv-steps [data-conv-step="2"] strong { color: var(--sp-blue); }
.sigpng-page:has(#sig-result:not([hidden])) .conv-steps [data-conv-step="2"] > span:first-child { background: var(--sp-green); }
.sigpng-page:has(#sig-result:not([hidden])) .conv-steps [data-conv-step="2"] strong { color: var(--cv-ink, #172033); }
.sigpng-page:has(#sig-result:not([hidden])) .conv-steps [data-conv-step="3"] > span:first-child { background: var(--sp-blue); color: #fff; }
.sigpng-page:has(#sig-result:not([hidden])) .conv-steps [data-conv-step="3"] strong { color: var(--sp-blue); }

.article .sigpng-page h2.conv-card-title { color: #1d3fd8; font-size: 1.02rem; }
.sigpng-badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--sp-blue);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
}

.sigpng-page .itool-hint[data-qa-mobile-note] { margin: 0; }
@media (min-width: 900px) {
  .sigpng-page .itool-hint[data-qa-mobile-note] { display: none; }
}

.sigpng-page .sigpng-app .sig-pad-wrap { margin-top: 4px; }
.sigpng-page .sigpng-app .itool-fields { margin: 0; }
.sigpng-page .sigpng-app .itool-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: var(--cv-ink, #172033);
}
.sigpng-page .sigpng-app .itool-select,
.sigpng-page .sigpng-app .itool-input {
  width: 100%;
  box-sizing: border-box;
}
.sigpng-page .sigpng-app input[type="range"] {
  width: 100%;
  height: 28px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.sigpng-page .sigpng-app input[type="color"] {
  width: 40px;
  height: 36px;
  padding: 2px;
}
.sigpng-page .sigpng-app .itool-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--cv-ink, #172033);
  font-size: 0.9rem;
  line-height: 1.35;
}
.sigpng-page .sigpng-app .itool-check input { margin-top: 3px; flex: none; }
.article .sigpng-page .itool-status {
  margin: 0;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.4;
}
.article .sigpng-page .sigpng-links { margin: 0; }
.article .sigpng-page .sigpng-links a { color: var(--sp-blue); font-weight: 700; }
.article .sigpng-page .sig-result-preview img {
  margin: 0;
  border: 0;
  box-shadow: none;
}
.article .sigpng-page .sigpng-empty {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 0.9rem;
}
.sigpng-dl:has(#sig-result:not([hidden])) .sigpng-empty { display: none; }
.sigpng-page .sig-result-card { margin-top: 0; margin-bottom: 12px; }

.sigpng-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.sigpng-page .sigpng-app .sigpng-actions + .itool-status { margin-top: 10px; }
.sigpng-actions .itool-btn { flex: 1 1 120px; }
.sigpng-page .sigpng-app button#sig-btn-dl,
.sigpng-page .sigpng-app button#sig-btn-dl.is-ready-pulse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--sp-gold) !important;
  border-color: transparent !important;
  color: #1f2937 !important;
  box-shadow: none;
  animation: none;
  font-size: 1rem;
  font-weight: 800;
}
.sigpng-page .sigpng-app button#sig-btn-dl:hover:not(:disabled),
.sigpng-page .sigpng-app button#sig-btn-dl.is-ready-pulse:hover:not(:disabled) {
  background: #e5a800 !important;
  color: #1f2937 !important;
}
.sigpng-page .sigpng-app button#sig-btn-dl:disabled { opacity: 0.45; }

.sigpng-page .sigpng-app > .itool-side {
  display: none;
  width: auto;
  max-width: none;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.sigpng-page .sigpng-app > .itool-side:has(.itool-hist-host:not([hidden])) { display: block; }
.sigpng-page .sigpng-app > .itool-side .itool-hist-list {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.sigpng-page .sigpng-app > .itool-side .itool-hist-thumb { aspect-ratio: 4 / 3; }
.article .sigpng-page .itool-hist-list > li { margin: 0; }
.article .sigpng-page .itool-hist-list > li::before { content: none; }
.sigpng-page .sigpng-app > .itool-success,
.sigpng-page .sigpng-app.is-busy > .itool-busy-banner { display: none !important; }

html[data-theme="dark"] .sigpng-page .sigpng-app button#sig-btn-dl { color: #1f2937; }
html[data-theme="dark"] .article .sigpng-page .conv-lede { color: #a5b4fc; }