/* ============================================================
   SALES

   Solo token: la pagina e' convertita al tema scuro, e un colore letterale
   qui dentro sarebbe una schermata rotta di notte.

   Molte classi ripetono quelle di Contatti con un prefisso diverso: sono
   due pagine, e un giorno una delle due cambiera' senza l'altra. Quello che
   e' davvero condiviso sta in `crm.js` e in `.crm-*`.
   ============================================================ */

.sl-page{display:flex;flex-direction:column;gap:18px;}
.sl-stack{display:flex;flex-direction:column;gap:14px;}
.sl-row{display:flex;align-items:center;gap:10px;min-width:0;}
.sl-wrap{flex-wrap:wrap;}
.sl-between{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sl-grow{flex:1;min-width:0;}
.sl-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;}
.sl-gobj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:14px;align-items:start;}
.sl-gobj.rev{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);}
.sl-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.sl-cap{font-size:11.5px;color:var(--neutral-ink);}
.sl-flab{font-size:11px;font-weight:600;color:var(--neutral-ink);}
.sl-lab{font-size:11px;font-weight:700;color:var(--neutral-ink);padding:14px 0 8px;
  text-transform:uppercase;letter-spacing:.3px;}
.sl-strong{font-weight:600;} .sl-b7{font-weight:700;}
.sl-muted{color:var(--neutral-ink);}
.sl-num{text-align:right;font-variant-numeric:tabular-nums;}
.sl-ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sl-from{color:var(--neutral-ink);text-decoration:line-through;}
.sl-big{font-size:28px;font-weight:700;letter-spacing:-.5px;}
.sl-t-red{color:var(--red-dark);} .sl-t-amber{color:var(--amber-dark);} .sl-t-primary{color:var(--primary-dark);}
/* Le `.sl-i-` stanno solo sulle icone, quindi dicono anche quanto sono
   grandi: Lucide disegna a 24px, che qui non e' la misura di nessuna riga. */
.sl-i-red,.sl-i-amber,.sl-i-primary{width:15px;height:15px;flex-shrink:0;}
.sl-i-red{color:var(--red-dark);} .sl-i-amber{color:var(--amber-dark);} .sl-i-primary{color:var(--primary-dark);}
/* La riga di chiusura di una card regge un totale: senza una misura sua il
   numero nudo tornava alla taglia del browser. */
.sl-foot{border-top:1px solid var(--border);padding-top:12px;margin-top:4px;font-size:13px;}
.sl-linkish{border:none;background:none;padding:0;color:var(--primary-dark);font-weight:600;
  cursor:pointer;text-align:left;font-family:inherit;font-size:inherit;}
.sl-linkish:hover{text-decoration:underline;}
.sl-key{width:12px;height:6px;border-radius:2px;display:inline-block;flex-shrink:0;}
.sl-cnt{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--neutral-ink);}
.sl-cnt svg{width:12px;height:12px;}

/* ---- sezioni ---- */
.sl-tabs{display:inline-flex;gap:4px;background:var(--track);border-radius:10px;padding:3px;
  max-width:100%;overflow-x:auto;overflow-y:hidden;width:fit-content;}
.sl-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:8px;font-size:12.5px;
  font-weight:600;color:var(--neutral-ink);text-decoration:none;white-space:nowrap;border:none;
  background:transparent;cursor:pointer;font-family:inherit;}
.sl-tab:hover{color:var(--text);}
.sl-tab.on{background:var(--card);color:var(--text);box-shadow:var(--shadow);}
.sl-tab-n{font-size:10.5px;font-weight:700;color:var(--neutral-ink);background:var(--track);border-radius:5px;padding:1px 5px;}
.sl-tab.on .sl-tab-n{background:var(--primary-soft);color:var(--primary-dark);}
.sl-search{display:flex;align-items:center;gap:8px;width:250px;max-width:100%;height:34px;
  border:1px solid var(--border);background:var(--card);border-radius:10px;padding:0 10px;color:var(--muted);}
