/* Stile macOS: grigio chiaro, blu di sistema, tabelle dense. Il colore compare solo sugli stati. */
:root {
  --sfondo: #f5f5f7; --laterale: #ebebed; --pannello: #ffffff; --riga-alt: #f8f8fa; --bordo: #d9d9de; --bordo-forte: #c4c4ca;
  --testo: #1d1d1f; --tenue: #6e6e73; --blu: #007aff; --blu-chiaro: #e5f0ff; --rosso: #d70015; --verde: #1f8a3b;
  --giallo: #fff8db; --ombra: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--sfondo); color: var(--testo);
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(0,122,255,.45); outline-offset: 1px; border-radius: 5px; }
h1 { font-size: 15px; font-weight: 600; margin: 0; }
h2 { font-size: 14px; font-weight: 600; margin: 0; }
h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; }
h4 { font-size: 12px; font-weight: 600; margin: 0; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
a { color: var(--blu); text-decoration: none; }
a:hover { text-decoration: underline; }
.tenue { color: var(--tenue); }
.errore { color: var(--rosso); font-weight: 500; }
.errore:empty { display: none; }
.ok { color: var(--verde); font-weight: 500; }
.spazio { flex: 1; }
.riga { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }

/* Bottoni e campi */
button, .bottone { padding: 4px 11px; border: 1px solid var(--bordo-forte); border-radius: 6px; background: var(--pannello);
  cursor: pointer; line-height: 1.35; box-shadow: 0 .5px 1px rgba(0,0,0,.05); display: inline-block; }
button:hover, .bottone:hover { background: #f2f2f4; text-decoration: none; }
button.primario { background: var(--blu); border-color: var(--blu); color: #fff; }
button.primario:hover { background: #0068d9; }
button.piccolo { padding: 2px 8px; font-size: 12px; }
button.pericolo { color: var(--rosso); }
input, select, textarea { padding: 4px 7px; border: 1px solid var(--bordo-forte); border-radius: 5px; background: #fff; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--blu); }
input:disabled { background: var(--riga-alt); color: var(--tenue); }
select.attivo { border-color: var(--blu); background: var(--blu-chiaro); }
kbd { font: 11px -apple-system, sans-serif; padding: 1px 5px; border: 1px solid var(--bordo-forte); border-radius: 4px; color: var(--tenue); background: #fff; }

/* Finestra: menu fisso a sinistra, lista al centro, dettaglio a destra */
.finestra { display: grid; grid-template-columns: 196px 1fr; height: 100vh; }
.laterale { background: var(--laterale); border-right: 1px solid var(--bordo); display: flex; flex-direction: column; padding: 14px 10px; gap: 14px; }
.marchio { padding: 4px 8px 8px; display: flex; align-items: center; gap: 8px; }
.marchio img { width: 30px; height: 30px; border-radius: 7px; }
.marchio > div { display: flex; flex-direction: column; }
.marchio strong { font-size: 15px; }
.marchio span { color: var(--tenue); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.laterale ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.laterale ul.fondo { margin-top: auto; }
.laterale a, .laterale .spenta { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; border-radius: 6px; color: var(--testo); font-weight: 500; }
.laterale a:hover { background: rgba(0,0,0,.05); text-decoration: none; }
.laterale a.attiva { background: var(--blu); color: #fff; }
.laterale .spenta { color: #a1a1a6; cursor: default; font-weight: 400; }
.laterale .spenta small { font-size: 10px; }
.laterale .utente { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 0; border-top: 1px solid var(--bordo); color: var(--tenue); font-size: 12px; }

.area { display: flex; flex-direction: column; min-width: 0; height: 100vh; }
.alta { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--bordo); background: rgba(255,255,255,.7); }
.cerca { margin-left: auto; display: flex; align-items: center; gap: 24px; color: var(--tenue); min-width: 300px; justify-content: space-between; }
.banner { padding: 7px 18px; background: var(--blu-chiaro); border-bottom: 1px solid var(--bordo); }
.banner.errore { background: #ffe9ea; color: var(--rosso); }
.corpo { flex: 1; display: flex; min-height: 0; }
.lista { flex: 1; overflow: auto; padding: 14px 18px 40px; min-width: 0; }
.lista:focus { outline: none; }
.pannello { width: min(880px, 60%); border-left: 1px solid var(--bordo); background: var(--pannello); display: flex; flex-direction: column; min-height: 0; box-shadow: -4px 0 16px rgba(0,0,0,.04); }
.pannello[hidden] { display: none; }
.testa-pannello { display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px; }
.testa-pannello h2 { font-size: 16px; flex: 1; }
.chiudi { border: 0; box-shadow: none; font-size: 20px; line-height: 1; padding: 0 6px; background: transparent; color: var(--tenue); }
.contenuto-pannello { overflow: auto; padding: 0 16px 40px; }
.sotto-titolo { display: flex; gap: 10px; align-items: center; color: var(--tenue); margin-bottom: 12px; }

/* Strumenti sopra l'elenco */
.strumenti, .filtri { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.segmenti { display: inline-flex; background: #e3e3e8; border-radius: 7px; padding: 2px; gap: 2px; }
.segmenti button { border: 0; background: transparent; box-shadow: none; padding: 3px 12px; border-radius: 5px; color: var(--testo); }
.segmenti button.attiva { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.future { display: inline-flex; gap: 10px; color: #a1a1a6; font-size: 12px; }
.future span { cursor: default; }
.spunta { display: inline-flex; gap: 6px; align-items: center; }

/* Tabelle dense, stile Excel */
.griglia { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--pannello); border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; }
.griglia th { position: sticky; top: 0; background: #f2f2f4; color: var(--tenue); font-weight: 500; font-size: 12px; text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--bordo); white-space: nowrap; z-index: 1; }
.griglia td { padding: 7px 10px; border-bottom: 1px solid #ececef; vertical-align: top; }
.griglia tbody tr:nth-child(even) td { background: var(--riga-alt); }
.griglia tbody tr:last-child td { border-bottom: 0; }
.griglia tbody tr[tabindex] { cursor: default; }
.griglia tbody tr[tabindex]:hover td { background: #eef4ff; }
.griglia tbody tr.sel td, .griglia tbody tr:focus td { background: var(--blu-chiaro); }
.griglia tbody tr:focus { outline: none; }
.griglia tbody tr:focus td:first-child { box-shadow: inset 3px 0 0 var(--blu); }
.n { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.stretta { white-space: nowrap; }
td.largo { min-width: 180px; }
.vuoto { padding: 22px; text-align: center; color: var(--tenue); background: var(--pannello); border: 1px dashed var(--bordo); border-radius: 8px; }

/* Stati: l'unico posto dove compare il colore */
.pillola { display: inline-block; padding: 0 7px; border-radius: 10px; font-size: 11.5px; font-weight: 500; white-space: nowrap; line-height: 18px; }
.s-da_confermare { background: #fff1d6; color: #8a5300; }
.s-da_fare, .s-programmato { background: #e1edff; color: #0055c7; }
.s-eseguito { background: #dff5e3; color: #1b6e32; }
.s-in_corso { background: #fff1d6; color: #8a5a00; }
.s-da_fatturare { background: #efe4ff; color: #6233b8; }
.s-fatturato { background: #e8e8ed; color: #4a4a4f; }
.s-scaduta { background: #ffe5e3; color: #b3261e; }
.s-annullato { background: #f1f1f3; color: #8e8e93; text-decoration: line-through; }
.r-altissimo { background: #ffdcdc; color: #a30010; }
.r-alto { background: #ffe8d6; color: #a34a00; }
.r-medio { background: #fff4cc; color: #7a5d00; }
.r-basso { background: #e5f5e8; color: #1b6e32; }

/* Riquadri e dettaglio */
.riquadro { background: var(--pannello); border: 1px solid var(--bordo); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.riquadro h2 { margin-bottom: 10px; }
.riquadro .griglia { border: 0; border-radius: 0; }
.avviso-azione { background: var(--giallo); border-color: #f0dc8c; }
.riquadro-interno { border: 1px solid var(--bordo); border-radius: 8px; padding: 12px; margin-top: 12px; background: #fbfbfd; }
.totali { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--bordo); border-radius: 8px; margin-bottom: 12px; }
.totali > div { padding: 6px 10px; display: flex; flex-direction: column; border-right: 1px solid var(--bordo); }
.totali > div:last-child { border-right: 0; }
.totali small { color: var(--tenue); font-size: 11px; }
.totali strong { font-variant-numeric: tabular-nums; font-size: 13.5px; }
.totali .negativo strong { color: var(--rosso); }
.nota-gialla { background: var(--giallo); border: 1px solid #f0dc8c; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.nota-gialla ul { margin: 4px 0 0; padding-left: 18px; }
.schede { display: flex; gap: 2px; border-bottom: 1px solid var(--bordo); margin-bottom: 12px; overflow-x: auto; }
.schede button { border: 0; box-shadow: none; background: transparent; border-radius: 0; padding: 6px 10px; color: var(--tenue); border-bottom: 2px solid transparent; white-space: nowrap; }
.schede button.attiva { color: var(--testo); font-weight: 600; border-bottom-color: var(--blu); }
.aree { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bordo); }
.email article { border-bottom: 1px solid var(--bordo); padding: 8px 0; }
.email article p { margin: 4px 0 0; }

/* Schede compilabili: etichetta sopra, due colonne */
.scheda .campi { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; }
.scheda .campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scheda .campo.largo { grid-column: 1 / -1; }
.scheda label { font-size: 11.5px; color: var(--tenue); font-weight: 500; }
.scheda input[type=checkbox] { align-self: flex-start; }
.scheda textarea { resize: vertical; }
.scheda .aiuto, .azioni .aiuto { font-size: 11px; color: var(--tenue); }
.scheda .azioni { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.scheda .errore { margin-top: 10px; }
.squadra { border: 1px solid var(--bordo); border-radius: 8px; margin: 12px 0 0; padding: 8px 10px; display: grid; gap: 6px; }
.squadra legend { font-size: 11.5px; color: var(--tenue); font-weight: 500; padding: 0 4px; }
.persona { display: grid; grid-template-columns: 1fr 64px 108px 12px 72px auto; gap: 6px; align-items: center; }
.persona .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link { word-break: break-all; user-select: all; background: var(--sfondo); padding: 6px 8px; border-radius: 6px; margin: 8px 0; }

/* Ricerca ⌘K */
.velo { position: fixed; inset: 0; background: rgba(0,0,0,.18); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; z-index: 10; }
.ricerca { width: min(620px, 92vw); background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.25); overflow: hidden; }
.ricerca input { width: 100%; border: 0; border-bottom: 1px solid var(--bordo); border-radius: 0; padding: 14px 16px; font-size: 16px; }
.ricerca input:focus { outline: none; }
.esiti { list-style: none; margin: 0; padding: 4px; max-height: 50vh; overflow: auto; }
.esiti li { display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; padding: 6px 10px; border-radius: 6px; cursor: default; align-items: baseline; }
.esiti li.scelto { background: var(--blu); color: #fff; }
.esiti li.scelto small, .esiti li.scelto .tipo { color: rgba(255,255,255,.85); }
.esiti .tipo { font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.esiti small { color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.esiti .nessuno { display: block; color: var(--tenue); }

/* Accesso e viste esterne */
.fuori { min-height: 100vh; display: grid; place-items: center; }
form.accesso { width: 300px; display: grid; gap: 10px; background: #fff; padding: 28px; border-radius: 14px; box-shadow: var(--ombra); }
form.accesso h1 { font-size: 20px; }
form.accesso p { margin: -8px 0 6px; text-align: center; }
form.accesso .logo-accesso { width: 190px; justify-self: center; margin-bottom: 8px; }
form.accesso input { padding: 7px 10px; }
.esterno { max-width: 900px; margin: 0 auto; padding: 16px; }
.testa-esterna { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }

@media (max-width: 900px) {
  .finestra { grid-template-columns: 1fr; }
  .laterale { display: none; }
  .pannello { position: fixed; inset: 0; width: 100%; z-index: 5; }
  .cerca { min-width: 0; }
  .scheda .campi { grid-template-columns: 1fr; }
}
.scheda .confermato { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(31,138,59,.18); }
.azioni .aiuto.evidente { color: var(--verde); font-weight: 500; }
.filtri select { max-width: 230px; }
/* Con il dettaglio aperto le colonne secondarie lasciano spazio alla descrizione. */
.corpo.aperto .griglia .secondaria { display: none; }
.zona-elimina { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--bordo); display: flex; gap: 12px; align-items: center; }
.zona-elimina .aiuto { font-size: 11px; color: var(--tenue); }
.riquadro-interno > button.pericolo { margin-top: 10px; }
/* Stampa: solo l'elenco, senza menu né pannelli */
@media print {
  .laterale, .alta, .banner, .pannello, .strumenti, .filtri button, .filtri select { display: none !important; }
  .finestra, .area { display: block; height: auto; }
  .lista { overflow: visible; padding: 0; }
  .griglia th { position: static; }
}
.segmenti { max-width: 100%; overflow-x: auto; }
.segmenti button { white-space: nowrap; }
/* Viste dei lavori su una riga */
.riga-viste { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Spunta di fine mese: una riga per ricorrente, una colonna per giorno */
.scorre { overflow-x: auto; }
.calendario-mese th.giorno, .calendario-mese td.giorno { padding: 2px 0; width: 22px; text-align: center; }
.calendario-mese th.festivo { color: #a1a1a6; }
.calendario-mese td.giorno button { border: 0; box-shadow: none; background: transparent; padding: 0 2px; font-size: 13px; line-height: 18px; }
.calendario-mese td.g-eseguito button { color: var(--verde); }
.calendario-mese td.g-programmato button { color: var(--blu); }
.calendario-mese td.g-annullato button { color: #a1a1a6; }
.calendario-mese .nome-ricorrente { white-space: nowrap; min-width: 160px; }
.calendario-mese .nome-ricorrente small { display: block; color: var(--tenue); font-size: 11px; }
fieldset.giorni { border: 1px solid var(--bordo); border-radius: 8px; margin: 12px 0 0; padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 12px; }
fieldset.giorni legend { font-size: 11.5px; color: var(--tenue); font-weight: 500; padding: 0 4px; }
fieldset.giorni label { display: inline-flex; gap: 4px; align-items: center; }
/* Calendario del mese */
.titolo-mese { min-width: 130px; text-align: center; text-transform: capitalize; }
.cal-testa, .cal-griglia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-testa div { font-size: 11px; color: var(--tenue); text-align: center; padding: 2px 0; }
.cal-giorno { background: var(--pannello); border: 1px solid var(--bordo); border-radius: 6px; min-height: 92px; padding: 3px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-giorno.fuori-mese { background: transparent; border-style: dashed; }
.cal-giorno.oggi { border-color: var(--blu); box-shadow: inset 0 0 0 1px var(--blu); }
.cal-numero { font-size: 11px; color: var(--tenue); font-weight: 600; }
.cal-voce { display: flex; gap: 4px; font-size: 11px; line-height: 15px; padding: 1px 4px; border-radius: 4px; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-voce:hover { text-decoration: none; filter: brightness(.96); }
.cal-voce.ric { box-shadow: inset 3px 0 0 rgba(0,0,0,.25); }
.cal-voce .ora { font-variant-numeric: tabular-nums; opacity: .75; }
button:disabled, button:disabled:hover { opacity: .45; cursor: default; }
/* App operatori: pensata per il telefono, pulsanti grandi, testo leggibile */
.telefono body { background: #f2f2f7; font-size: 17px; -webkit-text-size-adjust: 100%; }
.op { max-width: 560px; margin: 0 auto; padding: 0 14px calc(32px + env(safe-area-inset-bottom)); }
.op-testa { display: flex; justify-content: space-between; align-items: center; padding: calc(12px + env(safe-area-inset-top)) 2px 8px; }
.op-testa small { display: block; color: var(--tenue); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.op-testa strong { font-size: 20px; }
.op-segnale { font-size: 13px; padding: 4px 10px; border-radius: 12px; background: #dff5e3; color: #1b6e32; }
.op-segnale.assente { background: #fff1d6; color: #8a5300; }
.op-schede { display: grid; grid-template-columns: repeat(3, 1fr); background: #e3e3e8; border-radius: 10px; padding: 3px; gap: 3px; margin: 6px 0 14px; }
.op-schede button { border: 0; box-shadow: none; background: transparent; padding: 9px 4px; border-radius: 8px; font-size: 15px; }
.op-schede button.attiva { background: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.op-giorno { font-size: 22px; font-weight: 700; margin: 4px 2px 12px; }
.op-scheda { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.op-scheda.in-corso { box-shadow: 0 0 0 3px var(--verde); }
.op-scheda.fatto { opacity: .8; }
.op-scheda h2 { font-size: 21px; margin: 2px 0 4px; }
.op-scheda p { margin: 4px 0; }
.op-ora { font-weight: 600; color: var(--blu); font-variant-numeric: tabular-nums; }
.op-tenue { color: var(--tenue); font-size: 15px; }
.op-link { display: inline-block; margin: 6px 0 4px; font-size: 16px; }
.op-pulsante { display: block; width: 100%; border: 0; border-radius: 12px; padding: 16px; font-size: 20px; font-weight: 700; margin-top: 12px; color: #fff; box-shadow: none; }
.op-verde { background: var(--verde); }
.op-rosso { background: var(--rosso); }
.op-chiaro { background: #e5e5ea; color: var(--testo); }
.op-verde:hover { background: #1a7633; } .op-rosso:hover { background: #b80012; }
.op-riga { display: flex; gap: 10px; margin-top: 10px; }
.op-secondario { flex: 1; padding: 12px; font-size: 16px; border-radius: 10px; }
.op-fatto { color: var(--verde); font-weight: 600; font-size: 18px; margin-top: 10px !important; }
.op-vuoto { background: #fff; border-radius: 14px; padding: 28px 18px; text-align: center; }
.op-sezione { background: #fff; border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; }
.op-sezione h3 { font-size: 15px; margin: 0 0 6px; }
.op-voce { display: flex; gap: 10px; justify-content: space-between; padding: 7px 0; border-top: 1px solid #ececef; font-size: 15px; }
.op-voce:first-of-type { border-top: 0; }
.op-grande { font-size: 30px; font-weight: 700; margin: 4px 0; }
.op-errore { color: var(--rosso); }
.op-velo { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: flex-end; z-index: 20; }
.op-finestra { background: #fff; width: 100%; max-width: 560px; margin: 0 auto; border-radius: 16px 16px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.op-finestra h2 { font-size: 20px; margin: 0; }
.op-finestra textarea { width: 100%; font-size: 17px; padding: 10px; border-radius: 10px; margin-top: 10px; }
.op-sforo { background: var(--giallo); border-radius: 10px; padding: 10px; margin-top: 8px; }
.op-sforo label { display: block; font-size: 14px; margin-top: 4px; }
.op-doppio { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.op-doppio .op-pulsante { font-size: 16px; padding: 18px 8px; }
.op-blu { background: #0a84ff; }
.op-istruzioni { background: #eef4ff; border-radius: 10px; padding: 8px 10px; font-size: 15px; white-space: pre-line; }
.op-scheda.non-vado { opacity: .75; }
.op-avviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); background: rgba(29,29,31,.92);
  color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 15px; z-index: 30; max-width: 90vw; }
/* Rapportini nella scheda del lavoro */
.rapportino { border: 1px solid var(--bordo); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.rapportino .foto { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rapportino .foto img { width: 92px; height: 92px; object-fit: cover; border-radius: 6px; border: 1px solid var(--bordo); }
/* Pagina di firma del contratto (pubblica, aperta dal link) */
.pagina-firma main { max-width: 760px; margin: 0 auto; padding: 24px 16px 60px; font-size: 15px; }
.pagina-firma header small { color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; }
.pagina-firma h1 { font-size: 22px; margin: 4px 0; }
.testo-contratto { background: #fff; border: 1px solid var(--bordo); border-radius: 10px; padding: 18px 20px; margin: 12px 0; line-height: 1.5; }
.testo-contratto p { margin: 0 0 4px; }
.firma-box .passo { display: grid; gap: 10px; margin-top: 12px; max-width: 360px; }
.firma-box input[type=text] { font-size: 20px; letter-spacing: .3em; padding: 8px 12px; }
.firma-ok { background: #dff5e3; border-radius: 10px; padding: 14px 16px; margin: 12px 0; }
/* Stati di preventivi, contratti e appalti */
.p-bozza { background: #ececf0; color: #4a4a4f; }
.p-inviato { background: #e1edff; color: #0055c7; }
.p-accettato, .p-firmato, .p-attivo { background: #dff5e3; color: #1b6e32; }
.p-rifiutato, .p-annullato, .p-chiuso { background: #f1f1f3; color: #8e8e93; }
.riga-lav { display: grid; grid-template-columns: 1fr 64px 84px 76px 70px auto; gap: 6px; align-items: center; }
.allegati { margin-top: 14px; }
.lista-voci .voce { display: grid; grid-template-columns: auto 1fr 130px auto; gap: 6px; align-items: center; margin-bottom: 4px; }
.lista-voci .voce.senza-spunta { grid-template-columns: 1fr 130px auto; }
.carte-modelli { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.carte-modelli button { text-align: left; padding: 10px 12px; border-radius: 10px; }
.carte-modelli button.scelto { border-color: var(--blu); box-shadow: 0 0 0 2px rgba(0,122,255,.25); }
.carte-modelli small { display: block; color: var(--tenue); margin-top: 4px; }
.logo-anteprima { height: 44px; border: 1px solid var(--bordo); border-radius: 6px; padding: 2px; background: #fff; }
.riquadro > .scheda > textarea { width: 100%; font: 12.5px/1.45 ui-monospace, Menlo, monospace; }
.foto-mini { display: inline-flex; gap: 4px; align-items: center; }
.foto-mini img { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; border: 1px solid var(--bordo); }
textarea:disabled, select:disabled { background: var(--riga-alt); color: var(--tenue); }
/* Posta */
.email-corpo pre { white-space: pre-wrap; font: 12.5px/1.5 -apple-system, sans-serif; background: #fbfbfd; border: 1px solid var(--bordo); border-radius: 8px; padding: 10px 12px; max-height: 420px; overflow: auto; }
.stato-riga { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #ececef; }
.stato-riga:last-of-type { border-bottom: 0; }

/* Fase 8: qualità, attrezzature, redditività */
.scaduta { color: var(--rosso); font-weight: 500; }
.voci-q { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.voce-q { display: grid; grid-template-columns: 1fr 1fr auto; grid-template-areas: "v n x" "b b b"; gap: 4px 6px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--bordo); }
.voce-q > :nth-child(1) { grid-area: v; }
.voce-q > :nth-child(2) { grid-area: b; justify-self: start; }
.voce-q > :nth-child(3) { grid-area: n; }
.voce-q > :nth-child(4) { grid-area: x; }
.voce-q .segmenti button.e-ok { background: #dff5e3; color: #1b6e32; }
.voce-q .segmenti button.e-migliorabile { background: #fff4cc; color: #7a5d00; }
.voce-q .segmenti button.e-non_conforme { background: #ffdcdc; color: #a30010; }

/* Riquadro di conferma del programma */
.dialogo { border: 1px solid var(--bordo); border-radius: 12px; padding: 18px 20px; max-width: 420px; width: calc(100% - 32px); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.dialogo.largo { max-width: 640px; max-height: calc(100vh - 40px); overflow: auto; }
.dialogo.largo .azioni { justify-content: flex-start; }
.dialogo::backdrop { background: rgba(0,0,0,.25); }
.dialogo p { margin: 0 0 14px; white-space: pre-line; line-height: 1.45; }
.dialogo input { width: 100%; box-sizing: border-box; margin-bottom: 14px; }
.dialogo .azioni { display: flex; justify-content: flex-end; gap: 8px; }

/* Programma della sede */
.giorni { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.giorno { border: 1px solid var(--bordo); border-radius: 8px; padding: 8px 12px; background: var(--pannello); }
.giorno h4 { margin: 0; text-transform: capitalize; }
.giorno .riga { margin-bottom: 4px; }
.int-riga { display: grid; grid-template-columns: 12px 120px 100px minmax(140px, 1.2fr) minmax(120px, 1fr) auto; gap: 8px; align-items: center;
  padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.int-riga:hover, .int-riga:focus { background: rgba(0, 113, 227, .07); outline: none; }
.int-riga.annullata { opacity: .55; }
.int-riga .avvisi { grid-column: 2 / -1; color: var(--rosso); font-size: 12px; }
.int-riga .chi { font-weight: 500; }
.segno { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: #8e8e93; }
.segno.c-0 { background: #0a84ff; } .segno.c-1 { background: #30b158; } .segno.c-2 { background: #ff9f0a; }
.segno.c-3 { background: #bf5af2; } .segno.c-4 { background: #ff375f; } .segno.c-5 { background: #64d2ff; }
.persone-scelta { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; }
.chip { padding: 2px 10px; border-radius: 12px; background: #e8f0fe; border: 1px solid #c7d7f5; font-size: 12.5px; }
.chip:hover { background: #fde8e8; border-color: #f3c0c0; }
details.riquadro-interno > summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
@media (max-width: 720px) { .int-riga { grid-template-columns: 12px 1fr auto; } .int-riga .tenue { display: none; } }
.giorni-vuoti { display: flex; gap: 10px; align-items: center; padding: 6px 12px; border: 1px dashed var(--bordo); border-radius: 8px; }
.qr-box { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; margin: 12px 0; padding: 14px; border: 1px solid var(--bordo); border-radius: 12px; background: #fff; }
.qr svg { width: 220px; height: 220px; display: block; background: #fff; border-radius: 6px; }
@media (max-width: 720px) { .qr-box { grid-template-columns: 1fr; } }
.op-installa { background: #fff; border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 0 0 2px #0a84ff33; }
.op-installa h3 { margin: 0 0 6px; font-size: 18px; }
.op-installa ol { margin: 6px 0; padding-left: 20px; font-size: 16px; line-height: 1.5; }
.stampa-settimana { margin-top: -4px; padding: 8px 10px; border: 1px dashed var(--bordo); border-radius: 10px; }
/* Appalti configurabili */
.testa-appalto { align-items: baseline; gap: 10px; margin: 4px 0 8px; }
.testa-appalto h2 { font-size: 19px; margin: 0; }
.giorni-toggle { display: inline-flex; gap: 2px; }
.giorni-toggle button { width: 24px; height: 24px; padding: 0; border-radius: 6px; font-size: 11px; background: #f2f2f4; border: 1px solid var(--bordo); color: var(--tenue); }
.giorni-toggle button.attivo { background: var(--accento, #0a84ff); border-color: transparent; color: #fff; }
.griglia-piano, .griglia-locali { width: 100%; border-collapse: collapse; font-size: 13px; }
.griglia-piano th, .griglia-locali th { text-align: left; font-weight: 600; color: var(--tenue); font-size: 12px; padding: 4px 4px; border-bottom: 1px solid var(--bordo); }
.griglia-piano td, .griglia-locali td { padding: 3px 4px; border-bottom: 1px solid #eee; vertical-align: middle; }
.griglia-piano input[type=text], .griglia-locali input[type=text] { width: 100%; box-sizing: border-box; }
.griglia-piano td:first-child { min-width: 220px; }
.griglia-piano select, .griglia-locali select { max-width: 170px; }
.freq-dettaglio { white-space: nowrap; }
.freq-dettaglio input { width: 34px !important; }
.campi-colonna { display: grid; gap: 8px; margin: 8px 0; }
.campi-colonna label { display: grid; gap: 3px; font-size: 12px; color: var(--tenue); }
.voce-config { display: flex; gap: 6px; align-items: center; margin: 3px 0; flex-wrap: wrap; }
.editor-config fieldset .riga { gap: 8px; margin: 4px 0; }
.cal-riga { display: grid; grid-template-columns: 18px 92px minmax(120px, 200px) 1fr auto auto; gap: 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid #f0f0f2; font-size: 13px; cursor: pointer; }
.cal-riga.s-fatta { opacity: .6; }
.cal-riga.s-saltata { opacity: .5; text-decoration: line-through; }
.pillola.st-programmata { background: #eef4ff; color: #0a5bd3; } .pillola.st-fatta { background: #e7f6ec; color: #1f8a3b; } .pillola.st-saltata { background: #f2f2f4; color: #6e6e73; }
/* Accesso con secondo codice e utenti */
form.accesso.largo, .accesso.largo { width: min(460px, 92vw); display: grid; gap: 10px; background: #fff; padding: 28px; border-radius: 14px; box-shadow: var(--ombra); }
form.accesso h2, .accesso h2 { font-size: 18px; margin: 0; text-align: center; }
.guida-codice ol { padding-left: 18px; margin: 6px 0; font-size: 14px; line-height: 1.45; }
.guida-codice .qr svg { width: 200px; height: 200px; display: block; margin: 6px auto; background: #fff; }
input.codice { font-size: 22px; letter-spacing: .3em; text-align: center; }
button.collegamento { background: none; border: 0; color: var(--tenue); font-size: 12px; text-decoration: underline; box-shadow: none; }
.codici-riserva { font: 15px/1.6 ui-monospace, Menlo, monospace; background: #f5f5f7; padding: 10px 14px; border-radius: 8px; columns: 2; }
.sedi-scelta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0; }
@media print { body * { visibility: hidden; } .codici-riserva, .codici-riserva * { visibility: visible; } .codici-riserva { position: absolute; top: 0; left: 0; } }
/* Ticket */
.pillola.tk-aperto { background: #fde8e8; color: #c0392b; } .pillola.tk-preso_in_carico { background: #fff4d6; color: #8a6100; }
.pillola.tk-in_lavorazione { background: #eef4ff; color: #0a5bd3; } .pillola.tk-chiuso { background: #e7f6ec; color: #1f8a3b; }
.pillola.tk-confermato { background: #f2f2f4; color: #6e6e73; } .pillola.tk-da-confermare { background: #fff4d6; color: #8a6100; }
.spie-sla { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.spia { font-size: 11.5px; padding: 1px 7px; border-radius: 9px; white-space: nowrap; }
.sla-rispettato { background: #e7f6ec; color: #1f8a3b; } .sla-superato { background: #fde8e8; color: #c0392b; font-weight: 600; } .sla-in_corso { background: #fff4d6; color: #8a6100; }
.riquadro-sla .spie-sla { display: grid; gap: 4px; } .riquadro-sla .spia { font-size: 13px; padding: 4px 10px; white-space: normal; }
.prio-alta { color: #c0392b; font-weight: 600; } .prio-bassa { color: var(--tenue); }
.cronologia-ticket { list-style: none; padding: 0; margin: 6px 0; border-left: 2px solid var(--bordo); }
.cronologia-ticket li { padding: 4px 0 6px 12px; font-size: 13px; }
.cronologia-ticket li.interna { background: #fffbea; }
.cronologia-ticket .quando { color: var(--tenue); font-size: 12px; margin-right: 6px; }
.azioni-ticket { border: 1px solid var(--bordo); border-radius: 10px; padding: 10px; margin: 8px 0; display: grid; gap: 6px; }
.modulo-ticket { display: grid; gap: 8px; max-width: 560px; }
.modulo-ticket label { display: grid; gap: 3px; font-size: 13px; color: var(--tenue); }
/* Controlli */
.voci-controllo { display: grid; gap: 6px; margin: 8px 0; }
.voce-controllo { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--bordo); border-radius: 8px; }
.voce-controllo input { grid-column: 1 / -1; }
.voce-controllo .segmenti button.attiva.e-ok { background: #e7f6ec; color: #1f8a3b; }
.voce-controllo .segmenti button.attiva.e-non_conforme { background: #fde8e8; color: #c0392b; }
.e-non_conforme { color: #c0392b; font-weight: 600; } .e-ok { color: #1f8a3b; }
.pillola.nc-aperta { background: #fde8e8; color: #c0392b; } .pillola.nc-ripassata { background: #fff4d6; color: #8a6100; } .pillola.nc-chiusa { background: #e7f6ec; color: #1f8a3b; }
.causa-nc { white-space: pre-line; }
.checklist-edit { border-bottom: 1px solid var(--bordo); padding: 6px 0; } .checklist-edit textarea { width: 100%; }
.op-select { width: 100%; font-size: 17px; padding: 10px; margin: 6px 0; border-radius: 10px; }
.op-voce-controllo { border-bottom: 1px solid #eee; padding: 8px 0; display: grid; gap: 6px; }
.op-tre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.op-tre button { padding: 12px 0; font-size: 16px; font-weight: 700; border-radius: 10px; border: 1px solid var(--bordo); background: #fff; }
.op-tre button.scelto.e-ok { background: #1f8a3b; color: #fff; } .op-tre button.scelto.e-non_conforme { background: #c0392b; color: #fff; }
.op-tre button.scelto.e-na { background: #8e8e93; color: #fff; }
/* Indicatori */
.carte-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 10px 0; }
.carta-kpi { border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; border: 1px solid var(--bordo); background: #fff; }
.carta-kpi strong { font-size: 26px; } .carta-kpi small { font-size: 12px; color: var(--tenue); } .carta-kpi .esito { font-weight: 600; font-size: 12.5px; }
.carta-kpi .tenue { font-size: 11.5px; }
.kpi-rispettato { background: #eef9f1; border-color: #bfe5cb; } .kpi-rispettato .esito { color: #1f8a3b; }
.kpi-non_rispettato { background: #fdf0ef; border-color: #f3c0c0; } .kpi-non_rispettato .esito { color: #c0392b; }
.kpi-senza_dati, .kpi-senza_obiettivo { background: #f5f5f7; } .kpi-senza_dati .esito, .kpi-senza_obiettivo .esito { color: var(--tenue); }
.etichetta-kpi { min-width: 260px; }
/* QR */
.qr-video { width: 100%; max-height: 50vh; border-radius: 12px; background: #000; }
.op-riga-qr { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pagina-qr h1 { font-size: 24px; margin: 0; text-align: center; } .pagina-qr small, .pagina-qr .mono { text-align: center; display: block; }
.accesso .logo-accesso { width: 170px; justify-self: center; margin-bottom: 6px; }
.accesso.largo { display: grid; gap: 10px; }

/* Programma della sede: una sola tabella, totali in alto, il resto si apre solo se serve */
.prog { background: var(--pannello); border: 1px solid var(--bordo); border-radius: 10px; overflow: hidden; }
.prog-testa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.prog-testa h3 { margin: 0; font-size: 17px; }
.prog-totali { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.prog-voce { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; }
.prog-voce + .prog-voce { border-left: 1px solid var(--bordo); }
.prog-voce span { font-size: 11.5px; color: var(--tenue); }
.prog-voce strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.prog-azioni { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
.prog-modulo { padding: 12px 16px; background: var(--riga-alt); border-top: 1px solid var(--bordo); }
.prog-modulo .riga:last-of-type { margin-bottom: 0; }
.prog-modulo .aiuto { margin: 8px 0 0; font-size: 11.5px; color: var(--tenue); }
.prog-sotto { font-size: 11.5px; margin-top: 2px; }
.prog .vuoto { padding: 24px 16px; }
.prog-dettaglio { margin-top: 12px; }
.prog-dettaglio > summary { cursor: pointer; font-weight: 600; padding: 6px 0; }
@media (max-width: 520px) { .prog-voce { padding: 8px 10px; } .prog-voce strong { font-size: 15px; } }
.prog-pulsanti { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.da-fare { margin-bottom: 18px; }
.da-fare > h3 { font-size: 14px; margin: 4px 0 8px; }
.campo-data { position: relative; display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.scheda .campo-data { display: flex; }
.scheda .campo-data > input { flex: 1; min-width: 0; }
.cal-apri { padding: 2px 6px; flex: none; line-height: 1.2; }
.calendario-pop { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px; padding: 8px; width: 238px; background: var(--pannello); border: 1px solid var(--bordo-forte); border-radius: 10px; box-shadow: var(--ombra); }
.calendario-pop[hidden] { display: none; }
.cal-testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; text-transform: capitalize; }
.cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; }
.cal-griglia button { padding: 4px 0; border: 0; background: transparent; border-radius: 6px; cursor: pointer; }
.cal-griglia button:hover { background: var(--blu-chiaro); }
.cal-griglia button.oggi { font-weight: 700; color: var(--blu); }
.cal-griglia button.scelto { background: var(--blu); color: #fff; }

/* Scheda di controllo nell'app operatori: scelte rapide del motivo */
.op-scelte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.op-scelte .op-secondario { flex: 0 1 auto; font-size: 14px; padding: 8px 10px; }

/* Paghe: rosso chi ha da avere, verde chi è pagato */
.griglia tbody tr.c-avere td:first-child { box-shadow: inset 4px 0 0 var(--rosso); }
.griglia tbody tr.c-pagato td:first-child { box-shadow: inset 4px 0 0 var(--verde); }
.importo-avere { color: var(--rosso); font-weight: 600; border-bottom: 2px solid var(--rosso); }
.importo-pagato { color: var(--verde); font-weight: 600; border-bottom: 2px solid var(--verde); }
.totali .avere strong { color: var(--rosso); }
.totali .pagato strong { color: var(--verde); }
.titolo-gruppo { margin: 16px 0 6px; padding-left: 8px; border-left: 4px solid var(--bordo-forte); }
.titolo-gruppo.avere { border-color: var(--rosso); }
.titolo-gruppo.pagato { border-color: var(--verde); }
.mese-paga { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid #ececef; flex-wrap: wrap; }
.mese-paga strong { min-width: 130px; text-transform: capitalize; }

.coperture { font-size: 12px; line-height: 1.5; color: var(--testo-2, #555); }
.s-da_pagare { background: #fde8e8; color: #c0392b; }
.importo-anticipo { color: #8a5a00; font-weight: 500; }
.frecce { display: flex; gap: 4px; margin-left: -6px; }
.freccia { width: 30px; height: 28px; padding: 0; border-radius: 7px; font-size: 20px; line-height: 1; display: grid; place-items: center; }
.freccia:disabled { opacity: .3; cursor: default; }