/**
 * REPO: dashboard-consulenti
 * MODULE: css/centro-rinnovi.css
 * PURPOSE: Veste la pagina A SE' STANTE «Centro Rinnovi» (public/
 *          centro-rinnovi.html + js/centro-rinnovi.js): topbar, fascia
 *          «Oggi», istogramma scadenze, le 3 colonne di lavoro (da gestire /
 *          sto gestendo / dettaglio). Tema SOLO bianco, "cabina di regia
 *          editoriale su carta bianca" — niente a che vedere con css/
 *          cns-theme.css o design/tema/* (quelli sono il guscio scuro della
 *          dashboard: questa pagina non lo carica).
 * DEPENDENCIES: /fonts/sofia-pro/*.ttf (self-hosted, stessi file di
 *          design/tema/01-fondamenta.css), css/centro-rinnovi-scheda.css
 *          (operaio C2 — consuma gli STESSI gettoni --cr-* definiti qui su
 *          .cr-app, quindi i nomi non si toccano senza coordinarsi).
 * EXPOSES: gettoni --cr-* su .cr-app, tutte le classi/i cr-*.
 * LAST REVIEWED: 2026-10-05
 * WARNINGS: #cr-dettaglio (e nessun suo antenato: .cr-work, .cr-corpo,
 *          .cr-shell, body.cr-app) deve MAI ricevere display:none,
 *          transform, filter, perspective o contain — su schermi <1024px la
 *          scheda contratto (C2, chiamata con mobile:true) vi monta dentro
 *          un pannello position:fixed a tutto schermo: una qualunque di
 *          quelle proprieta' su un antenato lo intrappolerebbe dentro
 *          #cr-dettaglio invece di coprire il viewport. Per questo a <1024px
 *          lo "nascondiamo" con position:absolute + width/height:0, mai con
 *          display:none (si veda la regola piu' sotto).
 *
 * CHANGE LOG
 * ----------
 * 2026-10-02 [AI] Added: prima stesura DA ZERO (operaio B2) — sostituisce
 *          integralmente la bozza scura di oggi, mai committata. Nuovo
 *          layout a 3 colonne, nuovo design bianco, pagina indipendente.
 * 2026-10-02 [AI] Modified (operaio K3): .cr-corpo scorre (overflow-y:auto)
 *          per fare posto ai nuovi #cr-plancia/#cr-scadenze (K1/K2) sopra
 *          l'area di lavoro; .cr-work ha min-height:70vh (azzerata <1024px,
 *          dove il dettaglio collassa). Aggiunte .cr-col--fuori-filtro e
 *          .cr-col-nota-filtro per il filtro unico (vedi js/centro-
 *          rinnovi.js). Nessuna regola esistente rimossa.
 * 2026-10-03 [AI] Added (regista): @font-face Sofia Pro ExtraLight (200) e
 *          Black (900). Non esiste un SemiBold dritto: niente peso 600.
 * 2026-10-03 [AI] Modified (operaio F): tutti i font-weight:600 rimasti nel
 *          foglio portati a 700 (nessun cambio visivo reale — i browser
 *          sceglievano gia' la faccia 700 come faccia piu' vicina a una 600
 *          non dichiarata; ora e' esplicito). Riga contratto (.cr-riga)
 *          ridisegnata: avatar tondo con iniziali (.cr-riga-avatar, tinta
 *          --cr-riga-h impostata inline da rigaHtml() in js/centro-
 *          rinnovi.js), nuova soglia ambra sulla pastiglia scadenza
 *          (.cr-pill--ambra), riga di contatto con pallino colorato
 *          (.cr-riga-contatto-dot--*) e pastiglia prossima azione a 3 stati
 *          (.cr-riga-azione-pill--*), pillola «Prendo in carico» compatta
 *          con icona (.cr-pill-prendi) al posto del vecchio bottone a
 *          blocco. Vecchie classi (.cr-riga-chips/.cr-chip/.cr-chip--
 *          urgente/.cr-riga-azione/.cr-btn-prendi) lasciate nel foglio,
 *          deprecate (AGENTS.md §7 additive-first): nessun'altro file le usa
 *          (verificato con grep), rigaHtml() non le genera piu'. Dettaglio
 *          vuoto (.cr-dettaglio-vuoto) con il nuovo blocco «Inizia da qui»
 *          (.cr-dettaglio-invito, markup in renderDettaglioVuoto() di js/
 *          centro-rinnovi.js): scorciatoie rimaste, piu' piccole sotto.
 * 2026-10-03 [AI] Modified (regista): niente arancione — --cr-amber ora e' il giallo
 *          marchio, testo delle pastiglie «ambra» in --cr-ink.
 * 2026-10-03 [AI] Fixed (operaio G): dopo il cambio gettone sopra, il testo
 *          della pastiglia azione «Oggi» (.cr-riga-azione-pill--oggi) era
 *          rimasto in var(--cr-amber) — ora giallo pieno, illeggibile su
 *          sfondo var(--cr-amber-soft) (giallo chiaro su giallo chiaro).
 *          Portato a --cr-ink (nero su sfondo giallo chiaro, mai piu' testo
 *          giallo).
 * 2026-10-04 [AI] Added: modificatore --rinnovo del marchio (logo nuovo senza quadrato nero).
 * 2026-10-04 [AI] Added (operaio A2, CONTRATTO-3): .cr-riga-segno(--errato)
 *          e .cr-i--mini — piccola campanella rossa in riga 1 (rigaHtml,
 *          js) quando gestione_numero_errato e' vero. Nessun segno per
 *          gestione_myboard='assente' (richiesta utente).
 * 2026-10-04 [AI] Added (operaio W2, CONTRATTO-4): .cr-col-cerca(-input) —
 *          campo di ricerca compatto nella testa colonna (js/centro-
 *          rinnovi.js::agganciaEventi/passaRicercaColonna); .cr-zona-vuota--
 *          ricerca/.cr-zona-vuota-btn per il messaggio «Nessun contratto
 *          trovato per…» + «Cancella ricerca»; .cr-ordine-fisso — etichetta
 *          piccola grigia al posto della select «Ordina Sto gestendo» (ora
 *          hidden nell'html, non cancellata); .cr-top-btn — bottone tondo
 *          38px della topbar (calendario, #cr-calendario-btn) coerente con
 *          .cr-avatar; .cr-notifiche-slot — contenitore inline-flex per
 *          #cr-notifiche (window.CRNotifiche, file suo). Responsive 390px
 *          in fondo al foglio (§7).
 * 2026-10-05 [AI] Added (operaio W5, CONTRATTO-7): .cr-riga-chiusa--altro —
 *          lista «Chiusi» (rigaChiusaHtml, js), tono neutro (ink-2) per il
 *          6° esito di contatto 'altro_consulente' (REGOLA DATI: non conta
 *          né come rinnovato né come perso).
 */

