/* ===== 00-fondamenta.css ===== */
/* ---- Fondamenta: colori, scale, azzeramento ----

   LA REGOLA: superfici silenziose, dati forti.

   Prima ogni cosa era un riquadro bianco con angoli tondi e un'ombra, posato su
   un fondo grigio: riquadri, tabelle, numeri di sintesi, colonne della board,
   schede. Quando tutto e' sollevato, niente e' sollevato — l'occhio non ha un
   punto da cui cominciare e la schermata si legge tutta insieme, cioe' non si
   legge. Lo stesso vale per il testo: stava quasi tutto fra 11 e 13 px in tre
   grigi vicini, quindi un titolo di riquadro e una nota a margine pesavano
   uguale.

   Da qui in avanti valgono tre regole, e sono poche apposta.

   1. LA CORNICE NON SI FA NOTARE. Il fondo dell'area di lavoro e' un
      grigio-azzurro chiaro e cio' che porta contenuto e' bianco: la scheda si
      distingue dal fondo per la tinta, non per un'ombra. L'ombra resta a cio'
      che galleggia davvero: finestre, schede a scomparsa, tendine.

   2. UNA COSA DOMINA. In ogni schermata c'e' un elemento piu' grande di tutti
      gli altri, ed e' il dato per cui quella schermata esiste. Per ottenerlo la
      scala tipografica ha passi larghi: fra il corpo del testo e il numero di
      sintesi ci sono 17 px, non 12.

   3. UN COLORE SIGNIFICA UNA COSA. Verde Innoform: l'azione principale, e la
      sezione in cui ti trovi. Blu: porta altrove — collegamenti, fuoco,
      passaggi. Blu notte: la cornice dell'applicazione, cioe' la barra in alto.
      Verde scuro, rosso e ambra: com'e' andata. Tutto il resto e' grigio. Un
      colore usato per decorare toglie significato allo stesso colore usato per
      informare — ed e' per questo che il verde del marchio, che e' l'accento,
      non e' lo stesso verde di --ok, che e' un esito.
   ---------------------------------------------------------------- */
:root{
  /* ---- Palette istituzionale ----
     I valori vengono dal riferimento approvato (dashboard-palette-01-
     istituzionale.png): sono stati letti dai pixel dell'immagine, non scelti a
     occhio, e sono qui nella loro forma misurata. Ogni tinta ha un mestiere
     solo; se serve una tinta nuova, la domanda giusta e' quale mestiere non e'
     ancora coperto. */

  /* Blu notte: la cornice dell'applicazione, cioe' la barra in alto. Non e' un
     colore d'azione — non si preme niente che sia blu notte — e' il bordo del
     foglio su cui si lavora. Il bianco ci sta sopra a 15.3:1. */
  --navy-900:#002451;
  --navy-800:#0b3468;  /* passaggio del mouse e superfici dentro la barra */
  --on-navy:#fff;
  --on-navy-2:#a9bedc; /* testo di servizio sulla barra: 8.0:1 sul blu notte */

  /* Blu: porta altrove. Collegamenti, contorno del fuoco, passaggi, campo
     attivo. Non e' piu' il colore dell'azione principale: quello e' il verde. */
  --brand-blue:#174bea;--brand-blue-hover:#123dcc;--brand-blue-pressed:#0f32a8;
  --brand-blue-soft:#eef3ff;--brand-blue-ring:rgba(23,75,234,.18);

  /* Verde Innoform: l'azione principale, l'accento, e la sezione in cui ti
     trovi. Sei valori, sei mestieri distinti — un verde solo non basta, perche'
     lo stesso colore deve fare da fondo pieno, da fondo tenue, da segno su
     chiaro e da testo, e nessuna tinta regge quattro contrasti diversi.
       --brand-green        fondo pieno del comando principale (testo --on-green, 11.9:1)
       --brand-green-tint   la sezione corrente nella barra e nel menu
       --brand-green-mark   il segno verde su chiaro (barretta, icona): 3.3:1
       --brand-green-ink    il testo verde, e il testo sopra --brand-green-tint: 6.7:1
       --brand-green-line   il filo verde sotto le intestazioni: e' decorazione
     Il verde del marchio NON e' il verde di --ok. Quello dice «e' andata bene»
     e resta scuro, pieno, con il testo bianco: se l'accento e l'esito fossero
     lo stesso verde, ogni pulsante sembrerebbe un successo. */
  --brand-green:#b0e13e;--brand-green-hover:#a0d22c;--brand-green-pressed:#8fc01e;
  --brand-green-soft:#eef7da;--brand-green-tint:#cce691;
  --brand-green-mark:#688f14;--brand-green-ink:#33500a;--brand-green-line:#d2e7a6;
  --on-green:#0b1b33;  /* il testo scuro sopra il verde pieno */

  /* Testo: cinque livelli, con salti veri fra l'uno e l'altro. */
  --ink:#0b1b33;    /* titoli e dati: il blu molto scuro del CRM */
  --ink-2:#293449;  /* etichette forti */
  --slate:#4a5670;  /* corpo */
  --muted:#586377;  /* spiegazioni */
  /* Questi due livelli portano le date, le scadenze, i giorni di fermo e il
     nome di chi ha in carico la trattativa: le informazioni con cui si decide
     cosa fare, non decorazione. Il minimo che le regole di accessibilita'
     chiedono per il testo normale e' 4.5:1, e va verificato sul fondo PIU'
     CHIARO su cui il testo compare davvero — che dal passaggio alla palette
     istituzionale non e' piu' il bianco: e' --side (la barra laterale, la piu'
     scura delle superfici chiare).

     Sono passati due volte. Prima #68738a e #63718a, che sul fondo nuovo
     scendevano a 4.5 e 4.3, cioe' al limite o sotto. Poi #626d85 e #5c6a83, a
     norma ma ancora chiari da guardare: 4.5 e 4.7 sulla barra laterale sono il
     minimo consentito, non una lettura comoda, e un minimo rispettato per un
     decimo si perde al primo fondo appena piu' chiaro.
     Ora --muted da' 6.1:1 sul bianco, 5.7 sull'area di lavoro, 5.3 sulla barra
     laterale; --faint rispettivamente 6.5, 6.1 e 5.7. La gerarchia regge
     ancora: --slate, che porta il corpo del testo, resta il piu' scuro dei tre
     a 7.4:1. */
  --faint:#535e73;  /* note, contatori, testo di servizio */

  /* Superfici. Sono quattro, e si distinguono per tinta prima che per bordo:
     il fondo dell'area di lavoro e' grigio-azzurro, cio' che porta contenuto e'
     bianco, l'intestazione di una sezione e' appena azzurrata, la barra
     laterale e' la piu' fredda delle tre. */
  --canvas:#f4f8fb;  /* area di lavoro */
  --panel:#fff;      /* schede, riquadri, tabelle: tutto cio' che porta dati */
  --side:#ebeff5;    /* barra delle sezioni e menu esteso */
  /* L'intestazione era #eff3f8: 1.11:1 contro il bianco del contenuto, cioe'
     una differenza che si vede solo se la si cerca. Il suo mestiere e' dire
     dove comincia una sezione, e per farlo deve staccarsi dal corpo del
     riquadro. Ora 1.18:1 — un passo, non un salto: piu' scura diventerebbe una
     fascia, e una fascia pesa quanto il contenuto che introduce. */
  --testa:#e6edf6;   /* intestazione di sezione: azzurrata, non grigia */
  --testa-2:#f8fafd; /* fasce di servizio: piedi di elenco, riquadri di nota */
  --line:#e3e8f0;   /* filo di bordo fra due cose: separa, non delimita */
  /* Il bordo di un campo non e' decorazione: e' l'unica cosa che dice dove si
     scrive. --line su bianco da' 1.3:1, cioe' quasi niente, e le regole ne
     chiedono almeno 3 per un contorno che identifica un comando.
     Era #8f9aac, dichiarato qui come 3.1:1: rimisurato vale 2.8:1 sul bianco,
     sotto il minimo. Poi #7f8a9d, che dava 3.5 — a norma, ma un contorno a
     3.5:1 su una carta bianca e' ancora un accenno, e su una schermata piena di
     campi la domanda «dove si scrive» resta da farsi. Ora 4.5:1 sul bianco,
     4.2 sull'area di lavoro e 3.8 sulle intestazioni: regge su tutte e tre le
     superfici su cui un campo puo' trovarsi, e su nessuna diventa una gabbia.
     Vale per input, select, textarea e pulsanti secondari; per i separatori
     resta --line, che li' va benissimo — scurire anche quello vorrebbe dire
     disegnare una griglia intorno a ogni riga di ogni tabella. */
  --line-strong:#6c7889;
  --hair:#f1f4f8;   /* separatore interno, fondo di un contenitore */

  /* Esito. Non portano mai da soli un'informazione: accanto c'e' sempre
     l'etichetta scritta. */
  --ok:#12784a;--ok-tint:#e9f7ef;
  --danger:#c92f3a;--danger-tint:#fef1f2;
  /* L'ambra era #a86e05: 4.3:1 sul bianco e 4.0:1 sulla propria tinta, cioe'
     sotto il minimo, e su un fondo appena piu' scuro peggiorava ancora. Porta
     scritte le cose che mancano per andare avanti — i requisiti di stadio, gli
     avvisi — quindi non e' decorazione. Ora 5.0:1 sul bianco e 4.6:1 sulla
     tinta, stessa tinta, appena piu' scura. */
  --amber:#9a6504;--amber-tint:#fdf6e6;

  /* ---- Comando non disponibile ----
     Un pulsante spento resta un pulsante: dice cosa farebbe, e deve poterlo
     dire. L'opacita' sull'INTERO comando — che era la forma di prima — spegne
     anche l'etichetta, e su un fondo pieno la porta sotto il minimo leggibile:
     e' il difetto che si vedeva sul pulsante «Entra» a campi vuoti. Qui il
     fondo e il testo sono dichiarati, e il contrasto fra loro e' 5.0:1.

     Il contorno resta volutamente debole — 2.0:1 sul bianco, contro il 4.5 di
     un comando vivo — e non insegue il minimo di 3 che vale per i controlli.
     Quel minimo esclude per iscritto i comandi inattivi, e la ragione e'
     esattamente questa: un contorno pieno su un pulsante spento lo farebbe
     sembrare premibile. A dire che c'e' un comando bastano il fondo, che si
     stacca dalla carta, e l'etichetta, che resta leggibile. */
  --disabled-bg:#e7ecf3;--disabled-ink:#57647c;--disabled-line:#adbacf;

  /* Alias storici: stessi colori, nomi vecchi, per non riscrivere mille righe.
     --navy resta il blu d'azione, come e' sempre stato in queste regole: il blu
     notte della barra si chiama --navy-900 e non passa di qui. */
  --navy:var(--brand-blue);--blue:var(--brand-blue);--violet:#7c6ef0;
  --brand-lime:var(--brand-green);--brand-lime-hover:var(--brand-green-hover);
  --brand-lime-soft:var(--brand-green-soft);
  --lime:var(--brand-green);--lime-2:var(--brand-green-hover);--lime-tint:var(--brand-green-soft);

  /* ---- Scala tipografica ----
     Otto passi. I salti sono ampi di proposito: due testi con ruolo diverso
     devono vedersi diversi da lontano, non da vicino. */
  --t-xs:11px;      /* etichette maiuscole, contatori */
  --t-sm:12px;      /* note e sottotitoli */
  --t-base:13px;    /* controlli, celle di tabella */
  --t-md:14px;      /* il dato principale di una riga */
  --t-lg:16px;      /* titolo di un riquadro */
  --t-xl:20px;      /* titolo di una scheda */
  --t-2xl:28px;     /* titolo di una pagina */
  --t-num:30px;     /* numero di sintesi: l'elemento che domina */

  /* ---- Scala degli spazi ----
     Piu' aria FRA i gruppi, meno DENTRO le righe: e' cosi' che si capisce dove
     finisce una cosa e ne comincia un'altra senza disegnare linee. */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:28px;--s-7:40px;

  --lh-tight:1.25;--lh:1.5;--lh-loose:1.6;

  /* Raggi piu' stretti di prima: gli angoli molto tondi leggono «consumatore»,
     un gestionale ha bisogno di leggere «strumento». */
  --radius-xs:6px;--radius-sm:8px;--radius-md:10px;--radius-lg:14px;
  --control-height:36px;

  /* ---- Elevazione ----
     --sh vale «none» ed e' voluto: le superfici FISSE sono piatte. Chi
     galleggia davvero - finestre, schede a scomparsa, tendine - chiede
     esplicitamente --shadow-md. --shadow-sm resta per il sollevamento al
     passaggio del mouse, che e' un segnale di interazione, non di gerarchia. */
  --shadow-xs:0 1px 2px rgba(15,23,41,.04);
  --shadow-sm:0 2px 8px rgba(15,23,41,.07);
  --shadow-md:0 16px 40px rgba(15,23,41,.14);
  --sh:none;--sh-lg:var(--shadow-md);--r:var(--radius-sm);

  --transition-ui:140ms ease;

  /* ---- Token del mockup approvato ----
     Il telaio e la Dashboard sono trasferiti dal mockup, e il mockup nomina i
     colori a modo suo. Qui i suoi nomi esistono davvero, cosi' quelle due
     superfici si leggono accanto all'originale senza tradurre a mente.

     Dove il CRM ha gia' lo stesso significato, il token del mockup PUNTA a
     quello reale: due blu d'azione a un decimo di tinta di distanza sono due
     blu, e le altre diciassette schermate usano gia' il primo.
       --blue-600  -> --brand-blue        (#2454E8 del mockup ~ #174bea)
       --blue-700  -> --brand-blue-hover  (#173FBD ~ #123dcc)
       --blue-50   -> --brand-blue-soft   (#F4F6FF ~ #eef3ff)
       --slate-700 -> --slate             (#46546B ~ #4a5670)
       --warn      -> --amber, --ok-bg -> --ok-tint, --danger-bg -> --danger-tint
       --r-sm/md/lg-> --radius-sm/md/lg   (stessi identici valori)
     Il mockup chiama --muted cio' che qui e' --faint: stesso ruolo, e nelle
     regole trasferite si scrive --faint.

     La scala del lime non e' piu' una scala a parte. Finche' il verde del CRM
     e quello del mockup erano due verdi diversi, tenerli separati era l'unico
     modo di non cambiare Supporto, Agenda, Board e Calendario tutti insieme;
     adesso il verde e' UNO — quello del riferimento approvato — e questi tre
     nomi puntano ai tre mestieri gia' dichiarati sopra. */
  --blue-600:var(--brand-blue);
  --blue-700:var(--brand-blue-hover);
  --blue-900:var(--brand-blue-pressed);
  --blue-50:var(--brand-blue-soft);
  --blue-100:#E8EDFF;
  --lime-100:var(--brand-green-tint);
  --lime-500:var(--brand-green-mark);
  --lime-700:var(--brand-green-ink);
  --slate-700:var(--slate);
  --ok-bg:var(--ok-tint);
  --warn:var(--amber);
  --warn-bg:var(--amber-tint);
  --danger-bg:var(--danger-tint);
  --info:var(--brand-blue);
  --info-bg:var(--brand-blue-soft);
  --r-sm:var(--radius-sm);
  --r-md:var(--radius-md);
  --r-lg:var(--radius-lg);
}

*{box-sizing:border-box}
html,body,#root{margin:0;height:100%;overflow:hidden}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--slate);background:var(--canvas);
  font-size:var(--t-base);line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Inter';color:var(--ink);letter-spacing:-.018em;line-height:var(--lh-tight);margin:0}
button,input,select,textarea{font:inherit}
button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
/* Il contorno del fuoco e' blu e non lime: sul bianco il lime non ha contrasto
   sufficiente, ed e' l'unico modo che ha chi naviga da tastiera per sapere
   dove si trova. */
:where(button,input,select,textarea,a,[role="button"],[tabindex]):focus-visible{
  outline:2px solid var(--brand-blue);outline-offset:2px
}
/* I numeri di sintesi hanno un carattere loro e le cifre a larghezza fissa:
   incolonnati, si confrontano a colpo d'occhio. */
.num{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;transition-duration:.01ms!important;
    animation-duration:.01ms!important;animation-iteration-count:1!important
  }
}

/* ===== 05-controlli.css ===== */
/* ---- Controlli, superfici, messaggi ----
   Ogni cosa qui era definita due volte: una nel foglio dentro la pagina e una
   in crm-design-system.css, caricato dopo. Due definizioni per lo stesso
   pulsante vogliono dire che per capire com'e' fatto bisogna leggerle
   entrambe, ricordarsi quale vince, e sperare che chi tocca la prima sappia
   dell'esistenza della seconda. Adesso ogni controllo e' scritto una volta.

   Le famiglie di pulsante sono cinque e non di piu':
     .btn        cosa succede quando premi  - l'azione principale della schermata
     .cta        una scelta fra tante       - azioni secondarie, filtri, viste
     .btn-ok     conferma un esito          - «vinta», «completata»
     .btn-danger toglie o annulla           - sempre con conferma prima
     .lnk        porta altrove              - non e' un comando, e' un passaggio
   Se un pulsante nuovo non rientra in una delle cinque, la domanda da farsi e'
   che cosa fa, non quale colore dargli.

   IL COMANDO SPENTO. Le cinque famiglie condividono la stessa forma di
   «non disponibile»: fondo --disabled-bg, testo --disabled-ink, bordo
   --disabled-line, nessuna ombra, nessun sollevamento, cursore negato. Prima
   era «opacity» sull'intero pulsante, che sbiadisce anche l'etichetta: su un
   fondo pieno la portava sotto il minimo leggibile, e chi guardava non sapeva
   piu' che cosa quel pulsante avrebbe fatto. Qui l'etichetta resta a 5.0:1, e
   a dire che e' spento sono il fondo piatto, la perdita del rilievo e il
   cursore - tre segnali, nessuno dei quali e' il solo colore.
   ---------------------------------------------------------------- */

/* ---- Campi ---- */
.field{margin-bottom:var(--s-4)}
.field label{display:block;font-size:var(--t-base);font-weight:600;color:var(--ink-2);margin-bottom:5px}
/* «input» qui vuol dire CAMPO DI TESTO. Il pallino e la casella di spunta sono
   input anche loro, ma dentro non si scrive: dare loro la larghezza piena
   allargava la scatola quanto la riga e il browser disegnava il pallino al
   centro, cosi' i quattro esiti della prima chiamata finivano a quattro
   ascisse diverse e non si capiva quale pallino appartenesse a quale voce.
   L'esclusione e' la stessa che la regola qui sotto aveva gia'. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select{width:100%;padding:11px 13px;font-size:14px;color:var(--ink)}
/* Dentro un'etichetta a bandiera — pallino a sinistra, testo che va a capo a
   destra — la scatola non deve ne' crescere ne' restringersi: resta 13x13 sul
   bordo sinistro anche quando l'etichetta occupa tre righe. L'allineamento
   verticale lo decide l'etichetta che la contiene, e quella non si tocca:
   l'intera etichetta resta cliccabile, il bersaglio non si riduce al pallino. */
:where(.field,.audit-field,.modal,.drawer,.panel) input:is([type="checkbox"],[type="radio"]){
  flex:none;width:auto
}
/* Le tendine sono i controlli delle decisioni vincolanti — il motivo della
   perdita, il servizio d'interesse, la durata, i consensi — e restavano
   all'altezza nativa del browser, una ventina di pixel accanto a campi di testo
   da 45: il bersaglio piu' piccolo della finestra proprio dove la scelta non e'
   facoltativa, e due rese diverse dello stesso controllo nella stessa finestra.

   Stessa imbottitura dei campi di testo, e stessa altezza. L'altezza va detta a
   parte perche' il browser disegna la riga interna di una tendina piu' bassa di
   quella di un campo di testo e non ascolta «line-height»: il conto e' quello
   del campo accanto — l'interlinea sul corpo del testo, piu' l'imbottitura
   dichiarata qui sopra e i due fili del bordo — scritto con i token, cosi' se
   uno dei tre cambia si muovono insieme.

   Il perimetro e' il CAMPO DI MODULO, non ogni tendina del CRM: in una barra di
   filtri o in una griglia di orari una tendina non e' un campo e non deve ne'
   stirarsi ne' crescere. */
:where(.field,.audit-field) select{
  min-height:calc(var(--lh) * var(--t-md) + 22px + 2px);
  padding:11px 13px;font-size:var(--t-md)
}

:where(.field,.audit-field,.board-search,.modal,.drawer,.panel) input:not([type="checkbox"]):not([type="radio"]),
:where(.field,.audit-field,.modal,.drawer,.panel) select,
:where(.field,.audit-field,.modal,.drawer,.panel) textarea{
  /* --line-strong e non --line: il contorno di un campo e' l'unica cosa che
     dice dove si scrive, e a 1.3:1 sul bianco praticamente non c'era. */
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;color:var(--ink);
  transition:border-color var(--transition-ui),box-shadow var(--transition-ui),background var(--transition-ui)
}
:where(.field,.audit-field,.board-search,.modal,.drawer,.panel) input:not([type="checkbox"]):not([type="radio"]):focus,
:where(.field,.audit-field,.modal,.drawer,.panel) select:focus,
:where(.field,.audit-field,.modal,.drawer,.panel) textarea:focus{
  border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-ring);outline:none
}

/* ---- Azione principale ----
   E' verde Innoform con il testo scuro, come nel riferimento approvato: nella
   sua schermata e' l'unica cosa verde, e si trova senza cercarla. Il blu resta
   ai collegamenti e al fuoco — «porta altrove» e «sei qui col dito o con la
   tastiera» — cosi' prima di premere si sa se qualcosa cambiera' o se ci si
   spostera' soltanto.
   L'unica eccezione e' il modulo di accesso, dove «Entra» resta blu con il
   testo bianco: sta in 10-accesso.css, dichiarata e motivata li'.

   Prima era larga quanto il contenitore per via del modulo di accesso, dove e'
   giusto che lo sia. Fuori di li' non lo e', e infatti l'editor email doveva
   annullare quella larghezza con due !important. La larghezza piena resta dov'e'
   nata: dentro .login. */
:where(.btn,.actbtn,.privacy-save,.support-open){
  min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 15px;border:1px solid var(--brand-green);border-radius:var(--radius-sm);
  background:var(--brand-green);color:var(--on-green);font-size:var(--t-base);font-weight:700;line-height:1.2;
  box-shadow:0 4px 11px rgba(104,143,20,.20);
  transition:transform var(--transition-ui),background var(--transition-ui),border-color var(--transition-ui),box-shadow var(--transition-ui)
}
:where(.btn,.actbtn,.privacy-save,.support-open):hover:not(:disabled){
  border-color:var(--brand-green-hover);background:var(--brand-green-hover);color:var(--on-green);
  box-shadow:0 7px 16px rgba(104,143,20,.26);transform:translateY(-1px)
}
:where(.btn,.actbtn,.privacy-save,.support-open):active:not(:disabled){
  border-color:var(--brand-green-pressed);background:var(--brand-green-pressed);box-shadow:var(--shadow-xs);transform:none
}
:where(.btn,.actbtn,.privacy-save,.support-open):disabled{
  background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);
  box-shadow:none;transform:none
}
.login .btn{width:100%}

/* ---- Azione secondaria ----
   Il contorno era --line, cioe' il filo che separa due righe di tabella: 1.2:1
   sul bianco. Su un pulsante non e' una rifinitura ma il suo unico confine —
   senza fondo e senza rilievo, e' l'unica cosa che dice fin dove si puo'
   premere — e a 1.2:1 quel confine non c'era. Adesso porta --line-strong, lo
   stesso contorno dei campi, a 4.5:1.
   L'etichetta resta --ink-2 e non diventa piu' scura: il divario col comando
   principale non lo fa il peso del testo, lo fa il fondo pieno. Un secondario
   con la scritta nera e il verde accanto competerebbero, ed e' il contrario di
   quello che serve. */
:where(.cta,.lead-action,.lead-page-btn,.lead-reset,.enr-btn){
  min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:8px 13px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;
  color:var(--ink-2);font-size:var(--t-base);font-weight:650;line-height:1.2;box-shadow:var(--shadow-xs);
  transition:transform var(--transition-ui),color var(--transition-ui),background var(--transition-ui),border-color var(--transition-ui),box-shadow var(--transition-ui)
}
/* Il passaggio del mouse prende lo stesso blu di «.sec»: erano due azzurri a
   un decimo di distanza per la stessa cosa, e il primo — #9db4f5 — su bianco
   valeva 2.0:1, cioe' al contatto il contorno si schiariva invece di
   rafforzarsi. */
:where(.cta,.lead-action,.lead-page-btn,.lead-reset,.enr-btn):hover:not(:disabled){
  border-color:var(--brand-blue);background:var(--brand-blue-soft);color:var(--brand-blue);
  box-shadow:0 4px 10px rgba(23,75,234,.1);transform:translateY(-1px)
}
:where(.cta,.lead-action,.lead-page-btn,.lead-reset,.enr-btn):active:not(:disabled){background:#e4edff;box-shadow:none;transform:none}
:where(.cta,.lead-action,.lead-page-btn,.lead-reset,.enr-btn):disabled{
  background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);
  box-shadow:none;transform:none
}
/* Una secondaria distruttiva: stessa forma, tinta di pericolo solo al contatto. */
.cta.danger{border-color:#efb9bd;color:var(--danger)}
.cta.danger:hover:not(:disabled){border-color:var(--danger);background:var(--danger-tint);color:#ac252e}

/* ---- Conferma di un esito ---- */
:where(.btn-ok,.lead-action.primary){
  min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:9px 14px;border:1px solid var(--ok);border-radius:var(--radius-sm);background:var(--ok);
  color:#fff;font-size:var(--t-base);font-weight:700;box-shadow:0 4px 11px rgba(23,132,71,.16);
  transition:transform var(--transition-ui),filter var(--transition-ui),box-shadow var(--transition-ui)
}
:where(.btn-ok,.lead-action.primary):hover:not(:disabled){
  border-color:var(--ok);background:var(--ok);color:#fff;filter:brightness(.93);
  box-shadow:0 7px 15px rgba(23,132,71,.2);transform:translateY(-1px)
}
:where(.btn-ok,.lead-action.primary):disabled{
  background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);
  box-shadow:none;transform:none;filter:none
}

/* ---- Distruttivo ---- */
.btn-danger{
  min-height:var(--control-height);display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:9px 14px;border:1px solid #efb9bd;border-radius:var(--radius-sm);background:#fff;
  color:var(--danger);font-size:var(--t-base);font-weight:700;box-shadow:var(--shadow-xs);
  transition:transform var(--transition-ui),color var(--transition-ui),background var(--transition-ui),border-color var(--transition-ui)
}
.btn-danger:hover:not(:disabled){border-color:var(--danger);background:var(--danger-tint);color:#ac252e;transform:translateY(-1px)}
.btn-danger:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);box-shadow:none;transform:none}

/* ---- Passaggio ad altro ----
   Non ha bordo ne' fondo: non e' un comando che agisce, e' un collegamento.
   Distinguerlo dai quattro pulsanti sopra e' l'unico modo che ha l'utente per
   sapere, prima di premere, se qualcosa cambiera' o si spostera' soltanto. */
.lnk{border:0;background:none;padding:2px 4px;border-radius:var(--radius-xs);color:var(--brand-blue);font-weight:650;transition:color var(--transition-ui),background var(--transition-ui)}
.lnk:hover:not(:disabled){background:var(--brand-blue-soft);color:var(--brand-blue-hover)}
/* Un passaggio spento non e' un pulsante spento: non ha fondo da spegnere, e
   quello che deve restare leggibile e' la sola parola. */
.lnk:disabled{color:var(--disabled-ink)}

/* ---- Controllo segmentato ----
   Stava qui come classe del singolo PULSANTE — «.seg» su ognuno dei due o tre
   comandi — e in due schermate era gia' usata come classe del CONTENITORE. Due
   significati per lo stesso nome sono due rese diverse della stessa cosa.
   La forma unica e' quella del mockup approvato: il contenitore e' la striscia,
   i pulsanti stanno dentro. Sta in 06-blocchi.css, con gli altri blocchi che
   piu' schermate condividono. */

/* ---- Superfici ----
   Un riquadro e' sempre lo stesso riquadro: stesso bordo, stesso raggio,
   nessuna ombra. Un contenuto fisso non galleggia: sta appoggiato, e a
   delimitarlo basta un filo. L'ombra e' un segnale, e va spesa dove significa
   qualcosa - una finestra aperta sopra il lavoro, una tendina, una scheda a
   scomparsa - non su ogni scatola della pagina. */
:where(.panel,.tblwrap,.board-tools,.support-sidebar,.support-detail,.support-faq,.timeline-box,.daypanel,.kpi){
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:none
}
.tblwrap{overflow:hidden}

/* ---- Tabella ----
   In un elenco il dato che si cerca e' il nome nella prima colonna: quello sta
   in --t-md e in --ink, il resto in --t-base e --slate. Prima erano tutti
   uguali e l'occhio doveva leggere ogni cella per trovare la riga giusta. */
