/* ============================================================================
   UI KIT DELLA CONSOLE — i componenti, una volta sola.
   Le regole di quando usarli stanno in console/UI.md. Questo file è il "come".

   PERCHÉ ESISTE (Omar, 02/09/2026): «senza che io debba dirti ogni volta che
   manca il margine, il pulsante non va bene, serve la picklist, il toggle».
   Non era una richiesta di estetica: era la diagnosi giusta di un difetto
   misurabile. Nella console ci sono **952 attributi `style="…"` scritti a
   mano** — 317 `font-size`, 198 `margin-top`, 128 `padding`, 85 `gap`. Ogni
   margine è una decisione presa da capo, e una decisione presa 198 volte una
   volta viene sbagliata: è esattamente il modo in cui «manca il margine»
   diventa una cosa da dire a voce invece che una cosa che non può succedere.

   COSA NON FA QUESTO FILE. Non ridefinisce i colori: i token (`--accent`,
   `--text`, `--line`, `--good/warn/crit`, `--radius`, `--shadow`) esistono già
   in index.html, sono semantici e hanno già il tema scuro. Qui si aggiunge ciò
   che mancava — le SCALE e i COMPONENTI — e si usano solo token, mai un colore
   scritto a mano: un componente che si porta dietro un `#fff` è un componente
   che in tema scuro diventa bianco su bianco.

   LE SCALE SONO DERIVATE, NON INVENTATE. Sono state ricavate contando cosa la
   console usa davvero: i picchi di `font-size` (12 × 194, 11 × 84, 13 × 44) e
   di spazio (8 × 138, 10 × 136, 12 × 131). Quindi convertire una vista è quasi
   sempre a costo zero visivo. I valori fuori scala (10, 14, 18) si arrotondano
   al gradino più vicino: è quella la differenza fra «coerente» e «quasi».
   ============================================================================ */

:root {
  /* Spazio. Base 4, con il 6 perché la console lo usa 102 volte e toglierlo
     vorrebbe dire ridisegnare mezza pagina per un principio. */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;
  --sp-5: 12px; --sp-6: 16px; --sp-7: 24px; --sp-8: 32px; --sp-9: 48px;

  /* Testo. Sei gradini, e bastano: i sedici di oggi (compresi 12.5, 11.5,
     13.5, 10.5, 14.5) non sono una scala, sono sedici decisioni separate. */
  --t-xs: 11px;    /* etichette in maiuscoletto, note a piè di riga */
  --t-sm: 12px;    /* testo secondario, celle fitte, didascalie */
  --t-md: 13.5px;  /* CORPO: tabelle, campi, testo normale */
  --t-lg: 15px;    /* titolo di un blocco dentro una pagina */
  --t-xl: 19px;    /* numero grande, nome di un record */
  --t-2xl: 22px;   /* titolo di pagina */

  --w-normale: 400; --w-medio: 600; --w-forte: 700;
  --radius-sm: 8px;                 /* --radius (12px) resta per pannelli e schede */
}

/* ---------------------------------------------------------------- LAYOUT
   Tre primitive coprono il 90% di quello che oggi si scrive a mano. Non sono
   "utility class" alla Tailwind: sono i tre modi in cui in questa console si
   mettono le cose una accanto all'altra, e avere un nome per ciascuno è ciò
   che impedisce di reinventarli con un `display:flex;gap:10px` ogni volta. */

/* In colonna, con lo stesso respiro fra tutti i figli. Il ritmo verticale si
   dichiara UNA volta sul contenitore invece che con un margine per figlio:
   è il rimedio diretto ai 198 `margin-top` scritti a mano. */
.u-stack > * + * { margin-top: var(--sp-5); }
.u-stack-sm > * + * { margin-top: var(--sp-3); }
.u-stack-lg > * + * { margin-top: var(--sp-7); }

/* In riga, va a capo da sola, allineata al centro. */
.u-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.u-row-sm { gap: var(--sp-3); }
.u-row-lg { gap: var(--sp-6); }
/* Spinge a destra ciò che segue: `<div class="u-row"><h2>…</h2><span class="u-push"></span><button>` */
.u-push { margin-left: auto; }

/* Griglia che si adatta: le colonne nascono quando c'è posto, e su schermo
   stretto diventa una colonna sola senza che nessuno scriva una media query. */
.u-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.u-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Mai due riquadri appiccicati (02/10/2026, Emiliano: «in tutta la piattaforma non ci siano mai
   dei box appiccicati»). Il ritmo si dichiara sul contenitore (`.u-stack`), ma una vista che se ne
   dimentica non deve produrre riquadri attaccati: fra due blocchi del kit uno sotto l'altro c'è
   sempre `--sp-5`, e sotto una barra di schede pure, qualunque cosa venga dopo.
   Tutto dentro `:where()`, cioè a peso zero: qualunque margine scritto da una vista (classe,
   `.u-stack`, `style=`) vince ancora, e la regola copre solo i buchi.
   L'ultima regola la spegne dove i blocchi stanno AFFIANCATI (righe, griglie, gruppi di numeri):
   lì un margine in cima farebbe scendere il secondo rispetto al primo. Un contenitore nuovo in
   riga o a griglia va aggiunto a quell'elenco. Dentro un riquadro (`.panel`, `.card`) una `.u-row`
   non si stacca: la tabella e la sua riga di paginazione sono pezzi della stessa scatola.
   Prova: `console/tests/attaccati.js`. */
:where(.panel, .card, .kpi, .note, .empty, .toolbar, .tabs, .seg, .fields, .split, .elenco, .duecolonne,
       .u-grid, .tbl-wrap, .kmini, .crea-grande, .costruttore, .imbuto, .controlli, .chat-scrivi, .codice-copia, .barre,
       .barra-filtri, .barra-azioni, .scelte-grandi)
  + :where(.panel, .card, .kpi, .note, .empty, .toolbar, .tabs, .seg, .fields, .split, .elenco, .duecolonne,
       .u-grid, .tbl-wrap, .kmini, .u-row, .crea-grande, .costruttore, .imbuto, .controlli, .chat-scrivi, .codice-copia,
       .barre, .barra-filtri, .barra-azioni, .scelte-grandi) { margin-top: var(--sp-5); }
/* Una `.u-row` usata come barra (filtri a sinistra, un pulsante a destra) si stacca dal riquadro
   che ha sopra e da quello che ha sotto; due `.u-row` di fila no, perché sono le righe di un elenco. */
:where(.u-row) + :where(.panel, .card, .kpi, .note, .empty, .toolbar, .tabs, .seg, .fields, .split, .elenco, .duecolonne,
       .u-grid, .tbl-wrap, .kmini, .crea-grande, .costruttore, .imbuto, .controlli, .chat-scrivi, .codice-copia,
       .barre, .barra-filtri, .barra-azioni, .scelte-grandi) { margin-top: var(--sp-5); }
:where(.tabs, .seg[role="tablist"]) + :where(*) { margin-top: var(--sp-5); }
:where(.panel, .card) :where(.u-row) { margin-top: 0; }
:where(.u-row, .u-grid, .cards, .split, .duecolonne, .kpi, .kmini, .fields, .toolbar, .tabs, .seg, .crmgrid, .crmcarte, .ruoli,
       .costruttore, .imbuto, .campi-due, .campi-tre,
       [style*="display:grid"], [style*="display: grid"], [style*="display:flex"], [style*="display: flex"],
       [style*="display:inline-flex"], [style*="display: inline-flex"])
  > :where(.panel, .card, .kpi, .note, .empty, .toolbar, .tabs, .seg, .fields, .split, .elenco, .duecolonne, .u-row,
           .u-grid, .tbl-wrap, .kmini) { margin-top: 0; }

/* ---------------------------------------------------------------- SCHEDE (tab)
   Prima non esistevano e ognuno se le rifaceva. Le ho rifatte anch'io il
   02/09 dentro la scheda cliente, e mi sono costate due collisioni di id col
   modulo accanto: un componente inventato in casa non è mai solo estetica.

   Sono `<button>` veri e non `<div>`: si raggiungono col tab, si premono con
   Invio e uno screen reader li annuncia come comandi. `aria-selected` dice
   qual è quella attiva a chi non vede il sottolineato. */
.tabs { display: flex; gap: var(--sp-1); flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tab {
  background: none; border: none; cursor: pointer; font-family: inherit;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--t-md); font-weight: var(--w-medio); color: var(--muted);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"], .tab.on { color: var(--accent-d); border-bottom-color: var(--accent-d); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
/* Il contatore accanto al nome: «Ordini 72». Dice quanto c'è dietro prima di
   aprirla — una scheda che non dice quanto contiene si apre per scoprirlo. */
.tab .n { font-weight: var(--w-normale); opacity: .65; margin-left: var(--sp-3); }
.tabpan { padding-top: var(--sp-5); }

/* ---------------------------------------------------------------- NUMERI IN TESTATA
   La riga di numeri che apre un record. `.kpirow` esisteva già per Analytics;
   questa è la versione "dentro una scheda", con il riquadro attorno. */
.kpi {
  display: flex; gap: var(--sp-7); flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--line-2);
}
.kpi .k { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.kpi .k b {
  display: block; margin-top: var(--sp-1);
  font-size: var(--t-xl); color: var(--text); letter-spacing: -.3px;
  text-transform: none; font-variant-numeric: tabular-nums;
}
/* Un numero che manca è «—», non «0». Zero è una misura, il trattino è
   l'assenza di una misura, e leggerli uguali è il modo più rapido di
   prendere per buono un dato che non c'è. */
.kpi .k b.vuoto { color: var(--muted-2); font-weight: var(--w-normale); }

/* **A lastre** (02/10/2026): gli stessi numeri come riquadri bianchi separati, larghi quanto
   la pagina. Omar, guardando la pagina dei prezzi accanto al suo mockup: «mi piacevano molto i
   KPI a tutta pagina con sfondo bianco». Non è una preferenza estetica isolata — una riga sola
   su fondo grigio comprime quattro misure in una striscia che si legge come una didascalia,
   mentre quattro lastre dicono che quei numeri sono il titolo della pagina. Si usa quando i
   numeri aprono una vista, non quando commentano un record. */
.kpi.lastre {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-5); padding: 0; border: 0; background: none;
}
.kpi.lastre .k {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
}
.kpi.lastre .k b { font-size: 22px; font-weight: 650; margin-top: var(--sp-2); }
.kpi.lastre .k i { display: block; font-style: normal; font-size: var(--t-sm); color: var(--muted);
                   text-transform: none; letter-spacing: 0; margin-top: var(--sp-2); }
.kpi.lastre .k b.giu { color: var(--crit); }
.kpi.lastre .k b.su { color: var(--good); }

/* ---------------------------------------------------------------- ELENCO E DETTAGLIO
   Il modo di guardare una cosa per volta dentro un insieme: l'elenco a sinistra, il
   contenuto a destra. Nato per le conversazioni del chatbot (18/09/2026), ma è la stessa
   forma che vogliono la coda dei feedback e la posta in arrivo — per questo sta nel kit e
   non dentro quel modulo. Sotto i 900px diventa una colonna sola: affiancare un elenco e un
   testo su un telefono li rende illeggibili tutti e due. */
.split { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: var(--sp-5);
  align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.elenco { display: flex; flex-direction: column; max-height: 70vh; overflow: auto; }
.elenco > button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); padding: var(--sp-5) var(--sp-6);
  font-family: inherit; color: var(--text); cursor: pointer;
}
.elenco > button:hover { background: var(--line-2); }
/* La riga scelta si riconosce da un bordo pieno a sinistra e non dal solo colore di sfondo:
   in tema scuro la differenza di sfondo si vede appena. */
.elenco > button.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.elenco > button:last-child { border-bottom: none; }

/* Un turno di conversazione. Chi ha scritto si capisce dal lato e dal colore, non da
   un'etichetta: l'etichetta la si legge una volta e poi si smette di vederla. */
.bolla { border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-5) var(--sp-6); max-width: 78ch; }
/* Solo il testo del messaggio va a capo come e' stato scritto: se `pre-wrap` sta sulla
   bolla intera, ci finisce dentro anche l'indentazione del codice che la costruisce. */
.bolla .testo { white-space: pre-wrap; margin-top: var(--sp-3); }
.bolla.utente { background: var(--line-2); margin-right: auto; }
.bolla.agente { background: var(--accent-soft); margin-left: var(--sp-8); }

/* Un campo dentro una barra di strumenti sta sulla riga dei pulsanti piccoli. */
.inp.sm { padding: 5px 10px; font-size: var(--t-sm); }

/* ---------------------------------------------------------------- CAMPI DI UN RECORD
   Etichetta a sinistra, valore a destra. `.kv` esisteva già e resta valido;
   `.fields` è la sua versione a due colonne, che è quello che serve quando i
   campi sono più di sei — una colonna sola diventa una tapparella. */
.fields { display: grid; gap: var(--sp-3) var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Quando in ogni riga, accanto all'etichetta, non c'è un valore ma un comando — una scelta
   fra poche, un interruttore — 260px non bastano e i pulsanti traboccano fuori dalla
   colonna. Stessa griglia, colonne più larghe. */
.fields.larghi { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.field { display: flex; gap: var(--sp-4); font-size: var(--t-md); align-items: baseline; }
.field > b { min-width: 108px; color: var(--muted); font-weight: var(--w-medio); flex: none; }
.field > span { min-width: 0; overflow-wrap: anywhere; }
/* `display: flex` qui sopra vince sull'attributo `hidden` del browser: un campo che compare solo in
   certi casi (il «perché» di un negozio escluso, 16/10/2026) restava sempre a schermo. */
.field[hidden] { display: none !important; }
/* Il valore che non c'è si scrive una volta sola, così è sempre lo stesso segno. */
.field .vuoto::before { content: "—"; color: var(--muted-2); }
/* Un campo che prende tutta la riga. Serve dove si SCRIVE, non dove si legge: `.field > span`
   si stringe sul contenuto, e dentro una finestra una textarea restava larga venti caratteri
   — «un francobollo», Omar il 20/09/2026. La variante è a parte perché nelle schede di sola
   lettura il valore deve continuare a stare accanto all'etichetta. */
.field.esteso { align-items: flex-start; margin-bottom: var(--sp-4); }
.field.esteso > span { flex: 1; }
.field.esteso .inp { width: 100%; }
.field.esteso textarea.inp { min-height: 220px; resize: vertical; line-height: 1.5; }

/* ---------------------------------------------------------------- STATO VUOTO
   Un blocco senza righe deve dire PERCHÉ è vuoto, non restare bianco: «non ha
   comprato niente» e «non siamo riusciti a leggere gli ordini» hanno lo stesso
   aspetto se non si scrive quale dei due è. */
/* La riga aperta in una tabella che fa da indice: si vede che è quella scelta senza
   affidarsi al solo colore — resta anche il nome in grassetto. Nata con la scheda del
   sito (SEO, 17/09), ma vale per ogni tabella che apre un dettaglio sotto di sé. */
tbody tr.scelta { background: var(--accent-soft); }
tbody tr.scelta td:first-child { font-weight: var(--w-forte, 700); box-shadow: inset 3px 0 0 var(--accent); }

.empty {
  padding: var(--sp-7) var(--sp-6); text-align: center;
  color: var(--muted); font-size: var(--t-md);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--line-2);
}
.empty b { display: block; color: var(--text); font-size: var(--t-lg); margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------- BARRA COMANDI
   `.toolbar` esiste GIÀ in index.html (`display:flex;gap:10px;margin-bottom:14px`) e
   fa già la cosa giusta: non la si ridefinisce qui. Due definizioni della stessa
   classe in due file divergono, e quella che vince dipende dall'ordine dei tag —
   cioè da un dettaglio che nessuno guarda quando modifica una delle due.
   Va spostata qui dentro quando si consoliderà il CSS di index.html; fino ad
   allora questo commento è il puntatore che impedisce di riscriverla per sbaglio. */

/* ---------------------------------------------------------------- INTERRUTTORE
   Il «toggle» chiesto da Omar. Un interruttore è una `<input type=checkbox>`
   vera con l'aspetto cambiato, non un div che ascolta i clic: così arriva col
   tab, si preme con la barra spaziatrice, entra nei form e lo screen reader
   sa dire se è acceso.

   Quando usarlo invece della casella: un interruttore ha effetto SUBITO
   (accende una regola), una casella si spunta e poi si salva. Se c'è un
   pulsante «Salva» sotto, non è un interruttore: è una casella. */
.switch { display: inline-flex; align-items: center; gap: var(--sp-4); cursor: pointer; font-size: var(--t-md); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .bar {
  width: 38px; height: 22px; border-radius: 20px; background: var(--line);
  border: 1px solid var(--line); position: relative; transition: background .15s; flex: none;
}
.switch .bar::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s;
}
.switch input:checked + .bar { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .bar::after { transform: translateX(16px); }
.switch input:focus-visible + .bar { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + .bar { opacity: .5; }

/* ---------------------------------------------------------------- SCELTA FRA POCHE
   Due o tre opzioni che si escludono: si mostrano tutte, non si nascondono in
   una tendina. La tendina serve quando le opzioni sono tante o non si
   conoscono a memoria; con tre, obbliga a un clic per scoprire cosa c'è. */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.seg button {
  background: var(--card); border: none; cursor: pointer; font-family: inherit;
  padding: var(--sp-3) var(--sp-5); font-size: var(--t-sm); font-weight: var(--w-medio); color: var(--muted);
  border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--text); background: var(--line-2); }
.seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-d); }
/* **Linguette piene** (02/10/2026): la scheda scelta in tinta piena invece che tenue. Serve
   quando le linguette sono la navigazione principale di una pagina e non un filtro fra pochi:
   con il fondo tenue, a colpo d'occhio, non si vede in quale delle cinque schede si è. */
.seg.forte button { padding: var(--sp-4) var(--sp-6); font-size: var(--t-md); color: var(--text); }
.seg.forte button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent);
                                         font-weight: var(--w-medio); }
.seg.forte button:hover:not([aria-pressed="true"]) { background: var(--line-2); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------------------------------------------------------------- COMANDI E CAMPI
   Arrivati qui dal `<style>` di `index.html` il 18/09/2026, dove stavano da sempre. Il
   motivo non e' l'ordine: e' che la **pagina di accesso** e quelle di imposta-password sono
   pubbliche, non possono leggere lo `<style>` della console, e finche' questi due
   componenti vivevano li' dentro si portavano dietro una copia dei colori scritta a mano —
   sulla prima schermata che si vede della piattaforma, cioe' l'ultimo posto dove uno se lo
   aspetta. Stanno prima delle loro varianti (`.btn.primary`, `.inp.lg`) perche' la cascata
   resti quella di prima. */
.btn { display: inline-flex; align-items: center; gap: 7px; background: var(--accent);
  color: var(--on-accent) !important; text-decoration: none; padding: 8px 15px;
  border-radius: 8px; font-size: 13px; font-weight: 600; border: none; cursor: pointer;
  line-height: 1.4; }
.btn:hover { background: var(--accent-d); }
.btn.sm { padding: 5px 11px; font-size: 12px; }
.btn.ghost { background: transparent; color: var(--text) !important; border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--line-2); }
.btn.gray { background: var(--info); color: #fff !important; }
.btn.red { background: var(--crit); color: #fff !important; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.inp, .ji, .flt, select.jsel, .destrow .nm { padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 8px; font-size: 13.5px; font-family: inherit; background: var(--field);
  color: var(--text); }
.inp:focus, .ji:focus, .flt:focus, select.jsel:focus, .destrow .nm:focus { outline: none;
  border-color: var(--accent); }

/* ---------------------------------------------------------------- DUE AGGIUNTE AI PULSANTI
   `.btn.primary` e `.btn.icon` erano USATI (5 volte e 2 volte) e NON esistevano:
   chi li ha scritti si aspettava una variante e ne otteneva un'altra, senza che
   niente lo dicesse. Una classe che non esiste non dà errore, dà un pulsante
   diverso da quello che si voleva. Qui esistono. */
.btn.primary { background: var(--accent); color: var(--on-accent) !important; }   /* = il default, esplicito */
.btn.icon { padding: var(--sp-3); width: 32px; height: 32px; justify-content: center; }
.btn:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 2px; }

/* ---------------------------------------------------------------- TESTO
   Le tre cose che si scrivono a mano più spesso, con un nome. */
.t-sm { font-size: var(--t-sm); }
.t-xs { font-size: var(--t-xs); }
.t-num { font-variant-numeric: tabular-nums; }   /* le colonne di numeri si incolonnano */

/* ---------------------------------------------------------------- FINESTRA A SCHERMO INTERO
   Una finestra modale che si allarga a tutto lo schermo e torna indietro (Omar, 03/09: «il
   classico pulsante con le due frecce in diagonale»).

   Sta nel kit e non dentro la scheda cliente perché non è un problema di quella scheda: è la
   stessa stretta di ogni finestra che deve mostrare una tabella. Chi ne ha bisogno domani
   aggiunge la classe e il pulsante, invece di reinventare la stessa CSS.

   `max-width:none` da solo non basta: `.modal` mette 40px di aria sopra e sotto e allinea in
   alto, quindi una finestra "piena" resterebbe alta quanto il suo contenuto e con un bordo di
   vuoto intorno. Si annulla la spaziatura del contenitore e si dà alla finestra l'altezza
   dello schermo — poi il corpo scorre da solo, che è ciò che rende utile lo schermo intero su
   un elenco lungo. Gli angoli tondi vanno via: un rettangolo che tocca i bordi con gli spigoli
   arrotondati sembra un difetto di disegno, non una scelta.

   La classe si mette su TUTTI E DUE — contenitore e finestra — invece di usare `:has()` sul
   genitore. `:has()` funziona sui browser di oggi, ma quando non funziona non da' errore: da'
   una finestra alta quanto lo schermo dentro un contenitore che le lascia 40px di aria, cioe'
   una barra di scorrimento che non si spiega. Due classi da JavaScript costano una riga e non
   hanno un modo di fallire a meta'. */
.modal.pieno { padding: 0; }
.modalbox.pieno {
  max-width: none; width: 100%; height: 100vh;
  border-radius: 0; border: none;
  display: flex; flex-direction: column;
}
/* L'intestazione resta ferma e SOLO il corpo scorre: a schermo intero l'elenco è lungo, e una
   testata che scorre via porta con sé il pulsante per tornare indietro — cioè proprio quello
   che serve a chi si è perso in fondo alla pagina. */
.modalbox.pieno > .modalhd { flex: 0 0 auto; }
.modalbox.pieno > .mbody { flex: 1 1 auto; overflow-y: auto; }

/* Una colonna di testo che resta leggibile. Serve dentro le finestre a schermo intero: una
   riga larga 1500px si legge male e un'area di testo altrettanto larga si scrive peggio. NON
   si applica alle tabelle — quelle lo schermo intero se lo meritano tutto, ed è il motivo per
   cui esiste. 78ch è largo abbastanza per un appunto e stretto abbastanza da non perdere il
   capo riga. */
