* { box-sizing: border-box; }

/* ====================================================================================
   I VALORI NOMINATI (08/08/2026).

   Fino a quel giorno questo foglio non aveva NESSUNA variabile: 105 esadecimali scritti
   a mano, con due famiglie di grigio mescolate a caso (#6b7280 accanto a #64748b,
   #e5e7eb accanto a #e2e8f0, #1f2937 accanto a #334155). Differenze che non si notano
   una per una, ma che insieme fanno sembrare l'app assemblata da pezzi diversi — e che
   rendevano impossibile cambiare aspetto senza rompere qualcosa da un'altra parte.

   Qui la famiglia di neutri è UNA, fredda perché sta bene col blu. Chi aggiunge una
   regola pesca da qui e non inventa un colore nuovo.

   IL CONFINE: dentro la griglia del prospetto i colori NON passano da queste variabili
   e non si toccano. Festivi, prestazioni aggiuntive, esiti di copertura, anello dei
   prestiti, colore della professione accanto al nome: quelli SIGNIFICANO qualcosa, sono
   spiegati nelle legende delle stampe e non sono decorazione.
   ==================================================================================== */
:root {
  /* I neutri. Una famiglia sola. */
  --n-0:  #ffffff;
  --n-50: #f8fafc;
  --n-100:#f1f5f9;
  --n-200:#e6ebf2;
  --n-300:#cbd5e1;
  --n-400:#94a3b8;
  --n-500:#64748b;
  --n-600:#475569;
  --n-700:#334155;
  --n-800:#1e293b;
  --n-900:#0f172a;

  /* Il colore dell'azione: resta la famiglia del blu — è l'identità dell'app — ma su
     una scala regolare invece dei tre toni scelti a occhio. Il tono dei comandi si
     schiarisce da #1e3a8a a #2563eb: quello di prima è un blu da intestazione, e su un
     pulsante piccolo si legge quasi come nero. L'intestazione resta profonda. */
  --a-50: #eff6ff;
  --a-100:#dbeafe;
  --a-200:#bfdbfe;
  --a-500:#2563eb;
  --a-600:#1d4ed8;
  --a-700:#1e40af;
  --a-900:#1e3a8a;

  /* Gli stati: un tono pieno e un fondo tenue ciascuno, non di più. */
  --ok-fondo:#ecfdf5;  --ok-bordo:#a7f3d0;  --ok-testo:#065f46;  --ok-pieno:#059669;
  --av-fondo:#fffbeb;  --av-bordo:#fde68a;  --av-testo:#92400e;  --av-pieno:#d97706;
  --er-fondo:#fef2f2;  --er-bordo:#fecaca;  --er-testo:#b91c1c;  --er-pieno:#dc2626;

  /* Forma e profondità. Due ombre soltanto: la superficie che poggia sul fondo e la
     finestra che galleggia sopra tutto. Una terza non aggiungerebbe informazione. */
  --raggio:    10px;
  --raggio-s:   8px;
  --raggio-xs:  6px;
  --ombra-1: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.08);
  --ombra-2: 0 12px 20px -6px rgba(15,23,42,.14), 0 4px 8px -4px rgba(15,23,42,.10);
  --bordo: 1px solid var(--n-200);

  /* I corpi del testo: quattro misure con un rapporto fisso, al posto di 11/12/13/14/
     16/18 messi lì di volta in volta. Il minimo sale a 13px: sotto, un comando è un
     bersaglio che si sbaglia col trackpad. */
  --t-xs: 13px;
  --t-s:  14px;
  --t-m:  15px;
  --t-l:  17px;
  --t-xl: 21px;

  /* Gli spazi: scala a 4, al posto di sette imbottiture diverse per la stessa cosa. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;

  /* L'altezza minima di ciò che si preme. Vale ovunque tranne dentro la griglia, che è
     densa per natura. */
  --bersaglio: 34px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
               system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-s);
  color: var(--n-800);
  background: var(--n-100);
  -webkit-font-smoothing: antialiased;
}

/* Le cifre incolonnate. In un'app fatta di ore, durate e conteggi, le cifre a larghezza
   variabile fanno ballare le colonne da una riga all'altra: questa riga sola le allinea
   in tutte le tabelle senza doverne toccare nemmeno una. */
table, input, .mesi-barra { font-variant-numeric: tabular-nums; }

/* L'anello di messa a fuoco. Prima non c'era, e chi si muove col tasto Tab — o chi non
   usa il mouse — non aveva modo di sapere dove si trovava. */