table.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700;padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--line);background:var(--testa)}
.tbl td{padding:var(--s-3) var(--s-5);border-bottom:1px solid var(--hair);font-size:var(--t-base);color:var(--slate);vertical-align:middle}
.tbl td:first-child{font-size:var(--t-md);color:var(--ink)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr{transition:background var(--transition-ui)}
.tbl tbody tr:hover td{background:var(--brand-blue-soft)}

/* ---- Pastiglie di stato ---- */
.statuspill{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-sm);font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid transparent;background:var(--hair);color:var(--slate)}
.st-ok{background:var(--ok-tint);color:var(--ok)}

/* ---- Numeri di sintesi ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-4);margin-bottom:var(--s-6)}
.kpi{padding:var(--s-5)}
.klabel{font-size:var(--t-base);color:var(--muted)}
.kval{font-size:var(--t-2xl);color:var(--ink);margin-top:var(--s-2);font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums}

/* ---- Messaggi ----
   Tre toni e non di piu': rosso quando qualcosa non e' andato, giallo quando
   c'e' da sapere una cosa prima di procedere, verde quando e' andata. */
.errbox{background:var(--danger-tint);color:var(--danger);padding:var(--s-3) var(--s-4);border-radius:var(--radius-sm);font-size:var(--t-base);line-height:var(--lh);margin-bottom:var(--s-3)}
.noticebox{background:#fff8e8;color:#76520d;border:1px solid #f2d99e;padding:var(--s-3) var(--s-4);border-radius:var(--radius-sm);font-size:var(--t-base);line-height:var(--lh);margin-bottom:var(--s-4)}
.hint{color:var(--muted);font-size:var(--t-sm);line-height:var(--lh)}

/* ---- Stato vuoto ----
   Non e' un errore: e' una schermata che aspetta. Dice cosa manca e come
   riempirla, quindi ha sempre un titolo, una spiegazione e, quando esiste, il
   comando che la fa smettere di essere vuota. */
.empty{text-align:center;padding:44px var(--s-5)}
.empty .ei{width:52px;height:52px;border-radius:var(--radius-lg);background:var(--hair);color:var(--slate);display:grid;place-items:center;margin:0 auto var(--s-4)}
.empty h3{font-size:var(--t-lg);margin-bottom:var(--s-2)}
.empty p{color:var(--muted);font-size:var(--t-md);max-width:360px;margin:0 auto var(--s-4);line-height:var(--lh)}
.col__empty{padding:var(--s-5) var(--s-4);color:var(--muted);font-size:var(--t-base);text-align:center;line-height:var(--lh)}

/* ---- Una riga dei Collegamenti che porta a una scheda ----
   Non riusa `.drow`, e non e' pigrizia al contrario: `.drow` e' fatta per
   «etichetta a sinistra, valore a destra», e sotto i 600 px allinea a destra il
   proprio `b` (vedi 70-smartphone.css). Qui il `b` e' il TITOLO, sta a sinistra
   e ha lo stato sotto di se': ereditare quella regola lo avrebbe spinto contro
   il bordo destro, disallineato dalla riga che gli sta sotto.
   Il comando e' un bersaglio touch. `.sec` nasce alto 30 px, che va bene per un
   mouse e non per un pollice: dentro questa riga cresce, come gia' fa dentro la
   checklist dei requisiti. */
.collegamento{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--hair);font-size:13px
}
.collegamento:last-of-type{border-bottom:0}
.collegamento__t{min-width:0}
.collegamento__t b{display:block;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.collegamento__s{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:3px}
.collegamento__d{font-size:11.5px;color:var(--faint)}
.collegamento .sec{flex-shrink:0;min-height:36px}
@media(max-width:600px){.collegamento .sec{min-height:44px}}
.spin{animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}

/* ===== 06-blocchi.css ===== */
/* ---- I due blocchi che si ripetono in tutto il CRM ----

   Il riquadro con un titolo e il numero di sintesi comparivano in otto
   schermate, e in otto schermate erano ridisegnati a mano dentro il JSX con
   numeri propri: raggio 12 qui e 14 là, titolo 13.5 qui e 13 là, azione a
   destra allineata in tre modi diversi. Nessuno di questi scarti si nota da
   solo; tutti insieme sono la ragione per cui il CRM sembra fatto da persone
   che non si parlano.
   Adesso sono due componenti, scritti qui una volta.
   ---------------------------------------------------------------- */

/* ---- Riquadro ----
   Un titolo, al massimo un'azione, un contenuto. Se serve una seconda azione,
   la domanda giusta e' se non siano due riquadri. */
.riquadro{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden
}
/* L'intestazione e' azzurrata e chiusa da un filo verde. Le due cose fanno un
   mestiere solo: dire dove comincia una sezione senza aggiungere una riga di
   testo. Il filo e' decorazione — nessuna informazione passa di li' — ed e' per
   questo che puo' essere tenue. */
.riquadro__testa{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-4) var(--s-5);background:var(--testa);
  border-bottom:2px solid var(--brand-green-line)
}
.riquadro__titolo{margin:0;font-size:var(--t-lg);font-weight:650;color:var(--ink)}
/* La riga sotto il titolo dice a cosa serve il riquadro. Quando c'e'. */
.riquadro__sottotitolo{display:block;margin-top:3px;font-size:var(--t-sm);font-weight:400;color:var(--muted)}
.riquadro__corpo{padding:var(--s-5)}
/* Un riquadro che contiene una tabella non ha bisogno di margini interni: la
   tabella ha gia' i suoi. */
.riquadro__corpo--tabella{padding:0}
.riquadro+.riquadro{margin-top:var(--s-4)}

/* ---- Numero di sintesi ----
   Etichetta piccola sopra, numero grande, nota piccola sotto: sempre in
   quest'ordine e sempre con questi tre pesi. Il numero e' l'unica cosa che si
   deve vedere da lontano, ed e' per questo che la scala arriva a 30 px.
   La striscia si adatta al numero di riquadri senza dover contare le colonne
   a mano: erano dichiarate «repeat(5,1fr)» nel JSX, e bastava aggiungerne uno
   perche' andassero a capo tutte storte. */
.sintesi{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--s-3);margin-bottom:var(--s-6)
}
.sintesi__voce{
  display:flex;flex-direction:column;gap:var(--s-1);
  padding:var(--s-4) var(--s-5);text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);
  transition:border-color var(--transition-ui),background var(--transition-ui)
}
/* Se il riquadro porta da qualche parte lo deve dire prima del clic, non dopo. */
button.sintesi__voce{cursor:pointer}
button.sintesi__voce:hover{border-color:#b9c9f2;background:var(--brand-blue-soft)}
.sintesi__etichetta{
  font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.sintesi__valore{font-size:var(--t-num);font-weight:700;color:var(--ink);line-height:1.05}
.sintesi__valore.ok{color:var(--ok)}
.sintesi__valore.attenzione{color:var(--amber)}
.sintesi__nota{font-size:var(--t-sm);color:var(--muted);line-height:1.4}

/* ---- Riga di dati dentro un riquadro ----
   Etichetta a sinistra, valore a destra, un filo fra una riga e l'altra.
   La usano le quattro schede e i pannelli di riepilogo. */
.riga-dato{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-3) 0;border-bottom:1px solid var(--hair);font-size:var(--t-base)
}
.riga-dato:last-child{border-bottom:0}
.riga-dato>span:first-child{color:var(--muted);flex-shrink:0}
.riga-dato>b,.riga-dato>span:last-child{color:var(--ink);text-align:right;font-weight:600;min-width:0}

@media(max-width:700px){
  .sintesi{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s-2)}
  .sintesi__voce{padding:var(--s-3) var(--s-4)}
  .sintesi__valore{font-size:24px}
  .riquadro__testa,.riquadro__corpo{padding:var(--s-4)}
}

/* ---- Striscia delle viste ----
   Una schermata, piu' modi di guardarla: Pipeline/Storico, Mese/Settimana/
   Giorno, le sette viste del Marketing. Il contenitore E' la striscia; i
   pulsanti stanno dentro e non hanno bordo proprio.

   Perche' scorre invece di allargarsi: le sette etichette del Marketing fanno
   piu' di 500 px, e dentro 390 «Template WhatsApp» e «Automazioni» finivano
   fuori dal telaio — raggiungibili solo scorrendo in orizzontale TUTTO il
   contenuto. Qui la striscia si ferma allo spazio disponibile e, quando non
   basta, scorre dentro se' stessa: la pagina non si muove.
   «min-width:0» serve perche', dentro un contenitore flessibile, il minimo
   automatico e' la larghezza del contenuto e impedirebbe il restringimento. */
.seg{
  display:inline-flex;padding:2px;background:var(--side);border-radius:var(--r-sm);gap:2px;
  max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin
}
/* Le etichette non si comprimono: «Template WhatsApp» non deve diventare
   «Template W…». Se non ci stanno tutte si scorre, non si abbrevia. */
.seg button{
  border:0;background:transparent;border-radius:6px;padding:5px 10px;font-size:var(--t-xs);
  font-weight:650;color:var(--slate-700);white-space:nowrap;flex-shrink:0
}
.seg button.on{background:var(--panel);color:var(--blue-700);box-shadow:var(--shadow-xs)}
.seg button:hover:not(.on):not(:disabled){color:var(--blue-700)}
/* «overflow-x:auto» rende la striscia un contenitore scorrevole, e per un
   contenitore scorrevole la dimensione minima automatica non e' piu' il proprio
   contenuto ma ZERO. Dentro una finestra — che e' una griglia — la riga si
   dimensiona su quel minimo e la striscia collassava a pochi pixel. Li' lo
   scorrimento orizzontale non serve, e toglierlo restituisce alla riga la sua
   misura naturale. */
.modal .seg{overflow-x:visible;flex-wrap:wrap}

/* ---- Barra degli strumenti di una schermata ----
   La striscia delle viste a sinistra, i totali a destra. E' UNA sola e non si
   ridisegna cambiando vista: la usano Pipeline, Marketing e Amministrazione. */
.btools{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);flex-wrap:wrap}
.btools .cerca{
  flex:1;min-width:180px;max-width:320px;height:34px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:0 12px;font-size:var(--t-sm)
}
.btools select{
  height:34px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:0 10px;font-size:var(--t-sm);background:var(--panel)
}
.btools__conta{margin-left:auto;display:flex;gap:var(--s-4);align-items:baseline;font-size:var(--t-xs);color:var(--faint)}
.btools__conta b{font-size:var(--t-base);color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- Campo di ricerca con la lente dentro ----
   Lo usano la ricerca globale della testata e le barre degli elenchi. Stava nel
   foglio della Board — dove era finito per caso, essendo la Board la prima ad
   averlo — e da li' se ne dipendeva senza saperlo. */
.board-search{position:relative;flex:1;min-width:200px}
.board-search input{
  width:100%;height:34px;padding:0 12px 0 34px;border:1px solid var(--line-strong);
  border-radius:9px;background:var(--panel);font-size:var(--t-sm)
}
.board-search svg{position:absolute;left:11px;top:9px;color:var(--faint)}
/* Nome storico della barra degli strumenti di un elenco: e' «.btools» con un
   altro nome, e le schermate che lo portano ancora si comportano uguale. */
.board-tools{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-3)}

/* ---- Una funzione che non c'e' non si traveste da pulsante spento ----
   Si scrive. Non e' premibile, non riceve il fuoco, non promette niente. */
.nondisp{font-size:var(--t-xs);color:var(--faint);font-style:italic}

/* ---- Titolo di sezione dentro una scheda ---- */
.sez{
  display:flex;align-items:center;gap:10px;margin:var(--s-5) 0 var(--s-2);font-size:var(--t-xs);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)
}
.sez::after{content:'';flex:1;height:1px;background:var(--line)}

/* ---- Riquadro di spiegazione ----
   Non e' un errore e non e' un successo: e' una cosa da sapere prima di
   procedere. Le due varianti colorate dicono com'e' andata. */
