/* GIADINO — palette del Brand Manual: petrolio #014059, giallo #f2b707,
   sabbia #ba9a67, menta #8cccbe, ink #0c2d3a, fondo #f6f9f9. Grafica asciutta. */
:root{
  --petrolio:#014059; --petrolio-scuro:#012f42; --petrolio-chiaro:#0d5975;
  --giallo:#f2b707; --sabbia:#ba9a67; --menta:#8cccbe; --ink:#0c2d3a;
  --bg:#f6f9f9; --bianco:#fff; --bordo:#d8e3e6; --bordo-forte:#a9c2ca;
  --grigio:#6d838c; --rosso:#b4342a; --rosso-chiaro:#fdecea;
  --ambra:#fff6e0; --verde:#2e7d5b; --verde-chiaro:#e8f5ee; --arancio:#e07b1f;
  --r:6px; --ombra:0 1px 2px rgba(1,64,89,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:14px; line-height:1.45; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 .5em; line-height:1.2}
h1{font-family:'Dela Gothic One','Manrope',sans-serif; font-size:20px; font-weight:400; color:var(--petrolio); letter-spacing:.2px}
h2{font-size:15px; font-weight:800; color:var(--petrolio); text-transform:uppercase; letter-spacing:.6px}
h3{font-size:13px; font-weight:800; color:var(--petrolio)}
a{color:var(--petrolio-chiaro)}

/* ---------- cornice ---------- */
.barra{background:var(--petrolio); color:#fff; display:flex; align-items:center;
  gap:20px; padding:0 18px; height:52px; position:sticky; top:0; z-index:50}
.marchio{font-family:'Dela Gothic One','Manrope',sans-serif; font-size:16px; letter-spacing:.5px; line-height:1.05}
.marchio span{color:var(--giallo)}
.marchio em{display:block; font-family:'Manrope',sans-serif; font-style:normal; font-weight:600;
  font-size:9px; letter-spacing:.9px; color:#7ba7b5; text-transform:uppercase; margin-top:1px}
.nav{display:flex; gap:2px; margin-left:12px; flex:1}
.nav a{color:#cfe2e8; text-decoration:none; padding:6px 14px; border-radius:var(--r);
  font-weight:700; font-size:12px; letter-spacing:.7px; text-transform:uppercase}
.nav a:hover{background:rgba(255,255,255,.10); color:#fff}
.nav a.on{background:var(--giallo); color:var(--petrolio-scuro)}
.utente{font-size:12px; color:#a9c8d2; display:flex; align-items:center; gap:10px}
.utente b{color:#fff}
/* Il numero di versione: si legge quando serve e non ruba spazio al resto.
   E' lo stesso che rompe la cache dei file, quindi dice davvero cosa gira. */
.versione{font-size:10px; color:#7ba7b5; letter-spacing:.4px; font-variant-numeric:tabular-nums}
.scatola-login .versione{color:var(--grigio); font-size:11px}
.tag-ruolo{background:var(--giallo); color:var(--petrolio-scuro); font-weight:800;
  font-size:10px; padding:2px 7px; border-radius:10px; letter-spacing:.5px}
.tag-ruolo.hr{background:var(--menta); color:var(--petrolio-scuro)}
.utente a{color:#cfe2e8; text-decoration:none; border:1px solid rgba(255,255,255,.25);
  padding:3px 10px; border-radius:var(--r); font-size:11px}
.utente a:hover{background:rgba(255,255,255,.12)}
main{padding:18px 20px 60px; max-width:1900px; margin:0 auto}

/* ---------- blocchi ---------- */
.riquadro{background:var(--bianco); border:1px solid var(--bordo); border-radius:var(--r);
  padding:16px; margin-bottom:16px; box-shadow:var(--ombra)}
.riquadro.root{border-left:3px solid var(--giallo)}
.testata-pagina{display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:14px; flex-wrap:wrap}
.sottotitolo{color:var(--grigio); font-size:12.5px; margin:-4px 0 0}
.colonne{display:grid; grid-template-columns:280px 1fr; gap:16px; align-items:start}
@media(max-width:1100px){.colonne{grid-template-columns:1fr}}
.griglia-campi{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}

/* ---------- controlli ---------- */
label{display:block; font-size:11px; font-weight:800; color:var(--grigio);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px}
input[type=text],input[type=date],input[type=number],input[type=password],
input[type=tel],input[type=email],select,textarea{
  width:100%; padding:6px 8px; border:1px solid var(--bordo-forte); border-radius:var(--r);
  font-family:inherit; font-size:13.5px; color:var(--ink); background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--menta); outline-offset:-1px; border-color:var(--petrolio)}
textarea{min-height:60px; resize:vertical}
.btn{display:inline-flex; align-items:center; gap:6px; background:var(--petrolio); color:#fff;
  border:1px solid var(--petrolio); padding:7px 14px; border-radius:var(--r); cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:800; letter-spacing:.3px; text-decoration:none}
.btn:hover{background:var(--petrolio-chiaro)}
.btn.secondario{background:#fff; color:var(--petrolio); border-color:var(--bordo-forte); font-weight:700}
.btn.secondario:hover{background:#eef5f7}
.btn.giallo{background:var(--giallo); border-color:var(--giallo); color:var(--petrolio-scuro)}
.btn.giallo:hover{filter:brightness(.94)}
.btn.pericolo{background:#fff; color:var(--rosso); border-color:#e3b5b0}
.btn.pericolo:hover{background:var(--rosso-chiaro)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.piccolo{padding:4px 9px; font-size:11.5px}
.barra-azioni{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.spunta{display:flex; align-items:center; gap:6px; font-size:13px; text-transform:none;
  font-weight:600; color:var(--ink); letter-spacing:0; margin:0; cursor:pointer}
.spunta input{width:15px; height:15px; accent-color:var(--petrolio); margin:0; cursor:pointer}

/* ---------- elenco persone ---------- */
.elenco{max-height:72vh; overflow:auto; border:1px solid var(--bordo); border-radius:var(--r); background:#fff}
.elenco .voce{display:block; width:100%; text-align:left; border:0; border-bottom:1px solid #eef3f4;
  background:none; padding:8px 11px; cursor:pointer; font-family:inherit; font-size:13.5px; color:var(--ink)}
.elenco .voce:hover{background:#f1f7f8}
.elenco .voce.on{background:var(--petrolio); color:#fff}
.elenco .voce.on .meta{color:#bcd7de}
.elenco .voce .meta{display:block; font-size:11px; color:var(--grigio)}
.pallino{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--giallo); margin-right:5px}

/* Chi e' in prova si riconosce dal menu, senza aprire la scheda: giallo tenue
   sulla voce e una stecca gialla a sinistra, che resta anche quando la scheda
   e' quella aperta e il fondo diventa petrolio. */
.elenco .voce.in-prova{background:var(--ambra); box-shadow:inset 3px 0 0 var(--giallo)}
.elenco .voce.in-prova:hover{background:#fdedc6}
.elenco .voce.in-prova.on{background:var(--petrolio); box-shadow:inset 3px 0 0 var(--giallo)}

/* ---------- tabelle ---------- */
table.dati{border-collapse:collapse; width:100%; font-size:13px}
table.dati th{background:var(--petrolio); color:#fff; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.5px; padding:6px 8px; text-align:left; white-space:nowrap}
table.dati td{border-bottom:1px solid var(--bordo); padding:5px 8px; vertical-align:middle}
table.dati tr:hover td{background:#f4f9fa}
table.dati td.num{text-align:right; font-variant-numeric:tabular-nums}

/* Le colonne di sole spunte — la disponibilita' sui bar — portano in testata il
   «tutti» che accende o spegne l'intera colonna. */
table.dati th.col-spunta{text-align:center}
table.dati td.col-spunta{text-align:center; padding:0}
table.dati td.comune{font-size:11.5px; color:var(--grigio)}
/* L'etichetta che fa della cella intera un bersaglio: la casella resta quella,
   ma si prende anche il vuoto che ha intorno. Serve al dito e non toglie
   niente al mouse. */
.tocca{display:flex; align-items:center; justify-content:center; min-height:30px;
  margin:0; padding:4px; cursor:pointer}
table.dati th.col-spunta .tutti{display:flex; align-items:center; justify-content:center; gap:4px;
  margin-top:3px; font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:lowercase;
  color:#bcd7de; cursor:pointer}
table.dati th.col-spunta .tutti input{width:14px; height:14px; margin:0; accent-color:var(--giallo); cursor:pointer}

/* ---------- griglia oraria ---------- */
.griglia-wrap{overflow-x:auto; border:1px solid var(--bordo); border-radius:var(--r); background:#fff}
table.griglia{border-collapse:collapse; font-size:10px; table-layout:fixed; user-select:none}
table.griglia th,table.griglia td{border:1px solid #e4ecee; padding:0; text-align:center}
table.griglia th.ora{background:#eaf2f4; color:var(--petrolio); font-size:10.5px; font-weight:800;
  height:19px; border-left:2px solid var(--bordo-forte)}
table.griglia th.min{background:#f4f9fa; color:#8ba3ab; font-size:8px; font-weight:500; height:15px}
table.griglia th.min.q1{border-left:2px solid var(--bordo-forte)}
table.griglia td.gg{background:#eaf2f4; color:var(--petrolio); font-weight:800; font-size:11px;
  text-align:left; padding-left:8px; width:74px; min-width:74px; position:sticky; left:0; z-index:2}
table.griglia tr.sab td.gg{background:#e2edef}
table.griglia td.cella{width:17px; min-width:17px; height:23px; cursor:pointer; background:#fff}
table.griglia td.cella.q1{border-left:2px solid var(--bordo-forte)}
table.griglia tr.sab td.cella{background:#fafcfc}
/* La riga del sabato ha il suo fondo, e per un pelo di specificita' vinceva
   anche sulle celle accese: il sabato segnava le ore ma restava bianco. Il
   selettore qui sotto pareggia il conto (tre classi come la riga del sabato)
   e arriva dopo, quindi il colore della cella torna a comandare. */
table.griglia tr td.cella.v1{background:var(--petrolio)}
table.griglia tr td.cella.v2{background:var(--giallo)}
table.griglia td.cella:hover{outline:2px solid var(--menta); outline-offset:-2px}
table.griglia td.tot{width:52px; min-width:52px; font-size:11px; font-weight:800; color:var(--petrolio);
  background:#f4f9fa; border-left:2px solid var(--bordo-forte); font-variant-numeric:tabular-nums}
.legenda{display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--grigio); margin:8px 0 0}
.legenda i{display:inline-block; width:12px; height:12px; border:1px solid var(--bordo-forte);
  border-radius:2px; vertical-align:-2px; margin-right:5px}

/* griglia con numeri (fabbisogno).
   Quante persone servono si legge prima dal colore che dalla cifra: bianco =
   nessuna, poi un azzurro sempre piu' carico fino a sei, che e' quasi blu. */
:root{
  --n1:#dcedfa; --n2:#bcdcf3; --n3:#9ed1ef; --n4:#69b4e4; --n5:#3a92d5; --n6:#1a63b8;
}
table.griglia td.numcella{width:22px; min-width:22px; height:23px; cursor:pointer;
  font-size:11px; font-weight:700; color:var(--petrolio); background:#fff; font-variant-numeric:tabular-nums}
table.griglia td.numcella.n1{background:var(--n1)}
table.griglia td.numcella.n2{background:var(--n2)}
table.griglia td.numcella.n3{background:var(--n3)}
table.griglia td.numcella.n4{background:var(--n4)}
table.griglia td.numcella.n5{background:var(--n5); color:#fff}
table.griglia td.numcella.n6{background:var(--n6); color:#fff}
table.griglia td.numcella.zero{color:#cdd9dc}
/* la stessa scala nella riga "richieste" del calendario */
table.turni tr.riga-fab td.n1{background:var(--n1)}
table.turni tr.riga-fab td.n2{background:var(--n2)}
table.turni tr.riga-fab td.n3{background:var(--n3)}
table.turni tr.riga-fab td.n4{background:var(--n4)}
table.turni tr.riga-fab td.n5{background:var(--n5); color:#fff}
table.turni tr.riga-fab td.n6{background:var(--n6); color:#fff}

.scala-persone{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.scala-persone .gradino{display:inline-flex; align-items:center; gap:3px; font-size:11px}
.scala-persone .gradino i{display:inline-block; width:14px; height:14px; border:1px solid var(--bordo-forte);
  border-radius:2px; background:#fff}
.scala-persone .gradino i.n1{background:var(--n1)} .scala-persone .gradino i.n2{background:var(--n2)}
.scala-persone .gradino i.n3{background:var(--n3)} .scala-persone .gradino i.n4{background:var(--n4)}
.scala-persone .gradino i.n5{background:var(--n5)} .scala-persone .gradino i.n6{background:var(--n6)}

/* ---------- tab ---------- */
.tabs{display:flex; gap:3px; border-bottom:2px solid var(--bordo); margin-bottom:14px; flex-wrap:wrap}
.tabs button{border:1px solid var(--bordo); border-bottom:0; background:#eef4f5; color:var(--grigio);
  padding:6px 15px; border-radius:var(--r) var(--r) 0 0; cursor:pointer; font-family:inherit;
  font-size:12px; font-weight:800; letter-spacing:.4px; margin-bottom:-2px}
.tabs button.on{background:#fff; color:var(--petrolio); border-bottom:2px solid #fff}
.tabs button.vuota{opacity:.55}
.tabs .aggiungi{background:none; border:1px dashed var(--bordo-forte); color:var(--grigio)}

/* Le linguette dei tre schemi (candidato/massimi/proposta) stanno DENTRO quelle
   delle settimane: si distinguono facendole più basse e col bordo sottile, così
   si vede a colpo d'occhio quale fila comanda su quale. */
.tabs.schemi{border-bottom-width:1px; margin:0 0 12px}
.tabs.schemi button{padding:5px 14px; font-size:11.5px; margin-bottom:-1px; text-align:center}
.tabs.schemi button.on{border-bottom:1px solid #fff}
.tabs button .tab-ore{display:block; font-size:9.5px; font-weight:700; opacity:.72;
  letter-spacing:0; font-variant-numeric:tabular-nums}

/* ---------- barre percentuali ---------- */
.barra-perc{position:relative; height:17px; background:#e9f0f2; border-radius:3px; overflow:hidden; min-width:130px}
.barra-perc i{position:absolute; left:0; top:0; bottom:0; background:var(--menta); display:block}
.barra-perc.piena i{background:var(--verde)}
.barra-perc.sopra i{background:var(--rosso)}
.barra-perc.sotto i{background:var(--giallo)}
.barra-perc b{position:absolute; inset:0; font-size:10.5px; font-weight:800; color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums}

/* ---------- avvisi ---------- */
.avviso{border-left:3px solid var(--giallo); background:var(--ambra); padding:9px 12px;
  border-radius:0 var(--r) var(--r) 0; font-size:12.5px; margin-bottom:12px}
.avviso.errore{border-color:var(--rosso); background:var(--rosso-chiaro); color:#7d221b}
.avviso.ok{border-color:var(--verde); background:var(--verde-chiaro); color:#1d5a3f}
.avviso ul{margin:6px 0 0; padding-left:18px}
.vuoto{color:var(--grigio); font-size:13px; padding:22px; text-align:center; font-style:italic}

/* Il messaggio che compare in basso a destra e sparisce da solo. Dal telefono
   si ancora a tutti e due i bordi: a 380 px di larghezza fissi, su uno schermo
   da 390, sporgeva di otto px a sinistra e la prima parola restava tagliata. */
.messaggio-volante{position:fixed; right:18px; bottom:18px; z-index:200;
  max-width:380px; box-shadow:0 6px 22px rgba(0,0,0,.18)}
@media (max-width:520px){
  .messaggio-volante{left:9px; right:9px; bottom:9px; max-width:none}
}

/* ---------- calendario ---------- */
.giorno-nav{display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px}
.giorno-nav button{border:1px solid var(--bordo); background:#fff; border-radius:var(--r);
  padding:5px 10px; cursor:pointer; font-family:inherit; font-size:11.5px; font-weight:700; color:var(--grigio)}

/* COME STA UN GIORNO, senza aprirlo. Bianco = non c'è nessuno; ambra = c'è
   gente ma le posizioni non sono tutte coperte; verde = tutte coperte. Sono i
   colori che l'applicazione usa già per «manca» e «torna» (i conti del piano,
   il saldo del mese), quindi non c'è un alfabeto nuovo da imparare.
   Vanno prima di `.on`: a parità di peso vince l'ultima, e il giorno scelto
   deve restare petrolio. */
.giorno-nav button.parziale{background:var(--ambra); border-color:#f0dca8; color:#8a6a12}
.giorno-nav button.completo{background:var(--verde-chiaro); border-color:#bfe0cf; color:#1d5a3f}
.giorno-nav button.on{background:var(--petrolio); color:#fff; border-color:var(--petrolio)}
/* Sul giorno aperto il fondo è petrolio e il colore di stato sparirebbe: resta
   come stecca in basso, perché mentre lo si compone è proprio lì che serve. */
.giorno-nav button.on.parziale{box-shadow:inset 0 -3px 0 var(--giallo)}
.giorno-nav button.on.completo{box-shadow:inset 0 -3px 0 var(--menta)}
.giorno-nav button.chiuso{opacity:.45; text-decoration:line-through}
.legenda-giorni{display:flex; flex-wrap:wrap; gap:4px 16px; align-items:center;
  margin:0 0 12px; color:var(--grigio); font-size:11.5px}
.legenda-giorni span{display:inline-flex; align-items:center; gap:5px}
.legenda-giorni i{width:14px; height:12px; border-radius:2px; display:inline-block}
.legenda-giorni i.g-vuoto{background:#fff; border:1px solid var(--bordo)}
.legenda-giorni i.g-parziale{background:var(--ambra); border:1px solid #f0dca8}
.legenda-giorni i.g-completo{background:var(--verde-chiaro); border:1px solid #bfe0cf}
.legenda-giorni .nota{font-style:italic; color:var(--bordo-forte)}
.bar-blocco{margin-bottom:18px}
.bar-testata{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:var(--r) var(--r) 0 0;
  color:#fff; font-weight:800; font-size:13px}
.bar-testata .stato{margin-left:auto; font-size:11px; font-weight:700; background:rgba(255,255,255,.2);
  padding:2px 9px; border-radius:10px}
table.turni{border-collapse:collapse; width:100%; font-size:10px; table-layout:fixed}
table.turni th,table.turni td{border:1px solid #e4ecee; padding:0; text-align:center; height:22px}
/* La colonna delle targhette. Da 250 a 290: la targa del turno e' entrata
   davanti al semaforo, e senza questi 40 px il nome della persona finiva
   tagliato proprio dove serve leggerlo. */
table.turni td.et{width:290px; min-width:290px; text-align:left; padding-left:7px; font-size:11.5px;
  background:#f4f9fa; position:sticky; left:0; z-index:2; white-space:nowrap; overflow:hidden}
table.turni td.slotcella{width:17px; min-width:17px; cursor:pointer}
table.turni td.slotcella.pieno{background:var(--petrolio)}
table.turni td.slotcella.manuale{background:var(--petrolio-chiaro)}
table.turni td.slotcella.fuori{background:repeating-linear-gradient(45deg,#fdecea,#fdecea 3px,#f8d7d3 3px,#f8d7d3 6px)}
table.turni td.slotcella.q1{border-left:2px solid var(--bordo-forte)}
table.turni tr.riga-fab td{background:#eaf2f4; font-weight:800; color:var(--petrolio); font-size:10px}
table.turni tr.riga-delta td.manca{background:var(--rosso); color:#fff; font-weight:800}
table.turni tr.riga-delta td.extra{background:var(--giallo); color:var(--petrolio-scuro); font-weight:800}
table.turni tr.riga-delta td.ok{background:var(--verde-chiaro)}
.pers-scelta{width:100%; border:0; background:transparent; font-family:inherit; font-size:11.5px;
  color:var(--ink); cursor:pointer; padding:2px 4px}
.pers-scelta:focus{outline:1px solid var(--menta)}

/* ---------- la riga di composizione: semaforo, nome, ore, tasto «max» ----------
   Stanno tutti sulla stessa riga e in quest'ordine: prima il colore, che si
   legge senza fermarsi, poi il nome, poi i due numeri, e in fondo il gesto. */
.et-persona{display:flex; align-items:center; gap:5px; padding-right:4px}
.et-persona .pers-scelta{flex:1; min-width:0; width:auto; padding:2px 0}
.pallino-disp{flex:none; width:9px; height:9px; border-radius:50%; display:inline-block;
  background:var(--bordo-forte); border:1px solid rgba(0,0,0,.10)}
.pallino-disp.verde{background:var(--verde)}
.pallino-disp.arancio{background:var(--arancio)}
.pallino-disp.rosso{background:var(--rosso)}
.pallino-disp.niente{background:#fff; border:1px dashed var(--bordo-forte)}
/* I sabati del mese accanto al nome (0.4.13): gli stessi puntini della stampa. */
.et-persona .sabati{flex:none; display:inline-flex; gap:2px}
.et-persona .sabati i{width:6px; height:6px; border-radius:50%; border:1.3px solid #2f9bd6; box-sizing:border-box}
.et-persona .sabati i.pieno{background:#2f9bd6}
.et-persona .sabati i.fuori{border-style:dashed; border-color:#a9d3ea}
.ore-riga{flex:none; font-size:10px; font-weight:700; color:var(--grigio);
  font-variant-numeric:tabular-nums; letter-spacing:-.1px}
.ore-riga.oltre{color:var(--rosso)}
.btn-max{flex:none; border:1px solid var(--bordo-forte); background:#fff; color:var(--petrolio);
  border-radius:4px; font-family:inherit; font-size:9.5px; font-weight:800; letter-spacing:.4px;
  text-transform:uppercase; padding:2px 5px; cursor:pointer; line-height:1.3}
.btn-max:hover:not(:disabled){background:var(--giallo); border-color:var(--giallo); color:var(--petrolio-scuro)}
.btn-max:disabled{opacity:.35; cursor:not-allowed}
.legenda-disp{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:-4px 0 12px;
  color:var(--grigio); font-size:11.5px}
.legenda-disp span{display:inline-flex; align-items:center; gap:5px}
.legenda-disp .nota{font-style:italic; color:var(--bordo-forte)}
/* Dal telefono la griglia e' la vista da schermo grande aperta apposta: la
   colonna dei nomi resta ferma a sinistra e non deve mangiarsi lo schermo. */
@media (max-width:520px){
  table.turni td.et{width:205px; min-width:205px; padding-left:5px}
  .et-persona{gap:4px}
  .et-persona .pers-scelta{font-size:11px}
  .ore-riga{font-size:9.5px}
  .btn-max{padding:2px 4px}
}

/* ---------- badge delle schede ----------
   Nell'elenco il nome resta il protagonista: i badge stanno sotto, piccoli,
   e si leggono a colpo d'occhio senza rubargli la riga. */
.badge-riga{display:flex; flex-wrap:wrap; gap:3px; margin-top:3px}
.badge{display:inline-flex; align-items:center; gap:3px; background:#eef4f5; color:var(--petrolio);
  border:1px solid var(--bordo); border-radius:9px; padding:1px 7px; font-size:10.5px;
  font-weight:700; line-height:1.5; white-space:nowrap}
.badge.bar{background:var(--petrolio); color:#fff; border-color:transparent; letter-spacing:.6px}
.badge.emoji{padding:1px 5px; font-size:12px; background:#fff}
.badge.avviso-badge{background:var(--rosso-chiaro); color:#7d221b; border-color:#e3b5b0}
.elenco .voce.on .badge{background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.3)}
.elenco .voce.on .badge.bar{background:#fff; color:var(--petrolio)}
.badge-lista{display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-height:26px}
.badge.grande{font-size:12.5px; padding:4px 6px 4px 10px; border-radius:13px; gap:6px}
.badge.grande .togli{border:0; background:none; color:var(--grigio); cursor:pointer;
  font-size:15px; line-height:1; padding:0 3px; font-family:inherit}
.badge.grande .togli:hover{color:var(--rosso)}
table.dati td .badge.bar{margin-left:6px; vertical-align:1px}

/* ---------- colleghe: caselle, non select multiplo ----------
   Col select multiplo, sullo schermo grande, sceglierne due chiedeva di tenere
   premuto Ctrl e un clic distratto azzerava tutta la scelta. */
.lista-colleghe{border:1px solid var(--bordo-forte); border-radius:var(--r); background:#fff;
  max-height:190px; overflow-y:auto; padding:5px 8px}
.lista-colleghe .spunta{padding:3px 0; font-size:13px}
.lista-colleghe .spunta:hover{color:var(--petrolio)}
.lista-colleghe .vuoto{padding:10px; font-size:12px}

/* ---------- crediti ---------- */
.stima-crediti{margin-top:12px; padding:9px 12px; background:#f2f8f9; border:1px solid var(--bordo);
  border-radius:var(--r); font-size:12.5px; display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.stima-crediti .crediti{color:var(--petrolio); font-size:14px}
.stima-crediti small{color:var(--grigio)}
.stima-crediti .scarto{font-weight:800; font-size:11.5px; padding:2px 8px; border-radius:10px}
.stima-crediti .scarto.sopra{background:var(--ambra); color:#8a6d00}
.stima-crediti .scarto.sotto{background:var(--verde-chiaro); color:#1d5a3f}

/* Come si arriva alle ore del mese: la catena dei passi, in chiaro, perche' il
   numero si possa contestare senza aprire il codice. */
.conto-ore{margin-top:10px; padding:9px 12px; border:1px dashed var(--bordo-forte);
  border-radius:var(--r); font-size:12.5px; background:#fbfdfd}
.conto-ore .crediti{color:var(--petrolio); font-size:14px}
.conto-ore .passi{margin-top:4px; color:var(--grigio); font-size:11.5px;
  font-variant-numeric:tabular-nums; white-space:pre-wrap}

/* La stima accanto a una PROPOSTA: quanto vale quell'orario e quanto ne esce. */
.stima-proposta{display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin:0 0 8px;
  padding:8px 12px; background:#f2f8f9; border:1px solid var(--bordo); border-radius:var(--r)}
.stima-proposta .voce{display:flex; flex-direction:column; line-height:1.25}
.stima-proposta .voce small{color:var(--grigio); font-size:11px}
.stima-proposta .voce b{font-size:14px}
.stima-proposta .crediti{color:var(--petrolio)}
.stima-proposta .scarto{font-weight:800; font-size:11.5px; padding:2px 8px; border-radius:10px}
.stima-proposta .scarto.sopra{background:var(--ambra); color:#8a6d00}
.stima-proposta .scarto.sotto{background:var(--verde-chiaro); color:#1d5a3f}

.stima-proposta .voce.nota-ponderata b{font-size:11.5px; color:var(--grigio); font-weight:700}

/* I sabati di riposo, sopra alla griglia della PROPOSTA a cui appartengono:
   stanno nella settimana-tipo, non nei limiti della persona. */
.riga-sabati{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 10px;
  padding:8px 12px; background:#fbfdfd; border:1px dashed var(--bordo-forte); border-radius:var(--r)}
.riga-sabati label{margin:0; font-size:12px; font-weight:800; color:var(--petrolio)}
.riga-sabati select{width:auto; margin:0}
.riga-sabati small{flex:1 1 260px; font-size:11px; line-height:1.35}

/* Un campo che il contratto decide da solo: si legge, non si scrive. Il tempo
   pieno e' il 100%, e lasciarlo battibile sarebbe un invito a smentirlo. */
input.bloccato{background:#eef4f5; color:var(--grigio); font-weight:700; cursor:not-allowed}

/* Il saldo FPR sotto zero non si nasconde e non si arrotonda a zero: si vede. */
table.dati td.num.saldo-negativo{color:var(--rosso); font-weight:800}

/* Copia e incolla di una griglia: due tasti piccoli, sotto il totale. */
.appunti-griglia{display:flex; gap:5px; justify-content:flex-end; margin-top:5px}

/* I recapiti sotto al nome: dal telefono si toccano e partono. */
.recapiti{display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; margin-top:2px}
.recapiti a{color:var(--petrolio); font-weight:700; text-decoration:none}
.recapiti a:hover{text-decoration:underline}

table.dati td.num.vicino{color:var(--verde); font-weight:800}

/* ---------- miniatura del calendario del bar ----------
   Dodici mesetti da settembre ad agosto: un quadratino per giorno feriale.
   Serve a vedere i buchi prima che li trovi la creazione di un calendario. */
.miniatura{border:1px solid var(--bordo); border-radius:var(--r); background:#fbfdfd;
  padding:11px 12px; margin-bottom:14px}
.miniatura-testata{display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; flex-wrap:wrap; margin-bottom:10px}
.miniatura-testata b{font-size:12.5px; color:var(--petrolio); display:block}
.miniatura-testata .sottotitolo{margin:2px 0 0; display:block}
.mini-anno{font-size:12px; font-weight:800; color:var(--petrolio); min-width:150px; text-align:center}
.mini-mesi{display:grid; grid-template-columns:repeat(auto-fill,minmax(126px,1fr)); gap:9px}
.mini-mese{background:#fff; border:1px solid var(--bordo); border-radius:var(--r); padding:6px}
.mini-nome{font-size:10px; font-weight:800; color:var(--grigio); text-transform:uppercase;
  letter-spacing:.6px; margin-bottom:4px}
.mini-giorni{display:grid; grid-template-columns:repeat(6,1fr); gap:2px}
.mini-g,.mini-vuoto{aspect-ratio:1; border-radius:2px; font-size:8px; display:flex;
  align-items:center; justify-content:center; color:transparent}
.mini-vuoto{background:none}
.mini-g{cursor:default}
.mini-l0{background:var(--rosso-chiaro); border:1px solid #f0cdc8}
.mini-l1{background:#f0f4f5; border:1px solid var(--bordo)}
.mini-l2{background:var(--petrolio)}
.mini-l3{background:repeating-linear-gradient(45deg,#eef3f4,#eef3f4 2px,#dbe6e9 2px,#dbe6e9 4px)}
.legenda i.mini-l0,.legenda i.mini-l1,.legenda i.mini-l2,.legenda i.mini-l3{border-radius:2px}

/* ---------- linguette dei periodi di fabbisogno ---------- */
.tabs button .tab-nome{display:block}
.tabs button .tab-date{display:block; font-size:9.5px; font-weight:600; opacity:.72;
  letter-spacing:0; font-variant-numeric:tabular-nums}

/* ---------- gestione dei bar ---------- */
.tab-bar-gest .frecce{display:flex; gap:2px}
.tab-bar-gest .frecce .btn{padding:2px 7px; font-size:10px; line-height:1.4}
.tab-bar-gest tr.spento td{opacity:.6}

/* ---------- stampa ---------- */
@media print{
  .barra,.barra-azioni,.no-stampa{display:none!important}
  body{background:#fff; font-size:10pt}
  main{padding:0; max-width:none}
  .riquadro{border:0; box-shadow:none; padding:0; page-break-inside:avoid}
  table.dati th{background:#014059!important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .barra-perc,.barra-perc i{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* ---------- login ---------- */
.pagina-login{min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--petrolio) 0%,var(--petrolio-scuro) 100%); padding:20px}
.scatola-login{background:#fff; border-radius:10px; padding:32px; width:100%; max-width:400px;
  box-shadow:0 12px 40px rgba(0,0,0,.28)}
.scatola-login .marchio{color:var(--petrolio); font-size:22px; margin-bottom:4px}
.scatola-login p.occhiello{color:var(--grigio); font-size:12.5px; margin:0 0 22px}
.scatola-login .campo{margin-bottom:14px}
.scatola-login .btn{width:100%; justify-content:center; padding:10px}
.nota-riservatezza{font-size:11px; color:var(--grigio); margin-top:18px; line-height:1.4;
  border-top:1px solid var(--bordo); padding-top:12px}

/* ==========================================================================
   TELEFONO E TABLET
   La regola: la pagina non scorre mai in orizzontale. Quello che è largo
   (griglie, tabelle) scorre dentro al suo riquadro, non trascina lo schermo.
   ========================================================================== */

.solo-telefono{display:none}

@media (max-width:900px){
  body{font-size:15px}                      /* dito, non mouse */
  main{padding:12px 12px 80px}

  /* barra: marchio a sinistra, navigazione che scorre sotto */
  .barra{height:auto; flex-wrap:wrap; gap:8px; padding:8px 12px; align-items:center}
  .marchio{font-size:15px; flex:1}
  .utente{font-size:11px; gap:7px}
  .utente b{display:none}                   /* il nome lo sa già */
  /* Da quando il numero e' il collegamento al registro delle versioni non si
     puo' piu' nascondere sul telefono: sarebbe l'unica porta, murata. Resta,
     ma rimpicciolito, che era il motivo per cui era stato tolto. */
  .barra .versione{font-size:9px; letter-spacing:.2px}
  .nav{order:3; width:100%; margin:0; overflow-x:auto; padding-bottom:2px;
       -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:8px 14px; white-space:nowrap; font-size:12px}

  h1{font-size:18px}
  .testata-pagina{gap:10px}
  .riquadro{padding:12px}

  /* i campi vanno a tutta larghezza, uno sotto l'altro */
  .griglia-campi{grid-template-columns:1fr; gap:10px}
  input[type=text],input[type=date],input[type=time],input[type=number],
  input[type=password],input[type=tel],input[type=email],select,textarea{padding:10px; font-size:16px}  /* 16px: iOS non zooma */
  .btn{padding:10px 15px; font-size:13px}
  .btn.piccolo{padding:8px 12px; font-size:12.5px}
  .barra-azioni{gap:6px}
  .barra-azioni .btn{flex:1 1 auto; justify-content:center}

  /* elenco persone/bar: tenuto basso, scorre dentro di sé, così la scheda
     scelta resta a portata di pollice invece di finire sotto quattordici nomi */
  .elenco{max-height:34vh}
  .elenco .voce{padding:11px}

  /* ogni tabella larga scorre dentro al suo contenitore */
  .riquadro > table.dati,
  .riquadro > div > table.dati{display:block; overflow-x:auto; white-space:nowrap}

  /* le liste colleghe: più basse, si scorre meno */
  select[multiple]{min-height:150px}

  .tabs{gap:2px}
  .tabs button{padding:9px 13px; font-size:12px; min-height:40px}
  .giorno-nav{overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px;
              -webkit-overflow-scrolling:touch}
  /* Il bersaglio del dito. Con 9 px di imbottitura il tasto era alto 34 px e
     per prendere il giorno giusto bisognava mirare: 44 è la misura sotto la
     quale un tocco su tre finisce sul giorno accanto. */
  .giorno-nav button{white-space:nowrap; padding:11px 13px; min-height:44px; font-size:12px}

  .solo-telefono{display:block}
  .solo-schermo-grande{display:none}
}

/* ==========================================================================
   DOVE SI TOCCA, NON DOVE È STRETTO
   Le regole qui sopra guardano la **larghezza**, e va bene per il telefono. Ma
   un iPad in orizzontale è largo 1180 px: prendeva le misure da mouse, e i
   suoi bersagli restavano quelli da puntatore — le spunte della disponibilità
   sui bar sono 15 px, cioè mezzo polpastrello. `pointer: coarse` chiede
   un'altra cosa: **con che cosa lo stai toccando**. Vale su ogni tablet e su
   ogni telefono, a qualunque larghezza, e non tocca un desktop col mouse.
   ========================================================================== */
@media (pointer: coarse){
  input[type=checkbox], input[type=radio],
  .spunta input, table.dati th.col-spunta .tutti input{width:20px; height:20px}
  table.dati td{padding:8px}
  .btn{padding:9px 15px}
  .btn.piccolo{padding:8px 12px}
  .tabs button{min-height:40px}
  /* Le spunte con l'etichetta accanto e il «tutti» in testa a una colonna:
     il bersaglio è l'etichetta, e senza imbottitura era alta venti pixel. */
  .spunta{min-height:34px}
  table.dati th.col-spunta .tutti{padding:5px 0}
  /* I giorni della barra «riempi»: sotto i 900 px si allargano già da soli,
     ma su un tablet largo restavano i chip da mouse. */
  .riempi .giorni button{padding:10px 11px; min-height:40px}
  .giorno-nav button{min-height:44px; padding:11px 13px; font-size:12px}
  /* La riga del turno richiesto: i due menu dell'orario si toccano di continuo
     quando si scrive un fabbisogno, ed erano alti 24 px. */
  .riga-turno .ora-turno{padding:7px 4px}
  .riga-turno .togli-turno{padding:0 10px}
  .tocca{min-height:42px; padding:8px}
  .lista-colleghe .spunta{padding:7px 0}

  /* LA GRIGLIA DI COMPOSIZIONE SU UN TABLET. Un iPad in orizzontale ci sta
     dentro — 290 px di targhette più 35 colonne da 17 fanno 885 px — ma le
     righe erano alte 22 px: la tendina della persona ne misurava 21 e il tasto
     «max» 18. Qui le righe si alzano, e con loro si alzano anche le caselle da
     dipingere: la fascia di un turno si prende meglio col dito. Dal telefono
     resta comunque l'elenco, che è la vista giusta là sotto. */
  table.turni th, table.turni td{height:36px}
  .et-persona .pers-scelta{padding:7px 2px; font-size:12.5px}
  .et-persona .btn-max{padding:8px 9px; font-size:10.5px}
  .pallino-disp{width:12px; height:12px}
}

/* ---- TABLET: la fascia che nessuno dei due estremi copriva ----
   Fra 901 e 1100 px — un iPad in orizzontale — le due colonne diventano una
   sola (è la regola di `.colonne`) ma valgono ancora le misure da schermo
   grande: l'elenco delle schede restava alto 72vh, cioè quasi tutto lo
   schermo, e per arrivare alla scheda aperta bisognava scorrere una pagina
   intera di nomi. È lo stesso problema che dal telefono era già risolto. */
@media (min-width:901px) and (max-width:1100px){
  .elenco{max-height:42vh}
  .colonne{gap:12px}
}

@media (max-width:900px){
  .mini-mesi{grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:7px}
  /* le frecce dell'anno restano in riga: a tutta larghezza occuperebbero
     mezzo schermo per due tasti che si premono di rado */
  .miniatura-testata .barra-azioni{flex-direction:row; align-items:center}
  .miniatura-testata .barra-azioni .btn{flex:0 0 auto; width:auto}
  .mini-anno{min-width:0; flex:1}
  .lista-colleghe{max-height:160px}
  .lista-colleghe .spunta{padding:6px 0}
}

@media (max-width:520px){
  .marchio em{display:none}
  .mini-mesi{grid-template-columns:repeat(2,1fr)}
  main{padding:10px 9px 80px}
  .riquadro{padding:10px; border-radius:5px}
  h2{font-size:13.5px}
  /* I TASTI, DUE PER RIGA. Erano uno per riga a tutta larghezza: la testata del
     calendario ne ha sette, e sette tasti in colonna erano uno schermo intero
     prima di arrivare ai giorni — cioè al motivo per cui si era aperta la
     pagina. Due per riga li tiene comodi al pollice e li fa stare in tre righe.
     Uno solo si allarga da sé, perché `flex-grow` resta a 1. */
  .barra-azioni .btn{flex:1 1 calc(50% - 4px); min-width:0; width:auto; justify-content:center}
}

/* ---- riempimento rapido di una griglia (comodo col mouse, indispensabile col dito) ---- */
.riempi{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; background:#f2f8f9;
  border:1px solid var(--bordo); border-radius:var(--r); padding:9px 11px; margin-bottom:9px}
.riempi .gruppo{display:flex; flex-direction:column; gap:3px}
.riempi label{margin:0}
.riempi .giorni{display:flex; gap:3px; flex-wrap:wrap}
.riempi .giorni button{border:1px solid var(--bordo-forte); background:#fff; color:var(--grigio);
  border-radius:var(--r); padding:6px 9px; font-family:inherit; font-size:11.5px; font-weight:800;
  cursor:pointer; min-width:38px}
.riempi .giorni button.on{background:var(--petrolio); color:#fff; border-color:var(--petrolio)}
.riempi select{min-width:88px}
.riempi .nota{flex-basis:100%; font-size:11px; color:var(--grigio); margin:0}
@media (max-width:900px){
  .riempi{gap:7px}
  .riempi .gruppo{flex:1 1 120px}
  .riempi .giorni button{flex:1; padding:9px 4px}
}

/* ---- calendario del giorno in versione elenco (telefono) ---- */
.turni-elenco{border:1px solid var(--bordo); border-top:0; border-radius:0 0 var(--r) var(--r)}
.turni-elenco .turno{display:flex; align-items:center; gap:10px; padding:9px 11px;
  border-bottom:1px solid #eef3f4}
.turni-elenco .turno:last-child{border-bottom:0}
.turni-elenco .chi{flex:1; font-weight:700; font-size:13.5px}
.turni-elenco .chi small{display:block; font-weight:400; color:var(--grigio); font-size:11px}
.turni-elenco .quando{font-variant-numeric:tabular-nums; font-weight:800; color:var(--petrolio);
  font-size:13px; white-space:nowrap}
.turni-elenco .durata{font-size:11px; color:var(--grigio); white-space:nowrap; min-width:74px; text-align:right;
  font-variant-numeric:tabular-nums}
.turni-elenco .durata.oltre{color:var(--rosso); font-weight:800}
.turni-elenco .turno > .pallino-disp{width:10px; height:10px}
.turni-elenco .vuoto{padding:14px; text-align:center}
.buchi{background:var(--rosso-chiaro); border-left:3px solid var(--rosso); padding:8px 11px;
  font-size:12px; color:#7d221b}
.buchi b{display:block; margin-bottom:2px}

/* Un contenitore che non si restringe sotto il proprio contenuto trascina tutta
   la pagina in orizzontale. I figli di grid e flex hanno min-width:auto: qui si
   azzera, così le griglie larghe scorrono dentro al loro riquadro. */
.colonne > *{min-width:0}
.riquadro{min-width:0; max-width:100%}
.griglia-wrap{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
[data-contenuto-variante],[data-contenuto-fabbisogno],[data-giorno-corrente],
.bar-blocco,#scheda-persona,#scheda-bar,#area-calendario{min-width:0; max-width:100%}
table.dati{max-width:100%}

/* ===========================================================================
   IL CALENDARIO DELLA PERSONA, IL DIARIO, IL SALDO
   =========================================================================== */

/* I tre-quattro numeri che dicono se un mese torna. Stanno in fila e si leggono
   in un colpo: sono la prima cosa che si guarda aprendo la pagina. */
.conti-piano{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 4px}
.conti-piano .conto{background:#f4f9fa; border:1px solid var(--bordo); border-radius:var(--r);
  padding:7px 12px; min-width:150px}
.conti-piano .conto small{display:block; font-size:10.5px; color:var(--grigio);
  text-transform:uppercase; letter-spacing:.5px; font-weight:700}
.conti-piano .conto b{font-size:17px; color:var(--petrolio); font-variant-numeric:tabular-nums}
.conti-piano .conto.ok{background:var(--verde-chiaro); border-color:#bfe0cf}
.conti-piano .conto.ok b{color:var(--verde)}
.conti-piano .conto.sopra{background:var(--ambra); border-color:#f0dca8}
.conti-piano .conto.sopra b{color:#8a6a12}
.conti-piano .conto.sotto{background:var(--rosso-chiaro); border-color:#f2c9c4}
.conti-piano .conto.sotto b{color:var(--rosso)}
.conti-piano .conto.mutua{background:#eef2fb; border-color:#c9d5ef}
.conti-piano .conto.mutua b{color:#3d5aa0}

/* Una settimana per riga: il menu della settimana-tipo a sinistra, i sei giorni
   in fila. E' la forma con cui si ragiona quando si costruisce un orario. */
.settimana-piano{border:1px solid var(--bordo); border-radius:var(--r); margin-bottom:10px;
  background:#fff; overflow:hidden}
.settimana-testa{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#eaf2f4; padding:7px 12px; border-bottom:1px solid var(--bordo)}
.settimana-testa b{color:var(--petrolio); font-size:12.5px}
.ore-sett{margin-left:auto; font-weight:800; color:var(--petrolio);
  font-variant-numeric:tabular-nums; font-size:13px}
.giorni-piano{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; padding:8px}
@media(max-width:760px){.giorni-piano{grid-template-columns:repeat(3,1fr)}}
.giorno-piano{background:#fff; border:1px solid var(--bordo); border-radius:var(--r);
  padding:7px 6px; text-align:left; cursor:pointer; font:inherit; color:inherit; min-height:62px}
.giorno-piano:hover{border-color:var(--petrolio-chiaro); box-shadow:var(--ombra)}
.giorno-piano small{display:block; font-size:10px; color:var(--grigio); text-transform:uppercase;
  letter-spacing:.5px; font-weight:700}
.giorno-piano b{display:block; font-size:14px; color:var(--petrolio); font-variant-numeric:tabular-nums}
.giorno-piano .fasce{display:block; font-size:9.5px; color:var(--grigio); line-height:1.25}
/* Un giorno deciso a mano si vede: le ricompilazioni non lo toccheranno. */
.giorno-piano.mano{border-left:3px solid var(--giallo)}
/* «Non ancora deciso» e «di riposo» non sono la stessa cosa, e non si somigliano. */
.giorno-piano.indeciso{background:#fafcfc; border-style:dashed}
.giorno-piano.indeciso b{color:var(--grigio)}
.giorno-piano.riposo b{color:var(--grigio); font-weight:600}
.giorno-piano.chiuso{background:repeating-linear-gradient(45deg,#f4f9fa,#f4f9fa 4px,#e8f0f2 4px,#e8f0f2 8px)}
.giorno-piano.chiuso b{color:var(--grigio)}

/* La griglia di un giorno solo: stessa cella della griglia grande, una riga. */
table.griglia.riga-sola td.cella{height:30px}

/* L'accordo — lo stato della proposta e le note che la spiegano. */
.accordo{border:1px solid var(--bordo); border-radius:var(--r); padding:10px 12px;
  margin-bottom:10px; background:#fff}
.accordo.compatto{margin:0 0 10px; background:#fbfdfd}
.accordo-testa{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.accordo label{display:block; font-size:11px; font-weight:700; color:var(--grigio);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px}
.accordo textarea{width:100%}
.stato-accordo{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
  padding:3px 9px; border-radius:99px; border:1px solid transparent}
.stato-accordo.ok{background:var(--verde-chiaro); color:var(--verde); border-color:#bfe0cf}
.stato-accordo.attesa{background:var(--ambra); color:#8a6a12; border-color:#f0dca8}
.stato-accordo.vuoto{background:#eef4f5; color:var(--grigio); border-color:var(--bordo)}
/* La spunta con cui si accetta la proposta. Va sottratta a «.accordo label»,
   che è l'etichetta grigia dei campi: qui non è un'etichetta, è il gesto. */
.accordo .spunta.accetta{display:inline-flex; align-items:center; gap:7px; margin:0;
  font-size:13px; font-weight:800; color:var(--petrolio); text-transform:none;
  letter-spacing:0; cursor:pointer}
.accordo .spunta.accetta input{width:17px; height:17px}
.accordo .spunta.accetta.spenta{color:var(--grigio); opacity:.65; cursor:not-allowed}

/* Il saldo del mese: il segno conta più del numero, quindi si vede prima. */
td.saldo{font-weight:800; font-variant-numeric:tabular-nums}
td.saldo.sopra{color:var(--verde)}
td.saldo.sotto{color:var(--rosso)}
td.mutua-cella{color:#3d5aa0; font-weight:700}
.mutua-tag{color:#3d5aa0}
.badge.mutua{background:#eef2fb; color:#3d5aa0; border-color:#c9d5ef}
table.dati tr.chiusa td{background:#fbfcfc}

/* ---------- il registro delle versioni (?p=versioni) ----------
   Il numero in testata e' un collegamento: si clicca e si legge cosa e'
   cambiato in quella tornata. La pagina stampa `src/versioni.php`, che e'
   anche la sorgente del numero — non una copia che puo' restare indietro. */
a.versione{text-decoration:none}
a.versione:hover{color:var(--giallo)}
.codice{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em;
  background:#eef4f5; border:1px solid var(--bordo); border-radius:3px; padding:0 4px}
.versione-voce{border-top:1px solid var(--bordo); padding:12px 0 2px}
.versione-voce:first-of-type{border-top:0}
.versione-voce h2{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:2px}
.versione-voce h2 .quando{font-size:11px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--grigio); font-variant-numeric:tabular-nums}
.versione-voce h3{color:var(--grigio); font-weight:700; margin-bottom:6px}
.versione-voce ul{margin:0 0 8px; padding-left:18px}
.versione-voce li{margin-bottom:5px}
.versione-voce.in-esercizio{background:#f2f8f9; border-radius:var(--r); padding:12px 12px 4px; margin-bottom:6px}
/* La settimana senza numero: c'e' stata, ma non ha una versione sua. Grigia
   apposta — e' un pezzo di storia, non una riga del registro. */
.versione-voce.prima-del-numero h2,
.versione-voce.prima-del-numero h3{color:var(--grigio)}
.tag-versione{background:var(--menta); color:var(--petrolio-scuro); font-weight:800;
  font-size:10px; padding:2px 8px; border-radius:10px; letter-spacing:.5px;
  text-transform:uppercase}
.nome-versione{font-family:'Dela Gothic One','Manrope',sans-serif; font-size:13px;
  font-weight:400; color:var(--sabbia); text-transform:none; letter-spacing:.2px}

/* ===========================================================================
   0.4.6 — I TURNI RICHIESTI, IL RIQUADRO CHE SPIEGA
   =========================================================================== */

/* ---- la scelta della grammatica: a teste o a turni ---- */
.scelta-modo{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; background:#f2f8f9;
  border:1px solid var(--bordo); border-radius:var(--r); padding:9px 12px; margin-bottom:12px}
.scelta-modo .et{color:var(--grigio); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.5px; font-weight:800}
.scelta-modo label{display:inline-flex; align-items:center; gap:6px; margin:0; font-size:12.5px;
  cursor:pointer; color:var(--ink); font-weight:400}
.scelta-modo label b{font-weight:800; color:var(--petrolio)}

/* ---- i turni di un giorno ----
   Un giorno per blocco, i turni uno sotto l'altro: e' la forma in cui il
   fabbisogno viene detto a voce, e scriverlo come si dice toglie di mezzo il
   passaggio in cui lo si traduceva in caselle. */
.giorno-turni{border:1px solid var(--bordo); border-radius:var(--r); margin-bottom:9px; background:#fff}
.giorno-turni-testa{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  background:#eaf2f4; padding:6px 11px; border-bottom:1px solid var(--bordo);
  border-radius:var(--r) var(--r) 0 0}
.giorno-turni-testa b{color:var(--petrolio); font-size:13px}
.giorno-turni-testa .conta{color:var(--grigio); font-size:11.5px}
.giorno-turni-testa .spazio{flex:1}
.giorno-turni-corpo{padding:6px 11px 9px}
.giorno-turni-corpo .vuoto{padding:8px 0; font-size:12px; color:var(--grigio); text-align:left}

.riga-turno{display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:5px 0;
  border-bottom:1px solid #eef3f4}
.riga-turno:last-child{border-bottom:0}
.riga-turno .targa{flex:none; background:var(--petrolio); color:#fff; border-radius:4px;
  font-size:10px; font-weight:800; letter-spacing:.5px; padding:2px 6px; min-width:26px; text-align:center}
.riga-turno.resp .targa{background:var(--giallo); color:var(--petrolio-scuro)}
.riga-turno .dalle{color:var(--grigio); font-size:11.5px}
/* La regola generale vuole i menu larghi quanto il campo; qui no: un orario e'
   cinque caratteri, e un menu largo mezzo schermo manda la riga a capo quattro
   volte trasformando tre turni in dodici righe. */
.riga-turno .ora-turno{flex:none; width:auto; min-width:78px; padding:3px 4px;
  font-size:12.5px; font-variant-numeric:tabular-nums; cursor:pointer}
.riga-turno .ore-turno{flex:none; font-size:11.5px; font-weight:800; color:var(--petrolio);
  font-variant-numeric:tabular-nums; min-width:52px}
.riga-turno .nome-turno{flex:1 1 130px; width:auto; min-width:110px; border:1px solid transparent;
  background:#f6fafb; border-radius:var(--r); font-family:inherit; font-size:12px;
  padding:4px 7px; color:var(--ink)}
.riga-turno .nome-turno:focus{border-color:var(--menta); background:#fff; outline:none}
.riga-turno .spunta-resp{display:inline-flex; align-items:center; gap:4px; margin:0;
  font-size:11px; color:var(--grigio); white-space:nowrap; cursor:pointer; font-weight:400}
.riga-turno .togli-turno{flex:none; border:0; background:none; color:var(--grigio); cursor:pointer;
  font-size:17px; line-height:1; padding:0 4px; font-family:inherit}
.riga-turno .togli-turno:hover{color:var(--rosso)}

.copia-turni{margin:8px 11px 11px; padding:9px 11px; background:#f2f8f9;
  border:1px solid var(--bordo); border-radius:var(--r)}
.copia-turni .giorni{display:flex; gap:5px; flex-wrap:wrap; margin:8px 0}
.copia-turni .giorni .btn.on{background:var(--petrolio); color:#fff; border-color:var(--petrolio)}
.copia-turni .nota{font-size:11px; color:var(--grigio); margin:0 0 8px}

.referto-celle{margin-top:10px}
.referto-celle summary{cursor:pointer; color:var(--grigio); font-size:11.5px; padding:4px 0}
.referto-celle summary:hover{color:var(--petrolio)}

/* ---- la targa del turno nella griglia del calendario ---- */
.targa-turno{flex:none; background:var(--petrolio); color:#fff; border-radius:3px;
  font-size:9px; font-weight:800; letter-spacing:.4px; padding:1px 4px; min-width:19px;
  text-align:center; line-height:1.5}
.targa-turno.resp{background:var(--giallo); color:var(--petrolio-scuro)}
.targa-turno.extra{background:#fff; color:var(--grigio); border:1px dashed var(--bordo-forte)}
.turni-elenco .targa-turno{font-size:10.5px; padding:2px 6px}
.turni-elenco .turno.scoperto{background:var(--rosso-chiaro)}
.turni-elenco .turno.scoperto .chi{color:#7d221b}

/* La fascia che il turno chiede, anche dove non c'e' ancora nessuno: e' proprio
   quando la riga e' vuota che serve vedere quanto e' lungo il turno scoperto. */
table.turni td.slotcella.chiesto{background:#eaf6f4; box-shadow:inset 0 -3px 0 var(--menta)}
table.turni td.slotcella.chiesto.pieno{background:var(--petrolio)}
table.turni td.slotcella.chiesto.manuale{background:var(--petrolio-chiaro)}

/* Le fasce della tendina di un turno: chi lo copre tutto sta in cima, e si vede
   che sono fasce e non un elenco unico. */
.pers-scelta optgroup{font-style:normal; font-weight:800; color:var(--grigio); font-size:11px}
.pers-scelta option{font-weight:400; color:var(--ink)}

/* ---- il riquadro che spiega un colore ----
   Un `title` non basta: e' una riga sola, arriva tardi e dal telefono non arriva
   mai. Qui il colore argomenta, con dentro le fasce e i numeri da controllare. */
.ha-spiega{cursor:help}
.ha-spiega:focus{outline:2px solid var(--menta); outline-offset:2px}
.spiegone{position:fixed; z-index:300; background:#fff; border:1px solid var(--bordo-forte);
  border-radius:var(--r); box-shadow:0 8px 28px rgba(12,45,58,.20); padding:11px 13px;
  font-size:12px; line-height:1.5; color:var(--ink); max-height:70vh; overflow-y:auto}
.spiegone[hidden]{display:none}
.spiegone-testa{display:flex; align-items:center; gap:7px; margin-bottom:5px}
.spiegone-testa b{font-size:12.5px; color:var(--petrolio)}
.spiegone-testa .pallino-disp{width:11px; height:11px}
.spiegone-perche{margin:0 0 7px}
.spiegone-motivi{margin:0 0 7px; padding-left:17px}
.spiegone-motivi li{margin-bottom:3px}
.spiegone-nota{margin:0 0 7px; color:var(--grigio); font-style:italic; font-size:11.5px}
.spiegone-conti{border-top:1px solid var(--bordo); padding-top:6px; margin-top:2px}
.spiegone-riga{display:flex; justify-content:space-between; gap:12px; padding:2px 0;
  font-size:11.5px; color:var(--grigio)}
.spiegone-riga b{color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
.spiegone-riga.sfora b{color:var(--rosso)}

@media (max-width:900px){
  .riga-turno{gap:5px}
  .riga-turno .nome-turno{flex-basis:100%; min-width:0}
  .scelta-modo{flex-direction:column; align-items:flex-start; gap:5px}
}

/* ===========================================================================
   0.4.7 — LA BARRA DEL GIORNO, I RIPOSI, LE COPIE DI SICUREZZA
   =========================================================================== */

/* La barra che sta sotto ai giorni: copia e incolla delle formazioni, e le due
   stampe della settimana. Sta qui e non nella testata del calendario perché
   sono gesti che riguardano il giorno che si sta guardando, non il periodo. */
.barra-giorno{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  border-top:1px solid var(--bordo); padding-top:10px; margin-bottom:12px}
.barra-giorno .divisore{width:1px; height:20px; background:var(--bordo); margin:0 2px}
.barra-giorno .etichetta{font-size:11px; color:var(--grigio); text-transform:uppercase;
  letter-spacing:.5px; font-weight:800}
.barra-giorno .appunti{font-size:11.5px; color:var(--grigio); font-style:italic}
.barra-giorno .appunti b{color:var(--petrolio); font-style:normal}

/* Il referto di un incolla: cosa è entrato, e chi ne esce con un colore che
   non è il verde. Non impedisce niente — è già fatto — ma non lascia passare
   in silenzio una formazione che nel giorno nuovo non torna. */
.referto-incolla{border-left:3px solid var(--menta); background:#f2fbf9; padding:10px 13px;
  border-radius:var(--r); font-size:12.5px; margin-bottom:12px}
.referto-incolla.attenzione{border-color:var(--giallo); background:var(--ambra)}
.referto-incolla > b{display:block; margin-bottom:4px; color:var(--petrolio)}
.referto-incolla ul{margin:7px 0 0; padding-left:6px; list-style:none}
.referto-incolla li{display:flex; align-items:flex-start; gap:7px; padding:3px 0;
  border-top:1px solid rgba(1,64,89,.08)}
.referto-incolla li .pallino-disp{margin-top:4px}
.referto-incolla li .chi{font-weight:700; white-space:nowrap}
.referto-incolla .chiudi{float:right; cursor:pointer; border:0; background:none;
  color:var(--grigio); font-size:15px; line-height:1; padding:0 2px}

/* Le due liste di fondo pagina: riposi e ore mancanti. */
.colonne-due{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
/* Senza `min-width:0` una colonna di griglia non scende sotto la larghezza del
   suo contenuto: la tabella dentro smette di scorrere nel suo riquadro e a
   scorrere di lato comincia la pagina intera. Dal telefono si vede subito. */
.colonne-due > *{min-width:0}
@media(max-width:1100px){.colonne-due{grid-template-columns:1fr}}
h4.titolino{margin:0 0 8px; font-size:12px; font-weight:800; color:var(--petrolio);
  text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:7px}
h4.titolino .conta{font-weight:700; font-size:11px; letter-spacing:0; text-transform:none;
  color:var(--grigio); background:var(--bg); border:1px solid var(--bordo);
  border-radius:10px; padding:0 7px}
table.dati td .motivo{font-size:11.5px; color:var(--grigio)}
table.dati td .motivo.assenza{color:var(--rosso)}
table.dati td .motivo.deciso{color:var(--verde)}
table.dati td.num.manca{color:var(--rosso); font-weight:800}

/* «Non c'è un tasto Salva» va detto dove il tasto Salva si cerca — accanto al
   periodo del calendario — e non dentro a un pannello che bisogna aprire. */
.gia-salvato{display:inline-flex; align-items:center; gap:4px; margin-left:10px;
  background:var(--verde-chiaro); color:#1d5a3f; border:1px solid #bfe3d0;
  border-radius:10px; padding:1px 9px; font-size:11px; font-weight:700; cursor:help}

/* ===========================================================================
   0.4.8 — DOVE PUO' STARE, LA TARGA TP, LA COPIA PER SCUOLE
   =========================================================================== */

/* LE CASELLE DELLA DISPONIBILITA'. Si accendono sulla riga della persona
   scelta, e solo nei bar che chiedono a ore: sono un fondo tenue, non un
   colore pieno, perché devono restare *sotto* al turno dipinto e non
   competere con lui. Il turno assegnato è petrolio e vince sempre. */
table.turni td.slotcella.disp{background:#dff4ef; box-shadow:inset 0 3px 0 var(--menta)}
table.turni td.slotcella.disp-emerg{background:#fdf1cf; box-shadow:inset 0 3px 0 var(--giallo)}
table.turni td.slotcella.disp-altrove{background:repeating-linear-gradient(45deg,#f2f6f7,#f2f6f7 3px,#e3ebed 3px,#e3ebed 6px)}
table.turni td.slotcella.disp-assente{background:repeating-linear-gradient(45deg,#fdf0ee,#fdf0ee 3px,#f8dcd8 3px,#f8dcd8 6px)}
.legenda-disp i.cella-legenda{width:14px; height:12px; border:1px solid var(--bordo); border-radius:2px}
.legenda-disp i.cella-legenda.disp{background:#dff4ef; border-top:3px solid var(--menta)}
.legenda-disp i.cella-legenda.disp-emerg{background:#fdf1cf; border-top:3px solid var(--giallo)}
.legenda-disp i.cella-legenda.disp-altrove{background:repeating-linear-gradient(45deg,#f2f6f7,#f2f6f7 3px,#e3ebed 3px,#e3ebed 6px)}
.legenda-disp i.cella-legenda.disp-assente{background:repeating-linear-gradient(45deg,#fdf0ee,#fdf0ee 3px,#f8dcd8 3px,#f8dcd8 6px)}

/* La targa TP: stesso giallo della voce «in prova» nell'elenco delle schede,
   perché è la stessa cosa detta in due posti diversi. */
.targa-turno.prova{background:var(--giallo); color:var(--petrolio-scuro); box-shadow:inset 0 0 0 1px #c7960a}
.targa-turno.extra.prova{background:var(--ambra); color:#8a6a00; border-color:var(--giallo)}

/* Il pannello che chiede quali scuole copiare. */
.copia-scuole{border-left:3px solid var(--giallo); background:var(--ambra); padding:11px 13px;
  border-radius:var(--r); margin-bottom:12px; font-size:12.5px}
.copia-scuole > b{display:block; color:var(--petrolio); margin-bottom:2px}
.copia-scuole .nota{margin:0 0 9px; color:var(--grigio); font-size:11.5px}
.copia-scuole .scuole{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:5px 14px}
/* `label` in questa applicazione è l'etichetta di un campo: minuscola, grigia,
   maiuscoletto. Qui invece la label è la riga di una scuola — nome e conto — e
   quelle regole vanno spente, o il Leonardo diventa «LEONA…». */
.copia-scuole .scuola{display:flex; align-items:center; gap:7px; cursor:pointer;
  background:#fff; border:1px solid var(--bordo); border-radius:var(--r); padding:4px 8px;
  font-size:12px; font-weight:400; color:var(--ink); text-transform:none; letter-spacing:0;
  margin:0}
.copia-scuole .scuola input{flex:none; width:auto}
.copia-scuole .scuola:hover{border-color:var(--bordo-forte)}
.copia-scuole .scuola .sigla{color:#fff; border-radius:3px; padding:1px 6px; font-size:10px;
  font-weight:800; letter-spacing:.4px}
.copia-scuole .scuola .nome{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.copia-scuole .scuola .conto{margin-left:auto; color:var(--grigio); font-size:11px; white-space:nowrap;
  font-weight:600}
.copia-scuole .azioni{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:11px}
.copia-scuole .riepilogo{font-size:11.5px; color:var(--petrolio); font-weight:700}