/* ============================================================
   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: 32px; height: 32px; border-radius: var(--pt-raggio-piccolo);
                display: grid; place-items: center; background: var(--pt-accent-soft);
                color: var(--pt-accent); margin-bottom: 4px; font-size: 17px; }
.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); }
.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 <b> 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 <span> 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; }
.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; }
/* 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; }

/* selezione multipla (widget da pt.js sopra un <select multiple>) */
.pt-multi { position: relative; }
.pt-multi-btn { text-align: left; 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; cursor: pointer; min-width: 160px; }
.pt-multi-btn:hover { border-color: var(--pt-faint); }
.pt-multi-btn:focus { border-color: var(--pt-focus); box-shadow: var(--pt-anello); outline: none; }
.pt-multi-btn::after { content: "▾"; float: right; color: var(--pt-faint); margin-left: 8px; }
.pt-multi-pop { position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 4px; background: var(--pt-surface);
                border: 1px solid var(--pt-border-forte); border-radius: var(--pt-raggio);
                box-shadow: var(--pt-shadow-forte);
                padding: 8px; min-width: 210px; max-height: 280px; overflow: auto; }
.pt-multi-search { width: 100%; box-sizing: border-box; background: var(--pt-surface); color: var(--pt-ink);
                   border: 1px solid var(--pt-border-forte); border-radius: var(--pt-raggio-piccolo);
                   padding: 5px 8px; font: inherit; font-size: 13px; margin-bottom: 6px; }
.pt-multi-search:focus { border-color: var(--pt-focus); box-shadow: var(--pt-anello); outline: none; }
/* Dentro la tendina le voci sono frasi da leggere, non etichette: qui il
   condensato maiuscolo delle label non ci entra. */
.pt-multi-pop label { display: flex; align-items: center; gap: 9px; padding: 5px 6px;
                      border-radius: var(--pt-raggio-piccolo); font-family: var(--pt-sans);
                      font-size: 13.5px; font-weight: 400; cursor: pointer;
                      text-transform: none; letter-spacing: 0; color: var(--pt-ink); }
.pt-multi-pop label:hover { background: var(--pt-accent-soft); }
.pt-multi-pop input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--pt-accent-solid); }

/* ---- Carta di controllo come "figura" ---- */
.pt-figura { background: var(--pt-figura-bg); border: 1px solid var(--pt-border);
             border-radius: var(--pt-raggio); padding: 8px; overflow-x: auto; }
/* La carta segue la finestra, come quelle degli strumenti (Riccardo,
   01/09/2026). Cresce tutto insieme, numeri degli assi compresi, perché un SVG
   scala per intero: è il compromesso che ha scelto guardandolo, e vale la pena
   perché su una pagina larga i punti si accavallavano dentro un riquadro che
   ne lasciava vuota mezza. Sotto i 660 punti resta la barra di scorrimento. */
.pt-figura svg { display: block; width: 100%; min-width: 660px; height: auto; }
.pt-legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--pt-muted); margin-top: 14px; }
.pt-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pt-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.pt-dot.ok { background: var(--pt-ok); } .pt-dot.warn { background: var(--pt-warn); } .pt-dot.bad { background: var(--pt-bad); }

