:root{
  --blue-900:#0b3d63;
  --blue-700:#12557f;
  --blue-500:#1a73a0;
  --blue-100:#e8f2f8;
  --amber-500:#c77b00;
  --amber-100:#fbead0;
  --red-600:#b3261e;
  --red-100:#fbe4e2;
  --green-700:#1e7d3c;
  --green-100:#e3f5e8;
  --ink-900:#1c2530;
  --ink-700:#3c4753;
  --ink-500:#66717c;
  --ink-300:#aab2ba;
  --line:#d7dde2;
  --bg:#f4f6f8;
  --card:#ffffff;
  --radius:8px;
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  color:var(--ink-900);
  background:var(--bg);
  min-height:100vh;
}

a{color:inherit;}

/* ---------- Header / nav ---------- */
#app-header{
  background:var(--blue-900);
  color:#fff;
  position:sticky;
  top:0;
  z-index:20;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.header-inner{
  max-width:1600px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.brand{display:flex;flex-direction:column;line-height:1.2;}
.brand #brand-company{font-weight:700;font-size:1.15rem;}
.brand .brand-sub{font-size:.78rem;color:#bcd9ec;}

[hidden]{display:none !important;}

.header-user{display:flex;align-items:center;gap:10px;font-size:.82rem;color:#eaf4fa;}
.header-user button{background:transparent;color:#eaf4fa;border-color:rgba(255,255,255,.4);}
.header-user button:hover{background:rgba(255,255,255,.12);}

#main-nav{display:flex;flex-wrap:wrap;gap:18px;align-items:center;}
.nav-group{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.nav-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#8fc0dc;margin-right:2px;}
#main-nav a{
  color:#eaf4fa;
  text-decoration:none;
  font-size:.88rem;
  padding:5px 9px;
  border-radius:6px;
}
#main-nav a:hover{background:rgba(255,255,255,.12);}
#main-nav a.active{background:#fff;color:var(--blue-900);font-weight:600;}

/* ---------- Layout ---------- */
#app-shell{max-width:1600px;margin:0 auto;padding:22px 20px 60px;}
#app-footer{text-align:center;color:var(--ink-500);font-size:.76rem;padding:14px;}
#app-footer .footer-logos{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:6px;}
#app-footer #footer-logo{display:block;height:30px;width:auto;}
#app-footer #footer-client-logo{display:block;height:30px;width:auto;max-width:160px;object-fit:contain;padding-left:16px;border-left:1px solid var(--line);}
#app-footer .footer-copyright{display:block;font-size:.7rem;color:var(--ink-300);margin-top:4px;}
#app-footer .footer-version{display:block;font-size:.68rem;color:var(--ink-300);margin-top:2px;}

.page-title{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.page-title h1{font-size:1.4rem;margin:0;color:var(--blue-900);}
.page-title .sub{color:var(--ink-500);font-size:.85rem;}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:18px;
}
/* Ritmo verticale unico dentro ogni card: qualunque coppia di elementi
   diretti (titolo, testo, field-grid, bottone, esito) ha SEMPRE la stessa
   distanza, invece di margini scelti a mano caso per caso (che nel tempo
   erano finiti diversi: 8, 10, 12, 14, 20, 24px sulla stessa pagina). I
   margini di bottoni/field-grid/paragrafi si accorpano con questo per le
   normali regole CSS (margini verticali adiacenti si fondono nel più
   grande, non si somma), quindi qui basta la sola regola sul figlio
   successivo. */
.card > *:not(:first-child){margin-top:14px;}
/* h2/p portano un proprio margine di default del browser che altrimenti si
   fonde con la regola sopra (le due margini adiacenti collassano nel più
   grande dei due, non nella somma) rendendo il distacco reale imprevedibile
   e diverso da 14px a seconda del tag. Azzerato qui (":not(:first-child)"
   sopra ha specificità più alta di questa regola sul solo margin-top, quindi
   continua comunque a valere fra un h2/p e il fratello successivo - qui
   serve solo a togliere il margine di default su margin-bottom sempre, e su
   margin-top quando h2/p è il PRIMO figlio della card, dove nessuna regola
   di spaziatura deve applicarsi). */
.card > h2, .card > p{margin-top:0;margin-bottom:0;}

.actions-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
/* Paginazione delle tabelle (30/09/2026): sempre SOPRA la tabella, allineata
   a destra, su una riga sola (etichetta e menu affiancati). margin-left:auto
   + width:fit-content la fanno stare a destra sia da sola (blocco a sé) sia
   dentro una .actions-bar accanto ai pulsanti. */
/* Paginazione centrata rispetto alla tabella (Riccardo, 02/10/2026: "ovunque
   allineata al centro"), prima era a destra. */
/* Riquadro leggero attaccato alla tabella sotto (Riccardo, 02/10/2026: "si
   confonde con i campi filtro": sfondo chiaro, bordo sottile, angoli alti
   arrotondati, nessuno spazio verso la tabella). */
.paginazione-bar{display:flex;width:fit-content;margin:10px auto 0;padding:6px 14px;gap:6px 14px;flex-wrap:wrap;align-items:center;justify-content:center;font-size:.86rem;color:var(--ink-700);background:#f3f6f9;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;}
.paginazione-bar + .reg-table-wrap{margin-top:0;}
/* Barra strumenti di Lavoratori (cliente): azioni a sinistra, paginazione a destra sulla stessa riga */
.lav-toolbar .paginazione-bar{margin:0 auto;border-bottom:1px solid var(--line);border-radius:8px;}
.paginazione-bar .pag-righe-label{display:inline-flex;align-items:center;gap:8px;margin:0;white-space:nowrap;font-weight:400;}
.paginazione-bar select{width:auto;min-width:0;padding:5px 8px;}
.paginazione-bar .pag-info{white-space:nowrap;}
.paginazione-bar button{padding:5px 10px;}
.actions-bar > .paginazione-bar{margin-bottom:0;border-bottom:1px solid var(--line);border-radius:8px;}
/* Titolo di una schermata con i suoi pulsanti sulla stessa riga (Riepilogo
   Adempimenti/Abilitazioni, 30/09/2026): i pulsanti restano subito dopo il
   titolo, non spinti al bordo destro. */
.titolo-azioni{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;}
.titolo-azioni h2{margin:0;}
/* Pulsante spinto al bordo destro della stessa riga del titolo (es. "Invia
   scadenzario ora", "Carica CSV aule"), allineato ai pulsanti di sinistra. */
.titolo-azioni .azione-destra{margin-left:auto;}
/* Intestazione di pagina (h1) usata come riga titolo+pulsanti: allineata a
   sinistra come le card, non distribuita da space-between di .page-title. */
.page-title.titolo-azioni{justify-content:flex-start;margin-bottom:16px;}
/* Il menu "Esporta" a bordo destro si apre verso sinistra, altrimenti
   uscirebbe dalla pagina. */
.titolo-azioni .export-dropdown .dropdown-menu{left:auto;right:0;}

button, .btn{
  font-family:inherit;
  font-size:.86rem;
  padding:8px 14px;
  border-radius:6px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink-900);
  cursor:pointer;
}
button:hover{background:var(--blue-100);}
button.primary{background:var(--blue-700);border-color:var(--blue-700);color:#fff;}
button.primary:hover{background:var(--blue-500);}
button.danger{color:var(--red-600);border-color:var(--red-100);}
button.danger:hover{background:var(--red-100);}
/* "ghost" = pulsante secondario (Annulla, Torna, Chiudi...): prima sembrava un
   link (Riccardo, 02/10/2026: "rendilo pulsante"); ora grigio chiaro con
   bordo, leggermente diverso dal Salva blu che gli sta accanto. */
button.ghost{border-color:#cfd6dd;background:#f3f5f7;color:var(--ink-700);}
button.ghost:hover{background:#e6ebf0;border-color:#b9c3cc;}
/* Pulsante principale un po' più largo (Modifica/Salva dell'anagrafica). */
button.btn-largo{min-width:120px;padding-left:22px;padding-right:22px;}
button.small{padding:4px 9px;font-size:.78rem;}
/* Link con l'aspetto di un pulsante (es. "Scarica attestato", download
   diretto): stessa resa di button/button.small. */
a.btn{display:inline-block;text-decoration:none;line-height:normal;}
a.btn:hover{background:var(--blue-100);}
a.btn.small{padding:4px 9px;font-size:.78rem;}
/* Storico dei corsi svolti sotto una riga abilitazione (Formazione → Elenco) */
.storico-riga > td{background:var(--blue-100, #eef4fb);}
.storico-corsi{padding:4px 0;}
.storico-corsi table{margin-top:6px;background:#fff;}
.attestati-elenco{margin:4px 0;padding-left:0;list-style:none;}
.attestati-elenco li{margin:4px 0;}

/* Allegati di un adempimento (Riepilogo Adempimenti / Documenti) */
.allegati-riga > td{background:var(--blue-100, #eef4fb);}
/* Modifica lavoratore sotto la riga (02/10/2026): riquadro incorniciato nella
   fascia azzurra, come il dettaglio abilitazioni. */
.lav-modifica-riga > td{background:var(--blue-100, #eef4fb);padding:10px 12px;}
/* Form lavoratore (02/10/2026): 4 colonne, etichetta in linea a destra. */
.lv-griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 18px;align-items:center;}
.lv-campo{display:flex;align-items:center;gap:8px;min-width:0;}
.lv-campo > label{flex:0 0 110px;text-align:right;font-size:.85rem;font-weight:600;color:var(--ink-700);line-height:1.15;}
.lv-campo > input,.lv-campo > select{flex:1 1 0;min-width:0;width:auto;}
/* Sede e Mansione fino alla fine della colonna Email (Riccardo, 02/10/2026). */
.lv-campo.lv-span3{grid-column:span 3;}
.lv-campo.lv-stato{margin-left:6px;}
.lv-campo.lv-stato > label{flex:0 0 auto;}
.lv-campo.lv-stato > select{width:170px;flex:0 0 auto;}
@media (max-width:1100px){ .lv-griglia{grid-template-columns:repeat(2,minmax(0,1fr));} .lv-campo.lv-span3{grid-column:span 1;} }
@media (max-width:640px){ .lv-griglia{grid-template-columns:minmax(0,1fr);} .lv-campo > label{flex-basis:96px;} .lv-campo.lv-span3{grid-column:auto;} }
.lav-modifica-riga .card{margin:0;box-shadow:none;border:1px solid var(--line);}
table.reg-table tr.lav-modifica-riga > td{border-bottom:1px solid var(--line);}
.allegati-dettaglio{padding:4px 0;display:flex;flex-direction:column;gap:10px;}
.allegati-elenco{margin:2px 0;padding-left:0;list-style:none;}
.allegati-elenco li{margin:3px 0;padding:4px 6px;border-radius:6px;}
.allegati-file-attivo{border-left:3px solid var(--green-700, #2e7d32);}
.allegati-file-superato{border-left:3px solid #bbb;opacity:.75;}
.allegati-superati-titolo{margin-top:4px;font-weight:600;}
.allegati-dropzone{border:2px dashed var(--line);border-radius:var(--radius);padding:14px;text-align:center;color:var(--ink-500);}
.allegati-dropzone-attiva, tr.riga-drop-attiva > td, li.allegati-dropzone-attiva{background:var(--blue-100, #eef4fb);border-color:var(--ink-500);}

/* ---------- Dashboard ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;}
.stat-card .num{font-size:1.9rem;font-weight:700;color:var(--blue-900);}
.stat-card .label{color:var(--ink-500);font-size:.8rem;}
.stat-card.open .num{color:var(--amber-500);}
.stat-card.overdue .num{color:var(--red-600);}

/* ---------- Forms ---------- */
.form-section{margin-bottom:20px;}
.form-section h2{
  font-size:1rem;
  color:var(--blue-900);
  background:var(--blue-100);
  padding:8px 10px;
  border-radius:6px;
  margin:0 0 12px;
}
.form-section h3{font-size:.88rem;color:var(--ink-700);margin:14px 0 8px;}
.form-section h2 .hint, .form-section h3 .hint{font-weight:400;color:var(--ink-500);}

/* ---------- Zona riservata SPP: stacco visivo netto dal resto del form ---------- */
.spp-zone{
  background:var(--amber-100);
  border:1px solid var(--amber-500);
  border-radius:var(--radius);
  padding:2px 16px 16px;
  margin:22px 0;
}
.spp-zone-label{
  display:inline-block;
  background:var(--amber-500);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:5px 12px;
  border-radius:20px;
  margin:14px 0 6px;
}
.spp-zone .form-section h2{background:#fff;color:var(--amber-500);border:1px solid var(--amber-500);}
.spp-zone .form-section:last-child{margin-bottom:6px;}

/* ---------- Zona non modificabile (testo originale del segnalante): stesso
   stacco della zona SPP ma in grigio neutro, per non confonderle fra loro ---------- */
.readonly-zone{
  background:#e4e6e9;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2px 16px 16px;
}
.readonly-zone input:disabled, .readonly-zone textarea:disabled, .readonly-zone select:disabled{background:#f6f7f8;}
input[readonly]{background:#f6f7f8;color:var(--ink-500);cursor:default;}
.readonly-zone-label{
  display:inline-block;
  background:var(--ink-500);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:5px 12px;
  border-radius:20px;
  margin:14px 0 6px;
}
.readonly-zone h3{color:var(--ink-500);}
.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 16px;}
.field-grid-1col{grid-template-columns:1fr;max-width:560px;}
/* Riga Codice/Tipo/Ore corso dell'aula (Riccardo, 26/09/2026): Codice e
   Ore corso ridotti al minimo, Tipo corso allargato a occupare tutto lo
   spazio restante della riga - sotto i 700px torna all'auto-fit normale,
   altrimenti "Tipo corso" si schiaccerebbe su schermi stretti. */
.field-grid-aula-tipo{grid-template-columns:120px 1fr 100px;}
/* Anagrafica azienda (pannello, Riccardo 30/09/2026): griglia a 12 colonne,
   ogni campo occupa un numero fisso di colonne (.az-cN) così le larghezze
   sono coerenti e le caselle stanno sulla stessa linea in verticale; le
   etichette hanno altezza fissa (una riga) e le caselle si allineano in
   basso. Sotto i 900px 2 colonne, sotto i 560px 1. */
.az-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px 20px;align-items:end;margin-bottom:8px;}
.az-grid .field{min-width:0;}
.az-grid .field > label{display:flex;align-items:center;gap:6px;min-height:1.4em;font-weight:600;font-size:.86rem;white-space:nowrap;}
.az-c1{grid-column:span 1;}
.az-c2{grid-column:span 2;} .az-c3{grid-column:span 3;} .az-c4{grid-column:span 4;}
.az-c5{grid-column:span 5;} .az-c6{grid-column:span 6;} .az-c12{grid-column:1/-1;}
.az-info{display:flex;flex-wrap:wrap;gap:8px 36px;margin:4px 0 22px;}
.az-info > div{display:flex;flex-direction:column;gap:2px;}
.az-info > div > span:not(.k){white-space:nowrap;}
.az-info .k{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-500);}
/* Campo che deve INIZIARE una nuova riga (colonna 1): l'auto-placement lo metterebbe nel buco a destra della riga sopra */
.az-grid .az-riga.az-c4{grid-column:1 / span 4;}
#az-box-sedi{margin-top:18px;}
.avviso-sede-mancante{margin:0 0 12px;padding:10px 14px;border-left:4px solid #d98e04;background:#fff7e6;border-radius:6px;color:var(--ink-900);}
.az-azioni-rare{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;}
@media (max-width:900px){ .az-grid .az-riga.az-c4{grid-column:span 1;} .az-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .az-c1,.az-c2,.az-c3,.az-c4,.az-c5,.az-c6{grid-column:span 1;} }
@media (max-width:560px){ .az-grid{grid-template-columns:1fr;} }
/* Riga del Contratto continuativo (Riccardo, 30/09/2026): Tipo, date,
   canone (e "fino a N lavoratori" per SICURBEST) tutti sulla stessa riga,
   Tipo un po' più largo; --ct-extra = quanti campi seguono il Tipo (lo
   imposta app.js). Sotto i 700px tornano a capo come al solito. */
.field-grid-contratto{grid-template-columns:1.5fr repeat(var(--ct-extra,0),1fr);}
@media (max-width:700px){ .field-grid-contratto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));} }
@media (max-width:700px){ .field-grid-aula-tipo{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));} }
/* Stacco in più tra i due blocchi verticali della Segnalazione (dati
   segnalante / dati evento, da "Ruolo" a "Data evento"): senza, i due
   blocchi si toccano quasi, poco leggibili in sequenza. */
.field-grid-1col + .field-grid-1col{margin-top:18px;}
.seg-readonly + .seg-readonly{margin-top:18px;}
.danni-block{margin-top:14px;}
.logo-box{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.logo-box #logo-preview{max-height:70px;max-width:220px;object-fit:contain;border:1px solid var(--line);border-radius:6px;padding:6px;background:#fff;}
.logo-box-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.procedura-current{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;}
.foto-analisi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:10px 0;}
.foto-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:6px;padding:8px;background:#fff;}
.foto-card img{width:100%;height:120px;object-fit:cover;border-radius:4px;background:var(--bg-200,#f2f2f2);}
/* Ogni firmatario (RSPP, Datore di Lavoro) e' un'unica colonna che tiene
   insieme nome, data e riquadro di firma digitale: cosi' restano allineati
   fra loro qualunque sia la larghezza dello schermo, invece di finire sotto
   la colonna sbagliata quando field-grid va a capo. */
.firma-field-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 20px;}
.firma-subgroup{display:flex;flex-direction:column;gap:10px;}
.firma-digitale{display:flex;flex-direction:column;gap:6px;}
.firma-digitale-img{max-height:64px;max-width:220px;object-fit:contain;border:1px solid var(--line);border-radius:6px;padding:6px;background:#fff;}
.firma-digitale-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.firma-digitale-ok{font-size:.85rem;font-weight:600;color:#2a7a2a;}
.firma-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;}
.firma-modal-box{background:#fff;border-radius:10px;padding:20px;max-width:640px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.25);}
.firma-modal-box h3{margin:0 0 6px;}
.firma-modal-box .hint{margin:0 0 10px;color:var(--ink-500);}
#firma-canvas{width:100%;height:220px;display:block;border:1px solid var(--line);border-radius:6px;background:#fff;touch-action:none;cursor:crosshair;}
/* Modale "arioso" (Riccardo, 30/09/2026, prima: Assegna abilitazione): più
   aria fra i campi, etichette in evidenza, avviso in un riquadro chiaro,
   pulsanti staccati da una riga. Si attiva aggiungendo la classe
   modal-arioso al .firma-modal-box; gli altri modali restano com'erano. */
.firma-modal-box.modal-arioso{padding:30px 32px;max-width:580px;}
/* Se lo schermo è basso il modale scorre invece di uscire dalla finestra */
.firma-modal-box.modal-arioso{max-height:calc(100vh - 32px);overflow-y:auto;}
.modal-arioso .folder-browse-list{max-height:340px;margin-bottom:4px;}
.modal-arioso .folder-browse-item{padding:12px 14px;line-height:1.45;}
.modal-arioso h3{font-size:1.3rem;margin:0 0 16px;}
.modal-arioso .hint{background:var(--blue-100);border-left:4px solid var(--blue-500);border-radius:6px;padding:12px 16px;margin:0 0 28px;line-height:1.55;color:var(--ink-700);}
.modal-arioso .field{gap:8px;margin-bottom:24px;}
.modal-arioso .field label{font-weight:600;font-size:.92rem;color:var(--ink-900);}
/* Altezza esplicita: il .field select/input globale ha height:36px, con un padding verticale in più il testo veniva tagliato */
.modal-arioso .field select,.modal-arioso .field input{height:44px;padding:0 12px;}
.modal-arioso .firma-modal-actions{margin-top:32px;padding-top:22px;border-top:1px solid var(--line);}
.firma-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap;}
.folder-browse-path{font-family:monospace;font-size:.85rem;background:var(--bg-200,#f2f2f2);border-radius:6px;padding:6px 10px;margin-bottom:8px;word-break:break-all;}
.folder-browse-list{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:6px;}
.folder-browse-list li{border-bottom:1px solid var(--line);}
.folder-browse-list li:last-child{border-bottom:none;}
.folder-browse-list li.hint{padding:10px;color:var(--ink-500);}
.folder-browse-item{display:block;width:100%;text-align:left;padding:8px 10px;border:none;background:none;cursor:pointer;}
.folder-browse-item:hover{background:var(--bg-200,#f2f2f2);}
.field{display:flex;flex-direction:column;gap:4px;}
.field-inline{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;}
.field-inline label:first-child{white-space:nowrap;}
/* Righe "Lezione N" del form Aule Corso (pannello di controllo): classe
   dedicata, non il generico .field-inline (usato altrove anche per
   gruppi di radio con etichette lunghe) - senza una larghezza propria,
   gli input erediterebbero width:100% (riga 292) e andrebbero ognuno a
   capo invece di stare sulla stessa riga. */
.aula-lezione-row{display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.aula-lezione-row label{width:70px;flex-shrink:0;font-size:.88rem;color:var(--ink-700);font-weight:600;}
.aula-lezione-row input[type=date]{width:150px;flex:none;}
.aula-lezione-row input[type=time]{width:110px;flex:none;}
.field.wide{grid-column:1/-1;}
/* Data più stretta degli altri campi in un form verticale a una colonna
   (Riccardo, 29/09/2026: "le date più strette degli altri campi") - senza
   questa, in .field-grid-1col ogni campo eredita la larghezza intera del
   form, comprese le date che non ne hanno bisogno. */
.field.field-narrow{max-width:180px;}
.field label{font-size:.88rem;color:var(--ink-700);font-weight:600;}
.field .hint{font-size:.88rem;color:var(--ink-500);font-weight:400;}
/* Quando l'etichetta di un campo va a capo su due righe (es. "Codice
   azienda (solo lettere minuscole, numeri, trattini)"), le caselle dei
   campi vicini con etichetta corta partirebbero più in alto, sfalsando
   l'intera riga del field-grid. Riservare sempre lo spazio di due righe e
   allineare il testo dell'etichetta in basso (invece che in alto) fa sì
   che la casella sottostante inizi sempre alla stessa altezza, che
   l'etichetta occupi una riga o due.*/
/* 03/10/2026 (uniformità maschere): lo spazio riservato alle due righe c'è SOLO
   nelle righe dove un'etichetta va davvero a capo (classe messa da
   uniformaMaschere() in app.js); prima era sempre, e ogni riga di campi
   aveva una riga vuota sopra le etichette corte. */
.field-grid.etichette-su-due-righe > .field:not(.field-inline) > label:not(.check-opt),
.field-grid.etichette-su-due-righe > #ct-campi > .field > label{
  min-height:2.6em;
  display:flex;
  align-items:flex-end;
}
/* Campi minimi obbligatori (vedi validateRequiredFields in app.js):
   asterisco sull'etichetta sempre visibile, evidenziazione rossa applicata
   solo al momento del salvataggio se il campo risulta ancora vuoto. */
.required-mark{color:var(--red-600,#c0392b);margin-left:2px;}
.field.field-invalid label{color:var(--red-600,#c0392b);}
.field.field-invalid input, .field.field-invalid select, .field.field-invalid textarea{border-color:var(--red-600,#c0392b);}
.required-checklist.field-invalid{outline:1px solid var(--red-600,#c0392b);outline-offset:6px;border-radius:4px;}
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=email], select{
  font-family:inherit;
  font-size:.88rem;
  height:36px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--ink-900);
  width:100%;
}
/* textarea condivide lo stesso stile del testo ma non l'altezza fissa
   (multi-riga, ridimensionabile a mano) - regola separata di proposito. */
textarea{
  font-family:inherit;
  font-size:.88rem;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  color:var(--ink-900);
  width:100%;
  resize:vertical;
  min-height:64px;
}
input:focus, textarea:focus, select:focus{outline:2px solid var(--blue-500);outline-offset:1px;}

.radio-row, .check-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.radio-opt, .check-opt{display:flex;align-items:center;gap:6px;font-size:.88rem;}
/* Il margine di default del browser sull'input (~3-4px per lato) si somma
   al gap qui sopra: senza azzerarlo il testo resta staccato dal flag più
   del necessario (Riccardo, 28/09/2026: "avvicina la scritta al flag").
   `width:auto`/`flex:0 0 auto` (29/09/2026: "vedo ancora tanto spazio tra
   la checkbox e la scritta") - alcune di queste caselle vivono dentro un
   `.actions-bar` che a sua volta è vicino a griglie di filtri con regole
   `input{width:100%;flex:1}`; senza fermarla qui, quella regola si
   applica anche al checkbox (che normalmente ignora `width` ma non
   sempre) allargandolo e spingendo il testo lontano dal flag. */
.radio-opt input, .check-opt input{margin:0;width:auto;flex:0 0 auto;}

/* ---------- Valutazione del potenziale: descrizione a sinistra, risposte sulla stessa riga a destra (stile INAIL) ---------- */
.potenziale-rows .field{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:8px 0;border-bottom:1px solid var(--line);}
.potenziale-rows .field:last-child{border-bottom:none;}
.potenziale-rows .field label{flex:0 0 260px;max-width:260px;margin:0;}
.potenziale-rows .radio-row{flex:1 1 260px;display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:8px 10px;white-space:normal;}
.potenziale-rows .radio-opt{white-space:nowrap;}
@media (max-width:900px){
  .potenziale-rows .field{flex-direction:column;align-items:flex-start;}
  .potenziale-rows .field label{flex:0 0 auto;max-width:none;}
  .potenziale-rows .radio-row{grid-template-columns:1fr 1fr;}
}
.check-list{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:6px 18px;}
@media (max-width:640px){ .check-list{grid-template-columns:1fr;} }
.check-list .check-opt{align-items:flex-start;}
.check-list input[type=checkbox]{margin-top:3px;}

/* ---------- Tipologia intervento: descrizione della procedura a fianco di ogni voce (stile INAIL) ---------- */
.tipologia-intervento .tipologia-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:6px 0;border-bottom:1px solid var(--line);}
.tipologia-intervento .tipologia-row:last-child{border-bottom:none;}
.tipologia-intervento .tipologia-row .check-opt{flex:0 0 320px;max-width:320px;}
.tipologia-intervento .tipologia-row input[type=text]{flex:1 1 260px;}
.tipologia-intervento .tipologia-row .tipologia-examples{flex:1 1 100%;font-size:.76rem;font-style:italic;color:var(--ink-500);margin-top:-2px;}
@media (max-width:640px){ .tipologia-intervento .tipologia-row .check-opt{flex:1 1 100%;max-width:none;} }

.cause-group{border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-bottom:8px;}
.cause-group .cat{font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--ink-700);}
.cause-group .subs{display:flex;gap:16px;flex-wrap:wrap;}

table.datatable{width:100%;border-collapse:collapse;margin-top:6px;}
table.datatable th{
  background:var(--blue-100);
  color:var(--blue-900);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  text-align:left;
  padding:7px 8px;
  border:1px solid var(--line);
}
table.datatable td{border:1px solid var(--line);padding:5px 6px;vertical-align:top;}
table.datatable td input, table.datatable td textarea{border:1px solid var(--line);background:transparent;padding:4px;}
table.datatable td input:focus, table.datatable td textarea:focus{background:#fff;border-color:var(--blue-500);}
table.datatable td.center{text-align:center;width:1%;white-space:nowrap;}
table.datatable tfoot td{border:none;padding-top:8px;}

.matrix-table th, .matrix-table td{text-align:center;}
.matrix-table td:first-child, .matrix-table th:first-child{text-align:left;}

.formazione-status{font-size:.78rem;color:var(--ink-500);margin-left:8px;}

/* ---------- Register list ---------- */
.list-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;margin-bottom:12px;}
.list-toolbar .filters{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:flex-end;}
.list-toolbar input, .list-toolbar select{width:auto;min-width:150px;}
/* Un intervallo dal/al (es. "Svolgimento: dal ... al ...") va a capo come
   UN blocco solo, mai spezzato fra l'etichetta e il suo campo o fra "dal"
   e "al" - prima ogni pezzo era un figlio flex indipendente e andava a
   capo a caso in mezzo alla coppia. */
.filter-range{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap;font-size:.85rem;color:var(--ink-500);}
.filter-range label{display:inline-flex;align-items:center;gap:4px;}
.filter-range input{min-width:0;}
/* "×" per svuotare un singolo filtro senza doverci entrare con tastiera e
   Canc (Riccardo, 25/09/2026) - un'unità sola col suo campo, cosi' non si
   staccano andando a capo. */
.filter-item{display:inline-flex;align-items:center;gap:2px;}
.filter-clear{border:none;background:transparent;color:var(--ink-500);cursor:pointer;font-size:1rem;line-height:1;padding:2px 6px;border-radius:3px;}
.filter-clear:hover{background:var(--bg);color:var(--ink-700);}
.filter-range .filter-clear{margin-left:2px;}
/* Filtro con etichetta visibile sopra il campo (Riccardo, 25/09/2026:
   "l'operatore deve essere facilitato, non deve andare alla ricerca dei
   filtri da impostare a caso") - modificatore a parte, mai sulla sola
   .filter-item, per non toccare le schermate che non passano un'etichetta
   a filterFieldHtml(). */
.filter-item-labeled{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;}
.filter-item-label{font-size:.78rem;font-weight:600;color:var(--ink-500);text-transform:uppercase;letter-spacing:.02em;}
.filter-item-row{display:inline-flex;align-items:center;gap:2px;}
/* Riepilogo Adempimenti/Abilitazioni (Riccardo, 25/09/2026: "non li vedo
   ben allineati") - un flex con gap non allinea le colonne fra una riga e
   l'altra quando i campi hanno larghezze diverse (ogni riga "va a capo" per
   conto suo). Una vera griglia sì: stessa larghezza di colonna ripetuta,
   ogni filtro cade sempre nella stessa colonna riga dopo riga. Applicata
   solo dove il markup passa .filters-grid (i pannelli con filtri etichettati
   sopra), mai sulla .filters "nuda" usata da tutti gli altri elenchi, per
   non toccarne il layout.*/
/* width:100% (26/09/2026): .list-toolbar è lui stesso un flex a capo
   automatico (riga 361) - con PIÙ .filters-grid affiancati nello stesso
   .list-toolbar (Riepilogo Adempimenti/Abilitazioni, una riga di filtri
   dedicata per gruppo), senza questo ogni .filters-grid si comporta come
   un normale elemento flex e si affianca al successivo finché c'è spazio
   in larghezza, invece di andare sempre a capo da solo - visibile solo
   su schermi larghi, dove lo spazio per affiancarli c'è per davvero. */
.list-toolbar .filters.filters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px 20px;align-items:end;width:100%;}
.filters-grid .filter-item,.filters-grid .filter-item-labeled,.filters-grid .filter-range{width:100%;}
.filters-grid .filter-item-row{width:100%;}
.filters-grid .filter-item-row select,.filters-grid .filter-item-row input,
.filters-grid .filter-item select,.filters-grid .filter-item input{width:100%;min-width:0;flex:1;}
/* Intervallo dal/al largo esattamente come un campo singolo (Riccardo,
   02/10/2026: "le date dal-al grandi esattamente come il campo sopra,
   ovunque"): una sola colonna della griglia, le due date si dividono lo
   spazio della casella. */
.filters-grid .filter-range{grid-column:auto;}
/* Filtri di Documenti / Adempimenti: 3 colonne condivise fra le due righe
   (Sede | Adempimento | Stato  /  Svolgimento | Rinnovo | flag); qui gli
   intervalli dal/al occupano UNA colonna, non due. */
.list-toolbar .filters.filters-grid.filtri-doc{grid-template-columns:1.4fr 1.2fr 1fr;align-items:end;}
.filters-grid.filtri-doc .filter-range{grid-column:auto;}
.filtri-doc-flag{min-height:36px;align-self:end;}
@media (max-width:1000px){ .list-toolbar .filters.filters-grid.filtri-doc{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){
  .list-toolbar .filters.filters-grid.filtri-doc{grid-template-columns:minmax(0,1fr);}
  /* Sul telefono i filtri (anche le coppie di date "dal/al") non devono
     allargare la pagina: ogni filtro occupa la riga intera e le caselle
     si stringono invece di sbordare a destra. */
  .list-toolbar .filters{width:100%;min-width:0;}
  .list-toolbar .filters > .filter-item, .list-toolbar .filters > .filter-range{width:100%;min-width:0;}
  .list-toolbar .filters > .filter-item > input, .list-toolbar .filters > .filter-item > select{flex:1;min-width:0;}
  /* etichetta a sinistra di larghezza fissa: le caselle partono tutte dallo stesso punto */
  .list-toolbar .filters > .filter-item:not(.filter-item-labeled) > label:first-child{flex:0 0 96px;white-space:normal;}
  .list-toolbar .filter-range .filter-item-row{flex:1;min-width:0;width:100%;align-self:stretch;}
  .list-toolbar .filter-range .filter-item-row label{flex:1;min-width:0;}
  .list-toolbar .filter-range input[type=date]{min-width:0;width:100%;}
}
.filters-grid .filter-range .filter-item-row{gap:8px;}
.filters-grid .filter-range .filter-item-row label{flex:1;display:inline-flex;align-items:center;gap:4px;}
/* Allarga un singolo filtro a due colonne della griglia (stesso
   meccanismo di .filter-range sopra, riusabile su qualunque filtro -
   Riepilogo Adempimenti/Abilitazioni, 26/09/2026). Un wrapper perché
   filterFieldHtml() non accetta una classe extra (40+ punti di chiamata,
   non va toccata la sua firma). */
.filtro-largo{grid-column:span 2;}

/* ---------- Menu a tendina "Esporta" (PDF/Excel/CSV) ---------- */
.export-dropdown{position:relative;display:inline-block;}
.dropdown-menu{
  position:absolute;top:100%;left:0;margin-top:4px;z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.15);min-width:160px;padding:4px;
}
.dropdown-menu button{
  display:block;width:100%;text-align:left;border:none;background:transparent;
  padding:7px 10px;border-radius:4px;font-size:.86rem;
}
.dropdown-menu button:hover{background:var(--blue-100);}

/* ---------- Iconcina "?" con popup di aiuto sui campi/sezioni non ovvie ---------- */
.help-wrap{position:relative;display:inline-block;margin-left:5px;vertical-align:middle;}
.help-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;padding:0;
  background:var(--blue-100);color:var(--blue-700);border:1px solid var(--blue-500);
  font-size:.7rem;font-weight:700;line-height:1;cursor:pointer;
}
.help-icon:hover{background:var(--blue-500);color:#fff;}
.help-popup{
  position:absolute;top:100%;left:0;margin-top:4px;z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:6px;
  box-shadow:0 4px 14px rgba(0,0,0,.15);width:260px;max-width:70vw;
  padding:10px 12px;font-size:.8rem;font-weight:400;color:var(--ink-700);line-height:1.4;
  text-transform:none;letter-spacing:normal;
  /* Alcuni testi di aiuto contengono un "\n" per separare due punti
     distinti (es. Near Miss / Non Conformità): senza questo, il default
     "normal" li collasserebbe in un solo spazio invece di andare a capo. */
  white-space:pre-line;
}

.reg-table-wrap{overflow-x:auto;}
table.reg-table{width:100%;border-collapse:collapse;font-size:.83rem;background:#fff;}
table.reg-table th{background:var(--blue-900);color:#fff;padding:8px 10px;text-align:left;white-space:nowrap;position:sticky;top:0;z-index:2;}
/* "?" nelle intestazioni (Riccardo, 02/10/2026: "il testo sul punto di domanda
   è nascosto dal bottone della riga sotto"): l'intestazione sticky è un
   contesto di sovrapposizione a sé, quindi la nuvoletta (z-index 30) restava
   comunque sotto i pulsanti delle righe. Con la nuvoletta aperta
   l'intestazione sale sopra tutto; nell'ultima colonna la nuvoletta si
   ancora a destra per non uscire dal bordo scorrevole della tabella. */
table.reg-table th:has(.help-popup:not([hidden])){z-index:40;}
table.reg-table th:last-child .help-popup{left:auto;right:0;}
table.reg-table th.sortable{cursor:pointer;user-select:none;}
table.reg-table th.sortable:hover{background:var(--blue-700,#1e5a8a);}
table.reg-table th.sorted{background:var(--blue-700,#1e5a8a);}
table.reg-table td{padding:8px 10px;vertical-align:middle;}
table.reg-table > tbody > tr:not(.storico-riga, .allegati-riga, .lav-modifica-riga, .aula-corsisti-riga, .attestati-riga, .al-espanso, .azienda-dettaglio-riga):hover > td{background:var(--blue-100);}
/* Righe alternate su tutte le tabelle (Riccardo, 02/10/2026: "righe colorate
   alternate, applicalo a tutte le tabelle"). Si conta SOLO sulle righe dati:
   le righe di dettaglio aperte col "+" (storico, allegati, modifica
   lavoratore, corsisti aula, attestati) non spostano l'alternanza. Il colore
   sta sul <tr>, così l'hover sulle celle continua a prevalere. Vale anche per
   la tabella interna del dettaglio abilitazioni (è una .reg-table). */
table.reg-table > tbody > tr:nth-child(even of :not(.storico-riga, .allegati-riga, .lav-modifica-riga, .aula-corsisti-riga, .attestati-riga, .al-espanso, .azienda-dettaglio-riga)){background:#f3f6f9;}
table.reg-table > tbody > tr:nth-child(odd of :not(.storico-riga, .allegati-riga, .lav-modifica-riga, .aula-corsisti-riga, .attestati-riga, .al-espanso, .azienda-dettaglio-riga)){background:#fff;}
table.reg-table td.wrap{white-space:normal;min-width:220px;}
/* Colonne più strette (Riccardo, 29/09/2026) per l'elenco corsi lato
   cliente quando sta a fianco del calendario, non a piena larghezza -
   vedi renderCalendarioBox/elencoSessioniHtml in app.js. */
table.reg-table.reg-table-compact th, table.reg-table.reg-table-compact td{padding:4px 6px;font-size:.78rem;}
/* Barra proporzionale della tabella "Andamento per anno" (Statistiche
   Infortuni): stesso markup a video e in stampa (.doc), colori diversi per
   restare coerenti con lo stile di ciascun contesto - blu del tema a
   video, nero/grigio in stampa come il resto dei documenti stampati. */
.stat-bar-track{min-width:60px;height:12px;background:#f2f2f2;border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.stat-bar-fill{height:100%;background:var(--blue-700,#1e5a8a);}
.doc .stat-bar-track{border-color:#000;background:#fff;}
.doc .stat-bar-fill{background:#666;}
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:600;}
.badge.open{background:var(--amber-100);color:var(--amber-500);}
.badge.closed{background:var(--green-100);color:var(--green-700);}
.badge.overdue{background:var(--red-100);color:var(--red-600);}
/* Mai barrato (Riccardo, 02/10/2026: "smettila di riportare scritte barrate"). */
.badge.void{background:#e4e4e4;color:#666;}
.badge.void.badge-no-strike{text-decoration:none;}
/* Formazione -> Elenco: data scadenza evidenziata in blu quando è entro
   i 6 mesi (stessa soglia di statusForDate.js per "in_scadenza") - un
   avviso in più sopra al badge verde "Abilitato", per segnalare un
   rinnovo vicino senza introdurre un terzo colore di badge. */
.data-in-scadenza{color:var(--blue-700);font-weight:600;}
/* Editor minimale (grassetto/elenco puntato) per campi tipo "argomenti
   del corso" che devono conservare una formattazione semplice - vedi
   richTextFieldHtml/wireRichTextToolbars in app.js. */
.richtext-toolbar{display:flex;gap:6px;margin-bottom:4px;}
.richtext-editable{min-height:110px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:#fff;overflow:auto;}
.richtext-editable:focus{outline:2px solid var(--blue-500);outline-offset:1px;}
.richtext-editable ul{margin:0 0 0 1.2em;padding:0;}
/* Righe della tab "Moduli" nel dettaglio azienda (pannello di controllo):
   checkbox/etichetta a sinistra, badge di stato sempre visibile a destra
   - sostituisce i due confirm() a catena di prima, dove lo stato si
   vedeva solo riaprendo il dialogo. */
.modulo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);max-width:420px;}
.modulo-row:last-of-type{border-bottom:none;}
/* Niente display:flex qui: sul <td> stesso rompe il comportamento normale di
   cella di tabella (vertical-align smette di funzionare, l'altezza della riga
   non si calcola piu' bene) - causa reale dei pulsanti Apri/Stampa che non si
   allineavano col resto della riga. Spaziatura tra i due pulsanti via margine. */
.row-actions{white-space:nowrap;}
.row-actions button{margin-right:6px;}
.row-actions button:last-child{margin-right:0;}
.empty-state{color:var(--ink-500);text-align:center;padding:40px 10px;}

/* ---------- Autosave indicator ---------- */
.save-indicator{font-size:.76rem;color:var(--ink-500);display:flex;align-items:center;gap:6px;}
.save-indicator .dot{width:7px;height:7px;border-radius:50%;background:var(--green-700);}

/* ---------- Campi disabilitati/bloccati: sfondo grigio neutro, cosi' si
   capisce a colpo d'occhio che sono inibiti apposta e non che "non funzionano" ---------- */
input:disabled, textarea:disabled, select:disabled{
  background:#f0f1f3;color:var(--ink-500);cursor:not-allowed;
}
/* Le checkbox/radio native non mostrano lo sfondo grigio sopra: si scolorisce
   il controllo stesso e si affievolisce l'etichetta, cosi' si legge inibito
   anche per loro. */
input[type=checkbox]:disabled, input[type=radio]:disabled{
  opacity:.55;filter:grayscale(1);cursor:not-allowed;
}
.check-opt:has(input:disabled), .radio-opt:has(input:disabled){
  opacity:.6;
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--ink-900);color:#fff;padding:10px 18px;border-radius:8px;
  font-size:.85rem;z-index:100;box-shadow:0 4px 14px rgba(0,0,0,.25);
}

/* ---------- Print root hidden on screen ---------- */
#print-root{display:none;}

/* =====================================================
   PRINT LAYOUT (modulistica MOD-03.x / registri)
   ===================================================== */
@media print{
  /* 'display:none' rimuove davvero questi elementi dal flusso della pagina
     durante la stampa (a differenza del vecchio trucco con visibility:hidden,
     che lasciava lo spazio occupato e generava pagine bianche prima del
     contenuto vero in #print-root). */
  @page{
    /* Chrome/Edge disegnano la loro intestazione/piè di pagina di default
       (titolo pagina + data/ora, url + numero pagina) SOLO nel margine
       superiore/inferiore, e solo quando quel margine è abbastanza grande
       da starci - sotto una certa soglia (verificato: tra 8 e 10mm)
       rinunciano e non li stampano affatto. Il margine superiore/inferiore
       va quindi tenuto a 8mm (non di più, altrimenti tornano); il margine
       sinistro/destro invece non c'entra nulla con l'intestazione del
       browser e si può allargare liberamente - destro più largo degli
       altri perché alcune stampanti hanno un'area non stampabile più ampia
       proprio su quel lato e tagliavano il bordo dei riquadri (es.
       .doc-head) troppo vicini al margine richiesto via CSS. Margine 0
       funzionerebbe altrettanto bene per nascondere l'intestazione del
       browser, ma romperebbe l'impaginazione multipagina: un padding sul
       contenuto (es. su .doc) si applica solo all'inizio/fine di TUTTO il
       contenuto, non a ogni singola pagina in cui si spezza, quindi dalla
       pagina 2 in poi il testo partirebbe incollato al bordo del foglio -
       il margine @page invece si ripete correttamente su ogni pagina per
       costruzione. */
    size:A4; margin:8mm 18mm 8mm 14mm;
  }
  /* body ha min-height:100vh per lo schermo: in stampa 100vh è l'altezza
     di un foglio intero, quindi con il margine/riga finale del contenuto
     usciva sempre una seconda pagina vuota (verificato con Edge headless:
     2 pagine, con min-height:0 una sola). */
  html, body{ min-height:0 !important; }
  #app-header, #app-shell, #app-footer, .toast{ display:none !important; }
  #print-root{ display:block; }
}

.doc{
  font-family:Arial,"Segoe UI",Helvetica,sans-serif;
  color:#111;
  font-size:14px;
  line-height:1.35;
}
/* Senza questo, alcuni browser/stampanti tolgono di default gli sfondi
   colorati in stampa (a meno che l'utente non spunti "Grafica di sfondo"),
   rendendo incoeranti i bordi/riquadri e invisibili le caselle spuntate
   che si basavano sullo sfondo scuro per il contrasto. */
.doc, .doc *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.doc .doc-head{
  display:grid;grid-template-columns:1fr 2.3fr 1fr;
  border:1px solid #000;margin-bottom:10px;
}
.doc .doc-head > div{padding:6px 8px;border-right:1px solid #000;display:flex;flex-direction:column;justify-content:center;}
.doc .doc-head > div:last-child{border-right:none;}
.doc .doc-head .dh-company{align-items:center;text-align:center;padding:0;}
/* Altezza fissa indipendente dalla forma/proporzioni del logo caricato: non
   deve mai far crescere la riga dell'intestazione ne' sbilanciare le altre
   due colonne (titolo modulo, data di stampa). */
.doc .doc-head .dh-company .dh-logo{display:block;max-height:24px;max-width:80%;object-fit:contain;margin:5px auto 0;}
.doc .doc-head .dh-company .name{font-weight:700;font-size:15px;padding:6px 8px;}
.doc .doc-head .dh-company .code{font-weight:700;font-size:14px;border-top:1px solid #000;padding:4px 8px;width:100%;box-sizing:border-box;text-align:center;}
.doc .doc-head .dh-title{align-items:center;text-align:center;}
.doc .doc-head .dh-title h1{font-size:18px;margin:0;}
.doc .doc-head .legal-ref{font-size:10px;color:#000;margin-top:3px;}
.doc .doc-head .dh-code{align-items:flex-end;text-align:right;font-size:11px;gap:2px;color:#000;}
/* Tabella "invisibile" (nessun bordo/padding proprio) usata solo per far
   ripetere l'intestazione (doc-head) in cima a ogni pagina quando un
   documento supera una pagina in stampa: sfrutta il <thead> che i browser
   ripetono nativamente quando una <table> si spezza su più pagine (stesso
   meccanismo già usato per le intestazioni di colonna delle tabelle dati
   sotto) - un <div> normale non lo farebbe, restando solo sulla prima
   pagina. Selettori con '>' cosi' non toccano le tabelle vere annidate nel
   contenuto (persone presenti, follow up, ecc.), solo le celle dirette di
   questo wrapper. */
.doc table.doc-repeat{width:100%;border-collapse:collapse;margin:0;}
.doc table.doc-repeat > thead > tr > td,
.doc table.doc-repeat > tbody > tr > td{border:none;padding:0;font-size:inherit;text-align:inherit;background:none;}
/* Registro: stesso principio, ma l'intestazione è una riga in più dentro il
   <thead> della tabella dati già esistente (che ripete già le intestazioni
   di colonna), invece di una tabella separata annidata. */
.doc table.doc-reg > thead > tr > td.doc-head-row{border:none;padding:0;background:none;}
/* Fascia grigia che marca di chi e' la parte che segue (Segnalante / SPP / Ufficio Personale) */
.doc .cura-band{
  background:#e3e3e3;text-align:center;
  font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:6px;margin:10px 0 8px;
}
.doc section{margin-bottom:9px;}
.doc h2{
  font-size:14px;text-transform:uppercase;letter-spacing:.03em;
  padding:0;margin:8px 0 5px;
}
/* Solo il titolo va sottolineato, non il sottotitolo/hint sotto: siccome
   quest'ultimo va a capo (display:block), ::first-line del titolo coincide
   sempre con il solo titolo - niente bisogno di spezzare il markup in due
   elementi separati per evitare che l'hint erediti la sottolineatura. */
.doc h2::first-line{text-decoration:underline;}
.doc h2 .field-hint{display:block;text-transform:none;font-weight:400;font-size:13px;color:#555;letter-spacing:normal;margin-top:2px;}
.doc h3{font-size:14px;margin:6px 0 3px;}
.doc .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 14px;}
.doc .grid .g2{grid-column:span 2;}
.doc .grid .g3{grid-column:span 3;}
.doc .kv{border-bottom:1px solid #000;padding:2px 0;}
.doc .kv.code-line{border-bottom:none;text-align:right;}
.doc .kv b{font-weight:600;}
.doc table{width:100%;border-collapse:collapse;margin:4px 0;}
/* Riepilogo Near Miss e Statistiche Infortuni: colonne tutte della stessa
   larghezza (nessuna esplicitata su th/td, table-layout:fixed le distribuisce
   in automatico in parti uguali) - senza, il browser le dimensiona in base al
   contenuto e risultano visibilmente diverse fra loro in stampa. */
.doc table.stat-table{table-layout:fixed;}
.doc table th, .doc table td{border:1px solid #000;padding:3px 5px;font-size:13px;text-align:left;}
.doc table th{background:#eee;}
/* niente più white-space:nowrap: con etichette lunghe (es. "Assenza o
   inadeguatezza di percorsi in sicurezza...") impediva di andare a capo,
   sbordando dal foglio invece di restare dentro la colonna - min-width:0
   serve perché è un elemento di .check-flow (display:grid), che senza
   questo non lascerebbe comunque restringere la colonna sotto il
   min-content del testo. */
.doc .chk{display:inline-block;margin-right:10px;min-width:0;overflow-wrap:break-word;}
/* La X è testo nero in grassetto, non bianco su sfondo scuro: cosi' resta
   ben visibile anche quando lo sfondo colorato non viene stampato (dipende
   dall'opzione "Grafica di sfondo" della finestra di stampa del browser). */
.doc .chk .box{display:inline-block;width:10px;height:10px;border:1px solid #000;margin-right:3px;text-align:center;line-height:9px;font-size:9px;font-weight:700;color:#000;vertical-align:middle;}
.doc .check-flow{display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;}
.doc .text-block{border:1px solid #000;min-height:20px;padding:4px 6px;white-space:pre-wrap;}
.doc .sign-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:14px;}
/* Non e' una riga "da firmare" (il nome e' gia' scritto sotto): solo
   un'etichetta sottolineata sopra il valore compilato, niente linea vuota. */
.doc .sign-box{font-size:12.5px;}
.doc .sign-box .sign-label{font-weight:700;display:block;margin-bottom:2px;}
/* Spazio riservato alla firma: riquadro vuoto per firmare a penna dopo la
   stampa (default), oppure - quando è stata raccolta una firma digitale su
   schermo - il riquadro contiene l'immagine del tratto (vedi .sign-area-img
   sotto e signBox in app.js). Nome e data restano testo sopra in entrambi i casi. */
.doc .sign-box .sign-area{border:1px solid #000;min-height:34px;margin-top:4px;}
.doc .sign-box .sign-area-img{display:flex;align-items:center;justify-content:center;padding:2px;}
.doc .sign-box .sign-area-img img{max-height:30px;max-width:100%;object-fit:contain;}
.doc .page-break{page-break-before:always;}
.doc .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:4px;}
.doc .photo-grid figure{margin:0;border:1px solid #000;padding:4px;page-break-inside:avoid;break-inside:avoid;}
/* object-fit:contain, non cover: la foto va vista per intero così com'è
   stata caricata, non ritagliata per riempire il riquadro - a costo di
   lasciare un bordo vuoto sopra/sotto o ai lati quando le proporzioni non
   coincidono esattamente con quelle della cella. */
.doc .photo-grid img{width:100%;height:130px;object-fit:contain;background:#f2f2f2;display:block;}
.doc .photo-grid figcaption{font-size:11px;text-align:center;margin-top:3px;}
.doc .small-note{font-size:11px;color:#666;}
.doc .reg-title{font-size:18px;font-weight:700;margin-bottom:2px;}

/* ---------- Registro aula (pezzo 6 gestionale Formazione) ---------- */
/* Una <table class="doc-reg"> per pagina (non una sola tabella che scorre
   libera come le altre stampe sopra): Riccardo vuole esattamente 30 righe
   corsisti per foglio, comprese righe vuote per le aggiunte a mano
   dell'ultimo minuto - vedi buildPrintRegistroAula in app.js. .page-break
   qui sotto è la stessa classe già usata sopra (riga 605) su una
   <table> intera, mai fatto finora. */
.doc table.reg-aula-table{width:100%;border-collapse:collapse;margin-bottom:4px;}
.doc table.reg-aula-table th, .doc table.reg-aula-table td{border:1px solid #000;padding:3px 5px;font-size:11.5px;text-align:left;}
.doc table.reg-aula-table th{background:#eee;}
.doc table.reg-aula-table th.reg-aula-col-nr, .doc table.reg-aula-table td:first-child{width:28px;text-align:center;}
.doc .reg-aula-head{border:1px solid #000;padding:6px 8px;margin-bottom:0;}
.doc .reg-aula-head-top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.doc .reg-aula-azienda{display:flex;align-items:center;gap:8px;}
.doc .reg-aula-logo-img{max-height:26px;max-width:110px;object-fit:contain;}
.doc .reg-aula-ragione{font-weight:700;font-size:13px;}
.doc .reg-aula-pagina{font-size:11px;font-weight:700;white-space:nowrap;}
.doc .reg-aula-titolo{font-size:14px;text-align:center;margin:4px 0;}
.doc .reg-aula-disclaimer{font-size:9px;line-height:1.25;margin:2px 0 6px;text-align:justify;}
.doc .reg-aula-disclaimer ol{margin:2px 0 0 16px;padding:0;text-align:justify;}
.doc table.reg-aula-info{width:100%;border-collapse:collapse;margin:4px 0;}
.doc table.reg-aula-info td{border:1px solid #000;padding:2px 5px;font-size:11px;}
.doc table.reg-aula-info td.lbl{font-weight:700;width:15%;white-space:nowrap;}
.doc .reg-aula-docenti{margin:4px 0;}
.doc .reg-aula-firma-riga{display:flex;justify-content:space-between;gap:12px;font-size:11px;border-bottom:1px dotted #000;padding:2px 0;}
.doc table.reg-aula-lezioni{width:100%;border-collapse:collapse;margin:4px 0;}
.doc table.reg-aula-lezioni th, .doc table.reg-aula-lezioni td{border:1px solid #000;padding:2px 4px;font-size:10.5px;text-align:center;}
.doc .reg-aula-vuoto{font-style:italic;color:#555;}
.doc .reg-aula-note{border:1px solid #000;padding:4px 8px;margin:0 0 10px;font-size:11px;}
.doc .reg-aula-note b{display:block;margin-bottom:2px;}
.doc .reg-aula-note-riga{border-bottom:1px dotted #000;height:14px;}

/* ---------- Attestati (27/09/2026, formato ricalcato su 3 attestati
   reali in Scadenzari/STAMPE) ---------- */
/* Fronte e retro di un corsista sono due .attestato-blocco dentro lo
   stesso .doc (stesso schema page-break del Registro Aula sopra, riga
   643: .page-break sta sul blocco stesso, mai su un contenitore a
   parte) - vedi buildAttestatoFronte/buildAttestatoRetro in app.js. */
/* Ogni blocco è una pagina A4 intera (@page margin 0 in
   buildPrintAttestati): il fronte usa la carta intestata vera
   (attestato-sfondo.jpg: fascia azzurra con onda, cornice dorata, logo,
   piè di pagina BESTINFO SRL, bollino e firma già dentro l'immagine) con
   sopra i soli testi variabili, posizionati come negli attestati di
   esempio di Riccardo. */
.doc.attestati{font-family:"Open Sans","Segoe UI",Arial,Helvetica,sans-serif;}
.doc .attestato-blocco{width:210mm;height:297mm;position:relative;overflow:hidden;box-sizing:border-box;}
.doc .attestato-sfondo{position:absolute;left:0;top:0;width:210mm;height:297mm;z-index:0;}
.doc .attestato-fronte .attestato-head{position:absolute;left:0;right:0;top:57mm;text-align:center;z-index:1;}
/* border/text-decoration azzerati: le regole generiche dei titoli di
   stampa (.doc h1/h2) li sottolineano. */
.doc .attestato-titolo{font-size:33px;font-weight:700;margin:0;letter-spacing:.01em;color:#111;border:0;text-decoration:none;}
.doc .attestato-sottotitolo{font-size:22px;font-weight:700;margin:5mm 0 0;color:#111;border:0;text-decoration:none;}
.doc .attestato-sottotitolo::first-line{text-decoration:none;}
/* Corpo sotto l'onda, fino a sopra il piè di pagina stampato nello sfondo. */
.doc .attestato-identita{position:absolute;left:31mm;right:28mm;top:118mm;bottom:58mm;z-index:1;font-size:14px;line-height:1.75;color:#111;}
.doc .attestato-riga{margin:2px 0;}
.doc .attestato-nome{font-size:19px;font-weight:700;margin:2px 0;}
.doc .attestato-corso{font-size:18px;font-weight:700;margin:4px 0;line-height:1.35;}
.doc .attestato-normativa{font-size:13px;margin:6px 0;line-height:1.45;}
.doc .attestato-data{margin-top:5mm;}
.doc .attestato-retro{padding:16mm 18mm;}
.doc .attestato-logo-retro{display:block;margin-left:auto;max-height:18mm;max-width:45mm;object-fit:contain;margin-bottom:8mm;}
.doc .attestato-corso-retro{font-size:14.5px;font-weight:700;text-transform:uppercase;margin-bottom:4px;}
.doc .attestato-retro-evidenza{font-size:14.5px;font-weight:700;margin:2px 0;}
.doc .attestato-argomenti,.doc .attestato-crediti{font-size:11.5px;margin-top:6mm;}
.doc .attestato-argomenti h3{font-size:15px;margin:0 0 4px;}
.doc .attestato-crediti h3{font-size:15px;margin:0 0 4px;text-align:center;}

/* ---------- Poster QR code per la bacheca ---------- */
/* Poster standard illustrato (public/qr-poster-bg.png, A4 verticale): il QR
   di questa azienda è posizionato in assoluto sopra il riquadro bianco già
   disegnato nell'immagine. Coordinate in percentuale (misurate una volta
   sul file sorgente 1055x1491px) cosi' restano corrette a qualunque
   risoluzione di stampa, dato che il contenitore mantiene le stesse
   proporzioni dell'immagine (width:210mm/height:297mm = rapporto A4, uguale
   al rapporto del file PNG). */
.doc.qr-poster-bg{position:relative;width:210mm;height:297mm;margin:0;padding:0;overflow:hidden;}
.doc.qr-poster-bg .qrp-bg-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.doc.qr-poster-bg .qrp-bg-qr{position:absolute;left:35.8%;top:45.7%;width:28.4%;height:20.1%;}
.doc.qr-poster-bg .qrp-bg-qr svg{width:100%;height:100%;}

/* ---------- Testo introduttivo modulo Near Miss / Non Conformità ---------- */
.intro-definitions{
  background:var(--blue-50, #eef5fb);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px 16px;
  margin-bottom:16px;
  font-size:.86rem;
}
.intro-definitions p{margin:0 0 8px;}
.intro-definitions p:last-child{margin-bottom:0;}
.intro-definitions i{color:var(--ink-500);}

/* ---------- Tab Impostazioni ---------- */
.settings-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line);}
.settings-tabs .tab-btn{
  background:none;border:none;border-bottom:2px solid transparent;
  padding:8px 4px;margin-right:14px;font-size:.92rem;color:var(--ink-500);cursor:pointer;
}
.settings-tabs .tab-btn.active{color:var(--blue-700);border-bottom-color:var(--blue-700);font-weight:600;}
/* Sottomenu del pannello di controllo (Gestione/Corsi e Abilitazioni/
   Riepiloghi) - stesso identico meccanismo a tendina di .export-dropdown,
   solo dentro la barra dei tab invece che su un pulsante isolato. */
.control-nav-group{position:relative;display:inline-block;}
/* Dettaglio azienda sotto il menu principale (02/10/2026): titolo compatto
   fra la barra del pannello e le sotto-schede. */
.page-title.azienda-titolo{margin:0 0 8px;}
/* Menu del pannello a blocchi (Riccardo, 02/10/2026, dal suo schizzo): per
   ogni gruppo il titolo sopra, le voci in linea sotto; i gruppi con una sola
   voce (Aziende, Lavoratori) hanno il titolo vuoto così le voci stanno tutte
   sulla stessa riga. Il titolo ha una riga sotto che "abbraccia" le sue voci
   (la parentesi dello schizzo). */
.settings-tabs.control-nav-blocchi{align-items:flex-end;gap:0 14px;padding-bottom:0;}
.nav-blocco{display:flex;flex-direction:column;align-items:stretch;}
.nav-blocco-titolo{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-500);text-align:center;padding:0 8px 3px;line-height:1.2;white-space:nowrap;}
.nav-blocco-voci{display:flex;gap:0;justify-content:center;}
.control-nav-blocchi .tab-btn{margin:0;padding:8px 12px;white-space:nowrap;border-radius:6px 6px 0 0;}
/* Lineetta leggera fra una voce e la successiva e hover come i pulsanti
   (Riccardo, 02/10/2026: "per far capire la sua dimensione"). */
.control-nav-blocchi .nav-blocco-voci > .tab-btn + .tab-btn,
.control-nav-blocchi .nav-blocco-voci > * + .control-nav-group{border-left:1px solid var(--line);}
.control-nav-blocchi .nav-blocco-voci > .tab-btn + .tab-btn{border-radius:0 6px 0 0;}
.control-nav-blocchi .nav-blocco-voci > .tab-btn:first-child:not(:last-child){border-radius:6px 0 0 0;}
.control-nav-blocchi .tab-btn:hover{background:var(--blue-100);color:var(--blue-700);}
/* Linguette Riepiloghi colorate come i due "+" dell'elenco Aziende (Riccardo,
   02/10/2026: "così a colpo d'occhio capisco"): Abilitazioni azzurra come il
   "+" lavoratori, Adempimenti verde come il "+" documenti. */
.control-nav-blocchi .tab-btn[data-control-tab="riepilogo-abilitazioni"]{background:#dceaf5;color:var(--blue-700);border-bottom-color:var(--blue-500);}
.control-nav-blocchi .tab-btn[data-control-tab="riepilogo-abilitazioni"]:hover{background:#c6dcef;}
.control-nav-blocchi .tab-btn[data-control-tab="riepilogo-abilitazioni"].active{background:#c6dcef;border-bottom-color:var(--blue-700);}
.control-nav-blocchi .tab-btn[data-control-tab="riepilogo-adempimenti"]{background:#def3e6;color:#1f6f40;border-bottom-color:#2e9e5b;}
.control-nav-blocchi .tab-btn[data-control-tab="riepilogo-adempimenti"]:hover{background:#c8ebd6;color:#1f6f40;}
.control-nav-blocchi .tab-btn[data-control-tab="riepilogo-adempimenti"].active{background:#c8ebd6;color:#1f6f40;border-bottom-color:#1f6f40;}
.control-nav-blocchi .control-nav-group{display:block;}
/* Gruppo con sottomenu (Corsi e Abilitazioni, Riepiloghi) ben riconoscibile
   (Riccardo, 02/10/2026: "metti maggiormente in evidenza che sono
   sottomenù"): riquadro azzurrino con gli angoli alti arrotondati, titolo in
   grassetto blu con una riga spessa che abbraccia le sue voci. */
.nav-blocco-gruppo{background:rgba(26,115,160,.07);border-radius:10px 10px 0 0;padding:4px 6px 0;}
.nav-blocco-gruppo .nav-blocco-titolo{font-size:.74rem;font-weight:700;color:var(--blue-700);border-bottom:2px solid var(--blue-500);margin:0 2px;}
.nav-blocco-gruppo.nav-blocco-attivo{background:rgba(26,115,160,.14);}
.nav-blocco-gruppo.nav-blocco-attivo .nav-blocco-titolo{border-bottom-color:var(--blue-700);}
.nav-blocco-gruppo .tab-btn{padding:8px 8px;}
.control-nav-submenu button.active{background:var(--blue-100);font-weight:600;}

/* ---------- Calendario corsi (Corsi e Abilitazioni) ----------
   Palette riusata identica a quella dei badge di stato (righe 1-11):
   niente tinte nuove, "senza arlecchino" per costruzione. */
.corsi-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.corsi-calendar-day{height:110px;overflow-y:auto;border:1px solid var(--line);border-radius:6px;padding:4px;font-size:.8rem;}
.corsi-calendar-day.out{background:var(--bg);color:var(--ink-300);}
.corsi-calendar-head{height:auto;text-align:center;font-weight:600;padding:4px 0;overflow:visible;}
.corsi-calendar-day .day-num{font-weight:600;margin-bottom:4px;}
.corsi-calendar-chip{display:block;border-radius:4px;padding:1px 4px;margin-bottom:2px;font-size:.72rem;white-space:normal;overflow-wrap:break-word;line-height:1.2;}
.corso-c0{background:var(--blue-100);color:var(--blue-700);}
.corso-c1{background:var(--amber-100);color:var(--amber-500);}
.corso-c2{background:var(--green-100);color:var(--green-700);}
.corso-c3{background:var(--red-100);color:var(--red-600);}
.cal-mese-label{font-weight:600;margin:0 8px;}

/* ---------- Badge notifiche in nav ---------- */
.nav-badge{
  display:inline-block;background:var(--red-600);color:#fff;
  font-size:.68rem;font-weight:700;line-height:1;
  padding:2px 6px;border-radius:999px;margin-left:5px;vertical-align:middle;
}

/* ---------- Pallino "non ancora presa in carico" nella lista Near Miss ----------
   Posizionato in assoluto in uno spazio riservato a sinistra del numero, cosi'
   il numero resta sempre alla stessa posizione, ci sia il pallino o no (prima
   il pallino "spingeva" il numero e, se la colonna era stretta, lo mandava
   a capo su una riga separata). */
.num-cell{position:relative;padding-left:15px;white-space:nowrap;}
.pending-dot{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--red-600);
}

/* Accesso docente: corsista escluso (stadio Annullato) in grigio */
.reg-table tr.riga-esclusa td{color:var(--ink-500);}

/* Argomenti a scelta all'iscrizione (01/10/2026) */
.argomenti-scelta{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:var(--blue-100);}
.argomenti-scelta .check-opt{padding:4px 0;}
.argomenti-classifica{margin:14px 0 6px;}
.arg-barra{height:10px;background:#eef1f4;border-radius:5px;overflow:hidden;}
.arg-barra span{display:block;height:100%;background:var(--blue-500);}
.reg-table tr.arg-piu-scelto td{font-weight:600;}

/* Tendina di suggerimenti nostra, larga come la casella (app.js, "Tendine di
   suggerimenti", 01/10/2026) al posto di quella nativa del <datalist>. */
.tendina-suggerimenti{position:absolute;z-index:10050;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(11,61,99,.18);max-height:300px;overflow-y:auto;padding:4px 0;}
.tendina-voce{padding:8px 12px;cursor:pointer;font-size:.92rem;line-height:1.3;color:var(--ink-900);}
.tendina-voce b{color:var(--blue-700);}
.tendina-voce:hover,.tendina-voce.attiva{background:var(--blue-100);}
input[list]::-webkit-calendar-picker-indicator{display:none !important;}
input[list],input[data-lista]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2366717c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;}

/* Cambio password al primo accesso (app.js renderCambioPasswordObbligatorio) */
/* Scheda al centro della pagina, campi larghi quanto la scheda (01/10/2026) */
.cambio-password-pagina{max-width:560px;margin:4vh auto 0;}
.cambio-password-pagina .page-title{justify-content:center;text-align:center;}
.cambio-password-campi{display:grid;gap:12px;margin-top:8px;}
.cambio-password-campi input{width:100%;box-sizing:border-box;}
.cambio-password-pagina .actions-bar{justify-content:center;}
.cambio-password-campi .field{margin:0;}

/* Errore dentro la finestra "Iscrivi un lavoratore" (01/10/2026) */
.iscrivi-errore{margin:12px 0 0;padding:10px 12px;border-left:3px solid var(--red-600);background:var(--red-100);color:var(--red-600);border-radius:4px;font-weight:600;}

/* Esito dell'iscrizione multipla (01/10/2026) */
.esito-elenco{margin:0 0 4px;padding-left:20px;max-height:220px;overflow-y:auto;}
.esito-elenco li{margin:3px 0;}
.esito-saltati li{color:var(--ink-700);}

/* Scelta argomenti all'iscrizione: aspetto proprio, anche dentro le finestre ariose (01/10/2026) */
.argomenti-scelta .arg-titolo{font-weight:700;color:var(--ink-900);margin:0 0 4px;}
.argomenti-scelta .arg-spiegazione{font-size:.88rem;color:var(--ink-500);margin:0 0 10px;line-height:1.4;}
.argomenti-scelta .arg-voci{display:grid;gap:2px;}
.argomenti-scelta .arg-contatore{margin-top:10px;font-size:.88rem;font-weight:600;color:var(--blue-700);}

/* "Iscrizione inviata" lato cliente: in attesa, non barrato (01/10/2026) */
.badge.inviata{background:var(--blue-100);color:var(--blue-700);}
/* "+" del dettaglio (cliente: corsi svolti; pannello: dettaglio abilitazioni) ben visibile */
/* "+" che apre il dettaglio (Riccardo, 02/10/2026: "più sfumata"): sfumatura
   blu con ombra morbida; .scaduto = sfumatura arancione quando nel dettaglio
   c'è almeno un'abilitazione scaduta. */
/* "+" con le stesse tinte delle linguette Riepiloghi (Riccardo, 02/10/2026:
   "fai dello stesso azzurro e dello stesso verde i +"): fondo chiaro, segno
   scuro, bordo nel colore pieno. Il "+" arancione (scaduto) resta com'era. */
.dettaglio-plus{width:32px;height:32px;padding:0;border-radius:50%;border:1px solid var(--blue-500);background:#dceaf5;color:var(--blue-700);font-size:1.25rem;font-weight:700;line-height:30px;text-align:center;cursor:pointer;vertical-align:middle;box-shadow:0 1px 4px rgba(26,115,160,.18);transition:box-shadow .12s,background .12s;}
/* Hover: la regola generica button:hover (sfondo chiaro) va sovrascritta
   ridichiarando la sfumatura, un po' più chiara, con l'ombra più marcata. */
.dettaglio-plus:hover{background:#c6dcef;color:var(--blue-700);box-shadow:0 2px 8px rgba(26,115,160,.35);}
/* "+" verde dei Documenti nell'elenco Aziende (Riccardo, 02/10/2026: "di colore diverso"). */
.dettaglio-plus.documenti{background:#def3e6;color:#1f6f40;border-color:#2e9e5b;box-shadow:0 1px 4px rgba(31,111,64,.18);}
.dettaglio-plus.documenti:hover{background:#c8ebd6;color:#1f6f40;box-shadow:0 2px 8px rgba(31,111,64,.35);}
.azienda-azioni{white-space:nowrap;}
.azienda-azioni .small{margin:0 6px 0 0;}
.azienda-azioni .dettaglio-plus + .dettaglio-plus{margin-left:6px;}
.azienda-dettaglio-riga > td{background:var(--blue-100, #eef4fb);padding:10px 12px;}
.azienda-dettaglio-riga .card{margin:0 0 10px;box-shadow:none;border:1px solid var(--line);}
table.reg-table tr.azienda-dettaglio-riga > td{border-bottom:1px solid var(--line);}
.dettaglio-plus.scaduto{border:none;line-height:32px;color:#fff;background:linear-gradient(135deg,#ffd59a 0%,#f59e0b 55%,#c2410c 100%);box-shadow:0 2px 6px rgba(234,88,12,.32);}
.dettaglio-plus.scaduto:hover{background:linear-gradient(135deg,#ffe3b8 0%,#fbb03b 55%,#ea580c 100%);color:#fff;box-shadow:0 3px 10px rgba(234,88,12,.5);}
.cella-dettaglio{white-space:nowrap;width:1%;}
/* Tabelle Lavoratori (Riccardo, 02/10/2026): "Modifica" accanto al "+",
   Codice fiscale stretto (16 caratteri), Mansione più larga, Sede molto più
   larga. */
/* "Modifica" accanto al "+" (Riccardo, 02/10/2026: "più visibile, più spazio"). */
.btn-modifica-riga{margin-left:12px;border-color:var(--blue-500);color:var(--blue-700);font-weight:600;background:#fff;}
.btn-modifica-riga:hover{background:var(--blue-100);}
.aula-corsisti-riga > td{background:var(--blue-100, #eef4fb);padding:10px 12px;}
.aula-corsisti-riga .card{margin:0 0 10px;box-shadow:none;border:1px solid var(--line);}
table.reg-table tr.aula-corsisti-riga > td{border-bottom:1px solid var(--line);}
.reg-table th.col-cf{width:150px;}
.reg-table th.col-mansione{width:17%;}
.reg-table th.col-sede{width:26%;}

/* Riquadro "Iscrizioni alle aule" nel dettaglio abilitazioni del lavoratore
   (pannello, schizzo di Riccardo 01/10/2026): incorniciato, centrato, più stretto. */
/* Selettore iscrizione (Riccardo, 02/10/2026: "un tasto Iscrivi sull'abilitazione
   che propone i corsi che abilitano o aggiornano quell'abilitazione, seleziono
   la sessione e iscrivo"): etichette in linea a destra, campi allineati. */
.al-picker{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;}
.al-picker > label{text-align:right;font-size:.8rem;font-weight:600;color:var(--ink-700);white-space:nowrap;}
/* Altezza/padding coerenti: la regola globale dei select ha padding 7px, con
   height 30px il testo veniva tagliato (Riccardo, 02/10/2026, foto). */
.al-picker > select{width:100%;min-width:0;height:32px;padding:3px 8px;font-size:.82rem;line-height:normal;}
.al-picker .al-pk-azioni{grid-column:1 / -1;display:flex;gap:6px;justify-content:flex-end;}
.al-picker-nuovo{width:min(100%,640px);margin:0 0 12px;}
.iscrivi-cella{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.iscrivi-cella button[disabled]{opacity:.55;cursor:not-allowed;}

/* "Iscrivi a un corso" sulla riga dell'abilitazione (pannello, 01/10/2026) */
.cella-iscrivi{min-width:240px;}


/* Filtri dell'elenco Aule Corso (pannello) - Riccardo, 02/10/2026: "tipo
   corso troppo corto, cerca codice troppo lungo, cerca docente da allargare,
   le date tagliano l'anno". Tre colonne (la prima più stretta):
     Cerca codice | Tipo corso (2 colonne)
     Stato        | Cerca docente | Data inizio dal-al */
.list-toolbar .filters.filters-grid.filtri-aule{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,1.2fr);}
.filtri-aule > :nth-child(2){grid-column:span 2;}
@media (max-width:1000px){ .list-toolbar .filters.filters-grid.filtri-aule{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .list-toolbar .filters.filters-grid.filtri-aule{grid-template-columns:minmax(0,1fr);} .filtri-aule > :nth-child(2){grid-column:auto;} }

/* Lavoratori di un'azienda (pannello) - Riccardo, 02/10/2026: "i filtri (a
   parte Stato) allargali": Sede e Lavoratore larghi, Stato stretto. */
.list-toolbar .filters.filters-grid.filtri-lavoratori-azienda{grid-template-columns:minmax(0,1.7fr) minmax(0,1.7fr) minmax(0,1fr);}
@media (max-width:1000px){ .list-toolbar .filters.filters-grid.filtri-lavoratori-azienda{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .list-toolbar .filters.filters-grid.filtri-lavoratori-azienda{grid-template-columns:minmax(0,1fr);} }

/* Filtri dell'elenco Aziende (pannello): un'unica griglia, così le tre righe
   restano allineate fra loro (Riccardo, 01/10/2026). Tre colonne dal
   02/10/2026 ("hai rimpicciolito troppo i campi data, allarga i campi sopra;
   le date di scadenza restano a destra sotto Moduli"):
     Azienda        | Responsabile commerciale | Segnalatore
     Città          | Stato azienda            | Moduli acquistati
     Tipo contratto | attivato dal-al          | scadenza dal-al   (02/10/2026, foto) */
.list-toolbar .filters.filters-grid.filtri-aziende{grid-template-columns:repeat(3,minmax(0,1fr));}
.filtri-aziende .filtro-doppio{grid-column:auto;min-width:0;}
.filtri-aziende .filtro-doppio .filter-item{width:100%;}
@media (max-width:1000px){ .list-toolbar .filters.filters-grid.filtri-aziende{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .list-toolbar .filters.filters-grid.filtri-aziende{grid-template-columns:minmax(0,1fr);} .filtri-aziende .filtro-doppio,.filtri-aziende .filter-range{grid-column:auto;} }

/* Riga di separazione sottile fra le righe di TUTTE le tabelle (Riccardo,
   01/10/2026), compresi i dettagli aperti (abilitazioni, storico attestati). */
table.reg-table > tbody > tr > td{border-bottom:1px solid var(--line);}
table.reg-table > tbody > tr:last-child > td{border-bottom:none;}
table.reg-table tr.storico-riga > td{border-bottom:1px solid var(--line);}

/* Filtro "Tutti i corsi" del calendario (cliente e pannello): largo metà pagina (Riccardo, 01/10/2026) */
.list-toolbar .filters.cal-filtro-wrap{flex:0 0 50%;max-width:50%;min-width:0;}
.list-toolbar .filters.cal-filtro-wrap select{width:100%;}
@media (max-width:700px){ .list-toolbar .filters.cal-filtro-wrap{flex:1 1 100%;max-width:100%;} }

/* Elenco abilitazioni lato cliente (Riccardo, 01/10/2026): nome su una riga, Note stretta */
.reg-table.corsi-elenco .col-nome{white-space:nowrap;}
.reg-table.corsi-elenco td{white-space:nowrap;}
.reg-table.corsi-elenco td.col-note{white-space:normal;max-width:220px;font-size:.78rem;color:var(--ink-700);}
.reg-table.corsi-elenco td.col-note .hint{font-size:.76rem;}
.reg-table.corsi-elenco td.row-actions{white-space:normal;}

/* Finestre di dialogo dell'app (mostraAvviso / chiediConferma / chiediTesto):
   sopra a tutto, anche sopra un'altra finestra già aperta. */
.dialogo-app-overlay{z-index:3000;}
.dialogo-app-box{max-width:520px;padding:22px 24px;}
.dialogo-app-box h3{display:flex;align-items:center;gap:10px;font-size:1.15rem;margin:0 0 12px;}
.dialogo-app-icona{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:1rem;font-weight:700;flex:none;background:var(--blue-100);color:var(--blue-700);}
.dialogo-app-icona.avviso{background:#fdf1d6;color:#8a5a00;}
.dialogo-app-testo{white-space:pre-line;line-height:1.55;margin:0 0 6px;color:var(--ink-900);}
.dialogo-app-box input{width:100%;box-sizing:border-box;height:42px;padding:0 12px;margin-top:12px;font-size:1rem;}
.dialogo-app-box .firma-modal-actions{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
.dialogo-app-box .firma-modal-actions button{min-width:96px;}

/* Filtri: etichetta IN LINEA a sinistra del campo, di larghezza fissa
   (Riccardo, 01/10/2026: "in tutti i posti, proprio tutti, l'etichetta in
   linea col campo, e le caselle sulla stessa verticale"). La larghezza
   fissa è ciò che allinea le caselle fra una riga e l'altra: in ogni colonna
   della griglia la casella parte sempre a --filtro-etichetta dal bordo. */
:root{--filtro-etichetta:130px;}
.filter-item-labeled{flex-direction:row;align-items:center;gap:8px;}
.filter-item-labeled > .filter-item-label{flex:0 0 var(--filtro-etichetta);width:var(--filtro-etichetta);text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:600;color:var(--ink-700);line-height:1.15;white-space:normal;text-align:right;padding-right:2px;}
.filter-item-labeled > .filter-item-row{flex:1 1 0;width:auto;min-width:0;}
.filter-item-labeled > .filter-item-row > input,.filter-item-labeled > .filter-item-row > select{flex:1;width:100%;min-width:0;}
.filter-range.filter-item-labeled > .filter-item-row{flex-wrap:nowrap;}
.filter-range.filter-item-labeled > .filter-item-row > label{flex:1;min-width:0;}
.filter-range.filter-item-labeled > .filter-item-row input[type=date]{width:100%;min-width:0;}
/* Griglia di default più larga (etichetta + casella sulla stessa riga) e
   righe centrate in verticale. */
.list-toolbar .filters.filters-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-items:center;gap:12px 20px;}
.list-toolbar .filters.cal-filtro-wrap .filter-item{width:100%;}
@media (max-width:640px){ :root{--filtro-etichetta:96px;} }

/* Intervalli dal/al: "dal" dentro l'etichetta fissa (la prima data parte
   allineata alle altre caselle), "al" fra le due date con lo stesso stile. */
/* L'etichetta "X dal" era un inline-flex (regola .filter-range label): il
   testo corto restava a sinistra, lontano dalla casella (Riccardo,
   02/10/2026). Da blocco il text-align:right delle etichette funziona. */
.filter-range.filter-item-labeled > .filter-item-label{display:block;}
.filter-range.filter-item-labeled > .filter-item-row{gap:6px;}
.filter-range.filter-item-labeled > .filter-item-row > input[type=date]{flex:1 1 0;width:auto;min-width:0;padding-left:6px;padding-right:4px;font-size:.88rem;}
.filter-range.filter-item-labeled > .filter-item-row > .filter-range-al{flex:0 0 auto;width:auto;padding:0 2px;text-align:center;text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:600;color:var(--ink-700);}

/* E-learning (01/10/2026): editor dei corsi nel pannello, riquadri aula/docente */
.el-lezione{border-left:4px solid var(--blue-500);}
.el-domanda{padding:10px 12px;margin:8px 0;border:1px solid var(--line);border-radius:8px;background:var(--bg);}
.el-domanda .field{margin-bottom:6px;}
.el-risposta{display:flex;align-items:center;gap:8px;margin:4px 0;}
.el-risposta input[type=text]{flex:1;}
.el-risposta label{display:flex;align-items:center;}
.barra-avanzamento{height:8px;background:var(--ink-300);border-radius:4px;overflow:hidden;min-width:120px;}
.barra-avanzamento > div{height:100%;background:var(--blue-500);}
.barra-avanzamento.ok > div{background:var(--green-700);}
.el-thread{max-height:320px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:10px;background:#fff;}
.el-thread .m{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:var(--bg);max-width:85%;white-space:pre-line;}
.el-thread .m.mio{background:var(--blue-100);margin-left:auto;}
.el-thread .m .chi{font-size:.75rem;color:var(--ink-500);margin-bottom:3px;}
.dialogo-app-box textarea{width:100%;box-sizing:border-box;margin-top:12px;font-size:.95rem;}
/* Tentativo di corso non concluso (03/10/2026): riga dello storico senza date, in grigio corsivo. */
.storico-corsi tr.riga-non-conclusa td{color:#6b7280;font-style:italic}

/* Ricerca laterale lavoratori da trascinare nell'aula (03/10/2026) */
.drawer-candidati{position:fixed;top:64px;right:0;bottom:0;width:min(440px,92vw);background:#fff;border-left:1px solid var(--line);box-shadow:-6px 0 18px rgba(0,0,0,.12);z-index:900;display:flex;flex-direction:column;padding:12px 14px;overflow:hidden;}
.drawer-candidati .drawer-testa{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px;}
.drawer-candidati .drawer-filtri{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;}
.drawer-candidati .drawer-filtri input[type=text],.drawer-candidati .drawer-filtri select{width:100%;box-sizing:border-box;}
.drawer-candidati .drawer-date{display:flex;gap:8px;}
.drawer-candidati .drawer-date label{display:flex;align-items:center;gap:4px;flex:1;font-size:.85rem;}
.drawer-candidati .drawer-date input{flex:1;min-width:0;}
.drawer-candidati .drawer-azioni{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin-bottom:4px;}
.drawer-candidati .drawer-azioni .hint{margin-right:auto;}
.drawer-risultati{flex:1;overflow-y:auto;border-top:1px solid var(--line);}
.dc-riga{display:flex;gap:8px;align-items:flex-start;padding:8px 6px;border-bottom:1px solid var(--line);cursor:grab;}
.dc-riga:hover{background:var(--bg);}
.dc-riga.dc-disabilitata{opacity:.5;cursor:default;}
.dc-riga .dc-corpo{min-width:0;flex:1;}
.dc-riga .dc-nota{color:#b45309;}
body.dc-trascinando [id^=aula-form-corsisti], body.dc-trascinando .aula-corsisti-riga td{outline:2px dashed var(--blue-500);outline-offset:-3px;}
.drop-corsisti-attiva{background:var(--blue-100,#eef4fb) !important;outline:3px solid var(--blue-500) !important;outline-offset:-3px;}

/* Interruttore aula visibile/nascosta ai clienti (03/10/2026): verde = visibile, rosso = nascosta */
.btn-aula-attiva{min-width:86px;color:#fff;border:0;font-weight:600;margin-bottom:4px;}
.btn-aula-attiva.visibile{background:#16a34a;}
.btn-aula-attiva.visibile:hover{background:#15803d;}
.btn-aula-attiva.nascosta{background:#dc2626;}
.btn-aula-attiva.nascosta:hover{background:#b91c1c;}

/* ===== Maschere di inserimento: aspetto uniforme (Riccardo, 03/10/2026) =====
   - Titoletti di sezione tutti uguali: grassetto blu, una linea di separazione sopra
     (non sul primo della scheda), stessa distanza dal contenuto che segue.
   - Campi più in evidenza: etichetta scura, bordo più marcato, testo un po' più grande.
   - Spazi ridotti dove erano sprecati (righe di etichette vuote, margini del browser),
     così la maschera non si allunga.
   Si applica alle card che contengono dei campi (.field) e alle sezioni del Near Miss;
   i titoli con style="" inline (e-learning) e le finestre di dialogo restano come sono. */
.card:has(.field) h3:not([style]), .form-section h3:not([style]){
  font-size:.95rem;
  font-weight:700;
  color:var(--blue-900);
  margin:18px 0 0;
  padding:12px 0 0;
  border-top:1px solid var(--line);
}
.card:has(.field) > h3:first-child, .card:has(.field) > h2 + h3:not([style]),
.card:has(.field) div:first-child > h3:first-child:not([style]), .form-section > h3:first-child:not([style]){
  margin-top:0;
  padding-top:0;
  border-top:0;
}
/* Tutto ciò che segue un titoletto sta alla stessa distanza (8px). */
.card:has(.field) h3:not([style]) + *, .form-section h3:not([style]) + *{margin-top:8px;}
.card:has(.field) h3:not([style]) + p.hint, .card:has(.field) h3:not([style]) + .hint{margin-bottom:0;}
.field-grid{gap:12px 16px;}
.field{gap:5px;}
.field label{font-size:.9rem;color:var(--ink-900);font-weight:600;}
input[type=text], input[type=password], input[type=date], input[type=time], input[type=number], input[type=email], select, textarea{
  border-color:#a9b4bf;
  font-size:.92rem;
}
input[type=text]:hover:not(:disabled):not([readonly]), input[type=number]:hover:not(:disabled), input[type=date]:hover:not(:disabled),
input[type=time]:hover:not(:disabled), input[type=email]:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled){border-color:#7b8895;}
input[readonly], input:disabled, select:disabled, textarea:disabled{border-color:var(--line);}

/* Controllo di sistema sulle richieste di iscrizione (03/10/2026): riquadro con etichetta ben riconoscibile */
.controllo-sistema{border-left:4px solid #2563eb;background:#eff6ff;border-radius:6px;padding:6px 8px;font-size:.84rem;min-width:300px;max-width:440px;}
.controllo-sistema.attenzione{border-left-color:#d97706;background:#fffbeb;}
.controllo-sistema > div{margin-top:3px;line-height:1.3;}
.controllo-sistema .cs-tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.05em;color:#fff;background:#2563eb;border-radius:10px;padding:2px 8px;}
.controllo-sistema.attenzione .cs-tag{background:#d97706;}

/* Documenti di sicurezza (scheda Stampe, 04/10/2026) */
.ds-avviso{border-left:4px solid #d97706;background:#fffbeb;border-radius:6px;padding:8px 12px;margin:10px 0;font-size:.88rem;}
.ds-avviso ul{margin:4px 0 0 18px;padding:0;}
.ds-avviso li{margin:2px 0;}
.st-sep{border:0;border-top:1px solid var(--border,#d6dde4);margin:22px 0 14px;}
#st-docs > .hint{margin-bottom:12px;}
#st-docs h4{margin:18px 0 8px;}

.riga-spenta{opacity:.55;}

.tec-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;overflow:auto;}
.tec-modal-box{background:#fff;border-radius:12px;padding:20px;max-width:520px;width:100%;box-sizing:border-box;max-height:100%;overflow:auto;}
.tec-modal-box svg{width:260px;height:260px;max-width:100%;}

/* Nomine dei lavoratori (04/10/2026) */
.badge-nomine-manca{background:#fee2e2;color:#991b1b;margin-left:6px;}
tr.nomine-subrow > td{background:#f8fafc;padding:10px 14px;}
.nm-wrap .nm-testa{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:8px;}
.nm-manca{color:#b00020;font-weight:700;}
.nm-ok{color:#15803d;}
.nm-drop{cursor:pointer;vertical-align:top;}
.nm-drop.sopra{outline:2px dashed #2563eb;background:#eff6ff;}
.nm-drop.nm-nessuna{cursor:default;}
.nm-hint{opacity:.8;}
.nm-file{display:inline-block;margin-right:8px;}

.te-sez{border:1px solid #d6dde4;border-radius:8px;padding:8px 10px;margin:8px 0;}
.te-crit td.c{text-align:center;}
.te-crit .te-nota{width:100%;}

/* Controlli periodici del modulo Tecnico (04/10/2026) */
.tc-righe td { vertical-align: middle; }
.tc-righe input[type=text], .tc-righe input[type=date] { width: 100%; min-width: 110px; }
.tc-righe tr.tc-anomalo > td { background: #fde8e8; }
.tc-gruppo { border: 1px solid var(--line, #d6dde4); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; background: #fff; }
.tc-gruppo summary { cursor: pointer; }
.ds-avviso-riga { margin: 6px 0; }

/* Icone di sicurezza e scheda macchina (04/10/2026) */
.ic-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; max-height: 52vh; overflow: auto; margin: 6px 0; }
.ic-voce { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 2px solid var(--line, #d6dde4); border-radius: 10px; background: #fff; cursor: pointer; font-size: .74rem; line-height: 1.15; text-align: center; }
.ic-voce img { width: 56px; height: 56px; }
.ic-voce.sel { border-color: #1f5fa8; background: #e8f1fb; box-shadow: 0 0 0 2px #1f5fa8 inset; }
.ic-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ic-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 4px; border: 1px solid var(--line, #d6dde4); border-radius: 18px; background: #fff; font-size: .82rem; }
.ic-chip img { width: 30px; height: 30px; }
.ic-chip button { border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; color: #888; }
.sm-ver { max-height: 220px; overflow: auto; border: 1px solid var(--line, #d6dde4); border-radius: 8px; padding: 6px 8px; margin-top: 4px; background: #fff; }

/* Contenuti dell'informazione ai lavoratori (modulo Tecnico): letti dal lavoratore in informazione.html e in anteprima nel gestionale */
.inf-lettura{line-height:1.55;font-size:1.02rem;}
.inf-lettura h3{margin:18px 0 6px;font-size:1.08rem;color:var(--blue-900,#0b3a5c);}
.inf-lettura p{margin:0 0 10px;} .inf-lettura ul,.inf-lettura ol{padding-left:22px;margin:0 0 10px;} .inf-lettura li{margin-bottom:5px;}
.inf-icone{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px;}
.inf-icone img{width:64px;height:64px;object-fit:contain;}
.inf-icone figure{margin:0;width:84px;text-align:center;font-size:.72rem;line-height:1.2;} .inf-icone figure img{display:block;margin:0 auto 3px;}
.inf-tab{width:100%;border-collapse:collapse;margin:8px 0 14px;font-size:.92rem;}
.inf-tab th,.inf-tab td{border:1px solid #c5ced8;padding:6px 8px;text-align:left;vertical-align:top;} .inf-tab th{background:#eef2f6;}
.inf-esito{font-weight:700;} .inf-scopo{background:#eef4fb;border-radius:8px;padding:10px 12px;}
.inf-foto{max-width:100%;border-radius:8px;margin-bottom:10px;}
.inf-link{display:inline-block;padding:10px 14px;border:1px solid var(--blue-900,#0b3a5c);border-radius:8px;text-decoration:none;font-weight:600;}
.inf-avv{display:inline-block;background:#fee2e2;color:#991b1b;font-weight:800;padding:6px 12px;border-radius:6px;}

/* Moduli compilabili (modulo Tecnico): corpo del modulo letto a schermo (lavoratore, anteprima) */
.mc{font-size:.95rem;line-height:1.45;} .mc table{width:100%;border-collapse:collapse;margin:6px 0 12px;} .mc td,.mc th{border:1px solid #c5ced8;padding:6px 8px;text-align:left;vertical-align:top;font-size:.9rem;}
.mc th{background:#eef2f6;font-size:.8rem;text-transform:uppercase;} .mc .et{background:#f6f8fb;width:36%;font-weight:600;} .mc h3{margin:16px 0 6px;font-size:1.02rem;color:var(--blue-900,#0b3a5c);border-bottom:1px solid #d6dde4;}
.mc .agg{font-size:.82rem;color:#556;} .mc .n{white-space:pre-wrap;} .mc .ko{color:#b00020;font-weight:700;} .mc .firme{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;} .mc .fb{flex:1;min-width:130px;text-align:center;font-size:.8rem;} .mc .fb i{display:block;border-top:1px solid #333;padding-top:2px;font-style:normal;}

/* Moduli compilabili: elenco delle varianti sotto il titolo del modulo (Riccardo, 04/10/2026) */
.md-var{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.md-var button{font-size:.74rem;padding:2px 8px;}

/* Assistenza BESTiNFO: avviso solo per l'operatore del pannello (04/10/2026) */
#banner-assistenza{background:#7a3b00;color:#fff;padding:6px 12px;font-size:.85rem;text-align:center;position:sticky;top:0;z-index:200;}
#banner-assistenza button{margin-left:10px;}

/* Scheda del lavoratore (pulsante + nella pagina Lavoratori del cliente, 05/10/2026) */
.sl-piu { width: 22px; height: 22px; padding: 0; line-height: 20px; border-radius: 50%; border: 1px solid #1f6fa8; background: #fff; color: #1f6fa8; font-weight: 700; cursor: pointer; margin-right: 4px; vertical-align: middle; }
.sl-piu:hover { background: #1f6fa8; color: #fff; }
tr.sl-riga > td { background: #f6f9fc; padding: 10px 14px; border-top: 0; }
.sl-scheda .sl-sez { margin: 8px 0; padding: 6px 10px; background: #fff; border: 1px solid #dbe4ec; border-radius: 6px; }
.sl-scheda .sl-sez > summary { cursor: pointer; padding: 2px 0; }
.sl-scheda .sl-vuota { background: transparent; border-style: dashed; color: #666; }
.sl-scheda .reg-table { margin: 6px 0 2px; }
@media print { .sl-piu, tr.sl-riga { display: none !important; } }