/* ========================================================================== IntegraSG — Foglio di stile di base (design system) Impostazione: sobrio e professionale. Un gestionale ISO usato da consulenti e responsabili qualita'/sicurezza chiede LEGGIBILITA' e DENSITA' INFORMATIVA, non effetti. Priorita': gerarchia chiara, contrasto adeguato, spaziature coerenti, componenti riutilizzabili. Convenzione dei nomi: italiana e parlante (coerente col resto del progetto). Struttura: 1) variabili 2) reset 3) impianto 4) componenti. ========================================================================== */ /* ------------------------------------------------------------------------- 1) VARIABILI — il cuore del design system. Cambiando qui si cambia l'aspetto ovunque, senza toccare i componenti. ------------------------------------------------------------------------- */ :root { /* Colori — palette sobria, contrasto alto, un solo accento */ --colore-testo: #1b2430; /* testo principale */ --colore-testo-tenue: #5b6875; /* testo secondario */ --colore-sfondo: #f6f7f9; /* sfondo pagina */ --colore-superficie: #ffffff; /* card, riquadri */ --colore-bordo: #dde1e6; /* ⚠️ IL BORDO DI UN CAMPO NON È IL BORDO DI UNA SCHEDA. `--colore-bordo` sul bianco fa **1,31:1**, mentre per ciò che delimita un CONTROLLO lo standard chiede **3:1**. Questo fa **3,49:1** sul bianco e 3,26:1 sullo sfondo pagina. ⭐ **Una scheda separa, un campo invita**: il primo può sussurrare, il secondo deve farsi trovare. ⚠️ Resta un NEUTRO: il colore forte del prodotto è uno solo, l'accento, e lo prende il campo quando ci si scrive dentro (`:focus`). */ --colore-bordo-campo: #7d8b98; /* ⚠️ L'ACCENTO E' IL BLU DEL MARCHIO, #026491: e' anche il colore della scritta SG, e il prodotto si allinea al marchio, non il contrario. ⚠️ Contrasto sul bianco 6,5:1: sopra la soglia del testo. ⚠️ Lo scuro e' lo stesso blu ridotto del 29%. */ --colore-accento: #026491; /* il blu del marchio */ --colore-accento-scuro: #014767; /* ============================================================ IL CONTORNO — cio' che NON e' gestione del processo ============================================================ «Il passo successivo» e la «Cronologia del fattore» hanno uno sfondo diverso: si deve notare subito che non appartengono alla gestione del processo. ⚠️ SI DISTINGUONO COL PESO, NON CON UNA TINTA. Su queste pagine il colore ha gia' molti significati — fascia = gravita', etichetta = versante, codice = fonte. Un fondo colorato sul contorno introdurrebbe una SECONDA lingua di colori sulla stessa schermata. ⭐ TRE PESI, e la scala dice a cosa serve ciascun blocco: superficie bianca -> il lavoro (e il soggetto: identita' e percorso) trasparente -> il passo successivo: guida, guarda avanti grigio -> la cronologia: traccia, guarda indietro ⭐ Il terzo peso separa FARE da CONSULTARE: il passo successivo e' ancora una guida all'azione; la cronologia e' la sola cosa della pagina con cui non si fa niente — si legge. ⚠️ IL TESTO DELLA CRONOLOGIA E' PIU' SCURO, ED E' OBBLIGATORIO, non una preferenza: `--colore-testo-tenue` su questo fondo da' un contrasto di **4,41** — sotto la soglia AA di 4,5. Con `--colore-contorno-testo` sale a **6,38**. Una variante intermedia passerebbe per pochi centesimi, un margine che il primo ritocco alla tinta mangerebbe in silenzio. */ --colore-contorno-fondo: #dee3e7; --colore-contorno-bordo: #c2cad0; --colore-contorno-testo: #44505c; /* ============================================================ IL COLORE CODIFICA IL RUOLO, NON L'IMPORTANZA ============================================================ ⚠️ L'accento dice UNA cosa: la struttura — fasi, tappe, intestazioni, dove SEI. Se dicesse anche «clicca qui» sui pulsanti, l'occhio non potrebbe separare la struttura dall'azione, e i pulsanti si leggerebbero come titoli. I comandi hanno un colore loro: il grafite, un neutro che non compete con niente e non promette un significato che non ha. Un caldo come l'ambra confinerebbe con `--colore-attenzione`, che segnala gli avvisi. Contrasto del bianco su #2c3a47: ampiamente oltre il minimo 4.5:1. */ --colore-azione: #2c3a47; /* grafite: cosa puoi fare */ /* Tinta dell'accento per le fasce di intestazione A/B: dice "comincia un contenitore" senza catturare l'occhio piu' del contenuto. */ /* ⚠️ Deve restare piu' chiara dell'inizio della sfumatura della fase, o a occhio sarebbero la stessa cosa. Si schiarisce QUESTA, non si scurisce quella: il contenitore deve restare piu' forte del contenuto, e scurendo la fase prima o poi si arriva a un titolo che grida piu' del lavoro che introduce. */ --colore-fascia-tenue: #e6f0f5; /* La fascia delle FASI: stessa famiglia della tenue, un gradino piu' decisa. ⚠️ Devono restare DIVERSE: la fase e' il contenitore di A/B/C, e se le due bande fossero uguali i due livelli si appiattirebbero — il contrario della regola dei «tre gradini in intensita' calante» scritta piu' sotto. Fase -> banda decisa; A/B/C -> banda tenue; causa -> riquadro. Tre segni diversi per tre profondita'. */ --colore-fascia-fase: #bcd8e3; /* Colori semantici (avvisi, stati) */ --colore-ok: #1f7a4d; --colore-ok-sfondo: #e8f5ee; --colore-attenzione: #a86a00; --colore-attenzione-sfondo:#fdf3e2; --colore-errore: #a32b2b; --colore-errore-sfondo: #fbeaea; /* Tipografia — di sistema: veloce, nativa, leggibile ovunque */ --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ⚠️ 15px: il cruscotto mette card, tendine e riquadri affiancati nella stessa schermata, e a 16px diventerebbe una pagina da scorrere. ⭐ **Un punto solo, e tutto il prodotto lo segue**: le misure del foglio sono in `rem`, quindi scendono insieme e i rapporti restano quelli disegnati. Stringere le singole regole del cruscotto avrebbe prodotto una pagina che si legge diversamente dalle altre. ⚠️ Non si scende oltre: sotto i 15px il testo lungo — le descrizioni dei fattori, le motivazioni — smette di essere comodo, e questo prodotto si legge quanto si guarda. */ --dimensione-base: 15px; --interlinea: 1.55; /* Spaziature — scala coerente (evita valori a caso) */ --spazio-1: 0.25rem; --spazio-2: 0.5rem; --spazio-3: 0.75rem; --spazio-4: 1rem; --spazio-6: 1.5rem; --spazio-8: 2rem; --spazio-12: 3rem; /* Forme */ --raggio: 6px; --ombra: 0 1px 2px rgba(27, 36, 48, .06), 0 2px 8px rgba(27, 36, 48, .05); /* Larghezza del contenuto: comoda per tabelle dense */ --larghezza-contenitore: 1120px; } /* ------------------------------------------------------------------------- 2) RESET essenziale ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-base); font-size: var(--dimensione-base); line-height: var(--interlinea); color: var(--colore-testo); background: var(--colore-sfondo); /* La pagina occupa almeno tutto lo schermo: il footer resta in fondo */ min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--spazio-3); } p { margin: 0 0 var(--spazio-4); } a { color: var(--colore-accento); text-decoration: none; } a:hover { text-decoration: underline; } /* ------------------------------------------------------------------------- 3) IMPIANTO — contenitore, intestazione, contenuto, piede ------------------------------------------------------------------------- */ .contenitore { width: 100%; max-width: var(--larghezza-contenitore); margin: 0 auto; padding: 0 var(--spazio-6); } /* Intestazione */ .intestazione { background: var(--colore-superficie); border-bottom: 1px solid var(--colore-bordo); } .intestazione__interno { display: flex; align-items: center; justify-content: space-between; min-height: 60px; /* ⚠️ L'INTESTAZIONE STA DENTRO LO STESSO CONTENITORE DI TUTTO IL RESTO. Senza barra laterale — accesso, uscita, attivazione — l'intestazione e' l'unica fascia della pagina che non ne avrebbe uno: il marchio partirebbe dal bordo e «Accedi» finirebbe sul bordo opposto. ⭐ **Una regola scritta solo per il caso principale lascia scoperto l'altro, e l'altro e' la prima pagina che un utente nuovo vede.** */ max-width: var(--larghezza-contenitore); margin: 0 auto; padding: 0 var(--spazio-6); } .marchio { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--colore-testo); } .marchio:hover { text-decoration: none; } /* Il logo in testata: alto quanto basta perche' le maiuscole abbiano la misura di una scritta. La larghezza la decide il disegno. `block` toglie lo spazio sotto la riga che un'immagine in linea si porta dietro. */ .marchio__logo { display: block; height: 36px; width: auto; } /* Navigazione (si popolera' col login e i ruoli) */ .navigazione { display: flex; gap: var(--spazio-6); align-items: center; } .navigazione a { color: var(--colore-testo-tenue); font-size: 0.95rem; } .navigazione a:hover { color: var(--colore-accento); text-decoration: none; } /* Contenuto: cresce e spinge il footer in fondo */ .contenuto { flex: 1; padding: var(--spazio-8) 0; } /* Piede */ .piede { border-top: 1px solid var(--colore-bordo); background: var(--colore-superficie); padding: var(--spazio-6) 0; } .piede__testo { margin: 0; font-size: 0.85rem; color: var(--colore-testo-tenue); } .piede__motto { font-style: italic; } /* ------------------------------------------------------------------------- 4) COMPONENTI ------------------------------------------------------------------------- */ /* Riquadro (card): il contenitore base dei contenuti */ .riquadro { background: var(--colore-superficie); border: 1px solid var(--colore-bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: var(--spazio-8); } /* ============================================================ LA SCALA DEI CARATTERI ============================================================ ⭐ **Troppe misure vicine non sono una scala: sono un continuo**, e in un continuo niente sembra piu' grande di niente. ⚠️ QUI SI ALZA SOLO LA CIMA: i titoli. ⬜ Fra .78 e .95rem restano molte misure che a schermo nessuno distingue: rimapparle tocca molte righe e va guardato a pagina aperta, non dedotto. */ .titolo { font-size: 1.75rem; } .sottotitolo { font-size: 1.05rem; color: var(--colore-testo-tenue); margin-bottom: var(--spazio-6); } /* Un paragrafo di descrizione seguito da un altro: mezzo stacco, perché sono lo stesso discorso. */ .sottotitolo--segue { margin-bottom: var(--spazio-3); } .testo { max-width: 68ch; } /* misura di lettura confortevole */ /* Etichette di stato */ .etichetta { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: var(--spazio-1) var(--spazio-3); border-radius: 999px; border: 1px solid transparent; } .etichetta--ok { color: var(--colore-ok); background: var(--colore-ok-sfondo); border-color: rgba(31, 122, 77, .2); } .etichetta--attenzione { color: var(--colore-attenzione); background: var(--colore-attenzione-sfondo); border-color: rgba(168, 106, 0, .2); } .etichetta--errore { color: var(--colore-errore); background: var(--colore-errore-sfondo); border-color: rgba(163, 43, 43, .2); } /* Avvisi (messaggi flash) */ .avvisi { list-style: none; margin: 0 0 var(--spazio-6); padding: 0; } .avviso { padding: var(--spazio-3) var(--spazio-4); border-radius: var(--raggio); border: 1px solid transparent; margin-bottom: var(--spazio-2); font-size: 0.95rem; } .avviso--success, .avviso--message { color: var(--colore-ok); background: var(--colore-ok-sfondo); border-color: rgba(31, 122, 77, .25); } .avviso--warning { color: var(--colore-attenzione); background: var(--colore-attenzione-sfondo); border-color: rgba(168, 106, 0, .25); } .avviso--error, .avviso--danger { color: var(--colore-errore); background: var(--colore-errore-sfondo); border-color: rgba(163, 43, 43, .25); } /* ⚠️ `avviso--info` la usa `setup/scale.html`. Una classe scritta in un template ma assente dal foglio di stile NON fallisce: si vede solo aprendo la pagina, e chi la apre pensa che sia una scelta grafica. ⚠️ Colore ACCENTO, non attenzione: informa, non avverte. Con `--colore-attenzione` un messaggio neutro avrebbe l'aria di un problema, e in poche settimane si smetterebbe di distinguere i due. */ .avviso--info { color: var(--colore-accento); background: #eef5f8; border-color: rgba(22, 96, 122, .25); } /* Il riquadro che apre il primo accesso: piu' aria, perche' e' la prima cosa che si legge entrando e non un messaggio di passaggio. */ /* ⚠️ `--spazio-5` NON ESISTE: la scala salta da 4 a 6 (0.25 · 0.5 · 0.75 · 1 · 1.5 · 2). Una variabile CSS inesistente NON fallisce — la proprieta' viene semplicemente ignorata, e il riquadro resterebbe senza padding orizzontale senza nessun segnale. */ .riquadro-avvio { padding: var(--spazio-4) var(--spazio-6); } .riquadro-avvio p:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------- 5) FORM E BOTTONI (aggiunti con la pagina di accesso) ------------------------------------------------------------------------- */ /* Campo di un form: etichetta sopra, input sotto */ .campo { margin-bottom: var(--spazio-4); } .campo__etichetta { display: block; /* ⚠️ Come `.campo label`, e per la stessa ragione: il nome del campo non deve pesare quanto il valore che introduce. */ font-size: 0.8rem; font-weight: 600; margin-bottom: var(--spazio-2); color: var(--colore-testo-tenue); } .campo__input { width: 100%; padding: var(--spazio-3); font-family: inherit; font-size: 1rem; color: var(--colore-testo); background: var(--colore-superficie); border: 1px solid var(--colore-bordo-campo); border-radius: var(--raggio); } .campo__input:focus { outline: none; border-color: var(--colore-accento); /* Anello di focus visibile: accessibilita' (chi naviga da tastiera) */ box-shadow: 0 0 0 3px rgba(22, 96, 122, .15); } /* Bottoni */ .bottone { display: inline-block; font-family: inherit; /* ⚠️ Corpo e imbottitura contenuti: un comando deve stare accanto al contenuto, non sopra di esso. */ font-size: 0.88rem; font-weight: 600; padding: var(--spazio-2) var(--spazio-4); border-radius: var(--raggio); border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } /* ============================================================ IL PULSANTE NON SI RIEMPIE ============================================================ ⚠️ NON E' UN PROBLEMA DI TINTA. Il peso sta in due proprieta': background pieno -> un rettangolo scuro su una pagina chiara e' la cosa piu' pesante che ci sia, qualunque colore abbia; width: 100% -> ogni pulsante principale sarebbe una BARRA larga quanto la pagina. Il pulsante e' CHIARO con il bordo e il testo in colore, e largo quanto le sue parole. Il riempimento arriva al passaggio del puntatore, quando la mano e' gia' li' — lo stesso principio di `.bottone--pericolo` qui sotto, e per la stessa ragione. ⚠️ Il colore resta quello delle AZIONI (grafite), diverso da quello della struttura: la distinzione di ruolo regge, e si vede, perche' non e' coperta dal peso. */ .bottone--principale { color: var(--colore-azione); background: var(--colore-superficie); border-color: var(--colore-azione); } .bottone--principale:hover { color: #fff; background: var(--colore-azione); border-color: var(--colore-azione); } /* ⚠️ La larghezza piena SOLO dove ha senso: un modulo con un campo per riga, dove il pulsante chiude la colonna. Si chiede, non si eredita. */ .bottone--largo { width: 100%; } .bottone--tenue { color: var(--colore-testo-tenue); background: transparent; border-color: var(--colore-bordo); padding: var(--spazio-2) var(--spazio-4); font-size: 0.9rem; } /* Anche il tenue vira all'ambra al passaggio: un comando resta un comando, qualunque sia il suo peso. Il petrolio qui direbbe «struttura». */ .bottone--tenue:hover { color: var(--colore-azione); border-color: var(--colore-azione); } /* Comando IRREVERSIBILE accanto a comandi che non lo sono. ⚠️ Volutamente NON riempito di rosso: un pulsante pieno attira il clic, ed e' l'ultima cosa che si vuole da un comando che cancella. Resta tenue come «Modifica», e si distingue solo per il colore del testo — abbastanza perche' l'occhio non li confonda, non tanto da chiamare la mano. Il rosso pieno arriva sul :hover, quando il puntatore e' gia' li' e serve l'ultimo avviso prima del clic. */ .bottone--pericolo { color: var(--colore-errore); } .bottone--pericolo:hover { color: #fff; background: var(--colore-errore); border-color: var(--colore-errore); } /* Pagina di accesso: riquadro stretto e centrato */ .accesso { display: flex; justify-content: center; padding-top: var(--spazio-8); } .accesso__riquadro { width: 100%; max-width: 420px; } /* Nome utente e form di logout nella barra di navigazione */ .navigazione__utente { font-size: 0.9rem; color: var(--colore-testo-tenue); } .navigazione__form { margin: 0; } /* ------------------------------------------------------------------------- 6) TABELLE E LISTE (aggiunti con la pagina dei fattori) ------------------------------------------------------------------------- */ /* Intestazione di una sezione: titolo a sinistra, azioni a destra */ .intestazione-sezione { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spazio-6); margin-bottom: var(--spazio-6); } .intestazione-sezione__azioni { flex-shrink: 0; } /* ⚠️ IL MARGINE SOTTO SERVE A STACCARSI DA CIO' CHE SEGUE. Quando l'intestazione e' l'ULTIMA cosa del riquadro non segue niente, e quel margine si somma al `padding` del riquadro: due spazi per una separazione sola. ⚠️ La regola e' sul RAPPORTO, non sulla pagina: `:last-child` scatta solo dove il margine non separava gia' piu' niente, quindi non puo' avvicinare due cose che dovevano stare distanti. */ .intestazione-sezione:last-child { margin-bottom: 0; } /* La riga porta solo titolo e comandi, e la descrizione segue sotto a tutta larghezza: lo stacco lo dà già il titolo. */ .intestazione-sezione--solo-titolo { margin-bottom: 0; } /* Tabella: densa e leggibile (un gestionale mostra molte righe) */ .tabella { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .tabella th { text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--colore-testo-tenue); font-weight: 600; padding: var(--spazio-2) var(--spazio-3); border-bottom: 2px solid var(--colore-bordo); white-space: nowrap; } .tabella td { padding: var(--spazio-3); border-bottom: 1px solid var(--colore-bordo); vertical-align: top; } .tabella tbody tr:hover { background: rgba(22, 96, 122, .03); } /* Il codice parlante (es. CE-R-001): monospazio, si legge come un identificativo */ .tabella__codice { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; white-space: nowrap; /* ⚠️ IL CODICE E' QUELLO CHE SI CERCA: arrivando da un elenco, da un filtro o da un segnalibro, la prima cosa che l'occhio insegue su una colonna e' lui. ⭐ Il peso e non il colore: **il colore in questo prodotto dice sempre qualcosa** — fase, esito, stato — e un codice non ha nessuno di quei significati. Il grassetto non promette niente, si limita a farsi vedere. ⚠️ E NON si tocca il colore: dentro questa cella il codice e' spesso un link con la tinta della sua FONTE (`a.codice--ce` e sorelle), e riscriverlo qui cancellerebbe un'informazione per aggiungere enfasi. */ font-weight: 600; } /* IL CODICE NEL TITOLO DELLA SCHEDA. ⚠️ Classe NUOVA, non `.tabella__codice`: quella e' la classe delle CELLE, piu' piccola del testo normale, e la usano nove tabelle. Allargarla per un caso che tabella non e' ingrandirebbe i codici ovunque. ⚠️ IL CORSIVO E' VOLUTO, ed e' un'ECCEZIONE: **in questo foglio il corsivo significa gia' qualcos'altro** — il motto nel piede, le note sotto i campi, i pannelli `.aiuto`, gli `` nella prosa. Il filo comune e' «non e' un dato: e' una nota, un termine, un valore convenzionale». Nel titolo il codice e' un blocco di caratteri diverso dalle parole che lo circondano, e il corsivo lo stacca senza aggiungere peso — cosa che il solo monospazio, alla dimensione del titolo, non fa abbastanza. ⚠️ Quindi NON si estende: il corsivo resta riservato a questo caso e a quelli elencati sopra. Un segno che distingue vale finche' e' raro. */ .titolo__codice { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1em; white-space: nowrap; font-style: italic; } /* ⚠️ NIENTE `text-transform`: la parola viene da `ETICHETTE_STATO_FATTORE`, già scritta giusta, e un `capitalize` trasformerebbe «In monitoraggio» in «In Monitoraggio». ⭐ *Un foglio di stile che sistema il testo è il terzo posto in cui si decide una parola, e nessuno va a cercarlo lì.* */ .stato { color: var(--colore-testo-tenue); } .vuoto { color: var(--colore-testo-tenue); } /* ============================================================ `.sottotitolo` HA DUE MESTIERI ============================================================ Come `

` è il sottotitolo di una PAGINA, sotto un `

`: 1.05rem e un margine sotto, giusti per quel posto. Come `` o `` è il testo che accompagna un valore o un campo — «non ancora decisa», la nota sotto una tendina. Lì intorno il testo sta a .9rem: con le misure del sottotitolo l'annotazione sarebbe più grande della cosa che annota, col margine di un paragrafo in mezzo a una riga. E dentro un `
` prenderebbe anche il `font-weight` del termine. ⚠️ SI CORREGGE SULLA CLASSE, NON DOVE SI È VISTO: il difetto è di specie, e ripararlo in un punto lascia gli altri dove sono. L'elemento basta a distinguere i due mestieri: un sottotitolo di pagina è sempre un `

`, un'annotazione è uno `` o uno ``. */ span.sottotitolo, small.sottotitolo{font-size:.85rem;font-weight:400;margin-bottom:0} .conteggio { margin-top: var(--spazio-4); margin-bottom: 0; font-size: 0.85rem; color: var(--colore-testo-tenue); } /* Stato vuoto: informativo, mai una pagina bianca */ .stato-vuoto { padding: var(--spazio-8) var(--spazio-4); text-align: center; border: 1px dashed var(--colore-bordo); border-radius: var(--raggio); } .stato-vuoto__testo { font-weight: 600; margin-bottom: var(--spazio-2); } .stato-vuoto__nota { margin: 0 auto; max-width: 60ch; font-size: 0.9rem; color: var(--colore-testo-tenue); } /* Bottone disabilitato (funzione in costruzione) */ .bottone--disabilitato { opacity: .5; cursor: not-allowed; width: auto; } /* Dominio funzionale: dice a quale funzione e' affidato il governo del fattore. ⚠️ NIENTE `white-space:nowrap`: la cella mostra il NOME della funzione — «Sicurezza delle informazioni» — cioe' una frase, che a capo si legge benissimo. Il `nowrap` serve a un token unico, non a una frase. ⭐ Chi cambia il CONTENUTO di una cella rilegga le regole che ne governano la FORMA: sono scritte per il contenuto vecchio. */ .dominio { font-size: 0.85rem; color: var(--colore-testo); } /* ⭐ Il nome dice il CASO che distingue — nessuna funzione in particolare, il fattore e' di tutta l'azienda — con le parole del modulo che pone la domanda. ⚠️ Serve per il colore e il corsivo: «Tutta l'azienda» non e' il nome di una funzione, e' l'assenza di una funzione, e va detto a voce piu' bassa. */ .dominio--tutta-azienda { color: var(--colore-testo-tenue); font-style: italic; } /* Nota di sicurezza nella pagina di attivazione */ .nota-sicurezza { font-size: 0.9rem; color: var(--colore-testo-tenue); padding: var(--spazio-3); background: var(--colore-sfondo); border-left: 3px solid var(--colore-accento); border-radius: 0 var(--raggio) var(--raggio) 0; margin-bottom: var(--spazio-6); } /* Testo di aiuto sotto un campo */ .campo__aiuto { margin: var(--spazio-2) 0 0; font-size: 0.85rem; color: var(--colore-testo-tenue); } /* ⚠️ LE REGOLE DELLA PASSWORD, SCRITTE DOVE SI SCEGLIE. ⭐ **Una regola che il prodotto applica e non dichiara si scopre sbagliando** — e si scopre quando si è già scelto e il modulo rifiuta. ⚠️ Un ELENCO e non un paragrafo: sono cinque cose indipendenti, e in prosa la quarta si legge come una precisazione della terza. */ .elenco-regole{ list-style: disc; margin-top: var(--spazio-2); /* ⚠️ `--spazio-6` e non un valore a mano: i punti elenco vogliono un rientro un po' piu' largo del testo, e la scala ce l'ha gia'. La scala e' 1,2,3,4,6,8: `--spazio-5` non esiste (`test_ogni_variabile_usata_e_definita`). */ padding-left: var(--spazio-6); } .elenco-regole li{margin-bottom: var(--spazio-1)} /* ============================================================ SCHEDA DEL FATTORE — percorso a tappe e dati essenziali ============================================================ */ /* Ogni valore incolonnato SOTTO la propria etichetta: con flex e i margini di default del

, i valori risultavano spostati e non si leggevano in colonna. */ .dati-essenziali{display:flex;flex-wrap:wrap;gap:var(--spazio-8); margin-top:var(--spazio-4)} .dati-essenziali > div{display:flex;flex-direction:column} .dati-essenziali dd{margin-left:0} .dati-essenziali dt{font-size:.78rem;text-transform:uppercase; letter-spacing:.04em;color:var(--colore-testo-tenue)} .dati-essenziali dd{font-size:.95rem;margin-top:var(--spazio-1)} /* ============================================================ LA MINIATURA DELLE FASI — una legenda, non una seconda fila ============================================================ ⚠️ Sta nella stessa pagina della fila interattiva, e per questo NON deve somigliarle: una miniatura che ripete la forma dell'originale si legge come un doppione («perche' due volte?»), una che cambia natura si legge come una legenda. Qui: nessun riquadro, nessun bordo, nessun numero, testo tenue e frecce. Cambia la NATURA, non la misura. Nessun cursore e nessun colore da collegamento: non si clicca, e non deve invitare a provarci. */ .miniatura-fasi{display:flex;flex-wrap:wrap;align-items:center; gap:var(--spazio-1) var(--spazio-2); margin:var(--spazio-2) 0 0;font-size:.78rem; color:var(--colore-testo-tenue)} .miniatura-fasi__fase{cursor:help} .miniatura-fasi__freccia{color:var(--colore-bordo)} /* L'etichetta accanto alla miniatura, nel Registro. ⚠️ La riga e' un contenitore, quindi un `div`: dentro c'e' un `

` (il partial ne apre uno), e un `

` dentro un `

` non e' HTML valido. */ .miniatura-riga{display:flex;align-items:baseline;flex-wrap:wrap; gap:var(--spazio-1) var(--spazio-3);margin-top:var(--spazio-2)} .miniatura-riga__etichetta{font-weight:600;font-size:.78rem; color:var(--colore-testo-tenue)} /* ⚠️ Il margine superiore ce l'ha la RIGA: lasciandolo anche al partial, le fasi scenderebbero rispetto alla loro etichetta. */ .miniatura-riga .miniatura-fasi{margin:0} /* Il percorso: tappe fatte / corrente / future. Rispecchia gli stati del modello, non una numerazione inventata. */ .tappe{display:flex;list-style:none;margin:var(--spazio-4) 0 0;padding:0; border:1px solid var(--colore-bordo);border-radius:var(--raggio); overflow:hidden} .tappa{flex:1;text-align:center;padding:var(--spazio-3) var(--spazio-2); border-right:1px solid var(--colore-bordo);font-size:.82rem} .tappa:last-child{border-right:none} .tappa__num{display:block;font-weight:700;font-size:.95rem} .tappa--fatto{background:var(--colore-ok-sfondo);color:var(--colore-ok)} .tappa--corrente{background:var(--colore-accento);color:#fff;font-weight:600} .tappa--futuro{color:var(--colore-testo-tenue)} /* ⚠️ LA TAPPA DELLA PAGINA APERTA. `_percorso.html` aggiunge `tappa--aperta` e `tappa--` alla tappa della pagina aperta, e qui ci sono le loro regole. ⭐ **Una classe che non esiste non dà nessun segnale: la riga nel template sembra fare qualcosa, e non fa niente.** ⚠️ L'EVIDENZA È DELLA PAGINA APERTA, non della fase del fattore: chi naviga chiede «dove sono», e lo stato del fattore lo dice il pallino discreto (`.tappa__qui`). Per questo `--aperta` viene DOPO `--fatto`/`--futuro` nel foglio e li sovrascrive. */ .tappa--aperta{ font-weight:700; color:var(--colore-testo); background:var(--colore-superficie); /* ⚠️ Il filetto sotto, non il fondo pieno: il fondo pieno è di `.tappa--corrente`, e due tappe piene direbbero «sei qui» due volte. */ box-shadow:inset 0 -4px 0 var(--colore-accento); } /* ⚠️ Il filetto prende il COLORE DELLA FASE, lo stesso del bordo e del titolo nella pagina sotto: la tappa e la pagina che apre parlano lo stesso colore, e il legame si vede senza spiegarlo. */ .tappa--aperta.tappa--identificazione{ box-shadow:inset 0 -4px 0 var(--colore-fase-identificazione)} .tappa--aperta.tappa--valutazione{ box-shadow:inset 0 -4px 0 var(--colore-fase-valutazione)} .tappa--aperta.tappa--trattamento{ box-shadow:inset 0 -4px 0 var(--colore-fase-trattamento)} .tappa--aperta.tappa--verifica{ box-shadow:inset 0 -4px 0 var(--colore-fase-verifica)} .tappa--aperta.tappa--chiusura{ box-shadow:inset 0 -4px 0 var(--colore-fase-chiusura)} /* ⚠️ LE FASI PRENDONO L'ACCENTO: in una pagina lunga il titolo di una fase deve distinguersi da un titolo qualunque, e il colore forte sta dove sta la struttura del metodo, cioe' dove serve per orientarsi. Colore E dimensione E filetto: mai il colore da solo. */ /* ⚠️ NIENTE MARGINI NEGATIVI per far arrivare la fascia ai bordi del riquadro: `.riquadro` cambia imbottitura fra desktop (spazio-8) e schermo stretto (spazio-6), quindi una fascia "al vivo" sborderebbe su un formato e rientrerebbe sull'altro. Sta dentro l'imbottitura, e non dipende dal formato. */ /* ⭐ **Un titolo che non e' piu' grande del testo non apre una sezione: la annuncia con la stessa voce.** */ .titolo-sezione{font-size:1.2rem;margin-bottom:var(--spazio-4); color:var(--colore-accento-scuro); /* ⚠️ RILIEVO, MA SOBRIO. Tre segni appena: una sfumatura dal chiaro allo scuro, un filo di luce sul bordo alto, un'ombra corta sotto. Non uno smusso: il bassorilievo pieno invecchia male e abbassa la leggibilita' del testo che ci sta sopra, che qui e' il titolo della fase. ⚠️ E SOLO A QUESTO LIVELLO. La profondita' e' un'altra dimensione con cui si legge la gerarchia: se ce l'avessero anche A/B/C tornerebbe a non dire niente. La fase e' in rilievo, cio' che contiene resta piatto. */ background:linear-gradient(180deg, #cfe2ea 0%, var(--colore-fascia-fase) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(27,36,48,.12); border-left:4px solid var(--colore-accento); padding:var(--spazio-2) var(--spazio-3); border-radius:0 var(--raggio) var(--raggio) 0; /* ⚠️ IL MAIUSCOLO, MA SOLO QUI: «se lo usano tutti, nessuno dice piu' a che profondita' sta». Riservato a uno solo, lo dice: e' la fase, il livello piu' alto, e A/B/C scendono al minuscolo. Un segno che distingue vale finche' e' raro. */ text-transform:uppercase;letter-spacing:.05em} /* ⚠️ I TITOLI CHE NON SONO FASI non prendono la fascia. «Percorso» e' la mappa che contiene le fasi, non una di esse: con la banda si dichiarerebbe loro pari, e per di piu' sopra la fila di tappe, che porta gia' lo stesso colore. Un segno che distingue vale finche' e' riservato. ⚠️ MA DEVE RESTARE IN EVIDENZA: senza banda, senza colore e senza maiuscolo, alla stessa dimensione delle sezioni, l'unico titolo che le CONTIENE tutte si leggerebbe come il piu' debole della pagina. Il rilievo arriva da un mezzo DIVERSO dalla fascia: la fascia marca le fasi, la dimensione dice la gerarchia — sopra le fasi, sotto la pagina. ⚠️ LA CLASSE E' USATA DA DUE TITOLI, ed e' voluto: «Processo di gestione del fattore» nella scheda e «I fattori per fase» nell'elenco sono la stessa cosa — il titolo che INTRODUCE la fila delle fasi. Dare la dimensione a uno solo creerebbe una differenza fra due titoli che fanno lo stesso mestiere. */ .titolo-sezione--neutro{background:none;border-left:none; color:var(--colore-testo);padding:0; text-transform:none;letter-spacing:0; box-shadow:none; font-size:1.25rem} /* ⚠️ Il titolo di una sezione che non e' una fase ma un blocco di lavoro: non porta un numero. Con la fascia squadrata in rilievo si dichiarerebbe fase; piatto come «Percorso» sparirebbe. Prende quindi la MEZZA LUNA di A/B/C — il segno del «non e' una fase» — ma alla misura della sezione: corpo pieno e tondo, non il piccolo maiuscolo dei sotto-blocchi. Stessa forma per dire la stessa cosa, scala diversa per dire a che livello sta. */ .titolo-sezione--tondo{ background:var(--colore-fascia-tenue); color:var(--colore-accento-scuro); border-left:3px solid var(--colore-accento); border-radius:999px var(--raggio) var(--raggio) 999px; padding:var(--spazio-2) var(--spazio-3) var(--spazio-2) var(--spazio-4); text-transform:none;letter-spacing:0; box-shadow:none} .titolo-minore{font-size:.92rem;margin:var(--spazio-6) 0 var(--spazio-2); color:var(--colore-testo-tenue);text-transform:uppercase; letter-spacing:.04em} /* ============================================================ TRE GRADINI IN INTENSITA' CALANTE ============================================================ Il maiuscolo e' cio' che segnala "sono un titolo": se lo usano tutti, nessuno dice piu' a che profondita' sta, e la gerarchia si disperde invece di leggersi. La regola applicata: ogni livello cambia su PIU' DI UNA dimensione (sfondo, peso, caso, rientro), e i livelli piu' interni ABBASSANO la voce. Il contrario di quello che verrebbe istintivo, cioe' marcare sempre di piu'. A / B fascia PIENA sfondo accento, testo bianco -> contenitore Causa fascia TENUE sfondo chiaro, barra a lato -> il soggetto Azioni / nessuna fascia tondo, tenue, nessun maiuscolo -> le foglie Verifica Il colore non e' l'unica informazione: la differenza si legge anche in scala di grigi, dal peso e dal rientro. La fascia di A/B e' BASSA e in tinta tenue, non un blocco pieno di colore: deve dire "comincia un contenitore", non catturare l'occhio piu' del contenuto. */ .titolo-minore--tappa{color:var(--colore-accento-scuro); background:var(--colore-fascia-tenue); font-weight:700;font-size:.85rem; /* ⭐ Una FRECCIA piena, simmetrica: **un'asimmetria senza motivo si legge come un errore di rendering, non come una scelta.** ⚠️ LA PUNTA DICE «POI», ed e' vera in F3 (A → B → C → D sono tappe in sequenza) e falsa in F4, dove le due misure sono dichiarate INDIPENDENTI da RF-RV-07: la forma e' la stessa per uniformita'. ⬜ Resta aperto affiancare le due misure della F4 invece di impilarle, cosi' la punta non le metta in fila. ⚠️ `width:fit-content` su un elemento che resta di BLOCCO, e non `inline-block`: la scatola si stringe al testo — su un titolo a piena larghezza la punta finirebbe all'estremo destro della pagina — ma la riga resta sua. Con `inline-block` il primo elemento che segue gli si metterebbe accanto. ⭐ **Quando una proprieta' fa due cose e ne serve una, la strada non e' accettare l'altra.** ⚠️ L'imbottitura destra cresce perche' il testo non entri nella punta. */ display:block;width:fit-content;max-width:100%; border-bottom:none;border-left:3px solid var(--colore-accento); padding:var(--spazio-1) calc(var(--spazio-3) + 14px) var(--spazio-1) var(--spazio-3); border-radius:0; clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); margin:var(--spazio-6) 0 var(--spazio-2); /* ⚠️ MINUSCOLO: il maiuscolo e' della FASE. `.titolo-minore` da cui eredita mette `text-transform:uppercase`: qui va annullato esplicitamente, o l'ereditarieta' lo rimette in piedi. Il carattere e' .85rem perche' il minuscolo, a parita' di corpo, si legge piu' piccolo del maiuscolo: senza il ritocco il livello sembrerebbe sceso di due gradini invece che di uno. */ text-transform:none;letter-spacing:0} /* ============================================================ AZIENDA ATTIVA — selettore nell'intestazione ============================================================ */ .azienda-attiva{display:flex;align-items:center;gap:var(--spazio-2); margin-left:auto;margin-right:var(--spazio-6)} .azienda-attiva__form{display:flex;align-items:center;gap:var(--spazio-2);margin:0} .azienda-attiva__etichetta{font-size:.72rem;text-transform:uppercase; letter-spacing:.04em;color:var(--colore-testo-tenue)} .azienda-attiva__scelta{font-family:inherit;font-size:.9rem; padding:var(--spazio-1) var(--spazio-2);border:1px solid var(--colore-bordo); border-radius:var(--raggio);background:var(--colore-superficie); color:var(--colore-testo);cursor:pointer;max-width:220px} /* Spiegazione della tappa: appare al passaggio del mouse. Dice COSA SERVE per procedere, non solo cos'e' la tappa. */ .tappa{position:relative;cursor:help} .tappa__aiuto{position:absolute;left:50%;top:100%;transform:translateX(-50%); margin-top:var(--spazio-2);width:260px;padding:var(--spazio-3); background:var(--colore-accento-scuro);color:#fff;border-radius:var(--raggio); font-size:.8rem;font-weight:400;line-height:1.4;text-align:left; box-shadow:var(--ombra);opacity:0;pointer-events:none;transition:opacity .12s; z-index:30} .tappa:hover .tappa__aiuto{opacity:1} .tappa--corrente .tappa__aiuto{color:#fff} /* Ruolo sotto il nome utente nell'intestazione */ .navigazione__ruoli{display:block;font-size:.72rem;color:var(--colore-testo-tenue); line-height:1.2} /* ============================================================ FORM DI SETUP — campi in colonna ============================================================ */ .campo{margin-bottom:var(--spazio-4);max-width:32rem} /* Campi di testo lungo: larghi come le tabelle. I campi brevi (codice, edizione) restano stretti: un campo lungo per un dato corto disorienta. */ .campo--largo{max-width:100%} /* ⚠️ IL NOME DEL CAMPO E' PIU' TENUE DEL SUO CONTENUTO: due neri quasi uguali non direbbero quale delle due righe e' la cosa. ⭐ Il grigio secondario tiene **5,7:1** sul bianco: piu' tenue, non meno leggibile. */ .campo label{display:block;font-size:.8rem;font-weight:600; color:var(--colore-testo-tenue); margin-bottom:var(--spazio-1)} .campo input[type="text"],.campo select,.campo textarea{ width:100%;font-family:inherit;font-size:.95rem; padding:var(--spazio-2) var(--spazio-3); border:1px solid var(--colore-bordo-campo);border-radius:var(--raggio); background:var(--colore-superficie);color:var(--colore-testo)} /* ⭐ **Il fondo grigio che distinguerebbe il campo dalla scheda è lo stesso segno con cui mezzo mondo disegna i campi disabilitati**: il campo e' bianco, e a distinguerlo pensa il bordo, che ha il contrasto per farlo. */ .campo input[type="text"]:focus,.campo select:focus,.campo textarea:focus{ outline:2px solid var(--colore-accento);outline-offset:1px} .campo small{display:block;margin-top:var(--spazio-1)} /* Azioni in riga di tabella: pulsanti affiancati */ /* Comandi affiancati su una riga. Sta su un DIV, mai su un . */ .azioni-riga{display:flex;gap:var(--spazio-2);align-items:center} /* ⚠️ IL MARGINE SUPERIORE DI `.comando` NON SERVE IN RIGA: esiste per staccare il pannello da ciò che sta SOPRA, e in una riga di comandi sopra non c'è niente — resterebbe solo a spingere in basso quel controllo rispetto ai suoi vicini. Vale in tre tabelle: categorie, aspetti PI e la F3. */ .azioni-riga .comando{margin-top:0} /* ⚠️ LA CELLA RESTA UNA CELLA: `display:flex` su un `` lo toglie dal layout della tabella — smette di essere una cella e non si allinea piu' con la propria colonna. Il `` porta `.cella-azioni` e il flex sta su un `

` interno: il layout dei comandi appartiene a un contenitore, non all'elemento che regge la struttura della tabella. Stesso principio dello scorrimento orizzontale, che va sul contenitore e non sulla tabella. */ td.cella-azioni{vertical-align:middle} /* ⚠️ MA NON NELLE PARTI INTERESSATE: «Modifica» e «Archivia» si riferiscono alla PI, e stanno al livello della prima riga. `vertical-align:middle` va bene finché la riga è alta quanto una riga: i comandi stanno accanto a ciò che comandano. Qui la cella dei Requisiti contiene un ELENCO, e la riga diventa alta dieci volte tanto — i due pulsanti scivolerebbero a metà, all'altezza di un requisito qualsiasi, e sembrerebbero i comandi di quel requisito. ⭐ La posizione di un comando dichiara il suo oggetto. ⚠️ La regola generale resta: si corregge dove il presupposto («la riga è alta quanto una riga») non vale, non ovunque. */ .riquadro--pi td.cella-azioni{vertical-align:top} /* Elenchi con caselle di spunta (processi proposti, sedi) */ .elenco-spunte{list-style:none;padding:0;margin:0 0 var(--spazio-4)} .elenco-spunte li{padding:var(--spazio-1) 0} .elenco-spunte label{display:flex;align-items:center;gap:var(--spazio-2); font-weight:400;cursor:pointer} .elenco-spunte input[disabled] + *{color:var(--colore-testo-tenue)} /* Legenda sotto le tabelle: spiega cosa fanno le azioni */ .legenda{margin-top:var(--spazio-4);padding:var(--spazio-4); background:var(--colore-sfondo);border-radius:var(--raggio); border:1px solid var(--colore-bordo)} .legenda p{margin:0 0 var(--spazio-2)} .legenda p:last-child{margin-bottom:0} /* Note esplicative sotto i campi: corsivo, stessa famiglia di carattere. Un font diverso aggiungerebbe rumore senza aggiungere informazione. */ .campo small{font-style:italic} /* Campi facoltativi: si marcano QUESTI, non gli obbligatori, perche sono pochi - segnalare tre campi e piu leggero che segnalarne dieci. */ .campo__facoltativo{font-style:normal;font-weight:400; color:var(--colore-testo-tenue);font-size:.78rem;margin-left:var(--spazio-2)} /* ⚠️ LA SORELLA DEL FACOLTATIVO: la marca dei campi obbligatori. ⭐ **Dire solo quali campi sono facoltativi lascia il lettore a dedurre gli altri, e una deduzione su un modulo si verifica solo sbagliando.** ⚠️ Stessa misura e stesso peso della sorella: cambia il COLORE, perche' le due marche si leggono l'una accanto all'altra e la differenza deve essere la cosa che si vede. */ .campo__obbligatorio{font-style:normal;font-weight:600; color:var(--colore-errore);font-size:.78rem;margin-left:var(--spazio-2)} /* Aiuto a richiesta: il testo lungo non deve sommergere il campo da compilare. Chi sa gia' non lo apre; chi e' al primo accesso lo apre una volta.
e HTML standard, nessun JavaScript. */ /* ⚠️ IL PANNELLO APERTO NON SI SOVRAPPONE A CIO' CHE SEGUE: `.aiuto` e `.tabella-contenitore` hanno di loro un margine solo sopra, e un pannello aperto finirebbe contro l'intestazione della tabella. ⚠️ SI CORREGGE QUI, sulla classe, e non in un punto: il difetto e' di specie, e correggerlo dove si vede lascia gli altri esattamente dove sono. Due misure, non una: chiuso e' una riga sola e gli basta un respiro; aperto e' un blocco di testo, e prima del blocco successivo serve piu' aria. ⚠️ La scala e' 1, 2, 3, 4, 6, 8: `--spazio-5` non esiste, e in CSS una variabile inesistente non e' un errore — la dichiarazione viene ignorata. */ .aiuto{margin:var(--spazio-2) 0;font-size:.85rem} .aiuto[open]{margin-bottom:var(--spazio-6)} .aiuto summary{cursor:pointer;color:var(--colore-accento); font-size:.8rem;font-style:italic} .aiuto summary:hover{text-decoration:underline} .aiuto p{margin:var(--spazio-2) 0 0;color:var(--colore-testo-tenue); line-height:1.5} /* DUE tipi di
, che NON devono somigliarsi. `.aiuto` INFORMA -> corsivo tenue: lo apre chi non sa, gli altri lo saltano con l'occhio; `.comando` AGISCE -> apre un form che SCRIVE nel database. Con la stessa forma, un comando sembrava una nota a margine e passava inosservato: "Aggiungi una causa" e "Gli stati di una causa" si leggevano come la stessa cosa. Non e' estetica, e' sapere dove si puo' agire. */ .comando{margin-top:var(--spazio-3)} /* ⚠️ DENTRO UNA CELLA IL MARGINE SOPRA SPEZZA LA RIGA: il comando segue un dato sulla stessa riga — «Rimossa — verificata da … — Modifica» — e uno stacco verticale lo manderebbe a capo da solo. ⚠️ Cambia SOLO il margine: colore, forma e finestra restano quelle di `.comando`, perché è un comando come gli altri. ⭐ *Una variante che cambia più di ciò che il suo nome dichiara diventa un secondo componente.* */ .comando--in-cella{margin-top:0;display:inline-block;vertical-align:baseline} /* La colonna dei comandi di una tabella: stretta quanto il suo pulsante, che non va a capo. Lo spazio lo cede la colonna più larga. */ .cella-comandi{white-space:nowrap;width:1%} .comando summary{cursor:pointer;display:inline-flex;align-items:center; gap:var(--spazio-2);font-size:.82rem;font-weight:600; color:var(--colore-accento);background:var(--colore-superficie); border:1px solid var(--colore-bordo);border-radius:var(--raggio); padding:var(--spazio-1) var(--spazio-3);list-style:none} /* Il triangolino nativo direbbe "espandi"; qui il segno e' +/-, che dice "aggiungi". Va tolto in entrambe le forme: WebKit usa uno pseudo-elemento proprio, gli altri il list-style. */ .comando summary::-webkit-details-marker{display:none} .comando summary::before{content:"+";font-weight:700;line-height:1} .comando[open] summary::before{content:"–"} .comando summary:hover{border-color:var(--colore-accento); background:var(--colore-sfondo)} /* SUGGERIMENTO — il testo che spiega, accanto al campo da compilare. Prima usava `.sottotitolo`, che e' 1.05rem: nato per il sottotitolo di una PAGINA, sotto un titolo grande. Applicato ai suggerimenti gridava piu' del dato che accompagna, cioe' esattamente il contrario del principio "la spiegazione non deve coprire il lavoro". */ .suggerimento{font-size:.8rem;line-height:1.5;max-width:72ch; color:var(--colore-testo-tenue);margin:var(--spazio-2) 0 var(--spazio-3)} /* Sotto una tabella larga quanto il riquadro, la nota le sta alla pari. */ .suggerimento--largo{max-width:none} /* Il DATO registrato non e' un suggerimento e non va rimpicciolito: si legge alla misura del testo. La distinzione conta perche' nella verifica le due cose stanno una accanto all'altra. */ .dato-verifica{font-size:.9rem;line-height:1.55;color:var(--colore-testo); margin:var(--spazio-1) 0} /* Le DUE PARTI del lavoro su una causa: "Azioni" e "Verifica di efficacia". Servono perche' sono due cose di natura diversa - il lavoro fatto, e il giudizio su quel lavoro - e senza etichetta la seconda si leggerebbe come una coda della prima. Piccole e tenui. */ /* TERZO GRADINO — nessuna fascia, ma MAIUSCOLO. ⚠️ Le INTESTAZIONI DI COLONNA delle tabelle non sono maiuscole: nominano un campo, non aprono una parte, e allo stesso rango di queste etichette romperebbero la gerarchia. Il posto in cui una gerarchia si rompe non e' sempre dove la si sta guardando. */ /* ⚠️ PESO 600 E NON 700: il maiuscolo e la spaziatura bastano gia' a dire «qui comincia una parte», e il nero pieno farebbe pesare l'etichetta quanto il contenuto che nomina. ⭐ **Un'etichetta non deve farsi leggere: deve farsi trovare** — sono due lavori diversi, e il secondo si fa con la forma, non con l'inchiostro. */ .etichetta-parte{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em; color:var(--colore-testo-tenue);font-weight:600; margin:var(--spazio-4) 0 var(--spazio-1); padding-bottom:2px;border-bottom:1px solid var(--colore-bordo)} .etichetta-parte:first-of-type{margin-top:var(--spazio-3)} /* Intestazioni di colonna in TONDO grassetto: nominano un campo, non aprono una sezione. In maiuscolo competevano con le etichette di parte. */ .tabella th{text-transform:none;letter-spacing:0;font-weight:700; font-size:.78rem} /* Tabelle compatte: righe brevi, dove l'imbottitura piena allontana fra loro cose che vanno lette insieme. Usata sull'elenco delle cause. */ .tabella--compatta td,.tabella--compatta th{padding-top:var(--spazio-1); padding-bottom:var(--spazio-1);line-height:1.35} /* RIEPILOGO DELLA FASE — le attivita' che la compongono, in cifre e su una riga. NON un secondo percorso: ne basta uno da imparare, e una seconda fila di tappe allungherebbe la pagina proprio mentre si chiede di accorciarla. Dice quanto manca, che e' la domanda vera di chi apre la scheda. */ /* ⚠️ LA RIGA SOTTO IL RIASSUNTO. Il riassunto e' meta-testo: parla di cio' che segue invece di farne parte. Senza uno stacco, la riga si legge come la PRIMA RIGA del contenuto — e in una sezione che comincia con dei dati la confusione e' reale: si crede di aver gia' letto quel che invece sta sotto. ⚠️ SULLA CLASSE, non nei punti in cui compare: i riassunti sono molti, e scritto in linea ritoccarlo vorrebbe dire trovarli tutti. La riga e' `--colore-bordo`, la stessa dei riquadri: separa senza diventare un elemento in piu' da guardare. */ .riepilogo-fase{display:flex;flex-wrap:wrap;gap:var(--spazio-2) var(--spazio-6); margin:0 0 var(--spazio-4);font-size:.85rem; color:var(--colore-testo-tenue); padding-bottom:var(--spazio-3); border-bottom:1px solid var(--colore-bordo)} .riepilogo-fase strong{color:var(--colore-testo)} /* L'etichetta dice che quelle cifre sono un RIASSUNTO e non dati da compilare: senza, la riga si legge come l'inizio del contenuto invece che come una sintesi di cio' che segue. */ .riepilogo-fase__etichetta{text-transform:uppercase;letter-spacing:.05em; font-size:.72rem;font-weight:700;color:var(--colore-accento-scuro)} .riepilogo-fase__etichetta::after{content:":"} /* ============================================================ I RIFERIMENTI — la riga di identita' nella testata ============================================================ Funzione, norme, processo e sede, con i mancanti raccolti in fondo. ⚠️ NON E' `.riepilogo-fase`, anche se si vede allo stesso modo: un riassunto di fase dice A CHE PUNTO E' IL LAVORO di quella fase, i riferimenti dicono CHI E' il fattore. Con la stessa classe `test_ogni_riassunto_ha_la_riga_sotto` conterebbe riassunti che non lo sono. ⚠️ Le due regole si somigliano quasi in tutto, ed e' voluto: **si vedono uguali perche' occupano lo stesso ruolo visivo** — una riga di fatti sotto un titolo. Quello che cambia e' il significato, e per quello serve un nome. */ /* ⚠️ I nomi delle classi seguono l'etichetta «Riferimenti»: un nome di classe che resta indietro rispetto alla parola che descrive fa cercare la cosa sbagliata. */ /* ⚠️ LO STACCO FRA LE VOCI E' `--spazio-8`: il grassetto sta in TESTA a ciascuna voce, e con uno stacco minore il valore tenue dell'una e il nome forte dell'altra si leggerebbero come una cosa sola. ⭐ **Chi sposta l'evidenza rilegga le distanze che essa reggeva.** */ .riferimenti{display:flex;flex-wrap:wrap;gap:var(--spazio-2) var(--spazio-8); margin:var(--spazio-3) 0 0;font-size:.85rem; color:var(--colore-testo-tenue); padding-top:var(--spazio-3); border-top:1px solid var(--colore-bordo)} .riferimenti strong{color:var(--colore-testo)} /* ⚠️ L'EVIDENZA STA SUL NOME, NON SUL VALORE. Qui non si leggono i valori: si controlla CHE CI SIANO, e a guidare l'occhio dev'essere la domanda — che e' la stessa su ogni fattore — non la risposta. */ .riferimenti__voce{color:var(--colore-testo);font-weight:700} /* ⭐ IL BORDO STA SOPRA, non sotto, e non e' un dettaglio: questa riga CHIUDE la testata invece di introdurre cio' che segue. Col bordo sotto avrebbe annunciato la sezione successiva — che e' il percorso delle tappe, con cui non c'entra niente. */ /* ⚠️ L'etichetta sta alla misura della riga: rimpicciolita, maiuscolo e grassetto direbbero «guardami» e la misura direbbe il contrario. A distinguerla bastano il maiuscolo e il colore d'accento. */ .riferimenti__etichetta{text-transform:uppercase;letter-spacing:.05em; font-weight:700;color:var(--colore-accento-scuro)} .riferimenti__etichetta::after{content:":"} /* Titolo di fase sull'elenco: sta sotto il percorso e dice a quale tappa corrisponde la pagina. */ .titolo-fase{margin-top:var(--spazio-6)} /* ============================================================ COMPATTEZZA VERTICALE ============================================================ Lo spazio di una pagina di fase se ne va in tre punti: l'imbottitura di ogni riquadro, il margine dei titoli minori e la distanza fra i riquadri. Si riduce lo SPAZIO, non la gerarchia: i rapporti fra i livelli restano quelli. Se si comprimesse tutto allo stesso modo, la pagina diventerebbe corta e illeggibile — che e' un altro modo di sbagliare, non una soluzione. */ .riquadro{padding:var(--spazio-6)} .riquadro + .riquadro{margin-top:var(--spazio-4)} .contenuto{padding:var(--spazio-6) 0} .titolo-minore{margin-top:var(--spazio-4)} .dati-essenziali{margin-top:var(--spazio-3);gap:var(--spazio-3) var(--spazio-6)} .tappe{margin-top:var(--spazio-3)} .tappa{padding:var(--spazio-2)} /* TAPPE NAVIGABILI — si torna a una tappa gia' percorsa cliccandola. Il collegamento riempie tutta la cella (`display:block` + imbottitura tolta alla `li` e rimessa qui): una zona cliccabile piu' piccola del riquadro che la contiene fa mancare il bersaglio, ed e' il difetto piu' comune delle barre di avanzamento. NON si veste da link: niente sottolineatura, niente colore proprio — la tappa ha gia' un suo colore che dice a che punto sei, e cambiarlo direbbe due cose insieme. Lo dice il cursore, e il rilievo al passaggio. */ /* VALUTAZIONE E SUA STORIA, affiancate. A sinistra la stima di adesso, a destra come ci si e' arrivati: leggerle insieme e' il punto — un livello basso raggiunto in tre passaggi motivati e' un dato, lo stesso livello comparso in un colpo senza motivo e' un'opinione. La colonna della storia e' piu' stretta: e' contesto, non il soggetto. */ .coppia-valutazione{display:grid;grid-template-columns:1fr 1.1fr; gap:var(--spazio-6);align-items:start} @media (max-width:900px){.coppia-valutazione{grid-template-columns:1fr}} /* Il totale del registro: sta accanto al titolo perche' e' la POPOLAZIONE, e le fasi ne sono la distribuzione. In fondo alla pagina avrebbe costretto a ricostruire all'indietro di cosa fossero una parte quei numeri. */ .registro-totale{font-size:1rem;color:var(--colore-testo-tenue); margin:0 0 var(--spazio-2)} .registro-totale strong{color:var(--colore-testo);font-size:1.15rem} /* Gli archiviati stanno FUORI dal registro: il collegamento e' l'unico modo di vederli, e resta tenue perche' non e' lavoro corrente. */ .registro-totale__archiviati{font-size:.85rem;margin-left:var(--spazio-2)} /* MODO FILTRO (elenco fattori): le tappe non dicono "sei qui" ma "quanti ne stanno qui". Nessuna e' futura — sono tutte raggiungibili come filtro — quindi restano neutre, e l'unica marcata e' quella selezionata. */ .tappa--filtro{background:var(--colore-superficie);color:var(--colore-testo)} /* Il numero grande, con sotto l'unita' di misura in piccolo: da solo sarebbe una cifra senza soggetto. La riga sopra la fila lo dice una volta, questa etichetta lo conferma dove l'occhio si posa. */ .tappa__quanti{display:block;font-size:1.1rem;font-weight:700; line-height:1.2;margin-top:var(--spazio-1)} .tappa__quanti::before{content:"N° ";font-size:.68rem;font-weight:400} .tappa__quanti::after{content:" fattori";font-size:.68rem;font-weight:400; letter-spacing:.02em} /* Sulla tappa selezionata lo sfondo e' l'accento: il numero deve restare leggibile sopra di esso. */ .tappa--corrente .tappa__quanti{color:#fff} /* ⚠️ LA SOMMA NON E' UN CONTEGGIO DI FASE, e per questo non riusa `.tappa__quanti`: quella incolla «N° » e « fattori» attorno alla cifra con `::before` e `::after`, parole scritte per una fase. Sulla casella del totale l'etichetta la porta il testo, non il foglio di stile. */ .tappa__totale{display:block;font-size:1.1rem;font-weight:700; line-height:1.2;margin-top:var(--spazio-1)} /* I DUE ESITI DELLA F5. La tappa e' una, gli stati due: monitoraggio e chiusura sono esiti della stessa fase, ma il registro deve continuare a dire quanti fattori sono sorvegliati e quanti chiusi. ⚠️ Solo nel registro: sulla scheda la fila risponde a «dove sono», e due collegamenti alla stessa pagina non direbbero niente. */ .tappa__esiti{list-style:none;margin:var(--spazio-1) 0 0;padding:0; display:flex;gap:var(--spazio-1);font-size:.78rem} .tappa__esito{flex:1} /* ⚠️ IL COLORE SI DICHIARA, NON SI EREDITA. Queste due voci hanno uno sfondo PROPRIO — chiaro — dentro una tappa che, quando è selezionata, è scura con `color:#fff`. Con `color:inherit` erediterebbero il bianco della tappa e sparirebbero nel loro stesso sfondo. ⭐ Due regole corrette una per una — una tappa selezionata è bianca su scuro, un esito è scuro su chiaro — possono essere sbagliate insieme. Un elemento che si porta il proprio sfondo deve portarsi anche il proprio testo. */ .tappa__esito a{display:block;padding:.15rem .3rem;border-radius:3px; text-decoration:none;color:var(--colore-testo); background:var(--colore-superficie)} /* ⚠️ E la stessa cura per il ramo senza collegamento: `
  • ` senza `` quando la voce non è cliccabile. Lì il testo sta sul fondo della tappa, non su `--colore-superficie`, quindi il bianco ereditato è GIUSTO e non si tocca: si dichiara solo il colore della cifra, che ha lo stesso problema. */ .tappa--corrente .tappa__esito a .tappa__esito-quanti{color:var(--colore-testo)} .tappa__esito a:hover{text-decoration:underline} .tappa__esito--corrente a{outline:2px solid var(--colore-accento)} .tappa__esito-quanti{font-weight:700;margin-left:.25rem} /* ============================================================ LE FILE DI FILTRO DEL REGISTRO — verso e fonte ============================================================ ⚠️ NON RIUSA `.tappa__esito`, benché la forma sia quella. Quelle classi appartengono al blocco `.tappa` e vivono DENTRO una tappa: fuori di lì ereditano un contesto che non c'è (lo sfondo scuro della tappa corrente). ⭐ Il segno dell'attivo è lo STESSO di `.tappa--filtro` — la barra sotto — perché è lo stesso mestiere: «di qui l'elenco è ristretto». Due segni diversi per la stessa cosa, su file adiacenti, farebbero cercare una differenza che non c'è. ⚠️ I nomi vengono dal mestiere (filtro), non dal primo uso: le stesse classi reggono la fila dei versanti e quella delle fonti. */ /* ⚠️ LE DUE FILE AFFIANCATE: impilate costerebbero quattro righe per due domande che si leggono insieme. ⭐ `flex-wrap` e non due colonne: su schermo stretto il secondo gruppo torna sotto da solo, senza una soglia scritta a mano da tenere aggiornata. ⚠️ Lo spazio ORIZZONTALE e' piu' largo del verticale (spazio-8 contro spazio-2): fra i due gruppi separa due domande diverse, dentro un gruppo tiene insieme le voci di una sola. */ .filtri-riga{display:flex;flex-wrap:wrap;align-items:flex-start; gap:var(--spazio-2) var(--spazio-8);margin-bottom:var(--spazio-6)} .filtro-gruppo{flex:0 1 auto;min-width:0} /* ⚠️ Il comando di ritorno non ha etichetta sopra, quindi partirebbe dall'alto e resterebbe appeso accanto alle due etichette: `flex-end` lo allinea alla riga delle voci, che e' il piano su cui agisce. */ .filtro-gruppo--ritorno{align-self:flex-end} /* ⚠️ Il margine di coda ce l'ha la RIGA: lasciandolo anche alle file, il gruppo piu' corto trascinerebbe uno spazio che l'altro non ha. */ .filtri-riga .fila-filtro{margin-bottom:0} .fila-filtro{display:flex;gap:var(--spazio-2);flex-wrap:wrap; margin:var(--spazio-2) 0 var(--spazio-6)} .filtro-scelta{display:inline-block;padding:.2rem .55rem;border-radius:3px; text-decoration:none;color:var(--colore-testo); background:var(--colore-superficie);border:1px solid var(--colore-bordo)} .filtro-scelta:hover{text-decoration:underline} .filtro-scelta--attiva{box-shadow:inset 0 -3px 0 var(--colore-accento); font-weight:600} /* «Totale fattori»: non e' una tappa, e' l'assenza di filtro. Il bordo piu' marcato a destra la stacca dalla sequenza, cosi' chi guarda non la conta come una fase in piu'. ⚠️ Col filtro attivo resta MARCATA, proprio quando serve: quando c'e' qualcosa da annullare. */ .tappa--tutte{border-right:2px solid var(--colore-bordo);flex:0 0 auto; min-width:9rem;background:var(--colore-superficie)} .tappa--tutte.tappa--filtro{box-shadow:inset 0 -3px 0 var(--colore-accento); font-weight:600} /* ⚠️ IL COLORE SI DICHIARA, NON SI EREDITA. Senza filtro di fase questa casella prende anche `.tappa--corrente`, che porta `background:var(--colore-accento)` e `color:#fff`. `.tappa--tutte` viene DOPO nel foglio e riscrive il fondo con `--colore-superficie`: se non riscrivesse anche il testo, il numero sarebbe bianco su bianco. ⭐ **Una riparazione non si estende da sola alle sue sorelle**: e' lo stesso caso di `.tappa__esito`, qui sopra. */ .tappa--tutte.tappa--corrente{color:var(--colore-testo)} /* ⚠️ IL SUGGERIMENTO NON C'ENTRA: `.tappa__aiuto` e' un fumetto con fondo SCURO e testo bianco suo. Imporgli da fuori il colore del testo darebbe scuro su scuro. Un elemento che si porta il proprio sfondo non va toccato da fuori. */ .tappa--tutte.tappa--corrente .tappa__totale{color:var(--colore-testo)} .tappa--navigabile{padding:0;cursor:pointer} .tappa__collegamento{display:block;padding:var(--spazio-2); color:inherit;text-decoration:none} .tappa__collegamento:hover{text-decoration:none} .tappa--navigabile:hover{box-shadow:inset 0 -3px 0 var(--colore-accento)} /* Sulla tappa CORRENTE lo sfondo e' gia' l'accento: la stessa riga sarebbe invisibile. */ .tappa--corrente.tappa--navigabile:hover{box-shadow:inset 0 -3px 0 #fff} /* ============================================================ COLORE DELLE FONTI (CE / CI / REQ) ============================================================ Non e decorazione: e CODIFICA. Le tre fonti dei fattori hanno un colore proprio, usato COERENTEMENTE ovunque compaiano - pagina della fonte, colonna fonte nell elenco fattori, scheda del fattore, cruscotto. Vedi il colore e sai da dove viene quel fattore senza leggere. Scelti fuori dalla semantica gia in uso: verde = attivo/opportunita, rosso = rischio/errore, ambra = attenzione. Usarli qui creerebbe ambiguita. ACCESSIBILITA: il colore non e MAI l unica informazione. L etichetta testuale (CE / CI / REQ, o il nome esteso) resta sempre presente, cosi la pagina funziona anche per chi non distingue i colori. REQ E PI CONDIVIDONO IL TERRACOTTA, di proposito: il requisito appartiene alla parte interessata, e sono lo stesso mondo per chi guarda. Restano due nomi perche a colorarsi sono due cose diverse - le pagine delle parti (PI) e la provenienza di un fattore (REQ) - e fonderli obbligherebbe a rinominare tutte le pagine delle parti interessate per un motivo che non le riguarda. */ :root{ --colore-fonte-ce: #026491; /* contesto esterno - il blu del marchio */ /* ⚠️ IL VIOLA E IL BLU SONO QUELLI DEL MARCHIO, L'ARANCIO NO. Il colore del terzo cerchio del marchio, usato come titolo di una pagina («F3 — TRATTAMENTO») accanto al bottone rosso «Cancella», si leggerebbe come un avviso — e in questo prodotto il rosso vuol dire pericolo o rifiuto. Nelle pagine resta il terracotta, piu' marrone, lontano dal rosso d'errore. ⭐ *Un colore del marchio vale nel marchio; nell'interfaccia deve anche non essere scambiato per un altro.* ⚠️ Lo sorveglia `tests/core/test_logo.py`: blu e viola letti DAL marchio, l'arancio dichiarato come eccezione. */ --colore-fonte-ci: #622797; /* contesto interno - il viola del marchio */ --colore-fonte-pi: #9a5a2c; /* parti interessate - terracotta, NON l'arancio del marchio */ --colore-fonte-req: #9a5a2c; /* requisiti di parte - stesso terracotta */ } /* Banda superiore della sezione: orienta senza invadere */ .riquadro--ce{border-top:3px solid var(--colore-fonte-ce)} .riquadro--ci{border-top:3px solid var(--colore-fonte-ci)} .riquadro--pi{border-top:3px solid var(--colore-fonte-pi)} .titolo--ce{color:var(--colore-fonte-ce)} .titolo--ci{color:var(--colore-fonte-ci)} .titolo--pi{color:var(--colore-fonte-pi)} /* Copyright nel pie di pagina. ⚠️ NIENTE `margin-top`: e' l'ultimo pezzo della stessa riga, e un margine lo farebbe scendere di un pelo rispetto al resto. */ .pie__copyright{font-size:.78rem;color:var(--colore-testo-tenue)} /* Valutazione della rilevanza in riga: gate + grado + salva, compatti. Inline perche' e un atto piccolo e frequente: mandare a un'altra pagina per cambiare una tendina sarebbe sproporzionato. */ .rilevanza-form{display:flex;flex-direction:column;gap:var(--spazio-1); align-items:flex-start;margin:0} .rilevanza-form select{font-family:inherit;font-size:.82rem; padding:.15rem .3rem;border:1px solid var(--colore-bordo-campo); border-radius:var(--raggio);background:var(--colore-superficie)} /* Data di inserimento: informazione di servizio, non deve competere col contenuto */ .data{font-size:.82rem;color:var(--colore-testo-tenue);white-space:nowrap} /* Requisiti come sotto-elenco dentro la riga della parte interessata */ .requisiti-cella{min-width:15rem} /* ⚠️ RIGHE COMPATTE: con un requisito su sei righe, la riga di una parte interessata con quattro requisiti diventerebbe alta uno schermo. ⭐ IL GUADAGNO VERO NON E' L'IMBOTTITURA: sono i tre gruppi di `.requisito__norme` (doc. di riferimento, data, norme) che stanno AFFIANCATI invece che incolonnati. Sono metadati brevi, e incolonnati sprecherebbero tre righe per dire tre etichette corte. Vanno a capo da soli se lo spazio non basta. ⚠️ NON si comprime la descrizione del requisito, che e' il contenuto: si comprime cio' che gli sta intorno. Una riga fitta si legge, una descrizione troncata no. ⚠️ `.requisiti li` e' dichiarata UNA volta sola: due dichiarazioni della stessa classe non si sostituiscono, si FONDONO proprieta' per proprieta', e quella che nessuno riscrive sopravvive nascosta. */ .requisiti{list-style:none;padding:0;margin:var(--spazio-2) 0 var(--spazio-1)} .requisiti li{line-height:1.35; padding:var(--spazio-1) 0 var(--spazio-1) var(--spazio-3); border-top:1px solid var(--colore-bordo)} .requisiti li:first-child{border-top:none} .riquadro--pi .tabella td{padding:var(--spazio-2) var(--spazio-3)} .requisiti__azioni{display:flex;gap:var(--spazio-3);align-items:center; margin-top:var(--spazio-1);font-size:.75rem} .requisiti__azioni a,.collegamento-azione{color:var(--colore-accento); background:none;border:none;padding:0;font:inherit;font-size:.75rem; cursor:pointer;text-decoration:none} .requisiti__azioni a:hover,.collegamento-azione:hover{text-decoration:underline} .form-requisito{display:flex;flex-direction:column;gap:var(--spazio-2); margin-top:var(--spazio-2)} /* ⚠️ SELECT E TEXTAREA COME GLI INPUT: senza, prenderebbero il bordo di sistema — diverso da browser a browser e diverso dai campi accanto. ⭐ **Tre controlli che chiedono la stessa cosa devono avere la stessa faccia**, altrimenti la differenza sembra voler dire qualcosa. */ .form-requisito input, .form-requisito select, .form-requisito textarea{font-family:inherit;font-size:.85rem; padding:var(--spazio-1) var(--spazio-2);border:1px solid var(--colore-bordo-campo); border-radius:var(--raggio);background:var(--colore-superficie); color:var(--colore-testo)} /* La regola sopra veste i campi di TESTO. Applicata a un radio o a una casella disegnerebbe bordo e imbottitura attorno al pallino: vanno riportati alla forma nativa, che tutti riconoscono. */ .form-requisito input[type="radio"], .form-requisito input[type="checkbox"]{padding:0;border:none;border-radius:0; width:auto;flex:none;margin:.2rem 0 0} /* Una scelta per riga, col pallino allineato alla PRIMA riga del testo: le tre opzioni portano una spiegazione che puo' andare a capo, e un pallino centrato verticalmente su due righe non sembra piu' appartenere a nessuna. */ .scelta-esito{display:flex;align-items:flex-start;gap:var(--spazio-2); font-size:.85rem;line-height:1.45;cursor:pointer; color:var(--colore-testo)} /* Comandi di avanzamento in una cella di tabella. Ogni comando e' un
    a se' (POST + CSRF, non un link: cambiano lo stato), e un form e' block: senza questo contenitore i bottoni si impilerebbero uno per riga. Contenitore
    e non
    : quest'ultimo non funziona come contenitore flex in Safari. */ .comandi-stato{display:flex;flex-wrap:wrap;gap:var(--spazio-1)} .comandi-stato form{margin:0} /* Nel REGISTRO invece i due testi stanno IMPILATI in una cella sola: li' il problema e' opposto, la larghezza. La marca in testa dice QUALE dei due si sta leggendo: senza, le due righe si distinguerebbero solo per la posizione, e chi scorre dovrebbe ricordarsi l'ordine. */ .riga-marcata{display:block;margin-bottom:var(--spazio-1)} .riga-marcata:last-child{margin-bottom:0} .marca{font-size:.75rem;font-weight:600;text-transform:uppercase; letter-spacing:.04em;color:var(--colore-testo-tenue);margin-right:var(--spazio-1)} /* ⚠️ COME `

    ` E' UN TITOLINO, E VA ATTACCATO A CIO' CHE INTRODUCE. La classe è nata per uno `` in mezzo a una riga, dove i margini verticali non contano; su un paragrafo, con lo spazio uguale sopra e sotto, il titolo galleggerebbe fra il comando precedente e il proprio. ⭐ Più aria SOPRA che sotto: è ciò che lega un'etichetta a quello che segue. È la stessa regola già scritta per `.etichetta-parte`. */ p.marca{margin:var(--spazio-4) 0 var(--spazio-1)} /* LA GUIDA. ⚠️ Il corpo del capitolo arriva da markdown, quindi con tag NUDI: `h2`, `p`, `table`, `strong`. Non si possono aggiungere classi al volo — sarebbe riscrivere il convertitore — quindi si stilano i tag dentro `.testo-guida`. È l'unico punto del foglio dove si fa: altrove le classi ci sono, e stilare i tag renderebbe imprevedibile ogni pagina. ⚠️ Larghezza di lettura limitata: una procedura si legge come un testo, e una riga di 200 caratteri fa perdere il segno tornando a capo. */ .testo-guida{max-width:44rem} .testo-guida h2{font-size:1.3rem;margin:0 0 var(--spazio-3)} /* ⚠️ LA SCALA DEGLI SPAZI E' 1,2,3,4,6,8: `var(--spazio-5)` non esiste. ⭐ **Una scala non contigua si scrive per intero o si sbaglia**: `5` sembra esserci perché c'è `4` e c'è `6`. E nel CSS non fallisce niente: la proprietà collassa e il margine sparisce (lo sorveglia `test_foglio_di_stile.py`). */ .testo-guida h3{font-size:1.05rem;margin:var(--spazio-6) 0 var(--spazio-2)} .testo-guida p{margin:0 0 var(--spazio-3);line-height:1.6} .testo-guida ul{margin:0 0 var(--spazio-3) var(--spazio-4)} .testo-guida li{margin-bottom:var(--spazio-1);line-height:1.6} /* ── Gli schemi del processo ───────────────────────────────────────────── Il capitolo del processo porta degli schemi disegnati con i caratteri di riquadro: F0→F5, le sequenze della F1, la combinazione delle due misure. ⚠️ SONO `

    `: un `
    ` schiaccia gli a capo in spazi, e un disegno fatto
   di righe diventerebbe una riga sola.

   ⚠️ `overflow-x:auto`: la riga più larga è 68 caratteri e la colonna di
   lettura ne tiene circa 80, quindi di norma non scorre — ma su uno schermo
   stretto il disegno non si manda a capo, si fa scorrere. Mandarlo a capo
   vorrebbe dire romperlo. */
.testo-guida pre{
  margin:0 0 var(--spazio-4);
  padding:var(--spazio-3);
  border:1px solid var(--colore-bordo);
  border-radius:var(--raggio);
  background:var(--colore-sfondo);
  overflow-x:auto;
}
.testo-guida pre code{
  font-family:Consolas,"SF Mono",Menlo,monospace;
  font-size:.85rem;
  line-height:1.45;
  white-space:pre;
}

/* ── Le norme scelte nella barra dei filtri ──────────────────────────────
   Il filtro Norma somma invece di sostituire: la tendina aggiunge, queste
   etichette tolgono. Sono collegamenti, così funzionano senza JavaScript. */
.barra-filtri__scelte{display:flex;flex-wrap:wrap;gap:var(--spazio-2);align-items:center}
.filtro-scelto{
  display:inline-flex;
  align-items:center;
  gap:var(--spazio-2);
  padding:2px var(--spazio-2);
  border:1px solid var(--colore-bordo);
  border-radius:var(--raggio);
  background:var(--colore-sfondo);
  color:var(--colore-testo);
  font-size:.85rem;
  text-decoration:none;
}
.filtro-scelto:hover{border-color:var(--colore-accento);color:var(--colore-accento)}

/* Il segno «filtrato» sul titolo di OGNI sezione quando la barra non è vuota.
   Un segno che dice «questi numeri non sono tutti» deve vincere sulla
   distrazione: ha uno sfondo colorato.

   ⭐ AZZURRO E NON GIALLO, ED È UNA SCELTA DI SIGNIFICATO. In questo foglio
   il giallo-ambra è `--colore-attenzione`, e vuol dire *attenzione*: marca le
   scadenze vicine e la fascia media. Usarlo qui direbbe che c'è qualcosa che
   non va, mentre un filtro attivo è una cosa normale — l'utente l'ha scelta.
   ⭐ *Un colore che in questo prodotto significa «attenzione» non può marcare
   una cosa normale: la prima volta si guarda, la seconda si impara a ignorare
   il colore — anche dove significava davvero attenzione.*

   `--colore-accento` è il blu-petrolio dell'enfasi neutra: dice «guarda qui»
   senza dire «preoccupati». */
.segno-filtrato{
  margin-left:var(--spazio-2);
  padding:2px var(--spazio-2);
  border-radius:var(--raggio);
  background:var(--colore-accento);
  color:#fff;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  vertical-align:middle;
  white-space:nowrap;
}

.testo-guida table{border-collapse:collapse;margin:0 0 var(--spazio-4)}
.testo-guida td,.testo-guida th{
  border:1px solid var(--colore-bordo);
  padding:var(--spazio-2) var(--spazio-3);
  text-align:left;
  vertical-align:top;
}

/* L'indice dei capitoli, in cima alla Guida e anche mentre se ne legge uno:
   ⚠️ chi arriva da un collegamento è entrato IN MEZZO al documento, e senza
   l'indice non sa che cosa ci sia intorno. */
.indice-guida ul{margin:0 0 0 var(--spazio-4)}
.indice-guida li{margin-bottom:var(--spazio-1)}


/* La tabella non deve sfondare il contenitore. Lo scorrimento orizzontale va
   messo sul CONTENITORE, non sulla tabella: display:block su un 
   distrugge l'allineamento delle colonne (con una riga sola non si nota, con
   due la tabella collassa). */
.tabella{width:100%;table-layout:auto}
/* Se le colonne non ci stanno, scorre SOLO la tabella: mettere overflow sul
   riquadro faceva scorrere anche le note esplicative sotto. */
.tabella-contenitore{overflow-x:auto;max-width:100%}

/* Gate di rilevanza su ogni requisito: piccolo e in linea, si cambia con un
   gesto solo (niente bottone Salva: il cambio della tendina invia).
   L etichetta accanto dice DI CHI e' questa rilevanza: nella stessa riga se ne
   decidono due, quella della parte e quella del requisito. */
.rilevanza-requisito{display:flex;align-items:baseline;gap:var(--spazio-2);
  margin:var(--spazio-1) 0 0}
.rilevanza-requisito__etichetta{font-size:.78rem;
  color:var(--colore-testo-tenue);white-space:nowrap}
.rilevanza-requisito select{font-family:inherit;font-size:.75rem;
  padding:.1rem .3rem;border:1px solid var(--colore-bordo-campo);
  border-radius:var(--raggio);background:var(--colore-superficie)}
/* Il requisito rilevante si distingue a colpo d'occhio */
.requisiti li.requisito--si{border-left:3px solid var(--colore-ok)}
.requisiti li.requisito--no{opacity:.65;padding-left:calc(var(--spazio-4) + 3px)}
.requisiti li.requisito--da_valutare{padding-left:calc(var(--spazio-4) + 3px)}

/* Norme associate a una fonte o a un fattore: etichette IN COLONNA.

   ⚠️ Il `nowrap` sta sulla SINGOLA etichetta, non sulla cella: un codice come
   "ISO/IEC 27001" non si spezza a meta', ma la cella va a capo fra un'etichetta
   e l'altra. In fila, con tre o quattro norme la cella diventerebbe
   larghissima e spingerebbe le ultime colonne fuori dallo schermo. */
/* Le norme una sotto l'altra, PER GUADAGNARE LARGHEZZA alla tabella.

   ⚠️ NIENTE `display:flex` QUI, ed e' il punto della regola.
   `.norme-cella` sta su un `
    `. Un `` con `display:flex` smette di
   essere una cella di tabella: esce dal box model del `table-layout`, e la
   sua altezza non e' piu' governata dalla riga. Il bordo inferiore della
   cella finisce cosi' a un'altezza diversa da quello delle celle accanto —
   la linea sotto le norme «non allineata con la linea della riga».

   ⚠️ E' LO STESSO ERRORE GIA' DOCUMENTATO SU `td.cella-azioni`, rifatto il
   giorno dopo su una classe nuova. Il commento che lo spiegava stava attaccato
   all'altra classe, e attaccato a una classe si legge solo se si apre quella:
   una lezione annotata nel punto in cui e' successa non protegge il punto
   dove ricapitera'.

   Il risultato si ottiene senza toccare il display della cella: le etichette
   sono `inline-block`, basta farle diventare blocchi larghi quanto il loro
   contenuto. */
.norme-cella .etichetta{
  display:block;
  width:fit-content;
  margin:0 0 var(--spazio-1) 0;
  white-space:nowrap;
}
.norme-cella .etichetta:last-child{margin-bottom:0}

/* Scelta delle norme nel form del requisito, che e' stretto: le caselle in
   COLONNA, cosi non vanno a capo in modo casuale.

   ⚠️ UNA CLASSE, UN POSTO. Due definizioni della stessa classe non si
   sostituiscono, si FONDONO proprieta' per proprieta': un `align-items:center`
   rimasto da un'altra copia, in una colonna, centrerebbe le caselle in
   ORIZZONTALE. */
.norme-scelta{border:1px solid var(--colore-bordo);border-radius:var(--raggio);
  padding:var(--spazio-2) var(--spazio-3);margin:0;display:flex;
  flex-direction:column;align-items:flex-start;gap:var(--spazio-1);
  font-size:.8rem}
.norme-scelta label{display:flex;align-items:center;gap:var(--spazio-2);
  font-size:.82rem;font-weight:400;cursor:pointer}

/* Norme di riferimento del requisito: su una riga, con le etichette che vanno
   a capo insieme solo se lo spazio non basta. Il gate della rilevanza sta su
   una riga sua, cosi i due gruppi non si mescolano. */
/* Le norme su una riga: l'etichetta e' testo normale, i codici sono etichette
   con riquadro e imbottitura. Allineare al CENTRO dava linee di base diverse e
   lo spazio si sommava (gap + imbottitura di ciascuna): si allinea alla linea
   di base e si stringono gli spazi. */
.requisito__norme{display:inline-flex;align-items:baseline;
  gap:var(--spazio-2);margin-top:0;margin-right:var(--spazio-4)}
.requisito__norme .etichetta{margin:0;padding:0;background:none;
  border-radius:0;font-weight:600;font-size:.82rem;color:var(--colore-testo)}


/* Tre righe per requisito, ciascuna su UNA riga: descrizione, documento,
   norme. Non vanno a capo - se lo spazio non basta si scorre in orizzontale,
   perche' spezzare una descrizione ogni tre parole la rende illeggibile. */
.requisito__riga{white-space:nowrap}
.requisito__norme{white-space:nowrap;flex-wrap:nowrap}

/* Titolo del blocco norme: non e' un , perche' Safari non supporta
   display:flex sui fieldset. */
.norme-scelta__titolo{font-size:.78rem;color:var(--colore-testo-tenue)}

/* La DELEGA nel modulo di correzione: staccata dai campi descrittivi da una
   riga sopra e da un fondo appena diverso. Correggere una frase e spostare chi
   risponde di un rischio non devono somigliarsi. */
.blocco-delega{margin-top:var(--spazio-6);padding-top:var(--spazio-4);
  border-top:1px solid var(--colore-bordo)}

/* Utenti e ruoli */
.ruoli-cella{min-width:13rem}
.ruolo-riga{display:flex;align-items:baseline;gap:var(--spazio-2);
  padding:var(--spazio-1) 0;font-size:.9rem}
.form-ruolo{display:flex;flex-direction:column;gap:var(--spazio-2);
  margin-top:var(--spazio-2)}
.form-ruolo select{font-family:inherit;font-size:.85rem;
  padding:var(--spazio-1) var(--spazio-2);border:1px solid var(--colore-bordo-campo);
  border-radius:var(--raggio);background:var(--colore-superficie)}

/* Elenco di spunte su piu colonne: diciotto voci in fila sarebbero una
   colonna lunghissima da scorrere. */
.elenco-spunte--colonne{columns:3;column-gap:var(--spazio-8)}
.elenco-spunte--colonne li{break-inside:avoid}
@media (max-width: 900px){ .elenco-spunte--colonne{columns:2} }
@media (max-width: 600px){ .elenco-spunte--colonne{columns:1} }

/* Avviso su combinazioni di ruoli incoerenti: segnala senza bloccare, quindi
   e' un richiamo discreto e non un errore. */
.avviso-ruoli{background:var(--colore-attenzione-sfondo);
  color:var(--colore-attenzione);border-radius:var(--raggio);
  padding:var(--spazio-2) var(--spazio-3);margin:var(--spazio-2) 0;
  font-size:.82rem;line-height:1.45}

/* Colonna Funzione allineata riga per riga con quella dei Ruoli: stessa
   altezza di riga, cosi ogni funzione sta accanto al proprio ruolo. */
.funzioni-cella{vertical-align:top}
.funzioni-cella .ruolo-riga{min-height:1.9rem}
.ruoli-cella .ruolo-riga{min-height:1.9rem}


/* Unita organizzativa: tendina compatta, si cambia con un gesto */
.unita-cella{vertical-align:top}
.unita-cella select{font-family:inherit;font-size:.82rem;
  padding:var(--spazio-1) var(--spazio-2);border:1px solid var(--colore-bordo-campo);
  border-radius:var(--raggio);background:var(--colore-superficie);max-width:9.5rem}


/* Sei colonne stanno strette: si riducono gli spazi e si lascia andare a capo
   dove serve, invece di far sfondare la tabella. */
.tabella td, .tabella th{padding-left:var(--spazio-2);padding-right:var(--spazio-2)}
.ruolo-riga{flex-wrap:wrap}
.form-ruolo select{max-width:11rem}

/* Elenco degli usi nell'introduzione delle Funzioni */
.elenco-usi{margin:var(--spazio-2) 0 var(--spazio-4) var(--spazio-6)}
.elenco-usi li{margin-bottom:var(--spazio-1)}

/* ============================================================
   TELAIO: barra laterale
   ============================================================
   I capitoli del sistema di gestione stanno a sinistra, non in una barra
   orizzontale: sono tanti e cresceranno (quattordici moduli previsti). */

.barra-laterale{position:fixed;top:0;left:0;bottom:0;width:15rem;
  background:var(--colore-superficie);border-right:1px solid var(--colore-bordo);
  padding:5.5rem var(--spazio-4) var(--spazio-6);overflow-y:auto;z-index:5}
.barra-laterale__gruppo{margin-bottom:var(--spazio-6)}
.barra-laterale__titolo{font-size:.78rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--colore-testo-tenue);
  margin:0 0 var(--spazio-2);font-weight:700}
