/* ============================================================
   NioAPP — le cose che valgono in tutto il
   software: i caratteri, i colori e la barra superiore.

   Sta nel guscio, e non dentro un modulo, perché è la cornice
   che tutti i moduli condividono — la stessa ragione per cui ci
   sta il template di base. Fino al 20/09/2026 era «pt-base.css»
   dentro l'app pt: i colori del portale intero erano di casa nel
   modulo dei circuiti, e i caratteri ci sarebbero finiti dietro.

   Lo caricano le pagine (guscio/base.html), «Gestione dati»
   (admin/base_site.html) e il manuale da stampare, sempre prima
   del proprio foglio. Non porta l'impaginato delle pagine
   (pt.css): l'admin misura le sue larghezze alla vecchia maniera
   e il nostro azzeramento gliele sfaserebbe. Tenendo qui solo il
   pezzo condiviso, i colori restano scritti in un posto solo e
   le due parti non possono divergere.

   ------------------------------------------------------------
   La veste è quella del pannello di Nio (20/09/2026)
   ------------------------------------------------------------

   Voluta da Riccardo: due software della stessa piattaforma che
   sembravano di due ditte diverse. Colori, caratteri e forme
   arrivano da `nio-agrivite`, `src/nio/web/static/stile.css`, e
   quel foglio resta l'originale — se di là cambia la tavolozza,
   di qua si riporta. Quello che NON si copia è il codice: là il
   pannello è scritto a mano su HTMX, qui c'è Django e l'admin.
   Si condivide la lingua, non la grammatica.

   Cosa vuol dire, in pratica:

   - **una barra scura e piena** in cima, col filo verde sotto:
     dà alla pagina un sopra e un sotto invece di lasciarla
     galleggiare sul bianco;
   - **titoli in carattere condensato** (Oswald) e etichette
     piccole tutte maiuscole: si distinguono dai dati a colpo
     d'occhio;
   - **forme squadrate e piatte** — angoli piccoli, un bordo da
     un punto, ombre quasi assenti: in uno strumento di lavoro le
     ombre grandi sono rumore;
   - **tabelle dense con la testata piena e scura**, che è il modo
     più diretto di dire «questa è una tabella» prima ancora di
     leggerla;
   - il **filetto colorato a sinistra** come segnale di stato.

   ⚠️ **Una veste sola, chiara** (Riccardo, 20/09/2026). Il tema
   scuro col pulsante ◐ c'era e non c'è più: il pannello di Nio
   ha solo il chiaro, e tenere di qua una versione notturna
   significava inventarne una che di là non esiste — cioè il
   doppio di manutenzione per assomigliarsi solo di giorno. Le
   variabili qui sotto sono quindi un elenco solo, senza
   `prefers-color-scheme` e senza `data-theme`.
   ============================================================ */

/* ---- I caratteri, serviti da noi ----
   Vengono dal repository di Nio (`src/nio/web/static/font/`), e
   sono gli stessi file: niente @import da domini terzi, così il
   portale non chiede niente a nessuno per disegnarsi — e in un
   laboratorio senza rete le pagine restano quelle che sono.
   Due sottoinsiemi per carattere invece del repertorio intero:
   latin copre l'italiano, latin-ext i nomi con i segni
   dell'Europa centrale. In tutto ~175 KB invece di più di un
   mega. `font-display: swap` vuol dire che la pagina si legge
   subito col carattere di sistema e cambia quando il file è
   arrivato: nessuna schermata bianca in attesa.

   Due caratteri, due mestieri. **Oswald**, condensato, per
   titoli, etichette, pulsanti e testate di tabella. **Inter**
   per tutto ciò che si legge davvero, perché distingue le cifre
   una dall'altra — e qui si leggono z-score e concentrazioni. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("font/inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("font/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("font/oswald-latin.5f49329007f1.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("font/oswald-latin-ext.4276e5fb1957.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ---- I colori e le misure, in un posto solo ----
   I nomi restano quelli di qui (--pt-*, per non scontrarsi con
   quelli dell'admin di Django); i valori sono quelli di Nio. La
   colonna di destra dice da quale variabile di là arriva ognuno,
   così riportare un cambiamento è un confronto e non un indovinello. */
