/**
 * REPO: dashboard-consulenti
 * MODULE: css/centro-rinnovi-scadenze.css
 * PURPOSE: Veste il componente «Scadenze» (js/centro-rinnovi-scadenze.js,
 *          window.CRScadenze). Redesign 2026-10-04: da grafico a colonne
 *          alto (fino a ~140px, barre verticali) a striscia COMPATTA di
 *          pastiglie orizzontali (~70-80px), su richiesta dell'utente
 *          ("non mi piace il design, sembra che diamo troppa importanza a
 *          una cosa un po' inutile"). Stessa informazione di prima (quanti
 *          contratti scadono in ognuno dei prossimi 6 mesi, quanti gia'
 *          scaduti, quanti senza data), solo meno peso visivo.
 * DEPENDENCIES: i gettoni --cr-* definiti su body.cr-app in css/
 *          centro-rinnovi.css. Ogni var() qui ha pero' un fallback
 *          letterale (stessi valori del tema bianco), cosi' il componente
 *          resta leggibile anche fuori da .cr-app (es. nella pagina di
 *          prova del banco). Font 'Sofia Pro' caricata altrove (css/
 *          centro-rinnovi.css via @font-face): qui si usa solo per nome,
 *          con fallback system-ui se non disponibile.
 * EXPOSES: .crs2-root e discendenti (prefisso crs2- indipendente dal resto
 *          della pagina).
 * LAST REVIEWED: 2026-10-04
 * WARNINGS: le pastiglie sono <button> (tastiera + aria-pressed) — non
 *          convertirle in <div onclick>. La crescita delle barrette
 *          all'ingresso e' una CSS animation su .crs2-seg (ora in
 *          orizzontale, scaleX): funziona perche' js/centro-rinnovi-
 *          scadenze.js ricrea i nodi .crs2-seg ad ogni render (niente JS/
 *          rAF necessario qui), e si disattiva da sola con
 *          prefers-reduced-motion. Se in futuro si passa a un diffing DOM
 *          che riusa i nodi, questa animazione andra' ripensata (non
 *          ripartirebbe piu'). A ≤600px la striscia scorre in ORIZZONTALE
 *          dentro .crs2-strip (overflow-x:auto confinato lì, non sulla
 *          pagina): verificato con screenshot + scrollWidth/clientWidth
 *          della pagina (vedi banco di prova), non togliere
 *          `.crs2-root [hidden]{display:none!important}` sotto, serve a
 *          chi monta/smonta il componente da centro-rinnovi.js.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-02 [AI] Added: prima stesura (operaio K2, in parallelo con
 *          plancia/integrazione/banco di prova).
 * 2026-10-03 [AI] Fixed (operaio G): niente arancione — --cr-amber ora e' il
 *          giallo marchio (regista). Qui il riempimento del segmento
 *          «Da prendere in carico» (.crs2-seg--ambra, .crs2-legenda-
 *          swatch--ambra) resta giallo pieno (ok, e' un riempimento); il
 *          numero sotto la colonna (.crs2-col-daprendere) era testo in
 *          var(--crs2-amber) = giallo su bianco, illeggibile: portato a
 *          --crs2-ink. Fallback letterali #C77700/#FFF3DD aggiornati a
 *          #FFD60A/#FFF4B8.
 * 2026-10-04 [AI] Modified: redesign da grafico a colonne alto a striscia
 *          compatta di pastiglie (vedi PURPOSE/WARNINGS sopra). Rimossi
 *          (markup non piu' generato da js/centro-rinnovi-scadenze.js dal
 *          2026-10-04, regole quindi morte — non e' una cancellazione di
 *          logica, solo pulizia delle regole che seguono il markup):
 *          .crs2-sottotitolo, .crs2-oggi-linea*, .crs2-gruppo*,
 *          .crs2-col-piede, .crs2-col-resto, .crs2-col-daprendere. Barre
 *          passate da verticali (altezza, scaleY) a orizzontali sottili
 *          dentro ogni pastiglia (larghezza, scaleX), proporzionali al
 *          totale DELLA PASTIGLIA STESSA e non piu' al totale massimo fra
 *          le colonne (BAR_MAX_PX rimosso anche in JS). Nuove:
 *          .crs2-col-puntino (mese piu' pieno), .crs2-tutti (pulsante per
 *          togliere il filtro, visibile solo a filtro attivo).
 */

