/* ============================================================================
   LEGALESS — STRUMENTI INTERATTIVI
   File: strumenti/assets/strumenti.css
   ----------------------------------------------------------------------------
   SCOPO
     Foglio di stile unico degli strumenti. Nessun framework, nessuna
     dipendenza esterna, nessun font aggiuntivo: Montserrat e' gia' caricato
     dal tema.

   DIREZIONE
     Sobrio e tecnico. Bordi sottili, superfici piatte, spazio bianco.
     Nessun gradiente, nessuna ombra decorativa, nessun glow.
     Il carattere lo danno tipografia e ritmo verticale.

   PUNTI DI CALIBRAZIONE
     Tutto quello che si puo' voler ritoccare sta nel blocco :root qui sotto.
     I colori sono quelli reali del brand Legaless (style.css del tema), non
     una palette inventata.
   ========================================================================= */

.lgs {

  /* ── colori ─────────────────────────────────────────────────────────── */
  --lgs-navy:        #072938;   /* = --colore-primario del tema */
  --lgs-navy-scuro:  #001E28;   /* = --palette-6 */
  --lgs-blue:        #005764;   /* = --palette-3, elementi strutturali */
  --lgs-teal:        #02B1AE;   /* = --colore-secondario, UNICO accento */
  --lgs-teal-chiaro: #E6F8F7;   /* fondo delle pill e degli stati selezionati */

  --lgs-testo:       #142433;
  --lgs-testo-soft:  #5B6E7F;   /* = --palette-11 */
  --lgs-bordo:       #DCE4E8;
  --lgs-bordo-forte: #B9C6CD;
  --lgs-fondo:       #FFFFFF;
  --lgs-fondo-soft:  #F6F8F9;
  --lgs-errore:      #B3261E;

  /* ── tipografia ─────────────────────────────────────────────────────── */
  /* Montserrat e' caricato dal tema nei pesi 400/700/800: il 600 non esiste,
     quindi il "semibold" del progetto e' reso con il 700. */
  --lgs-font:        'Montserrat', system-ui, -apple-system, sans-serif;
  --lgs-h1:          34px;
  --lgs-h1-lh:       38px;
  --lgs-h2:          24px;
  --lgs-h3:          19px;
  --lgs-corpo:       16px;
  --lgs-corpo-lh:    1.7;
  --lgs-piccolo:     14px;
  --lgs-label:       13px;

  /* ── spaziatura: solo questi valori, mai numeri arbitrari ───────────── */
  --lgs-s1: 4px;   --lgs-s2: 8px;   --lgs-s3: 12px;  --lgs-s4: 16px;
  --lgs-s6: 24px;  --lgs-s8: 32px;  --lgs-s12: 48px; --lgs-s16: 64px;

  /* ── forme ──────────────────────────────────────────────────────────── */
  --lgs-r-controllo: 8px;
  --lgs-r-card:      12px;
  --lgs-larghezza:   1120px;
  --lgs-lettura:     680px;

  /* ── comportamento ──────────────────────────────────────────────────── */
  --lgs-transizione: 150ms ease;
  --lgs-header-offset: 120px;  /* offset dello sticky rispetto all'header Avada */

  font-family: var(--lgs-font);
  font-size: var(--lgs-corpo);
  line-height: var(--lgs-corpo-lh);
  color: var(--lgs-testo);
  max-width: var(--lgs-larghezza);
  margin: 0 auto;
  padding: 0 var(--lgs-s4);
  -webkit-font-smoothing: antialiased;
}

.lgs *, .lgs *::before, .lgs *::after { box-sizing: border-box; }

.lgs [hidden] { display: none !important; }

/* Popup dell'anteprima aperto: la pagina sotto non deve scorrere. */
body.lgs-anteprima-aperta { overflow: hidden; }


/* ── TIPOGRAFIA ─────────────────────────────────────────────────────────── */

.lgs-h1 {
  font-size: var(--lgs-h1);
  line-height: var(--lgs-h1-lh);
  font-weight: 700;
  color: var(--lgs-navy);
  margin: 0 0 var(--lgs-s3);
  letter-spacing: -0.01em;
}

.lgs-h2 {
  font-size: var(--lgs-h2);
  line-height: 1.3;
  font-weight: 700;
  color: var(--lgs-navy);
  margin: 0 0 var(--lgs-s4);
}

.lgs-h3 {
  font-size: var(--lgs-h3);
  line-height: 1.4;
  font-weight: 700;
  color: var(--lgs-navy);
  margin: 0 0 var(--lgs-s2);
}

.lgs p { margin: 0 0 var(--lgs-s4); }
.lgs a { color: var(--lgs-blue); text-decoration: underline; text-underline-offset: 2px; }
.lgs a:hover { color: var(--lgs-teal); }


/* ── 1-2. TESTATA ───────────────────────────────────────────────────────── */

.lgs-testata { padding: var(--lgs-s8) 0 var(--lgs-s6); max-width: 100%; }

.lgs-occhiello {
  display: inline-block;
  background: var(--lgs-teal-chiaro);
  color: var(--lgs-navy);
  font-size: var(--lgs-label);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: var(--lgs-s1) var(--lgs-s3);
  border-radius: 999px;
  margin: 0 0 var(--lgs-s4);
}

.lgs-sottotitolo {
  font-size: 18px;
  color: var(--lgs-testo-soft);
  margin: 0;
}


/* ── 3. RIQUADRO PRIMA DOMANDA ──────────────────────────────────────────── */

.lgs-aggancio {
  background: var(--lgs-fondo-soft);
  border: 1px solid var(--lgs-bordo);
  border-radius: var(--lgs-r-card);
  padding: var(--lgs-s6);
  margin: 0 0 var(--lgs-s4);
}

.lgs-aggancio-campi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lgs-s4);
  align-items: flex-end;
}

.lgs-aggancio .lgs-campo { flex: 1 1 200px; margin: 0; }
.lgs-aggancio .lgs-campo--azione { flex: 0 0 auto; }

/*
 * Qui stavano .lgs-nota (la riga di etichette sotto la prima domanda) e
 * .lgs-riassicurazione: tolte dalla pagina, tolte anche da qui.
 */


