/* ==========================================================================
   IL CRM NUOVO — foglio suo, come il file JavaScript.

   Non ci sono classi `crm-*` qui dentro: quelle sono del CRM vecchio, e
   riusarle vorrebbe dire che una modifica di la' cambia questa pagina senza
   che nessuno l'abbia chiesto. Prefisso `crmn-`.

   I colori sono quelli del portale (`--g-`), perche' la sezione e' nuova ma il
   portale e' lo stesso: tema chiaro, tavolozza di GRAFICA.md.
   ========================================================================== */

/* LA TESTATA DI UNA SCHERMATA. C'erano DUE regole `.crmn-testa` a un centinaio
 * di righe di distanza -- una a blocco e una a flex -- e vinceva la seconda:
 * il bordo inferiore e il margine della prima non arrivavano mai. Una sola. */
.crmn-testa {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--g-bordo);
}
.crmn-testa h2 {
  margin: 0 0 5px; font-size: var(--f-2xl); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.15;
}
.crmn-testa p {
  margin: 0; font-size: var(--f-base); line-height: 1.5;
  color: var(--g-testo-2); max-width: 74ch;
}
/* NIENTE MONO SUI GRASSETTI. La prima stesura mandava in monospaziato ogni
 * `<b>` della testata, per far risaltare i numeri dentro le frasi: a schermo
 * e' venuto fuori «il numero che conta e' quante restano» con DUE PAROLE in
 * mono, che sembrava un pezzo di codice. Il grassetto nel portale enfatizza
 * anche le parole, e una regola sul tag non sa distinguerle. I numeri che
 * vogliono la colonna la chiedono per nome: `.crmn-data`, `.crmn-num`,
 * `<time>`. */

.crmn-sez { margin-bottom: 24px; }
/* I titoli di sezione sono OCCHIELLI, non titoli: la schermata ha gia' il suo
 * titolo, e un secondo titolo grande dentro compete con quello. */
.crmn-sez h3 {
  margin: 0 0 9px; font-family: var(--g-mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  color: var(--g-testo-3);
}

/* LE DATE E I NUMERI, INCOLONNATI. Stessa regola del blocco BANCO del foglio
 * principale: con le cifre della stessa larghezza una colonna di date si legge
 * scorrendo l'occhio, e due scadenze si confrontano a vista invece che
 * leggendole. */
.crmn-guscio time, .crmn-data {
  font-family: var(--g-mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.crmn-lista { list-style: none; margin: 0 0 12px; padding: 0;
  border: 1px solid var(--g-bordo); border-radius: 10px; overflow: hidden; }
.crmn-lista li { display: flex; align-items: center; gap: 9px;
  padding: 8px 13px; font-size: 13px; background: var(--g-carta);
  border-top: 1px solid var(--g-bordo-tenue); }
.crmn-lista li:first-child { border-top: 0; }
.crmn-cosa { flex: 1; }
.crmn-stato { font-size: 11.5px; color: var(--g-testo-3); white-space: nowrap; }

/* IL PALLINO DICE SI' O NO, e il colore non basta da solo: chi non distingue
   il verde dal giallo legge comunque «c'e'» o «non c'e' ancora» accanto. */
.crmn-seg { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--g-bordo-forte); }
.crmn-lista li.si .crmn-seg { background: var(--g-ok); }
.crmn-lista li.no .crmn-seg { background: var(--g-attenzione-segno); }
.crmn-lista li.no .crmn-cosa { color: var(--g-testo-2); }

.crmn-manca { border: 1px solid var(--g-attenzione-segno);
  background: var(--g-attenzione-velo); color: var(--g-attenzione-testo);
  border-radius: 8px; padding: 11px 14px; font-size: 12.5px; max-width: 80ch; }
.crmn-manca b { color: var(--g-testo); }
.crmn-manca pre { margin: 8px 0; padding: 8px 10px; overflow-x: auto;
  background: var(--g-carta); border: 1px solid var(--g-bordo);
  border-radius: 6px; font-family: var(--g-mono); font-size: 11.5px;
  color: var(--g-testo); }

.crmn-nota {
  margin: 0 0 10px; font-size: var(--f-base); line-height: 1.55;
  color: var(--g-testo-2); max-width: 76ch;
}
.crmn-nota code, .crmn-testa code, .crmn-lista code {
  font-family: var(--g-mono); font-size: .9em; background: var(--g-carta-3);
  border: 1px solid var(--g-bordo); border-radius: 4px; padding: 0 4px; }

/* UN TOKEN CHE NON ESISTE, e per questo il CRM sembrava piatto (22/08).
 *
 * `--g-testo-tenue` era scritto TRENTADUE volte in questo foglio e tre nel
 * principale, e NON E' DEFINITO DA NESSUNA PARTE. Una variabile CSS che non
 * esiste non e' un errore: `color: var(--g-testo-tenue)` senza ripiego non
 * dipinge niente e il testo EREDITA il colore del padre. Risultato: tutte le
 * scritte che dovevano essere grigie -- etichette, citta', conteggi, note
 * sotto i titoli -- uscivano in inchiostro pieno, e la gerarchia fra
 * un'etichetta e il suo dato non e' mai esistita.
 *
 * E' anche il motivo per cui non si vedeva: nessuno cerca un colore che
 * SEMBRA giusto. Il token vero e' `--g-testo-3` (#6b6b66, 5,4:1 su bianco),
 * ed e' quello che usa il resto del portale.
 * ========================================================================== */

/* ==========================================================================
   IL RAIL E LE TRE AREE — riscritto il 2026-08-22.

   COSA NON ANDAVA. Due file di linguette orizzontali (otto voci sopra,
   quattordici sotto) e tutto dello stesso identico blu: Ricerca, Commerciale
   e Direzione — tre mestieri fatti da tre persone diverse — erano
   indistinguibili, e l'unico modo di sapere dove si era era leggere quale
   linguetta fosse accesa.

   LA TINTA DELL'AREA E' L'IDEA DI TUTTO IL BLOCCO. Ogni area porta un colore
   che attraversa il guscio: il marcatore nel rail, il filo del sottorail,
   l'occhiello sopra il titolo, il bottone principale. Non e' decorazione ed e'
   gia' il modo di ragionare del portale — «il colore identifica la sezione e
   non cambia mai, perche' dopo due settimane si va sul riquadro verde senza
   leggere» (home.py:56).

   E I TRE COLORI SONO UNA SCALA, non tre tinte a caso: ciano -> blu -> viola.
   Le tre aree sono una SEQUENZA vera — la ricerca passa l'appuntamento al
   commerciale, il commerciale passa la firma alla direzione — e una
   progressione di tinta racconta quel passaggio. Il viola alla direzione non e'
   una scelta nuova: `--g-viola-testo` nel foglio principale si chiama gia'
   cosi'.

   NIENTE COLORI NUOVI: sono le famiglie `--tessera-*` che il portale ha gia',
   scelte fra quelle che NON significano gia' uno stato — verde, ambra e rosso
   sono presi da ok / attenzione / errore, e riusarli qui vorrebbe dire che
   un'area intera sembra un avviso.
   ========================================================================== */
.crmn-guscio {
  --crmn-tinta: var(--tessera-grigio-2);
  --crmn-velo: var(--g-carta-3);
  display: grid; grid-template-columns: 224px minmax(0, 1fr); gap: 26px;
  align-items: start;
}
.crmn-guscio[data-area="ricerca"]     { --crmn-tinta: var(--tessera-ciano-2); --crmn-velo: #e7f3f6; }
.crmn-guscio[data-area="commerciale"] { --crmn-tinta: var(--g-blu-scuro);     --crmn-velo: var(--g-blu-velo); }
.crmn-guscio[data-area="clienti"]     { --crmn-tinta: var(--tessera-viola-2); --crmn-velo: #edecfa; }

.crmn-rail {
  position: sticky; top: 12px; display: flex; flex-direction: column; gap: 1px;
  border-right: 1px solid var(--g-bordo); padding-right: 14px;
  max-height: calc(100vh - 24px); overflow-y: auto;
}
/* L'OCCHIELLO: mono, maiuscolo, spaziato. E' l'unico posto del rail dove il
 * carattere cambia, e dice «qui comincia un'altra cosa» senza aggiungere una
 * riga di separazione. */
.crmn-rail-t {
  font-family: var(--g-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--g-testo-3);
  margin: 20px 0 6px 11px;
}
/* SI CHIAMA `crmn-stanza` E NON `crmn-area` per una ragione trovata a schermo:
 * `.crmn-area` esisteva gia' -- e' la pastiglia che nelle Impostazioni dice a
 * quale area appartiene una voce -- e le due regole si sono sovrapposte, con
 * la piu' in basso che vinceva. Le voci del rail sono uscite col bordo e il
 * fondo bianco di una pastiglia, cioe' otto campi di testo in colonna.
 *
 * E' lo stesso difetto delle due rotte «revisioni»: due cose diverse con lo
 * stesso nome, e chi arriva dopo non ha modo di accorgersene. */
.crmn-stanza {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: inherit; font-size: var(--f-base); font-weight: 500;
  padding: 8px 11px; border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--g-testo-2); cursor: pointer;
  position: relative;
}
.crmn-stanza:hover { background: var(--g-carta-3); color: var(--g-testo); }
/* IL MARCATORE E' UNA BARRA, non un fondo pieno e basta: la barra dice «sei
 * qui», un rettangolo colorato da solo si legge come un bottone premuto. */
.crmn-g.aperta > .crmn-stanza {
  background: var(--crmn-velo); color: var(--crmn-tinta); font-weight: 600;
}
.crmn-g.aperta > .crmn-stanza::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 0 2px 2px 0; background: var(--crmn-tinta);
}
.crmn-g-n {
  margin-left: auto; font-family: var(--g-mono); font-size: var(--f-xs);
  font-variant-numeric: tabular-nums; color: var(--g-testo-3);
}
.crmn-g.aperta .crmn-g-n { color: var(--crmn-tinta); opacity: .8; }

/* IL FILO DEL SOTTORAIL e' la firma di questo disegno: una linea nella tinta
 * dell'area che scende accanto alle sue schermate e ricompare nell'occhiello
 * del contenuto. Da qualunque punto della pagina, quel filo dice in quale
 * delle tre stanze si sta lavorando. */
.crmn-sotto {
  display: flex; flex-direction: column; gap: 1px;
  margin: 4px 0 10px 11px; padding-left: 11px;
  border-left: 2px solid color-mix(in srgb, var(--crmn-tinta) 26%, transparent);
}
.crmn-s {
  text-align: left; font: inherit; font-size: var(--f-m); line-height: 1.35;
  padding: 6px 10px; border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--g-testo-2); cursor: pointer;
  position: relative;
}
.crmn-s:hover { background: var(--g-carta-3); color: var(--g-testo); }
.crmn-s.attiva {
  background: var(--g-carta); color: var(--g-testo); font-weight: 600;
  box-shadow: var(--om-1);
}
.crmn-s.attiva::before {
  content: ""; position: absolute; left: -13px; top: 4px; bottom: 4px;
  width: 2px; background: var(--crmn-tinta);
}
/* Una schermata non ancora costruita si vede PRIMA di cliccarla: cliccare e
 * trovare un avviso e' un giro a vuoto. */
.crmn-s.muta { opacity: .55; }

/* L'OCCHIELLO DEL CONTENUTO: dice in che area si sta e chiude il filo che
 * comincia nel rail — il trattino corto prima del nome e' quel filo che
 * arriva. */
.crmn-dove {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--g-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--crmn-tinta);
  margin-bottom: 11px;
}
.crmn-dove::before { content: ""; width: 18px; height: 2px; background: var(--crmn-tinta); }