.sl-search:focus-within{border-color:var(--primary);}
.sl-search svg{width:14px;height:14px;flex-shrink:0;}
.sl-search input{border:none;outline:none;background:transparent;flex:1;min-width:0;font-size:12.5px;
  color:var(--text);font-family:inherit;}

/* ---- tabella ---- */
.sl-tablecard{padding:4px 6px;}
.sl-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.sl-table th{text-align:left;font-size:11px;font-weight:600;color:var(--neutral-ink);padding:9px 10px;
  background:var(--field);border-bottom:1px solid var(--border);white-space:nowrap;}
.sl-table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle;}
.sl-table tbody tr:last-child td{border-bottom:none;}
.sl-table tbody tr:hover td{background:var(--hover);}
.sl-table th.sl-num, .sl-table td.sl-num{text-align:right;}

/* ---- obiettivo ---- */
.sl-goalbar{height:12px;display:flex;border-radius:6px;overflow:hidden;background:var(--track);}
.sl-track{height:6px;background:var(--track);border-radius:5px;overflow:hidden;display:block;flex:1;}
.sl-fill{height:100%;background:var(--primary);border-radius:5px;display:block;}
.sl-fn{display:grid;grid-template-columns:150px minmax(0,1fr) 90px;gap:14px;align-items:center;
  border:none;background:none;padding:2px 0;cursor:pointer;text-align:left;color:inherit;
  font-family:inherit;font-size:12.5px;width:100%;}
.sl-fn:hover{color:var(--text);}
.sl-hbar{display:grid;grid-template-columns:150px minmax(0,1fr) 28px;gap:10px;align-items:center;font-size:12.5px;}
.sl-bars{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;height:200px;
  border-bottom:1px solid var(--border);}
.sl-barcol{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;}
.sl-bar{width:min(52px,80%);background:var(--primary-mid);border-radius:7px 7px 0 0;
  display:flex;align-items:flex-end;}
.sl-bar>div{width:100%;background:var(--primary);border-radius:7px 7px 0 0;}
.sl-barlabels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:10px;text-align:center;font-size:11.5px;}
.sl-badgebtn{border:none;cursor:pointer;font-family:inherit;}

/* ---- righe e riquadri ---- */
/* 12.5 sopra e 11.5 sotto (`.sl-cap`) e' la coppia che la Bacheca usa per la
   stessa riga: un nome, cosa c'e' da fare, e sotto quando. */
.sl-listrow{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:12.5px;
  border-top:1px solid var(--border);}
.sl-listrow:first-of-type{border-top:none;}
.sl-box{display:flex;gap:8px;align-items:flex-start;border-radius:10px;padding:9px 11px;
  font-size:12px;font-weight:500;line-height:1.45;}
.sl-box svg{margin-top:1px;width:15px;height:15px;flex-shrink:0;}
.sl-box-warn{background:var(--amber-soft);color:var(--amber-dark);}
.sl-box-err{background:var(--red-soft);color:var(--red-dark);}
.sl-box-info{background:var(--track);color:var(--neutral-ink);}
.sl-box-ok{background:var(--primary-soft);color:var(--primary-dark);}
.sl-subcard{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-top:16px;background:var(--field);}
.sl-subcard.warn{border-color:var(--amber);}
/* Campo, data e salvataggio su una riga sola quando ci stanno: erano tre
   cose impilate, con il bottone che restava da solo in fondo a sinistra. */
.sl-nextedit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;}
.sl-nextedit .field{flex:1 1 220px;}
.sl-kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;}
.sl-k{font-size:11.5px;color:var(--neutral-ink);}
.sl-v{font-size:13px;font-weight:600;margin-top:2px;overflow-wrap:anywhere;}
.sl-cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:8px;}
.sl-cbtn{border:1px solid transparent;background:none;border-radius:10px;padding:6px;text-align:left;
  cursor:pointer;display:flex;flex-direction:column;gap:2px;color:inherit;font-family:inherit;}