/* ── CAMPI ──────────────────────────────────────────────────────────────── */

.lgs-griglia-campi {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--lgs-s4);
}

.lgs-campo { grid-column: span 12; min-width: 0; }
.lgs-campo--meta   { grid-column: span 6; }
.lgs-campo--terzo  { grid-column: span 4; }
.lgs-campo--quarto { grid-column: span 3; }
.lgs-campo--breve  { grid-column: span 3; }   /* CAP, provincia */

.lgs-label {
  display: block;
  font-size: var(--lgs-label);
  font-weight: 700;
  color: var(--lgs-navy);
  margin: 0 0 var(--lgs-s2);
  letter-spacing: 0.01em;
}

.lgs-facoltativo { font-weight: 400; color: var(--lgs-testo-soft); }

.lgs-input {
  width: 100%;
  min-height: 48px;
  padding: var(--lgs-s3) var(--lgs-s4);
  font-family: var(--lgs-font);
  font-size: var(--lgs-corpo);
  color: var(--lgs-testo);
  background: var(--lgs-fondo);
  border: 1px solid var(--lgs-bordo-forte);
  border-radius: var(--lgs-r-controllo);
  transition: border-color var(--lgs-transizione);
  appearance: none;
}

.lgs-input:hover { border-color: var(--lgs-blue); }

.lgs-input:focus-visible,
.lgs-input:focus {
  outline: 2px solid var(--lgs-teal);
  outline-offset: 1px;
  border-color: var(--lgs-teal);
}

.lgs-input::placeholder { color: #98A6AF; }

.lgs-textarea { min-height: 110px; line-height: 1.6; resize: vertical; }

.lgs-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2 4.5l5 5 5-5' fill='none' stroke='%235B6E7F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--lgs-s4) center;
  padding-right: var(--lgs-s8);
}

.lgs-input-affisso { position: relative; }
.lgs-input-affisso .lgs-input { padding-right: var(--lgs-s8); }
.lgs-affisso {
  position: absolute;
  right: var(--lgs-s4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--lgs-testo-soft);
  font-size: var(--lgs-corpo);
  pointer-events: none;
}

.lgs-aiuto {
  font-size: var(--lgs-label);
  color: var(--lgs-testo-soft);
  margin: var(--lgs-s2) 0 0;
}

.lgs-errore {
  font-size: var(--lgs-label);
  color: var(--lgs-errore);
  margin: var(--lgs-s2) 0 0;
  font-weight: 700;
}

.lgs-campo--errato .lgs-input { border-color: var(--lgs-errore); }


/* ── BOTTONI ────────────────────────────────────────────────────────────── */

.lgs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lgs-s2);
  min-height: 48px;
  padding: var(--lgs-s3) var(--lgs-s6);
  font-family: var(--lgs-font);
  font-size: var(--lgs-corpo);
  font-weight: 700;
  line-height: 1.2;
  border-radius: var(--lgs-r-controllo);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--lgs-transizione), border-color var(--lgs-transizione), color var(--lgs-transizione);
}

.lgs-btn:focus-visible { outline: 2px solid var(--lgs-teal); outline-offset: 2px; }