.u-leggibile { max-width: 78ch; }

/* ============================================================================
   AVVISI E CONFERME — i due componenti che mancavano (11/09/2026)

   Nella console c'erano 158 fra `alert()`, `confirm()` e `prompt()`. Funzionano, e
   proprio per questo non erano mai stati sostituiti: il problema non è che siano
   brutti, è che **bloccano la pagina**, non si possono leggere da uno screen reader
   come un avviso, non si possono annullare e non si possono impilare. Un'operazione
   lunga — un invio, una traduzione su sei siti — con `alert()` può solo dire «fatto»
   alla fine o niente.

   Questi due non li sostituiscono tutti oggi: le viste si convertono una per volta,
   con la loro prova. Qui c'è il posto dove andare a prenderli.
   ============================================================================ */

/* L'avviso che non ferma nessuno. Sta in basso a destra, dove non copre il contenuto
   che si stava guardando, e sparisce da solo — tranne gli errori, che restano finché
   non li si chiude: un errore che svanisce dopo quattro secondi è un errore che
   qualcuno non ha letto. */
.toasts{
  position:fixed; right:16px; bottom:16px; z-index:9000;
  display:flex; flex-direction:column; gap:var(--sp-4);
  max-width:min(420px, calc(100vw - 32px));
}
.toast{
  display:flex; align-items:flex-start; gap:var(--sp-4);
  background:var(--card); color:var(--text);
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:var(--sp-5) var(--sp-6); font-size:var(--t-md); line-height:1.45;
}
.toast.errore{ border-left-color:var(--crit); }
/* `ok` era usato da chi scrive i toast e non era mai stato definito: un riscontro
   positivo restava grigio come un avviso qualunque. Un colore che non c'è non dà errore,
   dà una cosa che sembra funzionare. */
.toast.ok{ border-left-color:var(--ok); }
.toast.attenzione{ border-left-color:var(--warn); }
.toast .testo{ flex:1 1 auto; }
.toast .chiudi{
  flex:0 0 auto; background:none; border:0; cursor:pointer;
  color:var(--muted); font-size:var(--t-lg); line-height:1; padding:0 2px;
}
.toast .chiudi:hover{ color:var(--text); }
@media (prefers-reduced-motion:no-preference){
  .toast{ animation:toast-entra .18s ease-out; }
  @keyframes toast-entra{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
}

/* La finestra di conferma: una sola, dichiarata nell'HTML come tutte le altre di questa
   console (vedi UI.md — un modale creato al volo nasce senza stili e non lo si vede).
   Il testo dice COSA sparisce, non «sei sicuro?»: la domanda giusta è quella a cui si
   può rispondere guardando lo schermo. */
.dlg-azioni{ display:flex; gap:var(--sp-4); justify-content:flex-end; margin-top:var(--sp-6); }

/* ============================================================================
   RICERCA GLOBALE — la finestra che si apre con ⌘K (12/09/2026)

   Non è una casella di ricerca in più: è l'unica che non chiede di sapere PRIMA
   dove si trova la cosa. Fino a ieri, per una persona si andava in Contatti, per
   un ordine in OMS, per una campagna in Email — e bisognava saperlo. Con
   novemila contatti e settemila ordini, «dove sta» è una domanda che si fa
   decine di volte al giorno e a cui si risponde sempre allo stesso modo.

   Sta in alto e non al centro: chi digita guarda quello che scrive, e una
   finestra centrata gli sposta gli occhi due volte.
   ============================================================================ */
.modal.cerca { align-items: flex-start; padding-top: 10vh; }
.cercabox {
  width: min(680px, calc(100vw - 32px));
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; max-height: 70vh; overflow: hidden;
}
.cercabox .campo {
  display: flex; align-items: center; gap: var(--sp-5);
  padding: var(--sp-6); border-bottom: 1px solid var(--line);
}
.cercabox .campo input {
  flex: 1 1 auto; border: 0; outline: none; background: transparent;
  color: var(--text); font-size: var(--t-lg);
}
.cercabox .campo .tasto {
  flex: 0 0 auto; font-size: var(--t-xs); color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px;
}
.cercabox .esiti { overflow-y: auto; }
.cercabox .gruppo {
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: var(--sp-5) var(--sp-6) var(--sp-3);
}
/* Una riga è un <button>: si raggiunge col tab, si preme con Invio, e chi usa un
   lettore di schermo sente che è un comando. Un <div onclick> non è nessuna di
   queste cose. */
.cercabox .esito {
  display: flex; align-items: baseline; gap: var(--sp-5); width: 100%;
  padding: var(--sp-4) var(--sp-6); border: 0; background: none; cursor: pointer;
  color: var(--text); font-size: var(--t-md); text-align: left;
}
.cercabox .esito:hover, .cercabox .esito.scelto { background: var(--accent-soft); }
.cercabox .esito .che { flex: 0 0 auto; width: 1.3em; }
.cercabox .esito .chi { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cercabox .esito .dove { flex: 0 0 auto; color: var(--muted); font-size: var(--t-sm); }
.cercabox .vuoto { padding: var(--sp-7) var(--sp-6); color: var(--muted); font-size: var(--t-md); }

/* La stessa scatola, ma appoggiata sotto un campo invece che in mezzo allo schermo:
   serve alla ricerca dentro Contatti, che è la stessa cosa di ⌘K messa dove la gente
   la cerca. Riusa `.cercabox` per non avere due tendine che invecchiano separate —
   cambia solo dove sta. */
.cercabox.tendina {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  width: auto; max-height: 58vh;
}
/* Chiusa vuol dire chiusa: il `display: flex` di `.cercabox` vince sull'attributo `hidden` del
   browser, e una tendina chiusa restava lì, vuota, a coprire le righe e a prendersi i clic
   (trovato il 17/10/2026 con la tendina dei prodotti di «Da abbinare»; vale anche per Contatti). */
.cercabox[hidden] { display: none; }
.crmcerca { position: relative; flex: 1 1 260px; min-width: 260px; }

/* ── Contatti (crm_hub.js) ────────────────────────────────────────────────────────
   Stava in un blocco di stile iniettato dal modulo con createElement — l'unico rimasto, e
   prove_stile.py non lo vedeva perché cercava solo la stringa «<style>». Dal 12/09/2026
   sta qui come il resto del kit, e la prova conta anche quella forma. */
.crmgrid{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px}
.crmg{min-width:220px}
.crmgt{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:6px}
.crmgc{display:flex;flex-wrap:wrap;gap:10px}
.crmgc>div{min-width:170px}
.crmcarte{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;padding:6px 18px 16px}
.crmcarta{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--card)}
.crmct{font-size:13px;font-weight:700;margin-bottom:6px}
#crm_contacts tr[data-cid]:hover{background:var(--line-2)}

/* ── La scheda di un lead (crm.js) ────────────────────────────────────────────────────
   Il percorso a passi, chi segue e la prossima mossa (card #244, 09/10/2026). Stavano in un
   blocco <style> che crm.js scriveva dentro la scheda, con i colori cablati — in tema scuro
   i passi erano riquadri bianchi — e un `.passo` che valeva per tutta la pagina, dove `.passo`
   è anche l'imbuto di Lead magnet e delle automazioni. Qui stanno tutti sotto `.percorso`. */
.percorso { display: grid; gap: var(--sp-4); }
.percorso .passi { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.percorso .passo { flex: 1 1 7rem; min-width: 7rem; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); font: inherit; font-size: var(--t-md);
  cursor: pointer; text-align: left; }
.percorso .passo .pnum { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-sm); font-weight: var(--w-forte); background: var(--line); color: var(--muted); }
.percorso .passo.fatto { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: var(--accent-soft); }
.percorso .passo.fatto .pnum, .percorso .passo.ora .pnum { background: var(--accent); color: var(--on-accent); }
.percorso .passo.ora { border-color: var(--accent); border-width: 2px; font-weight: var(--w-medio); }
.percorso .passo.poi { color: var(--muted); }
.percorso .passo.off { opacity: .45; }
.percorso .passo:hover { border-color: var(--accent); }
.percorso .sottopercorso { display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap;
  font-size: var(--t-md); }
.percorso .sottopercorso .fermo { color: var(--crit); }
.percorso .prossima { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  padding: var(--sp-4); border: 1px dashed var(--line); border-radius: var(--radius-sm); font-size: var(--t-md); }
.percorso .prossima.scaduta { border-color: var(--crit); border-style: solid; background: var(--crit-bg); }
.percorso .prossima .pet, .percorso .towner .pet { font-weight: var(--w-medio); color: var(--muted); }
.percorso .prossima .proxaiuto { flex: 1 1 100%; line-height: 1.35; }
.percorso .towner { display: inline-flex; gap: var(--sp-3); align-items: center; }
.percorso .prossima input:not([type=date]) { flex: 1 1 16rem; min-width: 12rem; }
@media (max-width: 640px) { .percorso .passo { flex-basis: 100%; } }

/* kit-118 inizio ─────────────────────────────────────────────────────────────────────
   Le classi che servono a togliere gli stili scritti a mano più frequenti (13/09/2026, #118).
   Si aggiungono solo quelle che corrispondono ESATTAMENTE a un valore già in uso e alla scala:
   un margine da 10 o 14 px non ha una classe, perché convertirlo cambierebbe l'aspetto.

   Le dimensioni del testo vincono su .muted: nella shell .muted fissa 13px e viene DOPO questo
   file, quindi un elemento «muted» con font-size:12px scritto a mano, convertito in
   `muted t-sm`, resterebbe a 13px. La doppia classe pesa di più e rimette le cose a posto.
   Che non cambi niente lo verifica console/tests/prova_aspetto.py, sugli stili calcolati da un
   browser vero: questo blocco è quello che lo strumento inserisce nelle pagine. */
.muted.t-sm { font-size: var(--t-sm); }
.muted.t-xs { font-size: var(--t-xs); }
.t-crit { color: var(--crit); }
.t-warn { color: var(--warn); }
.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-3 { margin-bottom: var(--sp-3); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-5 { margin-bottom: var(--sp-5); }
.u-mb-6 { margin-bottom: var(--sp-6); }

/* La colonna dei pulsanti di una riga, a destra e senza andare a capo. C'era già dentro
   `.segtab td.azioni`, cioè dentro UNA tabella: la seconda tabella che ne ha avuto bisogno
   (Config → Utenti, 18/09/2026) l'avrebbe riscritta a mano, ed è così che nascono due modi
   di allineare la stessa cosa. */
.u-right { text-align: right; white-space: nowrap; }

/* Un campo di testo che deve stare largo quanto il suo contenuto tipico (un'email, un
   dominio) invece di restringersi accanto agli altri in una barra di strumenti. */
.inp.lg { min-width: 220px; }
/* `xl` è per un campo che ospita una frase, non una parola: la ricerca da mandare in
   SERP si legge tutta mentre la si scrive. */
.inp.xl { min-width: 320px; }

/* Una vista nasce nascosta: la accende `show()` scrivendo `style.display`. Le trenta viste
   scritte prima del kit se lo portano scritto nell'attributo — questa regola le rende tutte
   uguali senza toccarle, e una vista nuova non deve più ricordarsene. */
.view { display: none; }
.u-ml-4 { margin-left: var(--sp-4); }
/* kit-118 fine */

/* Editor e anteprima affiancati. Nasce da un difetto vero (19/09/2026): la libreria Knowledge
   e Skill riusava `.emsplit`, che è il blocco del motore email — una colonna stretta per un
   numero grande e una larga per i dettagli. Il risultato era un editor da 200px in una pagina
   larga, con l'etichetta dell'anteprima che finiva in mezzo ai campi. Un componente si riusa
   quando fa la stessa cosa, non quando ha due colonne. */
.duecolonne { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-6); }
@media (max-width: 900px) { .duecolonne { grid-template-columns: minmax(0, 1fr); } }
.duecolonne > div { min-width: 0; }
.editor { width: 100%; min-height: 420px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
          font-size: var(--t-sm); line-height: 1.5; resize: vertical; }
/* L'anteprima deve sembrare la pagina che sarà, non un campo: sfondo del foglio e stessa
   altezza dell'editor, così le due colonne non ballano mentre si scrive. */
.anteprima { min-height: 420px; max-height: 70vh; overflow: auto; background: var(--line-2);
             border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-5); }

/* kit-118 viste inizio ─────────────────────────────────────────────────────────────────
   I pezzi che servono a disegnare col kit le viste più aperte — Automazioni a evento, Salute
   del motore, Panoramica e Transazionali di Email, Contatti, Conversazioni WhatsApp (13/09/2026).
   Tre regole, le stesse di UI.md:
   - una misura fuori scala si arrotonda al gradino più vicino (12.5 e 11.5 px → 12, 10 → 8,
     14 → 12). L'eccezione è il respiro dentro un pannello, 14px 18px: è la misura di tutti i
     pannelli della console, e ha una classe sua invece di un arrotondamento che li sposterebbe;
   - quando un componente della shell ha già la sua misura (`.toolbar`, `.note`, `.jl`,
     `.card .n`), la variante si dichiara SUL componente, con un nome che dice cosa cambia. Un'utilità
     semplice lì perde o vince a seconda dell'ordine dei fogli, e lo si scopre guardando;
   - i colori sono token. Le bolle di WhatsApp erano scritte con `rgba(255,255,255,.04)`:
     pensate per il tema scuro, nel chiaro il messaggio del cliente era bianco su bianco.
   Cosa cambia sullo schermo, elemento per elemento e nei due temi, lo dice
   console/tests/confronta_aspetto.py. */

/* Utilità che mancavano */
.t-md { font-size: var(--t-md); }
.t-medio { font-weight: var(--w-medio); }
.t-lungo { line-height: 1.55; }                 /* un paragrafo da leggere, non una didascalia */
.t-good { color: var(--good); }
.t-muted { color: var(--muted); }
.u-mt-1 { margin-top: var(--sp-1); }
.u-ml-6 { margin-left: var(--sp-6); }
.u-py-2 { padding-block: var(--sp-2); }
/* Il rientro di una riga che sta sotto un'altra (le capabilities di un modulo, card #308). */
.u-pl-7 { padding-left: var(--sp-7); }
/* La scheda dei permessi di una persona (card #308): «Come il ruolo» non va a capo. */
.ac-scheda .seg button { white-space: nowrap; }
.u-py-3 { padding-block: var(--sp-3); }
.u-base { align-items: baseline; }              /* dopo .u-row: righe con testi di misure diverse */
.u-fill { flex: 1; }
.u-nowrap { white-space: nowrap; }
/* Una cella che non deve allargare la tabella: si taglia con i puntini e il testo intero
   resta nel `title`. Si usa con una delle misure qui sotto (`u-maxw-m`). */
.u-tronca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* La legenda dei ruoli (Config → Utenti): quattro colonne che diventano due e poi una, con la
   riga del nome staccata dalla spiegazione. Sta nel kit e non nella pagina perché è una forma
   che serve a ogni legenda: un elenco di cose brevi che si leggono in parallelo, non in fila. */
.ruoli { display: grid; gap: var(--sp-5) var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.ruoli .ruolo { display: flex; flex-direction: column; gap: var(--sp-2); }
.ruoli .ruolo > b { font-size: var(--t-md); }
.ruoli .ruolo > span { font-size: var(--t-sm); color: var(--muted); line-height: 1.45; }
.u-pre { white-space: pre-wrap; }
/* Quanto può allargarsi un campo. Tre misure: un nome di sito, una scelta, una frase. */
.u-maxw-s { max-width: 230px; }
.u-maxw-m { max-width: 340px; }
.u-maxw-l { max-width: 420px; }
.u-minw-m { min-width: 220px; }

/* Dentro un pannello */
.pad { padding: 14px 18px; }
.pad-x { padding: 0 18px; }
.pad-t0 { padding-top: 0; }
.pad-b0 { padding-bottom: 0; }
.riga-sopra { border-top: 1px solid var(--line); }
.riga-sotto { border-bottom: 1px solid var(--line); }
/* Un link che apre un'altra pagina della console. Serve anche sugli `<a href>` veri: senza, prendono
   il blu del browser, e nel tema scuro il viola dei visitati (lo hanno mostrato le foto della #124). */
.lnk { cursor: pointer; color: var(--accent-d); }

/* Varianti dei componenti della shell */
.cards.tre { grid-template-columns: repeat(3, 1fr); }
.card .n.crit, .kpirow .k b.crit { color: var(--crit); }
.card .n.warn, .kpirow .k b.warn { color: var(--warn); }
.card .n.good, .kpirow .k b.good { color: var(--good); }
.emsplit > .big .l.det { font-size: var(--t-xs); margin-top: var(--sp-4); }
.rg .note, .note.motore { margin-bottom: var(--sp-5); }
.note.warn { border-left-color: var(--warn); }
.note.crit { border-left-color: var(--crit); }
/* L'ultimo elemento di un blocco non si porta dietro il margine di sotto. */
.toolbar.senza-fondo, .note.senza-fondo { margin-bottom: 0; }
/* L'etichetta che apre un gruppo di campi non ha aria sopra: ce l'ha già il gruppo. */
.rg-lingua > .cap + .jl, .crmgc .jl { margin-top: 0; }
.rg-uscita { font-size: var(--t-md); margin: var(--sp-5) 0 var(--sp-2); }
.ji.corto { width: 90px; }
.ji.medio { width: 120px; }
.ji.w-auto { width: auto; }
/* Il filtro sopra una tabella e la riga dei filtri per colonna (index.html: addFilter, addColumnFilters) */
.flt-tab { margin: var(--sp-4) 18px 0; }
/* Il campo di filtro con la sua x. Il bottone sta dentro il campo e compare solo quando c'è
   qualcosa da cancellare: una x sempre accesa su un campo vuoto è un comando che non fa nulla. */
.flt-box { position: relative; display: inline-flex; align-items: center; max-width: 240px; }
.flt-box .flt { width: 100%; padding-right: 26px; }
.flt-x { position: absolute; right: 4px; border: 0; background: none; cursor: pointer;
         color: var(--muted); font-size: 16px; line-height: 1; padding: 2px 5px; border-radius: 6px; }
.flt-x:hover { background: var(--line-2); color: var(--text); }
.flt-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fltrow th { padding: var(--sp-1) var(--sp-3); }
.fltrow .ji { font-size: var(--t-sm); }

/* Ogni tabella si ordina e si allarga (index.html: kitTabelle, Omar 22/09/2026). Un'intestazione
   con un titolo si ordina al clic; il bordo destro di ogni intestazione si trascina, e passandoci
   sopra compare la linea che lo dice. */
th.ord { cursor: pointer; user-select: none; }
th.ord:hover { color: var(--accent-d); }
th.ord .ar { font-size: var(--t-xs); opacity: .5; margin-left: var(--sp-2); }
table.col-kit th { position: relative; }
.col-grip { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; touch-action: none; z-index: 1; }
.col-grip::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 2px; width: 2px; border-radius: 1px; background: var(--line); opacity: 0; }
th:hover > .col-grip::after { opacity: .6; background: var(--muted); }
.col-grip:hover::after, .col-grip.attiva::after { opacity: 1; background: var(--accent); }
/* Durante il trascinamento la freccia resta quella del bordo anche fuori dalla tabella, e il
   testo non si seleziona. */
body.col-trascina, body.col-trascina * { cursor: col-resize !important; user-select: none; }
/* Con le larghezze scelte a mano il testo di una cella non invade la colonna accanto: si taglia
   coi puntini. Le intestazioni no: vanno a capo e non si tagliano, perché «Hanno de…» o
   «Ricevo…» non dicono più quale colonna è — e prima di fissare le larghezze uscivano già un
   poco nel margine della cella (lo hanno mostrato le prove nel browser, 22/09). */
table.col-fisse > * > tr > td { overflow: hidden; text-overflow: ellipsis; }
table.col-fisse > * > tr > th { white-space: normal; }

/* I numeri piccoli in copertina (anKpi): valore sopra, etichetta sotto */
.kmini { display: flex; gap: var(--sp-6); flex-wrap: wrap; align-items: baseline; }
.kmini > span { display: inline-flex; flex-direction: column; }
.kmini .v { font-size: var(--t-xl); font-weight: 800; color: var(--green-d); font-variant-numeric: tabular-nums; }
/* Un numero che si apre: dietro c'è l'elenco delle persone (broadcast, 22/09) */
.kmini > span.kclic { cursor: pointer; border-radius: 6px; }
.kmini > span.kclic:hover .v, .kmini > span.kclic:focus-visible .v { text-decoration: underline; }

/* Una bolla della conversazione WhatsApp */
.wa-msg { padding: var(--sp-4) var(--sp-5); border-radius: 10px; margin: var(--sp-4) 18px; }
.wa-msg.in { background: var(--line-2); margin-right: 22%; }
/* La nostra risposta: un verde mescolato dai token. `--good-bg` da solo nel tema scuro era quasi
   uguale al grigio della bolla del cliente (#14271a contro #1c271f), e le due voci della
   conversazione non si distinguevano più — l'ha trovato confronta_aspetto.py. */
.wa-msg.out { background: color-mix(in srgb, var(--accent) 18%, var(--card)); margin-left: 22%; }
.wa-msg.bozza { background: var(--warn-bg); border: 1px dashed var(--warn); margin-left: 22%; }
.wa-msg.nota { background: var(--info-bg); border: 1px dashed var(--info); margin-left: 12%; }
/* La coda «Da approvare» delle Conversazioni WhatsApp: un pannello che chiede attenzione, e
   ogni bozza nel suo riquadro. C'erano quando la coda aveva bozze — il 13/09 sera nove —, e il
   primo censimento l'aveva trovata vuota: uno stato che il browser non mostra non si verifica. */
.u-spazia { justify-content: space-between; }
/* Dal 07/10/2026: sette stili scritti a mano nelle viste (broadcast, siti) diventano questi due. */
.u-cliccabile { cursor: pointer; }
.u-w-corto { width: 56px; }    /* un campo da due o tre lettere: lingua, paese */
.u-fill-2 { flex: 2; }
.u-minw-l { min-width: 260px; }
.panel.panel-fitto { padding: var(--sp-4) var(--sp-5); margin: var(--sp-3) 0; }   /* una riga per sito dentro un pannello */
.panel.attenzione { border-color: var(--warn); }
.panel.attenzione > h2 { color: var(--warn); }
.wa-bozza { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-5); margin-bottom: var(--sp-5); }
/* kit-118 viste fine */

/* La storia di un record (#124, scheda cliente → Storia): i giorni come titoletti, una riga per
   fatto. L'ora a sinistra e incolonnata, poi il tipo (icona + parola), poi cosa è successo e dove
   andare a vederlo. Lo stato sta nella parola del titolo, il colore la accompagna soltanto. */
