/* Clienti da richiamare nei pannelli: ogni blocco si adatta alla PROPRIA larghezza (container query sul pannello, nome pnp), non a quella della pagina.
   Le regole delle viste (crm-clienti.css) usano le media query della pagina: qui si riscrivono per il pannello. Solo token del tema. */
.pn-flow>.cv-blk>:is(.cv-kpis,.cv-bar,.cv2-kp){margin:0}
/* Numeri della coda: 4 in fila, a meta' riga 2 per riga, stretto uno sotto l'altro */
.pn-flow .cv-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
@container pnp (max-width:880px){.pn-flow .cv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.pn-flow .cv-kpi{padding:13px 14px}.pn-flow .cv-kpi .cv-n{font-size:26px}}
@container pnp (max-width:400px){.pn-flow .cv-kpis{grid-template-columns:minmax(0,1fr)}}
/* Filtri e ricerca: i filtri vanno a capo, la ricerca non esce dal pannello */
.pn-flow .cv-bar .cerca{min-width:0;flex:1 1 min(260px,100%)}
@container pnp (max-width:560px){.pn-flow .cv-bar .seg{border-radius:18px}}
/* V1 Tre schede grandi */
.pn-flow .cv1-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
@container pnp (max-width:480px){
  .pn-flow .cv1-cd{padding:16px 16px 14px;gap:12px}.pn-flow .cv1-hd{grid-template-columns:auto 1fr}.pn-flow .cv1-wh{grid-column:1/-1;text-align:left}
  .pn-flow .cv1-nm{font-size:20px}.pn-flow .cv1-jb .cv1-v{margin-left:0}
}
/* V2 Cronologia: tre colonne se c'e' posto, poi due, poi una; due schede affiancate solo con un pannello molto largo */
.pn-flow .cv2-list{grid-template-columns:minmax(0,1fr)}
.pn-flow .cv2-rh{grid-template-columns:240px minmax(0,1fr) 350px}
.pn-flow .cv2-rt{grid-column:auto;justify-items:end;text-align:right}
.pn-flow .cv2-row.on .cv2-rb{grid-template-columns:1.3fr 1fr 1fr}
.pn-flow .cv2-sp2{grid-column:span 2}
@container pnp (max-width:1000px){
  .pn-flow .cv2-rh{grid-template-columns:220px minmax(0,1fr)}.pn-flow .cv2-rt{grid-column:1/-1;justify-items:start;text-align:left}
  .pn-flow .cv2-row.on .cv2-rb{grid-template-columns:1fr 1fr}
}
@container pnp (max-width:660px){
  .pn-flow .cv2-rh{grid-template-columns:minmax(0,1fr)}.pn-flow .cv2-row.on .cv2-rb{grid-template-columns:minmax(0,1fr)}.pn-flow .cv2-sp2{grid-column:auto}
  .pn-flow .cv2-say{flex-direction:column;gap:2px}
}
@container pnp (min-width:1500px){
  .pn-flow .cv2-list{grid-template-columns:repeat(2,minmax(0,1fr))}.pn-flow .cv2-row.on{grid-column:1/-1}
  .pn-flow .cv2-rh{grid-template-columns:210px minmax(0,1fr)}.pn-flow .cv2-rt{grid-column:1/-1;grid-template-columns:auto 1fr auto;justify-items:start;align-items:center;text-align:left}.pn-flow .cv2-rt .cv-az{justify-self:end}
}
/* V3 Diario: l'elenco e' un pannello, la scheda a destra un altro. Con un pannello largo le schede vanno su due colonne, senza la linea del diario */
.pn-flow .cv3-side{position:static;max-height:none}
.pn-flow .cv3-its.cv3-two{grid-template-columns:minmax(0,1fr);padding-left:28px}
.pn-flow .cv3-its.cv3-two:before,.pn-flow .cv3-its.cv3-two .cv3-it:before{display:block}
.pn-flow .cv3-its.cv3-two .cv3-pc{border-left-width:1px}
@container pnp (min-width:1100px){
  .pn-flow .cv3-its.cv3-two{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:0}
  .pn-flow .cv3-its.cv3-two:before,.pn-flow .cv3-its.cv3-two .cv3-it:before{display:none}
  .pn-flow .cv3-its.cv3-two .cv3-pc{border-left:3px solid var(--sc)}
}
@container pnp (max-width:560px){
  .pn-flow .cv3-pc{grid-template-columns:44px minmax(0,1fr);padding:14px}.pn-flow .cv3-wh{grid-column:1/-1;text-align:left}
  .pn-flow .cv3-its.cv3-two{padding-left:22px}.pn-flow .cv3-it:before{left:-19px}
  .pn-flow .cv3-ag div{grid-template-columns:70px 34px minmax(0,1fr)}
  .pn-flow .cv3-mt b{font-size:16px}
}
/* storico dei contatti e anteprime dentro la scheda: si stringono con il pannello */
@container pnp (max-width:520px){
  .pn-flow .cv-ti{grid-template-columns:70px minmax(0,1fr)}.pn-flow .cv-te{grid-column:1/-1}
  .pn-flow .cv-shn{font-size:22px}.pn-flow .cv-sh-h{gap:12px}.pn-flow .cv-sh-h .cv-av{width:52px!important;height:52px!important;font-size:19px!important}
  .pn-flow .cv-pvi{grid-template-columns:56px minmax(0,1fr) auto}.pn-flow .cv-pvi img,.pn-flow .cv-pvi .cv-pvx{width:56px;height:42px}
}
/* V4 Squadra: ritratti */
.pn-flow .cv4-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr))}
/* V5 Plancia: tessere-filtro, prossima chiamata in fascia, schede */
.pn-flow .cv5-s3{grid-column:span 3}.pn-flow .cv5-s4{grid-column:span 4}.pn-flow .cv5-s7{grid-column:1/-1}
@container pnp (max-width:880px){.pn-flow .cv5-s3{grid-column:span 6}.pn-flow .cv5-ft .cv5-n{font-size:34px}}
@container pnp (max-width:420px){.pn-flow .cv5-s3{grid-column:1/-1}}
@container pnp (max-width:1000px){.pn-flow .cv5-s4{grid-column:span 6}}
@container pnp (max-width:640px){.pn-flow .cv5-s4{grid-column:1/-1}.pn-flow .cv5-meta{grid-template-columns:minmax(0,1fr)}}
@container pnp (min-width:900px){
  [data-pn-blocco=prossima] .cv5-t{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:8px 32px;align-items:start}
  [data-pn-blocco=prossima] .cv5-k{grid-column:1/-1}
  [data-pn-blocco=prossima] .cv5-nx{margin-top:4px}
  [data-pn-blocco=prossima] .cv5-queue{grid-column:2;grid-row:2/4;margin-top:4px}
  [data-pn-blocco=prossima] .cv5-t>div:last-child{grid-column:1;margin-top:0!important}
}
@container pnp (max-width:460px){[data-pn-blocco=prossima] .cv5-tmv{font-size:34px}.pn-flow .cv5-queue div{grid-template-columns:78px 30px minmax(0,1fr)}}
@container pnp (max-width:880px){.pn-flow .cv5-ft .cv5-avs{display:none}}