.avviso{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);background:var(--testa-2);font-size:var(--t-sm);line-height:var(--lh)}
.avviso--persa{background:var(--danger-bg);border-color:#F0C3C9}
.avviso--ok{background:var(--ok-bg);border-color:#BEE3D2}
.avviso b{display:block;margin-bottom:3px;color:var(--ink)}
.nota{font-size:var(--t-xs);color:var(--faint);margin-top:var(--s-2);line-height:var(--lh)}

/* ---- Elenco etichetta/valore ----
   Il corpo di ogni scheda compatta: dettaglio dell'agenda, riquadri di
   riepilogo, pannelli laterali. */
.dl{display:grid;grid-template-columns:118px minmax(0,1fr);gap:6px var(--s-3);padding:var(--s-4);font-size:var(--t-sm)}
.dl dt{color:var(--faint)}
.dl dd{margin:0;color:var(--ink);font-weight:600;min-width:0;overflow-wrap:anywhere}

/* ---- Requisiti di stadio: una riga, un comando ----
   Un elenco puntato dice che cosa manca e poi lascia chi guarda a cercare da
   solo dove si rimedia: e' un vicolo cieco con l'aria di una spiegazione. Ogni
   requisito e' invece una riga con il proprio stato e il proprio comando, e
   quel comando porta al punto della scheda dove quella cosa si sistema. */
.req{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:var(--s-3);padding:9px 0;border-bottom:1px solid #E4EAF2
}
.req:last-of-type{border-bottom:0;padding-bottom:2px}
.req__s{flex-shrink:0;font-weight:800;width:14px;text-align:center}
.req__s.manca{color:var(--warn)}
.req__s.fatto{color:var(--ok)}
.req__c{min-width:0;font-size:var(--t-sm)}
.req__c b{display:block;font-weight:650;color:var(--ink)}
.req__c.fatto b{font-weight:400;color:var(--faint);text-decoration:line-through}
.req__c small{display:block;font-weight:400;color:var(--faint);font-size:var(--t-xs);margin-top:2px}
.req__a{justify-self:end;display:flex}
/* Il comando del requisito e' il punto in cui si rimedia, cioe' quello che si
   preme piu' spesso: e' un bersaglio touch, non un collegamento sottile. */
.req__a .sec{min-height:36px}
/* Il requisito sospeso: manca, ma non per chi guarda. L'ambra e' una richiesta
   di intervento e qui non c'e' nessun intervento possibile, quindi il segno e'
   grigio e non e' un cerchio da riempire — e' una lineetta. */
.req__s.sospeso{color:var(--faint);font-weight:650}
.req__c .req__sospeso{color:var(--slate);font-weight:600}
.reqbox{border-radius:var(--r-md);padding:11px 13px;margin:12px 0;border:1px solid}
.reqbox--manca{background:var(--warn-bg);border-color:#F5D9A8}
.reqbox--ok{background:var(--ok-bg);border-color:#BEE3D2}
/* Quando l'unica cosa che manca e' cio' che il pilot non gestisce, il riquadro
   e' neutro: non c'e' niente da correggere, c'e' qualcosa che non c'e' ancora. */
.reqbox--sospeso{background:var(--hair);border-color:var(--line)}
.reqbox__t{display:block;font-size:var(--t-sm);font-weight:700;margin-bottom:2px}
.reqbox--manca .reqbox__t{color:var(--warn)}
.reqbox--ok .reqbox__t{color:var(--ok)}
.reqbox--sospeso .reqbox__t{color:var(--slate)}
/* Dentro il riquadro del passo successivo il margine lo mette il contenitore:
   sommandoli, l'elenco dei requisiti si staccava dalla frase che lo introduce. */
.passo__corpo .reqbox{margin:0}

/* ---- Il passo successivo ----
   Il riquadro che lead e trattativa condividono. La testata dice DOVE si e',
   il corpo COSA si deve fare — un comando solo — e «Altre azioni» tiene il
   resto raggiungibile senza metterlo alla pari del passo.

   La gerarchia e' tutta qui: il comando primario e' l'unica cosa a piena
   evidenza nel corpo. Se un giorno ne comparissero due affiancati, sarebbe il
   segno che qualcuno ha rimesso in circolo la scelta che questo riquadro
   esiste per togliere. */
.passo{margin:14px 0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);overflow:hidden}
.passo__testa{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 10px;
  padding:10px 13px;background:var(--testa);border-bottom:2px solid var(--brand-green-line)
}
.passo__et{font-size:var(--t-xs);font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.passo__fase{font-size:var(--t-sm);color:var(--faint);margin-left:auto}
.passo__fase b{color:var(--ink);font-weight:700}
.passo__corpo{padding:12px 13px;display:flex;flex-direction:column;gap:10px}
/* Il comando e la frase che lo accompagna stanno sulla stessa riga finche' ci
   stanno: la frase spiega il pulsante, e sotto di esso si legge come una nota
   staccata da cio' che descrive. */
.passo__pronta{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.passo__pronta p{margin:0;flex:1 1 200px;font-size:var(--t-sm);color:var(--faint);line-height:1.45}
.passo__altre{border-top:1px solid var(--hair);padding:9px 13px}
.passo__altre>summary{cursor:pointer;font-size:var(--t-sm);color:var(--faint)}
.passo__altre-corpo{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
/* Le uscite dal percorso non stanno accanto al passo successivo: affiancate a
   quello si scelgono per distrazione. Vedi la stessa regola sul lead.
   La regola di base resta quella del LEAD, dove il blocco vive ancora dentro
   `.passo__altre` e l'imbottitura laterale gliela presta il pieghevole. */
.passo__uscite{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
/* La trattativa invece lo tiene in coda al riquadro, fuori da ogni pieghevole:
   li' l'imbottitura laterale non gliela presta nessuno e se la deve dare da
   se'. Stessi 13 px del corpo, cosi' la frase e il comando restano incolonnati
   con quello che sta sopra. Un modificatore, non una modifica alla regola
   condivisa: il lead non deve muoversi di un pixel. */
.passo__uscite--coda{margin-top:0;padding:10px 13px 12px}
.passo__uscite--coda>.btn-danger{min-height:38px}
.passo__uscite p{margin:0 0 6px;font-size:var(--t-sm);color:var(--faint);line-height:1.45}
.passo__coda{border-top:1px solid var(--hair);padding:9px 13px}

/* ---- L'avviso di una funzione sospesa nel pilot ----
   Sempre la stessa resa, ovunque compaia: titolo di cosa non c'e' e una frase
   che dice perche' e quando tornera'. Non e' un errore e non e' un allarme —
   niente rosso, niente ambra: e' un'informazione di cantiere. */
.pilot-avviso{
  display:block;margin:12px 0;padding:11px 13px;
  border:1px dashed var(--line);border-radius:var(--r-md);background:var(--hair)
}
.pilot-avviso b{display:block;font-size:var(--t-sm);font-weight:700;color:var(--slate);margin-bottom:3px}
.pilot-avviso span{display:block;font-size:var(--t-sm);font-weight:400;color:var(--faint);line-height:1.45}
/* Dentro un riquadro dei requisiti l'avviso e' gia' circondato: perde il fondo
   e tiene solo il filo superiore, altrimenti sono due scatole una nell'altra. */
.pilot-avviso--incassato{
  margin:9px 0 0;padding:9px 0 0;background:none;
  border:0;border-top:1px solid var(--line);border-radius:0
}

/* A 480 px le tre colonne non entrano: il comando passa sotto a tutta
   larghezza invece di stringere il testo del requisito fino a renderlo
   illeggibile. */
@media(max-width:479.98px){
  .req{grid-template-columns:auto minmax(0,1fr)}
  .req__a{grid-column:1/-1;justify-self:stretch;margin-top:7px}
  .req__a .sec{width:100%;justify-content:center;min-height:44px}
}

/* ---- Testo per i soli lettori di schermo ----
   Non «display:none» e non «visibility:hidden»: tolgono l'elemento dall'albero
   accessibile, che e' il contrario di quel che serve. */
.solo-lettori{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap
}

@media(max-width:479.98px){
  .dl{grid-template-columns:1fr;gap:2px var(--s-3)}
  .dl dt{margin-top:6px}
}

/* La griglia della Dashboard non sta piu' qui: la Dashboard e' stata
   ricostruita sul mockup e ha la sua, «.dcolonne», in 22-dashboard.css. Quella
   di prima era l'unica cosa specifica di una schermata dentro un foglio di
   blocchi condivisi, e non aveva piu' nessuno che la usasse.
   Restano invece «.sintesi» e «.riquadro»: oggi non li usa piu' nessuno — la
   Dashboard era il loro ultimo lettore — ma sono i blocchi generici a cui le
   altre schermate attingeranno quando toccherà a loro. Toglierli adesso
   vorrebbe dire riscriverli fra poco. */

/* ===== 10-accesso.css ===== */
/* ---- Accesso, verifica a due passi, sessione scaduta ----
   Le uniche schermate che si vedono da fuori. Campi, pulsanti e messaggi
   d'errore non stanno qui: sono gli stessi di tutto il CRM e vivono in
   05-controlli.css. Qui resta solo cio' che e' proprio dell'accesso.
   ---------------------------------------------------------------- */

/* ---- «Entra»: l'unica azione principale che non e' verde ----
   Ovunque nel CRM il comando principale e' verde Innoform. Qui no, ed e' una
   scelta dichiarata: la pagina di accesso non ha una barra, non ha una sezione
   corrente, non ha niente di verde attorno a se'. Un pulsante verde in mezzo a
   una carta bianca leggerebbe come un esito - «fatto» - proprio nel punto in
   cui non e' ancora successo niente. Resta blu, che qui vuol dire «prosegui»,
   col testo bianco a 6.5:1.

   Il difetto che questa regola corregge non era il colore ma l'opacita': a
   campi vuoti - e durante l'attesa, che e' lo stesso stato per il browser -
   il pulsante si spegneva sbiadendo per intero, scritta compresa, e «Entra»
   spariva quasi del tutto. Qui lo stato spento e' dichiarato: fondo blu
   spento, testo bianco a 4.8:1, nessun rilievo, cursore negato. Le condizioni
   che lo accendono non cambiano: le decide il modulo, non questo foglio. */
.login .btn{
  background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;
  box-shadow:0 4px 11px rgba(23,75,234,.18)
}
.login .btn:hover:not(:disabled){
  background:var(--brand-blue-hover);border-color:var(--brand-blue-hover);color:#fff;
  box-shadow:0 7px 16px rgba(23,75,234,.22)
}
.login .btn:active:not(:disabled){
  background:var(--brand-blue-pressed);border-color:var(--brand-blue-pressed);color:#fff
}
.login .btn:disabled{
  background:#5a72a8;border-color:#5a72a8;color:#fff;
  box-shadow:none;transform:none;cursor:not-allowed
}
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 500px at 50% -10%, #eaf0ff, var(--canvas));padding:20px}
.login__card{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-lg);padding:30px}
.login__logo-wrap{display:flex;justify-content:center;align-items:center;margin:0 0 25px;padding-bottom:20px;border-bottom:1px solid var(--hair)}
.login__logo{display:block;width:100%;max-width:218px;height:auto}
.login__trust{margin-top:20px;padding-top:18px;border-top:1px solid var(--hair);text-align:center}
.login__trust-copy{margin:0 0 11px;color:var(--muted);font-size:11.5px;line-height:1.45}
.login__protected{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--ok-tint);border:1px solid #C7EBD3;color:var(--ok);font-size:11.5px;font-weight:700}
.login__powered{margin-top:12px;color:var(--faint);font-size:10.5px}.login__powered b{color:var(--slate);font-weight:650}
.brandline{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:700;font-size:18px;color:var(--ink);margin-bottom:22px}
.brandline span{color:var(--faint);font-weight:500}
.mk{width:30px;height:30px;border-radius:9px;background:var(--navy-900);display:grid;place-items:center}
.mk i{width:9px;height:9px;border-radius:50%;background:var(--lime);display:block}
.login h2{font-size:22px;margin-bottom:4px}
.login .sub{color:var(--muted);font-size:13px;margin-bottom:22px}
.authhint{text-align:center;color:var(--faint);font-size:var(--t-sm);margin-top:var(--s-4)}
.login__otp-copy{margin:0 0 18px;color:var(--muted);font-size:13px;line-height:1.55}.login__otp-copy b{color:var(--ink)}
.login__otp{width:100%;height:56px;border:1px solid var(--line);border-radius:11px;text-align:center;font-family:'Space Grotesk';font-size:25px;font-weight:700;letter-spacing:8px;color:var(--ink)}.login__otp:focus{outline:none;border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-ring)}
.login__otp-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 16px;color:var(--muted);font-size:11.5px}.login__otp-meta b{color:var(--ink)}
.login__otp-actions{display:grid;gap:9px}.login__secondary{width:100%;min-height:42px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink-2);font-weight:650}.login__secondary:hover:not(:disabled){border-color:var(--navy);color:var(--navy)}.login__secondary:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed}
.login__back{display:block;margin:14px auto 0;padding:5px 8px;border:0;background:transparent;color:var(--muted);font-size:11.5px;font-weight:650}.login__back:hover{color:var(--ink)}
@media(max-width:480px){.login{padding:14px}.login__card{padding:24px 20px;border-radius:16px}.login__logo{max-width:180px}.login__logo-wrap{margin-bottom:20px;padding-bottom:17px}.login .field input{font-size:16px}.login .btn{min-height:46px}.login__trust{margin-top:18px;padding-top:16px}}

.idle-overlay{position:fixed;inset:0;z-index:220;background:rgba(15,22,40,.58);display:grid;place-items:center;padding:20px;backdrop-filter:blur(2px)}
.idle-dialog{width:100%;max-width:430px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:0 20px 60px rgba(15,22,40,.26);padding:24px;text-align:center}
.idle-dialog__icon{width:48px;height:48px;margin:0 auto 14px;border-radius:14px;background:#FFF4D9;color:#A66C00;display:grid;place-items:center}.idle-dialog h2{font-size:20px;margin-bottom:8px}.idle-dialog p{margin:0 auto;color:var(--muted);font-size:13px;line-height:1.55;max-width:340px}
.idle-dialog__time{margin:18px 0 16px;font-family:'Space Grotesk';font-size:28px;font-weight:700;color:var(--ink)}.idle-dialog__time span{display:block;margin-top:2px;font-family:'Inter';font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.idle-dialog__actions{display:flex;gap:9px}.idle-stay{flex:1;border:0;border-radius:10px;background:var(--brand-green);color:var(--on-green);padding:11px 14px;font-weight:700}.idle-stay:hover{background:var(--brand-green-hover)}.idle-exit{border:1px solid var(--line-strong);border-radius:10px;background:#fff;padding:11px 14px;font-weight:600}.idle-exit:hover{border-color:var(--danger);color:var(--danger)}
@media(max-width:380px){.idle-overlay{padding:12px}.idle-dialog{padding:20px 16px}.idle-dialog__actions{flex-direction:column-reverse}.idle-stay,.idle-exit{width:100%;min-height:44px}}

/* ===== 20-guscio.css ===== */
/* ---- Guscio: barra delle sezioni, menu esteso, testata, area di lavoro ----
   La cornice che non cambia mai. Se cambia qualcosa qui, cambia in tutte e
   diciotto le schermate: e' il posto dove la coerenza si vince o si perde.

   E' il telaio del mockup approvato, trasferito. La forma di prima aveva UNA
   colonna sola che faceva due mestieri: a riposo mostrava le icone, aperta si
   allargava a 236 px con dentro gruppi, etichette e il blocco del profilo.
   Due stati della stessa cosa, quindi due disegni da tenere allineati a mano,
   e il profilo raggiungibile solo da li'.
   Qui i mestieri sono due e le superfici sono due:
     .rail  le sezioni che si usano ogni giorno, sole icone, sempre 64 px;
     .menu  l'elenco COMPLETO, in sovrapposizione, con i gruppi e i nomi.
   La rail non si allarga mai e il menu non occupa spazio mai: la larghezza
   dell'area di lavoro e' una sola, sempre, qualunque cosa sia aperta.

   Il responsive: il mockup non ha @media perche' vive dentro un simulatore e
   legge «data-w» del telaio. Qui il telaio e' la finestra vera, quindi le sue
   quattro fasce diventano le tre soglie che le separano (mockup, riga 6449:
   «const FASCE = [[480,'390'],[880,'830'],[1100,'900']]»):
     oltre 1100   fascia 1366 — tutto in vista
     880-1099     fascia 900  — cinque indicatori diventano tre
     480-879      fascia 830  — la ricerca lascia la barra e diventa una fascia
     sotto 480    fascia 390  — la rail sparisce, comanda il menu
   Le soglie sono scritte come max-width e si sommano, come nel mockup si
   sommavano le regole enumerate una fascia per volta.
   ---------------------------------------------------------------- */

/* ---------- Guscio ---------- */
.app{display:grid;grid-template-columns:64px 1fr;height:100vh;position:relative;background:var(--canvas)}
.app>.main{grid-column:2;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}

/* ---------- Marchio Innoform ----------
   Un solo file, quello gia' in uso nel CRM (/assets/innoform-email-logo-v2.png,
   640x158): non esiste un pittogramma separato e non se ne inventa uno. La
   versione compatta si ottiene mostrando solo la parte sinistra del marchio —
   la molecola — attraverso una finestra di 34 px: il file non viene toccato,
   cambia solo quanto se ne vede. */
.marchio{display:block;border:0;background:transparent;padding:0;line-height:0;border-radius:8px}
.marchio--c{
  width:34px;height:34px;overflow:hidden;position:relative;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line);border-radius:8px;flex-shrink:0
}
.marchio--c img{position:absolute;left:1px;top:0;height:34px;width:auto;max-width:none}
.marchio--pieno img{height:30px;width:auto;display:block}
.marchio--c:hover,.marchio--pieno:hover{opacity:.85}
.rail__marchio{margin-bottom:6px}
.menu__marchio{padding:6px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
/* Sotto i 480 px la barra delle sezioni sparisce: il marchio compatto passa
   nella testata, accanto al comando che apre il menu. */
.bar__marchio{display:none}

/* ---------- La barra delle sezioni ---------- */
.rail{
  background:var(--side);border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;
  padding:10px 0;gap:2px;overflow:hidden
}
.rail__b{
  width:40px;height:40px;border:0;background:transparent;border-radius:9px;
  display:grid;place-items:center;color:var(--slate-700);position:relative
}
.rail__b:hover{background:var(--blue-50);color:var(--blue-700)}
/* La sezione aperta si riconosce da tre segnali insieme — fondo, colore e
   barretta a sinistra — perche' il solo colore non basta a chi non lo
   distingue. */
.rail__b.on{background:var(--lime-100);color:var(--lime-700);box-shadow:inset 3px 0 0 var(--lime-500)}
.rail__sep{flex:1}
/* Il nome del comando compare al passaggio del mouse. Non e' il nome
   accessibile: quello ce l'ha gia' il pulsante in «aria-label», e resta li'
   anche quando il mouse non c'e'. */
.rail__b[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;left:48px;white-space:nowrap;
  background:var(--ink);color:#fff;padding:4px 8px;border-radius:6px;
  font-size:var(--t-xs);z-index:80;pointer-events:none
}
.rail__b .ic,.menu__v .ic,.hamb .ic{display:block;flex-shrink:0}

/* ---------- Menu esteso, in sovrapposizione ----------
   Il velo raccoglie il clic fuori. Appena velato: serve a dire che il resto
   adesso non si tocca, non a nascondere quello che c'e' sotto. E' fuori
   dall'ordine di tabulazione — «tabindex=-1» — perche' chi usa la tastiera ha
   gia' Esc, che fa la stessa cosa e la dichiara. */
.velo{position:absolute;inset:0;background:rgba(17,26,44,.10);z-index:60;border:0;cursor:default}
.menu{
  position:absolute;top:0;left:0;bottom:0;width:280px;
  background:var(--side);border-right:1px solid var(--line);
  z-index:70;box-shadow:6px 0 28px rgba(17,26,44,.18);
  padding:10px 12px;overflow:auto;overscroll-behavior:contain
}
.menu__t{
  font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);padding:10px 10px 4px
}
.menu__v{
  display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;
  padding:7px 10px;border-radius:var(--r-sm);color:var(--slate-700);
  font-size:var(--t-base);text-align:left
}
.menu__v:hover{background:var(--blue-50);color:var(--blue-700)}
.menu__v.on{background:var(--lime-100);color:var(--lime-700);font-weight:650;box-shadow:inset 3px 0 0 var(--lime-500)}
/* Il disegno non cambia misura diventando voce corrente: «.menu__v.on»
   ingrassa l'etichetta, e l'icona prende il colore dal pulsante —
   «currentColor» — quindi riposo, passaggio del mouse, fuoco e voce attiva
   restano lo stesso disegno. */
.menu__e{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Testata ----------
   Tre zone che non cambiano mai:
     a sinistra  DOVE SEI
     al centro   CERCA IN TUTTO IL CRM
     a destra    LA COSA CHE PUOI FARE QUI
   La conseguenza importante e' la terza: l'azione principale di ogni schermata
   sta sempre nello stesso pixel.

   E' blu notte, come nel riferimento approvato. Non e' una scelta di gusto: la
   testata e' l'unica superficie che non cambia mai, e finche' era bianca come
   il contenuto il confine fra «la cornice» e «cio' su cui sto lavorando» lo
   disegnava un filo grigio da un pixel. Adesso lo disegna la tinta, e i tre
   pezzi che ci stanno dentro cambiano di conseguenza: il testo diventa bianco,
   il fuoco diventa bianco, e i controlli restano bianchi perche' sul blu notte
   un pulsante chiaro e' piu' leggibile di uno scuro. */
.bar{
  height:56px;flex-shrink:0;display:flex;align-items:center;gap:var(--s-4);
  padding:0 var(--s-5);background:var(--navy-900);border-bottom:1px solid var(--navy-800);
  /* Sopra la tendina della ricerca no, sotto: la tendina deve poterla coprire.
     Sopra il contenuto si', perche' la testata non scorre via. */
  position:relative;z-index:50
}
/* Il contorno del fuoco dentro la barra e' bianco e non blu: il blu del fuoco
   e' fatto per il bianco, e sul blu notte si vedrebbe appena. Vale per tutto
   cio' che sta nella testata e nella fascia della ricerca, compresi i comandi
   chiari, perche' lo scostamento di due pixel porta il contorno fuori dal
   pulsante, sul fondo scuro. */
:where(.bar,.cercafascia) :where(button,input,select,a,[tabindex]):focus-visible{
  outline:2px solid var(--on-navy);outline-offset:2px
}
/* A cedere dev'essere il TITOLO, non il telaio: se lo spazio non basta il nome
   della sezione si accorcia con i puntini, mentre comandi e profilo restano
   interi. */
.bar__dove{min-width:0;flex:0 1 auto}
.bar__gruppo{
  display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--on-navy-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* Il nome della schermata e' l'unico h1 del documento e cambia con la sezione:
   chi naviga per titoli ha un appiglio. La resa non deve cambiare per questo,
   quindi qui si riportano interlinea e spaziatura del corpo del testo, che
   «h1,h2,h3» in cima al foglio avevano stretto. */
.bar__tit{
  font-size:var(--t-md);font-weight:650;color:var(--on-navy);margin-top:1px;
  line-height:var(--lh);letter-spacing:normal;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.bar__az{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;flex-shrink:0}
.icb{
  width:34px;height:34px;border:1px solid var(--line-strong);background:var(--panel);
  border-radius:var(--r-sm);display:grid;place-items:center;color:var(--slate-700)
}
.icb:hover{border-color:var(--blue-600);color:var(--blue-600)}
/* Il cerchio del profilo e' blu notte con un anello chiaro, come nel
   riferimento: sulla barra dello stesso colore e' l'anello a dargli il bordo,
   e la sigla bianca ci sta sopra a 15.3:1. */
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--navy-900);color:var(--on-navy);border:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  display:grid;place-items:center;font-size:var(--t-sm);font-weight:700;overflow:hidden
}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
/* L'azione principale della schermata: verde Innoform, testo scuro, 11.9:1.
   E' l'unica cosa verde della testata, e sul blu notte e' anche l'unica cosa
   che salta all'occhio: e' esattamente il suo mestiere. */
.primaria{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:0;
  border-radius:var(--r-sm);background:var(--brand-green);color:var(--on-green);
  font-size:var(--t-sm);font-weight:650
}
.primaria:hover{background:var(--brand-green-hover)}
.primaria:active{background:var(--brand-green-pressed)}
.primaria:disabled{background:var(--disabled-bg);color:var(--disabled-ink)}
/* Comandi e profilo non si schiacciano: sotto una certa misura un pulsante
   smette di essere un bersaglio per un dito. */
.hamb,.marchio--c,.icb,.avatar,.primaria{flex-shrink:0}
.hamb{
  display:none;width:34px;height:34px;border:1px solid var(--line-strong);background:var(--panel);
  border-radius:var(--r-sm);place-items:center;color:var(--slate-700)
}
.bar__cerca-ic{display:none}
/* La fascia della ricerca: sotto gli 880 px la ricerca lascia la barra e si
   apre qui, a tutta larghezza. Sopra non esiste, e non basta nasconderla —
   restando aperta da una finestra stretta riapparirebbe allargando. */
.cercafascia{display:none;padding:10px var(--s-5);background:var(--navy-900);border-bottom:1px solid var(--navy-800)}

/* ---------- Area di lavoro ----------
   Il contenuto respira ai lati e ha una larghezza massima: una tabella larga
   1900 px non si legge, l'occhio perde la riga fra la prima colonna e
   l'ultima. Il riempimento in ALTO lo porta il contenuto, non questo
   contenitore: una barra «appiccicata» dentro una schermata si fermerebbe 20 px
   piu' in basso del punto in cui il contenuto viene tagliato, e in quei 20 px
   le righe continuerebbero a vedersi scorrere sopra la barra. */
.content{
  min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  padding:0 var(--s-6) var(--s-6);scroll-padding-top:var(--fascia,0px)
}
.content>*{max-width:1500px;padding-top:var(--s-5)}

/* ---------- Fascia 900: 880-1099 px ---------- */
/* La barra resta intera. Cambiano solo le griglie delle schermate. */

/* ---------- Fascia 830: 480-879 px ---------- */
@media(max-width:879.98px){
  /* Solo quella IN BARRA: la ricerca della fascia e' la stessa cosa scritta
     nello stesso modo, e un selettore senza discendenza spegneva anche lei —
     un campo largo zero, invisibile e non raggiungibile dal fuoco, dentro una
     fascia che si apriva apposta per contenerlo. */
  .bar>.bar__cerca{display:none}
  .bar__cerca-ic{display:grid}
  .cercafascia.on{display:block}
}

/* ---------- Fascia 390: sotto 480 px ---------- */
@media(max-width:479.98px){
  .app{grid-template-columns:1fr}
  .app>.main{grid-column:1}
  .rail{display:none}
  .hamb{display:grid}
  .bar__marchio{display:block}
  .bar{padding:0 var(--s-3);gap:var(--s-2)}
  /* Ricaricare si puo' ancora: e' la stessa cosa che fa cambiare schermata e
     tornare. Qui il posto serve al comando che si usa. */
  .bar__ricarica{display:none}
  /* Il comando NON sparisce: resta il pulsante col «+», e il nome per esteso
     lo porta «aria-label». Senza etichetta diventa quadrato come i suoi vicini
     — 34 px, la misura di «Cerca» e del profilo — invece di restringersi a 28
     e diventare il bersaglio piu' piccolo proprio sul telefono. */
  .primaria span{display:none}
  .primaria{padding:0;gap:0;width:34px;justify-content:center}
  .menu{width:min(280px,86vw)}
  .content{padding:0 var(--s-3) var(--s-3)}
  .content>*{padding-top:var(--s-3)}
}

/* ---- Intestazione di schermata ----
   Non porta il nome della schermata: quello sta nella testata e ripeterlo due
   volte non aiuta nessuno. Qui resta cio' che il nome non dice: a cosa serve la
   schermata, e i comandi che valgono solo per lei. */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-4)}
.page-head h1{font-size:var(--t-xl);color:var(--ink);font-weight:700}
.page-head__testo{min-width:0;max-width:75ch}
.greet,.crumb{font-size:var(--t-xs);color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.07em;margin-bottom:var(--s-1)}
.page-head p{margin:var(--s-2) 0 0;max-width:70ch;color:var(--muted);font-size:var(--t-base);line-height:var(--lh)}
.page-head__azioni{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.schermata{font-size:var(--t-xl);font-weight:700;color:var(--ink);margin:0 0 var(--s-3)}

/* ---- Filtro per esito (Storico trattative) ---- */
.outcome-filter{display:flex;flex-direction:column;gap:5px;min-width:280px}
.outcome-filter__label{font-size:12px;font-weight:600;color:var(--ink-2)}
.outcome-tabs{display:inline-flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--hair);box-shadow:inset 0 1px 2px rgba(21,26,45,.03)}
.outcome-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:86px;padding:7px 12px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:650;transition:background .15s,color .15s,box-shadow .15s}
.outcome-tab:hover{background:rgba(255,255,255,.7);color:var(--ink)}.outcome-tab.on{background:#fff;color:var(--navy);box-shadow:0 2px 7px rgba(21,26,45,.09)}
.outcome-tab__dot{width:7px;height:7px;border-radius:50%;background:var(--faint)}.outcome-tab.won .outcome-tab__dot{background:var(--ok)}.outcome-tab.lost .outcome-tab__dot{background:var(--danger)}
.outcome-tab.won.on{color:#13783a}.outcome-tab.lost.on{color:#be3036}
.flag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:5px 10px;border-radius:20px;border:1px solid #BBF7D0;background:var(--ok-tint);color:var(--ok)}
.flag .d{width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* ---- Ricerca globale ----
   Sta in cima a ogni schermata e si usa decine di volte al giorno: e' il
   controllo piu' battuto del CRM. */
.bar__cerca{flex:1;min-width:0;max-width:560px;position:relative}
.bar__cerca .board-search{max-width:none;height:34px}
.cercafascia .bar__cerca{max-width:none}
.ricerca__tendina{
  position:absolute;z-index:80;top:calc(100% + 6px);left:0;right:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);overflow:hidden
}
.ricerca__voce{
  display:flex;gap:var(--s-3);align-items:baseline;width:100%;text-align:left;
  padding:var(--s-3) var(--s-4);border:0;border-bottom:1px solid var(--hair);background:#fff
}
.ricerca__voce:last-of-type{border-bottom:0}
.ricerca__voce.scelta{background:var(--brand-blue-soft)}
.ricerca__voce b{display:block;color:var(--ink)}
.ricerca__voce>span:first-child{min-width:0;flex:1}
.ricerca__sottotitolo{display:block;margin-top:2px;color:var(--faint);font-size:var(--t-sm)}
.ricerca__tipo{flex-shrink:0}
.ricerca__vuoto,.ricerca__aiuto{padding:var(--s-3) var(--s-4)}
.ricerca__aiuto{border-top:1px solid var(--hair);font-size:var(--t-xs)}

/* ---- Nome che porta alla sua scheda ----
   Ha lo stesso aspetto ovunque compaia - collegamenti, elenchi dentro una
   scheda, righe dell'agenda - perche' l'utente impari una volta sola che un
   nome scritto cosi' si puo' aprire. */
.apri-scheda{
  display:block;padding:0;border:0;background:none;text-align:left;
  color:var(--ink);font-weight:700;border-radius:var(--radius-xs)
}
.apri-scheda--inline{display:inline}
.apri-scheda:hover{color:var(--brand-blue);text-decoration:underline}
/* La freccia dice «questo porta altrove» prima del clic. La aggiunge il foglio
   di stile e non il JSX, cosi' una voce che smette di essere apribile la perde
   da sola. */
.apri-scheda:not(.apri-scheda--spento):after{content:' →';color:var(--brand-blue);font-weight:650}
/* Una voce senza scheda dietro resta testo: stesso peso, nessun invito. */
.apri-scheda--spento{cursor:default}

/* ===== 22-dashboard.css ===== */
/* ---- Dashboard, e i pezzi che porta con se' ----
   Trasferito dal mockup approvato. La Dashboard di prima rispondeva alla
   domanda «quanto vale la pipeline»; questa risponde a «cosa devo fare
   adesso», che e' la domanda che si fa chi apre il CRM la mattina.

   Quasi tutto quello che sta qui sotto — pastiglie, righe, gruppi, stati
   vuoto/errore/permesso — non e' della sola Dashboard: e' la forma che nel
   mockup hanno anche Agenda, Calendario e le schede. Sta in questo foglio
   perche' la Dashboard e' la prima schermata a usarla; quando arriveranno le
   altre non ci sara' niente da riscrivere.
   ---------------------------------------------------------------- */

/* ---------- Pastiglia ----------
   Si legge come PAROLA, non come colore: porta scritto «alta», «media»,
   «senza data»; il colore e' un rinforzo, non l'informazione. */
.pill{
  display:inline-flex;align-items:center;gap:5px;border-radius:6px;padding:2px 7px;
  font-size:10px;font-weight:700;letter-spacing:.01em
}
.pill--danger{background:var(--danger-bg);color:var(--danger)}
.pill--warn{background:var(--warn-bg);color:var(--warn)}
.pill--ok{background:var(--ok-bg);color:var(--ok)}
.pill--info{background:var(--info-bg);color:var(--info)}
.pill--neutro{background:var(--testa);color:var(--faint)}
.pill::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}
.pill--nopunto::before{display:none}

/* ---------- Pannello ---------- */
.pannello{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.pannello__h{
  display:flex;align-items:center;gap:var(--s-2);padding:10px var(--s-4);
  background:var(--testa);border-bottom:2px solid var(--brand-green-line)
}
.pannello__h h3{font-size:var(--t-base);font-weight:700}
.pannello__h .conta{font-size:var(--t-xs);color:var(--faint);font-weight:600}
.pannello__h .coda{margin-left:auto}

/* ---------- Comandi di riga ----------
   E' l'altra famiglia di azione secondaria, accanto a «.cta»: stesso contorno,
   e adesso anche la stessa etichetta. Portava --slate-700, che e' il colore del
   CORPO del testo: un pulsante scritto come una frase, dentro una riga fitta,
   si legge come parte della riga. --ink-2 e' il livello delle etichette. */
.sec{
  display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--panel);
  color:var(--ink-2);font-size:var(--t-sm);font-weight:600
}
.sec:hover:not(:disabled){border-color:var(--blue-600);color:var(--blue-700);background:var(--blue-50)}
.sec:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed}
.ghost{
  border:0;background:transparent;color:var(--blue-700);
  font-size:var(--t-sm);font-weight:600;padding:4px 6px;border-radius:6px
}
.ghost:hover{background:var(--blue-50)}

/* ---------- La riga di un'attivita' ----------
   La riga NON e' un pulsante che ne contiene altri: quella forma rendeva
   «Completa» irraggiungibile da tastiera e, col mouse, apriva il dettaglio
   invece di completare. Qui e' un contenitore con dentro bersagli veri.

   PERCHE' SI PIEGA INVECE DI SOVRAPPORSI: la forma di prima metteva blocchi a
   larghezza fissa e non riducibili («quando», la pastiglia) dentro un
   contenitore che poteva rimpicciolirsi fino a zero, accanto a comandi che non
   si rimpicciolivano affatto. Quando la colonna si stringeva, quei blocchi non
   sparivano e non andavano a capo: finivano disegnati SOPRA i pulsanti. La
   correzione e' nella struttura — ogni livello puo' andare a capo, e ogni
   blocco dichiara una larghezza di PARTENZA invece che una larghezza fissa. */
.riga{
  display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;
  border-bottom:1px solid var(--hair);background:var(--panel)
}
.riga:last-child{border-bottom:0}
.riga:hover{background:var(--blue-50)}
.riga__apri{
  flex:1 1 240px;min-width:0;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s-3);row-gap:4px;padding:9px var(--s-4);border:0;background:transparent;text-align:left
}
.riga__quando{flex:0 0 74px;font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
/* Base zero e minimo dichiarato: il rientro a capo di una riga flessibile si
   decide sulla BASE, non sulla larghezza finale, quindi una base grande faceva
   andare a capo la priorita' anche quando ci sarebbe stata. */
.riga__mid{flex:1 1 0;min-width:96px;overflow:hidden}
/* La pastiglia della priorita' occupa sempre la stessa larghezza, qualunque
   sia la parola: «alta» e «media» differiscono di undici pixel, e quegli undici
   bastavano a far andare a capo una riga si' e una no dentro lo stesso elenco. */
.riga__apri>.pill{flex-shrink:0;min-width:58px;justify-content:center}
.riga__tit{
  font-size:var(--t-base);font-weight:600;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden
}
/* «display:block» non e' un dettaglio: su un elemento in linea «overflow» e
   «text-overflow» non si applicano, quindi i puntini non comparivano mai e il
   testo veniva tagliato a meta' parola. Il nome accessibile resta intero. */
.riga__sub{
  display:block;font-size:var(--t-xs);color:var(--faint);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* I comandi erano invisibili a riposo e comparivano solo col mouse sopra:
   restavano pero' premibili e tabulabili, cioe' bersagli che si potevano
   colpire senza vederli — e su un touch, dove il passaggio del mouse non
   esiste, erano semplicemente due pulsanti invisibili. Adesso ci sono sempre. */
.riga__az{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;
  flex-shrink:0;padding-right:var(--s-4);padding-bottom:2px
}
.riga__az .sec{min-height:36px}
/* La riga di un appuntamento non e' quella di un promemoria: al posto della
   scadenza c'e' una fascia oraria, al posto della priorita' c'e' lo stato. */
.riga--app{background:linear-gradient(90deg,var(--blue-50) 0 3px,transparent 3px)}
.riga__quando--app{color:var(--blue-700);display:flex;flex-direction:column;line-height:1.15}
.riga__quando--app small{font-weight:600;color:var(--faint)}

/* ---------- Stati di un pannello ---------- */
.vuoto{padding:26px var(--s-4);text-align:center;color:var(--faint);font-size:var(--t-sm)}
.vuoto b{display:block;color:var(--ink);font-size:var(--t-base);margin-bottom:3px}
.vuoto .sec{margin-top:10px}
.errore{
  padding:14px var(--s-4);background:var(--danger-bg);border-top:1px solid #F5D2D7;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:var(--t-sm);color:var(--danger)
}
.errore b{color:var(--danger)}
.errore .sec{margin-left:auto;border-color:var(--danger);color:var(--danger)}
.negato{padding:26px var(--s-4);text-align:center;color:var(--slate-700);font-size:var(--t-sm)}
.negato b{display:block;color:var(--ink);font-size:var(--t-base);margin-bottom:4px}
.negato .pill{margin-bottom:10px}
.negato .nota{margin-top:8px;font-size:var(--t-xs);color:var(--faint);line-height:var(--lh)}
/* Lo scheletro del caricamento. Non e' decorazione: dice «sto leggendo», che e'
   diverso da «non c'e' niente». */
.osso{
  height:12px;border-radius:6px;background:linear-gradient(90deg,#E4EAF3,var(--canvas),#E4EAF3);
  background-size:200% 100%;animation:osso-scorre 1.1s linear infinite
}
@keyframes osso-scorre{0%{background-position:200% 0}100%{background-position:-200% 0}}
.osso--riga{margin:12px var(--s-4)}

/* ---------- Dashboard ---------- */
/* Niente «flex-wrap»: la frase resta ACCANTO alla data anche quando lo spazio
   e' poco, ed e' la data ad andare a capo. Mandandola sotto, su telefono la
   Dashboard cominciava con tre righe di intestazione prima del primo numero. */
.dtitolo{display:flex;align-items:baseline;gap:10px;margin-bottom:var(--s-3)}
/* h2 e non h1: l'unico h1 del documento e' il nome della sezione, nella
   testata. Qui c'e' la data, che di quella sezione e' il contenuto. */
.dtitolo h2{font-size:var(--t-xl);color:var(--ink)}
.dtitolo span{font-size:var(--t-sm);color:var(--faint)}

.dgriglia{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3);margin-bottom:var(--s-4)}
/* Il riquadro di sintesi. Non e' «.kpi»: quel nome nel CRM appartiene gia' ai
   riquadri di Forecast e Storico, che sono un'altra cosa e restano dove sono. */
.dkpi{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);display:block;text-align:left;width:100%
}
button.dkpi:hover{border-color:var(--blue-600);background:var(--blue-50)}
.dkpi__n{font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.dkpi__e{font-size:var(--t-xs);color:var(--faint);margin-top:5px;font-weight:600}
.dkpi--allarme{border-color:#F0C3C9;background:var(--danger-bg)}
.dkpi--allarme .dkpi__n,.dkpi--allarme .dkpi__e{color:var(--danger)}
button.dkpi--allarme:hover{border-color:var(--danger);background:var(--danger-bg)}
/* «Senza data» non e' un errore: e' lavoro che aspetta una decisione. Aveva
   pero' il solo numero ambrato su fondo bianco, cioe' una differenza che a
   colpo d'occhio non si vedeva accanto a quattro riquadri identici — e che da
   sola, per giunta, affidava l'informazione al colore.
   Il trattamento e' lo stesso dell'allarme, con i token d'attesa al posto di
   quelli di pericolo: fondo `--warn-bg`, bordo `#F5D9A8` — lo stesso gia' in
   uso da `.reqbox--manca` e dal riquadro delle proposte — e testo `--warn`.
   Nessun colore nuovo, e la distanza dal rosso resta leggibile: l'ambra dice
   «da sistemare», il rosso «gia' fuori tempo». */
.dkpi--attesa{border-color:#F5D9A8;background:var(--warn-bg)}
.dkpi--attesa .dkpi__n,.dkpi--attesa .dkpi__e{color:var(--warn)}
button.dkpi--attesa:hover{border-color:var(--warn);background:var(--warn-bg)}

/* «1fr» non e' «una parte»: e' «minmax(auto,1fr)», cioe' «una parte, ma mai
   meno del contenuto minimo». La colonna di destra — appuntamenti e riepilogo —
   ha un contenuto minimo largo, quindi si prendeva quasi tutto e le due colonne
   uscivano nelle proporzioni opposte a quelle dichiarate. Con «minmax(0,...)»
   le proporzioni valgono davvero e «Da fare adesso» torna a essere la colonna
   larga, che e' il punto di questa schermata. */
.dcolonne{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s-4);align-items:start}
.dcolonne__destra{display:flex;flex-direction:column;gap:var(--s-4);min-width:0}

/* I tre pezzi dell'intestazione di gruppo stanno su una GRIGLIA, non su una
   fila con due margini automatici. Quelli si spartivano lo spazio libero in
   parti uguali, e il conteggio finiva a un'ascissa diversa per ogni gruppo:
   seguiva la lunghezza dell'etichetta. Sei numeri su sei ascisse diverse non
   sono una colonna, e una colonna che si muove quando cambia un valore fa
   perdere fiducia nel valore. Le misure sono in «ch», cioe' nella larghezza
   della cifra del carattere in uso: non sono numeri inventati. */
.gruppo-tit{
  display:grid;grid-template-columns:1fr 4ch;align-items:center;
  column-gap:8px;padding:8px var(--s-4);background:var(--testa);
  border-bottom:1px solid var(--line);font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--slate-700)
}
.gruppo-tit__e{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gruppo-tit.rosso{background:var(--danger-bg);color:var(--danger)}
.gruppo-tit .n{justify-self:end;text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
/* ---- Il gruppo che vale zero ----
   Occupava due fasce: l'intestazione, e sotto una riga `.dvedi` con la frase.
   Con «In ritardo» e «Oggi» a zero erano quattro fasce di niente prima della
   prima attivita' vera, che su telefono la spingevano fuori dal primo schermo.
   Adesso e' UNA riga: stessa etichetta, stesso zero incolonnato a destra, e in
   mezzo la frase che dice che cosa significa quello zero. Il gruppo resta —
   sparirlo direbbe che quella coda non esiste, mentre esiste ed e' vuota — e
   l'ordine dei tre non cambia.
   La colonna centrale e' `1fr` e regge il rientro a capo; le prime due si
   restringono al contenuto, cosi' lo zero resta sulla stessa ascissa dei
   gruppi pieni. */
.gruppo-tit--vuoto{
  grid-template-columns:auto 1fr 4ch;
  padding-top:6px;padding-bottom:6px;
  background:var(--panel);color:var(--faint);border-bottom:1px solid var(--hair)
}
.gruppo-tit--vuoto .gruppo-tit__e{color:var(--slate-700)}
/* La frase e' prosa, non un'etichetta: niente maiuscoletto e niente
   spaziatura allargata, che su una frase intera si leggono male. */
.gruppo-tit--vuoto .gruppo-tit__nota{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-transform:none;letter-spacing:normal;font-weight:600;color:var(--faint)
}
/* La riga che porta al resto: sta dentro il gruppo, non sotto il pannello. */
.dvedi{padding:8px var(--s-4);border-bottom:1px solid var(--hair)}
.dvedi:last-child{border-bottom:0}

.panoramica{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.panoramica div{background:var(--panel);padding:10px var(--s-4)}
.panoramica b{display:block;font-size:var(--t-lg);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.panoramica span{font-size:var(--t-xs);color:var(--faint)}
/* La definizione di un numero, scritta e non nascosta in un «title».
   Un `title` lo vede solo il mouse: non compare col fuoco da tastiera e i
   lettori di schermo lo annunciano in modo diverso l'uno dall'altro. Un testo
   visibile funziona per tutti e tre senza dover diventare un comando — e qui
   non c'e' niente da premere, quindi rendere il riquadro focalizzabile
   avrebbe aggiunto una fermata di tabulazione che non porta da nessuna parte. */
.panoramica__nota{
  display:block;margin-top:4px;font-size:var(--t-xs);line-height:var(--lh);
  color:var(--faint);font-weight:500
}

/* ---------- Fascia 900: 880-1099 px ---------- */
@media(max-width:1099.98px){
  .dgriglia{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Fascia 830: 480-879 px ---------- */
@media(max-width:879.98px){
  .dcolonne{grid-template-columns:1fr}
}

/* ---------- Fascia 390: sotto 480 px ----------
   Sul telefono il testo prende la riga intera e i comandi vanno sotto: prima i
   blocchi rigidi sommavano piu' della larghezza e schiacciavano il titolo a
   zero, lasciando in vista due pulsanti e nient'altro. */
@media(max-width:479.98px){
  .dgriglia{grid-template-columns:repeat(2,1fr);gap:var(--s-2)}
  /* I riquadri sono CINQUE e le colonne due: l'ultimo restava largo mezza riga
     con un vuoto accanto, e per giunta e' quello con l'etichetta piu' lunga —
     «Senza prossimo passo · su N aperte» — che in mezza colonna andava a capo
     tre volte. Prendendosi la riga intera l'etichetta ci sta e la sequenza dei
     cinque non cambia: due, due, e l'ultimo per largo.
     `nth-child(5)` e non una classe perche' vale anche per lo scheletro del
     caricamento, che di riquadri ne disegna cinque uguali: cosi' la griglia
     non si riassesta quando i dati arrivano. */
  .dgriglia>*:nth-child(5){grid-column:1/-1}
  .riga{padding-bottom:8px}
  .riga__apri{gap:6px;padding-bottom:4px}
  .riga__mid{flex-basis:100%;order:-1}
  .riga__az{width:100%;padding:0 var(--s-4);justify-content:flex-end}
  .riga__az .sec{min-height:44px}
  .panoramica{grid-template-columns:1fr}
}

/* ===== 24-agenda.css ===== */
/* ---- Agenda e Calendario ----
   Trasferito dal mockup approvato. Sono due schermate perche' sono due
   domande: l'Agenda chiede «cosa devo fare adesso» e ordina per urgenza, il
   Calendario chiede «com'e' distribuito il lavoro» e ordina per tempo. Gli
   stessi record, due letture.

   Le righe, i gruppi, le pastiglie e gli stati vuoto/errore/negato stanno in
   22-dashboard.css: sono la forma condivisa, non la forma della Dashboard.
   ---------------------------------------------------------------- */

/* ---------- La riga della verita' ----------
   Tre numeri e la ricerca, sempre in vista: e' la prima cosa che si legge
   aprendo l'Agenda, e resta leggibile anche scorrendo l'elenco.
   «top:0» morde sul contenitore che scorre, cioe' «.content»: il contenuto ha
   gia' il suo margine superiore, quindi la fascia si ferma esattamente sotto la
   testata e non ci passa sopra. */
.averita{
  position:sticky;top:0;z-index:20;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);padding:10px var(--s-4);display:flex;align-items:center;
  gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)
}
/* Larghezza minima dichiarata: senza, la frase si accorcia in caricamento e
   tutta la barra scivola a sinistra di duecento pixel. */
.averita__f{font-size:var(--t-base);font-weight:600;min-width:30ch;color:var(--slate-700)}
.averita__f b{font-variant-numeric:tabular-nums;color:var(--ink)}
.averita input[type=search],.averita input[type=text]{
  height:32px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:0 10px;font-size:var(--t-sm);min-width:180px;flex:1;max-width:280px
}
.averita select{
  height:32px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:0 8px;font-size:var(--t-sm);background:var(--panel);max-width:220px
}
/* Con una ricerca attiva i contatori dicono quello che si sta guardando, non
   quello che ci sarebbe senza: il criterio attivo e' scritto, e si toglie da li'. */
.agfiltro{font-weight:400;color:var(--faint);font-size:var(--t-sm)}

/* ---------- Le due colonne dell'Agenda ---------- */
.alayout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-4);align-items:start}
/* Il dettaglio scorre per conto suo: l'elenco puo' essere lungo, ma i comandi
   dell'attivita' aperta devono restare raggiungibili senza tornare in cima. */
.adettaglio{position:sticky;top:60px;max-height:calc(100vh - 190px);overflow-y:auto;overscroll-behavior:contain}

/* Il comando del gruppo occupa la terza colonna e allinea a destra: la parola
   cambia («mostra» / «nascondi») ma la colonna no, quindi il numero accanto non
   si muove. Il padding verticale gli da' un'area premibile che il solo testo di
   11 px non avrebbe. */
.gruppo-tit--apri{grid-template-columns:1fr 3ch 10ch}
.gruppo__toggle{
  justify-self:stretch;text-align:right;padding:6px 0;border:0;
  background:transparent;color:var(--faint);font-size:var(--t-xs);font-weight:700
}
.gruppo__toggle:hover{color:var(--blue-700)}
.gruppo__toggle:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px;border-radius:4px}

/* Una completata si legge come completata ovunque: ora con la spunta in verde,
   titolo attenuato e barrato, nessuna priorita', nessuna azione. */
.riga__fatta{color:var(--ok);font-weight:700}
.riga--fatta .riga__tit{text-decoration:line-through;color:var(--faint);font-weight:500}
/* La riga aperta nel dettaglio si vede nell'elenco: senza, dopo uno scorrimento
   non si sa piu' quale delle venti righe si sta guardando a destra. */
.riga.sel{background:var(--blue-50);box-shadow:inset 3px 0 0 var(--blue-600)}

/* ---------- Il dettaglio di un'attivita' ---------- */
.adett__h{padding:var(--s-4);border-bottom:1px solid var(--line)}
.adett__h h3{font-size:var(--t-lg)}
.adett__meta{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--t-sm);color:var(--faint);margin-top:6px}
.adett__az{display:flex;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);flex-wrap:wrap}
.adett__az--nessuna{display:block;font-size:var(--t-sm);color:var(--faint)}
.adett__corpo{padding:0 var(--s-4) var(--s-4)}
/* Il Diario del record collegato sta sotto la scheda, non al posto suo: da qui
   si registra il contatto senza cambiare schermata. */
.adett__diario{border-top:1px solid var(--line);padding:var(--s-4)}
/* «Torna all'elenco» esiste solo dove il dettaglio copre l'elenco. */
.indietro{display:none;margin-bottom:10px}

/* ---------- Calendario ---------- */
.ctools{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3);flex-wrap:wrap}
.cnav{display:flex;gap:4px;align-items:center}
.cperiodo{font-size:var(--t-lg);font-weight:700;min-width:16ch;color:var(--ink)}
.ctools__filtri{margin-left:auto;display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}

/* «1fr» vale «minmax(auto,1fr)»: la colonna non scende sotto il proprio
   contenuto, e con gli eventi in white-space:nowrap la griglia cresceva oltre il
   contenitore, che la tagliava senza barra di scorrimento e senza alcun segno —
   spariva la domenica. Con minmax(0,1fr) le sette colonne sono uguali e
   l'ellissi di «.cev» entra davvero in funzione. */
.cmese{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden
}
.cmese__gt{
  background:var(--testa);padding:7px var(--s-2);font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--slate-700);text-align:center
}
.cgiorno{background:var(--panel);min-height:96px;padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cgiorno--fuori{background:var(--testa-2)}
.cgiorno--fuori .cgiorno__n{color:var(--faint);opacity:.6}
.cgiorno--oggi{background:var(--blue-50);box-shadow:inset 0 0 0 2px var(--blue-600)}
.cgiorno__n{font-size:var(--t-xs);font-weight:700;color:var(--slate-700);align-self:flex-end}
.cgiorno--oggi .cgiorno__n{color:var(--blue-900)}
.cev{
  display:block;width:100%;min-width:0;max-width:100%;text-align:left;border:0;border-radius:5px;
  padding:2px 5px;font-size:10.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
/* L'appuntamento si distingue a colpo d'occhio dal promemoria: barra piena a
   sinistra e fascia oraria, non una pastiglia. Sono due oggetti diversi. */
.cev--app{background:var(--blue-100);color:var(--blue-900);border-left:3px solid var(--blue-600);border-radius:0 5px 5px 0}
.cev--app-chiuso{opacity:.6;border-left-color:var(--line-strong)}
.cev--rit{background:var(--danger-bg);color:var(--danger)}
.cev--oggi{background:var(--info-bg);color:var(--info)}
.cev--fatta{background:var(--ok-bg);color:var(--ok);text-decoration:line-through}
.cev:hover{filter:brightness(.96)}
.cpiu{border:0;background:transparent;font-size:10px;font-weight:700;color:var(--faint);text-align:left;padding:1px 5px}

/* Sette colonne da almeno 120 px fanno 840 px: sotto i 900 la settimana non ci
   sta. Comprimerle ancora renderebbe illeggibile una vista che serve proprio a
   leggere: scorre in orizzontale dentro il PROPRIO contenitore. La pagina no. */
.cscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.cscroll:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
.csett{
  display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:1px;background:var(--line);
  min-width:calc(7 * 120px + 6 * 1px);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden
}
.csett__col{background:var(--panel);min-height:220px;padding:7px;display:flex;flex-direction:column;gap:4px;min-width:0}
.csett__t{font-size:var(--t-xs);font-weight:700;color:var(--slate-700);padding-bottom:4px;border-bottom:1px solid var(--line)}
.csett__col--oggi .csett__t{color:var(--blue-900)}
.csett__vuoto{font-size:var(--t-xs);color:var(--faint)}

/* I promemoria senza data non hanno un posto nel calendario, e fingere che ce
   l'abbiano li nasconderebbe. Restano dichiarati sotto la griglia. */
.csenzadata{
  margin-top:var(--s-3);border:1px solid var(--warn);background:var(--warn-bg);
  border-radius:var(--r-md);padding:10px var(--s-4);font-size:var(--t-sm);color:var(--warn)
}
.csenzadata b{display:block}

/* ---- Calendario stretto ----
   La griglia e' un selettore di data, non una miniatura del mese: celle
   quadrate con un bersaglio di almeno 44 px, il numero del giorno e un badge
   con quanti impegni ha. Il contenuto sta nell'elenco sotto, dove c'e' lo
   spazio per leggerlo — e cosi' «+N altri» non serve piu'. */
.cmini{display:none;grid-template-columns:repeat(7,minmax(44px,1fr));gap:3px;margin-bottom:var(--s-3);overflow-x:auto}
.cmini__gt{font-size:var(--t-xs);font-weight:700;color:var(--slate-700);text-align:center;padding:2px 0}
.cmini__g{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:44px;padding:2px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--panel);color:var(--ink);font-size:var(--t-base);font-weight:650
}
.cmini__g--fuori{color:var(--faint);background:var(--hair);border-color:var(--line)}
/* «Oggi» e «selezionato» sono due cose diverse e si vedono anche senza colore:
   il contorno doppio per oggi, il riempimento pieno per la selezione. */
.cmini__g--oggi{box-shadow:inset 0 0 0 2px var(--blue-600)}
.cmini__g--sel{background:var(--blue-600);border-color:var(--blue-900);color:#fff}
.cmini__n{line-height:1}
.cmini__b{
  min-width:17px;height:15px;padding:0 3px;border-radius:8px;background:var(--blue-100);
  color:var(--blue-900);font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1
}
.cmini__g--sel .cmini__b{background:#fff;color:var(--blue-900)}
.cmini__g--fuori .cmini__b{background:var(--line);color:var(--slate-700)}
/* Il titolo del giorno scelto e l'elenco sotto esistono solo nella forma
   stretta: sul desktop il contenuto sta nelle celle, e ripeterlo sotto la
   griglia sarebbe la stessa informazione due volte nella stessa schermata. */
.cmob__t{
  display:none;flex-wrap:wrap;align-items:baseline;gap:var(--s-2);padding:0 0 var(--s-2);
  font-weight:700;color:var(--ink);text-transform:capitalize
}
.cmob__t span{font-weight:400;font-size:var(--t-sm);color:var(--faint);text-transform:none}
.cal-giorno-stretto{display:none}

/* ---------- Fascia 830: sotto gli 880 px ----------
   Il dettaglio non sta accanto all'elenco: ci passa sopra, e da li' si torna
   indietro con un comando dichiarato. */
@media(max-width:879.98px){
  .alayout{grid-template-columns:1fr;position:relative}
  .adettaglio{display:none;position:static;max-height:none}
  .adettaglio.mobile-on{display:block;position:absolute;inset:0;z-index:30;background:var(--panel);overflow:auto;border-radius:var(--r-md)}
  .indietro{display:inline-flex}
  .averita__f{min-width:0;flex:1 1 100%}
}

/* ---------- Fascia 390: sotto 480 px ----------
   Il mese e la settimana non si leggono su un telefono: al loro posto il
   selettore di data e l'elenco del giorno, che e' la stessa informazione in una
   forma che ci sta. */
@media(max-width:479.98px){
  .cmese,.csett,.cscroll{display:none}
  .cmini{display:grid}
  .cmob__t{display:flex}
  .cal-giorno-stretto{display:block}
  .ctools .cperiodo{min-width:0;flex:1 1 100%;order:-1}
  .ctools__filtri{margin-left:0;width:100%}
  .adett__az .sec,.adett__az .primaria{min-height:44px}
}

/* ---------- Quando, per intero, nelle righe dell'Agenda ----------
   `.riga__quando` nasce larga 74 px, quanto basta a «15:00». Nell'Agenda la
   riga porta adesso anche il giorno e la data — «15:00 · dom 30 ago» — e in
   74 px quella stringa andrebbe a capo tre volte. Il modificatore allarga la
   sola colonna dell'orario, e solo dove il testo lungo c'e' davvero: nella
   Dashboard la riga resta quella di prima, stretta.
   `flex-basis` e non `width`: la riga e' flessibile e deve poter cedere
   spazio quando la colonna si stringe, senza schiacciare il titolo. */
.riga__quando--esteso{
  flex:0 0 132px;
  font-variant-numeric:tabular-nums;
  white-space:normal
}
.riga__quando--esteso small{font-weight:600;color:var(--faint)}
@media(max-width:479.98px){
  /* Sul telefono il blocco «quando» prende la riga intera e il titolo va sotto:
     e' la stessa regola che `.riga__mid` applica gia' agli altri elenchi. */
  .riga__quando--esteso{flex:0 0 100%}
}

/* ---------- La nota che distingue Agenda e Calendario ---------- */
.anota{
  margin:0 0 var(--s-3);padding:10px var(--s-4);
  border:1px solid var(--line);border-left:3px solid var(--brand-blue);
  border-radius:var(--r-sm);background:var(--testa-2);
  color:var(--slate-700);font-size:var(--t-sm);line-height:var(--lh)
}
.anota b{color:var(--ink);font-weight:700}

/* ---------- Un gruppo dell'Agenda che vale zero ----------
   Una riga, non un riquadro: i gruppi sono sei e possono essere vuoti quasi
   tutti insieme. Con `BoxVuoto` erano sei blocchi centrati da 26 px sopra e
   sotto, e la prima attivita' vera finiva fuori dal primo schermo. */
.agruppo-vuoto{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding:9px var(--s-4);border-bottom:1px solid var(--hair);
  color:var(--faint);font-size:var(--t-sm);line-height:var(--lh)
}
.agruppo-vuoto:last-child{border-bottom:0}
.agruppo-vuoto>span{flex:1 1 200px;min-width:0}
.agruppo-vuoto .sec{flex:0 0 auto}
@media(max-width:479.98px){
  .agruppo-vuoto .sec{min-height:44px}
}

/* ===== 30-supporto.css ===== */
/* centro supporto */
/* «.support-nav» era il blocco che teneva «Supporto» in fondo alla colonna del
   vecchio menu. Nel telaio del mockup Supporto e' una sezione come le altre:
   sta nella barra a icone, sotto il separatore, e nel menu esteso nel gruppo
   «Il tuo account». Il blocco non esiste piu'. */
.support-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:24px;margin-bottom:18px;border:1px solid #DCE4F5;border-radius:16px;background:linear-gradient(135deg,#fff 0%,var(--brand-blue-soft) 100%);box-shadow:var(--sh)}
.support-hero__copy{max-width:680px}.support-hero h1{font-size:26px;margin:3px 0 8px}.support-hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.support-hero__mark{width:54px;height:54px;flex:0 0 auto;border-radius:16px;display:grid;place-items:center;color:var(--on-green);background:var(--brand-green);box-shadow:0 8px 24px rgba(104,143,20,.24)}
.support-context{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.support-context__badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--lime-tint);color:var(--navy);font-size:11px;font-weight:700}.support-back{border:0;background:transparent;padding:5px 7px;border-radius:7px;color:var(--slate);font-size:11.5px;font-weight:600}.support-back:hover{background:var(--hair);color:var(--ink)}
.support-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}.support-quick__item{display:flex;align-items:center;gap:11px;text-align:left;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--sh)}.support-quick__item:hover{border-color:#C9D2E6;transform:translateY(-1px)}.support-quick__icon{width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;background:var(--brand-blue-soft);color:var(--navy)}.support-quick__item b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:2px}.support-quick__item span span{display:block;color:var(--muted);font-size:11px}
.support-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:18px;align-items:start}
.support-sidebar,.support-detail,.support-faq{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh)}
.support-sidebar{overflow:hidden}.support-sidebar__head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:16px;background:var(--testa);border-bottom:2px solid var(--brand-green-line)}.support-sidebar__head h2{font-size:15px;margin-bottom:4px}.support-sidebar__head span{font-size:12px;color:var(--muted)}.support-result-count{white-space:nowrap;font-size:10.5px!important;font-weight:700;color:var(--navy)!important;background:var(--hair);padding:4px 7px;border-radius:999px}
.support-mobile-picker{display:none;position:relative;padding:14px}.support-mobile-picker__label{display:block;margin-bottom:6px;color:var(--ink-2);font-size:12px;font-weight:700}
.support-mobile-picker__trigger{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);text-align:left;box-shadow:0 2px 8px rgba(21,26,45,.04)}
.support-mobile-picker__trigger:hover,.support-mobile-picker__trigger[aria-expanded="true"]{border-color:#A9B7D2}.support-mobile-picker__trigger span{min-width:0}.support-mobile-picker__trigger small{display:block;margin-bottom:2px;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.support-mobile-picker__trigger b{display:block;overflow:hidden;color:var(--ink);font-size:13.5px;text-overflow:ellipsis;white-space:nowrap}.support-mobile-picker__trigger svg{flex:0 0 auto;transition:transform .15s}.support-mobile-picker__trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
.support-mobile-picker__menu{position:absolute;z-index:20;top:calc(100% - 8px);left:14px;right:14px;max-height:min(50vh,330px);overflow-y:auto;padding:6px;border:1px solid #CAD3E5;border-radius:12px;background:#fff;box-shadow:0 14px 38px rgba(21,26,45,.18);overscroll-behavior:contain}
.support-mobile-picker__option{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:0;border-radius:9px;background:transparent;text-align:left}.support-mobile-picker__option:hover{background:var(--hair)}.support-mobile-picker__option.on{background:var(--lime-tint)}.support-mobile-picker__option span{min-width:0}.support-mobile-picker__option small{display:block;margin-bottom:2px;color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.support-mobile-picker__option b{display:block;overflow:hidden;color:var(--ink);font-size:13px;text-overflow:ellipsis;white-space:nowrap}.support-mobile-picker__check{width:22px;height:22px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;background:var(--lime);color:var(--navy)}
.support-filters{display:flex;gap:6px;overflow-x:auto;padding:12px 14px 8px}.support-filter{white-space:nowrap;border:1px solid var(--line-strong);background:#fff;border-radius:999px;padding:6px 10px;font-size:11.5px;font-weight:600}.support-filter:hover,.support-filter.on{border-color:var(--navy);background:var(--navy);color:#fff}
.support-list{padding:6px 8px 10px;max-height:590px;overflow:auto}.support-item{width:100%;display:flex;align-items:flex-start;gap:10px;padding:11px;border:0;border-radius:10px;background:transparent;text-align:left}.support-item:hover{background:var(--hair)}.support-item.on{background:var(--lime-tint)}
.support-item .support-item__icon{width:32px;height:32px;flex:0 0 32px;border-radius:9px;background:var(--brand-blue-soft);color:var(--navy);display:flex;align-items:center;justify-content:center;line-height:0}.support-item .support-item__icon svg{width:17px;height:17px;display:block;flex:0 0 17px}.support-item.on .support-item__icon{background:var(--lime);color:var(--navy)}
.support-item b{display:block;color:var(--ink);font-size:12.5px;margin:1px 0 3px}.support-item span{display:block;color:var(--muted);font-size:11.5px;line-height:1.4}.support-empty{padding:28px 18px;text-align:center;color:var(--muted);line-height:1.5}
.support-item__recommended{display:inline-block!important;width:max-content;margin-top:5px;padding:2px 6px;border-radius:999px;background:var(--blue-100);color:var(--navy)!important;font-size:9px!important;font-weight:750;text-transform:uppercase;letter-spacing:.04em}.support-item.on .support-item__recommended{background:var(--brand-green-tint)}
.support-detail{padding:22px}.support-detail__top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid var(--hair)}
.support-eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);font-weight:700;margin-bottom:6px}.support-detail h2{font-size:21px;margin-bottom:7px}.support-detail__summary{margin:0;color:var(--muted);line-height:1.55}
.support-open{flex:0 0 auto;border:0;border-radius:9px;background:var(--brand-green);color:var(--on-green);padding:9px 13px;font-size:12px;font-weight:650;display:flex;align-items:center;gap:7px}.support-open:hover{background:var(--brand-green-hover)}
.support-description{margin:18px 0 0;padding:14px 15px;border-left:3px solid var(--lime);border-radius:0 10px 10px 0;background:var(--testa-2);color:var(--slate);font-size:12.5px;line-height:1.65}.support-description b{color:var(--ink)}
.support-knowledge{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.support-knowledge__card{padding:15px;border:1px solid var(--line);border-radius:11px;background:#fff}.support-knowledge__card h3{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13px}.support-knowledge__card h3 svg{color:var(--blue)}.support-knowledge__card ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.support-knowledge__card li{position:relative;padding-left:15px;color:var(--slate);font-size:12px;line-height:1.5}.support-knowledge__card li:before{content:'';position:absolute;left:1px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--lime)}
.support-deep-dive{display:grid;gap:9px;margin-top:16px}.support-deep-dive details{border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}.support-deep-dive summary{cursor:pointer;display:flex;align-items:center;gap:9px;padding:13px 14px;color:var(--ink);font-size:12.5px;font-weight:700;list-style:none}.support-deep-dive summary::-webkit-details-marker{display:none}.support-deep-dive summary svg{color:var(--blue)}.support-deep-dive summary:after{content:'+';margin-left:auto;color:var(--muted);font-size:17px;font-weight:400}.support-deep-dive details[open] summary:after{content:'−'}.support-deep-dive__body{padding:0 14px 14px;color:var(--slate);font-size:12.5px;line-height:1.6}.support-deep-dive__body ul{display:grid;gap:7px;margin:0;padding-left:18px}.support-example{padding:12px;border-radius:9px;background:var(--brand-blue-soft);border:1px solid #DFE7F7;color:var(--ink-2)}
.support-section{padding-top:20px}.support-section h3{font-size:14px;margin-bottom:12px}.support-steps{margin:0;padding:0;list-style:none;counter-reset:support-step;display:grid;gap:10px}.support-steps li{counter-increment:support-step;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;color:var(--slate);line-height:1.5}.support-steps li:before{content:counter(support-step);width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--navy);color:#fff;font-family:'Space Grotesk';font-size:11px;font-weight:700}
.support-tip{display:flex;gap:10px;margin-top:18px;padding:13px 14px;border-radius:10px;background:var(--brand-green-soft);border:1px solid var(--brand-green-line);color:var(--ink-2);font-size:12.5px;line-height:1.5}.support-tip svg{flex:0 0 auto;color:var(--brand-green-mark);margin-top:1px}
.support-preflight{margin-top:18px;padding:15px;border:1px solid #DDE4F0;border-radius:11px;background:var(--testa-2)}.support-preflight h3{display:flex;align-items:center;gap:7px;font-size:13px;margin-bottom:10px}.support-checks{margin:0;padding:0;list-style:none;display:grid;gap:7px}.support-checks li{display:flex;gap:8px;color:var(--slate);font-size:12.5px;line-height:1.45}.support-checks li:before{content:'✓';flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--ok-tint);color:var(--ok);font-size:10px;font-weight:800}
.support-success{display:flex;gap:10px;margin-top:18px;padding:14px;border-radius:11px;background:#EDF9F1;border:1px solid #CBEBD5;color:#225C35;font-size:12.5px;line-height:1.5}.support-success svg{flex:0 0 auto;margin-top:1px}.support-success b{display:block;color:#174A29;margin-bottom:2px}
.support-problem{margin-top:12px;border:1px solid #F1DFC0;border-radius:11px;background:#FFF9EF}.support-problem summary{cursor:pointer;padding:13px 14px;color:#704E13;font-size:12.5px;font-weight:700;list-style:none}.support-problem summary::-webkit-details-marker{display:none}.support-problem summary:after{content:'+';float:right;font-size:17px;font-weight:400}.support-problem[open] summary:after{content:'−'}.support-problem p{margin:0;padding:0 14px 14px;color:#725D39;font-size:12.5px;line-height:1.55}
.support-faq{margin-top:18px;padding:18px}.support-faq h2{font-size:16px;margin-bottom:12px}.support-faq details{border-top:1px solid var(--hair)}.support-faq details:first-of-type{border-top:0}.support-faq summary{cursor:pointer;padding:13px 2px;color:var(--ink);font-weight:600;list-style:none}.support-faq summary::-webkit-details-marker{display:none}.support-faq summary:after{content:'+';float:right;color:var(--muted);font-size:18px;font-weight:400}.support-faq details[open] summary:after{content:'−'}.support-faq details p{margin:0 0 14px;color:var(--muted);font-size:12.5px;line-height:1.6}
@media(max-width:1050px){.support-quick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.support-layout{grid-template-columns:1fr}.support-list{max-height:330px}}
@media(max-width:700px){.support-quick{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;padding:1px 1px 7px}.support-quick__item{min-width:min(76vw,250px);min-height:60px;scroll-snap-align:start}.support-filter{min-height:38px}}
@media(max-width:600px){
  .support-hero{padding:17px;margin-bottom:14px}.support-hero__mark{display:none}.support-hero h1{font-size:22px}.support-hero p{font-size:13px}
  .support-context{align-items:stretch}.support-context__badge,.support-back{width:100%;min-height:40px;justify-content:flex-start}.support-back{text-align:left}
  .support-layout{gap:14px}.support-sidebar{position:relative;z-index:4;overflow:visible}.support-sidebar__head{padding:14px}.support-mobile-picker{display:block}.support-filters,.support-list{display:none}
  .support-detail{padding:16px}.support-detail__top{display:block}.support-detail h2{font-size:20px}.support-open{width:100%;min-height:44px;justify-content:center;margin-top:14px}.support-knowledge{grid-template-columns:1fr}.support-deep-dive summary{min-height:46px}
  .support-section{padding-top:17px}.support-faq{padding:16px;margin-top:14px}.support-faq summary{padding:14px 2px}
}

/* ---- Il filo di una richiesta di assistenza ----
   Una richiesta si legge dall'alto in basso, come una conversazione: i
   messaggi non sono righe di tabella, sono interventi. La nota interna si
   distingue per FONDO e per etichetta, non per il solo colore: chi la scrive
   deve vedere a colpo d'occhio che il cliente non la leggera'. */
.ricfilo{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-4)}
.ricmsg{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3) var(--s-4);background:var(--panel)}
.ricmsg--interno{background:var(--warn-bg);border-color:#F0DFC2}
.ricmsg__h{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;margin-bottom:5px;font-size:var(--t-xs)}
.ricmsg__h b{font-size:var(--t-sm);color:var(--ink)}
.ricmsg__h span{color:var(--faint)}
.ricmsg__c{font-size:var(--t-sm);color:var(--slate);line-height:var(--lh);white-space:pre-wrap;overflow-wrap:anywhere}
.ricrisposta{border-top:1px solid var(--line);padding-top:var(--s-3)}
.ricrisposta label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink);margin-bottom:5px}
.ricrisposta textarea{
  width:100%;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:9px 11px;font:inherit;font-size:var(--t-base);resize:vertical
}
.ricrisposta__az{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-2)}
.ricrisposta__interno{display:flex;align-items:center;gap:7px;font-size:var(--t-xs);font-weight:400;color:var(--faint);margin:0}
.ricrisposta__az .actbtn{margin-left:auto}

/* ---- Profilo ----
   Una riga per fatto: a sinistra che cos'e', a destra quanto vale e chi lo
   puo' cambiare. La nota non e' decorazione: e' la risposta alla domanda che
   nasce guardando un campo che non si puo' modificare. */
.profilo{max-width:860px}
.pblocco{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.prow{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s-4);padding:var(--s-4);border-bottom:1px solid var(--hair)}
.prow:last-child{border-bottom:0}
.prow__e{font-size:var(--t-sm);font-weight:650;color:var(--slate-700)}
.prow__v{min-width:0;font-size:var(--t-base);color:var(--ink)}
.prow__v b{font-weight:650}
.prow__n{display:block;margin-top:4px;font-size:var(--t-xs);color:var(--faint);line-height:var(--lh)}
.pfoto{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap}
.pfoto img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid var(--line)}
.pfoto__sigla{
  width:72px;height:72px;border-radius:50%;background:var(--brand-blue);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:26px
}
.pfoto__az{display:flex;gap:var(--s-2);flex-wrap:wrap}
.pfoto__url{margin-top:var(--s-3)}
.pfoto__url label{display:block;font-size:var(--t-xs);color:var(--faint);margin-bottom:4px}
.pfoto__url input{
  flex:1;min-width:0;height:34px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:0 10px;font-size:var(--t-sm)
}
.ppassword{margin-top:var(--s-3);display:grid;gap:var(--s-2);max-width:380px}

@media(max-width:879.98px){
  .prow{grid-template-columns:1fr;gap:var(--s-1)}
  .prow__e{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
}
@media(max-width:479.98px){
  .ricrisposta__az .actbtn{margin-left:0;width:100%;justify-content:center;min-height:44px}
  .pfoto__az .sec{min-height:44px}
}

/* ===== 40-elenchi.css ===== */
/* ---- Registro degli accessi e delle attivita' ----
   Riquadri, tabelle, pastiglie e stati vuoti stanno in 05-controlli.css:
   sono gli stessi di ogni altro elenco del CRM. Qui resta la barra dei filtri
   del Registro, che e' l'unica schermata con quattro filtri insieme.
   ---------------------------------------------------------------- */
/* Cinque colonne a larghezza minima fissa sommavano piu' della finestra appena
   il menu era aperto, e i due pulsanti in coda finivano fuori. Con auto-fit le
   colonne si riordinano da sole a ogni larghezza, senza una soglia da
   indovinare. */
.audit-toolbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:var(--s-2);align-items:end;margin-bottom:var(--s-4);padding:var(--s-4);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:none}
.audit-search{grid-column:span 2}
.audit-field{display:grid;gap:5px}.audit-field label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}.audit-field input,.audit-field select{width:100%;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:12.5px}.audit-field input:focus,.audit-field select:focus{outline:2px solid rgba(7,68,243,.12);border-color:var(--blue)}
.audit-actions{display:flex;gap:7px}.audit-actions button{height:40px;white-space:nowrap}.audit-views{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-2px 0 14px}.audit-views__label{font-size:11px;font-weight:700;color:var(--muted)}.audit-view{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--slate);font-size:11.5px}.audit-view:hover{border-color:var(--navy);color:var(--navy)}.audit-view__remove{border:0;background:transparent;color:var(--faint);padding:0 1px;font-size:14px;line-height:1}.audit-view__remove:hover{color:var(--danger)}
.audit-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.audit-summary__card{padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:#fff}.audit-summary__card span{display:block;color:var(--muted);font-size:11px}.audit-summary__card b{display:block;margin-top:4px;color:var(--ink);font-size:20px}.audit-summary__card.ok b{color:var(--ok)}.audit-summary__card.info b{color:var(--navy)}
.audit-event{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ink)}.audit-event:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--faint)}.audit-event.ok:before{background:var(--ok)}.audit-event.warn{color:var(--danger)}.audit-event.warn:before{background:var(--danger)}.audit-sub{display:block;margin-top:3px;color:var(--faint);font-size:10.5px}.audit-count{margin-left:auto;color:var(--muted);font-size:11.5px}
@media(max-width:980px){.audit-toolbar{grid-template-columns:1fr 1fr}.audit-search{grid-column:1/-1}.audit-actions{justify-content:flex-end}}
@media(max-width:600px){.audit-toolbar{grid-template-columns:1fr}.audit-search{grid-column:auto}.audit-actions{justify-content:stretch}.audit-actions button{flex:1}.audit-summary{grid-template-columns:1fr 1fr}.audit-summary__card:first-child{grid-column:1/-1}.audit-tabs{overflow-x:auto;padding-bottom:3px}.audit-tabs .seg{white-space:nowrap}.audit-count{width:100%;margin-left:0}}

