/* Grafica MoM del gestionale (docs/piano-gestionale.md §7): colori misurati sul logo. */
:root {
  --mom-verde: #11A09A;
  --mom-verde-scuro: #0C7A75;
  --mom-verde-tenue: #F2F9F8;
  --mom-nero: #1D1D1B;
  --testo: #1D1D1B;
  --testo-2: #595959;
  --testo-3: #888888;
  --bordo: #E2E6E5;
  --sfondo: #F7F8F8;
  --bianco: #FFFFFF;
  --avviso: #A86A10;
  --avviso-tenue: #FDF4E3;
  --raggio: 8px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Calibri, "Segoe UI", system-ui, sans-serif; color: var(--testo); background: var(--sfondo); font-size: 15px; }
a { color: var(--mom-verde-scuro); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; font-weight: 600; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; }
.nota { color: var(--testo-3); font-size: 13px; }

/* Testata */
.testata { background: var(--bianco); border-bottom: 3px solid var(--mom-verde); display: flex; align-items: center; gap: 18px; padding: 8px 18px; }
.testata img { height: 34px; display: block; }
.testata .percorso { color: var(--testo-2); font-size: 14px; }
.testata .percorso a { color: var(--testo-2); }
.testata .utente { margin-left: auto; display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--testo-2); }
.testata button { background: none; border: 0; color: var(--mom-verde-scuro); cursor: pointer; font: inherit; padding: 0; }