.sl-cbtn:hover{background:var(--hover);}
.sl-cbtn[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-tint);}
.sl-logrow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:9px 0;
  border-top:1px solid var(--border);font-size:12.5px;}
.sl-logrow:first-of-type{border-top:none;}
.sl-tl{display:flex;flex-direction:column;margin-top:10px;}
.sl-tl-i{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:12px 0;
  font-size:12.5px;border-top:1px solid var(--border);}
.sl-tl-i:first-child{border-top:none;}
.sl-tlic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--track);color:var(--neutral-ink);flex-shrink:0;}
.sl-tlic svg{width:15px;height:15px;}
.sl-kicon{width:34px;height:34px;border-radius:10px;background:var(--track);color:var(--neutral-ink);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sl-kicon svg{width:16px;height:16px;}

/* ---- bacheca ---- */
.sl-board{display:grid;grid-template-columns:repeat(5,minmax(215px,1fr));gap:12px;align-items:start;
  overflow-x:auto;padding-bottom:6px;}
.sl-col{background:var(--hover);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:10px;
  min-width:0;min-height:160px;border:1.5px solid transparent;transition:border-color .12s,background .12s;}
.sl-col.over, .sl-drop.over{border-color:var(--primary);background:var(--primary-tint);}
.sl-col.blocked{opacity:.85;}
.sl-colhead{padding:2px 4px;}
.sl-colhead h2{font-size:13px;font-weight:700;margin:0;}
.sl-coldrop{font-size:11.5px;color:var(--neutral-ink);padding:14px 6px;text-align:center;}
.sl-addcol{justify-content:center;width:100%;border:1px dashed var(--dim);background:transparent;
  border-radius:12px;padding:10px;font-size:12px;font-weight:600;color:var(--neutral-ink);}
.sl-addcol:hover{background:var(--hover);border-color:var(--primary);color:var(--primary-dark);}
.sl-deal{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px 13px;
  display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);cursor:grab;
  transition:box-shadow .15s,transform .15s;}
.sl-deal:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px);}
.sl-deal.dragging{opacity:.45;}
.sl-drop{flex:1;min-width:230px;border:1.5px dashed var(--dim);border-radius:12px;padding:14px 16px;
  display:flex;align-items:center;gap:12px;color:var(--neutral-ink);background:var(--card);font-size:12.5px;}
.sl-drop svg{width:18px;height:18px;flex-shrink:0;}
.sl-drop .sl-strong{color:var(--text);}
/* ---- la card di una trattativa ----
   Cinque livelli, un peso ciascuno: chi e' (cliente), quanto vale (il
   numero grande), cosa comprende (le chip dei servizi), com'e' messa (i
   tre segnali) e cosa si fa dopo (il prossimo passo, sotto a un filetto).
   Prima erano nove righe quasi tutte dello stesso corpo, con tre file di
   pastiglie uguali: l'occhio non aveva un punto da cui partire. */
.sl-a-head{display:flex;align-items:center;gap:8px;min-width:0;}
.sl-a-name{flex:1;min-width:0;font-size:14.5px;font-weight:700;letter-spacing:-.2px;line-height:1.25;
  overflow-wrap:anywhere;}
.sl-a-money{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:-4px;}
.sl-a-val{font-size:18px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;}
/* Il canone non e' piu' una pastiglia sul tipo di trattativa: e' l'icona di
   ripetizione accanto alla cifra, dove la cifra si legge. */
.sl-a-can{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--primary-dark);}
.sl-a-can svg{color:var(--primary-dark);}

/* Il pacchetto. Tre chip al massimo: una trattativa da sette servizi non
   deve allungare la colonna per tutte le altre. */
.sl-a-svc{border-top:1px solid var(--border);padding-top:9px;}
.sl-svc-row{display:flex;flex-wrap:wrap;gap:5px;min-width:0;}
.sl-svc-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;min-width:0;
  background:var(--primary-tint);border:1px solid var(--primary-mid);border-radius:8px;padding:3px 8px;
  font-size:11px;font-weight:600;color:var(--primary-dark);}