/* ---- Righe di elenco che non escono dall' inquadratura ----
   Nei Lead le due azioni di riga («Apri scheda», «Passa a trattativa») non
   andavano mai a capo: sotto gli 820 px uscivano dalla tabella e il secondo
   pulsante - quello che fa il lavoro - finiva fuori schermo. */
.lead-tools{flex-wrap:wrap}
.tbl td>div{flex-wrap:wrap}
.audit-actions{flex-wrap:wrap}
.audit-tabs{flex-wrap:wrap}

/* ---- Elenchi condivisi: Lead, Aziende, Contatti ----
   Trasferito dal mockup approvato. Stessa impaginazione per tutti e tre: chi
   impara a usare i Lead sa gia' usare Aziende e Contatti. Sotto gli 880 px la
   tabella non si comprime — diventa un elenco di schede, perche' una tabella a
   sei colonne dentro 390 px non si legge, si indovina. */
.etools{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);flex-wrap:wrap}
.etools .cerca{
  flex:1;min-width:200px;max-width:420px;height:34px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:0 12px;font-size:var(--t-sm)
}
.etools select{
  height:34px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:0 10px;font-size:var(--t-sm);background:var(--panel)
}
.etools__conta{margin-left:auto;display:flex;gap:var(--s-4);align-items:baseline;font-size:var(--t-xs);color:var(--faint)}
.etools__conta b{font-size:var(--t-base);color:var(--ink);font-variant-numeric:tabular-nums}

.ewrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.etab{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.etab th{
  text-align:left;padding:9px var(--s-3);background:var(--testa);border-bottom:1px solid var(--line);
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--slate-700);white-space:nowrap
}
.etab th button{border:0;background:transparent;font:inherit;color:inherit;padding:0;display:inline-flex;gap:4px}
.etab td{padding:9px var(--s-3);border-bottom:1px solid var(--testa);vertical-align:top;color:var(--slate)}
.etab tr:last-child td{border-bottom:0}
.etab tbody tr:hover td{background:var(--blue-50)}
.etab .nome{font-weight:650;color:var(--ink)}
.etab .sotto{display:block;font-size:var(--t-xs);color:var(--faint);margin-top:2px}
.etab .num{font-variant-numeric:tabular-nums}
/* Il nome apre la scheda ed e' un comando vero: si raggiunge con Tab, si attiva
   con Invio e mostra il proprio contorno di fuoco. Una riga cliccabile funziona
   col solo mouse. */
.eapri{border:0;background:transparent;padding:0;font:inherit;text-align:left;color:inherit;width:100%}

.ecard{display:none}
.ecard__r{
  display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--testa);
  background:var(--panel);padding:var(--s-3) var(--s-4)
}
.ecard__r:last-child{border-bottom:0}
.ecard__r:hover{background:var(--blue-50)}
/* Titolo e sottotitolo sono due blocchi, non due «span» in linea: attaccati si
   leggevano come una frase sola. */
.ecard__t{display:block;font-size:var(--t-md);font-weight:650;color:var(--ink)}
.ecard__s{display:block;font-size:var(--t-xs);color:var(--faint);margin-top:2px}
.ecard__p{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
/* Le pastiglie dicono che cos'e', i comandi che cosa farci: due bande separate
   da una riga sottile, non una poltiglia sola. */
.ecard__az{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:9px;padding-top:9px;border-top:1px solid var(--testa)}

/* Il piede dice quante righe stai vedendo su quante ce ne sono: senza, una
   tabella che ne mostra venticinque sotto un contatore che ne dichiara
   cinquantasei sembra semplicemente sbagliata. */
.epiede{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;
  padding:10px var(--s-4);border-top:1px solid var(--line);background:var(--testa-2);
  font-size:var(--t-xs);color:var(--faint)
}
.epiede__nav{display:flex;align-items:center;gap:var(--s-2)}

/* A 880 px una tabella a sei colonne si accartoccia: sotto quella soglia
   diventa un elenco di schede. */
@media(max-width:879.98px){
  .etab{display:none}
  .ecard{display:block}
  .etools__conta{margin-left:0;width:100%}
}

/* ---------- Una tabella che su telefono si scorre invece di sparire ----------
   Sotto gli 880 px `.etab` si nasconde e al suo posto compaiono le schede
   `.ecard`. Funziona per gli elenchi che quelle schede le disegnano —
   Aziende, Contatti, Lead — ma il Registro amministrativo no: le sue tre
   tabelle (Accessi, Attivita' utenti, Operazioni CRM) non hanno una forma a
   schede, quindi su un telefono restavano intestazione, filtri e contatore
   sopra il nulla. Non un elenco vuoto: proprio le righe che non c'erano, con
   il contatore che ne dichiarava trenta.
   Qui la tabella resta una tabella e scorre dentro il proprio riquadro. Si
   conservano tutte le colonne — azione, soggetto o utente, data ed esito — e
   nessun evento viene nascosto; scorre il contenitore, non la pagina.
   `min-width` e' la larghezza sotto la quale le cinque colonne si
   accartoccerebbero: e' quella a far comparire la barra, non un numero
   arbitrario. */
.ewrap--scorre{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:879.98px){
  .ewrap--scorre .etab{display:table;min-width:640px}
}

/* ---------- Dove vivono le viste personali ----------
   Sono salvate nel browser di chi le crea. Senza dirlo, «Viste personali»
   accanto a un elenco condiviso si legge come una vista del CRM che i
   colleghi vedranno: chi ne salva una per il collega scopre solo dopo che non
   e' arrivata da nessuna parte. */
.audit-views__dove{
  flex-basis:100%;margin-top:2px;
  font-size:var(--t-xs);color:var(--faint);line-height:var(--lh)
}

/* ---------- Un campo che non c'e', nella tabella ----------
   Nella tabella il trattino resta — un buco incolonnato si legge come «manca»,
   ed e' un'informazione — ma non deve pesare quanto un dato vero. Prima ogni
   colonna se lo dipingeva da se' con uno stile in linea: sei dichiarazioni
   identiche in due file, che e' il modo in cui due elenchi finiscono per
   mostrare lo stesso vuoto in due grigi diversi. */
.ecella-vuota{color:var(--faint);font-weight:400}

/* ---------- Il titolo della scheda stretta ----------
   `.ecard__t` porta la prima colonna, che negli elenchi Aziende e Contatti e'
   fatta di due pezzi: il nome e, sotto, l'identificativo — «P. IVA 01234567890»
   per un'azienda. Senza questa regola i due finivano sulla stessa riga,
   incollati, e la ragione sociale si leggeva come se contenesse il numero. */
.ecard__t .nome{display:block}
.ecard__t .sotto{
  display:block;margin-top:2px;
  font-size:var(--t-xs);font-weight:400;color:var(--faint)
}

/* ===== 50-schede.css ===== */
/* Azioni rapide in cima alla scheda. Sono la stessa barra su tutte e quattro
 le schede: la posizione di un'azione non cambia a seconda di dove si sta. */
.quickacts{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px}
.quickact{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;padding:8px 11px;color:var(--ink-2);font-size:12px;font-weight:650;text-decoration:none;white-space:nowrap}
.quickact:hover{border-color:var(--navy);color:var(--navy);background:var(--testa-2)}
.quickact:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed}
.quickact:disabled:hover{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink)}
.quickact.primary{border-color:var(--brand-green);background:var(--brand-green);color:var(--on-green)}
.quickact.primary:hover{border-color:var(--brand-green-hover);background:var(--brand-green-hover);color:var(--on-green)}
.quickact.danger{border-color:#F4B8BE;color:var(--danger)}
.quickact.danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-tint)}
/* Linguette della scheda: com'e' fatto, cosa e' successo, a cosa e' legato. */
.schedatabs{display:flex;gap:4px;margin:14px 0 4px;padding:4px;border:1px solid var(--line);border-radius:11px;background:var(--testa-2);overflow-x:auto}
.schedatab{display:inline-flex;align-items:center;gap:6px;flex:1;justify-content:center;white-space:nowrap;border:0;border-radius:8px;background:transparent;padding:9px 12px;color:var(--slate);font-size:12px;font-weight:700}
.schedatab:hover{color:var(--navy)}
.schedatab.on{background:#fff;color:var(--navy);box-shadow:var(--sh)}
.schedatab__badge{border-radius:999px;background:var(--blue-100);color:var(--slate);padding:1px 7px;font-size:10.5px;font-weight:700}
.schedatab.on .schedatab__badge{background:var(--lime-tint);color:var(--navy)}
/* Intestazione d'identita' di un contatto: chi e', dove lavora, come si
 raggiunge. I recapiti sono collegamenti veri, non testo da ricopiare. */
.idcard{display:flex;align-items:flex-start;gap:13px;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--testa-2);margin-bottom:4px}
.idcard__avatar{width:46px;height:46px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-size:16px;font-weight:700;letter-spacing:.5px}
.idcard__main{min-width:0;flex:1}
.idcard__main h1{margin:0;font-size:19px;line-height:1.25;color:var(--ink)}
.idcard__sub{margin-top:3px;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis}
.idcard__sub .muted,.idcard__contatti .muted{color:var(--faint)}
.idcard__contatti{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;font-size:12.5px}
.idcard__contatti a{color:var(--brand-blue);text-decoration:none}
.idcard__contatti a:hover{text-decoration:underline}
.idcard__ruoli{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
/* Segnali sulla scheda in board: da quanto e' ferma e qual e' il prossimo
 passo. Il colore non porta mai da solo l'informazione — il testo la dice. */
/* I tre segnali su UNA riga: da quanto e' ferma, qual e' il prossimo passo,
   chi ce l'ha in carico. Erano tre righe impilate piu' una riga di separazione,
   cioe' meta' dell'altezza della scheda per dati che si leggono di sfuggita. */
.card__segnali{display:flex;align-items:center;gap:6px;margin-top:7px;min-width:0}
.card__passo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;min-width:0}
/* «ferma da 14 giorni» diventa «14 g» in una pastiglia colorata per gravita':
   stesso dato, un quinto dello spazio, e il colore torna a voler dire qualcosa
   perche' non e' piu' acceso su tutte le schede. */
.card__eta{
  flex-shrink:0;border-radius:5px;padding:1px 5px;font-size:10px;font-weight:700;
  background:var(--hair);color:var(--muted)
}
.card__eta.attenzione{background:#FEF3C7;color:#92400E}
.card__eta.critico{background:#FEE2E2;color:var(--danger)}
.card__passo{color:var(--muted)}
.card__passo.scaduto{color:var(--danger);font-weight:600}
/* «Nessun prossimo passo» compariva in ambra e in grassetto su nove schede
   su dieci: un allarme che suona sempre non avverte piu' di niente, e copriva
   il segnale vero, che e' la riga sopra — da quanto la trattativa e' ferma,
   gia' colorata secondo la gravita'.
   E una trattativa senza prossima attivita' e' una cosa DA FARE, non uno stato
   da constatare: «da programmare» e' un'istruzione, «nessun prossimo passo»
   era un referto. In ambra tenue con un pallino davanti si riconosce scorrendo
   la colonna senza gridare, e il rosso resta a cio' che e' gia' scaduto. */
.card__passo.mancante{
  flex-shrink:0;display:inline-flex;align-items:center;gap:4px;
  border-radius:5px;padding:1px 6px;background:#FDF4E3;color:#8A5A00;
  font-size:10px;font-weight:700
}
.card__passo.mancante::before{content:'';width:5px;height:5px;border-radius:50%;background:#E0A03A;flex-shrink:0}
/* Intestazione di sezione dentro una scheda: separa i fatti dal lavoro. */
.dsec{display:flex;align-items:center;gap:10px;margin:22px 0 12px;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.dsec.first{margin-top:14px}
.dsec::after{content:"";flex:1;height:1px;background:var(--hair)}

/* ---- Il campo che non si modifica piu' ----
   Resta solo questo delle regole del ciclo proposta: il valore economico di una
   trattativa chiusa, che si legge ma non si riscrive perche' e' gia' un
   consuntivo. Gli stili di `.proposal-lifecycle` sono stati tolti insieme al
   pannello che li usava. */
.proposal-locked-field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:5px 0 10px;padding:10px 11px;border:1px dashed #c9d3e2;border-radius:var(--radius-sm);background:var(--testa-2);color:var(--muted);font-size:11.5px}
.proposal-locked-field b{color:var(--ink-2);font-size:11.5px;text-align:right}


/* ---- Il modulo dei dati del lead ----
   La scheda del lead RACCOGLIE: i campi si compilano dove si leggono, senza
   passare da una finestra «Modifica». Prima gli stessi valori vivevano in tre
   posti — la finestra, un riquadro a se' per l'azienda, e alcune righe in sola
   lettura che li ripetevano — e nessuno dei tre mostrava la scheda intera. */
.modulo-lead{display:flex;flex-direction:column;gap:var(--s-2);margin:var(--s-3) 0}
.modulo-lead__griglia{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
/* Il piede resta in fondo al modulo e non galleggia: il salvataggio e' un
   gesto che si fa alla fine, e un pulsante che segue lo scorrimento su un
   modulo corto e' soltanto una cosa che si muove. */
.modulo-lead__piede{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-2);margin-top:var(--s-2);padding-top:var(--s-3);
  border-top:1px solid var(--hair)
}
.modulo-lead__piede .hint{margin:0}
@media(max-width:479.98px){
  .modulo-lead__griglia{grid-template-columns:1fr}
  .modulo-lead__piede{flex-direction:column;align-items:stretch}
  .modulo-lead__piede .actbtn{width:100%;justify-content:center}
}
/* L'azienda collegata: il nome e il comando sulla stessa riga, perche' sono la
   stessa informazione vista da due lati. */
.campo-azienda{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-2) var(--s-3);border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel)
}
.campo-azienda b{min-width:0;overflow-wrap:anywhere;font-size:var(--t-sm)}
.elenco-scelta{list-style:none;margin:var(--s-2) 0 0;padding:0;max-height:190px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-sm)}
.elenco-scelta li+li{border-top:1px solid var(--hair)}
.elenco-scelta .eapri{width:100%;text-align:left;padding:var(--s-2) var(--s-3)}

/* ---- La cella «Responsabile» dell'elenco Lead ----
   E' l'unica superficie di assegnazione del CRM: il nome di chi ha in carico
   il lead e il comando per cambiarlo stanno insieme. Chi non puo' assegnare
   vede il solo nome — un permesso mancante toglie il comando, non il dato. */
.cella-owner{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cella-owner b{font-weight:650}
.cella-owner small{color:var(--faint);font-size:var(--t-xs)}
.cella-owner .lnk{padding:0;font-size:var(--t-xs)}

/* ===== 52-proposte.css ===== */
/* ---- Proposte ----
   Il pannello della proposta dentro la scheda della trattativa.

   Sta dopo 50-schede.css perche' vive dentro il drawer e ne eredita le
   spaziature; sta prima di 70-smartphone.css, che e' l'unico posto in cui le
   regole generali della forma stretta possono avere l'ultima parola. Le due
   eccezioni che questo foglio deve difendere anche li' — la larghezza minima
   della tabella e l'altezza dei comandi al dito — sono scritte con la
   specificita' che serve, non con `!important`.

   Nessun colore, nessuna misura e nessun raggio scritti a mano: tutto viene
   dalle variabili di 00-fondamenta.css. Un pannello che si inventa i propri
   numeri e' esattamente il motivo per cui due riquadri sorelli non si somigliano
   mai del tutto.
   ---------------------------------------------------------------- */

.proposta{display:flex;flex-direction:column;gap:var(--s-4);margin-top:var(--s-3)}

/* ---- La regione degli esiti ----
   Sta sempre nel DOM, anche vuota: un contenitore `aria-live` che nasce insieme
   al proprio messaggio non viene annunciato, perche' il lettore di schermo non
   lo stava ancora osservando. Da vuota non occupa spazio. */
.proposta__esito:empty{display:none}
.proposta__esito .errbox,.proposta__esito .avviso{margin-bottom:0}

/* ---- Intestazione: quale versione si sta guardando ----
   Il numero e' il dato, le pastiglie il contorno. Si piega a capo invece di
   stringere il numero: sotto i 400 px le due pastiglie da sole occupano piu'
   della meta' della riga. */
.proposta__intestazione{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--testa-2)
}
.proposta__etichetta{
  display:block;font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--faint)
}
.proposta__numero{display:block;margin-top:2px;font-size:var(--t-lg);color:var(--ink)}
.proposta__pastiglie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}

/* ---- I blocchi ----
   Sono `.riquadro` di 06-blocchi.css: qui si corregge soltanto il margine, che
   la riga `.riquadro+.riquadro` imporrebbe due volte dentro un contenitore che
   ha gia' il proprio `gap`. */
.proposta__blocco+.proposta__blocco{margin-top:0}
.proposta__spiega{margin:0 0 var(--s-3)}
.proposta__spiega:last-child{margin-bottom:0}
.proposta__avviso{margin:0}
.proposta__vuoto{padding:var(--s-4) var(--s-5);color:var(--muted);font-size:var(--t-base);line-height:var(--lh)}

/* ---- La tabella che scorre dentro se' stessa ----
   Sette colonne non entrano in 390 px e non devono provarci: la tabella tiene
   la propria larghezza minima e scorre nel suo contenitore. Far scorrere la
   PAGINA sarebbe peggio che stringere — si perderebbe di vista la riga a cui il
   totale appartiene, che e' l'unica ragione per cui lo si sta leggendo.

   `.proposta__tabella table.tbl` batte la regola di 70-smartphone.css che porta
   ogni tabella a 690 px: quella misura e' fatta per gli elenchi a tutta pagina,
   e qui dentro un drawer produrrebbe uno scorrimento inutilmente lungo. */
.proposta__tabella{overflow-x:auto;-webkit-overflow-scrolling:touch}
.proposta__tabella table.tbl{min-width:640px}
.proposta__tabella .tbl th,.proposta__tabella .tbl td{padding:var(--s-3) var(--s-4)}
.proposta__tabella .tbl td:first-child{line-height:var(--lh-tight)}

/* I numeri stanno a destra e in cifre di larghezza fissa: incolonnati si
   confrontano a colpo d'occhio, e una cifra piu' stretta delle altre fa
   ballare l'incolonnamento riga per riga. */
.proposta__num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.proposta__sotto{display:block;margin-top:2px;font-size:var(--t-xs);font-weight:400;color:var(--faint);line-height:var(--lh)}
.proposta__impronta{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ---- I comandi di riga ----
   `.sec` nasce alta 30 px: va bene per un mouse, non per un pollice. Dentro una
   riga di dati cresce, come gia' fa nella checklist dei requisiti e nella riga
   dei collegamenti. */
.proposta__comandi{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:flex-end}
.proposta__comandi .sec{min-height:34px}
/* Un comando che toglie qualcosa si tinge solo al contatto: acceso di rosso a
   riposo, su una tabella di dieci righe, farebbe sembrare l'elenco un allarme. */
.proposta__sec--rischio:hover:not(:disabled){border-color:var(--danger);background:var(--danger-tint);color:var(--danger)}

/* ---- I cinque totali ----
   Una definition list e non una tabella: sono cinque coppie etichetta/valore,
   non righe confrontabili fra loro. L'ultimo — il totale — e' l'unico che si
   deve vedere da lontano, e lo dice il peso, non un colore. */
.proposta__totali{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--s-2) var(--s-4);margin:var(--s-4) var(--s-5) 0;padding:0
}
.proposta__totali>div{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--s-3) 0;border-top:1px solid var(--hair)
}
.proposta__totali dt{
  font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--faint)
}
.proposta__totali dd{
  margin:0;font-size:var(--t-md);font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums
}
.proposta__totali--finale dt{color:var(--ink-2)}
.proposta__totali--finale dd{font-size:var(--t-xl);font-weight:700}
.proposta .riquadro__corpo--tabella .nota{margin:var(--s-2) var(--s-5) var(--s-4)}

/* ---- L'elenco dei firmatari e delle versioni ---- */
.proposta__elenco{list-style:none;margin:0;padding:0}
.proposta__voce{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-3);
  padding:var(--s-3) 0;border-bottom:1px solid var(--hair)
}
.proposta__voce:last-child{border-bottom:0;padding-bottom:0}
.proposta__voce:first-child{padding-top:0}
/* Il numero d'ordine e' una coordinata di lettura, non un dato: sta in un
   cerchio piccolo e non entra nel nome accessibile della voce. */
.proposta__ordine{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--hair);color:var(--faint);
  font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums
}
.proposta__voceTesto{flex:1 1 200px;min-width:0}
.proposta__voceTesto>b{display:block;color:var(--ink);font-size:var(--t-base);font-weight:650;overflow-wrap:anywhere}
.proposta__voceTesto .proposta__pastiglie{margin-top:var(--s-2)}

/* ---- I moduli di scrittura ----
   Non sono finestre sopra il lavoro: si aprono sotto l'elenco a cui
   appartengono, cosi' chi scrive una riga continua a vedere le altre. Il fondo
   piu' freddo e il filo li separano dal contenuto in sola lettura. */
.proposta__modulo{
  margin:var(--s-4) 0 0;padding:var(--s-4);
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--hair)
}
/* Un corpo che contiene una tabella non ha margini interni — li ha la tabella —
   quindi qui il modulo se li mette da solo, altrimenti toccherebbe i bordi. */
.riquadro__corpo--tabella>.proposta__modulo{margin-left:var(--s-5);margin-right:var(--s-5)}
.proposta__moduloTesta{
  font-size:var(--t-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--faint);margin-bottom:var(--s-3)
}
.proposta__campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-3)}
.proposta__campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.proposta__campo--larga{grid-column:1/-1}
.proposta__campo label{font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.proposta__campo input,.proposta__campo textarea{
  width:100%;padding:9px 11px;font-size:var(--t-md);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--panel);color:var(--ink)
}
.proposta__campo textarea{resize:vertical;line-height:var(--lh)}
.proposta__campo input:focus,.proposta__campo textarea:focus{
  border-color:var(--brand-blue);box-shadow:0 0 0 3px var(--brand-blue-ring);outline:none
}
/* La spunta e la sua etichetta stanno sulla stessa riga e l'etichetta e'
   cliccabile: e' il bersaglio grande, la casella da sola non lo e'. */
.proposta__campo--spunta{
  grid-column:1/-1;flex-direction:row;align-items:center;gap:var(--s-2)
}
.proposta__campo--spunta input{width:18px;height:18px;flex-shrink:0;padding:0}
.proposta__campo--spunta label{font-weight:400;font-size:var(--t-base);color:var(--slate)}
.proposta__aiuto{font-size:var(--t-xs);color:var(--faint);line-height:var(--lh)}

/* ---- Le file di comandi ---- */
.proposta__azioni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);justify-content:flex-end;margin-top:var(--s-4)}
.proposta__azioni--sinistra{justify-content:flex-start}
.proposta__corpoDocumenti .proposta__azioni{margin-top:0}
.proposta__corpoDocumenti{padding:var(--s-5)}
.proposta__corpoDocumenti .hint{margin-top:var(--s-3)}

/* ---- Il caricamento del PDF ----
   Il documento arriva da fuori (contratto 05-pdf-ancore §2): questo blocco e'
   un modulo di scrittura come gli altri, e usa lo stesso fondo piu' freddo per
   dire «qui si agisce» in mezzo a una scheda che per il resto si legge.

   I campi stanno in colonna e non nella griglia di `.proposta__campi`: sono
   tre — file, conferma, comando — e ognuno e' largo quanto la scheda, quindi la
   griglia non avrebbe niente da affiancare. */
.proposta__caricamento{
  margin:0 0 var(--s-4);padding:var(--s-4);
  border:1px solid var(--line);border-radius:var(--radius-md);background:var(--hair);
  display:flex;flex-direction:column;gap:var(--s-3)
}
.proposta__caricamento .hint{margin-top:0}
/* Il selettore di file non e' un campo di testo: il riempimento verticale dei
   campi lo renderebbe piu' alto del pulsante che il browser ci disegna dentro. */
.proposta__caricamento input[type=file]{padding:7px 9px;font-size:var(--t-sm)}
.proposta__caricamento .proposta__azioni{margin-top:0}

/* ---- I problemi trovati nel documento ----
   Uno per riga, con il titolo della famiglia e sotto il dettaglio del backend —
   quale firmatario, quale punto di firma. Sono cose da correggere, non un
   guasto: il tono e' l'ambra degli avvisi, non il rosso degli errori. */
.proposta__errori{
  list-style:none;margin:var(--s-4) 0 0;padding:var(--s-3) var(--s-4);
  border:1px solid #F5D9A8;border-radius:var(--radius-md);background:var(--warn-bg)
}
.proposta__errore{padding:var(--s-2) 0;border-bottom:1px solid rgba(168,110,5,.18)}
.proposta__errore:last-child{border-bottom:0;padding-bottom:0}
.proposta__errore:first-child{padding-top:0}
.proposta__errore b{display:block;font-size:var(--t-base);font-weight:700;color:var(--warn)}
.proposta__errore span{display:block;margin-top:2px;font-size:var(--t-sm);color:var(--slate);line-height:var(--lh)}

/* ---- La riconciliazione ----
   Un comando amministrativo separato dal resto da un filo: non e' un passo del
   lavoro ordinario, e' cio' che si fa quando un avviso non e' arrivato. */
.proposta__riconcilia{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--hair)}
.proposta__riconcilia .nota{margin-top:var(--s-2)}

/* ---- Le versioni precedenti ----
   Aperte, mostrano gli stessi due blocchi della versione corrente. Senza questa
   regola sarebbero riquadri dentro un riquadro dentro un riquadro: qui perdono
   bordo e fondo e restano il solo contenuto. */
.proposta__voce--storia{flex-wrap:wrap}
.proposta__storiaCorpo{flex:1 1 100%;margin-top:var(--s-3);display:flex;flex-direction:column;gap:var(--s-3)}
.proposta__storiaCorpo .riquadro{border:0;border-radius:0;border-top:1px solid var(--hair);background:none}
.proposta__storiaCorpo .riquadro__testa{padding:var(--s-3) 0 var(--s-2);border-bottom:0}
.proposta__storiaCorpo .riquadro__titolo{font-size:var(--t-base)}
.proposta__storiaCorpo .riquadro__corpo{padding:0}
.proposta__storiaCorpo .proposta__totali{margin-left:0;margin-right:0}
.proposta__storiaCorpo .riquadro__corpo--tabella .nota{margin-left:0;margin-right:0}

/* ---- Forma stretta ----
   Sotto i 480 px i comandi di riga vanno a tutta larghezza e crescono a 44 px:
   e' la stessa correzione che la checklist dei requisiti applica ai propri, e
   per la stessa ragione — sotto quella misura il dito manca il bersaglio. */