/* Barra del perimetro */
.perimetro { background: var(--mom-verde-tenue); border-bottom: 1px solid var(--bordo); padding: 8px 18px; }
.perimetro form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.perimetro .livello { position: relative; }
.perimetro .livello > span { display: block; font-size: 12px; color: var(--testo-2); margin-bottom: 2px; }
.perimetro details > summary { list-style: none; cursor: pointer; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 4px 10px; font-size: 14px; min-width: 120px; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.perimetro details > summary::-webkit-details-marker { display: none; }
.perimetro details[open] > summary { border-color: var(--mom-verde); }
.perimetro .scelte { position: absolute; z-index: 10; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 8px; margin-top: 4px; max-height: 280px; overflow: auto; min-width: 240px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.perimetro .scelte label { display: flex; gap: 6px; align-items: center; padding: 3px 2px; font-size: 14px; white-space: nowrap; }
.perimetro .comandi { display: flex; gap: 8px; margin-left: auto; }
.chip { display: inline-block; background: var(--mom-verde); color: var(--bianco); border-radius: 12px; padding: 1px 9px; font-size: 13px; margin: 0 4px 2px 0; }

/* Bottoni */
.bottone, button.bottone { display: inline-block; background: var(--mom-verde); color: var(--bianco); border: 0; border-radius: var(--raggio); padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.bottone:hover { background: var(--mom-verde-scuro); text-decoration: none; }
.bottone.secondario { background: var(--bianco); color: var(--mom-verde-scuro); border: 1px solid var(--mom-verde); }

/* Impaginazione a due colonne */
.mondo { display: grid; grid-template-columns: 320px minmax(0, 1fr); min-height: calc(100vh - 110px); }
.albero { background: var(--bianco); border-right: 1px solid var(--bordo); padding: 10px 8px 30px; overflow: auto; font-size: 14px; }
.albero .cerca { width: 100%; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: 8px; font: inherit; font-size: 14px; }
.albero ul { list-style: none; margin: 0; padding-left: 14px; }
.albero > ul { padding-left: 0; }
.albero li { margin: 1px 0; }
.albero summary { cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.albero summary::marker { color: var(--testo-3); }
.albero .foglia { display: block; padding: 2px 4px 2px 18px; border-radius: 4px; }
.albero a { color: var(--testo); }
.albero .attivo > a, .albero a.attivo { background: var(--mom-verde-tenue); color: var(--mom-verde-scuro); font-weight: 600; border-radius: 4px; padding: 0 4px; }
.albero .conta { color: var(--testo-3); font-size: 12px; margin-left: 4px; }
.albero .ramo { font-weight: 600; color: var(--mom-nero); }
.albero .voce { display: block; padding: 3px 4px; font-weight: 600; color: var(--mom-nero); }
.albero .voce.attivo { background: var(--mom-verde-tenue); color: var(--mom-verde-scuro); border-radius: 4px; }
.albero .voce .fase { font-weight: 400; color: var(--testo-3); font-size: 12px; }
.albero hr { border: 0; border-top: 1px solid var(--bordo); margin: 8px 0; }
.contenuto { padding: 18px 24px 40px; min-width: 0; }

/* Riquadri e tabelle */
.riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0; }
.riquadro { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 14px; }
.riquadro span { display: block; color: var(--testo-2); font-size: 13px; }
.riquadro b { display: block; font-size: 24px; font-weight: 600; margin-top: 2px; }
.riquadro.avviso b { color: var(--avviso); }
.scheda { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 16px; margin-bottom: 14px; }
.dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 18px; }
.dati div span { display: block; font-size: 12px; color: var(--testo-3); }
table { width: 100%; border-collapse: collapse; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--bordo); font-size: 14px; }
th { background: var(--mom-verde-tenue); color: var(--testo-2); font-weight: 600; }
.etichetta { display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 12px; background: var(--mom-verde-tenue); color: var(--mom-verde-scuro); }
.etichetta.avviso { background: var(--avviso-tenue); color: var(--avviso); }
.vuoto { color: var(--testo-3); font-style: italic; }
.messaggio { padding: 8px 12px; border-radius: var(--raggio); background: var(--mom-verde-tenue); margin-bottom: 12px; }
.messaggio.error, .errore { background: #FBE9E9; color: #8A2323; }

/* Accesso e clienti */
.centro { max-width: 380px; margin: 9vh auto; background: var(--bianco); border: 1px solid var(--bordo); border-top: 4px solid var(--mom-verde); border-radius: var(--raggio); padding: 28px; }
.centro img { width: 220px; display: block; margin: 0 auto 22px; }
.centro label { display: block; font-size: 13px; color: var(--testo-2); margin: 10px 0 3px; }
.centro input { width: 100%; padding: 8px 10px; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; }
.centro button { width: 100%; margin-top: 18px; }
.pagina { max-width: 1100px; margin: 0 auto; padding: 22px 24px 40px; }
.clienti { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 16px; }
.cliente { display: block; background: var(--bianco); border: 1px solid var(--bordo); border-left: 4px solid var(--mom-verde); border-radius: var(--raggio); padding: 14px 16px; color: var(--testo); }
.cliente:hover { border-color: var(--mom-verde); text-decoration: none; }
.cliente h3 { margin: 0 0 6px; font-size: 18px; }
.cliente .numeri { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--testo-2); }
.cliente .numeri b { color: var(--testo); }
form.modulo p { margin: 0 0 12px; }
form.modulo label { display: block; font-size: 13px; color: var(--testo-2); margin-bottom: 3px; }
form.modulo input[type=text] { width: 100%; max-width: 420px; padding: 7px 10px; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; }
form.modulo .helptext { display: block; font-size: 12px; color: var(--testo-3); }
form.modulo ul.errorlist { color: #8A2323; margin: 2px 0; padding-left: 18px; font-size: 13px; }

@media (max-width: 800px) {
  .mondo { grid-template-columns: 1fr; }
  .albero { border-right: 0; border-bottom: 1px solid var(--bordo); max-height: 45vh; }
  .testata .percorso { display: none; }
}

/* Scheda asset (fase G2) */
.testata-asset { display: grid; grid-template-columns: 140px minmax(0, 1fr) 200px; gap: 16px; align-items: start; margin-bottom: 12px; }
.testata-asset .foto { width: 140px; height: 140px; border-radius: var(--raggio); background: var(--bianco); border: 1px solid var(--bordo); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--testo-3); font-size: 13px; }
.testata-asset .foto img { width: 100%; height: 100%; object-fit: cover; }
.testata-asset .intestazione p { margin: 4px 0; }
.completezza { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 10px 12px; }
.completezza span { display: block; font-size: 12px; color: var(--testo-2); }
.completezza b { font-size: 24px; color: var(--mom-verde-scuro); }
.completezza b.incompleta { color: var(--avviso); }
.completezza .barra { height: 6px; background: var(--mom-verde-tenue); border-radius: 3px; overflow: hidden; margin: 4px 0; }
.completezza .barra div { height: 100%; background: var(--mom-verde); }
.completezza small { color: var(--testo-3); font-size: 12px; }
.linguette { display: flex; gap: 2px; border-bottom: 1px solid var(--bordo); margin: 8px 0 16px; flex-wrap: wrap; }
.linguette a { padding: 8px 14px; color: var(--testo-2); border-bottom: 3px solid transparent; }
.linguette a.attiva { color: var(--mom-nero); border-bottom-color: var(--mom-verde); font-weight: 600; }
.linguette a:hover { text-decoration: none; color: var(--mom-nero); }
.linguette .conta { color: var(--testo-3); font-size: 12px; }
form.modulo .campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }
form.modulo input[type=number], form.modulo input[type=date], form.modulo input[type=url], form.modulo select, form.modulo textarea { width: 100%; max-width: 420px; padding: 7px 10px; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; background: var(--bianco); }
button.link { background: none; border: 0; color: var(--mom-verde-scuro); cursor: pointer; font: inherit; padding: 0; }
tr.rimosso td { color: var(--testo-3); text-decoration: line-through; }
tr.rimosso td .etichetta { text-decoration: none; }
@media (max-width: 800px) { .testata-asset { grid-template-columns: 100px minmax(0, 1fr); } .testata-asset .foto { width: 100px; height: 100px; } .completezza { grid-column: 1 / -1; } }
@media (max-width: 1100px) {
  .mondo { grid-template-columns: 260px minmax(0, 1fr); }
  .testata-asset { grid-template-columns: 110px minmax(0, 1fr); }
  .testata-asset .foto { width: 110px; height: 110px; }
  .testata-asset .completezza { grid-column: 1 / -1; }
  .contenuto { padding: 14px 16px 30px; }
  table { display: block; overflow-x: auto; }
}