.sl-svc-chip svg{width:12px;height:12px;flex-shrink:0;color:var(--primary);}
.sl-svc-chip .sl-ell{min-width:0;}
.sl-svc-more{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--primary-dark);padding:3px 4px;}
/* Una trattativa senza servizi non e' una riga che manca: e' uno stato, e
   si conta nella testata della colonna. */
.sl-svc-empty{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--neutral-ink);
  border:1px dashed var(--dim);border-radius:8px;padding:4px 9px;background:transparent;
  cursor:pointer;font-family:inherit;transition:border-color .12s,background .12s,color .12s;}
.sl-svc-empty svg{width:12px;height:12px;flex-shrink:0;}
.sl-svc-empty:hover,.sl-svc-empty:focus-visible{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-dark);}
.sl-svc-empty:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}

/* I tre segnali di qualifica erano tre pastiglie con bordo e fondo, uguali
   a quelle dei servizi e a quelle del tipo: tre file della stessa cosa.
   Qui sono icona piu' parola, senza riquadro, e il colore dice solo se il
   segnale e' a favore (primario) o da verificare (ambra). */
.sl-a-qual{display:flex;flex-wrap:wrap;gap:4px 11px;}
.sl-a-q{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--neutral-ink);}
.sl-a-q svg{width:12px;height:12px;flex-shrink:0;color:var(--dim);}
.sl-a-q.on{color:var(--primary-dark);} .sl-a-q.on svg{color:var(--primary);}
.sl-a-q.warn{color:var(--amber-dark);} .sl-a-q.warn svg{color:var(--amber-dark);}

/* ---- il prossimo passo ----
   E' l'unica cosa su cui si agisce, quindi sta in fondo, da solo, sotto a
   un filetto: prima era a meta' card, in 11px, dentro un riquadro pieno
   fra due righe di etichette. Il fondo resta neutro — con tre trattative
   in ritardo nella stessa colonna, tre rettangoli rossi pesavano piu' del
   nome dell'azienda — e lo stato sta nell'icona e nella scadenza detta in
   tre parole a fine riga. Il ritardo e' l'unico rosso della card. */
.sl-a-next{border-top:1px solid var(--border);padding-top:9px;}
.sl-next{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.4;color:var(--text);min-width:0;}
.sl-next svg{width:13px;height:13px;margin-top:2px;flex-shrink:0;color:var(--dim);}
.sl-next .sl-grow{flex:1 1 auto;min-width:0;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sl-next .when{flex-shrink:0;font-size:11px;font-weight:700;color:var(--neutral-ink);white-space:nowrap;margin-top:1px;}
.sl-next.late svg,.sl-next.late .when{color:var(--red-dark);}
.sl-next.late .sl-grow{font-weight:600;}
.sl-next.soon svg,.sl-next.soon .when{color:var(--amber-dark);}
/* Un prossimo passo che manca non e' un errore: e' una casella vuota da
   riempire, ed e' un bottone. */
.sl-nonext{display:flex;align-items:center;gap:7px;width:100%;font-size:12px;font-weight:600;
  color:var(--neutral-ink);border:1px dashed var(--dim);border-radius:8px;padding:6px 9px;
  background:transparent;cursor:pointer;text-align:left;font-family:inherit;
  transition:border-color .12s,background .12s,color .12s;}
.sl-nonext svg{flex-shrink:0;}
.sl-nonext .sl-grow{flex:1 1 auto;min-width:0;}
.sl-nonext:hover,.sl-nonext:focus-visible{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-dark);}
.sl-nonext:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
/* La nota di una card: stessa famiglia, meno peso ancora. Niente fondo
   pieno, solo l'inchiostro ambra — e' un avviso, non lo stato della
   trattativa. */
.sl-note{display:flex;align-items:flex-start;gap:7px;font-size:11px;font-weight:600;line-height:1.35;
  color:var(--amber-dark);}