.barra-laterale__voci{list-style:none;padding:0;margin:0}
.barra-laterale__voci li{margin-bottom:.15rem}
.barra-laterale__voci a,.voce-spenta{display:block;padding:.35rem var(--spazio-2);
  border-radius:var(--raggio);font-size:.88rem;text-decoration:none;
  color:var(--colore-testo)}
.barra-laterale__voci a:hover{background:var(--colore-sfondo);
  color:var(--colore-accento)}

/* Voce spenta: non si puo' ancora usare. Il perche' sta nel titolo al
   passaggio del mouse e nella checklist in home. */
.voce-spenta{color:var(--colore-testo-tenue);opacity:.45;cursor:not-allowed}

/* Riferimento al punto della norma: orienta chi conosce la struttura */
.rif{font-size:.7rem;color:var(--colore-testo-tenue);margin-left:.3rem}

/* Impostazioni in fondo, staccate: sono configurazione, non lavoro */
.barra-laterale__gruppo--impostazioni{margin-top:var(--spazio-8);
  padding-top:var(--spazio-4);border-top:1px solid var(--colore-bordo)}

/* Il contenuto lascia spazio alla barra */
/* ⚠️ La testata NO: corre su tutta la larghezza, col logo all'estrema
   sinistra, sopra la colonna (che per questo parte più in basso). */