/* L'email spedita, come l'ha ricevuta il destinatario (scheda cliente, #88 punto 2). Sta in un
   riquadro isolato perché è HTML di un altro sistema, coi suoi stili: senza, uscirebbero di lì. */
.mailvera { width: 100%; height: 60vh; border: 1px solid var(--line-2); border-radius: var(--radius);
            background: #fff; }
/* Il testo dal nostro registro: il ripiego di quando il corpo dell'email non c'è più. */
.mailtesto { white-space: pre-wrap; font-size: var(--t-sm); border-left: 3px solid var(--line);
             padding: var(--sp-3) var(--sp-4); }

.storia-giorno { font-size: var(--t-xs); font-weight: var(--w-medio); color: var(--muted);
                 text-transform: uppercase; letter-spacing: .4px; margin: var(--sp-7) 0 var(--sp-2); }
.storia-giorno:first-child, .note + .storia-giorno { margin-top: var(--sp-2); }
.storia { list-style: none; margin: 0; padding: 0; }
.storia > li { display: grid; grid-template-columns: 3.4em 8.5em minmax(0, 1fr) auto;
               gap: var(--sp-2) var(--sp-5); align-items: baseline;
               padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.storia .ora { color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.storia .tipo { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }
.storia .cosa > b { font-weight: var(--w-medio); }
.storia .det { display: block; color: var(--muted); font-size: var(--t-sm); overflow-wrap: anywhere; }
.storia .cit { font-size: var(--t-sm); border-left: 2px solid var(--line); padding-left: var(--sp-4);
               margin-top: var(--sp-2); overflow-wrap: anywhere; }
.storia .esiti { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.storia .vai { white-space: nowrap; font-size: var(--t-sm); }
@media (max-width: 560px) {
  .storia > li { grid-template-columns: 3.4em minmax(0, 1fr); }
  .storia .tipo, .storia .cosa, .storia .vai { grid-column: 2; }
}

/* ============================================================================
   Progetti (modulo `projects`, 01/10/2026) — la grafica della demo approvata da Emiliano:
   una finestra sola, con l'albero degli spazi a sinistra su fondo tenue, l'intestazione del
   progetto fissa, la lista o la bacheca che scorrono, e il dettaglio del task che entra da
   destra DENTRO la finestra. La colonna della shell («Progetti · 1 pagina») da desktop non
   serve: il menu del modulo è l'albero stesso, quindi la si nasconde mentre la vista è aperta.
   Da telefono resta, perché lì contiene l'elenco dei moduli.
   ============================================================================ */
@media (min-width: 821px) {
  .layout:has(> .main > #projects_home[style*="block"]) > .side { display: none; }
}
/* Il Task manager prende tutta la pagina (03/10/2026, Emiliano): niente padding attorno, e quindi
   niente riquadro arrotondato che toccherebbe i bordi. Solo la sua vista: le altre pagine restano. */
.main:has(> #projects_home[style*="block"]) { padding: 0; }
.main:has(> #projects_home[style*="block"]) .pj { border: 0; border-radius: 0; box-shadow: none; }
@media (min-width: 821px) { .main:has(> #projects_home[style*="block"]) .pj { height: calc(100vh - 52px); } }
.pj { position: relative; display: flex; background: var(--card); border: 1px solid var(--line);
      border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
      height: calc(100vh - 52px - 46px); min-height: 560px; font-size: var(--t-md); line-height: 1.45; }
.pj-c1 { --pj-tinta: var(--pj-c1); } .pj-c2 { --pj-tinta: var(--pj-c2); } .pj-c3 { --pj-tinta: var(--pj-c3); }
.pj-c4 { --pj-tinta: var(--pj-c4); } .pj-c5 { --pj-tinta: var(--pj-c5); } .pj-c6 { --pj-tinta: var(--pj-c6); }
.pj-c7 { --pj-tinta: var(--pj-c7); } .pj-c8 { --pj-tinta: var(--pj-c8); }
.pj-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* l'albero degli spazi */
.pj-side { width: 250px; flex: none; background: var(--bg); border-right: 1px solid var(--line); overflow-y: auto;
           padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: 2px; }
.pj-nav { display: flex; align-items: center; gap: var(--sp-4); width: 100%; padding: 6px 10px; border: 0;
          border-radius: 7px; background: none; color: var(--text); cursor: pointer; font: inherit; text-align: left; min-width: 0; }
.pj-nav:hover { background: var(--line-2); }
.pj-nav.on { background: var(--accent-soft); font-weight: var(--w-medio); }
.pj-nav:focus-visible, .pj-mini:focus-visible, .pj-spunta:focus-visible, .pj-link:focus-visible,
.pj-freccia:focus-visible, .pj-tb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pj-proj { padding-left: 22px; }
.pj-tenue { color: var(--muted); }
.pj-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 4px;
        font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.pj-spazio { display: flex; flex-direction: column; gap: 1px; margin-top: var(--sp-2); }
.pj-spazio-hd { display: flex; align-items: center; gap: var(--sp-3); padding: 5px 4px 5px 10px;
                font-weight: var(--w-medio); font-size: 13px; }
/* Il dominio non sta qui: lo dicono l'intestazione del progetto e il link al Diario, e accanto
   al menu ⋯ toglieva spazio al nome («Herbago.…»). Il link e il menu non si stringono mai. */
.pj-spazio-nome { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                  border: 0; background: none; padding: 0; font: inherit; font-weight: var(--w-medio); color: var(--text);
                  cursor: pointer; text-align: left; }
.pj-spazio-hd .pj-freccia { width: 18px; height: 18px; margin-left: -6px; }
.pj-spazio.chiuso .pj-spazio-hd { color: var(--muted); }
.pj-spazio-hd .pj-mini { flex: none; }
.pj-sep { border-top: 1px solid var(--line); margin: 12px 10px 4px; }
.pj-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex: none; background: var(--pj-tinta, var(--muted)); }
.pj-conta { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: var(--w-normale); }
.pj-mini { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px;
           font: inherit; font-size: 12px; text-decoration: none; white-space: nowrap; }
.pj-mini:hover { background: var(--line-2); color: var(--text); }
.pj-fondo { margin-top: auto; padding-top: var(--sp-5); }
.pj-largo { width: 100%; justify-content: center; }
.pj-vuoto { color: var(--muted); font-size: 13px; padding: 6px 10px; }
.pj-avviso { font-size: 12px; color: var(--muted); padding: 10px; border: 1px dashed var(--line); border-radius: 8px; margin: 12px 4px 0; }

/* la parte centrale: intestazione fissa, contenuto che scorre */
.pj-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pj-testa { padding: 14px 20px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; flex: none; }
.pj-briciole { font-size: 12px; color: var(--muted); }
.pj-riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pj-riga .pj-dot { width: 12px; height: 12px; }
.pj-titolo { margin: 0; font-size: 19px; font-weight: var(--w-forte); }
.pj-tag { font-size: 11px; font-weight: var(--w-medio); padding: 2px 8px; border-radius: 999px; background: var(--info-bg); color: var(--info); }
.pj-tag.modello { background: var(--warn-bg); color: var(--warn); }
.pj-avs { display: inline-flex; }
.pj-avs .pj-av { margin-left: -5px; box-shadow: 0 0 0 2px var(--card); }
.pj-avs .pj-av:first-child { margin-left: 0; }
.pj-prog { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pj-barra { width: 110px; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pj-barra i { display: block; height: 100%; background: var(--accent); }
.pj-schede { display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; }
.pj-tb { border: 0; background: none; font: inherit; font-weight: var(--w-medio); padding: 8px 12px; color: var(--muted);
         border-bottom: 2px solid transparent; cursor: pointer; }
.pj-tb[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.pj-strumenti { display: inline-flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.pj-scorre { flex: 1; overflow: auto; min-height: 0; }

/* l'avatar */
.pj-av { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
         font-size: 9.5px; font-weight: var(--w-forte); color: var(--on-accent); background: var(--pj-tinta, var(--info)); letter-spacing: .02em; }
img.pj-av.foto { object-fit: cover; background: var(--line-2); }
.pj-av.vuoto { background: none; border: 1.5px dashed var(--muted-2); color: var(--muted-2); }

/* la lista */
.pj-lista { padding: 6px 12px 40px; min-width: 560px; }
.pj-lhead, .pj-riga-task { display: grid; grid-template-columns: 28px minmax(0, 1fr) 140px 70px; gap: 8px; align-items: center; }
.pj-lhead { padding: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
            border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); z-index: 1; }
.pj-sez { margin-top: 10px; border-radius: 8px; }
.pj-sez-hd { display: flex; align-items: center; gap: 6px; padding: 6px 4px; }
.pj-freccia { border: 0; background: none; color: var(--muted); cursor: pointer; width: 22px; height: 22px; border-radius: 5px; padding: 0; font-size: 11px; }
.pj-freccia:hover { background: var(--line-2); }
.pj-sez-nome { font: inherit; font-weight: var(--w-forte); font-size: 14px; color: var(--text); background: none;
               border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; min-width: 60px; field-sizing: content; }
input.pj-sez-nome:hover { border-color: var(--line); }
input.pj-sez-nome:focus { outline: none; border-color: var(--accent); background: var(--field); }
.pj-sez-hd .pj-conta { margin-left: 2px; font-size: 12px; }
.pj-sez-hd .pj-mini { margin-left: auto; }
.pj-riga-task { padding: 6px 8px; border-bottom: 1px solid var(--line-2); border-radius: 6px; cursor: pointer; }
.pj-riga-task:hover { background: var(--line-2); }
.pj-riga-task.aperto { background: var(--accent-soft); }
.pj-riga-task.trascinato, .pj-scheda.trascinato { opacity: .45; }
/* Trascinare (02/10): la maniglia sta nel margine sinistro, così le colonne restano allineate, e
   la linea d'inserimento è uno pseudo-elemento: niente bordi che spostano le righe sotto il mouse. */
.pj-lista.scrive .pj-lhead, .pj-lista.scrive .pj-riga-task { padding-left: 24px; }
.pj-riga-task, .pj-scheda { position: relative; }
/* Sottotask in lista (02/10): la prima cella tiene freccia e spunta, e il sottotask comincia dove
   comincia il titolo del padre, con la sua spunta davanti. */
/* Le colonne dell'elenco: le larghezze le sceglie chi guarda (projects.js le scrive qui con
   setProperty). Il valore di partenza sta dichiarato sul contenitore, non nascosto nel ripiego
   del var(): un token usato e mai dichiarato è un colore o una misura che non c'è. */
.pj-lista { --pj-cols: 46px minmax(0, 1fr) 64px 140px 70px; }
.pj-lista .pj-lhead, .pj-lista .pj-riga-task { grid-template-columns: var(--pj-cols); }
.pj-cella { min-width: 0; }
.pj-tags-cella { display: flex; flex-wrap: wrap; gap: 3px; }
.pj-lista .pj-agg { grid-template-columns: 46px minmax(0, 1fr); }
.pj-capo { display: flex; align-items: center; gap: 4px; }
.pj-freccia-posto { width: 22px; flex: none; }
.pj-riga-sub .pj-nome { gap: 4px 8px; }
.pj-maniglia { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 16px; text-align: center;
  font-size: 14px; line-height: 1; color: var(--muted-2); opacity: .45; cursor: grab; user-select: none; }
.pj-riga-task:hover .pj-maniglia { opacity: 1; color: var(--muted); }
.pj-riga-task.trascinato .pj-maniglia { cursor: grabbing; }
.pj-ins-su::before, .pj-ins-giu::after, .pj-ins-vuota > .pj-sez-hd::after, .pj-ins-vuota > .pj-col-hd::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--accent);
  box-shadow: 0 0 6px var(--accent); pointer-events: none; z-index: 2; }
.pj-ins-su::before { top: -1px; }
.pj-ins-giu::after { bottom: -1px; }
.pj-scheda.pj-ins-su::before { top: -4px; }
.pj-scheda.pj-ins-giu::after { bottom: -4px; }
.pj-sez-hd, .pj-col-hd { position: relative; }
.pj-ins-vuota > .pj-sez-hd::after, .pj-ins-vuota > .pj-col-hd::after { bottom: -2px; }
.pj-riga-task.fatto .pj-nome, .pj-sub.fatto .pj-nome { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--muted-2); }
.pj-scheda.fatto .pj-nome { text-decoration: line-through; }
.pj-nome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; overflow-wrap: anywhere; }
.pj-chi { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
.pj-scad { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-scad.presto { color: var(--warn); font-weight: var(--w-medio); }
.pj-scad.tardi { color: var(--crit); font-weight: var(--w-medio); }
.pj-meta { font-size: 11px; color: var(--muted); white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.pj-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--muted); background: var(--line-2);
           border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.pj-chip.verifica { background: var(--info-bg); color: var(--info); }
.pj-chip .pj-dot { width: 7px; height: 7px; border-radius: 2px; }
.pj-var { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--warn-bg); color: var(--warn); border-radius: 4px; padding: 0 4px; }
.pj-spunta { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--muted-2); background: none; padding: 0;
             cursor: pointer; display: grid; place-items: center; color: transparent; font-size: 11px; line-height: 1; }
.pj-spunta:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pj-spunta.on { background: var(--good); border-color: var(--good); color: var(--on-accent); }
.pj-spunta:disabled { cursor: default; }
/* Bloccato da task non ancora fatti (08/10): la clessidra al posto del cerchio, come Asana. */
.pj-spunta.bloccata { border: none; border-radius: 6px; color: var(--muted); }
.pj-spunta.bloccata .pj-ic { width: 15px; height: 15px; stroke-width: 2; }
.pj-spunta.bloccata:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
/* I task affidati agli agenti (card #246): al posto della spunta l'agente, col colore della fase
   della card. In coda e in smistamento il grigio-blu, al lavoro il verde, una domanda l'arancio. */
.pj-spunta.agente { border: none; border-radius: 6px; cursor: default; color: var(--info); background: var(--info-bg); }
.pj-spunta.agente .pj-ic { width: 13px; height: 13px; }
.pj-spunta.agente.f-in_progress, .pj-chip.agenti.f-in_progress, .pj-stato-agenti.f-in_progress { color: var(--accent); background: var(--accent-soft); }
.pj-spunta.agente.f-feedback_request, .pj-chip.agenti.f-feedback_request, .pj-stato-agenti.f-feedback_request { color: var(--warn); background: var(--warn-bg); }
.pj-chip.agenti { background: var(--info-bg); color: var(--info); font-weight: var(--w-medio); }
.pj-av.agente { background: var(--info-bg); color: var(--info); }
.pj-av.agente .pj-ic { width: 13px; height: 13px; margin: 0; }
.pj-stato-agenti { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: var(--w-medio);
                   color: var(--info); background: var(--info-bg); border-radius: 999px; padding: 4px 10px; }
.pj-stato-agenti .pj-ic { width: 14px; height: 14px; }
.pj-agenti-box { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px;
                 background: var(--info-bg); border: 1px solid var(--line); font-size: 13px; }
.pj-agenti-box.f-feedback_request { background: var(--warn-bg); }
.pj-agenti-box.f-in_progress { background: var(--accent-soft); }
.pj-agenti-riga { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pj-agenti-domanda { display: flex; flex-direction: column; gap: 2px; padding-left: 30px; }
.pj-agenti-azioni { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-agenti-azioni .pj-ic { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
.pj-agg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 4px 8px; }
.pj-agg::before { content: ""; }
.pj-agg input { font: inherit; color: var(--text); background: none; border: 1px dashed transparent; border-radius: 6px; padding: 5px 6px; width: 100%; }
.pj-agg input::placeholder { color: var(--muted-2); }
.pj-agg input:hover { border-color: var(--line); }
.pj-agg input:focus { outline: none; border-style: solid; border-color: var(--accent); background: var(--field); }

/* la bacheca: le colonne sono le sezioni */
.pj-bacheca { display: flex; gap: 12px; padding: 14px 16px 30px; align-items: flex-start; min-height: 100%; }
.pj-col { width: 260px; flex: none; background: var(--bg); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; border: 1px solid transparent; }
.pj-col.sopra { border-color: var(--accent); }
.pj-col-nuova { background: none; width: 200px; }
.pj-col-hd { display: flex; align-items: center; gap: 6px; padding: 2px 2px 4px; }
.pj-col-hd .pj-sez-nome { font-size: 13px; }
.pj-col .pj-agg { display: block; padding: 0; }
.pj-col .pj-agg::before { content: none; }
.pj-scheda { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px;
             display: flex; flex-direction: column; gap: 7px; cursor: grab; box-shadow: 0 1px 1px rgba(0,0,0,.03); }
.pj-scheda:hover { border-color: var(--muted-2); }
.pj-scheda.fatto { opacity: .6; }
.pj-scheda-su { display: flex; gap: 7px; align-items: flex-start; }
.pj-scheda-giu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pj-scheda-giu .pj-scad { margin-left: auto; }

/* le mie attività */
.pj-mie { padding: 14px 20px 40px; display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
.pj-gruppo { margin: 0 0 4px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pj-riga-mia { grid-template-columns: 28px minmax(0, 1fr) 70px; }

/* il dettaglio del task: entra da destra, dentro la finestra */
.pj-pannello { position: absolute; top: 0; right: 0; bottom: 0; width: 440px; max-width: 100%; z-index: 5;
               background: var(--card); border-left: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .pj-pannello { animation: pj-entra .18s ease-out; }
  @keyframes pj-entra { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
}
.pj-pan-hd { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.pj-pan-corpo { flex: 1; overflow-y: auto; padding: 14px 18px 24px; }
.pj-pan-corpo.u-stack { gap: 16px; }
.pj-pan-titolo { width: 100%; font: inherit; font-size: 18px; font-weight: var(--w-forte); color: var(--text); background: none;
                 border: 1px solid transparent; border-radius: 7px; padding: 4px 6px; resize: none; field-sizing: content; min-height: 34px; }
.pj-pan-titolo:hover:not([readonly]) { border-color: var(--line); }
.pj-pan-titolo:focus { outline: none; border-color: var(--accent); background: var(--field); }
.pj-campi { --pj-campi-etich: 110px; display: grid; grid-template-columns: var(--pj-campi-etich) minmax(0, 1fr); gap: 10px 12px; align-items: center; }
.pj-campi > label, .pj-etich { font-size: 12px; color: var(--muted); }
.pj-etich { font-weight: var(--w-forte); letter-spacing: .05em; text-transform: uppercase; }
.pj-campi > .pj-etich { font-weight: var(--w-normale); letter-spacing: 0; text-transform: none; }
.pj-casa { display: flex; align-items: center; gap: 6px; background: var(--line-2); border-radius: 7px; padding: 4px 8px; font-size: 12.5px; min-width: 0; }
.pj-casa > .u-tronca { flex: 1; }
.pj-casa select { width: auto; max-width: 55%; padding: 1px 4px; font-size: 12px; background: var(--card); }
.pj-verifica { display: flex; flex-direction: column; gap: 4px; background: var(--info-bg); border: 1px solid var(--line); border-radius: 9px;
               padding: 10px 12px; font-size: 13px; }
.pj-verifica b { color: var(--info); font-size: 12.5px; }
.pj-sotto { display: flex; flex-direction: column; }
.pj-sub { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 5px 2px; border-bottom: 1px solid var(--line-2); }
.pj-sotto + .pj-agg { grid-template-columns: 24px minmax(0, 1fr); padding: 2px 0; }
.pj-link { border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.pj-link:hover { color: var(--accent-d); text-decoration: underline; }
.pj-finestra [data-pj-apri] { color: var(--accent-d); }          /* i bloccanti nella conferma: si aprono */
.pj-storia { display: flex; flex-direction: column; gap: 8px; }
.pj-ev { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 13px; }
.pj-ev.sis { color: var(--muted); font-size: 12px; }
.pj-commento { display: flex; gap: 6px; align-items: flex-end; margin-top: 6px; position: relative; }
.pj-citato { color: var(--accent-d); font-weight: var(--w-medio); background: var(--accent-soft); border-radius: 4px; padding: 0 2px; }
/* Il link a un task in un commento diventa una pastiglia col nome (13/10, come Asana); gli altri
   indirizzi restano link, che vanno a capo dove serve invece di allargare il pannello. */
.pj-chip-task { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 1px 0; padding: 1px 8px 1px 6px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); font: inherit; font-size: 12.5px;
  line-height: 1.6; vertical-align: baseline; white-space: nowrap; cursor: pointer; }
.pj-chip-task > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pj-chip-task .pj-ic { flex: none; width: 13px; height: 13px; color: var(--muted); }
.pj-chip-task:hover, .pj-chip-task:focus-visible { border-color: var(--accent); color: var(--accent-d); outline: none; }
.pj-chip-task.fatto .pj-ic { color: var(--good); }
.pj-chip-task.fatto > span { color: var(--muted); text-decoration: line-through; }
.pj-link-testo { color: var(--accent-d); overflow-wrap: anywhere; }
.pj-elimina { font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.pj-cita { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 6; min-width: 240px; max-width: 100%;
           background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow);
           padding: 4px; display: flex; flex-direction: column; }
.pj-cita-voce { display: flex; align-items: center; gap: 8px; border: 0; background: none; font: inherit; color: var(--text);
                text-align: left; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.pj-cita-voce.su, .pj-cita-voce:hover { background: var(--accent-soft); }
.pj-cita-voce .pj-meta { margin-left: auto; }
.pj-cita[hidden] { display: none; }
.pj-cerca { margin: 0 2px 8px; }
.pj-trovato { background: var(--warn-bg); color: inherit; border-radius: 3px; padding: 0 1px; }
.pj-riga-trovata { grid-template-columns: 28px minmax(0, 1fr) 30px 64px; }
.pj-titolo-riga { cursor: text; border-radius: 4px; padding: 0 2px; margin: 0 -2px; }
.pj-titolo-riga:hover { box-shadow: inset 0 -1px 0 var(--muted-2); }
.pj-titolo-riga.in-modifica { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--field); cursor: text; }
/* Le dipendenze come in Asana (12/10): un campo del task, una riga per task col verso (in arancio
   la clessidra finché il bloccante non è fatto), il task in una pastiglia che si apre, la × che
   compare passandoci sopra; sotto «Aggiungi dipendenze». */
.pj-dip-campo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pj-dip { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.pj-dip-tipo { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 6px; border: 0; border-radius: 6px;
  background: none; color: var(--muted); font: inherit; cursor: pointer; }
.pj-dip-tipo.attesa { color: var(--warn); font-weight: var(--w-medio); }
.pj-dip-tipo:hover:not(:disabled) { background: var(--line-2); }
.pj-dip-tipo:disabled { cursor: default; }
.pj-dip-tipo .pj-ic { width: 14px; height: 14px; }
.pj-dip-tipo .pj-dip-giu { width: 12px; height: 12px; opacity: .7; }
.pj-dip-task { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 3px 8px;
  border: 1px solid transparent; border-radius: 7px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.pj-dip-task:hover, .pj-dip-task:focus-visible { border-color: var(--line); background: var(--line-2); outline: none; }
.pj-dip.fatto .pj-dip-task .u-tronca { color: var(--muted); text-decoration: line-through; }
.pj-dip-stato { flex: none; width: 15px; height: 15px; color: var(--muted); }
.pj-dip.fatto .pj-dip-stato { color: var(--good); }
.pj-dip-x { opacity: 0; }
.pj-dip:hover .pj-dip-x, .pj-dip-x:focus-visible { opacity: 1; }
.pj-dip-aggiungi { align-self: flex-start; padding: 3px 6px; border: 0; border-radius: 6px; background: none; color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer; }
.pj-dip-aggiungi:hover, .pj-dip-aggiungi[aria-expanded="true"] { background: var(--line-2); color: var(--text); }
.pj-dip-cerca { position: relative; }
.pj-pop.pj-pop-dipverso { width: 270px; padding: 8px; gap: 2px; }
.pj-voce-due { display: flex; flex-direction: column; gap: 1px; }
/* La tendina delle dipendenze come Asana (15/10): il verso a sinistra, la ricerca a destra, i
   risultati sotto su una riga sola (stato, titolo, progetto). La tendina si allarga anche sotto
   l'etichetta del campo: nella colonna dei valori da sola il titolo si leggerebbe a metà. */
.pj-dip-riga { display: flex; align-items: center; gap: 6px; }
.pj-dip-riga .pj-dip-tipo { flex: none; }
.pj-dip-riga input { flex: 1; min-width: 0; }
.pj-dip-esiti { position: absolute; top: calc(100% + 4px); left: calc(-1 * (var(--pj-campi-etich) + 12px)); right: 0; z-index: 8;
  max-height: 300px; overflow-y: auto; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.pj-dip-esito { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 7px 8px; border: 0; border-radius: 7px;
  background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pj-dip-esito.su, .pj-dip-esito:hover:not(:disabled) { background: var(--line-2); }
.pj-dip-esito-t { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-dip-esito-p { flex: 1 1 0; min-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.pj-dip-esito.gia { cursor: default; opacity: .5; }
.pj-dip-vuoto { padding: 10px; color: var(--muted); font-size: 13px; }
/* La @ scritta nella descrizione: l'elenco delle persone sotto il cursore (15/10). */
.pj-pop.pj-pop-menzione { width: 280px; padding: 6px; gap: 1px; }
.pj-pop-menzione .pj-av { width: 22px; height: 22px; font-size: 10px; flex: none; }
.pj-scelta { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--t-md); padding: 3px 0; }
/* L'allegato in una finestra (12/10): a tutto schermo, in cima nome, chi e quando e le azioni, il
   file al centro su fondo pagina, le frecce ai lati per gli altri allegati del task. */
.pj-visore-hd { flex: none; display: flex; align-items: center; gap: 4px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--line); }
.pj-visore-titolo { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.pj-visore-titolo b { font-size: 14px; }
.pj-visore-hd .pj-mini .pj-ic { width: 17px; height: 17px; }
.pj-visore-corpo { position: relative; flex: 1; min-height: 0; display: flex; padding: 20px 68px; background: var(--bg); }
.pj-visore-vista { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.pj-visore-vista img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; background: var(--card); box-shadow: var(--shadow); }
.pj-visore-vista iframe { width: min(100%, 1000px); height: 100%; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.pj-visore-nulla { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; padding: 32px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.pj-visore-nulla > .pj-ic { width: 40px; height: 40px; color: var(--muted); }
.pj-visore-freccia { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--text); box-shadow: var(--shadow); cursor: pointer; }
.pj-visore-freccia.prima { left: 14px; }
.pj-visore-freccia.dopo { right: 14px; }
.pj-visore-freccia:hover, .pj-visore-freccia:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.pj-visore-freccia .pj-ic { width: 20px; height: 20px; }
@media (max-width: 560px) {
  .pj-visore-corpo { padding: 12px 12px 64px; }
  .pj-visore-freccia { top: auto; bottom: 12px; transform: none; }
}
/* Di chi sono le notifiche: la scelta dell'amministratore in cima alla finestra (11/10). */
.pj-campo-riga { display: flex; align-items: center; gap: 10px; }
.pj-campo-riga select { flex: 1; min-width: 0; }
.pj-commento textarea { flex: 1; min-height: 36px; resize: vertical; }

/* Allegati del task (02/10): una zona tratteggiata per sfogliare o lasciar cadere, poi le tessere
   con l'anteprima (l'immagine, oppure il foglio con l'estensione), il nome e chi l'ha messo. */
.pj-zona-file { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 12px 14px; white-space: normal; text-align: center;
  border: 1.5px dashed var(--line); border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.pj-zona-file u { color: var(--text); text-decoration-style: dotted; text-underline-offset: 3px; }
.pj-zona-file .pj-meta { font-size: 11.5px; text-align: center; white-space: normal; }
.pj-zona-file:hover, .pj-zona-file:focus-visible { border-color: var(--accent); color: var(--text); outline: none; }
.pj-file-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pj-file { position: relative; display: flex; flex-direction: column; background: var(--line-2); border: 1px solid var(--line);
  border-radius: 10px; }
.pj-file:hover { border-color: var(--muted-2); }
.pj-file-ant { display: flex; align-items: center; justify-content: center; height: 104px; background: var(--bg); color: var(--accent);
  border-radius: 9px 9px 0 0; overflow: hidden; }
.pj-file-ant img { width: 100%; height: 100%; object-fit: cover; }
.pj-file-ico { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.pj-file-ico b { font-size: 10px; letter-spacing: .06em; }
.pj-file-piede { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 12.5px; min-width: 0; }
.pj-file-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pj-file-testo .pj-meta { white-space: normal; }
.pj-file-piede a { color: var(--text); text-decoration: none; }
.pj-file-piede a:hover { text-decoration: underline; }
.pj-file-menu { position: absolute; top: 6px; right: 6px; width: 28px; height: 24px; border-radius: 7px; border: 1px solid var(--line);
  padding: 0; background: var(--card); color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; }
.pj-file:hover .pj-file-menu, .pj-file-menu:focus-visible, .pj-file-menu[aria-expanded="true"] { opacity: 1; }
.pj-file-menu:hover { color: var(--text); }
@media (hover: none) { .pj-file-menu { opacity: 1; } }
/* La tendina della tessera: sotto il pulsante ⋯, sopra le tessere vicine. */
.pj-tendina { position: absolute; top: 34px; right: 6px; z-index: 8; min-width: 170px; padding: 5px; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.pj-tendina button, .pj-tendina a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; text-decoration: none; cursor: pointer; }
.pj-tendina span[aria-hidden] { width: 16px; text-align: center; color: var(--muted); }
.pj-tendina button:hover, .pj-tendina a:hover, .pj-tendina button:focus-visible, .pj-tendina a:focus-visible { background: var(--line-2); outline: none; }
.pj-tendina hr { border: 0; border-top: 1px solid var(--line); margin: 4px -5px; }
.pj-tendina .rossa, .pj-tendina .rossa span[aria-hidden] { color: var(--crit); }
/* Un file trascinato sopra il pannello o sopra una riga: lì cadrà. */
.pj-pannello.file-sopra { outline: 2px dashed var(--accent); outline-offset: -6px; }
.pj-riga-task.file-sopra, .pj-scheda.file-sopra { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* Priorità, tag, filtri e gruppi (02/10). La pillola della priorità prende la tinta dal suo
   numero; quella vuota resta un trattino tenue, cliccabile per sceglierla. */
.pj-pri { --pj-p: var(--muted-2); display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px;
  padding: 0 6px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--pj-p) 45%, transparent);
  background: color-mix(in srgb, var(--pj-p) 16%, transparent); color: var(--pj-p); font: inherit; font-size: 11.5px;
  font-weight: var(--w-forte); font-style: normal; line-height: 1; cursor: default; }
button.pj-pri { cursor: pointer; }
.pj-pri.p0 { border-style: dashed; background: none; font-weight: var(--w-normale); }
.pj-pri.p1 { --pj-p: var(--pj-p1); } .pj-pri.p2 { --pj-p: var(--pj-p2); } .pj-pri.p3 { --pj-p: var(--pj-p3); }
.pj-pri.p4 { --pj-p: var(--pj-p4); } .pj-pri.p5 { --pj-p: var(--pj-p5); }
.pj-riga-task:not(:hover) .pj-pri.p0 { opacity: 0; }
.pj-pri-cella { display: flex; justify-content: center; }
/* Assegnatario, scadenza e tag si cambiano dalla cella (08/10): sembrano testo finché non ci si
   passa sopra, come la priorità; vuoti, il segnaposto compare solo sulla riga sotto il mouse. */
.pj-cella-btn { display: flex; align-items: center; max-width: calc(100% + 12px); min-width: 0; min-height: 24px; margin: -3px -6px;
  padding: 2px 6px; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pj-cella-btn.pj-scad { font-size: 12px; }
.pj-cella-btn:hover, .pj-cella-btn:focus-visible, .pj-cella-btn[data-pop-aperto] { border-color: var(--line); outline: none; }
.pj-cella-btn:hover, .pj-cella-btn[data-pop-aperto] { background: var(--line-2); }
.pj-cella-btn .pj-ic { width: 14px; height: 14px; color: var(--muted-2); }
.pj-riga-task:not(:hover) .pj-cella-btn.vuota:not(:focus-visible):not([data-pop-aperto]) > * { opacity: 0; }
.pj-tags-cella[data-az] { align-items: center; min-height: 22px; cursor: pointer; }
.pj-cella-piu { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 1px dashed var(--line); border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; }
.pj-cella-piu .pj-ic { width: 12px; height: 12px; }
.pj-cella-piu:hover, .pj-cella-piu[data-pop-aperto] { border-style: solid; border-color: var(--accent); color: var(--accent); }
.pj-riga-task:not(:hover) .pj-cella-piu:not(:focus-visible):not([data-pop-aperto]) { opacity: 0; }
.pj-pop.pj-pop-chi, .pj-pop.pj-pop-scad, .pj-pop.pj-pop-tagcella { width: 270px; padding: 10px; gap: 8px; }
.pj-pop-voci { display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow-y: auto; }
.pj-pop-voce.su { background: var(--line-2); }
.pj-pop-voce .pj-av { width: 20px; height: 20px; font-size: 9px; flex: none; }
.pj-pop-tagcella .pj-pills { gap: 4px; }
/* La selezione multipla (08/10): le righe scelte accese con la riga d'accento a sinistra (la
   riga aperta nel pannello ha lo stesso fondo ma niente riga), e in basso al centro della lista la
   barra dei gesti su tutte, come in Asana. */
.pj-main { position: relative; }
.pj-riga-task.selez { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pj-scheda.selez { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.pj-main:has(> .pj-selbar) .pj-scorre { padding-bottom: 84px; }
.pj-selbar { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 2px;
  max-width: calc(100% - 32px); overflow-x: auto; padding: 6px 8px 6px 18px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); }
.pj-selbar-n { margin-right: 10px; font-size: 13px; white-space: nowrap; }
.pj-selbar-b { display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--muted); cursor: pointer; }
.pj-selbar-b:hover, .pj-selbar-b:focus-visible, .pj-selbar-b[data-pop-aperto] { background: var(--line-2); color: var(--text); outline: none; }
.pj-selbar-b .pj-ic { width: 17px; height: 17px; }
.pj-selbar-sep { flex: none; width: 1px; align-self: stretch; margin: 4px 6px; background: var(--line); }
.pj-pop.pj-pop-selsposta, .pj-pop.pj-pop-selaltro { width: 250px; padding: 8px; gap: 2px; }
.pj-pop.pj-pop-seltag { width: 280px; padding: 10px; gap: 8px; }
.pj-pop-seltag .pj-pills { gap: 4px; }
.pj-tag-n { margin-left: 3px; font-size: 10px; opacity: .75; }
.pj-scheda-su .pj-pri { margin-left: auto; flex: none; }
.pj-pri-scelta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pj-pri-scelta .pj-pri { min-width: 28px; height: 24px; }
.pj-pri-scelta .pj-pri.on { background: var(--pj-p); color: var(--card); }
.pj-tag-t { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: 9px; border: 0;
  background: color-mix(in srgb, var(--pj-tinta) 18%, transparent); color: var(--pj-tinta); font: inherit; font-size: 11px; line-height: 1.5; cursor: pointer; }
.pj-tc1 { --pj-tinta: var(--pj-t1); } .pj-tc2 { --pj-tinta: var(--pj-t2); } .pj-tc3 { --pj-tinta: var(--pj-t3); }
.pj-tc4 { --pj-tinta: var(--pj-t4); } .pj-tc5 { --pj-tinta: var(--pj-t5); } .pj-tc6 { --pj-tinta: var(--pj-t6); }
.pj-tc7 { --pj-tinta: var(--pj-t7); } .pj-tc8 { --pj-tinta: var(--pj-t8); } .pj-tc9 { --pj-tinta: var(--pj-t9); }
.pj-tc10 { --pj-tinta: var(--pj-t10); } .pj-tc11 { --pj-tinta: var(--pj-t11); } .pj-tc12 { --pj-tinta: var(--pj-t12); }
.pj-tag-t .pj-tag-nome { border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; opacity: 1; font-size: inherit; }
.pj-pop.pj-pop-tagcolore { width: 260px; gap: 10px; }
.pj-tavolozza { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pj-tinta-tag { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--pj-tinta); cursor: pointer; padding: 0; }
.pj-tinta-tag:hover { transform: scale(1.08); }
.pj-tinta-tag.on, .pj-tinta-tag:focus-visible { border-color: var(--card); box-shadow: 0 0 0 2px var(--pj-tinta); outline: none; }
.pj-senza-titolo { color: var(--muted-2); font-style: italic; }
.pj-titolo-riga.in-modifica { display: inline-block; min-width: 160px; }
.pj-tag-t button { border: 0; background: none; color: inherit; padding: 0 0 0 2px; font-size: 13px; line-height: 1; cursor: pointer; opacity: .7; }
.pj-tag-t button:hover { opacity: 1; }
.pj-tag-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.pj-tag-campo .pj-tag-t { cursor: default; font-size: 12px; }
.pj-tag-input { flex: 1; min-width: 120px; border: 0; border-bottom: 1px dashed var(--line); background: none; color: var(--text); font: inherit; font-size: 12.5px; padding: 3px 2px; }
.pj-tag-input:focus { outline: none; border-bottom-color: var(--accent); }
/* Un tag usato come filtro (i negozi di Competitor Analysis, 16/10/2026): acceso si riempie della
   sua tinta, così si vede quali sono scelti senza leggere. Sotto un nome, i tag vanno in fila. */
.pj-tag-t[aria-pressed="true"] { background: var(--pj-tinta); color: var(--card); }
.pj-tags-cella.sotto { display: flex; margin-top: 3px; }
/* Il diario delle note su una cosa (un negozio, 16/10/2026): una voce per nota, chi e quando sotto
   il testo, e il campo per la prossima in fondo. */
.diario-note { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); }
.diario-note .voce { padding-top: var(--sp-3); border-top: 1px solid var(--line-2); }
.diario-note .scrivi { align-items: flex-end; }
.diario-note .scrivi textarea.inp { flex: 1; min-height: 52px; resize: vertical; line-height: 1.45; }
/* Un comando che si legge come una riga di testo (l'ultima nota sotto un nome, «togli»): niente
   aspetto da pulsante, ma resta un pulsante per la tastiera e per chi legge lo schermo. */
.lnk-nota { border: 0; background: none; padding: 0; font: inherit; font-size: var(--t-xs); color: var(--muted);
  text-align: left; cursor: pointer; }
.lnk-nota:hover { color: var(--accent-d); text-decoration: underline; }
.pj-riga-task.per-sub .pj-nome { color: var(--muted); }
.pj-strum { display: inline-flex; align-items: center; gap: 5px; border: 1px solid transparent; background: none; color: var(--muted);
  font: inherit; font-size: 12.5px; padding: 4px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.pj-strum:hover, .pj-strum[data-pop-aperto] { background: var(--line-2); color: var(--text); }
.pj-strum.attivo { color: var(--accent-d); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.pj-filtrati { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 16px; font-size: 12.5px;
  background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.pj-filtrati .pj-meta { white-space: normal; }
.pj-filtrati .pj-link { margin-left: auto; }
.pj-pop { position: fixed; z-index: 40; width: min(560px, calc(100vw - 16px)); max-height: min(70vh, 620px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px; }
.pj-pop-gruppi, .pj-pop-pri, .pj-pop-progetto { width: 240px; padding: 8px; gap: 2px; }
.pj-pop-voce.rossa, .pj-pop-voce.rossa > span[aria-hidden] { color: var(--crit); }
.pj-pop-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pj-pop-gruppi .pj-pop-hd { padding: 4px 8px 6px; font-size: 12.5px; color: var(--muted); }
.pj-pop-sez { display: flex; flex-direction: column; gap: 6px; }
.pj-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 16px;
  background: none; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.pj-pill:hover { border-color: var(--muted-2); }
.pj-pill.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-d); }
.pj-pill .pj-av { width: 18px; height: 18px; font-size: 9px; }
.pj-pill .pj-pri { min-width: 18px; height: 16px; padding: 0 4px; font-size: 10.5px; }
.pj-pop-voce { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px; background: none;
  color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pj-pop-voce > span[aria-hidden] { width: 14px; color: var(--accent); }
.pj-pop-voce:hover, .pj-pop-voce:focus-visible { background: var(--line-2); outline: none; }
.pj-pop-voce.on { font-weight: var(--w-forte); }
.pj-pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px -8px; }
.pj-pop .pj-link[disabled] { opacity: .4; cursor: default; }

/* Automazioni (02/10): una scheda per regola, interruttore a destra, i campi sotto. */
.pj-regola { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.pj-regola.accesa { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.pj-regola-hd { display: flex; align-items: flex-start; gap: 12px; }
.pj-regola-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pj-regola-campo { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.pj-avviso { font-size: 12px; color: var(--warn); }

/* Intestazione del progetto come Asana (02/10): progetto e menu, viste, barra degli attrezzi. */
.pj-testa-1 { gap: 8px; }
.pj-icona { width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; flex: none;
  background: var(--pj-tinta, var(--accent)); color: #fff; font-size: 14px; }
.pj-giu { padding: 2px 6px; font-size: 13px; }
.pj-bordo { border-color: var(--line); }
.pj-av-piu { background: var(--line-2); color: var(--muted); }
/* Chi segue il task (15/10, come i «Members» di Asana): in testata le facce che si sovrappongono
   e il + tratteggiato; nella finestrella le persone come pastiglie con la ×, e il campo per aggiungere. */
.pj-segui { display: inline-flex; align-items: center; padding: 2px 4px 2px 8px; border: 0; border-radius: 16px; background: none; cursor: pointer; }
.pj-segui:hover, .pj-segui[data-pop-aperto] { background: var(--line-2); }
.pj-segui > .pj-av { width: 24px; height: 24px; margin-left: -7px; font-size: 10px; box-shadow: 0 0 0 2px var(--card); }
.pj-segui-piu { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -4px; border: 1.5px dashed var(--muted-2);
  border-radius: 50%; background: var(--card); color: var(--muted); }
.pj-segui-piu .pj-ic { width: 12px; height: 12px; }
.pj-segui:hover .pj-segui-piu { border-color: var(--accent); color: var(--accent); }
.pj-pop.pj-pop-segui { width: 380px; padding: 12px 14px; gap: 10px; }
.pj-segui-io { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13px; }
.pj-segui-io .pj-ic { width: 14px; height: 14px; }
.pj-segui-io:hover { color: var(--accent-d); }
.pj-segui-campo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; }
.pj-segui-campo:focus-within { border-color: var(--accent); }
.pj-segui-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 6px 3px 4px; border-radius: 6px;
  background: var(--line-2); font-size: 13px; }
.pj-segui-chip .pj-av { width: 20px; height: 20px; font-size: 9px; flex: none; }
.pj-segui-chip button { border: 0; background: none; padding: 0 2px; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.pj-segui-chip button:hover { color: var(--crit); }
.pj-segui-input { flex: 1; min-width: 120px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; outline: none; }
.pj-attrezzi { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 20px; border-bottom: 1px solid var(--line); flex: none; }
.pj-aggiungi { display: inline-flex; }
.pj-aggiungi .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pj-aggiungi .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; padding-left: 7px; padding-right: 7px; }
.pj-filtri-on { display: inline-flex; }
.pj-filtri-on .pj-strum:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.pj-filtri-on .pj-strum:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; padding: 4px 8px; font-size: 14px; }
.pj-veloce input { width: 220px; }
.pj-pop.pj-pop-aggiungi { width: 200px; padding: 8px; gap: 2px; }
/* Il cestino: la fascia rossa in cima al pannello e l'elenco dei task eliminati. */
.pj-cestino-fascia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: var(--crit-bg);
  color: var(--crit); font-size: 13px; font-weight: var(--w-medio); border-bottom: 1px solid color-mix(in srgb, var(--crit) 35%, transparent); }
.pj-fascia-testo { flex: 1 1 auto; }
.pj-fascia-azioni { display: inline-flex; gap: 6px; margin-left: auto; }
.pj-cestinato { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.pj-cestinato-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pj-cestinato-testo .pj-meta { white-space: normal; }

/* L'editor della descrizione (02/10): la barra in alto come Asana, il testo sotto. */
.pj-editor { border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.pj-editor:focus-within { border-color: var(--accent); }
.pj-ed-barra { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 4px 6px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 2; background: var(--field); border-radius: 10px 10px 0 0; }
.pj-ed-b { min-width: 28px; height: 28px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--muted);
  font: inherit; font-size: 13px; cursor: pointer; line-height: 1; }
.pj-ed-b:hover { background: var(--line-2); color: var(--text); }
.pj-ed-piu { font-size: 16px; color: var(--text); background: var(--line-2); }
.pj-ed-stile { min-width: 112px; text-align: left; }
.pj-ed-sep { width: 1px; height: 18px; background: var(--line); margin: 0 3px; }
.pj-ed-testo { min-height: 120px; padding: 10px 12px; outline: none; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
.pj-ed-testo { position: relative; }
.pj-ed-testo.vuoto::before { content: attr(data-segnaposto); position: absolute; left: 12px; right: 12px; top: 10px; color: var(--muted-2); pointer-events: none; }
.pj-ed-sola { min-height: 0; padding: 2px 0; }
.pj-ed-testo > :first-child { margin-top: 0; }
.pj-ed-testo p { margin: 0 0 6px; }
.pj-ed-testo h1 { font-size: 19px; margin: 12px 0 6px; } .pj-ed-testo h2 { font-size: 16px; margin: 10px 0 6px; }
.pj-ed-testo h3 { font-size: 14px; margin: 8px 0 4px; }
.pj-ed-testo ul, .pj-ed-testo ol { margin: 0 0 6px; padding-left: 22px; }
.pj-ed-testo blockquote { margin: 6px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line); color: var(--muted); }
.pj-ed-testo pre { margin: 6px 0; padding: 8px 10px; border-radius: 7px; background: var(--line-2); white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.pj-ed-testo code { padding: 1px 4px; border-radius: 4px; background: var(--line-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.pj-ed-testo mark { background: color-mix(in srgb, var(--pj-p3) 35%, transparent); color: inherit; border-radius: 2px; }
.pj-ed-testo a { color: var(--accent-d); }
.pj-ed-testo hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.pj-ed-testo img { max-width: 100%; border-radius: 8px; display: block; margin: 6px 0; }
.pj-ed-testo table { border-collapse: collapse; width: 100%; margin: 6px 0; }
.pj-ed-testo td, .pj-ed-testo th { border: 1px solid var(--line); padding: 4px 8px; min-width: 40px; vertical-align: top; }
.pj-ed-testo .pj-citato { padding: 0 3px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-d); }
.pj-pop.pj-pop-stile, .pj-pop.pj-pop-inserisci, .pj-pop.pj-pop-menzione { width: 230px; padding: 8px; gap: 2px; }
/* Il selettore delle emoji (15/10, come Asana): i gruppi in alto, la ricerca, la griglia che scorre. */
.pj-pop.pj-pop-emoji { width: 340px; padding: 8px 10px 10px; gap: 8px; }
.pj-emo-tab { display: flex; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.pj-emo-tab button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none;
  font-size: 17px; line-height: 1; color: var(--muted); cursor: pointer; opacity: .6; }
.pj-emo-tab button .pj-ic { width: 16px; height: 16px; }
.pj-emo-tab button:hover, .pj-emo-tab button.on { opacity: 1; background: var(--line-2); }
.pj-emo-tab button.on { box-shadow: inset 0 -2px 0 var(--accent); }
.pj-emo-corpo { max-height: 260px; overflow-y: auto; }
.pj-emo-sez > .pj-etich { display: block; margin: 8px 2px 4px; }
.pj-emo-griglia { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.pj-emo-e { height: 34px; padding: 0; border: 0; border-radius: 6px; background: none; font-size: 21px; line-height: 1; cursor: pointer; }
.pj-emo-e:hover, .pj-emo-e:focus-visible { background: var(--line-2); outline: none; }
.pj-cmt-emoji { align-self: flex-end; height: 32px; }
.pj-bozza { margin-top: 4px; font-size: 12px; }                 /* la bozza del commento (15/10) */
.pj-bozza[hidden] { display: none; }
.pj-bozza .pj-link { font-size: 12px; color: var(--muted); text-decoration: underline; }
.pj-cmt-emoji .pj-ic { width: 18px; height: 18px; }
.pj-pop-inserisci .pj-pop-voce > span[aria-hidden] { width: 22px; color: var(--muted); font-size: 12px; text-align: center; }
.pj-ed-v-h1 { font-size: 16px; font-weight: var(--w-forte); } .pj-ed-v-h2 { font-size: 14.5px; font-weight: var(--w-forte); }
.pj-ed-v-h3 { font-weight: var(--w-forte); } .pj-ed-v-pre { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

/* Suggerimenti dei tag (03/10): solo mentre si scrive, sotto il campo. */
.pj-tag-scrivi { position: relative; flex: 1; min-width: 120px; display: inline-flex; }
.pj-tag-scrivi .pj-tag-input { width: 100%; }
.pj-tag-sugg { position: absolute; top: calc(100% + 4px); left: 0; z-index: 9; min-width: 220px; max-width: 320px; padding: 4px;
  display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.pj-sugg-voce { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pj-sugg-voce.su, .pj-sugg-voce:hover { background: var(--line-2); }
.pj-pop.pj-pop-tag { width: 270px; padding: 8px; gap: 2px; }
.pj-pop-tag .pj-pop-sez { padding: 4px 8px; }
.pj-tavolozza-menu { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pj-tavolozza-menu .pj-tinta-tag { width: 26px; height: 26px; }
.pj-pop-voce[disabled] { opacity: .45; cursor: not-allowed; }

/* Il menu ⋯ del task (03/10): due interruttori, e l'etichetta degli allegati col suo +. */
.pj-pop.pj-pop-task { width: 260px; padding: 8px; gap: 2px; }
.pj-pop-task .pj-pop-hd { padding: 4px 8px 6px; font-size: 12.5px; color: var(--muted); }
.pj-voce-switch { justify-content: space-between; cursor: pointer; }
.pj-voce-switch > span:first-child { display: flex; flex-direction: column; gap: 1px; }
.pj-voce-switch .pj-meta { white-space: normal; font-size: 11px; }
.pj-etich-riga { display: flex; align-items: center; gap: 6px; }
.pj-piu { width: 22px; height: 22px; padding: 0; font-size: 14px; line-height: 1; }
.pj-zona-file[hidden] { display: none; }

/* La stellina dei preferiti accanto al nome del progetto (03/10). */
.pj-stella { border: 0; background: none; padding: 2px 4px; line-height: 1; color: var(--muted-2); cursor: pointer; border-radius: 6px; }
.pj-stella:hover { color: var(--text); background: var(--line-2); }
.pj-stella.on { color: var(--pj-p3); }
.pj-preferiti { display: flex; flex-direction: column; }

/* Le icone del Task manager (03/10): a linea, nel colore del testo, una misura per contesto. */
.pj-ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; vertical-align: -3px; }
.pj-ic.piena { fill: currentColor; }
.pj-meta .pj-ic, .pj-chip .pj-ic { width: 12px; height: 12px; vertical-align: -2px; margin-right: 2px; }
.pj-spunta .pj-ic { width: 11px; height: 11px; stroke-width: 3; }
.pj-freccia .pj-ic { width: 14px; height: 14px; }
.pj-maniglia .pj-ic { width: 14px; height: 14px; vertical-align: middle; }
.pj-icona .pj-ic { width: 16px; height: 16px; color: #fff; }
.pj-stella .pj-ic { width: 18px; height: 18px; vertical-align: middle; }
.pj-mini .pj-ic { width: 15px; height: 15px; vertical-align: middle; }
.pj-nav .pj-ic { width: 15px; height: 15px; color: var(--muted); }
.pj-pill .pj-ic { width: 14px; height: 14px; }
.pj-ed-b .pj-ic { width: 16px; height: 16px; vertical-align: middle; }
.pj-ed-stile .pj-ic { width: 12px; height: 12px; }
.pj-giu .pj-ic { width: 14px; height: 14px; vertical-align: middle; }
.pj-pop-voce .pj-ic, .pj-tendina .pj-ic { width: 15px; height: 15px; color: var(--muted); }
.pj-pop-voce.rossa .pj-ic, .pj-tendina .rossa .pj-ic { color: var(--crit); }
.pj-pop-voce > span[aria-hidden] .pj-ic { color: var(--accent); }
.pj-fascia-testo { display: inline-flex; align-items: center; gap: 6px; }
.pj-cita-voce > .pj-ic { width: 13px; height: 13px; }
.pj-avvisi .pj-ic { width: 13px; height: 13px; margin-right: 4px; }
.pj-file-menu .pj-ic { width: 15px; height: 15px; vertical-align: middle; }
/* Il bordo da trascinare a sinistra di ogni colonna della lista (03/10). */
.pj-lhead .pj-cella { position: relative; }
.pj-ridim { position: absolute; left: -6px; top: -4px; bottom: -4px; width: 9px; cursor: col-resize; z-index: 2; }
.pj-ridim::after { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px; background: transparent; }
.pj-lhead:hover .pj-ridim::after { background: var(--line); }
.pj-ridim:hover::after, .pj-ridimensiona .pj-ridim::after { background: var(--accent); width: 2px; }
body.pj-ridimensiona { cursor: col-resize; user-select: none; }
/* Il menu della sezione accanto al nome; il nome largo quanto il suo testo. */
.pj-sez-nome { field-sizing: content; min-width: 4ch; max-width: 60ch; }
.pj-sez-hd .pj-sez-menu, .pj-col-hd .pj-sez-menu { margin-left: 0; opacity: .55; }
.pj-sez-hd:hover .pj-sez-menu, .pj-col-hd:hover .pj-sez-menu, .pj-sez-menu[data-pop-aperto] { opacity: 1; }
.pj-pop.pj-pop-sezione { width: 220px; padding: 8px; gap: 2px; }

/* Un task trascinato dentro un altro, o sui sottotask del pannello: lì diventa un sottotask (03/10). */
.pj-riga-task.pj-dentro { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.pj-zona-sub { border-radius: 10px; }
/* Le sezioni si trascinano dalla maniglia (08/10): in lista a sinistra della freccia, allineata a
   quella delle righe; trascinata, la sezione si chiude sulla sua intestazione, in una riga corta
   tratteggiata, e la linea fra le sezioni dice dove cade. In bacheca la linea è verticale. */
.pj-sez { position: relative; }
.pj-sez-hd.spostabile { padding-left: 22px; }
.pj-sez-hd .pj-maniglia { left: 4px; }
.pj-sez-hd:hover .pj-maniglia, .pj-col-hd:hover .pj-maniglia { opacity: 1; color: var(--muted); }
.pj-col-hd .pj-maniglia { position: static; transform: none; flex: none; }
.pj-sez.trascinata > :not(.pj-sez-hd) { display: none; }
.pj-sez.trascinata > .pj-sez-hd { width: fit-content; max-width: 100%; padding-right: 14px; border: 1px dashed var(--accent);
  border-radius: 8px; background: var(--accent-soft); opacity: .7; }
.pj-col.trascinata { opacity: .45; }
.pj-col.trascinata > :not(.pj-col-hd) { display: none; }
.pj-sez.pj-ins-su::before { top: -6px; }
.pj-sez.pj-ins-giu::after { bottom: -6px; }
.pj-col { position: relative; }
.pj-ins-sx::before, .pj-ins-dx::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; border-radius: 2px;
  background: var(--accent); box-shadow: 0 0 6px var(--accent); pointer-events: none; z-index: 2; }
.pj-ins-sx::before { left: -8px; }
.pj-ins-dx::after { right: -8px; }
/* Quello che segue il mouse: una riga corta col titolo (vive in <body>, fuori dalla vista). */
.pj-sez-fantasma { position: fixed; top: -200px; left: 0; display: inline-flex; align-items: center; gap: 8px; max-width: 320px;
  padding: 7px 14px 7px 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--card); color: var(--text);
  font-size: 14px; box-shadow: var(--shadow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-sez-fantasma .pj-ic { width: 14px; height: 14px; color: var(--muted); flex: none; }
/* I sottotask del pannello si riordinano trascinandoli (08/10): la maniglia a sinistra come nella
   lista, e la stessa linea fra le righe. */
.pj-sub { position: relative; }
.pj-sub[draggable="true"] { padding-left: 18px; }
.pj-sub .pj-maniglia { left: 0; }
.pj-sub:hover .pj-maniglia { opacity: 1; color: var(--muted); }
.pj-sub.trascinato { opacity: .45; }
.pj-zona-sub.pj-dentro { outline: 2px dashed var(--accent); outline-offset: 4px; background: var(--accent-soft); }
.pj-zona-sub.pj-dentro .pj-etich::after { content: " · rilascia qui per farlo diventare un sottotask"; color: var(--accent-d);
  text-transform: none; letter-spacing: 0; font-weight: var(--w-normale); }

/* L'intestazione del progetto in due gruppi (03/10, Emiliano: «a volte l'header esce dal viewport
   lateralmente»): a sinistra il progetto, col nome che si accorcia con i puntini invece di spingere;
   a destra chi ci lavora e i pulsanti, che vanno a capo sotto se il posto non basta. */
.pj-testa-1 { flex-wrap: wrap; row-gap: 8px; }
.pj-testa-sx { display: flex; align-items: center; gap: 8px; flex: 1 1 300px; min-width: 0; }
.pj-testa-sx .pj-titolo, .pj-testa-1 > .pj-titolo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-testa-sx > :not(.pj-titolo) { flex: none; }
/* L'avanzamento cede posto per primo: il nome del progetto conta di più della barra. */
.pj-testa-sx .pj-prog { flex: 0 1000 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.pj-testa-sx .pj-barra { width: 70px; flex: none; }
.pj-testa-dx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 820px) { .pj-testa-sx .pj-prog { display: none; } }

/* la finestra (nuovo progetto, membri) */
.pj-anteprima { background: var(--line-2); border-radius: 9px; padding: 10px 12px; font-size: 13px; max-height: 38vh; overflow-y: auto; }
.pj-ante-sez { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pj-avvisi { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; color: var(--warn); font-size: 12.5px; }
.pj-a-capo { white-space: normal; }
.pj-campione { display: block; font-size: 11.5px; color: var(--muted); }
/* `hidden` deve vincere sulle classi che danno un display (`.pj-meta` è inline-flex): senza,
   nella finestra si leggevano insieme le note di tutte e tre le strade. */
.pj-finestra [hidden] { display: none !important; }
.pj-finestra { max-width: 480px; }
.pj-membri { display: flex; flex-direction: column; gap: var(--sp-2); max-height: 50vh; overflow-y: auto; }
.pj-membro { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0; font-size: var(--t-md); }

@media (max-width: 820px) {
  .pj { flex-direction: column; height: auto; min-height: 0; }
  .pj-side { width: auto; border-right: 0; border-bottom: 1px solid var(--line); max-height: 240px; }
  .pj-main { min-height: 520px; }
  .pj-lista { min-width: 0; }
  .pj-lhead { display: none; }
  .pj-riga-task { grid-template-columns: 28px minmax(0, 1fr) 56px; }
  .pj-lista .pj-lhead, .pj-lista .pj-riga-task { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .pj-lista .pj-cella:not(.c-due) { display: none; }
  .pj-riga-task .pj-chi { display: none; }
  .pj-pannello { position: fixed; top: 0; width: 100%; z-index: 35; }
}

/* ============================================================================
   La foto del profilo (01/10/2026): l'avatar in alto a destra e la finestra per sceglierla.
   ============================================================================ */
.avatar:has(.avatar-foto) { padding: 0; overflow: hidden; }
.avatar .avatar-foto { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.foto-box { max-width: 460px; }
.foto-riga { display: flex; gap: var(--sp-6); align-items: center; margin-bottom: var(--sp-5); }
.foto-grande { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; background: var(--line-2); }
.foto-grande.vuota { display: grid; place-items: center; font-size: 24px; font-weight: var(--w-forte);
                     color: var(--on-accent); background: var(--accent); }

/* ============================================================================
   Il padding dei riquadri (02/10/2026, Emiliano: «nei box come questi metti sempre del padding,
   così i testi non sono attaccati al bordo»). `.panel` di suo non ne ha, e va bene così quando
   dentro c'è una tabella che deve andare da bordo a bordo o un contenitore che lo mette da sé
   (`.pad`, l'intestazione `h2`). Ma una trentina di riquadri cominciavano direttamente con del
   testo — la legenda dei ruoli, «Invita una persona», gli avvisi di SEO e Messaggi — e quel testo
   toccava il bordo. La regola sta qui una volta sola, invece di una classe in trenta posti: un
   riquadro che COMINCIA con testo prende il padding, anche quelli che nasceranno domani.
   ============================================================================ */
.panel:not(.pad):has(> :is(h3, h4, p, b, strong, span, label, button, .ruoli, .muted):first-child) {
  padding: var(--sp-5) var(--sp-6);
}
/* Il titolo in cima porta già il suo margine: col padding sopra raddoppiava lo spazio. */
.panel:not(.pad) > :is(h3, h4):first-child { margin-top: 0; }

/* ============================================================================
   COMPONENTI NATI CON COMPETITOR ANALYSIS (02/10/2026), buoni per tutti.

   Omar, mentre la pagina prendeva forma: «è corretto appoggiarsi ai componenti esistenti, ma
   se applico una miglioria va nel brand kit per tutti, così resta coerente, non una pagina
   diversa dall'altra». Quindi niente classi `pricing-*`: quello che serviva a quella pagina e
   servirà alla prossima sta qui, con un nome che dice a cosa serve e non in quale modulo è
   nato.
   ============================================================================ */

/* **La barra di un mercato**: dove si addensano i valori degli altri e dove stiamo noi. Il
   fondo è la densità (dieci celle, più scura dove ce ne sono di più), i segni sono i singoli,
   la riga verticale siamo noi. Nata per i prezzi dei concorrenti; serve uguale a una
   distribuzione di CPC, di posizioni o di tempi di consegna. Prima erano pallini affiancati,
   che a diciannove elementi diventano illeggibili. */
.barra-mercato { position: relative; height: 24px; width: 100%; min-width: 220px; }
.barra-mercato .fondo { position: absolute; inset: 6px 0 9px; display: flex; gap: 1px;
                        border-radius: 3px; overflow: hidden; }
.barra-mercato .fondo i { flex: 1; background: var(--accent); }
/* I singoli concorrenti e noi devono **saltare all'occhio sul fondo verde**: due grigi diversi
   su una densità verde non si distinguono, e la barra diventa decorativa (Omar, 02/10/2026:
   «rendi più evidenti le barrette, si fa fatica a identificarli»). I concorrenti sono trattini
   gialli col loro contorno scuro, noi una riga nera a tutta altezza con l'etichetta. */
.barra-mercato .seg-c { position: absolute; top: 3px; width: 3px; height: 13px; margin-left: -1.5px;
                        border-radius: 1px; background: var(--warn); box-shadow: 0 0 0 1px rgba(0,0,0,.45); }
.barra-mercato .noi { position: absolute; top: 1px; width: 3px; height: 18px; margin-left: -1.5px;
                      background: var(--text); box-shadow: 0 0 0 1.5px var(--card); border-radius: 1px; }
.barra-mercato .noi::after { content: "noi"; position: absolute; top: -10px; left: 50%;
                             transform: translateX(-50%); font-size: 9px; font-weight: var(--w-forte);
                             color: var(--text); letter-spacing: .2px; }
.barra-mercato .estremi { position: absolute; left: 0; right: 0; bottom: -3px; display: flex;
                          justify-content: space-between; font-size: 9px; color: var(--muted-2);
                          font-variant-numeric: tabular-nums; }

/* **Un valore col semaforo**: il numero che si guarda per primo, colorato dalle soglie che
   decide chi lo calcola — non dal CSS, che non sa cosa sia un margine. */
.v-num { font-variant-numeric: tabular-nums; font-weight: var(--w-medio); }
.v-num.warn { color: var(--warn); font-weight: var(--w-forte); }
.v-num.bad  { color: var(--crit); font-weight: var(--w-forte); }
.v-num.good { color: var(--good); }

/* **Codice e nome** sulla stessa riga: lo SKU, il numero di una card, il codice di un canale,
   davanti al nome per esteso. Il nome va a capo al massimo due volte e poi si taglia: tre
   righe in una cella sfilacciano tutta la tabella (Omar, 30/09/2026, «prodotto in 4 righe non
   è bello, massimo 2»). */
.cod-nome { display: flex; gap: var(--sp-3); align-items: baseline; }
.cod-nome .sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-xs);
                 color: var(--muted); flex: none; }
.cod-nome .nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                  overflow: hidden; min-width: 0; }

/* **Una riga sotto un'altra** dentro la stessa cella: il dominio sotto il prezzo, la data sotto
   il valore. Serve così spesso che scriverla ogni volta a mano è come non averla. */
.sotto { display: block; line-height: 1.2; }

/* ---------------------------------------------------------------- TABELLA FITTA
   Una tabella dove le colonne numeriche devono stringersi sul contenuto e una colonna sola
   (il nome) prende quello che resta. `width: 1%` con `white-space: nowrap` è il modo in cui una
   tabella HTML dice «prendi solo quello che ti serve»; dare larghezze in pixel a sei colonne su
   dieci fa ricalcolare tutto al browser e il nome finisce schiacciato in due caratteri per riga.
   Si dichiara sulla tabella; le colonne che devono restare larghe prendono una classe. */
.tab-fitta { width: auto; min-width: 100%; }
.tab-fitta td:not(.lg), .tab-fitta th:not(.lg) { width: 1%; white-space: nowrap; }
.tab-fitta td.lg, .tab-fitta th.lg { white-space: normal; }
.tab-fitta td.lg-nome, .tab-fitta th.lg-nome { white-space: normal; min-width: 340px; max-width: 520px; }
/* La colonna che contiene la barra prende lo spazio che avanza invece di lasciarlo bianco:
   è l'unica che si legge meglio più è larga. */
.tab-fitta td.lg-barra, .tab-fitta th.lg-barra { white-space: normal; width: auto; min-width: 240px; }
/* Un campo che contiene un prezzo è largo come un prezzo. Lasciato alla larghezza di difetto
   del kit prendeva più spazio della colonna del nome, che è quella che serve leggere. */
.tab-fitta .inp.prezzo { width: 78px; text-align: right; }
/* ---------------------------------------------------------------- FILTRI E AZIONI SOPRA UNA TABELLA
   Emiliano, 14/10/2026, usando Prezzi e posizionamento: «organizziamo meglio questa sezione,
   differenziando i filtri dalle azioni». Erano tutti bottoni in fila, e «Esporta CSV» stava fra i
   filtri. Due oggetti diversi, due forme diverse:
   - `.barra-filtri`: cosa si VEDE. Una riga nuda, ogni filtro col suo nome sopra (`.filtro-nome`);
   - `.barra-azioni`: cosa si FA. Una striscia col fondo, divisa in gruppi (`.azioni-gruppo`) col
     nome sopra (`.azioni-nome`) e i comandi sotto (`.azioni-comandi`); `.a-destra` spinge un gruppo in fondo.
   Il nome del gruppo dice su cosa agiscono i comandi (i prodotti scelti, tutti i prezzi nuovi) senza
   doverli leggere uno per uno. `.azioni-conferma` è la riga di conferma dentro la striscia: vuota
   non c'è. */
.barra-filtri { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-5) var(--sp-7); }
.barra-filtri .filtro { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.filtro-nome, .azioni-nome { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap; }
.azioni-nome b { color: var(--text); font-weight: var(--w-forte, 700); }
.barra-azioni { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: var(--sp-5);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-5) var(--sp-6); }
.azioni-gruppo { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0;
  padding: 0 var(--sp-7); border-left: 1px solid var(--line); }
.azioni-gruppo:first-child { padding-left: 0; border-left: 0; }
.azioni-gruppo.a-destra { margin-left: auto; padding-right: 0; }
.azioni-comandi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.azioni-conferma { flex-basis: 100%; }
.azioni-conferma:empty { display: none; }
.azioni-conferma .note { margin: 0; }

/* La colonna delle caselle di una tabella con la scelta multipla (13/10/2026, prezzi in blocco),
   e la riga scelta: lo stesso fondo e la stessa riga d'accento a sinistra della lista dei task. */
.tab-fitta td.col-scelta, .tab-fitta th.col-scelta { width: 28px; text-align: center; padding-left: 6px; padding-right: 2px; }
.tab-fitta tr.selez > td { background: var(--accent-soft); }
.tab-fitta tr.selez > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tab-fitta td.lg-campo, .tab-fitta th.lg-campo { white-space: normal; width: 300px; max-width: 300px; }
.tab-fitta td.lg-campo .u-row { flex-wrap: nowrap; }
.tab-fitta td.lg-campo .inp { flex: 1; min-width: 0; max-width: 100%; }
/* Una tendina dentro una cella si stringe sulla colonna invece di allargarla: un `<select>`
   prende per difetto la larghezza dell'opzione più lunga, e con i nomi dei prodotti dentro
   spinge la tabella fuori dallo schermo. */
.tab-fitta td.lg-campo select.inp { width: 100%; min-width: 0; }
/* I comandi di riga stanno sulla loro riga, sempre: andando a capo raddoppiano l'altezza di
   ogni riga della tabella e l'elenco diventa lungo il doppio per niente. */
.tab-fitta td.lg-azioni, .tab-fitta th.lg-azioni { white-space: nowrap; }
.tab-fitta td.lg-azioni > .u-row { white-space: normal; }
/* **Un nome che va a capo quando la pagina si stringe** (17/10/2026, «Da abbinare»): come lo
   chiama il negozio, che arriva intero dal crawler e può essere lungo. Senza questa classe la
   colonna restava su una riga e spingeva la tabella fuori dallo schermo. Al massimo due righe,
   come i nomi dei prodotti (`.cod-nome`); il titolo intero resta nel suggerimento della cella. */
.tab-fitta td.lg-titolo, .tab-fitta th.lg-titolo { white-space: normal; width: auto; min-width: 160px; }
.due-righe { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* La tendina dei nostri prodotti dentro una cella (17/10/2026): è la `.cercabox.tendina` di
   Contatti, ma **fissa sullo schermo**. Una tabella larga scorre dentro `.tbl-wrap`, che taglia
   tutto quello che esce dai suoi bordi: appoggiata sotto il campo, la tendina si vedeva per metà.
   Dove sta e quanto è larga lo scrive pricing.js, misurando il campo. */
.cercabox.tendina.fissa { position: fixed; top: auto; right: auto; max-height: 50vh; }
.cercabox .esito .cod { flex: 0 0 auto; min-width: 3.5em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-xs); color: var(--muted); }

/* **Intestazioni girate**: in una matrice con venti colonne il nome non ci sta e troncarlo
   produce colonne che si chiamano uguale (herbalboutiquefr, herbalboutiquefrance,
   herbalboutiqueonline). Girate di novanta gradi si leggono per intero e la colonna resta
   stretta. Si allineano in basso, attaccate ai dati: allineate in alto sembrano appese. */
/* In verticale `text-align` lavora sull'asse del testo, cioè in alto e in basso: per centrare
   l'etichetta **sulla colonna** bisogna centrare il blocco, e il blocco è quello che gira. Da
   qui la cella dritta e centrata, con dentro un elemento che ruota. Con la rotazione sulla
   cella l'etichetta restava appoggiata a un lato e non si capiva a quali numeri si riferisse. */
.th-girata { height: 132px; padding: var(--sp-3) var(--sp-2); text-align: center;
             vertical-align: bottom; }
.th-girata > * { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
                 display: inline-block; font-size: var(--t-xs); }
/* In una matrice la colonna è stretta quanto la sua intestazione: allineare i numeri a destra
   li stacca dalla colonna a cui appartengono. Centrati — numeri **e** intestazione — stanno uno
   sotto l'altra e la corrispondenza si vede senza contare le colonne. */
.tab-griglia td.num, .tab-griglia th.num { text-align: center; }
.tab-griglia th.th-girata { text-align: center; }
.tab-griglia .inp.prezzo { text-align: center; }
/* Niente bande alternate sulle colonne: provate il 02/10/2026 e scartate da Omar, perché con
   l'intestazione centrata sulla sua colonna la corrispondenza si vede già e le bande aggiungono
   solo rumore. Resta la tinta delle nostre colonne, che distingue noi da loro. */
.th-girata.muta > * { color: var(--muted-2); }

/* ---------------------------------------------------------------- UN MODULO DA COMPILARE
   `.field` serve a **leggere** un valore: etichetta a sinistra, valore a destra, sulla stessa
   riga. Un modulo di configurazione è un'altra cosa — si scrive, e ogni voce ha una
   spiegazione sotto — e infilarlo in `.field` mette etichetta, comando e nota uno sopra
   l'altro nello stesso posto (03/10/2026: la pagina di Competitor Analysis si leggeva a strati
   sovrapposti). Qui l'etichetta sta sopra, il comando sotto, la spiegazione sotto ancora, e
   ogni voce prende la sua riga: una configurazione si legge in colonna, non a griglia.
   ============================================================================ */
.form-colonna { display: flex; flex-direction: column; gap: var(--sp-7); max-width: 760px; }
.form-campo { display: flex; flex-direction: column; gap: var(--sp-3); }
.form-campo > label { font-weight: var(--w-medio); color: var(--text); font-size: var(--t-md); }
.form-campo > .nota { color: var(--muted); font-size: var(--t-sm); max-width: 72ch; }
.form-campo .inp { max-width: 100%; }
.form-campo .inp.xl { width: 100%; }
/* L'interruttore con la sua etichetta accanto, non sotto. */
.form-campo .acceso { display: flex; gap: var(--sp-4); align-items: center; }

/* Una riga **spenta**: c'è, si legge, ma non è fra quelle che si guardano. Serve quando una
   tabella mostra insieme ciò che si segue e ciò che si è messo da parte, e l'alternativa — due
   tabelle separate — costringerebbe a saltare avanti e indietro. */
tr.spenta td { background: var(--line-2); color: var(--muted); font-style: italic; }
tr.spenta .sku, tr.spenta .nome { color: var(--muted); }

/* Un comando minuto dentro una cella: la matita che corregge un valore senza occupare spazio
   quando non serve. */
.btn-nudo { border: 0; background: none; cursor: pointer; color: var(--muted-2); padding: 0 var(--sp-2);
            font-size: var(--t-sm); line-height: 1; }
.btn-nudo:hover { color: var(--accent-d); }

/* **Una cella da riempire**: il buco che si può chiudere lì dove lo si vede, senza cambiare
   pagina. Il trattino resta un trattino, ma invita. */
.cella-vuota { color: var(--muted-2); }
.cella-vuota[onclick] { cursor: pointer; }
.cella-vuota[onclick]:hover { background: var(--accent-soft); color: var(--accent-d); }
.cella-incolla { display: flex; gap: var(--sp-2); align-items: center; min-width: 220px; }
.cella-incolla .inp { flex: 1; min-width: 0; }

/* La colonna «nostra» dentro una tabella di confronto: una tinta sola, tenue, che la segue
   anche quando si scorre in orizzontale. */
.col-nostra { background: var(--accent-soft); }
.val-min { color: var(--good); font-weight: var(--w-forte); }
.val-max { color: var(--muted-2); }

/* Un comando che toglie è rosso, uno che rimette è verde: il colore dice cosa succede prima
   di leggere l'etichetta, ed è il motivo per cui `escludi` era rosso nel disegno approvato. */
.btn.green { background: var(--good); color: #fff !important; }
.btn.green:hover { filter: brightness(.94); }
.btn.x-via { background: var(--crit); color: #fff !important; font-weight: var(--w-forte);
             padding-left: var(--sp-4); padding-right: var(--sp-4); }
.btn.x-via:hover { filter: brightness(.92); }

/* Il numero d'ordine in un elenco classificato. */
.rank { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px;
        background: var(--line-2); color: var(--muted); font-size: var(--t-xs); font-weight: var(--w-medio); }

/* `.u-row` dà `display:flex`, che vince su `hidden`: senza questa riga i campi che si aprono
   dentro una riga restano aperti su tutte. Stesso inciampo del Task manager, e la prova che una
   regola imparata in un modulo va riportata anche negli altri. */
.u-row[hidden] { display: none !important; }

/* Il comando che riporta le colonne alla larghezza automatica: compare solo quando una tabella
   ha larghezze salvate, cioè solo quando serve davvero. */
.col-reset { display: block; margin: var(--sp-4) 18px 0; }

/* ===================== Il grafico a linee (dal 2026-10-05)
   La legenda del grafico del kit (`graficoLinee` nella shell). Stava nel blocco <style> di
   index.html col nome `.adslegenda`, cioè apparteneva a una vista sola: il nome vecchio
   resta qui accanto al nuovo perché ads.js lo scrive ancora, ma la regola è una sola e non
   si possono più scostare. Dice sempre che ogni linea ha la sua scala: senza quella riga un
   grafico a due metriche fa leggere «più alto» come «più grande», che è falso. */
.g-legenda, .adslegenda { display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) 18px; font-size: var(--t-xs); color: var(--muted); margin-top: var(--sp-3); }
.g-legenda svg, .adslegenda svg { vertical-align: middle; margin-right: var(--sp-2); }

/* ===================== Il gruppo che si apre (dal 2026-10-07)
   Una riga che tiene insieme più problemi deve poter mostrare quali: un gruppo che dice «21
   righe» senza farle vedere è un numero di cui fidarsi al buio, e nessuno apre una card su
   qualcosa che non ha potuto guardare. Sta nel kit perché la stessa cosa serve ovunque si
   raggruppi: interventi, opportunità, e quello che verrà. */
.gruppo { margin-top: var(--sp-3); }
.gruppo > summary { cursor: pointer; font-size: var(--t-sm); color: var(--accent);
  list-style: none; }
.gruppo > summary::-webkit-details-marker { display: none; }
.gruppo > summary::before { content: "▸ "; }
.gruppo[open] > summary::before { content: "▾ "; }
.gruppo ul { margin: var(--sp-3) 0 0; padding-left: var(--sp-5); font-size: var(--t-sm); }
.gruppo li { margin-bottom: var(--sp-3); line-height: 1.45; }

/* ============================================================================
   PIM (11/10/2026, cantiere pim): la miniatura di un prodotto e il rientro di un albero.
   Le foto dei prodotti sono su fondo bianco e di proporzioni diverse: si contengono, non si
   ritagliano, o un barattolo alto perde il tappo.
   ============================================================================ */
.miniatura { width: 40px; height: 40px; object-fit: contain; flex: none; display: block; }
.miniatura.grande { width: 72px; height: 72px; }
.u-rientro-1 { padding-left: var(--sp-7); }
.u-rientro-2 { padding-left: calc(var(--sp-7) * 2); }
.u-rientro-3 { padding-left: calc(var(--sp-7) * 3); }
/* Un campo di testo corto in una scheda (una meta description): non serve l'altezza di un articolo. */
.field.esteso textarea.inp.basso { min-height: 0; }
/* Schede di altezze diverse in una griglia: ognuna alta quanto il suo contenuto. */
.cards.su { align-items: start; }

/* La paginazione di una lista lunga (12/10/2026, Emiliano: «è attaccata alla tabella, facciamola
   più grande e centrata»): staccata da quello che ha sopra, al centro, pulsanti a grandezza normale.
   Nata per il PIM; chi ha ancora il vecchio `.pager` può passare a questa. */
.paginazione { display: flex; justify-content: center; align-items: center; flex-wrap: wrap;
  gap: var(--sp-5); margin-top: var(--sp-7); }
.paginazione .btn { min-width: 150px; justify-content: center; }
.paginazione-conto { min-width: 120px; text-align: center; color: var(--muted); font-size: var(--t-md); }

/* Le linguette dei prodotti aperti, come quelle di un browser (Emiliano, 11/10/2026): la prima è
   l'elenco e non si chiude, le altre sono prodotti, ognuna con la sua ×. La linguetta accesa
   ha il colore di quello che le sta sotto, così sembra un pezzo solo col foglio. */
.pim-schede { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-6); overflow-x: auto; scrollbar-width: thin; }
.pim-scheda { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 1 230px; min-width: 96px; height: 36px;
  padding: 0 var(--sp-2) 0 var(--sp-5); margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 10px 10px 0 0; background: color-mix(in srgb, var(--line) 55%, transparent); color: var(--muted);
  font: inherit; font-size: var(--t-sm); cursor: pointer; }
.pim-scheda:hover { background: var(--line); color: var(--text); }
.pim-scheda.on { background: var(--card); border-color: var(--line); color: var(--text); font-weight: var(--w-medio); }
.pim-scheda.prima { flex: none; min-width: 0; padding-right: var(--sp-5); }
.pim-scheda.prima.on { background: var(--bg); }
.pim-scheda-nome { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: var(--sp-3); padding: 0; border: 0;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pim-scheda-testo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pim-area [hidden] { display: none !important; }
.pim-scheda-sporca { color: var(--warn); }
.pim-scheda-x { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; border: 0; border-radius: 50%;
  background: none; color: var(--muted); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.pim-scheda-x:hover { background: var(--line-2); color: var(--text); }
.pim-scheda img { width: 20px; height: 20px; object-fit: contain; flex: none; border-radius: 4px; background: #fff; }
.pim-foglio { background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--sp-7); margin-top: calc(-1 * var(--sp-6)); }

/* La testa di una scheda prodotto: la foto, poi i dati di base su due colonne. */
.pim-testa { display: grid; grid-template-columns: 168px 1fr; gap: var(--sp-7); align-items: start; margin-bottom: var(--sp-7); }
.pim-testa h2 { margin: 0 0 var(--sp-5); }
.pim-due { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-8); }
.pim-due > div { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
@media (max-width: 900px) { .pim-testa, .pim-due { grid-template-columns: 1fr; } }

/* Le etichette dei campi tutte larghe uguali: i campi partono sulla stessa riga verticale. */
.etichette-fisse .field > b { flex: 0 0 156px; min-width: 156px; }
.etichette-fisse .inp.prezzo { width: 110px; flex: none; }
@media (max-width: 640px) { .etichette-fisse .field { flex-direction: column; gap: var(--sp-2); }
  .etichette-fisse .field > b { flex-basis: auto; } .etichette-fisse .field > span { align-self: stretch; } }

/* Le foto: grandi, intere, su bianco; si aprono in una finestra con avanti e indietro. */
.pim-foto { display: block; width: 100%; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: zoom-in; }
.pim-foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.pim-foto:hover { border-color: var(--accent); }
.pim-foto.vuota { aspect-ratio: 1; display: grid; place-items: center; cursor: default; color: var(--muted-2); background: var(--line-2); }
button.pim-foto.vuota { cursor: pointer; text-align: center; }
button.pim-foto.vuota:hover { color: var(--accent-d); }

/* La libreria media (12/10/2026, card #261). */
.pim-galleria .pim-foto-stato { left: auto; right: var(--sp-3); background: var(--card); border: 1px solid var(--line); }
.pim-galleria.piccola { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--sp-4); max-height: 46vh; overflow-y: auto; }
.pim-foto-dida { display: block; margin-top: var(--sp-3); text-align: left; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pim-galleria .pim-foto-dida .pill { position: static; }
.pim-scheda-media { cursor: pointer; }
.pim-gal-lista { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.pim-gal-riga { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); }
.pim-gal-riga .miniatura.grande { background: #fff; border-radius: 6px; }
.pim-zona { display: block; padding: var(--sp-7); border: 2px dashed var(--line); border-radius: var(--radius); text-align: center;
  cursor: pointer; color: var(--muted); background: var(--field); }
.pim-zona:hover, .pim-zona.su { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
@media (max-width: 640px) { .pim-gal-riga { flex-wrap: wrap; } }
.pim-galleria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-5); }
.pim-galleria .pim-foto { position: relative; }
.pim-galleria .pill { position: absolute; left: var(--sp-3); top: var(--sp-3); }
.modalbox.foto { width: min(1000px, 96vw); }
/* Una finestra con dentro una tabella da leggere per intero (13/10/2026: l'anteprima dei prezzi in
   blocco, un lotto del PIM): a 820px l'ultima colonna, quella che dice l'esito, usciva dal bordo. */
.modal .modalbox.tabella { max-width: min(1180px, 96vw); }
/* Poche scelte esclusive con una riga di spiegazione ciascuna: una sotto l'altra, non in fila. */
.scelte-righe { display: flex; flex-direction: column; gap: var(--sp-3); }
.scelte-righe label { display: flex; gap: var(--sp-4); align-items: flex-start; cursor: pointer; }
.scelte-righe input { margin-top: 3px; flex: none; }
.pim-foto-grande { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--sp-4); }
.pim-foto-grande img { width: 100%; max-height: 72vh; object-fit: contain; background: #fff; border-radius: var(--radius); }

/* L'editor dei testi del prodotto: la barra dell'editor dei task (`.pj-editor`), il foglio è suo. */
.pim-ed-testo { min-height: 90px; max-height: 520px; overflow-y: auto; padding: 10px 12px; outline: none; font-size: 13.5px;
  line-height: 1.55; overflow-wrap: anywhere; }
.pim-ed-testo.alto { min-height: 220px; }
.pim-ed-testo > :first-child { margin-top: 0; }
.pim-ed-testo p { margin: 0 0 8px; }
.pim-ed-testo h2 { font-size: 17px; margin: 14px 0 6px; } .pim-ed-testo h3 { font-size: 15px; margin: 12px 0 6px; }
.pim-ed-testo h4 { font-size: 13.5px; margin: 10px 0 4px; }
.pim-ed-testo ul, .pim-ed-testo ol { margin: 0 0 8px; padding-left: 22px; }
.pim-ed-testo a { color: var(--accent-d); }
.pim-ed-testo img { max-width: 100%; }
.pim-ed-testo table { border-collapse: collapse; margin: 6px 0; } .pim-ed-testo td, .pim-ed-testo th { border: 1px solid var(--line); padding: 4px 8px; }
.pim-editor textarea.inp { border: 0; border-radius: 0 0 10px 10px; min-height: 220px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.pj-ed-b.on { background: var(--accent-soft); color: var(--accent-d); }

/* La ricerca nella tassonomia di Google: un elenco di percorsi, l'ultimo pezzo in evidenza. */
.pim-google-voce { display: block; width: 100%; text-align: left; padding: var(--sp-4) var(--sp-5); border: 0; border-bottom: 1px solid var(--line-2);
  background: none; color: var(--muted); font: inherit; font-size: var(--t-sm); cursor: pointer; }
.pim-google-voce b { color: var(--text); }
.pim-google-voce:hover, .pim-google-voce:focus-visible { background: var(--accent-soft); }
.pim-google-elenco { max-height: 52vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* PIM · l'editor delle categorie (12/10/2026, card #262) */
.pim-cat-lingue { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); align-items: center; margin-top: var(--sp-3); }
.pim-cat-manca { color: var(--warn); }
.pim-cat-campi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-3); }
.pim-cat-campi label { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--t-sm); color: var(--muted); }
.pim-cat-elimina { color: var(--crit); }
.tab-fitta tr.spenta td { opacity: .55; }
@media (max-width: 760px) { .pim-cat-lingue { grid-template-columns: minmax(0, 1fr); } .pim-cat-campi { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   IL COSTRUTTORE (13/10/2026, Lead magnet). Una cosa che si costruisce a pezzi — un quiz, uno
   strumento, domani un modulo o una pagina — si guarda in tre colonne: a sinistra la scaletta
   dei pezzi, al centro il pezzo scelto, a destra l'anteprima di come la vedrà la persona.
   È la forma dei costruttori che funzionano (Typeform, Interact, Outgrow) ed è nel kit perché
   la prossima cosa da costruire a pezzi non la deve reinventare.
   Sotto i 1280px l'anteprima scende sotto; sotto i 900px tutto in colonna.
   ============================================================================ */
.costruttore { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(340px, 400px);
  gap: var(--sp-5); align-items: start; }
.costruttore > * { min-width: 0; }
@media (max-width: 1280px) { .costruttore { grid-template-columns: 220px minmax(0, 1fr); }
  .costruttore > .anteprima { grid-column: 1 / -1; position: static; } }
@media (max-width: 900px) { .costruttore { grid-template-columns: 1fr; } }

/* La scaletta: i pezzi in ordine, quello scelto col bordo pieno a sinistra (come `.elenco`). */
.scaletta { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--sp-3) 0; position: sticky; top: var(--sp-6);
  max-height: calc(100vh - 120px); overflow: auto; }
.scaletta .cap { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  font-weight: var(--w-forte); padding: var(--sp-5) var(--sp-6) var(--sp-3); display: flex; align-items: center; }
.scaletta .cap .u-push { font-weight: var(--w-normale); text-transform: none; letter-spacing: 0; }
.scaletta .voce { display: flex; align-items: center; gap: var(--sp-4); width: 100%; text-align: left; background: none;
  border: 0; padding: var(--sp-4) var(--sp-6); font: inherit; font-size: var(--t-md); color: var(--text); cursor: pointer;
  line-height: 1.35; }
.scaletta .voce:hover { background: var(--line-2); }
.scaletta .voce.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); font-weight: var(--w-medio); }
.scaletta .voce .num { flex: none; min-width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center;
  background: var(--line-2); color: var(--muted); font-size: var(--t-xs); font-weight: var(--w-forte); }
.scaletta .voce.on .num { background: var(--accent); color: var(--on-accent); }
.scaletta .voce .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scaletta .voce .txt.vuoto { color: var(--muted-2); font-style: italic; }
.scaletta .voce .segno { flex: none; font-size: var(--t-xs); }
.scaletta .voce.trascinata { opacity: .4; }
.scaletta .voce.sopra { box-shadow: inset 0 2px 0 var(--accent); }
.scaletta .agg { display: block; width: calc(100% - 2 * var(--sp-6)); margin: var(--sp-2) var(--sp-6) var(--sp-3);
  background: none; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: var(--sp-3);
  font: inherit; font-size: var(--t-sm); color: var(--accent-d); cursor: pointer; }
.scaletta .agg:hover { border-color: var(--accent); background: var(--accent-soft); }

/* L'anteprima: ferma mentre si scorre, dentro una cornice che dice «questo è il sito». */
.anteprima { position: sticky; top: var(--sp-6); }
.anteprima .telaio { background: var(--bg); border: 1px solid var(--line); border-radius: 22px; padding: var(--sp-5);
  max-height: calc(100vh - 170px); overflow: auto; }
.anteprima .telaio.telefono { max-width: 400px; margin: 0 auto; border-width: 8px; border-color: var(--line); }
.anteprima .telaio.chiaro { background: #f4f6f5; }          /* il fondo di una pagina di sito, nei due temi */
.anteprima .titolo-ant { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: var(--w-forte); }

/* Un pezzo in modifica: il riquadro centrale, con le sue sezioni. */
.pezzo { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--sp-7); }
.pezzo + .pezzo { margin-top: var(--sp-5); }
.pezzo h3 { margin: 0 0 var(--sp-5); font-size: var(--t-lg); display: flex; align-items: center; gap: var(--sp-4); }
.pezzo .sotto { font-size: var(--t-sm); color: var(--muted); margin: calc(-1 * var(--sp-4)) 0 var(--sp-5); }
.campo-grande { width: 100%; font-size: var(--t-lg) !important; font-weight: var(--w-medio); padding: var(--sp-5) var(--sp-6) !important; }
.campi-due { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-5); }
.campi-tre { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-5); }
.campo-k { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--t-sm); color: var(--muted); min-width: 0; }
.campo-k > .inp, .campo-k > select, .campo-k > textarea { width: 100%; color: var(--text); }
.monospazio { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: var(--t-sm) !important; }

/* Le righe di un elenco che si modifica sul posto (risposte, campi, fasce): maniglia, campi, comandi. */
.righe-mod { display: flex; flex-direction: column; gap: var(--sp-4); }
.riga-mod { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4); align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-4); background: var(--field); }
.riga-mod:focus-within { border-color: var(--accent); }
.riga-mod .lettera { width: 28px; height: 28px; border-radius: 8px; background: var(--line-2); color: var(--muted);
  display: grid; place-items: center; font-weight: var(--w-forte); font-size: var(--t-sm); }
.riga-mod .corpo-r { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.riga-mod .corpo-r .linea { display: flex; gap: var(--sp-3); align-items: center; }
.riga-mod .corpo-r .linea .inp { flex: 1; min-width: 0; }
.riga-mod .comandi { display: flex; gap: var(--sp-1); }
.inp.emoji { width: 52px; text-align: center; flex: none !important; padding-left: 4px; padding-right: 4px; }
.aggiungi-riga { background: none; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: var(--sp-4);
  font: inherit; font-size: var(--t-sm); color: var(--accent-d); cursor: pointer; width: 100%; }
.aggiungi-riga:hover { border-color: var(--accent); background: var(--accent-soft); }

/* I gettoni: un valore per ogni elemento di un insieme piccolo (i punti di una risposta verso ogni
   esito). Un clic aumenta, uno a destra (o Maiusc+clic) toglie. Il numero dice il peso. */
.gettoni { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.gettoni .lab { font-size: var(--t-xs); color: var(--muted); margin-right: var(--sp-2); }
.gettone { display: inline-flex; align-items: center; gap: var(--sp-2); border: 1px solid var(--line); background: var(--card);
  border-radius: 999px; padding: 2px 10px 2px 3px; font: inherit; font-size: var(--t-xs); color: var(--muted); cursor: pointer;
  user-select: none; }
.gettone b { min-width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--line-2);
  color: var(--muted); font-size: 10px; }
.gettone.su { border-color: var(--accent); color: var(--accent-d); background: var(--accent-soft); font-weight: var(--w-medio); }
.gettone.su b { background: var(--accent); color: var(--on-accent); }
.gettone:hover { border-color: var(--accent); }

/* Una barra orizzontale col suo numero: quanto pesa una voce sul totale (esiti, passi, domande). */
.barre { display: flex; flex-direction: column; gap: var(--sp-3); }
.barra-v { display: grid; grid-template-columns: minmax(120px, 34%) minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center;
  font-size: var(--t-sm); }
.barra-v .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-v .fondo { height: 10px; background: var(--line-2); border-radius: 999px; overflow: hidden; }
.barra-v .fondo i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.barra-v .fondo i.warn { background: var(--warn); } .barra-v .fondo i.crit { background: var(--crit); }
.barra-v .val { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 44px; text-align: right; }

/* L'imbuto: i passi di un percorso in fila, ognuno col suo numero e con quanto si perde fra uno e l'altro. */
.imbuto { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-4); }
.imbuto .passo { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6);
  position: relative; }
.imbuto .passo .k { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.imbuto .passo b { display: block; font-size: 24px; font-weight: 700; margin-top: var(--sp-2); font-variant-numeric: tabular-nums; }
.imbuto .passo i { display: block; font-style: normal; font-size: var(--t-sm); color: var(--muted); margin-top: var(--sp-2); }
.imbuto .passo.forte { border-color: var(--accent); background: var(--accent-soft); }
/* In una colonna stretta (il pezzo di un costruttore) tre passi da 150px non stanno in riga e il terzo
   va a capo, cioè l'imbuto smette di leggersi come un imbuto. */
.imbuto.compatto { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.imbuto.compatto .passo { padding: var(--sp-4) var(--sp-5); }
.imbuto.compatto .passo b { font-size: var(--t-xl); }

/* Il codice da incollare altrove, col suo pulsante «copia». */
.codice-copia { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field); overflow: hidden; }
.codice-copia code { flex: 1; padding: var(--sp-4) var(--sp-5); font-size: var(--t-sm); white-space: pre-wrap;
  overflow-wrap: anywhere; background: none; }
.codice-copia button { border: 0; border-left: 1px solid var(--line); background: var(--line-2); padding: 0 var(--sp-6);
  font: inherit; font-size: var(--t-sm); font-weight: var(--w-medio); color: var(--accent-d); cursor: pointer; }
.codice-copia button:hover { background: var(--accent-soft); }

/* Un elenco di controlli: errore, avviso, fatto. Icona più parola, mai il colore da solo. */
.controlli { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.controlli li { display: flex; gap: var(--sp-4); align-items: flex-start; font-size: var(--t-md); line-height: 1.45;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm); background: var(--line-2); }
.controlli li.crit { background: var(--crit-bg); } .controlli li.warn { background: var(--warn-bg); }
.controlli li.good { background: var(--good-bg); }
.controlli li > span:first-child { flex: none; }

/* La conversazione con un agente: i messaggi, e in fondo dove si scrive. */
.chat { display: flex; flex-direction: column; gap: var(--sp-5); }
.chat .msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.chat .msg .av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--line-2); display: grid;
  place-items: center; font-size: var(--t-sm); font-weight: var(--w-forte); color: var(--muted); }
.chat .msg .av img { width: 100%; height: 100%; display: block; }
.chat .msg .chi { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--sp-2); }
.chat .msg .chi b { color: var(--text); }
.chat .msg .testo { white-space: pre-wrap; line-height: 1.55; font-size: var(--t-md); }
.chat .msg.agente .fumetto { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 4px var(--radius) var(--radius) var(--radius);
  padding: var(--sp-5) var(--sp-6); }
.chat .msg.utente .fumetto { background: var(--card); border: 1px solid var(--line); border-radius: 4px var(--radius) var(--radius) var(--radius);
  padding: var(--sp-5) var(--sp-6); }
.chat .msg.sistema .fumetto { background: var(--warn-bg); border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-5); font-size: var(--t-sm); }
.chat .lavora { display: flex; gap: var(--sp-4); align-items: center; color: var(--muted); font-size: var(--t-sm); }
.chat .lavora .giro { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
  animation: giro .8s linear infinite; flex: none; }
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat .lavora .giro { animation: none; } }
.chat-scrivi { display: flex; flex-direction: column; gap: var(--sp-4); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow); }
.chat-scrivi textarea { width: 100%; min-height: 70px; resize: vertical; border: 0; background: none; font: inherit;
  font-size: var(--t-md); color: var(--text); outline: none; }
.suggerimenti { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.suggerimenti button { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: var(--sp-3) var(--sp-5);
  font: inherit; font-size: var(--t-sm); color: var(--text); cursor: pointer; }
.suggerimenti button:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Il riquadro che apre una pagina di creazione: una frase, e si parte. */
.crea-grande { background: linear-gradient(135deg, var(--accent-soft), var(--card) 70%); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-7); box-shadow: var(--shadow); }
.crea-grande h2 { font-size: var(--t-xl); margin: 0 0 var(--sp-3); text-transform: none; letter-spacing: -.2px; color: var(--text);
  padding: 0; border: 0; }
.crea-grande textarea { width: 100%; min-height: 84px; font: inherit; font-size: var(--t-lg); line-height: 1.45; padding: var(--sp-5) var(--sp-6);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--field); color: var(--text); resize: vertical; }
.crea-grande textarea:focus { outline: none; border-color: var(--accent); }

/* La testata di un oggetto che si modifica: nome, stato, comandi; resta in vista scorrendo. */
.testata-mod { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; position: sticky; top: 0; z-index: 5;
  background: var(--bg); padding: var(--sp-4) 0 var(--sp-5); }
.testata-mod .nome-mod { font-size: var(--t-xl); font-weight: var(--w-forte); border: 1px solid transparent; background: none;
  color: var(--text); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); min-width: 200px; max-width: 520px; font-family: inherit; }
.testata-mod .nome-mod:hover, .testata-mod .nome-mod:focus { border-color: var(--line); background: var(--field); outline: none; }
.stato-salva { font-size: var(--t-sm); color: var(--muted); }

/* Le schede del risultato di una ricerca: cosa fa bene, cosa manca. */
.trovati { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.trovati .t { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-5); background: var(--card); font-size: var(--t-sm); }
.trovati .t a { font-weight: var(--w-forte); color: var(--accent-d); }
.trovati .t .bene::before { content: "＋ "; color: var(--good); font-weight: 700; }
.trovati .t .manca::before { content: "－ "; color: var(--crit); font-weight: 700; }
.trovati .t div { margin-top: var(--sp-3); line-height: 1.4; }

/* Le scelte grandi (14/10/2026, costruttore delle automazioni): poche opzioni che vanno lette prima di
   scegliere (il fatto che fa partire un'email, una ricetta da cui partire). Una tendina le nasconderebbe,
   un `.seg` non ha posto per la riga che spiega. Pulsanti veri, con `aria-pressed`. */
.scelte-grandi { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-4); }
.scelta-g { display: flex; flex-direction: column; gap: var(--sp-2); text-align: left; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-5); font: inherit; color: var(--text);
  cursor: pointer; min-width: 0; }
.scelta-g:hover { border-color: var(--accent); }
.scelta-g[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.scelta-g .tit { font-weight: var(--w-forte); font-size: var(--t-md); display: flex; gap: var(--sp-3); align-items: center; }
.scelta-g .tit .u-push { font-weight: var(--w-normale); color: var(--muted); font-size: var(--t-xs); }
.scelta-g .desc { font-size: var(--t-sm); color: var(--muted); line-height: 1.4; }
.scelta-g code { font-size: var(--t-xs); color: var(--muted-2); }
.scelta-g:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Un'email vera dentro l'anteprima: l'HTML del template, in un iframe senza bordo. */
.telaio .email-ant { display: block; width: 100%; height: 640px; border: 0; background: #fff; border-radius: var(--radius-sm); }

/* Le larghezze dei campi corti dentro una riga modificabile (13/10/2026): un numero di due cifre,
   un valore con decimali. Senza, ogni vista scriveva il suo `max-width` a mano. */
.inp.stretto { width: 90px; max-width: 90px; flex: none !important; }
.inp.medio { width: 140px; max-width: 140px; flex: none !important; }
.u-flex1 { flex: 1; min-width: 0; }
.avatar-sm { width: 28px; height: 28px; border-radius: 50%; flex: none; display: block; }
/* Un comando che toglie, minuto: la ✕ e il cestino in fondo a una riga. */
.btn-nudo.via { color: var(--crit); }
.btn-nudo.via:disabled { color: var(--muted-2); cursor: default; }
/* Elenco e dettaglio con un pannello fisso a destra (anteprima, comandi): la parte larga è il lavoro. */
.split.con-anteprima { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); }
.split.con-lato { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
@media (max-width: 900px) { .split.con-anteprima, .split.con-lato { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- TESTI PER CANALE (14/10/2026, card #278)
   PIM › Testi (e la testata di SEO › Brief delle pagine): a sinistra l'elenco con lo stato, a destra la scheda.
   L'anteprima imita la pagina del negozio (titoli, paragrafi, tabelle, FAQ) e lo snippet di
   Google: chi approva un testo lo deve leggere come lo leggerà il cliente. */
.sc-testa { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.sc-titolo { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.sc-titolo h2 { margin: 0; font-size: var(--t-2xl); }
.sc-conti { display: flex; gap: var(--sp-7); flex-wrap: wrap; font-size: var(--t-md); color: var(--muted); }
.sc-conti b { color: var(--text); font-size: var(--t-lg); margin-right: var(--sp-2); }
.sc-nota { font-size: var(--t-sm); line-height: 1.45; }
.sc-scheda { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
/* Dentro la scheda di una categoria (14/10/2026) la testa del testo resta in vista col fondo del foglio. */
.pim-foglio .sc-capo { background: var(--card); }
.sc-capo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-5); flex-wrap: wrap;
  position: sticky; top: 0; z-index: 4; background: var(--bg); padding: var(--sp-4) 0; }
.sc-nome-grande { font-size: var(--t-xl); font-weight: var(--w-forte); margin-bottom: var(--sp-2); }
.sc-gesti { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.sc-gesti .btn:disabled { opacity: .45; cursor: not-allowed; }
.sc-controlli { display: flex; flex-direction: column; gap: var(--sp-4); }
.sc-gruppo { border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5); background: var(--card); font-size: var(--t-sm); }
.sc-gruppo.block { border-left-color: var(--crit); }
.sc-gruppo.ask { border-left-color: var(--warn); }
.sc-gruppo-t { font-weight: var(--w-forte); margin-bottom: var(--sp-3); }
.sc-gruppo ul { margin: 0; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.sc-pannello { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.sc-pannello h3 { margin: var(--sp-4) 0 0; font-size: var(--t-lg); }
.sc-etichetta textarea.inp { line-height: 1.5; resize: vertical; }
.sc-codice { width: 100%; min-height: 420px; line-height: 1.55; resize: vertical; }
.sc-fuori { color: var(--warn); font-weight: var(--w-medio); }
/* Lo snippet come lo mostra Google, e la pagina come la vede il cliente. */
.sc-serp { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); background: var(--card);
  max-width: 640px; }
.sc-serp-url { font-size: var(--t-sm); color: var(--muted); }
.sc-serp-t { font-size: var(--t-xl); color: var(--accent-d); margin: var(--sp-2) 0; line-height: 1.3; }
.sc-serp-d { font-size: var(--t-md); color: var(--muted); line-height: 1.5; }
.sc-pagina { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-7) var(--sp-8); background: var(--card);
  line-height: 1.6; font-size: var(--t-lg); max-width: 860px; }
.sc-pagina h1 { font-size: 28px; margin: 0 0 var(--sp-5); line-height: 1.25; }
.sc-pagina h2 { font-size: var(--t-2xl); margin: var(--sp-7) 0 var(--sp-4); }
.sc-pagina h3 { font-size: var(--t-xl); margin: var(--sp-6) 0 var(--sp-3); }
.sc-pagina p { margin: 0 0 var(--sp-5); }
.sc-pagina a { color: var(--accent-d); text-decoration: underline; }
.sc-pagina table { margin: var(--sp-5) 0; font-size: var(--t-md); }
.sc-pagina code { font-size: var(--t-sm); background: var(--crit-bg); color: var(--crit); padding: 0 var(--sp-2); border-radius: var(--sp-2); }
.sc-griglia { margin: var(--sp-7) 0; padding: var(--sp-8); border: 2px dashed var(--line); border-radius: var(--radius-sm);
  text-align: center; color: var(--muted); font-size: var(--t-md); }
.sc-faq details { border-bottom: 1px solid var(--line); padding: var(--sp-4) 0; }
.sc-faq summary { cursor: pointer; font-weight: var(--w-medio); }
.sc-faq details > *:not(summary) { margin-top: var(--sp-4); }
.sc-outline { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: var(--sp-4) var(--sp-6); margin: 0;
  font-size: var(--t-md); line-height: 1.5; }
.sc-outline dt { color: var(--muted); font-weight: var(--w-medio); }
.sc-outline dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sc-storia { margin: 0; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--t-md); }
.sc-nota-modello { border: 1px solid var(--line); border-left: 3px solid var(--info); border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5); background: var(--card); font-size: var(--t-sm); line-height: 1.5; }
.sc-nota-modello summary { cursor: pointer; font-weight: var(--w-forte); }
.sc-nota-modello p { margin: var(--sp-4) 0 var(--sp-2); }
.sc-nota-modello ul { margin: 0; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }

/* ===== Piano Ads (card #285, 14/10/2026, seconda versione) =====
   Il riassunto di alto livello delle Ads. Dall'alto: testata col mese, il verdetto in una riga
   col suo colore, i numeri del periodo col confronto, un riquadro per sito col ROAS grande sulla
   sua scala rossa, gialla e verde, poi le schede. Omar sulla prima versione: «i box in alto non
   hanno margine» (il riquadro cominciava con un <div>, che la regola del padding automatico non
   copre: qui il padding è dichiarato), «manca il colpo d'occhio», «il ROAS più in chiaro», «il
   grafico è gigante e non ha il passaggio del mouse». Il colore dice lo stato, sempre insieme a
   un'icona e a una parola. Solo token: tema chiaro e scuro gratis. */
/* I tre stati come colore di testo, di fondo e di bordo: valgono per tutta la pagina. */
.pa-c.good, .pa-delta.good { color: var(--good); }
.pa-c.warn { color: var(--warn); }
.pa-c.crit, .pa-delta.crit { color: var(--crit); }
.pa-c.info, .pa-delta.neutro { color: var(--muted); }
.pa-c { font-weight: var(--w-forte); }
.pill.info { background: var(--info-bg); color: var(--info); }

.pa-testa { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.pa-testa > div:first-child { flex: 1 1 420px; min-width: 0; }
.pa-testa .sub { margin-bottom: 0; }
.pa-testa-dx { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-4); }
.pa-date { justify-content: flex-end; }
.pa-date .inp { width: auto; }
.pa-btn-luca img { width: 22px; height: 22px; border-radius: 50%; background: var(--card); margin: -3px 0; }

/* Il verdetto: la prima cosa che si legge. */
.pa-verdetto { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  padding: var(--sp-6) var(--sp-7); border-radius: var(--radius); border: 1px solid var(--line);
  border-left: 6px solid var(--info); background: var(--info-bg); margin-bottom: var(--sp-6); }
.pa-verdetto.good { border-left-color: var(--good); background: var(--good-bg); }
.pa-verdetto.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.pa-verdetto.crit { border-left-color: var(--crit); background: var(--crit-bg); }
.pa-v-icona { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: var(--t-xl); font-weight: var(--w-forte); color: var(--on-info); background: var(--info); }
.pa-verdetto.good .pa-v-icona { background: var(--good); color: var(--on-accent); }
.pa-verdetto.warn .pa-v-icona { background: var(--warn); color: var(--on-warn); }
.pa-verdetto.crit .pa-v-icona { background: var(--crit); color: var(--on-crit); }
.pa-v-testo { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.pa-v-testo b { font-size: var(--t-lg); }
.pa-v-testo span { font-size: var(--t-md); color: var(--text); line-height: 1.45; }
.pa-v-conta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pa-conta { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); border-radius: 20px;
  background: var(--card); border: 1px solid var(--line); font-size: var(--t-sm); font-weight: var(--w-medio); white-space: nowrap; }
.pa-conta i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-xs); }
.pa-conta.good i { background: var(--good); color: var(--on-accent); }
.pa-conta.warn i { background: var(--warn); color: var(--on-warn); }
.pa-conta.crit i { background: var(--crit); color: var(--on-crit); }

/* I numeri del periodo: lastre del kit, il ROAS con la sua striscia di colore. */
.pa-numeri { margin-bottom: var(--sp-6); }
.pa-numeri .k i { line-height: 1.4; }
.pa-numeri .k.pa-k-roas { border-left: 5px solid var(--info); }
.pa-numeri .k.pa-k-roas.good { border-left-color: var(--good); }
.pa-numeri .k.pa-k-roas.warn { border-left-color: var(--warn); }
.pa-numeri .k.pa-k-roas.crit { border-left-color: var(--crit); }
.pa-numeri .k.pa-k-roas b { font-size: 26px; }
.pa-delta { font-weight: var(--w-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Un riquadro per sito. */
.pa-siti { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--sp-6); margin-bottom: var(--sp-7); }
.pa-sito { background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--info); border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-7) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; box-shadow: var(--shadow); }
.pa-sito.good { border-top-color: var(--good); } .pa-sito.warn { border-top-color: var(--warn); } .pa-sito.crit { border-top-color: var(--crit); }
.pa-sito-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.pa-nome { display: block; font-size: var(--t-xl); }
.pa-meta { display: block; color: var(--muted); font-size: var(--t-sm); margin-top: var(--sp-1); }
.pa-sito-testa .pill { font-size: var(--t-sm); padding: var(--sp-2) var(--sp-5); }
.pa-roas-riga { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); }
.pa-roas-riga small { display: block; color: var(--muted); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .4px; }
.pa-roas-n { display: block; font-size: 40px; line-height: 1.05; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.pa-roas-d { text-align: right; font-size: var(--t-md); }
.pa-roas-d small { text-transform: none; letter-spacing: 0; font-size: var(--t-sm); margin-top: var(--sp-1); }
/* La scala del ROAS: zone rossa, gialla e verde, le tacche di minimo e pareggio, l'ago. */
.pa-scala { position: relative; height: 40px; margin-top: calc(-1 * var(--sp-3)); }
.pa-zone { position: absolute; left: 0; right: 0; top: 8px; height: 12px; display: flex; border-radius: 6px; overflow: hidden; }
.pa-zone i { display: block; height: 100%; opacity: .3; }
.pa-zone i.good { background: var(--good); } .pa-zone i.warn { background: var(--warn); }
.pa-zone i.crit { background: var(--crit); } .pa-zone i.info { background: var(--muted-2); }
.pa-tacca { position: absolute; top: 4px; width: 2px; height: 20px; margin-left: -1px; background: var(--text); opacity: .55; }
.pa-tacca em { position: absolute; top: 22px; transform: translateX(-50%); font-style: normal; font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
.pa-tacca.sx em { transform: translateX(calc(-100% - 3px)); } .pa-tacca.dx em { transform: translateX(3px); }
.pa-ago { position: absolute; top: 3px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 3px solid var(--card);
  background: var(--info); box-shadow: var(--shadow); }
.pa-ago.good { background: var(--good); } .pa-ago.warn { background: var(--warn); } .pa-ago.crit { background: var(--crit); }
/* I quattro numeri del sito. */
.pa-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
@media (max-width: 420px) { .pa-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pa-mini > div { background: var(--line-2); border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-4); min-width: 0; }
.pa-mini dt { color: var(--muted); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-mini dd { margin: var(--sp-1) 0 0; font-size: var(--t-lg); font-weight: var(--w-forte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-mini dd.pa-mini-d { font-size: var(--t-xs); font-weight: var(--w-normale); }
/* Il tetto del mese. */
.pa-lbl { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--sp-3); }
.pa-lbl b { color: var(--text); font-variant-numeric: tabular-nums; }
.pa-lbl b.pa-c.warn { color: var(--warn); } .pa-lbl b.pa-c.good { color: var(--good); }
.pa-barra { position: relative; height: 12px; background: var(--line-2); border-radius: 6px; }
.pa-fatto, .pa-ritmo { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.pa-fatto { background: var(--accent); }
.pa-fatto.good { background: var(--good); } .pa-fatto.warn { background: var(--warn); }
.pa-ritmo { background: repeating-linear-gradient(45deg, var(--good) 0 4px, transparent 4px 8px); opacity: .6; }
.pa-ritmo.warn { background: repeating-linear-gradient(45deg, var(--warn) 0 4px, transparent 4px 8px); }
.pa-segno { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--text); }
/* La frase del sito e i segnali: riquadri col fondo del loro stato. */
.pa-frase { margin: 0; padding: var(--sp-5) var(--sp-6); border-radius: var(--radius-sm); border-left: 4px solid var(--info);
  background: var(--info-bg); font-size: var(--t-md); line-height: 1.5; }
.pa-frase.good { border-left-color: var(--good); background: var(--good-bg); }
.pa-frase.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.pa-frase.crit { border-left-color: var(--crit); background: var(--crit-bg); }
.pa-cresce { margin: calc(-1 * var(--sp-3)) 0 0; font-size: var(--t-sm); color: var(--good); }
.pa-cresce b { color: var(--text); }
.pa-chiedi { align-self: flex-start; margin-top: auto; }

/* Le schede sotto i siti: su una striscia bianca (Omar, 14/10: «colora lo sfondo delle linguette di
   bianco perché così non si vedono»), col bordo del riquadro e la scheda scelta sottolineata. */
.pa-schede { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--sp-4);
  box-shadow: var(--shadow); }
.pa-schede .tab { font-size: var(--t-md); padding: var(--sp-5) var(--sp-6); margin-bottom: 0; border-bottom-width: 3px; }
.pa-schede .tab:hover { background: var(--line-2); }
.pa-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--sp-3); margin-left: var(--sp-3);
  border-radius: 10px; font-size: var(--t-xs); font-weight: var(--w-forte); background: var(--info); color: var(--on-info); }
.pa-n.good { background: var(--good); color: var(--on-accent); }
.pa-n.warn { background: var(--warn); color: var(--on-warn); }
.pa-n.crit { background: var(--crit); color: var(--on-crit); }
.pa-blocco + .pa-blocco { margin-top: var(--sp-7); }
.pa-blocco h2 { font-size: var(--t-lg); margin: 0 0 var(--sp-3); }
.pa-spiega { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; margin: 0 0 var(--sp-5); max-width: 980px; }
.pa-segnali { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-5); }
.pa-segnale { display: flex; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); border-radius: var(--radius); border: 1px solid var(--line);
  border-left: 5px solid var(--info); background: var(--card); }
.pa-segnale.good { border-left-color: var(--good); background: var(--good-bg); }
.pa-segnale.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.pa-segnale.crit { border-left-color: var(--crit); background: var(--crit-bg); }
.pa-segnale > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.pa-segnale p { margin: 0; font-size: var(--t-md); line-height: 1.5; }
.pa-segnale .u-row { margin-top: auto; padding-top: var(--sp-2); }
.pa-s-icona { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: var(--w-forte);
  font-size: var(--t-sm); background: var(--info); color: var(--on-info); }
.pa-segnale.good .pa-s-icona { background: var(--good); color: var(--on-accent); }
.pa-segnale.warn .pa-s-icona { background: var(--warn); color: var(--on-warn); }
.pa-segnale.crit .pa-s-icona { background: var(--crit); color: var(--on-crit); }
.tab-fitta td.pa-camp, .tab-fitta th.pa-camp { min-width: 220px; max-width: 340px; }
.tab-fitta td.pa-stato-c, .tab-fitta th.pa-stato-c { min-width: 190px; max-width: 260px; }
.pa-stato-c .pill { white-space: normal; display: inline-block; margin: var(--sp-1) 0; line-height: 1.35; }
.pa-seg-n { margin-left: var(--sp-3); font-weight: var(--w-normale); opacity: .7; }
.pa-persa { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: var(--line-2); margin-right: var(--sp-3); vertical-align: middle; overflow: hidden; }
.pa-persa i { display: block; height: 100%; background: var(--warn); }
/* In osservazione: un riquadro per giorno e sito. */
.pa-oss { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6) var(--sp-7); }
.pa-oss + .pa-oss { margin-top: var(--sp-5); }
.pa-oss-testa { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-5); }
.pa-oss-testa .pa-meta { margin: 0; }
.pa-data { background: var(--accent-soft); color: var(--accent-d); font-weight: var(--w-forte); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-4); font-variant-numeric: tabular-nums; }
.pa-oss-corpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: var(--sp-7); }
@media (max-width: 860px) { .pa-oss-corpo { grid-template-columns: minmax(0, 1fr); } }
.pa-mosse { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.pa-mosse li { display: flex; gap: var(--sp-5); }
.pa-mosse li > div { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; font-size: var(--t-md); }
.pa-mosse small { color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }
.pa-ora { flex: 0 0 44px; color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; padding-top: 1px; }
.pa-oss-lato { display: flex; flex-direction: column; gap: var(--sp-5); }
.pa-tempi { list-style: none; margin: 0; padding: 0; display: flex; }
.pa-tempi li { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); font-size: var(--t-xs); color: var(--muted); text-align: center; }
.pa-tempi li::before { content: ""; position: absolute; top: 6px; left: -50%; right: 50%; height: 2px; background: var(--line); z-index: 0; }
.pa-tempi li:first-child::before { display: none; }
.pa-tempi li.fatto::before { background: var(--accent); }
.pa-tempi i { position: relative; z-index: 1; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted-2); background: var(--card); }
.pa-tempi li.fatto i { background: var(--accent); border-color: var(--accent); }
.pa-tempi li.prossimo i { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pa-tempi b { color: var(--text); font-size: var(--t-sm); }
.pa-prima-dopo { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--t-md); }
.pa-prima-dopo > div { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.pa-prima-dopo dt { color: var(--muted); } .pa-prima-dopo dd { margin: 0; font-variant-numeric: tabular-nums; }
.pa-piccolo { font-size: var(--t-sm); color: var(--muted); margin: var(--sp-3) 0 0; line-height: 1.45; }
.pa-piccolo.pa-zero { margin: 0; }
/* L'andamento: due grafici piccoli affiancati, larghi quanto il riquadro. */
.pa-grafici { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--sp-5); }
.pa-graf { margin: 0; padding: var(--sp-5) var(--sp-6); }
.pa-graf figcaption { font-size: var(--t-md); font-weight: var(--w-forte); margin-bottom: var(--sp-3); }
.pa-graf-area { position: relative; }
.pa-svg { display: block; overflow: visible; }
.pa-asse { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.pa-griglia { stroke: var(--line); stroke-width: 1; }
.pa-rotta { fill: var(--muted-2); opacity: .16; }
.pa-leg-rotta { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: var(--muted-2); opacity: .35; vertical-align: middle; }
.pa-barra-s { fill: var(--accent); }
.pa-barra-s.parziale { opacity: .4; }
.pa-linea-r { fill: none; stroke: var(--muted); stroke-width: 2; }
.pa-rif { stroke: var(--crit); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .8; }
.pa-rif.pareggio { stroke: var(--good); }
.pa-rif-t { font-size: 10.5px; }
.pa-punto { stroke: var(--card); stroke-width: 2; fill: var(--info); }
.pa-punto.good { fill: var(--good); } .pa-punto.warn { fill: var(--warn); } .pa-punto.crit { fill: var(--crit); }
.pa-punto.rotta { fill: var(--card); stroke: var(--muted-2); }
.pa-punto.parziale { opacity: .55; }
.pa-fascia { fill: var(--text); opacity: 0; cursor: crosshair; }
.pa-fascia.on { opacity: .06; }
.pa-tip { position: absolute; top: 0; z-index: 2; pointer-events: none; min-width: 160px; display: flex; flex-direction: column; gap: var(--sp-1);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: var(--sp-4) var(--sp-5); font-size: var(--t-sm); }
.pa-tip span { display: flex; justify-content: space-between; gap: var(--sp-5); color: var(--muted); }
.pa-tip span b { color: var(--text); font-variant-numeric: tabular-nums; }
.pa-tip span b.pa-c.good { color: var(--good); } .pa-tip span b.pa-c.warn { color: var(--warn); } .pa-tip span b.pa-c.crit { color: var(--crit); }
.pa-tip small { color: var(--muted); }
/* La configurazione: il metro sito per sito, i valori generali, come si calcolano, la storia. */
.pa-cfg > * + * { margin-top: var(--sp-6); }
.pa-fonte { margin: 0; font-size: var(--t-md); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }
.pa-cfg-blocco { padding: var(--sp-6) var(--sp-7); }
.pa-cfg-blocco h3 { margin: 0 0 var(--sp-3); font-size: var(--t-lg); }
.pa-cfg-tab td { vertical-align: top; }
.pa-cfg-tab small { display: block; color: var(--muted); font-size: var(--t-xs); line-height: 1.4; margin-top: var(--sp-1); max-width: 260px; }
.pa-cfg-n { font-size: var(--t-lg); font-variant-numeric: tabular-nums; }
.pa-in { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.pa-in.corto { width: 64px; }
.pa-in.largo { width: 132px; }
.pa-in-u { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pa-in-u i { font-style: normal; color: var(--muted); }
.pa-cfg-par { min-width: 280px; }
.pa-manuale { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-3); }
.pa-manuale[hidden] { display: none; }
.pa-manuale .inp:not(.pa-in) { flex: 1 1 180px; min-width: 0; }
.pa-cfg-campi { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-6); margin-top: var(--sp-5); }
.pa-cfg-campi > label, .pa-cfg-campo { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--t-sm); font-weight: var(--w-medio); color: var(--text); }
.pa-cfg-campi small { color: var(--muted); font-weight: var(--w-normale); line-height: 1.4; }
.pa-cfg-campi select.inp { width: auto; }
.pa-cfg-salva { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  background: var(--card); border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); }
.pa-cfg-salva .inp { flex: 1 1 320px; min-width: 0; }
.pa-storia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.pa-storia > li { border-left: 3px solid var(--accent); padding-left: var(--sp-5); }
.pa-storia ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-6); font-size: var(--t-sm); }
.pa-storia s { color: var(--muted); }
.pa-st-testa { font-size: var(--t-sm); color: var(--muted); }
.pa-st-testa b { color: var(--text); }
/* Il metro. */
.pa-dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4) var(--sp-6); font-size: var(--t-md); line-height: 1.45; }
.pa-dl dt { color: var(--muted); } .pa-dl dd { margin: 0; }
.pa-passi { display: flex; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-2); }
.pa-passi i { flex: 1; height: 6px; border-radius: 3px; background: var(--line-2); }
.pa-passi i.on { background: var(--accent); }

/* ===== Lo specialista in pagina (agente.js, 14/10/2026) =====
   La faccia dell'agente in basso a destra, e la chat che si apre lì. Omar: «un widget con la
   faccia di Luca che si apre come una chat sempre in basso nella pagina… diamo la possibilità di
   espandere il riquadro o a pagina intera». Tre misure: riquadro, grande, tutta la pagina. Sotto i
   modali (z-index 40) e sopra il menu laterale del telefono (30). */
.ag-bolla { position: fixed; right: var(--sp-7); bottom: var(--sp-7); z-index: 35; display: inline-flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-3); border-radius: 32px; border: 1px solid var(--line); background: var(--card);
  color: var(--text); font-family: inherit; font-size: var(--t-md); font-weight: var(--w-medio); cursor: pointer; box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s; }