.sl-note svg{flex-shrink:0;margin-top:1px;color:var(--amber-dark);}

/* In tabella la colonna e' larga e la riga ha gia' la sua superficie: il
   passo sta su una riga sola, con la scadenza per esteso a destra. */
.sl-table td .sl-next{align-items:center;}
.sl-table td .sl-next svg{margin-top:0;}
.sl-table td .sl-next .sl-grow{display:block;white-space:nowrap;text-overflow:ellipsis;}
.sl-table td .sl-next .when{margin-left:auto;margin-top:0;}
.sl-table td .sl-nonext{width:auto;padding:4px 9px;}

/* ---- la scelta delle colonne ----
   Una casella per colonna, della stessa forma delle caselle di Contatti:
   si vede da accesa o spenta prima ancora di leggere l'etichetta. */
.sl-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:4px;}
.sl-chkrow{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 13px 0 10px;
  border:1px solid var(--border);border-radius:10px;background:var(--card);cursor:pointer;
  font-size:13px;font-weight:600;color:var(--text);font-family:inherit;text-align:left;
  transition:border-color .12s,background .12s,color .12s;}
.sl-chkrow:hover{background:var(--hover);}
.sl-chkrow:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.sl-chkrow[aria-checked="true"]{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-dark);}
.sl-chk{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--dim);background:var(--card);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--on-accent);}
.sl-chk svg{width:12px;height:12px;stroke-width:3;opacity:0;}
.sl-chkrow[aria-checked="true"] .sl-chk{background:var(--primary);border-color:var(--primary);}
.sl-chkrow[aria-checked="true"] .sl-chk svg{opacity:1;}

/* ---- la testata di colonna ----
   Tiene i conti che le card hanno smesso di ripetere. */
.sl-ch-top{display:flex;align-items:center;gap:7px;min-width:0;}
.sl-ch-top h2{min-width:0;overflow-wrap:anywhere;}
.sl-ch-prob{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--primary-dark);background:var(--primary-soft);
  padding:2px 7px;border-radius:6px;white-space:nowrap;}
.sl-ch-top .sl-cap{margin-left:auto;white-space:nowrap;display:inline-flex;align-items:center;gap:4px;}
.sl-ch-money{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:4px;}
.sl-ch-tot{font-size:16px;font-weight:700;letter-spacing:-.4px;font-variant-numeric:tabular-nums;}
.sl-ch-alerts{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;}
.sl-ch-alert{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;}
.sl-ch-alert svg{width:12px;height:12px;flex-shrink:0;}
.sl-ch-alert.late{color:var(--red-dark);}
.sl-ch-alert.warn{color:var(--amber-dark);}

/* ---- pastiglie ---- */
.sl-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;
  border-radius:999px;background:var(--primary-tint);color:var(--primary-dark);
  border:1px solid var(--primary-mid);white-space:nowrap;}
button.sl-chip-btn{cursor:pointer;font-family:inherit;}
button.sl-chip-btn[aria-pressed="false"]{background:var(--card);color:var(--neutral-ink);border-color:var(--border);}
.sl-tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:2px 7px;
  border-radius:6px;background:var(--field);border:1px solid var(--border);color:var(--neutral-ink);white-space:nowrap;}
.sl-tag svg{width:12px;height:12px;}
button.sl-tag{cursor:pointer;font-family:inherit;}
button.sl-tag.on{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--primary-dark);}
.sl-pill{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;
  border:1px solid var(--border);background:var(--card);font-size:12px;font-weight:600;
  color:var(--neutral-ink);cursor:pointer;white-space:nowrap;font-family:inherit;}
.sl-pill:hover{background:var(--hover);}
.sl-pill[aria-pressed="true"]{background:var(--primary-soft);border-color:var(--primary-soft);color:var(--primary-dark);}
.sl-pill-n{min-width:18px;height:18px;border-radius:9px;padding:0 5px;font-size:10.5px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;background:var(--track);color:var(--neutral-ink);}
.sl-pill[aria-pressed="true"] .sl-pill-n{background:var(--primary);color:var(--on-accent);}
.sl-seg{display:inline-flex;border:1px solid var(--border);border-radius:10px;background:var(--card);
  padding:2px;gap:2px;flex-wrap:wrap;}