/* Sotto i 900px il rail torna in orizzontale e scorre: su un portatile stretto
 * duecento pixel di colonna sono un quinto dello schermo. */
@media (max-width: 900px) {
  .crmn-guscio { grid-template-columns: 1fr; gap: 14px; }
  .crmn-rail {
    position: static; flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 4px; border-right: 0; border-bottom: 1px solid var(--g-bordo);
    padding: 0 0 12px; max-height: none;
  }
  .crmn-g { display: contents; }
  .crmn-stanza { width: auto; }
  .crmn-g.aperta > .crmn-stanza::before { display: none; }
  .crmn-sotto {
    flex-direction: row; flex-wrap: wrap; margin: 0; padding: 8px 0 0;
    border-left: 0; flex-basis: 100%;
    border-top: 2px solid color-mix(in srgb, var(--crmn-tinta) 26%, transparent);
  }
  .crmn-s.attiva::before { display: none; }
  .crmn-rail-t { margin: 0 4px; }
}

.crmn-sp { flex: 1; }
.crmn-indietro { font: inherit; font-size: 12px; background: none; border: 0;
  padding: 0 0 10px; color: var(--g-testo-3); cursor: pointer; }
.crmn-indietro:hover { color: var(--g-blu); }

/* I BOTTONI: alti TRENTA pixel come quelli della toolbar del portale
 * (`.tb button`, blocco BANCO), non ventotto. Erano l'unica famiglia della
 * sezione che non si allineava a niente, e in una riga insieme a un campo di
 * testo la differenza si vedeva.
 *
 * IL PRINCIPALE PRENDE LA TINTA DELL'AREA e non il blu fisso: in Ricerca il
 * bottone forte e' ciano, in Direzione viola. Stessa idea del filo nel rail --
 * da qualunque cosa si guardi, si sa in che stanza si e'. */
.crmn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 30px; padding: 0 13px; font: inherit; font-size: var(--f-m);
  border: 1px solid var(--g-bordo-forte); border-radius: var(--r-2);
  background: var(--g-carta); color: var(--g-testo); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.crmn-btn:hover { border-color: var(--crmn-tinta); color: var(--crmn-tinta); }
.crmn-btn.pri {
  background: var(--crmn-tinta); border-color: var(--crmn-tinta);
  color: var(--g-testo-inv); font-weight: 600;
}
.crmn-btn.pri:hover { filter: brightness(1.14); color: var(--g-testo-inv); }
.crmn-btn.pri:disabled {
  background: var(--g-bordo-forte); border-color: var(--g-bordo-forte);
  cursor: not-allowed; filter: none;
}
.crmn-btn.tenue { border-color: transparent; background: none; color: var(--g-testo-3); }
.crmn-btn.tenue:hover { background: var(--g-carta-3); color: var(--g-testo); }

/* ==========================================================================
   LE IMPOSTAZIONI — prefisso `crmn-c-` (c come configurazione).

   Due famiglie dentro la stessa sezione: `crmn-` e' il guscio, `crmn-c-` sono
   le ventuno voci. Servono a non far collidere `crmn-seg` — il pallino delle
   fondamenta — col pallino di una voce, che dice un'altra cosa: li' e' «c'e' /
   non c'e'», qui e' «uguale al disegno / diversa».
   ========================================================================== */

.crmn-c-rendi { border: 1px solid var(--g-bordo); background: var(--g-carta-2);
  border-radius: 8px; padding: 9px 13px; font-size: 12.5px;
  color: var(--g-testo-3); max-width: 340px; }
.crmn-c-rendi.mod { border-color: var(--g-attenzione-segno);
  background: var(--g-attenzione-velo); color: var(--g-attenzione-testo); }
.crmn-c-rendi b { color: var(--g-testo); display: block; font-size: 13px;
  margin-bottom: 2px; }
.crmn-c-diverso { color: var(--g-attenzione-testo); }

