/**
 * REPO: yoyohub-v2
 * MODULE: public/css/crtl-kpi.css
 * PURPOSE: Stile della sezione «KPI Rinnovi» (js/crtl-kpi.js), pensata per
 *          capirsi a colpo d'occhio: il tabellone nero del verdetto (tasso
 *          enorme + frase + andamento 6 mesi), la barra orizzontale "dove
 *          sono i contratti", le due carte azione (Da dare al Team Farm /
 *          Da sbloccare) e la griglia "Il Team Farm" con l'anello SVG.
 * DEPENDENCIES: css/centro-rinnovi-tl.css (gettoni --crtl-*, .crtl-card,
 *          .crtl-btn*, .crtl-btn--accento, [hidden]).
 * EXPOSES: classi .crtl-kpi-* usate solo da js/crtl-kpi.js.
 * LAST REVIEWED: 2026-10-04
 * WARNINGS: Sofia Pro MAI font-weight:600. Numeri grandi SOLO 200/300,
 *          etichette 500/700. Breakpoint scelti sulla LARGHEZZA DELLA
 *          FINESTRA (le media query guardano il viewport, non l'area
 *          disponibile dentro al guscio): 1180px e 620px, per restare
 *          utilizzabile a 1024 e a 390 indipendentemente dalla barra
 *          laterale. ZERO arancione: --crtl-amber/--crtl-amber-soft usati
 *          SOLO come sfondo/riempimento (dot, segmenti, barre), mai come
 *          colore di testo (il giallo su bianco non si legge). Il tabellone
 *          nero (.crtl-kpi-verdetto, sfondo var(--crtl-ink)) è l'UNICO
 *          blocco scuro della pagina: non riusare questo sfondo altrove.
 *          2026-10-04: nuovo gruppo «grigio» (.crtl-kpi-pl-dot--grigio,
 *          .crtl-kpi-pl-seg--grigio) = var(--crtl-line-2) con testo scuro
 *          (var(--crtl-ink)), per «Non assegnati» nella pipeline — non è un
 *          nuovo colore semantico, solo neutro/assente (NON l'arancione).
 *          .crtl-kpi-pipeline-tot/-tot strong non più referenziate dallo
 *          scheletro (sostituite da .crtl-kpi-pl-totale-wrap/-num/-lbl, il
 *          totale grande in testa alla sezione): regole lasciate qui per
 *          additive-first, non cancellate.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-03 [AI] Added: prima stesura.
 * 2026-10-04 [AI] Added (richiesta utente via regista): .crtl-kpi-pl-totale-wrap/-num/-lbl
 *     (totale grande in testa, prima cosa che si vede), .crtl-kpi-pl-voce ora è un
 *     <button> vero (reset + hover/focus-visible) invece di <div>, .crtl-kpi-pl-sub
 *     (sottoriga piccola "N da prendere · ..." / "di cui N dal Team Farm"),
 *     .crtl-kpi-pl-dot-doppio (doppio pallino per il gruppo «Assegnati» a due toni di
 *     giallo), .crtl-kpi-pl-dot--grigio/.crtl-kpi-pl-seg--grigio (gruppo «Non
 *     assegnati», var(--crtl-line-2) + testo scuro). Nessuna regola cancellata.
 * 2026-10-03 [AI] Modified: redesign «d'impatto» chiesto dall'utente — sostituiti i
 *     6 tile bianchi + lista Attenzione + tabella Team Farm con: tabellone nero
 *     (.crtl-kpi-verdetto) con tasso 96px + andamento a barre; barra pipeline unica
 *     (.crtl-kpi-pipeline) con 4 segmenti cliccabili; due carte azione in riga
 *     (.crtl-kpi-due: Da dare al Team Farm con barre proporzionali + Da sbloccare
 *     "semaforo"); griglia di carte Team Farm con anello SVG (.crtl-kpi-farm-anello).
 *     Nessun nuovo colore: solo i gettoni --crtl-accent/--crtl-amber(-soft)/--crtl-green/
 *     --crtl-red/--crtl-ink già definiti in centro-rinnovi-tl.css.
 * 2026-10-03 [AI] Modified (3 ritocchi del regista dopo revisione foto kpi2-1440-full.png):
 *     (1) tolto il bagliore giallo trasparente dal tabellone nero (sembrava oliva/
 *     arancione sporco) e le barrette dei mesi passati nell'andamento, ora grigio/
 *     bianco (rgba(255,255,255,.28)): il giallo pieno resta SOLO su tasso e mese
 *     corrente; (2) righe "Da sbloccare" ridisegnate con numero grande colorato +
 *     freccia (.crtl-kpi-sblocca-n/-corpo/-freccia) al posto di pallino+testo;
 *     (3) barra pipeline: percentuale dei segmenti <9% ora SEMPRE visibile fuori
 *     dalla barra (.crtl-kpi-pipeline-barra-area/.crtl-kpi-pl-esterne/-esterna),
 *     non solo al passaggio del mouse.
 * 2026-10-03 [AI] Modified (regista): pallino rosso/giallo per riga di «Da sbloccare».
 */