.sl-seg button{height:30px;display:inline-flex;align-items:center;gap:6px;padding:0 10px;border:none;
  border-radius:8px;background:transparent;font-size:12px;font-weight:600;color:var(--neutral-ink);
  cursor:pointer;white-space:nowrap;font-family:inherit;}
.sl-seg button svg{width:12px;height:12px;}
.sl-seg button[aria-pressed="true"], .sl-seg button[aria-checked="true"]{background:var(--primary-soft);color:var(--primary-dark);}
.sl-echip{height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);
  font-size:12px;font-weight:600;color:var(--text);cursor:pointer;font-family:inherit;}
.sl-echip:hover{background:var(--hover);}
.sl-echip[aria-checked="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-accent);}
.sl-echip.danger{color:var(--red-dark);}
.sl-echip.danger[aria-checked="true"]{background:var(--red);border-color:var(--red);color:var(--on-accent);}
.sl-switch{width:36px;height:20px;border-radius:10px;background:var(--dim);border:none;position:relative;
  padding:0;cursor:pointer;flex-shrink:0;}
.sl-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:var(--card);transition:left .15s;}
.sl-switch[aria-checked="true"]{background:var(--primary);}
.sl-switch[aria-checked="true"]::after{left:18px;}
.sl-switch[disabled]{opacity:.5;cursor:not-allowed;}
.sl-cchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--card);
  border-radius:8px;padding:3px 10px 3px 4px;font-size:11.5px;font-weight:600;white-space:nowrap;}
.sl-cicon{width:20px;height:20px;border-radius:6px;color:var(--on-accent);font-size:8.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ---- pannello della trattativa ---- */
.sl-dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.sl-dlg-head h2{margin:0;}
.sl-dtabs{display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;margin-bottom:16px;}
.sl-dtabs button{border:none;background:none;padding:11px 10px;font-size:12.5px;font-weight:600;
  color:var(--neutral-ink);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;
  margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px;font-family:inherit;}
.sl-dtabs button:hover{color:var(--text);}
.sl-dtabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--primary);}
.sl-drawerbody{padding-bottom:10px;}

/* ---- preventivi ---- */
.sl-qlayout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start;}
.sl-qlist{position:sticky;top:12px;max-height:calc(100vh - 140px);overflow-y:auto;padding:12px 10px;}
.sl-qitem{display:flex;flex-direction:column;gap:5px;padding:11px 12px;border-radius:10px;
  border:1px solid transparent;cursor:pointer;text-align:left;background:transparent;width:100%;
  color:inherit;font-family:inherit;font-size:12.5px;}
.sl-qitem:hover{background:var(--hover);}
.sl-qitem.on{background:var(--primary-tint);border-color:var(--primary-mid);}
.sl-qhead{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.8fr);gap:12px;}
.sl-readfield{height:36px;display:flex;align-items:center;border:1px solid var(--border);border-radius:10px;
  padding:0 11px;background:var(--card);font-size:13px;}
.sl-vpill{height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--border);background:var(--card);
  font-size:11.5px;font-weight:700;color:var(--neutral-ink);cursor:pointer;white-space:nowrap;font-family:inherit;}
.sl-vpill[aria-pressed="true"]{background:var(--inverse);border-color:var(--inverse);color:var(--on-inverse);}
.sl-cellin{width:74px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--field);
  padding:0 8px;text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--text);font-family:inherit;}
.sl-celltxt{border:1px solid transparent;border-radius:7px;background:transparent;font-weight:600;
  padding:3px 6px;min-width:0;flex:1;width:200px;color:var(--text);font-family:inherit;font-size:12.5px;}