@media(max-width:700px){
  .riquadro__corpo--tabella>.proposta__modulo{margin-left:var(--s-4);margin-right:var(--s-4)}
  .proposta__totali{margin-left:var(--s-4);margin-right:var(--s-4)}
  .proposta__corpoDocumenti{padding:var(--s-4)}
  .proposta .riquadro__corpo--tabella .nota{margin-left:var(--s-4);margin-right:var(--s-4)}
}
@media(max-width:479.98px){
  .proposta__campi{grid-template-columns:1fr}
  .proposta__voce{flex-direction:column;align-items:stretch}
  .proposta__comandi{justify-content:stretch}
  .proposta__comandi .sec{flex:1;justify-content:center;min-height:44px}
  .proposta__azioni .actbtn,.proposta__azioni .sec{flex:1;justify-content:center;min-height:44px}
  .proposta__totali--finale dd{font-size:var(--t-lg)}
}

/* ===== 55-forecast-diario.css ===== */
/* Forecast: barre di magnitudine. Le tre tinte sono una scala sequenziale
 (chiaro -> scuro) perche' misurano una quantita', non identificano categorie
 diverse; l'identita' la porta l'etichetta accanto. Ogni barra ha comunque il
 suo valore scritto e la tabella equivalente, quindi il dato non dipende mai
 dal colore. */
:root{--fc-1:#9ec1f5;--fc-2:var(--brand-blue);--fc-3:var(--navy-900)}
/* ---- Forecast: due registri distinti sulla stessa schermata ----
   Trasferito dal mockup approvato. Tenerli separati E' la correzione: il
   consuntivo ha un asse del tempo perche' ogni chiusura porta la propria data,
   la pipeline aperta non ce l'ha, perche' in questo CRM nessuna trattativa
   dichiara quando chiudera'. Sommarli — o applicare a entrambi lo stesso
   selettore di periodo — e' l'errore classico del forecast: mescolare una
   previsione e un risultato sotto un unico numero.
   ---------------------------------------------------------------- */
.fcguida{font-size:var(--t-sm);color:var(--slate-700);margin-bottom:var(--s-4);max-width:78ch;line-height:var(--lh)}
/* Un blocco e' una domanda sola, e si separa dal successivo con lo spazio, non
   con un riquadro: i riquadri annidati sono quello che rende pesante una
   schermata di indicatori. La gerarchia la portano il titolo e la spaziatura. */
.fcsez{margin-bottom:var(--s-6)}
.fcsez__cap{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-1)}
.fcsez__cap h2{font-size:var(--t-lg);font-weight:700;margin:0;color:var(--ink)}
.fcsez__cap span{font-size:var(--t-xs);color:var(--faint)}
.fcsez__sub{font-size:var(--t-xs);color:var(--faint);margin-bottom:var(--s-3);max-width:80ch;line-height:var(--lh)}
/* Barra del periodo: stesso impianto della barra del Calendario, gia'
   collaudata, cosi' chi ha imparato li' non impara niente di nuovo qui. */
.fctools{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3);flex-wrap:wrap}
.fcperiodo{font-size:var(--t-lg);font-weight:700;color:var(--ink);min-width:12ch}

/* ---- Gli indicatori del consuntivo ----
   Griglia propria e non «.dgriglia»: quella e' fissa a cinque colonne e con tre
   indicatori lascerebbe due buchi a destra. */
.fckpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin-bottom:var(--s-4)}
.fck{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-3) var(--s-4)}
/* La carta principale del blocco pesa di piu': e' l'unica gerarchia che serve,
   e costa un bordo invece di un colore pieno. */
.fck--capo{border-color:var(--blue-600);box-shadow:inset 3px 0 0 var(--blue-600)}
.fck__e{font-size:var(--t-xs);color:var(--faint);font-weight:600;display:block}
.fck__n{font-size:var(--t-num);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:3px;display:block;color:var(--ink)}
.fck__s{font-size:var(--t-xs);color:var(--faint);margin-top:4px;display:block}
/* Il confronto non e' un colore: porta una parola («in aumento», «in
   diminuzione», «invariato») e il segno, cosi' resta leggibile anche a chi non
   distingue il rosso dal verde e a chi legge con un lettore di schermo. */
.fcvar{display:inline-flex;align-items:center;gap:5px;margin-top:6px;font-size:var(--t-xs);font-weight:650;border-radius:6px;padding:2px 7px}
.fcvar--su{background:var(--ok-bg);color:var(--ok)}
.fcvar--giu{background:var(--danger-bg);color:var(--danger)}
.fcvar--pari{background:var(--testa);color:var(--slate-700)}
.fcvar--nd{background:var(--testa);color:var(--slate-700);font-weight:600}
.fcvar__d{font-weight:600;opacity:.85}

/* ---- Andamento delle chiusure ----
   Colonne e non linee: i periodi sono intervalli distinti e conclusi, non una
   grandezza che scorre. Una spezzata fra due mesi suggerirebbe valori intermedi
   a meta' mese, che non esistono. Ogni colonna e' un PULSANTE: si preme e il
   periodo diventa quello letto sopra dagli indicatori.
   L'altezza del disegno e' UNA misura dichiarata, letta da scala, pila e
   posizione delle linee: altrimenti le tacche non stanno dove stanno le barre. */
.fcg{--fcg-h:140px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);margin-bottom:var(--s-3)}
.fcg__area{display:flex;gap:var(--s-2);align-items:flex-start}
.fcg__scala{width:8ch;flex:0 0 auto;position:relative;height:var(--fcg-h);font-size:var(--t-xs);color:var(--faint);font-variant-numeric:tabular-nums}
.fcg__scala span{position:absolute;right:0;transform:translateY(-50%);white-space:nowrap}
/* La linea dello zero cade esattamente alla base delle barre e la mezzeria a
   meta': due sole tacche, perche' un reticolo fitto su quattro colonne e'
   rumore. */
.fcg__serie{
  flex:1;min-width:0;display:flex;align-items:flex-start;gap:var(--s-2);
  background:linear-gradient(var(--line-strong),var(--line-strong)) 0 var(--fcg-h)/100% 1px no-repeat,
             linear-gradient(var(--line),var(--line)) 0 calc(var(--fcg-h)/2)/100% 1px no-repeat
}
.fcg__gr{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:0;background:transparent;border:0;padding:0;border-radius:var(--r-sm) var(--r-sm) 0 0}
/* L'evidenziazione sta sull'ETICHETTA e non sulla colonna intera: un fondo
   pieno alto quanto il disegno coprirebbe le linee dell'asse proprio sulla
   colonna che si sta leggendo. */
.fcg__gr:hover .fcg__et{background:var(--blue-50);color:var(--blue-700)}
.fcg__pila{width:100%;height:var(--fcg-h);flex:none;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:0 12%}
.fcg__b{flex:1;min-width:0;max-width:44px;border-radius:3px 3px 0 0;min-height:2px}
.fcg__b--v{background:var(--ok)}
/* Il perso non si distingue solo per il colore: porta una trama a righe, che
   resta visibile in bianco e nero e a chi confonde rosso e verde. */
.fcg__b--p{background:var(--danger);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.42) 0 3px,transparent 3px 7px)}
/* Zero non e' «quasi niente»: la barra sparisce e resta il segno grigio della
   base, che si legge come «qui non e' stato chiuso nulla». */
.fcg__b--zero{background:var(--line);background-image:none}
.fcg__et{font-size:var(--t-xs);color:var(--faint);height:22px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;border-radius:4px;padding:0 4px}
.fcg__gr[aria-current="true"]{box-shadow:inset 0 -3px 0 var(--blue-600)}
.fcg__gr[aria-current="true"] .fcg__et{background:var(--blue-100);color:var(--blue-700);font-weight:700}
/* Una colonna non conclusa si vede che non e' conclusa: il periodo in corso ha
   pochi giorni su trenta, e disegnato alla pari dei mesi interi si legge come
   «agosto ha quasi pareggiato luglio». E' il confronto che gli indicatori qui
   sopra si rifiutano di fare a parole: farlo in figura sarebbe peggio. */
.fcg__b--parz{opacity:.62;border-top:2px dashed var(--slate-700)}
.fcg__et--parz{color:var(--warn);font-weight:700}
.fcleg{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-3);font-size:var(--t-xs);color:var(--slate-700)}
.fcleg span{display:inline-flex;align-items:center;gap:6px}
.fcleg i{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.fcleg i.v{background:var(--ok)}
.fcleg i.p{background:var(--danger);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.42) 0 3px,transparent 3px 7px)}
.fcleg i.parz{background:var(--faint);opacity:.62;border-top:2px dashed var(--slate-700)}
.fcleg__aiuto{color:var(--faint)}

/* ---- Composizione della pipeline aperta ----
   Una barra sola, divisa per stadio, sul NUMERO di trattative. Non sul valore:
   il valore ufficiale esiste soltanto da Proposta in avanti, quindi una barra
   di valore avrebbe un segmento solo al 100% e direbbe il falso sulla forma
   della pipeline. Il valore resta, scritto, nelle righe sotto. */