/* ===================================================== 1 · SOFIA PRO ===== */
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProLight.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProRegular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProMedium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProBold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
/* 2026-10-03: anche ExtraLight (200, numeri grandi) e Black (900). NON esiste
   un SemiBold dritto (solo corsivo): mai font-weight:600, usare 500 o 700. */
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProBlack.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}

/* ===================================================== 2 · GETTONI ===== */
html,body{height:100%;margin:0}
body.cr-app{
  /* Superfici */
  --cr-bg:#FFFFFF; --cr-paper:#FAFAF7; --cr-line:#ECEAE4; --cr-line-2:#DEDBD2;
  /* Inchiostro */
  --cr-ink:#121212; --cr-ink-2:#4F4D47; --cr-ink-3:#8C897F;
  /* Accento — il giallo REALE del marchio (design/tema/01-fondamenta.css
     --accent:#ffd60a) e' diverso dal default #FFD100 del brief: si usa
     quello vero, come richiesto. */
  --cr-accent:#FFD60A; --cr-accent-soft:#FFF6CC; --cr-accent-ink:#1F1A00;
  /* Stato */
  --cr-red:#D93636; --cr-red-soft:#FDECEC;
  /* 2026-10-03: NIENTE ARANCIONE (l'utente lo detesta): «ambra» = GIALLO marchio.
     Usarlo solo come riempimento; il testo sopra resta --cr-ink. */
  --cr-amber:#FFD60A; --cr-amber-soft:#FFF4B8;
  --cr-green:#1F8A5B; --cr-green-soft:#E6F4EC;
  --cr-blue:#2B59C3;
  /* Forma */
  --cr-radius:14px; --cr-radius-sm:10px;
  --cr-shadow:0 1px 2px rgba(18,18,18,.04),0 8px 24px rgba(18,18,18,.06);
  --cr-font:'Sofia Pro',system-ui,-apple-system,'Segoe UI',sans-serif;

  background:var(--cr-bg);
  color:var(--cr-ink);
  font-family:var(--cr-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  margin:0;
  height:100vh;
  overflow:hidden; /* il guscio (body/.cr-shell/.cr-top) resta fisso: a
    scorrere e' .cr-corpo qui sotto (§5), non la pagina intera. */
  display:flex;
  flex-direction:column;
}
.cr-app *{box-sizing:border-box}
/* Molti elementi qui sotto hanno un `display` proprio (flex/grid) per quando
   sono visibili, e vengono mostrati/nascosti impostando l'attributo nativo
   `hidden` da JS (`el.hidden = true/false`). Senza questa regola il loro
   stesso `display:flex`/`grid` vincerebbe sulla regola `[hidden]{display:
   none}` del browser (stessa specificita', origine author: vince l'ultima
   dichiarata) e l'elemento resterebbe visibile anche con `hidden` attivo. */
.cr-app [hidden]{display:none!important}
.cr-app table,.cr-app td,.cr-app th,.cr-app .cr-kpi-val,.cr-app .cr-tab-n,
.cr-app .cr-col-conta,.cr-app .cr-chiusi-conta{font-variant-numeric:tabular-nums}
.cr-app ::selection{background:var(--cr-accent-soft);color:var(--cr-ink)}
.cr-app *{scrollbar-color:var(--cr-line-2) transparent;scrollbar-width:thin}
.cr-app ::-webkit-scrollbar{width:10px;height:10px}
.cr-app ::-webkit-scrollbar-track{background:transparent}
.cr-app ::-webkit-scrollbar-thumb{background:var(--cr-line-2);border-radius:999px;border:2px solid transparent;background-clip:content-box}

.cr-app :where(a,button,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--cr-ink);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--cr-accent-soft);
  border-radius:6px;
}