.pt-chart-stats { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.pt-stat .k { font-family: var(--pt-titoli); font-size: 11.5px; font-weight: 500;
              text-transform: uppercase; letter-spacing: .07em; color: var(--pt-faint); }
/* La cifra grossa in condensato: è il mestiere dell'Oswald, e a colpo
   d'occhio si distingue dalle cifre dentro le tabelle. */
.pt-stat .v { font-size: 22px; font-weight: 600; font-family: var(--pt-titoli);
              font-variant-numeric: tabular-nums; color: var(--pt-scuro); }

.pt-pick { text-align: center; padding: 40px 20px; color: var(--pt-faint); }
.pt-pick .big { font-family: var(--pt-titoli); font-size: 20px; font-weight: 500;
                text-transform: uppercase; letter-spacing: .02em;
                color: var(--pt-ink); margin-bottom: 6px; }

/* ---- Tabelle ----
   Niente MAIUSCOLO sulle intestazioni: la r della ripetibilità e la R della
   riproducibilità sono due grandezze diverse — sullo stesso parametro la R
   vale spesso dieci volte la r — e alzarle tutte le rende la stessa lettera.
   Qui il maiuscolo è un dato, non una decorazione.

   Prima la r minuscola la teneva in piedi una classe messa a mano colonna per
   colonna («r-mini»): bastava dimenticarla su una colonna nuova e la r
   diventava R senza che nessuno se ne accorgesse. Tolto il maiuscolo, la
   regola non ha più bisogno di essere ricordata. */
/* Il riquadro scorre da sé, e l'intestazione resta ferma in cima: è il
   «blocca riquadri» del foglio di calcolo. Serve che a scorrere sia questo
   riquadro e non la pagina — un'intestazione appiccicata dentro un
   contenitore che non scorre non si muove mai — e per questo il riquadro ha
   un'altezza massima legata a quella dello schermo.

   Le tabelle corte non se ne accorgono: sono più basse del massimo e non
   scorrono affatto. Il minimo evita che su uno schermo piccolo il riquadro si
   riduca a una fessura. */
.pt-scroll { overflow: auto; max-height: max(340px, calc(100vh - 260px)); }
.pt-tabella thead th { position: sticky; top: 0; z-index: 2; }
/* La testata è una fascia scura piena: è il segnale più forte che una
   tabella possa dare, e si riconosce anche da tre metri — è il modo di
   dire «questa è una tabella» prima ancora di leggerla.

   ⚠️ In condensato sì, MAIUSCOLO no. Nel pannello di Nio le testate sono
   tutte maiuscole; qui non si può, e non è un dettaglio grafico: la r
   della ripetibilità e la R della riproducibilità sono due grandezze
   diverse — sullo stesso parametro la R vale spesso dieci volte la r — e
   alzarle tutte le rende la stessa lettera. Qui il maiuscolo è un dato.
   Il test che lo impedisce è pt/test_r_maiuscola.py, e guarda anche
   questo foglio. */
.pt-tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.pt-tabella thead th { text-align: right; font-family: var(--pt-titoli); font-size: 12.5px;
                       letter-spacing: .04em; color: #eef4f0; font-weight: 500; padding: 8px 10px;
                       background: var(--pt-scuro); border-bottom: none; white-space: nowrap; }
.pt-tabella tbody td { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--pt-hairline);
                       font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-tabella th.l, .pt-tabella td.l { text-align: left; }
/* Righe alternate: su una tabella larga è ciò che impedisce di leggere la
   riga sbagliata scorrendo con l'occhio da sinistra a destra. Il fondo sta
   sulla riga e non sulle celle, o coprirebbe quello che le celle si danno
   da sé — la riga aperta in correzione, nel modulo strumenti. */
.pt-tabella tbody tr:nth-child(even) { background: var(--pt-surface-2); }
/* Quello che dentro la testata è «tenue» — l'unità di misura sotto il nome
   della casella, il titolo che copre più colonne — va schiarito, non
   scurito: un grigio scelto per il fondo chiaro, sul verde quasi nero,
   sparisce. Era l'unità «pH» che non si leggeva. */
.pt-tabella thead th .pt-muted,
.pt-tabella thead th small { color: #a9bdb0; }
.pt-tabella tbody tr:hover { background: var(--pt-accent-soft); }

/* Il semaforo dello z-score: squadrato e contornato. Il numero resta in
   Inter, non in condensato — è un dato che si legge cifra per cifra. */
.pt-z { display: inline-flex; min-width: 46px; justify-content: center; padding: 1px 7px;
        border-radius: var(--pt-raggio-piccolo); border: 1px solid transparent;
        font-weight: 700; font-variant-numeric: tabular-nums; }
.pt-z.ok { background: var(--pt-ok-fill); color: var(--pt-ok); border-color: var(--pt-ok-bordo); }
.pt-z.warn { background: var(--pt-warn-fill); color: var(--pt-warn); border-color: var(--pt-warn-bordo); }
.pt-z.bad { background: var(--pt-bad-fill); color: var(--pt-bad); border-color: var(--pt-bad-bordo); }
.pt-esito.ok { color: var(--pt-ok); font-weight: 600; }
.pt-esito.bad { color: var(--pt-bad); font-weight: 600; }
.pt-esito.na { color: var(--pt-faint); }
/* Pianificazione: «scade nell'anno» non è un guasto e non è a posto — è la
   riga che va messa nel piano, e vuole un colore suo. */
.pt-stato { display: inline-block; padding: 1px 7px; border-radius: var(--pt-raggio-piccolo);
            border: 1px solid transparent; font-family: var(--pt-titoli); font-weight: 500;
            font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }
.pt-stato.attesa { background: var(--pt-warn-fill); color: var(--pt-warn); border-color: var(--pt-warn-bordo); }
.pt-stato.ok { background: var(--pt-ok-fill); color: var(--pt-ok); border-color: var(--pt-ok-bordo); }
.pt-stato.bad { background: var(--pt-bad-fill); color: var(--pt-bad); border-color: var(--pt-bad-bordo); }

.pt-details { margin-top: 16px; border-top: 1px solid var(--pt-hairline); }
.pt-details > summary { cursor: pointer; padding: 14px 2px 4px; list-style: none; color: var(--pt-accent);
                        font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 7px; }
.pt-details > summary::-webkit-details-marker { display: none; }
.pt-details > summary::before { content: "▸"; transition: transform .15s; }
.pt-details[open] > summary::before { transform: rotate(90deg); }

.pt-muted { color: var(--pt-muted); }
.pt-mini { font-size: 12px; color: var(--pt-faint); margin-top: 24px; }

/* riquadro chiave→valore (Carica round) */
.pt-riquadro { background: var(--pt-surface-2); border: 1px solid var(--pt-border);
               border-left: 3px solid var(--pt-border-forte); border-radius: var(--pt-raggio-piccolo);
               padding: 13px 15px; margin: 12px 0; }
.pt-riquadro dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.pt-riquadro dt { font-family: var(--pt-titoli); font-weight: 500; text-transform: uppercase;
                  letter-spacing: .05em; color: var(--pt-faint); font-size: 12.5px; }
.pt-riquadro dd { margin: 0; font-weight: 600; font-size: 13.5px; }
.pt-elenco { max-height: 190px; overflow-y: auto; font-size: 13px; color: var(--pt-muted);
             margin: 8px 0 0; padding-left: 20px; }
.pt-h2 { font-family: var(--pt-titoli); font-weight: 500; font-size: 19px;
         letter-spacing: .01em; margin: 0 0 8px; }
.pt-file { 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: 13.5px; }