:focus-visible {
  outline: 2px solid var(--a-500);
  outline-offset: 2px;
  border-radius: var(--raggio-xs);
}
.topbar :focus-visible { outline-color: #fff; }
/* Velo d'avvio: copre tutto finché non si sa chi sta usando l'app, così la barra non
   fa in tempo a mostrare voci che poi spariscono. Sta sopra ogni cosa (anche i modali,
   che stanno a 1000) e lo toglie dal DOM `togliVeloAvvio()` appena `GET /api/io`
   risponde. Stesso colore del fondo pagina: non si vede un lampo bianco. */
#velo-avvio { position: fixed; inset: 0; background: var(--n-100); z-index: 2000; }
/* INTESTAZIONE FISSA a tre fasce (08/08/2026): navigazione, "Stai lavorando su" e la
   striscia dei mesi. Resta agganciata in alto tutta intera, perché contesto e mese sono
   le due domande che ci si fa in ogni schermata ("di che reparto sono questi numeri?",
   "di che mese?"). L'altezza non è fissa — le fasce vanno a capo su finestre strette e
   una si può richiudere —, e per questo la misura il JS (`--topbar-h`), a cui è
   agganciata la fascia dei comandi del prospetto. */
.topbar {
  background: linear-gradient(180deg, #1e3a8a 0%, #17306e 100%); color: #fff;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, var(--ombra-1);
}
.topbar-riga {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 20px;
}
.topbar h1 { font-size: var(--t-l); margin: 0; font-weight: 700; letter-spacing: -.01em; }
nav { display: flex; gap: 6px; }
.tab {
  background: transparent; color: #dbeafe; border: 0;
  padding: 7px 12px; border-radius: var(--raggio-s); cursor: pointer;
  font-size: var(--t-s); font-family: inherit; min-height: var(--bersaglio);
  transition: background .12s ease, color .12s ease;
}
.tab:hover { background: rgba(255,255,255,.12); color: #fff; }
.tab.active { background: #fff; color: var(--a-900); font-weight: 600; }
/* Home: bianco pieno SEMPRE, non solo quando è la vista aperta. È la via di ritorno da
   qualunque schermata — l'unico pulsante che porta all'atrio dell'app — e deve trovarsi
   a colpo d'occhio anche da chi si è perso in una vista di configurazione. */
.tab-home {
  background: #fff; color: var(--a-900); font-weight: 700;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.tab-home:hover { background: #fff; color: var(--a-900); }
/* Il pulsante che richiude le due fasce del contesto: discreto, sta con "Accedi".
   L'etichetta è per esteso («⌃ Nascondi il contesto») e la scrive il JS a seconda di
   com'è messo: un «⌃» da solo, in una barra blu, è un indovinello. */
.btn-contesto { font-size: var(--t-xs); line-height: 1; padding: 8px 10px; white-space: nowrap; }

/* Pulsante del prospetto del mese corrente: è la schermata di tutti i giorni e sta al
   centro della striscia, quindi deve saltare all'occhio (ambra pieno, testo scuro).
   `.corrente` = il mese a video è proprio questo. */
.btn-oggi {
  background: var(--av-pieno); color: #fff; border: 0; font-weight: 700;
  padding: 6px 14px; border-radius: var(--raggio-s); cursor: pointer;
  font-size: var(--t-xs); font-family: inherit; min-height: 32px;
  white-space: nowrap; box-shadow: var(--ombra-1);
}
.btn-oggi:hover { background: #b45309; }
.btn-oggi.corrente { box-shadow: 0 0 0 2px #fff; }

/* ---- Striscia dei mesi (fascia 3 dell'intestazione)
   Tre colonne: i sei mesi prima, il mese di OGGI, i sei dopo. Le due colonne laterali
   hanno la stessa larghezza (`1fr`), così il pulsante centrale resta davvero al centro
   anche quando un lato ha etichette più lunghe (quelle con l'anno, "gen 27").
   Il mese che si sta guardando si riconosce dal contorno blu, che diventa pieno quando
   il prospetto è la vista aperta (`.aperta`, messa da `showView`). */
.mesi-barra {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; padding: 5px 20px;
  background: rgba(0,0,0,.16);
}
.mesi-barra.hidden { display: none; }
.mesi-lato { display: flex; gap: 4px; flex-wrap: wrap; }
#mesi-prima { justify-content: flex-end; }
#mesi-dopo { justify-content: flex-start; }
.mese-btn {
  background: rgba(255,255,255,.10); color: #dbeafe;
  border: 1px solid transparent; border-radius: var(--raggio-xs);
  padding: 5px 10px; font-size: var(--t-xs); font-family: inherit; min-height: 30px;
  cursor: pointer; white-space: nowrap; transition: background .12s ease;
}
.mese-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
/* Il mese che si sta guardando: contornato di bianco. Quando il prospetto è anche la
   vista aperta diventa pieno — la distinzione è la stessa di prima, ridisegnata per
   la fascia scura (il blu pieno di allora, qui, sparirebbe nel fondo). */
.mese-btn.attivo {
  background: rgba(255,255,255,.18); color: #fff; border-color: #fff; font-weight: 700;
}
#top-mesi.aperta .mese-btn.attivo { background: #fff; color: var(--a-900); }

main { padding: 20px; }
/* Il titolo della schermata: uno solo per vista, e si vede che è il titolo. */
.view > h2 {
  font-size: var(--t-xl); font-weight: 700; letter-spacing: -.02em;
  color: var(--n-900); margin: 0 0 var(--s-3);
}
.toolbar > h2 { margin: 0; }
/* NASCONDERE VINCE SEMPRE, ed è `!important` per un motivo preciso.
   `.hidden` è una classe sola, cioè un punto di specificità; i pulsanti qui sotto sono
   dichiarati con selettori a due (`.card-form button`, `.toolbar button`…) che fissano
   `display: inline-flex`. Senza `!important` quelle regole vincerebbero, e ogni comando
   che il JS nasconde a seconda del contesto — sono decine — resterebbe a video. È lo
   stesso argomento per cui la regola dei permessi in fondo al file è scritta così.
   Di conseguenza NON serve più scrivere `.qualcosa.hidden { display: none }`: le poche
   rimaste nel file sono innocue, ma non se ne aggiungono altre. */
.view.hidden, .hidden { display: none !important; }

/* ====================================================================================
   I QUATTRO PESI DEL PULSANTE (08/08/2026)

   La regola nuova, in una riga: BLU PIENO = «QUESTO CONCLUDE». Uno solo per schermata o
   per finestra. Prima il blu pieno significava tre cose diverse — conferma un form, apri
   un form, scheda selezionata — e quindi non ne significava nessuna: se tutto risalta,
   niente risalta.

     normale    fondo chiaro e bordo   il default: quasi tutto è questo
     primario   blu pieno              l'azione che conclude (Salva, Conferma, Valida)
     testuale   senza bordo, blu       navigazione dentro l'app
     rimozione  etichetta rossa        cancellazioni. MAI fondo rosso pieno: farebbe
                                       risaltare la cosa più pericolosa dello schermo

   I selettori sono quelli che il markup già usa, così la regola vale su tutte le
   schermate senza toccare i punti di chiamata.
   ==================================================================================== */
.ui-btn,
.card-form button,
.table-toolbar button,
.modal-azioni button,
.toolbar button,
.editor button,
a.btn,
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--bersaglio);
  padding: 7px 13px;
  font-size: var(--t-s);
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  color: var(--n-700);
  background: var(--n-0);
  border: 1px solid var(--n-300);
  border-radius: var(--raggio-s);
  box-shadow: 0 1px 1px rgba(15,23,42,.03);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.ui-btn:hover,
.card-form button:hover,
.table-toolbar button:hover,
.modal-azioni button:hover,
.toolbar button:hover,
.editor button:hover,
a.btn:hover,
.btn:hover { background: var(--n-50); border-color: var(--n-400); }

/* Il "+15 gg prima" non si applica al prospetto per periodo: resta visibile ma spento,
   così non sembra sparito. Stessa convenzione ovunque. */
button:disabled, .toolbar button:disabled {
  opacity: .45; cursor: not-allowed; background: var(--n-100);
}

/* PRIMARIO. `.primario` finalmente esiste: era scritta in cinque punti dell'HTML senza
   che nessuna regola la agganciasse, e in quattro casi non faceva assolutamente niente
   (quei pulsanti erano blu solo perché lo era già il loro contenitore). */
.ui-btn--primario,
button.primario,
.card-form button[type="submit"],
.modal-azioni button[type="submit"],
.card-form .form-azioni button[type="submit"] {
  background: var(--a-500); border-color: var(--a-500); color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(37,99,235,.35);
}
.ui-btn--primario:hover,
button.primario:hover,
.card-form button[type="submit"]:hover,
.modal-azioni button[type="submit"]:hover,
.card-form .form-azioni button[type="submit"]:hover {
  background: var(--a-600); border-color: var(--a-600);
}
/* Un primario SPENTO non resta blu. `button:disabled` da solo non basta: ha la stessa
   specificità di `button.primario` e viene prima nel foglio, quindi perderebbe — il
   pulsante resterebbe blu con la sola opacità abbassata. I «Salva» degli editor stanno
   spenti quasi sempre (finché non si tocca niente non c'è niente da salvare): se restano
   blu, il blu smette di voler dire «premi qui». */
.ui-btn--primario:disabled,
button.primario:disabled,
.card-form button[type="submit"]:disabled,
.modal-azioni button[type="submit"]:disabled {
  background: var(--n-200); border-color: var(--n-200); color: var(--n-500); box-shadow: none;
}

/* SECONDARIO dichiarato (`.ghost`): stessa forma del normale, tono più basso. È una
   regola di base e non un'eccezione dentro tre contenitori, come era fino all'08/08/2026:
   il «🎲 Proponi» del modale della password non stava in nessuno dei tre e usciva con
   l'aspetto grezzo del browser, l'unico pulsante dell'app fatto così. */
button.ghost:not(.mini), .ui-btn--ghost {
  background: var(--n-100); border-color: var(--n-200); color: var(--n-600);
  box-shadow: none;
}
button.ghost:not(.mini):hover, .ui-btn--ghost:hover {
  background: var(--n-200); border-color: var(--n-300);
}

/* TESTUALE: navigazione dentro l'app, non un'azione sui dati. */
.ui-btn--testo, .btn-testo, .link-archivio {
  background: transparent; border-color: transparent; color: var(--a-600);
  box-shadow: none; font-weight: 500; text-decoration: none;
}
.ui-btn--testo:hover, .btn-testo:hover, .link-archivio:hover {
  background: var(--a-50); border-color: transparent; color: var(--a-700);
}

/* RIMOZIONE: etichetta rossa, mai fondo rosso pieno. Un rettangolo rosso saturo attira
   l'occhio, e la cosa che non deve attirare l'occhio è proprio quella che cancella. Il
   rosso pieno si tiene per gli errori, che sono già avvenuti. */
.ui-btn--rimuovi, button.pericolo {
  background: var(--n-0); border-color: var(--er-bordo); color: var(--er-testo);
  box-shadow: none; font-weight: 500;
}
.ui-btn--rimuovi:hover, button.pericolo:hover {
  background: var(--er-fondo); border-color: var(--er-pieno);
}

/* La rimozione DENTRO UN ELENCO (`.del`): stessa etichetta rossa, forma leggera — senza
   fondo né bordo, perché in una tabella le azioni sono decine e altrettanti rettangoli
   farebbero rumore. È il quarto peso applicato a una riga, non un quinto peso.

   Fino all'08/08/2026 `.del` era agganciata SOLO da `.data-table button.del`: nelle
   testate dei blocchi di Copertura e Pronta disponibilità («Elimina fascia», «Elimina
   turno», «Elimina professione») il pulsante sta in un `<div>` e non in una tabella,
   quindi non lo raggiungeva nessuna regola e usciva con l'aspetto grezzo del browser —
   lo stesso difetto del «🎲 Proponi», e nel punto peggiore: quello che cancella. */
button.del {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; padding: 5px 9px;
  font-family: inherit; font-size: var(--t-xs); font-weight: 500; line-height: 1.2;
  color: var(--er-testo); background: transparent;
  border: 1px solid transparent; border-radius: var(--raggio-xs);
  box-shadow: none; cursor: pointer;
}
button.del:hover { background: var(--er-fondo); border-color: var(--er-bordo); }

/* ====================================================================================
   LA BARRA DEI COMANDI

   IL ROVESCIAMENTO. Fino all'08/08/2026 `.toolbar button` era un QUADRATO 30×30, perché
   la barra nasceva con le sole frecce ‹ ›, e sette blocchi diversi ripetevano
   `width:auto; height:auto` solo per disfarlo — uno per ogni pulsante di testo aggiunto
   negli anni. Chi ne aggiungeva uno nuovo senza conoscere la storia si ritrovava un
   quadratino con l'etichetta che traboccava fuori. Ora la regola è al contrario: largo
   per default (lo dice il blocco qui sopra), quadrato SOLO per le due frecce.
   ==================================================================================== */
.toolbar { display: flex; align-items: center; gap: var(--s-2); margin-bottom: 8px; flex-wrap: wrap; }
.toolbar h2 { margin: 0; min-width: 132px; text-align: center; font-size: var(--t-l); white-space: nowrap; }
.toolbar select, .toolbar input {
  padding: 7px 10px; border: 1px solid var(--n-300); border-radius: var(--raggio-xs);
  background: var(--n-0); font-size: var(--t-s); font-family: inherit;
  min-height: var(--bersaglio); color: var(--n-800);
}
.spacer { flex: 1; }
.toolbar-export { display: inline-flex; align-items: center; gap: var(--s-2); }
/* Le uniche due che restano quadrate: la freccia del mese prima e quella del mese dopo. */
#prev-month, #next-month {
  width: 34px; min-width: 34px; height: 34px; padding: 0;
  font-size: var(--t-l); color: var(--n-600);
}
/* Gli interruttori accesi (vista compatta, +15 giorni, periodo libero, filtro di
   professione) dicono di esserlo col colore dell'azione, non col blu pieno, che è
   riservato a ciò che conclude. */
#toggle-range.attivo, #toggle-compatta.attivo, #toggle-periodo.attivo,
.filtro-gruppo button.attivo {
  background: var(--a-50); border-color: var(--a-200); color: var(--a-700); font-weight: 600;
}
/* Pulsantini del filtro gruppo (Infermieri / OSS), visibili solo in vista compatta. */
.filtro-gruppo { display: inline-flex; gap: var(--s-1); }
/* Prospetto su periodo libero: la fascia coi due calendari, che si apre dal pulsante. */
.periodo-box { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
  background: var(--n-50); border: var(--bordo); border-radius: var(--raggio-s); }
.periodo-box label { font-size: var(--t-xs); color: var(--n-600); display: inline-flex;
  align-items: center; gap: 4px; }
.periodo-box input[type="date"] { padding: 5px 8px; font-size: var(--t-xs); min-height: 30px; }
.toolbar .periodo-box button { padding: 6px 11px; font-size: var(--t-xs); min-height: 30px; }
/* Perché il pulsante di validazione non c'è, quando si guarda un periodo. */
.nota-validazione { font-size: var(--t-xs); color: var(--n-500); font-style: italic; white-space: nowrap; }
/* Validazione della pianificazione: il pulsante con cui il coordinatore chiude il
   mese, e il badge verde che ne prende il posto una volta validato. Verde perché è
   uno stato raggiunto, non un comando: il comando è il pulsante accanto. Resta l'unico
   verde fra i comandi dell'app — verde di stato, non di allarme. */
.valida-box { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.btn-valida {
  color: var(--ok-testo); border-color: var(--ok-bordo); background: var(--ok-fondo);
  font-weight: 700;
}
.btn-valida:hover { background: #d1fae5; border-color: var(--ok-pieno); }
.badge-validato { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px;
  background: var(--ok-fondo); color: var(--ok-testo); border: 1px solid var(--ok-bordo);
  font-size: var(--t-xs); white-space: nowrap; }
/* «Riapri il mese» (era «Annulla», un link grigio sottolineato): accanto a un badge
   verde «Annulla» si legge come «chiudi l'avviso», mentre quel comando fa uscire i
   numeri del mese dai conteggi. È navigazione fra stati, quindi un pulsante testuale. */
.link-annulla, .toolbar button.link-annulla {
  background: transparent; border-color: transparent; box-shadow: none;
  padding: 5px 9px; min-height: 30px; font-size: var(--t-xs); color: var(--n-500);
}
.link-annulla:hover, .toolbar button.link-annulla:hover {
  background: var(--er-fondo); border-color: transparent; color: var(--er-testo);
}
/* Link alla stampa archiviata al momento della validazione (accanto al badge verde):
   è un documento da aprire, non un comando che cambia qualcosa. */
.link-archivio { font-size: var(--t-xs); color: var(--a-600); white-space: nowrap; cursor: pointer; }
.toolbar button.link-archivio {
  padding: 5px 9px; min-height: 30px; background: transparent;
  border-color: transparent; box-shadow: none;
}
/* Archivio Validazioni: stato della riga. Il documento di una validazione poi annullata
   resta in elenco, smorzato, con la data in cui il mese è stato riaperto. */
.arv-vigente { color: #166534; }
.arv-annullata { color: #92400e; }
.arv-mancante { color: #b91c1c; }
.arv-riga-annullata td { background: #fafafa; color: #6b7280; }
/* Casella di spunta con l'etichetta sulla stessa riga, dentro una toolbar. */
.check-inline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hint { color: var(--n-500); font-size: var(--t-xs); line-height: 1.55; margin: 4px 0 12px; }
/* «⚠ Controlla i riposi»: in ambra, che è il colore della correzione guidata. */
#riposi-controlla { color: var(--av-testo); background: var(--av-fondo); border-color: var(--av-bordo); }
#riposi-controlla:hover { background: #fef3c7; border-color: var(--av-pieno); }
/* Controlli zoom del prospetto: due pulsanti − / + con la percentuale in mezzo. */
.zoom-ctrl { display: inline-flex; align-items: center; gap: 2px; }
.zoom-ctrl button {
  width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0;
  font-size: var(--t-s); line-height: 1;
}
#zoom-val { min-width: 42px; text-align: center; font-size: var(--t-xs); color: var(--n-600); }
/* Fascia dei comandi del prospetto (navigazione mese/periodo, zoom, export
   e la barra «Stai lavorando su»): resta agganciata sotto l'intestazione blu dell'app,
   così i comandi non scappano mai verso l'alto. `--topbar-h` è l'altezza REALE della
   topbar, misurata dal JS (`adattaAltezzaGriglia`), perché su finestre strette la barra
   blu va a capo e diventa più alta; 57px è solo il ripiego se il JS non gira.
   I margini negativi allargano lo sfondo fino ai bordi (main ha 20px di imbottitura),
   altrimenti il prospetto si vedrebbe passare di fianco alla fascia mentre scorre. */
.pian-comandi {
  position: sticky; top: var(--topbar-h, 57px); z-index: 15;
  background: rgba(248,250,252,.92); backdrop-filter: blur(8px);
  border-bottom: var(--bordo); box-shadow: var(--ombra-1);
  margin: 0 -20px; padding: 6px 20px 0;
}

/* ------------------------------------------------------------------ I CINQUE GRUPPI
   Fino all'08/08/2026 la barra del prospetto era una fila di una ventina di controlli
   nell'ordine in cui erano stati aggiunti negli anni, e si spezzava dove capitava: «✓
   Valida la pianificazione» — l'azione principale del mese — stava in coda apposta e
   quindi era la prima a cadere fuori.
   Ora sono cinque gruppi con l'etichetta a cavallo del bordo, e un gruppo va a capo
   INTERO: è tutto il senso del raggruppamento. */
.ui-gruppo {
  display: inline-flex; align-items: center; gap: var(--s-2);
  flex-wrap: nowrap;
  padding: 6px var(--s-3);
  border: var(--bordo); border-radius: var(--raggio);
  background: var(--n-0);
  position: relative; margin-top: 9px;
}
/* I comandi dentro un gruppo non si stringono. Senza questa riga il contenitore, che è
   `nowrap`, li comprime sotto la larghezza della loro etichetta: il testo trabocca e i
   pulsanti finiscono stampati uno sopra l'altro. Deve andare a capo il GRUPPO. */
.ui-gruppo > *, .ui-stampe > * { flex: 0 0 auto; }
/* L'etichetta del gruppo: dice a cosa serve la fila di pulsanti che ha sotto, senza
   rubare una riga intera. */
.ui-gruppo::before {
  content: attr(data-titolo);
  position: absolute; top: -8px; left: 10px;
  padding: 0 6px; background: var(--n-50);
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--n-500);
  border-radius: 4px;
}
/* Un gruppo rimasto senza comandi visibili sparisce da sé, etichetta compresa: se no
   resterebbe una cornice vuota col suo cartellino, che si legge come un guasto. La
   classe la mette `aggiornaGruppiVuoti()` a ogni accensione o spegnimento. */
.ui-gruppo.ui-gruppo-vuoto { display: none; }

/* La zona che resta SEMPRE a video, staccata a destra: lo zoom e il pulsante che
   richiude la barra. Sono le due cose che servono proprio quando i comandi sono chiusi
   e si guarda il prospetto a tutta altezza — dentro un gruppo sparirebbero con gli
   altri. */
.ui-sempre { display: inline-flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.ui-sempre .zoom-ctrl {
  padding: 3px 6px; border: var(--bordo); border-radius: var(--raggio-s);
  background: var(--n-0);
}
.ui-chiudi-comandi {
  background: transparent; border-color: transparent; color: var(--n-500);
  box-shadow: none; font-size: var(--t-xs);
}
.ui-chiudi-comandi:hover { background: var(--n-100); border-color: var(--n-200); color: var(--n-700); }
/* A barra chiusa spariscono i cinque gruppi, non l'intera fascia: restano la zona di
   destra — zoom e pulsante per riaprire — e, se è in corso, la guida alla correzione dei
   riposi, che accompagna una settimana alla volta e non va interrotta per una questione
   di spazio. Vale 149px restituiti alla griglia, misurati. */
.pian-comandi.ui-comandi-chiusi .ui-gruppo { display: none; }
.pian-comandi.ui-comandi-chiusi .toolbar { padding: 0; min-height: 0; margin-bottom: 2px; }
.pian-comandi.ui-comandi-chiusi .ui-sempre { margin: 2px 0 2px auto; }

/* Il gruppo delle stampe raccolto sotto un pulsante solo. Un pulsante con la freccia è
   un cartello, non un nascondiglio: il difetto che si sta togliendo sono i comandi senza
   NESSUNA traccia a video. `position: relative` è quello che tiene il pannello agganciato
   al pulsante. */
.ui-stampe { display: inline-flex; align-items: center; gap: var(--s-2); position: relative; }
.ui-menu-pannello {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 320px; padding: var(--s-2);
  background: var(--n-0); border: var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-2);
}
/* Vale sia sui `<button>` sia sugli `<a>`: due voci sono collegamenti di scaricamento. */
.ui-menu-voce {
  display: block; width: 100%; text-align: left;
  padding: var(--s-2) var(--s-3);
  border: 0; background: transparent; border-radius: var(--raggio-s);
  cursor: pointer; font-family: inherit;
  text-decoration: none; color: inherit;
  min-height: 0; box-shadow: none;
}
.ui-menu-voce:hover { background: var(--a-50); }
.ui-menu-voce b { display: block; font-size: var(--t-s); color: var(--n-800); }
.ui-menu-voce span { display: block; font-size: var(--t-xs); color: var(--n-500); }
/* «Cosa posso fare su una cella»: la prima colonna è il comando, la seconda come si fa. */
.ui-aiuto-che { width: 34%; }
#ui-aiuto-modal .data-table td { white-space: normal; }

/* ====================================================================================
   LE SCHEDE — una famiglia sola, su due livelli (08/08/2026)

   Prima: 16 strisce, 11 nomi di classe, TRE aspetti diversi — e la stessa classe
   `.lim-modo` era grande e blu in Sorveglianza, piccola e azzurrina in Valutazione. Le
   classi del markup restano quelle che sono (`.ferie-tabs`, `.fasc-tabs`, `.poas-tabs`,
   e sul pulsante `.ferie-tab`, `.poas-modo`, `.val-modo`…): quello che si unifica è
   l'aspetto, ed è per questo che qui si indirizzano i BOTTONI FIGLI della striscia
   invece di elencare undici nomi.

   I due livelli sono CATEGORIALMENTE diversi, non «uguale ma più piccolo»: era proprio
   la somiglianza a far perdere il segno di dove si era.
     livello 1 — le schede della vista: filetto sotto quella scelta, come uno schedario;
     livello 2 — dentro una scheda: pillole affiancate in una cornice.
   Il livello non si dichiara: una striscia dentro un pannello (`…-pane`) è di secondo
   livello per costruzione. Oggi sono due — i periodi del Riepilogo ferie e i modi delle
   Valutazioni — ed erano appunto le due eccezioni scritte a mano nel foglio.
   ==================================================================================== */
.ferie-tabs, .fasc-tabs, .poas-tabs {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px;
  border-bottom: 2px solid var(--n-200);
  margin-bottom: var(--s-4);
}
.ferie-tabs > button, .fasc-tabs > button, .poas-tabs > button {
  appearance: none;
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 9px var(--s-3);
  min-height: var(--bersaglio);
  font-family: inherit; font-size: var(--t-s); font-weight: 500;
  color: var(--n-500); cursor: pointer; white-space: nowrap;
  border-radius: var(--raggio-xs) var(--raggio-xs) 0 0;
  box-shadow: none;
  transition: color .12s ease, background .12s ease;
}
.ferie-tabs > button:hover, .fasc-tabs > button:hover, .poas-tabs > button:hover {
  color: var(--n-800); background: var(--n-100); border-color: transparent;
}
.ferie-tabs > button.attivo, .fasc-tabs > button.attivo, .poas-tabs > button.attivo {
  color: var(--a-700); border-bottom-color: var(--a-500); font-weight: 700;
  background: transparent;
}
/* La scheda che apre un form («＋ Nuova richiesta»): è un'azione, non una destinazione,
   e si distingue con l'etichetta blu. `.cmd-scrittura` la marca già per i permessi —
   quella classe dice esattamente questo, quindi non ne serve una seconda. */
.ferie-tabs > button.cmd-scrittura,
.fasc-tabs > button.cmd-scrittura,
.poas-tabs > button.cmd-scrittura { color: var(--a-600); font-weight: 600; }

/* Livello 2 — dentro una scheda: segmenti in una cornice, un gradino più in basso. */
[class*="-pane"] .ferie-tabs, [class*="-pane"] .fasc-tabs {
  border-bottom: 0; gap: 3px;
  padding: 3px; background: var(--n-100); border-radius: var(--raggio-s);
  display: inline-flex; width: auto; margin-bottom: var(--s-3);
}
[class*="-pane"] .ferie-tabs > button, [class*="-pane"] .fasc-tabs > button {
  border: 0; border-radius: var(--raggio-xs); margin-bottom: 0;
  padding: 6px var(--s-3); min-height: 30px; font-size: var(--t-xs);
}
[class*="-pane"] .ferie-tabs > button.attivo, [class*="-pane"] .fasc-tabs > button.attivo {
  background: var(--n-0); color: var(--a-700); box-shadow: var(--ombra-1);
  border-bottom-color: transparent;
}
/* Tutti i pannelli lo stesso stacco dalla striscia. Erano dieci regole identiche sparse
   per il foglio — e quella di «Utenti e permessi» mancava, quindi erano le uniche schede
   senza spazio sotto. Lo stacco ora lo dà la striscia col suo `margin-bottom`. */
.poas-pane, .ferie-pane, .turni-pane, .ra-pane, .fasc-pane, .val-pane, .lim-pane,
.agg-pane, .imp-pane, .inv-pane, .ute-pane, .car-pane, .prest-pane { margin-top: 0; }

/* Il riquadro scorre da solo (orizzontale e verticale) con un'altezza propria:
   così l'intestazione dei giorni (thead sticky top:0) e la colonna nomi restano
   sempre visibili scorrendo, mentre barra e navigazione mese restano sopra.
   L'altezza vera la calcola il JS (`adattaAltezzaGriglia`) sullo spazio che resta
   davvero sotto la fascia dei comandi, così la pagina non scorre e si scorre in un
   posto solo; il `calc` qui sotto è il valore di partenza. */
.grid-wrap { overflow: auto; max-height: calc(100vh - 150px); border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; }
/* `border-collapse: separate` (non `collapse`): con le colonne congelate (position:
   sticky) i bordi collassati lascerebbero trasparire il contenuto scorrevole tra una
   colonna e l'altra. Con `separate` + bordi solo a destra/sotto di ogni cella si ottiene
   la stessa griglia a 1px, ma i bordi seguono le celle congelate senza far trapelare nulla. */
table.grid { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; }
table.grid th, table.grid td { border: 0; border-right: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; text-align: center; }
/* Intestazione dei giorni: bordo inferiore marcato (blu istituzionale) e un filo di
   respiro in più, così la riga coi numeri del mese si stacca dalla prima riga di turni
   invece di confondersi con essa. Il bordo scorre con l'intestazione (sticky). */
table.grid thead th {
  position: sticky; top: 0; background: #f3f4f6; padding: 4px 3px 5px; z-index: 5;
  border-bottom: 3px solid #1e3a8a;
}
/* La colonna nomi si adatta al contenuto: larga quanto il nome più lungo
   (cognome + nome), niente larghezza fissa, così recupera spazio a destra.
   `white-space: nowrap` tiene ogni nome su una riga; `width: 1px` lascia che
   sia il contenuto a determinare la larghezza effettiva della colonna. */
table.grid th.name-col, table.grid td.name-col {
  position: sticky; left: 0; background: #fff; text-align: left;
  padding: 4px 8px; width: 1px; white-space: nowrap; font-weight: 600; z-index: 4;
}
table.grid thead th.name-col { z-index: 6; background: #f3f4f6; }
table.grid td.day { width: 30px; height: 26px; cursor: pointer; font-weight: 600; position: relative; background: #fff; }
table.grid td.day:hover { outline: 2px solid #1e3a8a; outline-offset: -2px; }
/* Sigla del turno in uno <span> di larghezza FISSA (come `att-sigla` per l'attività):
   le colonne-giorno devono restare tutte uguali, e una sigla lunga ("CONG_0") non deve
   allargare la sua. Se non ci sta si riduce il CARATTERE, non la colonna: le classi
   `sigla-l4/l5/l6` (messe da `spanSigla` in app.js in base alla lunghezza) rimpiccioliscono
   progressivamente la scritta, che resta comunque ritagliata dallo `overflow: hidden`. */
table.grid td.day .sigla, table.grid td.prest-turno .sigla {
  display: block; width: 30px; overflow: hidden; white-space: nowrap;
}
table.grid td.day .sigla-l4, table.grid td.prest-turno .sigla-l4 { font-size: 10px; letter-spacing: -0.2px; }
table.grid td.day .sigla-l5, table.grid td.prest-turno .sigla-l5 { font-size: 8.5px; letter-spacing: -0.3px; }
table.grid td.day .sigla-l6, table.grid td.prest-turno .sigla-l6 { font-size: 7.5px; letter-spacing: -0.4px; }
table.grid th.we, table.grid td.day.we { background: #eff6ff; }
table.grid td.day.we[style] { background-clip: padding-box; }
/* Colonna del giorno di oggi: si evidenzia con i BORDI (come il confine di mese
   `.month-start`, più sotto) e non con lo sfondo, perché le celle hanno colori propri —
   quello del tipo di turno e l'azzurro dei festivi — che non vanno coperti. Solo la
   testata prende il fondo pieno, come un francobollo. Queste regole stanno DOPO quelle
   di `.we`: hanno la stessa specificità, vince l'ultima. */
table.grid th.oggi, table.grid td.oggi { border-left: 2px solid #1e3a8a; border-right: 2px solid #1e3a8a; }
table.grid th.oggi { background: #1e3a8a; color: #fff; }
table.grid th.oggi .mth, table.grid th.oggi small { color: #dbeafe; }
/* Vista estesa: colonne più strette e font ridotto per far stare ~45 giorni,
   mantenendo le sigle leggibili (resta comunque lo scorrimento orizzontale). */
table.grid.estesa td.day { width: 24px; height: 28px; font-size: 11px; }
table.grid.estesa td.day .sigla { width: 24px; }
table.grid.estesa td.day .sigla-l4 { font-size: 9px; }
table.grid.estesa td.day .sigla-l5 { font-size: 8px; }
table.grid.estesa td.day .sigla-l6 { font-size: 7px; }
table.grid.estesa thead th { padding: 3px 1px; font-size: 11px; }
/* Vista compatta: una riga per operatore → righe più basse per la vista
   d'insieme (le celle restano cliccabili come nella vista normale). */
table.grid.compatta td.day { height: 24px; }
table.grid.compatta td.name-col { padding: 2px 8px; }
table.grid.compatta td.tot-col { padding: 2px 4px; }
/* Confine tra il mese precedente e quello corrente: bordo verticale marcato. */
table.grid th.month-start, table.grid td.month-start { border-left: 2px solid #94a3b8; }
/* Etichetta col mese (sopra il numero) sul primo giorno di ciascun blocco. */
table.grid thead th .mth { display: block; font-weight: 400; color: #6b7280; font-size: 10px; line-height: 1.1; }
/* Giorni del mese precedente: sola lettura — nessun cursore/hover di modifica.
   Le celle con turno mostrano il colore (stile inline); quelle vuote una tinta
   leggera per distinguere il blocco (azzurro più carico nei weekend/festivi). */
table.grid td.day.ro { cursor: default; }
table.grid td.day.ro:hover { outline: none; }
table.grid td.day.ro-empty { background: #f1f5f9; }
table.grid td.day.ro-empty.we { background: #dbeafe; }
table.grid td.ai-cell.ro { cursor: default; background: #f8fafc; }
table.grid td.ai-cell.ro.we { background: #dbeafe; }
/* Celle-turno dei tirocinanti: testo nero e nessun colore del turno (non sono organico).
   Sabati, domeniche e festivi restano però azzurri come in tutte le altre righe: la
   colonna del giorno festivo deve leggersi dall'alto in basso senza buchi bianchi. */
table.grid td.day.tir-day { background: #fff; color: #000; }
table.grid td.day.tir-day.we { background: #eff6ff; }
/* Istanza di rientro: anello ambra attorno alla cella + contrassegno ↩ nell'angolo
   in alto a destra (leggibile su qualunque colore del turno). */
table.grid td.day.rientro { box-shadow: inset 0 0 0 2px #f59e0b; }
table.grid td.day .rientro-mark {
  position: absolute; top: -1px; right: 1px; font-size: 10px; line-height: 1;
  pointer-events: none; text-shadow: 0 0 2px rgba(0,0,0,.7);
}
/* Variazioni turno: "Cambio turno" colora la sigla di rosso (solo la sigla, non i
   marcatori d'angolo, grazie allo span dedicato); l'angolo in basso a destra della
   cella è colorato di rosso (triangolino) per segnalare la presenza di variazioni.
   Il tooltip (title dello span) elenca quelle attive. */
/* Celle nate da una richiesta autorizzata (ferie): sigla BLU (solo colore). Sta PRIMA
   del rosso apposta: le due cose possono coesistere (il "cambio turno" si segna su
   qualsiasi sigla, ferie comprese) e in quel caso vince il rosso, che è la marcatura
   fatta a mano dal coordinatore. */
table.grid td.day.da-richiesta .sigla { color: #2563eb; }
table.grid td.day.cambio .sigla,
table.grid td.prest-turno.cambio .sigla { color: #dc2626; text-shadow: 0 0 2px rgba(255,255,255,.9); }
table.grid td.day .var-mark,
table.grid td.prest-turno .var-mark {
  position: absolute; bottom: 0; right: 0; width: 10px; height: 10px;
  background: linear-gradient(to bottom right, transparent 50%, #dc2626 50%);
  pointer-events: none;
}
/* Affiancamento: turno del neo-assegnato in inserimento (soprannumerario) →
   bordo verde attorno alla cella. Se convive col rientro (anello ambra) o con la
   richiesta testuale (anello blu) gli anelli si sommano (box-shadow multiplo):
   vedi i selettori combinati più sotto, vicino a `.rich-nota`. */
table.grid td.day.affianc { box-shadow: inset 0 0 0 2px #16a34a; }
table.grid td.day.affianc.rientro { box-shadow: inset 0 0 0 2px #16a34a, inset 0 0 0 4px #f59e0b; }
/* Tutor di tirocinante: contrassegno 🎓 nell'angolo in BASSO A SINISTRA, l'unico libero
   (in alto a destra c'è il rientro ↩, in basso a destra il triangolino delle variazioni).
   Solo documentazione: non cambia colori né conteggi. Il nome è nel tooltip. */
table.grid td.day .tutor-mark {
  position: absolute; bottom: -1px; left: 1px; font-size: 9px; line-height: 1;
  pointer-events: none; text-shadow: 0 0 2px rgba(255,255,255,.9);
}
/* Nota (testo libero): contrassegno 📝 nell'angolo in ALTO A SINISTRA, l'ultimo angolo
   libero (alto-destra = rientro, basso-destra = variazioni, basso-sinistra = tutor).
   Solo documentazione: nessun colore né effetto sui conteggi. Il testo è nel tooltip. */
table.grid td.day .nota-mark {
  position: absolute; top: -1px; left: 1px; font-size: 9px; line-height: 1;
  pointer-events: none; text-shadow: 0 0 2px rgba(255,255,255,.9);
}
/* Richiesta individuale TESTUALE autorizzata: la cella del giorno prende un ANELLO BLU
   (come rientro/affiancamento, non uno sfondo), così il coordinatore la vede in fase di
   pianificazione anche quando il turno non c'è ancora (il testo è nel tooltip della
   cella). Essendo un bordo e non uno sfondo, si vede comunque sopra il colore del turno
   e sul rosino di weekend/festivi, senza bisogno di `!important`. Le richieste di una
   SIGLA non usano questa classe: si riconoscono dalla sigla blu (.da-richiesta), come
   le ferie. Se la cella ha ANCHE rientro e/o affiancamento, gli anelli si sommano (il
   blu resta il più interno, poi verde, poi ambra più esterno): coppie e tripletta sotto. */
table.grid td.day.rich-nota { box-shadow: inset 0 0 0 2px #2563eb; }
table.grid td.day.rich-nota.rientro { box-shadow: inset 0 0 0 2px #2563eb, inset 0 0 0 4px #f59e0b; }
table.grid td.day.rich-nota.affianc { box-shadow: inset 0 0 0 2px #2563eb, inset 0 0 0 4px #16a34a; }
table.grid td.day.rich-nota.affianc.rientro {
  box-shadow: inset 0 0 0 2px #2563eb, inset 0 0 0 4px #16a34a, inset 0 0 0 6px #f59e0b;
}
/* Se in una cella con richiesta testuale autorizzata viene comunque inserito un turno,
   la sigla prende lo stesso blu delle richieste di ferie/sigla (coerenza visiva). */
table.grid td.day.rich-nota .sigla { color: #2563eb; }

/* PRESTITO FRA REPARTI: la giornata è stata concordata con un altro reparto. Anello
   CIANO su tutte e TRE le celle del giorno (turno / attività / antincendio), così la
   colonna si legge come una cosa sola. Il ciano è l'unica tinta fredda ancora libera:
   ambra = rientro, verde = affiancamento, blu = richieste, rosso = variazioni,
   arancio = antincendio.
   È l'anello più ESTERNO di tutti perché è di un altro ordine: gli altri contrassegni
   descrivono com'è fatto quel turno, il prestito dice DI CHI È la giornata.
   ATTENZIONE per il futuro: la cella è larga 30px e alta 26px, e con quattro anelli
   sovrapposti restano 14px di contenuto. Questo è l'ultimo colore che il meccanismo
   regge: un eventuale quinto contrassegno dovrà essere un marcatore d'angolo (come
   📝 / ↩ / 🎓), non un anello. */
table.grid td.day.prestito-cella { box-shadow: inset 0 0 0 2px #0891b2; }
table.grid td.day.prestito-cella.rientro {
  box-shadow: inset 0 0 0 2px #f59e0b, inset 0 0 0 4px #0891b2;
}
table.grid td.day.prestito-cella.affianc {
  box-shadow: inset 0 0 0 2px #16a34a, inset 0 0 0 4px #0891b2;
}
table.grid td.day.prestito-cella.rich-nota {
  box-shadow: inset 0 0 0 2px #2563eb, inset 0 0 0 4px #0891b2;
}
table.grid td.day.prestito-cella.affianc.rientro {
  box-shadow: inset 0 0 0 2px #16a34a, inset 0 0 0 4px #f59e0b, inset 0 0 0 6px #0891b2;
}
table.grid td.day.prestito-cella.rich-nota.rientro {
  box-shadow: inset 0 0 0 2px #2563eb, inset 0 0 0 4px #f59e0b, inset 0 0 0 6px #0891b2;
}
table.grid td.day.prestito-cella.rich-nota.affianc {
  box-shadow: inset 0 0 0 2px #2563eb, inset 0 0 0 4px #16a34a, inset 0 0 0 6px #0891b2;
}
table.grid td.day.prestito-cella.rich-nota.affianc.rientro {
  box-shadow: inset 0 0 0 2px #2563eb, inset 0 0 0 4px #16a34a,
              inset 0 0 0 6px #f59e0b, inset 0 0 0 8px #0891b2;
}
/* Le altre due celle del giorno non hanno anelli propri: nessuna combinazione. */
table.grid td.ai-cell.prestito-cella,
table.grid td.att-cell.prestito-cella { box-shadow: inset 0 0 0 2px #0891b2; }

/* CORSO DI AGGIORNAMENTO nella giornata. Non è un anello — l'avvertenza qui sopra dice
   che il meccanismo è saturo — ma una RIGATURA obliqua viola sul fondo della cella:
   `background-image` si sovrappone al `background-color` che il colore del turno scrive
   in linea, quindi la sigla resta leggibile e il colore del turno non si perde.
   Il tooltip della cella dice corso, orari, sede e quante ore aggiunge.
   Dove la sigla AO/AF l'ha scritta l'app leggendo il registro (`corso-ro`) la cella non
   si tocca: il cursore lo dichiara prima del clic, e il clic lo spiega. */
table.grid td.day.corso-cella {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(139, 92, 246, 0.22) 0 3px,
    transparent 3px 7px
  );
}
table.grid td.day.corso-ro { cursor: help; }

/* RIPROGRAMMAZIONE: il turno è stato rimaneggiato DOPO la pianificazione iniziale, di
   norma per coprire un buco lasciato da un'assenza improvvisa. Non è un anello — il
   meccanismo è saturo (vedi l'avvertenza sopra, al prestito) — né un angolo: sono presi
   tutti e quattro (📝 ↩ 🎓 e il triangolino delle variazioni). È il FONDO della cella,
   giallo pieno: copre il colore del turno apposta, perché queste giornate devono
   saltare all'occhio scorrendo il mese.
   Serve `!important` perché il colore del turno è scritto IN LINEA da `styleTurno`.
   Giallo TENUE `#fef9c3` (scelta dell'utente: il giallo pieno gridava troppo su un
   prospetto già fitto). Non è ambra — `#f59e0b` è l'anello del rientro, e i due
   contrassegni capitano spesso sulla stessa giornata (si riprogramma chi si richiama) —
   e non è `#fef08a`, che nelle righe di copertura in fondo al prospetto significa già
   "sovracoperto": su una stessa pagina stampata lo stesso giallo direbbe due cose.
   Sul giallo la sigla bianca dei turni non si leggerebbe: va scurita.
   Gli anelli restano visibili sopra (sono `box-shadow`) e la rigatura viola del corso
   pure (`background-image`): nessuna combinazione da scrivere. */
table.grid td.day.riprogrammato { background-color: #fef9c3 !important; }
table.grid td.day.riprogrammato .sigla { font-weight: 700; }
/* Il colore scuro vale solo dove nessun altro contrassegno rivendica la sigla: il rosso
   del cambio turno e il blu delle richieste dicono qualcosa che il giallo non dice, e
   si leggono benissimo su questo fondo. Senza il `:not()` vincerebbe questa regola,
   che sta più in basso nel foglio. */
table.grid td.day.riprogrammato:not(.cambio):not(.da-richiesta):not(.rich-nota) .sigla {
  color: #422006;
}
/* Stesso giallo sulla riga dell'AREA DI LAVORO, con un contrassegno suo (il turno può
   essere quello previsto e a cambiare solo dove la persona lavora). `!important` perché
   il fondo bianco di `td.att-cell` è scritto più in basso in questo foglio. */
table.grid td.att-cell.riprogrammato { background: #fef9c3 !important; color: #422006; }
/* Le stesse due righe della PRESTAZIONE AGGIUNTIVA: anche il lavoro extra si rimaneggia
   per coprire un buco. Il giallo vince sul verde tenue delle righe aggiuntive, che dice
   un'altra cosa (che quella riga è una prestazione, non che è stata riprogrammata). */
table.grid td.prest-turno.riprogrammato,
table.grid td.prest-att.riprogrammato { background: #fef9c3 !important; }
table.grid td.prest-turno.riprogrammato:not(.cambio) .sigla { color: #422006; }

/* CORREZIONE GUIDATA DEI RIPOSI: le settimane con più di due riposi, mentre le si
   corregge. È uno stato TRANSITORIO — vive solo finché la guida è aperta — e per questo
   può permettersi di coprire i colori del giorno: quando è a video è l'informazione che
   serve, e appena la settimana rientra sparisce da sé.
   Fondo e non anello, di proposito: gli anelli `box-shadow` sono saturi (vedi
   l'avvertenza sopra il prestito) e sovrascriverli farebbe sparire il ciano di una
   giornata prestata proprio mentre ci si mette mano. L'arancione non è preso da
   nessun'altra cella: il giallo è la riprogrammazione, l'azzurro i festivi, il verde le
   prestazioni aggiuntive.
   Tre gradazioni, dalla più tenue alla più carica: settimana ancora in coda, settimana
   in lavorazione, giornata che dentro quella settimana CONTA come riposo (la prima notte
   di un blocco compresa, che nessuno ha scritto e che a parole non si troverebbe). */
table.grid td.day.rip-aperta { background-color: #ffedd5 !important; }
table.grid td.day.rip-corr { background-color: #fed7aa !important; }
table.grid td.day.rip-corr.rip-giorno { background-color: #fb923c !important; }
table.grid td.day.rip-corr.rip-giorno:not(.cambio):not(.da-richiesta):not(.rich-nota) .sigla {
  color: #431407; font-weight: 700;
}
/* Settimana saltata: resta segnata in grigio, senza più chiedere niente. */
table.grid td.day.rip-saltata { background-color: #f1f5f9 !important; }
/* I due estremi della settimana, per leggerla come un blocco solo (lunedì → domenica)
   anche quando le celle in mezzo hanno colori propri. */
table.grid td.day.rip-inizio { border-left: 2px solid #ea580c; }
table.grid td.day.rip-fine { border-right: 2px solid #ea580c !important; }

/* La fascia della guida, sotto la barra dei comandi del prospetto: dice a chi tocca,
   quale settimana e quali giorni contano come riposo. Sta dentro `.pian-comandi`, quindi
   scorre insieme ai comandi e resta sempre in vista. */
.riposi-guida {
  background: #fff7ed; border: 1px solid #fdba74; border-radius: 8px;
  padding: 6px 10px; margin: 6px 0 0; font-size: 13px; color: #1f2937;
}
.riposi-guida .rg-testa { color: #9a3412; }
.riposi-guida .rg-nome { font-weight: 700; }
.riposi-guida .rg-fatte { color: #6b7280; font-weight: 400; }
.riposi-guida .rg-aiuto { color: #4b5563; font-size: 12px; margin-top: 2px; }
.riposi-guida .rg-comandi { display: flex; gap: 6px; margin-top: 6px; }

/* Riga di un operatore preso in prestito (nel prospetto di chi lo riceve): colonna
   nomi in ciano chiarissimo, per distinguerla dall'organico senza urlare. Non ha
   campi scrivibili — il nome viene dall'anagrafica, non si digita. */
table.grid td.name-col.prestito { background: #ecfeff; }
/* Terza riga del prestito: provenienza e pulsante ＋ agg. sulla stessa linea. Il ramo
   POAS è lungo, quindi è lui a stringersi (ellipsis) e non il pulsante. */
.prest-line3 { display: flex; align-items: center; gap: 4px; }
.prest-orig {
  flex: 1 1 auto; min-width: 0;
  font-weight: 400; font-size: 10px; color: #0e7490;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prest-line3 .btn-prest { flex: 0 0 auto; }
.prestito-del {
  border: 0; background: none; color: #0891b2; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; float: right;
}
.prestito-del:hover { color: #164e63; }
/* Avviso in testa al menù della cella: «questa giornata è di un altro reparto». */
.cell-menu .cm-avviso {
  padding: 6px 8px; font-size: 11px; line-height: 1.35;
  background: #ecfeff; color: #0e7490; border-bottom: 1px solid #a5f3fc;
}
.cell-menu .cm-item.cm-prestito { color: #0e7490; border-top: 1px solid #e5e7eb; }
/* Ricerca dell'operatore da prendere in prestito (modale). */
.prest-esiti { max-height: 240px; overflow-y: auto; margin: 6px 0; }
.prest-cand {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; padding: 5px 8px; border: 0; background: none;
  cursor: pointer; border-bottom: 1px solid #f1f5f9;
}
.prest-cand:hover { background: #ecfeff; }
.prest-cand span { font-size: 11px; color: #64748b; }
/* Sotto-righe vuote degli operatori in organico (riga 2 antincendio): non cliccabili,
   mantengono l'evidenziazione weekend/festivi. `op-last` chiude il blocco. */
table.grid td.subcell { height: 20px; background: #fff; }
table.grid td.subcell.we { background: #eff6ff; }
table.grid td.subcell.op-last { border-bottom: 3px solid #64748b; }
table.grid td.subcell.op-mid { border-bottom: 1px solid #cbd5e1; }
/* Seconda riga istituzionale = "Attività" (area di lavoro) del turno del giorno.
   Cliccabile solo dove c'è un turno di presenza (`disabled` altrimenti); mostra la
   sigla breve dell'area (nome intero nel tooltip). Stessa altezza delle sotto-righe. */
/* Sigla fino a 4 caratteri in una colonna da 30px: font più piccolo e lettere
   ravvicinate. La sigla sta in uno <span> di larghezza FISSA (`att-sigla`) perché una
   sigla di lettere larghe (MMMM) non allarghi la colonna: si allargherebbero tutti i
   giorni del prospetto. Vale anche per la riga attività delle prestazioni aggiuntive. */
table.grid td.att-cell { height: 20px; background: #fff; cursor: pointer; color: #334155; font-size: 10px; font-weight: 600; letter-spacing: -0.3px; }
table.grid .att-sigla { display: block; width: 30px; overflow: hidden; white-space: nowrap; }
table.grid.estesa .att-sigla { width: 24px; }
table.grid td.att-cell.we { background: #eff6ff; }
table.grid td.att-cell.op-last { border-bottom: 3px solid #64748b; }
table.grid td.att-cell.op-mid { border-bottom: 1px solid #cbd5e1; }
table.grid td.att-cell.disabled { cursor: default; color: #94a3b8; }
table.grid td.att-cell:not(.disabled):hover { outline: 2px solid #64748b; outline-offset: -2px; }
table.grid td.att-cell.ro { cursor: default; }
table.grid td.att-cell.ro:hover { outline: none; }
/* Nominativo operatore spezzato su 3 righe: cognome (in basso), nome (in alto,
   subito sotto il cognome), icona estintore (3ª riga). Il bordo di chiusura del
   blocco sta sulla terza cella (`op-last`). */
table.grid td.name-col.name-cognome { vertical-align: bottom; padding-bottom: 1px; }
table.grid td.name-col.name-nome { vertical-align: top; padding-top: 1px; font-weight: 600; }
table.grid td.name-col.name-ai { vertical-align: middle; }
table.grid td.name-col.op-last { border-bottom: 3px solid #64748b; }
table.grid td.name-col.op-mid { border-bottom: 1px solid #cbd5e1; }
/* Riga icone dell'operatore (estintore, 104 e future): in linea, spaziate. */
.op-icone { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.badgeai { font-size: 14px; line-height: 1; }
/* Limitazioni del medico competente: pastiglia "Limit" arancione, stessa forma del
   badge "104" (un simbolo piccolo si perdeva nella riga icone). Il dettaglio delle
   limitazioni resta nel suggerimento. Vive solo a schermo — negli export non compare
   nulla, perché è un dato sanitario. */
.badge-lim { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 700; background: #ea580c; color: #fff; vertical-align: middle; cursor: help; }
/* Gruppo di destra della riga icone: badge 💶 (se presente) + pulsante ＋ agg.
   `margin-left: auto` spinge l'intero gruppo al bordo destro della cella, tenendo il
   badge subito a sinistra del pulsante (i badge 🧯/104 restano a sinistra). */
.op-icone-dx { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
/* Badge "ha prestazioni aggiuntive nel mese": sola icona, indicatore sempre visibile. */
.badge-agg { font-size: 13px; line-height: 1; }
/* Pulsantino per operatore: apre/chiude le due righe di prestazione aggiuntiva. */
.btn-prest { border: 1px solid #f59e0b; background: #fff; color: #b45309; border-radius: 5px; padding: 0 6px; cursor: pointer; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.btn-prest:hover { background: #fffbeb; }
.btn-prest.on { background: #f59e0b; color: #fff; }
/* ⏱ situazione ore/ferie dell'operatore: stessa forma di ＋ agg. ma blu, perché è una
   lettura e non un comando che cambia il prospetto. */
.btn-ore { border: 1px solid #93c5fd; background: #fff; color: #1d4ed8; border-radius: 5px; padding: 0 5px; cursor: pointer; font-size: 11px; line-height: 1.5; }
.btn-ore:hover { background: #eff6ff; }
.btn-ore.on { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }

/* Riquadro del ⏱: ore da recuperare e ferie residue con cui l'operatore arriva al mese
   che si sta pianificando. Fuori dalla griglia (figlio di body) e `position: fixed`, così
   non viene tagliato dallo scorrimento del prospetto. */
.pop-ore {
  position: fixed; z-index: 70; width: 250px;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 10px 12px; font-size: 12px;
}
.pop-ore-nome { font-weight: 700; color: #0f172a; }
.pop-ore-quando { color: #475569; margin-bottom: 4px; }
.pop-ore-fonte { font-size: 11px; line-height: 1.35; margin-bottom: 6px; }
.pop-ore-fonte.ok { color: #15803d; }
.pop-ore-fonte.avviso { color: #b45309; }
.pop-ore-tab { width: 100%; border-collapse: collapse; }
.pop-ore-tab th { text-align: left; font-weight: 500; color: #334155; padding: 3px 0; }
.pop-ore-sigla { color: #94a3b8; font-size: 10px; margin-left: 5px; }
.pop-ore-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding: 3px 0; }
.pop-ore-ferie th, .pop-ore-ferie td { border-top: 1px solid #e2e8f0; padding-top: 5px; }
/* La riga di sintesi delle ferie: è la risposta che si cerca aprendo il riquadro in fase
   di programmazione annuale, quindi sta staccata dalla tabella e si legge da sola. */
.pop-ore-resta { margin-top: 7px; padding-top: 6px; border-top: 1px solid #e2e8f0; color: #0f172a; }
.pop-ore-resta b { font-size: 14px; }
.pop-ore-resta.oltre { color: #991b1b; font-weight: 600; }
.pop-ore-nota { margin-top: 6px; color: #b45309; font-size: 11px; line-height: 1.35; }
.pop-ore-attesa { color: #64748b; }

/* Righe di prestazione aggiuntiva (turno extra + attività): un "cassetto" che si
   apre sotto le 3 righe dell'operatore. Nascoste finché non si preme ＋ agg.
   Sfondo VERDE tenue per distinguerle (04/08/2026: prima era ambra, che di sabato e
   festivo si mescolava col rosa di allora); nei festivi un verde più carico, così la
   riga resta leggibile come aggiuntiva anche dove la colonna è colorata.
   `prest-last` chiude il blocco. */
table.grid tr.prest-row.chiusa { display: none; }
table.grid tr.prest-row td { background: #f0fdf4; height: 22px; }
table.grid tr.prest-row td.we { background: #dcfce7; }
table.grid td.name-col.name-prest {
  font-weight: 600; font-style: italic; color: #166534; background: #f0fdf4; font-size: 11px;
}
table.grid td.prest-turno { cursor: pointer; font-weight: 600; position: relative; }
table.grid td.prest-att { cursor: pointer; color: #78350f; font-size: 10px; font-weight: 600; letter-spacing: -0.3px; }
table.grid td.prest-turno:hover, table.grid td.prest-att:hover { outline: 2px solid #b45309; outline-offset: -2px; }
/* La cella turno con un turno assegnato usa il colore del turno (stile inline). */
table.grid td.prest-turno[style] { background-clip: padding-box; }
/* Celle prestazione dei giorni del mese precedente: sola lettura, nessun hover. */
table.grid td.prest-turno.ro, table.grid td.prest-att.ro { cursor: default; }
table.grid td.prest-turno.ro:hover, table.grid td.prest-att.ro:hover { outline: none; }
/* Bordo di chiusura del blocco quando le righe prestazione sono aperte. */
table.grid tr.prest-row.prest-last td { border-bottom: 3px solid #64748b; }
/* Tutta la sezione prestazione aggiuntiva (griglia + separatore + colonne riepilogo)
   ha lo stesso sfondo verde del "cassetto": le celle .tot-col/.sep-col ereditano il
   verde dal selettore `tr.prest-row td` (che vince per specificità sulle regole base),
   così le ultime due colonne non stonano con l'azzurro della zona riepilogo. */
/* Separatore (congelato) tra l'ultimo giorno e la zona riepilogo/conteggi: fa da
   confine fisso tra la parte ferma e quella scorrevole, quindi un po' più largo e
   con un grigio più marcato. */
table.grid th.sep-col, table.grid td.sep-col {
  width: 16px; min-width: 16px; padding: 0; background: #cbd5e1; border-top: 0; border-bottom: 0;
}
/* Colonna riepilogo a destra (Dovuto mese / Ore rese / Delta) per gli operatori. */
table.grid th.tot-col, table.grid td.tot-col {
  padding: 4px 4px; font-weight: 700; background: #eef4ff; color: #1e3a8a;
  white-space: nowrap; width: 1px;
}
table.grid td.tot-col.tot-label { text-align: left; }
/* Valore delle Ore rese: blu più intenso per distinguerlo dal dovuto. */
table.grid td.tot-col.tot-rese { color: #2563eb; }
/* Etichetta "Ore rese" della sezione prestazione aggiuntiva: arancione (coerente col
   resto del "cassetto"), per distinguerla dalle Ore rese istituzionali (blu). */
table.grid tr.prest-row td.tot-col.tot-label { color: #b45309; }
/* Delta (ore rese − dovuto): verde se positivo, rosso se negativo. */
table.grid td.tot-col.delta-pos { color: #16a34a; }
table.grid td.tot-col.delta-neg { color: #dc2626; }
table.grid td.tot-col.op-last { border-bottom: 3px solid #64748b; }
table.grid td.tot-col.op-mid { border-bottom: 1px solid #cbd5e1; }
/* Colonna «PD»: quanti turni di pronta disponibilità nel periodo mostrato. Sta accanto
   alla zona riepilogo ma con la tinta ambra delle sigle in cella, perché parla della
   stessa cosa — e perché NON è un'ora: è un conteggio di turni. Compare solo se almeno
   una sezione a video gestisce la pronta disponibilità. */
table.grid th.pd-col, table.grid td.pd-col {
  padding: 4px 5px; text-align: center; white-space: nowrap; width: 1px;
  background: #fff7ed; color: #9a3412; font-weight: 700; font-size: 12px;
}
table.grid td.pd-col.op-last { border-bottom: 3px solid #64748b; }
table.grid td.pd-col.op-mid { border-bottom: 1px solid #cbd5e1; }
/* Sezione "conteggio turni" a destra: separatore marcato + colonne (una per sigla usata
   nel mese) con tinta verde tenue per distinguerla dal riepilogo azzurro. */
table.grid th.cnt-sep, table.grid td.cnt-sep {
  width: 12px; min-width: 12px; padding: 0; background: #e5e7eb; border-top: 0; border-bottom: 0;
}
table.grid th.cnt-col, table.grid td.cnt-col {
  padding: 4px 4px; text-align: center; vertical-align: top; white-space: nowrap; width: 1px;
  background: #f0fdf4; color: #14532d; font-size: 12px; font-weight: 600;
}
table.grid th.cnt-col { font-weight: 700; }
/* Riga "Totale <gruppo>" in fondo alle righe operatore: linea di stacco in alto,
   etichetta a sinistra, somme in verde su fondo verde un po' più marcato. */
table.grid tr.tot-row td { border-top: 2px solid #94a3b8; font-weight: 700; }
table.grid tr.tot-row td.name-col.tot-row-label { text-align: left; color: #1e3a8a; }
table.grid tr.tot-row td.cnt-col.cnt-tot { background: #dcfce7; color: #14532d; vertical-align: middle; }
/* Riga "Addetto Antincendio": cella cliccabile con estintore (solo se abilitata). */
/* Fine del blocco di un operatore. `op-last` = bordo marcato, la riga di separazione
   fra un operatore e l'altro: sta su TUTTE le celle dell'ultima riga, comprese quelle
   in `rowspan` delle colonne riepilogo e dei conteggi, così il bordo attraversa il
   prospetto fino in fondo a destra. `op-mid` è il suo contrario dichiarato: quando sotto
   ci sono le righe di prestazione aggiuntiva dello stesso operatore il blocco continua,
   e lo stacco fra sezione istituzionale e aggiuntiva resta un filo leggero. */
table.grid td.op-last { border-bottom: 3px solid #64748b; }
table.grid td.op-mid { border-bottom: 1px solid #cbd5e1; }
table.grid td.ai-cell.op-last { border-bottom: 3px solid #64748b; }
table.grid td.ai-cell.op-mid { border-bottom: 1px solid #cbd5e1; }
table.grid td.ai-cell { height: 22px; background: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
table.grid td.ai-cell.we { background: #eff6ff; }
table.grid td.ai-cell:not(.disabled):hover { outline: 2px solid #ea580c; outline-offset: -2px; }
table.grid td.ai-cell.disabled { cursor: default; background: #fafafa; }
table.grid td.ai-cell.disabled.we { background: #eff6ff; }
/* Terza riga a due contenuti (08/08/2026): l'estintore in un angolo, la pronta
   disponibilità al centro — sempre la stessa scritta «REP», anche quando le fasce del
   giorno sono due. Il 🧯 si rimpicciolisce e si sposta perché al centro ora c'è dell'altro;
   dove la pronta disponibilità non è configurata la cella resta com'era (nessuna
   `.pd-sigle` da disegnare, e l'estintore in un angolo si vede lo stesso). */
table.grid td.ai-cell { position: relative; }
table.grid td.ai-cell .ai-corner {
  position: absolute; top: 0; left: 1px; font-size: 8px; line-height: 1; pointer-events: none;
}
table.grid td.ai-cell .pd-sigle {
  display: flex; justify-content: center; gap: 2px;
  font-size: 9px; font-weight: 700; color: #7c2d12; letter-spacing: -0.2px;
}
table.grid td.ai-cell .pd-sigle .pd-sigla {
  background: #ffedd5; border-radius: 3px; padding: 0 2px;
}
table.grid td.ai-cell.pd-on.disabled .pd-sigle { color: #9a3412; }
/* Titoletto che stacca i due contenuti nel menù della terza riga. */
.cell-menu .cm-sep {
  padding: 6px 8px 2px; font-size: 11px; font-weight: 700; color: #6b7280;
  text-transform: uppercase; letter-spacing: 0.3px; border-top: 1px solid #eee; margin-top: 4px;
}
.cell-menu .cm-item .hint { color: #6b7280; font-size: 11px; }
/* Riga di sezione per ruolo (Infermieri / OSS): etichetta pinnata a sinistra. */
table.grid tr.group-row td.group-head {
  position: sticky; left: 0; z-index: 4;
  text-align: left; font-weight: 700; color: #1e3a8a;
  background: #e0e7ff; padding: 5px 8px; text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 12px;
}

/* Riga di intestazione della SEZIONE del POAS: compare solo quando in videata ci
   sono più sezioni («Tutte le sezioni»). Più marcata di quella di gruppo, che le
   sta dentro. */
table.grid tr.sez-row td.sez-head {
  position: sticky; left: 0; z-index: 4;
  text-align: left; font-weight: 700; color: #fff;
  background: #1e3a8a; padding: 7px 10px;
  letter-spacing: 0.04em; font-size: 13px;
}

/* Righe speciali (sostituzioni esterne / tirocinanti): due campi + elimina.
   Dal 05/08/2026 la riga speciale ne occupa DUE (turni sopra, area di lavoro
   sotto) e i due campi si dividono di conseguenza: nome + × elimina nella riga
   dei turni (`.ext-line1`), matricola + reparto/ente in quella dell'attività
   (`.ext-line2`, dove sta anche il pulsante ＋ agg. della sostituzione esterna).
   In vista compatta la riga è di nuovo una sola e i campi tornano impilati dentro
   `.ext-wrap`. La cella si allarga insieme alla colonna nomi, così i nomi lunghi
   si vedono per intero. */
table.grid td.name-col.esterno { background: #eef4ff; }
table.grid td.name-col.tirocinante { background: #f6f0ff; }
/* Con una riga sola il layout sta in un div interno (`.ext-wrap`) così il <td>
   resta cella di tabella e prende la larghezza della colonna (= nome operatore
   più lungo); i campi, con size="1", non allargano la colonna e si limitano a
   riempirla. */
.ext-wrap { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.ext-line1 { display: flex; align-items: center; gap: 4px; }
/* La seconda riga sta su una linea sola: la matricola è corta e larga il giusto per
   le cifre, il reparto si prende quel che resta, il ＋ agg. non si stringe mai. */
.ext-line2 { display: flex; align-items: center; gap: 4px; width: 100%; }
.ext-name, .ext-matricola, .ext-extra {
  font: inherit; font-style: italic; white-space: normal; box-sizing: border-box;
  border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 5px; background: #fff;
}
.ext-name { flex: 1 1 auto; min-width: 0; }
.ext-del { flex: 0 0 auto; }
.ext-matricola { flex: 0 1 6em; min-width: 0; color: #4b5563; }
.ext-extra { flex: 1 1 auto; min-width: 0; color: #4b5563; }
.ext-line2 .btn-prest { flex: 0 0 auto; }
/* In compatta i campi tornano impilati e larghi tutta la cella. */
.ext-wrap .ext-matricola, .ext-wrap .ext-extra { display: block; width: 100%; flex: none; }
.ext-name:focus, .ext-matricola:focus, .ext-extra:focus { outline: 2px solid #1e3a8a; outline-offset: -1px; }
.ext-del {
  border: 0; background: none; color: #dc2626; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 3px;
}
.ext-del:hover { color: #991b1b; }
table.grid tr.add-row td { background: #fafbff; }
table.grid tr.add-row td.name-col { display: flex; flex-wrap: wrap; gap: 4px; }
.btn-add-ext {
  border: 1px dashed #93a3c4; background: #fff; color: #1e3a8a;
  border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 12px;
}
.btn-add-ext:hover { background: #eef2ff; }
.btn-add-ext[data-tipo="tirocinante"] { border-color: #b8a3d4; color: #6d28d9; }
.btn-add-ext[data-tipo="tirocinante"]:hover { background: #f3ecff; }

/* Righe dei controlli di copertura (in fondo a ciascun gruppo, dopo la add-row).
   Sabati e festivi qui NON sono rosa come nel resto della griglia (04/08/2026): in
   queste righe il colore dice una cosa sola — com'è andato il controllo — e il rosa
   del festivo si confondeva col rosso della scopertura, facendo sembrare un problema
   una colonna che stava benissimo. Il weekend resta riconoscibile con un azzurro
   tenue, che non può essere scambiato per un allarme; rosso (scoperto) e giallo
   (sovracoperto) restano sopra e vincono sempre. Nella stampa PDF le celle di
   controllo restano bianche anche nei festivi: lì ognuna ha il suo sfondo esplicito.
   La regola `.cov-ok.we` serve perché `.cov-ok` viene dopo `.we` e riporterebbe al
   bianco proprio le celle a posto del festivo, lasciando l'azzurro alle sole neutre. */
table.grid tr.cov-row td { height: 22px; }
table.grid td.name-col.cov-label { font-size: 11px; color: #475569; font-weight: 600; }
table.grid td.cov { text-align: center; font-size: 11px; font-weight: 700; cursor: default; background: #fff; }
/* I quattro stati valgono anche per la tabella del «Riepilogo copertura»: gli stessi
   colori in un posto solo, così una scopertura si riconosce uguale ovunque. */
table.grid td.cov.we,
table.covrie td.cov.we { background: #eff6ff; }           /* sabato/festivo: azzurro tenue */
table.grid td.cov.cov-ok,
table.covrie td.cov.cov-ok { background: #fff; color: #334155; }
table.grid td.cov.cov-ok.we,
table.covrie td.cov.cov-ok.we { background: #eff6ff; }    /* «a posto» nel festivo */
table.grid td.cov.cov-scoperto,
table.covrie td.cov.cov-scoperto { background: #fecaca; color: #7f1d1d; }
table.grid td.cov.cov-sovra,
table.covrie td.cov.cov-sovra { background: #fef08a; color: #713f12; }
table.grid td.cov.cov-neutro,
table.covrie td.cov.cov-neutro { color: #94a3b8; font-weight: 400; }  /* sfondo da .we/base */
table.grid tr.cov-last td { border-bottom: 3px solid #64748b; }        /* chiude il blocco */
/* Separatore tra i turni e i controlli di copertura (vista compatta): banda
   vuota che stacca visivamente le due zone. */
table.grid tr.cov-sep td { height: 10px; background: #f3f4f6; border-left: 0; border-right: 0; }
/* Separatore + intestazione della "copertura per attività", in fondo al blocco di
   ogni gruppo di qualifica: dice un'altra cosa dalle righe sopra (non quanti, ma chi
   fa cosa) e va staccata da quelle. Tema indaco tenue, per non confonderla con
   l'ambra dell'antincendio. */
table.grid tr.att-sep td {
  height: 16px; background: #e0e7ff; color: #3730a3;
  font-size: 11px; font-weight: 700; text-align: left; padding: 2px 8px;
  border-top: 2px solid #a5b4fc; border-bottom: 1px solid #c7d2fe;
}
/* Separatore + intestazione tenue della sezione "copertura antincendio", che
   stacca le sue tre righe da quelle di copertura degli OSS (tema ambra 🧯). */
table.grid tr.ai-sep td {
  height: 16px; background: #fef3c7; color: #92400e;
  font-size: 11px; font-weight: 700; text-align: left; padding: 2px 8px;
  border-top: 2px solid #fcd34d; border-bottom: 1px solid #fde68a;
}

/* Cella in modifica: input che riempie la cella e centra la sigla. */
input.cell-edit {
  width: 100%; height: 28px; border: 0; margin: 0; padding: 0;
  text-align: center; font: inherit; font-weight: 600; text-transform: uppercase;
  background: #fffbe6; color: #1f2937;
  outline: 2px solid #1e3a8a; outline-offset: -2px;
}

/* Menù contestuale (clic destro) con l'elenco dei turni. */
.cell-menu {
  position: fixed; z-index: 60; min-width: 210px;
  background: #fff; border: 1px solid #d1d5db; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 4px; font-size: 13px;
}
/* `overscroll-behavior: contain` evita che la rotella, arrivata a fine elenco,
   scrolli la griglia sottostante (che chiuderebbe il menù). */
.cell-menu .cm-list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.cell-menu .cm-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: 5px 8px; border-radius: 5px; color: #1f2937; font-size: 13px;
}
.cell-menu .cm-item:hover { background: #eef2ff; }
.cell-menu .cm-item.sel { background: #e0e7ff; font-weight: 600; }
.cell-menu .cm-swatch { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.cell-menu .cm-nome { color: #6b7280; }
.cell-menu .cm-clear { border-top: 1px solid #eee; margin-top: 4px; color: #dc2626; }
/* "Mostra tutti i turni": via d'uscita quando serve una sigla di un'altra sezione. */
.cell-menu .cm-all { border-top: 1px solid #eee; color: #1e3a8a; }
.cell-menu .cm-vuoto { padding: 10px 8px; color: #b45309; font-size: 12px; line-height: 1.45; }
/* Richieste: spunta "mostra tutti" accanto alla tendina dei turni. */
.rich-tutti { margin-left: 8px; font-size: 12px; color: #64748b; white-space: nowrap; }
.cell-menu .cm-rientro {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  cursor: pointer; padding: 5px 8px; border-radius: 5px; font-size: 13px;
  border-top: 1px solid #eee; margin-top: 2px; color: #b45309; font-weight: 600;
}
.cell-menu .cm-rientro:hover { background: #fff7ed; }
/* Campo di ricerca in cima alla tendina turni (digitazione veloce della sigla). */
.cell-menu .cm-search {
  display: block; width: 100%; box-sizing: border-box; margin-bottom: 4px;
  padding: 5px 8px; border: 1px solid #d1d5db; border-radius: 5px; font-size: 13px;
}
.cell-menu .cm-search:focus { outline: 2px solid #1e3a8a; outline-offset: -1px; }
/* Voci del menù variazioni turno. */
.cell-menu .cm-var {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  cursor: pointer; padding: 5px 8px; border-radius: 5px; font-size: 13px; color: #1f2937;
}
.cell-menu .cm-var:hover { background: #eef2ff; }
.cell-menu .cm-var.on { background: #ede9fe; color: #6d28d9; font-weight: 600; }
/* Voce non applicabile qui (es. "Tutor di…" senza tirocinanti abbinabili): resta visibile
   come promemoria che la funzione esiste, ma è grigia e il tooltip spiega il perché. */
.cell-menu .cm-var:disabled { color: #9ca3af; cursor: default; }
.cell-menu .cm-var:disabled:hover { background: none; }
.cell-menu .cm-empty { padding: 8px; color: #6b7280; font-size: 12px; font-style: italic; }

.card-form {
  display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  background: var(--n-0); padding: var(--s-4); border: var(--bordo);
  border-radius: var(--raggio); margin-bottom: var(--s-4); box-shadow: var(--ombra-1);
}
/* Un form nascosto va nascosto per davvero: senza questa riga vincerebbe il
   `display: flex` qui sopra, che sta più in basso di `.hidden` nel foglio e ha la stessa
   specificità. Serviva alla scheda del dipendente, che dal 07/08/2026 sta in una
   finestrella; la usa ancora il secondo passo delle stampe preconfigurate. */
.card-form.hidden { display: none; }
/* Titolo della scheda: riga intera, dice se si sta inserendo o modificando. */
.card-form .form-titolo { flex-basis: 100%; margin: 0 0 2px; font-size: var(--t-m); font-weight: 700; color: var(--n-900); }
.card-form input, .card-form select, .card-form textarea {
  padding: 7px 10px; border: 1px solid var(--n-300); border-radius: var(--raggio-xs);
  font-size: var(--t-s); font-family: inherit; min-height: var(--bersaglio);
  background: var(--n-0); color: var(--n-800);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.card-form input:focus, .card-form select:focus, .card-form textarea:focus {
  border-color: var(--a-500); box-shadow: 0 0 0 3px var(--a-100); outline: none;
}
.card-form textarea { width: 100%; resize: vertical; font-family: inherit; }
.card-form input[name="cognome"], .card-form input[name="nome"], .card-form input[name="ruolo"] { min-width: 140px; }
.card-form select[name="percentuale"] { width: auto; }
/* Forza gli elementi seguenti su una nuova riga del form (flex-wrap). */
.card-form .form-break { flex-basis: 100%; height: 0; margin: 0; }
/* Radio a riga intera (es. tipo di rientro): input piccolo, testo accanto. */
.card-form label.radio { flex-basis: 100%; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; }
.card-form label.radio input[type="radio"] { width: auto; padding: 0; margin: 3px 0 0; }
/* Form dentro una finestrella: la cornice è già quella del box, una seconda cornice
   dentro l'altra è solo rumore. È una classe da mettere a mano e non una regola
   `.modal-box .card-form`, per non cambiare l'aspetto dei form che stanno dentro le
   finestre da sempre (Condizioni, Percorso, Istanza…). */
.card-form.form-in-modale { border: 0; padding: 0; margin-bottom: 0; background: transparent; }
/* La riga dei comandi in fondo al form: riga intera, pulsanti a destra, staccati dai
   campi da un filetto. Il pulsante di conferma è l'ultimo, cioè il più a destra. */
.card-form .form-azioni {
  flex-basis: 100%; display: flex; gap: var(--s-2); justify-content: flex-end;
  margin-top: 6px; padding-top: var(--s-3); border-top: var(--bordo);
}
/* Comando che non è né la conferma né l'annullamento (oggi «Deseleziona tutto» delle
   ferie, «Giornata intera» delle ore fruite, le due rimozioni di nota e orari): va
   all'altro capo della riga, per non farlo scambiare per uno dei due. */
.card-form .form-azioni .azioni-a-sinistra,
.modal-azioni .azioni-a-sinistra { margin-right: auto; }
/* «È andata»: la riga che dice che l'azione è riuscita, quando la finestra non si chiude
   subito perché resta qualcosa da scegliere (istanza di rientro: salvata, e poi PDF o
   e-mail). Verde di stato, come il badge del mese validato. */
.esito-ok {
  margin: 0 0 var(--s-2); padding: var(--s-2) var(--s-3);
  background: var(--ok-fondo); border: 1px solid var(--ok-bordo); border-radius: var(--raggio-xs);
  color: var(--ok-testo); font-weight: 600;
}
/* :not(.hidden) così la classe .hidden (display:none) vince sul flex, come .modal-overlay.hidden. */
/* Percorso di servizio: i quattro comandi che aprono un modulo per volta. Non sono
   schede (non dividono un contenuto in parti: aprono un'azione), quindi restano
   pulsanti normali — quello aperto si accende, e ripremendolo si richiude. */
.perc-azioni { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.perc-azione.attivo {
  background: var(--a-50); border-color: var(--a-500); color: var(--a-700); font-weight: 600;
}
/* Titolo del secondo elenco della finestra (Abilitazioni): una riga di stacco, così
   si vede a colpo d'occhio che sotto comincia un'altra cosa. */
.cond-sezione { margin: 22px 0 6px; padding-top: 16px; border-top: 1px solid #e5e7eb; font-size: 16px; }
#abil-form input[name="note"] { min-width: 200px; }
/* Pulsante «Condizioni» di chi ha almeno un'abilitazione vigente: il bordo dice che lì
   dentro c'è qualcosa da guardare. Era ROSSO, e il rosso in questa interfaccia è la
   rimozione o un guasto: avere un'abilitazione non è né l'una né l'altro, è una qualità
   della persona. Prende il blu dell'app, che segnala senza allarmare. */
.data-table td.actions button.ha-abilitazioni {
  border-color: var(--a-200); background: var(--a-50); font-weight: 600;
}
/* Percorso di servizio: il tratto ANCORA IN CORSO si distingue dagli altri, che sono
   storia chiusa. Verde tenue e non rosso: è lo stato normale, non un problema (vedi la
   regola «il rosso solo su un problema accertato»). */
/* Giorni in cui l'operatore non è in reparto (prima dell'ingresso, dopo la cessazione o
   dopo un trasferimento): cella sbarrata in diagonale e non modificabile. Grigia e non
   rossa: non è un errore, è una giornata che appartiene a un altro reparto. Un turno che
   ci fosse resta leggibile — non si nascondono dati — solo più tenue. */
table.grid td.day.fuori-servizio, table.grid td.att-cell.fuori-servizio,
table.grid td.ai-cell.fuori-servizio {
  background-image: linear-gradient(to top right, transparent calc(50% - 1px),
    #d1d5db calc(50% - 1px), #d1d5db calc(50% + 1px), transparent calc(50% + 1px));
  background-color: #f9fafb;
  color: #9ca3af;
}
#percorso-table tr.periodo-aperto { background: #f0fdf4; }
#percorso-table tr.periodo-aperto td:first-child { font-weight: 600; }
/* La tendina della Sezione NON ha una larghezza minima sua: la aveva (280px), ed era un
   residuo di quando era una tendina sola e lunga. Da quando sta nella terna
   Presidio › Struttura › Sezione contraddiceva il `min-width: 0` che tiene uguali le tre
   colonne, e la terza usciva dal bordo del form di 67px — misurati, in questa finestra e
   in quella del tratto. */
#trasf-form input[name="note"], #percorso-form input[name="note"] { min-width: 200px; }
.table-toolbar { display: flex; justify-content: flex-end; gap: var(--s-2); margin-bottom: var(--s-2); }
/* Due comandi di peso diverso agli estremi: a sinistra quello che apre una scheda,
   a destra la consultazione dell'archivio (in sordina).
   Nota: «＋ Nuovo…» qui NON è più blu pieno. Aprire un form non conclude niente — il blu
   pieno è dell'azione che conclude, e in quella schermata è il «Salva» del form. */
.table-toolbar.toolbar-estremi { justify-content: space-between; }

/* Finestra modale (archivio cessati). .modal-overlay.hidden vince sul .modal-overlay. */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 1000; overflow: auto; }
.modal-overlay.hidden { display: none; }
.modal-box { background: var(--n-0); border-radius: var(--raggio); padding: var(--s-5); max-width: 900px; width: 100%; box-shadow: var(--ombra-2); }
.modal-box.modal-narrow { max-width: 460px; }
/* Finestrella larga: serve alle tabelle con una colonna per giorno del mese (Riepilogo
   copertura). Oltre la larghezza dello schermo la tabella scorre dentro il suo box. */
.modal-box.modal-wide { max-width: min(1500px, 96vw); }
/* Via di mezzo fra i 900px normali e `modal-wide`: per i moduli con molti campi (la
   scheda del dipendente, un obiettivo), che a 900px diventerebbero una colonna troppo
   alta. Lo scorrimento resta quello del velo, come per le altre finestre lunghe. */
.modal-box.modal-largo { max-width: min(1100px, 96vw); }

/* ---- Riepilogo dei controlli di copertura (finestrella del prospetto) ----
   Una riga per controllo, una colonna per giorno; i colori delle celle sono quelli
   del prospetto (vedi le regole `.cov-*` più su, condivise apposta). */
.covrie-sotto { font-size: 13px; color: #334155; font-weight: 600; margin-bottom: 8px; }
.covrie-scroll { overflow: auto; max-height: 62vh; border: 1px solid #e5e7eb; border-radius: 8px; }
/* `width:100%` distribuisce lo spazio della finestrella fra i giorni; se i giorni sono
   tanti (periodo libero lungo) i `min-width` delle celle vincono e la tabella scorre. */
table.covrie { border-collapse: collapse; font-size: 11px; width: 100%; }
table.covrie th, table.covrie td { border: 1px solid #e5e7eb; padding: 2px 4px; white-space: nowrap; }
table.covrie thead th { position: sticky; top: 0; z-index: 3; background: #1e3a8a; color: #fff; text-align: center; font-size: 10px; line-height: 1.15; }
table.covrie thead th small { display: block; font-weight: 400; opacity: .85; }
/* Colonna delle etichette congelata: scorrendo i 31 giorni si deve continuare a
   sapere di quale controllo si sta leggendo la riga. */
table.covrie th.covrie-et, table.covrie td.covrie-et {
  position: sticky; left: 0; z-index: 2; background: #f8fafc; text-align: left;
  min-width: 210px; color: #475569; font-weight: 600;
}
table.covrie thead th.covrie-et { z-index: 4; background: #1e3a8a; color: #fff; }
table.covrie td.cov { text-align: center; font-weight: 700; min-width: 22px; background: #fff; }
/* Banda di una professione (blu tenue) e dell'antincendio (ambra), come nel prospetto. */
table.covrie tr.covrie-banda td { background: #dbeafe; color: #1e3a8a; font-weight: 700; text-align: left; padding: 4px 8px; }
table.covrie tr.covrie-banda td.covrie-et { background: #dbeafe; color: #1e3a8a; }
table.covrie tr.covrie-ai td, table.covrie tr.covrie-ai td.covrie-et { background: #fef3c7; color: #92400e; }
/* Banda delle aree di lavoro (indaco, come «📋 Copertura per attività» nel prospetto),
   sotto-intestazione di ogni area e righe delle sue fasce, rientrate. */
table.covrie tr.covrie-att td, table.covrie tr.covrie-att td.covrie-et { background: #e0e7ff; color: #3730a3; }
table.covrie tr.covrie-area td, table.covrie tr.covrie-area td.covrie-et {
  background: #eef2ff; color: #3730a3; font-weight: 700; text-align: left; padding: 3px 8px;
}
table.covrie tr.covrie-in-area td.covrie-et { padding-left: 20px; }
/* Riga di sintesi: quanti controlli non tornano, quel giorno. */
table.covrie tr.covrie-sintesi td.covrie-et { color: #1f2937; font-weight: 700; }
.covrie-vuoto { padding: 18px; text-align: center; color: #6b7280; font-style: italic; }
.modal-azioni { margin-top: var(--s-3); display: flex; gap: var(--s-2); justify-content: flex-end;
  border-top: var(--bordo); padding-top: var(--s-3); }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  border-bottom: var(--bordo); padding-bottom: var(--s-3); margin-bottom: var(--s-4); }
.modal-head h3 { margin: 0; font-size: var(--t-l); font-weight: 700; color: var(--n-900); }
.modal-x {
  width: 32px; height: 32px; min-height: 32px; padding: 0;
  border: 0; background: transparent; color: var(--n-500);
  border-radius: var(--raggio-xs); cursor: pointer; font-size: var(--t-m); font-family: inherit;
}
.modal-x:hover { background: var(--n-100); color: var(--n-800); }
.stampe-voce { display: block; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; color: #1f2937; cursor: pointer; font-size: 15px; }
.stampe-voce:hover { background: #eef2ff; border-color: #c7d2fe; }
.data-table td.empty { text-align: center; color: #6b7280; font-style: italic; }
.chk { display: flex; align-items: center; gap: 5px; font-size: 14px; }

/* Contenitore a scorrimento orizzontale per le tabelle larghe (anagrafica: molte
   colonne). Su schermo largo la tabella riempie lo spazio; se le colonne non ci
   stanno, scorre invece di stringersi/andare a capo. Bordo e raggiatura stanno sul
   CONTENITORE: la tabella dentro non ha overflow:hidden, che romperebbe la prima
   colonna congelata (position:sticky). */
.table-scroll { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 8px; }
.table-scroll .data-table { min-width: max-content; border: 0; border-radius: 0; overflow: visible; }
/* Prima colonna (Cognome e nome) "congelata": resta visibile scorrendo a destra. */
.table-scroll .data-table th:first-child,
.table-scroll .data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 1px 0 0 #e5e7eb; /* divisorio destro che non sparisce con lo scroll */
}
.table-scroll .data-table thead th:first-child { background: #f3f4f6; z-index: 2; }
.data-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--n-0); border: var(--bordo); border-radius: var(--raggio);
  overflow: hidden; box-shadow: var(--ombra-1);
}
.data-table th, .data-table td { padding: 9px var(--s-3); border-bottom: 1px solid var(--n-100); text-align: left; font-size: var(--t-s); white-space: nowrap; }
.data-table th {
  background: var(--n-50); border-bottom: 1px solid var(--n-200);
  font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--n-500);
}
.data-table tbody tr:hover { background: var(--n-50); }
.data-table td.actions { text-align: right; white-space: nowrap; }

/* Riepilogo annuale: colonne numeriche centrate, Delta verde/rosso (stessi colori
   della colonna Delta del prospetto), mesi fuori servizio in grigio, riga totali. */
/* Due stampe che si spengono finché mancano i dati per farle («Esporta PDF» del
   Riepilogo annuale, «Prospetto mensile PDF» del registro istanze). Della coppia di
   regole che avevano prima resta solo lo spegnimento: la forma è quella di tutti gli
   altri pulsanti. */
#ra-export-pdf:disabled, #ir-prospetto-pdf:disabled { opacity: .5; cursor: default; }
#ra-table td.ra-num, #ra-table th:not(:first-child) { text-align: center; }
#ra-table td.delta-pos { color: #16a34a; font-weight: 600; }
#ra-table td.delta-neg { color: #dc2626; font-weight: 600; }
/* La prima colonna è congelata (sfondo proprio): va ritinta anche qui. */
#ra-table tr.ra-off td, #ra-table tr.ra-off td:first-child { color: #9ca3af; background: #fafafa; }
/* Mese con la pianificazione non ancora validata: la riga resta normale — serve a
   pianificare, e a inizio anno sarebbero quasi tutte — e a segnalarlo basta il pallino
   accanto al nome del mese, spiegato dalla riga dei totali. */
.ra-daval-segno { color: #b45309; font-weight: 700; }
#ra-table tr.ra-tot td, #ra-table tr.ra-tot td:first-child {
  font-weight: 700; border-top: 2px solid #d1d5db; background: #f9fafb;
}
/* Colonne dei giorni (1-31): strette e compatte, altrimenti il padding della
   .data-table (9x12) manderebbe la tabella fuori scala. Stessi contrassegni del
   prospetto: fondo azzurro nei weekend/festivi, sigla rossa per il cambio turno,
   blu per le ferie autorizzate, ↩ per l'istanza di rientro. */
#ra-table th.ra-day, #ra-table td.ra-day {
  padding: 4px 0; width: 26px; min-width: 26px; text-align: center;
  font-size: 12px; font-weight: 600; position: relative;
}
#ra-table th.ra-day { font-size: 11px; }
#ra-table th.ra-day.we, #ra-table td.ra-day.we { background: #eff6ff; }
#ra-table td.ra-day.we[style] { background-clip: padding-box; }
#ra-table td.ra-day.da-richiesta .sigla { color: #2563eb; }
#ra-table td.ra-day.cambio .sigla { color: #dc2626; text-shadow: 0 0 2px rgba(255,255,255,.9); }  /* dopo il blu: prevale */
#ra-table td.ra-day .rientro-mark { position: absolute; top: 0; right: 1px; font-size: 8px; color: #b45309; }
#ra-table td.ra-day.ra-nd { background: #f8fafc; }        /* giorno inesistente nel mese */
/* Riga delle prestazioni aggiuntive: stessi colori delle righe prestazione del
   prospetto (fondo verde tenue, etichetta e ore in verde scuro). */
#ra-table tr.ra-agg td, #ra-table tr.ra-agg td:first-child { background: #f0fdf4; }
#ra-table tr.ra-agg td.ra-day.we { background: #dcfce7; }
#ra-table tr.ra-agg td:first-child { color: #166534; font-style: italic; font-size: 12px; }
#ra-table td.ra-ore { color: #15803d; font-weight: 600; }

/* Scheda "Residui": tabella di reparto (dipendenti in riga, causali in colonna) più il
   dettaglio del singolo. Ogni cella dice "usato / spetta"; il colore segnala solo le
   due situazioni su cui si interviene — monte finito (rosso) e agli sgoccioli
   (arancione). Il verde non serve: "sta bene" è la norma, non una notizia.
   Unica eccezione la 104, che non è un tetto da non superare ma un permesso da
   programmare ogni mese: lì il semaforo è rovesciato (verde/giallo/rosso qui sotto). */
/* `.res-tabella` sta su entrambe le tabelle a griglia della scheda — quella delle
   causali mensili e quella di reparto: stesse celle, stesso comportamento al clic. */
.res-tabella td.res-cell, .res-tabella th.res-col { text-align: center; }
/* Le intestazioni sono SIGLE, non parole: il maiuscolo automatico della .data-table le
   riscriverebbe (C_gmf → C_GMF, 150h → 150H) tradendo la convenzione maiuscolo/minuscolo
   scelta per le causali. Qui la sigla si legge com'è scritta in anagrafica. */
.res-tabella th.res-col { font-size: 12px; text-transform: none; color: #374151; }
.res-tabella td.res-cell { font-variant-numeric: tabular-nums; }
.res-tabella tr.res-riga { cursor: pointer; }
.res-tabella tr.res-riga:hover td { background: #f8fafc; }
.res-tabella tr.res-riga-sel td, .res-tabella tr.res-riga-sel td:first-child { background: #eef2ff; }
.res-esaurito { background: #fee2e2 !important; color: #991b1b; font-weight: 700; }
.res-basso { background: #ffedd5 !important; color: #9a3412; font-weight: 600; }
/* Semaforo della 104 (permessi da programmare): tutti messi / ne manca qualcuno /
   nessuno in un mese già validato. Stesse tinte tenui delle altre caselle, per non
   trasformare la tabella in un semaforo urlato. */
.res-completo { background: #dcfce7 !important; color: #166534; font-weight: 600; }
.res-parziale { background: #fef9c3 !important; color: #854d0e; font-weight: 600; }
.res-mancante { background: #fee2e2 !important; color: #991b1b; font-weight: 700; }
/* Quadratini della legenda sotto la tabella delle causali mensili. */
.res-legenda-box { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); vertical-align: -1px; margin-right: 2px; }
.res-avviso { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; color: #92400e; }
/* Il file dell'ufficio presenze ha smentito la proiezione dell'app: rosso, perché non è
   un promemoria ma un dato da guardare. L'elenco sta dentro l'avviso stesso. */
.res-avviso-scarto { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
.res-avviso-scarto ul { margin: 6px 0 6px 18px; padding: 0; }
.res-titolo { margin: 18px 0 4px; font-size: 16px; }
/* Le causali mensili aprono la scheda: il loro titolo non deve staccarsi dal testo di
   aiuto che ha sopra (il margine serve ai titoli che seguono una tabella). */
#ra-residui-mese > .res-titolo { margin-top: 0; }
.res-dettaglio { margin-top: 8px; }
/* --- Ore in eccedenza (terza scheda del Riepilogo annuale) ---------------------
   Tre corsie di monte ore per riga. Il colore segnala le due situazioni su cui si
   interviene, come nei residui: monte alto da smaltire (arancione) e debito oltre
   soglia (rosso). I saldi sono numeri da confrontare in colonna, quindi cifre a
   larghezza fissa e allineate a destra. */
.ore-tabella td.ore-cell, .ore-tabella th.ore-col { text-align: right; }
.ore-tabella th.ore-col { font-size: 12px; text-transform: none; color: #374151; }
.ore-tabella td.ore-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* I movimenti spiegano il saldo ma non sono il saldo: restano leggibili e in secondo piano. */
.ore-tabella td.ore-mov { color: #6b7280; }
/* Il totale apre il blocco del saldo: è il numero che si legge per primo, le tre
   "…di cui" lo scompongono. Nessun colore di stato — le soglie sono per corsia, un
   semaforo sulla somma segnalerebbe un problema non accertato — solo il peso del
   carattere e un filo di separazione. */
.ore-tabella td.ore-totale, .ore-tabella th.ore-totale { font-weight: 700; }
.ore-tabella td.ore-totale, .ore-tabella th.ore-totale { border-right: 1px solid #e5e7eb; }
.ore-alto { background: #ffedd5 !important; color: #9a3412; font-weight: 600; }
.ore-debito { background: #fee2e2 !important; color: #991b1b; font-weight: 700; }
/* Da dove viene il numero: certificato dall'ufficio o proiettato dall'app. È la
   distinzione più importante della scheda, quindi sta su ogni riga e non solo in testa. */
.ore-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ore-uff { background: #dcfce7; color: #166534; }
.ore-stima { background: #e0e7ff; color: #3730a3; }
.ore-ignoto { background: #f3f4f6; color: #6b7280; }
.ore-incompleto { background: #fef3c7; color: #92400e; }
.ore-scarto { color: #b45309; font-weight: 700; cursor: help; }
.res-dettaglio input.res-saldo { width: 80px; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 6px; text-align: right; }
/* ------------------------------------------------------------- LE AZIONI DI RIGA
   Le azioni di riga restano testuali — sono decine per schermata, e altrettanti
   rettangoli farebbero rumore — ma diventano un bersaglio vero, non più 13px con 3px
   di imbottitura.

   UN PESO E UN'ETICHETTA SOLA PER AZIONE (08/08/2026). Il peso lo danno queste tre
   regole e nessun'altra: tre schermate avevano una loro eccezione locale, scritta a
   colori fissi da prima della tavolozza, e la stessa riga risultava di volta in volta
   un collegamento, una pillola bordata o un rettangolo blu pieno. Le etichette sono due
   verbi soltanto: «Modifica» apre il modulo di quella riga, «Elimina» la cancella —
   «Togli» e «Rimuovi» non esistono più. L'oggetto si scrive solo dove il pulsante
   cancella qualcosa di più grande della riga in cui sta («Elimina fascia»). */
.data-table button {
  border: 1px solid transparent; background: transparent; box-shadow: none;
  cursor: pointer; color: var(--a-600); font-weight: 500; font-size: var(--t-xs);
  padding: 5px 9px; min-height: 30px; font-family: inherit; border-radius: var(--raggio-xs);
}
.data-table button:hover { background: var(--a-50); border-color: var(--a-100); }
/* `button.del` più in alto vale ovunque, ma questa regola sta DOPO `.data-table button`
   e a parità di specificità vince l'ultima: senza, l'etichetta rossa tornerebbe blu
   proprio dentro le tabelle, dove i pulsanti «Elimina» sono quasi tutti. */
.data-table button.del { color: var(--er-testo); }
.data-table button.del:hover { background: var(--er-fondo); border-color: var(--er-bordo); }
/* L'azione PRINCIPALE di una riga («Autorizza» su una richiesta di ferie o di turno):
   prende il peso NORMALE della famiglia — fondo chiaro e bordo — e non il blu pieno che
   aveva prima. Il blu pieno vuol dire «questo conclude» ed è uno per schermata: qui le
   righe in attesa sono venti, e venti rettangoli blu non indicavano più niente. Bordata
   in mezzo a due etichette testuali si stacca lo stesso. */
.data-table button.rilievo {
  background: var(--n-0); border-color: var(--n-300); color: var(--n-700);
  box-shadow: 0 1px 1px rgba(15,23,42,.03);
}
.data-table button.rilievo:hover { background: var(--n-50); border-color: var(--n-400); }
/* Le righe che si aprono cliccandole. Prima lo diceva soltanto una nota sopra la
   tabella, e chi non la leggeva non aveva modo di sapere che la riga è un comando. */
tr.res-riga, #ute-elenco-table tbody tr { cursor: pointer; }
tr.res-riga:hover, #ute-elenco-table tbody tr:hover { background: var(--a-50); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; color: #fff; }
.badge104 { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 700; background: #0d9488; color: #fff; vertical-align: middle; }
/* Tipo di rapporto diverso da quello di dipendenza (LP / CoCoCo / SOM): stessa forma
   degli altri badge della riga icone, in viola per non confondersi né col 104 (verde)
   né con le limitazioni (arancione). Non è un problema — è una qualità della persona —
   quindi niente rosso. Il dipendente non porta badge: è il caso normale. */
.badge-rapporto { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 10px; font-weight: 700; background: #7c3aed; color: #fff; vertical-align: middle; cursor: help; }
/* Dato che manca (non zero: proprio assente), es. il Dovuto di un non-dipendente di
   cui non sono state indicate le ore da contratto. Grigio e non allarmante. */
.dato-mancante { color: #9ca3af; cursor: help; }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--n-900); color: #fff; padding: var(--s-3) var(--s-4); border-radius: var(--raggio-s); max-width: 520px; box-shadow: var(--ombra-2); z-index: 50; font-size: var(--t-s); white-space: pre-line; }
.toast.warn { background: #b45309; }
.toast.error { background: #b91c1c; }

/* ---------------------------------------------------------------- HOME
   Pagina iniziale: intestazione (provvisoria), sezione "Oggi" e card delle
   funzioni. Blocco separato dal resto: non tocca gli stili del prospetto. */

/* I tre menù a tendina della barra in alto ("Pianificazione", "📊 Reportistica",
   "⚙ Configurazione"). Il pannello si apre SOPRA a tutto quello che sta sotto — le due
   fasce del contesto, la fascia dei comandi del prospetto — e per questo lo z-index è
   alto: le fasce vengono dopo nel documento e senza il numero coprirebbero le voci del
   menù. Resta sotto ai modali (1000) e al velo d'avvio (2000), che devono poterlo
   coprire loro. */
.menu-wrap { position: relative; display: inline-block; }
.menu-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: var(--n-0); border: var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra-2); padding: var(--s-2); min-width: 340px;
  /* La Reportistica ha dieci voci: con la riga di spiegazione il pannello arriva a ~600px
     e su un portatile basso l'ultima voce finirebbe fuori dallo schermo, irraggiungibile
     (il pannello è `absolute`: la pagina sotto non scorre per lui). Scorre lui. */
  max-height: calc(100vh - var(--topbar-h, 120px) - 24px); overflow-y: auto;
}
.menu-panel.hidden { display: none; }
/* Una voce è la stessa cosa della card della Home, in piccolo: icona, titolo e la riga
   che dice cosa si trova di là. Con undici voci in Reportistica il solo titolo si legge
   come un elenco anonimo — e il testo è già scritto nella card, non costa niente. Stesso
   aspetto del pannello «Stampe e documenti» del prospetto (`.ui-menu-voce`), che fa la
   stessa cosa: un elenco di posti dove andare, spiegati. */
.menu-voce {
  display: flex; gap: var(--s-2); align-items: flex-start;
  width: 100%; text-align: left; border: 0; background: transparent;
  padding: var(--s-2) var(--s-3); border-radius: var(--raggio-s);
  cursor: pointer; font-family: inherit; min-height: 0; box-shadow: none;
}
.menu-voce:hover { background: var(--a-50); }
.menu-voce-icona { flex: 0 0 20px; text-align: center; font-size: var(--t-m); line-height: 1.3; }
.menu-voce-testo { display: block; }
.menu-voce b { display: block; font-size: var(--t-s); color: var(--n-800); font-weight: 600; }
.menu-voce-testo span { display: block; font-size: var(--t-xs); color: var(--n-500); }
/* Menù nascosti dai permessi. La regola generale `.hidden` sta in cima al foglio e qui
   perderebbe: `.menu-wrap` ha la stessa specificità ma viene DOPO, e a parità vince
   l'ultima. (Le singole voci non si nascondono più: `costruisciMenuBarra` non le disegna
   affatto, e un menù rimasto senza voci non nasce.) */
.menu-wrap.hidden { display: none; }

.home-hero {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 190px; text-align: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
  color: #fff; border-radius: var(--raggio); padding: 22px 24px 40px; margin-bottom: 18px;
  box-shadow: var(--ombra-2);
}
.home-hero-top { display: flex; align-items: center; justify-content: center; width: 100%; }
.home-hero h2 { margin: 0; font-size: 28px; letter-spacing: .02em; }
.home-hero p { margin: 4px 0 0; color: #dbeafe; font-size: 14px; }
.home-hero-tagline { font-style: italic; }
.home-hero-autore { margin-top: 10px !important; color: rgba(255,255,255,.65) !important; font-size: 11px; }
.home-hero-data { position: absolute; left: 24px; bottom: 14px; margin: 0; }
/* Pulsante ancorato in alto a destra: così il blocco del nome resta centrato
   sull'intera larghezza del box, non sullo spazio rimasto libero. */
.home-hero-azioni { position: absolute; top: 18px; right: 24px; }
.home-hero-btn {
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.5);
  padding: 7px 14px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.home-hero-btn:hover { background: rgba(255,255,255,.28); }

/* Selettore del perimetro organizzativo (POAS): barra azzurra con le tre tendine a
   cascata. Non è una toolbar di comandi — è il "dove sono" —, ma è il comando che
   decide QUALI dati si stanno guardando: se passa inosservato si finisce per leggere i
   numeri della sezione sbagliata. Perciò il tono è alzato (fondo azzurro tenue, filetto
   blu a sinistra, etichetta blu in grassetto): abbastanza da riconoscerla a colpo
   d'occhio, non tanto da competere coi pulsanti.
   Dall'08/08/2026 ne esiste UNA SOLA, nell'intestazione fissa (`.perimetro-topbar`):
   prima era ripetuta in undici viste e mancava in tutte le altre, dove non si vedeva più
   su che reparto si stava lavorando. Le regole generiche restano qui perché la barra è
   ancora disegnata dallo stesso codice (`riempiBarraPerimetro`, `BARRE_PERIMETRO`). */
.perimetro-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  background: var(--a-50); border: 1px solid var(--a-200); border-left: 4px solid var(--a-900);
  border-radius: var(--raggio);
  padding: 12px 16px; margin-bottom: 18px;
}
/* `display: flex` qui sopra batte `.hidden`, che vale solo `display: none` senza peso
   sufficiente: serve il selettore combinato. */
.perimetro-barra.hidden { display: none; }
/* La barra nell'intestazione: incassata fra le altre due fasce — niente angoli
   arrotondati, niente margine sotto e imbottitura ridotta, perché quell'altezza in cima
   alla pagina la paga la griglia del prospetto. Dall'08/08/2026 non è più un riquadro
   azzurro appoggiato sul blu ma una fascia della stessa intestazione, distinta dalle
   vicine per il tono del fondo e non da un filetto. */
.perimetro-barra .perimetro-tit { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--a-700); }
.perimetro-barra label { display: flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--a-900); }
.perimetro-barra select {
  padding: 6px 10px; border: 1px solid var(--n-300); border-radius: var(--raggio-xs);
  font-size: var(--t-s); font-family: inherit; max-width: 260px; background: var(--n-0);
}
.perimetro-barra .hint { margin: 0; color: var(--n-600); }
/* La barra nell'intestazione: incassata fra le altre due fasce — niente angoli
   arrotondati, niente margine sotto e imbottitura ridotta, perché quell'altezza in cima
   alla pagina la paga la griglia del prospetto. Dall'08/08/2026 non è più un riquadro
   azzurro appoggiato sul blu ma una fascia della stessa intestazione, distinta dalle
   vicine per il tono del fondo e non da un filetto.
   Le tre etichette stanno quindi su fondo BLU e devono restare leggibili: queste righe
   vanno DOPO quelle generiche qui sopra, che hanno la stessa specificità — scritte prima
   perdevano il confronto e le etichette uscivano blu scuro su blu, cioè invisibili. */
.perimetro-topbar {
  background: rgba(255,255,255,.07);
  border: 0; border-radius: 0;
  margin: 0; padding: 5px 20px; gap: 6px 16px;
}
.perimetro-topbar .perimetro-tit { color: var(--a-200); }
.perimetro-topbar label { color: #dbeafe; font-size: var(--t-xs); }
.perimetro-topbar select { padding: 5px 8px; font-size: var(--t-xs); min-height: 30px; }
.perimetro-topbar .hint { color: #bfdbfe; }
/* Compilazione rapida delle attività: sta nella barra dei comandi del prospetto (fino
   al 08/08/2026 era in coda alla barra del perimetro, che è salita nell'intestazione).
   Il pulsante prende il verde dei comandi dell'app. */
#pian-att-fill {
  display: flex; align-items: center; gap: 8px;
}
/* «Compila attività» è un titolino DENTRO il gruppo «Sul mese», non una seconda
   intestazione: col tono del perimetro competeva con l'etichetta del gruppo stesso. */
#pian-att-fill .perimetro-tit {
  color: var(--n-500); font-size: var(--t-xs);
  text-transform: none; letter-spacing: 0; font-weight: 600;
}
#pian-att-fill select { font-size: var(--t-xs); padding: 5px 8px; max-width: 220px;
  min-height: 30px; border: 1px solid var(--n-300); border-radius: var(--raggio-xs);
  background: var(--n-0); font-family: inherit; }
/* «Compila le celle vuote» era VERDE PIENO, l'unico verde comando di tutta l'app: un
   colore usato una volta sola non è un significato, è un residuo. È un pulsante normale
   — riempire le celle rimaste vuote non conclude niente. */
#pian-att-fill button { font-size: var(--t-xs); padding: 6px 11px; min-height: 30px; }

/* Caselle delle qualifiche per cui un'attività è prevista. */
.poas-qualifiche { display: inline-flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.poas-qualifiche label { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; }

/* Scheda "Copertura": una card per fascia oraria, con dentro la tabella dei
   requisiti (professioni × tipo di giorno) e la riga dell'antincendio. */
.cop-fascia { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.cop-fascia-testa { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.cop-fascia-testa label { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; }
.cop-fascia-testa input { padding: 6px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
.cop-fascia-testa .del { margin-left: auto; }
/* Tabella dei requisiti: larghezza al contenuto (non 100% come le altre data-table),
   altrimenti tre colonne di numeri si spalmano su tutto lo schermo. */
.cop-tabella { width: auto; min-width: 620px; max-width: 900px; margin-bottom: 8px; }
.cop-tabella select { padding: 5px 7px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; min-width: 230px; }
.cop-tabella th:first-child, .cop-tabella td:first-child { width: 100%; }
/* Caselle dei numeri attesi: strette e centrate, vuoto = nessun controllo. */
.cop-num { text-align: center; }
.cop-num input { width: 64px; padding: 5px; border: 1px solid #d1d5db; border-radius: 6px; text-align: center; font-size: 14px; }
/* Riga dell'antincendio: staccata dalle professioni (è un conteggio a parte). */
.cop-riga-ai td { background: #fff7ed; border-top: 2px solid #e5e7eb; }
.cop-riga-ai .hint { display: inline; margin: 0; }
.cop-titolo { margin: 22px 0 4px; font-size: 16px; }
/* Controlli per attività: dentro il blocco del turno, un riquadro per professione
   (indaco tenue come la banda nel prospetto), con sotto la tabella delle attività. */
.cop-att-prof { border-left: 3px solid #a5b4fc; padding: 8px 0 4px 12px; margin: 0 0 10px; }
.cop-att-prof-testa { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.cop-att-prof-testa label { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; }
.cop-att-prof-testa .del { margin-left: auto; }
/* I comandi ANNIDATI dell'editor: aggiungono una riga dentro un blocco che c'è già, e
   sono più piccoli apposta (terzo livello). Il peso e il colore glieli dà `.ghost`; qui
   c'è solo la misura ridotta. Chi aggiunge un BLOCCO intero («+ Aggiungi una fascia
   oraria») non ha invece nessuna regola sua: è un pulsante normale come tutti gli altri,
   e lo veste `.editor button`. */
.cop-att-prof > button { padding: 6px 11px; min-height: 30px; border-radius: var(--raggio-xs); font-size: var(--t-xs); }
.cop-fascia > button { padding: 6px 12px; min-height: 30px; border-radius: var(--raggio-xs); font-size: var(--t-xs); }

/* POAS › Turni: elenco a spunte dei tipi di turno della sezione, in due gruppi
   (in presenza / assenze). L'orario sta in colonna perché è ciò che distingue due
   turni con la stessa sigla. */
.szt-gruppo { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.szt-gruppo h4 { margin: 0 0 2px; font-size: 15px; }
.szt-gruppo .hint { margin: 0 0 10px; }
.szt-conta { margin-left: 8px; font-weight: 400; font-size: 13px; color: #64748b; }
.szt-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 7px 18px; }
.szt-voce { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.szt-orario { color: #475569; font-variant-numeric: tabular-nums; white-space: nowrap; }
.szt-doppia { background: #fef3c7; color: #92400e; border-radius: 4px; padding: 1px 6px; font-size: 12px; }
.szt-vuota { color: #b45309; }
/* I comandi dei turni della sezione non hanno più nessuna regola: «Salva i turni» è
   `.primario` nel markup, gli altri tre (annulla, spunta tutto, spunta niente) sono
   `.ghost`, e li veste `.toolbar button` come in ogni altra schermata. */

/* POAS › Pronta disponibilità: l'editor riusa le classi della scheda Copertura
   (`.cop-fascia`, `.cop-tabella`, `.cop-num`), perché sono le stesse caselle con la
   stessa convenzione. I comandi non hanno nessuna regola loro: li vestono
   `.toolbar button` e `.editor button`.
   La sigla della fascia: maiuscola come si scrive e come finisce in cella. */
#pd-editor input[data-campo="sigla"] { text-transform: uppercase; }

/* Sezioni e card. La griglia si adatta da sola alla larghezza della finestra. */
.home-sez { margin-bottom: 22px; }
.home-sez h3 {
  margin: 0 0 10px; font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase;
  color: var(--n-500); font-weight: 700;
}
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.home-card {
  display: flex; align-items: flex-start; gap: 12px; position: relative;
  background: var(--n-0); border: var(--bordo); border-radius: var(--raggio); padding: 14px;
  cursor: pointer; box-shadow: var(--ombra-1);
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.home-card:hover { border-color: var(--a-200); box-shadow: var(--ombra-2); transform: translateY(-2px); }
.home-card-icona { font-size: 24px; line-height: 1; }
.home-card-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-card-testo b { font-size: var(--t-m); color: var(--n-900); }
.home-card-testo span { font-size: var(--t-xs); color: var(--n-500); }
/* Card "in preparazione": visibile come promemoria, ma spenta. */
.home-card.prep { background: var(--n-50); border-style: dashed; box-shadow: none; }
.home-card.prep .home-card-icona, .home-card.prep .home-card-testo b { opacity: .55; }
.home-tag {
  align-self: flex-start; margin-top: 2px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; background: #e2e8f0; color: #475569; padding: 2px 6px; border-radius: 4px;
}
/* Modalità "Personalizza": comandi ☆/✕ e card nascoste in trasparenza. */
.home-card.nascosta { opacity: .45; }
.home-card-cmd { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; }
.home-card-cmd button {
  border: 0; background: var(--n-100); color: var(--n-600); border-radius: 5px;
  width: 24px; height: 24px; cursor: pointer; font-size: var(--t-xs); line-height: 1;
}
.home-card-cmd button:hover { background: var(--n-200); color: var(--a-700); }

/* Sezione "Oggi". */
.home-oggi { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin-bottom: 22px; }
.oggi-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.oggi-head h3 { margin: 0; font-size: 16px; }
.oggi-fine { color: #b45309; font-weight: 600; }
.oggi-fasce { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.oggi-fascia { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; background: #f9fafb; }
.oggi-fascia-tit { font-size: 13px; font-weight: 700; color: #334155; margin-bottom: 8px; }
.oggi-ops { display: flex; flex-direction: column; gap: 5px; }
.oggi-op {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e5e7eb; border-left: 3px solid #1e3a8a;
  border-radius: 6px; padding: 4px 8px; font-size: 12px;
}
/* Il filetto a sinistra del nome dice la PROFESSIONE, secondo la legenda unica
   dell'app (07/08/2026, vedi `classeProfessione` in app.js). Il colore lo mette la
   classe `.prof-*`, che qui vale sul filetto ma è pensata per ogni contrassegno
   colorato accanto a un nome: le tinte stanno in un posto solo. Prima di questa data
   il filetto diceva altro (blu/verde acqua = gruppo di qualifica, verde =
   affiancamento): l'affiancamento è tornato nel tooltip, dov'era già scritto. */
.oggi-op.prof-coord { border-left-color: #1e3a8a; }   /* coordinatore: blu */
.oggi-op.prof-inf   { border-left-color: #0d9488; }   /* infermiere: verde acqua */
.oggi-op.prof-ost   { border-left-color: #ec4899; }   /* ostetrica: rosa */
.oggi-op.prof-aus   { border-left-color: #38bdf8; }   /* ausiliario: azzurro */
.oggi-op.prof-oss   { border-left-color: #eab308; }   /* OSS (anche f.c.): giallo */
.oggi-op.prof-altro { border-left-color: #dc2626; }   /* ogni altra professione: rosso */
.oggi-op i { color: #6b7280; font-size: 11px; }
.oggi-sigla { background: #eef2ff; color: #1e3a8a; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.oggi-sigla.cambio { color: #b91c1c; background: #fee2e2; }  /* cambio turno: sigla rossa */
.oggi-ora { color: #6b7280; }
.oggi-vuoto { color: #9ca3af; font-size: 12px; font-style: italic; }
.oggi-extra { margin-top: 12px; font-size: 12px; color: #475569; }
.oggi-extra p { margin: 4px 0; }
.oggi-extra summary { cursor: pointer; color: #1e3a8a; margin-top: 6px; }

/* ---------------------------------------------------------------- Ferie */

/* Tabella delle causali: molte colonne strette e modificabili. Scorre in orizzontale
   dentro .table-scroll tenendo ferma la prima colonna (il nome della causale), come
   l'anagrafica dipendenti. */
#causali-table input, #causali-table select { padding: 3px 4px; font-size: 13px; }
#causali-table .ca-nome { min-width: 260px; }
#causali-table .ca-note { min-width: 300px; }
#causali-table .ca-quantita { width: 74px; }
#causali-table th, #causali-table td { white-space: nowrap; }
/* I due comandi sotto la tabella delle causali. Il div dichiara ora anche `.toolbar`:
   senza, «Salva causali» non aveva nessuna regola addosso e usciva con l'aspetto grezzo
   del browser — lo stesso difetto del «🎲 Proponi» e dei tre «Elimina fascia». */
.causali-azioni { gap: 8px; margin-top: 10px; }
.ferie-blu { color: #2563eb; font-weight: 600; }
/* Campione dell'anello blu delle richieste testuali, usato nel testo di aiuto della
   vista Richieste (stesso colore/stile dell'anello sulla cella .rich-nota). */
.rich-blu {
  display: inline-block; box-shadow: inset 0 0 0 2px #2563eb; color: #2563eb;
  padding: 0 5px; border-radius: 3px; font-weight: 600;
}
.ferie-rich-form { align-items: flex-start; flex-direction: column; gap: 10px; }
/* Testa del form: la tendina dell'operatore e, a destra, quante settimane sono spuntate. */
.ferie-form-testa { display: flex; align-items: center; gap: 14px; width: 100%; flex-wrap: wrap; }
.ferie-form-testa select { min-width: 260px; }
.ferie-form-conta { font-size: 13px; color: #94a3b8; }
.ferie-form-conta.attivo { color: #1e3a8a; font-weight: 600; }
.ferie-form-piede { display: flex; gap: 8px; }
/* Selettore settimane: gruppi per periodo, checkbox compatte. */
.ferie-weeks { display: flex; flex-wrap: wrap; gap: 14px; width: 100%; margin: 0; }
.ferie-wgrp { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; background: #f8fafc; min-width: 168px; }
.ferie-wgrp-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-weight: 700; font-size: 12px; color: #334155; margin-bottom: 6px;
  padding-bottom: 5px; border-bottom: 1px solid #e2e8f0;
  text-transform: uppercase; letter-spacing: .03em;
}
/* "3/9": settimane ancora libere sul totale del periodo. */
.ferie-wgrp-n { font-weight: 600; color: #94a3b8; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ferie-wchk { display: block; font-size: 13px; padding: 2px 4px; white-space: nowrap; cursor: pointer; border-radius: 4px; }
.ferie-wchk:hover { background: #eef2ff; }
.ferie-wchk input { margin-right: 5px; }
/* Settimana già richiesta: spuntata e bloccata, con il segno di come sta messa. */
.ferie-wchk.gia { color: #94a3b8; cursor: default; }
.ferie-wchk.gia:hover { background: transparent; }
.ferie-wchk-gia { color: #1e40af; font-weight: 700; }

/* Targhette dei contatori in cima alle schede Richieste e Riepilogo. */
.ferie-stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 14px; }
.ferie-stat {
  min-width: 104px; padding: 9px 14px; background: #fff;
  border: 1px solid #e5e7eb; border-left: 3px solid #cbd5e1; border-radius: 8px;
}
.ferie-stat-n { font-size: 21px; font-weight: 700; color: #0f172a; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ferie-stat-l { font-size: 12px; color: #64748b; margin-top: 2px; }
.ferie-stat.ok { border-left-color: #2563eb; }
.ferie-stat.attesa { border-left-color: #f59e0b; }
.ferie-stat.rosso { border-left-color: #dc2626; }
.ferie-stat.rosso .ferie-stat-n { color: #b91c1c; }
.ferie-stat.muto { background: #f8fafc; }
.ferie-stat.muto .ferie-stat-n { color: #64748b; }

/* Testa dell'elenco richieste: titolo a sinistra, filtri a destra. */
.ferie-elenco-testa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 18px 0 8px;
}
.ferie-elenco-testa h3 { margin: 0; }
.ferie-filtri { display: inline-flex; gap: 12px; align-items: center; font-size: 13px; color: #475569; }
.ferie-filtri select { padding: 4px 8px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }
/* Pulsantini fuori dalle tabelle (il «Salva» di una riga che si compila, i comandi di un
   riquadro). Le azioni di riga delle tabelle NON sono più `.mini`: hanno il loro blocco,
   più sopra. */
.mini {
  padding: 5px 11px; font-size: var(--t-xs); min-height: 30px;
  border: 1px solid var(--n-300); background: var(--n-0); color: var(--n-700);
  border-radius: var(--raggio-xs); cursor: pointer; font-family: inherit;
}
.mini:hover { background: var(--n-50); border-color: var(--n-400); }
.mini.ghost { background: var(--n-100); border-color: var(--n-200); color: var(--n-600); }
/* `.mini.primario` non c'è più: era l'«Autorizza» delle ferie, che ora prende il peso
   normale come ogni azione principale di riga (vedi `.data-table button.rilievo`). Un
   pulsantino blu pieno ripetuto su venti righe non è un'azione che conclude. */
.ferie-badge { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: #fef3c7; color: #92400e; }
.ferie-badge.ok { background: #dbeafe; color: #1e40af; }

/* Elenco richieste: colonne larghe, riga di stacco al cambio di operatore.
   ATTENZIONE alle larghezze in PERCENTUALE qui dentro: `.table-scroll .data-table`
   impone `min-width: max-content`, e su una tabella `table-layout: fixed` con colonne in
   percentuale quel calcolo esplode — la tabella diventava larghissima, scorreva in
   orizzontale e con la prima colonna congelata restava a video il solo nome
   dell'operatore (02/08/2026, segnalato dall'utente). Quindi: niente `fixed`, niente
   percentuali, `min-width` azzerato e colonne strette misurate in `ch`; la colonna del
   nome non ha larghezza e si prende tutto lo spazio che avanza. */
.table-scroll .ferie-rich-tab { width: 100%; min-width: 0; table-layout: auto; }
/* Cinque colonne su un monitor largo diventano illeggibili (il nome a sinistra e le
   azioni a un palmo di distanza): l'elenco si ferma a una larghezza da leggere. */
.ferie-rich-scroll { max-width: 1080px; }
.ferie-rich-tab .c-per { width: 13ch; }
.ferie-rich-tab .c-set { width: 15ch; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ferie-rich-tab .c-stato { width: 14ch; }
.ferie-rich-tab .c-az { width: 21ch; white-space: nowrap; }
.ferie-rich-tab td, .ferie-rich-tab th { padding: 8px 12px; }
.ferie-rich-tab tr.ferie-op-inizio td { border-top: 2px solid #e2e8f0; }
.ferie-rich-tab tbody tr:hover { background: #f8fafc; }
/* Etichetta del periodo: un colore per periodo, così l'occhio li separa nell'elenco. */
.ferie-per-tag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; background: #f1f5f9; color: #475569; }
.ferie-per-tag.per-primaverile { background: #dcfce7; color: #166534; }
.ferie-per-tag.per-estivo { background: #ffedd5; color: #9a3412; }
.ferie-per-tag.per-autunnale { background: #ede9fe; color: #5b21b6; }
/* Riepilogo: celle rosse quando si sfora il tetto; coordinatori a parte (grigi). */
.ferie-riep td, .ferie-riep th { text-align: left; }
.ferie-riep .ferie-wk { white-space: nowrap; font-variant-numeric: tabular-nums; color: #475569; }
.ferie-rosso { background: #fee2e2; }
.ferie-coord { color: #94a3b8; font-style: italic; }
.ferie-avviso { color: #b91c1c; font-size: 12px; }
/* «Non ha programmato ferie»: una nota, non un'anomalia — grigia, non rossa. */
.ferie-nota { color: #64748b; font-size: 12px; }
.ferie-op td, .ferie-op th { text-align: center; }
.ferie-op td:first-child, .ferie-op th:first-child,
.ferie-op td:last-child, .ferie-op th:last-child { text-align: left; }
/* Un blocco per sezione: il nome fa da separatore fra le griglie (compare solo
   quando le sezioni sono più d'una). */
.ferie-sez {
  margin-top: 26px; padding-bottom: 4px; border-bottom: 2px solid #e2e8f0; color: #0f172a;
}
/* Riepilogo: sotto-schede per periodo. L'aspetto è quello del secondo livello, che se
   le prende da sé perché stanno dentro un pannello: qui resta solo lo stacco. */
.ferie-subtabs { margin: 4px 0 var(--s-3); }
/* Numero di richieste sulla linguetta del periodo; ambra se ce n'è da autorizzare. */
.ferie-tab-n:not(:empty) {
  display: inline-block; margin-left: 7px; padding: 0 6px; border-radius: 9px;
  background: #e2e8f0; color: #334155; font-size: 11px; font-weight: 700;
}
.ferie-tab-n.attesa:not(:empty) { background: #fef3c7; color: #92400e; }
.ferie-tab.attivo .ferie-tab-n:not(:empty) { background: #ffffff33; color: #fff; }
.ferie-tab.attivo .ferie-tab-n.attesa:not(:empty) { background: #fbbf24; color: #452c05; }
/* Rimando dalle Richieste individuali alle richieste di ferie (l'altro registro). */
/* Riga di testo, non flex: con `gap` gli spezzoni di frase si staccavano fra loro. */
.rich-rimando {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px;
  padding: 9px 12px; margin: 0 0 12px; color: #1e3a8a; font-size: 14px; line-height: 1.7;
}
.rich-rimando .mini { margin-left: 8px; }
/* Rimando quando la schermata aperta è vuota ma le richieste stanno in un altro periodo. */
.ferie-rimando {
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
  padding: 9px 12px; margin: 4px 0 14px; color: #78350f;
}
.ferie-sub-h { margin: 22px 0 8px; color: #0f172a; }
.ferie-sub-h .hint { font-weight: 400; }
/* La colonna del periodo su cui si sta guardando, nel riquadro per operatore. */
.ferie-col-attiva { background: #eff6ff; }
th.ferie-col-attiva { background: #dbeafe; }
/* Il rosso del tetto superato vince sull'evidenza della colonna: è un problema
   accertato, l'evidenza è solo un aiuto alla lettura. */
td.ferie-rosso { background: #fee2e2; }
.ferie-riep .ferie-vuoto { color: #cbd5e1; }

/* ------------------------------------------- Fascicolo del dipendente */
/* Campi che occupano tutta la riga del form (descrizione, azione, note). Vale sia
   per le <label> sia per i blocchi <div> che ne raggruppano più d'uno (indicatori,
   destinatari degli obiettivi). */
.card-form .campo-lungo { flex-basis: 100%; display: block; }
.card-form .campo-lungo input[type="text"] { width: 100%; }
/* Fonte ed esito: testo discorsivo, servono più larghi del default. */
#fasc-fonte, #val-esito { min-width: 240px; }

/* Terna Presidio › Struttura › Sezione (dal 07/08/2026): le tre tendine a cascata che
   hanno sostituito la tendina unica con l'elenco di tutte le sezioni per esteso. Riga
   intera e tendine larghe, perché i nomi delle strutture sono lunghi ("SC Anestesia e
   Rianimazione") e troncati non si distinguono fra loro. Su schermo stretto vanno a
   capo da sole, restando nell'ordine della gerarchia. */
.terzina-poas { flex-basis: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.terzina-poas label { display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; }
/* `min-width: 0` su tendina e label è la riga che tiene le tre colonne uguali: senza,
   ognuna pretende la larghezza della sua voce più lunga ("SC Ufficio Infermieristico
   Sondalo, Tirano, Bormio e Livigno") e la Sezione finisce a capo da sola. Troncato
   resta il testo CHIUSO: aperto, il menù mostra le voci per intero. */
.terzina-poas select { flex: 1; min-width: 0; }
/* Tendina spenta: è la scheda di un operatore già in forza, dove la collocazione è la
   copia della storia di servizio e si cambia dal «Percorso». Grigia come gli altri campi
   spenti del form, non nascosta: deve restare leggibile dove la persona sta. */
.terzina-poas select:disabled { background: #f3f4f6; color: #6b7280; }
/* Pastiglia colorata del tipo di episodio: il colore distingue a colpo d'occhio
   ciò che è positivo da ciò che è critico, senza doverlo leggere. */
.fasc-tipo { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 10px; white-space: nowrap; background: #e5e7eb; color: #374151; }
.fasc-tipo.encomio { background: #dcfce7; color: #166534; }
.fasc-tipo.positiva { background: #dbeafe; color: #1e40af; }
.fasc-tipo.critica { background: #fef3c7; color: #92400e; }
/* Testi lunghi in tabella: a capo e larghezza contenuta, per non allargare la riga. */
#fasc-table td.testo, #val-table td.testo { white-space: normal; max-width: 340px; }
.data-table td.vuoto { text-align: center; color: #6b7280; font-style: italic; }

/* ---- Obiettivi individuali ---- */
/* Etichetta dei blocchi che non sono un <label> con dentro un campo solo
   (indicatori e destinatari): stesso aspetto delle altre etichette del form. */
.ob-etichetta { display: block; font-size: 13px; color: #374151; margin-bottom: 4px; }
.ob-etichetta small { color: #6b7280; font-weight: 400; }
/* Righe degli indicatori: una sotto l'altra, la "✕" attaccata al campo. */
.ob-indicatori { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ob-riga-ind { display: flex; align-items: center; gap: 6px; }
.ob-riga-ind .ob-num { color: #6b7280; font-size: 13px; min-width: 18px; text-align: right; }
.ob-riga-ind input { flex: 1; }
.ob-riga-ind button { padding: 5px 9px; min-height: 30px; line-height: 1; border: 1px solid var(--er-bordo); background: var(--n-0); border-radius: var(--raggio-xs); cursor: pointer; color: var(--er-testo); font-family: inherit; font-size: var(--t-xs); }
/* Destinatari: checkbox in colonne, raggruppati per qualifica. Riquadro con
   scorrimento, così un organico lungo non allunga il form all'infinito. */
.ob-destinatari { border: 1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; max-height: 190px; overflow-y: auto; background: #fff; }
.ob-destinatari .ob-gruppo { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; margin: 6px 0 3px; }
.ob-destinatari .ob-gruppo:first-child { margin-top: 0; }
.ob-destinatari .ob-elenco { column-width: 210px; }
.ob-destinatari label { display: block; font-size: 13.5px; padding: 1px 0; break-inside: avoid; }
.ob-destinatari input[type="checkbox"] { margin-right: 6px; }
/* In modifica il destinatario non si cambia: al posto delle caselle il nome fisso. */
.ob-destinatario-fisso { font-weight: 600; }
/* Obiettivo e indicatori in tabella: testi lunghi, vanno a capo. */
#ob-table td.testo { white-space: normal; max-width: 420px; }
#ob-table ol.ob-ind-lista { margin: 0; padding-left: 18px; }
#ob-table ol.ob-ind-lista li { padding: 1px 0; }
#ob-table td.ob-note { white-space: normal; max-width: 260px; color: #4b5563; font-size: 13px; }

/* ---- Valutazioni annuali: punteggi voce per voce ---- */
#fasc-pane-valutazioni .num { text-align: center; }
/* Compilazione: le voci a sinistra, il contesto (anno prima ed episodi) a destra.
   Sotto i 1000px il contesto scende in fondo invece di stringere le voci. */
.val-compila { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .val-compila { grid-template-columns: 1fr; } }
/* Le voci sono frasi lunghe: qui si legge tutto, niente troncamenti. */
.val-voci-table td.val-voce-testo { white-space: normal; max-width: 640px; }
.val-voci-table td.val-voto select { min-width: 70px; }
.val-voci-table td.val-delta { width: 70px; }
/* Riga di sezione (Performance individuali / Competenze / Comportamenti). */
.val-sezione th { background: #eef2ff; color: #1e3a8a; text-transform: none; font-size: 13px; }
.val-peso-sez { float: right; font-weight: 400; color: #6b7280; }
.val-su { color: #166534; font-weight: 600; }
.val-giu { color: #b91c1c; font-weight: 600; }
.val-pari { color: #9ca3af; }
.val-totale { margin: 10px 0 4px; font-size: 16px; }
.val-totale .hint-inline { color: #6b7280; font-size: 13px; font-weight: 400; }
/* Colonna di contesto: quello che motiva i voti sta accanto ai voti, non altrove. */
.val-contesto .val-box { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; background: #fff; }
.val-contesto h4 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.val-contesto .vuoto { color: #9ca3af; font-style: italic; font-size: 13px; margin: 0; }
.val-pesato-prec { margin: 0; font-size: 14px; }
/* Obiettivo dell'anno nella colonna di contesto: sola lettura, non entra nel voto. */
.val-obiettivo { font-size: 13px; }
.val-contesto .ob-ind-lista { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: #4b5563; }
.val-obiettivo-link { margin: 6px 0 0; font-size: 12px; }
.val-episodio { font-size: 13px; padding: 6px 0; border-top: 1px dashed #e5e7eb; }
.val-episodio:first-of-type { border-top: 0; }
.val-episodio-data { color: #6b7280; margin-left: 6px; font-size: 12px; }
/* Storico del singolo: voci in riga, anni in colonna. */
.val-storico-table td.val-voce-testo { white-space: normal; max-width: 520px; }
.val-storico-table td.val-su { background: #dcfce7; }
.val-storico-table td.val-giu { background: #fee2e2; }
.val-totale-riga th { background: #f9fafb; color: #111827; font-size: 13px; text-transform: none; }
/* Tabella di reparto: intestazioni ruotate come sui prospetti aziendali, altrimenti
   quattordici frasi lunghe renderebbero la tabella illeggibile. */
.val-gruppo { margin: 18px 0 6px; font-size: 15px; }
.val-reparto-table th.val-voce-col { height: 170px; vertical-align: bottom; padding: 6px 4px; }
.val-reparto-table th.val-voce-col span { writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.val-reparto-table td.val-pesato { font-weight: 600; }
.val-graduatoria { margin: 8px 0 4px; }
.val-graduatoria h4 { margin: 0 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.val-graduatoria ol { list-style: none; margin: 0; padding: 0; column-width: 260px; }
.val-graduatoria li { font-size: 14px; padding: 2px 0; }
.val-pos { color: #6b7280; display: inline-block; min-width: 22px; }
/* Manutenzione delle voci: testo modificabile a tutta larghezza. */
.val-voce-input { width: 100%; min-width: 360px; }
.val-peso-input { width: 90px; }

/* ---------------------------------------- Fabbisogno annuale di ore
   Due tabelle affiancate per gruppo (ore da coprire / ore disponibili) e una
   riga di saldo che si legge da sola: verde se avanza, rossa se manca. */
.fb-gruppo { margin: 18px 0 6px; }
.fb-gruppo h3 { margin: 0 0 8px; font-size: 16px; }
.fb-tabelle { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.fb-table { min-width: 320px; flex: 1 1 380px; }
.fb-table td:not(:first-child), .fb-table th:not(:first-child) { text-align: center; white-space: nowrap; }
.fb-table tr.fb-tot td { background: #e2e8f0; font-weight: 600; }
.fb-sigla { display: inline-block; background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px; padding: 0 5px; font-size: 12px; color: #475569; }
.fb-nota { display: block; color: #6b7280; font-size: 12px; }
.fb-meno { color: #b45309; }
.fb-saldo { margin: 8px 0 0; font-size: 15px; }
.fb-saldo b { font-size: 18px; }
.fb-saldo span { color: #6b7280; font-size: 13px; }
.fb-saldo.fb-neg b { color: #dc2626; }
.fb-saldo.fb-pos b { color: #166534; }
.fb-avviso { color: #b45309; font-size: 13px; margin: 4px 0; }
.fb-controprova { margin-top: 22px; }
.fb-controprova h3 { margin: 0 0 4px; font-size: 16px; }
.fb-controprova-tab { max-width: 460px; }
/* Pannello dei parametri: ogni valore porta con sé la propria fonte. */
.fb-parametri { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; background: #f9fafb; }
.fb-param-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.fb-param { display: grid; grid-template-columns: 1fr 90px 50px; align-items: center; gap: 6px; font-size: 14px; }
.fb-param input { width: 100%; }
.fb-param .fb-unita { color: #6b7280; font-size: 13px; }
.fb-param small { grid-column: 1 / -1; color: #6b7280; font-size: 12px; line-height: 1.35; }
.fb-param-azioni { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Idoneità e limitazioni del medico competente ---- */

/* Vista Aggiornamento (formazione): le schede riusano `.lim-pane`, le righe delle
   giornate di corso stanno su una riga sola e vanno a capo sugli schermi stretti. */
.agg-giornate { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.agg-giornata {
  display: flex; flex-wrap: wrap; align-items: end; gap: 10px;
  padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc;
}
.agg-giornata label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #475569; }
/* Il ✕ che toglie una giornata: dentro `.card-form` tutti i bottoni sarebbero blu e
   pieni come «Registra partecipazione», e questo non è un comando importante. */
.agg-giornata .agg-g-del {
  margin-left: auto; background: transparent; color: #b91c1c;
  padding: 4px 8px; font-size: 15px; line-height: 1;
}
.agg-giornata .agg-g-del:hover { background: #fee2e2; }
/* Stesso motivo per «＋ Aggiungi giornata»: è un comando di servizio dentro il form. */
#agg-aggiungi-giorno {
  background: transparent; color: #1e3a8a; border: 1px dashed #94a3b8;
  padding: 5px 10px;
}
#agg-aggiungi-giorno:hover { background: #eef2ff; }
.agg-tot-tit { margin: 18px 0 6px; font-size: 15px; color: #1e3a8a; }
/* Le limitazioni nel form: una riga per voce, casella + nota del referto. Due
   colonne sopra i 900px, così l'elenco non diventa una colonna chilometrica. */
.lim-voci-tit { display: block; font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.lim-voci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
@media (max-width: 900px) { .lim-voci { grid-template-columns: 1fr; } }
/* Referto della visita, in fondo al form del giudizio: selettore file + stato. */
.lim-referto { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lim-referto input[type="file"] { font-size: 13px; }
.lim-referto .hint { line-height: 1.5; }
/* L'«Elimina» del referto è dentro un form e non in una tabella: la forma gliela dà
   `button.del`, qui resta solo l'allineamento con la riga di testo che ha accanto. */
.lim-referto button.del { vertical-align: -3px; }
.lim-voce { display: flex; align-items: center; gap: 8px; }
.lim-voce label { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; margin: 0; font-size: 13px; cursor: help; }
.lim-voce-nota { flex: 0 1 180px; font-size: 12px; }
/* Pastiglia di una limitazione nell'elenco dei giudizi. Il testo arriva dal
   referto e può essere lungo una frase intera: va a capo dentro la pastiglia
   (`white-space: normal`) invece di allargare la colonna. */
.lim-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: normal; background: #fef3c7; color: #92400e; margin: 1px 0; }
#lim-table td.testo { white-space: normal; vertical-align: top; }
/* La larghezza deve stare QUI, non sulla cella: la tabella è dentro una
   .table-scroll (`min-width: max-content`), dove un `max-width` sul <td> viene
   ignorato e la colonna si allarga finché il testo ci sta su una riga sola,
   sovrapponendosi alle colonne accanto. Un blocco a larghezza fissa dà invece
   una misura certa alla colonna. */
#lim-table .lim-lista { width: 320px; white-space: normal; }
/* Più limitazioni sullo stesso giudizio: una per riga, così si contano a colpo
   d'occhio anche quando ognuna occupa due righe di testo. */
#lim-table .lim-lista .lim-pill { display: block; }
/* Stato del giudizio: la riga scaduta si vede senza doverla cercare. */
.lim-stato { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; }
tr.lim-stato-scaduto { background: #fef2f2; }
tr.lim-stato-scaduto .lim-stato { color: #b91c1c; font-weight: 700; }
tr.lim-stato-in-scadenza { background: #fffbeb; }
tr.lim-stato-in-scadenza .lim-stato { color: #b45309; font-weight: 700; }
tr.lim-stato-futuro { color: #6b7280; }
/* Voce dell'elenco disattivata: resta leggibile ma non si sceglie più. */
tr.riga-spenta { color: #9ca3af; font-style: italic; }

/* Riquadro "Idoneità da rinnovare" in Home: compare solo se c'è qualcosa. */
.home-scadenze { background: #fff; border: 1px solid #fcd34d; border-radius: 12px; padding: 16px; margin-bottom: 22px; }
.scad-righe { display: flex; flex-wrap: wrap; gap: 8px; }
.scad-riga { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 6px 12px; cursor: pointer; font: inherit; }
.scad-riga:hover { background: #fef3c7; }
.scad-riga span { font-size: 12px; color: #92400e; }
.scad-riga.scaduta { background: #fef2f2; border-color: #fca5a5; }
.scad-riga.scaduta span { color: #b91c1c; font-weight: 600; }

/* --------------------------------------------------- Novità del programma
   Due posti, un solo aspetto: il pop-up che arriva all'ingresso dopo un
   aggiornamento e il riquadro della Home che le conserva. I tre contrassegni
   del tipo riprendono i colori già in uso nell'app — verde per ciò che nasce,
   ambra per ciò che cambia, grigio per ciò che è stato tolto — su sfondi
   tenui: sono informazioni, non allarmi. */
/* Il modale è `modal-wide` come gli altri, ma qui dentro c'è **prosa**: oltre una certa
   larghezza una riga di testo non si legge più, si scorre con gli occhi e si perde il
   segno. Le tabelle degli altri modali vogliono l'opposto, quindi il limite sta qui. */
#novita-modal .modal-box { max-width: 900px; }
.novita-corpo { max-height: 58vh; overflow-y: auto; padding-right: 6px; }
.novita-giorno { margin: 14px 0 8px; font-size: 13px; font-weight: 700; color: #6b7280;
                 text-transform: uppercase; letter-spacing: .04em; }
.novita-giorno:first-child { margin-top: 4px; }
.novita-voce { border: 1px solid #e5e7eb; border-left-width: 4px; border-radius: 10px;
               padding: 10px 14px; margin-bottom: 8px; background: #fff; }
.novita-voce.letta { opacity: .72; }
.novita-voce-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.novita-voce-testa b { font-size: 15px; }
.novita-tag { font-size: 11px; font-weight: 700; text-transform: uppercase;
              letter-spacing: .04em; border-radius: 999px; padding: 2px 9px; }
.novita-voce.tipo-nuovo { border-left-color: #34d399; }
.novita-voce.tipo-nuovo .novita-tag { background: #d1fae5; color: #065f46; }
.novita-voce.tipo-modificato { border-left-color: #fbbf24; }
.novita-voce.tipo-modificato .novita-tag { background: #fef3c7; color: #92400e; }
.novita-voce.tipo-rimosso { border-left-color: #9ca3af; }
.novita-voce.tipo-rimosso .novita-tag { background: #f3f4f6; color: #4b5563; }
.novita-testo { margin: 6px 0 0; line-height: 1.5; }
.novita-dove { margin: 6px 0 0; font-size: 12px; color: #6b7280; }
.novita-dove::before { content: "📍 "; }
/* Il riquadro in Home: stessa forma di «Idoneità da rinnovare», colore diverso
   perché è un'informazione e non una scadenza. */
.home-novita { background: #fff; border: 1px solid #bfdbfe; border-radius: 12px;
               padding: 16px; margin-bottom: 22px; }
/* In Home si vedono **tre voci** e il resto si scorre: aperte tutte e otto, il riquadro
   spingeva le card sotto la piega. Il limite esatto lo misura il JS (`misuraNovitaHome`),
   perché una voce è alta quanto il suo testo; questo è il ripiego di quando il riquadro
   non è ancora a video e non si può misurare niente. */
.home-novita .novita-corpo { max-height: 22em; margin-top: 4px; }
.home-novita-head { display: flex; align-items: center; justify-content: space-between;
                    gap: 12px; flex-wrap: wrap; }
.home-novita-head h3 { margin: 0; }
.home-novita-azioni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------- Invio e-mail
   Stessa impostazione dell'Import da file qui sotto (è la porta gemella, in
   uscita). I due blocchi della prima scheda — chi riceve e con che parole —
   sono separati da un titolo, perché sono due decisioni diverse sullo stesso
   documento e mescolarle in un form solo le farebbe leggere come una sola. */
.inv-tit { margin: 22px 0 8px; font-size: 15px; }
/* Riquadro dell'indirizzo che manca in anagrafica, dentro il modale ✉: è un'eccezione
   dentro un messaggio già pronto, quindi si stacca dal resto del form invece di
   confondersi con i campi normali. `.hidden` deve battere il `display:flex`. */
.invio-email-box { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: flex-end; background: #f8fafc; border: 1px solid #cbd5e1;
  border-radius: 8px; padding: 10px 12px; }
.invio-email-box.hidden { display: none; }
.invio-email-box .hint { flex-basis: 100%; margin: 0; }
.invio-email-box input[type="email"] { min-width: 260px; }
/* Domanda sull'ambito: stesso riquadro dell'indirizzo mancante, perché è la stessa cosa
   — qualcosa che l'app non sa e chiede invece di indovinare. La riga `.hidden` serve:
   senza, il `display: flex` qui sopra vincerebbe (stessa specificità, ma sta più giù). */
.invio-ambito-box { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 10px 16px;
  align-items: flex-end; background: #f8fafc; border: 1px solid #cbd5e1;
  border-radius: 8px; padding: 10px 12px; }
.invio-ambito-box.hidden { display: none; }
.invio-ambito-box .hint { flex-basis: 100%; margin: 0; }

/* ------------------------------------------------------- Import da file
   L'anteprima è la parte importante della schermata: sta in un riquadro suo,
   staccato dal form, per rendere evidente che è ancora tutto reversibile. */
.imp-periodo { display: inline-flex; gap: 10px; align-items: flex-end; }
.imp-periodo.hidden, .imp-periodo label.hidden { display: none; }
.imp-esito { margin-top: 14px; }
.imp-riquadro { background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 16px 18px; }
.imp-riquadro h3 { margin: 0 0 12px; font-size: 16px; }
.imp-riquadro h4 { margin: 16px 0 6px; font-size: 14px; }
.imp-riepilogo { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 12px; }
.imp-voce { display: flex; flex-direction: column; font-size: 13px; }
.imp-voce span { color: #6b7280; }
.imp-avviso { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 14px; color: #92400e; }
.imp-errore { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 8px; padding: 10px 12px; margin: 8px 0; font-size: 14px; color: #991b1b; }
.imp-elenco { margin-top: 12px; font-size: 13px; }
.imp-elenco ul { margin: 4px 0 0 18px; padding: 0; columns: 2; }
.imp-elenco-avviso { color: #92400e; }
.imp-azioni { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.imp-azioni .hint { margin: 0; }
.imp-azioni button:disabled { background: var(--n-100); border-color: var(--n-200); cursor: not-allowed; }

/* ====================================================== RICHIESTE INDIVIDUALI
   Vista a due schede (elenco / nuova richiesta) con la barra del perimetro in cima,
   la stessa della Home e del prospetto. La grafica dice due cose a colpo d'occhio:
   quante richieste aspettano una decisione, e di che genere è ciascuna riga
   (una sigla oppure un testo). Il colore forte è riservato all'attesa: una richiesta
   autorizzata non è un problema, quindi resta in tono neutro. */

/* Contatori in coda ai filtri: "3 da decidere · 12 autorizzate". */
.rich-conta { display: inline-flex; gap: 8px; align-items: center; }
.rich-conta-v {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid #e2e8f0; background: #f8fafc; color: #475569;
}
.rich-conta-v b { font-variant-numeric: tabular-nums; font-size: 13px; }
.rich-conta-v.attesa { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.rich-conta-v.ok { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.rich-conta-v.muto { color: #94a3b8; }

/* Righe dell'elenco: filetto a sinistra col colore dello stato (ambra = da decidere),
   e le righe già autorizzate in tono più quieto. */
.rich-tab tbody tr.rich-riga td:first-child { border-left: 3px solid transparent; }
.rich-tab tbody tr.rich-riga.attesa td:first-child { border-left-color: #f59e0b; }
.rich-tab tbody tr.rich-riga.ok td:first-child { border-left-color: #bfdbfe; }
.rich-tab tbody tr.rich-riga:hover td { background: #f8fafc; }
.rich-tab td.rich-op { font-weight: 600; color: #0f172a; }
.rich-tab td.rich-periodo { font-variant-numeric: tabular-nums; }
.rich-tab .rich-freccia { color: #94a3b8; }
.rich-tab .rich-gg { color: #64748b; font-size: 12px; margin-left: 4px; }
.rich-tab td.rich-oggetto { max-width: 420px; white-space: normal; }
.rich-tab .rich-nome-turno { color: #475569; font-size: 13px; }
.rich-tab .rich-testo-libero { color: #334155; font-style: italic; }
/* I comandi sono quelli di ogni altra riga dell'app: «Autorizza» in rilievo, «Elimina»
   in rosso, entrambi disegnati dal blocco delle azioni di riga. Qui c'era un'eccezione
   che li rifaceva a colori fissi (blu pieno #1e3a8a e una pillola grigia), scritta
   quando `.data-table button` li avrebbe spogliati fino a sembrare due collegamenti:
   ora quel blocco prevede l'azione principale, e l'eccezione non serve più. */
.rich-tab td.rich-azioni { text-align: right; white-space: nowrap; }
.rich-tab td.rich-azioni button + button { margin-left: 4px; }
/* Sigla del turno: `.pill` scrive bianco, e i turni senza colore proprio sparirebbero.
   Il colore personalizzato, quando c'è, arriva inline da styleTurno e vince su questo. */
.rich-sigla {
  background: #eef2ff; color: #1e3a8a; font-weight: 700;
  border: 1px solid #c7d2fe; padding: 1px 9px;
}
/* Genere della richiesta: due targhette sobrie, così la colonna si legge di scorcio. */
.rich-chip {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.rich-chip.turno { background: #e0e7ff; color: #3730a3; }
.rich-chip.testo { background: #f1f5f9; color: #475569; }

/* Elenco vuoto: non una riga sbiadita ma un riquadro che dice dove si aggiunge. */
.rich-tab .rich-vuoto {
  padding: 34px 12px; color: #64748b;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.rich-vuoto-ico { font-size: 26px; opacity: .55; }
.rich-tab .rich-vuoto b { color: #334155; font-weight: 600; }
.rich-tab .rich-vuoto span:last-child { font-size: 13px; }

/* Form della scheda "Nuova richiesta": due righe di campi e il pulsante staccato,
   invece di una fila unica che andava a capo dove capitava. */
.rich-form { flex-direction: column; align-items: stretch; gap: 12px; }
.rich-riga-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
/* `:not(.hidden)`: il campo Testo e quello Turno si scambiano di posto nascondendosi,
   e un semplice `display:flex` qui vincerebbe sul `.hidden` generale, tenendoli a video
   tutti e due. */
.rich-riga-form label:not(.hidden) { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #334155; }
.rich-riga-form select { max-width: 320px; }
.rich-testo-lungo { flex: 1; min-width: 320px; }
.rich-testo-lungo input { flex: 1; }
.rich-azioni-form {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border-top: 1px solid #f1f5f9; padding-top: 12px;
}
.rich-azioni-form .hint { margin: 0; }

/* Assenze lunghe: chi è fuori dal reparto (contenitore della Direzione).
   Il pallino verde dice "in corso" senza doverlo leggere: chi è tornato resta in
   elenco come storia, ma non è più un'assenza da tenere d'occhio. */
.ass-in-corso { display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #ecfdf5; color: #065f46; border: 1px solid #6ee7b7; font-size: 12px;
  white-space: nowrap; }
#ass-table td.azioni { white-space: nowrap; }

/* Percorso di servizio (ricostruzione della carriera). Il tratto passato FUORI dal
   reparto — assenza lunga, comando — si distingue a colpo d'occhio dagli altri: nella
   sequenza è il momento in cui la persona non era in forza a nessun reparto. Fondo
   neutro e non rosso: non è un problema, è un fatto (regola «Il rosso solo su un
   problema accertato»). */
#car-table tr.car-fuori td { background: #f8fafc; color: #475569; font-style: italic; }
/* Le irregolarità della sequenza (buchi, sovrapposizioni, carriera non registrata):
   un avviso da leggere, non un errore che blocca. */
.car-anomalie { margin: 10px 0; padding: 8px 12px; border-radius: 8px;
  background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; font-size: 13px; }
.car-anomalie ul { margin: 4px 0 0; padding-left: 20px; }
#car-riepilogo .hint { margin: 6px 0 2px; }
/* La tendina del reparto porta il ramo per esteso (Presidio › Struttura › Sezione) e
   senza un tetto si prende tutta la riga, mandando a capo i due pulsanti di stampa: a
   capo deve andare semmai l'informazione, non il comando. */
#org-sezione { max-width: 380px; }

/* Calendario per attività: il modale è solo il form di scelta (area di lavoro, mese,
   anno) e non ha uno stile suo. Dal 05/08/2026 «Genera PDF» apre il PDF in una scheda
   nuova: l'anteprima a schermo — tabelle, colori dei controlli, pulsante «Salva PDF» —
   non c'è più, e con lei le sue regole (`.calatt-tab`, `#calatt-salva`, la larghezza
   `.modal-largo`). #calatt-esito resta per il solo messaggio di popup bloccato. */

/* ------------------------------------------------------- Estrazione IRIS */
/* La riga di riepilogo della finestrella: normalmente è un `hint` grigio col conto
   delle righe, diventa ambra quando l'estrazione NON si può fare (matricola mancante,
   nessuna riga, sezione non scelta). Ambra e non rosso: non è un errore del dato, è
   qualcosa che manca ancora — e il pulsante accanto è già spento. */
#iris-riepilogo.iris-blocco { color: #b45309; font-weight: 600; }

/* ---- Accesso (login) ----
   Chi sta usando l'app, in fondo alla barra: `margin-left:auto` lo spinge a destra, e
   perché funzioni il <nav> deve occupare la larghezza rimasta. Una delle due parti è
   sempre nascosta — il nome quando si è collegati, "Accedi" quando no. */
.topbar nav { flex: 1; }
.topbar-utente { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.topbar-nome {
  color: #fff; font-size: 14px; font-weight: 600; padding: 8px 4px 8px 10px;
  display: flex; align-items: center; gap: 6px; cursor: default;
}
.topbar-nome::before { content: "👤"; font-weight: 400; }
#utente-box { display: flex; align-items: center; gap: 6px; }
#utente-box.hidden, #btn-accedi.hidden { display: none; }

/* Il form del modale di accesso: due campi in colonna, larghi quanto la finestrella. */
#accesso-form label { display: block; font-size: 14px; color: #334155; margin-bottom: 12px; }
#accesso-form input {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
  border: 1px solid #d1d5db; border-radius: 6px; font-size: 15px;
}
/* Il messaggio di errore sta DENTRO la finestrella e non nel toast: chi sbaglia la
   password deve leggerlo accanto ai campi, non in un angolo dello schermo che sparisce
   dopo tre secondi. */
.accesso-errore {
  background: #fee2e2; border: 1px solid #fecaca; color: #991b1b;
  border-radius: 6px; padding: 8px 10px; font-size: 14px; margin-bottom: 10px;
}
.accesso-errore.hidden { display: none; }

/* ---- Utenti e permessi (vista `utenti`) ----
   La tabella dei permessi è 22 righe × 2 caselle: senza le bande dei gruppi si legge
   come un muro. I gruppi sono gli stessi della Home, così le schermate si cercano nello
   stesso ordine in cui si è abituati a vederle. */
.ute-testa {
  background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #1e3a8a;
  border-radius: 8px; padding: 10px 14px; margin-bottom: 14px;
}
.ute-testa h3 { margin: 0 0 4px; font-size: 17px; }
.ute-testa .ute-sotto { font-size: 13px; color: #475569; }
.ute-testa .ute-sotto b { color: #1f2937; }
/* Il contrassegno di stato: verde chi entra, grigio chi è sospeso, ambra chi non ha
   ancora una password (esiste ma non può entrare — è uno stato a sé, non un guasto). */
.ute-stato { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ute-stato.attivo { background: #dcfce7; color: #166534; }
.ute-stato.sospeso { background: #e2e8f0; color: #475569; }
.ute-stato.senza-password { background: #fef3c7; color: #92400e; }

.ute-barra-profilo { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ute-barra-profilo label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
/* «Applica profilo» non ha più una regola sua: era blu pieno, ma **riempie** le 44
   caselle e non salva niente — quello che conclude, lì, è «Salva i permessi». Il div
   dichiara ora anche `.toolbar`, che è quello che è: da lì prende il peso normale.
   Resta qui il solo allineamento in basso, perché accanto ai pulsanti c'è una tendina
   con l'etichetta sopra. */
.ute-conta { font-size: 13px; color: #475569; padding-bottom: 6px; }

/* Le due griglie — quella di un account e quella di un modello (08/08/2026) — sono la
   stessa cosa e si vestono uguale: gli stessi selettori valgono per entrambe. */
table#ute-permessi-table td.ute-casella,
table#ute-prof-table td.ute-casella { text-align: center; }
table#ute-permessi-table tr.ute-gruppo td,
table#ute-prof-table tr.ute-gruppo td {
  background: #e0e7ff; font-weight: 700; color: #1e3a8a; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
}
/* La riga della schermata che governa gli account: si distingue perché toglierla è
   l'unico errore da cui non ci si riprende dall'app. */
table#ute-permessi-table tr.ute-riga-utenti td:first-child::after,
table#ute-prof-table tr.ute-riga-utenti td:first-child::after {
  content: " ⚠"; color: #b45309;
}

/* La testata di un modello: il nome e i due poteri che nessuna casella concede. I bolli
   sono etichette, non comandi — si leggono e basta —, e quello dell'amministratore è più
   marcato degli altri perché è il solo che dà potere invece di toglierne. */
.ute-prof-nome { font-size: 17px; font-weight: 600; color: #1f2937; margin-bottom: 4px; }
.ute-bollo {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px;
  font-weight: 600; background: #e2e8f0; color: #475569; vertical-align: middle;
}
.ute-bollo.ute-bollo-forte { background: #fef3c7; color: #92400e; }
/* I comandi del modello stanno in fondo alla griglia, coi due distruttivi in coda: il
   foglio di stile non li spegne, ma l'ordine dice quali si premono per sbaglio. */
#ute-pane-profili .toolbar-estremi button { margin-left: 6px; }

/* L'anteprima del perimetro: quali sezioni risultano davvero dalle righe scritte sopra.
   È la parte che rende configurabile una cosa altrimenti astratta — «ambito
   Territoriale» non dice niente finché non si leggono i nomi. */
.ute-anteprima {
  margin-top: 10px; padding: 10px 14px; border-radius: 8px;
  background: #f8fafc; border: 1px solid #e2e8f0; font-size: 13px;
}
.ute-anteprima .ute-anteprima-tit { font-weight: 600; color: #1f2937; margin-bottom: 4px; }
.ute-anteprima ul { margin: 4px 0 0; padding-left: 20px; columns: 2; }
.ute-anteprima li { color: #475569; }
/* Nessuna sezione NON è un errore: è il default di un account appena creato. Ambra e
   non rosso, perché il rosso sta solo su un problema accertato. */
.ute-anteprima.vuoto { background: #fffbeb; border-color: #fde68a; }
.ute-anteprima.tutto { background: #ecfdf5; border-color: #a7f3d0; }


/* Il pulsante che salva le 44 caselle sta fuori da un form (la tabella non è un form) e
   per questo aveva una regola sua, scritta prima della tavolozza: blu `#1e3a8a`, senza
   bordo, con angoli e corpo diversi da tutti gli altri — l'ultimo blu dell'app che non
   era quello della tavolozza. Ora sta in una `.toolbar` ed è `.primario` come ogni altro
   pulsante che conclude. */
/* Il perimetro non ha più un pulsante suo: la riga si cancella con l'«Elimina» rosso di
   tutte le altre tabelle. L'eccezione che stava qui («Togli», bordato a colori fissi)
   nasceva perché `.data-table button` lo avrebbe fatto sembrare un collegamento — ma da
   quando `.del` è un peso vero quel rischio non c'è, e il pulsante non deve essere
   diverso solo perché sta in questa schermata. */

/* ------------------------------------------------- Schermate in sola lettura (fase 4)
   Chi può leggere una schermata ma non scriverci non ne vede i comandi: sparire e non
   restare grigi, come le card della Home (decisione dell'utente del 07/08/2026).
   La classe la mette `applicaPermessiScrittura()` sulla sezione della vista e sui modali
   che dichiarano `data-vista`; qui sotto c'è tutto il resto.

   Il selettore è ROVESCIATO: sparisce ogni comando TRANNE quelli marcati `cmd-lettura`
   (a mano, o d'ufficio per le schede e le ✕ dei modali — vedi `marcaComandiDiLettura`).
   Così un comando che scrive e che è sfuggito alla marcatura sparisce comunque, e la
   dimenticanza al più fa sparire un pulsante di consultazione: un difetto che si vede.
   Vale anche per i pulsanti che il JS disegna dopo, perché è il foglio di stile a
   deciderlo e non una funzione da richiamare a ogni tabella. */
.sola-lettura button:not(.cmd-lettura),
.sola-lettura a.btn:not(.cmd-lettura),
.sola-lettura input[type="submit"]:not(.cmd-lettura),
.sola-lettura .card-form:not(.cmd-lettura) { display: none !important; }

/* I campi dentro una TABELLA sono quasi sempre una modifica in blocco (le 44 caselle dei
   permessi, le causali, i requisiti di copertura): senza il pulsante «Salva» resterebbero
   spuntabili a vuoto, e chi li tocca crederebbe di aver cambiato qualcosa. I filtri —
   che stanno nelle barre dei comandi, fuori dalle tabelle — restano invece attivi:
   filtrare è una lettura. */
.sola-lettura table input,
.sola-lettura table select,
.sola-lettura table textarea { pointer-events: none; opacity: .55; }

/* Il prospetto in sola lettura: le celle non si aprono (il controllo vero è in
   `onGridClick`/`onGridContext`), e qui si toglie il cursore a mano, che prometterebbe
   un clic che non fa niente. */
.sola-lettura td.day, .sola-lettura td.att-cell, .sola-lettura td.ai-cell,
.sola-lettura td.prest-turno, .sola-lettura td.prest-att { cursor: default; }

/* ---- L'interruttore dell'accesso obbligatorio (in cima a «Utenti e permessi»)
   Due stati e due colori: spento è ambra (l'app è aperta a chiunque — non è un errore,
   è lo stato in cui i login sono stati consegnati), acceso è verde. Il riquadro dice
   sempre CHI saprebbe rientrare: è l'informazione che serve prima di premere. */
.ute-obbligo {
  margin: 0 0 14px; padding: 12px 16px; border-radius: 8px; border: 1px solid #e2e8f0;
}
.ute-obbligo p { margin: 6px 0; }
.ute-obbligo .ute-obbligo-tit { font-size: 15px; font-weight: 600; color: #1f2937; }
.ute-obbligo.spento { background: #fffbeb; border-color: #fde68a; }
.ute-obbligo.acceso { background: #ecfdf5; border-color: #a7f3d0; }
.ute-obbligo button { margin-top: 8px; }
.ute-obbligo button:disabled { opacity: .5; cursor: not-allowed; }
.ute-obbligo-avviso {
  margin-top: 8px; padding: 8px 12px; border-radius: 6px;
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 13px;
}

/* I blocchi in corso (freno ai tentativi ripetuti). Ambra come la fascia del registro
   sospeso, e per la stessa ragione: non è un guasto, è una protezione che ha funzionato —
   il rosso direbbe «errore» su una cosa andata come doveva. */
.ute-blocchi {
  margin: 0 0 14px; padding: 12px 16px; border-radius: 8px;
  background: #fffbeb; border: 1px solid #fde68a;
}
.ute-blocchi .ute-blocchi-tit { font-size: 15px; font-weight: 600; color: #92400e; }
.ute-blocchi p { margin: 6px 0; }
.ute-blocchi-elenco { margin: 8px 0 0; padding-left: 20px; }
.ute-blocchi-elenco li { margin: 4px 0; }
.ute-blocchi-elenco button { margin-left: 8px; }

/* ------------------------------------------------------------- Registro attività
   Una tabella di sola lettura, dove l'unica evidenza che serve è la riga andata storta:
   in un registro il caso interessante è il tentativo respinto, non l'azione riuscita. */

/* La fascia della registrazione sospesa: ambra e non rossa, perché non è un guasto ma
   una scelta di chi sta lavorando. Deve però restare impossibile da non vedere — una
   sospensione dimenticata è un registro che non serve più a niente. */
.banner-sospeso {
  margin: 0 0 10px; padding: 9px 14px; border-radius: 6px;
  background: #fffbeb; border: 1px solid #fcd34d; border-left: 4px solid #d97706;
  color: #92400e; font-size: 13px; font-weight: 600;
}
#regatt-sospendi.attivo { border-color: #d97706; color: #92400e; background: #fffbeb; }

#regatt-table tr.regatt-fallita { background: #fef2f2; }
#regatt-table .regatt-negato {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
  background: #fee2e2; border: 1px solid #fecaca; color: #991b1b;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
}
/* Data e indirizzo in cifre tabulari e senza andare a capo: sono colonne che si
   scorrono con l'occhio in verticale, e una data spezzata su due righe le disallinea. */
#regatt-table .regatt-quando, #regatt-table .regatt-ip {
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
#regatt-table .regatt-ip { color: #6b7280; font-size: 12px; }
/* La descrizione è la colonna che si legge davvero: le si lascia lo spazio e si
   comprimono le altre, che sono etichette corte.
   `table-layout: fixed` è necessario, non decorativo: senza, le descrizioni lunghe (un
   rifiuto porta con sé il motivo) allargano la tabella oltre lo schermo e spingono fuori
   «Su chi» e «Da dove», che sono due delle colonne per cui il registro esiste.
   `min-width: 0` lo è altrettanto: annulla il `min-width: max-content` che
   `.table-scroll .data-table` impone a tutte le tabelle larghe. Su una tabella `fixed`
   con colonne in PERCENTUALE quel calcolo esplode — la stessa trappola dell'elenco
   richieste ferie (vedi il commento su `.ferie-rich-tab`) — e si vede solo su FIREFOX:
   Chrome risolve le percentuali sul contenitore e la tabella sembra a posto, Firefox
   allarga la tabella a dismisura e a video resta la sola colonna «Quando», congelata a
   sinistra, con tutte le altre spinte fuori dallo schermo. La stampa PDF non passa di
   qui, e infatti mostrava tutto (07/08/2026, segnalato dall'utente). */
#regatt-table { table-layout: fixed; width: 100%; min-width: 0; }
#regatt-table th:nth-child(1), #regatt-table th:nth-child(2) { width: 12%; }
#regatt-table th:nth-child(3) { width: 10%; }
#regatt-table th:nth-child(4) { width: 39%; }
#regatt-table th:nth-child(5) { width: 15%; }
#regatt-table th:nth-child(6) { width: 12%; }
#regatt-table td { white-space: normal; overflow-wrap: anywhere; }
#regatt-paginazione button[disabled] { opacity: .4; cursor: default; }

/* ---------------- Configurazione guidata di una Struttura (08/08/2026) --------------
   La schermata che accompagna la messa in servizio di un reparto. Due criteri:
   - lo STATO si legge da due segni insieme, il pallino (colore) e la parola: cinque
     stati non sono «bene/male», e un colore da solo non si legge;
   - la MISURA sta sempre a vista («3 fasce, 18 requisiti»), perché è ciò che distingue
     un passo completo da uno configurato a metà. */

.cg-briciola { margin: 8px 0; color: var(--n-600); font-size: var(--t-s); }
.cg-testa { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }

/* La barra di avanzamento: «chiusi su totale», dove i chiusi comprendono i passi
   dichiarati non previsti (un reparto senza reperibilità è completo lo stesso). */
.cg-barra {
  display: inline-block; width: 150px; height: 10px; border-radius: 999px;
  background: var(--n-200); overflow: hidden; vertical-align: middle;
}
.cg-barra-piena { display: block; height: 100%; background: var(--ok-pieno); }
.cg-conta { font-variant-numeric: tabular-nums; color: var(--n-600); font-size: var(--t-s); }

.cg-tappe { display: flex; flex-direction: column; gap: 10px; }
.cg-tappa {
  border: var(--bordo); border-left: 4px solid var(--n-300);
  border-radius: var(--raggio-s); padding: 10px 12px; background: var(--n-0);
}
.cg-tappa-testa { display: flex; align-items: baseline; gap: 8px; }
.cg-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px; flex: none;
  background: var(--n-100); color: var(--n-600);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.cg-stato { margin-left: auto; font-size: var(--t-xs); white-space: nowrap; }
/* Le tappe sono dodici: ogni riga di troppo diventa uno schermo di scorrimento. Perciò
   `perche` e `misura` stanno su una riga sola ciascuna e i comandi si accodano al
   «Che cos'è» invece di prendersi una riga propria. */
.cg-perche { margin: 4px 0 0 30px; color: var(--n-600); font-size: var(--t-s); }
.cg-misura { margin: 2px 0 0 30px; font-size: var(--t-s); }
.cg-nota {
  margin: 6px 0 0 30px; padding: 4px 8px; font-size: var(--t-s);
  background: var(--n-50); border-left: 3px solid var(--n-300); color: var(--n-700);
}
.cg-avviso {
  margin: 6px 0 0 30px; padding: 4px 8px; font-size: var(--t-s);
  background: var(--av-fondo); border: 1px solid var(--av-bordo); color: var(--av-testo);
  border-radius: var(--raggio-xs);
}
.cg-aiuto { font-size: var(--t-s); color: var(--n-600); }
.cg-aiuto summary { cursor: pointer; color: var(--a-500); white-space: nowrap; }
.cg-aiuto p { margin: 4px 0 0; max-width: 90ch; }
.cg-comandi {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 6px 0 0 30px;
}
/* Il «Che cos'è» aperto deve poter usare tutta la larghezza, non restare schiacciato
   nella colonnina che gli lascerebbero i pulsanti accanto. */
.cg-comandi .cg-aiuto[open] { flex: 1 0 100%; order: 9; }
.cg-firma { margin-left: auto; color: var(--n-500); font-size: 12px; font-style: italic; }

/* I cinque stati. Il bordo a sinistra è la lettura d'insieme scorrendo l'elenco. */
.cg-tappa.cg-fatto    { border-left-color: var(--ok-pieno); }
.cg-tappa.cg-fatto    .cg-stato { color: var(--ok-testo); }
.cg-tappa.cg-dafare   { border-left-color: var(--a-500); }
.cg-tappa.cg-dafare   .cg-stato { color: var(--a-700); }
.cg-tappa.cg-rimand   { border-left-color: var(--av-pieno); }
.cg-tappa.cg-rimand   .cg-stato { color: var(--av-testo); }
.cg-tappa.cg-noprev   { border-left-color: var(--n-400); background: var(--n-50); }
.cg-tappa.cg-noprev   .cg-stato { color: var(--n-600); }
/* Il passo bloccato resta VISIBILE ma spento: nasconderlo toglierebbe la vista
   d'insieme, che è metà del motivo per cui questa schermata esiste. */
.cg-tappa.cg-bloccato { border-left-color: var(--n-300); background: var(--n-50); opacity: .7; }
.cg-tappa.cg-bloccato .cg-stato { color: var(--n-500); }

/* Il filo di Arianna: la fascia che resta a video mentre si è FUORI dal percorso.
   Sta nella testata, quindi la sua altezza entra in `--topbar-h` (vedi
   `renderCgRitorno`, che richiama `adattaAltezzaGriglia`). */
.cg-ritorno {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 5px 14px; font-size: var(--t-s);
  background: var(--a-50); border-top: 1px solid var(--a-200); color: var(--a-900);
}
.cg-ritorno .cgr-testa { font-weight: 700; }
.cg-ritorno .cgr-dove { color: var(--n-700); }
.cg-ritorno .cgr-comandi { margin-left: auto; display: flex; gap: 4px; }

/* --------------------------------------------- Comunicazioni di servizio
   L'avviso al reparto con la conferma di lettura (08/08/2026). Riusa `.novita-corpo`
   per lo scorrimento; qui c'è solo quello che è suo: il riquadro del testo, le
   etichette («in copia», «senza account») e l'evidenza di chi non ha ancora
   confermato — che è la cosa che si va a cercare in questa schermata. */
.com-testo-riquadro {
  white-space: pre-wrap; background: var(--n-50); border: 1px solid var(--n-200);
  border-radius: 10px; padding: 10px 14px; margin: 6px 0 10px; line-height: 1.5;
}
.com-tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  border-radius: 999px; padding: 2px 9px; background: var(--n-100); color: var(--n-700);
}
.com-tag-avviso { background: #fef3c7; color: #92400e; }
/* Chi non ha confermato: fondo tenue, non rosso. Non è un errore accertato — è un
   messaggio che qualcuno non ha ancora letto, e potrebbe essere in ferie. */
tr.com-da-leggere > td { background: #fffbeb; }
.com-attesa { color: #92400e; }
tr.com-ritirata > td { opacity: .6; text-decoration: line-through; }
.com-messaggio {
  border: 1px solid var(--n-200); border-left: 4px solid var(--a-500);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; background: #fff;
}
.com-messaggio.letta { opacity: .7; border-left-color: #34d399; }
.com-messaggio-testa { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.com-messaggio-testa b { font-size: 15px; }
.com-messaggio-da { font-size: var(--t-s); color: var(--n-700); }
.com-confermato { color: #065f46; font-weight: 700; }
/* L'esito dell'anteprima, dentro il form: chi riceverà, chi resta fuori, cosa manca. */
#com-anteprima {
  border: 1px solid var(--a-200); background: var(--a-50); border-radius: 10px;
  padding: 10px 14px; margin: 6px 0;
}
#com-anteprima p { margin: 4px 0; }
.com-elenco { font-size: var(--t-s); line-height: 1.8; }
.com-avvisi, .com-errori { margin: 6px 0 0; padding-left: 20px; font-size: var(--t-s); }
.com-avvisi { color: #92400e; }
.com-errori { color: #b91c1c; font-weight: 600; }

/* ---------------------------------------------------------------- GUIDA (📖)
   Il manuale dentro l'app. Riusa il linguaggio visivo che c'è già (.data-table,
   .hint, la forma delle card): niente colori nuovi. */
#guida-indice { margin: 10px 0 16px; display: flex; flex-direction: column; gap: 6px; }
.guida-ind-gruppo { font-size: var(--t-s); line-height: 2; }
.guida-ind-gruppo > b { margin-right: 6px; color: var(--n-700); }
.guida-ind-voce {
  display: inline-block; margin: 1px 2px; padding: 3px 10px;
  background: var(--n-0); border: var(--bordo); border-radius: 999px;
  font-size: var(--t-s); cursor: pointer;
}
.guida-ind-voce:hover { border-color: var(--a-500); color: var(--a-600); }
.guida-cap {
  background: var(--n-0); border: var(--bordo); border-radius: var(--raggio-s);
  margin-bottom: 8px; box-shadow: var(--ombra-1);
}
.guida-cap > summary {
  cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: 15px;
  list-style-position: inside;
}
.guida-cap[open] > summary { border-bottom: var(--bordo); }
.guida-corpo { padding: 6px 16px 14px; }
.guida-corpo h4 { margin: 14px 0 6px; font-size: var(--t-s); color: var(--n-700);
  text-transform: uppercase; letter-spacing: .04em; }
.guida-tu { color: var(--n-600); font-style: italic; margin: 4px 0 8px; }
.guida-tab td { vertical-align: top; }
.guida-tab td.guida-che { width: 220px; white-space: normal; }
.guida-note { margin: 4px 0; padding-left: 20px; font-size: var(--t-s);
  color: var(--n-600); line-height: 1.6; }
.guida-mostrami {
  display: inline-block; margin-left: 6px; padding: 1px 8px;
  background: var(--a-50); border: 1px solid var(--a-200); border-radius: 999px;
  color: var(--a-600); font-size: var(--t-xs); cursor: pointer; white-space: nowrap;
}
.guida-mostrami:hover { background: var(--a-100); }

/* Il banner del ritorno: fisso in alto al centro, SOPRA le barre appiccicate della
   testata (z-index 20) ma sotto ai modali (1000). In alto e non in basso come il
   toast: i due non devono coprirsi a vicenda. */
.guida-torna {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 900;
}
.guida-torna button {
  background: var(--n-900); color: #fff; border: 0; border-radius: 999px;
  padding: 8px 18px; font-size: var(--t-s); font-weight: 600; cursor: pointer;
  box-shadow: var(--ombra-2);
}
.guida-torna button:hover { background: var(--n-700); }

/* Il lampeggio del «Mostramelo»: contorno e ombra, MAI lo sfondo (decine di pulsanti
   se lo impostano da sé). Lo `scroll-margin` tiene l'elemento fuori da sotto le barre
   appiccicate: senza, il comando evidenziato finirebbe coperto e sembrerebbe assente. */
.guida-lampeggio {
  scroll-margin-top: calc(var(--topbar-h, 120px) + 70px);
  scroll-margin-bottom: 60px;
  animation: guida-lampeggio 2.1s ease-in-out;
}
@keyframes guida-lampeggio {
  0%, 100% { outline: 2px solid transparent; outline-offset: 2px; box-shadow: none; }
  15%, 45%, 75% { outline: 3px solid var(--a-500); outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--a-200); }
  30%, 60% { outline: 3px solid transparent; outline-offset: 2px; box-shadow: none; }
}