body.con-barra .contenuto{margin-left:15rem}
/* ⚠️ La testata resta in alto mentre la pagina scorre, come la colonna: senza,
   in cima alla colonna resterebbe il vuoto lasciato dal logo. */
.intestazione{position:sticky;top:0;z-index:10}
/* ⚠️ Un'ancora (`#azione-…`, `#causa-…`) non deve finire SOTTO la testata:
   dopo un POST si torna dove si è agito, e quel punto si deve vedere. */
html{scroll-padding-top:5rem}

@media (max-width: 900px){
  .barra-laterale{position:static;width:auto;padding:var(--spazio-4);
    border-right:none;border-bottom:1px solid var(--colore-bordo)}
  body.con-barra .contenuto,
  body.con-barra .intestazione__interno,
  body.con-barra .piede{margin-left:0}
  .barra-laterale__gruppo{margin-bottom:var(--spazio-4)}
}

/* ============================================================
   HOME: checklist del setup e scorciatoie
   ============================================================ */

.passi-setup{list-style:none;padding:0;margin:var(--spazio-6) 0 0}
.passo{padding:var(--spazio-4) 0;border-top:1px solid var(--colore-bordo)}
.passo:first-child{border-top:none}
.passo__intestazione{display:flex;gap:var(--spazio-4);align-items:flex-start}
.passo__segno{flex:0 0 1.9rem;height:1.9rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--colore-sfondo);border:1px solid var(--colore-bordo);
  font-size:.85rem;font-weight:700;color:var(--colore-testo-tenue)}