.ag-bolla:hover { transform: translateY(-2px); box-shadow: var(--shadow-alto); }
.ag-bolla:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ag-bolla img { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--accent); }
.ag-bolla[hidden], .ag-chat[hidden] { display: none; }
body.ag-presente .main { padding-bottom: 104px; }
.ag-chat { position: fixed; right: var(--sp-7); bottom: var(--sp-7); z-index: 35; width: 400px; max-width: calc(100vw - 2 * var(--sp-7));
  height: min(620px, calc(100vh - 2 * var(--sp-7))); display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-alto); }
.ag-chat.grande { width: min(780px, calc(100vw - 2 * var(--sp-7))); height: calc(100vh - 2 * var(--sp-7)); }
.ag-chat.intero { inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; border: 0; z-index: 38; }
.ag-chat.intero .ag-log, .ag-chat.intero .ag-form { padding-left: max(var(--sp-6), calc(50% - 440px)); padding-right: max(var(--sp-6), calc(50% - 440px)); }
@media (max-width: 600px) {
  .ag-chat { inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; border: 0; }
  .ag-chat [data-ag="misura"], .ag-chat [data-ag="intero"] { display: none; }
  .ag-bolla { right: var(--sp-5); bottom: var(--sp-5); padding: var(--sp-3); }
  .ag-bolla-t { display: none; }
}
.ag-testa { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.ag-testa img { width: 38px; height: 38px; border-radius: 50%; background: var(--card); border: 2px solid var(--accent); }
.ag-chi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-chi b { font-size: var(--t-lg); }
.ag-chi small { color: var(--muted); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--muted);
  font-size: 17px; line-height: 1; cursor: pointer; font-family: inherit; }
