/**
 * REPO: dashboard-consulenti
 * MODULE: css/centro-rinnovi-squadra.css
 * PURPOSE: Impaginazione INTERNA del componente «La squadra» del Centro
 *          Rinnovi (public/js/centro-rinnovi-squadra.js, window.CRSquadra),
 *          montato dentro #cr-squadra in public/centro-rinnovi.html. Due
 *          zone: a sinistra "I tuoi contratti" (numero enorme + barra), a
 *          destra "La squadra" (totale team + una riga per gestore). Questo
 *          foglio NON disegna sfondo/ombre della radice: quello lo fa css/
 *          centro-rinnovi-vetro.css tramite la classe .cr-vetro gia'
 *          presente sulla radice (vedi WARNINGS) — qui solo layout, colori
 *          dei segmenti/testo e responsive.
 * DEPENDENCIES: gettoni --cr-* e font Sofia Pro definiti su body.cr-app in
 *          css/centro-rinnovi.css (NON ridefiniti qui, nessun @font-face
 *          duplicato). Nessuna dipendenza da altri fogli *-squadra*.
 * EXPOSES: tutte le classi .crq-* usate da public/js/centro-rinnovi-
 *          squadra.js per costruire il markup (vedi quel file per l'elenco
 *          esatto generato da ogni render*()).
 * LAST REVIEWED: 2026-10-05
 * WARNINGS: la radice renderizzata da JS e' `.crq-root.cr-vetro` (e, senza
 *          dati di squadra, anche `.crq-root--solo`): .cr-vetro NON e'
 *          definita qui (altro operaio, css/centro-rinnovi-vetro.css,
 *          caricato DOPO questo foglio) — per questo .crq-root qui sotto ha
 *          sfondo trasparente, cosi' il vetro sottostante resta visibile.
 *          I segmenti delle barre (.crq-barra-seg, .crq-squadra-barra-
 *          sottile-riempi) nascono con width/flex-basis:0 nel markup e
 *          vengono portati al valore vero da JS un frame dopo (vedi
 *          animaDopoRender() nel .js): la `transition` qui sotto e' cio'
 *          che rende visibile quel passaggio. Su prefers-reduced-motion la
 *          regola gia' esistente `.cr-app *{transition-duration:.01ms}` in
 *          css/centro-rinnovi.css si applica anche a questi elementi
 *          (discendenti di body.cr-app): non serve ripeterla qui.
 *          2026-10-04: il bordo inferiore vuoto che si vedeva sotto 1024px
 *          (vecchio `.crq-io{border-bottom:...}` del §5, pensato per
 *          separare "I tuoi contratti" da "La squadra" quando impilati) e'
 *          ora scoperto solo quando la zona squadra c'e' davvero
 *          (`.crq-root:not(.crq-root--solo) .crq-io`): con .crq-root--solo
 *          (sempre, oggi) non c'e' piu' nulla sotto, quindi niente bordo a
 *          vuoto. I colori dei 4 gruppi/segmenti nuovi (rinnovati=verde,
 *          persi=rosso) riusano i gettoni --cr-green/--cr-red gia' definiti
 *          in css/centro-rinnovi.css (root body.cr-app), stesso --cr-red
 *          usato altrove nella pagina per "male/ritardo" — nessun nuovo
 *          colore inventato qui.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-02 [AI] Added: prima stesura (operaio B, lavoro in parallelo con
 *          gli altri componenti del Centro Rinnovi).
 * 2026-10-03 [AI] Modified (operaio F): il server non manda piu'
 *          meta.squadra di default, quindi il componente e' sempre in
 *          .crq-root--solo qui dentro — ridisegnata quella modalita' da
 *          1024px in su come fascia ORIZZONTALE compatta (numero grande a
 *          sinistra, frase+barra larga al centro, legenda a destra) invece
 *          del vecchio blocco con meta' riquadro vuoto (vedi §1b). Sotto i
 *          1024px resta l'impilamento verticale di sempre (nessuna regola
 *          esistente tolta, solo CSS aggiuntivo — nessuna modifica al js che
 *          genera il markup, la nuova disposizione usa grid-template-areas
 *          sulle classi .crq-io-* gia' esistenti). font-weight:600 portati a
 *          700 (Sofia Pro non ha una faccia 600: i browser sceglievano
 *          gia' la 700 come piu' vicina, ora e' esplicito).
 * 2026-10-04 [AI] Modified (richiesta utente): riquadro "I tuoi contratti"
 *          ridisegnato — §1b aggiornato per i nuovi 4 gruppi al posto di
 *          legenda+esiti (vedi public/js/centro-rinnovi-squadra.js,
 *          renderGruppi()/renderBarraIo()); nuova §3b "GRUPPI" con le 4
 *          tessere colorate (giallo testo nero/nero/verde/rosso, 4 colonne
 *          da 1024px in giu', 2 colonne <=480px come chiesto); 2 nuove
 *          classi colore sulla barra (--rinnovati verde, --persi rosso),
 *          le 3 classi esistenti (--chiusi/--lavorazione/--daprendere) non
 *          toccate (restano per le mini-barre di renderGestoreRiga()); §5
 *          bordo inferiore vuoto tolto in .crq-root--solo (vedi WARNINGS).
 * 2026-10-05 [AI] Added (operaio W5, CONTRATTO-7, REGOLA DATI): 5° gruppo/
 *          segmento "Altro consulente" (un chiuso con rinnovo non 'SI'/'NO'
 *          non è perso — vedi public/js/centro-rinnovi-squadra.js,
 *          calcolaMiei()) — .crq-barra-seg--altro e .crq-gruppo--altro,
 *          TONO NEUTRO (var(--cr-ink-3)/var(--cr-paper)+var(--cr-ink-2)),
 *          mai verde/rosso/giallo/arancione. .crq-gruppi passato da 4 a 5
 *          colonne (§3b); <=480px resta a 2 colonne (5° elemento da solo
 *          nell'ultima riga, nessuno scroll orizzontale — verificato a
 *          390px).
 */