.sl-celltxt:hover:not(:disabled){border-color:var(--border);}
.sl-cellin:focus, .sl-celltxt:focus{outline:2px solid var(--primary);outline-offset:0;background:var(--card);}
.sl-cellin:disabled, .sl-celltxt:disabled{background:transparent;border-color:transparent;}
.sl-forfait{font-size:18px;font-weight:700;height:44px;}
.sl-unit{font-size:10.5px;color:var(--neutral-ink);margin-top:3px;text-align:right;}
.sl-eco{border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;background:var(--card);
  margin-bottom:16px;}
.sl-ecogrid{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:20px;margin-top:8px;}
.sl-ecorow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;font-size:12.5px;}
.sl-ecototal{border-top:1px solid var(--border);margin-top:4px;padding-top:10px;}
.sl-marginpct{font-size:32px;font-weight:800;letter-spacing:-.8px;line-height:1;}
.sl-tick{position:absolute;top:0;bottom:0;width:1px;background:var(--card);}
.sl-ticks{position:relative;height:12px;font-size:10px;color:var(--neutral-ink);}
.sl-ticks span{position:absolute;transform:translateX(-50%);}
.sl-mark{position:absolute;left:50%;top:-3px;width:2px;height:14px;background:var(--text);}

/* ---- Preventivo: le misure che stavano nel markup ---- */
.sl-qtop{align-items:flex-start;}
.sl-qnum{margin:0;font-size:18px;}
.sl-qvers{gap:4px;margin-left:4px;}
.sl-qsub{margin-top:5px;}
.sl-qlisttop{gap:6px;padding-bottom:10px;}
.sl-qaz{font-size:13.5px;}
.sl-qwarn{gap:5px;}
.sl-qnone{padding:10px 4px;}
.sl-qactcol{width:36px;}
.sl-qtot{padding:12px 4px 0;}
.sl-qtotnum{font-size:14px;}
.sl-qnorows{padding:26px;}
.sl-qorigin{margin-top:8px;}
.sl-qeur{font-size:18px;}
.sl-qgrand{font-size:20px;}

/* ---- Preventivo: il riquadro dell'economia ---- */
.sl-ecomargin{font-size:15px;}
.sl-ecogauge{gap:8px;justify-content:center;}
.sl-ecobar{height:8px;position:relative;}
.sl-ratebar{height:8px;position:relative;overflow:visible;}
.sl-ecomsg{margin-top:6px;}
.sl-ecorate{text-align:center;margin-top:4px;}
.sl-ecofoot{align-items:center;}
.sl-at15{left:15%;}
.sl-at25{left:25%;}

/* Il tono del margine — sano, da guardare, brutto — e' un dato solo, e
   prima diventava quattro colori composti a mano dentro al markup: il
   bordo, la percentuale, la barra e la frase sotto. Adesso si dice una
   volta sulla sezione, e le quattro cose lo leggono da li'. Le due
   varianti in tensione portano il bordo colorato; quella sana tiene
   quello di tutte le altre schede, perche' un riquadro sano non deve
   farsi notare. */
.sl-eco-ok{--sl-tone:var(--primary);--sl-tone-ink:var(--primary-dark);}
.sl-eco-warn{--sl-tone:var(--amber);--sl-tone-ink:var(--amber-dark);border-color:var(--sl-tone);}
.sl-eco-bad{--sl-tone:var(--red);--sl-tone-ink:var(--red-dark);border-color:var(--sl-tone);}
.sl-eco .sl-marginpct, .sl-eco .sl-ecomsg{color:var(--sl-tone-ink);}
.sl-ecobar .sl-fill{background:var(--sl-tone);}

/* ---- outreach ---- */
.sl-outgrid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px;align-items:start;}
.sl-qrow{border-top:1px solid var(--border);padding:12px 4px;font-size:12.5px;}
.sl-qrow:first-of-type{border-top:none;}
.sl-qrow.open{background:var(--field);border:1px solid var(--primary-mid);border-radius:12px;padding:14px;margin:6px 0;}
.sl-esito{margin-top:14px;padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px;}