:root {
  --pt-bg: #eceff1;               /* --sfondo */
  --pt-surface: #ffffff;          /* --carta */
  --pt-surface-2: #f4f6f7;        /* --fondino */
  --pt-surface-3: #e6eaed;        /* --fondino-forte */
  --pt-ink: #15181c;              /* --inchiostro */
  --pt-muted: #3b434b;            /* --inchiostro-medio */
  --pt-faint: #5a646e;            /* --inchiostro-tenue */
  --pt-hairline: #e0e5e9;         /* --bordo-tenue */
  --pt-border: #ccd3d9;           /* --bordo */
  --pt-border-forte: #aab4bd;     /* --bordo-forte */

  /* Il verde quasi nero della barra e delle testate di tabella. È il
     verde portato al fondo della scala, non un grigio: la differenza
     si vede accanto ai pulsanti. */
  --pt-scuro: #12261a;            /* --scuro */
  --pt-scuro-tenue: #1d3a27;      /* --scuro-tenue */

  /* L'accento è il verde di Agrivite. --pt-accent è il colore del
     testo (collegamenti, voci accese): è il verde scuro, perché su
     fondo chiaro deve reggere il contrasto. --pt-accent-solid è il
     fondo pieno dei pulsanti, e --pt-on-accent il testo che ci sta
     sopra: questi due vanno in coppia e cambiano insieme. */
  --pt-accent: #24552f;           /* --verde-scuro */
  --pt-accent-solid: #2f6f3e;     /* --verde */
  --pt-accent-soft: #e9f3ec;      /* --verde-chiaro */
  --pt-accent-bordo: #b4d2bd;     /* --verde-bordo */
  --pt-on-accent: #ffffff;
  --pt-focus: #2f6f3e;            /* --verde */

  /* Il semaforo. ⚠️ Qui il colore È un dato: dice se uno z-score sta
     dentro, è dubbio o è fuori, e finisce sulle carte che si stampano.
     Sono i tre di Nio — verde, ambra, rosso — e non si scelgono per
     gusto: l'ambra dell'attesa e il rosso del guasto sono gli stessi
     che usa il pannello, così un colore vuol dire la stessa cosa nei
     due software. */
  --pt-ok: #2f6f3e;               /* --verde */
  --pt-warn: #8a5b00;             /* --ambra */
  --pt-bad: #a02216;              /* --rosso */
  --pt-ok-fill: #e9f3ec;          /* --verde-chiaro */
  --pt-warn-fill: #fdf6e7;        /* --ambra-chiara */
  --pt-bad-fill: #fdf0ee;         /* --rosso-chiaro */
  --pt-ok-bordo: #b4d2bd;         /* --verde-bordo */
  --pt-warn-bordo: #e8d4a4;       /* --ambra-bordo */
  --pt-bad-bordo: #f0c4bf;        /* --rosso-bordo */

  /* Angoli piccoli: è uno strumento di lavoro, non una scheda
     prodotto. Mezzo centimetro di raggio fa sembrare morbido anche
     ciò che deve essere preciso. */
  --pt-raggio-piccolo: 2px;
  --pt-raggio: 4px;
  --pt-raggio-grande: 6px;

  /* Due ombre soltanto, e tenui. Il rilievo qui lo danno i bordi e le
     fasce scure, non le ombre. */
  --pt-shadow: 0 1px 2px rgba(15, 25, 20, .08);
  --pt-shadow-forte: 0 2px 6px rgba(15, 25, 20, .1);
  --pt-anello: 0 0 0 3px rgba(47, 111, 62, .25);

  /* La carta di controllo è una "figura": resta su fondo bianco, come
     un grafico stampato, così le bande restano leggibili. */
  --pt-figura-bg: #ffffff;

  --pt-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pt-titoli: "Oswald", "Inter", system-ui, sans-serif;
  --pt-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Barra superiore, uguale ovunque ----
   Due righe, come nel pannello di Nio. Sopra la fascia scura: chi sei,
   il portale, l'uscita — le cose che valgono dappertutto. Sotto la
   riga chiara: dove sei e le altre pagine di lì. Due fasce scure una
   sull'altra sarebbero un cassettone: la seconda si appoggia alla
   pagina, non alla testata.

   L'altezza della barra è una misura che serve anche altrove: le
   intestazioni di tabella si fermano sotto di lei, e devono sapere
   dov'è. Dichiararla una volta sola evita che un domani si muova la
   barra e le intestazioni restino agganciate al vuoto. */
:root { --pt-barra: 84px; }

.pt-masthead {
  /* Sopra a tutto: il pulsante «‹‹» del menu laterale di Gestione dati è
     agganciato in alto, alto quanto lo schermo e a z-index 20 — a pari merito
     vinceva lui e mangiava la «T» del logo appena si scorreva la pagina. */
  position: sticky; top: 0; z-index: 30;
}

/* La riga di sopra: piena e scura, col filo verde sotto. È quella che dà
   alla pagina un bordo superiore invece di lasciare il contenuto sospeso
   nel bianco, e su ogni schermata si capisce al primo colpo d'occhio
   dove si è. */
.pt-masthead-top {
  display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  padding: 9px 24px;
  color: #fff; background: var(--pt-scuro);
  border-bottom: 3px solid var(--pt-accent-solid);
}
.pt-brand { display: flex; align-items: baseline; gap: 9px; text-decoration: none; }
.pt-brand .mark {
  font-family: var(--pt-titoli); font-size: 19px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: #fff;
}
/* «NioAPP» si scrive così, con le sue maiuscole e minuscole: è un nome, e in
   maiuscoletto diventerebbe «NIOAPP» (Riccardo, 24/09/2026). Vale dovunque
   compaia dentro un testo che è tutto maiuscolo: il primo passo del percorso
   nella barra, il titolo della pagina iniziale. */
.pt-brand .sub {
  font-family: var(--pt-titoli); font-size: 15px; font-weight: 500;
  letter-spacing: .02em; color: #9fb7a8;
}
/* La versione accanto al nome, come nella testata del pannello di Nio:
   piccola e tenue, si cerca quando serve e non ruba l'occhio al resto. */
.pt-brand .versione {
  font-size: 12px; font-weight: 500; letter-spacing: .02em; color: #9fb7a8;
}
.pt-dove.pt-nome, .pt-title.pt-nome { text-transform: none; }

.pt-toolbar { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.pt-user { font-size: 12.5px; color: #b9c7bf; }
.pt-user b { color: #fff; font-weight: 600; }
/* «cambia password» è una cosa della persona, non un comando della barra:
   sta attaccata al nome, in tondo minuscolo. Quando era in condensato
   maiuscolo accanto a «ESCI» le due scritte erano identiche, e una delle
   due butta fuori dal portale. */
.pt-mia-password { font-size: 12px; color: #9fb7a8; text-decoration: none; margin-left: 8px; }
.pt-mia-password::before { content: "· "; color: #6f8779; }
.pt-mia-password:hover { color: #fff; text-decoration: underline; }
.pt-icon-btn {
  background: transparent; border: 1px solid rgba(255, 255, 255, .28);
  width: 28px; height: 28px; border-radius: var(--pt-raggio-piccolo);
  cursor: pointer; color: #dfe8e2; font: inherit; font-size: 14px;
  display: grid; place-items: center;
}
.pt-icon-btn:hover { color: #fff; border-color: #fff; }
/* Il «?» delle istruzioni è un collegamento, non un bottone: stessa forma. */
a.pt-icon-btn { text-decoration: none; }

/* La campanella (18/10/2026, rifatta il 19/10). Come nei social: un'icona
   bianca come gli altri tasti della barra, e quando c'è qualcosa da guardare un
   pallino rosso nell'angolo, senza numero — i numeri stanno dentro, voce per
   voce. Senza niente da guardare resta la sola icona, e non si apre. */
.pt-campanella { position: relative; }
.pt-campanella > summary { list-style: none; }
.pt-campanella > summary::-webkit-details-marker { display: none; }
.pt-campanella-tasto { position: relative; color: #fff; }
.pt-campanella[open] > .pt-campanella-tasto { background: rgba(255, 255, 255, .14); }
.pt-campanella-icona { display: block; }
.pt-campanella-pallino {
  position: absolute; top: 3px; right: 3px; width: 9px; height: 9px;
  border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 2px #12261a;
}
.pt-campanella-spenta { cursor: default; }
.pt-campanella-elenco {
  position: absolute; right: 0; top: 40px; z-index: 50; width: 300px;
  background: #fff; border: 1px solid #d5ddd8; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(18, 38, 26, .18); overflow: hidden;
}
.pt-campanella-voce {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  color: #12261a; text-decoration: none; border-bottom: 1px solid #eef1ef;
}
.pt-campanella-voce:last-child { border-bottom: 0; }
.pt-campanella-voce:hover { background: #f3f7f4; }
.pt-campanella-voce b { font-size: 14px; font-weight: 600; }
.pt-campanella-voce small { font-size: 12px; color: #5f7268; }
a.pt-icon-btn[aria-current="page"] {
  color: #fff; border-color: var(--pt-accent-solid); background: var(--pt-accent-solid);
}
/* «Esci»: testo, non pulsante — è un'uscita, non l'azione della pagina.
   In condensato maiuscolo come tutto ciò che nella barra è un comando, e
   ormai è l'unica scritta in quella forma: così non si sbaglia bersaglio. */
.pt-esci {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--pt-titoli); font-size: 12px; font-weight: 400;
  letter-spacing: .07em; text-transform: uppercase;
  color: #cddbd3; text-decoration: none;
}
.pt-esci:hover { color: #fff; text-decoration: underline; }
.pt-esci-modulo { display: inline; margin: 0; }

/* La riga di sotto: dove sei e le altre pagine di lì. Chiara, perché si
   appoggia alla pagina. */
.pt-masthead-nav {
  display: flex; align-items: stretch; gap: 0 18px; flex-wrap: wrap;
  padding: 0 24px;
  background: var(--pt-surface);
  border-bottom: 1px solid var(--pt-border);
  box-shadow: var(--pt-shadow);
}
/* Il nome di dove si è, a sinistra: dice dov'è il portale anche quando
   la pagina è scorsa via. */
.pt-dove {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 0;
  font-family: var(--pt-titoli); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pt-scuro);
  text-decoration: none; white-space: nowrap;
}
a.pt-dove:hover { color: var(--pt-accent-solid); }
/* Il posto in cui si è, in fondo alla frase «Portale › PT»: verde, perché è
   quello che si sta guardando. La freccia è un segno, non una voce: resta
   leggera e non si clicca. */
.pt-dove.corrente { color: var(--pt-accent); }
.pt-dove-freccia { align-self: center; color: var(--pt-border-forte); font-size: 14px; }

/* «Gestione dati» sta in coda e staccata: non è una pagina del posto in cui
   si è, è l'officina del portale. */
.pt-gestione {
  display: inline-flex; align-items: center; margin-left: auto; padding: 9px 0 9px 14px;
  font-family: var(--pt-titoli); font-size: 13px; font-weight: 400;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--pt-faint); text-decoration: none; white-space: nowrap;
}
.pt-gestione:hover { color: var(--pt-scuro); }

/* Le pagine: linguette col filo verde sotto quella aperta. Il filo
   invece della targhetta piena perché qui siamo già dentro una barra —
   una fila di rettangoli colorati dentro un'altra barra farebbe tre
   livelli di scatola uno dentro l'altro. */
.pt-topnav { display: flex; gap: 0 4px; flex: 1; flex-wrap: wrap; }
.pt-topnav a {
  display: inline-flex; align-items: center; padding: 9px 10px;
  font-family: var(--pt-titoli); font-size: 13px; font-weight: 400;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--pt-faint); text-decoration: none; white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pt-topnav a:hover { color: var(--pt-scuro); border-bottom-color: var(--pt-border); }
/* Il seguito di una voce che non apre una pagina del modulo ma Gestione
   dati: più piccolo e più chiaro, perché è un avviso, non un nome. */
.pt-altrove {
  font-size: 11px; letter-spacing: .03em; color: var(--pt-border-forte);
  margin-left: 2px; text-transform: none;
}
.pt-topnav a:hover .pt-altrove { color: var(--pt-muted); }
.pt-topnav a.attivo { color: var(--pt-accent); border-bottom-color: var(--pt-accent-solid); }
/* Separa la casa comune del portale dalle pagine del modulo aperto: un filo,
   non una voce di menu, perché non è una destinazione ma un confine. */
.pt-nav-sep {
  align-self: center; width: 1px; height: 18px; margin: 0 5px;
  background: var(--pt-border); flex: none;
}

/* ⚠️ Gli stessi colori, ripetuti su «:link» e «:visited».
   Non è una ridondanza: in Gestione dati sopra questo foglio c'è il base.css
   dell'admin di Django, che colora i collegamenti con «a:link, a:visited» —
   un elemento più una pseudo-classe, che pesa più di una classe nostra.
   Senza queste righe, «Cambia password» e le voci della seconda riga
   restavano verde scuro sulla fascia scura, cioè illeggibili, e solo lì:
   nelle pagine del portale il difetto non si vedeva. */
.pt-masthead a.pt-brand:link, .pt-masthead a.pt-brand:visited { text-decoration: none; }
a.pt-mia-password:link, a.pt-mia-password:visited { color: #9fb7a8; text-decoration: none; }
a.pt-mia-password:hover { color: #fff; }
a.pt-esci:link, a.pt-esci:visited { color: #cddbd3; }
a.pt-esci:hover { color: #fff; }
a.pt-icon-btn:link, a.pt-icon-btn:visited { color: #dfe8e2; text-decoration: none; }
a.pt-icon-btn:hover { color: #fff; }
a.pt-icon-btn[aria-current="page"]:link, a.pt-icon-btn[aria-current="page"]:visited { color: #fff; }
a.pt-dove:link, a.pt-dove:visited { color: var(--pt-scuro); text-decoration: none; }
a.pt-dove.corrente:link, a.pt-dove.corrente:visited { color: var(--pt-accent); }
.pt-topnav a:link, .pt-topnav a:visited { color: var(--pt-faint); text-decoration: none; }
.pt-topnav a:hover { color: var(--pt-scuro); }
.pt-topnav a.attivo:link, .pt-topnav a.attivo:visited { color: var(--pt-accent); }
a.pt-gestione:link, a.pt-gestione:visited { color: var(--pt-faint); text-decoration: none; }
a.pt-gestione:hover { color: var(--pt-scuro); }

/* Sul telefono la seconda riga non va a capo in una colonna di voci: si
   scorre di lato, come le linguette di un'app. */
@media (max-width: 40rem) {
  .pt-masthead-top, .pt-masthead-nav { padding-inline: 14px; }
  .pt-masthead-nav { flex-wrap: nowrap; overflow-x: auto; }
  .pt-topnav { flex-wrap: nowrap; }
}

/* ---- Colonne su misura (vedi colonne.js) ----
   Le maniglie e il trascinamento valgono sia negli elenchi di Gestione dati
   sia nelle tabelle delle pagine: gli stili stanno qui, in comune, perché il
   comportamento è lo stesso in tutti e due i posti. */
th.pt-ridimensionabile { position: relative; }
th .pt-maniglia { position: absolute; top: 0; right: 0; width: 6px; height: 100%;
                  cursor: col-resize; user-select: none; }
th .pt-maniglia:hover { background: var(--pt-accent-solid); opacity: .35; }
th.pt-spostabile { cursor: grab; }
/* Un clic ordina le righe (solo tabelle delle pagine): la freccia dice per
   quale colonna e in che verso. Se la colonna si può anche trascinare, il
   cursore resta quello del trascinamento: il clic funziona lo stesso. */
th.pt-ordinabile:not(.pt-spostabile) { cursor: pointer; }
th.pt-ordinata-asc::after, th.pt-ordinata-desc::after {
  content: " ▲"; font-size: 9px;
}
th.pt-ordinata-desc::after { content: " ▼"; }
th.pt-col-trascinata { opacity: .45; }
/* La riga che indica dove finirà la colonna trascinata. */
th.pt-col-bersaglio { box-shadow: inset 3px 0 0 var(--pt-accent-solid); }

/* Quando una colonna viene allargata a mano la tabella passa a larghezza
   fissa, e da quel momento un contenuto più lungo della colonna sborderebbe su
   quella accanto. Va tagliato con i puntini: si stringe la colonna e si vede
   che manca del testo, invece di leggere due celle sovrapposte. */
table[data-larghezze-fissate] th, table[data-larghezze-fissate] td {
  overflow: hidden; text-overflow: ellipsis;
}
table[data-larghezze-fissate] td > * { max-width: 100%; }

/* Compare solo dopo che si è spostato o allargato qualcosa: finché la tabella
   è quella di serie non c'è niente da ripristinare, e il pulsante sarebbe solo
   rumore. */
.pt-reset-colonne {
  display: inline-block; margin: 0 0 8px; padding: 4px 10px;
  border-radius: var(--pt-raggio-piccolo);
  background: var(--pt-surface); border: 1px solid var(--pt-border-forte);
  border-bottom-width: 2px;
  color: var(--pt-muted); font-family: var(--pt-titoli); font-size: 11.5px;
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}
.pt-reset-colonne:hover { color: #fff; background: var(--pt-scuro); border-color: var(--pt-scuro); }