.fccomp{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s-4);margin-bottom:var(--s-3)}
.fcbar{display:flex;height:26px;border-radius:var(--r-sm);overflow:hidden;background:var(--testa)}
.fcbar__s{display:flex;align-items:center;justify-content:center;font-size:var(--t-xs);font-weight:700;color:#fff;min-width:0;overflow:hidden;white-space:nowrap}
.fcbar__s--chiaro{color:var(--ink)}
.fccomp__r{display:flex;align-items:baseline;gap:var(--s-2);padding:9px 0;border-bottom:1px solid var(--testa);font-size:var(--t-sm);flex-wrap:wrap}
.fccomp__r:last-child{border-bottom:0}
.fccomp__pt{width:10px;height:10px;border-radius:3px;flex:0 0 auto;align-self:center}
.fccomp__n{font-weight:650;color:var(--ink)}
.fccomp__q{color:var(--faint);font-size:var(--t-xs)}
.fccomp__v{margin-left:auto;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}

@media(max-width:479.98px){
  .fckpis{grid-template-columns:1fr;gap:var(--s-2)}
  .fck__n{font-size:var(--t-xl)}
  .fcperiodo{font-size:var(--t-md);min-width:0;flex:1 1 100%}
  .fcg{--fcg-h:118px}
  .fcg__scala{width:6ch}
  .fcg__pila{padding:0 6%;gap:2px}
  .fccomp__v{margin-left:0;flex-basis:100%;text-align:left}
  /* Sul telaio stretto i comandi del periodo sono i comandi principali della
     schermata: alle misure che i componenti hanno di loro si sbaglia bersaglio.
     L'aumento e' circoscritto a «.fctools». */
  .fctools .seg button,.fctools .sec{min-height:44px}
}

.fc-card{margin-bottom:14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--sh);overflow:hidden}
.fc-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--testa);border-bottom:2px solid var(--brand-green-line)}
.fc-card__head h3{margin:0;color:var(--ink);font-size:13.5px}
.fc-card__head span{color:var(--muted);font-size:11px}
.fc-rows{padding:6px 16px 12px}
.fc-row{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 54px 96px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair)}
.fc-row:last-child{border-bottom:0}
.fc-row__label{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.fc-track{height:10px;border-radius:5px;background:var(--hair,#eef1f5);overflow:hidden}
.fc-bar{display:block;height:100%;border-radius:5px;background:var(--fc-2);transition:width .18s}
.fc-row__n{text-align:right;color:var(--muted);font-size:12px}
.fc-row__v{text-align:right;color:var(--ink);font-size:12.5px;font-weight:700}
.fc-note{padding:0 16px 14px;color:var(--muted);font-size:11.5px;line-height:1.5}
.fc-table{border-top:1px solid var(--hair)}
.fc-table summary{padding:11px 16px;color:var(--navy);font-size:12px;font-weight:700;cursor:pointer}
.fc-table .tblwrap{padding:0 16px 14px}
@media(max-width:760px){.fc-row{grid-template-columns:minmax(0,1fr) 46px 88px}.fc-track{grid-column:1/-1;order:3}}
.timeline-list{display:grid}.timeline-item{display:grid;grid-template-columns:32px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--hair)}.timeline-item:last-child{border-bottom:0}.timeline-item__icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--brand-blue-soft);color:var(--navy)}.timeline-item__body{min-width:0}.timeline-item__body p{margin:0;color:var(--ink);font-size:12.5px;line-height:1.45;white-space:pre-wrap}.timeline-item__meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px;color:var(--faint);font-size:10.5px}.timeline-kind{font-weight:700;color:var(--blue)}
.diario{margin-top:4px;border:1px solid #D9E2F2;border-radius:14px;background:#fff;overflow:hidden}.diario__head{padding:17px 18px 14px;background:linear-gradient(135deg,var(--testa-2),#fff);border-bottom:1px solid var(--hair)}.diario__head h3{display:flex;align-items:center;gap:8px;font-size:16px}.diario__head p{margin:5px 0 0;color:var(--muted);font-size:11.5px;line-height:1.45}.diario__body{padding:16px 18px}.diario__chiuso{padding:14px 18px;color:var(--muted);font-size:12px;line-height:1.5;background:var(--testa-2);border-bottom:1px solid var(--hair)}.diario__types{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px}.diario__type{white-space:nowrap;border:1px solid var(--line);border-radius:999px;background:#fff;padding:7px 10px;color:var(--slate);font-size:11.5px;font-weight:650}.diario__type.on{border-color:var(--navy);background:var(--navy);color:#fff}.diario textarea{width:100%;min-height:104px;resize:vertical;border:1px solid var(--line);border-radius:11px;padding:12px;color:var(--ink);font:inherit;line-height:1.5}.diario textarea:focus,.diario input:focus,.diario select:focus{outline:2px solid #DDE6FF;border-color:var(--blue)}.diario__next{margin-top:12px;padding:13px;border:1px solid #E2E8F3;border-radius:11px;background:var(--testa-2)}.diario__next-title{display:flex;align-items:center;gap:7px;margin-bottom:9px;font-size:12px;font-weight:750}/* Tre colonne di cui due fisse: in un pannello stretto non restava spazio e il
 campo di testo, avendo min-width:0, collassava a un ovale vuoto. Ora i campi
 vanno a capo invece di schiacciarsi. */
.diario__next-grid{display:flex;flex-wrap:wrap;gap:8px}
.diario__next-grid>:nth-child(1){flex:1 1 210px}
.diario__next-grid>:nth-child(2){flex:1 1 175px}
.diario__next-grid>:nth-child(3){flex:0 1 120px}.diario__next input,.diario__next select{min-width:0;height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 10px}/* Un pulsante spento deve sembrare spento: la regola globale del design system
 mette il cursore col divieto, ma sbiadisce solo le classi che conosce, e
 queste non erano fra quelle. Restavano pieni di colore e rifiutavano il
 clic senza spiegare perche'. */
.diario__hint{margin-top:12px;color:var(--muted);font-size:11.5px;line-height:1.4}
.diario__hint+.diario__actions{margin-top:7px}
.diario__actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}.diario__actions.sola{grid-template-columns:1fr}.diario__actions.due{grid-template-columns:1fr 1fr}.diario__actions button{min-height:42px;border-radius:10px;font-weight:700}.diario__actions button:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed;box-shadow:none}.diario__save{border:0;background:var(--navy);color:#fff}.diario__reminders{padding:15px 18px}.diario__reminders h4,.diario__history h4{font-size:13px;margin:0}.diario__reminder{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;margin-top:8px;padding:10px 11px;border-radius:10px;background:var(--brand-blue-soft);border:1px solid #E0E7F5}.diario__reminder b{display:block;font-size:12px}.diario__reminder small{display:block;margin-top:3px;color:var(--muted)}.diario__reminder button{border:0;border-radius:8px;background:#fff;color:var(--ok);padding:7px 9px;font-size:11px;font-weight:700}.diario__history{border-top:1px solid var(--hair);padding:15px 18px 17px}.diario__history-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.diario__filters{display:flex;gap:5px;margin:10px 0 2px;overflow-x:auto}.diario__filter{border:0;border-radius:999px;background:var(--testa);color:var(--slate);padding:6px 9px;font-size:10.5px;font-weight:700}.diario__filter.on{background:var(--lime-tint);color:var(--navy)}.timeline-item.note{margin:8px 0;padding:12px;border:1px solid #DDE5F2;border-bottom:1px solid #DDE5F2;border-radius:10px;background:#FFFDF6}.timeline-item.note .timeline-item__icon{background:#FFF0B8;color:#7B5900}.timeline-item.reminder .timeline-item__icon{background:#E9F7EE;color:var(--ok)}
@media(max-width:600px){.diario__body,.diario__head,.diario__history,.diario__reminders{padding-left:14px;padding-right:14px}.diario__next-grid,.diario__actions{grid-template-columns:1fr}.diario__actions button{min-height:46px}.quickact{flex:1 1 auto;justify-content:center}.schedatab{padding:9px 8px}}

/* ---------- Le tre caselle del prossimo passo, con la loro etichetta ----------
   Erano tre controlli nudi in fila, distinti solo da un `aria-label`: un nome
   per il lettore di schermo, niente per chi guarda e niente da cliccare per
   portare il fuoco. Con un campo data fra i tre — quello che il collaudo ha
   visto compilare a meta' — sapere quale casella si sta riempiendo non e' un
   dettaglio. */
.diario__campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.diario__campo>label{
  font-size:var(--t-xs);font-weight:700;color:var(--faint);
  letter-spacing:.02em
}
.diario__campo>input,.diario__campo>select{width:100%}

/* ===== 60-agenda-board.css ===== */
/* ---- Pipeline commerciale, e i resti degli elenchi ----
   Le regole dell'Agenda non stanno piu' qui: l'Agenda e' stata ricostruita sul
   mockup approvato e ha il suo foglio, 24-agenda.css. Il blocco «.myagenda-*»
   che occupava questo file non aveva piu' nessuno che lo leggesse.
   ---------------------------------------------------------------- */

/* ---- Come scorre la Pipeline ----
   Una regola sola, per non avere tre barre di scorrimento sovrapposte:
   - la PAGINA non scorre. La schermata e' alta quanto lo spazio disponibile e
     la board si prende quello che avanza sotto la barra degli strumenti;
   - il VERTICALE sta nelle colonne, una per una. E' la scelta giusta per un
     kanban: l'intestazione dello stadio resta ferma mentre scorri le sue
     trattative, e scorrere Contatto non deve muovere Proposta;
   - l'ORIZZONTALE sta solo sulla board, e si attiva soltanto se le colonne
     non ci stanno.
   La maniglia SI VEDE sempre: senza, niente dice piu' che sotto ci sono altre
   dodici trattative o che a destra c'e' un'altra colonna, e la board sembra
   semplicemente tagliata. */
.schermo-board{display:flex;flex-direction:column;height:100%;min-height:0}
.bwrap{flex:1;min-height:0;overflow-x:auto;overflow-y:hidden;padding:2px 2px 4px}
.col__b,.bwrap{scrollbar-width:thin;scrollbar-color:#AFBACD transparent}
.col:hover .col__b,.bwrap:hover{scrollbar-color:#8494AC transparent}
.col__b::-webkit-scrollbar{width:8px}
.bwrap::-webkit-scrollbar{height:10px}
.col__b::-webkit-scrollbar-track,.bwrap::-webkit-scrollbar-track{background:transparent}
.col__b::-webkit-scrollbar-thumb,.bwrap::-webkit-scrollbar-thumb{
  background:#AFBACD;border-radius:5px;border:2px solid transparent;background-clip:padding-box
}
.col:hover .col__b::-webkit-scrollbar-thumb,.bwrap:hover::-webkit-scrollbar-thumb{background:#8494AC;background-clip:padding-box}

/* Cinque colonne uguali. Le due terminali erano piu' strette, e le loro carte
   uscivano piu' corte delle altre: la differenza fra una trattativa vinta e una
   in analisi finiva comunicata da una MISURA, cioe' dalla cosa che l'occhio
   legge per prima e che non significa niente. Lo stato lo dicono l'etichetta e
   il contenuto; la griglia non ha piu' un'opinione. */
.board{display:grid;grid-template-columns:repeat(5,minmax(196px,1fr));gap:10px;align-items:stretch;height:100%}

/* La striscia degli stadi: su telefono la board mostra UNA colonna per volta, e
   questa e' il modo con cui si cambia. Cinque colonne da 196 px dentro 390
   significherebbero quattro colonne tagliate e nessun modo di capirlo.
   La chip non e' un'etichetta: e' un comando, e ha il bersaglio di un comando. */
.bstadi{display:none;gap:6px;overflow-x:auto;padding-bottom:8px;margin-bottom:var(--s-2)}
.stadiochip{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;min-height:44px;padding:0 11px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--panel);
  font-size:var(--t-sm);font-weight:600;color:var(--slate-700);white-space:nowrap
}
.stadiochip b{font-variant-numeric:tabular-nums;color:var(--faint)}
.stadiochip.on{border-color:var(--blue-600);background:var(--blue-100);color:var(--blue-900)}
.stadiochip.on b{color:var(--blue-900)}

/* Tre superfici, tre livelli, senza un bordo pesante: la pagina e' bianca, la
   colonna e' un piano appena piu' freddo, la scheda torna bianca e si stacca
   dalla colonna con un'ombra bassa invece che con un bordo marcato. */
.col{background:var(--testa);border:0;border-radius:var(--r-md);display:flex;flex-direction:column;min-width:0;max-height:100%;min-height:140px}
.col__h{padding:10px var(--s-3) 6px}
.col__t{display:flex;align-items:center;gap:7px}
.col__t b{font-size:var(--t-base);color:var(--ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col__punto{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.col__n{
  font-size:10px;font-weight:700;color:var(--faint);background:var(--panel);
  border:1px solid var(--line);border-radius:999px;padding:1px 7px
}
.col__v{font-size:var(--t-base);font-weight:700;color:var(--ink);text-align:right;margin-top:2px;font-variant-numeric:tabular-nums}
/* Il trattino di uno stadio senza valore ufficiale non e' un importo: non deve
   pesare come un numero. */
.col__v--na{font-weight:600;color:var(--faint)}
.col__b{padding:0 var(--s-2) var(--s-2);overflow-y:auto;display:flex;flex-direction:column;gap:var(--s-2)}

.card{
  background:var(--panel);border:1px solid var(--testa);border-radius:var(--r-sm);padding:var(--s-3);
  box-shadow:var(--shadow-xs);width:100%;text-align:left;
  transition:border-color var(--transition-ui),box-shadow var(--transition-ui)
}
.card:hover{border-color:#C3D3F5;box-shadow:0 4px 12px rgba(17,26,44,.10)}
.card__t{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
/* Il nome e' il dato che si cerca scorrendo la board: al massimo due righe, poi
   taglia. Una scheda alta il doppio delle altre rompe la colonna. */
.card__n{
  font-size:var(--t-md);font-weight:650;color:var(--ink);min-width:0;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.card__v{font-size:var(--t-md);font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.card__r2{display:flex;align-items:baseline;gap:8px;margin-top:3px}
.card__s{flex:1;min-width:0;font-size:var(--t-xs);color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__o{flex-shrink:0;font-size:10.5px;font-weight:600;color:var(--faint)}
/* La terza riga c'e' SEMPRE, anche sulle chiuse: prima spariva di misura, e le
   carte di Vinta e Persa restavano piu' basse e piu' povere delle altre tre
   colonne. Ora quella riga porta l'esito e la sua data: stessa struttura,
   stessa densita', informazione diversa. */
.card__seg{display:flex;align-items:center;gap:6px;margin-top:7px;min-height:20px}
.card__passo{
  flex:1;min-width:0;font-size:var(--t-xs);color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.card__passo.scaduto{color:var(--danger);font-weight:600}
/* Il badge delle trattative non ancora aperte da chi le ha in carico. */
.card__new{
  display:inline-block;margin-right:6px;border-radius:5px;background:var(--brand-lime);color:var(--brand-blue);
  padding:1px 5px;font-size:9.5px;font-weight:800;letter-spacing:.06em;vertical-align:1px
}

/* ---- Storico: stessa barra, cambia SOLO la tabella sotto ---- */
.tabwrap{overflow-x:auto}
.tab{
  width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;font-size:var(--t-sm)
}
.tab th{
  text-align:left;padding:9px var(--s-3);background:var(--testa);border-bottom:1px solid var(--line);
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--slate-700)
}
.tab td{padding:9px var(--s-3);border-bottom:1px solid var(--testa);color:var(--slate)}
.tab tr:last-child td{border-bottom:0}
.tab tbody tr:hover td{background:var(--blue-50)}
/* Il nome nello Storico e' un comando vero: si raggiunge con Tab, si attiva con
   Invio e mostra il proprio contorno di fuoco. Prima era testo dentro una riga
   cliccabile, cioe' un bersaglio per il solo mouse. */
.collegamento{border:0;background:transparent;padding:0;text-align:left;color:var(--blue-700);font:inherit}
.collegamento:hover{text-decoration:underline}

@media(max-width:1099.98px){
  .board{grid-template-columns:repeat(5,minmax(184px,1fr))}
}
/* Sotto i 480 px una colonna per volta, scelta dalla striscia delle chip. */
@media(max-width:479.98px){
  .bstadi{display:flex}
  .board{grid-template-columns:1fr;height:auto}
  /* Una colonna per volta: le altre quattro non si stringono, si tolgono. Una
     colonna larga 78 px non e' una colonna piu' piccola, e' una colonna
     illeggibile. */
  .col{display:none}
  .col--stretta-on{display:flex;max-height:none}
  .bwrap{overflow-x:hidden}
  .schermo-board{height:auto}
}

/* ---- Quel che resta degli elenchi ----
   Filtri, pulsanti di riga e paginazione di Lead, Aziende e Contatti. */
.lead-tools .field label{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:700}
.lead-tools select{height:40px;border-color:var(--line);background:#fff;color:var(--ink-2);font-weight:500;cursor:pointer}
.lead-reset{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 13px;border:1px solid var(--line-strong);border-radius:9px;background:var(--hair);color:var(--ink-2);font-size:12.5px;font-weight:650;cursor:pointer;transition:.15s}
.lead-reset:hover{background:#fff;border-color:var(--navy);color:var(--navy)}
.lead-action{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 11px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink-2);font-size:12px;font-weight:650;white-space:nowrap;cursor:pointer;transition:.15s}
.lead-action:hover{border-color:var(--navy);color:var(--navy);transform:translateY(-1px)}
.lead-action.primary{border-color:var(--brand-green-line);background:var(--lime-tint);color:var(--brand-green-ink)}
.lead-action.primary:hover{border-color:var(--lime);background:var(--brand-green-soft)}
.lead-action:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed;transform:none}
.lead-pager{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px;border-top:1px solid var(--line);background:var(--testa-2)}
.lead-page-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:var(--ink-2);font-size:12px;font-weight:650;cursor:pointer;transition:.15s}
.lead-page-btn:hover:not(:disabled){border-color:var(--navy);color:var(--navy);box-shadow:var(--sh)}
.lead-page-btn:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed}
.privacy-state{padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(21,26,45,.04)}
.privacy-state__label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin-bottom:5px}
.privacy-state__value{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:750}
.privacy-state__value::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px currentColor inset}
.privacy-state__value.ok{color:var(--ok)}.privacy-state__value.off{color:var(--danger)}
.privacy-choice{display:inline-flex;width:100%;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--hair)}
.privacy-choice button{flex:1;min-height:34px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12.5px;font-weight:700;transition:.15s}
.privacy-choice button:hover{background:rgba(255,255,255,.75);color:var(--ink)}
.privacy-choice button.grant.on{background:#fff;color:#13783a;box-shadow:0 2px 7px rgba(21,26,45,.09)}
.privacy-choice button.revoke.on{background:#fff;color:#be3036;box-shadow:0 2px 7px rgba(21,26,45,.09)}
.privacy-save{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:9px 15px;border:1px solid var(--brand-green);border-radius:9px;background:var(--brand-green);color:var(--on-green);font-size:12.5px;font-weight:700;box-shadow:0 3px 9px rgba(104,143,20,.18);transition:.15s}
.privacy-save:hover:not(:disabled){transform:translateY(-1px);background:var(--brand-green-hover);border-color:var(--brand-green-hover);box-shadow:0 6px 14px rgba(104,143,20,.24)}
.privacy-save:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed;box-shadow:none}

/* Dove e' diretta la trattativa: la destinazione del passo successivo, sulla
   carta. Le cinque colonne sono un percorso, e la carta non lo diceva — per
   sapere quale fosse il passaggio successivo bisognava aprirla.
   Non e' un verdetto sulla prontezza: quello sta nel riquadro «Il passo
   successivo» dentro la scheda, in un posto solo. Per questo e' grigio e
   discreto, non una pastiglia colorata. */
.card__verso{
  display:block;margin-top:4px;font-size:10.5px;font-weight:600;
  color:var(--faint);letter-spacing:.01em
}

/* ===== 65-overlay.css ===== */
/* overlay: modal + drawer */
.ov{position:fixed;inset:0;background:rgba(21,26,45,.42);z-index:60;display:flex;justify-content:flex-end}
.ov.center{align-items:center;justify-content:center;padding:20px}
.modal{width:100%;max-width:440px;background:#fff;border-radius:16px;box-shadow:var(--sh-lg);padding:24px;max-height:88vh;overflow-y:auto}
/* Dentro una finestra l'area di testo non si ridimensiona: la maniglia
   tirava in tutte e due le direzioni, in orizzontale la restringeva o la
   faceva uscire dal bordo, in verticale la allungava all'infinito. E
   trascinandola si finiva col rilasciare il mouse sullo sfondo, chiudendo la
   finestra. Misura fissa, larga quanto gli altri campi; se il testo e' lungo
   scorre dentro l'area. */
.modal textarea{resize:none;width:100%;box-sizing:border-box;padding:11px 13px;min-height:96px;line-height:1.5;font-size:14px}
.modal h3{font-size:18px;margin-bottom:4px}.modal .msub{color:var(--muted);font-size:13px;margin-bottom:18px}

/* ---- La finestra guidata: tre fasce, una sola che scorre ----
   Prima era una scatola sola: titolo, campi e pulsanti scorrevano insieme
   dentro «max-height/overflow-y», quindi con il contenuto lungo — la chiusura
   in perdita, la discovery — la conferma finiva sotto il bordo inferiore e non
   c'era modo di sapere che ci fosse. Sotto i 760 px la barra era resa fissa con
   «position:sticky», e allora galleggiava SOPRA l'ultimo campo: il contenuto le
   passava dietro, compreso il campo obbligatorio che si stava compilando.

   Le due rese erano lo stesso errore letto da due lati: barra e contenuto nella
   stessa scatola scorrevole. Qui sono tre fasce di una colonna flessibile — la
   testa e la barra non si comprimono, il corpo si prende quello che resta e
   scorre da solo — e la barra sta FUORI dalla zona che scorre. Niente altezze
   fisse, niente spazio di riserva calcolato sull'altezza presunta del piede:
   il piede non copre nulla perche' non sta sopra nulla.

   «min-height:0» non e' una rifinitura: senza, un elemento flessibile si
   rifiuta di rimpicciolirsi sotto la misura del proprio contenuto e la colonna
   sfonda la finestra invece di far scorrere il corpo.

   Il selettore porta due classi per battere «.modal» delle media query, che
   arriva dopo in ordine alfabetico e altrimenti rimetterebbe l'imbottitura sul
   contenitore: l'imbottitura sta sulle tre fasce, altrimenti il contenuto
   scorrerebbe sotto il bordo arrotondato. */
.modal.modal--guidata{
  --modale-pad-x:24px;--modale-pad-y:24px;
  display:flex;flex-direction:column;padding:0;overflow:hidden
}
.modale__testa{
  flex:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:var(--modale-pad-y) var(--modale-pad-x) 14px
}
.modale__testa h3{margin-bottom:0}
.modale__corpo{
  flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;
  /* Lo scorrimento non prosegue sulla schermata sotto quando si arriva in
     fondo: li' c'e' una board che in questo momento non si sta guardando. */
  overscroll-behavior:contain;
  padding:0 var(--modale-pad-x)
}
/* L'ultimo campo non si appoggia alla barra: il respiro e' suo, non un margine
   di sicurezza calcolato su quanto e' alto il piede. */
.modale__corpo>*:last-child{margin-bottom:var(--s-4)}
.modal--guidata .macts{
  flex:0 0 auto;margin-top:0;align-items:center;
  padding:12px var(--modale-pad-x) var(--modale-pad-y);
  /* Il filo dice dove finisce cio' che si legge e comincia cio' che si preme:
     senza, la barra e il corpo sono lo stesso bianco e il confine si intuisce
     solo quando il contenuto ci scorre dietro — cioe' quando e' gia' tardi. */
  border-top:1px solid var(--line);background:#fff
}
/* Il comando di chiusura della finestra e' lo stesso della scheda: la forma
   era dichiarata solo sotto «.drawer», quindi qui sarebbe arrivato senza. */
.modal--guidata .x{
  flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--muted);display:grid;place-items:center
}
.modal--guidata .x:hover:not(:disabled){border-color:var(--ink);color:var(--ink)}
.modal--guidata .x:disabled{color:var(--disabled-ink);border-color:var(--disabled-line)}
/* 520 e non piu' 460: la scheda regge sette righe di dati, tre linguette e le
   azioni, e a 460 andava tutto a capo. Vale per tutte le schede - trattativa,
   lead, contatto, azienda - perche' sono la stessa finestra e due larghezze
   diverse per la stessa cosa si notano. */
.drawer{width:100%;max-width:520px;background:#fff;height:100%;box-shadow:var(--sh-lg);overflow-y:auto;padding:24px;animation:slide .2s ease}
.drawer:focus{outline:none}
@keyframes slide{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
.drawer .dh{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.drawer .x{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--muted);display:grid;place-items:center}
.drawer .x:hover{border-color:var(--ink);color:var(--ink)}
.drawer .dval{font-family:'Space Grotesk';font-size:28px;color:var(--navy);font-weight:700;margin:10px 0}
.drow{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--hair);font-size:13px}
.drow span{color:var(--muted)}.drow b{color:var(--ink);font-weight:600}
.dactions{display:flex;gap:9px;margin-top:18px}
.btn-danger{flex:1;padding:10px;border-radius:9px;border:1px solid #F3C0C0;background:#fff;color:var(--danger);font-weight:600;font-size:13px}
.btn-danger:hover{background:var(--danger-tint)}
.btn-ok{flex:1;padding:10px;border-radius:9px;border:none;background:var(--ok);color:#fff;font-weight:600;font-size:13px}
/* L'azione principale di una scheda a scomparsa e' la stessa cosa dell'azione
   principale di una schermata: stesso verde, stesso testo scuro. Queste tre
   righe riscrivono cio' che 05-controlli.css dichiara gia' — e' una
   duplicazione che viene da prima e che questo giro non scioglie — ma il
   colore, almeno, adesso e' uno solo. */
.actbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:9px;background:var(--brand-green);color:var(--on-green);border:none;font-size:12.5px;font-weight:600}
.actbtn:hover:not(:disabled){background:var(--brand-green-hover)}
.actbtn:disabled{background:var(--disabled-bg);color:var(--disabled-ink);cursor:not-allowed}
.macts{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.lnk{background:none;border:none;color:var(--muted);font-weight:600;font-size:13px;padding:10px}
/* «.mobile-topbar» e «.mobile-nav-backdrop» erano la testata e il velo del
   vecchio guscio sotto i 760 px: non esistono piu' nel documento, e i loro
   nomi sono usciti anche da qui. Il selettore di prima li spegneva a schermo
   largo per riaccenderli in 70-smartphone.css. */
.mobile-agenda-picker{display:none}


/* ===== 70-smartphone.css ===== */
/* esperienza smartphone: navigazione e contenuti operativi
   ------------------------------------------------------------------
   Il guscio NON sta piu' qui. Il telaio del mockup ha un responsive suo, in
   20-guscio.css, con le soglie del mockup — 1100, 880, 480 — e a 390 px non
   ha bisogno di una seconda testata «mobile»: e' la stessa testata, con il
   marchio compatto e il comando che apre il menu al posto della barra delle
   sezioni. Le regole di prima costruivano un guscio diverso sotto i 760 px:
   «.app» a blocchi, «.side» trasformata in cassetto, «.mobile-topbar» fissa e
   «.content» con 74 px di riempimento per starle sotto. Tenerle avrebbe
   significato due gusci in concorrenza sulla stessa larghezza.
   Qui restano soltanto le regole delle SCHERMATE, che il telaio non tocca. */
@media(max-width:760px){
  body{font-size:13px}
  .page-head{gap:12px;flex-wrap:wrap;margin-bottom:15px}
  .page-head>div:last-child{width:100%;display:flex!important;flex-wrap:wrap;gap:8px!important}
  .page-head .cta,.page-head .actbtn{flex:1;justify-content:center;min-height:40px}
  .page-head h1{font-size:22px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}
  .kpi{padding:13px}.kval{font-size:21px}
  .board-tools{padding:10px;gap:8px}
  .board-search,.lead-tools .board-search{min-width:100%!important;width:100%}
  .board-filter,.lead-tools .field,.outcome-filter{width:100%;min-width:0!important}
  .board-summary{width:100%;margin-left:0;justify-content:space-between;gap:10px}
  .board-scroll{margin:0 -14px;padding:2px 14px 15px;scroll-snap-type:x mandatory;scroll-padding:14px}
  .board{gap:10px}
  .col{width:calc(100vw - 42px);max-height:calc(100dvh - 255px);scroll-snap-align:start}
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl{min-width:690px}
  .tbl th,.tbl td{padding:10px 12px}
  .lead-pager{position:sticky;left:0;min-width:calc(100vw - 30px)}
  .ov.center{align-items:flex-end;padding:0}
  .modal{
    max-width:none;width:100%;max-height:94dvh;padding:20px 16px 22px;
    border-radius:18px 18px 0 0
  }
  /* Nella finestra guidata l'imbottitura non sta sul contenitore ma sulle tre
     fasce, perche' una di esse scorre: qui si stringe soltanto la misura, la
     regola che la distribuisce sta in 65-overlay.css e vale a ogni larghezza. */
  .modal.modal--guidata{--modale-pad-x:16px;--modale-pad-y:20px}
  .drawer{max-width:none;padding:18px 16px 94px}
  .drawer .drow{gap:16px;align-items:flex-start}
  .drawer .drow b{text-align:right;overflow-wrap:anywhere}
  /* ---- L'area toccabile del comando di chiusura ----
     Il quadrato disegnato resta 32x32: e' la misura del mockup e con un mouse
     va bene. Con il dito no — sotto i 44 px si manca il bersaglio, e mancarlo
     proprio qui significa restare chiusi dentro un pannello.
     L'area cresce con uno pseudo-elemento e non con width/height, cosi'
     l'aspetto non cambia di un pixel e la testata non si sposta. Cresce di 6 px
     per lato dentro i 16 px di padding del drawer: non tocca ne' il titolo a
     sinistra, ne' il bordo, ne' la barra di scorrimento. */
  .x{position:relative}
  .x::after{
    content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px
  }
  .dactions,.macts{position:sticky;bottom:0;z-index:3;padding:10px 0 2px;background:#fff}
  .macts .actbtn,.macts .lnk{flex:1;justify-content:center;min-height:42px}
  .modal [style*="grid-template-columns: 1fr 1fr"],
  .modal [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .calgrid{gap:3px}
  .calhead{font-size:9px}
  .calcell{min-height:70px;padding:4px 3px;border-radius:7px}
  .caldate{font-size:11px;margin-bottom:3px}
  .calchip{font-size:9px;padding:2px 3px}
  .calmore{font-size:9px}
  .dayrow{align-items:stretch}
  .dayrow .appt-btn{min-height:40px}
  .outcome-tabs{display:flex;width:100%}.outcome-tab{flex:1;min-width:0}
  .privacy-choice button{min-height:40px}
  .mobile-agenda-picker{
    display:block;background:#fff;border:1px solid var(--line);border-radius:12px;
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;
    padding:12px;margin:0 0 12px;box-shadow:var(--sh);overflow:hidden
  }
  .mobile-agenda-picker__title{font-size:16px;font-weight:750;color:var(--ink);margin-bottom:2px;text-transform:capitalize}
  .mobile-agenda-picker__sub{font-size:11.5px;color:var(--muted);margin-bottom:10px}
  .mobile-agenda-quick{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}
  .mobile-agenda-quick button{
    min-height:39px;border:1px solid var(--line);border-radius:9px;background:#fff;
    color:var(--ink-2);font:inherit;font-weight:700
  }
  .mobile-agenda-quick button.on{background:var(--lime-tint);border-color:var(--brand-green-line);color:var(--brand-green-ink)}
  .mobile-agenda-picker label{display:block;color:var(--ink);font-size:12px;font-weight:700;margin-bottom:6px}
  .mobile-agenda-picker input{
    display:block;width:100%;max-width:100%;min-width:0;min-height:44px;
    box-sizing:border-box;padding:9px 11px;border:1px solid var(--line);
    border-radius:9px;background:#fff;color:var(--ink);font:inherit
  }
  .mobile-agenda-picker input[type="date"]::-webkit-date-and-time-value{
    min-width:0;text-align:left
  }
  .crm-date-trigger{
    display:flex;width:100%;min-height:44px;align-items:center;justify-content:space-between;
    gap:10px;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line);
    border-radius:9px;background:#fff;color:var(--ink);font:inherit;text-align:left
  }
  .crm-date-popover{
    width:100%;max-width:100%;box-sizing:border-box;margin-top:8px;padding:10px;
    border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--sh)
  }
  .crm-date-head{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:5px;margin-bottom:8px}
  .crm-date-head strong{text-align:center;text-transform:capitalize;font-size:14px}
  .crm-date-head button{
    min-width:0;width:40px;height:40px;border:1px solid var(--line);border-radius:9px;
    background:#fff;color:var(--ink);font-size:21px
  }
  .crm-date-week,.crm-date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
  .crm-date-week span{text-align:center;color:var(--muted);font-size:10px;font-weight:700;padding:5px 0}
  .crm-date-day{
    width:100%;min-width:0;aspect-ratio:1;border:0;border-radius:8px;background:transparent;
    color:var(--ink);font:inherit;font-size:12px;font-weight:650;padding:0
  }
  .crm-date-day:hover{background:var(--hair)}
  .crm-date-day.today{box-shadow:inset 0 0 0 1px var(--lime)}
  .crm-date-day.selected{background:var(--navy);color:#fff;box-shadow:none}
  .crm-date-day.empty{pointer-events:none}
  .crm-date-footer{display:flex;justify-content:center;margin-top:8px}
  .crm-date-footer button{
    min-height:38px;padding:7px 16px;border:1px solid var(--brand-green-line);border-radius:9px;
    background:var(--lime-tint);color:var(--brand-green-ink);font:inherit;font-weight:750
  }
  .appointment-calendar{display:none!important}
  .appointments-toolbar{display:grid!important;grid-template-columns:1fr;gap:8px!important}
  .appointments-toolbar>button:nth-child(1),
  .appointments-toolbar>button:nth-child(3),
  .appointments-toolbar>button:nth-child(4),
  .appointments-toolbar>b{display:none!important}
  .appointments-toolbar>select{grid-column:1/-1;margin-left:0!important;width:100%;min-height:42px}
  .appointments-toolbar>div:last-child{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(3,1fr);gap:5px!important}
  .appointments-toolbar .seg{padding:8px 4px;font-size:11px}
  .daypanel{margin-top:10px;padding:13px}
  .daypanel>div:first-child{align-items:center!important;gap:10px}
  .daypanel>div:first-child>b{font-size:15px;line-height:1.35}
  .daypanel>div:first-child .cta{min-height:40px;white-space:nowrap}
  .mobile-agenda-empty{
    padding:18px 12px;text-align:center;border:1px dashed var(--line);border-radius:10px;
    background:var(--paper,#fafafa);color:var(--muted);font-size:12.5px
  }
  .mobile-agenda-empty strong{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}
  .mobile-agenda-empty .actbtn{width:100%;justify-content:center;margin-top:12px;min-height:42px}
  .dayrow{
    display:block!important;
    padding:12px!important;margin-bottom:8px;border:1px solid var(--line)!important;
    border-radius:10px;background:#fff
  }
  .dayrow>b{display:block;font-family:'Space Grotesk';font-size:20px;color:var(--navy);margin-bottom:5px}
  .dayrow>span{display:block;margin:3px 0!important}
  .dayrow>span:nth-of-type(1){font-size:15px;font-weight:750;color:var(--ink)}
  .dayrow>span:nth-of-type(2),.dayrow>span:nth-of-type(3){font-size:11.5px;color:var(--muted)!important}
  .dayrow>span:last-of-type{
    display:inline-flex;margin-top:7px!important;padding:4px 8px;border-radius:999px;
    background:var(--hair);font-size:10.5px;font-weight:750
  }
  .appt-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:7px}
  .appt-card-time{font-family:'Space Grotesk';font-size:20px;font-weight:750;color:var(--navy)}
  .appt-card-status{font-size:10.5px;font-weight:750;padding:4px 8px;border-radius:999px;background:var(--hair);color:var(--muted)}
  .appt-card-status.requested{background:#FEF3E2;color:#9a5b09}
  .appt-card-status.confirmed{background:#E8F7ED;color:#166534}
  .appt-card-status.cancelled{background:var(--danger-tint);color:var(--danger)}
  .appt-card-status.completed{background:#E8F7ED;color:#166534}
  .appt-card-status.no_show{background:#FFF1E6;color:#9a3412}
  .appt-card-person{font-size:15px;font-weight:750;color:var(--ink);margin-bottom:6px}
  .appt-card-meta{display:flex;flex-wrap:wrap;gap:5px 10px;color:var(--muted);font-size:11.5px}
  .appt-card-meta span{display:inline-flex;align-items:center;gap:4px}
  .appt-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px}
  .dayrow .appt-btn{min-height:42px;width:100%;border-radius:9px;margin-top:7px}
  .appt-card-actions .appt-btn:only-child{grid-column:1/-1}
  /* Su telefono la riga della giornata diventa una scheda: le quattro colonne
     non ci stanno, e schiacciate erano illeggibili. */
  .calrow{grid-template-columns:1fr;gap:5px;padding:12px;margin-bottom:8px;border:1px solid var(--line);border-radius:10px;background:#fff}
  .calrow__ora{font-size:19px}
  .calrow__titolo{font-size:15px;white-space:normal}
  .calrow__sub{white-space:normal}
  .calrow__stato{justify-self:start}
  .calrow__azioni{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:5px}
  .calrow__azioni .appt-btn{width:100%;min-height:42px;margin-top:0}
  .calrow__azioni .appt-btn:only-child{grid-column:1/-1}
  .users-table table.tbl{min-width:0;width:100%}
  .users-table thead{display:none}
  .users-table tbody,.users-table tr{display:block}
  .users-table tr{margin:10px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
  .users-table td{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px!important}
  .users-table td::before{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
  .users-table td:nth-child(1)::before{content:'Utente'}
  .users-table td:nth-child(2)::before{content:'Email'}
  .users-table td:nth-child(3)::before{content:'Ruolo'}
  .users-table td:nth-child(4)::before{content:'Stato'}
  .users-table td:nth-child(5)::before{content:'Azioni'}
  .users-table td:first-child{justify-content:flex-start;flex-wrap:wrap}
  .users-table td:first-child::before{width:100%}
  .users-table td:last-child .lnk{padding:5px 0}
}



/* ---- Adattamenti a schermo stretto dei controlli condivisi ----
   Su telefono ogni bersaglio tocca i 44 px: e' la soglia sotto la quale un
   dito sbaglia pulsante. */
@media(max-width:700px){
  :where(.btn,.actbtn,.privacy-save,.support-open,.cta,.lead-action,.lead-page-btn,.lead-reset,.btn-ok,.btn-danger){min-height:44px}
  .page-head{gap:12px}.page-head>div:last-child{flex-wrap:wrap}
  .emb .emb-toolbar{width:100%;justify-content:flex-start}.emb .emb-toolbar .cta{flex:1 1 145px}.emb .emb-toolbar>.btn{flex:0 0 auto!important}
  .emb .email-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .emb .emb-stage-title{align-items:flex-start;flex-direction:column}.emb .emb-stage-title .seg{width:100%}.emb .emb-stage-title .seg button{flex:1}
}
@media(max-width:430px){.emb .email-steps{grid-template-columns:1fr}.emb .email-step small{white-space:normal}.emb .emb-toolbar>.btn{width:100%!important}}

/* ===== 80-marketing-segmenti-automazioni.css ===== */
/* ===== Segment builder (nativo, integrato) =====
   I tre costruttori del Marketing sono arrivati nel CRM come pagine a se',
   ognuna con la propria tavolozza dichiarata in cima: nove nomi che valevano
   solo li' dentro e che, essendo scritti a mano, si erano gia' scostati dai
   colori del resto (il navy era #1B2A4A, il grigio del testo #6E7891, il verde
   #B8E600). Restano nove nomi — riscrivere quattrocento regole non e' un
   intervento cromatico — ma adesso ognuno PUNTA al token condiviso: cambiare
   la palette in 00-fondamenta.css cambia anche questi, che era il punto. */
.segb{
  --sg-ink:var(--ink);--sg-ink2:var(--ink-2);--sg-muted:var(--muted);--sg-faint:var(--faint);
  --sg-navy:var(--navy-900);--sg-lime:var(--brand-green);--sg-line:var(--line);--sg-hair:var(--hair)
}
.segb .layout{display:grid;grid-template-columns:236px 1fr;gap:18px;align-items:start}
.segb .side{background:#fff;border:1px solid var(--sg-line);border-radius:12px;padding:14px;position:sticky;top:0}
.segb .side h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--sg-faint);margin:14px 0 8px}
.segb .side h3:first-child{margin-top:0}
.segb .fld{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--sg-line);border-radius:9px;background:#fff;font-size:12.5px;font-weight:600;color:var(--sg-ink2);width:100%;text-align:left;margin-bottom:6px;cursor:pointer;transition:.13s}
.segb .fld:hover{border-color:var(--sg-lime);background:var(--brand-green-soft)}
.segb .fld .pi{width:26px;height:26px;border-radius:7px;background:var(--sg-hair);display:grid;place-items:center;flex-shrink:0}
.segb .fld .pi svg{width:14px;height:14px;color:var(--sg-muted)}
.segb .side .note{font-size:11px;color:var(--sg-faint);line-height:1.5;margin-top:14px;padding-top:12px;border-top:1px solid var(--sg-hair)}
.segb .namebar{background:#fff;border:1px solid var(--sg-line);border-radius:12px;padding:12px 16px;margin-bottom:16px}
.segb .namebar label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sg-faint);display:block;margin-bottom:3px}
.segb .namebar input{width:100%;border:none;font-size:16px;color:var(--sg-ink);font-weight:700;padding:0}
.segb .namebar input:focus{outline:none}
.segb .matchbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:13px;color:var(--sg-muted)}
.segb .sgseg{display:inline-flex;background:var(--sg-hair);border:1px solid var(--sg-line);border-radius:9px;padding:3px}
.segb .sgseg button{border:none;background:none;padding:5px 12px;border-radius:6px;font-size:12.5px;font-weight:700;color:var(--sg-muted);cursor:pointer}
.segb .sgseg button.on{background:#fff;color:var(--sg-ink);box-shadow:0 2px 8px rgba(21,26,45,.06)}
.segb .rules{background:#fff;border:1px solid var(--sg-line);border-radius:12px;padding:8px}
.segb .rule{display:flex;align-items:center;gap:8px;padding:10px;border-radius:9px}
.segb .rule+.rule{border-top:1px solid var(--sg-hair)}
.segb .rule .rf{font-size:13px;font-weight:600;color:var(--sg-ink);min-width:150px}
.segb .rule select,.segb .rule input{padding:7px 9px;border:1px solid var(--sg-line);border-radius:7px;font-size:12.5px;color:var(--sg-ink);background:#fff}
.segb .rule select:focus,.segb .rule input:focus{outline:none;border-color:var(--sg-navy)}
.segb .rule .rx{margin-left:auto;width:28px;height:28px;border-radius:7px;border:1px solid var(--sg-line);background:#fff;color:var(--sg-faint);display:grid;place-items:center;flex-shrink:0;cursor:pointer}
.segb .rule .rx:hover{border-color:#E5484D;color:#E5484D}
.segb .rules-empty{text-align:center;color:var(--sg-faint);font-size:13px;padding:26px}
.segb .hint{font-size:11.5px;color:var(--sg-faint);line-height:1.5}
.segb .hint b{color:var(--sg-muted)}
.segb .preview{margin-top:16px;background:linear-gradient(135deg,#1b1d38,#2a2e5c);border-radius:12px;padding:20px 22px;color:#fff;display:flex;align-items:center;gap:16px}
.segb .preview .big{font-size:30px;font-weight:700;color:#fff}
.segb .preview .lbl{font-size:12.5px;color:rgba(255,255,255,.75);line-height:1.5}
.segb .consent{margin-top:14px;background:var(--brand-green-soft);border-left:4px solid var(--sg-lime);border-radius:0 10px 10px 0;padding:14px 16px;font-size:12.5px;color:var(--sg-ink2);line-height:1.55}
.segb .consent b{color:var(--sg-navy)}
.segb .lime{background:var(--sg-lime);color:var(--sg-navy);border:none;padding:8px 14px;border-radius:8px;font-weight:700;font-size:12.5px;cursor:pointer}
.segb .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--sg-ink);color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;box-shadow:0 10px 34px rgba(21,26,45,.12);z-index:80;display:flex;align-items:center;gap:9px}
.segb .toast .d{width:7px;height:7px;border-radius:50%;background:var(--sg-lime)}
.segb .overlay{position:fixed;inset:0;background:rgba(21,26,45,.42);display:grid;place-items:center;z-index:70}
.segb .sgmodal{width:100%;max-width:520px;background:#fff;border-radius:16px;box-shadow:0 10px 34px rgba(21,26,45,.12);padding:22px;max-height:80vh;overflow:auto}
.segb .sgmodal h3{font-size:17px;margin:0 0 6px;color:var(--sg-ink)}
.segb .sgmodal p{color:var(--sg-muted);margin:0 0 14px;font-size:13px}
.segb .sgmodal pre{background:#0F1226;color:#d6e0ff;padding:14px;border-radius:10px;font-size:11.5px;line-height:1.5;overflow:auto;max-height:44vh}
.segb .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.segb .lib-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--sg-line);border-radius:9px;margin-bottom:6px}
@media(max-width:900px){.segb .layout{grid-template-columns:1fr}.segb .side{position:relative}}


/* ===== Automation builder (nativo) ===== */
/* Stessa correzione della tavolozza del segment builder, qui sopra: i nomi
   restano, i valori arrivano dai token condivisi. */
.autb{--au-ink:var(--ink);--au-ink-2:var(--ink-2);--au-slate:var(--slate);--au-muted:var(--muted);--au-faint:var(--faint);
  --au-navy:var(--navy-900);--au-lime:var(--brand-green);--au-lime-2:var(--brand-green-hover);--au-lime-tint:var(--brand-green-soft);
  --au-canvas:var(--canvas);--au-panel:var(--panel);--au-line:var(--line);--au-hair:var(--hair);
  --au-ok:var(--ok);--au-danger:var(--danger);--au-blue:var(--brand-blue);--au-amber:var(--amber);--au-violet:var(--violet);
  --au-r:10px;--au-sh:0 2px 8px rgba(21,26,45,.06);--au-sh-lg:0 10px 34px rgba(21,26,45,.12);}
.autb *{box-sizing:border-box}
.autb html,.autb body{margin:0;height:100%}
.autb body{font-family:'Inter',system-ui,sans-serif;color:var(--au-slate);background:var(--au-canvas);font-size:13.5px;-webkit-font-smoothing:antialiased}
.autb h1,.autb h2,.autb h3{font-family:'Inter';color:var(--au-ink);letter-spacing:-.02em}
.autb button{font-family:inherit;cursor:pointer;color:inherit}
.autb input,.autb textarea,.autb select{font-family:inherit}
.autb :focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}
/* Tre colonne a larghezza fissa - 230 + 1fr + 290 piu' due spazi - sommano piu'
   di quanto la finestra offra appena il menu e' aperto, e la terza colonna
   finiva oltre il bordo con dentro il pulsante «Salva»: l'unico che conta.
   minmax(0,1fr) al centro e colonne che si stringono, poi si impila. */
.autb .lay{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr) minmax(220px,280px);gap:var(--s-3);align-items:start}
@media(max-width:1280px){.autb .lay{grid-template-columns:minmax(0,1fr) minmax(220px,280px)}.autb .side.left{grid-column:1/-1}}
@media(max-width:900px){.autb .lay{grid-template-columns:minmax(0,1fr)}.autb .side.left,.autb .side.right{grid-column:auto}}

.autb .brand{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:700;font-size:16px;color:var(--au-ink)}
.autb .brand .mk{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--au-navy),#0F1128);display:grid;place-items:center}
.autb .brand .mk i{width:8px;height:8px;border-radius:50%;background:var(--au-lime);display:block}
.autb .brand span{color:var(--au-faint);font-weight:500;font-size:13px}
.autb .tb-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.autb .toggle{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--au-ink-2)}
.autb .sw-t{width:38px;height:22px;border-radius:20px;background:var(--au-line);position:relative;transition:.2s;border:none;padding:0}
.autb .sw-t.on{background:var(--au-ok)}
.autb .sw-t i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.autb .sw-t.on i{left:18px}
.autb .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;background:var(--au-navy);color:#fff;border:none;font-size:13px;font-weight:600;transition:.15s}
.autb .btn:hover:not(:disabled){background:var(--navy-800)}
.autb .btn:disabled{background:var(--disabled-bg);color:var(--disabled-ink);cursor:not-allowed}
.autb .btn.lime{background:var(--au-lime);color:var(--au-navy)}
.autb .btn.lime:hover{background:var(--au-lime-2)}
.autb .btn.ghost{background:#fff;color:var(--au-ink-2);border:1px solid var(--line-strong)}
.autb .btn.ghost:hover{border-color:var(--au-ink)}
.autb .btn.sm{padding:7px 11px;font-size:12.5px}
.autb .iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);background:#fff;color:var(--au-slate);display:grid;place-items:center}
.autb .iconbtn:hover{border-color:var(--au-ink);color:var(--au-ink)}
.autb .iconbtn:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed}
.autb .side{background:#fff;border:1px solid var(--au-line);border-radius:12px;padding:14px;align-self:start}
.autb .side.right{position:sticky;top:0}
.autb .side h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--au-faint);margin:0 0 10px}
.autb .recipe{display:block;width:100%;text-align:left;padding:12px;border:1px solid var(--au-line);border-radius:10px;background:#fff;margin-bottom:8px;transition:.14s}
.autb .recipe:hover{border-color:var(--au-lime);background:var(--brand-green-soft);transform:translateY(-1px)}
.autb .recipe b{display:block;color:var(--au-ink);font-size:13px;margin-bottom:3px}
.autb .recipe span{font-size:11.5px;color:var(--au-muted);line-height:1.4}
.autb .palette{display:flex;flex-direction:column;gap:7px;margin-bottom:20px}
.autb .pstep{display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid var(--au-line);border-radius:10px;background:#fff;font-size:12.5px;font-weight:600;color:var(--au-ink-2);transition:.14s;text-align:left}
.autb .pstep:hover{border-color:var(--au-lime);background:var(--brand-green-soft)}
.autb .pstep .pi{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.autb .pstep .pi svg{width:15px;height:15px}
.autb .note{font-size:11px;color:var(--au-faint);line-height:1.5;margin-top:14px;padding-top:12px;border-top:1px solid var(--au-hair)}
.autb .canvas{padding:0}
.autb .flow{max-width:520px;margin:0 auto}
.autb .namebar{background:#fff;border:1px solid var(--au-line);border-radius:12px;padding:12px 16px;box-shadow:var(--au-sh);margin-bottom:20px}
.autb .namebar label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--au-faint);display:block;margin-bottom:3px}
.autb .namebar input{width:100%;border:none;font-size:15px;color:var(--au-ink);font-weight:700;padding:0}
.autb .namebar input:focus{outline:none}
.autb .node{background:#fff;border:1px solid var(--au-line);border-radius:12px;padding:14px 16px;box-shadow:var(--au-sh);position:relative;transition:.14s}
.autb .node.sel{border-color:var(--au-lime);box-shadow:0 0 0 3px var(--au-lime-tint)}
.autb .node.trigger{border-color:var(--au-navy);background:linear-gradient(180deg,#fff, var(--testa-2))}
.autb .node-head{display:flex;align-items:center;gap:11px}
.autb .node-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.autb .node-ic svg{width:18px;height:18px}
.autb .node-t{flex:1;min-width:0}
.autb .node-t b{display:block;color:var(--au-ink);font-size:13.5px}
.autb .node-t span{font-size:12px;color:var(--au-muted)}
.autb .node-x{display:flex;gap:4px}
.autb .node-x button{width:26px;height:26px;border-radius:7px;border:1px solid var(--au-line);background:#fff;color:var(--au-slate);display:grid;place-items:center}
.autb .node-x button:hover{border-color:var(--au-navy);color:var(--au-navy)}
.autb .node-x button.del:hover{border-color:var(--au-danger);color:var(--au-danger)}
.autb .connector{width:2px;height:22px;background:var(--au-line);margin:0 auto;position:relative}
.autb .connector::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--au-line)}
.autb .addhere{display:block;margin:8px auto;border:1px dashed var(--au-line);background:#fff;color:var(--au-muted);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600}
.autb .addhere:hover{border-color:var(--au-lime);color:var(--au-navy)}
.autb .branch-lbl{font-size:11px;font-weight:700;color:var(--au-amber);text-transform:uppercase;letter-spacing:.04em;margin-left:45px;margin-top:-4px}
.autb .empty{text-align:center;color:var(--au-faint);padding:30px;font-size:13px}
.autb .ed-field{margin-bottom:14px}
.autb .ed-field label{display:block;font-size:11.5px;font-weight:600;color:var(--au-ink-2);margin-bottom:5px}
.autb .ed-field input[type=text],.autb .ed-field input[type=number],.autb .ed-field textarea,.autb .ed-field select{width:100%;padding:8px 11px;border:1px solid var(--au-line);border-radius:8px;font-size:13px;color:var(--au-ink);background:#fff}
.autb .ed-field input:focus,.autb .ed-field textarea:focus,.autb .ed-field select:focus{outline:none;border-color:var(--au-navy)}
.autb .ed-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.autb .ed-empty{color:var(--au-faint);font-size:12.5px;text-align:center;padding:26px 8px;line-height:1.6}
.autb .hint{font-size:11px;color:var(--au-faint);margin-top:5px;line-height:1.5}
.autb .seg{display:inline-flex;background:var(--au-hair);border:1px solid var(--au-line);border-radius:9px;padding:3px;width:100%}
.autb .seg button{flex:1;border:none;background:none;padding:6px;border-radius:6px;font-size:12px;font-weight:600;color:var(--au-muted)}
.autb .seg button.on{background:#fff;color:var(--au-ink);box-shadow:var(--au-sh)}
.autb .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--au-ink);color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;font-weight:500;box-shadow:var(--au-sh-lg);z-index:80;display:flex;align-items:center;gap:9px}
.autb .toast .d{width:7px;height:7px;border-radius:50%;background:var(--au-lime)}
.autb .overlay{position:fixed;inset:0;background:rgba(21,26,45,.42);display:grid;place-items:center;z-index:70}
.autb .modal{width:100%;max-width:520px;background:#fff;border-radius:16px;box-shadow:var(--au-sh-lg);padding:22px;max-height:80vh;overflow:auto}
.autb .modal h3{font-size:17px;margin:0 0 6px}
.autb .modal p{color:var(--au-muted);margin:0 0 14px;font-size:13px}
.autb .modal pre{background:#0F1226;color:#d6e0ff;padding:14px;border-radius:10px;font-size:11.5px;line-height:1.5;overflow:auto;max-height:44vh}
.autb .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
@media(max-width:1000px){.autb .lay{grid-template-columns:1fr}.autb .side.right{position:relative}}


/* ===== 85-marketing-email.css ===== */
/* ===== Email builder (nativo) ===== */
/* La tavolozza locale punta ai token condivisi: vedi la nota in cima a
   80-marketing-segmenti-automazioni.css. ATTENZIONE: qui i colori del
   COSTRUTTORE e quelli dell'EMAIL che il costruttore produce sono due cose
   diverse. Questi sono i primi. I secondi stanno nel JSX di
   frontend/moduli/95-email-builder.jsx, sono il contenuto dei messaggi che
   Innoform spedisce, e non si toccano da un foglio di stile del CRM. */
.emb{--em-ink:var(--ink);--em-ink-2:var(--ink-2);--em-slate:var(--slate);--em-muted:var(--muted);--em-faint:var(--faint);
  --em-navy:var(--navy-900);--em-lime:var(--brand-green);--em-lime-2:var(--brand-green-hover);--em-lime-tint:var(--brand-green-soft);
  --em-canvas:var(--canvas);--em-panel:var(--panel);--em-line:var(--line);--em-hair:var(--hair);
  --em-ok:var(--ok);--em-danger:var(--danger);--em-r:10px;--em-sh:0 2px 8px rgba(21,26,45,.06);--em-sh-lg:0 10px 34px rgba(21,26,45,.12);}
.emb *{box-sizing:border-box}
.emb html,.emb body{margin:0;height:100%}
.emb body{font-family:'Inter',system-ui,sans-serif;color:var(--em-slate);background:var(--em-canvas);font-size:13.5px;-webkit-font-smoothing:antialiased}
.emb h1,.emb h2,.emb h3{font-family:'Inter';color:var(--em-ink);letter-spacing:-.02em}
.emb button{font-family:inherit;cursor:pointer;color:inherit}
.emb input,.emb textarea,.emb select{font-family:inherit}
.emb :focus-visible{outline:2px solid var(--brand-blue);outline-offset:2px}
.emb .lay{display:grid;grid-template-columns:250px 1fr 300px;gap:16px;align-items:start}

.emb .brand{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk';font-weight:700;font-size:16px;color:var(--em-ink)}
.emb .brand .mk{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--em-navy),#0F1128);display:grid;place-items:center}
.emb .brand .mk i{width:8px;height:8px;border-radius:50%;background:var(--em-lime);display:block}
.emb .brand span{color:var(--em-faint);font-weight:500;font-size:13px}
.emb .tb-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.emb .seg{display:inline-flex;background:var(--em-hair);border:1px solid var(--em-line);border-radius:9px;padding:3px}
.emb .seg button{border:none;background:none;padding:5px 12px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--em-muted)}
.emb .seg button.on{background:#fff;color:var(--em-ink);box-shadow:var(--em-sh)}
.emb .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:9px;background:var(--em-navy);color:#fff;border:none;font-size:13px;font-weight:600;transition:.15s}
.emb .btn:hover:not(:disabled){background:var(--navy-800)}
.emb .btn.lime{background:var(--em-lime);color:var(--em-navy)}
.emb .btn.lime:hover{background:var(--em-lime-2)}
.emb .btn.ghost{background:#fff;color:var(--em-ink-2);border:1px solid var(--line-strong)}
.emb .btn.ghost:hover{border-color:var(--em-ink)}
.emb .btn.sm{padding:7px 11px;font-size:12.5px}
.emb .btn:disabled{background:var(--disabled-bg);color:var(--disabled-ink);cursor:not-allowed}
.emb .iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);background:#fff;color:var(--em-slate);display:grid;place-items:center}
.emb .iconbtn:hover{border-color:var(--em-ink);color:var(--em-ink)}
.emb .iconbtn:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed}
.emb .side{background:#fff;border:1px solid var(--em-line);border-radius:12px;padding:14px;align-self:start}
.emb .side.right{position:sticky;top:0}
.emb .side h3{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--em-faint);margin:0 0 10px}
.emb .palette{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
.emb .pblock{display:flex;flex-direction:column;align-items:center;gap:6px;padding:13px 8px;border:1px solid var(--em-line);border-radius:10px;background:#fff;font-size:11.5px;font-weight:600;color:var(--em-ink-2);transition:.14s}
.emb .pblock:hover{border-color:var(--em-lime);background:var(--brand-green-soft);transform:translateY(-1px)}
.emb .pblock svg{width:20px;height:20px;color:var(--em-navy)}
.emb .layers{display:flex;flex-direction:column;gap:6px}
.emb .layer{display:flex;align-items:center;gap:9px;padding:9px 10px;border:1px solid var(--em-line);border-radius:9px;background:#fff}
.emb .layer .li{width:26px;height:26px;border-radius:7px;background:var(--em-hair);display:grid;place-items:center;flex-shrink:0}
.emb .layer .li svg{width:14px;height:14px;color:var(--em-slate)}
.emb .layer .ln{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--em-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emb .locked{font-size:10.5px;color:var(--em-faint);background:var(--em-hair);border-radius:20px;padding:2px 8px}
.emb .note{font-size:11px;color:var(--em-faint);line-height:1.5;margin-top:16px;padding-top:12px;border-top:1px solid var(--em-hair)}
.emb .lib-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--em-line);border-radius:9px;margin-bottom:6px}
.emb .lib-item .ln{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--em-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emb .lib-item .lx{border:none;background:none;color:var(--em-faint);padding:4px;border-radius:6px}
.emb .lib-item .lx:hover{color:var(--em-danger);background:#FDECEC}
.campaign-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
@media(max-width:640px){.campaign-summary{grid-template-columns:1fr}.campaign-summary>div{display:grid;grid-template-columns:1fr auto;align-items:center}.campaign-summary>div>div:nth-child(2){margin-top:0}}
.emb .template-library{width:min(960px,calc(100vw - 28px));max-width:960px;max-height:88vh;overflow:auto;padding:0}
/* L'elenco dei template non e' piu' una finestra sopra l'editor: e' la
   schermata su cui la sezione si apre. Da pagina non ha larghezza massima ne'
   altezza massima — scorre la pagina, non un riquadro dentro la pagina — e non
   galleggia, quindi niente ombra. */
.emb .template-library--pagina{
  width:100%;max-width:none;max-height:none;overflow:visible;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md)
}
.emb .template-library--pagina .template-library-head{position:static;border-radius:var(--r-md) var(--r-md) 0 0}
.emb .template-library-head{position:sticky;top:0;z-index:2;background:#fff;border-bottom:1px solid var(--em-line);padding:20px 22px 16px}
.emb .template-library-head h3{margin:0 0 5px;font-size:19px}.emb .template-library-head p{margin:0;color:var(--em-muted);font-size:12.5px}
.emb .template-library-body{padding:18px 22px 22px}.emb .template-search{display:flex;align-items:center;gap:9px;border:1px solid var(--em-line);border-radius:10px;padding:9px 12px;margin-bottom:14px;background:#fff}
.emb .template-search input{border:0;outline:0;min-width:0;flex:1;font:inherit;color:var(--em-ink);background:transparent}
.emb .template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:20px}
.emb .template-card{border:1px solid var(--em-line);border-radius:12px;padding:14px;background:#fff;box-shadow:0 2px 8px rgba(22,32,56,.04);display:flex;flex-direction:column;gap:10px;min-width:0}
.emb .template-card.editing{border-color:#174bea;box-shadow:0 0 0 2px rgba(23,75,234,.10)}
.emb .template-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.emb .template-card-name{font-size:14px;font-weight:750;color:var(--em-ink);overflow-wrap:anywhere}
.emb .template-card-subject{font-size:12px;color:var(--em-slate);line-height:1.45;min-height:34px}.emb .template-card-meta{font-size:11px;color:var(--em-faint);display:flex;gap:7px;flex-wrap:wrap}
.emb .template-badge{font-size:10.5px;font-weight:700;border-radius:999px;padding:4px 8px;background:#eaf7ef;color:#177440;white-space:nowrap}.emb .template-badge.off{background:var(--em-hair);color:var(--em-muted)}
.emb .template-card-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto}.emb .template-card-actions .btn{flex:1;justify-content:center;min-width:116px}
.emb .editing-context{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#eef3ff;border:1px solid #bfd0ff;border-radius:11px;padding:11px 14px;margin-bottom:14px;color:#172958}
.emb .editing-context strong{display:block;font-size:13px}.emb .editing-context span{display:block;font-size:11.5px;color:#52617f;margin-top:2px}
@media(max-width:720px){.emb .template-grid{grid-template-columns:1fr}.emb .template-library-body,.emb .template-library-head{padding-left:14px;padding-right:14px}.emb .editing-context{align-items:flex-start;flex-direction:column}.emb .template-card-actions .btn{min-width:0}}
.emb .stage{;padding:24px 20px;background:var(--em-canvas)}
.emb .stage-inner{margin:0 auto;transition:max-width .25s;max-width:640px}
.emb .stage-inner.mobile{max-width:380px}
.emb .subjbar{margin:0 auto 16px;background:#fff;border:1px solid var(--em-line);border-radius:10px;padding:10px 14px;box-shadow:var(--em-sh);max-width:640px}
.emb .subjbar.mobile{max-width:380px}
.emb .subjbar label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--em-faint);display:block;margin-bottom:3px}
.emb .subjbar input{width:100%;border:none;font-size:14px;color:var(--em-ink);font-weight:600;padding:0}
.emb .subjbar input:focus{outline:none}
.emb .subjbar .pre{border-top:1px solid var(--em-hair);margin-top:8px;padding-top:8px}
.emb .subjbar .pre input{font-weight:400;font-size:12.5px;color:var(--em-slate)}
.emb .email{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--em-sh-lg)}
.emb .em-head{background:var(--em-navy);padding:20px 30px;display:flex;align-items:center;justify-content:space-between}
.emb .em-head .logo{font-family:Arial,sans-serif;font-size:19px;font-weight:bold;color:#fff}
.emb .em-head .logo b{color:var(--em-lime)}
.emb .em-head .tag{font-family:Arial,sans-serif;font-size:11px;color:#aeb6cc}
.emb .em-limebar{height:4px;background:var(--em-lime)}
.emb .em-banner{padding:12px 16px 8px}
.emb .em-banner img{display:block;width:100%;height:auto;border-radius:10px}
.emb .em-banner.blk{padding:12px 16px 8px}
.emb .em-banner.blk .tools{top:18px;right:22px}
.emb .em-body{padding:14px 0}
.emb .em-foot{background:#f7f8fa;padding:22px 30px;border-top:1px solid #e5e7eb}
.emb .em-foot p{margin:0 0 5px;font-family:Arial,sans-serif;font-size:12px;line-height:1.6;color:#8a93ac}
.emb .em-foot a{color:var(--em-navy);text-decoration:underline}
.emb .em-lock{position:relative}
.emb .blk{position:relative;padding:2px 30px;border:2px solid transparent}
.emb .blk:hover{border-color:var(--em-lime-tint);background:var(--brand-green-soft)}
.emb .blk.sel{border-color:var(--em-lime)}
.emb .blk.dragover{border-top:3px solid var(--em-navy)}
.emb .blk .grip{position:absolute;left:6px;top:8px;color:var(--em-faint);cursor:grab;font-size:13px;opacity:0;user-select:none}
.emb .blk:hover .grip{opacity:1}
.emb .blk.dragging{opacity:.4}
.emb .mailh{font-family:Arial,sans-serif;font-weight:bold;margin:0;padding:8px 0;outline:none}
.emb .mailp{font-family:Arial,sans-serif;margin:0;padding:6px 0;line-height:1.65;outline:none;font-size:16px}
.emb .mailp:empty:before,.emb .mailh:empty:before{content:attr(data-placeholder);color:#b9c0cf;font-weight:normal;pointer-events:none}
@media(max-width:760px){.emb .email-steps{grid-template-columns:1fr!important}.emb .page-head>div:last-child{justify-content:flex-start!important}.emb .page-head .cta{flex:1 1 auto;justify-content:center}}
.emb .maildiv{height:1px;margin:12px 0}
.emb .mailbtn{display:inline-block;padding:14px 32px;font-family:Arial,sans-serif;font-weight:bold;text-decoration:none;border-radius:8px}
.emb .mailimg{width:100%;height:auto;display:block}
.emb .imgph{width:100%;height:140px;background:repeating-linear-gradient(45deg,#eef1f6,#eef1f6 12px,#e3e8f0 12px,#e3e8f0 24px);display:flex;align-items:center;justify-content:center;color:#8a93ac;font-size:12px;font-family:Arial,sans-serif}
.emb .cols{display:flex;gap:16px}
.emb .cols>div{flex:1;min-width:0}
.emb .blk .tools{position:absolute;right:6px;top:6px;display:flex;gap:4px;opacity:0;z-index:3}
.emb .blk:hover .tools,.emb .blk.sel .tools{opacity:1}
.emb .blk .tools button{width:24px;height:24px;border-radius:6px;border:1px solid var(--em-line);background:#fff;color:var(--em-slate);display:grid;place-items:center}
.emb .blk .tools button:hover{border-color:var(--em-navy);color:var(--em-navy)}
.emb .blk .tools button.del:hover{border-color:var(--em-danger);color:var(--em-danger)}
.emb .rtbar{position:absolute;left:30px;top:-2px;transform:translateY(-100%);background:var(--em-ink);border-radius:8px;padding:4px;display:flex;gap:2px;z-index:5;box-shadow:var(--em-sh-lg)}
.emb .rtbar button{width:28px;height:26px;border:none;background:none;color:#fff;border-radius:5px;font-size:13px;font-weight:700}
.emb .rtbar button:hover{background:rgba(255,255,255,.15)}
.emb .ed-field{margin-bottom:14px}
.emb .ed-field label{display:block;font-size:11.5px;font-weight:600;color:var(--em-ink-2);margin-bottom:5px}
.emb .ed-field input[type=text],.emb .ed-field textarea,.emb .ed-field select{width:100%;padding:8px 11px;border:1px solid var(--em-line);border-radius:8px;font-size:13px;color:var(--em-ink);background:#fff}
.emb .ed-field input:focus,.emb .ed-field textarea:focus,.emb .ed-field select:focus{outline:none;border-color:var(--em-navy)}
.emb .swatches{display:flex;gap:6px;flex-wrap:wrap}
.emb .sw{width:24px;height:24px;border-radius:6px;border:2px solid #fff;box-shadow:0 0 0 1px var(--em-line);cursor:pointer}
.emb .sw.on{box-shadow:0 0 0 2px var(--em-navy)}
.emb .align{display:flex;gap:4px}
.emb .align button{flex:1;padding:7px;border:1px solid var(--em-line);background:#fff;border-radius:7px;color:var(--em-muted);font-size:11px;font-weight:600}
.emb .align button.on{border-color:var(--em-navy);color:var(--em-navy);background:var(--em-lime-tint)}
.emb .tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.emb .tag{font-size:11px;font-weight:600;color:var(--em-navy);background:var(--em-lime-tint);border:1px solid #dcefa8;border-radius:20px;padding:3px 9px;cursor:pointer}
.emb .tag:hover{background:var(--em-lime)}
.emb .ed-empty{color:var(--em-faint);font-size:12.5px;text-align:center;padding:26px 8px;line-height:1.6}
.emb .hint{font-size:11px;color:var(--em-faint);margin-top:4px}
.emb .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--em-ink);color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;font-weight:500;box-shadow:var(--em-sh-lg);z-index:80;display:flex;align-items:center;gap:9px}
.emb .toast .d{width:7px;height:7px;border-radius:50%;background:var(--em-lime)}
.emb .overlay{position:fixed;inset:0;background:rgba(21,26,45,.42);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:70}
.emb .modal{width:100%;max-width:440px;background:#fff;border-radius:16px;box-shadow:var(--em-sh-lg);padding:22px}
.emb .modal h3{font-size:17px;margin:0 0 6px}
.emb .modal p{color:var(--em-muted);margin:0 0 16px;font-size:13px}
.emb .modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
@media(max-width:1000px){.emb .lay{grid-template-columns:1fr}.emb .side.right{position:relative}}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calhead{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);text-align:center;padding:4px 0}
.calcell{min-height:92px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px;cursor:pointer;transition:.12s;overflow:hidden}
.calcell:hover{border-color:var(--navy)}
.calcell.empty{background:transparent;border:none;cursor:default}
.calcell.today{border-color:var(--lime);background:var(--brand-green-soft)}
.calcell.sel{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.caldate{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:4px}
.calchip{font-size:10.5px;background:var(--lime-tint);color:var(--navy);border-radius:5px;padding:2px 5px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calchip.requested{background:#FEF3E2;color:var(--warn,#b45309)}
.calchip.completed{background:#E8F7ED;color:#166534;border-left:3px solid #16a34a}
.calchip.noshow{background:#FFF1E6;color:#9a3412;border-left:3px solid #f97316}
.calchip.cancelled{background:var(--danger-tint,#FDECEC);color:var(--danger,#dc2626);border-left:3px solid var(--danger,#dc2626);text-decoration:line-through}
.calmore{font-size:10px;color:var(--muted);font-weight:600}
.daypanel{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}

/* ---- Percorso guidato dell'editor email ---- */
/* Editor email: percorso guidato, controlli e azioni coerenti */
.emb .emb-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.emb .emb-toolbar>.btn{min-height:40px;width:auto!important;flex:0 0 auto!important;white-space:nowrap}
.emb .email-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.emb .email-step{display:flex;align-items:center;gap:9px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;box-shadow:var(--shadow-xs)}
.emb .email-step>b{width:25px;height:25px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 25px;border-radius:50%;background:var(--brand-blue-soft);color:var(--brand-blue);font-size:12px}
.emb .email-step span{min-width:0}.emb .email-step strong,.emb .email-step small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.emb .email-step strong{font-size:12.5px;color:var(--ink)}.emb .email-step small{margin-top:2px;color:var(--faint);font-size:10.5px}
.emb .email-step.done{border-color:#dceaa1;background:var(--brand-lime-soft)}.emb .email-step.done>b{background:var(--brand-lime);color:#17335f}
.emb .emb-section-kicker,.emb .emb-stage-title span{color:var(--brand-blue);font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.emb .side h3{margin-top:4px}.emb .emb-stage-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 auto 10px;max-width:760px}.emb .emb-stage-title strong{display:block;margin-top:2px;color:var(--ink);font-size:14px}.emb .emb-stage-title .seg{display:flex}.emb .emb-stage-title .seg button{min-height:34px;padding:6px 10px;border:0;background:transparent;color:var(--muted);font-size:11px}.emb .emb-stage-title .seg button.on{background:var(--brand-blue);color:#fff}
.emb .emb-empty-help{display:grid;gap:8px;padding:13px;border:1px dashed #b9c8df;border-radius:var(--radius-sm);background:var(--testa-2);color:var(--muted);font-size:11.5px;line-height:1.45}.emb .emb-empty-help b{color:var(--ink)}.emb .emb-empty-help span:before{content:'•';margin-right:7px;color:var(--brand-blue);font-weight:800}


/* ===== 88-calendario.css ===== */
/* Riga della giornata nel calendario. Era una fila di span a larghezza
   libera: ogni riga si allineava per conto suo, cosi' la stessa informazione
   cadeva in punti diversi e l'occhio doveva ricercarla riga per riga. Ora e'
   una griglia — ora, cosa/con chi, stato, azioni — e le colonne restano
   incolonnate anche quando un dato manca. */
.calrow{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair)}
.calrow:last-child{border-bottom:0}
.calrow__ora{font-family:'Space Grotesk';font-size:14.5px;font-weight:700;color:var(--navy)}
.calrow__chi{min-width:0}
.calrow__titolo{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:13px;font-weight:650}
.calrow__sub{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--faint);font-size:11.5px}
/* Lo stato e' una pastiglia e non testo colorato: il colore da solo non
   basta a distinguerlo, l'etichetta la porta sempre scritta. */
.calrow__stato{justify-self:end;white-space:nowrap;border-radius:999px;padding:4px 9px;background:var(--hair);color:var(--slate);font-size:10.5px;font-weight:750}
.calrow__stato.attesa{background:#FEF3E2;color:#9a5b09}
.calrow__stato.confermato{background:#E7EDFF;color:#1B3E8F}
.calrow__stato.ok{background:#E8F7ED;color:#166534}
.calrow__stato.assente{background:#FFF1E6;color:#9a3412}
.calrow__stato.annullato{background:var(--danger-tint);color:var(--danger)}
.calrow__azioni{display:flex;gap:6px;justify-content:flex-end}
.calrow.cancelled{margin-bottom:6px;padding:9px 10px;border:1px solid #F4BABA;border-bottom:1px solid #F4BABA;border-radius:8px;background:var(--danger-tint,#FDECEC)}
.calrow.cancelled .calrow__titolo,.calrow.cancelled .calrow__ora{color:#7F1D1D}
.dayrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:13px}
.dayrow.cancelled{background:var(--danger-tint,#FDECEC);border:1px solid #F4BABA;border-radius:8px;padding:9px 10px;margin-bottom:6px;color:#7F1D1D}
.dayrow:last-child{border-bottom:none}
.crm-date-trigger{display:flex;width:100%;min-height:42px;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:inherit;text-align:left}
.crm-date-trigger:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed}
.crm-date-popover{width:100%;max-width:340px;box-sizing:border-box;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--sh);position:relative;z-index:8}
.crm-date-head{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:5px;margin-bottom:8px}
.crm-date-head strong{text-align:center;text-transform:capitalize;font-size:14px}
.crm-date-head button{min-width:0;width:40px;height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font-size:21px}
.crm-date-week,.crm-date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.crm-date-week span{text-align:center;color:var(--muted);font-size:10px;font-weight:700;padding:5px 0}
.crm-date-day{width:100%;min-width:0;aspect-ratio:1;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:12px;font-weight:650;padding:0}
.crm-date-day:hover{background:var(--hair)}
.crm-date-day.today{box-shadow:inset 0 0 0 1px var(--lime)}
.crm-date-day.selected{background:var(--navy);color:#fff;box-shadow:none}
.crm-date-day.empty,.crm-date-day:disabled{pointer-events:none;background:transparent;color:var(--disabled-ink)}
.crm-date-footer{display:flex;justify-content:center;margin-top:8px}
.crm-date-footer button{min-height:38px;padding:7px 16px;border:1px solid var(--brand-green-line);border-radius:9px;background:var(--lime-tint);color:var(--brand-green-ink);font:inherit;font-weight:750}
.crm-datetime{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:8px;align-items:start}
.crm-datetime input[type="time"]{width:100%;min-width:0;min-height:42px;box-sizing:border-box;border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px 9px;font:inherit;color:var(--ink)}
@media(max-width:420px){.crm-datetime{grid-template-columns:1fr}.crm-datetime input[type="time"]{min-height:44px}}
.appt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 11px;border-radius:999px;border:1px solid transparent;font-size:12px;font-weight:750;line-height:1;cursor:pointer;white-space:nowrap;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
.appt-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 11px rgba(15,23,42,.11);filter:saturate(1.06)}
.appt-btn:disabled{background:var(--disabled-bg);border-color:var(--disabled-line);color:var(--disabled-ink);cursor:not-allowed}
.appt-btn.confirm{background:#E8F7ED;border-color:#B8E3C5;color:#166534}
.appt-btn.complete{background:var(--navy);border-color:var(--navy);color:#fff}
.appt-btn.noshow{background:#FFF4E8;border-color:#FED7AA;color:#9A3412}
.appt-btn.cancel{background:#fff;border-color:#F4BABA;color:var(--danger,#dc2626)}
@media(max-width:720px){.dayrow{flex-wrap:wrap}.dayrow .appt-btn{flex:1 1 auto}}
.slotchip{padding:6px 12px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer;transition:.12s}
.slotchip:hover{border-color:var(--navy)}
.slotchip.on{background:var(--navy);color:#fff;border-color:var(--navy)}