.lgs-btn--primario {
  background: var(--lgs-teal);
  color: #FFFFFF;
  border-color: var(--lgs-teal);
}
.lgs-btn--primario:hover { background: #029C99; border-color: #029C99; color: #FFFFFF; }

.lgs-btn--neutro {
  background: var(--lgs-fondo);
  color: var(--lgs-navy);
  border-color: var(--lgs-bordo-forte);
}
.lgs-btn--neutro:hover { border-color: var(--lgs-navy); }

.lgs-btn--grande { width: 100%; min-height: 56px; font-size: 17px; }

.lgs-btn[disabled], .lgs-btn[aria-busy="true"] { opacity: 0.55; cursor: default; pointer-events: none; }

.lgs-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--lgs-font);
  font-size: inherit;
  color: var(--lgs-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.lgs-link:hover { color: var(--lgs-teal); }
.lgs-link:focus-visible { outline: 2px solid var(--lgs-teal); outline-offset: 2px; }


/* ── 5. STRUMENTO ───────────────────────────────────────────────────────── */

.lgs-avanzamento { margin: 0 0 var(--lgs-s6); }

.lgs-avanzamento-testo {
  font-size: var(--lgs-label);
  font-weight: 700;
  color: var(--lgs-testo-soft);
  margin: 0 0 var(--lgs-s2);
  letter-spacing: 0.02em;
}

.lgs-avanzamento-barra {
  height: 3px;
  background: var(--lgs-bordo);
  border-radius: 2px;
  overflow: hidden;
}

.lgs-avanzamento-riempimento {
  height: 100%;
  width: 25%;
  background: var(--lgs-teal);
  transition: width 300ms ease;
}

.lgs-colonne { display: block; }

.lgs-step-titolo { font-size: var(--lgs-h3); margin-bottom: var(--lgs-s2); }
.lgs-step-intro  { font-size: var(--lgs-piccolo); color: var(--lgs-testo-soft); margin-bottom: var(--lgs-s6); }

.lgs-navigazione {
  display: flex;
  gap: var(--lgs-s3);
  margin: var(--lgs-s8) 0 0;
}
.lgs-navigazione .lgs-btn--primario { margin-left: auto; }

.lgs-riquadro-calcoli {
  margin: var(--lgs-s6) 0 0;
  padding: var(--lgs-s4) var(--lgs-s6);
  background: var(--lgs-fondo-soft);
  border: 1px solid var(--lgs-bordo);
  border-radius: var(--lgs-r-card);
}
.lgs-riquadro-calcoli:empty { display: none; }

.lgs-calcolo { padding: var(--lgs-s3) 0; border-bottom: 1px solid var(--lgs-bordo); }
.lgs-calcolo:last-child { border-bottom: 0; }
.lgs-calcolo-etichetta { font-size: var(--lgs-label); color: var(--lgs-testo-soft); display: block; }
.lgs-calcolo-valore { font-size: var(--lgs-h3); font-weight: 700; color: var(--lgs-navy); display: block; }
.lgs-calcolo-nota { font-size: var(--lgs-label); color: var(--lgs-testo-soft); margin: var(--lgs-s1) 0 0; }

/*
 * Il primo calcolo — per la messa in mora sono gli interessi maturati — e' il
 * numero per cui vale la pena compilare il resto: qui esce dall'elenco e
 * diventa la cosa piu' visibile del riquadro.
 */
.lgs-calcolo--principale {
  background: var(--lgs-teal-chiaro);
  border: 1px solid rgba(2, 177, 174, 0.35);
  border-radius: var(--lgs-r-controllo);
  padding: var(--lgs-s4);
  margin: 0 0 var(--lgs-s3);
}

.lgs-calcolo--principale .lgs-calcolo-etichetta {
  font-weight: 700;
  color: var(--lgs-navy);
  font-size: var(--lgs-piccolo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lgs-calcolo--principale .lgs-calcolo-valore {
  font-size: 30px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--lgs-navy);
  margin-top: var(--lgs-s1);
}

.lgs-calcolo--principale .lgs-calcolo-nota { color: #43606C; }

/* Interruttore: decide se il paragrafo corrispondente entra nella lettera. */
.lgs-calcolo-scelta {
  display: flex;
  align-items: center;
  gap: var(--lgs-s2);
  margin: var(--lgs-s3) 0 0;
  padding: var(--lgs-s2) 0 0;
  border-top: 1px solid rgba(2, 177, 174, 0.28);
  font-size: var(--lgs-label);
  font-weight: 700;
  color: var(--lgs-navy);
  cursor: pointer;
  min-height: 34px;
}

.lgs-calcolo-scelta input {
  width: 18px; height: 18px;
  accent-color: var(--lgs-teal);
  cursor: pointer;
  flex: 0 0 auto;
}

/* Escluso dalla lettera: il numero resta leggibile ma si spegne. */
.lgs-calcolo--spento { background: var(--lgs-fondo-soft); border-color: var(--lgs-bordo); }
.lgs-calcolo--spento .lgs-calcolo-valore,
.lgs-calcolo--spento .lgs-calcolo-etichetta { color: var(--lgs-testo-soft); }
.lgs-calcolo--spento .lgs-calcolo-scelta { border-top-color: var(--lgs-bordo); }

.lgs-avviso-sessione {
  font-size: var(--lgs-label);
  color: var(--lgs-testo-soft);
  margin: var(--lgs-s6) 0 0;
}


/* ── ANTEPRIMA DEL DOCUMENTO ────────────────────────────────────────────── */

.lgs-anteprima-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: var(--lgs-s3) var(--lgs-s4);
  background: var(--lgs-fondo);
  border: 1px solid var(--lgs-bordo-forte);
  border-radius: var(--lgs-r-controllo);
  font-family: var(--lgs-font);
  font-size: var(--lgs-piccolo);
  font-weight: 700;
  color: var(--lgs-navy);
  cursor: pointer;
  margin: 0 0 var(--lgs-s3);
}
.lgs-anteprima-toggle:focus-visible { outline: 2px solid var(--lgs-teal); outline-offset: 2px; }

.lgs-chevron {
  width: 10px; height: 10px;
  border-right: 2px solid var(--lgs-testo-soft);
  border-bottom: 2px solid var(--lgs-testo-soft);
  transform: rotate(45deg);
  transition: transform var(--lgs-transizione);
}
.lgs-anteprima-toggle[aria-expanded="true"] .lgs-chevron { transform: rotate(-135deg); }

.lgs-anteprima { display: none; }
.lgs-anteprima.is-aperta { display: block; }

/*
 * IL FOGLIO DELL'ANTEPRIMA
 * Deve somigliare al PDF, non al codice del PDF. Le regole qui sotto sono le
 * stesse di template/documento-base.css (quello che usa DOMPDF), riscritte in
 * pixel e chiuse dentro il contenitore dell'anteprima: nessuna di esse esce di
 * qui, quindi non possono toccare il resto della pagina.
 */
.lgs-anteprima-foglio,
.lgs-documento-completo {
  background: var(--lgs-fondo);
  border: 1px solid var(--lgs-bordo);
  border-radius: var(--lgs-r-card);
  padding: 30px 30px;
  font-size: 15px;
  line-height: 1.6;
  color: #142433;
  overflow-wrap: break-word;
  box-shadow: 0 8px 26px rgba(7, 41, 56, 0.07);
}

.lgs-documento-completo { padding: 40px 38px; font-size: 15.5px; }

/* ── Il foglio si modifica scrivendoci dentro ───────────────────────────── */

.lgs-anteprima-barra {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lgs-s3);
  flex-wrap: wrap;
  margin: 0 0 var(--lgs-s3);
}

.lgs-anteprima-testi { flex: 1 1 260px; }

/*
 * Verde del brand nella variante scura: il teal dei pulsanti (#02B1AE) su
 * fondo bianco non arriva al contrasto minimo per un testo di questa taglia,
 * e questa e' proprio la riga che deve capirsi al primo colpo d'occhio.
 */
.lgs-anteprima-titolo {
  margin: 0 0 2px;
  font-size: var(--lgs-piccolo);
  font-weight: 700;
  color: #017E7C;
  letter-spacing: 0.01em;
}

.lgs-anteprima-suggerimento {
  display: block;
  margin: 0;
  font-size: var(--lgs-label);
  line-height: 1.5;
  color: var(--lgs-testo-soft);
}

.lgs-anteprima-barra.is-modificato .lgs-anteprima-titolo::before {
  content: "✎ ";
}

.lgs-anteprima-barra.is-modificato .lgs-anteprima-titolo { color: var(--lgs-navy); }

[contenteditable="true"].lgs-anteprima-foglio,
[contenteditable="true"].lgs-documento-completo {
  cursor: text;
  transition: border-color var(--lgs-transizione), box-shadow var(--lgs-transizione);
}

[contenteditable="true"].lgs-anteprima-foglio:hover,
[contenteditable="true"].lgs-documento-completo:hover { border-color: var(--lgs-bordo-forte); }

[contenteditable="true"].lgs-anteprima-foglio:focus,
[contenteditable="true"].lgs-documento-completo:focus {
  outline: none;
  border-color: var(--lgs-teal);
  box-shadow: 0 0 0 3px rgba(2, 177, 174, 0.16);
}

.lgs-anteprima-foglio .doc p,
.lgs-documento-completo .doc p { margin: 0 0 12px; }

.lgs-anteprima-foglio .doc-etichetta,
.lgs-documento-completo .doc-etichetta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5B6E7F;
  margin: 0 0 4px;
}