.crtl-kpi{display:flex; flex-direction:column; gap:20px}

.crtl-kpi-testata{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.crtl-kpi-titolo{margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em}
.crtl-kpi-oggi{margin:2px 0 0; color:var(--crtl-ink-3); font-weight:500}

.crtl-kpi-sez-titolo{margin:0 0 14px; font-size:15px; font-weight:700}
.crtl-kpi-vuoto{color:var(--crtl-ink-3); font-weight:500; padding:12px 0; margin:0}

/* ============================================ 1 · VERDETTO (tabellone nero) ===== */
.crtl-kpi-verdetto{
  position:relative; overflow:hidden; border-radius:var(--crtl-radius);
  background:var(--crtl-ink); color:#fff; padding:28px 32px;
  display:grid; grid-template-columns:minmax(240px,360px) minmax(0,1fr) minmax(240px,300px); gap:28px; align-items:center;
  box-shadow:0 18px 46px -20px rgba(0,0,0,.55);
}
/* 2026-10-03 (ritocco regista): niente giallo trasparente sul nero (sembrava
   oliva/arancione sporco). Sfondo pulito, solo un riflesso BIANCO molto tenue
   in alto — il giallo resta SOLO sul tasso e sulla barretta del mese corrente. */
.crtl-kpi-verdetto::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(900px 280px at 18% -30%, rgba(255,255,255,.07), transparent 70%);
}
.crtl-kpi-verdetto > *{position:relative; z-index:1}

.crtl-kpi-verdetto-tasso{display:flex; flex-direction:column; gap:4px; min-width:0}
.crtl-kpi-verdetto-tasso-num{font-size:96px; font-weight:200; line-height:.95; color:var(--crtl-accent); letter-spacing:-.02em}
.crtl-kpi-verdetto-tasso-eti{font-size:13px; font-weight:500; color:rgba(255,255,255,.72); max-width:26ch}
.crtl-kpi-verdetto-tasso-frazione{display:block; margin-top:2px; font-size:13px; font-weight:700; color:rgba(255,255,255,.92)}