/* ===================================================== 1 · RADICE ===== */
.crq-root,.crq-root *{box-sizing:border-box}
.crq-root{
  background:transparent; /* il "vetro" lo da' css/centro-rinnovi-vetro.css */
  display:grid;
  grid-template-columns:38% 1fr;
  gap:28px;
  align-items:stretch;
  padding:22px 28px;
  font-family:var(--cr-font,'Sofia Pro',system-ui,sans-serif);
  color:var(--cr-ink,#121212);
}
.crq-root--solo{grid-template-columns:1fr}
.crq-root [hidden]{display:none!important}
:where(.crq-root) :where(button){font:inherit}
.crq-vuoto{margin:0; padding:2px 0; font-size:14px; color:var(--cr-ink-3,#8C897F)}

/* ============================================ 1b · MODALITA' "SOLO" ===== */
/* 2026-10-03 [AI] (operaio F) — oggi il server NON manda piu' meta.squadra
   di default (lo fa solo con ?squadra=1, che questa pagina non chiede): il
   componente e' quindi SEMPRE in .crq-root--solo qui. Da 1024px in su,
   invece del blocco 38%/1fr pensato per "I tuoi" + "La squadra" fianco a
   fianco (ora con mezzo riquadro vuoto), diventa una fascia ORIZZONTALE
   compatta: numero enorme a sinistra, frase+barra larga al centro, i 4
   gruppi sotto su tutta la larghezza. STESSO markup di sempre (renderIo()
   in js/centro-rinnovi-squadra.js): qui solo CSS, via grid-template-areas
   sulle classi .crq-io-* gia' esistenti — l'ordine nel DOM non conta per il
   posizionamento, conta solo a quale area e' assegnato ogni elemento.
   Sotto i 1024px resta l'impilamento verticale di sempre (regola
   .crq-io{display:flex;flex-direction:column} di §2, non toccata).
   2026-10-04 [AI] Modified: tolte le aree "legenda"/"esiti" (quegli
   elementi non vengono piu' generati da renderIo(), vedi CHANGE LOG in
   testa file) e aggiunta l'area "gruppi" (.crq-gruppi, §3b) su tutta la
   larghezza sotto numero/barra — griglia passata da 3 a 2 colonne, non
   serve piu' la colonna auto per la legenda a destra. */
@media (min-width:1024px){
  .crq-root--solo{padding:16px 28px}
  .crq-root--solo .crq-io{
    display:grid;
    grid-template-columns:minmax(120px,auto) 1fr;
    grid-template-areas:
      "eyebrow eyebrow"
      "numero  restano"
      "sub     barra"
      "gruppi  gruppi";
    column-gap:36px; row-gap:4px;
    align-items:center;
  }
  .crq-root--solo .crq-io-eyebrow{grid-area:eyebrow; margin-bottom:2px}
  .crq-root--solo .crq-io-numero{grid-area:numero; font-size:48px}
  .crq-root--solo .crq-io-sub{grid-area:sub; margin-top:0; align-self:start}
  .crq-root--solo .crq-io-restano{grid-area:restano; margin:0; align-self:end}
  .crq-root--solo .crq-barra--grande{grid-area:barra; margin-top:6px}
  .crq-root--solo .crq-gruppi{grid-area:gruppi; margin-top:16px; align-self:start}
}

/* ===================================================== 2 · ZONA "TUO" === */
.crq-io{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  padding-right:28px; border-right:1px solid var(--cr-line,#ECEAE4);
}
.crq-root--solo .crq-io{border-right:none; padding-right:0}

.crq-io-eyebrow{
  margin:0 0 6px; font-size:12.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--cr-ink-3,#8C897F);
}
.crq-io-numero{
  margin:0; font-weight:300; font-size:64px; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--cr-ink,#121212);
}
.crq-io-sub{
  margin:2px 0 0; font-size:12.5px; font-weight:500; text-transform:uppercase;
  letter-spacing:.05em; color:var(--cr-ink-3,#8C897F);
}
.crq-io-restano{margin:14px 0 0; font-size:15px; color:var(--cr-ink-2,#4F4D47)}
.crq-io-restano b{font-weight:700; color:var(--cr-ink,#121212); font-variant-numeric:tabular-nums}
.crq-io-esiti{margin:10px 0 0; font-size:12.5px; color:var(--cr-ink-3,#8C897F)}

/* ===================================================== 3 · BARRE ======= */
/* Condivisa fra la zona "tuo" (--grande, oggi SEMPRE a 4 segmenti via
   renderBarraIo(), vedi §3b) e ogni riga gestore (--mini, ancora a 3
   segmenti via renderBarra()). Colori dei segmenti: chiusi/rinnovati verde,
   in lavorazione/sto gestendo nero, da prendere giallo, persi rosso —
   stessi colori delle tessere di §3b e (per i 3 esistenti) della vecchia
   legenda qui sotto, tenuta per renderGestoreRiga(). */
.crq-barra{
  display:flex; width:100%; height:18px; border-radius:999px; overflow:hidden;
  background:var(--cr-line,#ECEAE4); margin-top:16px;
}
.crq-barra--mini{height:8px; margin-top:0}
.crq-barra-seg{
  height:100%; flex:0 0 auto;
  transition:width .5s cubic-bezier(.22,.8,.3,1), flex-basis .5s cubic-bezier(.22,.8,.3,1);
}
.crq-barra-seg--chiusi{background:var(--cr-green,#1F8A5B)}
.crq-barra-seg--lavorazione{background:var(--cr-ink,#121212)}
.crq-barra-seg--daprendere{background:var(--cr-accent,#FFD60A)}
/* 2026-10-04 [AI] Added: 2 classi nuove, SOLO per renderBarraIo() (barra a 4
   segmenti di "I tuoi contratti") — le 3 di sopra restano quelle di sempre,
   usate anche da renderGestoreRiga() (mini-barre "La squadra", non toccate). */
.crq-barra-seg--rinnovati{background:var(--cr-green,#1F8A5B)}
.crq-barra-seg--persi{background:var(--cr-red,#D93636)}
/* 2026-10-05 [AI] Added (operaio W5, CONTRATTO-7) — 5° segmento "Altro
   consulente" (REGOLA DATI): TONO NEUTRO, mai uno dei colori sopra. */
.crq-barra-seg--altro{background:var(--cr-ink-3,#8C897F)}

.crq-legenda{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; color:var(--cr-ink-2,#4F4D47)}
.crq-legenda-voce{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.crq-legenda-voce b{font-weight:700; color:var(--cr-ink,#121212); font-variant-numeric:tabular-nums}
.crq-legenda-pallino{width:9px; height:9px; border-radius:999px; display:inline-block; flex:0 0 auto}
.crq-legenda-pallino--chiusi{background:var(--cr-green,#1F8A5B)}
.crq-legenda-pallino--lavorazione{background:var(--cr-ink,#121212)}
.crq-legenda-pallino--daprendere{background:var(--cr-accent,#FFD60A)}

/* =================================================== 3b · GRUPPI ======= */
/* 2026-10-04 [AI] Added: i gruppi affiancati sotto la barra di "I tuoi
   contratti" (renderGruppi()/renderGruppo() in js/centro-rinnovi-squadra.js)
   — stesso ordine della barra qui sopra: da prendere, sto gestendo,
   rinnovati, persi (2026-10-05: + altro consulente, vedi sotto). A larghezza
   piena da subito (anche <1024px, dove .crq-io e' comunque a larghezza
   piena — vedi §5): solo <=480px scendono a 2 colonne (§5), mai scroll
   orizzontale. "Da prendere" e' l'unica tessera con sfondo giallo PIENO
   (regola utente: avvisi/attesa = giallo pieno, testo nero); le altre
   usano gli stessi toni "soft" gia' in uso nel resto della pagina
   (.cr-pill--scaduto/.cr-chip--urgente in css/centro-rinnovi.css): sfondo
   tenue nel colore del gruppo, testo nello stesso colore pieno.
   2026-10-05 [AI] Modified (operaio W5, CONTRATTO-7): 4 -> 5 gruppi (nuovo
   "Altro consulente", REGOLA DATI — vedi CHANGE LOG in testa al file). */
/* 2026-10-05 [AI] Modified (operaio W5, CONTRATTO-7): 4 -> 5 colonne (nuovo
   gruppo "Altro consulente", REGOLA DATI). */
.crq-gruppi{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:18px}
.crq-gruppo{
  display:flex; flex-direction:column; gap:2px; min-width:0;
  padding:10px 12px; border-radius:var(--cr-radius-sm,10px);
  border:1px solid var(--cr-line,#ECEAE4); background:var(--cr-paper,#FAFAF7);
}
.crq-gruppo-numero{
  margin:0; display:flex; align-items:baseline; gap:6px; min-width:0;
  font-variant-numeric:tabular-nums;
}
.crq-gruppo-numero b{font-weight:700; font-size:22px; line-height:1}
.crq-gruppo-pct{font-size:12px; font-weight:500; color:var(--cr-ink-3,#8C897F)}
.crq-gruppo-etichetta{margin:2px 0 0; font-size:12.5px; font-weight:500; color:var(--cr-ink-2,#4F4D47); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.crq-gruppo--daprendere{background:var(--cr-accent,#FFD60A); border-color:var(--cr-accent,#FFD60A)}
.crq-gruppo--daprendere .crq-gruppo-numero b,
.crq-gruppo--daprendere .crq-gruppo-pct,
.crq-gruppo--daprendere .crq-gruppo-etichetta{color:var(--cr-ink,#121212)}

.crq-gruppo--gestendo .crq-gruppo-numero b{color:var(--cr-ink,#121212)}

.crq-gruppo--rinnovati{background:var(--cr-green-soft,#E6F4EC); border-color:var(--cr-green-soft,#E6F4EC)}
.crq-gruppo--rinnovati .crq-gruppo-numero b{color:var(--cr-green,#1F8A5B)}

.crq-gruppo--persi{background:var(--cr-red-soft,#FDECEC); border-color:var(--cr-red-soft,#FDECEC)}
.crq-gruppo--persi .crq-gruppo-numero b{color:var(--cr-red,#D93636)}

/* 2026-10-05 [AI] Added (operaio W5, CONTRATTO-7) — 5° gruppo "Altro
   consulente" (REGOLA DATI: non è perso): STESSI colori di .crs-badge--neutro
   (paper/ink-2), mai verde/rosso/giallo/arancione. */
.crq-gruppo--altro{background:var(--cr-paper,#FAFAF7); border-color:var(--cr-line-2,#DEDBD2)}
.crq-gruppo--altro .crq-gruppo-numero b{color:var(--cr-ink-2,#4F4D47)}

/* =============================================== 4 · ZONA "SQUADRA" ===== */
.crq-squadra{display:flex; flex-direction:column; gap:16px; min-width:0}

.crq-squadra-titolo{margin:0; font-size:17px; font-weight:500; color:var(--cr-ink,#121212)}
.crq-squadra-titolo b{font-weight:700; font-variant-numeric:tabular-nums}

.crq-squadra-avanzamento{display:flex; flex-direction:column; gap:7px}
.crq-squadra-avanzamento-testo{margin:0; font-size:14px; color:var(--cr-ink-2,#4F4D47)}
.crq-squadra-avanzamento-testo b{font-weight:700; color:var(--cr-ink,#121212); font-variant-numeric:tabular-nums}
.crq-squadra-pct{color:var(--cr-ink-3,#8C897F); font-weight:500}
.crq-squadra-barra-sottile{height:6px; border-radius:999px; background:var(--cr-line,#ECEAE4); overflow:hidden}
.crq-squadra-barra-sottile-riempi{
  display:block; height:100%; background:var(--cr-green,#1F8A5B); border-radius:inherit;
  transition:width .5s cubic-bezier(.22,.8,.3,1);
}

.crq-squadra-lista{display:flex; flex-direction:column; gap:10px}

.crq-gestore{
  display:grid;
  grid-template-columns:36px minmax(70px,1fr) 46px minmax(70px,130px) auto;
  align-items:center; gap:12px; min-width:0;
  padding:10px 12px; border:1px solid var(--cr-line,#ECEAE4); border-radius:var(--cr-radius-sm,10px);
  background:rgba(255,255,255,.5);
}
.crq-gestore--io{border-color:var(--cr-accent,#FFD60A); background:var(--cr-accent-soft,#FFF6CC)}

.crq-avatar{
  width:36px; height:36px; border-radius:999px; flex:0 0 auto;
  background:var(--cr-ink,#121212); color:#fff;
  display:grid; place-items:center; font-size:12.5px; font-weight:700; letter-spacing:.02em;
}
.crq-gestore--io .crq-avatar{background:var(--cr-accent-ink,#1F1A00); color:var(--cr-accent,#FFD60A)}

.crq-gestore-nome{
  min-width:0; font-size:14px; font-weight:700; color:var(--cr-ink,#121212);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:6px;
}
.crq-pill-tu{
  flex:0 0 auto; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  background:var(--cr-ink,#121212); color:#fff; border-radius:999px; padding:2px 7px;
}
.crq-gestore--io .crq-pill-tu{background:var(--cr-accent-ink,#1F1A00); color:var(--cr-accent,#FFD60A)}

.crq-gestore-totale{
  font-size:20px; font-weight:700; text-align:right; font-variant-numeric:tabular-nums;
  color:var(--cr-ink,#121212);
}
.crq-gestore-mancano{font-size:12px; color:var(--cr-ink-3,#8C897F); white-space:nowrap; text-align:right}
.crq-gestore-mancano b{font-weight:700; color:var(--cr-ink-2,#4F4D47); font-variant-numeric:tabular-nums}

.crq-dividere{
  border:1px dashed var(--cr-line-2,#DEDBD2); border-radius:var(--cr-radius-sm,10px);
  padding:10px 12px; text-align:center;
}
.crq-dividere-testo{margin:0; font-size:13px; color:var(--cr-ink-3,#8C897F)}
.crq-dividere-testo b{font-weight:700; color:var(--cr-ink-2,#4F4D47); font-variant-numeric:tabular-nums}

.crq-equita{margin:0; font-size:12.5px; display:flex; align-items:center; gap:6px}
.crq-equita--ok{color:var(--cr-green,#1F8A5B)}
.crq-equita--diff{color:var(--cr-ink-3,#8C897F)}
.crq-equita-spunta{width:14px; height:14px; flex:0 0 auto}

/* ===================================================== 5 · RESPONSIVE === */
/* <1024px: le due zone si impilano (vedi brief: affiancate solo da 1024 in
   su); sopra 1024 restano le colonne 38%/resto definite in §1. */
@media (max-width:1023px){
  .crq-root{grid-template-columns:1fr; gap:22px; padding:20px 18px}
  .crq-io{border-right:none; padding-right:0}
  /* 2026-10-04 [AI] Modified: il bordo inferiore (separa "I tuoi contratti"
     da "La squadra" quando impilati) ora SOLO se la zona squadra c'e'
     davvero — con .crq-root--solo (sempre, oggi) non c'e' piu' nulla sotto,
     quindi niente riga vuota a fare da separatore nel vuoto (vedi WARNINGS
     in testa file). */
  .crq-root:not(.crq-root--solo) .crq-io{
    border-bottom:1px solid var(--cr-line,#ECEAE4); padding-bottom:18px;
  }
  .crq-io-numero{font-size:56px}
}

/* <=480px (banco provato a 390px): numero ancora leggibile, righe gestore
   impilate su piu' righe per non forzare scroll orizzontale con nomi lunghi
   (incluso testo non fidato escapato, che puo' essere molto piu' lungo di
   un nome vero). */
@media (max-width:480px){
  .crq-root{padding:16px 14px; gap:18px}
  .crq-io-numero{font-size:48px}
  .crq-legenda{gap:10px 14px; font-size:12px}
  /* 2026-10-04 [AI] Added: i gruppi (§3b) a 390px vanno a 2 colonne
     (richiesta esplicita dell'utente: niente scroll orizzontale con colonne
     strette) — 2026-10-05 [AI] (CONTRATTO-7): invariato con 5 gruppi (il 5°,
     "Altro consulente", resta da solo nell'ultima riga: nessuno scroll). */
  .crq-gruppi{grid-template-columns:repeat(2,1fr); gap:8px}
  .crq-gruppo{padding:9px 10px}
  .crq-gruppo-numero b{font-size:20px}

  .crq-gestore{
    grid-template-columns:30px 1fr auto;
    grid-template-areas:
      "avatar nome totale"
      "barra barra barra"
      "mancano mancano mancano";
    row-gap:8px; column-gap:10px;
  }
  .crq-avatar{grid-area:avatar; width:30px; height:30px; font-size:11px}
  .crq-gestore-nome{grid-area:nome}
  .crq-gestore-totale{grid-area:totale}
  .crq-barra--mini{grid-area:barra}
  .crq-gestore-mancano{grid-area:mancano; text-align:left}
}