/*
  sales-first.css — Superagentsss · CORSIA SAG-011B
  Il sistema visivo delle DUE superfici di vendita: la board e la scheda lead.

  PERCHE ESISTE QUESTO FILE, e perche e un file e non venti modifiche sparse.
  Il 9/9/2026 il BOSS ha riaperto il prodotto e ha detto due cose precise: la
  board "sembra una lista di server, e deprimente", e la scheda del contatto "e
  vuota, e le informazioni utili sono nascoste dietro le tendine". Guardando lo
  scatto si vede che aveva ragione su un difetto STRUTTURALE, non cromatico:
  ogni colonna era un contenitore con fondo, bordo, angoli e ombra, e dentro
  c'erano card che erano a loro volta contenitori con fondo, bordo, angoli e
  ombra. Tre navy vicinissimi (#07111F pagina, #0A192E colonna, #0E1F38 card)
  impilati uno dentro l'altro: e esattamente il linguaggio visivo di un
  cruscotto di macchine, dove ogni riquadro e un nodo uguale all'altro.

  LA MOSSA CHE CAMBIA TUTTO E UNA SOLA: la colonna smette di essere una scatola.
  Perde fondo, bordo, angoli, ombra e striscia colorata in testa, e resta quello
  che e davvero, cioe una lista con un'intestazione. Cosi il salto di superficie
  che prima si consumava fra colonna e card (due navy quasi uguali) si consuma
  fra PAGINA e card, che e un salto vero e si vede. Le card diventano gli unici
  oggetti sollevati della board: smettono di sembrare nodi in un rack e
  cominciano a sembrare persone su un tavolo.

  Il resto segue da li: il nome sale, il valore scende dove ha un contesto, la
  prossima azione diventa la seconda testata, la salute passa da pastiglia piena
  ad anello, i due tasti prendono il loro nome, e il fianco della card porta il
  filo dell'urgenza.

  ARCHITETTURA. Caricato per ULTIMO (dopo immersive.css), tocca solo `.sa-card`,
  `.sa-stage` e le superfici della scheda lead. Non ridefinisce i token del tema
  ne tocca le altre viste: Oggi, Lista, Rubrica, Calendario e Impostazioni
  restano com'erano. Le variabili sono locali (--sf-*) per non collidere.
*/

/* ==========================================================
   0. LE VARIABILI DELLA CORSIA
   ========================================================== */