.crmn-c-gruppi { display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.crmn-c-gr { border: 1px solid var(--g-bordo); border-radius: 10px;
  padding: 13px 15px; background: var(--g-carta-2); }
.crmn-c-gr-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.crmn-c-gr-h b { font-size: 13.5px; letter-spacing: -.01em; }
.crmn-c-cnt { margin-left: auto; font-size: 11px; color: var(--g-testo-3);
  font-variant-numeric: tabular-nums; }
.crmn-c-gr ul { list-style: none; margin: 0; padding: 0; }
.crmn-c-gr li { border-top: 1px solid var(--g-bordo-tenue); }
.crmn-c-gr li:first-child { border-top: 0; }

.crmn-c-riga { display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 5px 0; font: inherit; font-size: 12.5px; text-align: left;
  background: none; border: 0; color: inherit; cursor: pointer; }
.crmn-c-riga:hover .crmn-c-nm { color: var(--g-blu); }
.crmn-c-riga:focus-visible { outline: 2px solid var(--g-blu); outline-offset: 1px; }
/* Non si toglie il click: la voce si apre lo stesso, in sola lettura. Chi non
   la puo' cambiare ha comunque il diritto di sapere quanto vale. */
.crmn-c-riga.muta .crmn-c-nm { color: var(--g-testo-3); }
.crmn-c-nm { flex: 1; }
.crmn-c-seg { width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--g-bordo); }
.crmn-c-seg.mod { background: var(--g-attenzione-segno); }
.crmn-c-chi { font-size: 10px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.crmn-c-chi.dir { color: var(--g-viola-testo); background: #f6f2fc; border: 1px solid #e5dcf5; }
.crmn-c-chi.com { color: var(--g-ok-testo); background: #eef8f3; border: 1px solid #d6ecdf; }

.crmn-c-dett { border: 1px solid var(--g-bordo); border-radius: 10px;
  background: var(--g-carta-2); padding: 15px 17px; margin-top: 14px; }
.crmn-c-era { margin: 8px 0 0; font-size: 11.5px; color: var(--g-testo-3); }
.crmn-c-campo { display: block; font-size: 12px; color: var(--g-testo-3); }
.crmn-c-campo input { display: block; margin-top: 4px; width: 180px;
  font: inherit; font-size: 14px; padding: 6px 9px;
  border: 1px solid var(--g-bordo-forte); border-radius: 6px; }
.crmn-c-elenco { list-style: none; margin: 0; padding: 0; }
.crmn-c-elenco li { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.crmn-c-elenco input { flex: 1; max-width: 420px; font: inherit; font-size: 13px;
  padding: 5px 9px; border: 1px solid var(--g-bordo-forte); border-radius: 6px; }
.crmn-c-x { font: inherit; border: 1px solid var(--g-bordo);
  background: var(--g-carta); color: var(--g-testo-3); border-radius: 6px;
  width: 26px; height: 26px; cursor: pointer; }
.crmn-c-x:hover { color: var(--g-errore); border-color: var(--g-errore-segno); }

.crmn-c-peso { display: grid; grid-template-columns: 150px 1fr 110px;
  align-items: center; gap: 12px; margin-top: 9px; font-size: 12.5px; }
.crmn-c-peso input[type="range"] { width: 100%; accent-color: var(--g-blu); }
.crmn-c-v { text-align: right; font-variant-numeric: tabular-nums; }
.crmn-c-v b { font-weight: 600; }
.crmn-c-v em { font-style: normal; font-size: 11px; color: var(--g-attenzione-testo); }
.crmn-c-somma { margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--g-bordo-tenue); font-size: 12px;
  color: var(--g-testo-3); display: flex; justify-content: space-between; gap: 14px; }
.crmn-c-somma b.ok { color: var(--g-ok-testo); }
.crmn-c-somma b.no { color: var(--g-errore); }

.crmn-c-crudo { margin: 0; font-family: var(--g-mono); font-size: 12px;
  white-space: pre-wrap; background: var(--g-carta);
  border: 1px solid var(--g-bordo); border-radius: 6px; padding: 10px 12px;
  max-height: 260px; overflow: auto; }

.crmn-c-azioni { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap;
  align-items: center; }
.crmn-c-storia { margin-top: 14px; }
.crmn-c-tab { border-collapse: collapse; width: 100%; font-size: 12px; }
.crmn-c-tab th, .crmn-c-tab td { text-align: left; padding: 6px 10px;
  border-bottom: 1px solid var(--g-bordo-tenue); vertical-align: top; }
.crmn-c-tab thead th { font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--g-testo-3);
  border-bottom: 1px solid var(--g-bordo); }

@media (max-width: 620px) {
  .crmn-c-peso { grid-template-columns: 1fr; gap: 4px; }
  .crmn-c-rendi { max-width: none; }
}

/* --- il catalogo dei tipi: l'albero e i due numeri per nodo --- */
.crmn-albero { list-style: none; margin: 0; padding: 0; }
.crmn-albero .crmn-albero { margin: 0; }
.crmn-albero li { display: grid; grid-template-columns: 1fr 60px 60px;
  align-items: center; gap: 8px; padding: 5px 10px; font-size: 12.5px;
  border-bottom: 1px solid var(--g-bordo-tenue); }
.crmn-albero li:hover { background: var(--g-riga-hover); }
/* UN NODO A ZERO NON SPARISCE: si spegne. Nasconderlo vorrebbe dire non
   poterlo potare, ed e' l'unica cosa per cui i conteggi esistono. */
.crmn-albero li.vuoto .crmn-ram { color: var(--g-testo-3); }
.crmn-ram { display: block; }
.crmn-num { text-align: right; font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--g-testo-3); }
.crmn-num.forte { color: var(--g-testo); font-weight: 600; }

.crmn-asse { font-size: 11px; color: var(--g-testo-3);
  background: var(--g-carta-3); border: 1px solid var(--g-bordo);
  border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.crmn-nulla { color: var(--g-attenzione-testo); font-size: 11.5px; }

/* --- le reti: la barra a tre segmenti --- */
.crmn-barra { display: inline-flex; width: 120px; height: 8px; border-radius: 4px;
  overflow: hidden; background: var(--g-carta-3); vertical-align: middle;
  border: 1px solid var(--g-bordo); }
/* TRE SEGMENTI E TRE COLORI, e la legenda accanto scrive i tre numeri: chi non
   distingue il verde dal giallo deve poter leggere lo stesso la copertura. */
.crmn-barra i.ser { background: var(--g-ok); }
.crmn-barra i.con { background: var(--g-attenzione-segno); }
.crmn-barra i.mai { background: var(--g-bordo-forte); }
.crmn-legenda { margin-left: 8px; font-size: 11px; color: var(--g-testo-3);
  font-variant-numeric: tabular-nums; }

/* Il riquadro del criterio: e' la lista di nomi con la porta piu' aperta che
   ci sia, e fino a oggi si otteneva solo a memoria. */
.crmn-porta { border: 1px solid var(--g-blu); background: var(--g-blu-velo);
  border-radius: 8px; padding: 11px 14px; font-size: 12.5px;
  color: var(--g-testo-2); margin-bottom: 18px; max-width: 80ch; }
.crmn-porta b { color: var(--g-testo); }

/* --- i motivi: la voce, la domanda che segue, e il tipo della risposta --- */
.crmn-c-motivi { list-style: none; margin: 0 0 10px; padding: 0; }
.crmn-c-motivi li { display: grid; align-items: center; gap: 6px;
  grid-template-columns: 1.1fr 1.2fr auto 1fr auto auto auto; margin-bottom: 6px; }
.crmn-c-motivi input[type="text"], .crmn-c-motivi select {
  font: inherit; font-size: 12.5px; padding: 5px 8px; min-width: 0;
  border: 1px solid var(--g-bordo-forte); border-radius: 6px;
  background: var(--g-carta); color: var(--g-testo);
}
.crmn-c-motivi .m-scelte[hidden] { display: none; }
.m-codal { font-size: 11px; color: var(--g-testo-3); white-space: nowrap;
  display: flex; align-items: center; gap: 3px; }

@media (max-width: 900px) {
  .crmn-c-motivi li { grid-template-columns: 1fr; }
}

/* --- l'albero: la presa per trascinare, la penna, il segno del bersaglio --- */
.crmn-riga-nodo { display: grid; grid-template-columns: 16px 1fr auto 60px 60px;
  align-items: center; gap: 8px; padding: 5px 10px;
  border-bottom: 1px solid var(--g-bordo-tenue); }
.crmn-albero li { display: block; padding: 0; border: 0; }
.crmn-albero li:hover > .crmn-riga-nodo { background: var(--g-riga-hover); }
.crmn-albero li.vuoto > .crmn-riga-nodo .crmn-ram { color: var(--g-testo-3); }
.crmn-presa { color: var(--g-bordo-forte); cursor: grab; font-size: 12px;
  letter-spacing: -1px; user-select: none; }
.crmn-albero li.in-mano { opacity: .45; }
/* Il bersaglio si vede DOVE il nodo andra' a finire, non genericamente. */
.crmn-albero li.sopra > .crmn-riga-nodo { box-shadow: inset 0 2px 0 var(--g-blu); }
.crmn-penna { font: inherit; font-size: 10.5px; padding: 1px 7px; cursor: pointer;
  border: 1px solid var(--g-bordo); border-radius: 5px;
  background: var(--g-carta); color: var(--g-testo-3); opacity: 0; }
.crmn-albero li:hover > .crmn-riga-nodo .crmn-penna { opacity: 1; }
.crmn-penna:focus-visible { opacity: 1; }
.crmn-penna:hover { color: var(--g-blu); border-color: var(--g-blu); }
.crmn-rinomina { font: inherit; font-size: 12.5px; padding: 3px 7px; width: 100%;
  border: 1px solid var(--g-blu); border-radius: 5px; }

/* --- le proposte incerte, e la conferma in blocco --- */
.crmn-conferma { border: 1px solid var(--g-blu); background: var(--g-blu-velo);
  border-radius: 8px; padding: 11px 14px; font-size: 12.5px;
  color: var(--g-testo-2); margin-bottom: 12px; max-width: 80ch; }
.crmn-conferma b { color: var(--g-testo); }
.crmn-spunta { width: 26px; }
/* «Forse» non si scrive come una certezza: chi conferma in blocco deve vedere
   a colpo d'occhio che sta confermando un suggerimento. */
.crmn-forse { font-size: 11.5px; color: var(--g-attenzione-testo);
  background: var(--g-attenzione-velo); border: 1px solid var(--g-attenzione-segno);
  border-radius: 4px; padding: 0 5px; }

/* Le DUE zone di rilascio, e si vedono diverse perche' sono due gesti diversi:
   una riga sopra il bersaglio vuol dire «qui, fra i suoi pari»; una cornice
   intorno vuol dire «dentro, e questo diventa il padre». */
.crmn-albero li.dentro > .crmn-riga-nodo {
  box-shadow: inset 0 0 0 2px var(--g-blu); background: var(--g-blu-velo);
}

.crmn-area { font: inherit; font-size: 12px; padding: 1px 5px;
  border: 1px solid var(--g-bordo-forte); border-radius: 5px;
  background: var(--g-carta); color: var(--g-testo); }
.crmn-area:hover { border-color: var(--g-blu); }

/* --- i concorrenti --- */
.crmn-campo { font: inherit; font-size: 12.5px; padding: 5px 9px; width: 260px;
  border: 1px solid var(--g-bordo-forte); border-radius: 6px; }
.crmn-c-tab tr.spenta td { opacity: .5; }
.crmn-nome-conc { font-weight: 600; }

.crmn-anteprima { margin: 12px 0 0; padding: 10px 13px; font-size: 12.5px;
  border: 1px dashed var(--g-bordo-forte); border-radius: 8px;
  background: var(--g-carta); color: var(--g-testo-2); max-width: 80ch; }
.crmn-anteprima b { color: var(--g-testo); }
.crmn-fornitore { font: inherit; font-size: 12.5px; padding: 4px 8px;
  border: 1px solid var(--g-bordo-forte); border-radius: 6px;
  background: var(--g-carta); color: var(--g-testo); }

/* Le righe che il portale sa gia' leggere si distinguono a colpo d'occhio da
   quelle che aspettano una persona: sono lavoro del travaso, non tuo. */
.crmn-c-tab tr.sicura td { background: var(--g-ok-velo); }

/* La descrizione sotto il nome: il nome dice CHE COS'E', la descrizione dice
   A CHE SERVE. Sono due domande diverse, e un nome da solo ne risponde mezza. */
.crmn-c-descr { display: block; font-size: 11px; color: var(--g-testo-3);
  font-weight: 400; line-height: 1.35; margin-top: 1px; }

/* Chi non e' in nessuna area non vede il CRM: la riga lo dice a colpo d'occhio,
   perche' e' l'unica cosa che questa pagina serve a trovare. */
.crmn-c-tab tr.senza-area td:first-child { color: var(--g-attenzione-testo);
  font-weight: 600; }
.crmn-altri { font-size: 11px; color: var(--g-testo-3); }
.crmn-liv { font: inherit; font-size: 12px; padding: 3px 6px;
  border: 1px solid var(--g-bordo-forte); border-radius: 5px;
  background: var(--g-carta); color: var(--g-testo); }
.crmn-matrice td:first-child { max-width: 34ch; }

/* IL RIQUADRO DI CIO' CHE E' DECISO E NON ANCORA SCRITTO.
   Si distingue da quello delle righe sicure con un colore diverso e non con
   un'altra scritta: sono due riquadri vicini che dicono cose vicine, e una
   persona che li scorre deve poterli separare senza rileggerli. */
.crmn-porta.attesa {
  border-color: var(--crmn-attesa-bordo, #c9a227);
  background: var(--crmn-attesa-sfondo, #fdf8e6);
}

.crmn-decise {
  margin: .5rem 0 0;
  font-size: .92em;
  line-height: 1.7;
}

/* LE TRE SORTI DI UNA VOCE ==================================================
 * Etichette piccole e senza colore forte: dicono una condizione, non un
 * allarme. «non ancora» in particolare NON e' rossa -- non e' successo niente
 * di male, e' lavoro che non e' ancora arrivato.
 */
.crmn-c-sorte {
  font-size: 10.5px;
  letter-spacing: .03em;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: auto;
}
.crmn-c-sorte.alt { background: var(--g-blu-velo); color: var(--g-blu-scuro); }
.crmn-c-sorte.att {
  background: transparent;
  color: var(--g-testo-3);
  border: 1px dashed var(--g-bordo);
}
/* Il conto in testa: la prima domanda di chi apre e' quante ne puo' toccare. */
.crmn-c-conto {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--g-testo-3);
}
.crmn-c-conto b { color: var(--g-testo); font-weight: 600; }

/* LE TRE AREE, e le linguette delle loro schermate ========================= */
/* Le linguette orizzontali delle schermate sono state tolte il 22/08: adesso
 * le schermate stanno nel sottorail, sotto il nome della loro area. */

/* LE CAMPAGNE =============================================================== */
.cmp-criteri { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cmp-c {
  display: grid; grid-template-columns: 190px 150px 1fr auto 30px;
  gap: 8px; align-items: center;
  /* Il pannello dei valori si appoggia alla riga, e la riga e' il suo
     riferimento: senza questo si posizionerebbe rispetto alla pagina e
     resterebbe fermo mentre l'elenco scorre. */
  position: relative;
}

/* IL SELETTORE DEI VALORI (22/08). Era un campo di testo con scritto
 * «separati da virgola»: chi lo compilava doveva ricordarsi come e' scritto in
 * archivio, e sul parco vero «Emilia» esiste in quattro grafie diverse --
 * 1.724 anagrafiche la prima, 29 la seconda. Sbagliare grafia non da' errore:
 * da' una campagna piu' piccola, e nessuno se ne accorge. */
.cmp-vals {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  min-height: 32px; padding: 4px 8px; cursor: pointer;
  border: 1px solid var(--g-bordo); border-radius: var(--r-2);
  background: var(--g-carta);
}
.cmp-vals:hover { border-color: var(--crmn-tinta); }
.cmp-vals-vuoto { color: var(--g-testo-3); font-size: var(--f-m); }
.cmp-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 4px 2px 9px; border-radius: var(--r-pillola);
  background: var(--crmn-velo); color: var(--crmn-tinta);
  font-size: var(--f-s); font-weight: 600; max-width: 100%;
}
.cmp-chip-x {
  border: 0; background: none; cursor: pointer; padding: 0 3px;
  color: inherit; font-size: 13px; line-height: 1; opacity: .7;
}
.cmp-chip-x:hover { opacity: 1; }

/* IL PANNELLO si apre SOTTO la riga e non in un dialogo: si spuntano due o tre
 * valori e si guarda subito il conteggio a fianco, e un dialogo che copre la
 * schermata toglie proprio il contesto su cui si sta decidendo. */
.cmp-panello {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 348px; right: 30px;
  background: var(--g-carta); border: 1px solid var(--g-bordo-forte);
  border-radius: var(--r-3); box-shadow: var(--om-3); padding: 9px;
}
.cmp-cerca {
  width: 100%; height: 30px; padding: 0 10px; font: inherit;
  font-size: var(--f-m); border: 1px solid var(--g-bordo);
  border-radius: var(--r-2); margin-bottom: 7px;
}
.cmp-elenco { max-height: 280px; overflow-y: auto; }
.cmp-v {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 8px;
  align-items: center; padding: 5px 7px; border-radius: var(--r-2);
  font-size: var(--f-m); cursor: pointer;
}
.cmp-v:hover { background: var(--g-carta-3); }
.cmp-v-n { min-width: 0; overflow-wrap: anywhere; }
/* IL CONTEGGIO E' LA META' CHE CONTA: dice quale delle quattro grafie e'
 * quella vera. In mono, incolonnato, si confronta a vista. */
.cmp-v-q {
  font-family: var(--g-mono); font-size: var(--f-xs);
  font-variant-numeric: tabular-nums; color: var(--g-testo-3);
}
.cmp-vuoti-nota {
  font-size: var(--f-s); color: var(--g-testo-3); padding: 7px;
  line-height: 1.45;
}
/* SOTTO I 1200 IL CRITERIO VA SU DUE RIGHE. Con tre colonne fisse in cima e il
 * selettore che prende quel che resta, su un contenuto stretto al selettore
 * restavano trenta pixel: le pastiglie andavano a capo una per riga e il
 * pannello si apriva fuori squadro. Il selettore e' il controllo su cui si
 * lavora, quindi e' l'ultimo che deve stringere -- va a capo lui, intero. */
@media (max-width: 1200px) {
  .cmp-c { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 30px; }
  .cmp-c:has(.cmp-da) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto 30px; }
  .cmp-vals { grid-column: 1 / -1; }
  .cmp-panello { left: 0; right: 0; }
}
/* Un criterio su data ha due campi al posto di uno: la griglia si adatta
   invece di stringere quello che resta. */
.cmp-c:has(.cmp-da) { grid-template-columns: 190px 145px 145px auto 30px; }
.cmp-c select, .cmp-c input[type="text"], .cmp-c input[type="date"] {
  padding: 7px 10px; border: 1px solid var(--g-bordo); border-radius: var(--r-2);
  font: inherit; font-size: 13.5px; background: var(--g-carta);
  color: var(--g-testo); min-width: 0;
}
.cmp-vuoti {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--g-testo-3); white-space: nowrap;
}
.cmp-via {
  background: none; border: 0; color: var(--g-testo-3);
  font-size: 19px; line-height: 1; cursor: pointer; border-radius: var(--r-2);
}
.cmp-via:hover { color: var(--g-errore-segno); background: var(--g-fondo); }
.cmp-azioni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.cmp-azioni select {
  padding: 6px 10px; border: 1px solid var(--g-bordo); border-radius: var(--r-2);
  font: inherit; font-size: 13.5px; background: var(--g-carta); color: var(--g-testo);
}

/* LA FRASE e' il controllo che una persona puo' davvero fare: un WHERE non lo
   rilegge nessuno. Sta in evidenza, non in fondo. */
.cmp-frase {
  background: var(--g-blu-velo); color: var(--g-blu-scuro);
  border-radius: var(--r-2); padding: 11px 14px; font-size: 14.5px;
  margin-bottom: 12px; line-height: 1.5;
}
.cmp-frase.vuota { background: var(--g-fondo); color: var(--g-testo-3); }

.cmp-conto {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 15px; margin-bottom: 10px;
}
.cmp-conto b { font-size: 22px; font-weight: 700; }
.cmp-primi { list-style: none; margin: 0; padding: 0; font-size: 13.5px; max-width: 560px; }
.cmp-primi li { padding: 5px 0; border-bottom: 1px solid var(--g-bordo-tenue); }
.cmp-resto { color: var(--g-testo-3); font-style: italic; }

@media (max-width: 760px) {
  .cmp-c, .cmp-c:has(.cmp-da) { grid-template-columns: 1fr 30px; }
  .cmp-vuoti { grid-column: 1 / -1; }
}

/* LA CODA DI OGGI ========================================================== */
.cod-testa { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cod-quante { font-size: 14.5px; color: var(--g-testo-3); }
.cod-quante b { font-size: 20px; color: var(--g-testo); font-weight: 700; }

.cod-camp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cod-k {
  width: 100%; text-align: left; background: var(--g-carta);
  border: 1px solid var(--g-bordo); border-radius: var(--r-3);
  padding: 12px 15px; cursor: pointer; font: inherit;
  display: grid; grid-template-columns: 1fr auto auto; gap: 4px 14px; align-items: baseline;
}
.cod-k:hover { border-color: var(--g-blu); background: var(--g-blu-velo); }
.cod-k-nome { font-weight: 600; font-size: 15px; color: var(--g-testo); }
/* IL NUMERO PRENDE LA TINTA DELL'AREA: era blu fisso, e in una schermata della
 * Ricerca -- che e' ciano da capo a piedi -- l'unica cosa blu era il numero
 * piu' grande della pagina. */
.cod-k-num {
  font-size: var(--f-l); color: var(--crmn-tinta); white-space: nowrap;
  font-family: var(--g-mono); font-variant-numeric: tabular-nums;
}
.cod-k-num b { font-size: var(--f-2xl); font-weight: 600; letter-spacing: -.02em; }
.cod-k-tot { font-size: 12.5px; color: var(--g-testo-3); white-space: nowrap; }
.cod-k-frase { grid-column: 1 / -1; font-size: 12.5px; color: var(--g-testo-3); }

.cod-righe { list-style: none; margin: 0; padding: 0; }
.cod-r {
  display: grid; grid-template-columns: 175px 1fr auto auto auto;
  gap: 12px; align-items: baseline;
  padding: 11px 12px; border-bottom: 1px solid var(--g-bordo-tenue);
}
.cod-r:hover { background: var(--g-fondo); }
/* IL TELEFONO E' IL DATO PIU' GRANDE, piu' del nome: chi lavora questa pagina
 * sta telefonando, non sta leggendo un elenco. */
.cod-tel {
  font-size: 17px; font-weight: 600; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: var(--g-testo);
}
.cod-nome { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cod-dove { font-size: 12px; color: var(--g-testo-3); }
.cod-perche { font-size: 12.5px; color: var(--g-blu-scuro); white-space: nowrap; }
.cod-gest {
  font-size: 12px; padding: 1px 8px; border-radius: 999px;
  background: var(--g-blu-velo); color: var(--g-blu-scuro); white-space: nowrap;
}
.cod-tent { font-size: 12px; color: var(--g-testo-3); white-space: nowrap; }
/* Le cinque priorita': una banda sottile a sinistra, non un fondo colorato.
 * Cinque righe con cinque fondi diversi si leggono come cinque allarmi. */
.cod-p-scaduto { box-shadow: inset 3px 0 0 var(--g-attenzione-segno); }
.cod-p-oggi { box-shadow: inset 3px 0 0 var(--g-blu); }
.cod-p-da_concorrente { box-shadow: inset 3px 0 0 var(--g-blu); }
@media (max-width: 820px) {
  .cod-r { grid-template-columns: 1fr; gap: 3px; }
  .cod-k { grid-template-columns: 1fr; }
}

/* I CINQUE ESITI, sotto la riga che si sta lavorando ======================= */
.cod-esiti {
  grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap;
  padding-top: 10px; margin-top: 6px; border-top: 1px dashed var(--g-bordo);
}
/* IL TESTO DEI CINQUE BOTTONI SI VEDE TUTTO (Luca, 24/08). Erano cinque
   elementi flex che si stringevano a vicenda: in un contenitore stretto -- il
   pannello della scheda, o il telefono -- l'etichetta finiva su una riga sola
   e usciva dal bordo. Ora crescono insieme (`flex: 1 1 0`) e il testo va a
   capo invece di essere tagliato; sotto una certa larghezza si impilano, che
   e' meglio di cinque colonne illeggibili. */
.cod-e {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  flex: 1 1 0; min-width: 140px;
  padding: 7px 12px; border: 1px solid var(--g-bordo); border-radius: var(--r-2);
  background: var(--g-carta); cursor: pointer; font: inherit; text-align: left;
  white-space: normal; overflow-wrap: anywhere;
}
.cod-e:hover { border-color: var(--g-blu); background: var(--g-blu-velo); }
.cod-e-n { font-size: 13.5px; font-weight: 600; color: var(--g-testo); }
.cod-e-c { font-size: 11.5px; color: var(--g-testo-3); }
.cod-e-data {
  padding: 7px 10px; border: 1px solid var(--g-bordo); border-radius: var(--r-2);
  font: inherit; font-size: 13.5px; background: var(--g-carta); color: var(--g-testo);
}

/* LA SCHEDA DI CHI TELEFONA =============================================== */
.sch-tel { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; }
.sch-tel a {
  font-size: 26px; font-weight: 700; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: var(--g-blu-scuro); text-decoration: none;
}
.sch-tel a:hover { text-decoration: underline; }
.sch-dove { font-size: 13px; color: var(--g-testo-3); }
/* «Non lo sappiamo» non e' un errore: e' il secondo motivo della telefonata.
 * Quindi tenue e in corsivo, non rosso. */
.sch-manca { color: var(--g-testo-3); font-style: italic; font-size: 14px; }

.sch-ref { list-style: none; margin: 0; padding: 0; }
.sch-ref li { display: flex; align-items: baseline; gap: 9px; padding: 4px 0; flex-wrap: wrap; }
.sch-mans { font-size: 12.5px; color: var(--g-testo-3); }
/* IL RUOLO DEDOTTO si vede tratteggiato: chiedere «parlo con il responsabile
 * acquisti?» e' una telefonata diversa da «c'e' il signor Belli?». */
.sch-mans.incerto {
  border-bottom: 1px dashed var(--g-attenzione-segno);
  color: var(--g-attenzione-segno);
}
.sch-rtel { font-size: 12.5px; color: var(--g-testo-3); font-variant-numeric: tabular-nums; }

.sch-chiedere {
  background: var(--g-blu-velo); color: var(--g-blu-scuro);
  border-radius: var(--r-2); padding: 11px 14px; margin: 12px 0; font-size: 13.5px;
}
.sch-chiedere ul { margin: 5px 0 0; padding-left: 20px; }
.sch-chiedere li { padding: 1px 0; }

.sch-ultime { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.sch-ultime li { display: flex; gap: 11px; padding: 4px 0; border-bottom: 1px solid var(--g-bordo-tenue); }
.sch-quando { color: var(--g-testo-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* DA RICHIAMARE: tre mucchi, non un elenco solo ============================ */
.ric-m { margin-bottom: 22px; }
.ric-m-h { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; }
.ric-m-h b { font-size: 15px; }
.ric-m .crm-doc-meta { margin: 0 0 6px; }

/* IL PASSAGGIO DI CONSEGNE, dentro gli esiti della coda =================== */
.cod-e-app {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  flex-basis: 100%; padding-top: 8px;
}
.cod-e-app input {
  padding: 7px 10px; border: 1px solid var(--g-bordo); border-radius: var(--r-2);
  font: inherit; font-size: 13.5px; background: var(--g-carta); color: var(--g-testo);
}
/* La tendina eredita il bordo e il passo degli input accanto: e' un campo
   della stessa riga, e un `select` di sistema accanto a due input nostri si
   vede subito che e' un pezzo di un altro foglio. */
.cod-a-chi {
  min-width: 230px; padding: 7px 10px; border: 1px solid var(--g-bordo);
  border-radius: var(--r-2); font: inherit; font-size: 13.5px;
  background: var(--g-carta); color: var(--g-testo);
}
.cod-a-nota { flex-basis: 100%; font-size: 11.5px; color: var(--g-testo-3); }

/* GLI APPUNTAMENTI ========================================================= */
.app-righe { list-style: none; margin: 0; padding: 0; }
.app-r {
  display: grid; grid-template-columns: 150px 1fr auto auto auto;
  gap: 12px; align-items: baseline; padding: 11px 12px;
  border-bottom: 1px solid var(--g-bordo-tenue); cursor: pointer;
}
.app-r:hover { background: var(--g-fondo); }
.app-q {
  font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--g-testo);
}
.app-n { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.app-chi { font-size: 12.5px; color: var(--g-blu-scuro); white-space: nowrap; }
/* Un appuntamento passato e ancora aperto e' LAVORO IN SOSPESO, non storia:
 * nessuno ha scritto com'e' andata. Banda ambra, come i ritardi altrove. */
.app-r.passato { box-shadow: inset 3px 0 0 var(--g-attenzione-segno); }
.app-att {
  font-size: 11.5px; padding: 1px 8px; border-radius: 999px;
  background: var(--g-attenzione-velo, var(--g-fondo)); color: var(--g-attenzione-segno);
  white-space: nowrap;
}
@media (max-width: 820px) { .app-r { grid-template-columns: 1fr; gap: 3px; } }

/* IL TABELLONE DELLE TRATTATIVE =========================================== */
.trt-board {
  display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px; overflow-x: auto; padding-bottom: 6px;
}
/* LE COLONNE SONO UN PERCORSO, e la riga in cima lo dice: un filo nella tinta
 * dell'area sopra ogni colonna, che le lega come tappe della stessa cosa
 * invece di quattro riquadri affiancati. */
.trt-col {
  background: var(--g-carta-3); border-radius: var(--r-3); padding: 10px;
  min-width: 190px; border-top: 2px solid color-mix(in srgb, var(--crmn-tinta) 30%, transparent);
}
.trt-col-h {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  font-family: var(--g-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 500; color: var(--g-testo-3);
  margin-bottom: 10px;
}
.trt-c {
  background: var(--g-carta); border: 1px solid var(--g-bordo);
  border-radius: var(--r-2); padding: 9px 11px; margin-bottom: 7px; cursor: pointer;
}
.trt-c:hover { border-color: var(--crmn-tinta); box-shadow: var(--om-1); }
.trt-n { font-size: var(--f-base); font-weight: 600; color: var(--g-testo); line-height: 1.35; }
.trt-d { font-size: var(--f-s); color: var(--g-testo-3); margin-top: 2px; }
/* IL VALORE SULLA TESSERA: e' il dato su cui si decide quale trattativa si
 * segue per prima, e in un dettaglio nascosto non lo guarda nessuno. */
.trt-v {
  margin-top: 6px; font-size: var(--f-m); font-weight: 600; color: var(--g-testo);
  font-family: var(--g-mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.trt-p { font-weight: 400; color: var(--g-testo-3); margin-left: 7px; }
.trt-v.vuoto { color: var(--g-testo-3); font-weight: 400; font-style: italic; }
.trt-vuota { color: var(--g-testo-3); text-align: center; padding: 12px 0; }
@media (max-width: 900px) { .trt-board { grid-template-columns: repeat(4, 200px); } }

/* GLI ELENCHI DEL COMMERCIALE ============================================= */
.tab-avvolgi { overflow-x: auto; }
.crmn-c-tab th.num, .crmn-c-tab td.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.crmn-cli { cursor: pointer; }
.crmn-cli:hover { background: var(--g-fondo); }
/* Lo stato dell'offerta con un colore che dice cosa vuol dire, non un'etichetta
 * grigia uguale per tutti: mandata e persa sono due lavori diversi. */
.off-s { font-size: 12px; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.off-proposta { background: var(--g-blu-velo); color: var(--g-blu-scuro); }
/* Il token e' `--g-ok-testo` e non `--g-ok-segno`, che non esiste: con un nome
   inventato il colore cade sul testo normale e «vinta» esce nera come tutto il
   resto. Visto guardando il colore calcolato, non il foglio di stile. */
.off-accettata { background: var(--g-ok-velo); color: var(--g-ok-testo); }
.off-rifiutata { background: var(--g-fondo); color: var(--g-testo-3); }

/* LE TRE HOME ============================================================= */
.hom-griglia {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 11px; margin-bottom: 16px;
}
.hom-r {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--g-carta); border: 1px solid var(--g-bordo);
  border-radius: var(--r-3); padding: 15px 17px; cursor: pointer;
  font: inherit; text-align: left;
}
.hom-r:hover { border-color: var(--g-blu); }
.hom-n {
  font-size: 30px; font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--g-testo);
}
.hom-t { font-size: 12.5px; color: var(--g-testo-3); line-height: 1.35; }
/* SI ACCENDE SOLO CIO' CHE PEGGIORA DA SOLO. Un riquadro sempre acceso si
 * smette di guardare: e' la stessa ragione per cui la spia delle
 * sincronizzazioni non c'e' finche' tutto gira. */
.hom-r.avviso { border-color: var(--g-attenzione-segno); }
.hom-r.avviso .hom-n { color: var(--g-attenzione-segno); }

/* LA NOTA DELLA TELEFONATA ================================================ */
.cod-e-nota {
  flex-basis: 100%; padding: 8px 11px; border: 1px solid var(--g-bordo);
  border-radius: var(--r-2); font: inherit; font-size: 13.5px;
  background: var(--g-carta); color: var(--g-testo); resize: vertical;
  margin-bottom: 8px;
}
/* Nella scheda la nota va a capo sotto la riga: l'esito e' una parola, la nota
 * puo' essere tre righe, e sulla stessa riga si troncherebbe proprio quella. */
.sch-nota {
  flex-basis: 100%; font-size: 12.5px; color: var(--g-testo-3);
  line-height: 1.45; padding-left: 2px; white-space: pre-wrap;
}
.sch-ultime li { flex-wrap: wrap; }

/* LE DISDETTE ============================================================= */
/* TRE SEZIONI E NON UN ELENCO: «da decidere» e' lavoro aperto, «ci stiamo
 * provando» e' lavoro in mano a qualcuno, «chiuse» e' storia. In un elenco
 * unico la riga su cui nessuno ha ancora deciso -- l'unica che scade da sola
 * -- finisce in mezzo a quelle finite. */
.dis-sez { margin-bottom: 22px; }
/* IL TITOLO DEL GRUPPO e' un occhiello col suo conteggio attaccato, e la
 * spiegazione va A CAPO invece che in fondo alla riga: spinta a destra da un
 * `margin-left:auto` finiva a mezzo schermo di distanza dalla cosa che
 * spiegava. */
.dis-sez-h {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: var(--f-base); font-weight: 600; color: var(--g-testo);
  border-bottom: 1px solid var(--g-bordo); padding-bottom: 7px; margin-bottom: 10px;
}
.dis-sez-h .crmn-c-cnt {
  margin: 0; font-family: var(--g-mono); font-size: var(--f-xs);
  color: var(--crmn-tinta); background: var(--crmn-velo);
  border-radius: var(--r-pillola); padding: 1px 8px;
}
.dis-sez-h small {
  flex-basis: 100%; font-weight: 400; color: var(--g-testo-3);
  font-size: var(--f-m); line-height: 1.45;
}
.dis-righe { display: flex; flex-direction: column; gap: 7px; }
/* DUE COLONNE, TRE RIGHE, e ci sono arrivato a schermo. Prima erano quattro
 * colonne affiancate e la somma delle larghezze minime superava la larghezza
 * del contenuto: la data usciva TAGLIATA dal bordo della scheda, e il motivo
 * si troncava a meta' parola.
 *
 * La forma giusta la detta il contenuto: NOME e VALORE sono una coppia da
 * leggere insieme (chi e', quanto vale) e stanno sulla stessa riga, ai due
 * capi; la scadenza e' un dato a se' e prende la riga sotto; il motivo e'
 * prosa e prende tutta la larghezza. Cosi' regge a qualunque larghezza, e a
 * schermo pieno resta comunque un blocco compatto. */
.dis-r {
  display: grid; gap: 4px 16px; align-items: baseline; cursor: pointer;
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--g-carta); border: 1px solid var(--g-bordo);
  border-radius: var(--r-3); padding: 11px 14px;
}
.dis-d { grid-column: 1 / -1; }
.dis-r:hover { border-color: var(--crmn-tinta); box-shadow: var(--om-1); }
.dis-n { font-size: var(--f-base); font-weight: 600; color: var(--g-testo); line-height: 1.35; }
/* IL VALORE ACCANTO ALLA SCADENZA e' l'incrocio che prima si faceva a mano:
 * senza, si decide in ordine di codice contratto.
 *
 * IN INCHIOSTRO E NON NELLA TINTA DELL'AREA: la tinta dice DOVE SI E', e se la
 * si spende anche sui soldi smette di dirlo. Il colore che identifica una
 * stanza non puo' essere anche il colore che evidenzia un numero. */
.dis-v {
  font-size: var(--f-base); font-weight: 600; color: var(--g-testo);
  font-family: var(--g-mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; white-space: nowrap;
}
.dis-d, .dis-m, .dis-c { font-size: var(--f-m); color: var(--g-testo-3); line-height: 1.45; }
.dis-m { grid-column: 1 / -1; font-style: italic; }
.dis-c { grid-column: 1 / -1; }
.dis-g { margin-left: 6px; font-family: var(--g-mono); font-variant-numeric: tabular-nums; }
.dis-g-urg { color: var(--g-errore); font-weight: 600; }
.dis-g-fin { color: var(--g-testo-3); font-style: italic; }
.dis-e {
  grid-column: 1 / -1; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.dis-e-tenuto { color: var(--g-ok-testo); }
.dis-e-perso { color: var(--g-errore); }
.crmn-vuoto { color: var(--g-testo-3); font-weight: 400; font-style: italic; }
@media (max-width: 800px) { .dis-r { grid-template-columns: 1fr 1fr; } }

/* IL BLOCCO DELLA DISDETTA, dentro la scheda del contratto ================ */
.crm-disd-fatti {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px; margin-bottom: 10px;
}
.crm-disd-fatti dt {
  font-size: 11.5px; color: var(--g-testo-3); text-transform: uppercase;
  letter-spacing: .05em; margin: 0 0 2px;
}
.crm-disd-fatti dd { margin: 0; font-size: 13.5px; color: var(--g-testo); }
.crm-disd-nota {
  font-size: 12.5px; color: var(--g-testo-3); white-space: pre-wrap;
  margin: 0 0 10px;
}
.crm-disd-rec { border-top: 1px solid var(--g-bordo); padding-top: 10px; }
.crm-disd-rec-t { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.crm-disd-esito { font-size: 13px; margin: 0; }
.crm-disd-azioni {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.crm-disd-azioni small { color: var(--g-testo-3); font-size: 12px; }

/* I PASTI GARANTITI ======================================================= */
/* LA CITAZIONE E' IL CENTRO DELLA RIGA, non un dettaglio: quello che si
 * conferma e' la lettura di una frase scritta a mano vent'anni fa, e chi
 * conferma deve leggere quella, non la proposta. */
.pst-righe { display: flex; flex-direction: column; gap: 10px; }
.pst-r {
  background: var(--g-carta); border: 1px solid var(--g-bordo);
  border-radius: var(--r-3); padding: 13px 15px;
  display: flex; flex-direction: column; gap: 8px;
}
.pst-t { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.pst-t b { font-size: 13.5px; }
.pst-v {
  font-size: var(--f-base); font-weight: 600; color: var(--g-testo);
  font-family: var(--g-mono); font-variant-numeric: tabular-nums;
  letter-spacing: -.01em; white-space: nowrap;
}
.pst-f {
  margin: 0; padding: 8px 12px; border-left: 2px solid var(--g-bordo);
  background: var(--g-fondo); border-radius: 0 var(--r-2) var(--r-2) 0;
  font-size: 13px; color: var(--g-testo); font-style: italic;
}
.pst-p { font-size: 12.5px; color: var(--g-testo-3); }
.pst-n { color: var(--g-attenzione-segno); }
.pst-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pst-apri { font-size: 12.5px; color: var(--g-blu); }
/* Una nota che porta gia' un allarme scritto a mano va vista per prima: e'
 * qualcuno che si era accorto di un problema e non aveva dove metterlo. */
.pst-r-all { border-color: var(--g-errore); }
.pst-all { font-size: 12.5px; color: var(--g-errore); }

/* CONCORDATO E INCASSATO ================================================== */
.prz-conf {
  border: 1px solid var(--g-bordo); border-radius: var(--r-2);
  background: var(--g-carta); padding: 12px 14px; margin-bottom: 14px;
}
.prz-conf-t {
  font-family: var(--g-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--g-testo-3); margin-bottom: 9px;
}
.prz-conf-vuoto {
  border: 1px solid var(--g-bordo); border-radius: var(--r-2);
  background: var(--g-fondo); padding: 12px 14px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--g-testo-3);
}
.prz-giu { color: var(--g-errore); font-weight: 600; }
.prz-su { color: var(--g-ok-testo); font-weight: 600; }
.prz-nota { font-size: 11.5px; color: var(--g-testo-3); font-style: italic; }
.prz-alias { font-size: 11.5px; color: var(--g-testo-3); }

/* LE STIME DI UN POTENZIALE, dentro la fascia della classificazione =========
 * Due delle quattro celle non si votano: si scrivono. Il campo sta dove negli
 * altri riquadri stanno i pallini, cosi' le quattro celle restano allineate e
 * si confrontano con lo sguardo — che e' tutto il motivo per cui stanno una
 * accanto all'altra. */
.crm-pot-in {
  width: 8ch; font: inherit; font-family: var(--g-mono); font-size: var(--f-m);
  font-variant-numeric: tabular-nums; text-align: right;
  padding: 2px 6px; border: 1px solid var(--g-bordo); border-radius: var(--r-1);
  background: var(--g-carta); color: var(--g-testo);
  /* Le frecce su/giu' del browser rubano meta' campo e non servono: un
     fatturato non si compone premendo cento volte. */
  -moz-appearance: textfield;
}
.crm-pot-in::-webkit-outer-spin-button,
.crm-pot-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.crm-pot-in:focus { border-color: var(--g-blu); }
.crm-pot-suf { font-size: var(--f-xs); color: var(--g-testo-3); margin-left: 5px; }

/* I PREZZI OFFERTI ========================================================= */
/* La fonte accanto al titolo: un'offerta e' un prezzo USCITO, una scheda e' un
 * prezzo calcolato e non mandato. Sono due cose diverse nella stessa fila, e
 * senza l'etichetta si leggerebbero come la stessa. */
.prz-fonte {
  font-family: var(--g-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--g-testo-3);
  border: 1px solid var(--g-bordo); border-radius: var(--r-pillola);
  padding: 0 6px; margin-left: 6px;
}
.tabella-scorre { overflow-x: auto; }

/* «COM'È MESSO OGGI» — la riga in testa alla scheda di un potenziale ========
 * Le tre cose che decidono se vale la pena chiamare: chi lo serve, fino a
 * quando, e con che numero si chiama. Stavano in fondo, dentro «Anagrafica»,
 * sotto quindici righe di indirizzo e partita IVA. */
.crm-oggi {
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline;
  padding: 11px 14px; margin: 12px 0 4px;
  background: var(--g-carta); border: 1px solid var(--g-bordo);
  border-left: 3px solid var(--crmn-tinta, var(--g-blu)); border-radius: var(--r-2);
}
.crm-oggi-p { display: flex; align-items: baseline; gap: 8px; font-size: var(--f-base); }
.crm-oggi-l {
  font-family: var(--g-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--g-testo-3);
}
.crm-oggi-p b { font-weight: 600; }
/* IL NUMERO SI COMPONE, non si legge: su un portatile col telefono collegato
 * e' un clic, e su un cellulare pure. */
.crm-oggi-tel {
  font-family: var(--g-mono); font-size: var(--f-l); font-weight: 600;
  color: var(--g-blu-scuro); text-decoration: none; letter-spacing: -.01em;
}
.crm-oggi-tel:hover { text-decoration: underline; }
/* «Non lo sappiamo» non e' un buco della scheda: e' il secondo motivo della
 * telefonata, e per questo si dice invece di lasciare uno spazio vuoto. */
.crm-oggi-vuoto { color: var(--g-testo-3); font-style: italic; }
.crm-oggi-chiedi {
  font-family: var(--g-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; font-style: normal; margin-left: 7px;
  color: var(--g-attenzione-testo); background: var(--g-attenzione-velo);
  border: 1px solid var(--g-attenzione-segno); border-radius: var(--r-1);
  padding: 0 5px;
}

/* LE PAGINE DELL'ELENCO ==================================================== */
/* Si vedono solo quando ce n'e' piu' d'una: una barra su una pagina sola e' un
 * comando che non porta da nessuna parte. */
.crm-pag {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 12px 2px 2px;
}
.crm-pag-b {
  font: inherit; font-size: var(--f-m); min-width: 30px; height: 28px;
  padding: 0 9px; border: 1px solid var(--g-bordo); border-radius: var(--r-2);
  background: var(--g-carta); color: var(--g-testo); cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.crm-pag-b:hover:not(:disabled) { border-color: var(--crmn-tinta, var(--g-blu)); }
.crm-pag-b.qui {
  background: var(--crmn-tinta, var(--g-blu)); border-color: var(--crmn-tinta, var(--g-blu));
  color: var(--g-testo-inv); font-weight: 600;
}
.crm-pag-b:disabled { opacity: .45; cursor: not-allowed; }
.crm-pag-sep { color: var(--g-testo-3); padding: 0 2px; }
.crm-pag-t { margin-left: auto; font-size: var(--f-m); color: var(--g-testo-3); }

/* LE COLONNE SI TRASCINANO. Il bersaglio e' tutta l'intestazione e non una
 * maniglia: accanto a «ordina» e «filtra» un terzo bersaglio da otto pixel
 * non ci sta. */
th[data-col], th.u-th-mobile { cursor: grab; }
th[data-col]:active, th.u-th-mobile:active { cursor: grabbing; }
.crm-th-presa { opacity: .45; }
/* Il segno di dove cadra': una barra sul bordo sinistro, che e' il posto dove
 * la colonna si infila. */
.crm-th-sopra { box-shadow: inset 3px 0 0 var(--crmn-tinta, var(--g-blu)); }

/* I riquadri che aprono la loro schermata: sono bottoni, e si vede. */
.crm-kpi-b { font: inherit; text-align: left; cursor: pointer; }
.crm-kpi-b:hover { border-color: var(--crmn-tinta, var(--g-blu)); }

/* SI STA DENTRO UNA RICERCA SALVATA, e si vede ============================= */
/* Prima l'unico segno era la tendina in cima: dopo tre righe di tabella e'
 * fuori dallo sguardo, e i filtri sembravano venuti da soli. */
.crm-ric-attiva {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--crmn-velo, var(--g-blu-velo)); color: var(--crmn-tinta, var(--g-blu-scuro));
  border-radius: var(--r-pillola); padding: 1px 6px 1px 10px;
  font-size: var(--f-m);
}
.crm-ric-attiva button {
  border: 0; background: none; cursor: pointer; color: inherit;
  display: inline-flex; padding: 2px; opacity: .75;
}
.crm-ric-attiva button:hover { opacity: 1; }

/* IL RIQUADRO DELL'ULTIMO PREZZO: tre numeri invece di uno, quindi un po' piu'
 * largo e con una terza riga. Il fatturato in grande perche' e' la dimensione
 * della cosa; margine, prezzo al pasto e data sotto, perche' dicono com'e'
 * fatta e se e' di ieri o di tre anni fa. */
.crm-kpi-largo { min-width: 190px; }
.crm-kpi-sotto {
  display: block; margin-top: 3px; font-family: var(--g-mono);
  font-size: var(--f-xs); color: var(--g-testo-3);
  font-variant-numeric: tabular-nums;
}

/* L'ORDINAMENTO VALE SU QUESTA PAGINA, e si dice dove si guarda il risultato.
 * Ambra e non rosso: non e' un guasto, e' un limite -- e il rosso qui
 * insegnerebbe a ignorare i rossi veri. */
.crm-avviso-pagina {
  font-size: var(--f-s); color: var(--g-attenzione-testo);
  background: var(--g-attenzione-velo); border: 1px solid var(--g-attenzione-segno);
  border-radius: var(--r-1); padding: 1px 7px; white-space: normal;
}

/* Le due caselle di un intervallo di date portano il loro nome: erano due
 * campi identici, e quale fosse «dal» e quale «al» si scopriva provando. */
.cmp-et {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--f-m); color: var(--g-testo-3);
}
.cmp-et input { flex: 1; }

/* L'ELENCO DELLE CAMPAGNE ================================================== */
.cmp-elenco-camp { margin-top: 26px; }
.cmp-camp {
  display: grid; gap: 4px 14px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--g-carta); border: 1px solid var(--g-bordo);
  border-radius: var(--r-3); padding: 12px 14px; margin-bottom: 8px;
}
.cmp-camp-t { font-size: var(--f-base); }
.cmp-camp-chiusa {
  margin-left: 8px; font-family: var(--g-mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--g-testo-3);
  border: 1px solid var(--g-bordo); border-radius: var(--r-pillola); padding: 0 6px;
}
/* «Quante ne restano» e' il numero con cui si sceglie quale aprire: sta a
 * destra del nome, in mono, dove lo sguardo lo trova senza cercarlo. */
.cmp-camp-n {
  font-family: var(--g-mono); font-size: var(--f-m); color: var(--g-testo-3);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.cmp-camp-n b { color: var(--crmn-tinta); font-size: var(--f-l); }
.cmp-camp-f {
  grid-column: 1 / -1; font-size: var(--f-m); color: var(--g-testo-3);
  font-style: italic; line-height: 1.45;
}
.cmp-camp-a { grid-column: 1 / -1; display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }

/* QUELLO CHE GIA' SAPPIAMO, sulla riga della coda: quanti pasti, che struttura
 * e', quando scade. E' cio' che distingue una riga dall'altra -- senza, novanta
 * righe si somigliano tutte e l'ordine e' quello del database. */
.cod-sa {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: var(--f-m); color: var(--g-testo-3);
}
.cod-sa b {
  font-family: var(--g-mono); font-variant-numeric: tabular-nums;
  color: var(--g-testo); font-weight: 600;
}
.cod-sa-t, .cod-sa-s {
  border: 1px solid var(--g-bordo); border-radius: var(--r-pillola);
  padding: 0 8px; font-size: var(--f-s);
}
/* LA NOTA VA A CAPO, tutta: e' quello che si legge mentre squilla, e su una
 * riga si fermava a meta' della prima frase. */
.cod-nota-aw {
  flex-basis: 100%; font-size: var(--f-m); color: var(--g-testo-3);
  line-height: 1.5; white-space: pre-wrap; margin-top: 3px;
}

/* «Com'è andata» dentro la scheda di un potenziale: il bottone apre lo stesso
 * pannello della coda, che si appende qui sotto. */
.crm-sc-esito { margin: 12px 0 4px; }
.crm-sc-esito .cod-esiti { margin-top: 10px; }


/* IL BANCO DELLE TELEFONATE (Luca, 23/08) ==================================
 * Una telefonata a schermo, la coda accanto. Le regole degli esiti non
 * cambiano: cambia dove stanno, e che stanno sempre nello stesso punto.
 * ====================================================================== */

/* L'ETICHETTINA. La forma e' quella che il CRM nuovo usa gia' nelle testate
 * delle colonne (`.trt-col-h`): mono, minuscola, spaziata. La scrivo una volta
 * perche' la usavo in due punti e non esisteva. */
.crmn-eti {
  font-family: var(--g-mono); font-size: var(--f-xs); letter-spacing: .09em;
  text-transform: uppercase; color: var(--g-testo-3);
}

.cod-avz { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 1 1 220px; }
.cod-avz-b {
  flex: 1 1 auto; height: 6px; min-width: 80px; border-radius: 999px;
  background: var(--g-carta-3); border: 1px solid var(--g-bordo); overflow: hidden;
}
.cod-avz-b i {
  display: block; height: 100%; width: 0;
  background: var(--crmn-tinta, var(--g-blu));
  transition: width .3s cubic-bezier(.32,.72,.28,1);
}

.cod-banco { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .cod-banco { grid-template-columns: 1fr; } }

/* --- la telefonata di adesso --- */
.cod-ora {
  background: var(--g-carta); border: 1px solid var(--g-bordo);
  border-radius: var(--r-3); padding: 18px; box-shadow: var(--om-1);
}
/* IL NUMERO E' LA COSA PIU' GRANDE DELLA PAGINA, ed e' un link: chi apre
 * questa schermata sta telefonando. Nella riga della coda era uno `<span>`. */
.cod-tel-g {
  font-family: var(--g-mono); font-size: clamp(24px, 3.4vw, 34px); font-weight: 600;
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
  color: var(--crmn-tinta, var(--g-blu)); text-decoration: none;
  display: inline-block; padding: 2px 6px; margin-left: -6px; border-radius: var(--r-2);
}
.cod-tel-g:hover { background: var(--crmn-velo, var(--g-blu-velo)); text-decoration: underline; }
/* «Non lo sappiamo» non e' un errore: e' il secondo motivo della telefonata. */
.cod-tel-g.manca {
  color: var(--g-testo-3); font-style: italic; font-size: var(--f-l);
  font-family: inherit; font-weight: 400;
}
.cod-band {
  font-family: var(--g-mono); font-size: var(--f-xs); letter-spacing: .07em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--g-bordo-forte); color: var(--g-testo-2);
  background: var(--g-carta-2); margin-left: 10px; vertical-align: middle;
}
.cod-band.cod-p-scaduto { color: var(--g-attenzione-testo); border-color: var(--g-attenzione-segno); }
.cod-band.cod-p-oggi { color: var(--g-blu); border-color: var(--g-blu); }
.cod-band.cod-p-da_concorrente { color: var(--g-errore); border-color: var(--g-errore-segno); }
.cod-ora-n { margin: 8px 0 0; font-size: var(--f-xl); font-weight: 700; }
.cod-ora-n .cod-apri-scheda {
  border: 0; background: none; font: inherit; color: inherit; padding: 0;
  cursor: pointer; text-align: left;
}
.cod-ora-n .cod-apri-scheda:hover { color: var(--crmn-tinta, var(--g-blu)); text-decoration: underline; }
.cod-ora-d { margin: 1px 0 0; font-size: var(--f-m); color: var(--g-testo-3); }
.cod-ora-p { margin: 10px 0 0; font-size: var(--f-base); font-weight: 500; color: var(--crmn-tinta, var(--g-blu)); }

/* QUELLO CHE GIA' SAPPIAMO: decide se vale la pena chiamare, e va letto
 * mentre squilla — non aperto da qualche parte. */
.cod-sappiamo { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.cod-sap {
  border: 1px solid var(--g-bordo); border-radius: var(--r-2); padding: 5px 10px;
  background: var(--g-carta-2); display: flex; flex-direction: column; gap: 1px; min-width: 92px;
}
.cod-sap-e {
  font-family: var(--g-mono); font-size: 9px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--g-testo-3);
}
.cod-sap-v { font-weight: 600; font-family: var(--g-mono); font-size: var(--f-base); }
.cod-sap.vuoto .cod-sap-v {
  color: var(--g-testo-3); font-weight: 400; font-style: italic;
  font-family: inherit; font-size: var(--f-m);
}
.cod-nota-aw {
  margin-top: 12px; padding: 10px 12px; background: var(--g-carta-3);
  border-radius: var(--r-2); border-left: 2px solid var(--g-bordo-forte);
  font-size: var(--f-base); line-height: 1.45; color: var(--g-testo-2);
}
.cod-nota-aw .crmn-eti { display: block; margin-bottom: 3px; }

/* --- i cinque esiti, sempre nello stesso punto --- */
.cod-esiti-b { margin-top: 16px; border-top: 1px dashed var(--g-bordo-forte); padding-top: 14px; }
.cod-esiti-b .cod-e-nota { width: 100%; }
.cod-cinque { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
@media (max-width: 700px) { .cod-cinque { grid-template-columns: repeat(2, 1fr); } }
.cod-cinque .cod-e { flex-direction: column; align-items: flex-start; gap: 2px; }
.cod-e-k {
  font-family: var(--g-mono); font-size: 9.5px; color: var(--g-testo-3);
  border: 1px solid var(--g-bordo); border-radius: 3px; padding: 0 4px; line-height: 1.4;
}
.cod-e.acceso {
  border-color: var(--crmn-tinta, var(--g-blu));
  background: var(--crmn-velo, var(--g-blu-velo));
  box-shadow: inset 0 -2px 0 var(--crmn-tinta, var(--g-blu));
}
.cod-e-app { display: grid; gap: 8px; margin-top: 10px; }
.cod-a-nota { font-size: var(--f-m); color: var(--g-testo-2); }

/* --- la coda accanto, ordinabile --- */
.cod-fila {
  background: var(--g-carta); border: 1px solid var(--g-bordo);
  border-radius: var(--r-3); overflow: hidden; box-shadow: var(--om-1);
}
.cod-fila-t {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--g-bordo); flex-wrap: wrap;
}
.cod-fila-t .crmn-eti { margin-right: auto; }
.cod-fila-t select { font-size: var(--f-m); padding: 3px 7px; }
.cod-fila ul { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }
.cod-f-r {
  display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 2px 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--g-bordo-tenue); cursor: pointer;
  font-size: var(--f-m);
}
.cod-f-r:hover { background: var(--g-riga-hover); }
.cod-f-r.qui { background: var(--crmn-velo, var(--g-blu-velo)); box-shadow: inset 3px 0 0 var(--crmn-tinta, var(--g-blu)); }
.cod-f-band { width: 6px; height: 6px; border-radius: 50%; align-self: center; background: var(--g-bordo-forte); }
.cod-f-band.cod-p-scaduto { background: var(--g-attenzione-segno); }
.cod-f-band.cod-p-oggi { background: var(--g-blu); }
.cod-f-band.cod-p-da_concorrente { background: var(--g-errore-segno); }
.cod-f-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cod-f-t { font-family: var(--g-mono); font-size: var(--f-s); color: var(--g-testo-2); white-space: nowrap; }
.cod-f-s { grid-column: 2 / -1; font-size: var(--f-s); color: var(--g-testo-3); }
.cod-fila-p { padding: 8px 10px; border-top: 1px solid var(--g-bordo); }
.cod-fila-p button { width: 100%; }


/* LA FRASE CHE ARRIVA MENTRE SCEGLI (Luca, 23/08) ========================= */

/* La frase e' la riga piu' importante della pagina: si legge prima dei
 * criteri, perche' dice cosa hai chiesto in italiano. Mentre si rifa' resta a
 * schermo smorzata — cancellarla a ogni spunta la farebbe lampeggiare. */
.cmp-frase.in-corso { opacity: .55; }
.cmp-in-corso { opacity: .55; }

/* LA CONGIUNZIONE, fra un criterio e l'altro. Piccola e in mezzo, non una
 * tendina in fondo: e' una parola della frase, e si gira cliccandola. */
.cmp-giunto {
  display: block; margin: 2px auto; padding: 1px 12px;
  font-family: var(--g-mono); font-size: var(--f-s); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--g-testo-2); background: var(--g-carta-3);
  border: 1px solid var(--g-bordo); border-radius: 999px; cursor: pointer;
  min-width: 44px;
}
.cmp-giunto:hover {
  background: var(--crmn-tinta, var(--g-blu)); color: var(--g-testo-inv);
  border-color: var(--crmn-tinta, var(--g-blu));
}

/* QUANTO CI VUOLE A CHIAMARLE. E' la cosa che dice se la campagna sta in
 * piedi: 4.100 nomi a venti telefonate al giorno sono duecentocinque giorni. */
.cmp-giorni {
  margin-left: 10px; font-size: var(--f-m); color: var(--g-attenzione-testo);
  font-variant-numeric: tabular-nums;
}


/* 31 · LA RIGA DA CUI SEI USCITO, quando torni. Lampeggia UNA volta: due
 * diventano un allarme, e non c'e' niente che non va — si sta solo dicendo
 * «eccola». */
@keyframes crm-lampo {
  0%, 100% { background: transparent; }
  30%      { background: var(--g-attenzione-velo, #fdf6e6); }
}
tr.crm-lampo > td { animation: crm-lampo 1.5s ease 1; }
@media (prefers-reduced-motion: reduce) {
  /* Senza animazione la riga resta accesa per un attimo e poi torna: il
     messaggio e' lo stesso, il movimento no. */
  tr.crm-lampo > td { animation: none; background: var(--g-attenzione-velo, #fdf6e6); }
}


/* §5.2 · I CAMPI VUOTI SI RIEMPIONO AL TELEFONO ============================ */
.sch-ch-lista { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.sch-ch-lista li { display: grid; gap: 3px; }
.sch-ch-lista label { font-size: var(--f-m); color: var(--g-testo-2); }
.sch-ch-riga { display: flex; align-items: center; gap: 8px; }
.sch-ch-in {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--f-base);
  padding: 5px 9px; border: 1px solid var(--g-bordo-forte);
  border-radius: var(--r-2); background: var(--g-carta); color: var(--g-testo);
  transition: border-color .18s, box-shadow .18s;
}
.sch-ch-in.ok { border-color: var(--g-ok-segno, var(--g-ok)); box-shadow: 0 0 0 3px var(--g-ok-velo); }
.sch-ch-in.no { border-color: var(--g-errore-segno); box-shadow: 0 0 0 3px var(--g-errore-velo); }
/* L'esito sta ACCANTO al campo, dove si sta gia' guardando: un avviso in un
 * angolo dello schermo, mentre si ascolta qualcuno, non lo vede nessuno. */
.sch-ch-esito {
  font-size: var(--f-s); color: var(--g-testo-3); min-width: 96px;
  white-space: nowrap;
}
.sch-ch-in.ok ~ .sch-ch-esito { color: var(--g-ok-testo); }
.sch-ch-in.no ~ .sch-ch-esito { color: var(--g-errore); font-weight: 600; }