.ag-btn:hover { background: var(--card); color: var(--text); }
.ag-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ag-log { flex: 1; overflow-y: auto; padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-5); background: var(--bg); }
.ag-msg { max-width: 88%; padding: var(--sp-4) var(--sp-5); border-radius: 14px; font-size: var(--t-md); line-height: 1.5; overflow-wrap: anywhere; }
.ag-lui { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ag-io { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 4px; white-space: pre-wrap; }
.ag-errore { background: var(--crit-bg); border-color: var(--crit); }
.ag-msg p { margin: var(--sp-2) 0; } .ag-msg p:first-child { margin-top: 0; } .ag-msg p:last-child { margin-bottom: 0; }
.ag-msg ul, .ag-msg ol { margin: var(--sp-3) 0; padding-left: var(--sp-7); }
.ag-msg code { font-size: .92em; background: var(--line-2); padding: 0 var(--sp-2); border-radius: 4px; }
.ag-tab { overflow-x: auto; margin: var(--sp-3) 0; }
.ag-tab table { border-collapse: collapse; font-size: var(--t-sm); }
.ag-tab th, .ag-tab td { border: 1px solid var(--line); padding: var(--sp-2) var(--sp-4); text-align: left; white-space: nowrap; }
.ag-tab th { background: var(--line-2); }
.ag-esempi { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); margin-top: var(--sp-5); }
.ag-esempio { border: 1px solid var(--accent); background: var(--card); color: var(--accent-d); border-radius: 16px; padding: var(--sp-3) var(--sp-5);
  font-family: inherit; font-size: var(--t-sm); text-align: left; cursor: pointer; }