.passo--fatto .passo__segno{background:var(--colore-ok-sfondo);
  border-color:var(--colore-ok);color:var(--colore-ok)}
.passo--bloccante .passo__segno{background:var(--colore-attenzione-sfondo);
  border-color:var(--colore-attenzione);color:var(--colore-attenzione)}
.passo__titolo{font-size:1rem;margin:0 0 var(--spazio-1);
  display:flex;align-items:center;gap:var(--spazio-2);flex-wrap:wrap}
.passo .bottone{margin-top:var(--spazio-2)}
.passo--fatto .passo__titolo{color:var(--colore-testo-tenue)}

/* Scorciatoie: il punto da cui parte il lavoro, coi colori delle fonti */
.scorciatoie{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:var(--spazio-4);margin-top:var(--spazio-6)}
.scorciatoia{display:flex;flex-direction:column;gap:var(--spazio-1);
  padding:var(--spazio-4);border:1px solid var(--colore-bordo);
  border-radius:var(--raggio);text-decoration:none;color:var(--colore-testo);
  border-top-width:3px}
.scorciatoia:hover{background:var(--colore-sfondo)}
.scorciatoia--ce{border-top-color:var(--colore-fonte-ce)}
.scorciatoia--ci{border-top-color:var(--colore-fonte-ci)}
.scorciatoia--pi{border-top-color:var(--colore-fonte-pi)}
/* La definizione in testa a un riquadro: mezza riga la stacca dal resto. */
.scorciatoia__definizione{display:block;margin-bottom:var(--spazio-2)}