/* ---- responsive ---- */
@media (max-width:1280px){
  .sl-qhead{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sl-qhead .form-row:last-child{grid-column:1/-1;}
  .sl-ecogrid{grid-template-columns:minmax(0,1fr);}
  .sl-cgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:1100px){
  .sl-gobj, .sl-gobj.rev, .sl-outgrid, .sl-qlayout, .sl-grid2{grid-template-columns:minmax(0,1fr);}
  .sl-qlist{position:static;max-height:none;}
}
@media (max-width:760px){
  .sl-kv{grid-template-columns:minmax(0,1fr);}
  .sl-board{grid-template-columns:repeat(5,minmax(250px,80vw));scroll-snap-type:x mandatory;}
  .sl-col{scroll-snap-align:start;}
  .sl-hbar, .sl-fn{grid-template-columns:110px minmax(0,1fr) 28px;}
  .sl-search{width:100%;}
  .sl-bars, .sl-barlabels{gap:6px;}
}

/* ---- Panoramica: le misure che stavano nel markup ---- */
.sl-outof{font-size:14px;}
.sl-goal-closed{background:var(--primary);}
.sl-goal-closing{background:var(--primary-mid);}
.sl-key-closed{background:var(--primary);}
.sl-key-closing{background:var(--primary-mid);}
.sl-emptypad{padding:22px;}
.sl-emptypad-lg{padding:26px;}
.sl-fncap{display:block;}
.sl-fntrack{height:22px;border-radius:7px;}
.sl-fntrack .sl-fill{border-radius:7px;}
.sl-barnum{font-size:12px;}
.sl-fill-dim{background:var(--dim);}

/* La scala dell'imbuto: piu' la fase e' avanzata, piu' la barra e' piena.
   Prima era un'opacita' calcolata dall'indice della riga e scritta nel
   markup — ma l'indice e' gia' la posizione della riga, e contarla il CSS
   lo sa fare da solo. */
.sl-fn:nth-of-type(1) .sl-fill{opacity:.45;}
.sl-fn:nth-of-type(2) .sl-fill{opacity:.59;}
.sl-fn:nth-of-type(3) .sl-fill{opacity:.73;}
.sl-fn:nth-of-type(4) .sl-fill{opacity:.87;}
.sl-fn:nth-of-type(n+5) .sl-fill{opacity:1;}

/* ---- Trattative: le misure che stavano nel markup ---- */
/* `color` si eredita gia' calcolato: dentro a una riga tenue il colore del
   testo normale va rimesso, non basta non dire niente. */
.sl-ink{color:var(--text);}
.sl-rowcenter{justify-content:center;gap:8px;}
.sl-rowend{justify-content:flex-end;}
.sl-svcmax{max-width:220px;}
.sl-nextcol{min-width:240px;}
.sl-dealname{margin:8px 0 0 0;font-size:18px;}
.sl-v-big{font-size:18px;}
.sl-count{font-size:18px;}
.sl-actbody{margin-top:6px;line-height:1.5;}

/* ---- Chiamate: gli esiti hanno tre tinte, non di piu' ---- */
.sl-out-interested .sl-fill{background:var(--primary);}
.sl-out-doNotCall .sl-fill{background:var(--red);}
.sl-out-other .sl-fill{background:var(--dim);}
.sl-outcol{min-width:200px;}
.sl-outsub{margin-top:2px;}
.sl-outnext{max-width:240px;}
.sl-dlgtitle{margin:0;}
.sl-v-17{font-size:17px;}
.sl-checkrow{gap:7px;margin-bottom:16px;cursor:pointer;}
.sl-cellin-wide{width:100px;}
.sl-cellin-pct{width:74px;}
.sl-cicon{background:var(--tint,var(--primary));}
.sl-riskwhy{margin-top:4px;max-width:180px;}
.sl-upsrow{gap:4px;max-width:250px;}
.sl-renewsub{margin-top:3px;max-width:620px;}