/**
 * REPO: dashboard-consulenti
 * MODULE: css/centro-rinnovi-scheda.css
 * PURPOSE: Veste la «Scheda rinnovo» del Centro Rinnovi (js/centro-rinnovi-
 *          scheda.js, classi crs-*): presentazione INLINE dentro la terza
 *          colonna (#cr-dettaglio, sempre visibile su desktop) e foglio a
 *          tutto schermo dal basso su mobile. Design SOLO BIANCO, "carta
 *          editoriale": nessuna variabile scritta alla lettera, solo i
 *          gettoni --cr-* definiti da B2 su body.cr-app (css/
 *          centro-rinnovi.css), ciascuno con un fallback proprio cosi' il
 *          file resta autonomo anche fuori da quella pagina (demo/test).
 * DEPENDENCIES: css/centro-rinnovi.css (gettoni --cr-* su body.cr-app —
 *          STESSI nomi, non si toccano senza coordinarsi con B2). Caricato
 *          DOPO quel foglio.
 * EXPOSES: nessuna classe consumata da altri file: #cr-dettaglio e le classi
 *          crs-* sono private di questo componente.
 * LAST REVIEWED: 2026-10-05
 * WARNINGS: .crs-root--mobile e' position:fixed apposta per poter vivere
 *          DENTRO #cr-dettaglio e coprire comunque tutto il viewport (vedi
 *          WARNING in centro-rinnovi.css: nessun antenato di #cr-dettaglio ha
 *          transform/filter/perspective/contain). Non aggiungere nessuna di
 *          quelle proprieta' a .crs-root--inline ne' a un suo genitore, o il
 *          foglio mobile si romperebbe. La durata delle transizioni del
 *          foglio mobile (qui .26s) e' usata anche dal JS (il timeout prima
 *          di rimettere [hidden] in chiudi()): se si cambia qui, va cambiata
 *          anche la'. Sofia Pro esiste solo in 200/300/400/500/700/900: MAI
 *          font-weight:600 in questo file (non esiste il SemiBold dritto, il
 *          browser lo fingerebbe) — dove c'era (§6/§7/§11, versione
 *          precedente) e' stato portato a 500 o 700.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-02 [AI] Added: riscrittura completa (operaio C3) — bozza scura di
 *            oggi mai committata, sovrascritta. Design SOLO BIANCO su
 *            gettoni --cr-*, doppia presentazione (inline + mobile) al posto
 *            del singolo pannello laterale scuro della prima stesura.
 * 2026-10-03 [AI] Modified (operaio E): icone SVG in linea (.crs-ic, al posto
 *            delle emoji); avatar con iniziali (.crs-avatar, 6 tinte tenue
 *            FUORI dai colori semantici verde/ambra/rosso); barra di
 *            contatto rapido con «Chiama» evidente (pillola nera, piu'
 *            larga) e WhatsApp pieno verde; riga «Richiamo» compatta nella
 *            testa (.crs-richiamo-riga, prima sezione .crs-prossima-azione
 *            separata — quelle regole restano, non piu' usate dall'HTML ma
 *            non cancellate: vedi WARNING su candidati rimozione sotto §8);
 *            esito a tessere grandi (.crs-esito-tessere/tessera) con numero
 *            scorciatoia; frasi pronte (.crs-frasi-pronte); vista «Salvato»
 *            (.crs-registra-contatto--salvato, .crs-salvato-badge,
 *            .crs-btn-prossimo) con pulsante Salva sticky su mobile; pallino
 *            colorato + icona canale nello storico. Risalto
 *            .crs-rapido-flash. Sei occorrenze di font-weight:600 portate a
 *            500/700 (vedi WARNING).
 * 2026-10-03 [AI] Modified (regista): «Cambia» del richiamo subito accanto
 *            al testo (prima margin-left:auto lo faceva galleggiare a capo);
 *            nascosto il suggerimento Ctrl/Cmd+Invio nel piede mobile.
 * 2026-10-03 [AI] Fixed (operaio G): niente arancione — --cr-amber ora e' il
 *            giallo marchio (regista). Qui "ambra/attesa" era usato anche
 *            come colore di TESTO (.crs-badge--attesa, .crs-countdown--
 *            vicino, .crs-esito-tessera--esito-attesa) e come testo bianco
 *            su riempimento pieno (.crs-segmento--esito-attesa.is-attivo,
 *            .crs-esito-tessera--esito-attesa.is-attivo): col giallo diventa
 *            illeggibile (giallo su bianco o su giallo chiaro, bianco su
 *            giallo). Testo portato a --cr-ink dove il resto rimane su
 *            sfondo chiaro/bianco, a --cr-accent-ink dove il riempimento e'
 *            il giallo pieno (stesso trattamento gia' usato altrove per
 *            testo-su-giallo-marchio, es. .crs-segmento.is-attivo). Bordi
 *            sottili ambra su bianco (a riposo) rinforzati al 45% invece di
 *            30/35% per restare visibili col giallo, piu' chiaro
 *            dell'arancione di prima. Fallback letterali #C77700/#FFF3DD
 *            aggiornati a #FFD60A/#FFF4B8.
 * 2026-10-04 [AI] Added (operaio A): sezione 6.5 MYBOARD -- blocco
 *            facoltativo nel compositore (.crs-myboard-blocco e figli: due
 *            scelte a bottone --si/--no, gettoni ID con X, campo + contatore
 *            + errore). Niente arancione/ambra: --si attivo usa --cr-green
 *            (stesso verde "bene" di .crs-esito-scelta--ok), --no attivo usa
 *            --cr-ink (informativo, non e' un "ko" -- il rosso resta
 *            riservato a ritardo/errore). .crs-timeline-icona--mini e
 *            .crs-timeline-myboard per il nuovo storico (esito come
 *            etichetta principale, canale solo icona).
 * 2026-10-04 [AI] Modified (operaio A2, CONTRATTO-3): .crs-countdown-fonte
 *            (sotto la didascalia del conto alla rovescia): testo semplice
 *            per --vera, gettone giallo tenue per --ipotetica (stessi colori
 *            di .crs-badge--attesa). Sezione 6.5 MYBOARD RISCRITTA: il
 *            blocco non vive piu' dentro .crs-campo del compositore ma come
 *            sezione propria nella card contatti (.crs-myboard-blocco con
 *            margin-top/border-top invece che la gabbia di .crs-campo),
 *            tolta .crs-myboard-telefono (il numero e' gia' sopra, nella
 *            riga telefono — rimasta come CANDIDATA RIMOZIONE, AGENTS.md
 *            §7). Nuove: .crs-myboard-head/.crs-myboard-aiuto/.crs-myboard-
 *            salvataggio(--ok/--errore)/.crs-myboard-riprova/.crs-myboard-
 *            segnalato per lo stato "si salva da solo" e la riga «Segnalato
 *            al team leader». Sezione 5 CONTATTO RAPIDO: .crs-azione-avviso
 *            (pallino rosso con "!" sul pulsante Chiama quando il numero e'
 *            segnalato errato); .crs-contatto-riga-azioni, .crs-segnala-btn,
 *            .crs-segnala-conferma, .crs-contatto-riga--segnalata, .crs-
 *            numero-segnalato per la campanella «Segnala numero errato» e il
 *            suo esito (rosso tenue, stesso linguaggio di .crs-errore).
 * 2026-10-04 [AI] Modified (operaio W3, CONTRATTO-4 punti 3 e 4, richiesta
 *            utente): nota su .crs-registra-contatto--salvato (si richiude
 *            da sola dopo ~2,5s via JS, niente piu' pulsante sotto il badge);
 *            .crs-btn-prossimo/.crs-hint--prossimo marcate CANDIDATE RIMOZIONE
 *            (non generate mentre PROSSIMO_CLIENTE_ATTIVO e' spento, regole
 *            NON cancellate — AGENTS.md). Nuova sezione 6.6 VERIFICA TL:
 *            .crs-verifica-tl/-riga/-testo/-nota per il riquadro «Verificato
 *            dal team leader» in coda alla card contatti — riusa i gettoni
 *            badge esistenti (--ok/--neutro/--no), niente arancione.
 * 2026-10-05 [AI] Added (operaio W3, CONTRATTO-6): campanella «Già in
 *            contatto con un altro consulente?» sotto le pastiglie della
 *            testata (sezione 3 EROE) — .crs-altro-riga/-apri-btn (chiuso),
 *            .crs-altro-form/-form-azioni (campo aperto, riusa .crs-input/
 *            .crs-campo-label/.crs-btn-secondario/.crs-btn-testo esistenti),
 *            .crs-altro-fascia/-annulla (segnalato: fascia GIALLA tenue,
 *            STESSI colori di .crs-badge--attesa — niente arancione, testo
 *            nero). Nessuna classe nuova per la pastiglia aggiuntiva in
 *            .crs-badge-riga quando segnalato: riusa .crs-badge--attesa.
 * 2026-10-05 [AI] Added (operaio W5, CONTRATTO-7): 6° esito di contatto
 *            'altro_consulente' — TONO NEUTRO (grigio/inchiostro, MAI verde/
 *            rosso/giallo/arancione): nuove .crs-esito-tessera--esito-neutro
 *            (a riposo e .is-attivo, stesso schema delle altre 3 varianti
 *            esito) e .crs-esito-riepilogo--neutro (badge «Esito del
 *            rinnovo» quando il contratto e' chiuso con questo esito, stessi
 *            colori di .crs-badge--neutro). .crs-timeline-pallino--neutro
 *            esplicita (prima il fallback 'neutro' di renderStorico() per i
 *            contatti senza esito ricadeva gia' nel grigio di base di
 *            .crs-timeline-pallino, senza una regola propria: ora c'e' per
 *            chiarezza, nessun cambio visivo). .crs-esito-altro-blocco (campo
 *            nome facoltativo + conferma in linea nel compositore) riusa
 *            SOLO classi esistenti (.crs-campo/.crs-input/.crs-conferma-riga/
 *            .crs-btn-secondario/.crs-btn-testo): nessuna classe nuova per
 *            quel blocco.
 */