@media (prefers-reduced-motion:reduce){
  .cr-app *,.cr-app *::before,.cr-app *::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

.cr-i{width:18px;height:18px;display:inline-block;vertical-align:middle;flex:0 0 auto}
.cr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.cr-btn{
  appearance:none; border:1px solid var(--cr-line-2); background:#fff; color:var(--cr-ink);
  border-radius:999px; padding:9px 18px; font:inherit; font-size:14px; font-weight:500;
  cursor:pointer; transition:background .16s var(--cr-ease,ease),border-color .16s,transform .12s;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.cr-btn:hover{background:var(--cr-paper)}
.cr-btn:active{transform:scale(.97)}
.cr-btn-primario{background:var(--cr-ink);color:#fff;border-color:var(--cr-ink)}
.cr-btn-primario:hover{background:#000}

/* ===================================================== 3 · GATE 403 ===== */
.cr-gate{
  position:fixed; inset:0; background:#fff; display:grid; place-items:center;
  font-family:'Sofia Pro',system-ui,sans-serif; color:#121212; padding:24px;
}
.cr-gate-card{max-width:420px; text-align:center}
.cr-gate-icona{
  width:52px;height:52px;border-radius:999px;background:var(--cr-paper,#FAFAF7);
  display:grid;place-items:center;margin:0 auto 20px;color:var(--cr-ink-3,#8C897F);
}
.cr-gate-icona .cr-i{width:22px;height:22px}
.cr-gate-titolo{font-size:22px;font-weight:500;margin:0 0 10px}
.cr-gate-testo{font-size:15px;color:#4F4D47;line-height:1.5;margin:0 0 24px}

/* ===================================================== 4 · TOPBAR ===== */
.cr-shell{display:flex;flex-direction:column;height:100%;min-height:0}

.cr-top{
  flex:0 0 64px; height:64px;
  display:flex; align-items:center; gap:20px;
  padding:0 24px;
  border-bottom:1px solid var(--cr-line);
  background:#fff;
}
.cr-top-gruppo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.cr-top-sx{min-width:0}
.cr-marchio{
  width:32px;height:32px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;
  background:linear-gradient(158deg,#212227 0%,#0a0b0d 52%,#141519 100%);
  color:var(--cr-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 8px -3px rgba(0,0,0,.5);
}
.cr-marchio .cr-i{width:18px;height:18px}
/* 2026-10-04: logo «rinnovo» — niente quadrato nero, solo il simbolo (Y gialla + frecce tonde) */
.cr-marchio.cr-marchio--rinnovo{width:38px;height:38px;background:none;box-shadow:none;border-radius:0}
.cr-marchio--rinnovo .cr-i{width:38px;height:38px}
.cr-top-titolo{font-size:16px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}

.cr-top-centro{flex:1 1 auto;display:flex;align-items:center;gap:10px;min-width:0;justify-content:center}
.cr-search-wrap{
  position:relative; width:100%; max-width:440px;
  display:flex; align-items:center; gap:8px;
  background:var(--cr-paper); border:1px solid var(--cr-line);
  border-radius:999px; padding:0 14px; height:38px;
  transition:border-color .16s;
}
.cr-search-wrap:focus-within{border-color:var(--cr-ink-3)}
.cr-search-icona{color:var(--cr-ink-3);width:16px;height:16px}
.cr-search{
  flex:1 1 auto; border:0; background:transparent; outline:none;
  font:inherit; font-size:14px; color:var(--cr-ink); min-width:0;
}
.cr-search::placeholder{color:var(--cr-ink-3)}
.cr-search-tasto{
  flex:0 0 auto; font:inherit; font-size:11px; color:var(--cr-ink-3);
  border:1px solid var(--cr-line-2); border-radius:5px; padding:1px 6px; background:#fff;
}
.cr-chip-settimana{
  display:flex; align-items:center; gap:6px; flex:0 0 auto;
  background:var(--cr-accent-soft); color:var(--cr-accent-ink);
  border:1px solid transparent; border-radius:999px; padding:7px 10px 7px 14px;
  font:inherit; font-size:13px; font-weight:500; cursor:pointer;
}
.cr-chip-settimana .cr-i{width:14px;height:14px}
.cr-chip-settimana:hover{background:#FFEE9E}

.cr-top-dx{justify-content:flex-end}
.cr-top-utente{font-size:14px;color:var(--cr-ink-2);white-space:nowrap}
.cr-avatar{
  width:30px;height:30px;border-radius:999px;background:var(--cr-ink);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:.02em;flex:0 0 auto;
}
.cr-link-dashboard{
  font-size:14px; font-weight:500; color:var(--cr-ink); text-decoration:none;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  border-bottom:1px solid transparent; padding-bottom:1px;
}
.cr-link-dashboard:hover{border-bottom-color:var(--cr-ink)}

/* 2026-10-04 [AI] Bottone tondo della topbar (operaio W2, CONTRATTO-4): solo
   #cr-calendario-btn per ora (window.CRCalendario lo rende visibile al
   montaggio, qui e' `hidden` di base — vedi html), stesso diametro di
   .cr-avatar per restare in riga con gli altri elementi di .cr-top-dx. */
.cr-top-btn{
  appearance:none; border:1px solid var(--cr-line-2); background:#fff; color:var(--cr-ink);
  width:38px; height:38px; border-radius:999px; flex:0 0 auto;
  display:grid; place-items:center; cursor:pointer;
  transition:background .16s,border-color .16s,transform .12s;
}
.cr-top-btn .cr-i{width:20px;height:20px}
.cr-top-btn:hover{background:var(--cr-paper)}
.cr-top-btn:active{transform:scale(.96)}

/* Contenitore di #cr-notifiche (window.CRNotifiche, file suo): solo il
   comportamento nel flusso della topbar, l'aspetto della campanella/pannello
   e' nel suo css/centro-rinnovi-notifiche.css. Vuoto finche' non montato. */
.cr-notifiche-slot{display:inline-flex; align-items:center; flex:0 0 auto}

/* ===================================================== 5 · CORPO/STATI === */
/* 2026-10-02 [AI] overflow-y:auto (operaio K3): con #cr-plancia/#cr-scadenze
   (K1/K2) sopra l'area di lavoro, il contenuto puo' superare il viewport —
   qui scorre .cr-corpo (la topbar resta ferma), non l'intera pagina. Non
   rompe l'overlay a tutto schermo della scheda su mobile: overflow (a
   differenza di transform/filter/perspective/contain) non crea un nuovo
   containing block per i discendenti position:fixed — infatti body.cr-app
   ha gia' overflow:hidden da prima senza alcun effetto su #cr-dettaglio. */
.cr-corpo{flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow-y:auto}

.cr-stato{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; padding:40px 24px; color:var(--cr-ink-2);
}
.cr-stato-icona{width:30px;height:30px;color:var(--cr-ink-3)}
.cr-stato p{font-size:15px;max-width:420px;line-height:1.5;margin:0}

/* Scheletri */
.cr-stato-caricamento{display:flex;flex-direction:column;gap:20px;padding:24px 32px;align-items:stretch}
@keyframes cr-pulse{0%,100%{opacity:.55}50%{opacity:1}}
.cr-skel{background:var(--cr-paper);border-radius:var(--cr-radius);animation:cr-pulse 1.4s ease-in-out infinite}
.cr-skel-oggi{height:96px}
.cr-skel-strip{height:72px}
.cr-skel-colonne{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1 1 auto;min-height:0}
.cr-skel-col{min-height:200px}

/* ===================================================== 6 · CONTENUTO === */
.cr-contenuto{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}

/* -------- Plancia / Scadenze (K1/K2) --------
   Contenitori vuoti: lo stile interno e' nei loro CSS (css/centro-rinnovi-
   plancia.css, css/centro-rinnovi-scadenze.css). Qui solo il comportamento
   nel flusso della colonna .cr-contenuto. Quando sono `hidden` (componente
   non ancora disponibile) la regola §2 `.cr-app [hidden]` li toglie dal
   flusso e resta visibile il ripiego (.cr-oggi / .cr-strip-sezione). */
#cr-plancia,#cr-scadenze{flex:0 0 auto}

/* -------- Fascia Oggi -------- */
.cr-oggi{
  flex:0 0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  padding:26px 28px 20px; border-bottom:1px solid var(--cr-line); flex-wrap:wrap;
}
.cr-oggi-sx{min-width:0}
.cr-oggi-data{
  font-family:'Sofia Pro',sans-serif; font-weight:300; font-size:40px; line-height:1.08;
  margin:0 0 6px; color:var(--cr-ink); letter-spacing:-.01em;
}
.cr-oggi-frase{margin:0; font-size:15px; color:var(--cr-ink-2); max-width:620px; line-height:1.5}
.cr-oggi-kpi{display:flex; gap:32px; flex-wrap:wrap}
.cr-kpi{display:flex; flex-direction:column; align-items:flex-start; gap:2px; position:relative}
.cr-kpi-val{font-family:'Sofia Pro',sans-serif; font-weight:300; font-size:34px; line-height:1; color:var(--cr-ink)}
.cr-kpi-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--cr-ink-3); font-weight:500}
.cr-kpi-sub{font-size:11px; color:var(--cr-ink-3)}

/* -------- Striscia scadenze -------- */
.cr-strip-sezione{flex:0 0 auto; border-bottom:1px solid var(--cr-line); padding:10px 28px 8px; position:relative}
.cr-strip-scroll{overflow-x:auto; overflow-y:visible}
.cr-strip{position:relative; height:70px; min-width:560px}
.cr-strip-lane{position:absolute; top:6px; bottom:22px; border-radius:6px}
.cr-strip-lane--scaduti{background:var(--cr-red-soft)}
.cr-strip-lane--futuro{background:var(--cr-paper)}
.cr-strip-oggi{position:absolute; top:0; bottom:22px; width:2px; background:var(--cr-accent)}
.cr-strip-oggi-lbl{
  position:absolute; top:-2px; transform:translateX(-50%); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; color:var(--cr-accent-ink); background:var(--cr-accent);
  padding:1px 5px; border-radius:4px; white-space:nowrap;
}
.cr-strip-mese{
  position:absolute; bottom:0; transform:translateX(-50%); font-size:10px; color:var(--cr-ink-3);
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
}
.cr-strip-bar{
  position:absolute; bottom:22px; width:9px; margin-left:-4.5px; border-radius:3px 3px 1px 1px;
  display:flex; flex-direction:column-reverse; overflow:hidden; cursor:pointer; border:none; padding:0;
  background:transparent;
}
.cr-strip-bar-seg{width:100%; flex:0 0 auto}
.cr-strip-bar-seg--dagestire{background:var(--cr-amber)}
.cr-strip-bar-seg--ingestione{background:var(--cr-ink)}
.cr-strip-bar--scaduti .cr-strip-bar-seg{background:var(--cr-red)}
.cr-strip-bar.active{outline:2px solid var(--cr-ink); outline-offset:2px}
.cr-strip-bar:hover,.cr-strip-bar:focus-visible{filter:brightness(.88)}
.cr-strip-tooltip{
  position:absolute; z-index:5; transform:translate(-50%,-100%); margin-top:-10px;
  background:var(--cr-ink); color:#fff; font-size:12px; line-height:1.4; padding:7px 10px;
  border-radius:8px; pointer-events:none; white-space:nowrap; box-shadow:var(--cr-shadow);
}

/* -------- Tabs (<1280px) -------- */
.cr-tabs{display:none; flex:0 0 auto; gap:4px; padding:10px 28px 0; border-bottom:1px solid var(--cr-line)}
.cr-tab{
  appearance:none; border:none; background:transparent; font:inherit; font-size:14px; font-weight:500;
  color:var(--cr-ink-3); padding:10px 4px; margin-right:20px; cursor:pointer; position:relative;
  display:flex; align-items:center; gap:6px;
}
.cr-tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.cr-tab.active{color:var(--cr-ink)}
.cr-tab.active::after{background:var(--cr-accent)}
.cr-tab-n{font-size:11px;background:var(--cr-paper);border-radius:999px;padding:1px 7px;color:var(--cr-ink-2)}

/* -------- Area di lavoro -------- */
/* 2026-10-02 [AI] min-height:70vh (operaio K3, al posto di 0): le colonne
   restano comode (altezza minima garantita, scorrimento interno in
   .cr-col-lista) anche quando #cr-plancia/#cr-scadenze allungano la pagina
   sopra — vedi overflow-y:auto su .cr-corpo (§5). Azzerata <1024px (§7): li'
   il dettaglio collassa e non deve lasciare un vuoto forzato. */
.cr-work{flex:1 1 auto; min-height:70vh; display:grid; grid-template-columns:360px 360px 1fr}

.cr-col{min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--cr-line)}
.cr-col--dettaglio{border-right:none}
.cr-col--lista{overflow:hidden}

.cr-col-testa{flex:0 0 auto; padding:18px 20px 12px; border-bottom:1px solid var(--cr-line)}
.cr-col-testa h2{margin:0; font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px}
.cr-col-conta{font-size:12px; font-weight:700; color:var(--cr-ink-2); background:var(--cr-paper); border-radius:999px; padding:1px 8px}
.cr-col-desc{margin:4px 0 12px; font-size:12.5px; color:var(--cr-ink-3); line-height:1.4}

/* 2026-10-04 [AI] Ricerca per colonna (operaio W2, CONTRATTO-4): campo
   compatto a tutta larghezza nella testa colonna, fra la descrizione e i
   chip/ordina — vedi js/centro-rinnovi.js::agganciaEventi/
   passaRicercaColonna. Stesso linguaggio visivo di .cr-search-wrap (topbar),
   ma piu' piccolo e senza il tasto «/». */
.cr-col-cerca{
  display:flex; align-items:center; gap:8px; width:100%;
  background:var(--cr-paper); border:1px solid var(--cr-line);
  border-radius:999px; padding:0 12px; height:34px; margin:0 0 10px;
  transition:border-color .16s;
}
.cr-col-cerca:focus-within{border-color:var(--cr-ink-3)}
.cr-col-cerca .cr-i{width:14px; height:14px; color:var(--cr-ink-3); flex:0 0 auto}
.cr-col-cerca-input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
  font:inherit; font-size:13px; color:var(--cr-ink);
}
.cr-col-cerca-input::placeholder{color:var(--cr-ink-3)}

.cr-col-filtri{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.cr-chips-tipo{display:flex; gap:6px}
.cr-chip-tipo{
  appearance:none; border:1px solid var(--cr-line-2); background:#fff; border-radius:999px;
  padding:4px 11px; font:inherit; font-size:12px; color:var(--cr-ink-2); cursor:pointer;
}
.cr-chip-tipo[aria-pressed="true"]{background:var(--cr-ink); color:#fff; border-color:var(--cr-ink)}
/* 2026-10-04 [AI] Etichetta al posto della select «Ordina Sto gestendo»
   (operaio W2, CONTRATTO-4): quella lista ha ora un ordine fisso di presa
   in carico (js/centro-rinnovi.js::comparatoreOrdinePresaInCarico), la
   select resta nel DOM ma `hidden` (additive-first, non cancellata). */
.cr-ordine-fisso{font-size:12px; color:var(--cr-ink-3); white-space:nowrap}
.cr-ordina-label{display:flex}
.cr-ordina{
  appearance:none; border:1px solid var(--cr-line-2); background:#fff; border-radius:8px;
  padding:4px 24px 4px 9px; font:inherit; font-size:12px; color:var(--cr-ink-2); cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238C897F' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 6px center; background-size:12px;
}

.cr-col-lista{flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 10px 16px}
.cr-zona-vuota{padding:28px 12px; text-align:center; color:var(--cr-ink-3); font-size:13px; line-height:1.5}

/* 2026-10-04 [AI] Lista vuota PER LA RICERCA DI COLONNA (operaio W2,
   CONTRATTO-4): stesso contenitore .cr-zona-vuota, con il pulsante
   «Cancella ricerca» per uscirne con un click (js/centro-rinnovi.js::
   renderColonna/pulisciRicercaColonna). */
.cr-zona-vuota--ricerca p{margin:0 0 10px}
.cr-zona-vuota-btn{
  appearance:none; border:1px solid var(--cr-line-2); background:#fff; color:var(--cr-ink);
  border-radius:999px; padding:6px 16px; font:inherit; font-size:12.5px; font-weight:500; cursor:pointer;
}
.cr-zona-vuota-btn:hover{background:var(--cr-paper)}

/* -------- Filtro unico: colonna "non riguardata" dal filtro attivo --------
   (vedi js/centro-rinnovi.js::zonaAttenuata/notaAttenuazione). La colonna
   resta invariata nel contenuto, solo visivamente attenuata. */
.cr-col--fuori-filtro{opacity:.45}
.cr-col-nota-filtro{
  margin:0 2px 8px; padding:7px 10px; border-radius:var(--cr-radius-sm);
  background:var(--cr-paper); color:var(--cr-ink-2); font-size:12px; line-height:1.4;
}

/* Riga contratto */
@keyframes cr-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.cr-riga{
  display:flex; align-items:flex-start; gap:10px;
  width:100%; text-align:left; appearance:none; background:#fff; cursor:pointer;
  border:1px solid transparent; border-left:3px solid transparent; border-radius:var(--cr-radius-sm);
  padding:10px 12px; margin-bottom:4px; position:relative;
  animation:cr-entra .28s ease both;
  transition:background .14s, border-color .14s, transform .14s;
}
.cr-riga:hover{background:var(--cr-paper); transform:translateY(-1px)}
.cr-riga.selezionata{background:#FFFBEA; border-left-color:var(--cr-accent); border-color:var(--cr-line)}

/* 2026-10-03 [AI] Avatar tondo con iniziali (operaio F): tinta tenue
   derivata dal nome, impostata inline come --cr-riga-h (hue 0-359) da
   rigaHtml()/tintaCliente() in js/centro-rinnovi.js — mai un colore fisso
   scritto in JS, solo il numero. */
.cr-riga-avatar{
  flex:0 0 auto; width:34px; height:34px; margin-top:1px; border-radius:999px;
  display:grid; place-items:center;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  background:hsl(var(--cr-riga-h,210) 72% 93%);
  color:hsl(var(--cr-riga-h,210) 48% 34%);
}
.cr-riga-corpo{flex:1 1 auto; min-width:0}

.cr-riga-top{display:flex; align-items:center; gap:8px}
/* 2026-10-03 [AI] Fix (operaio F, segnalato dal regista con foto): il nome
   e' il dato piu' importante della riga e deve leggersi INTERO — flex:1 1
   auto + min-width:0 gli da' TUTTO lo spazio che resta dopo la pastiglia
   scadenza (flex:0 0 auto, mai compressa); l'ellissi scatta solo su nomi
   davvero troppo lunghi per la colonna. */
.cr-riga-cliente{flex:1 1 auto; min-width:0; font-size:14.5px; font-weight:700; color:var(--cr-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cr-riga-meta{font-size:12.5px; color:var(--cr-ink-3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* 2026-10-03 [AI] Riga 2 di «Da gestire» (operaio F): auto/provider a
   sinistra (si restringe, ellissi) + pillola «Prendo in carico» piccola a
   destra (flex:0 0 auto, mai compressa) — SULLA STESSA riga, non piu' un
   bottone a tutta altezza che rubava spazio alla riga 1 (vedi rigaHtml()). */
.cr-riga-meta-riga{display:flex; align-items:center; gap:8px; margin-top:2px}
.cr-riga-meta-riga .cr-riga-meta{flex:1 1 auto; min-width:0; margin-top:0}
.cr-pill{
  flex:0 0 auto; font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px;
  background:var(--cr-paper); color:var(--cr-ink-2); white-space:nowrap;
}
.cr-pill--scaduto{background:var(--cr-red-soft); color:var(--cr-red)}
/* 2026-10-03 [AI] Soglia ambra entro 30 gg (operaio F, vedi rigaHtml() in
   js/centro-rinnovi.js): rosso resta solo per scaduto/scade oggi, neutro
   (.cr-pill di base) oltre i 30 gg. */
.cr-pill--ambra{background:var(--cr-amber-soft); color:var(--cr-ink)}
.cr-pill--ipotetica{background:transparent; border:1px dashed var(--cr-line-2); color:var(--cr-ink-3)}

/* 2026-10-04 [AI] Segno piccolo in riga 1 (accanto al nome) per i contratti
   con gestione_numero_errato=true — solo un avviso, title «Numero
   segnalato come errato» (rigaHtml, js): il contratto resta nella lista. */
.cr-riga-segno{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; color:var(--cr-red)}
.cr-riga-segno--errato{color:var(--cr-red)}
.cr-i--mini{width:14px; height:14px}

/* [AI-DEPRECATED 2026-10-03] .cr-riga-chips/.cr-chip/.cr-chip--urgente: non
   piu' generate da rigaHtml() (sostituite da .cr-riga-contatto/.cr-riga-
   azione-pill-* qui sotto) — lasciate per AGENTS.md §7 (additive-first).
   Nessun altro file le usa: verificare con "grep -rn cr-chip public/js"
   prima di rimuoverle. */
.cr-riga-chips{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.cr-chip{font-size:11.5px; color:var(--cr-ink-2); background:var(--cr-paper); border-radius:999px; padding:3px 9px}
.cr-chip--urgente{background:var(--cr-red-soft); color:var(--cr-red)}

/* 2026-10-03 [AI] Riga di contatto «Sto gestendo» (operaio F): pallino
   colorato dall'esito dell'ultimo contatto + testo, pastiglia della
   prossima azione a destra (margin-left:auto, resta a destra anche se il
   pallino/testo non ci sono — es. nessun contatto registrato ma c'e' gia'
   un promemoria).
   Fix (segnalato dal regista con foto): "il pallino va a capo da solo" —
   pallino+testo erano due flex item SEPARATI dentro un contenitore
   flex-wrap, quindi in alcune larghezze potevano finire su righe diverse.
   Ora stanno chiusi in .cr-riga-contatto-info, UN SOLO flex item (flex-wrap
   di default: nowrap) che il contenitore esterno o fa stare intero sulla
   riga o — se proprio non c'entra — manda intero a capo: mai piu' spezzato
   a meta'. Solo la pastiglia azione, item indipendente, puo' scendere sotto
   da sola se non c'e' spazio, allineata a destra (margin-left:auto). */
.cr-riga-contatto{display:flex; align-items:center; gap:4px 8px; margin-top:6px; flex-wrap:wrap}
.cr-riga-contatto-info{display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0}
.cr-riga-contatto-dot{flex:0 0 auto; width:8px; height:8px; border-radius:999px; background:var(--cr-ink-3)}
.cr-riga-contatto-dot--ok{background:var(--cr-green)}
.cr-riga-contatto-dot--attesa{background:var(--cr-amber)}
.cr-riga-contatto-dot--no{background:var(--cr-red)}
.cr-riga-contatto-dot--neutro{background:var(--cr-ink-3)}
.cr-riga-contatto-testo{flex:1 1 auto; min-width:0; font-size:12px; color:var(--cr-ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cr-riga-azione-pill{
  margin-left:auto; flex:0 0 auto; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  background:var(--cr-paper); color:var(--cr-ink-2); white-space:nowrap;
}
.cr-riga-azione-pill--ritardo{background:var(--cr-red-soft); color:var(--cr-red)}
.cr-riga-azione-pill--oggi{background:var(--cr-amber-soft); color:var(--cr-ink)}

/* [AI-DEPRECATED 2026-10-03] .cr-riga-azione/.cr-btn-prendi: il bottone
   «prendi» e' ora figlio diretto di .cr-riga (.cr-pill-prendi qui sotto),
   non piu' in un blocco .cr-riga-azione a tutta larghezza — lasciate per
   AGENTS.md §7 (additive-first). Nessun altro file le usa: verificare con
   "grep -rn cr-btn-prendi public/js" prima di rimuoverle. */
.cr-riga-azione{margin-top:9px}
.cr-btn-prendi{
  appearance:none; border:1px solid var(--cr-ink); background:#fff; color:var(--cr-ink);
  border-radius:999px; padding:6px 13px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer;
  transition:background .14s,color .14s;
}
.cr-btn-prendi:hover{background:var(--cr-ink); color:#fff}
.cr-btn-prendi[disabled]{opacity:.55; cursor:default}

/* 2026-10-03 [AI] «Prendo in carico» piccola con icona, riga 2 (operaio F):
   STESSO [data-azione="prendi"] di sempre, testo accessibile «Prendo in
   carico il contratto di <nome>» via aria-label (rigaHtml() in js/centro-
   rinnovi.js) — qui solo l'aspetto, piu' piccola che nella primissima
   versione (era una pillola piu' grande a tutta altezza riga: rubava spazio
   al nome, fix su segnalazione del regista). */
.cr-pill-prendi{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
  appearance:none; border:1px solid var(--cr-ink); background:#fff; color:var(--cr-ink);
  border-radius:999px; padding:4px 10px 4px 7px; font:inherit; font-size:11px; font-weight:700; cursor:pointer;
  white-space:nowrap;
  transition:background .14s, color .14s, transform .12s;
}
.cr-pill-prendi .cr-i{width:12px; height:12px; flex:0 0 auto}
.cr-pill-prendi:hover{background:var(--cr-ink); color:#fff}
.cr-pill-prendi:active{transform:scale(.96)}
.cr-pill-prendi[disabled]{opacity:.55; cursor:default}

.cr-riga--esce{opacity:0; transform:translateX(8px); transition:opacity .18s,transform .18s}

/* Chiusi */
.cr-chiusi{margin-top:4px; border-top:1px solid var(--cr-line); padding-top:4px}
.cr-chiusi-toggle{
  width:100%; display:flex; align-items:center; gap:8px; appearance:none; background:transparent;
  border:none; cursor:pointer; padding:10px 2px; font:inherit; color:var(--cr-ink-2);
}
.cr-chiusi-caret{transition:transform .16s}
.cr-chiusi-toggle[aria-expanded="true"] .cr-chiusi-caret{transform:rotate(90deg)}
.cr-chiusi-titolo{font-size:13px; font-weight:700}
.cr-chiusi-conta{font-size:11px; color:var(--cr-ink-3); margin-left:auto}
.cr-riga-chiusa{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left; appearance:none; background:transparent;
  border:none; border-radius:var(--cr-radius-sm); padding:8px 8px; cursor:pointer; font:inherit; font-size:12.5px;
}
.cr-riga-chiusa:hover{background:var(--cr-paper)}
.cr-chiuso-esito{font-weight:700; flex:0 0 auto; font-size:11px; text-transform:uppercase; letter-spacing:.03em}
.cr-riga-chiusa--rinnovato .cr-chiuso-esito{color:var(--cr-green)}
.cr-riga-chiusa--perso .cr-chiuso-esito{color:var(--cr-red)}
/* 2026-10-05 [AI] Added (operaio W5, CONTRATTO-7) — chiuso con l'esito di
   contatto 'altro_consulente' (REGOLA DATI: non è perso): TONO NEUTRO
   (ink-2), mai verde/rosso/giallo/arancione. */
.cr-riga-chiusa--altro .cr-chiuso-esito{color:var(--cr-ink-2)}
.cr-chiuso-cliente{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--cr-ink)}
.cr-chiuso-data{flex:0 0 auto; color:var(--cr-ink-3); font-size:11.5px}

/* Dettaglio */
.cr-col--dettaglio{min-width:0}
.cr-dettaglio-vuoto{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:14px; padding:40px; color:var(--cr-ink-3); height:100%;
}
.cr-dettaglio-vuoto strong{display:block; font-size:14px; font-weight:500; color:var(--cr-ink-3)}

/* 2026-10-03 [AI] «Inizia da qui» (operaio F): il cliente piu' urgente in
   evidenza (stesso criterio di trovaProssimo() in js/centro-rinnovi-
   plancia.js — vedi trovaCandidatoUrgente() in js/centro-rinnovi.js) con un
   pulsante grande che lo apre. Markup assente del tutto se non c'e' nessun
   contratto apribile: niente blocco vuoto. */
.cr-dettaglio-invito{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  max-width:340px; padding:22px 28px; border:1px solid var(--cr-line-2); border-radius:var(--cr-radius);
  background:var(--cr-paper);
}
.cr-dettaglio-invito-eyebrow{margin:0; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--cr-ink-3)}
.cr-dettaglio-invito-riga{margin:2px 0 4px; font-size:17px; color:var(--cr-ink)}
.cr-dettaglio-invito-cliente{font-weight:700}
.cr-dettaglio-invito-motivo{font-weight:500; color:var(--cr-ink-2)}
.cr-dettaglio-invito-apri{padding:10px 28px; font-size:14.5px}

.cr-dettaglio-scorciatoie{list-style:none; margin:4px 0 0; padding:0; font-size:12px; display:flex; flex-direction:column; gap:5px; opacity:.8}
.cr-dettaglio-scorciatoie kbd{border:1px solid var(--cr-line-2); border-radius:4px; padding:0 5px; font-size:11px; background:#fff; margin-right:4px}

/* ===================================================== 7 · RESPONSIVE === */
@media (max-width:1279px){
  .cr-tabs{display:flex}
  .cr-work{grid-template-columns:380px 1fr}
  .cr-col--lista[data-tab-panel]{display:none}
  #crWork[data-tab="da-gestire"] #cr-lista-da-gestire{display:flex}
  #crWork[data-tab="sto-gestendo"] #cr-lista-sto-gestendo{display:flex}
}

@media (max-width:1023px){
  .cr-top{padding:0 14px; gap:12px}
  .cr-top-titolo{display:none}
  .cr-top-utente{display:none}
  .cr-oggi{padding:18px 16px 16px}
  .cr-oggi-data{font-size:28px}
  .cr-oggi-kpi{gap:20px}
  .cr-kpi-val{font-size:26px}
  .cr-strip-sezione{padding:8px 16px 6px}
  .cr-tabs{padding:8px 16px 0}
  .cr-work{grid-template-columns:1fr; min-height:0} /* niente 70vh forzato: qui il dettaglio collassa (vedi sotto) */
  /* 2026-10-02 [AI] min-height su .cr-col-lista (operaio K3): con #cr-plancia
     (K1) spesso piu' alta di un intero schermo telefono, senza questa riga
     .cr-col-lista collassava a un ritaglio di ~20px invece di riempire lo
     spazio — scoperto con un banco puppeteer (click sulla riga non apriva
     piu' nulla: il punto cliccato cadeva fuori da quel ritaglio). Causa: in
     questa catena flex (.cr-contenuto>.cr-work>.cr-col>.cr-col-lista, tutti
     min-height:0) .cr-plancia/.cr-scadenze/.cr-tabs hanno flex-shrink:0 (non
     si riducono mai) e con .cr-contenuto a sua volta shrinkabile, tutto lo
     spazio mancante viene tolto all'unico elemento che PUO' ridursi fino a
     zero: .cr-work (e quindi .cr-col-lista dentro). Dargli qui un min-height
     esplicito rompe quella cascata: trabocca sopra .cr-contenuto invece di
     collassare, e .cr-corpo (ora scrollabile, §5) lo rende raggiungibile.
     Sul CONTENITORE .cr-col--lista (la section, non il div interno
     .cr-col-lista): quella section ha overflow:hidden (regola esistente),
     quindi se resta a 0 ritaglia comunque il figlio anche con il figlio
     piu' alto. */
  .cr-col--lista{min-height:55vh}
  .cr-col-testa,.cr-col-lista{padding-left:16px; padding-right:16px}
  /* #cr-dettaglio resta nel DOM, VISIBILE (mai display:none) e in flusso
     normale: la scheda (C2, mobile:true) vi monta dentro un overlay
     position:fixed che deve poter coprire tutto il viewport — vedi WARNING
     in testa file. Qui nascondiamo solo il PLACEHOLDER vuoto (sotto), cosi'
     il contenitore collassa a altezza 0 quando non c'e' niente dentro, senza
     ricorrere a position:absolute (che su schermi stretti si era visto
     sovrapporsi al resto della pagina invece di occupare 0 spazio). */
  .cr-col--dettaglio{border:none; padding:0; flex:0 0 auto; min-height:0}
  .cr-dettaglio-vuoto{display:none}
}

@media (max-width:600px){
  .cr-search-tasto{display:none}
  .cr-oggi-kpi{gap:16px 22px}
}

/* 2026-10-04 [AI] 390px (operaio W2, CONTRATTO-4): bottone calendario e
   campo di ricerca colonna un po' piu' compatti, stesso comportamento. */
@media (max-width:430px){
  .cr-top-btn{width:34px; height:34px}
  .cr-top-btn .cr-i{width:18px; height:18px}
  .cr-col-cerca{height:32px; padding:0 10px}
  .cr-col-cerca-input{font-size:12.5px}
  .cr-ordine-fisso{font-size:11px}
}

/* 2026-10-02 [regista] Quando la scheda (C2) e' mostrata dentro #cr-dettaglio,
   il segnaposto «Scegli un cliente a sinistra» non deve restarle sopra. */
#cr-dettaglio:has(.crs-root) .cr-dettaglio-vuoto{display:none}