.crtl-kpi-verdetto-frase{margin:0; font-size:19px; font-weight:300; line-height:1.42; color:#fff; min-width:0}

.crtl-kpi-verdetto-andamento{display:flex; flex-direction:column; gap:10px; min-width:0}
.crtl-kpi-andamento-testa{display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap}
.crtl-kpi-andamento-eti{font-size:11px; font-weight:700; color:rgba(255,255,255,.68); text-transform:uppercase; letter-spacing:.04em}
.crtl-kpi-andamento-delta{font-size:12px; font-weight:700}
.crtl-kpi-andamento-delta--su{color:var(--crtl-green)}
.crtl-kpi-andamento-delta--giu{color:var(--crtl-red)}
.crtl-kpi-andamento-delta--pari{color:rgba(255,255,255,.6)}

.crtl-kpi-andamento-barre{display:grid; grid-template-columns:repeat(6,1fr); align-items:end; gap:8px; height:108px}
.crtl-kpi-and-col{display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end}
.crtl-kpi-and-n{font-size:11px; font-weight:700; color:rgba(255,255,255,.55)}
.crtl-kpi-and-col.is-corrente .crtl-kpi-and-n{color:var(--crtl-accent)}
.crtl-kpi-and-barra-wrap{display:flex; align-items:flex-end; height:64px}
/* Mesi passati: grigio/bianco (MAI giallo trasparente, sembra oliva sul nero).
   Il giallo pieno è riservato al solo mese corrente, qui sotto. */
.crtl-kpi-and-barra{width:14px; min-height:2px; border-radius:4px 4px 0 0; background:rgba(255,255,255,.28); transition:height .5s cubic-bezier(.22,1,.36,1)}
.crtl-kpi-and-col.is-corrente .crtl-kpi-and-barra{background:var(--crtl-accent); box-shadow:0 0 14px rgba(255,214,10,.55)}
.crtl-kpi-and-lbl{font-size:10px; font-weight:500; color:rgba(255,255,255,.5)}
.crtl-kpi-and-col.is-corrente .crtl-kpi-and-lbl{color:#fff; font-weight:700}

/* ============================================ 2 · PIPELINE (dove sono i contratti) ===== */
.crtl-kpi-pipeline{padding:22px 24px}
.crtl-kpi-pipeline-testa{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px}
.crtl-kpi-pipeline-testa .crtl-kpi-sez-titolo{margin:0}
/* 2026-10-04: non più nello scheletro (vedi .crtl-kpi-pl-totale-wrap sotto), lasciata per additive-first. */
.crtl-kpi-pipeline-tot{font-size:13px; font-weight:500; color:var(--crtl-ink-3)}
.crtl-kpi-pipeline-tot strong{font-weight:700; color:var(--crtl-ink)}

/* Il totale: prima cosa che si vede nella carta, sopra la legenda a 4 gruppi. */
.crtl-kpi-pl-totale-wrap{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:14px 0 18px}
.crtl-kpi-pl-totale-num{font-size:48px; font-weight:200; line-height:1; color:var(--crtl-ink); letter-spacing:-.01em}
.crtl-kpi-pl-totale-lbl{font-size:14px; font-weight:500; color:var(--crtl-ink-3)}

.crtl-kpi-pl-legenda{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px}
/* 2026-10-04: da <div> a <button> vero (tastiera): reset + hover/focus-visible, stesso
   layout di prima (flex, dot+numero+percentuale+etichetta), più la sottoriga .crtl-kpi-pl-sub. */
.crtl-kpi-pl-voce{
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; width:100%;
  border:1px solid transparent; border-radius:var(--crtl-radius-sm); background:transparent;
  padding:6px 8px; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.crtl-kpi-pl-voce:hover{background:var(--crtl-paper-2); border-color:var(--crtl-line)}
.crtl-kpi-pl-voce:focus-visible{outline:2px solid var(--crtl-ink); outline-offset:1px}
.crtl-kpi-pl-dot{width:10px; height:10px; border-radius:3px; flex:none}
.crtl-kpi-pl-dot--giallo-chiaro{background:var(--crtl-amber-soft); border:1px solid var(--crtl-line-2)}
.crtl-kpi-pl-dot--giallo{background:var(--crtl-accent)}
.crtl-kpi-pl-dot--verde{background:var(--crtl-green)}
.crtl-kpi-pl-dot--rosso{background:var(--crtl-red)}
/* «Non assegnati»: grigio neutro chiaro, testo scuro — MAI arancione. */
.crtl-kpi-pl-dot--grigio{background:var(--crtl-line-2); border:1px solid var(--crtl-line)}
/* «Assegnati»: doppio pallino (chiaro = da prendere, pieno = in lavorazione). */
.crtl-kpi-pl-dot-doppio{display:inline-flex; align-items:center; gap:3px; flex:none}
.crtl-kpi-pl-dot-doppio .crtl-kpi-pl-dot{width:8px; height:8px}
.crtl-kpi-pl-num{font-size:20px; font-weight:300; color:var(--crtl-ink)}
.crtl-kpi-pl-pct{font-size:12px; font-weight:700; color:var(--crtl-ink-3)}
.crtl-kpi-pl-lbl{flex-basis:100%; font-size:12px; font-weight:500; color:var(--crtl-ink-3)}
/* Sottoriga: "N da prendere · N in lavorazione · N con esito" / "di cui N dal Team Farm". */
.crtl-kpi-pl-sub{flex-basis:100%; font-size:11px; font-weight:500; color:var(--crtl-ink-3); margin-top:2px}

/* Area con spazio sopra per le etichette "esterne" dei segmenti troppo stretti
   (es. Persi): la barra vera resta overflow:hidden per gli angoli tondi, le
   etichette vivono in un livello assoluto SOPRA, mai tagliato.
   2026-10-04: margine aumentato (22->46px) per fare spazio anche alla quota alta
   (.crtl-kpi-pl-esterna--alta, top:-44px) di due etichette vicine, senza che tocchi la legenda sopra. */
.crtl-kpi-pipeline-barra-area{position:relative; margin-top:46px}
.crtl-kpi-pipeline-barra{display:flex; height:56px; border-radius:14px; overflow:hidden; background:var(--crtl-paper-2); border:1px solid var(--crtl-line)}
.crtl-kpi-pl-esterne{position:absolute; inset:0; pointer-events:none}
.crtl-kpi-pl-esterna{
  position:absolute; top:-22px; transform:translateX(-50%); white-space:nowrap;
  font-size:11px; font-weight:700; color:var(--crtl-ink); background:#fff;
  padding:2px 7px; border-radius:7px; border:1px solid var(--crtl-line-2);
  box-shadow:0 2px 6px rgba(18,18,18,.1);
}
/* 2026-10-04: con 5 segmenti due etichette esterne vicine possono sovrapporsi (visto negli
   screenshot a 390px) — alternata su una quota più alta, vedi disegnaPipeline (piccoloIdx). */
.crtl-kpi-pl-esterna--alta{top:-44px}
.crtl-kpi-pl-seg{flex:0 0 auto; min-width:4px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:filter .15s ease; font:inherit}
.crtl-kpi-pl-seg:hover{filter:brightness(.94)}
.crtl-kpi-pl-seg:focus-visible{outline:2px solid var(--crtl-ink); outline-offset:-2px}
.crtl-kpi-pl-seg--grigio{background:var(--crtl-line-2)}
.crtl-kpi-pl-seg--giallo-chiaro{background:var(--crtl-amber-soft)}
.crtl-kpi-pl-seg--giallo{background:var(--crtl-accent)}
.crtl-kpi-pl-seg--verde{background:var(--crtl-green)}
.crtl-kpi-pl-seg--rosso{background:var(--crtl-red)}
.crtl-kpi-pl-seg--grigio .crtl-kpi-pl-seg-txt,.crtl-kpi-pl-seg--giallo-chiaro .crtl-kpi-pl-seg-txt,.crtl-kpi-pl-seg--giallo .crtl-kpi-pl-seg-txt{color:var(--crtl-ink)}
.crtl-kpi-pl-seg--verde .crtl-kpi-pl-seg-txt,.crtl-kpi-pl-seg--rosso .crtl-kpi-pl-seg-txt{color:#fff}
.crtl-kpi-pl-seg-txt{font-size:13px; font-weight:700}

/* ============================================ 3 · DUE CARTE AZIONE ===== */
.crtl-kpi-due{display:grid; grid-template-columns:minmax(280px,380px) minmax(0,1fr); gap:16px; align-items:stretch}

.crtl-kpi-dare{padding:22px 24px; display:flex; flex-direction:column; gap:16px}
.crtl-kpi-dare-num-wrap{display:flex; flex-direction:column; gap:2px}
.crtl-kpi-dare-num{font-size:52px; font-weight:200; line-height:1; color:var(--crtl-ink)}
.crtl-kpi-dare-sotto{font-size:13px; font-weight:500; color:var(--crtl-ink-3)}
.crtl-kpi-dare-righe{display:flex; flex-direction:column; gap:8px}
.crtl-kpi-dare-riga{display:grid; grid-template-columns:88px minmax(0,1fr) 44px; align-items:center; gap:10px; padding:7px 0; border:none; background:transparent; cursor:pointer; font:inherit; text-align:left}
.crtl-kpi-dare-riga-lbl{font-size:12.5px; font-weight:500; color:var(--crtl-ink-2)}
.crtl-kpi-dare-riga-barra{height:8px; border-radius:999px; background:var(--crtl-line); overflow:hidden}
.crtl-kpi-dare-riga-barra-v{display:block; height:100%; width:0; border-radius:999px; transition:width .5s cubic-bezier(.22,1,.36,1)}
.crtl-kpi-dare-riga-barra-v--rosso{background:var(--crtl-red)}
.crtl-kpi-dare-riga-barra-v--giallo{background:var(--crtl-accent)}
.crtl-kpi-dare-riga-n{font-size:16px; font-weight:700; color:var(--crtl-ink); text-align:right}
.crtl-kpi-dare-cta{width:100%; margin-top:auto}

.crtl-kpi-sblocca{padding:22px 24px; display:flex; flex-direction:column}
.crtl-kpi-sblocca-righe{display:flex; flex-direction:column; gap:6px}
/* 2026-10-03 (ritocco regista): numero grande colorato a sinistra (come il "162"
   della carta Da dare, peso 200), etichetta accanto, freccia a destra: la carta
   si legge a colpo d'occhio come l'altra, non più solo pallino+riga di testo. */
.crtl-kpi-sblocca-riga{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px;
  width:100%; padding:14px 12px; border-radius:var(--crtl-radius-sm); border:1px solid transparent;
  background:transparent; font:inherit; color:var(--crtl-ink); text-align:left; cursor:pointer; transition:background .15s ease, border-color .15s ease;
}
.crtl-kpi-sblocca-riga:hover{background:var(--crtl-paper-2); border-color:var(--crtl-line)}
.crtl-kpi-sblocca-n{font-size:38px; font-weight:200; line-height:1; min-width:1.4em}
.crtl-kpi-sblocca-n--rosso{color:var(--crtl-red)}
.crtl-kpi-sblocca-n--giallo{color:var(--crtl-ink)}
.crtl-kpi-sblocca-corpo{display:flex; align-items:center; gap:7px; min-width:0}
.crtl-kpi-sblocca-dot{width:9px; height:9px; border-radius:50%; flex:none; background:var(--crtl-accent)}
.crtl-kpi-sblocca-dot--rosso{background:var(--crtl-red)}
.crtl-kpi-sblocca-dot--giallo{background:var(--crtl-accent)}
.crtl-kpi-sblocca-testo{font-size:14.5px; font-weight:500; line-height:1.3}
.crtl-kpi-sblocca-freccia{font-size:17px; font-weight:700; color:var(--crtl-ink-3); flex:none; transition:color .15s ease, transform .15s ease}
.crtl-kpi-sblocca-riga:hover .crtl-kpi-sblocca-freccia{color:var(--crtl-ink); transform:translateX(2px)}
.crtl-kpi-sblocca-ok{margin:auto 0; padding:18px 0; font-size:24px; font-weight:300; color:var(--crtl-green); text-align:center}

/* ============================================ 4 · IL TEAM FARM ===== */
.crtl-kpi-farm{padding:22px 24px}
/* auto-fit (non auto-fill): con pochi consulenti le colonne vuote collassano e le
   carte esistenti si allargano a riempire la riga, invece di restare strette con
   un vuoto a destra. */
.crtl-kpi-farm-griglia{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px}
.crtl-kpi-farm-card{border:1px solid var(--crtl-line); border-radius:var(--crtl-radius-sm); padding:16px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.crtl-kpi-farm-card-testa{display:flex; flex-direction:column; align-items:center; gap:8px}
.crtl-kpi-farm-avatar{width:40px; height:40px; border-radius:50%; background:var(--crtl-ink); color:var(--crtl-accent); display:grid; place-items:center; font-weight:700; font-size:14px}
.crtl-kpi-farm-nome{font-weight:700; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.crtl-kpi-farm-anello-wrap{position:relative; width:84px; height:84px; display:grid; place-items:center}
.crtl-kpi-farm-anello{width:84px; height:84px; transform:rotate(-90deg)}
.crtl-kpi-farm-anello-bg{fill:none; stroke:var(--crtl-line); stroke-width:7}
.crtl-kpi-farm-anello-v{fill:none; stroke:var(--crtl-green); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1)}
.crtl-kpi-farm-anello-num{position:absolute; font-size:17px; font-weight:700; color:var(--crtl-ink)}
.crtl-kpi-farm-numeri{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; width:100%}
.crtl-kpi-farm-numeri strong{display:block; font-size:16px; font-weight:300; color:var(--crtl-ink)}
.crtl-kpi-farm-numeri small{font-size:10px; font-weight:500; color:var(--crtl-ink-3)}
.crtl-kpi-farm-richiami{font-size:12px; font-weight:700; color:var(--crtl-red)}

/* ============================================ 5 · RESPONSIVE ===== */
@media (max-width:1180px){
  .crtl-kpi-verdetto{grid-template-columns:1fr; gap:22px; text-align:left}
  .crtl-kpi-verdetto-tasso-eti,.crtl-kpi-verdetto-tasso-frazione{max-width:none}
  .crtl-kpi-due{grid-template-columns:1fr}
}
@media (max-width:620px){
  .crtl-kpi-verdetto{padding:22px 18px}
  .crtl-kpi-verdetto-tasso-num{font-size:64px}
  .crtl-kpi-verdetto-frase{font-size:16px}
  .crtl-kpi-andamento-barre{height:88px}
  .crtl-kpi-and-barra-wrap{height:48px}
  .crtl-kpi-pl-totale-num{font-size:36px}
  .crtl-kpi-pl-legenda{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crtl-kpi-pipeline-barra{height:44px; border-radius:12px}
  .crtl-kpi-pl-seg-txt{display:none}
  .crtl-kpi-dare-num{font-size:40px}
  .crtl-kpi-farm-griglia{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .crtl-kpi-and-barra,.crtl-kpi-dare-riga-barra-v,.crtl-kpi-farm-anello-v{transition:none}
}