/**
 * REPO: yoyohub-v2
 * MODULE: public/css/crtl-statistiche.css
 * PURPOSE: Stile della sezione «Statistiche dettagliate» (js/crtl-
 *          statistiche.js): barre impilate per mese, imbuto scadenza->
 *          rinnovo, tabella per consulente Farm, barre orizzontali per
 *          fornitore e per motivo di perdita.
 * DEPENDENCIES: css/centro-rinnovi-tl.css (gettoni --crtl-*, .crtl-card),
 *          css/crtl-kpi.css (.crtl-kpi-titolo, .crtl-kpi-oggi, .crtl-kpi-
 *          sez-titolo, .crtl-kpi-vuoto — riusate qui per restare uguali
 *          alla sezione KPI, caricata sempre prima in centro-rinnovi-tl.html).
 * EXPOSES: classi .crtl-st-* usate solo da js/crtl-statistiche.js.
 * LAST REVIEWED: 2026-10-03
 * WARNINGS: .crtl-st-barre-scroll e .crtl-st-tabella-scroll sono gli UNICI
 *          punti con overflow-x:auto (il grafico a 13 colonne e la tabella
 *          per consulente non si leggono spremuti a 390px): scorrono SOLO
 *          al loro interno, mai la pagina. Sofia Pro MAI font-weight:600.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-03 [AI] Added: prima stesura.
 */

.crtl-st{display:flex; flex-direction:column; gap:18px}
.crtl-st-testata{display:flex; flex-direction:column; gap:2px}
.crtl-st-blocco{padding:18px 20px; min-width:0}
.crtl-st-spiega{margin:-4px 0 14px; color:var(--crtl-ink-3); font-weight:500; font-size:13px; max-width:620px}
.crtl-st-riga-due{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}

/* ---------- legenda + barre impilate (scadenze per mese) ---------- */
.crtl-st-legenda{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px}
.crtl-st-legenda-voce{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--crtl-ink-2)}
.crtl-st-dot{width:9px; height:9px; border-radius:3px; flex:none}
.crtl-st-dot--da_assegnare{background:var(--crtl-ink-3)}
.crtl-st-dot--assegnati{background:var(--crtl-blue)}
.crtl-st-dot--in_gestione{background:var(--crtl-amber)}
.crtl-st-dot--rinnovati{background:var(--crtl-green)}
.crtl-st-dot--persi{background:var(--crtl-red)}

.crtl-st-suggerimento{display:none; font-size:12px; font-weight:500; color:var(--crtl-ink-3); margin:-8px 0 10px}
.crtl-st-barre-scroll{overflow-x:auto; padding-bottom:6px; margin:0 -4px}
.crtl-st-barre{display:flex; gap:12px; align-items:flex-end; min-height:250px; padding:0 4px}
.crtl-st-colonna{display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 0 52px; min-width:52px}
.crtl-st-colonna-tot{font-size:13px; font-weight:700; color:var(--crtl-ink-2); min-height:16px}
.crtl-st-colonna-pila{width:100%; max-width:40px; height:200px; display:flex; flex-direction:column; justify-content:flex-end; background:var(--crtl-paper-2); border:1px solid var(--crtl-line); border-radius:6px; overflow:hidden}
.crtl-st-segmento{width:100%; flex:none}
.crtl-st-segmento--da_assegnare{background:var(--crtl-ink-3)}
.crtl-st-segmento--assegnati{background:var(--crtl-blue)}
.crtl-st-segmento--in_gestione{background:var(--crtl-amber)}
.crtl-st-segmento--rinnovati{background:var(--crtl-green)}
.crtl-st-segmento--persi{background:var(--crtl-red)}
.crtl-st-colonna-lbl{font-size:11px; font-weight:500; color:var(--crtl-ink-3); white-space:nowrap}
.crtl-st-colonna--scaduti .crtl-st-colonna-pila{border-color:var(--crtl-red); border-width:1.5px}
.crtl-st-colonna--scaduti .crtl-st-colonna-lbl{color:var(--crtl-red); font-weight:700}

/* ---------- imbuto scadenza -> rinnovo ---------- */
.crtl-st-imbuto{display:flex; flex-direction:column; align-items:center; gap:4px; padding:6px 0}
.crtl-st-imbuto-fase{width:100%; max-width:560px; display:flex; flex-direction:column; gap:5px}
.crtl-st-imbuto-testo{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.crtl-st-imbuto-testo strong{font-weight:700; font-size:14px}
.crtl-st-imbuto-testo span{font-weight:300; font-size:20px}
.crtl-st-imbuto-barra{height:34px; min-width:9%; border-radius:8px; background:linear-gradient(180deg,#2a2a2a,#0d0d0d); transition:width .4s ease}
.crtl-st-imbuto-passo{align-self:center; font-size:12px; font-weight:700; color:var(--crtl-ink-3); margin:4px 0}

/* ---------- tabella per consulente Farm ---------- */
.crtl-st-tabella-scroll{overflow-x:auto}
.crtl-st-tabella{width:100%; border-collapse:collapse; font-size:13px; min-width:640px}
.crtl-st-tabella th{text-align:right; font-weight:700; color:var(--crtl-ink-2); padding:8px 10px; border-bottom:2px solid var(--crtl-line); white-space:nowrap}
.crtl-st-tabella th:first-child,.crtl-st-tabella td:first-child{text-align:left}
.crtl-st-tabella td{text-align:right; padding:9px 10px; border-bottom:1px solid var(--crtl-line); font-weight:500}
.crtl-st-tabella tbody tr:last-child td{border-bottom:none}

/* ---------- barre orizzontali: fornitore / motivi di perdita ---------- */
.crtl-st-barreoriz{display:flex; flex-direction:column; gap:11px}
.crtl-st-barraoriz-riga{display:grid; grid-template-columns:minmax(0,160px) minmax(0,1fr) 44px 44px; align-items:center; gap:10px}
.crtl-st-barraoriz-etichetta{font-weight:500; font-size:13px; line-height:1.25}
.crtl-st-barraoriz-traccia{height:10px; border-radius:999px; background:var(--crtl-line); overflow:hidden}
.crtl-st-barraoriz-valore{display:block; height:100%; background:var(--crtl-blue); border-radius:999px; transition:width .4s ease}
.crtl-st-barraoriz-valore--persi{background:var(--crtl-red)}
.crtl-st-barraoriz-numero{font-weight:700; font-size:13px; text-align:right}
.crtl-st-barraoriz-tasso{font-weight:500; font-size:12px; color:var(--crtl-green); text-align:right}

@media (max-width:1300px){
  .crtl-st-suggerimento{display:block}
}
@media (max-width:1180px){
  .crtl-st-riga-due{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
  .crtl-st-barraoriz-riga{grid-template-columns:minmax(0,1fr); row-gap:4px}
  .crtl-st-barraoriz-numero,.crtl-st-barraoriz-tasso{text-align:left}
  .crtl-st-imbuto-barra{height:28px}
}
@media (prefers-reduced-motion:reduce){
  .crtl-st-imbuto-barra,.crtl-st-barraoriz-valore{transition:none}
}