/* Testata: mittente a sinistra, destinatario a destra, come nel PDF. */
.lgs-anteprima-foglio .doc-testata,
.lgs-documento-completo .doc-testata { overflow: hidden; margin: 0 0 26px; }

.lgs-anteprima-foglio .doc-mittente,
.lgs-documento-completo .doc-mittente { float: left; width: 46%; }

.lgs-anteprima-foglio .doc-destinatario,
.lgs-documento-completo .doc-destinatario { float: right; width: 48%; }

.lgs-anteprima-foglio .doc-parte,
.lgs-documento-completo .doc-parte { margin: 0 0 8px; line-height: 1.45; }

.lgs-anteprima-foglio .doc-invio,
.lgs-documento-completo .doc-invio {
  font-size: 12px;
  margin: 8px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid #DCE4E8;
}

.lgs-anteprima-foglio .doc-luogo-data,
.lgs-documento-completo .doc-luogo-data { clear: both; text-align: right; margin: 0 0 22px; padding-top: 10px; }

.lgs-anteprima-foglio .doc-oggetto,
.lgs-documento-completo .doc-oggetto {
  margin: 0 0 22px;
  padding: 10px 13px;
  background: var(--lgs-fondo-soft);
  border-left: 3px solid var(--lgs-teal);
  line-height: 1.45;
}

.lgs-anteprima-foglio .doc-corpo,
.lgs-documento-completo .doc-corpo { text-align: justify; }

.lgs-anteprima-foglio .doc-diffida,
.lgs-documento-completo .doc-diffida {
  text-align: center;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.18em;
  margin: 18px 0;
  color: var(--lgs-navy);
}

.lgs-anteprima-foglio .doc-saluti,
.lgs-documento-completo .doc-saluti { margin-top: 18px; }

.lgs-anteprima-foglio .doc-firma,
.lgs-documento-completo .doc-firma { margin: 32px 0 0; text-align: right; }

.lgs-anteprima-foglio .doc-firma-nome,
.lgs-documento-completo .doc-firma-nome { font-weight: 700; margin: 0 0 28px; }

.lgs-anteprima-foglio .doc-firma-riga,
.lgs-documento-completo .doc-firma-riga { margin: 0; color: #98A6AF; letter-spacing: 0.05em; }

.lgs-anteprima-foglio .doc-allegati,
.lgs-documento-completo .doc-allegati {
  margin: 30px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid #DCE4E8;
  font-size: 12px;
}

/* Segnaposto dei campi ancora vuoti: presenti solo a video, mai nel PDF. */
.lgs-anteprima-foglio .doc-vuoto,
.lgs-documento-completo .doc-vuoto {
  color: #8496A2;
  background: var(--lgs-fondo-soft);
  border-radius: 3px;
  padding: 0 4px;
}

/* Evidenziazione tenue del paragrafo appena modificato: e' l'UNICA animazione
   della pagina, e non esiste se l'utente ha chiesto meno movimento. */
@keyframes lgs-evidenzia {
  from { background-color: var(--lgs-teal-chiaro); }
  to   { background-color: transparent; }
}
.lgs-modificato { animation: lgs-evidenzia 400ms ease-out; }


/* ── 6. ESITO ───────────────────────────────────────────────────────────── */

.lgs-esito { margin: var(--lgs-s12) 0 0; }

.lgs-blocco {
  border: 1px solid var(--lgs-bordo);
  border-radius: var(--lgs-r-card);
  padding: var(--lgs-s6);
  margin: 0 0 var(--lgs-s6);
}

.lgs-blocco-intro { font-size: var(--lgs-piccolo); color: var(--lgs-testo-soft); margin: -8px 0 var(--lgs-s6); }

.lgs-blocco--gratuito { background: var(--lgs-fondo-soft); }

.lgs-copia-email { margin: var(--lgs-s6) 0 0; }
.lgs-copia-campi { margin: var(--lgs-s4) 0 0; display: grid; gap: var(--lgs-s4); }

.lgs-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--lgs-s3);
  font-size: var(--lgs-piccolo);
  color: var(--lgs-testo);
  cursor: pointer;
  min-height: 44px;
  padding: var(--lgs-s2) 0;
}
.lgs-checkbox input {
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--lgs-teal);
  flex: 0 0 auto;
  cursor: pointer;
}
.lgs-checkbox input:focus-visible { outline: 2px solid var(--lgs-teal); outline-offset: 2px; }

.lgs-disclaimer {
  font-size: var(--lgs-label);
  line-height: 1.6;
  color: var(--lgs-testo-soft);
  margin: var(--lgs-s4) 0 0;
}

.lgs-esito-messaggio {
  font-size: var(--lgs-piccolo);
  margin: var(--lgs-s4) 0 0;
  padding: var(--lgs-s3) var(--lgs-s4);
  border-radius: var(--lgs-r-controllo);
  background: var(--lgs-teal-chiaro);
  color: var(--lgs-navy);
}
.lgs-esito-messaggio.is-errore { background: #FDECEA; color: var(--lgs-errore); }


/* ── SEPARATORE ─────────────────────────────────────────────────────────── */

.lgs-separatore {
  display: flex;
  align-items: center;
  gap: var(--lgs-s4);
  margin: var(--lgs-s8) 0;
}
.lgs-separatore-riga { flex: 1; height: 1px; background: var(--lgs-bordo); }
.lgs-separatore-testo {
  flex: 0 1 auto;
  margin: 0;
  font-size: var(--lgs-piccolo);
  color: var(--lgs-testo-soft);
  text-align: center;
  max-width: 520px;
}


/* ── GRIGLIA AVVOCATI ───────────────────────────────────────────────────── */

.lgs-avvocati {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lgs-s4);
}