/* Home: sempre in cima, evidenziata */
.voce-home{font-weight:600}


/* La barra laterale e il contenitore sommavano i rispettivi margini: il
   contenuto partiva troppo lontano. Con la barra, il contenitore non ha piu'
   bisogno del proprio margine automatico. */
body.con-barra .contenuto > .contenitore,
body.con-barra .intestazione__interno{max-width:none;margin-left:0;
  padding-left:var(--spazio-6);padding-right:var(--spazio-6)}
body.con-barra .contenuto{margin-left:15rem}
/* Anche il pie: la barra e' fissa su tutta l'altezza e senza questo gli
   finisce sotto, tagliando il testo a sinistra. */
body.con-barra .piede{margin-left:15rem}

/* Scelta rischio/opportunita': due opzioni affiancate, non una tendina -
   e' la distinzione piu importante del form. */
/* ⚠️ LE DUE SCELTE NON VANNO A CAPO: «un effetto negativo possibile» deve
   restare accanto a «Rischio», su una riga sola.

   ⭐ `flex:0 1 auto` fa dimensionare la casella SUL CONTENUTO invece che sulla
   riga: il testo si estende a destra fin dove serve e si ferma. Il prezzo è
   che le due caselle non sono larghe uguale — «Rischio» è più corta di
   «Opportunità» — ed è il prezzo giusto: la larghezza uguale sarebbe estetica,
   il testo su una riga sola si legge.

   ⚠️ `flex-wrap` resta sul contenitore: su una finestra stretta le due caselle
   si impilano, che è diverso dall'andare a capo DENTRO una casella. */
