/* ============================================================
   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;}
/* **Andare a capo o stringersi sono due cose diverse.** `.sl-wrap` dice
   «vai a capo», ma un figlio che puo' stringersi si stringe **prima** di
   far andare a capo la riga: la legenda dell'obiettivo restava su una
   riga sola, si comprimeva sotto al suo contenuto e usciva di dodici
   pixel dalla scheda. Con `flex:0 0 auto` la misura naturale e' quella
   giusta, la riga non basta, e il capo si fa davvero. */
@media (max-width:640px){
  .sl-between.sl-wrap > *{flex:0 0 auto;}
}
.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;}

/* ============================================================
   SALES SU UN TELEFONO (640)

   Le soglie di sopra si fermano a 760. Da li' in giu' quattro cose.

   **La tabella delle trattative diventa una scheda per riga**, e la
   forma la da' `.table-cards` in `components.css` — la stessa dei
   Contatti. Qui non si strizzava di lato come li': si strizzava e basta,
   perche' una `<table>` senza larghezze minime **si restringe**, e
   «Pasticceria Rossi» andava a capo tre volte in una colonna da ottanta
   pixel. Il sintomo era diverso, il difetto lo stesso.

   **La riga di «Da fare oggi» si spezza in due.** Nome, cosa c'e' da
   fare e due pulsanti su una riga sola a trecentosettantacinque pixel
   vuol dire che i pulsanti si prendono meta' larghezza e il nome va a
   capo in mezzo. I pulsanti scendono sotto, allineati al testo e non
   all'icona: sono azioni su quella riga, e si vede da dove partono.

   **La bacheca non si tocca**: a 760 diventa gia' cinque colonne da
   ottanta per cento di finestra con lo scatto, cioe' una fase per volta.
   E' il modo giusto di leggere un imbuto su un telefono, e sotto ai 640
   non cambia niente.

   **Le griglie che erano ancora a due o a tre** — la testata di un
   preventivo, le sue quattro cifre — scendono a una.
   ============================================================ */