/*
 * Mobile: foto a sinistra su due righe, tutto il resto incolonnato a destra
 * nell'ordine in cui sta nell'HTML. Niente aree nominate: due righe con lo
 * stesso nome di area si sovrapporrebbero, e le righe informative sono da
 * zero a due (foro, anno di iscrizione).
 */
.lgs-avvocato {
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: var(--lgs-s4);
  row-gap: var(--lgs-s1);
  align-content: start;
  position: relative;
  width: 100%;
  padding: var(--lgs-s4);
  background: var(--lgs-fondo);
  border: 1px solid var(--lgs-bordo);
  border-radius: var(--lgs-r-card);
  font-family: var(--lgs-font);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--lgs-transizione), opacity var(--lgs-transizione);
}

/* Tutto quello che non e' la foto sta nella seconda colonna, in ordine di sorgente. */
.lgs-avvocato > *:not(.lgs-avvocato-badge) { grid-column: 2; }

.lgs-avvocato:focus-visible { outline: 2px solid var(--lgs-teal); outline-offset: 2px; }

.lgs-avvocato-foto {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 56px; height: 56px;
  border-radius: var(--lgs-r-controllo);
  overflow: hidden;
  background: var(--lgs-teal-chiaro);
  display: flex; align-items: center; justify-content: center;
}
.lgs-avvocato-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.lgs-avvocato-iniziali {
  font-size: 19px;
  font-weight: 700;
  color: var(--lgs-navy);
  letter-spacing: 0.02em;
}

.lgs-avvocato-nome { font-size: var(--lgs-piccolo); font-weight: 700; color: var(--lgs-navy); }
.lgs-avvocato-riga { font-size: var(--lgs-label); color: var(--lgs-testo-soft); display: block; }

.lgs-avvocato-materie {
  font-size: var(--lgs-label);
  color: var(--lgs-testo-soft);
  margin-top: var(--lgs-s2);
  line-height: 1.5;
}
.lgs-avvocato-materie-etichetta {
  display: block;
  font-weight: 700;
  color: var(--lgs-navy);
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lgs-avvocato-profilo {
  font-size: var(--lgs-label);
  margin-top: var(--lgs-s2);
  justify-self: start;
}

.lgs-avvocato-badge {
  position: absolute;
  top: var(--lgs-s3);
  right: var(--lgs-s3);
  display: inline-flex;
  align-items: center;
  gap: var(--lgs-s1);
  background: var(--lgs-teal-chiaro);
  color: var(--lgs-navy);
  font-size: 12px;
  font-weight: 700;
  padding: var(--lgs-s1) var(--lgs-s2);
  border-radius: 999px;
}
.lgs-avvocato-badge::before {
  content: "";
  width: 12px; height: 7px;
  border-left: 2px solid var(--lgs-teal);
  border-bottom: 2px solid var(--lgs-teal);
  transform: rotate(-45deg) translate(1px, -2px);
}

/* Stato selezionato: bordo 2px teal, il resto della card invariato. */
.lgs-avvocato[aria-checked="true"] {
  border: 2px solid var(--lgs-teal);
  padding: calc(var(--lgs-s4) - 1px);
}

/* Le card non scelte si attenuano: una sola cosa richiede attenzione. */
.lgs-avvocati.ha-scelta .lgs-avvocato:not([aria-checked="true"]) { opacity: 0.75; }

/*
 * "Scegli tu per me": non e' una persona, quindi non ha la forma di una
 * scheda. E' un pulsante nel verde Legaless, largo quanto la griglia, sotto
 * agli avvocati. Selezionato, si riempie.
 */
.lgs-avvocati .lgs-avvocato--delega {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: var(--lgs-s3) var(--lgs-s6);
  background: var(--lgs-fondo);
  border: 2px solid var(--lgs-teal);
  border-radius: var(--lgs-r-controllo);
  text-align: center;
  font-family: var(--lgs-font);
  cursor: pointer;
}

.lgs-avvocati .lgs-avvocato--delega .lgs-avvocato-nome {
  color: #017E7C;
  font-size: var(--lgs-corpo);
  font-weight: 700;
}

.lgs-avvocati .lgs-avvocato--delega .lgs-avvocato-riga { color: var(--lgs-testo-soft); }

.lgs-avvocati .lgs-avvocato--delega:hover { background: var(--lgs-teal-chiaro); }

.lgs-avvocati .lgs-avvocato--delega[aria-checked="true"] {
  background: var(--lgs-teal);
  border-color: var(--lgs-teal);
  padding: var(--lgs-s3) var(--lgs-s6);
}

.lgs-avvocati .lgs-avvocato--delega[aria-checked="true"] .lgs-avvocato-nome,
.lgs-avvocati .lgs-avvocato--delega[aria-checked="true"] .lgs-avvocato-riga { color: #FFFFFF; }

.lgs-avvocati .lgs-avvocato--delega .lgs-avvocato-badge { display: none; }

.lgs-annuncio { font-size: var(--lgs-label); color: var(--lgs-testo-soft); margin: var(--lgs-s4) 0 0; min-height: 1em; }


/* ── CONFERIMENTO ───────────────────────────────────────────────────────── */

.lgs-conferimento-passo { margin: 0 0 var(--lgs-s8); }
.lgs-conferimento-passo:last-child { margin-bottom: 0; }

.lgs-intestatario {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lgs-s2);
  font-size: var(--lgs-label);
  color: var(--lgs-testo-soft);
  margin: var(--lgs-s3) 0 0;
}

.lgs-intestatario-campi { margin: var(--lgs-s4) 0 0; }

.lgs-checkbox--termini { font-size: var(--lgs-corpo); }


/* ── 7. CONTENUTO EDITORIALE ────────────────────────────────────────────── */

/*
 * Il testo sotto allo strumento occupa la stessa larghezza del riquadro in
 * cui si inseriscono importo e data, ed e' giustificato: sopra e sotto la
 * stessa linea verticale, senza il gradino che c'era prima fra scheda e
 * paragrafi.
 */
.lgs-contenuto { max-width: 100%; margin: var(--lgs-s12) 0 0; }

.lgs-contenuto p,
.lgs-contenuto .lgs-elenco li,
.lgs-faq-risposta p {
  text-align: justify;
  hyphens: auto;
}

.lgs-risposta-secca {
  font-size: 18px;
  line-height: 1.6;
  color: var(--lgs-navy);
  border-left: 3px solid var(--lgs-teal);
  padding: 0 0 0 var(--lgs-s4);
  margin: 0 0 var(--lgs-s12);
}

.lgs-sezione { margin: 0 0 var(--lgs-s12); }

.lgs-elenco { margin: 0 0 var(--lgs-s4); padding-left: var(--lgs-s6); }
.lgs-elenco li { margin: 0 0 var(--lgs-s2); }

.lgs-passi { list-style: none; counter-reset: lgs-passo; margin: 0; padding: 0; }
.lgs-passo {
  counter-increment: lgs-passo;
  position: relative;
  padding: 0 0 var(--lgs-s6) var(--lgs-s8);
  border-left: 1px solid var(--lgs-bordo);
  margin-left: var(--lgs-s3);
}
.lgs-passo:last-child { border-left-color: transparent; padding-bottom: 0; }
.lgs-passo::before {
  content: counter(lgs-passo);
  position: absolute;
  left: -13px; top: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lgs-fondo);
  border: 1px solid var(--lgs-bordo-forte);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: var(--lgs-navy);
}