:root {
  /* Le tre elevazioni, dichiarate una volta. In chiaro il fondo e la carta e la
     card e bianca; in scuro il fondo e l'ink e la card e il navy rialzato. */
  --sf-ground: var(--sa-bg);
  /* LA CARD SI ALZA DI TONO, e non e un vezzo: su un fondo scuro un'ombra
     scura non si vede quasi, quindi la leva vera del rilievo non e l'ombra ma
     il SALTO DI LUMINOSITA fra il piano e l'oggetto. Sei per cento di bianco
     nel navy della scheda: la card resta la stessa famiglia di colore (niente
     tema nuovo, niente vista che cambia altrove, perche il token globale non si
     tocca) e comincia a sembrare piu vicina alla luce. */
  --sf-card: color-mix(in srgb, var(--sa-surface) 94%, #FFFFFF);
  --sf-card-hover: color-mix(in srgb, var(--sa-surface-3) 94%, #FFFFFF);

  /* SEMANTICI, tre e non di piu. Il rosso vale per il RITARDO, mai per un
     punteggio basso: un lead con salute 38 non e un errore, e un lead da
     lavorare, e dipingerlo di rosso insegna a ignorare il rosso. */
  --sf-ritardo: var(--sa-danger, #FF5D73);
  --sf-oggi: var(--sa-stage-3-accent, #FFB84D);
  --sf-bene: var(--sa-stage-2-accent, #24BF84);
  --sf-neutro: var(--sa-text-3);

  /* LA PERCENTUALE DELLA BARRA DELLA SALUTE. La scrive il JS sull'elemento
     (style="--sa-salute:86"); qui c'e il valore di partenza, perche un token
     usato e mai dichiarato e un token che nessuno puo trovare leggendo il CSS
     (reperto della guardia del contratto visivo, punto 1). */
  --sa-salute: 0;

  /* TRE GRADINI NUOVI della scala tipografica, e sono gradini VERI, non
     eccezioni: 22 e il nome della lead nella scheda (fra i 20 e i 24 esistenti),
     12,5 e il metadato secondario della card, 11,5 il terziario. Stanno qui e
     non in design-tokens.css perche nascono con queste due superfici; se un
     domani servono altrove, si promuovono al foglio dei token.
     Sotto gli 11px non si scende: e il minimo del sistema, ed e la legge del
     BOSS sulle scritte microscopiche. Le tre misure che in prima stesura erano
     9,5 / 10 / 10,5 (sigla del proprietario, etichette maiuscole, numero
     dell'anello) sono state ALZATE a 11, non tokenizzate. */
  --sa-fs-22: 22px;
  --sa-fs-12-5: 12.5px;
  --sa-fs-11-5: 11.5px;

  /* Misure della card: dichiarate qui perche vengono citate in piu punti. */
  --sf-card-r: 10px;
  --sf-card-pad-y: 11px;
  --sf-card-pad-x: 13px;
  --sf-card-gap: 13px;
  --sf-filo: 3px;
}

/* ==========================================================
   1. LA COLONNA NON E PIU UNA SCATOLA
   ========================================================== */

/* Questa e la regola centrale della corsia. Tutto il resto e conseguenza. */
.sa-stage {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  padding: 0 2px;
}

/* La striscia colorata in testa alla colonna era il tratto piu "rack" di tutti:
   cinque colonne, cinque barre accese, nessuna gerarchia fra loro. L'identita
   dello stadio resta, ma la porta il pallino accanto al nome, che e piccolo e
   non compete col contenuto. */
.sa-stage--1,
.sa-stage--2,
.sa-stage--3,
.sa-stage--4,
.sa-stage--5 { border-top: none; }

/* L'intestazione perde il fondo pieno e tiene un filo sotto: resta appiccicata
   in alto quando si scorre, che e cio che serve davvero. */
.sa-stage__header {
  background: var(--sf-ground);
  border-bottom: 1px solid var(--sa-border);
  padding: 8px 4px 8px 2px;
  margin-bottom: 12px;
}

.sa-stage__name {
  font-size: var(--sa-fs-13);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Il conteggio smette di essere una pastiglia piena colorata (era un secondo
   oggetto acceso in ogni intestazione) e diventa un numero. Il valore totale
   della colonna resta, e ora si legge in cifre tabellari. */
.sa-stage__count {
  background: none !important;
  color: var(--sa-text-3) !important;
  font-weight: 600;
  padding: 0 2px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.sa-stage__value {
  color: var(--sa-text-2);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Il drag-over non dipinge piu tutta la colonna: si accende la zona di posa. */
.sa-stage.is-drag-over {
  background: color-mix(in srgb, var(--sa-accent) 7%, transparent);
  border-radius: 12px;
  box-shadow: none;
  border: none;
}

.sa-stage__list {
  display: flex;
  flex-direction: column;
  gap: var(--sf-card-gap);
  padding: 0;
  background: transparent;
}

/* Il vuoto e una riga di testo, non un riquadro tratteggiato grande come una
   card: un contenitore vuoto grande quanto un contenuto pieno e una promessa
   mancata disegnata in grande. */
.sa-stage__add {
  border: none;
  background: none;
  color: var(--sa-text-3);
  font-size: var(--sa-fs-12);
  text-align: left;
  padding: 8px 2px;
  min-height: 32px;
  border-radius: 8px;
}
.sa-stage__add:hover {
  color: var(--sa-text);
  background: var(--sa-surface-3);
}

/* ==========================================================
   2. LA CARD: QUATTRO RIGHE, NIENTE BORDO, UN FILO SUL FIANCO
   ========================================================== */

.sa-card {
  position: relative;
  background: var(--sf-card);
  border: none;
  border-radius: var(--sf-card-r);
  padding: var(--sf-card-pad-y) var(--sf-card-pad-x);
  /* PROFONDITA, SECONDA STESURA (il BOSS: "sembra tutto piatto").
     La prima era troppo timida: un filo di luce al 7% e due ombre corte, su un
     fondo scuro, semplicemente non si vedono. Un oggetto sembra POSATO quando
     porta addosso quattro cose insieme, e servono tutte e quattro:
       1. LUCE IN ALTO: un filo chiaro sul bordo superiore, la riga che la luce
          lascia sullo spigolo di un oggetto;
       2. SPESSORE IN BASSO: un filo scuro sul bordo inferiore, cioe il fianco
          che non prende luce. Senza, la card resta una decalcomania;
       3. OCCLUSIONE: un'ombra corta e stretta subito sotto, il buio che resta
          intrappolato fra l'oggetto e il piano;
       4. OMBRA PORTATA: una lunga e morbida, piu in basso, che dice quanto e
          sollevato.
     Piu una velatura verticale minima sul fondo della card. Non e decorazione
     ed e la ragione per cui non viola il divieto del BOSS sui gradienti: e la
     stessa luce del punto 1 che scivola sulla superficie, tre per cento in
     cima e sei in meno in fondo. Non si legge come gradiente, si legge come
     volume. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sf-card) 97%, #FFFFFF) 0%,
      var(--sf-card) 52%,
      color-mix(in srgb, var(--sf-card) 94%, #000000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 1px 1px rgba(2, 8, 20, 0.55),
    0 4px 9px -3px rgba(2, 8, 20, 0.58),
    0 16px 32px -12px rgba(2, 8, 20, 0.72);
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  /* LA CARD NON SI COMPRIME. `.sa-stage__list` e una colonna flex con un tetto
     d'altezza (layout.css) e scorrimento proprio: senza questa riga i figli
     prendono il `flex-shrink: 1` predefinito, quindi quando le card non ci
     stanno il browser le SCHIACCIA invece di far scorrere la lista, e con
     `overflow: hidden` la parte schiacciata sparisce senza lasciare traccia.
     Misurato prima del rimedio: card alta 31px con 128px di contenuto dentro,
     cioe nome visibile e le altre tre righe tagliate via. Il difetto era gia
     latente con la card a due righe (bastava una colonna lunga); la card a
     quattro righe lo ha reso la regola invece che l'eccezione. */
  flex-shrink: 0;
}

/* IL FILO DI URGENZA SUL FIANCO: TOLTO (ordine del BOSS, 9/9).
   "Non capisco le barre rosse sui lati, sono fastidiose." Aveva ragione, ed e
   un errore di progetto mio, non un gusto suo: su una board vera la maggior
   parte delle lead E in ritardo, quindi il filo finiva su quasi ogni card. Un
   segnale che compare quasi sempre non segnala piu niente, e diventa proprio
   la cosa che questa corsia stava smontando: un muro uniforme, solo di un
   altro colore. Nel referto avevo perfino scritto che il rischio c'era, e l'ho
   lasciato in piedi lo stesso: la prova era negli scatti, bastava guardarla.
   L'urgenza non si perde, perche era gia detta due volte e meglio: la riga 3 la
   scrive a parole e in rosso ("In ritardo di 3 giorni"), e la colonna e
   ORDINATA per urgenza, quindi chi ha bisogno sta in cima. Resta solo l'accento
   discreto sul tasto Chiama della lead in ritardo.
   Le classi --u0/--u1 e `data-urgenza` RESTANO: sono il dato con cui si ordina
   e con cui si prova la corsia. A sparire e il colore, non l'informazione. */

/* Al passaggio la card si SOLLEVA: un pixel di salita e un'ombra piu lunga.
   E il gesto che dice "questo oggetto si puo prendere in mano". */
.sa-card:hover {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--sf-card-hover) 96%, #FFFFFF) 0%,
      var(--sf-card-hover) 52%,
      color-mix(in srgb, var(--sf-card-hover) 94%, #000000) 100%);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 2px 2px rgba(2, 8, 20, 0.55),
    0 8px 16px -4px rgba(2, 8, 20, 0.62),
    0 26px 46px -14px rgba(2, 8, 20, 0.78);
}

.sa-card:focus-visible {
  outline: 2px solid var(--sa-border-focus);
  outline-offset: 2px;
}

.sa-card.is-dragging {
  box-shadow: var(--sa-shadow-drag);
  border-color: transparent;
}

.sa-card__riga { align-items: center; }

/* --- RIGA 1: salute, nome, proprietario --- */
.sa-card__riga--identita {
  display: flex;
  gap: 9px;
  margin-bottom: 0;
  min-height: 22px;
}

/* IL NOME E LA TESTATA. E l'unica cosa a 15px e a piena luce sulla card: tutto
   il resto e sotto. Prima nome e valore erano due grassetti affiancati, cioe
   due testate, cioe nessuna. */
.sa-card__name {
  font-size: var(--sa-fs-15);
  font-weight: 600;
  color: var(--sa-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-card__owner {
  width: 22px; height: 22px;
  font-size: var(--sa-fs-11);
  font-weight: 600;
  flex-shrink: 0;
}

/* --- LA BARRA DELLA SALUTE: il consuntivo, in fondo alla card --- */
/*
  PERCHE UNA BARRA E NON PIU UN NUMERO IN UN ANGOLO (richiesta del BOSS, 9/9).
  Due numeri si confrontano leggendoli; due barre si confrontano con la coda
  dell'occhio. Su una colonna di venti lead e la differenza fra scorrere e
  leggere. Il numero resta accanto: la regola di casa e "mai il colore da
  solo", e chi non distingue i colori legge le cifre.

  I TONI SONO QUELLI DEL MOTORE, e questa e una correzione di un difetto mio:
  la prima stesura di questo foglio verniciava classi che non esistono
  (--sana, --attenzione, --rischio) mentre `followupProgressClient` emette
  `verde`, `giallo`, `arancio`, `rosso`. Nessuna combaciava, quindi ogni anello
  usciva del colore di ripiego e la board mostrava venti cerchi identici: il
  colore diceva zero, e non si vedeva perche un grigio uniforme sembra una
  scelta. Adesso le quattro fasce sono quelle vere.
*/
.sa-card__riga--salute {
  display: block;
  margin-top: 3px;
  padding-left: 0;
}

/* L'ORDINE VIENE DAL RIFERIMENTO indicato dal BOSS (il sito di SuperAgentss):
   la barra corre per tutta la larghezza e la cifra chiude a DESTRA. Li e su due
   righe perche la card e grande; qui si comprime in una riga sola, perche una
   card di board ne ha quattro sopra e non puo spenderne due per un numero. */
/* LA SPECIFICITA, DI NUOVO, e vale la pena scriverlo perche e la seconda volta
   in questa corsia. La pastiglia vecchia e dipinta da `.sa-card
   .sa-card__salute` (0,2,0), che le da larghezza FISSA 26px, altezza 20px,
   `display:inline-flex` e il fondo della fascia. Una regola di classe sola
   (0,1,0) perde comunque, anche caricata dopo: misurato, la barra usciva larga
   26px con la pista a ZERO, cioe restava la pastiglia di prima col numero
   dentro. Qui si pareggia il peso e si AZZERA esplicitamente cio che quella
   regola imponeva, invece di sperare che non serva. */
.sa-card .sa-card__barra {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  height: auto;
  flex: 1 1 auto;
  padding: 3px 0 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-sizing: border-box;
}
/* Le quattro fasce non devono piu dipingere il FONDO dell'elemento: il colore
   della fascia adesso vive nel riempimento della barra, non dietro il numero. */
.sa-card .sa-card__salute--verde,
.sa-card .sa-card__salute--giallo,
.sa-card .sa-card__salute--arancio,
.sa-card .sa-card__salute--rosso {
  background: none;
  border-color: transparent;
}

.sa-card .sa-card__barra-n {
  order: 2;
  font-size: var(--sa-fs-11);
  font-weight: 700;
  color: var(--sa-text-2);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  min-width: 20px;
  text-align: right;
  flex-shrink: 0;
}

/* La pista e il pieno: la lunghezza e il dato, il colore e la fascia. */
.sa-card .sa-card__barra-pista {
  order: 1;
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sa-text-3) 20%, transparent);
  overflow: hidden;
}

.sa-card__barra-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--sa-salute, 0) * 1%);
  border-radius: 999px;
  /* IL GRADIENTE E QUELLO DEL RIFERIMENTO: parte dall'electric del marchio e
     arriva al colore della FASCIA. Da vicino si legge la sfumatura, da lontano
     si legge dove finisce, che e il dato. Cosi la stessa barra dice due cose
     con un colpo d'occhio: quanto e lunga (il punteggio) e di che colore
     chiude (in che stato e). */
  background: linear-gradient(90deg,
    var(--sa-electric, var(--sa-accent)) 0%,
    var(--sf-salute) 100%);
  transition: width 320ms var(--sa-ease, ease);
  --sf-salute: var(--sf-neutro);
}

/* LE QUATTRO FASCE VERE del motore. */
.sa-card__salute--verde   .sa-card__barra-fill { --sf-salute: var(--sf-bene); }
.sa-card__salute--giallo  .sa-card__barra-fill { --sf-salute: var(--sf-oggi); }
.sa-card__salute--arancio .sa-card__barra-fill { --sf-salute: var(--sa-stage-3-accent, #FFB84D); }
.sa-card__salute--rosso   .sa-card__barra-fill { --sf-salute: var(--sf-ritardo); }

/* Il numero prende la tinta della fascia solo quando la lead e messa male:
   sul resto resta terziario, per non accendere una cifra su ogni card. */
.sa-card .sa-card__salute--rosso .sa-card__barra-n { color: var(--sf-ritardo); }

.sa-card__barra:hover .sa-card__barra-pista {
  background: color-mix(in srgb, var(--sa-text-3) 34%, transparent);
}
.sa-card__barra:focus-visible {
  outline: 2px solid var(--sa-border-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sa-card__barra-fill { transition: none; }
}

/* --- RIGA 2: il contesto commerciale --- */
.sa-card__riga--contesto {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sa-card__contesto {
  font-size: var(--sa-fs-12-5);
  color: var(--sa-text-2);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-card__valore {
  font-size: var(--sa-fs-12-5);
  font-weight: 600;
  color: var(--sa-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- RIGA 3: la prossima azione, seconda testata --- */
.sa-card__riga--stato {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}

.sa-card__prossima {
  font-size: var(--sa-fs-13);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
}

.sa-card__prossima--inRitardo { color: var(--sf-ritardo); font-weight: 500; }
.sa-card__prossima--daContattare { color: var(--sf-oggi); font-weight: 500; }
.sa-card__prossima--programmata { color: var(--sa-text-2); font-weight: 400; }

.sa-card__ritardo { font-weight: 700; }

/* IL TASTO CHE HA PRESO IL POSTO DI "NESSUNA PROSSIMA AZIONE".
   Ghost: non deve gridare (sono molte lead), ma deve essere chiaramente una
   cosa che si preme, e non un'etichetta. */
.sa-card__pianifica {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--sa-text-3);
  font: inherit;
  font-size: var(--sa-fs-12-5);
  padding: 3px 7px 3px 0;
  margin: -3px 0;
  min-height: 24px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: color 140ms var(--sa-ease, ease), background 140ms var(--sa-ease, ease);
}
.sa-card__pianifica-piu {
  font-size: var(--sa-fs-14);
  line-height: 1;
  opacity: 0.75;
}
.sa-card__pianifica:hover {
  color: var(--sa-text);
  background: color-mix(in srgb, var(--sa-text-3) 14%, transparent);
  padding-left: 7px;
}
.sa-card__pianifica:focus-visible {
  outline: 2px solid var(--sa-border-focus);
  outline-offset: 1px;
  color: var(--sa-text);
}

/* --- RIGA 4: ultimo contatto e i due gesti --- */
.sa-card__riga--piede {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
}

.sa-card__tocco {
  font-size: var(--sa-fs-11-5);
  color: var(--sa-text-3);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sa-card__azioni {
  display: inline-flex;
  gap: 6px;
  flex-shrink: 0;
}

/* I DUE TASTI PORTANO IL LORO NOME. Prima erano due dischetti pieni, uno blu e
   uno verde, ripetuti identici su ogni card: erano la cosa piu accesa dello
   schermo e non dicevano cosa facevano. A riposo ora pesano meno del nome; il
   colore torna al passaggio del dito, dove serve a confermare il gesto. */
.sa-card__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: auto;
  height: auto;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sa-text-3) 15%, transparent);
  border: none;
  color: var(--sa-text-2);
  font-size: var(--sa-fs-12);
  font-weight: 500;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
  transition: background 140ms var(--sa-ease, ease), color 140ms var(--sa-ease, ease);
}
.sa-card__action-icona { font-size: var(--sa-fs-11); line-height: 1; }
.sa-card__action-testo { line-height: 1; }

/* LA SPECIFICITA SERVE, e va spiegata invece che subita. `immersive.css` dipinge
   le due varianti con `[data-theme="dark"] .sa-card__action-btn--primary`, che
   vale 0,2,0: una regola di classe sola (0,1,0) perde comunque, anche caricata
   dopo. Al primo giro reso e successo esattamente questo, e sulla board i due
   tasti restavano due dischi accesi, blu e verde, ripetuti su ogni card: la
   cosa piu vistosa dello schermo, sopra il nome della persona. Con
   `.sa-card__azioni .sa-card__action-btn--primary` si pareggia il peso (0,2,0)
   e vince l'ordine di caricamento, in TUTTI e due i temi invece che in uno. */
.sa-card__azioni .sa-card__action-btn {
  background: color-mix(in srgb, var(--sa-text-3) 15%, transparent);
  border: none;
  color: var(--sa-text-2);
}
.sa-card__azioni .sa-card__action-btn--primary {
  background: color-mix(in srgb, var(--sa-accent) 18%, transparent);
  border: none;
  color: var(--sa-accent-mid, var(--sa-accent));
}
/* Il colore pieno torna al passaggio del dito, dove conferma il gesto invece di
   gridarlo. */
.sa-card__azioni .sa-card__action-btn:hover,
.sa-card__azioni .sa-card__action-btn--primary:hover {
  background: var(--sa-accent);
  border: none;
  color: #FFFFFF;
}
.sa-card__azioni .sa-card__action-btn--wa:hover {
  background: var(--sa-wa-dark, #1FAE55);
  border: none;
  color: #FFFFFF;
}
.sa-card__action-btn:focus-visible {
  outline: 2px solid var(--sa-border-focus);
  outline-offset: 2px;
}

/* Una lead IN RITARDO ha il tasto Chiama piu carico: nella colonna e quella che
   chiede di essere premuta adesso. Non pieno pero, o si torna al muro di
   dischi accesi: un gradino sopra le altre, non una tinta piatta. */
.sa-card--u0 .sa-card__azioni .sa-card__action-btn--primary {
  background: color-mix(in srgb, var(--sa-accent) 40%, transparent);
  color: #FFFFFF;
}

/* --- LA CARD CHIUSA: una riga, piu quieta --- */
.sa-card--chiusa {
  background: color-mix(in srgb, var(--sf-card) 60%, var(--sf-ground));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(2, 8, 20, 0.40);
}
.sa-card--chiusa .sa-card__riga--identita { min-height: 0; }
.sa-card--chiusa:hover { background: var(--sf-card-hover); }

/* Il segno "segnalato dal master" resta, ma come segno e non come conteggio
   scritto: sulla card serve sapere CHE c'e, non quante volte. */
.sa-card__flag {
  font-size: var(--sa-fs-11);
  margin-right: 4px;
  color: var(--sf-oggi);
}
.sa-card--flagged { box-shadow: none; }

.sa-card__new {
  font-size: var(--sa-fs-11);
  letter-spacing: 0.06em;
  margin-right: 5px;
  vertical-align: 1px;
}

/* ==========================================================
   3. LA SCHEDA LEAD: SI VEDE CIO CHE SERVE PER LAVORARE
   ========================================================== */

/* L'EROE. Compatto: iniziali, nome, stato, e i tasti sulla stessa riga.
   Prima la testata si apriva con un numero di telefono e il nome viveva solo
   nella barra del titolo. */
.sa-zona1 {
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--sa-border);
}

.sa-zona1__testa {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.sa-zona1__avatar {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sa-accent) 22%, transparent);
  color: var(--sa-accent-mid, var(--sa-accent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sa-fs-15);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sa-zona1__chi { flex: 1; min-width: 0; }

.sa-zona1__nome {
  font-size: var(--sa-fs-22);
  font-weight: 600;
  color: var(--sa-text);
  margin: 0 0 3px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.sa-zona1__identita {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
}

.sa-zona1__recapiti { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.sa-zona1__recapito { font-size: var(--sa-fs-12-5); color: var(--sa-text-2); }
.sa-zona1__owner { font-size: var(--sa-fs-12-5); color: var(--sa-text-3); }

.sa-zona1__azioni {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sa-zona1__stato { margin-bottom: 12px; }

/* Il chip "Valore non indicato" spendeva una pastiglia per dire che non c'e un
   dato. Il valore, quando c'e, sta nella griglia dell'opportunita, dove ha
   accanto cio che lo spiega. */
.sa-zona1__chip--vuoto { display: none; }

/* IL CARTELLO DELLA PROSSIMA AZIONE: pieno, con il filo di stato sul fianco,
   la stessa grammatica della card. */
/* GRIGLIA, NON FLEX, e la ragione e misurata. Con `display:flex` +
   `flex-wrap` e un'etichetta a `width:100%`, i tre pezzi finivano sulla stessa
   linea di flex: l'etichetta ne prendeva 1084px e gli altri due partivano da
   677px, cioe l'informazione piu importante della scheda si leggeva a meta
   riga con un vuoto a sinistra. `justify-content: flex-start` era gia attivo e
   non bastava (misurato nel browser: risultava flex-start mentre il testo
   restava a 384px dal bordo). Due righe dichiarate tolgono l'ambiguita: sopra
   l'insegna, sotto l'atto, tutti e due ancorati a sinistra. */
.sa-zona1__prossima {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-items: start;
  text-align: left;
  gap: 3px 10px;
  background: var(--sf-card);
  border-left: var(--sf-filo) solid var(--sf-neutro);
  border-radius: 0 10px 10px 0;
  padding: 11px 14px;
}
.sa-zona1__prossima--ritardo { border-left-color: var(--sf-ritardo); }
.sa-zona1__prossima--vuota { border-left-color: var(--sf-neutro); }

.sa-zona1__etichetta {
  grid-column: 1 / -1;
  font-size: var(--sa-fs-11);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sa-text-3);
  margin: 0;
}
.sa-zona1__quando {
  grid-column: 1;
  font-size: var(--sa-fs-15);
  font-weight: 600;
  color: var(--sa-text);
  line-height: 1.3;
}
/* Il ritardo e la spiegazione stanno SOTTO l'atto, a sinistra: sono la
   postilla dell'atto, non una colonna a se. */
.sa-zona1__ritardo { grid-column: 1; color: var(--sf-ritardo); font-weight: 700; font-size: var(--sa-fs-13); }
.sa-zona1__spiega { grid-column: 1; font-size: var(--sa-fs-12); color: var(--sa-text-3); }
/* Il tasto occupa la seconda colonna e resta in fondo a destra: e l'unico
   elemento del cartello che si preme. */
.sa-zona1__pianifica { grid-column: 2; grid-row: 2; justify-self: end; }

/* --- LE SEZIONI VISIBILI --- */
/* Nessun riquadro dentro il riquadro: la sezione e un titolo, un filo, e il
   contenuto. Il pannello e gia una superficie: rimetterne una dentro era il
   "boxes-within-boxes" che rendeva tutto uguale a tutto. */
.sa-sez {
  margin-bottom: 22px;
}

.sa-sez__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sa-border);
}

.sa-sez__titolo {
  font-size: var(--sa-fs-11);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sa-text-3);
  margin: 0;
}

/* IL TITOLO NON SI DICE DUE VOLTE. I renderer riusati (`renderNotesSection`,
   `renderTasksSection`, `renderFactsSection`) portano gia dentro la loro
   intestazione: fino a ieri stavano dentro un <summary>, che il titolo lo
   metteva da se, quindi il doppione non si vedeva. Messi dentro una sezione
   aperta, la stessa parola compariva due volte di fila ("NOTE / NOTE",
   "PROFILO PERSONALE / PROFILO PERSONALE"). Si spegne quella interna: il
   contenuto e lo stesso, l'insegna la mette la sezione. Serve il DISCENDENTE e
   non il figlio: il titolo sta dentro `.sa-panel__section`, di un livello piu
   in giu, e col selettore di figlio la regola non toccava niente. */
.sa-sez__corpo .sa-panel__section-title:first-child,
.sa-sez__corpo > .sa-panel__section > .sa-panel__section-title:first-child,
.sa-sez__corpo > .sa-panel__section:first-child > .sa-panel__section-title { display: none; }
.sa-sez__corpo > .sa-panel__section:first-child { margin-top: 0; }
.sa-sez__corpo .sa-panel__section:first-child { margin-top: 0; }

/* La griglia dell'opportunita: etichetta piccola sopra, valore grande sotto,
   due per riga. Un valore commerciale si legge, non si cerca. */
.sa-griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}

.sa-griglia__cella { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.sa-griglia__et {
  font-size: var(--sa-fs-11);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sa-text-3);
}

.sa-griglia__val {
  font-size: var(--sa-fs-15);
  font-weight: 500;
  color: var(--sa-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.sa-griglia__val--vuoto { color: var(--sa-text-3); font-weight: 400; }

/* --- LE RIGHE DI RECAPITO: informazione con accanto il gesto --- */
.sa-rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 4px 0;
  border-bottom: 1px solid var(--sa-border);
}
.sa-rec:last-of-type { border-bottom: none; }

.sa-rec__val {
  font-size: var(--sa-fs-13);
  color: var(--sa-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-rec__et { font-size: var(--sa-fs-12-5); color: var(--sa-text-3); }
.sa-rec__azioni { display: inline-flex; gap: 6px; flex-shrink: 0; }
.sa-rec--nota { min-height: 32px; }
.sa-rec--nota .sa-rec__val { font-size: var(--sa-fs-12-5); color: var(--sa-text-2); }

/* Il titolo che apre la parte richiusa: dice che sotto c'e altro, e che e
   secondario. */
.sa-zona__titolo--secondari {
  margin-top: 26px;
  font-size: var(--sa-fs-11);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sa-text-3);
}

/* Le pieghe rimaste perdono il riquadro: restano una riga con la freccia. */
.sa-dett {
  background: none;
  border: none;
  border-bottom: 1px solid var(--sa-border);
  border-radius: 0;
}
.sa-dett__testa {
  padding: 11px 2px;
  min-height: 40px;
  font-size: var(--sa-fs-13);
  font-weight: 500;
}
.sa-dett__corpo { padding: 0 2px 14px; }

/* IL VUOTO NON E PIU UN CONTENITORE. Una riga, e dove ha senso un gesto. */
.sa-panel__empty {
  padding: 6px 0;
  font-size: var(--sa-fs-12-5);
  color: var(--sa-text-3);
  background: none;
  border: none;
  min-height: 0;
}

/* La cronologia perde i riquadri annidati: la voce e una riga con un filo. */
.sa-zona2 { margin-bottom: 0; }

/* ATTIVITA in colonna principale: le sue due insegne ("In programma" e
   "Cronologia") prendono la stessa voce delle sezioni sopra, cosi la colonna si
   legge come tre blocchi uguali invece che come due sezioni piu un pezzo con
   un'altra tipografia. */
.sa-panel__col--cronologia .sa-zona__titolo {
  font-size: var(--sa-fs-11);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sa-text-3);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sa-border);
  margin-bottom: 9px;
}
.sa-panel__col--cronologia .sa-zona__titolo--storia { margin-top: 22px; }

/* Il selettore di colonna e un'AZIONE, non un campo della griglia: si stacca. */
.sa-panel__stagepick {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--sa-border);
}
.sa-panel__stagepick label {
  font-size: var(--sa-fs-11);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sa-text-3);
  display: block;
  margin-bottom: 5px;
}

/* ==========================================================
   4. DESKTOP
   ========================================================== */

@media (min-width: 1100px) {
  /* La scheda si allarga: a 900px su un 1440 restavano 500px di board sfocata
     accanto a una colonna che non riusciva a tenere due colonne vere. */
  .sa-panel { width: min(1180px, 88vw); }
  /* 62 / 38, come da specifica: la colonna principale porta opportunita, note
     e attivita; la laterale porta cio con cui si agisce. */
  .sa-panel__cols { grid-template-columns: minmax(0, 0.62fr) minmax(0, 0.38fr); gap: 0 36px; }
}

/* ==========================================================
   5. MOBILE — non e il desktop rimpicciolito
   ========================================================== */

@media (max-width: 760px) {
  /* La card a tutta larghezza, e i due gesti diventano bersagli veri per il
     pollice: 40px, non 28. */
  .sa-card__action-btn { min-height: 40px; padding: 0 14px; font-size: var(--sa-fs-13); }
  .sa-card__action-icona { font-size: var(--sa-fs-13); }
  .sa-card__pianifica { min-height: 40px; font-size: var(--sa-fs-13); }
  .sa-card { padding: 12px 14px; }
  .sa-card__name { font-size: var(--sa-fs-15); white-space: normal; }
  .sa-card__riga--piede { flex-wrap: wrap; gap: 8px; }
  .sa-card__tocco { flex-basis: 100%; }

  /* La colonna occupa lo schermo: una alla volta, come si legge davvero. */
  .sa-stage__header { padding: 10px 2px; }

  /* La scheda diventa una colonna sola, nell'ordine della specifica. */
  .sa-panel__cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sa-zona1__testa { flex-wrap: wrap; }
  .sa-zona1__azioni { width: 100%; justify-content: flex-start; }
  .sa-zona1__nome { font-size: var(--sa-fs-20); }
  .sa-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .sa-rec { min-height: 48px; }
  .sa-rec__azioni .sa-btn { min-height: 40px; }
}

/* ==========================================================
   6. TEMA CHIARO — le stesse regole, i valori del tema
   ========================================================== */

[data-theme="light"] {
  /* In chiaro la card e bianca e il fondo e ghiaccio: il salto c'e gia. */
  --sf-card: var(--sa-surface);
  --sf-card-hover: var(--sa-surface-2);
}
[data-theme="light"] .sa-card { box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); }
[data-theme="light"] .sa-card:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10); }

/* ==========================================================
   7. CHI PREFERISCE MENO MOVIMENTO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .sa-card,
  .sa-card__action-btn,
  .sa-card__pianifica { transition: none; }
}