@media (max-width:640px){
  /* **Le sezioni vanno a capo, non scorrono.** Sono quattro o cinque
     parole corte: su un telefono la striscia ne mostrava tre e le altre
     restavano dietro a uno scorrimento orizzontale dentro a una
     pastigliera, che e' il gesto che nessuno prova. Due righe costano
     trenta pixel e le fanno vedere tutte. */
  .sl-tabs{display:flex;flex-wrap:wrap;width:100%;overflow-x:visible;}
  /* La riga di un'attivita': testo sopra, azioni sotto. Il rientro e'
     l'icona piu' la sua spaziatura, cosi' i pulsanti cominciano dove
     comincia il nome. */
  .sl-listrow{flex-wrap:wrap;align-items:flex-start;}
  /* **Una base del cento per cento piu' un margine fa il cento per cento
     piu' quel margine.** I bottoni della riga vanno a capo e si allineano
     sotto al testo, rientrati di ventisette pixel come l'icona: con
     `flex-basis:100%` quei ventisette si sommano alla larghezza piena e
     la riga esce dalla scheda. Il margine va tolto dalla base, non
     aggiunto accanto. */
  .sl-listrow > .sl-row{flex:1 0 calc(100% - 27px);margin-left:27px;}
  /* Le griglie rimaste. */
  .sl-cgrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sl-qhead{grid-template-columns:minmax(0,1fr);}
  .sl-bars,.sl-barlabels{gap:4px;}
  .sl-barlabels{font-size:10px;}

  /* ============================================================
     IL TELEFONO (`sales/mobile.js`)
     ============================================================ */
  /* Le sezioni nella testata, con il loro conto. */
  .sl-mseg a{display:inline-flex;align-items:center;gap:5px;text-decoration:none;}
  .sl-mseg-n{font-size:10.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;}
  .sl-mseg a.active .sl-mseg-n{color:var(--primary-dark);}

  /* ---- la trattativa: il pannello diventa uno schermo ----
     La freccia torna in alto a sinistra, dove si torna indietro in ogni
     app; «Modifica» resta in alto a destra; il nome scende sotto, grande.
     La fila dei due pulsanti si scioglie (`display:contents`) per far
     andare i due pezzi ai due capi. */
  .sl-dlg-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 8px;margin-bottom:12px;}
  .sl-dlg-head > .sl-grow{grid-row:2;grid-column:1/-1;}
  .sl-dlg-head > .sl-row{display:contents;}
  .sl-dclose{grid-row:1;grid-column:1;margin-left:-8px;color:var(--text);}
  .sl-dclose svg{width:22px;height:22px;}
  .sl-dlg-head > .sl-row > .btn{grid-row:1;grid-column:3;}
  .sl-dealname{font-size:22px;letter-spacing:-.4px;}
  /* Le sezioni come viste: un segmento, non tre linguette sottolineate. */
  .sl-dtabs{background:var(--track);border:0;border-radius:12px;padding:3px;gap:2px;margin-bottom:14px;}
  .sl-dtabs button{flex:1 0 auto;min-height:36px;border:0;border-radius:9px;margin:0;color:var(--neutral-ink);}
  .sl-dtabs button[aria-selected="true"]{background:var(--card);color:var(--text);box-shadow:var(--shadow);}
  /* I numeri della trattativa in un riquadro solo, due per riga. */
  .sl-drawerbody > .sl-kv{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--border);
    border-radius:14px;overflow:hidden;background:var(--card);}
  .sl-drawerbody > .sl-kv > div{padding:11px 13px;border-bottom:1px solid var(--border);min-width:0;}
  .sl-drawerbody > .sl-kv > div:nth-child(odd){border-right:1px solid var(--border);}
  .sl-drawerbody > .sl-kv > div:nth-last-child(-n+2){border-bottom:0;}
  .sl-drawerbody > .sl-kv .sl-k{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
  .sl-drawerbody > .sl-kv .sl-v{font-size:15px;font-weight:700;}
  .sl-drawerbody > .sl-kv .sl-v-big{font-size:19px;}

  /* ---- il preventivo aperto ---- */
  .sl-mquote{display:flex;flex-direction:column;gap:12px;}
  /* Il passo che si fa adesso, largo quanto lo schermo: e' la cosa per
     cui il preventivo si e' aperto. */
  .sl-mqstep{display:flex;gap:9px;}
  .sl-mqstep .btn{flex:1;min-height:48px;justify-content:center;border-radius:13px;font-size:14px;}
  .sl-mqdata .card-title{margin-bottom:10px;}
  .sl-mqdata .sl-qhead{gap:10px;}

  /* ---- le righe di un preventivo: tre tasselli per scheda ----
     La tabella diventa schede come tutte le altre (`.table-cards`, che
     scrive anche il nome di ogni colonna); qui si dispone la scheda come
     nel disegno: la voce in cima, quantita', ore e prezzo in tre
     tasselli, il totale a chiudere, il cestino nell'angolo. Le regole
     partono dall'id perche' devono passare sopra a quelle della scheda
     generica, che il browser legge prima. */
  #slRows tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
    padding:12px;margin-bottom:10px;border-radius:14px;}
  #slRows tbody td{min-width:0;padding:0;background:none;}
  #slRows tbody td:first-child{grid-column:1/-1;padding-right:38px;}
  #slRows tbody td[data-lab]{display:block;min-height:0;}
  #slRows tbody td[data-lab]::before{display:block;margin-bottom:3px;font-size:9.5px;letter-spacing:.04em;}
  #slRows tbody td:nth-child(2),#slRows tbody td:nth-child(3),#slRows tbody td:nth-child(4){padding:7px 9px;
    border:1px solid var(--border);border-radius:10px;background:var(--field);}
  #slRows tbody td[data-tot],#slRows tbody td[data-lab]:nth-child(6){grid-column:1/-1;display:flex;align-items:baseline;
    justify-content:space-between;gap:10px;flex-wrap:wrap;}
  #slRows tbody td[data-tot]{font-size:15px;padding-top:4px;}
  #slRows tbody td[data-tot]::before,#slRows tbody td[data-lab]:nth-child(6)::before{flex:none;margin:0;}
  #slRows tbody td:last-child:not([data-lab]){position:absolute;top:8px;right:8px;}

  /* ---- i rinnovi: una scheda per contratto (`slRinnovoCardTelefono`) ----
     La forma e' `.m-card` del vestito comune; qui il cliente in cima e
     gli upsell, che sul desktop hanno un tetto di colonna. */
  .sl-mlist{display:flex;flex-direction:column;gap:10px;}
  .sl-mlist > .m-card{margin:0;}
  .sl-mcli{display:flex;align-items:center;gap:8px;}
  .sl-mcli .sl-cicon{flex:none;}
  .sl-mren-t{display:block;font-size:14px;font-weight:600;line-height:1.3;overflow-wrap:anywhere;}
  .sl-mren-sub{margin:2px 0 0;font-size:12px;line-height:1.45;color:var(--muted);}
  .sl-mren-risk{margin:-2px 0 0;font-size:12px;}
  .sl-mren-l{margin:0 0 6px;font-size:12px;color:var(--muted);}
  .sl-mren .sl-upsrow{max-width:none;}
  .sl-mren-go{width:100%;min-height:42px;justify-content:center;}
}