.lgs-faq-voce { border-bottom: 1px solid var(--lgs-bordo); padding: var(--lgs-s4) 0; }
.lgs-faq-domanda {
  font-size: var(--lgs-corpo);
  font-weight: 700;
  color: var(--lgs-navy);
  cursor: pointer;
  list-style: none;
  padding-right: var(--lgs-s6);
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.lgs-faq-domanda::-webkit-details-marker { display: none; }
.lgs-faq-domanda::after {
  content: "";
  position: absolute;
  right: var(--lgs-s1); top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--lgs-testo-soft);
  border-bottom: 2px solid var(--lgs-testo-soft);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--lgs-transizione);
}
.lgs-faq-voce[open] .lgs-faq-domanda::after { transform: translateY(-30%) rotate(-135deg); }
.lgs-faq-risposta { padding: var(--lgs-s3) 0 0; color: var(--lgs-testo); }
.lgs-faq-risposta p:last-child { margin-bottom: 0; }


/* ── 8. CHIUSURA ────────────────────────────────────────────────────────── */

.lgs-chiusura { margin: var(--lgs-s12) 0 var(--lgs-s16); }

.lgs-chiusura-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lgs-s4);
}

/*
 * Le due proposte finali erano due riquadri grigi indistinguibili dal resto.
 * Adesso sono due schede vere: colore proprio, fondo bianco pieno, un invito
 * esplicito a proseguire. Restano link, quindi l'effetto al passaggio del
 * mouse qui ha senso: dice che si puo' cliccare.
 */
.lgs-chiusura-card {
  display: block;
  position: relative;
  padding: var(--lgs-s6);
  padding-top: calc(var(--lgs-s6) + 4px);
  background: var(--lgs-fondo);
  border: 1px solid var(--lgs-bordo);
  border-top: 4px solid var(--lgs-accento, var(--lgs-teal));
  border-radius: var(--lgs-r-card);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(7, 41, 56, 0.06);
  transition: transform var(--lgs-transizione), box-shadow var(--lgs-transizione), border-color var(--lgs-transizione);
}

.lgs-chiusura-card--1 { --lgs-accento: var(--lgs-teal); }
.lgs-chiusura-card--2 { --lgs-accento: var(--lgs-blue); }

.lgs-chiusura-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(7, 41, 56, 0.12);
}

.lgs-chiusura-titolo {
  display: block;
  font-weight: 700;
  font-size: var(--lgs-h3);
  color: var(--lgs-navy);
  margin-bottom: var(--lgs-s2);
}

.lgs-chiusura-testo { display: block; font-size: var(--lgs-piccolo); color: var(--lgs-testo-soft); }

.lgs-chiusura-vai {
  display: inline-flex;
  align-items: center;
  gap: var(--lgs-s2);
  margin-top: var(--lgs-s4);
  font-size: var(--lgs-piccolo);
  font-weight: 700;
  color: var(--lgs-accento, var(--lgs-teal));
}

.lgs-chiusura-freccia { transition: transform var(--lgs-transizione); }
.lgs-chiusura-card:hover .lgs-chiusura-freccia { transform: translateX(4px); }


/* ========================================================================
   DESKTOP — da 1024 px
   ======================================================================== */