.ag-esempio:hover { background: var(--accent-soft); }
.ag-pensa { color: var(--muted); font-style: italic; }
.ag-pensa::after { content: " ···"; display: inline-block; animation: ag-respiro 1.2s ease-in-out infinite; }
@keyframes ag-respiro { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ag-pensa::after { animation: none; } .ag-bolla { transition: none; } }
.ag-form { display: flex; align-items: flex-end; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--card); }
.ag-form textarea { flex: 1; resize: none; min-height: 40px; max-height: 140px; line-height: 1.4; font-family: inherit; }

/* ===== Novità di Google Ads (14/10/2026, sera) =====
   Le voci lette da Luca: il colore dice quanto ci toccano (rosso molto, giallo un po', grigio-blu
   poco, neutro niente), sempre con la parola; «in arrivo» ha il suo colore e la data. */
.nv-lista { display: flex; flex-direction: column; gap: var(--sp-5); }
.nv-voce { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.nv-voce.crit { border-left-color: var(--crit); } .nv-voce.warn { border-left-color: var(--warn); }
.nv-voce.info { border-left-color: var(--info); } .nv-voce.da-leggere { border-left-style: dashed; }
.nv-voce h3 { margin: 0; font-size: var(--t-lg); line-height: 1.35; }
.nv-voce p { margin: 0; font-size: var(--t-md); line-height: 1.5; }
.nv-perche, .nv-fare { color: var(--text); }
.nv-perche b, .nv-fare b { display: inline-block; min-width: 76px; color: var(--muted); font-weight: var(--w-medio); font-size: var(--t-sm); }
.nv-testa { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }
.nv-testa .pa-meta { margin: 0; }
.pill.nv-imp.neutro { background: var(--line-2); color: var(--muted); }
.pill.nv-arrivo { background: var(--accent-soft); color: var(--accent-d); }
.nv-piede { margin-top: var(--sp-2); }
.nv-orig { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-k.crit { border-left: 5px solid var(--crit); } .nv-k.warn { border-left: 5px solid var(--warn); } .nv-k.good { border-left: 5px solid var(--good); }
.nv-linea { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.nv-linea > li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 640px) { .nv-linea > li { grid-template-columns: minmax(0, 1fr); } }
.nv-quando { font-weight: var(--w-forte); font-variant-numeric: tabular-nums; background: var(--accent-soft); color: var(--accent-d);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); text-align: center; }
.nv-quando small { display: block; font-weight: var(--w-normale); font-size: var(--t-xs); color: var(--muted); }
.nv-linea > li.passata .nv-quando { background: var(--line-2); color: var(--muted); }
.nv-piede a.lnk { font-size: var(--t-sm); font-weight: var(--w-medio); text-decoration: none; }
.nv-piede a.lnk:hover { text-decoration: underline; }

/* Il piano di Luca per la settimana, in cima a «Da guardare». */
.pa-piano-luca { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius);
  padding: var(--sp-6) var(--sp-7); }
