/* =========================================================
   FIRMA PDF — Live Service

   Qui c'e' solo quello che live.css non ha gia': l'avvertenza in
   testa, la tela su cui si firma, e il rettangolo della pagina con
   la maniglia che si trascina. Tutto il resto — zona, lavoro,
   campo, cursore, scelta, interruttore, btn--mini — viene da la'.
   ========================================================= */

/* ═════════════════════════════════════════════════════════════════════
   BLOCCO COMUNE AI CINQUE STRUMENTI NUOVI
   Identico, parola per parola, in qr.css, conta.css, sfondo.css,
   firma.css e ocr.css. Non sta in live.css perche' live.css serve anche
   le pagine gia' pubblicate: quando si potra' toccare, questo blocco si
   sposta li' una volta sola e sparisce da tutti e cinque insieme.
   ═════════════════════════════════════════════════════════════════════ */

/* La colonna di destra non si appiccica. In queste pagine e' piu' alta
   della finestra: appiccicata, il suo fondo non si raggiungerebbe piu'. */
.cv__anteprima{position:static}

/* La pastiglia dello stato e' ancorata in fondo alla scheda: senza
   spazio riservato finisce sopra l'ultima riga di testo. */
.card--feature:has(.live__stato){padding-bottom:62px}

/* live.css non dice come si vede un .btn--mini spento: senza questo un
   pulsante disabilitato si accende al passaggio del mouse e sembra
   cliccabile. */
.btn--mini:disabled{opacity:.4;cursor:default}
.btn--mini:disabled:hover{color:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.btn--mini:focus-visible{outline:1px solid rgba(255,255,255,.6);outline-offset:3px}

/* Nei messaggi finiscono nomi di file, che possono essere lunghi e senza
   spazi: senza questo escono dal riquadro su uno schermo stretto. */
.lavoro,.vuoto,.cv__troppo,.cv__avviso{overflow-wrap:anywhere}

/* Le colonne impilate non devono poter sforare: `1fr` da solo lascia a
   una traccia il minimo del suo contenuto, e un pulsante largo allarga
   la pagina. `minmax(0,1fr)` dice che si stringe davvero. */
@media (max-width:980px){.cv{grid-template-columns:minmax(0,1fr)}}

/* I pulsanti a tutta larghezza degli strumenti hanno etichette lunghe
   («Aggiungi la firma e scarica»): su uno schermo stretto vanno a capo
   invece di allargare il riquadro che li contiene. */
.cv__pannello .btn{white-space:normal;text-align:center}

/* ── la tela ──────────────────────────────────────────────────────────
   Base comune ai tre strumenti che disegnano su canvas: sfondo, firma,
   ocr. Il fondo e l'altezza li decide ogni pagina, la forma no. */
.tela{
  display:block;width:100%;height:auto;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.tela[hidden]{display:none}

/* ── l'avvertenza in testa ────────────────────────────────────────────
   Il limite dello strumento si dice in apertura, non in fondo in
   piccolo: chi sta per perderci mezz'ora deve saperlo prima. Stessa
   forma in sfondo.css e in firma.css. */
.strumento__avvertenza{
  max-width:76ch;margin:clamp(24px,3vw,36px) 0 0;
  padding:16px 20px;border-radius:var(--r-md);
  font-size:13px;line-height:1.7;color:var(--ink-2);
  background:var(--arancio-4);box-shadow:inset 0 0 0 1px var(--arancio-3);
}
.strumento__avvertenza b{color:var(--arancio);font-weight:500}
.strumento__avvertenza i{color:var(--ink-1);font-style:italic}
.strumento__avvertenza a{color:var(--arancio);text-decoration:underline;text-underline-offset:3px}


/* ── la tela su cui si firma ─────────────────────────────────────────
   Il bianco e' del fondo, non dei punti: la tela resta trasparente, e
   il contorno della firma si ricava dall'opacita'. Se il bianco fosse
   disegnato dentro, la firma uscirebbe con un rettangolo bianco
   intorno che coprirebbe il testo del documento. */
.firma__tela{
  position:relative;margin-top:14px;border-radius:14px;overflow:hidden;
  background:#fbfbfb;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
/* Sopra la .tela comune: il fondo e il contorno li mette gia'
   .firma__tela, qui serve solo l'altezza e il puntatore giusto. */
.tela{
  height:clamp(150px,26vw,210px);
  background:none;box-shadow:none;border-radius:0;
  cursor:crosshair;
  /* senza questo, sul telefono il dito fa scorrere la pagina invece
     di lasciare il segno */
  touch-action:none;
}
/* La riga di base: dice dove firmare, come su un modulo di carta. */
.firma__riga{
  position:absolute;left:9%;right:9%;bottom:26%;height:1px;
  background:rgba(0,0,0,.14);pointer-events:none;
}

.zona--piccola{padding:22px 18px;margin-top:14px}

/* ── il rettangolo della pagina ──────────────────────────────────────
   Non e' un'anteprima del documento: e' il foglio in scala. La griglia
   serve a capire a occhio dove si sta mettendo la firma, e a non
   scambiare questo rettangolo per la pagina vera. */
.firma__vista{
  position:relative;width:100%;margin-top:14px;
  container-type:inline-size;
  background:#fff;border-radius:4px;overflow:hidden;
  background-image:
    repeating-linear-gradient(to right,rgba(0,0,0,.07) 0 1px,transparent 1px 10%),
    repeating-linear-gradient(to bottom,rgba(0,0,0,.07) 0 1px,transparent 1px 10%);
  box-shadow:0 30px 60px -34px rgba(0,0,0,1),0 0 0 1px rgba(255,255,255,.12);
}
.firma__vista[hidden]{display:none}

.firma__maniglia{
  position:absolute;display:block;padding:0;border:0;background:none;
  cursor:grab;touch-action:none;
  outline:1px dashed var(--arancio-3);outline-offset:2px;
}
.firma__maniglia[hidden]{display:none}
.firma__maniglia:hover{outline-color:var(--arancio)}
.firma__maniglia:focus-visible{outline:2px solid var(--arancio);outline-offset:3px}
.firma__maniglia.presa{cursor:grabbing;outline:1px solid var(--arancio)}
.firma__maniglia img{display:block;width:100%;height:100%;pointer-events:none}

/* Il testo dell'anteprima e' misurato in centesimi della larghezza del
   foglio, la stessa unita' con cui il PDF poi lo scrive: cosi' quello
   che si vede e quello che esce coincidono, non si somigliano. */
.firma__vistaTesto{
  position:absolute;color:#111;line-height:1;white-space:nowrap;
  font-family:Helvetica,Arial,sans-serif;pointer-events:none;
}
.firma__vistaTesto[hidden]{display:none}

/* ── la scelta della pagina ────────────────────────────────────────
   Va a capo sotto i 380px: senza, «di 12 pagine» spinge il campo del
   numero fuori dal riquadro invece di scendere sotto. */
.firma__pag{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.firma__pag .campo{flex:0 0 110px}
.firma__tot{flex:1 1 auto;min-width:0;font-size:11.5px;color:var(--ink-4);padding-bottom:12px}