.scelta-tipo{display:flex;gap:var(--spazio-4);flex-wrap:wrap}
.scelta-tipo label{display:flex;align-items:baseline;gap:var(--spazio-2);
  padding:var(--spazio-3) var(--spazio-4);border:1px solid var(--colore-bordo);
  border-radius:var(--raggio);cursor:pointer;font-weight:400;
  flex:0 1 auto;white-space:nowrap}
.scelta-tipo label:hover{background:var(--colore-sfondo)}

/* Etichetta sopra un campo nella scheda: stesso stile delle intestazioni dei
   dati essenziali, cosi la scheda si legge in modo uniforme. */
.etichetta-campo{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--colore-testo-tenue);margin:var(--spazio-3) 0 var(--spazio-1);
  font-weight:700}

/* L'origine del fattore in testata: le voci sulla stessa riga.
   ⚠️ La voce col TESTO (l'elemento di contesto, il requisito) e' una frase:
   prende lo spazio che resta e va a capo dentro di se'. Le altre sono larghe
   quanto la loro parola. Su schermo stretto tornano una sotto l'altra. */
.origine--riga{display:flex;flex-wrap:wrap;gap:0 var(--spazio-8)}
.origine--riga .origine__voce{flex:0 1 auto}
.origine--riga .origine__voce--testo{flex:1 1 20rem}

/* Scale di valutazione: cinque opzioni con nome e descrizione, non numeri
   nudi. Sapere che 3 significa "circa una volta all'anno" rende la stima meno
   arbitraria e piu ripetibile fra persone diverse. */
/* ── Le due scale della F2, affiancate ───────────────────────────────────
   Probabilità e conseguenze sono due domande indipendenti che si rispondono
   insieme, e il livello nasce dal loro incrocio: una sotto l'altra si
   leggerebbero in sequenza, e chi scorre non confronta.

   ⚠️ `auto-fit` con un minimo: su uno schermo stretto tornano in colonna da
   sole. *Due colonne imposte a forza su un telefono non sono due colonne: sono
   una colonna illeggibile.*

   ⚠️ Dentro la griglia la scala perde il suo `max-width`, che era pensato per
   una colonna sola di testo: qui la larghezza la decide la colonna. */
/* ── Il segno sulla tappa della F3 in lavorazione ────────────────────────
   La F3 è una pagina sola con quattro blocchi, e dopo un'azione si ricarica
   identica: la tappa su cui si sta lavorando deve vedersi.

   ⚠️ Non e' ambra: l'ambra direbbe che c'è qualcosa che non va, e non è così —
   è semplicemente il proprio turno. */
/* ⭐ **Due segni che dicono la stessa cosa — «guarda qui» — devono avere lo
   stesso aspetto, e l'unico modo perché restino uguali è che siano la stessa
   regola**: il segno della tappa e quello del passo successivo. Scritta due volte
   divergerebbe al primo ritocco.

   ⚠️ `.passo-adesso` E NON `.passo-dopo`: quest'ultima esiste già (il riquadro
   in fondo a ogni fase, più sotto in questo foglio) e la regola l'avrebbe
   ridipinta a distanza. ⭐ *Una classe nuova con un nome già usato non è una
   classe nuova: è un'alterazione di qualcos'altro.* */
.tappa-adesso,
.passo-adesso{
  margin-left:var(--spazio-3);
  padding:2px var(--spazio-2);
  border-radius:var(--raggio);
  /* ⚠️ ROSSO SUL CARATTERE, NON SUL FONDO: una pastiglia piena rossa in mezzo
     a quattro titoli direbbe «errore» — il rosso, in questo foglio, e'
     `--colore-errore` e segnala i rifiuti. Sul solo carattere dice «guarda
     qui» senza portarsi dietro quel significato. */
  color:var(--colore-errore);
  /* ⚠️ 1rem: piu' grande del titolo della tappa (.85rem), il segno e' la cosa
     piu' grossa della riga. Una dimensione in pagina non si calibra
     ragionando, si calibra guardandola. */
  font-size:1rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  vertical-align:middle;
  white-space:nowrap;
}

/* ⚠️ LE DIFFERENZE DEL PARAGRAFO, e sono solo queste: `.tappa-adesso` sta IN
   RIGA accanto al titolo di una tappa, `.passo-adesso` è un paragrafo per sé.
   Niente rientro a sinistra (non segue un titolo) e l'a capo è permesso:
   «registra l'autorizzazione di spesa» su una riga sola stringerebbe la
   colonna della lavagna. */
.passo-adesso{
  margin-left:0;
  margin-top:var(--spazio-2);
  display:block;
  white-space:normal;
}

/* ⭐ **Un'enfasi dentro un testo già enfatizzato non enfatizza: annulla la
   distinzione che voleva fare.** Il rosso lo porta l'AZIONE, che cambia da
   scheda a scheda; l'etichetta «Il passo successivo:» è identica su ogni scheda —
   ⭐ *ciò che si ripete su ogni riga smette di informare* — e sta in grigio
   tenue.
   ⚠️ Il carattere resta 1rem anche sull'etichetta: cambia il colore e il peso,
   non la misura, altrimenti la riga si spezzerebbe in due altezze. */
.passo-adesso__voce{
  color:var(--colore-testo-tenue);
  font-weight:600;
}

.scale-affiancate{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(24rem, 1fr));
  gap:var(--spazio-6);
  align-items:start;
}
.scale-affiancate .scala{max-width:none}
/* Il titolo della seconda colonna si allinea al primo anche quando quello
   accanto va a capo su due righe. */
.scale-affiancate .titolo-sezione{margin-top:0}

.scala{list-style:none;padding:0;margin:0 0 var(--spazio-6);max-width:44rem}
.scala li{margin-bottom:var(--spazio-1)}
.scala__voce{display:flex;align-items:flex-start;gap:var(--spazio-3);
  padding:var(--spazio-3);border:1px solid var(--colore-bordo);
  border-radius:var(--raggio);cursor:pointer;font-weight:400}
.scala__voce:hover{background:var(--colore-sfondo)}
.scala__voce span span{display:block}
.scala__numero{flex:0 0 1.6rem;height:1.6rem;border-radius:50%;
  background:var(--colore-sfondo);border:1px solid var(--colore-bordo);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:var(--colore-testo-tenue)}

/* Spiegazione del flusso in cima alle pagine delle fonti: dice a cosa serve
   compilare quella pagina, che altrimenti resta un elenco senza scopo. */
.flusso{background:var(--colore-sfondo);border-left:3px solid var(--colore-accento);
  border-radius:var(--raggio);padding:var(--spazio-3) var(--spazio-4);
  margin:0 0 var(--spazio-4);font-size:.9rem;line-height:1.5}

/* Livello di rischio / opportunita': il colore sta sulla FASCIA, non sul
   numero - "15" di per se non dice nulla, "alta" si.
   La scala si ROVESCIA per le opportunita': un'opportunita' di livello alto e
   una buona notizia, un rischio alto no. */
.fascia{display:inline-block;padding:.15rem .6rem;border-radius:99px;
  font-size:.85rem;font-weight:600;text-transform:capitalize}