@media (min-width: 1024px) {

  .lgs { --lgs-header-offset: 120px; }

  .lgs-testata { padding: var(--lgs-s16) 0 var(--lgs-s8); }

  /*
   * Il documento e' il protagonista: prende piu' spazio del modulo.
   * Il modulo si stringe e si compatta (vedi .lgs-colonna-form qui sotto):
   * i campi restano tutti raggiungibili senza scorrere, e il foglio a destra
   * diventa leggibile davvero invece di essere un francobollo.
   */
  /*
   * DUE COLONNE CHE SCORRONO INSIEME.
   * Niente sticky, niente scorrimento interno al foglio: la rotella muove la
   * pagina e si muovono entrambe le colonne, come qualunque altra pagina.
   * Un elemento che resta fermo mentre il resto scorre e' esattamente quello
   * che rendeva la schermata confusa.
   */
  .lgs-colonne {
    display: grid;
    grid-template-columns: 41fr 59fr;
    gap: var(--lgs-s8);
    align-items: start;
  }

  /* Su desktop l'anteprima e' una colonna, non un pannello da aprire. */
  .lgs-anteprima-toggle,
  .lgs-anteprima-chiudi { display: none; }
  .lgs-anteprima { display: block; }

  /* Colonna dei dati: ritmo verticale piu' stretto, controlli piu' bassi. */
  .lgs-colonna-form .lgs-griglia-campi { gap: var(--lgs-s3); }
  .lgs-colonna-form .lgs-input { min-height: 42px; padding: var(--lgs-s2) var(--lgs-s3); }
  .lgs-colonna-form .lgs-label { margin-bottom: var(--lgs-s1); }
  .lgs-colonna-form .lgs-aiuto { margin-top: var(--lgs-s1); }
  .lgs-colonna-form .lgs-step-intro { margin-bottom: var(--lgs-s4); }
  .lgs-colonna-form .lgs-navigazione { margin-top: var(--lgs-s6); }
  .lgs-colonna-form .lgs-riquadro-calcoli { margin-top: var(--lgs-s4); padding: var(--lgs-s3) var(--lgs-s4); }

  /*
   * Il foglio si mostra per intero e scorre con la pagina: nessuna barra di
   * scorrimento dentro il documento. Il minimo evita il riquadro mezzo vuoto
   * al primo passo, quando i dati inseriti sono ancora due.
   */
  .lgs-anteprima-foglio { min-height: 460px; }

  .lgs-avvocati { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Su desktop la card diventa verticale: una sola colonna, foto in cima. */
  .lgs-avvocato {
    grid-template-columns: 1fr;
    row-gap: var(--lgs-s2);
    padding: var(--lgs-s4);
  }
  .lgs-avvocato > *:not(.lgs-avvocato-badge) { grid-column: 1; }
  .lgs-avvocato-foto {
    grid-column: 1;
    grid-row: auto;
    width: 112px; height: 112px;
    margin-bottom: var(--lgs-s2);
  }
  .lgs-avvocato-iniziali { font-size: 32px; }

  .lgs-chiusura-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lgs-btn--grande { width: auto; min-width: 320px; }
}

/* Fra 640 e 1023: due colonne per gli avvocati, resto a colonna singola. */
@media (min-width: 640px) and (max-width: 1023px) {
  .lgs-avvocati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ========================================================================
   HOVER — solo su dispositivi con puntatore.
   Su touch l'hover non esiste: le materie trattate sono sempre visibili.
   ======================================================================== */

@media (hover: hover) and (pointer: fine) {

  .lgs-avvocato:hover { border-color: var(--lgs-navy); }
  .lgs-avvocato[aria-checked="true"]:hover { border-color: var(--lgs-teal); }

  /* Su desktop le materie compaiono all'hover, con transizione sull'altezza. */
  @media (min-width: 1024px) {
    .lgs-avvocato-materie {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      margin-top: 0;
      transition: max-height var(--lgs-transizione), opacity var(--lgs-transizione), margin-top var(--lgs-transizione);
    }
    .lgs-avvocato:hover .lgs-avvocato-materie,
    .lgs-avvocato:focus-within .lgs-avvocato-materie,
    .lgs-avvocato[aria-checked="true"] .lgs-avvocato-materie {
      max-height: 120px;
      opacity: 1;
      margin-top: var(--lgs-s2);
    }
  }
}


/* ========================================================================
   MOBILE — bottone di avanzamento appiccicato in fondo dallo step 2.
   Mai position:fixed che copra il contenuto: si usa sticky dentro il flusso,
   con l'area sicura per i dispositivi con notch.
   ======================================================================== */

@media (max-width: 1023px) {

  .lgs { --lgs-h1: 27px; --lgs-h1-lh: 31px; --lgs-h2: 21px; }

  .lgs-campo--meta,
  .lgs-campo--terzo,
  .lgs-campo--quarto { grid-column: span 12; }
  .lgs-campo--breve  { grid-column: span 6; }

  .lgs-aggancio-campi { flex-direction: column; align-items: stretch; }
  .lgs-aggancio .lgs-campo--azione .lgs-btn { width: 100%; }

  .lgs-navigazione {
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #FFFFFF 40%);
    padding: var(--lgs-s4) 0 calc(var(--lgs-s4) + env(safe-area-inset-bottom, 0px));
    margin-top: var(--lgs-s8);
    z-index: 2;
  }
  .lgs-navigazione .lgs-btn { flex: 1; }

  .lgs-colonna-anteprima { margin: 0; order: -1; }
  .lgs-colonne { display: flex; flex-direction: column; }
  .lgs-colonna-form { order: 1; }

  /* ══════════════════════════════════════════════════════════════════════
     ANTEPRIMA SU TELEFONO — pulsante fisso in basso e popup a tutto schermo
     Scorrendo la pagina il documento non si vede: il pulsante resta sempre
     raggiungibile, e quello che apre si sovrappone alla pagina invece di
     spingerla piu' in basso.
     ══════════════════════════════════════════════════════════════════════ */

  .lgs-anteprima-toggle {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* Sopra ai pulsanti Indietro/Continua, che su telefono sono appiccicati
       in fondo: due controlli sovrapposti sarebbero inutilizzabili entrambi. */
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    width: auto;
    max-width: calc(100% - 32px);
    min-height: 46px;
    margin: 0;
    padding: var(--lgs-s3) var(--lgs-s6);
    gap: var(--lgs-s3);
    background: rgba(7, 41, 56, 0.86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(7, 41, 56, 0.30);
  }

  .lgs-anteprima-toggle .lgs-chevron {
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    transform: rotate(-135deg);   /* la freccia guarda in su: apre */
  }

  /* Mentre il popup e' aperto il pulsante non serve piu': c'e' la X. */
  .lgs-anteprima-toggle[aria-expanded="true"] { display: none; }

  .lgs-anteprima.is-aperta {
    position: fixed;
    inset: 0;
    z-index: 70;
    margin: 0;
    padding: 60px var(--lgs-s4) calc(var(--lgs-s8) + env(safe-area-inset-bottom, 0px));
    background: #FFFFFF;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Dentro al popup il foglio non ha bisogno di cornice: la cornice e' lo schermo. */
  .lgs-anteprima.is-aperta .lgs-anteprima-foglio {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  /*
   * La X sta fissa rispetto allo schermo, non al documento: si puo' chiudere
   * anche dopo aver scorso la lettera fino in fondo.
   */
  .lgs-anteprima-chiudi {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    font-family: var(--lgs-font);
    font-size: 26px;
    line-height: 1;
    color: var(--lgs-navy);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--lgs-bordo);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(7, 41, 56, 0.20);
    cursor: pointer;
  }

  .lgs-anteprima.is-aperta .lgs-anteprima-chiudi { display: flex; }
  .lgs-anteprima-chiudi:focus-visible { outline: 2px solid var(--lgs-teal); outline-offset: 2px; }

  /*
   * Il documento su telefono: mittente e destinatario uno sotto l'altro.
   * Due colonne al 46% su uno schermo da 360 px darebbero righe di tre parole
   * e indirizzi spezzati a meta'.
   */
  .lgs-anteprima-foglio,
  .lgs-documento-completo { padding: 22px 18px; font-size: 14.5px; }

  .lgs-anteprima-foglio .doc-mittente,
  .lgs-anteprima-foglio .doc-destinatario,
  .lgs-documento-completo .doc-mittente,
  .lgs-documento-completo .doc-destinatario {
    float: none;
    width: 100%;
    margin-bottom: var(--lgs-s4);
  }

  .lgs-anteprima-foglio .doc-luogo-data,
  .lgs-documento-completo .doc-luogo-data { text-align: left; }

  .lgs-anteprima-foglio .doc-corpo,
  .lgs-documento-completo .doc-corpo { text-align: left; }   /* niente giustificato: su schermo stretto fa buchi */

  .lgs-anteprima-foglio .doc-firma,
  .lgs-documento-completo .doc-firma { text-align: left; }

  /* Su touch la selezione del testo deve restare possibile ovunque. */
  [contenteditable="true"].lgs-anteprima-foglio,
  [contenteditable="true"].lgs-documento-completo {
    -webkit-user-select: text;
    user-select: text;
  }

  /* Testo lungo giustificato su schermo stretto: si torna a bandiera. */
  .lgs-contenuto p,
  .lgs-contenuto .lgs-elenco li,
  .lgs-faq-risposta p { text-align: left; }
}


/* ========================================================================
   MOVIMENTO RIDOTTO
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .lgs *,
  .lgs *::before,
  .lgs *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .lgs-modificato { animation: none; }
}


/* ========================================================================
   SFONDO DELLA PAGINA
   La classe sul <body> la mette il plugin solo dove c'e' uno strumento:
   nessuna di queste regole raggiunge un'altra pagina del sito.
   ======================================================================== */

body.lgs-sfondo-rete {
  background-image: var(--lgs-sfondo);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

body.lgs-sfondo-rete #main,
body.lgs-sfondo-rete #wrapper,
body.lgs-sfondo-rete .fusion-page-content-wrap,
body.lgs-sfondo-rete .post-content,
body.lgs-sfondo-rete .fusion-fullwidth { background-color: transparent; }

/* Il testo lungo ha bisogno di un fondo pieno sotto: sull'immagine si legge male. */
body.lgs-sfondo-rete .lgs-contenuto,
body.lgs-sfondo-rete .lgs-chiusura {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--lgs-r-card);
  padding: var(--lgs-s8) var(--lgs-s6);
}

@media (max-width: 900px) {
  body.lgs-sfondo-rete { background-attachment: scroll; }
}


/* ========================================================================
   STAMPA — la pagina si riduce al solo documento
   ======================================================================== */

@media print {
  .lgs-aggancio, .lgs-avanzamento, .lgs-colonna-form,
  .lgs-blocco, .lgs-separatore, .lgs-contenuto, .lgs-chiusura,
  .lgs-navigazione, .lgs-anteprima-toggle,
  .lgs-anteprima-barra { display: none !important; }   /* le istruzioni non si stampano */
  .lgs-anteprima { display: block !important; position: static !important; }
  .lgs-anteprima-foglio, .lgs-documento-completo { border: 0; padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   REQUISITI DELLA PASSWORD (02/10/2026)
   Lo stesso elenco di /registrazione/ (legaless-compat, sezione 9) e del
   passo «Registrati» dei form (tema, assets/legaless-accesso/): stesse
   classi, stesso aspetto. Visibile solo a chi crea l'account.
   ═══════════════════════════════════════════════════════════════════════ */
.lgs .lgl-pwd { margin: 10px 0 2px; padding: 12px 14px; border: 1px solid #e2e8ee; border-radius: 10px; background: #f6f8fa; font-size: 13px; line-height: 1.4; text-align: left; transition: border-color .2s ease, background-color .2s ease; }
.lgs .lgl-pwd[hidden] { display: none !important; }
.lgs .lgl-pwd .lgl-pwd__titolo { margin: 0 0 7px !important; padding: 0 !important; font-size: 13px !important; font-weight: 600; line-height: 1.3 !important; color: #072938; }
.lgs .lgl-pwd .lgl-pwd__lista { display: grid; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.lgs .lgl-pwd .lgl-pwd__req { display: flex; align-items: center; gap: 9px; margin: 0 !important; padding: 0 !important; color: #55626e; transition: color .2s ease; }
.lgs .lgl-pwd .lgl-pwd__req::before, .lgs .lgl-pwd .lgl-pwd__req::marker { content: none !important; }
.lgs .lgl-pwd .lgl-pwd__req[hidden] { display: none !important; }
.lgs .lgl-pwd .lgl-pwd__icona { display: inline-flex; flex: 0 0 18px; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #b4c0cb; transition: background-color .2s ease, box-shadow .2s ease; }
.lgs .lgl-pwd .lgl-pwd__icona svg { display: block; width: 11px; height: 11px; opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .2s ease; }
.lgs .lgl-pwd .lgl-pwd__req--ok { color: #15803d; }
.lgs .lgl-pwd .lgl-pwd__req--ok .lgl-pwd__icona { background: #16a34a; box-shadow: none; }
.lgs .lgl-pwd .lgl-pwd__req--ok .lgl-pwd__icona svg { opacity: 1; transform: scale(1); }
.lgs .lgl-pwd.lgl-pwd--ok { border-color: #b7e2c4; background: #f0faf3; }
.lgs .lgl-pwd.lgl-pwd--errore { border-color: #f3c3be; background: #fff7f6; }
.lgs .lgl-pwd.lgl-pwd--errore .lgl-pwd__req:not(.lgl-pwd__req--ok) { color: #b42318; }
.lgs .lgl-pwd.lgl-pwd--errore .lgl-pwd__req:not(.lgl-pwd__req--ok) .lgl-pwd__icona { box-shadow: inset 0 0 0 1.5px #d92d20; }
.lgs .lgl-pwd .lgl-pwd__sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@media (prefers-reduced-motion: reduce) { .lgs .lgl-pwd, .lgs .lgl-pwd * { transition: none !important; } }