.crs2-root [hidden]{display:none!important}

.crs2-root{
  --crs2-bg: var(--cr-bg, #FFFFFF);
  --crs2-paper: var(--cr-paper, #FAFAF7);
  --crs2-line: var(--cr-line, #ECEAE4);
  --crs2-line-2: var(--cr-line-2, #DEDBD2);
  --crs2-ink: var(--cr-ink, #121212);
  --crs2-ink-2: var(--cr-ink-2, #4F4D47);
  --crs2-ink-3: var(--cr-ink-3, #8C897F);
  --crs2-accent: var(--cr-accent, #FFD60A);
  --crs2-accent-soft: var(--cr-accent-soft, #FFF6CC);
  --crs2-accent-ink: var(--cr-accent-ink, #1F1A00);
  --crs2-red: var(--cr-red, #D93636);
  --crs2-red-soft: var(--cr-red-soft, #FDECEC);
  --crs2-amber: var(--cr-amber, #FFD60A);
  --crs2-amber-soft: var(--cr-amber-soft, #FFF4B8);
  --crs2-radius: var(--cr-radius, 14px);
  --crs2-font: var(--cr-font, 'Sofia Pro', system-ui, -apple-system, 'Segoe UI', sans-serif);

  box-sizing:border-box;
  font-family:var(--crs2-font);
  color:var(--crs2-ink);
  background:var(--crs2-bg);
  border-bottom:1px solid var(--crs2-line);
  padding:10px 28px 10px;
  -webkit-font-smoothing:antialiased;
}
.crs2-root *{box-sizing:border-box}
.crs2-root table,.crs2-root .crs2-col-totale{font-variant-numeric:tabular-nums}

/* Striscia compatta (redesign 2026-10-04): titolo+legenda su una riga,
   pastiglie sulla riga sotto. Budget altezza totale ~72-80px a 1440px
   (requisito utente: striscia "piccola, sobria, secondaria", ≤100px). */
.crs2-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.crs2-titolo{font-size:12.5px; font-weight:500; margin:0; letter-spacing:.01em; color:var(--crs2-ink-2)}

.crs2-legenda{display:flex; gap:10px; flex-wrap:wrap}
.crs2-legenda-voce{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--crs2-ink-3)}
.crs2-legenda-swatch{width:6px; height:6px; border-radius:2px; flex:0 0 auto}
.crs2-legenda-swatch--ambra{background:var(--crs2-amber)}
.crs2-legenda-swatch--inchiostro{background:var(--crs2-ink)}

/* ========================================== STRISCIA DI PASTIGLIE ===== */
/* Una sola riga: tutte le pastiglie fianco a fianco, scorrono in
   orizzontale SOLO dentro questo contenitore se non c'entrano (mai la
   pagina: vedi WARNINGS in testa file). */
.crs2-grafico{
  display:flex; align-items:center; gap:6px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  padding-bottom:2px; /* spazio per la scrollbar sottile senza tagliare le pastiglie */
}
.crs2-grafico::-webkit-scrollbar{height:4px}
.crs2-grafico::-webkit-scrollbar-thumb{background:var(--crs2-line-2); border-radius:4px}

.crs2-col{
  appearance:none; border:1px solid var(--crs2-line); background:var(--crs2-paper);
  display:flex; align-items:center; gap:7px; flex:0 0 auto; white-space:nowrap;
  padding:6px 11px; border-radius:999px; cursor:pointer; font:inherit; position:relative;
  transition:background .15s ease, border-color .15s ease;
}
.crs2-col:hover{background:var(--crs2-accent-soft); border-color:var(--crs2-line-2)}
.crs2-col:focus-visible{outline:2px solid var(--crs2-ink); outline-offset:1px}
.crs2-col--attiva{background:var(--crs2-accent-soft); border-color:var(--crs2-accent)}
.crs2-col--attiva:hover{background:var(--crs2-accent-soft)}

.crs2-col--scaduti{border-color:var(--crs2-red-soft)}

.crs2-col-totale{font-size:13px; font-weight:700; line-height:1; color:var(--crs2-ink)}
.crs2-col--scaduti .crs2-col-totale{color:var(--crs2-red)}

.crs2-col-nome{font-size:11px; color:var(--crs2-ink-2); line-height:1}
.crs2-col--scaduti .crs2-col-nome{color:var(--crs2-red)}

/* barretta ORIZZONTALE sottile (era verticale/alta prima del redesign):
   proporzionale al totale della pastiglia stessa, non al massimo fra le
   colonne — qui serve solo a far vedere a colpo d'occhio il rapporto
   da-prendere/in-lavorazione, non a confrontare un mese con l'altro. */
.crs2-col-barra{
  width:26px; height:4px; border-radius:2px; overflow:hidden;
  display:flex; align-items:stretch; background:var(--crs2-line); flex:0 0 auto;
}
.crs2-seg{
  height:100%; flex:0 0 auto;
  transform-origin:left; animation:crs2-crescita .35s cubic-bezier(.16,1,.3,1) both;
}
.crs2-seg--ambra{background:var(--crs2-amber)}
.crs2-seg--inchiostro{background:var(--crs2-ink)}
.crs2-seg--rosso{background:var(--crs2-red)}
@keyframes crs2-crescita{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* puntino "mese più pieno": segno leggero, mai urlato (richiesta utente) */
.crs2-col-puntino{
  position:absolute; top:5px; right:7px; width:5px; height:5px; border-radius:50%;
  background:var(--crs2-ink-3);
}

/* pastiglia "Tutti": toglie il filtro attivo, qualunque sia la fonte
   (questa striscia o il chip #crChipSettimana di centro-rinnovi.js) */
.crs2-tutti{
  appearance:none; border:1px dashed var(--crs2-line-2); background:transparent;
  color:var(--crs2-ink-2); font:inherit; font-size:11px; font-weight:500;
  padding:6px 11px; border-radius:999px; cursor:pointer; flex:0 0 auto; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease;
}
.crs2-tutti:hover{background:var(--crs2-paper); border-color:var(--crs2-ink-3)}
.crs2-tutti:focus-visible{outline:2px solid var(--crs2-ink); outline-offset:1px}

@media (prefers-reduced-motion:reduce){
  .crs2-seg{animation:none}
  .crs2-col,.crs2-tutti{transition:none}
}

/* ================================================= 390px ===== */
/* La striscia resta su UNA riga e scorre in orizzontale dentro
   .crs2-grafico (overflow-x:auto, mai sulla pagina): niente colonne che
   si schiacciano o testo che va a capo, le pastiglie restano leggibili
   uguali al desktop, solo piu' piccole. La legenda a riga piena si
   nasconde (il colore resta nella barretta di ogni pastiglia, il
   dettaglio testuale e' nel title/aria-label — stesso pattern gia' usato
   per .crs2-sottotitolo prima del redesign 2026-10-04, regola ora morta
   perche' quell'elemento non esiste piu' nel markup). */
@media (max-width:600px){
  .crs2-root{padding:10px 16px 10px}
  .crs2-titolo{font-size:11px}
  .crs2-legenda{display:none}
  .crs2-grafico{gap:4px}
  .crs2-col{padding:5px 8px; gap:5px}
  .crs2-col-totale{font-size:12px}
  .crs2-col-nome{font-size:10px}
  .crs2-col-barra{width:18px; height:3px}
  .crs2-tutti{font-size:10px; padding:5px 8px}
}