/* CINQUE fasce. Rischi: piu e alto, piu e grave */
.fascia--r.fascia--molto_bassa{background:#e0f4fa;color:#0e6d84}
.fascia--r.fascia--bassa{background:#e8f5ec;color:#1a7f42}
.fascia--r.fascia--media{background:#fdf9e0;color:#8a6d1f}
.fascia--r.fascia--alta{background:#fdf0e0;color:#a1541f}
.fascia--r.fascia--molto_alta{background:#b4251d;color:#fff}

/* Opportunita': la scala si ROVESCIA - un'opportunita' di livello alto e una
   buona notizia, un rischio alto no. */
.fascia--o.fascia--molto_bassa{background:var(--colore-sfondo);color:var(--colore-testo-tenue)}
.fascia--o.fascia--bassa{background:#e0f4fa;color:#0e6d84}
.fascia--o.fascia--media{background:#fdf9e0;color:#8a6d1f}
.fascia--o.fascia--alta{background:#e8f5ec;color:#1a7f42}
.fascia--o.fascia--molto_alta{background:#1a7f42;color:#fff}

/* Tabella delle scale: campi di testo in linea, si modifica dove si legge */
.tabella-scale input[type="text"]{width:100%;font-family:inherit;
  font-size:.9rem;padding:var(--spazio-1) var(--spazio-2);
  border:1px solid var(--colore-bordo-campo);border-radius:var(--raggio);
  background:var(--colore-superficie)}
.tabella-scale input[type="text"]:focus{
  outline:2px solid var(--colore-accento);outline-offset:1px}
/* Segna i livelli che l'azienda ha personalizzato */
.segno-modificato{color:var(--colore-accento);font-size:1.1rem;
  vertical-align:middle}

/* Matrice 5x5: calcolata dalle scale e dalle soglie, non scritta a mano.
   Fa vedere cosa producono i criteri scelti. */
.matrice{border-collapse:collapse;margin-top:var(--spazio-4)}
.matrice th,.matrice td{border:1px solid var(--colore-bordo);
  padding:var(--spazio-2) var(--spazio-3);text-align:center;font-size:.9rem}
.matrice thead th{background:var(--colore-sfondo);font-size:.8rem}
.matrice tbody th{background:var(--colore-sfondo);font-weight:700;width:3rem}
.matrice td{font-weight:600;min-width:3.4rem;cursor:help}
.matrice__angolo{font-size:.7rem;font-weight:400;
  color:var(--colore-testo-tenue);line-height:1.4;min-width:8rem}
.matrice__freccia{opacity:.5}

/* ============================================================
   CAMPO CONDIZIONATO (SAS-30)
   ============================================================
   Un campo che ha senso solo con una certa scelta a monte. Lo stato spento
   lo mette `campi-condizionati.js`; qui c'e' solo come SI VEDE.

   ⚠️ Attenuato, non nascosto. Sparendo, il modulo cambierebbe forma a ogni
   clic e chi cerca quel campo lo crederebbe assente: resta visibile e dice
   di non essere il suo turno. */
.campo-condizionato--spento{opacity:.45}
/* Il campo che da spento SPARISCE: un'etichetta «Perché non è stata efficace»
   sotto un giudizio «Efficace» si legge come una contraddizione. ⚠️ Lo spegne
   lo script: senza JavaScript resta in pagina. */
.campo-condizionato--a-scomparsa.campo-condizionato--spento{display:none}
.campo-condizionato--spento input,
.campo-condizionato--spento textarea,
.campo-condizionato--spento select{cursor:not-allowed;background:var(--colore-sfondo)}

/* ============================================================
   IL COLORE DELLA PROVENIENZA SUL CODICE
   ============================================================
   I tre colori di CE / CI / REQ stanno sui fattori, con un secondo canale per
   chi il colore non lo distingue: colore + sigla.

   ⚠️ IL SECONDO CANALE E' IL CODICE STESSO, e per questo NON si aggiunge una
   pastiglia accanto. Il codice si apre gia' con la sigla — `CE-005-R-001` —
   quindi una pastiglia «CE» a fianco stamperebbe DUE VOLTE la stessa cosa
   sulla stessa riga.

   Colorando il codice si ottengono i due canali in un oggetto solo: il colore
   per l'occhio, le lettere per chi il colore non lo distingue.

   ⚠️ SELETTORE SUL LINK, non solo sulla cella. Nell'elenco il codice e' dentro
   un ``, e `a{color:var(--colore-accento)}` vincerebbe su una regola messa
   sul ``: la colorazione non si vedrebbe, e in CSS questo non e' un
   errore — e' un'assenza silenziosa. */
.codice--ce,a.codice--ce{color:var(--colore-fonte-ce)}
.codice--ci,a.codice--ci{color:var(--colore-fonte-ci)}
.codice--req,a.codice--req{color:var(--colore-fonte-req)}

/* ------------------------------------------------------------
   IL TERZO CANALE: UN GLIFO DAVANTI
   ------------------------------------------------------------
   ⚠️ SI RICONOSCE UNA FORMA PRIMA DI LEGGERE DUE LETTERE. Colore e sigla
   bastano per l'accessibilita'; il glifo serve alla VELOCITA' DI SCANSIONE in
   un elenco lungo, e regge anche stampato in bianco e nero.

   ⚠️ GLIFI UNICODE, NON ICONE. IntegraSG non ha un sistema di icone, e
   aggiungerlo (font o sprite SVG) sarebbe una dipendenza nuova. Questi costano
   zero.

   ⚠️ SILHOUETTE DISTINTE, non pieno/vuoto della stessa forma: a colpo d'occhio
   ◆ e ◇ non si distinguono, ◆ ■ ● si'.

   ⚠️ `/ ""` E' IL TESTO ALTERNATIVO VUOTO: il glifo e' decorazione ridondante —
   la sigla c'e' gia' nel codice — e un lettore di schermo che dicesse «rombo
   nero CE trattino zero zero cinque» leggerebbe rumore. */
.codice--ce::before{content:"\25C6\00A0" / ""}
.codice--ci::before{content:"\25A0\00A0" / ""}
.codice--req::before{content:"\25CF\00A0" / ""}

/* ============================================================
   LINEA TEMPORALE DELLE AZIONI
   ============================================================
   ⚠️ Le percentuali arrivano dalla rotta, gia' calcolate: qui c'e' solo come
   si vede. Nessun JavaScript — vedi SAS-30. */
.timeline{display:flex;flex-direction:column;gap:var(--spazio-2);
  margin:var(--spazio-3) 0}
/* ⭐ **Lo spazio che un elemento occupa e' una dichiarazione di quanto
   conta**: il testo che nomina il lavoro prende quello che serve, la pista ha
   una larghezza sua. */
.timeline__riga{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(12rem,30rem);
  gap:var(--spazio-4);align-items:center;font-size:.85rem}
/* ⚠️ Il nome porta sotto di se' responsabile, stato, scadenza ed eventuale
   ritardo: niente `nowrap` sulla riga intera, o quella seconda riga verrebbe
   tagliata dai puntini invece di andare a capo.
   ⭐ I puntini stanno sulla DESCRIZIONE dell'azione, che puo' essere lunga tre
   righe e schiaccerebbe la pista. */
/* ⚠️ Due righe al massimo, poi i puntini: il testo intero sta nella scheda
   dell'azione, e qui lo spazio serve alla barra. */
.timeline__nome{overflow:hidden;display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.timeline__nome > .tabella__codice{margin-right:var(--spazio-1)}
/* ⚠️ Allineati in alto, non al centro: il nome dell'azione puo' andare su
   piu' righe, e centrarlo farebbe ballare la barra. */
.timeline__riga{align-items:start}
/* La pista e' la scala intera: i tratti ci si posizionano dentro. */
.timeline__colonna{display:block}
/* ⚠️ `display:block` e' necessario: la pista e' uno  dentro la colonna,
   e in linea avrebbe larghezza zero — la barra sparirebbe senza nessun
   errore. */
.timeline__pista{display:block;position:relative;height:1.1rem;
  background:var(--colore-sfondo);border-radius:99px}
/* Le date della barra: una riga sopra (previste) e una sotto (effettive).
   ⚠️ L'altezza e' fissa anche quando la riga e' vuota: le piste di tutte le
   azioni restano alla stessa distanza. */
.timeline__date{display:block;position:relative;height:.95rem;
  font-size:.7rem;line-height:.95rem;color:var(--colore-testo-tenue);
  white-space:nowrap}
.timeline__date > span{position:absolute}
/* ── Una barra sola per azione ───────────────────────────────────────────
   contorno = previsto · pieno = effettivo · rosso = ritardo · righe =
   sospensione.
   ⭐ *I segni sovrapposti si distinguono per FORMA, non solo per colore: chi
   non distingue i colori vede due rettangoli uguali.* */
.timeline__prevista,
.timeline__effettiva,
.timeline__ritardo{position:absolute;top:.2rem;height:.7rem;
  border-radius:99px;box-sizing:border-box}
.timeline__prevista{border:1.5px solid var(--colore-accento)}
.timeline__effettiva{background:var(--colore-accento)}
.timeline__ritardo{background:var(--colore-errore)}
/* ⚠️ A righe e non piena: una fascia piena si leggerebbe come altro lavoro.
   Le righe diagonali dicono «qui è fermo». */
.timeline__sospensione{
  position:absolute;
  top:0;
  bottom:0;
  border-radius:99px;
  background:repeating-linear-gradient(
    135deg,
    var(--colore-attenzione) 0 3px,
    transparent 3px 7px);
  opacity:.75;
}
/* ⚠️ IL SEGNO DI OGGI: una linea sottile, non una barra. Deve farsi trovare
   quando si confronta e sparire quando si legge il resto. */
.timeline__oggi{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:var(--colore-errore);
  opacity:.55;
  border-radius:1px;
}
/* La legenda: un campione per ogni segno presente in pista. */
.timeline__legenda{display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--spazio-1) var(--spazio-2);font-size:.72rem;
  color:var(--colore-testo-tenue)}
.timeline__campione{display:inline-block;width:1.4rem;height:.6rem;
  border-radius:99px;box-sizing:border-box}
.timeline__campione--prevista{border:1.5px solid var(--colore-accento)}
.timeline__campione--effettiva{background:var(--colore-accento)}
.timeline__campione--ritardo{background:var(--colore-errore)}
.timeline__campione--sospensione{background:repeating-linear-gradient(
    135deg,var(--colore-attenzione) 0 3px,transparent 3px 7px)}
.timeline__campione--oggi{width:2px;height:.9rem;border-radius:1px;
  background:var(--colore-errore);opacity:.55}
/* Su schermo stretto il nome va sopra la pista, invece di schiacciarla. */
@media (max-width:40rem){
  .timeline__riga{grid-template-columns:1fr;gap:var(--spazio-1)}
}

/* ============================================================
   IL COLORE DELLA FASE
   ============================================================
   Ogni pagina di fase ha la sua particolarita' visiva, altrimenti sembrano
   tutte uguali.

   ⚠️ STA SUL TITOLO DELLA SEZIONE, non in una fascia sopra: una banda con lo
   stesso testo del titolo che segue direbbe due volte la stessa cosa a due
   centimetri di distanza.

   ⚠️ Il colore vive SOLO qui. La provenienza (CE/CI/REQ) sta sul codice, la
   fascia di rischio sui cartellini: tre linguaggi cromatici che non si
   incontrano mai. */
/* ⭐ LE CINQUE TINTE SONO VARIABILI: il cruscotto le usa per le pastiglie
   delle fasi, e un colore copiato in un altro posto e' quello che un giorno
   resta indietro da solo.
   ⚠️ Il colore della fase vive in DUE posti — la pagina della fase e la sua
   casella sul cruscotto — ma dice la stessa cosa in entrambi: chi clicca
   sulla casella atterra sulla pagina e ritrova la tinta con cui e' partito. */
:root{
  --colore-fase-identificazione:#026491;
  --colore-fase-valutazione:#622797;
  --colore-fase-trattamento:#9a5a2c;
  --colore-fase-verifica:#0f6e56;
  --colore-fase-chiusura:#5f5e5a;
}
.fase > .riquadro{border-left:5px solid var(--colore-bordo)}
.fase--identificazione > .riquadro{border-left-color:var(--colore-fase-identificazione)}
.fase--valutazione     > .riquadro{border-left-color:var(--colore-fase-valutazione)}
.fase--trattamento     > .riquadro{border-left-color:var(--colore-fase-trattamento)}
.fase--verifica        > .riquadro{border-left-color:var(--colore-fase-verifica)}
.fase--monitoraggio    > .riquadro{border-left-color:#854f0b}
.fase--chiusura        > .riquadro{border-left-color:var(--colore-fase-chiusura)}
.fase--identificazione .titolo-sezione{color:var(--colore-fase-identificazione)}
.fase--valutazione     .titolo-sezione{color:var(--colore-fase-valutazione)}
.fase--trattamento     .titolo-sezione{color:var(--colore-fase-trattamento)}
.fase--verifica        .titolo-sezione{color:var(--colore-fase-verifica)}
.fase--monitoraggio    .titolo-sezione{color:#854f0b}
.fase--chiusura        .titolo-sezione{color:var(--colore-fase-chiusura)}

/* ============================================================
   IL CRUSCOTTO (SAS-34)
   ============================================================
   ⚠️ Il colore d'allarme compare SOLO SE IL NUMERO NON E' ZERO. Un «0 azioni
   scadute» in rosso direbbe che c'e' un problema dove non c'e': il rosso deve
   valere qualcosa, e vale solo se non c'e' sempre. */
.cruscotto-fila{display:flex;flex-wrap:wrap;gap:var(--spazio-4)}


/* L'AMBITO in testata: su cosa sono calcolati questi numeri. ⚠️ E' un presidio,
   non una didascalia — e' il solo modo in cui un filtro di dominio sbagliato
   puo' diventare visibile a chi legge, invece di restare un numero plausibile. */
.ambito{display:inline-block;margin:0;padding:.2rem .7rem;border-radius:99px;
  background:var(--colore-fascia-tenue,var(--colore-sfondo));
  border:1px solid var(--colore-bordo);
  font-size:.85rem;color:var(--colore-testo-tenue)}
.ambito strong{color:var(--colore-testo)}

/* Le righe delle fasce 2 e 3: nessun colore, per la ragione detta sopra.
   Etichetta a sinistra, numero a destra, e la riga che le tiene insieme. */
.riga-dato{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--spazio-4);padding:var(--spazio-2) 0;
  border-bottom:1px solid var(--colore-bordo)}
.riga-dato:last-child{border-bottom:none}
.riga-dato__valore{font-weight:700;font-variant-numeric:tabular-nums}

/* ⚠️ IL SOTTOTITOLO CHE DIVENTA UNA SPIEGAZIONE. `.sottotitolo` e' 1.05rem:
   giusto per una riga sotto un titolo, sbagliato per tre capoversi, che a
   quella misura si leggono come un secondo titolo lungo. Quando dentro ci sono
   dei capoversi tornano alla taglia del testo e prendono una larghezza di
   lettura — la spiegazione deve farsi leggere, non annunciarsi. */
.sottotitolo p{font-size:.95rem;max-width:72ch;
  margin-bottom:var(--spazio-2)}
.sottotitolo p:last-child{margin-bottom:0}


/* La riga che dichiara un filtro attivo sull'elenco. ⚠️ Un elenco accorciato
   senza una riga che spieghi perche' e' indistinguibile da un registro quasi
   vuoto — e chi arriva da un collegamento non ha visto il clic. */
.filtro-attivo{display:flex;flex-wrap:wrap;gap:var(--spazio-3);
  align-items:baseline;margin-bottom:var(--spazio-4);
  padding:var(--spazio-2) var(--spazio-3);border-radius:var(--raggio);
  background:var(--colore-errore-sfondo);
  border:1px solid var(--colore-errore)}
.filtro-attivo__testo{color:var(--colore-errore);font-size:.9rem}


/* La matrice dei CONTEGGI e' piu' fitta di quella dei criteri: qui la cella
   porta un numero, non un livello, e la griglia deve stare in una colonna
   stretta accanto all'elenco. */
.matrice--conteggi{width:100%;margin-top:var(--spazio-2);
  margin-bottom:var(--spazio-3)}
.matrice--conteggi td{min-width:0;padding:var(--spazio-2) 0;cursor:help}
.matrice--conteggi th{padding:var(--spazio-1) var(--spazio-2);font-size:.75rem}


/* Etichetta per i soli lettori di schermo. ⚠️ Il campo di ricerca ha un
   segnaposto, e un segnaposto NON e' un'etichetta: sparisce appena si scrive, e
   chi usa un lettore di schermo non lo sente affatto. */
.sr-solo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* «trovato in una causa»: perche' questa riga e' nell'elenco, quando la parola
   cercata non sta in nessuna colonna visibile. */
.trovato-in{display:block;margin-top:2px;font-size:.72rem;font-style:normal;
  color:var(--colore-testo-tenue)}

/* ============================================================
   LA CRONOLOGIA DEL FATTORE
   ============================================================
   ⚠️ LA REGOLA CHE CONTA E' UNA SOLA: `--incerta` NON DEVE SOMIGLIARE
   ALLE ALTRE. Una voce «ultima modifica» sa molto meno di quanto sembra —
   quando la riga e' stata toccata l'ultima volta, non chi, non che cosa,
   non quante volte. Se un giorno la si disegnasse come le altre, questa
   sezione comincerebbe a mentire senza che cambi una parola del testo.

   Le differenze in campo sono TRE, non una: il filetto sparisce, il testo
   passa al tenue, il corsivo. Un solo segno si perde su uno schermo
   scadente o per un daltonico; tre no. E' la stessa logica dei tre gradini
   dei titoli e delle due forme di 
    .
   ============================================================ */
/* ============================================================
   IL CONTORNO — le due gradazioni
   ============================================================
   ⚠️ Le variabili e il ragionamento stanno in cima al file, sotto «IL
   CONTORNO». Qui ci sono solo le due regole che le applicano. */

/* Il passo successivo: guida. Perde la superficie e l'ombra, tiene il bordo —
   ⭐ tratteggiato, perche' dice «questo riquadro non e' un contenitore di
   lavoro, e' una nota». */
.passo-dopo{background:transparent;box-shadow:none;
  border-style:dashed;color:var(--colore-testo-tenue)}
/* ⚠️ L'etichetta resta accento: e' un titolo, e spegnerla renderebbe il
   blocco anonimo invece che quieto. Sono due cose diverse. */
.passo-dopo .bottone{opacity:1}

/* ⚠️ ACCESO QUANDO IL PASSO TOCCA ADESSO: si riprendono il bordo pieno e la
   superficie. Il tratteggio dice «è una nota», e quando il passo è quello
   giusto smette di esserlo. ⭐ *Accendere non è aggiungere un colore: è
   togliere i segni con cui la cosa diceva di essere secondaria.*

   ⚠️ È IL VERDE «avanza», e non è una scelta estetica: in questo prodotto il
   verde è dei comandi che fanno AVANZARE il lavoro, e questo riquadro acceso
   dice esattamente quello. Un petrolio tenue non si distinguerebbe dalla
   cronologia, che ha fondo e bordo grigi: ⭐ *un colore tenue si distingue da
   ciò che gli sta accanto, non dalla propria versione piena.*
   ⚠️ Il rosso resta a `.passo-adesso`: là marca UNA riga in mezzo a molte; un
   riquadro rosso in fondo alla pagina si legge come un errore. */
.passo-dopo--acceso{
  background:var(--colore-ok-sfondo);
  border-style:solid;
  border-color:var(--colore-ok);
  color:var(--colore-testo);
}
.passo-dopo--acceso .etichetta-parte{color:var(--colore-ok)}
/* Il passo che porta a una DECISIONE (verso la F5): acceso come l'altro, ma
   nel blu del marchio. Il verde lì accanto è dell'esito del trattamento. */
.passo-dopo--decisione{
  background:var(--colore-fascia-tenue);
  border-style:solid;
  border-color:var(--colore-accento);
  color:var(--colore-testo);
}
.passo-dopo--decisione .etichetta-parte{color:var(--colore-accento)}

/* La cronologia: traccia. ⚠️ Scende di un peso in piu' del passo successivo, e il
   testo con lei — non e' una scelta estetica: vedi il calcolo del contrasto
   in cima al file. */
.cronologia{margin-top:var(--spazio-6);
  background:var(--colore-contorno-fondo);
  border-color:var(--colore-contorno-bordo);
  box-shadow:none;
  color:var(--colore-contorno-testo)}
.cronologia .cronologia-voce{border-bottom-color:var(--colore-contorno-bordo)}
.cronologia .data,
.cronologia .cronologia-autore{color:var(--colore-contorno-testo)}

.cronologia-voci{list-style:none;margin:var(--spazio-2) 0 var(--spazio-4);
  padding:0}

.cronologia-voce{display:flex;gap:var(--spazio-3);align-items:baseline;
  padding:var(--spazio-2) 0 var(--spazio-2) var(--spazio-3);
  border-left:2px solid var(--colore-accento);
  border-bottom:1px solid var(--colore-bordo);
  font-size:.88rem;line-height:1.5}
.cronologia-voce:last-child{border-bottom:none}
/* L'ora sotto la data, piu' piccola: c'e' solo dove il fatto ha un istante
   registrato. `block` la manda a capo senza un 
     in pagina. */
.cronologia-ora{display:block;font-size:.72rem;line-height:1.2}

/* ⚠️ La data non si sposta: incolonnata, si legge la sequenza scorrendo
   l'occhio in verticale invece di cercarla dentro ogni frase. */
.cronologia-voce .data{flex:0 0 5.5rem;color:var(--colore-testo-tenue);
  font-variant-numeric:tabular-nums}

.cronologia-fatto{flex:1 1 auto}

.cronologia-autore{color:var(--colore-testo-tenue)}

/* Il dettaglio va a capo: e' la descrizione o la motivazione, e messa in
   linea allungherebbe la riga fino a rendere illeggibile la colonna. */
.cronologia-dettaglio{display:block;color:var(--colore-testo-tenue);
  margin-top:var(--spazio-1)}

/* ⚠️ IL LIMITE DI CIO' CHE SI SA, scritto per esteso e non abbreviato in un
   trattino. «Modificato il 22/08» da solo fa credere a UNA modifica fatta da
   qualcuno che la pagina non nomina: sono due cose diverse dal non saperlo. */
.cronologia-limite{display:block;color:var(--colore-testo-tenue);
  font-style:italic;font-size:.82rem;margin-top:var(--spazio-1)}

.cronologia-voce--incerta{border-left-color:transparent;
  color:var(--colore-testo-tenue);font-style:italic}
.cronologia-voce--incerta strong{font-weight:500}


/* ⚠️ Il nome tecnico del permesso: presente per chi lo cerca, invisibile per
   chi non lo cerca. In audit serve a risalire dal comportamento alla regola. */
.codice-tecnico{display:block;font-family:ui-monospace,SFMono-Regular,monospace;
  font-size:.68rem;font-weight:400;color:var(--colore-testo-tenue);
  margin-top:2px;letter-spacing:0}

/* ============================================================
   LA MATRICE DEI PERMESSI: le intestazioni vanno a capo
   ============================================================
   ⚠️ `.tabella th` porta `white-space:nowrap` per tutte le tabelle, ed è
   giusto quasi ovunque: un'intestazione spezzata su due righe di solito è
   un difetto di larghezza, non una scelta. Qui no — le etichette sono
   FRASI («Accettare un rischio fuori criterio di accettazione»), e su una
   riga sola spingerebbero la tabella fuori dallo schermo.

   ⚠️ Si scavalca SOLO qui, con una classe propria, invece di allentare la
   regola globale: `nowrap` altrove protegge date, codici e conteggi, dove
   un a capo separa cose che si leggono insieme. */
.matrice-permessi th{white-space:normal;vertical-align:bottom;
  line-height:1.25;text-transform:none;letter-spacing:0;font-size:.78rem}

/* ============================================================
   IL REGISTRO DEI FATTORI: nove colonne, e le intestazioni vanno a capo
   ============================================================
   ⚠️ Il registro e' l'unica tabella a nove colonne del prodotto: deve stare
   nella finestra senza scorrere lateralmente. `.tabella-contenitore` fa
   scorrere la sola tabella; a doversi adattare e' la TABELLA.

   ⚠️ Intestazioni come «Elemento di contesto e fattore» o «Azioni
   disponibili», senza andare a capo, imporrebbero la loro larghezza alla
   colonna anche quando il contenuto potrebbe stringersi.

   ⭐ Stesso caso e stessa ragione della matrice dei permessi, qui sopra: le
   etichette sono FRASI. Si scavalca con una classe propria e non si allenta
   `.tabella th{white-space:nowrap}`, che altrove protegge date, codici e
   conteggi — dove un a capo separa cose che si leggono insieme. */
.registro-fattori th{white-space:normal;line-height:1.25}

/* ⚠️ Una larghezza MASSIMA, non fissa: senza, il browser distribuisce lo
   spazio in proporzione al testo e la colonna con la frase più lunga si
   prende mezza tabella. Con il limite, le sei colonne restano confrontabili
   — ed è il confronto fra colonne il motivo per cui questa tabella esiste. */
/* ⚠️ Solo la PRIMA colonna è esclusa. Una regola di stile che sopravvive alla
   colonna che proteggeva stringe la colonna sbagliata. */
.matrice-permessi th:not(:first-child){max-width:9rem}

/* La prima colonna (il ruolo) resta su una riga: è un'etichetta breve, e a
   capo si confonderebbe con la riga sotto.

   ⚠️ ALLINEATA A SINISTRA. `.matrice th` centra tutto, e per una matrice di
   spunte è giusto: un ✓ centrato nella sua casella si legge in colonna. I NOMI
   dei ruoli però non si leggono in colonna, si leggono in elenco — centrati
   partirebbero ognuno da un punto diverso e l'occhio dovrebbe ritrovare
   l'inizio a ogni riga. */
.matrice-permessi th[scope="row"]{white-space:nowrap;text-transform:none;
  font-size:.85rem;text-align:left}

/* ⚠️ L'ANGOLO NOMINA I DUE ASSI. «Permessi» va a destra perché punta alla
   fila di intestazioni che comincia lì accanto; «Ruoli» va a sinistra perché
   punta alla colonna che scende sotto. Se si allineassero entrambe allo
   stesso modo indicherebbero la stessa direzione — cioè non indicherebbero
   niente, ed è la posizione a fare metà del lavoro della parola. */
.matrice-permessi__angolo{vertical-align:middle}
.matrice-permessi__asse-colonne,
.matrice-permessi__asse-righe{display:block;font-weight:700;
  color:var(--colore-testo);font-size:.8rem}
.matrice-permessi__asse-colonne{text-align:right}
.matrice-permessi__asse-righe{text-align:left}

/* ============================================================
   LA MATRICE DELLA RILEVANZA DELLE PARTI INTERESSATE
   ============================================================
   ⚠️ `.matrice__cella` la usano due pagine: e' la cella di una matrice, il suo
   contenuto sta al centro. Una classe assente non da' nessun errore, non lascia
   nessun segno, e chi la legge nel template crede che stia facendo qualcosa:
   per questo `test_foglio_di_stile.py` controlla che ogni classe dei template
   esista qui. */
.matrice__cella{text-align:center}

/* L'angolo nomina i due assi: «Aspetti» a destra perche' punta alla fila di
   intestazioni che comincia li' accanto, «Parti interessate» a sinistra
   perche' punta alla colonna che scende sotto. Stessa forma gia' adottata
   sulla matrice dei permessi: due matrici che si leggono allo stesso modo. */
.matrice-rilevanza__angolo{vertical-align:middle}
.matrice-rilevanza__asse-colonne,
.matrice-rilevanza__asse-righe{display:block;font-weight:700;
  color:var(--colore-testo);font-size:.8rem}
.matrice-rilevanza__asse-colonne{text-align:right}
.matrice-rilevanza__asse-righe{text-align:left}

/* ⚠️ Le intestazioni degli aspetti sono FRASI, non sigle: vanno a capo e si
   leggono dal basso, come nella matrice dei permessi. Il limite di larghezza
   tiene le colonne confrontabili — ed e' il confronto fra colonne il motivo
   per cui questa tabella esiste. */
.matrice-rilevanza th{white-space:normal;vertical-align:bottom;
  line-height:1.25;text-transform:none;letter-spacing:0;font-size:.78rem}
.matrice-rilevanza th:not(:first-child){max-width:8rem}

/* ⚠️ LA PRIMA COLONNA E' CENTRATA, a differenza della matrice dei permessi:
   qui le denominazioni sono lunghe, vanno a capo su due o tre righe, e la riga
   e' alta quanto la fila di caselle che le sta accanto. Una cella alta con
   dentro un blocco di testo appoggiato in alto a sinistra si stacca dalle
   crocette con cui va letta.
   ⭐ Due matrici che si assomigliano nella forma non hanno per questo lo stesso
   contenuto: si guarda il caso, non si applica la regola dell'altra.

   ⚠️ La colonna porta la TIPOLOGIA e la denominazione ha la sua: due colonne
   come nel registro qui sopra, cosi' chi passa dall'una all'altra ritrova la
   stessa forma. */
.matrice-rilevanza th[scope="row"]{text-align:center;vertical-align:middle;
  white-space:normal;text-transform:none;font-size:.85rem;max-width:10rem}

/* ⚠️ LA CASELLA OCCUPA LA CELLA INTERA e sta al centro. `display:block` da
   solo allargherebbe il bersaglio del clic a tutta la cella — che e' giusto,
   il quadratino da solo e' tre pixel — ma lascerebbe il quadratino appoggiato
   a sinistra. In una matrice le crocette si leggono IN COLONNA, e una colonna
   di segni non allineati non si legge affatto. */
.matrice-rilevanza__spunta{display:block;cursor:pointer;text-align:center}
.matrice-rilevanza__spunta input{cursor:pointer}

/* La denominazione affianca la tipologia: due colonne come nel registro qui
   sopra, non una cella sola. Centrata come la tipologia — la riga e' alta
   quanto la fila di caselle, e un testo appoggiato in alto a sinistra si
   stacca dalle crocette con cui va letto. */
.matrice-rilevanza__denominazione{text-align:center;vertical-align:middle;
  white-space:normal;max-width:14rem;font-size:.85rem}

/* ⚠️ «Il criterio propone» E' CENTRATA, la decisione no. Non e'
   un'incoerenza: la prima porta un ESITO — una parola sola e un conteggio,
   che si confrontano in colonna come le crocette. La seconda porta un MODULO,
   con una tendina e un campo di testo: centrare dei campi li scollegherebbe
   dalle rispettive etichette. */
.matrice-rilevanza__proposta{text-align:center;vertical-align:middle;
  white-space:normal;min-width:8rem}
.matrice-rilevanza__decisione{text-align:left;vertical-align:top;
  white-space:normal;min-width:11rem}
.matrice-rilevanza__proposta small{display:block;
  color:var(--colore-testo-tenue)}
.matrice-rilevanza__decisione select{font-family:inherit;font-size:.8rem}
.matrice-rilevanza__decisione input[type="text"]{font-size:.8rem}

/* ⚠️ Lo scostamento si vede: e' l'unico posto in cui la pagina dice che due
   dati non concordano, e detto in grigio tenue non lo leggerebbe nessuno. */
/* ⚠️ `small.` nel selettore: senza, `small.sottotitolo` (piu' specifica) le
   toglierebbe il grassetto. */
small.matrice-rilevanza__scostamento{display:block;margin-top:var(--spazio-1);
  color:var(--colore-attenzione);font-weight:600}

/* «Salva gli aspetti» sta nella riga, sotto la proposta del criterio: uno
   stacco lo separa dal conteggio. Su una riga sola: la colonna e' stretta, e
   spezzato in tre parole non si legge come un comando. */
.matrice-rilevanza__proposta .bottone{margin-top:var(--spazio-2);
  white-space:nowrap}

/* ⚠️ «Denominazione PI» centrata in ENTRAMBE le tabelle della pagina Parti
   interessate. Il registro e la matrice della rilevanza mostrano le stesse
   parti in due viste: una colonna allineata in due modi diversi fa perdere la
   riga a chi passa dall'una all'altra.

   ⭐ La classe sta sul `
    		` e sul `` e non su `nth-child`: una regola
   posizionale si rompe in silenzio il giorno che si inserisce una colonna
   prima. */
.pi-denominazione{text-align:center;vertical-align:middle}

/* ⚠️ IL COLLEGAMENTO AGLI ARCHIVIATI. Nel registro dei fattori lo stesso
   collegamento sta DENTRO la riga «N fattori presenti», che gli fa da
   contesto; qui sta da solo in mezzo al bianco, e piccolo e grigio sarebbe
   invisibile. ⭐ Uno stile non si copia senza il suo contesto.

   ⚠️ MA NON DEVE GRIDARE. Non e' un avviso: e' l'unica porta verso qualcosa
   che sta fuori dall'elenco di lavoro. Percio' misura del testo normale e
   colore del collegamento — leggibile e cliccabile — senza riquadri ne'
   colori d'allarme, che lo metterebbero in concorrenza con la tabella. */
.elenco-archiviati{margin:var(--spazio-3) 0 var(--spazio-2);font-size:.95rem}
.elenco-archiviati a{color:var(--colore-accento);text-decoration:none;
  font-weight:600}
.elenco-archiviati a:hover{text-decoration:underline}
/* La freccia dice che si va da un'altra parte, senza aggiungere parole. */
.elenco-archiviati a::after{content:" →"}


/* ⚠️ IL COMANDO IN FONDO E A DESTRA.
   ⭐ Non e' impaginazione: e' l'ordine di lettura. I dati si leggono, POI si
   decide se modificarli — un comando prima dei dati chiede di agire su cio'
   che non si e' ancora visto.

   ⚠️ Il margine sopra lo STACCA dalla lista: senza, si legge come l'ultima
   riga dei dati invece che come una mossa. */
.azioni-in-fondo{justify-content:flex-end;margin-top:var(--spazio-4)}

/* -------------------------------------------------------------------------
   LA FINESTRA MODALE
   -------------------------------------------------------------------------
   Per i moduli lunghi: la pianificazione ha sedici campi, e aperta dentro una
   cella spingerebbe in basso tutte le righe.

   ⚠️ Questi stili valgono per un `` che NON esiste nel sorgente: lo
   costruisce `pannello-in-finestra.js` a partire da un `
    ` già
   funzionante. Senza JavaScript non c'è finestra e non c'è niente da vestire
   — il pannello a fisarmonica resta. Il perché sta in cima a quel file.
   ------------------------------------------------------------------------- */
/* ⚠️ `display` STA SOLO SOTTO `[open]`. Il foglio di stile del browser dice
   `dialog:not([open]){display:none}`; un `display:flex` sulla classe lo
   SOVRASCRIVEREBBE, e `close()` non avrebbe piu' alcun effetto visibile —
   chiuderebbe davvero, ma l'elemento resterebbe a schermo.

   ⭐ **Una proprietà che il browser usa per NASCONDERE non si ridichiara
   sull'elemento, si ridichiara sullo stato in cui deve vedersi.** */
.finestra[open]{display:flex;flex-direction:column}

.finestra{
  width:min(46rem, calc(100vw - 2 * var(--spazio-8)));
  max-height:calc(100vh - 2 * var(--spazio-8));
  padding:0;
  border:1px solid var(--colore-bordo);
  border-radius:var(--raggio);
  box-shadow:0 8px 32px rgba(27,36,48,.18);
  background:var(--colore-superficie);
  color:var(--colore-testo);
  /* ⚠️ Il corpo scorre da solo (`.finestra__corpo`): se scorresse la finestra
     intera, la testata col titolo e la crocetta uscirebbe dallo schermo
     proprio in un modulo lungo — cioè nell'unico caso in cui serve. */
  overflow:hidden;
}
.finestra::backdrop{background:rgba(27,36,48,.45)}

.finestra__testata{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--spazio-4);
  padding:var(--spazio-3) var(--spazio-4);
  border-bottom:1px solid var(--colore-bordo);
  background:var(--colore-sfondo);
  flex:0 0 auto;
}
.finestra__titolo{margin:0;font-size:1rem}

.finestra__chiudi{
  border:0;
  background:none;
  cursor:pointer;
  font-size:1.4rem;
  line-height:1;
  padding:0 var(--spazio-1);
  color:var(--colore-testo-tenue);
}
.finestra__chiudi:hover{color:var(--colore-testo)}

.finestra__corpo{
  padding:var(--spazio-4);
  overflow-y:auto;
}
/* ⚠️ Dentro la finestra il modulo NON è più un comando dentro una cella:
   il margine che lo staccava dal pulsante qui lascia un vuoto in cima. */
.finestra__corpo > .form-requisito{margin-top:0}
.finestra__corpo > :last-child{margin-bottom:0}

/* ── Dentro la finestra: il modulo respira ────────────────────────────────
   Sedici campi tutti uguali si leggono come un elenco da riempire.

   ⚠️ TUTTO QUI SOTTO E' DISCENDENTE DI `.finestra__corpo`, e non è pigrizia:
   gli stessi `
    ` esistono anche nel `
    ` — cioè in ciò che resta
   quando il JavaScript non gira — e lì una griglia a due colonne dentro una
   cella di tabella starebbe stretta. La stessa marcatura, due larghezze.
   ------------------------------------------------------------------------ */
.finestra__corpo .form-requisito{gap:var(--spazio-3)}
.finestra__corpo .form-requisito input,
.finestra__corpo .form-requisito select,
.finestra__corpo .form-requisito textarea{
  font-size:.92rem;
  padding:var(--spazio-2) var(--spazio-3);
}
.finestra__corpo .campo__etichetta{margin-bottom:var(--spazio-1)}
.finestra__corpo .etichetta-parte:first-of-type{margin-top:0}

.finestra-griglia__campo{display:flex;flex-direction:column;gap:var(--spazio-1)}
.finestra__corpo .finestra-griglia{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--spazio-3) var(--spazio-4);
}
/* ⚠️ Sotto i 40rem la finestra è larga quanto lo schermo: due colonne
   diventano due campi troppo stretti per leggerne l'etichetta. */
@media (max-width: 40rem){
  .finestra__corpo .finestra-griglia{grid-template-columns:1fr}
}

.campo-pianificazione{display:flex;flex-direction:column;gap:var(--spazio-1)}
/* ⚠️ IL PASSO FRA I CAMPI DELLA PIANIFICAZIONE, e non quello del modulo. Il
   gap di `.finestra__corpo .form-requisito` vale per OGNI finestra del
   prodotto: stringerlo li' stringerebbe anche moduli che nessuno ha guardato.
   ⭐ Il respiro serve fra le cose diverse, non fra otto campi che sono un gesto
   solo. */
.campi-pianificazione{display:flex;flex-direction:column;gap:var(--spazio-2)}
.finestra__corpo .campo-pianificazione{
  /* ⚠️ Solo la verticale e' ridotta: i fianchi tengono la loro misura,
     perche' a stringere quelli il bordo tocca il testo. */
  padding:var(--spazio-2) var(--spazio-3);
  border:1px solid var(--colore-bordo);
  border-radius:var(--raggio);
  background:var(--colore-sfondo);
}
/* ⚠️ IL NOME DEL CAMPO E LA SUA SCORCIATOIA SULLA STESSA RIGA: sotto il campo
   il pulsante si prenderebbe una riga intera per otto volte. Qui sta dentro il
   riquadro del suo campo, accanto al nome. ⭐ **Quello che conta non e' se il
   pulsante sta sopra o sotto: e' se si vede a quale campo appartiene.**
   ⚠️ `baseline` e non `center`: l'etichetta e la scritta del pulsante hanno
   corpi diversi, e allineate al centro sembrano due righe sbagliate. */
.campo-pianificazione__testata{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--spazio-2);
}
/* ⚠️ Anche in F3-D le scorciatoie stanno sulla riga dell'etichetta, dentro
   `.campo-pianificazione__testata`: lo stesso comando sta nello stesso posto
   nelle due finestre gemelle.

   ⚠️ Resta un contenitore suo, e non i pulsanti sciolti nella testata: in F3-D
   sono DUE («Come previsto» e «Non pertinente»), e senza il `gap` si toccano. */
.campo-pianificazione__scorciatoia{
  display:flex;
  justify-content:flex-end;
  gap:var(--spazio-2);
}
/* ⚠️ LE DUE POSIZIONI DELLA SCORCIATOIA VESTONO UGUALE: e' lo stesso pulsante,
   spostato. Un corpo diverso a seconda di dove sta lo farebbe sembrare un altro
   comando. */
.finestra__corpo .campo-pianificazione__scorciatoia .bottone,
.finestra__corpo .campo-pianificazione__testata .bottone{
  font-size:.78rem;
  padding:2px var(--spazio-2);
}

.finestra__piede{display:flex;justify-content:flex-end;gap:var(--spazio-2)}

/* ── La finestra di CONFERMA ──────────────────────────────────────────────
   Sostituisce il `confirm()` del browser (`conferma-in-finestra.js`).

   ⚠️ Stretta: una conferma è una domanda e due righe di conseguenza. Alla
   larghezza di un modulo da sedici campi il testo si sparpaglia e il pulsante
   finisce lontano dalla frase che lo giustifica.

   ⭐ Il piede è FUORI dal corpo, quindi eredita `.finestra__piede` senza la
   variante appiccicata in basso: qui non c'è niente da scorrere. */
.finestra--conferma{width:min(30rem, calc(100vw - 2 * var(--spazio-6)))}
.finestra--conferma .finestra__corpo{padding-bottom:var(--spazio-2)}
.finestra--conferma .finestra__corpo p{margin:0 0 var(--spazio-3)}
.finestra--conferma .finestra__corpo p:last-child{margin-bottom:0}
.finestra--conferma .finestra__piede{padding:var(--spazio-3) var(--spazio-4)}
/* ⚠️ Attaccato in basso mentre il corpo scorre: «Salva» in fondo a sedici
   campi si raggiunge solo scorrendo, e chi non scorre non sa che c'è. */
.finestra__corpo .finestra__piede{
  position:sticky;
  bottom:calc(-1 * var(--spazio-4));
  margin:var(--spazio-2) calc(-1 * var(--spazio-4)) calc(-1 * var(--spazio-4));
  padding:var(--spazio-3) var(--spazio-4);
  border-top:1px solid var(--colore-bordo);
  background:var(--colore-superficie);
}

/* ── I comandi dell'azione, in fila ───────────────────────────────────────
   Accanto al pulsante può comparire il RIFIUTO, che è una frase: in una
   colonna stretta la frase occupa tutta la larghezza e si porta dietro anche
   il pulsante.

   ⚠️ IL `display:flex` STA QUI, SU UN `
    ` INTERNO, E NON SUL `
    		`.
   Metterlo sulla cella la toglie dal layout della tabella: smette di essere
   una cella e non si allinea più con la propria colonna (vale anche per
   `td.cella-azioni`).
   ------------------------------------------------------------------------ */
.fila-comandi{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--spazio-2);
}
.fila-comandi > .comando{margin-top:0}
.fila-comandi form{margin:0}


/* ⚠️ Avvolge un `