.pa-piano-luca h2 { margin: 0; }
.pa-luca { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--accent); background: var(--accent-soft); }
.pa-piano-tit { font-size: var(--t-lg); font-weight: var(--w-forte); margin: var(--sp-5) 0; }
.pa-prop-h { font-size: var(--t-md); margin: var(--sp-6) 0 var(--sp-4); }
.pa-proposte { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-5); }
.pa-proposta { display: flex; gap: var(--sp-5); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm);
  padding: var(--sp-5); background: var(--bg); }
.pa-proposta > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.pa-prop-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent);
  color: var(--on-accent); font-weight: var(--w-forte); font-size: var(--t-sm); }
.pa-prop-dl { margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--t-sm); }
.pa-prop-dl > div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: var(--sp-3); }
.pa-prop-dl dt { color: var(--muted); } .pa-prop-dl dd { margin: 0; }

/* Una riga di scelta dentro un elenco che scorre (le categorie di un prodotto, 14/10/2026): la
   casella e il nome a sinistra, la scelta secondaria («principale») a destra. */
.pim-scelta-riga { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line-2); }
.pim-scelta-riga:last-child { border-bottom: 0; }
.pim-scelta-riga:hover { background: var(--accent-soft); }
/* Il rientro dell'albero dentro la riga: la riga ha il suo margine, e il rientro gli si somma. */
.pim-scelta-riga.u-rientro-1 { padding-left: calc(var(--sp-5) + var(--sp-7)); }
.pim-scelta-riga.u-rientro-2 { padding-left: calc(var(--sp-5) + var(--sp-7) * 2); }
.pim-scelta-riga.u-rientro-3 { padding-left: calc(var(--sp-5) + var(--sp-7) * 3); }
.pim-scelta-riga.on { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.pim-scelta-riga input:disabled + span { opacity: .4; }
/* Una casella che prende tutta la larghezza del suo contenitore (le ricerche nelle finestre). */
.inp.pieno { width: 100%; }
/* Il ritocco di una parte sola (15/10/2026): la casella con l'istruzione, e il riepilogo di cosa è
   cambiato in frasi, perché chi rivede controlli che sia cambiato solo quello che ha chiesto. */
.sc-ritocco { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: var(--sp-5); background: var(--card);
  display: flex; flex-direction: column; gap: var(--sp-4); }
.sc-ritocco textarea.inp { line-height: 1.5; resize: vertical; }
.sc-ritocco-gesti { display: flex; gap: var(--sp-4); justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.sc-ritocco-esito { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5); background: var(--card); font-size: var(--t-sm); line-height: 1.5;
  display: flex; flex-direction: column; gap: var(--sp-2); }
.sc-tolta { background: var(--crit-bg); color: var(--crit); padding: var(--sp-1) var(--sp-3); border-radius: var(--sp-2); text-decoration: line-through; }
.sc-aggiunta { background: var(--good-bg); color: var(--good); padding: var(--sp-1) var(--sp-3); border-radius: var(--sp-2); }
/* L'impaginazione del negozio (15/10/2026): da dove viene, e il gesto per usarne una come modello. */
.sc-impaginazione { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--t-sm); color: var(--muted); }
/* Nella scheda prodotto, il blocco tecnico che viene dalla scheda ufficiale (15/10/2026): si vede che
   non l'ha scritto il modello. */
