/* ============================================================ Portale Agrivite — sistema grafico delle pagine del software. Squadrato, denso, da catalogo tecnico: è la veste del pannello di Nio, portata qui il 20/09/2026 perché due software della stessa piattaforma non sembrino di due ditte diverse. Il semaforo z-score (verde/ambra/rosso) è l'unico colore che "significa" qualcosa; il resto sono i grigi e il verde di Nio. Nota: i nomi di variabile hanno il prefisso --pt- apposta, per non collidere con quelle dell'admin di Django. Caratteri, colori e barra superiore non sono qui: stanno in guscio/portale.css, perché li usa anche «Gestione dati». Questo foglio va sempre dopo quello. ============================================================ */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--pt-bg); color: var(--pt-ink); font-family: var(--pt-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3 { text-wrap: balance; } a { color: var(--pt-accent); } .pt-num { font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--pt-focus); outline-offset: 1px; border-radius: var(--pt-raggio-piccolo); } /* ---- Impaginato ---- La larghezza segue il monitor invece di fermarsi a una misura fissa: su uno schermo grande le tabelle avevano lo spazio e non lo usavano. Resta un tetto perché una riga di testo lunga due schermi non si legge; le pagine fatte di tabelle e carte di controllo (.pt-largo) il tetto non ce l'hanno, lì lo spazio in più diventa colonne leggibili invece che righe interminabili. */ .pt-wrap { width: 100%; max-width: 1400px; margin: 0 auto; padding: 28px clamp(20px, 2.5vw, 48px) 80px; } .pt-wrap.pt-largo { max-width: none; } /* L'etichetta piccola sopra il titolo e quella che apre una sezione: il condensato maiuscolo le distingue dal testo a colpo d'occhio, ed è la stessa voce che nel pannello di Nio fa le etichette dei campi. */ .pt-eyebrow { font-family: var(--pt-titoli); text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 500; color: var(--pt-faint); margin: 0 0 4px; } /* Il titolo della pagina: condensato e maiuscolo, come l'h1 del pannello. ⚠️ Vale per i titoli, non per le intestazioni di colonna — là il maiuscolo confonderebbe la r della ripetibilità con la R della riproducibilità (pt/test_r_maiuscola.py). */ .pt-title { font-family: var(--pt-titoli); font-weight: 600; font-size: 28px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; margin: 0 0 6px; } .pt-lede { color: var(--pt-faint); margin: 0 0 22px; max-width: 64ch; } .pt-section-label { font-family: var(--pt-titoli); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--pt-faint); font-weight: 500; margin: 28px 0 10px; } /* I riquadri: angoli piccoli, un bordo da un punto, un'ombra appena accennata. Il rilievo lo danno i bordi e le fasce scure, non le ombre. */ .pt-card { background: var(--pt-surface); border: 1px solid var(--pt-border); border-radius: var(--pt-raggio); box-shadow: var(--pt-shadow); } .pt-pad { padding: 20px 22px; } /* ---- Home ---- */ .pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } /* Il filetto verde in alto le fa leggere come schede di un catalogo: oggetti da aprire, non paragrafi. È il segno della prima pagina del pannello di Nio, e qui i moduli sono la stessa cosa. */ .pt-tile { display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: inherit; background: var(--pt-surface); border: 1px solid var(--pt-border); border-top: 3px solid var(--pt-accent-solid); border-radius: var(--pt-raggio); padding: 17px 18px; box-shadow: var(--pt-shadow); transition: border-color .12s, box-shadow .12s; } .pt-tile:hover { border-color: var(--pt-border-forte); border-top-color: var(--pt-accent); box-shadow: var(--pt-shadow-forte); } .pt-tile .ico { width: 34px; height: 34px; border-radius: var(--pt-raggio-piccolo); display: grid; place-items: center; background: var(--pt-accent-soft); color: var(--pt-accent); margin-bottom: 4px; } .pt-tile .ico .pt-icona { width: 19px; height: 19px; } /* Che cosa c'è dentro, piccolo sopra il nome: «Presenze» sopra «Personale». */ .pt-tile .sopra { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pt-faint); margin-bottom: -4px; } .pt-tile .sopra:empty { display: none; } /* Le icone disegnate (guscio/static/guscio/icone.svg, 25/10/2026): tratti nel colore del testo intorno, uguali su ogni computer, al posto delle faccine del telefono che ognuno disegnava a modo suo. */ .pt-icona { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pt-tile.lettura .ico { background: var(--pt-surface-2); color: var(--pt-faint); } .pt-tile h3 { margin: 0; font-family: var(--pt-titoli); font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; color: var(--pt-scuro); } .pt-tile p { margin: 0; color: var(--pt-faint); font-size: 13px; line-height: 1.45; } .pt-tile .go { margin-top: 4px; color: var(--pt-accent); font-size: 12.5px; font-weight: 600; } /* Le targhette: squadrate e in condensato maiuscolo, come quelle di un catalogo ricambi — si leggono piccole e non si confondono col testo. */ .pt-tag { display: inline-flex; align-self: flex-start; font-family: var(--pt-titoli); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: var(--pt-raggio-piccolo); font-weight: 500; border: 1px solid transparent; } .pt-tag.scrive { background: var(--pt-accent-soft); color: var(--pt-accent); border-color: var(--pt-accent-bordo); } .pt-tag.lettura { background: var(--pt-surface-2); color: var(--pt-faint); border-color: var(--pt-border); } .pt-resume { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-left: 3px solid var(--pt-accent-solid); margin-bottom: 24px; } .pt-resume .txt { flex: 1; min-width: 220px; } .pt-resume h3 { margin: 0 0 3px; font-family: var(--pt-titoli); font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; } .pt-resume p { margin: 0; color: var(--pt-muted); font-size: 13px; } /* ---- Pulsanti ---- Pieni, squadrati, con la parola in condensato maiuscolo e la riga scura sotto che li fa sembrare premibili. Piatti e non sfumati: in uno strumento di lavoro il rilievo finto invecchia in fretta. Si abbassano quando si premono, che è l'unico modo che una pagina senza JavaScript ha di rispondere al dito. */ .pt-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--pt-raggio-piccolo); padding: 8px 16px; font-family: var(--pt-titoli); font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: background-color .1s linear; } .pt-btn.primario { background: var(--pt-accent-solid); color: var(--pt-on-accent); border-bottom: 3px solid var(--pt-accent); } .pt-btn.primario:hover { background: var(--pt-accent); } /* L'azione secondaria: stessa forma, contorno invece del pieno. La forma uguale dice «è un pulsante», il vuoto dice «non è quello principale». */ .pt-btn.neutro { background: var(--pt-surface); color: var(--pt-scuro); border: 1px solid var(--pt-border-forte); border-bottom-width: 3px; } .pt-btn.neutro:hover { background: var(--pt-scuro); color: #fff; border-color: var(--pt-scuro); } /* La conferma di ciò che cancella — «Sì, elimina», «Annulla il caricamento»: rossa, perché il verde dice «vai tranquillo» e lì non lo è (25/10/2026). Si usa solo sull'ultimo passo, non sul collegamento che porta alla domanda. */ .pt-btn.pericolo { background: var(--pt-bad); color: #fff; border-bottom: 3px solid #7a1a11; } .pt-btn.pericolo:hover { background: #7a1a11; } .pt-btn:active { transform: translateY(1px); border-bottom-width: 2px; } .pt-btn:disabled { opacity: .45; cursor: not-allowed; } /* ---- Avvisi ---- */ /* Il filetto colorato a sinistra è il segnale di stato di tutto il pannello: dice com'è andata prima ancora di leggere la frase. */ /* ⚠️ Blocco e non «flex». Era flex «per icona + testo», ma di icone non ne ha mai avute, e una frase con dentro un diventava tre pezzi separati da dieci punti di spazio: «Stai guardando | più parametri insieme | : i punti non sono uniti…». In `strumenti/carta.html` c'era un messo apposta per aggirarlo, col commento che lo spiegava; il rattoppo non serve più, e chi scrive il prossimo avviso non deve più saperlo. */ .pt-avviso { display: block; padding: 11px 14px; border-radius: var(--pt-raggio-piccolo); font-size: 13.5px; border: 1px solid transparent; border-left-width: 4px; margin-bottom: 16px; color: var(--pt-ink); } .pt-avviso.ok { background: var(--pt-ok-fill); border-color: var(--pt-ok-bordo); border-left-color: var(--pt-ok); } .pt-avviso.ko { background: var(--pt-bad-fill); border-color: var(--pt-bad-bordo); border-left-color: var(--pt-bad); } .pt-avviso.attenzione { background: var(--pt-warn-fill); border-color: var(--pt-warn-bordo); border-left-color: var(--pt-warn); } .pt-avviso.neutro { background: var(--pt-surface-2); border-color: var(--pt-border); border-left-color: var(--pt-border-forte); } .pt-avviso a { color: var(--pt-accent); } /* ---- Login ---- */ .pt-login { max-width: 380px; margin: 6vh auto 0; } .pt-login .pt-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; } .pt-login label { font-family: var(--pt-titoli); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--pt-muted); } .pt-login input { background: var(--pt-surface); color: var(--pt-ink); border: 1px solid var(--pt-border-forte); border-radius: var(--pt-raggio-piccolo); padding: 8px 10px; font: inherit; font-size: 14px; } .pt-login input:focus { border-color: var(--pt-focus); box-shadow: var(--pt-anello); outline: none; } /* ---- Filtri (pronti per le Carte) ---- */ .pt-filtri { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } /* Due file di campi una sotto l'altra: lo stesso respiro che c'è fra i campi. */ .pt-filtri + .pt-filtri { margin-top: 14px; } .pt-campo { display: flex; flex-direction: column; gap: 5px; } .pt-campo label { font-family: var(--pt-titoli); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--pt-muted); } /* La nota che spiega una casella appartiene alla casella sopra, non all'etichetta sotto: senza questo respiro le due si leggono insieme. */ .pt-campo > p:last-child { margin-bottom: 14px; } .pt-campo label .agg { text-transform: none; letter-spacing: 0; color: var(--pt-faint); } .pt-campo select, .pt-campo input { background: var(--pt-surface); color: var(--pt-ink); border: 1px solid var(--pt-border-forte); border-radius: var(--pt-raggio-piccolo); padding: 7px 9px; font: inherit; font-size: 13.5px; } .pt-campo select option { background: var(--pt-surface); color: var(--pt-ink); } .pt-campo select:hover, .pt-campo input:hover { border-color: var(--pt-faint); } /* L'anello di messa a fuoco è verde e spesso: chi naviga con la tastiera deve vedere dov'è senza cercarlo. */ .pt-campo select:focus, .pt-campo input:focus { border-color: var(--pt-focus); box-shadow: var(--pt-anello); outline: none; } .pt-campo input[type=number] { width: 92px; } /* ---- Ogni casella delle pagine ha la veste ---- Fino al 25/10/2026 la veste arrivava solo alle caselle messe dentro un .pt-campo: le altre — le note, i campi del Personale e della Biblioteca scritti senza, le tabelle con le caselle dentro — restavano quelle di serie del browser, piccole e grigie, accanto a quelle vestite. Questa è la base per tutte le caselle dentro le pagine (non Gestione dati, che ha il suo foglio). «:where» le dà peso zero: qualunque regola di un modulo la vince, senza dover alzare la voce. */ :where(.pt-wrap) :where(input:not([type=checkbox], [type=radio], [type=file], [type=submit], [type=button], [type=hidden], [type=range], [type=color]), select, textarea) { background: var(--pt-surface); color: var(--pt-ink); border: 1px solid var(--pt-border-forte); border-radius: var(--pt-raggio-piccolo); padding: 7px 9px; font: inherit; font-size: 13.5px; max-width: 100%; } :where(.pt-wrap) :where(textarea) { line-height: 1.45; resize: vertical; box-sizing: border-box; } :where(.pt-wrap) :where(input:not([type=checkbox], [type=radio], [type=file]), select, textarea):focus { border-color: var(--pt-focus); box-shadow: var(--pt-anello); outline: none; } .pt-campo textarea { width: 100%; } .pt-wrap input[type=checkbox], .pt-wrap input[type=radio] { accent-color: var(--pt-accent-solid); } /* ---- I moduli: caselle in fila che vanno a capo da sole ---- Erano copiati in tre fogli (Personale, Strumenti, Contatti) con misure tutte un po' diverse; sono qui una volta sola dal 25/10/2026, con quelle degli Strumenti. «.pt-modulo» dà il respiro a una .pt-card senza .pt-pad. */ .pt-modulo { padding: 16px 18px; } .pt-riga-campi { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-start; } .pt-riga-campi .pt-campo { min-width: 190px; } .pt-riga-campi .pt-campo.stretto { min-width: 132px; max-width: 168px; } .pt-riga-campi .pt-campo.largo { flex: 1 1 220px; min-width: 220px; } .pt-riga-campi .pt-campo > p:last-child { margin-bottom: 0; } /* La riga di aiuto sotto una casella: non deve pesare quanto la casella. */ .pt-aiuto { margin: 4px 0 0; font-size: 11.5px; line-height: 1.35; } /* Il nome di una domanda le cui risposte stanno accanto, non sotto («Che cosa: cliente · fornitore»): è un'etichetta come quelle sopra le caselle. */ .pt-domanda-nome { font-family: var(--pt-titoli); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--pt-muted); } /* Una scelta è un bersaglio da cliccare, non un pallino da centrare: tutta l'etichetta si clicca, e quella scelta si vede accesa. Era del Personale. */ .pt-scelta { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid var(--pt-border-forte); border-radius: var(--pt-raggio-piccolo); padding: 6px 11px; font-size: 13.5px; background: var(--pt-surface); } .pt-scelta:hover { border-color: var(--pt-faint); } .pt-scelta:has(input:checked) { border-color: var(--pt-accent); background: var(--pt-accent-soft); color: var(--pt-accent); } .pt-scelta:has(input:focus-visible) { box-shadow: var(--pt-anello); } .pt-scelta input { margin: 0; } /* casella di ricerca sopra i menù singoli lunghi (tendina-cercabile.js) */ .pt-cerca-tendina { background: var(--pt-surface); color: var(--pt-ink); border: 1px solid var(--pt-border-forte); border-radius: var(--pt-raggio-piccolo); padding: 4px 8px; font: inherit; font-size: 12.5px; margin-bottom: 3px; } .pt-cerca-tendina:focus { border-color: var(--pt-focus); box-shadow: var(--pt-anello); outline: none; } .pt-conteggio-tendina { font-size: 10.5px; color: var(--pt-faint); } .pt-campo select.largo { max-width: 340px; } /* chip dei filtri attivi (link che tolgono il filtro) */ .pt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .pt-chips:empty { margin-top: 0; } .pt-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; text-decoration: none; background: var(--pt-accent-soft); color: var(--pt-accent); border: 1px solid var(--pt-accent-bordo); padding: 2px 6px 2px 9px; border-radius: var(--pt-raggio-piccolo); } .pt-chip b { font-weight: 600; } .pt-chip .x { font-size: 14px; line-height: 1; opacity: .7; } .pt-chip:hover .x { opacity: 1; } .pt-chips .azzera { align-self: center; color: var(--pt-muted); font-size: 12px; text-decoration: underline; } /* Un chip che sceglie invece di togliere — il periodo («questo mese», «ultimo anno»), le carte da sovrapporre — si accende quando è la scelta in uso. Stava solo negli Strumenti: nel Personale i tre chip del periodo sembravano uguali anche dopo il clic (25/10/2026). */ .pt-chip a { color: inherit; text-decoration: none; } .pt-chip input[type="checkbox"] { margin: 0; accent-color: var(--pt-accent-solid); } .pt-chip.attivo { background: var(--pt-accent-solid); border-color: var(--pt-accent); color: #fff; font-weight: 600; } .pt-chip.attivo .pt-muted { color: rgba(255, 255, 255, .8); } a.pt-chip.attivo:link, a.pt-chip.attivo:visited { color: #fff; } /* selezione multipla (widget da pt.js sopra un