/* ===================================================== 1 · STRUTTURA ===== */

.crs-root{
  font-family:var(--cr-font, 'Sofia Pro', system-ui, sans-serif);
  color:var(--cr-ink, #121212);
}
.crs-root *{ box-sizing:border-box; }

/* Icone SVG in linea (icona() in centro-rinnovi-scheda.js), al posto delle
   emoji: dimensione fissa, currentColor (seguono sempre il colore del testo
   circostante), mai deformate dal flex del genitore. */
.crs-ic{ width:18px; height:18px; flex:0 0 auto; display:inline-block; vertical-align:middle; }
.crs-ic--lg{ width:26px; height:26px; }

/* ---- presentazione INLINE (dentro #cr-dettaglio) ---- */
.crs-root--inline{
  height:100%;
  display:flex;
  flex-direction:column;
  min-width:0;
  container-type:inline-size;
  container-name:crs;
  opacity:1;
  transition:opacity .18s ease;
}
.crs-root--inline.crs-dissolvenza{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .crs-root--inline{ transition:none; }
}

.crs-root--inline .crs-scroll{
  flex:1; min-height:0; overflow-y:auto;
  padding:1.4rem 1.4rem 2.4rem;
  display:flex; flex-direction:column; gap:1.1rem;
}

/* ---- presentazione MOBILE (foglio a tutto schermo dal basso) ---- */
.crs-root--mobile{
  position:fixed; inset:0; z-index:2000;
}
.crs-root--mobile[hidden]{ display:none; }

.crs-mobile-overlay{
  position:absolute; inset:0;
  background:color-mix(in srgb, var(--cr-ink, #121212) 38%, transparent);
  opacity:0;
  transition:opacity .22s ease;
}
.crs-root--mobile.crs-aperto .crs-mobile-overlay{ opacity:1; }

.crs-mobile-panel{
  position:absolute; left:0; right:0; bottom:0; top:0;
  display:flex; flex-direction:column;
  background:var(--cr-bg, #FFFFFF);
  transform:translateY(100%);
  transition:transform .26s ease;
  outline:none;
  container-type:inline-size;
  container-name:crs;
}
.crs-root--mobile.crs-aperto .crs-mobile-panel{ transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  .crs-mobile-overlay, .crs-mobile-panel{ transition:none; }
  .crs-salvato-badge .crs-ic{ animation:none; }
}

.crs-mobile-bar{
  flex:0 0 auto;
  display:flex; align-items:center;
  padding:.9rem 1rem;
  border-bottom:1px solid var(--cr-line, #ECEAE4);
}
.crs-mobile-indietro{
  display:flex; align-items:center; gap:.4rem;
  background:none; border:none; cursor:pointer;
  color:var(--cr-ink, #121212); font-family:inherit;
  font-size:.95rem; font-weight:700; padding:.4rem .2rem;
}
.crs-mobile-indietro:hover{ color:var(--cr-ink-2, #4F4D47); }

.crs-root--mobile .crs-scroll{
  flex:1; min-height:0; overflow-y:auto;
  padding:1.2rem 1.1rem 2.4rem;
  display:flex; flex-direction:column; gap:1.1rem;
}

/* Il pulsante Salva/Prossimo cliente resta sempre raggiungibile in basso nel
   foglio mobile: footer VERO (.crs-mobile-footer), fratello di .crs-scroll
   fuori dall'area che scorre — non position:sticky dentro la sezione del
   compositore. 2026-10-03 [AI]: la prima versione usava sticky dentro
   .crs-registra-contatto, ma quella sezione (5 tessere esito + nota + frasi
   + richiami) e' spesso piu' alta dello schermo: lo sticky restava incollato
   al bordo inferiore del VIEWPORT fin da subito (e' li' che punta bottom:0),
   finendo SOPRA/accanto a campi non ancora scorsi invece che in fondo a
   tutti loro (visto nelle foto di verifica). Scartata anche la via
   "genera due volte, nascondi quella nello scroll via CSS": lasciava due
   bottoni con lo stesso data-azione="registra-contatto" nel DOM (uno
   display:none) — un selettore come puppeteer click('[data-azione=
   "registra-contatto"]') prende sempre il PRIMO nodo nell'ordine del DOM,
   che sarebbe quello nascosto. Soluzione finale: renderRegistraContatto
   (js) genera il pulsante (renderComposerAzioni) SOLO quando
   State.modo!=='mobile' — su mobile l'UNICO pulsante e' quello nel footer,
   nessuna duplicazione, nessun CSS da nascondere. */

.crs-mobile-footer{
  flex:0 0 auto;
  padding:.8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom, 0px));
  background:var(--cr-bg, #FFFFFF);
  border-top:1px solid var(--cr-line, #ECEAE4);
}
.crs-mobile-footer[hidden]{ display:none; }
.crs-mobile-footer .crs-invia-riga{ margin-top:0; justify-content:center; }
.crs-mobile-footer .crs-hint,
.crs-mobile-footer .crs-hint--prossimo{ display:block; text-align:center; margin-top:.4rem; }
/* Su telefono la scorciatoia da tastiera non serve: resta solo «oppure tasto N». */
.crs-mobile-footer .crs-hint:not(.crs-hint--prossimo){ display:none; }

/* ===================================================== 2 · SEZIONI BASE === */
.crs-section{
  background:var(--cr-paper, #FAFAF7);
  border:1px solid var(--cr-line, #ECEAE4);
  border-radius:var(--cr-radius, 14px);
  padding:1.1rem 1.2rem;
}
.crs-section-titolo{
  margin:0 0 .9rem; font-size:.78rem; font-weight:700; color:var(--cr-ink-2, #4F4D47);
  text-transform:uppercase; letter-spacing:.07em;
}

/* ===================================================== 3 · EROE ========= */
.crs-eroe{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1.4rem; flex-wrap:wrap;
  padding:.2rem .1rem .4rem;
}
.crs-eroe-identita{ display:flex; align-items:flex-start; gap:.85rem; min-width:0; flex:1 1 260px; }
.crs-eroe-info{ min-width:0; flex:1 1 auto; }

/* Avatar tondo con iniziali: tinta presa da tintaAvatar(nome) — 6 coppie
   sfondo/inchiostro TENUI, deliberatamente fuori dai colori semantici
   verde/ambra/rosso/giallo-marchio gia' in uso per gli stati, cosi' non si
   legge come "stato" del cliente. */
.crs-avatar{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1rem; letter-spacing:.01em;
  font-family:var(--cr-font, 'Sofia Pro', system-ui, sans-serif);
  user-select:none;
}
.crs-avatar--av-blu{ background:#E3EDFB; color:#2C5FA8; }
.crs-avatar--av-lilla{ background:#EDE3FB; color:#6A4FA0; }
.crs-avatar--av-rosa{ background:#FBE3EE; color:#A8457B; }
.crs-avatar--av-turchese{ background:#DFF4F1; color:#1E8A7C; }
.crs-avatar--av-terra{ background:#F7E7D7; color:#9A5B23; }
.crs-avatar--av-slate{ background:#E6EAEE; color:#46586B; }
@media (max-width:420px){
  .crs-avatar{ width:44px; height:44px; font-size:.9rem; }
}
.crs-eyebrow{
  margin:0 0 .35rem; color:var(--cr-ink-3, #8C897F); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
}
.crs-nome{
  margin:0 0 .3rem; font-size:30px; font-weight:700; color:var(--cr-ink, #121212);
  letter-spacing:-.015em; line-height:1.15; word-break:break-word;
}
.crs-eroe-sottotitolo{
  margin:0 0 .7rem; color:var(--cr-ink-2, #4F4D47); font-size:.92rem;
}
.crs-badge-riga{ display:flex; flex-wrap:wrap; gap:.4rem; }
.crs-badge{
  display:inline-flex; align-items:center;
  padding:.3rem .7rem; border-radius:999px;
  font-size:.74rem; font-weight:700; white-space:nowrap;
  border:1px solid transparent;
}
.crs-badge--neutro{ background:var(--cr-paper, #FAFAF7); color:var(--cr-ink-2, #4F4D47); border-color:var(--cr-line-2, #DEDBD2); }
.crs-badge--attesa{ background:var(--cr-amber-soft, #FFF4B8); color:var(--cr-ink, #121212); border-color:color-mix(in srgb, var(--cr-amber, #FFD60A) 45%, transparent); }
.crs-badge--ok{ background:var(--cr-green-soft, #E6F4EC); color:var(--cr-green, #1F8A5B); border-color:color-mix(in srgb, var(--cr-green, #1F8A5B) 30%, transparent); }
.crs-badge--no{ background:var(--cr-red-soft, #FDECEC); color:var(--cr-red, #D93636); border-color:color-mix(in srgb, var(--cr-red, #D93636) 30%, transparent); }
.crs-badge--mini{ padding:.14rem .5rem; font-size:.66rem; }

/* 2026-10-05 [AI] Added (operaio W3, CONTRATTO-6) — campanella «Già in
   contatto con un altro consulente?» (renderAltroConsulenteRiga, js), SUBITO
   SOTTO .crs-badge-riga sopra: stesso posto di .crs-richiamo-riga (§8), tre
   stati. (1) chiuso/riga semplice: riusa la stessa riga compatta icona+testo
   di .crs-richiamo-riga (icona neutra, testo cliccabile sottolineato in
   hover). (2) form aperto: riquadro chiaro (stesso --cr-paper di
   .crs-segnala-conferma) con campo .crs-input + due pulsanti. (3) segnalato:
   fascia GIALLA tenue (--cr-amber-soft/--cr-amber, STESSI colori di
   .crs-badge--attesa — niente arancione, testo nero --cr-ink) col nome del
   collega + «Annulla segnalazione» in nero sottolineato (non rosso: qui non
   e' un errore, e' solo un dato in verifica). */
.crs-altro-riga{ margin-top:.5rem; }
/* 2026-10-05 [AI] (regista): campanella ROSSA sopra il numero dei giorni, unico
   accesso alla segnalazione «già in contatto con un altro consulente». */
.crs-altro-campanella{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin:0 0 .35rem; padding:0; flex:0 0 auto;
  border-radius:999px; border:1.5px solid var(--cr-red, #D93636);
  background:var(--cr-red-soft, #FDECEC); color:var(--cr-red, #D93636);
  cursor:pointer; transition:background .15s ease, transform .15s ease;
}
.crs-altro-campanella .crs-ic{ width:18px; height:18px; }
.crs-altro-campanella:hover:not(:disabled), .crs-altro-campanella.is-aperta{ background:var(--cr-red, #D93636); color:#fff; }
.crs-altro-campanella:active:not(:disabled){ transform:scale(.94); }
.crs-altro-campanella:focus-visible{ outline:2px solid var(--cr-ink, #121212); outline-offset:2px; }
.crs-altro-campanella:disabled{ opacity:.5; cursor:default; }
.crs-altro-campanella--attiva{ background:var(--cr-red, #D93636); color:#fff; cursor:default; }
.crs-altro-apri-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background:none; border:none; padding:0; margin:0;
  color:var(--cr-ink-2, #4F4D47); font-family:inherit; font-weight:500; font-size:.86rem; cursor:pointer;
  transition:color .15s ease;
}
.crs-altro-apri-btn .crs-ic{ color:var(--cr-ink-3, #8C897F); flex:0 0 auto; width:16px; height:16px; }
.crs-altro-apri-btn:hover:not(:disabled){ color:var(--cr-ink, #121212); }
.crs-altro-apri-btn:hover:not(:disabled) span{ text-decoration:underline; text-underline-offset:2px; }
.crs-altro-apri-btn:disabled{ opacity:.5; cursor:default; }

.crs-altro-form{
  margin-top:.6rem; padding:.7rem .8rem;
  background:var(--cr-paper, #FAFAF7); border:1px solid var(--cr-line, #ECEAE4);
  border-radius:var(--cr-radius-sm, 10px);
  display:flex; flex-direction:column; gap:.5rem;
}
.crs-altro-form-azioni{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

.crs-altro-fascia{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  margin-top:.6rem; padding:.6rem .8rem;
  background:var(--cr-amber-soft, #FFF4B8); color:var(--cr-ink, #121212);
  border:1px solid color-mix(in srgb, var(--cr-amber, #FFD60A) 45%, transparent);
  border-radius:var(--cr-radius-sm, 10px);
  font-size:.84rem;
}
.crs-altro-fascia b{ font-weight:700; }
.crs-altro-annulla{
  color:var(--cr-ink, #121212); padding:0; font-size:inherit; font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
}
.crs-altro-annulla:hover:not(:disabled){ opacity:.7; }

.crs-countdown{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; text-align:right;
}
.crs-countdown-numero{
  font-family:var(--cr-font, 'Sofia Pro', system-ui, sans-serif);
  font-weight:300; font-size:64px; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--cr-ink, #121212);
}
.crs-countdown-didascalia{ margin-top:.3rem; font-size:.82rem; color:var(--cr-ink-3, #8C897F); white-space:nowrap; }
.crs-countdown--scaduto .crs-countdown-numero,
.crs-countdown--scaduto .crs-countdown-didascalia{ color:var(--cr-red, #D93636); }
.crs-countdown--vicino .crs-countdown-numero{
  color:var(--cr-ink, #121212); background:var(--cr-amber-soft, #FFF4B8);
  border-radius:10px; padding:0 .12em;
}

/* 2026-10-04 [AI] Da dove viene la data di scadenza (cd.fonte, js): testo
   semplice per --vera (e' il caso normale, non serve risalto), gettone
   giallo tenue per --ipotetica (STESSI colori di .crs-badge--attesa: e' un
   avviso "attenzione, e' una stima" — niente arancione). */
.crs-countdown-fonte{ margin-top:.3rem; font-size:.72rem; color:var(--cr-ink-3, #8C897F); }
.crs-countdown-fonte--ipotetica{
  display:inline-flex; align-items:center;
  padding:.14rem .6rem; border-radius:999px; font-weight:700;
  background:var(--cr-amber-soft, #FFF4B8); color:var(--cr-ink, #121212);
  border:1px solid color-mix(in srgb, var(--cr-amber, #FFD60A) 45%, transparent);
}

@media (max-width:420px){
  .crs-countdown{ align-items:flex-start; text-align:left; }
  .crs-countdown-numero{ font-size:48px; }
}

/* ===================================================== 4 · PRENDI IN CARICO */
.crs-fascia-prendi{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--cr-accent-soft, #FFF6CC);
  border:1px solid color-mix(in srgb, var(--cr-accent, #FFD100) 55%, transparent);
  border-radius:var(--cr-radius, 14px);
  padding:.9rem 1rem;
}
.crs-prendi-cta{
  align-self:flex-start;
  padding:.75rem 1.4rem; border-radius:999px;
  background:var(--cr-ink, #121212); color:#fff; border:1px solid var(--cr-ink, #121212);
  font-family:inherit; font-weight:700; font-size:.92rem; cursor:pointer;
  transition:filter .15s ease, transform .15s ease;
}
.crs-prendi-cta:hover:not(:disabled){ filter:brightness(1.3); transform:translateY(-1px); }
.crs-prendi-cta:disabled{ opacity:.6; cursor:default; transform:none; }

/* ===================================================== 5 · CONTATTO RAPIDO */
/* 2026-10-03 [AI] «Chiama» e' la piu' evidente (colonna piu' larga, pillola
   nera lucida col numero sotto); WhatsApp pieno verde, Email contorno
   neutro (terziario) — prima tutte e tre erano uguali (bianco + hover). */
.crs-azioni-grandi{ display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:.6rem; margin-bottom:.9rem; }
.crs-azione-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem .5rem; border-radius:var(--cr-radius-sm, 10px);
  background:#fff; border:1px solid var(--cr-line-2, #DEDBD2);
  color:var(--cr-ink, #121212); font-weight:700; font-size:.86rem; text-decoration:none; text-align:left;
  transition:border-color .15s ease, background .15s ease, transform .15s ease, filter .15s ease;
}
.crs-azione-btn .crs-ic{ width:20px; height:20px; }
.crs-azione-btn-testi{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.crs-azione-btn-testi strong{ font-weight:700; font-size:.92rem; line-height:1.1; }
.crs-azione-btn-testi small{ font-weight:500; font-size:.72rem; opacity:.82; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.crs-azione-btn:hover{ border-color:var(--cr-ink, #121212); transform:translateY(-1px); }
.crs-azione-btn--chiama{
  background:var(--cr-ink, #121212); border-color:var(--cr-ink, #121212); color:#fff;
  justify-content:flex-start;
}
.crs-azione-btn--chiama:hover{ filter:brightness(1.25); border-color:var(--cr-ink, #121212); }
.crs-azione-btn--whatsapp{ background:var(--cr-green, #1F8A5B); border-color:var(--cr-green, #1F8A5B); color:#fff; justify-content:center; }
.crs-azione-btn--whatsapp:hover{ filter:brightness(1.12); border-color:var(--cr-green, #1F8A5B); }
.crs-azione-btn--email:hover{ background:var(--cr-paper, #FAFAF7); border-color:var(--cr-ink, #121212); }
.crs-azione-btn[aria-disabled="true"]{ opacity:.35; pointer-events:none; }

/* 2026-10-04 [AI] Pallino rosso con "!" sul pulsante Chiama quando
   c.gestione_numero_errato e' vero (js: renderContattoRapido) — resta
   sempre cliccabile, e' solo un avviso "da verificare", non un blocco. */
.crs-azione-avviso{
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:.35rem; border-radius:50%;
  background:var(--cr-red, #D93636); color:#fff; font-size:.65rem; font-weight:700;
  vertical-align:middle; line-height:1;
}

.crs-contatto-dettagli{ display:flex; flex-direction:column; gap:.4rem; }
.crs-contatto-riga{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:#fff; border:1px solid var(--cr-line, #ECEAE4); border-radius:var(--cr-radius-sm, 10px);
  padding:.5rem .7rem;
}
.crs-contatto-riga .crs-contatto-valore{ color:var(--cr-ink, #121212); font-size:.86rem; word-break:break-word; }
/* 2026-10-04 [AI] Azioni della riga telefono (Copia + campanella), un solo
   gruppo flex a destra — vedi renderTelefonoRiga (js). */
.crs-contatto-riga-azioni{ display:flex; align-items:center; gap:.4rem; flex:0 0 auto; }
.crs-copia-btn{
  flex:0 0 auto; background:none; border:1px solid var(--cr-line-2, #DEDBD2); color:var(--cr-ink-2, #4F4D47);
  font-family:inherit; border-radius:999px; padding:.25rem .7rem; font-size:.74rem; font-weight:700; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.crs-copia-btn:hover{ color:var(--cr-ink, #121212); border-color:var(--cr-ink, #121212); }
.crs-copia-btn.is-copiato{ color:var(--cr-green, #1F8A5B); border-color:color-mix(in srgb, var(--cr-green, #1F8A5B) 50%, transparent); }

/* Campanella «Segnala numero errato» (renderTelefonoRiga): stesso stile
   tondo discreto di .crs-myboard-chip-x, tinta rossa solo in hover/focus
   (a riposo e' neutra: non e' ancora una segnalazione attiva). */
.crs-segnala-btn{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; background:none;
  border:1px solid var(--cr-line-2, #DEDBD2); border-radius:999px;
  color:var(--cr-ink-2, #4F4D47); cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.crs-segnala-btn .crs-ic{ width:15px; height:15px; }
.crs-segnala-btn:hover{ color:var(--cr-red, #D93636); border-color:var(--cr-red, #D93636); }

/* Conferma in linea prima di inviare la segnalazione. */
.crs-segnala-conferma{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.6rem .7rem; border-radius:var(--cr-radius-sm, 10px);
  background:var(--cr-paper, #FAFAF7); border:1px solid var(--cr-line, #ECEAE4);
  font-size:.82rem; color:var(--cr-ink-2, #4F4D47);
}

/* Riga telefono gia' segnalata come errata: rossa tenue, stesso linguaggio
   di .crs-errore — «in verifica» perche' la correzione la fa il TL (CONTRATTO-3). */
.crs-contatto-riga--segnalata{
  background:var(--cr-red-soft, #FDECEC);
  border-color:color-mix(in srgb, var(--cr-red, #D93636) 30%, transparent);
}
.crs-contatto-riga--segnalata .crs-contatto-valore{ color:var(--cr-red, #D93636); }
.crs-numero-segnalato{
  margin:-.1rem 0 0; font-size:.78rem; color:var(--cr-red, #D93636);
}
.crs-numero-segnalato .crs-btn-testo{
  color:var(--cr-red, #D93636); padding:0; font-size:inherit; font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
}
.crs-numero-segnalato .crs-btn-testo:hover:not(:disabled){ filter:brightness(1.3); }

@media (max-width:420px){
  .crs-azioni-grandi{ gap:.4rem; }
  .crs-azione-btn{ font-size:.78rem; padding:.7rem .3rem; }
}

/* ===================================================== 6 · CAMPI / FORM == */
.crs-campo{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:.9rem; }
.crs-campo:last-child{ margin-bottom:0; }
.crs-campo-label{
  color:var(--cr-ink-3, #8C897F); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
}
.crs-segmenti{ display:flex; gap:.4rem; flex-wrap:wrap; }
.crs-segmento{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#fff; border:1px solid var(--cr-line-2, #DEDBD2); color:var(--cr-ink-2, #4F4D47);
  font-family:inherit; border-radius:999px; padding:.5rem 1rem; font-weight:700; font-size:.84rem; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.crs-segmento:hover:not(:disabled){ border-color:var(--cr-ink, #121212); }
.crs-segmento.is-attivo{ background:var(--cr-accent, #FFD100); border-color:var(--cr-accent, #FFD100); color:var(--cr-accent-ink, #1F1A00); }
.crs-segmento--esito-ok.is-attivo{ background:var(--cr-green, #1F8A5B); border-color:var(--cr-green, #1F8A5B); color:#fff; }
.crs-segmento--esito-attesa.is-attivo{ background:var(--cr-amber, #FFD60A); border-color:var(--cr-amber, #FFD60A); color:var(--cr-accent-ink, #1F1A00); }
.crs-segmento--esito-no.is-attivo{ background:var(--cr-red, #D93636); border-color:var(--cr-red, #D93636); color:#fff; }
.crs-segmento:disabled{ opacity:.5; cursor:default; }

.crs-input, .crs-nota-textarea, .crs-azione-data, .crs-prossima-input{
  width:100%; background:#fff; border:1px solid var(--cr-line-2, #DEDBD2); border-radius:var(--cr-radius-sm, 10px);
  color:var(--cr-ink, #121212); padding:.55rem .7rem; font-size:.88rem; font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.crs-input:focus, .crs-nota-textarea:focus, .crs-azione-data:focus, .crs-prossima-input:focus{
  outline:none; border-color:var(--cr-ink, #121212); box-shadow:0 0 0 3px var(--cr-accent-soft, #FFF6CC);
}
.crs-nota-textarea{ resize:vertical; min-height:68px; }
.crs-nota-textarea::placeholder, .crs-input::placeholder{ color:var(--cr-ink-3, #8C897F); }
.crs-nota-contatore{ text-align:right; color:var(--cr-ink-3, #8C897F); font-size:.72rem; }

.crs-chip{
  padding:.4rem .8rem; border-radius:999px;
  background:var(--cr-paper, #FAFAF7); border:1px solid var(--cr-line-2, #DEDBD2); color:var(--cr-ink-2, #4F4D47);
  font-family:inherit; font-size:.8rem; font-weight:700; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.crs-chip:hover:not(:disabled){ border-color:var(--cr-ink, #121212); color:var(--cr-ink, #121212); }
.crs-chip.is-attivo{ background:var(--cr-accent, #FFD100); border-color:var(--cr-accent, #FFD100); color:var(--cr-accent-ink, #1F1A00); }
.crs-chip-riga{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.crs-azione-shortcuts{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.crs-azione-data{ width:auto; flex:0 0 auto; }

/* Frasi pronte sotto la nota (aggiungiFraseANota): pastiglie piu' piccole e
   discrete delle chip "prossimo richiamo", solo per non competere con loro
   — stesso comportamento/hover di .crs-chip, solo dimensione. */
.crs-frasi-pronte{ display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0 .3rem; }
.crs-chip--frase{ font-size:.74rem; padding:.3rem .65rem; }

/* Risalto dopo un tocco sulla barra di contatto rapido (azioneContatto
   RapidoClic): «Hai chiamato NOME: com'è andata?» — tinta accento tenue,
   si autonasconde da solo dopo 6s (vedi JS), niente bordo pesante. */
.crs-rapido-flash{
  margin:0 0 .9rem; padding:.6rem .8rem; border-radius:var(--cr-radius-sm, 10px);
  background:var(--cr-accent-soft, #FFF6CC); color:var(--cr-accent-ink, #1F1A00);
  font-weight:700; font-size:.86rem;
}

.crs-invia-riga{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:.9rem; }
.crs-hint{ color:var(--cr-ink-3, #8C897F); font-size:.74rem; }

.crs-errore{
  margin:.6rem 0 0; padding:.6rem .8rem; border-radius:var(--cr-radius-sm, 10px);
  background:var(--cr-red-soft, #FDECEC); color:var(--cr-red, #D93636); font-size:.84rem;
  border:1px solid color-mix(in srgb, var(--cr-red, #D93636) 30%, transparent);
}
.crs-vuoto{ margin:0; color:var(--cr-ink-3, #8C897F); font-size:.86rem; }

/* Vista «Salvato ✓» (al posto del form, dopo un contatto registrato con
   successo): badge verde centrato. 2026-10-04 [AI] (operaio W3, CONTRATTO-4
   punto 3, richiesta utente): si richiude DA SOLA dopo ~2,5s (JS:
   pianificaAutoDismissSalvato) — il consulente resta sullo stesso cliente,
   niente piu' pulsante sotto il badge. */
.crs-registra-contatto--salvato{ display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center; }
.crs-salvato-badge{
  display:flex; align-items:center; gap:.5rem; color:var(--cr-green, #1F8A5B);
  font-weight:700; font-size:1.05rem; margin-bottom:.4rem;
}
.crs-salvato-badge .crs-ic{ width:24px; height:24px; animation:crs-spunta .32s ease; }
@keyframes crs-spunta{ from{ transform:scale(.6); opacity:0; } to{ transform:scale(1); opacity:1; } }
.crs-registra-contatto--salvato .crs-invia-riga{ width:100%; justify-content:center; }
/* [AI-CANDIDATE-FOR-REMOVAL] Reason: .crs-btn-prossimo e .crs-hint--prossimo
   (sezione 7, piu' sotto) non sono piu' generate da nessun render* dal
   2026-10-04 mentre PROSSIMO_CLIENTE_ATTIVO (js) e' spento su richiesta
   utente — codice JS preservato (AGENTS.md), quindi anche queste regole CSS
   restano per quando/se la funzione verra' riaccesa. Verifica con:
   grep -n "crs-btn-prossimo\|crs-hint--prossimo" public/js/centro-rinnovi-scheda.js
   prima di cancellare. Non cancellate: nessuna conferma umana ancora. */

/* =================================================== 6.6 · VERIFICA TL === */
/* 2026-10-04 [AI] Added (operaio W3, CONTRATTO-4 punto 4): riquadro di sola
   lettura «Verificato dal team leader» nella card contatti
   (renderVerificaTlBlocco, js), in coda dopo il blocco MyBoard — quando il
   TL ha verificato il contratto in «Da verificare» (gestore-rinnovi-tl).
   Riusa i gettoni badge gia' esistenti (.crs-badge--ok/--neutro/--no,
   sezione 3) per l'etichetta dell'esito: niente arancione, nessuna nuova
   regola colore. Stesso linguaggio "scatola carta" di .crs-myboard-segnalato. */
.crs-verifica-tl{
  margin-top:.7rem; padding:.6rem .7rem; border-radius:var(--cr-radius-sm, 10px);
  background:var(--cr-paper, #FAFAF7); border:1px solid var(--cr-line, #ECEAE4);
}
.crs-verifica-tl-riga{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.crs-verifica-tl-testo{ color:var(--cr-ink-2, #4F4D47); font-size:.78rem; }
.crs-verifica-tl-nota{ margin:.4rem 0 0; color:var(--cr-ink-2, #4F4D47); font-size:.82rem; white-space:pre-wrap; word-break:break-word; }

/* =================================================== 6.5 · MYBOARD ====== */
/* 2026-10-04 [AI] Blocco ORA dentro la card contatti (renderContattoRapido),
   subito sotto la riga email — non piu' un .crs-campo del compositore: e'
   una sezione propria, separata con un filo sopra. Due scelte a bottone
   (scelta singola VERA: ricliccare quella attiva la riporta a null, vedi
   azioneMyboardStato), campo ID a gettoni in ENTRAMBI i casi. Si salva DA
   SOLO (vedi pianificaSalvataggioMyboard in js): niente pulsante Salva qui
   dentro, solo lo stato in .crs-myboard-head. */
.crs-myboard-blocco{
  display:flex; flex-direction:column; gap:.6rem;
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--cr-line, #ECEAE4);
}
.crs-myboard-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.crs-myboard-aiuto{ margin:0; color:var(--cr-ink-3, #8C897F); font-size:.78rem; }
/* Stato del salvataggio automatico, accanto al titolo «MyBoard». */
.crs-myboard-salvataggio{
  display:inline-flex; align-items:center; gap:.35rem; flex-wrap:wrap;
  font-size:.72rem; font-weight:700; color:var(--cr-ink-3, #8C897F); white-space:nowrap;
}
.crs-myboard-salvataggio--ok{ color:var(--cr-green, #1F8A5B); }
.crs-myboard-salvataggio--errore{ color:var(--cr-red, #D93636); white-space:normal; }
.crs-myboard-riprova{
  color:inherit; padding:0 .2rem; font-size:inherit; font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
}
.crs-myboard-riprova:hover:not(:disabled){ filter:brightness(1.3); }
/* Riga «Segnalato al team leader» quando 'assente' (informativa, non un
   errore: niente rosso — stesso grigio-carta del resto). */
.crs-myboard-segnalato{
  margin:0; padding:.5rem .7rem; border-radius:var(--cr-radius-sm, 10px);
  background:var(--cr-paper, #FAFAF7); color:var(--cr-ink-2, #4F4D47); font-size:.78rem;
}
/* [AI-CANDIDATE-FOR-REMOVAL] Reason: .crs-myboard-telefono non e' piu'
   generata da renderMyboardBlocco dal 2026-10-04 (il numero e' gia' sopra,
   nella riga telefono della card contatti — ripeterlo qui era ridondante
   ora che il blocco vive nella stessa card). Verifica con:
   grep -rn "crs-myboard-telefono" public/js prima di cancellare questa
   regola. Non cancellata: nessuna conferma umana ancora (AGENTS.md). */
.crs-myboard-telefono{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:#fff; border:1px solid var(--cr-line, #ECEAE4); border-radius:var(--cr-radius-sm, 10px);
  padding:.5rem .7rem;
}

.crs-myboard-scelte{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.crs-myboard-scelta{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.7rem .5rem; border-radius:var(--cr-radius-sm, 10px);
  background:#fff; border:1px solid var(--cr-line-2, #DEDBD2); color:var(--cr-ink-2, #4F4D47);
  font-family:inherit; font-weight:700; font-size:.84rem; cursor:pointer; text-align:center;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.crs-myboard-scelta:hover:not(:disabled){ transform:translateY(-1px); border-color:var(--cr-ink, #121212); }
.crs-myboard-scelta:disabled{ opacity:.5; cursor:default; transform:none; }
/* Niente arancione: --si attivo = verde "bene" (stesso di .crs-esito-scelta
   --ok); --no attivo = inchiostro scuro, informativo (non e' un ko — il
   rosso resta riservato a ritardo/errore altrove nella scheda). */
.crs-myboard-scelta--si.is-attivo{ background:var(--cr-green, #1F8A5B); border-color:var(--cr-green, #1F8A5B); color:#fff; }
.crs-myboard-scelta--no.is-attivo{ background:var(--cr-ink, #121212); border-color:var(--cr-ink, #121212); color:#fff; }

.crs-myboard-ids{ display:flex; flex-direction:column; gap:.5rem; }
.crs-myboard-chip-riga{ display:flex; flex-wrap:wrap; gap:.4rem; }
.crs-myboard-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--cr-paper, #FAFAF7); border:1px solid var(--cr-line-2, #DEDBD2); color:var(--cr-ink, #121212);
  border-radius:999px; padding:.3rem .3rem .3rem .7rem; font-size:.8rem; font-weight:700;
}
.crs-myboard-chip-testo{ font-variant-numeric:tabular-nums; word-break:break-all; }
.crs-myboard-chip-x{
  flex:0 0 auto; width:20px; height:20px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--cr-line-2, #DEDBD2); border-radius:50%; color:var(--cr-ink-2, #4F4D47);
  font-family:inherit; font-size:.9rem; line-height:1; cursor:pointer; padding:0;
  transition:color .15s ease, border-color .15s ease;
}
.crs-myboard-chip-x:hover:not(:disabled){ color:var(--cr-ink, #121212); border-color:var(--cr-ink, #121212); }
.crs-myboard-chip-x:disabled{ opacity:.5; cursor:default; }
.crs-myboard-id-input{ width:100%; }
.crs-myboard-ids-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; font-size:.72rem; }
.crs-myboard-id-errore{ color:var(--cr-red, #D93636); }
.crs-myboard-ids-conta{ margin-left:auto; color:var(--cr-ink-3, #8C897F); font-variant-numeric:tabular-nums; white-space:nowrap; }

@media (max-width:420px){
  .crs-myboard-scelte{ gap:.4rem; }
  .crs-myboard-scelta{ font-size:.78rem; padding:.65rem .3rem; }
}

/* ===================================================== 7 · PULSANTI ===== */
.crs-btn-primario{
  padding:.65rem 1.3rem; border-radius:999px;
  background:var(--cr-ink, #121212); color:#fff; border:1px solid var(--cr-ink, #121212);
  font-family:inherit; font-weight:700; cursor:pointer; transition:filter .15s ease, transform .15s ease;
}
.crs-btn-primario:hover:not(:disabled){ filter:brightness(1.3); transform:translateY(-1px); }
.crs-btn-primario:disabled{ opacity:.55; cursor:default; transform:none; }
.crs-btn-primario--ok{ background:var(--cr-green, #1F8A5B); border-color:var(--cr-green, #1F8A5B); }
.crs-btn-primario--no{ background:var(--cr-red, #D93636); border-color:var(--cr-red, #D93636); }
/* Pulsante unico del compositore: grande, a TUTTA LARGHEZZA (richiesto
   esplicitamente) — l'hint "oppure Ctrl/Cmd + Invio" va a capo sotto
   (.crs-invia-riga e' gia' flex-wrap:wrap). */
.crs-btn-salva{ width:100%; padding:.85rem 1.3rem; font-size:.96rem; }

.crs-btn-secondario{
  padding:.6rem 1.1rem; border-radius:999px;
  background:#fff; border:1px solid var(--cr-line-2, #DEDBD2); color:var(--cr-ink, #121212);
  font-family:inherit; font-weight:700; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.crs-btn-secondario:hover:not(:disabled){ border-color:var(--cr-ink, #121212); }
.crs-btn-secondario:disabled{ opacity:.6; cursor:default; }

.crs-btn-testo{
  background:none; border:none; color:var(--cr-ink-3, #8C897F); font-family:inherit; font-weight:500; cursor:pointer;
  padding:.5rem .3rem; transition:color .15s ease;
}
.crs-btn-testo:hover:not(:disabled){ color:var(--cr-ink, #121212); }
.crs-btn-testo:disabled{ opacity:.6; cursor:default; }

.crs-btn-discreto{
  background:none; border:1px solid var(--cr-line-2, #DEDBD2); color:var(--cr-ink-3, #8C897F);
  font-family:inherit; border-radius:999px; padding:.4rem 1rem; font-size:.82rem; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.crs-btn-discreto:hover{ color:var(--cr-ink, #121212); border-color:var(--cr-ink, #121212); }

/* Pulsante «Prossimo cliente →»: variante a tutta larghezza di .crs-btn-
   primario, icona in coda (icona('arrow-right')). */
.crs-btn-prossimo{
  width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.3rem; font-size:.96rem;
}

/* ===================================================== 8 · RICHIAMO (testa) */
/* 2026-10-03 [AI] .crs-prossima-input e' ancora generata da renderProssima
   AzioneAttuale (centro-rinnovi-scheda.js) — SOLO quella classe, riusata
   cosi' com'era. Le 4 regole sotto (.crs-prossima-azione/-testo/-urgente/
   -modifica) non sono piu' emesse da nessun render* (la stessa funzione ora
   produce .crs-richiamo-riga, dentro la testa invece che una sezione a se':
   vedi renderEroe). */
/* [AI-CANDIDATE-FOR-REMOVAL] Reason: nessun render* del JS genera piu'
   .crs-prossima-azione/.crs-prossima-testo/.crs-prossima-modifica dal
   2026-10-03 (ora .crs-richiamo-riga). Verifica con:
   grep -rn "crs-prossima-azione\|crs-prossima-testo\|crs-prossima-modifica" public/js
   prima di cancellare. Non cancellato: nessuna conferma umana ancora. */
.crs-prossima-azione{ display:flex; flex-direction:column; gap:.6rem; }
.crs-prossima-testo{ font-weight:700; color:var(--cr-ink, #121212); font-size:.9rem; }
.crs-prossima-azione--urgente .crs-prossima-testo{ color:var(--cr-red, #D93636); }
.crs-prossima-modifica{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.crs-prossima-input{ width:auto; flex:0 0 auto; }

/* Riga compatta dentro la testa (renderEroe): «Richiamo: domani · Cambia».
   Collassata: icona+testo su una riga, «Cambia» spinto a destra (margin-left
   auto). Aperta (.crs-richiamo-riga--apri): input data + Salva/Nessuna/
   Annulla, stessi controlli di sempre (azioneSalvaPromemoria). */
.crs-richiamo-riga{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-top:.5rem; color:var(--cr-ink-2, #4F4D47); font-size:.86rem;
}
.crs-richiamo-riga .crs-ic{ color:var(--cr-ink-3, #8C897F); flex:0 0 auto; }
.crs-richiamo-testo{ font-weight:700; color:var(--cr-ink, #121212); }
.crs-richiamo-riga--urgente .crs-richiamo-testo{ color:var(--cr-red, #D93636); }
.crs-richiamo-riga--urgente .crs-ic{ color:var(--cr-red, #D93636); }
.crs-richiamo-cambia{ margin-left:.15rem; padding:.2rem .3rem; text-decoration:underline; text-underline-offset:2px; }
.crs-richiamo-riga--apri{ gap:.5rem; }

/* ===================================================== 9 · ESITO ======== */
/* 5 tessere grandi dell'esito del CONTATTO (compositore «Com'è andata?» —
   diverse dalle 3 scelte sotto, che sono l'esito del RINNOVO): icona +
   testo + numero-scorciatoia (1-5, onKeydownScorciatoie), colore di
   significato identico ai vecchi .crs-segmento--esito-* (ok/attesa/no). */
.crs-esito-tessere{ display:grid; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); gap:.6rem; }
.crs-esito-tessera{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:.4rem;
  padding:.9rem .5rem .7rem; border-radius:var(--cr-radius-sm, 10px);
  background:#fff; border:1px solid var(--cr-line-2, #DEDBD2); color:var(--cr-ink-2, #4F4D47);
  font-family:inherit; font-weight:700; font-size:.82rem; text-align:center; cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}
.crs-esito-tessera:hover:not(:disabled){ border-color:var(--cr-ink, #121212); transform:translateY(-1px); }
.crs-esito-tessera:disabled{ opacity:.5; cursor:default; transform:none; }
/* Colore di significato anche A RIPOSO (non solo da selezionata): icona+
   testo tinti, bordo leggermente colorato — poi riempimento pieno quando
   is-attivo (regole sotto, stessa specificita': vincono per ordine). */
.crs-esito-tessera--esito-ok{ color:var(--cr-green, #1F8A5B); border-color:color-mix(in srgb, var(--cr-green, #1F8A5B) 35%, var(--cr-line-2, #DEDBD2)); }
.crs-esito-tessera--esito-attesa{ color:var(--cr-ink, #121212); border-color:color-mix(in srgb, var(--cr-amber, #FFD60A) 45%, var(--cr-line-2, #DEDBD2)); }
.crs-esito-tessera--esito-no{ color:var(--cr-red, #D93636); border-color:color-mix(in srgb, var(--cr-red, #D93636) 35%, var(--cr-line-2, #DEDBD2)); }
/* 2026-10-05 [AI] Added (operaio W5, CONTRATTO-7) — esito 'altro_consulente':
   TONO NEUTRO (grigio/inchiostro), mai uno dei 3 colori di significato sopra. */
.crs-esito-tessera--esito-neutro{ color:var(--cr-ink-2, #4F4D47); border-color:color-mix(in srgb, var(--cr-ink-3, #8C897F) 35%, var(--cr-line-2, #DEDBD2)); }
.crs-esito-tessera--esito-ok.is-attivo{ background:var(--cr-green, #1F8A5B); border-color:var(--cr-green, #1F8A5B); color:#fff; }
.crs-esito-tessera--esito-attesa.is-attivo{ background:var(--cr-amber, #FFD60A); border-color:var(--cr-amber, #FFD60A); color:var(--cr-accent-ink, #1F1A00); }
.crs-esito-tessera--esito-no.is-attivo{ background:var(--cr-red, #D93636); border-color:var(--cr-red, #D93636); color:#fff; }
.crs-esito-tessera--esito-neutro.is-attivo{ background:var(--cr-ink, #121212); border-color:var(--cr-ink, #121212); color:#fff; }
.crs-tessera-tasto{
  position:absolute; top:.35rem; right:.4rem;
  font-size:.62rem; font-weight:700; color:var(--cr-ink-3, #8C897F);
  background:var(--cr-paper, #FAFAF7); border:1px solid var(--cr-line-2, #DEDBD2);
  border-radius:4px; width:15px; height:15px; display:flex; align-items:center; justify-content:center;
}
.crs-esito-tessera.is-attivo .crs-tessera-tasto{ background:rgba(255,255,255,.3); border-color:rgba(255,255,255,.5); color:#fff; }
/* 2026-10-03 [AI] Il riempimento pieno di "attesa" e' ora giallo marchio
   (chiaro): la pastiglia del tasto scorciatoia sopra, pensata per un
   riempimento SCURO (bianco semi-trasparente + testo bianco), diventerebbe
   bianco su quasi-bianco. Qui l'overlay e il testo si invertono (scuro su
   chiaro) solo per questa variante. */
.crs-esito-tessera--esito-attesa.is-attivo .crs-tessera-tasto{ background:rgba(18,18,18,.12); border-color:rgba(18,18,18,.25); color:var(--cr-accent-ink, #1F1A00); }

.crs-esito-scelte{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.crs-esito-scelta{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:.85rem .4rem; border-radius:var(--cr-radius-sm, 10px);
  background:#fff; border:1px solid var(--cr-line-2, #DEDBD2); color:var(--cr-ink, #121212);
  font-family:inherit; font-weight:700; font-size:.84rem; cursor:pointer; text-align:center;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.crs-esito-scelta:hover:not(:disabled){ transform:translateY(-1px); border-color:var(--cr-ink, #121212); }
.crs-esito-scelta--ok:hover:not(:disabled){ border-color:var(--cr-green, #1F8A5B); background:var(--cr-green-soft, #E6F4EC); }
.crs-esito-scelta--attesa:hover:not(:disabled){ border-color:var(--cr-amber, #FFD60A); background:var(--cr-amber-soft, #FFF4B8); }
.crs-esito-scelta--no:hover:not(:disabled){ border-color:var(--cr-red, #D93636); background:var(--cr-red-soft, #FDECEC); }
.crs-esito-scelta:disabled{ opacity:.5; cursor:default; transform:none; }

.crs-esito-form{ margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--cr-line, #ECEAE4); }

.crs-esito-riepilogo{
  padding:.75rem .9rem; border-radius:var(--cr-radius-sm, 10px); font-weight:700; font-size:.9rem;
}
.crs-esito-riepilogo--ok{ background:var(--cr-green-soft, #E6F4EC); color:var(--cr-green, #1F8A5B); }
.crs-esito-riepilogo--no{ background:var(--cr-red-soft, #FDECEC); color:var(--cr-red, #D93636); }
/* 2026-10-05 [AI] Added (operaio W5, CONTRATTO-7) — chiuso con esito
   'altro_consulente' (rinnovo non 'SI' né 'NO'): STESSI colori di
   .crs-badge--neutro, niente verde/rosso. */
.crs-esito-riepilogo--neutro{ background:var(--cr-paper, #FAFAF7); color:var(--cr-ink-2, #4F4D47); }
.crs-conferma-riga{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-top:.7rem;
  color:var(--cr-ink-2, #4F4D47); font-size:.86rem;
}

@media (max-width:420px){
  .crs-esito-scelte{ gap:.4rem; }
}

/* ===================================================== 10 · STORICO ===== */
.crs-timeline{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.crs-timeline-voce{ display:flex; gap:.7rem; padding:.65rem 0; border-bottom:1px solid var(--cr-line, #ECEAE4); position:relative; }
.crs-timeline-voce:last-child{ border-bottom:none; padding-bottom:0; }
.crs-timeline-pallino{
  flex:0 0 auto; width:8px; height:8px; margin-top:.4rem; border-radius:50%;
  background:var(--cr-ink-3, #8C897F);
}
/* Colorato in base all'esito di quel contatto (classe derivata da
   ESITO_CONTATTO_META, 'neutro' se il contatto non ha un esito, es. nota
   libera): stesso linguaggio cromatico del resto della scheda. */
.crs-timeline-pallino--ok{ background:var(--cr-green, #1F8A5B); }
.crs-timeline-pallino--attesa{ background:var(--cr-amber, #FFD60A); }
.crs-timeline-pallino--no{ background:var(--cr-red, #D93636); }
/* 2026-10-05 [AI] Added (operaio W5, CONTRATTO-7) — esplicita (stesso grigio
   del fallback di base .crs-timeline-pallino sopra, nessun cambio visivo):
   contatti senza esito O con esito 'altro_consulente' (classeEsito deriva
   da ESITO_CONTATTO_META[...].classe.replace('esito-',''), 'esito-neutro'
   -> 'neutro', stesso nome del fallback). */
.crs-timeline-pallino--neutro{ background:var(--cr-ink-3, #8C897F); }
.crs-timeline-corpo{ flex:1; min-width:0; }
.crs-timeline-riga1{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; color:var(--cr-ink, #121212); font-size:.86rem; }
.crs-timeline-icona{ color:var(--cr-ink-3, #8C897F); width:16px; height:16px; }
/* 2026-10-04 [AI] L'esito e' ora l'etichetta principale (strong, sopra): il
   canale resta solo come iconcina, un po' piu' piccola/discreta di prima. */
.crs-timeline-icona--mini{ width:14px; height:14px; }
.crs-timeline-nota{ margin:.3rem 0 0; color:var(--cr-ink-2, #4F4D47); font-size:.84rem; white-space:pre-wrap; word-break:break-word; }
.crs-timeline-myboard{ margin:.3rem 0 0; color:var(--cr-ink-2, #4F4D47); font-size:.78rem; }
.crs-timeline-meta{ margin-top:.3rem; color:var(--cr-ink-3, #8C897F); font-size:.74rem; }

/* ===================================================== 11 · CONTRATTO === */
.crs-contratto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem 1rem; }
.crs-contratto-campo{ display:flex; flex-direction:column; gap:.15rem; }
.crs-contratto-label{ color:var(--cr-ink-3, #8C897F); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.crs-contratto-valore{ color:var(--cr-ink, #121212); font-weight:700; font-size:.87rem; word-break:break-word; font-variant-numeric:tabular-nums; }
.crs-contratto-note{ margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--cr-line, #ECEAE4); }
.crs-contratto-note p{ margin:.3rem 0 0; color:var(--cr-ink-2, #4F4D47); font-size:.86rem; white-space:pre-wrap; word-break:break-word; }

@media (max-width:420px){
  .crs-contratto-grid{ grid-template-columns:1fr; }
}

/* ===================================================== 12 · SPLIT ======= */
/* Compositore (sinistra: registra contatto + prossima azione + esito) e
   storico (destra) impilati di default; affiancati quando il CONTENITORE
   (non la finestra: @container, non @media) raggiunge 760px — sia che la
   scheda sia in linea dentro #cr-dettaglio sia nel foglio mobile (entrambi i
   wrapper hanno container-type:inline-size, container-name:crs). */
.crs-split{ display:flex; flex-direction:column; gap:1.1rem; }
.crs-split-sx, .crs-split-dx{ display:flex; flex-direction:column; gap:1.1rem; min-width:0; }

@container crs (min-width:760px){
  .crs-split{ flex-direction:row; align-items:flex-start; }
  .crs-split-sx{ flex:3 1 0; }
  .crs-split-dx{ flex:2 1 0; }
}

/* Fallback per browser senza @container (il layout resta impilato, solo
   meno "affiancato": nessuna rottura, solo meno ottimale). */
@supports not (container-type: inline-size){
  .crs-root--inline, .crs-mobile-panel{ container-type:normal; }
}