.sc-dal-sito { border-left: 3px solid var(--info); padding-left: var(--sp-6); margin: var(--sp-6) 0; }
/* I documenti della libreria nei Materiali (15/10/2026): si aprono col testo intero, così chi rivede
   ritrova la regola da cui viene una frase. */
.sc-libreria { margin: 0; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--t-md); }
.sc-doc summary { cursor: pointer; font-weight: var(--w-medio); }
/* Il piano della pubblicazione di un prodotto, nella conferma (15/10/2026): cosa farà sul sito, gli avvisi, cosa lo ferma. */
.sc-piano { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--t-md); line-height: 1.45; text-align: left; }
.sc-piano-avvisi { color: var(--warn); }
.sc-piano-fermo { color: var(--crit); font-weight: var(--w-medio); }
/* Il controllo della notte (15/10/2026): un negozio per riquadro, le ultime notti come caselle verdi o rosse. */
.pim-controllo { padding: var(--sp-5) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-4); }
.pim-notti { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pim-notte { width: 14px; height: 14px; border-radius: 3px; background: var(--line); }
.pim-notte.ok { background: var(--good); }
.pim-notte.ko { background: var(--crit); }
/* La scelta di più prodotti nell'elenco e la barra dei gesti in blocco (15/10/2026, la coda dei testi). */
tr.scelta > td { background: var(--accent-soft); }
.pim-azioni { position: sticky; top: var(--sp-4); z-index: 2; flex-wrap: wrap; }
/* I prodotti consigliati (upsell) nella scheda, nell'ordine in cui il negozio li mostra (15/10/2026). */
.pim-upsell { margin: 0; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--t-md); }
.sc-doc-testo { margin-top: var(--sp-3); padding: var(--sp-4) var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-sm); line-height: 1.5;
  max-height: 420px; overflow-y: auto; }