/* Tabella degli installati (fase G3) */
.barra-tabella { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.barra-tabella .azioni-destra { margin-left: auto; display: flex; gap: 8px; }
.barra-gruppi, .barra-massa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; margin-bottom: 8px; }
.barra-massa select { padding: 5px 8px; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; }
.contenitore-tabella { overflow-x: auto; border: 1px solid var(--bordo); border-radius: var(--raggio); }
table.installati { border: 0; border-radius: 0; }
table.installati th a { color: var(--testo-2); }
table.installati tr.filtri th { background: var(--bianco); padding: 4px 6px; }
table.installati tr.filtri input, table.installati tr.filtri select { width: 100%; min-width: 60px; padding: 3px 6px; border: 1px solid var(--bordo); border-radius: 4px; font: inherit; font-size: 13px; }
table.installati td { font-size: 13px; }
td.modificabile { cursor: text; }
td.modificabile:hover { background: var(--mom-verde-tenue); }
td.modificabile input { width: 100%; min-width: 120px; padding: 2px 4px; border: 1px solid var(--mom-verde); border-radius: 4px; font: inherit; }
td.salvata { background: var(--mom-verde-tenue); }
.matita { color: var(--mom-verde); font-weight: 400; }
.nowrap { white-space: nowrap; }
.numero { text-align: right; }
.paginazione { display: flex; gap: 14px; align-items: center; }

