/* =========================================================================== LA TAVOLOZZA DEI RUOLI — 3 settembre 2026 --------------------------------------------------------------------------- Sono i valori del prodotto, presi da documenti/PALETTE_RUOLI_APPLICAZIONE_IMMEDIATA.md e SOLO dalla sezione «Superficie chiara»: il portale e' tutto superficie chiara — non ha header scuro, non ha tessere articolo, non ha glifi. Il resto di quel documento e' dell'iPad e qui non entra. STANNO IN UN POSTO SOLO E PORTANO IL NOME DEL RUOLO, non del colore. E' la stessa ragione per cui il documento vuole il colore sul CONTENITORE e non sull'elemento: un valore scritto a mano in una pagina e' un elemento che nasce fuori regola, e chi lo aggiunge dopo non ha modo di accorgersene. FUORI DA QUESTO BLOCCO NON C'E' NESSUN ESADECIMALE, E A CERCARLO E' IL GANCIO — dal 13 settembre 2026. Fino a quel giorno questa riga diceva «nelle pagine non c'e' nessun esadecimale, ed e' verificabile cercandolo»: era una possibilita', non un controllo, e cercandolo se ne sono trovati nove nelle pagine e una ventina qui dentro. `prove/colore_fuori_tavolozza.py` rifiuta il commit se ne compare uno fuori da `:root` — nei fogli, nelle pagine, E NEI COMMENTI: un valore citato in un commento e' un valore che resta indietro quando il token cambia, e si cita il nome del token. SULL'ARANCIONE L'INCHIOSTRO E' `--selezione-inchiostro`, cioe' il neutro scuro, MAI BIANCO: il bianco misura 3,27:1 e non passa la soglia di 4,5:1. E' l'errore piu' facile da fare qui dentro, perche' un fondo saturo suggerisce il contrario. COSA NON E' UN RUOLO, ed e' scritto perche' non lo si scambi per una dimenticanza: i grigi di LINEA e le SUPERFICI — bordi, filetti, righe alternate, fondo dei riquadri e delle caselle — non stanno nella tavolozza, che dichiara testi e pastiglie. Stanno in fondo a questo blocco, con un nome che dice a cosa servono, e con i valori che avevano. Il giorno in cui il prodotto dara' anche quelli, si cambiano qui. IL DOCUMENTO STA NEL REPOSITORY, E PRIMA NO. Fino al 13 settembre 2026 la riga qui sopra puntava a /Users/pietrobrunoldi/Documents/RISTO/sviluppo/ grafica/ — una cartella che esiste su un Mac solo. Da quando il repository sta su GitHub e si lavora da piu' computer, quel riferimento era gia' rotto per chiunque non fosse il committente: chi avesse voluto verificare un valore non aveva niente da aprire. LA COPIA IN documenti/ E' UN'ISTANTANEA, non la fonte: la fonte resta di chi disegna il prodotto. Presa il 13 settembre 2026, verbatim — verificata identica all'originale con `diff`. Se i due divergono comanda l'originale, e il modo di accorgersene e' rifare quel `diff`: qui non c'e' niente che lo sorvegli, ed e' scritto perche' non lo si creda. E NE ABBIAMO PRESA UNA SECONDA, che a questo file non serve ancora: documenti/TEMA_SCURO_SPEC.md. Il portale e' solo chiaro e il tema scuro non e' deciso; il documento sta li' perche' chi legge il preventivo possa aprirlo. =========================================================================== */ :root { /* I ruoli della superficie chiara: testo, e fondo della pastiglia dove c'e'. */ --neutro-testo: #172029; --neutro-fondo: #EFEFF1; --secondario-testo: #6B7480; --disattivato-testo: #A8B0B6; --disattivato-fondo: #F2F4F5; --conferma-testo: #2F7A3A; --conferma-fondo: #DCEEC4; --informazione-testo: #154C79; --avviso-testo: #85520B; --avviso-fondo: #F8E6C6; --errore-testo: #8E2C1B; --errore-fondo: #F7DAD4; /* Selezione e azione principale. L'inchiostro e' scuro, e non e' una scelta di gusto: e' l'unica combinazione che passa la soglia. */ --selezione-fondo: #E8681C; --selezione-inchiostro: #172029; /* IL FONDO TENUE DELLA SCELTA FATTA (Print Builder, mockup PB-2 approvato da Pietro il 02/11/2026): la scelta grande spuntata ha il bordo della selezione e questo fondo, il pallino resta il segno che non e' solo colore. */ --selezione-tenue: #FFF1E7; /* IL COMANDO SCURO, che nel documento sta fra gli inchiostri sui fondi pieni e qui diventa un ruolo suo. Serve al portale e non al prodotto: la' l'arancione compare una volta per schermata, qui ogni bottone e' un'azione e su certe pagine ce n'e' uno per riga. Se fossero tutti arancioni, «principale» non vorrebbe dire piu' niente. */ --comando-scuro: #2C3A47; --comando-inchiostro: #FFFFFF; --pericolo-inchiostro: #FFFFFF; /* LA SUPERFICIE SCURA, e sono UN'ALTRA FAMIGLIA. Vale in un posto solo — la barra di navigazione — e i suoi valori NON si mescolano con quelli di sopra: il documento e' netto, «mai usare qui i valori da fondo chiaro». Il neutro qui e' BIANCO e non un grigio, perche' un grigio in mezzo a voci bianche non si legge come calmo: si legge come disattivato. */ --scuro-fondo: #172029; --scuro-neutro: #FFFFFF; --scuro-attenuato: #6E7A87; --scuro-pastiglia: #232F3C; /* NON SONO RUOLI, e stanno qui solo per non essere scritti a mano due volte: la linea tenue delle schede e il loro fondo. La tavolozza dichiara testi e pastiglie, non le superfici. */ --linea-tenue: #E4E6E8; --scheda-fondo: #FFFFFF; /* IL RIEPILOGO (25/10/2026, eccezione dichiarata in GUI_PORTALE.md §10): il fondo tenue dell'informazione per l'etichetta «Print Builder», l'azzurro tenue del quarto spicchio dell'anello, e il secondario sulla superficie scura degli «Ultimi ticket» (l'attenuato #6E7A87 sul fondo scuro misura meno di 4,5:1 a 13px). */ --informazione-fondo: #E3ECF5; --anello-tenue: #9FB3C4; --scuro-secondario: #A9B3BE; /* I GRIGI DI SERVIZIO — 13 settembre 2026. Fino a quel giorno stavano scritti a mano nelle regole, nove valori in undici posti, con la testata che li dichiarava «fuori tavolozza» e li lasciava li'. Non sono ruoli neanche adesso: sono qui perche' da oggi un esadecimale fuori da questo blocco e' un errore che il gancio rifiuta, e una regola con undici eccezioni non e' una regola. Il filetto delle celle e quello delle intestazioni erano due grigi diversi e restano due: unificarli e' una decisione sull'aspetto, non una pulizia. */ --linea-tabella: #E6E6E6; /* il filetto sotto ogni cella */ --linea-intestazione: #CFCFCF; /* il filetto piu' marcato sotto le intestazioni */ --riga-alterna: #FAFAFA; /* le righe pari di una tabella */ --campo-bordo: #BBBBBB; /* il bordo di un campo di modulo */ --scostamento-linea: #D0D0D0; /* il filetto a sinistra di uno scostamento */ /* IL FOGLIO STAMPATO E' CARTA: bianco e nero, e lo resterebbe anche il giorno in cui il portale avesse un tema scuro — `TEMA_SCURO_SPEC.md` lo dice dello scontrino, «e' un oggetto, non un pannello», e il foglio del codice e' la stessa cosa. */ --foglio-fondo: #FFFFFF; --foglio-inchiostro: #000000; --foglio-etichetta: #444444; --foglio-linea: #999999; /* ---- LA SCALA TIPOGRAFICA, in un posto solo ---------------------------- Dettata dal committente il 4 settembre 2026, guardando le pagine rese: «corpo, intestazioni, dati e note stanno tutti fra 15 e 17px e non c'e' gerarchia». Era vero, e la ragione era che nessuno aveva mai deciso il corpo: `body` non dichiarava nessun `font-size`, quindi valeva il 16px del browser e tutti i `rem` si misuravano da li'. `.95rem` faceva 15,2px, `1.05rem` 16,8px, `.85rem` 13,6px: sei misure diverse in tre pixel, che a occhio sono una misura sola. SONO IN PIXEL E NON IN `rem`, deliberatamente: la scala deve dire quanto e' grande una cosa, non quanto e' grande rispetto a una radice che nessuno ha dichiarato. E' l'errore di prima, e in `rem` si rifarebbe. IL PESO STA AL DATO E NON ALLA CORNICE: il numero piu' grande della pagina e' un dato (15px, semigrassetto), non un'intestazione di tabella (11px, spenta) ne' il bordo di una scheda. */ --testo-corpo: 14px; /* il corpo, e il valore in una cella */ --testo-nota: 13px; /* le note, in colore secondario */ --testo-tabella: 11px; /* le intestazioni di colonna, in maiuscoletto */ --testo-dato: 15px; /* il dato per cui la pagina esiste */ --testo-sezione: 16px; /* il titolo di una scheda */ --testo-pagina: 24px; /* il titolo della pagina */ /* LE DUE CIFRE DEL CRUSCOTTO, dettate dal committente il 4 settembre 2026 insieme alla forma a riquadri del riepilogo. Non sono un'eccezione della pagina iniziale: sono il ruolo «cifra dentro un riquadro», che vale dove il numero E' il contenuto del riquadro e non il valore di una cella. La grande sta nella prima fascia, dove la cifra e' la cosa che si guarda; la piccola nella seconda, dove i numeri si leggono di seguito. */ --testo-cifra: 22px; /* la cifra di un riquadro che chiede di agire */ --testo-cifra-piccola: 19px; /* la cifra di un riquadro che informa */ /* I DUE VALORI DEL RIEPILOGO, e solo suoi (GUI_PORTALE.md §10, eccezione dichiarata il 25/10/2026). */ --testo-pagina-riepilogo: 30px; --testo-cifra-riepilogo: 28px; --riga-tabella: 40px; /* l'altezza di una riga di elenco */ /* LE BANDIERINE DEL SELETTORE DELLA LINGUA (24 ottobre 2026): i colori ufficiali delle due bandiere, che non sono ruoli della tavolozza e non cambiano col tema. */ --bandiera-it-verde: #008C45; --bandiera-it-bianco: #F4F5F0; --bandiera-it-rosso: #CD212A; --bandiera-gb-blu: #012169; --bandiera-gb-bianco: #FFFFFF; --bandiera-gb-rosso: #C8102E; } html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } a, .btn-link { color: var(--informazione-testo); } /* `.btn-primary`, `.blazor-error-boundary` e `.darker-border-checkbox` NON CI SONO PIU' — 13 settembre 2026. Erano tre regole del modello Blazor, con l'azzurro e il rosso di serie scritti a mano, e nessuna pagina porta quelle classi: erano tre esadecimali fuori tavolozza che non dipingevano niente. */ /* L'ALONE DI SERIE E' TOLTO. Erano due anelli di `box-shadow` — uno bianco e uno azzurro di serie, che è un colore che nella tavolozza non esiste — e sommati al contorno facevano il fuoco doppio e pesante che il committente ha visto il 4 settembre 2026. Il fuoco è UNO: l'anello dichiarato più sotto. */ .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: none; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } /* NIENTE ANELLO SU UN CAMPO «MODIFICATO» — 7 settembre 2026. Era un contorno che compariva SENZA il fuoco, su ogni campo toccato, e restava li' mentre si leggeva la pagina: due segnali della stessa cosa, e quello permanente si legge come un errore. Vale la riga scritta piu' sopra — «il fuoco e' UNO: l'anello dichiarato», ed e' `:focus-visible`, che va e viene col fuoco. `.invalid` resta: non e' un anello di fuoco, e' un errore da vedere. */ .invalid { outline: 1px solid var(--errore-testo); } .validation-message { color: var(--errore-testo); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Back-office: leggibilità e densità prima di tutto. Le quindici schermate del §2 si guardano per otto ore, non si ammirano. */ body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--neutro-testo); margin: 0; } /* --- La navigazione: una colonna a sinistra, fissa ------------------------- Era un'intestazione orizzontale con diciannove voci in fila, che a schermo normale andavano a capo su tre righe. Una colonna regge le voci che arriveranno senza cambiare forma: cresce in altezza, e l'altezza ce l'ha. */ .guscio { display: flex; align-items: flex-start; min-height: 100vh; } /* LA BARRA E' SUPERFICIE SCURA, e i colori si dichiarano QUI, sul contenitore: le voci, il marchio e il bottone «Esci» ereditano. E' la regola del documento — un figlio prende un colore proprio SOLO per uscire dal neutro, e solo con un valore della stessa superficie. Senza, il prossimo elemento aggiunto alla barra nascerebbe col colore del tema, cioe' quasi nero su fondo quasi nero. */ /* IL SELETTORE DELLA LINGUA (22/10/2026), in fondo alla barra e sotto il modulo di accesso: tutte e due superfici scure, quindi i colori sono quelli della barra. L'etichetta e' attenuata; le lingue sono collegamenti nel neutro della superficie; quella corrente non e' sottolineata e ha la pastiglia della voce corrente, come nel menu. */ .lingua { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 1.25rem 0 0; padding: 0 1rem; font-size: .875rem; } .lingua-etichetta { color: var(--scuro-attenuato); } .lingua a { color: inherit; padding: .125rem .375rem; border-radius: .25rem; } .lingua a[aria-current="true"] { text-decoration: none; background: var(--scuro-pastiglia); font-weight: 600; } .accesso .lingua { justify-content: center; color: var(--scuro-neutro); } .lingua a:has(.bandiera) { display: inline-flex; align-items: center; padding: .25rem .375rem; } .bandiera { display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); } .lingua-nome { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .bandiera-it-verde { fill: var(--bandiera-it-verde); } .bandiera-it-bianco { fill: var(--bandiera-it-bianco); } .bandiera-it-rosso { fill: var(--bandiera-it-rosso); } .bandiera-gb-blu { fill: var(--bandiera-gb-blu); } .bandiera-gb-bianco-croce { fill: none; stroke: var(--bandiera-gb-bianco); } .bandiera-gb-rosso-croce { fill: none; stroke: var(--bandiera-gb-rosso); } .barra { position: sticky; top: 0; align-self: stretch; flex: 0 0 13.5rem; box-sizing: border-box; height: 100vh; overflow-y: auto; padding: 1rem 0 1.25rem; border-right: 1px solid var(--scuro-pastiglia); background: var(--scuro-fondo); color: var(--scuro-neutro); } /* IL MARCHIO E' IL LOGO, dal 4 settembre 2026, e porta alla home. NESSUN FONDO E NESSUN BORDO DIETRO: il PNG ha un fondo opaco — decodificato, non dedotto — che e' esattamente `--scuro-fondo`. Un riquadro dietro si vedrebbe proprio perche' i due combaciano. L'ARIA E' 20px SOPRA E SOTTO, e la barra ne mette gia' 16 in cima: qui il `padding-top` e' quindi 4px, e in fondo 20. Fra il logo e la prima voce del menu non deve esserci contatto — un marchio che tocca un collegamento sembra il primo della lista. E AI LATI E' CENTRATO, non appoggiato al margine sinistro: la barra e' larga 13.5rem meno il filetto, cioe' 215px, e il logo centrato lascia la stessa aria dalle due parti. LARGO 160px E NON 180, dal 4 settembre 2026, per ordine del committente: «in cima a una colonna di voci deve essere il punto di quiete, non l'elemento piu' vistoso». A 180 occupava l'84% della larghezza della barra e la dominava; a 160 ne occupa il 74 e lascia 27,5px per parte. */ .marchio { display: block; padding: 4px 0 20px; line-height: 0; } .marchio img { display: block; width: 160px; height: auto; margin-inline: auto; } /* Il fuoco si vede, e non con un contorno arancione su un logo arancione: e' il bianco della superficie scura. */ .marchio:focus-visible { outline: 2px solid var(--scuro-neutro); outline-offset: 2px; } .colonna-menu { display: flex; flex-direction: column; } .gruppo { padding: .3rem 0 .7rem; } /* Il titolo del gruppo NON e' un collegamento e non deve sembrarlo: minuscolo, grigio, spaziato. Se sembrasse cliccabile, cinque voci finte in un menu di sedici vere sarebbero un peggioramento, non un ordine. */ /* L'ETICHETTA DEL GRUPPO E' L'UNICA COSA CHE ESCE DAL NEUTRO, e lo fa con un valore della PROPRIA superficie: `--scuro-attenuato`. Il grigio della superficie chiara qui misurerebbe due volte e mezzo su uno, cioe' non si leggerebbe. */ .gruppo h2 { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--scuro-attenuato); margin: 0 0 .25rem; padding: 0 1rem; } /* `inherit`, E NON UN VALORE: e' la regola del contenitore applicata alla lettera. Le voci non dichiarano un colore, lo prendono dalla superficie. */ .colonna-menu a { display: block; color: inherit; text-decoration: none; padding: .28rem 1rem; border-left: 3px solid transparent; } .colonna-menu a:hover, .colonna-menu a:focus-visible { background: var(--scuro-pastiglia); } /* DOVE SONO ADESSO. Il gruppo dice in che parte del portale sto, questa dice su quale pagina: senza, il raggruppamento risponde a meta' della domanda. */ /* LA VOCE CORRENTE STA SU UNA PASTIGLIA, `--scuro-pastiglia`, e resta bianca: e' la stessa voce, non una voce di un altro genere. Il filetto a sinistra e' bianco perche' su questa superficie il neutro e' bianco. E NON E' ARANCIONE, ed e' deliberato: l'arancione e' la selezione e sulla pagina ce n'e' UNO — il bottone dell'azione principale. Un secondo arancione nel menu se lo mangerebbe. */ .colonna-menu a.active { font-weight: 600; background: var(--scuro-pastiglia); border-left-color: var(--scuro-neutro); } .piede { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--scuro-pastiglia); } .piede form { margin: 0; padding: .28rem 1rem; } /* «Esci» eredita anche lui: `color: inherit`, non un valore. E il fondo resta trasparente, cosi' la regola dei bottoni della superficie chiara — che lo dipingerebbe col comando scuro — non lo raggiunge. */ .piede .esci { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; margin: 0; font: inherit; } main { flex: 1 1 auto; min-width: 0; padding: 1.5rem; max-width: 68rem; } /* Sotto i 900px la colonna diventa una fascia in cima e smette di essere fissa: una barra laterale larga meta' schermo non e' una navigazione. */ @media (max-width: 900px) { .guscio { display: block; } .barra { position: static; height: auto; flex: none; width: auto; border-right: 0; border-bottom: 1px solid var(--scuro-pastiglia); } .colonna-menu { flex-direction: row; flex-wrap: wrap; gap: 0 1.5rem; } .piede { margin-top: 0; border-top: 0; } } /* LO SCHERMO STRETTO, sotto i 640px (incarico menu-390 del 12/11/2026). A 390px il menu aperto occupava una schermata e mezza prima del contenuto: qui si chiude in una testata col logo a sinistra e il pulsante del menu a destra, e si apre sopra la pagina solo a richiesta. Sopra i 640px la casella e il pulsante non esistono a schermo e nulla cambia. Niente JS: una casella nascosta (raggiungibile da tastiera) e la sua etichetta. I colori sono quelli della barra: il pulsante eredita il neutro, e da aperto prende la pastiglia della voce corrente. */ .interruttore-menu, .apri-menu { display: none; } @media (max-width: 640px) { .barra { padding: .5rem 0; } .testata-barra { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 .75rem 0 1rem; } .marchio { padding: 0; } .marchio img { width: 120px; margin: 0; } .interruttore-menu { display: block; position: absolute; right: .75rem; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; } /* «Menu» accanto al segno, a vista (portale.nav_menu.menu, approvato da Pietro il 13/11 06:46): è anche il nome della casella per chi legge lo schermo, perché sta dentro l'etichetta che la nomina. */ .apri-menu { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.75rem; height: 2.75rem; padding: 0 .75rem; border-radius: .375rem; cursor: pointer; } .apri-menu .testo-menu { white-space: nowrap; } .apri-menu:hover { background: var(--scuro-pastiglia); } .interruttore-menu:focus-visible + .apri-menu { outline: 2px solid var(--scuro-neutro); outline-offset: 2px; } .icona-menu, .icona-menu::before, .icona-menu::after { display: block; width: 1.25rem; height: 2px; background: currentColor; border-radius: 1px; } .icona-menu { position: relative; } .icona-menu::before, .icona-menu::after { content: ""; position: absolute; left: 0; } .icona-menu::before { top: -6px; } .icona-menu::after { top: 6px; } .barra:not(:has(.interruttore-menu:checked)) :is(.colonna-menu, .lingua) { display: none; } .barra:has(.interruttore-menu:checked) .apri-menu { background: var(--scuro-pastiglia); } .barra:has(.interruttore-menu:checked) .colonna-menu { margin-top: .75rem; } } h1 { font-size: 1.35rem; margin: 0 0 1rem; } table { border-collapse: collapse; width: 100%; font-size: .95rem; } th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--linea-tabella); } th { font-weight: 600; background: var(--neutro-fondo); } .riga-contesto { font-size: .9rem; color: var(--secondario-testo); margin-bottom: 1rem; } /* I PESI SONO DUE (§1): la pastiglia dell'ambiente stava a 600, che è il terzo. */ .ambiente { padding: .05rem .4rem; border-radius: 8px; font-weight: 500; } /* LE DUE PASTIGLIE DELL'AMBIENTE tengono il significato che avevano — giallo e verde — con i valori della tavolozza: dimostrativo porta l'AVVISO, operativo la CONFERMA. Non e' una rilettura, e' lo stesso segno scritto coi valori del prodotto. */ .ambiente.demo { background: var(--avviso-fondo); color: var(--avviso-testo); } .ambiente.operativo { background: var(--conferma-fondo); color: var(--conferma-testo); } .nota { font-size: .85rem; color: var(--secondario-testo); } /* I TRE GENERI — avviso, errore, riuscito — E DUE FORME. LA NOTA, che e' la forma di serie: testo nel colore del proprio ruolo, un filetto verticale di 2px a sinistra, NESSUN FONDO PIENO. Dettata dal committente il 4 settembre 2026: «il blocco color crema con la barretta a sinistra e' la cosa che fa sembrare vecchio il portale piu' di ogni altra». Ce n'erano circa duecento, e duecento riquadri pieni non sono duecento avvertimenti: sono una pagina a strisce. IL FILETTO PRENDE `currentColor`, cioe' il colore del ruolo, e cosi' il ruolo si dichiara una volta sola per genere. */ .avviso, .errore, .riuscito, .pericolo-riquadro { background: none; padding: 0 0 0 .8rem; border-left: 2px solid currentColor; } .avviso { color: var(--avviso-testo); } .errore { color: var(--errore-testo); } .riuscito { color: var(--conferma-testo); } /* L'ATTO CHE NON SI DISFA — il terzo gradino, il passaggio dei clienti — porta il ruolo dell'errore. La classe c'era gia' nella pagina e NON AVEVA NESSUNA REGOLA: si leggeva come testo normale, cioe' un avvertimento che non avvertiva. */ .pericolo-riquadro { color: var(--errore-testo); } /* IL MESSAGGIO DI ESITO TIENE IL FONDO PIENO, ed e' l'unica cosa che lo tiene insieme ai riquadri del riepilogo. La ragione e' che i due fanno mestieri diversi. Una nota sta sulla pagina sempre, e chi la legge la legge una volta; un esito compare DOPO UN ATTO, una volta sola, e deve farsi trovare da chi sta guardando un altro punto della pagina. Il fondo pieno e' quello che lo fa trovare — ed e' anche la ragione per cui non puo' essere dappertutto. */ .esito { padding: .6rem .8rem; border-left-width: 3px; } .avviso.esito { background: var(--avviso-fondo); } .errore.esito { background: var(--errore-fondo); } .riuscito.esito { background: var(--conferma-fondo); } form label { display: block; margin-bottom: .3rem; font-size: .9rem; } form input { width: 100%; padding: .5rem; border: 1px solid var(--campo-bordo); border-radius: .2rem; font: inherit; } /* I BOTTONI, IN TRE RUOLI E NON IN UNO. Il documento del prodotto dice che l'arancione e' la selezione e l'azione primaria, e sul prodotto compare una volta per schermata. Qui ogni bottone e' un'azione, e su certe pagine ce n'e' uno per riga: dipingerli tutti arancioni vorrebbe dire che nessuno e' il principale. principale UNO per schermata, il fondo selezione con inchiostro scuro ordinario il comando scuro, che e' il difetto e non chiede una classe pericolo disattiva, elimina, revoca, cessa — sul fondo dell'errore L'INCHIOSTRO SULL'ARANCIONE E' SCURO. Il bianco misura 3,27:1. */ form button[type=submit] { margin-top: .8rem; padding: .5rem 1rem; font: inherit; cursor: pointer; border: 1px solid var(--comando-scuro); background: var(--comando-scuro); color: var(--comando-inchiostro); border-radius: .2rem; } /* I due ruoli non stanno sotto `form`: il bottone che elimina un punto vendita sta FUORI dal suo modulo e lo raggiunge con `form="..."`, e un selettore che lo mancasse lo lascerebbe grigio proprio dove serve rosso. */ button[type=submit].principale { background: var(--selezione-fondo); border-color: var(--selezione-fondo); color: var(--selezione-inchiostro); } button[type=submit].pericolo { background: var(--errore-testo); border-color: var(--errore-testo); color: var(--pericolo-inchiostro); } button[type=submit]:disabled { background: var(--disattivato-fondo); border-color: var(--disattivato-testo); color: var(--disattivato-testo); cursor: default; } /* E `pericolo` SU UN TESTO E' LO STESSO RUOLO, non un fondo pieno: due pagine la mettevano gia' su uno `` — i giorni residui di un avviso, «nessuno — non vede niente» sul livello di un utente — e la classe non aveva nessuna regola. Dichiararla su un elemento e non vederla e' il modo in cui una marcatura giusta smette di dire qualcosa. */ :not(button).pericolo { color: var(--errore-testo); } /* IL FUOCO E' UN ANELLO SOTTILE, E UNO SOLO. Due px, staccato di uno dal campo, e il bordo del campo NON cambia: era un bordo scuro più un alone, cioè tre spessori diversi intorno alla stessa cosa, e a occhio si leggeva come un errore invece che come «sei qui». E NON E' ARANCIONE: l'arancione dice «questa è l'azione principale», e un contorno che si sposta a ogni tabulazione lo direbbe di ogni campo. */ :focus-visible { outline: 2px solid var(--comando-scuro); outline-offset: 1px; } /* Stato tecnico. Le celle degli indicatori NON sono riquadri: colorano la parola, che resta leggibile da sé. La regola della pagina è al massimo due riquadri colorati, e quelli sono la freschezza e i codici senza traduzione. */ .cella-ok { color: var(--conferma-testo); font-weight: 600; } .cella-attenzione{ color: var(--avviso-testo); font-weight: 600; } .cella-critico { color: var(--errore-testo); font-weight: 700; } .scostamento { border-left: 3px solid var(--scostamento-linea); padding: .2rem 0 .2rem .8rem; margin: 1rem 0; } .scostamento h3 { margin: 0 0 .3rem 0; font-size: 1rem; } .scostamento p { margin: .3rem 0; } /* Il codice di installazione, l'unica volta che si vede. Grande e monospaziato perché va trascritto a mano quando la fotocamera non legge il simbolo, e l'alfabeto è già senza caratteri ambigui: lo zero e la O non ci sono, l'uno e la I nemmeno. Il trattino separa i gruppi di quattro e NON fa parte del codice. Selezionabile a doppio clic sul gruppo, come un numero di carta. */ .codice-grosso { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.6rem; letter-spacing: .12em; padding: .8rem 1rem; background: var(--neutro-fondo); border: 1px dashed var(--disattivato-testo); border-radius: .3rem; user-select: all; word-break: break-all; /* LARGO QUANTO IL SUO CONTENUTO, non quanto la pagina — 7 settembre 2026. Un PIN di sei cifre dentro un riquadro tratteggiato lungo mille pixel dice «questo riquadro e' importante» invece di «queste sei cifre lo sono». */ display: inline-block; max-width: 100%; } /* LA SCHEDA DEL RIVENDITORE AVEVA UN VOCABOLARIO SUO — `.scheda`, `.riquadro`, `table.conti` — nato prima del documento della grafica: un bordo grigio scritto a mano, angoli da `.3rem`, titoli a peso 600, e una tabella per le coppie etichetta/valore. E' sparito il 4 settembre 2026 insieme alle due pagine che lo usavano: adesso sono `.pannello` dentro `.griglia-riquadri`, e le coppie sono `scheda-dati` (§4.2). Cioe' le stesse cose dette una volta sola. */ /* =========================================================================== ASPETTO — 2 settembre 2026. SOLO CSS: nessun modulo, nessun campo nascosto, nessun gestore toccato. Se dopo questo blocco una prova cade o l'istantanea cambia, e' stato toccato piu' del foglio di stile. =========================================================================== */ /* ---- 1. La colonna del contenuto ----------------------------------------- Una riga di testo lunga quanto lo schermo non si legge: l'occhio perde il capo riga. Il contenuto si ferma a ~1100px e resta ATTACCATO A SINISTRA, sotto la barra di navigazione, con il suo margine — non si centra, o le tabelle larghe ballerebbero rispetto a quelle strette. */ main { max-width: 1100px; margin-right: auto; } /* IL PRINT BUILDER USA TUTTA LA LARGHEZZA (mockup Componi v4, 02/11/2026): tre colonne non stanno in 1100px, e la terza veniva tagliata a destra. */ main:has(.editor-stampa) { max-width: none; margin-right: 0; } /* I CAMPI BREVI NON SI ALLARGANO. Un codice di cinque lettere in una casella larga mille pixel dice a chi scrive che ci si aspetta molto di piu'; la larghezza di un campo e' un'istruzione, e va detta giusta. */ form input { max-width: 420px; } /* I CAMPI LUNGHI SI', e sono quelli in cui si scrive una frase: il motivo di una disdetta, di una revoca, di una chiusura, il testo di un avviso. Sono nominati uno per uno perche' la differenza non e' di tipo — sono tutti `input type=text` — ma di CONTENUTO ATTESO. */ #motivo, #perche, #testo, #causa { max-width: 46rem; } /* ---- 2. La scala tipografica --------------------------------------------- Il titolo di pagina era 1.35rem e i titoli di sezione arrivavano dal valore predefinito del navigatore, 1.5rem: piu' grandi del titolo che li contiene. Su `Assegnazioni` si vedeva a occhio — «Cambiare rivenditore» pesava piu' di «Chi assiste quale punto vendita». Le due eccezioni restano dove sono: `.gruppo h2` nella barra e `.riquadro h2` nelle schede sono ETICHETTE, non titoli, e hanno una regola propria piu' specifica che questa non tocca. */ h1 { font-size: 1.5rem; line-height: 1.25; } h2 { font-size: 1.15rem; line-height: 1.3; margin: 1.6rem 0 .5rem; } h3 { font-size: 1rem; line-height: 1.35; margin: 1.2rem 0 .35rem; } /* ---- 3. Le note esplicative ---------------------------------------------- Corpo piu' piccolo e colore attenuato ce l'avevano gia'. Mancavano le due cose che le rendono leggibili: una MISURA — circa 65 caratteri, oltre i quali una riga piccola e grigia diventa faticosa — e la VICINANZA a cio' che spiegano. Una nota staccata dal proprio elemento sembra un capoverso nuovo, e chi legge non sa piu' a che cosa si riferisce. */ .nota { max-width: 65ch; line-height: 1.5; margin-top: .3rem; } /* E LA MISURA VALE PER TUTTA LA PROSA, non solo per le note — 7 settembre 2026. Un paragrafo normale prendeva tutta la larghezza di `main`, cioe' quasi il doppio: sulla stessa pagina convivevano due lunghezze di riga, e l'occhio a fine riga non ritrovava l'inizio della successiva. 65ch e' la misura gia' dichiarata qui sopra e per `details.spiegazione`: adesso e' una sola. */ .pagina-schede :is(p, .avviso, .errore, .riuscito) { max-width: 65ch; } label + .nota, input + .nota, select + .nota, form + .nota, table + .nota, p + .nota, div + .nota { margin-top: .35rem; } /* IL RIQUADRO GIALLO RESTA, e smette di essere il blocco piu' alto della pagina: stesso testo, corpo piu' piccolo e righe piu' fitte. Il foglio di stile puo' fargli occupare meno spazio, non puo' accorciarlo — quello sarebbe riscrivere la pagina, e non e' questo giro. */ .avviso, .errore { font-size: .9rem; line-height: 1.45; padding: .55rem .75rem; } /* Regola 76: un errore col codice ha il titolo («POR-428 · Carattere non ammesso») su una riga sua, sopra il messaggio. */ .errore-titolo { display: block; } /* LO STATO DI UNA STAMPANTE NELLA SUA CELLA (Stampanti del punto vendita, 08/11): la parola nel colore del ruolo, senza il filetto della nota — in una riga di tabella il filetto sarebbe una striscia per riga. */ .stato-stampante.pronta { color: var(--conferma-testo); } .stato-stampante.attenzione { color: var(--avviso-testo); font-weight: 600; } /* ---- 4. Le tabelle ------------------------------------------------------- Righe alternate per non perdere la riga scorrendo con l'occhio, e intestazioni piu' marcate perche' si distinguano dalla prima riga di dati. I NUMERI: `tabular-nums` incolonna le cifre anche quando il testo e' allineato a sinistra — le colonne di importi restano leggibili. Allinearli davvero a destra vuole una classe sulla cella, che e' marcatura e non foglio di stile: non si fa in questo giro, ed e' detto nel resoconto. */ tbody tr:nth-child(even) { background: var(--riga-alterna); } th { border-bottom: 2px solid var(--linea-intestazione); } th, td { font-variant-numeric: tabular-nums; } /* ---- 5. La pagina di accesso --------------------------------------------- Il contenuto stava in alto a sinistra, appoggiato al margine, con l'aria della pagina che non ha finito di caricare. Un riquadro centrato dice che la pagina e' quella e che non c'e' altro da guardare. DAL 4 SETTEMBRE 2026 IL FONDO E' SCURO come la barra, col logo sopra il riquadro. Il fondo lo prende `body` e non `main`, o resterebbe bianco tutto quello che sta fuori dal centro — la stessa forma di `.pagina-schede`. */ html:has(.accesso) body { background: var(--scuro-fondo); } /* AL CENTRO DELLO SCHERMO, non solo in mezzo alla larghezza: `min-height` di una schermata piena e le due centrature del flex. `justify-content: center` verticale su una colonna che, se lo schermo e' basso, torna a scorrere — percio' c'e' anche il `padding`, o su un portatile il logo finirebbe sotto il bordo di sopra. */ main.accesso { min-height: 100vh; box-sizing: border-box; padding: 2.5rem 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--scuro-neutro); /* RISPETTO ALL'INTERO SCHERMO, non ai 1100px delle pagine col menu: la regola `main { max-width: 1100px; margin-right: auto }` qui sotto e' pensata per una colonna che sta accanto alla barra, e su uno schermo largo metteva il riquadro a 550px da sinistra invece che in mezzo. Visto sul portale pubblicato, 16 settembre 2026. Qui non c'e' nessuna barra: `main` e' tutta la pagina. */ max-width: none; margin: 0; } /* IL LOGO SOPRA IL RIQUADRO. Piu' grande che nella barra — qui non deve convivere con nient'altro — e senza riquadro dietro per la stessa ragione: il suo fondo e' gia' quello della pagina. */ main.accesso .marchio-grande { display: block; width: 260px; max-width: 80vw; height: auto; margin: 0 0 1.75rem; } /* IL RIQUADRO RESTA CHIARO: e' li' che si scrive, e i campi si guardano su bianco come in tutto il resto del portale. E' UNA SCHEDA, con il bordo e il fondo delle schede: fino al 13 settembre 2026 aveva un grigio suo e un bianco suo, di due punti diversi da quelli — cioe' una seconda dichiarazione della stessa cosa, che a occhio non si distingueva. */ .scheda-accesso { width: 100%; max-width: 24rem; box-sizing: border-box; padding: 1.6rem 1.75rem 1.75rem; border: 1px solid var(--linea-tenue); border-radius: .4rem; background: var(--scheda-fondo); color: var(--neutro-testo); box-shadow: 0 1px 3px rgba(0, 0, 0, .05); } .scheda-accesso > :first-child { margin-top: 0; } .scheda-accesso form label:first-of-type { margin-top: 0; } /* ---- La conversazione di un ticket ----------------------------------------- Un elenco senza punti: ogni messaggio e' una riga di contesto (chi, quando, lo stato dell'email) e il testo sotto, con gli a capo del mittente conservati (`pre-line`): un'email va a capo dove chi scrive e' andato a capo, e schiacciarla in un paragrafo la rende un'altra cosa. Il bordo a sinistra distingue chi parla senza un colore per ruolo: al ristoratore il colore dell'informazione, agli altri la linea tenue. */ .conversazione { list-style: none; padding: 0; margin: 0; } .conversazione .messaggio { padding: .6rem .9rem; margin: 0 0 .75rem; border-left: 3px solid var(--linea-tenue); background: var(--riga-alterna); } .conversazione .messaggio.ristoratore { border-left-color: var(--informazione-testo); } .conversazione .testo-messaggio { white-space: pre-line; margin: .35rem 0 0; } /* Un'email gia' assegnata resta in elenco sette giorni, attenuata: dice cosa ne e' stato, e tiene in piedi il modulo per il secondo invio. */ .pannello.quarantena.assegnata { opacity: .7; } .pannello.quarantena .testo-messaggio { white-space: pre-line; max-height: 12rem; overflow-y: auto; padding: .5rem .75rem; background: var(--riga-alterna); } /* IL COLLEGAMENTO IN FONDO AL RIQUADRO — «Password dimenticata?», «Torna all'accesso» — sta DENTRO la scheda, su fondo chiaro, e prende il grigio delle note della superficie chiara. Una riga sola, piccola, senza rubare spazio al bottone. */ .scheda-accesso .nota-in-scheda { margin: 1rem 0 0; font-size: .9rem; color: var(--secondario-testo); } /* IL TITOLO DELLA SCHEDA D'ACCESSO e' il titolo della pagina (GUI_PORTALE.md:46): h1, 24px, peso 500. Fino al 13/11/2026 era un h2 a 1.2rem (19,2px); ordine di coord-portale, incarico titoli-delle-pagine. */ .scheda-accesso h1 { font-size: var(--testo-pagina); font-weight: 500; line-height: 1.25; margin: 0 0 .75rem; } /* LA FRASE SOTTO IL RIQUADRO, sul fondo scuro. Prende il grigio della superficie SCURA — `--scuro-attenuato` — e non quello delle note, che e' un valore della superficie chiara e qui non si legge. E' la regola del documento: un figlio esce dal neutro solo con un valore della propria superficie. */ .nota-scura { max-width: 24rem; margin: 1.25rem 0 0; text-align: center; font-size: .85rem; line-height: 1.5; color: var(--scuro-attenuato); } /* ---- 6. Il «perche'» apribile, chiuso per difetto ------------------------- Tre pagine su trentasei — la scheda del rivenditore, il terminale nuovo e lo stato del terminale — hanno la spiegazione del PERCHE' di una regola, la descrizione di un MECCANISMO e i riferimenti ai documenti di analisi dentro un `details` chiuso. Restano in chiaro l'avvertimento di una CONSEGUENZA dell'atto, la dichiarazione che un accesso lascia TRACCIA, e il messaggio di ESITO: sono le tre cose che, non lette, costano qualcosa. NON E' UN «leggi tutto»: il riassunto dice DI COSA parla quello che c'e' sotto, cosi' chi cerca quella cosa la trova senza aprire tutte le altre. E il testo sotto e' lo stesso di prima, con lo stesso corpo delle note: qui non si accorcia niente, si sposta soltanto sotto una piega. */ details.spiegazione { max-width: 65ch; margin: .4rem 0 .7rem; } details.spiegazione > summary { font-size: .85rem; color: var(--secondario-testo); cursor: pointer; width: fit-content; } details.spiegazione > summary::marker { color: var(--disattivato-testo); } details.spiegazione > :not(summary) { font-size: .85rem; color: var(--secondario-testo); line-height: 1.5; margin: .35rem 0 0; } /* LA ⓘ DI UN CAMPO (nota 3 di Pietro, 9 ottobre 2026). Un `details` chiuso accanto all'etichetta: il riassunto e' la ⓘ, e sotto si apre la spiegazione, con lo stesso corpo e lo stesso colore delle altre spiegazioni di pagina. Si apre con il clic e con la tastiera, senza codice. Resta piccola: l'etichetta e' quello che si legge, la ⓘ e' li' per chi si chiede cosa fa il campo. */ .campo > label:has(+ details.info-campo) { display: inline-block; margin-top: 0; } /* I 16px SOPRA UN CAMPO CON LA ⓘ li porta il campo e non l'etichetta: l'etichetta in linea (accanto alla ⓘ) non fonde il suo margine con quello del campo sopra, e i due si sommavano, 32px invece di 16 (§3). Misurato nel browser il 10/10/2026 (rassegna dell'impaginazione, (a)). */ .campo:has(> label + details.info-campo) { margin-top: 16px; } details.info-campo { display: inline-block; margin-left: .35rem; vertical-align: baseline; max-width: 100%; } details.info-campo > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; min-height: 1.5rem; border-radius: 999px; cursor: pointer; list-style: none; font-size: 1rem; line-height: 1; color: var(--secondario-testo); } details.info-campo > summary::-webkit-details-marker { display: none; } details.info-campo > summary:hover { background: var(--disattivato-fondo); } details.info-campo > summary:focus-visible { outline: 2px solid var(--comando-scuro); outline-offset: 2px; } details.info-campo > p { font-size: .85rem; color: var(--secondario-testo); line-height: 1.5; max-width: 42ch; margin: .35rem 0 .6rem; } /* APERTA, LA ⓘ RESTA ACCANTO ALL'ETICHETTA (rassegna del 10/10/2026, difetto 2): il `details` in linea, aperto, si allargava quanto la spiegazione e andava a capo da solo sotto l'etichetta, con la spiegazione rientrata. Aperto, il contenitore sparisce dall'impaginazione: la ⓘ resta in riga con l'etichetta, e la spiegazione va sotto, a blocco, allineata a sinistra con l'etichetta e con il campo. */ details.info-campo[open] { display: contents; } details.info-campo[open] > p { display: block; } /* LA BANDA ARTICOLI A SCHEDE (D6 = A, 9 ottobre 2026): una linguetta per livello dentro il pannello del blocco, con la stessa forma delle linguette di pagina — quella aperta si attacca al pannello sotto — ma sono bottoni, perche' non cambiano indirizzo. I segmenti di una banda sono un elenco di riquadri, uno per pezzo di riga. Solo colori della tavolozza. */ /* SEZIONI SEPARATE DA UNA LINEA (mockup v4, coord-portale 13/11): non piu' riquadri; un + chiusa, un – aperta. */ .sezioni-banda { display: grid; gap: 0; margin-top: 16px; min-width: 0; } .sezione-banda { border-top: 1px solid var(--linea-tenue); min-width: 0; } .sezione-banda:first-child { border-top: 0; } .schede-banda .scheda-banda { font: inherit; font-weight: 500; cursor: pointer; background: transparent; color: var(--neutro-testo); width: 100%; display: flex; justify-content: space-between; gap: 8px; text-align: left; padding: 10px 0; border: none; border-radius: 0; } /* Fusione 13/11 di main 3b2b2bf9 nel Blocco C: l'aspetto e' quello del mockup v4 di main (06d4319c: linea fra le sezioni, + chiusa e – aperta), i selettori quelli del Blocco C (details/summary: aperta = details[open]). */ .schede-banda .scheda-banda::after { content: "+"; color: var(--secondario-testo); font-weight: 400; } .schede-banda .scheda-banda::-webkit-details-marker { display: none; } .schede-banda summary.scheda-banda { list-style: none; } .schede-banda .scheda-banda:hover { background: var(--neutro-fondo); } .schede-banda .scheda-banda:focus-visible { outline: 2px solid var(--comando-scuro); outline-offset: 2px; } .schede-banda details[open] > .scheda-banda::after { content: "–"; } /* LA PARTE SCELTA (blocco C, 03/11/2026): piu' parti aperte insieme, una sola e' quella che la barra sopra la carta formatta. Si riconosce dalla riga del colore della selezione a sinistra, non dal fondo: il fondo resta quello dei campi. Senza riquadro (mockup v4) la riga ha bisogno di 10px di rientro per non toccare il testo: il rientro e' di TUTTE le sezioni, scelta o no, cosi' c'e' una sola sinistra e il titolo non salta di 10px quando cambia la parte scelta (la sesta stava a 927 contro 917 delle altre quando era lei la scelta). */ .schede-banda .sezione-banda { padding-left: 10px; } .schede-banda .sezione-banda.scelta { box-shadow: inset 3px 0 0 var(--selezione-fondo); } .schede-banda .pannello-scheda { padding: 0 0 10px; min-width: 0; } .titolo-segmenti { font-size: 1rem; margin: 1.2rem 0 .5rem; } .segmenti-banda { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; } .segmento-banda { border: 1px solid var(--linea-tenue); border-radius: 8px; padding: .2rem 1rem .8rem; background: var(--scheda-fondo); } .segmento-banda .azioni { margin: .9rem 0 0; } /* LA RIGA DELL'ARTICOLO E QUELLA DEGLI ALTRI CENTRI IN ORIZZONTALE (disegno v2 §6, blocco 2b): i segmenti uno accanto all'altro, come sulla carta; vanno a capo quando la colonna e' stretta, mai uno scorrimento di lato. */ .segmenti-banda.in-riga { display: flex; flex-wrap: wrap; align-items: flex-start; } .segmenti-banda.in-riga > .segmento-banda { flex: 1 1 12rem; min-width: 0; } .segmento-banda .freccia { min-width: 2.5rem; font-weight: 600; } /* IL TESTO PICCOLO DI UN BLOCCO SALVATO (blocco 1b): la riga che lo dice, e il pulsante per toglierlo, sotto la barra. */ .piccolo-salvato { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .6rem 0 0; } .piccolo-salvato .nota { margin: 0; } /* ---- 7. La forma a schede, E LA SCALA CHE LA ACCOMPAGNA ------------------- SU TUTTE LE PAGINE dal 4 settembre 2026. Nata su Sconti il 3 settembre, stesa a otto pagine il giorno dopo, e a tutte quando il committente ha visto che cosa costava tenerle separate: «la scala sta in una classe che portano tre pagine sole, e la forma delle schede in altre otto — le restanti tornano ai 16px del browser, ed e' per questo che i corpi cambiano da una pagina all'altra». E LA CLASSE `densa` NON ESISTE PIU'. Era il modo di provare la scala su tre pagine senza toccare le altre — «se la forma regge su queste tre, si estende» — e regge. Tenerla sarebbe stato il difetto che il §0 nomina per primo: un valore dichiarato in due posti, e due pagine che dicono corpi diversi senza che nessuno l'abbia deciso. Ogni regola qui sotto vive sotto `.pagina-schede`, che sta nel `div` che avvolge la pagina. IL FONDO DELLA PAGINA E' `--disattivato-fondo` e le schede sono bianche: e' il contrasto che rende una scheda una scheda. E il fondo si prende dal CORPO, non dall'involucro: `main` si ferma a 1100px, e un fondo che finisce li' lascia una striscia bianca a destra — guardato in un browser, era la prima cosa che si vedeva. Con `:has` la pagina intera cambia fondo e nessun'altra lo sa. */ html:has(.pagina-schede) body { background: var(--disattivato-fondo); } .pagina-schede { padding-bottom: 1rem; font-size: var(--testo-corpo); } /* LA SPAZIATURA E' 24px DENTRO E 24px FRA, ed e' la differenza piu' grande: prima era 8px dappertutto, e otto pixel fra due cose che non c'entrano niente dicono che sono la stessa cosa. */ .pagina-schede .pannello { background-color: var(--scheda-fondo); border: 1px solid var(--linea-tenue); border-radius: 12px; padding: 24px; margin: 0 0 24px; box-shadow: 0 1px 2px rgba(23, 32, 41, .05); /* UNA TABELLA TROPPO LARGA SCORRE, non si rompe. Difesa unica messa il 4 settembre 2026, dopo averne viste due rompersi con dati veri e in due modi diversi: `/revoche` ha ridotto la colonna elastica a UN CARATTERE PER RIGA — l'intestazione si leggeva in verticale — e la tabella degli avvisi amministrativi su `/controlli` e' uscita dal bordo destro perdendo due colonne, senza dirlo. Sedici tabelle su quaranta non hanno nessuna colonna elastica, quindi non possono stringersi: possono solo traboccare. Sedici correzioni una per una sarebbero sedici occasioni di dimenticarne una — e la diciassettesima tabella nascerebbe scoperta. Lo scorrimento sta qui, sul contenitore, e vale per tutte quelle che ci sono e quelle che verranno. */ overflow-x: auto; } /* E LO SCORRIMENTO SI DICHIARA, perche' una barra che compare solo mentre si scorre non dice a nessuno che c'e' dell'altro (§0: «non c'e' niente» e «non l'hai ancora visto» si dichiarano, non si lasciano indovinare). Due ombre sui fianchi, e due coperchi del colore del pannello che le nascondono. I coperchi sono `background-attachment: local` — si muovono col contenuto — e le ombre `scroll`, ferme sul bordo: quando si e' all'inizio il coperchio sinistro copre l'ombra sinistra, e appena si scorre la scopre. Se non c'e' niente da scorrere non se ne vede nessuna, per costruzione: non e' una regola in piu' da ricordare, e' la stessa cosa vista da un altro lato. */ /* LA TABELLA FUORI DAL PANNELLO scorre nello stesso modo, in un contenitore suo (.tabella-che-scorre): stesse ombre, e i coperchi del colore di quello che le sta intorno — il fondo della pagina, o la scheda se sta dentro un pannello. Aggiunta il 13 novembre 2026: a 390px la tabella dei punti vendita del passaggio dei clienti portava la pagina a 501px. */ .tabella-che-scorre { overflow-x: auto; --coperchio: var(--disattivato-fondo); } .pannello .tabella-che-scorre { --coperchio: var(--scheda-fondo); } .pagina-schede .pannello, .documentazione-api .api-testo, .tabella-che-scorre { background-image: linear-gradient(to right, var(--coperchio, var(--scheda-fondo)) 30%, transparent), linear-gradient(to left, var(--coperchio, var(--scheda-fondo)) 30%, transparent), radial-gradient(farthest-side at 0 50%, rgba(23,32,41,.22), transparent), radial-gradient(farthest-side at 100% 50%, rgba(23,32,41,.22), transparent); background-position: 0 0, 100% 0, 0 0, 100% 0; background-repeat: no-repeat; background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%; background-attachment: local, local, scroll, scroll; } .pagina-schede .pannello > :first-child { margin-top: 0; } .pagina-schede .pannello > :last-child { margin-bottom: 0; } /* LE TABELLE PERDONO LA GRIGLIA: niente bordi verticali, intestazione come etichetta e non come fascia grigia, righe separate da un filetto chiarissimo. Le misure stanno più sotto, con la scala. */ .pagina-schede tbody tr:nth-child(even) { background: none; } .pagina-schede tbody tr:last-child td { border-bottom: 0; } /* I CAMPI: angoli di 8px, bordo tenue, e al fuoco il contorno del comando scuro. La larghezza resta quella gia' decisa il 2 settembre — i campi brevi non superano i 420px, quelli in cui si scrive una frase arrivano a 46rem — perche' la larghezza di un campo e' un'istruzione a chi scrive. */ .pagina-schede :is(input, select, textarea) { display: block; background: var(--scheda-fondo); border: 1px solid var(--linea-tenue); border-radius: 8px; padding: .55rem .7rem; font: inherit; max-width: 420px; } .pagina-schede textarea { max-width: 46rem; width: 100%; } /* UNA TENDINA NON ESCE DALLA SCHEDA (21/10/2026). Una tendina è larga quanto la sua voce più lunga, fino ai 420px qui sopra; a larghezza da telefono la scheda è più stretta, e «Nuovo modello» scorreva in orizzontale («Comanda RPC di prova — Comanda, versione 2» a 406px). Il tetto resta 420px, ma mai più della scheda: la voce lunga si taglia nella tendina chiusa e si legge intera aprendola. Vale per ogni tendina della pagina a schede, come la regola dei 420px. */ .pagina-schede select { max-width: min(420px, 100%); } /* IL BOTTONE VA A CAPO. Con i campi in linea si era piazzato ACCANTO all'area di testo, sul suo fianco destro: visto in un browser, non leggendo. */ .pagina-schede form button[type=submit] { display: block; margin-top: 24px; } /* IL BORDO DEL CAMPO NON CAMBIA AL FUOCO. Cambiandolo, l'anello e il bordo diventavano due segnali della stessa cosa, e il campo sembrava anche ingrandirsi: il bordo resta tenue, e a dire dove si è è l'anello. */ .pagina-schede :is(input, select, textarea):focus-visible { outline: 2px solid var(--comando-scuro); outline-offset: 1px; } /* 16px FRA UN CAMPO E IL SUCCESSIVO, 4px FRA UN'ETICHETTA E IL SUO CAMPO: sono i due valori della scala del §3, e non due numeri qualsiasi. */ .pagina-schede label { display: block; margin: 16px 0 4px; } .pagina-schede form label:first-of-type { margin-top: 0; } /* ---- 8. Intestazione, linguette, dato in evidenza ------------------------- NATE SU SCONTI IL 3 SETTEMBRE 2026 e stese alle altre pagine il giorno dopo, su richiesta del committente. La regola, con le sue parole: «intestazione in alto col titolo e i selettori in linea, elenco a linguette quando le sezioni sono piu' d'una, moduli di modifica su pagina propria raggiunti da un bottone arancione, dato principale in evidenza». Restano tutte sotto `.pagina-schede`: una pagina le prende mettendosi dentro quell'involucro, e nessuna le prende per sbaglio. L'INTESTAZIONE tiene su una riga il titolo e le azioni della pagina. Su Sconti il titolo E' il nome del rivenditore: prima stava in un `h2` fra due schede, e chi apriva la pagina non sapeva di chi stesse leggendo i margini finche' non incontrava quella riga. */ .pagina-schede .testata { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 24px; } /* A 390 PX LA TESTATA VA A CAPO E NON SCORRE DI LATO (sconti-390 del 09/11/2026): su /sconti il nome lungo del Partner e «Modificare una condizione» stavano sulla stessa riga, e la pagina era larga 652 px in it e 607 in en. Il titolo e il pulsante vanno a capo; il titolo spezza anche una parola che da sola non ci sta, e la tendina non e' mai piu' larga di chi la contiene. Prova: prove/sconti_390_nel_browser.py. */ .pagina-schede .testata > * { min-width: 0; max-width: 100%; } .pagina-schede .testata h1 { margin: 0 0 .5rem; overflow-wrap: anywhere; } /* L'ETICHETTA STA SOPRA IL CAMPO ANCHE QUI. Era a sinistra, in linea con la tendina: il §6 dice «etichetta sopra il campo, mai a lato», e non e' una preferenza — a lato, la larghezza dell'etichetta decide dove comincia il campo, e due moduli con etichette di lunghezza diversa non si incolonnano piu'. Il nome «in linea» resta perche' e' la scelta che sta IN LINEA COL TITOLO, che e' un'altra cosa. */ .pagina-schede .scelta-in-linea form { display: block; } .pagina-schede .scelta-in-linea label { display: block; margin: 0 0 4px; color: var(--secondario-testo); } .pagina-schede .scelta-in-linea select { margin: 0; max-width: 100%; } /* L'AZIONE PRINCIPALE QUI E' UN COLLEGAMENTO, non un bottone: non scrive niente, porta a una schermata. Ma e' l'azione principale della pagina, e quindi porta il fondo della selezione con l'inchiostro scuro — la regola dei bottoni vale per il RUOLO, non per il tag. */ .pagina-schede :is(a, button).principale { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; box-sizing: border-box; text-decoration: none; font: inherit; cursor: pointer; background: var(--selezione-fondo); color: var(--selezione-inchiostro); border: 1px solid var(--selezione-fondo); border-radius: 8px; padding: .5rem 1rem; white-space: nowrap; } /* PIU' DI UN'AZIONE NELL'INTESTAZIONE. La regola del committente dice UN bottone arancione, e resta vera: l'arancione e' l'azione principale, e le altre gli stanno accanto in chiaro. Su Rivenditori sono «Crea» (arancione) e «Correggi»; su Assegnazioni «Cambia rivenditore» e «Chiudi la copertura». Due arancioni sarebbero due principali, cioe' nessuna. */ .pagina-schede .azioni { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pagina-schede :is(a, button).secondaria, .pagina-schede :is(a, button).pericolo { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; box-sizing: border-box; text-decoration: none; font: inherit; cursor: pointer; background: var(--scheda-fondo); color: var(--neutro-testo); border: 1px solid var(--linea-tenue); border-radius: 8px; padding: .5rem 1rem; white-space: nowrap; } .pagina-schede :is(a, button).secondaria:hover { border-color: var(--comando-scuro); background: var(--disattivato-fondo); } /* UN BOTTONE SPENTO SEMBRA SPENTO. `button[type=submit]:disabled` (sopra) perdeva contro le regole di ruolo di questa pagina, che hanno la stessa specificita' e vengono dopo: «Salva come versione» spento restava arancione e «Su» sul primo blocco restava bianco con il cursore della mano, e chi guardava non capiva perche' il clic non facesse niente. Questa regola viene dopo le regole di ruolo e porta lo stesso «disattivato» del foglio, per `principale` e `secondaria`; il passaggio del puntatore non lo riaccende. `pericolo` non e' toccato: un atto che distrugge e' acceso o non c'e'. */ .pagina-schede :is(a, button).principale:disabled, .pagina-schede :is(a, button).secondaria:disabled, .pagina-schede :is(a, button).secondaria:disabled:hover { background: var(--disattivato-fondo); border-color: var(--disattivato-testo); color: var(--disattivato-testo); cursor: default; } .pagina-schede :is(a, button).pericolo { background: var(--errore-testo); border-color: var(--errore-testo); color: var(--pericolo-inchiostro); } .pagina-schede :is(a, button).pericolo:hover { filter: brightness(.92); } .pagina-schede td.azioni-riga { vertical-align: middle; white-space: nowrap; } .pagina-schede .azioni-riga-comandi { display: flex; gap: 8px; align-items: center; justify-content: flex-start; } /* LE LINGUETTE non sono due schede impilate: cambiare argomento non deve costare uno scorrimento. Sono collegamenti — quale sia aperta sta nell'indirizzo — e quella aperta si attacca alla scheda sotto. */ .pagina-schede .linguette { display: flex; gap: .25rem; margin-bottom: -1px; } .pagina-schede .linguette a { display: block; text-decoration: none; color: var(--secondario-testo); padding: .55rem 1rem; border: 1px solid transparent; border-radius: 12px 12px 0 0; } .pagina-schede .linguette a:hover { color: var(--neutro-testo); } .pagina-schede .linguette a.attiva { background: var(--scheda-fondo); color: var(--neutro-testo); font-weight: 600; border-color: var(--linea-tenue); border-bottom-color: var(--scheda-fondo); } .pagina-schede .linguette + .pannello { border-top-left-radius: 0; } /* IL DATO PRINCIPALE DI UNA PAGINA aveva lo stesso peso di un indirizzo di posta. Sono DUE classi e non una, perche' sono due cose diverse: `.dato-forte` il dato per cui la pagina esiste — la percentuale su Sconti, il rivenditore che assiste su Assegnazioni, lo stato su Licenze. Piu' grande e piu' scuro degli altri. `.numero` una colonna di numeri: CIFRE TABULARI, cosi' le unita' si incolonnano e due valori si confrontano guardando invece che leggendo, e allineata a destra intestazione compresa — una colonna di numeri allineata a sinistra si confronta male anche quando e' tabulare. Su Sconti stanno insieme (`class="numero dato-forte"`), ed e' il caso in cui sono nate; altrove il dato principale e' una parola e prende solo la prima. */ .pagina-schede .numero { text-align: right; font-variant-numeric: tabular-nums; } .pagina-schede td.dato-forte { font-size: 1.15rem; font-weight: 600; white-space: nowrap; } /* E `.forte` per quando il dato principale e' UNA PARTE della cella e non la cella: su Licenze i due importi stanno in una casella con le loro etichette, e ingrandire tutta la casella ingrandirebbe anche «al rinnovo». */ .pagina-schede .forte { font-size: 1.15rem; font-weight: 600; } /* ---- 9. LA SCALA APPLICATA, e adesso a tutte le pagine -------------------- Le variabili stanno in `:root` e si scrivono una volta; queste regole le applicano. Stavano sotto una classe `densa` che valeva per tre pagine, ed e' sparita il 4 settembre 2026 quando la prova e' finita: una scala che vale per tre pagine non e' una scala, e' un'eccezione. Il corpo lo dichiara l'involucro, in cima alla sezione 7. */ /* I PESI SONO DUE, 400 e 500, e non tre: il documento della grafica lo dice al §1 e la ragione e' che il contrasto lo fanno il colore e la dimensione. Il 600 c'era su titoli, dati e intestazioni di colonna, ed e' sceso a 500 il 4 settembre 2026 — sulle intestazioni di colonna a 400, che e' quello che il documento prescrive per loro. */ .pagina-schede h1 { font-size: var(--testo-pagina); line-height: 1.2; font-weight: 500; margin: 0 0 4px; } .pagina-schede h2 { font-size: var(--testo-sezione); line-height: 1.3; font-weight: 500; margin: 0 0 16px; } .pagina-schede .pannello h2 { font-size: var(--testo-sezione); } /* LE NOTE, LE RIGHE DI CONTESTO E I RIQUADRI scendono a 13px: sono cornice, non dato. L'avviso resta a 13 e non a 14 per la stessa ragione — spiega, e chi lo legge lo legge una volta. */ .pagina-schede :is(.nota, .riga-contesto, .avviso, .errore, .riuscito) { font-size: var(--testo-nota); line-height: 1.45; } .pagina-schede :is(.nota, .riga-contesto) { color: var(--secondario-testo); } /* L'INTESTAZIONE DI COLONNA E' UN'ETICHETTA, non un titolo: 11px, maiuscoletto, spaziata, colore secondario. Deve dire come si chiama la colonna e poi sparire — chi scorre un elenco legge i valori, non i nomi delle colonne. */ .pagina-schede th { font-size: var(--testo-tabella); font-weight: 400; text-transform: uppercase; letter-spacing: .07em; color: var(--secondario-testo); background: none; white-space: nowrap; border-bottom: 1px solid var(--linea-tenue); padding: 0 .9rem .45rem 0; vertical-align: bottom; } /* LA RIGA E' ALTA 40px E NON CRESCE. `height` su una cella e' un minimo, non un massimo: a tenerla e' il fatto che dentro non ci va piu' un paragrafo — lo stato e' una parola e il resto sta nel dettaglio. */ .pagina-schede table { font-size: var(--testo-corpo); } .pagina-schede td { height: var(--riga-tabella); padding: 0 .9rem 0 0; border-bottom: 1px solid var(--disattivato-fondo); white-space: nowrap; } .pagina-schede th:last-child, .pagina-schede td:last-child { padding-right: 0; } /* LE COLONNE SI STRINGONO SUL CONTENUTO. `width: 1%` con `white-space: nowrap` e' il modo con cui una tabella larga 100% da' a ogni colonna il minimo che le basta e regala il resto a quella che si e' dichiarata elastica. Senza, la tabella spalma la larghezza in parti uguali e due date finiscono lontane come due paragrafi. */ .pagina-schede td, .pagina-schede th { width: 1%; } /* `overflow-wrap: anywhere` PERCHE' IL CONTENUTO NON E' SEMPRE PROSA. Visto sul Registro il 4 settembre 2026: la colonna «Dettaglio» porta un frammento JSON con dentro un identificativo di trentasei caratteri senza spazi, e una parola che non si puo' spezzare esce dalla scheda qualunque larghezza abbia la colonna. */ .pagina-schede :is(td, th).elastica { width: auto; white-space: normal; overflow-wrap: anywhere; /* E UN FONDO SOTTO CUI NON SI STRINGE. `overflow-wrap: anywhere` sa spezzare una parola per farla stare, e messo su una colonna a cui non avanza piu' niente la spezza a ogni lettera: e' cosi' che `/revoche` e' diventata una colonna alta settecento pixel e larga un carattere. Sotto questa misura la colonna smette di cedere, la tabella trabocca, e il pannello scorre — che e' il comportamento giusto: un dato che non ci sta si va a cercare, non si macina. */ min-width: 10rem; } /* IL DATO. La sua evidenza e' un pixel e mezzo e il semigrassetto, non tre punti di corpo: a 18px, com'era prima, il dato gridava piu' del titolo della pagina. */ .pagina-schede td.dato-forte { font-size: var(--testo-dato); font-weight: 500; } .pagina-schede .forte { font-size: var(--testo-dato); font-weight: 500; } .pagina-schede .dato-forte { font-size: var(--testo-dato); font-weight: 500; } /* GLI IMPORTI in cifre tabulari, e l'etichetta sta nell'intestazione: accanto a ogni numero era una parola ripetuta per riga. */ .pagina-schede .numero { text-align: right; font-variant-numeric: tabular-nums; } /* LA SCHEDA DI DETTAGLIO: coppie etichetta/valore in colonne che si dispongono da se'. L'etichetta porta la stessa forma dell'intestazione di colonna — 11px in maiuscoletto, spenta — perche' fa lo stesso mestiere: nomina il valore e poi sparisce. Il valore e' a 14px, e quello principale a 15px semigrassetto. */ .pagina-schede .scheda-dati { display: grid; gap: 1.1rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(9rem, max-content)); margin: 0; } .pagina-schede .scheda-dati dt { font-size: var(--testo-tabella); font-weight: 400; text-transform: uppercase; letter-spacing: .07em; color: var(--secondario-testo); margin: 0 0 .2rem; } .pagina-schede .scheda-dati dd { margin: 0; font-size: var(--testo-corpo); } .pagina-schede .scheda-dati dd.dato-forte { font-size: var(--testo-dato); font-weight: 500; } /* Il valore numerico NON si allinea a destra qui: in una scheda non c'e' nessuna colonna con cui incolonnarsi, e a destra di che cosa non si sa. Restano le cifre tabulari, che servono comunque. */ .pagina-schede .scheda-dati dd.numero { text-align: left; } /* IL SEGNO ACCANTO A UN IMPORTO occupa il suo posto anche quando non c'e'. Visto nella pagina resa il 4 settembre 2026: l'asterisco del primo periodo parziale, attaccato alla cifra, spostava a sinistra le righe che ce l'hanno — e le cifre tabulari servono proprio a non farlo succedere. */ .pagina-schede .segno { display: inline-block; width: .65em; text-align: left; color: var(--secondario-testo); } /* ---- 10. Il riepilogo: le fasce, il dato secondario, lo zero -------------- Nate per la pagina iniziale del 4 settembre 2026, e scritte per essere riusate: sono tre forme che il documento della grafica prescrive a tutte le pagine, non tre eccezioni di una. L'INTESTAZIONE DI FASCIA porta la stessa forma dell'intestazione di colonna — 11px, maiuscoletto spaziato, colore secondario, peso 400 — perche' fa lo stesso mestiere: nomina un blocco e poi sparisce. E' l'unico maiuscolo ammesso insieme a quelle (GUI §1). Sopra ha i 40px che il documento mette fra una fascia e la successiva; la prima non li ha, o si staccherebbe dal titolo. */ .pagina-schede .fascia { font-size: var(--testo-tabella); font-weight: 400; text-transform: uppercase; letter-spacing: .07em; color: var(--secondario-testo); margin: 24px 0 12px; } /* IL DATO SECONDARIO STA SOTTO IL PRIMARIO NELLA STESSA CELLA (GUI §7), a 13px grigio, invece di prendersi una colonna in piu'. Va a capo, e per questo la cella che lo contiene non puo' restare `nowrap`. */ .pagina-schede .sotto { display: block; font-size: var(--testo-nota); color: var(--secondario-testo); line-height: 1.35; /* La nota può andare a capo: è prosa, ed è il solo pezzo della cella che lo deve. */ white-space: normal; } /* UNA CELLA CON UN DATO SECONDARIO RESTA SU UNA RIGA, primo rigo e secondo. Prima diventava `white-space: normal` tutta intera — le serviva per mandare a capo il `.sotto` — e il prezzo lo pagava il rigo di sopra: su un mondo di prova con novanta licenze, «CAT-BASE2» si spezzava in «CAT-» e «BASE2» sul trattino, e «Palmare di sala» andava a capo in una colonna larga il doppio. Un codice non si spezza mai: non è prosa. Adesso a capo ci va solo la nota, e la cella che DEVE mandare a capo anche il rigo di sopra si dichiara `elastica` — che è più specifica e vince. */ .pagina-schede td:has(.sotto) { padding-top: 4px; padding-bottom: 4px; } /* LO ZERO SI DICHIARA, e non con un colore soltanto: la parola «nessuno» al posto della cifra dice la stessa cosa a chi i colori non li distingue. Il grigio e' quello del disattivato, che e' il ruolo giusto — non c'e' niente da guardare la'. */ .pagina-schede .spento-testo { color: var(--disattivato-testo); } /* ---- 11. IL CRUSCOTTO: due griglie di riquadri, non due tabelle ------------ Dettate dal committente il 4 settembre 2026, guardando il riepilogo appena reso: «adesso e' una tabella incolonnata, e deve essere una griglia di riquadri affiancati. E' la differenza fra un elenco e un cruscotto». QUAL E' LA DIFFERENZA, perche' non e' una questione di gusto. Una tabella incolonnata si legge RIGA PER RIGA: l'occhio parte in alto a sinistra e scende, e per sapere se c'e' qualcosa da fare bisogna leggerle tutte. Una griglia di riquadri si legge A COLPO D'OCCHIO: le cifre stanno tutte alla stessa altezza, e quella colorata si vede senza leggere niente. La prima fascia del riepilogo esiste per far vedere se c'e' qualcosa che si rompe, non per essere letta. E LA COLONNA «DOVE SI RISOLVE» E' SPARITA: il collegamento e' il riquadro intero. Una colonna che ripete «Licenze, Terminali, Avvisi» accanto a numeri che gia' portano quel nome era la stessa cosa detta due volte — e il §7 del documento della grafica dice di ridurre a una le due colonne che dicono lo stesso fatto. */ .pagina-schede .griglia-attenzione { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); /* TUTTI I RIQUADRI ALTI UGUALE, anche fra una riga e l'altra: `1fr` sulle righe le fa tutte della piu' alta. Senza, la riga dove nessuno ha la nota si accorciava, e due riquadri identici sembravano due cose diverse. */ grid-auto-rows: 1fr; } /* IL RIQUADRO E' IL COLLEGAMENTO, e percio' e' un `` che si comporta da blocco. `color: inherit` e nessuna sottolineatura: il colore del collegamento sulla cifra la farebbe sembrare uno stato che non e'. Chi non ha una pagina dove risolvere e' un `
` con la stessa forma — non un `` senza `href`, che al lettore di schermo si annuncia come qualcosa da premere e non porta da nessuna parte. */ .pagina-schede .riquadro-attenzione { display: block; text-decoration: none; color: inherit; background: var(--scheda-fondo); border: 1px solid var(--linea-tenue); border-radius: 12px; padding: 16px; } .pagina-schede a.riquadro-attenzione:hover { border-color: var(--secondario-testo); } .pagina-schede a.riquadro-attenzione:focus-visible { outline: 2px solid var(--selezione-fondo); outline-offset: 2px; } /* IL COLORE VA A FONDO, dal 4 settembre 2026 su richiesta del committente: «cosi' la griglia si legge da lontano prima di leggere i numeri». Il fondo tenue del ruolo, con la cifra nel testo dello stesso ruolo. E' la regola del prodotto — il colore sta sul CONTENITORE, non sull'elemento — e qui vale doppio, perche' la prima fascia esiste per essere guardata e non letta: a colpo d'occhio si vede quanto rosso c'e', e solo dopo quanto. IL BORDO RESTA TENUE e non prende il colore del ruolo: un bordo colorato su un fondo colorato fa due segnali della stessa cosa, e il secondo non aggiunge niente. */ .pagina-schede .riquadro-attenzione.si-ferma { background: var(--errore-fondo); } .pagina-schede .riquadro-attenzione.da-sistemare { background: var(--avviso-fondo); } .pagina-schede .riquadro-attenzione.nessuno { background: var(--conferma-fondo); } /* LA CIFRA, e il suo colore E' UNO STATO. Il colore non e' l'unico veicolo (GUI §0) — sotto c'e' sempre la riga che dice che cosa e', e allo zero la cifra e' sostituita dalla PAROLA «nessuno», che si legge anche in bianco e nero. */ .pagina-schede .cifra { display: block; font-size: var(--testo-cifra); font-weight: 500; line-height: 1.15; font-variant-numeric: tabular-nums; } .pagina-schede .riquadro-attenzione.si-ferma .cifra { color: var(--errore-testo); } .pagina-schede .riquadro-attenzione.da-sistemare .cifra { color: var(--avviso-testo); } /* LO ZERO E' UNA CONFERMA, non un'assenza — e vale QUI e non dappertutto. Nella prima fascia tutti e sette i conteggi sono problemi: zero problemi e' una buona notizia, e il verde e' la parola giusta. Nella seconda fascia il verde non compare mai: zero licenze attive non e' una conferma, e' assenza di clienti. La regola sta al §2 del documento della grafica. E NON GRIDA. Corretto lo stesso giorno guardando la pagina resa: «nessuno» a 22px cinque volte su sette faceva del rumore la cosa piu' grande della fascia. Sta a 13px, resta DICHIARATO — e' una parola, non una cifra spenta — e IL RIQUADRO NON SI ACCORCIA: la riga di testo si tiene l'altezza della cifra grande. Se rimpicciolisse, lo zero diventerebbe una cosa di specie diversa dalle altre, e il §0 dice il contrario. */ .pagina-schede .riquadro-attenzione.nessuno .cifra { color: var(--conferma-testo); font-size: var(--testo-nota); line-height: calc(var(--testo-cifra) * 1.15); } /* CHE COSA E', a 13px nel neutro: e' la riga che si legge dopo aver visto la cifra, e deve stare su una riga o due. */ .pagina-schede .riquadro-attenzione .cosa { display: block; margin-top: 6px; font-size: var(--testo-nota); color: var(--neutro-testo); line-height: 1.35; } /* LA NOTA a 11px, solo quando la cifra non e' zero: spiegare perche' un numero conta quando quel numero e' zero e' prosa che nessuno ha chiesto. PRENDE IL TESTO DEL PROPRIO RUOLO e non il grigio secondario: su un fondo tenue il secondario a 11px scende sotto la soglia, mentre il testo del ruolo e' il colore con cui quel fondo e' stato accoppiato. */ .pagina-schede .riquadro-attenzione .nota-riquadro { display: block; margin-top: 4px; font-size: var(--testo-tabella); color: var(--secondario-testo); line-height: 1.4; } .pagina-schede .riquadro-attenzione.si-ferma .nota-riquadro { color: var(--errore-testo); } .pagina-schede .riquadro-attenzione.da-sistemare .nota-riquadro { color: var(--avviso-testo); } /* LA SECONDA GRIGLIA E' PIU' PICCOLA E NON HA BORDO, ed e' la forma a dire il mestiere: questi numeri si guardano, non si aprono. Fondo neutro invece di bianco, che sul fondo grigio della pagina li tiene insieme come un gruppo solo senza bisogno di una linea intorno. */ .pagina-schede .griglia-venduto { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); } /* E QUI IL VERDE NON SI USA MAI, qualunque sia il numero. Zero licenze attive o zero punti vendita non sono una conferma: sono assenza di clienti, e dipingerle di verde direbbe che va bene cosi'. Il fondo resta neutro anche sullo zero — e' la distinzione del §2, ed e' la ragione per cui questi riquadri non hanno nessuna variante di ruolo. */ .pagina-schede .riquadro-venduto { background: var(--neutro-fondo); border: 0; border-radius: 12px; padding: 12px; } .pagina-schede .riquadro-venduto .etichetta { display: block; font-size: var(--testo-tabella); font-weight: 400; text-transform: uppercase; letter-spacing: .07em; color: var(--secondario-testo); } .pagina-schede .riquadro-venduto .cifra-piccola { display: block; margin-top: 4px; font-size: var(--testo-cifra-piccola); font-weight: 500; color: var(--neutro-testo); font-variant-numeric: tabular-nums; } /* IL «PERCHE'» DENTRO UNA PAGINA CON LA SCALA. `details.spiegazione` nasce prima della scala e misura in `rem`: dentro l'involucro prende la nota dichiarata (13px), o sarebbe la settima misura fra le sei che la scala esiste per togliere. */ .pagina-schede details.spiegazione > summary, .pagina-schede details.spiegazione > :not(summary) { font-size: var(--testo-nota); } /* IL CARICO DI UNA RIGA DI REGISTRO, che si apre DENTRO la riga. Nato il 4 settembre 2026, quando il dettaglio ha smesso di essere una colonna. Perche' non e' `details.spiegazione`: quello e' un «perche'» — una cosa scritta da noi, che sta sotto un pannello e si legge una volta. Questo e' un DATO, sta dentro una cella, ce n'e' uno per riga, e da chiuso deve pesare quanto una riga di nota. Il riassunto porta le CHIAVI del carico, che sono la cosa che distingue una riga dall'altra senza aprirla. Le coppie sono una `dl` a due colonne che si allineano fra loro: la chiave a sinistra su una larghezza sua, il valore a destra. `pre-line` perche' un elenco di identificativi va a capo per elemento — `elenco_punti_vendita` ne porta uno per ogni scheda vista, e in un ambiente pieno sono trentadue. */ .pagina-schede details.carico { margin-top: 3px; } .pagina-schede details.carico > summary { font-size: var(--testo-nota); color: var(--secondario-testo); cursor: pointer; width: fit-content; } .pagina-schede details.carico > summary::marker { color: var(--disattivato-testo); } .pagina-schede details.carico dl { margin: 4px 0 6px; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: var(--testo-nota); } .pagina-schede details.carico dl > div { display: contents; } .pagina-schede details.carico dt { color: var(--secondario-testo); font-weight: 400; } .pagina-schede details.carico dd { margin: 0; color: var(--neutro-testo); white-space: pre-line; overflow-wrap: anywhere; /* Un elenco lungo scorre dentro sé stesso invece di allungare la riga di mezza pagina: `elenco_punti_vendita` ne porta uno per scheda vista, e trenta punti vendita sono trenta righe. Non nasconde niente — si scorre e si copia — e sotto la dozzina non compare nemmeno. */ max-height: 12em; overflow: auto; } /* Quando una riga si apre, la data e il nome restano in CIMA. Senza questo si centrano sull'altezza del carico aperto, e la data di una riga aperta si allontana dalla riga. */ .pagina-schede table.registro td { vertical-align: top; } .pagina-schede details.carico .grezzo { margin: 4px 0 6px; font-size: var(--testo-nota); color: var(--neutro-testo); overflow-wrap: anywhere; } /* UNA PAROLA AL POSTO DI UN NUMERO, dentro una colonna di numeri: «mai» dove ci sarebbero i giorni senza rinnovo. Prende il COLORE del ruolo e non la sua pastiglia: `.errore` è un messaggio (GUI §8), e dentro una cella diventava un'etichetta colorata in mezzo alle cifre — un fondo pieno alto quanto la riga, largo quanto una parola, in una colonna che deve incolonnarsi. */ .pagina-schede .invece-del-numero { color: var(--errore-testo); } /* LE AZIONI IN FONDO A UN MODULO, sulla stessa riga. Il §5 vuole «Annulla» ACCANTO al bottone che compie l'atto, e il bottone dei moduli è `display: block` — perché una volta si era piazzato sul fianco destro di un'area di testo — quindi il collegamento gli finiva sotto. Qui la riga la fa il contenitore, e il bottone dentro resta com'è. Il collegamento è allineato al centro del bottone, non alla sua linea di base: «Lascia perdere» è una via d'uscita, non una parola della frase. */ .pagina-schede .azioni-modulo { display: flex; align-items: center; gap: 1rem; margin-top: 24px; flex-wrap: wrap; } .pagina-schede .azioni-modulo button[type=submit] { margin-top: 0; } /* «DA GUARDARE» in una colonna di date: una parola dove le altre righe hanno un momento, nel colore dell'avviso. La riga portava una classe `da-guardare` che nel foglio non esisteva — una marcatura dichiarata e mai disegnata dice di essere un segnale e non lo è — e adesso sta sulla parola, che è dove il §0 la vuole: il colore accanto al testo, non al posto suo. */ .pagina-schede .da-guardare { color: var(--avviso-testo); } /* LO STATO DI UN CONTROLLO: una parola con un colore, dentro una colonna di parole. Portava `class="avviso"`, che è la forma di un MESSAGGIO (§8): in una cella diventava una pastiglia gialla col fondo pieno, alta quanto la riga. Qui il colore sta sul testo e la parola resta il veicolo (§0). */ .pagina-schede .stato-fatto { color: var(--conferma-testo); } .pagina-schede .stato-attesa { color: var(--avviso-testo); } .pagina-schede .stato-assente { color: var(--secondario-testo); } /* IL SEMAFORO DEI CONTROLLI — 27 ottobre 2026 (mockup v2, Pietro 26/10). Un cerchio col numero dei controlli e tre riquadri: rosso «con anomalie», verde «senza anomalie», grigio «non sotto controllo». Niente barra. Solo token di ruolo. Nei Controlli i riquadri sono bottoni che filtrano (premuto = aria-pressed); nel Riepilogo collegamenti. */ .semaforo { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .semaforo .ciambella { width: 150px; height: 150px; flex: none; color: var(--neutro-testo); } .semaforo .ciambella .arco-rosso { stroke: var(--errore-testo); } .semaforo .ciambella .arco-verde { stroke: var(--conferma-testo); } .semaforo .ciambella .arco-grigio { stroke: var(--disattivato-testo); } .semaforo .ciambella-numero { font-size: 20px; font-weight: 600; fill: currentColor; } .semaforo .ciambella-cosa { font-size: 9px; fill: currentColor; } .semaforo .semaforo-luci { flex: 1 1 320px; min-width: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); } .pagina-schede .semaforo .luce { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; text-decoration: none; text-align: left; font: inherit; cursor: pointer; width: 100%; background: var(--scheda-fondo); border: 1px solid var(--linea-tenue); color: var(--neutro-testo); } .pagina-schede .semaforo .luce:hover { border-color: var(--secondario-testo); } .pagina-schede .semaforo .luce[aria-pressed="true"] { border-color: var(--neutro-testo); } .pagina-schede .semaforo .luce:disabled { cursor: default; opacity: .6; } .pagina-schede .semaforo .luce:disabled:hover { border-color: var(--linea-tenue); } .semaforo .luce .punto { flex: none; width: 22px; height: 22px; border-radius: 50%; } .semaforo .luce-rosso .punto { background: var(--errore-testo); } .semaforo .luce-verde .punto { background: var(--conferma-testo); } .semaforo .luce-grigio .punto { background: var(--disattivato-testo); } .pagina-schede .semaforo .luce-rosso { background: var(--errore-fondo); border-color: var(--errore-fondo); } .semaforo .luce .quanti { font-size: var(--testo-cifra); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; } .semaforo .luce .cosa { display: flex; flex-direction: column; gap: 2px; } .semaforo .luce .cosa small { font-size: var(--testo-nota); color: var(--secondario-testo); } .semaforo .luce-rosso .quanti, .semaforo .luce-rosso .cosa strong { color: var(--errore-testo); } .semaforo .luce-verde .quanti { color: var(--conferma-testo); } .semaforo .luce-grigio .quanti { color: var(--secondario-testo); } /* il nome del controllo nell'elenco in testo scuro, come nel mockup v2 (coord-portale 13/11): resta il collegamento al suo riquadro più sotto, e si sottolinea solo al passaggio del puntatore */ .pagina-schede tbody td.elastica a.dato-forte { color: var(--neutro-testo); text-decoration: none; } .pagina-schede tbody td.elastica a.dato-forte:hover { text-decoration: underline; } /* la luce nell'elenco: un punto prima della parola dello stato */ .pagina-schede .stato-luce { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .pagina-schede .stato-luce::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; } .pagina-schede .stato-luce.rosso::before { background: var(--errore-testo); } .pagina-schede .stato-luce.verde::before { background: var(--conferma-testo); } .pagina-schede .stato-luce.grigio::before { background: var(--disattivato-testo); } .pagina-schede .stato-luce.rosso { color: var(--errore-testo); font-weight: 500; } /* la forma stretta, nel Riepilogo: cerchio piu' piccolo, le tre luci una sotto l'altra, senza la nota */ .semaforo.piccolo .ciambella { width: 110px; height: 110px; } .semaforo.piccolo .semaforo-luci { grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: 8px; } .pagina-schede .semaforo.piccolo .luce { padding: 10px 12px; gap: 8px; } .semaforo.piccolo .luce .punto { width: 14px; height: 14px; } .semaforo.piccolo .luce .quanti { font-size: var(--testo-cifra-piccola); } .semaforo.piccolo .luce .cosa small { display: none; } .semaforo-riepilogo .vedere-tutti { display: inline-block; margin-top: 12px; } /* LA CELLA DA GUARDARE dentro la tabella di un controllo. La classe esisteva già a peso 600: qui scende a 500, perché i pesi sono due (§1) e il contrasto lo fanno il colore e la dimensione. */ .pagina-schede .cella-attenzione { color: var(--avviso-testo); font-weight: 500; } /* E `` PESA 500 COME TUTTO IL RESTO. Il browser lo disegna a 700, che è il terzo peso di una scala che ne dichiara due: sulle pagine con la scala applicata l'enfasi resta semantica — è quello che serve a chi non vede i colori — e smette di essere un peso in più. */ .pagina-schede strong { font-weight: 500; } /* UNA CELLA CHE NON VA A CAPO, primo rigo e secondo. Una cella che contiene un dato secondario diventa `white-space: normal` — le serve per mandare a capo il `.sotto` — e su una colonna stretta il risultato erano «vuoto: nessuna anomalia» su tre righe e «Rivenditore / Sicilia» su due, con la riga alta il triplo delle altre. Dichiarandolo, la colonna si prende dalla colonna elastica la larghezza che le serve, che è il modo in cui la tabella è fatta per funzionare. */ .pagina-schede td.senza-capo, .pagina-schede td.senza-capo .sotto { white-space: nowrap; } /* IL CAMPO BREVE: codice, partita IVA, paese, percentuale, importo, numero di telefono. Il §6 dà loro 240px contro i 420 dei nomi, e la ragione è che la larghezza di un campo è un'istruzione a chi scrive: un campo lungo il doppio di quello che ci va dice che manca qualcosa. */ .pagina-schede :is(input, select).campo-breve { max-width: 240px; } /* UNA RIGA DI FILTRI. Non è un modulo di modifica — non scrive niente, sceglie che cosa guardare — e per questo resta sulla pagina di elenco invece di andarsene su una schermata sua (§4.3). I campi stanno AFFIANCATI e non incolonnati: quattro filtri uno sotto l'altro facevano mezzo schermo di modulo prima della prima riga di dati, su una pagina che si apre per leggere i dati. L'etichetta resta sopra il suo campo, come dappertutto (§6). */ .pagina-schede .filtri { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; } /* LE RIGHE DEI SEGNAPOSTO DI UNA FRASE NUOVA (TRAD P5): una sotto l'altra, staccate quanto le colonne, perche' si leggono come una tabella senza esserlo (GUI §10). */ .pagina-schede .righe-segnaposto { display: grid; gap: 8px; } .pagina-schede .filtri > div { display: flex; flex-direction: column; } .pagina-schede .filtri label { margin: 0 0 4px; } .pagina-schede .filtri :is(input, select) { margin: 0; } /* Il bottone si allinea in fondo, sulla linea dei campi, e non va a capo come fa dentro un modulo normale. */ .pagina-schede .filtri button[type=submit] { display: inline-block; margin: 0; } /* LA DATA E' UN CAMPO BREVE (§6): 240px, non 420. Un campo data largo il doppio di quello che ci va dice che manca qualcosa. */ .pagina-schede input[type=date] { max-width: 240px; } /* IL CODICE NON E' ROSA. `code` prendeva il rosa di serie di Bootstrap, che è un colore che nella tavolozza non esiste e che dentro una tabella si legge come uno stato. Qui è testo secondario: nomina una chiave tecnica e poi sparisce, come un'intestazione di colonna. */ .pagina-schede code { color: var(--secondario-testo); font-size: var(--testo-nota); } /* ---- 12. UNA SCHEDA FATTA DI PIU' RIQUADRI -------------------------------- La scheda del rivenditore e lo stato di un terminale raccolgono in una lettura sola quello che sta in cinque pagine, e ciascun blocco e' una scheda bianca: la griglia le affianca finche' ci stanno, e le incolonna quando la finestra si stringe. Prima erano `.scheda` e `.riquadro`, un vocabolario parallelo nato prima del documento: un bordo grigio scritto a mano, angoli da `.3rem`, titoli a peso 600 e una `table.conti` per le coppie etichetta/valore. Cioe' una seconda dichiarazione di cose che il foglio gia' diceva — ed e' sparito con loro. */ .pagina-schede .griglia-riquadri { display: grid; gap: 24px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); } .pagina-schede .griglia-riquadri > .pannello { margin: 0; } /* LO STATO DI UN RIQUADRO: una parola con un colore, come nelle celle. Il terzo — `stato-fermo` — e' il rosso di cio' che si e' fermato o non si disfa, e mancava: i tre gradini della sospensione erano tutti dello stesso rosso, e un rosso che vale per tutto smette di dire quale sia quello grave. */ .pagina-schede .stato-fermo { color: var(--errore-testo); } /* LA CASELLA DI SPUNTA E LA SUA ETICHETTA, SU UNA RIGA SOLA (§6). La regola del §6 esiste per un difetto preciso: non essendoci nessuna regola per questi campi, cadevano nel disegno di serie e la regola di larghezza dei campi di testo li allargava a blocco, con la spunta al centro e l'etichetta staccata dall'altra parte. La casella resta della sua dimensione, il testo le sta accanto, e l'etichetta è cliccabile insieme alla casella perché la contiene. */ .pagina-schede label.spunta { display: flex; align-items: flex-start; gap: .5rem; max-width: 46rem; cursor: pointer; } /* ANCHE IL BOTTONE DI SCELTA (radio), dal modello a stampe del 12/10/2026: senza questa riga cadeva nello stesso difetto della casella — allargato dalla regola dei campi di testo, «Uno alla fine» spezzato su tre righe lontano dal suo pallino. */ .pagina-schede label.spunta input[type=checkbox], .pagina-schede label.spunta input[type=radio] { display: inline-block; width: 16px; height: 16px; max-width: 16px; margin: 2px 0 0; padding: 0; flex: 0 0 auto; } /* OGNI CASELLA DI SPUNTA, IN OGNI PAGINA, NEL COMANDO SCURO DEL PORTALE e non nel blu di serie del browser (difetto 9 della rassegna dell'editor del 10/10/2026, esteso da Pietro a tutte le pagine: «falli tutti e due»). Una regola sola e senza involucro: vale anche per le caselle che non stanno in un `label.spunta` — quelle nelle righe dei moduli tabellari (§10, eccezioni dichiarate) e quelle della scheda di un pacchetto di configurazione. */ input[type=checkbox], input[type=radio] { accent-color: var(--comando-scuro); } /* UN GRUPPO DI CASELLE DENTRO UN MODULO (§6): etichetta comune sopra, voci incolonnate sotto. La `legend` di un `fieldset` prende dal browser il corpo di un titolo, e su «Nuovo terminale» «Integrazioni» risultava PIU' GRANDE delle etichette dei campi sopra: una sezione dentro un modulo che sembrava un titolo di pagina. Qui pesa come un'etichetta, perche' e' un'etichetta. */ .pagina-schede fieldset.gruppo-scelte { border: 0; padding: 0; margin: 0 0 4px; } .pagina-schede fieldset.gruppo-scelte { margin-top: 16px; } /* IL `float` DI BOOTSTRAP VA ANNULLATO, e questa riga esiste per averlo visto: il reboot di Bootstrap dichiara `legend { float: left; width: 100%; font-size: calc(1.275rem + .3vw) }`. Da li' venivano tutt'e due i difetti — «Integrazioni» piu' grande delle etichette dei campi sopra, E la prima casella del gruppo spinta al margine destro sulla riga dell'etichetta, con la sua voce schiacciata a larghezza zero. `display: block` da solo non bastava: il `float` restava. */ /* I CAMPI OBBLIGATORI (Pietro 19/10): l'asterisco si vede PRIMA dell'invio; dopo un invio con un campo vuoto, il bordo rosso sta sul SOLO campo che manca (`.invalid`, messo dalla pagina), e il gruppo di scelte prende un margine interno perche' il bordo non tocchi i pallini. */ .pagina-schede .obbligatorio { color: var(--errore-testo); } .pagina-schede input.invalid { border-color: var(--errore-testo); } .pagina-schede fieldset.gruppo-scelte.invalid { padding: 4px 8px; border-radius: 4px; } .pagina-schede fieldset.gruppo-scelte > legend { display: block; float: none; width: auto; padding: 0; margin: 0 0 4px; font-size: inherit; font-weight: inherit; line-height: inherit; color: var(--neutro-testo); } /* =========================================================================== IL SIMBOLO E IL FOGLIO DEL CODICE DI INSTALLAZIONE =========================================================================== Il QR e il codice in chiaro stanno FIANCO A FIANCO e non uno al posto dell'altro: chi inquadra usa il primo, chi trascrive il secondo, e la fotocamera non legge sempre — nel magazzino, con il foglio piegato, con l'iPad che non mette a fuoco. Su schermo stretto vanno uno sotto l'altro. */ .codice-e-simbolo { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0; } .codice-e-simbolo .simbolo { flex: 0 0 auto; line-height: 0; } .codice-e-simbolo > div:last-child { flex: 1 1 16rem; min-width: 0; } /* IL FOGLIO NON SI VEDE A SCHERMO, e non è una pagina a parte: il codice in chiaro esiste solo nella risposta dell'atto che l'ha generato, quindi una pagina che lo ricostruisse non potrebbe farlo. Sta qui, e lo tira fuori la stampa del browser. `foglio-visibile` lo mostra a schermo per guardarlo prima — è lo stesso blocco, non un secondo disegno che può divergere. */ .foglio { display: none; } .foglio-visibile { display: block; margin: 1.5rem 0; padding: 1.5rem; border: 1px dashed var(--disattivato-testo); border-radius: .4rem; background: var(--foglio-fondo); color: var(--foglio-inchiostro); } .foglio-simbolo { line-height: 0; margin-bottom: 1rem; } /* IL CODICE SUL FOGLIO È SENZA PREFISSO, ed è la forma corta del §12: chi trascrive ha già in mano il foglio giusto, e cinque caratteri in più sono cinque occasioni di sbagliare. Il prefisso sta nel simbolo, dove non lo digita nessuno. */ .foglio-codice { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 2rem; letter-spacing: .15em; margin: .3rem 0 1.2rem; user-select: all; } .foglio-dati { margin: 0 0 1.2rem; } .foglio-dati > div { display: flex; gap: .8rem; padding: .15rem 0; } .foglio-dati dt { min-width: 9rem; color: var(--foglio-etichetta); } .foglio-dati dd { margin: 0; font-weight: 600; } .foglio-avvertenze { border-top: 1px solid var(--foglio-linea); padding-top: .8rem; } .foglio-avvertenze p { margin: .4rem 0; max-width: 34rem; } /* LA RIGA DI SEPARAZIONE E' UNA LINEA, non una fila di trattini: deciso l'8 settembre 2026 insieme al testo del foglio. Era `dotted`, e su carta si leggeva come una linea tratteggiata da ritagliare. */ .foglio-pin { border-top: 1px solid var(--foglio-linea); padding-top: .5rem; margin-top: .8rem !important; } /* --------------------------------------------------------------------------- LA STAMPA: viene fuori IL FOGLIO E BASTA. Non è una comodità: il foglio è una credenziale, e una stampa che si porta dietro il menu, la testata e i bottoni è un foglio che qualcuno ritaglia — cioè un foglio in più che gira. Qui la pagina si spegne tutta e resta lui. `@media print` è l'unico modo di farlo SENZA JavaScript: non c'è nessuna chiamata a window.print(), la stampa la comanda chi legge. */ @media print { body * { visibility: hidden !important; } .foglio, .foglio * { visibility: visible !important; } /* E ANCHE I FONDI VANNO SPENTI. `visibility: hidden` nasconde il contenuto e lascia in piedi la scatola: il menu a colonna e il riquadro della pagina continuavano a stampare il proprio fondo grigio, e sul foglio veniva fuori un rettangolo pieno sotto le avvertenze. Trovato guardando la stampa vera, non il CSS. */ body, body *:not(.foglio):not(.foglio *) { background: transparent !important; box-shadow: none !important; border-color: transparent !important; } /* IL SECONDO FOGLIO BIANCO. `visibility: hidden` nasconde l'inchiostro e LASCIA IN PIEDI LE SCATOLE: il documento resta alto quanto la pagina intera, e la stampa esce su due pagine, la seconda vuota. Trovato stampando davvero in PDF e contando le pagine, non leggendo il CSS. Qui sparisce tutto quello che non e' il foglio ne' un suo antenato. */ body *:not(:has(.foglio)):not(.foglio):not(.foglio *) { display: none !important; } .foglio { display: block !important; position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 0; border: 0; background: var(--foglio-fondo); color: var(--foglio-inchiostro); } /* Il simbolo non si rimpicciolisce mai sotto la misura in millimetri che l'SVG dichiara: un QR stampato piccolo è un QR che non si legge. */ .foglio-simbolo svg { width: 70mm !important; height: 70mm !important; } /* SU CARTA LE LINEE E LE ETICHETTE SONO NERE, non grigie: il grigio in stampa viene fuori come un retino, e un'etichetta a retino accanto a un valore pieno si legge come cancellata. */ .foglio-avvertenze { border-top: 1px solid var(--foglio-inchiostro); } .foglio-pin { border-top: 1px solid var(--foglio-inchiostro); } .foglio-dati dt { color: var(--foglio-inchiostro); } @page { margin: 18mm; } } /* ---- L'AVVIO GUIDATO — i passi --------------------------------------------- Nato il 21 settembre 2026 (documenti/ONBOARDING_disegno_v0.2.md). Un elenco di passi e non una tabella: ogni riga e' un collegamento con una riga sotto, e le colonne sarebbero due. Il segno a sinistra, la parola accanto, e il titolo: il colore sta sul segno e sulla parola, mai da solo (GUI §0). */ .pagina-schede ol.passi { list-style: none; margin: 0; padding: 0; } .pagina-schede .passo { display: grid; grid-template-columns: 1.6rem 6.5rem 1fr; column-gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linea-tenue); } .pagina-schede .passo:first-child { padding-top: 0; } .pagina-schede .passo:last-child { padding-bottom: 0; border-bottom: 0; } .pagina-schede .passo .segno { font-size: var(--testo-dato); text-align: center; } .pagina-schede .passo .stato { font-size: var(--testo-tabella); text-transform: uppercase; letter-spacing: .04em; color: var(--secondario-testo); } .pagina-schede .passo .corpo { display: flex; flex-direction: column; gap: 4px; } .pagina-schede .passo .titolo { font-size: var(--testo-dato); font-weight: 500; } .pagina-schede .passo .sotto { font-size: var(--testo-nota); color: var(--secondario-testo); max-width: 65ch; line-height: 1.45; } /* IL VERDE E' UNA CONFERMA (GUI §2): un passo fatto e' la risposta «si'» a chi voleva sapere se l'aveva fatto. Il passo da fare resta neutro, non e' un errore; quello da guardare e' attenuato, perche' non si segna. */ .pagina-schede .passo.fatto :is(.segno, .stato) { color: var(--conferma-testo); } .pagina-schede .passo.fatto .titolo { color: var(--secondario-testo); } .pagina-schede .passo.da-guardare :is(.segno, .stato) { color: var(--disattivato-testo); } /* ---- L'EDITOR DEI MODELLI DI STAMPA (STAMPA v0.5 §3, passo 6.1) ----------- L'anteprima e' il foglio: carta, bianco e nero, largo quanto le colonne del bersaglio in caratteri. Ogni riga e' un bottone — il clic seleziona il blocco che l'ha prodotta — e le righe del blocco selezionato portano il colore della selezione a sinistra, non sopra il testo: il foglio resta leggibile com'e'. */ .editor-stampa { /* IL COLORE DELLA SELEZIONE DELL'EDITOR (righe del foglio ed elenco dei blocchi) sta qui, e solo qui. E' il comando scuro e non l'arancione: l'arancione e' solo dell'azione principale, «Salva come versione» (§5; difetto 7 della rassegna del 10/10/2026, «falli tutti e due», Pietro). Prima erano tre arancioni nella stessa schermata. */ --editor-selezione-fondo: var(--comando-scuro); --editor-selezione-inchiostro: var(--comando-inchiostro); display: grid; /* TRE COLONNE (Componi v4, punto 1, Pietro 26/10/2026): i blocchi a sinistra, la carta al centro, larga quanto le sue colonne, le proprieta' del blocco scelto a destra. Sotto i 1100px le proprieta' vanno sotto, a tutta larghezza; sotto i 720px una colonna sola, nell'ordine in cui si lavora: i blocchi, la carta, le proprieta'. */ grid-template-columns: 15rem minmax(0, 23.75rem) minmax(0, 1fr); gap: 16px; align-items: start; } /* SOTTO I 1600px i blocchi e la carta cedono spazio alle proprieta': i campi restano interi, senza tagli. */ @media (max-width: 100rem) { /* COME IL MOCKUP v4 (coord-portale 13/11): 240px ai blocchi e fino a 380px alla carta anche qui; a 208px i nomi dei blocchi andavano a capo su quattro righe. La carta stringe il corpo da sola (sotto). */ .editor-stampa { grid-template-columns: 15rem minmax(0, 23.75rem) minmax(0, 1fr); } .pagina-schede .editor-stampa .editor-foglio { padding: 16px; } } @media (max-width: 68.75rem) { .editor-stampa { grid-template-columns: 13.75rem minmax(0, 1fr); } .editor-stampa .editor-proprieta { grid-column: 1 / -1; } } @media (max-width: 45rem) { .editor-stampa { grid-template-columns: minmax(0, 1fr); } } .editor-foglio { overflow-x: auto; } /* L'ANTEPRIMA RESTA IN VISTA mentre si lavora sull'elenco e sulle schede (rassegna di coord-portale del 12/10/2026, giro 3 di A4, punto 3): a larghezza piena stava in cima alla sua colonna e, scendendo, spariva; ogni modifica va vista subito. Ferma nella sua colonna; se e' piu' alta della finestra, scorre dentro di se'. Componi v4, punto 2: ferma anche con due colonne; si stacca solo con una colonna sola, dove sotto la carta c'e' il resto della pagina. */ @media (min-width: 45.0625rem) { .editor-foglio { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; } } /* LA CARTA INTERA ANCHE SUL TELEFONO (punto 4): a 400px la carta da 42 colonne scorreva dentro il pannello con la barra invisibile, e sembrava tagliata. Sotto la larghezza dell'editor a due colonne il corpo dei caratteri si riduce quanto serve perche' tutte le colonne della stampante stiano nel riquadro: ogni riga resta intera, com'e' sulla carta. 0.61 e' la larghezza di un carattere a passo fisso rispetto al suo corpo, arrotondata per eccesso (Menlo e SF Mono 0.602). Dal 02/11/2026 anche con tre colonne: la colonna della carta ha una larghezza sua, e una stampante da 48 colonne ci sta intera. */ .editor-foglio { container-type: inline-size; } .editor-foglio .foglio-di-stampa { font-size: min(100%, calc((100cqw - 24px - var(--margine-della-riga)) / (var(--colonne, 42) * 0.61))); } .foglio-di-stampa::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(-45deg, transparent 6px, var(--scheda-fondo) 0) 0 0 / 12px 10px, linear-gradient(45deg, transparent 6px, var(--scheda-fondo) 0) 0 0 / 12px 10px; } /* LA BARRA DEL BLOCCO SCELTO, SOPRA LA CARTA (Componi v4 punto 3): i tre gruppi di bottoni del pannello (allineamento, dimensione, stile) su una riga sola, in una cornice come la barra di Word. Le parole dei gruppi restano, piccole sopra i bottoni: sono le stesse del pannello di prima. */ .editor-foglio .barra-del-blocco { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: flex-end; border: 1px solid var(--linea-tenue); border-radius: 8px; padding: 6px; margin: 0 0 10px; background: var(--scheda-fondo); } .pagina-schede .editor-foglio .barra-del-blocco fieldset.gruppo-scelte { margin: 0; } /* Eliminare sta in fondo a destra della barra, separato dai bottoni dell'aspetto. */ .editor-foglio .barra-del-blocco .cestino { margin-left: auto; color: var(--errore-testo); } /* IL CESTINO: accanto al blocco nell'elenco e nella barra sopra la carta; la frase intera sta una volta sola, in fondo alle proprieta' (mockup Componi v4, 02/11/2026). */ .cestino { display: inline-flex; align-items: center; justify-content: center; } .icona-cestino { display: block; } .elenco-blocchi li.riga-blocco { position: relative; } /* L'ELENCO SENZA NUMERI (mockup v4): l'ordine si vede dalla carta e si cambia con la maniglia. */ .editor-stampa ol.elenco-blocchi { list-style: none; padding-left: 0; } .elenco-blocchi .riga-del-blocco { display: flex; align-items: stretch; gap: 4px; min-width: 0; padding: 0 0 0 8px; border-radius: 8px; } .elenco-blocchi .riga-del-blocco:hover { background: var(--neutro-fondo); } .elenco-blocchi .riga-del-blocco > .blocco { flex: 1 1 auto; min-width: 0; } .elenco-blocchi .maniglia { flex: none; align-self: center; cursor: grab; color: var(--testo-nota); letter-spacing: -2px; user-select: none; touch-action: none; } .elenco-blocchi li.riga-blocco.sotto-il-dito { outline: 2px solid var(--campo-bordo); outline-offset: 1px; } @media (pointer: coarse) { .elenco-blocchi .maniglia { display: flex; align-items: center; justify-content: center; align-self: stretch; min-width: 2.5rem; min-height: 2.5rem; } } .elenco-blocchi .riga-del-blocco > .cestino { flex: none; min-height: 2.5rem; min-width: 2.5rem; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--errore-testo); cursor: pointer; } .elenco-blocchi .riga-del-blocco > .cestino:hover { border-color: var(--campo-bordo); } /* IL SALVATAGGIO IN TESTATA (mockup Componi v4): sempre in vista, mai in fondo alla terza colonna. */ .pagina-schede .testata-editor { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-end; justify-content: space-between; } .salva-in-testata { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 0; } .salva-in-testata .campo { margin: 0; } .salva-in-testata input { width: 16rem; max-width: 100%; } .salva-in-testata .nota { flex-basis: 100%; margin: 0; } .pagina-schede .editor-foglio .barra-del-blocco fieldset.gruppo-scelte > legend { font-size: 0.75rem; margin-bottom: 2px; } /* IL MARGINE DELLA RIGA (bordo della selezione e rientro) si aggiunge alla larghezza del foglio: senza, il testo piu' lungo usciva dalla riga, e la linea tratteggiata superava la fascia nera di 7px. */ .foglio-di-stampa { --margine-della-riga: calc(.25rem + 3px); background: var(--foglio-fondo); color: var(--foglio-inchiostro); /* UN FOGLIO E NON UN RIQUADRO (mockup v4): niente cornice, l'ombra e in fondo il dente dello strappo. */ border: 0; border-radius: 2px; position: relative; box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .08); padding: 16px 12px 26px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; line-height: 1.35; } .riga-di-stampa { display: block; width: 100%; margin: 0; padding: 0 0 0 .25rem; border: 0; border-left: 3px solid transparent; background: transparent; color: inherit; font: inherit; text-align: left; white-space: pre; cursor: pointer; } .riga-di-stampa.selezionata { border-left-color: var(--editor-selezione-fondo); } .foglio-di-stampa div.riga-di-stampa { cursor: default; } .riga-di-stampa.stile-grassetto { font-weight: 700; } .riga-di-stampa.stile-sottolineato { text-decoration: underline; } .riga-di-stampa.stile-negativo { background: var(--foglio-inchiostro); color: var(--foglio-fondo); } .elenco-blocchi { padding-left: 1.5rem; } .elenco-blocchi .blocco { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; padding: .15rem .25rem; cursor: pointer; /* IL NUMERO SULLA PRIMA RIGA DEL NOME (rassegna di coord-portale del 12/10/2026): il bottone e' un blocco in linea, e il numero dell'elenco si allineava alla sua ULTIMA riga — un nome lungo andava a capo e il «4.» finiva sotto. */ vertical-align: top; } .elenco-blocchi .blocco.selezionato { background: var(--editor-selezione-fondo); color: var(--editor-selezione-inchiostro); } /* L'IMPAGINAZIONE DELL'EDITOR (rassegna del 10/10/2026, «sistema tutti i difetti di impaginazione», Pietro). Solo la scala del §3 e i ruoli del §5-§6; nessun colore nuovo. 1. «I blocchi» e «Salva come versione» sono sezioni del pannello: 24px sopra, come fra due fasce. Erano attaccati al campo sopra, e «I blocchi» si leggeva come l'etichetta della tendina di «Stampa il blocco solo se c'e'». */ .editor-blocchi > h2:not(:first-child), .editor-blocchi .azioni-modulo > h2 { margin-top: 24px; } /* 3. IL SALVATAGGIO E' UNA SEZIONE, non una riga di comandi: `azioni-modulo` mette in riga bottone e «Lascia perdere», e qui metteva in riga anche il titolo con l'etichetta della nota, staccata dal suo campo. In colonna: titolo, etichetta sopra il campo (§6), poi il bottone, 24px sotto l'ultimo campo come in ogni modulo. */ .editor-blocchi .azioni-modulo { display: block; margin-top: 0; } .editor-blocchi .azioni-modulo > h2 { margin-bottom: 0; } .editor-blocchi .azioni-modulo button[type=submit] { margin-top: 24px; } /* 4. AGGIUNGI ED ELIMINA, sotto l'etichetta (rassegna del 10/10/2026; disposizione decisa da coord-portale il 27/10/2026 per le tre colonne di Componi v4): la tendina sopra, a riga intera; sotto, accanto fra loro, «Dopo il selezionato» ed «Eliminare il blocco». Con una colonna sola resta la riga di prima: tendina, «Dopo il selezionato» accanto (8px) e l'eliminazione staccata, perche' e' l'atto contrario. */ .editor-blocchi .campo > .azioni { margin-top: 4px; } /* Il contenitore della riga e' un `div` e non un paragrafo: i 16px sotto, che al paragrafo dava il foglio di serie, si dichiarano. Senza, l'elenco dei blocchi si attaccava alla riga (visto sulla schermata, 10/10/2026). */ .editor-blocchi div.campo { margin-bottom: 16px; } /* Un campo subito dopo una barra di bottoni (Stile, Allineamento, Dimensione) sta 16px sotto, come ogni altro campo (§3). La barra lascia sotto solo 4px, e un campo che non e' «etichetta + ⓘ» non aggiungeva niente: «Allineamento» negli altri centri, un titolo con la ⓘ, si attaccava ai bottoni di Stile (giro della scimmia, 20/10/2026). */ .editor-blocchi .gruppo-scelte + .campo { margin-top: 16px; } /* L'etichetta davanti al dato, in evidenza nel pannello (Componi v4 punto 6): una riga d'accento a sinistra e il fondo tenue. */ .editor-blocchi .campo.in-evidenza { border-left: 3px solid var(--selezione-fondo); background: var(--neutro-fondo); padding: 6px 8px; border-radius: 0 6px 6px 0; } .editor-blocchi .campo > .azioni > select { margin: 0; } .editor-blocchi .campo > .azioni > :last-child:not(:nth-child(2)) { margin-left: 8px; } /* Componi v4, tre colonne: la colonna dei blocchi e' stretta (15rem) e la riga non ci sta piu'. La tendina prende la riga intera e i due bottoni vanno sotto, accanto fra loro; con una colonna sola resta la riga di prima. */ @media (min-width: 45.0625rem) { .editor-blocchi .campo > .azioni { row-gap: 8px; } .editor-blocchi .campo > .azioni > select { flex: 1 0 100%; } /* I due bottoni si dividono la riga: con le parole intere non ci stavano insieme nei 15rem, e l'eliminazione andava sotto da sola. Il testo va a capo dentro il bottone. */ .editor-blocchi .campo > .azioni > button { flex: 1 1 0; min-width: 0; white-space: normal; } } /* La colonna delle proprieta' e' stretta (16rem): un'etichetta lunga andava a capo e la ⓘ finiva sotto, da sola. Nella pagina di Componi etichetta e ⓘ stanno in una riga flessibile: l'etichetta va a capo dentro di se', la ⓘ le resta accanto, centrata; quello che segue (la spiegazione aperta, il campo) prende la riga intera sotto. */ .editor-stampa .campo:has(> label + details.info-campo) { display: flex; flex-wrap: wrap; align-items: center; column-gap: .35rem; } .editor-stampa .campo:has(> label + details.info-campo) > * { flex: 1 0 100%; } .editor-stampa .campo:has(> label + details.info-campo) > label { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 1.5rem - .35rem); } .editor-stampa .campo:has(> label + details.info-campo) > details.info-campo { flex: 0 0 auto; margin-left: 0; } .editor-stampa .campo:has(> label + details.info-campo) > details.info-campo[open] > summary { flex: 0 0 auto; } .editor-stampa .campo:has(> label + details.info-campo) > details.info-campo[open] > p { flex: 1 0 100%; } /* Un comando dal testo lungo nella colonna delle proprieta' va a capo dentro il bottone e non esce dal pannello. */ .editor-proprieta .azioni > button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; } /* 5. «ANNULLA» E' UN COLLEGAMENTO (§5: «Annulla: collegamento, non bottone»). Resta un