/* Token: _PROGETTI-INTERNI/design-systems/td-base.design.md
   Nota contrasto: sull'accent il testo va SCURO (6.98:1); il bianco darebbe 2.84:1. */
:root {
  --primary: #0A0A0A;
  --accent: #FF6B35;
  --accent-hover: #E55A2B;
  --accent-text: #DB3A00;
  --gray-50: #FAFAFA;
  --gray-100: #F5F5F5;
  --gray-200: #E5E5E5;
  --gray-400: #A3A3A3;
  --muted: #6E6E6E;
  --gray-600: #525252;
  --gray-800: #262626;
  --gray-900: #171717;
  --success-text: #178841;
  --error-text: #EB1515;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px;
  --sh-sm: 0 1px 2px rgba(0,0,0,.05);
  --sh-md: 0 4px 12px rgba(0,0,0,.08);
  --sh-lg: 0 12px 32px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-800);
  background: var(--gray-100);
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
button { font-family: inherit; font-size: 1rem; cursor: pointer; }
img { max-width: 100%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 32px; border: none; border-radius: var(--r-md);
  font-weight: 600; font-size: 1.0625rem; transition: 150ms ease;
  min-height: 52px;             /* bersaglio comodo anche su telefono */
}
.btn-primary { background: var(--accent); color: var(--primary); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: #fff; border: 1px solid var(--gray-200); color: var(--gray-800); }
.btn-secondary:hover:not(:disabled) { background: var(--gray-50); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 16px; min-height: 40px; font-size: .875rem; }
.btn:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; }

.card {
  background: #fff; border-radius: var(--r-md);
  box-shadow: var(--sh-sm); padding: 24px;
}
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px);
  background: var(--gray-900); color: #fff; padding: 12px 24px; border-radius: var(--r-md);
  box-shadow: var(--sh-lg); font-size: .9375rem; opacity: 0; pointer-events: none;
  transition: 250ms ease; z-index: 90; max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--error-text); }

/* ---------- pagine PDF ---------- */
.pages { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page-wrap {
  position: relative; background: #fff; box-shadow: var(--sh-md);
  border-radius: var(--r-sm); overflow: hidden; flex: 0 0 auto;
}
.page-wrap canvas { display: block; }
.page-num {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: rgba(10,10,10,.65); color: #fff;
  font-size: .75rem; padding: 2px 8px; border-radius: 9999px; pointer-events: none;
}
.overlay { position: absolute; inset: 0; }

/* Riquadro che indica dove andra' la firma. Deve saltare all'occhio: e' l'unica
   informazione che il firmatario deve trovare da solo. */
.slot {
  position: absolute; border: 2px dashed var(--accent);
  background: rgba(255,107,53,.10); border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: var(--accent-text); font-weight: 600;
  text-align: center; padding: 2px; overflow: hidden;
}
.slot.filled { border-style: solid; background: none; }
.slot img { width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
  .slot:not(.filled) { animation: pulse 2.4s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }
}