/* Esecutori e calendario (fase G4): interni verde MoM, esterni grigio scuro, da assegnare ambra */
form.in-linea { display: inline; }
.capienza { height: 8px; background: var(--mom-verde-tenue); border-radius: 4px; overflow: hidden; }
.capienza div { height: 100%; background: var(--mom-verde); }
.capienza div.alta { background: var(--avviso); }
.legenda { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.voce-cal { display: block; font-size: 11px; border-radius: 4px; padding: 1px 5px; margin: 2px 0; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legenda .voce-cal { display: inline-block; font-size: 12px; }
.voce-cal:hover { text-decoration: none; opacity: .85; }
.interno { background: var(--mom-verde); }
.esterno { background: #4A4A48; }
.da_assegnare { background: var(--avviso); }
.voce-cal.piano, .barretta.piano { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 3px, transparent 3px 6px); }
table.calendario { table-layout: fixed; }
table.calendario td { vertical-align: top; height: 92px; padding: 3px; }
table.calendario td.fuori { background: var(--sfondo); color: var(--testo-3); }
table.calendario .giorno { font-size: 12px; color: var(--testo-2); }
.pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
table.gantt { border: 0; }
table.gantt th, table.gantt td { padding: 0; border-bottom: 1px solid var(--bordo); }
table.gantt th.g, table.gantt td.g { width: 14px; min-width: 14px; border-left: 1px solid #F0F2F2; }
table.gantt th.lun, table.gantt td.lun { border-left: 1px solid var(--bordo); }
table.gantt th.g { font-size: 10px; font-weight: 400; white-space: nowrap; overflow: visible; }
table.gantt .nome { min-width: 260px; max-width: 320px; padding: 3px 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: var(--bianco); }
table.gantt tr.gruppo td { background: var(--mom-verde-tenue); font-weight: 600; font-size: 13px; padding: 4px 8px; }
.barretta { display: block; height: 14px; margin: 2px 1px; border-radius: 3px; }
a.scelto { font-weight: 600; color: var(--mom-nero); }

/* Economia (fase G5) */
.riquadri.due { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cifra { font-size: 26px; font-weight: 600; margin: 4px 0; }
.cifra small { font-size: 14px; font-weight: 400; color: var(--testo-2); }
.avanzamento { position: relative; height: 12px; background: var(--mom-verde-tenue); border-radius: 6px; margin: 6px 0; }
.avanzamento > div { height: 100%; background: var(--mom-verde); border-radius: 6px; }
.avanzamento > div.alto { background: var(--avviso); }
.avanzamento .atteso { position: absolute; top: -3px; width: 2px; height: 18px; background: var(--mom-nero); }
.grafico-mesi, .grafico-anni { display: flex; gap: 6px; align-items: flex-end; height: 190px; background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 10px 10px 0; }
.grafico-mesi .mese, .grafico-anni .anno { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.grafico-mesi .colonne, .grafico-anni .colonne { flex: 1; width: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.grafico-mesi .previsto, .grafico-anni .previsto { position: absolute; bottom: 0; left: 15%; right: 15%; border: 1.5px solid var(--mom-verde); border-bottom: 0; border-radius: 3px 3px 0 0; }
.grafico-mesi .reale, .grafico-anni .reale { position: absolute; bottom: 0; left: 28%; right: 28%; height: 100%; display: flex; flex-direction: column-reverse; }
.grafico-mesi .ord, .grafico-anni .ord { background: var(--mom-verde); }
.grafico-mesi .corr, .grafico-anni .corr { background: var(--avviso); }
.grafico-mesi .mese span, .grafico-anni .anno span { font-size: 11px; color: var(--testo-2); padding: 4px 0; }
.grafico-mesi .futuro .previsto { border-style: dashed; }
input.importo { width: 120px; padding: 5px 8px; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; text-align: right; }

/* Panoramica (fase G6) */
a.collegamento { color: var(--testo); display: block; }
a.collegamento:hover { border-color: var(--mom-verde); text-decoration: none; }
.riquadro small { display: block; margin-top: 2px; }

/* Commenti dell'utente, fase H1: impaginazione più curata */
.albero .torna { display: block; font-size: 13px; color: var(--testo-2); padding: 2px 4px 6px; }
.albero .nome-cliente { font-weight: 600; font-size: 15px; padding: 0 4px 8px; }
.albero .nome-cliente a { color: var(--mom-nero); }
.albero .ramo a { color: var(--mom-nero); }
.intestazione-pagina { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.intestazione-pagina > div:first-child { flex: 1 1 280px; }
.intestazione-pagina h1 { margin: 0 0 2px; }
.intestazione-pagina .azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.intestazione-sezione { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 22px 0 8px; }
.intestazione-sezione h2 { margin: 0; }
.codice { display: inline-block; background: var(--mom-nero); color: #fff; border-radius: 5px; padding: 0 7px;
  font-size: .78em; font-weight: 600; letter-spacing: .03em; vertical-align: middle; }
.oggi { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 8px 14px; min-width: 200px; }
.oggi span { display: block; font-size: 12px; color: var(--testo-2); }
.oggi b { font-size: 17px; }
.oggi .anno { height: 5px; background: var(--mom-verde-tenue); border-radius: 3px; margin: 5px 0 2px; overflow: hidden; }
.oggi .anno div { height: 100%; background: var(--mom-nero); }
.oggi small { color: var(--testo-3); font-size: 12px; }
.scheda.spesa { padding: 16px 18px; }
.spesa-testa { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--testo-2); }
.spesa-cifre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0 4px; }
.spesa-cifre small { display: block; font-size: 12px; color: var(--testo-3); }
.spesa-cifre b { font-size: 22px; font-weight: 600; white-space: nowrap; }
.spesa-cifre div:nth-child(2) b { color: var(--mom-verde-scuro); }
.giudizio { display: inline-block; border-radius: 10px; padding: 1px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.giudizio.linea { background: var(--mom-verde-tenue); color: var(--mom-verde-scuro); }
.giudizio.sopra { background: var(--avviso-tenue); color: var(--avviso); }
.giudizio.sotto { background: var(--mom-verde-tenue); color: var(--mom-verde-scuro); }
.giudizio.ritardo { background: #FBE9E9; color: #8A2323; }
.giudizio.nd { background: var(--sfondo); color: var(--testo-3); }
.avanzamento > div.linea, .avanzamento > div.sotto { background: var(--mom-verde); }
.avanzamento > div.sopra { background: var(--avviso); }
.avanzamento > div.ritardo { background: #C0504D; }
.avanzamento.grande { height: 16px; border-radius: 8px; margin: 12px 0 18px; }
.avanzamento.grande > div { border-radius: 8px; }
.avanzamento .atteso em { position: absolute; top: 20px; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--testo-2); white-space: nowrap; }
.avanzamento.grande .atteso { height: 22px; top: -3px; }
table.avanzamenti td { vertical-align: middle; }
.mini { display: grid; grid-template-columns: minmax(80px, 1fr) auto auto; gap: 8px; align-items: center; font-size: 13px; }
.mini .avanzamento { margin: 0; height: 8px; }
.tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0; }
.tessera { display: block; background: var(--bianco); border: 1px solid var(--bordo); border-top: 4px solid var(--mom-verde);
  border-radius: var(--raggio); padding: 12px 14px; color: var(--testo); }
.tessera:hover { border-color: var(--mom-verde); text-decoration: none; }
.tessera span { display: block; font-size: 13px; color: var(--testo-2); }
.tessera b { display: block; font-size: 30px; font-weight: 600; line-height: 1.2; }
.tessera small { display: block; font-size: 12px; color: var(--testo-3); }
.tessera.allarme { border-top-color: #C0504D; }
.tessera.allarme b { color: #8A2323; }
.tessera.attenzione { border-top-color: var(--avviso); }
.ripartizione { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 8px 0 4px; background: var(--sfondo); }
.riquadri.piccoli .riquadro b { font-size: 19px; }
.due-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.due-colonne > section > h2:first-child { margin-top: 6px; }
.carte { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.carta { display: block; background: var(--bianco); border: 1px solid var(--bordo); border-left: 4px solid var(--mom-verde);
  border-radius: var(--raggio); padding: 12px 14px; color: var(--testo); }
.carta:hover { border-color: var(--mom-verde); text-decoration: none; }
.carta-testa { display: flex; align-items: center; gap: 8px; }
.carta h3 { margin: 0; font-size: 17px; }
.carta-numeri { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--testo-2); margin-top: 8px; }
.carta-numeri b { color: var(--testo); }
.carta-numeri .avviso b, .carta-numeri .avviso { color: var(--avviso); }
details.aggiungi { margin: 0 0 12px; }
details.aggiungi > summary { list-style: none; cursor: pointer; }
details.aggiungi > summary::-webkit-details-marker { display: none; }
details.aggiungi[open] > summary { margin-bottom: 10px; }
.scheda.aggiungi { padding: 10px 14px; }
.griglia-schede { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.griglia-schede .scheda { margin: 0; }
.griglia-schede .scheda h2 { margin-top: 0; }
.griglia-schede .larga { grid-column: 1 / -1; }
form.modulo .intera { grid-column: 1 / -1; }
form.modulo input[type=email], form.modulo input[type=tel], form.modulo input[type=text] { max-width: none; }
fieldset.referente { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 6px 12px 4px; margin: 0 0 10px; }
fieldset.referente legend { font-size: 13px; color: var(--testo-2); padding: 0 4px; }
.barra-salva { position: sticky; bottom: 0; background: var(--sfondo); padding: 10px 0; margin-top: 10px; border-top: 1px solid var(--bordo); }
.filtri-tabella { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 10px; margin-bottom: 8px; }
.filtri-tabella input[type=search] { flex: 1 1 240px; padding: 7px 10px; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; }
.filtri-tabella select { flex: 0 1 180px; max-width: 220px; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: var(--raggio); font: inherit; font-size: 14px; background: var(--bianco); }
label.spunta { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; white-space: nowrap; }
details.colonne { margin-bottom: 8px; font-size: 14px; }
details.colonne summary { cursor: pointer; color: var(--mom-verde-scuro); }
details.coinvolti summary { cursor: pointer; }
table.elenco-modelli { border: 0; }
table.elenco-modelli td { vertical-align: middle; }
table.elenco-modelli td:last-child { text-align: right; width: 1%; white-space: nowrap; }
form.carica { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Fase H2: libreria e piani */
.nascosto { display: none; }
table.modifica-task td { padding: 4px 6px; vertical-align: top; }
table.modifica-task input, table.modifica-task select { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--bordo); border-radius: 4px; max-width: 220px; }
table.modifica-task input[type=checkbox] { max-width: none; }
.scheda h3 { font-size: 15px; margin: 14px 0 6px; color: var(--mom-verde-scuro); }

/* Fase H3: ordine di lavoro */
ol.passi { display: flex; list-style: none; padding: 0; margin: 0 0 16px; counter-reset: passo; overflow-x: auto; }
ol.passi li { flex: 1 1 0; min-width: 96px; position: relative; padding: 26px 4px 0; text-align: center; font-size: 12px; color: var(--testo-3); counter-increment: passo; }
ol.passi li::before { content: counter(passo); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background: var(--bordo); color: var(--bianco); font-size: 11px; z-index: 1; }
ol.passi li::after { content: ''; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--bordo); }
ol.passi li:first-child::after { display: none; }
ol.passi li.fatto { color: var(--testo-2); }
ol.passi li.fatto::before { content: '✓'; background: var(--mom-verde); }
ol.passi li.fatto::after, ol.passi li.corrente::after { background: var(--mom-verde); }
ol.passi li.corrente { color: var(--mom-verde-scuro); font-weight: 600; }
ol.passi li.corrente::before { background: var(--bianco); color: var(--mom-verde); box-shadow: inset 0 0 0 2px var(--mom-verde); }
table.dati { border: 0; }
table.dati th { background: none; width: 34%; font-weight: 500; vertical-align: top; }
table.dati td { vertical-align: top; }
.modulo-azione { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--bordo); }
.modulo-azione:first-of-type { border-top: 0; }
.modulo-azione > input:not([type=hidden]), .modulo-azione > div, .modulo-azione > label, .modulo-azione.campi p { flex: 1 1 100%; margin: 0; }
.modulo-azione input, .modulo-azione select { font: inherit; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 4px; }
.modulo-azione > input:not([type=hidden]), .modulo-azione div input { width: 100%; }
.modulo-azione.campi p { display: grid; grid-template-columns: 34% 1fr; align-items: center; gap: 8px; }
.modulo-azione details form, details.modulo-azione form { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
canvas.tela-firma { width: 100%; height: 140px; border: 1px dashed var(--testo-3); border-radius: var(--raggio); touch-action: none; background: var(--bianco); }
.firme { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.firme > div { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 10px; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.firme img { max-height: 70px; max-width: 100%; object-fit: contain; align-self: flex-start; }
img.miniatura { height: 80px; margin: 2px; border-radius: 4px; }

/* Ruoli e accessi */
.link-invito { background: var(--mom-verde-tenue); border-radius: var(--raggio); padding: 10px 12px; margin: 8px 0; }
.link-invito input { width: 100%; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 4px; background: var(--bianco); }
.comandi-invito { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Setup del cliente (D-095…D-097) */
ol.livelli-albero { list-style: none; padding: 0; margin: 10px 0 0; counter-reset: livello; }
ol.livelli-albero > li { position: relative; padding: 4px 0 4px 34px; border-left: 2px solid var(--mom-verde); margin-left: 10px; counter-increment: livello; }
ol.livelli-albero > li::before { content: counter(livello); position: absolute; left: -11px; top: 10px; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: var(--mom-verde); color: var(--bianco); font-size: 11px; }
ol.livelli-albero > li.facoltativo { border-left-style: dashed; }
ol.livelli-albero > li.facoltativo::before { background: var(--bianco); color: var(--mom-verde); box-shadow: inset 0 0 0 2px var(--mom-verde); }
ol.livelli-albero .campi p { margin: 4px 0; }
.gruppo-albero { color: var(--testo-2); font-weight: 600; font-size: 13px; }
.stato-setup { background: var(--mom-verde-tenue); border-left: 4px solid var(--mom-verde); }

/* Telefono: ultima regola del file, così prevale su quella degli schermi medi */
@media (max-width: 800px) {
  .mondo { grid-template-columns: minmax(0, 1fr); }
  .albero { border-right: 0; border-bottom: 1px solid var(--bordo); max-height: 40vh; }
  .testata { flex-wrap: wrap; gap: 8px 14px; padding: 8px 12px; }
  .testata img { height: 28px; }
  .testata .utente { margin-left: 0; width: 100%; justify-content: space-between; font-size: 13px; }
  .perimetro { padding: 8px 12px; }
  .perimetro form { gap: 8px; }
  .perimetro .livello { flex: 1 1 140px; }
  .perimetro details > summary { max-width: none; }
  .perimetro .comandi { margin-left: 0; width: 100%; }
  .perimetro .comandi .bottone { flex: 1; }
  .contenuto { padding: 12px 12px 30px; }
  .testata-asset { grid-template-columns: 90px minmax(0, 1fr); }
  .testata-asset .foto { width: 90px; height: 90px; }
  .barra-tabella .azioni-destra { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .intestazione-pagina .azioni, .oggi { width: 100%; }
  .spesa-cifre b { font-size: 18px; }
  .tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tessera b { font-size: 24px; }
  .griglia-schede, .due-colonne { grid-template-columns: minmax(0, 1fr); }
  .filtri-tabella select { flex: 1 1 45%; max-width: none; }
  .mini { grid-template-columns: minmax(60px, 1fr) auto; }
  .mini span:nth-child(2) { display: none; }
  h1 { font-size: 20px; }
  ol.passi li { min-width: 74px; font-size: 11px; }
  .modulo-azione.campi p { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}