/**
 * REPO: dashboard-consulenti
 * MODULE: public/css/centro-rinnovi-vetro.css
 * PURPOSE: Strato "vetro liquido" (liquid glass, stile Apple iOS 26) per la
 *          pagina a se' stante «Centro Rinnovi» (public/centro-rinnovi.html).
 *          Cambia SOLO l'aspetto (sfondo, superfici, bordi, ombre, riflessi,
 *          movimento) delle zone gia' esistenti: nessuna struttura nuova,
 *          nessun colore semantico toccato (rosso ritardo / verde chiuso /
 *          giallo marchio #FFD60A restano quelli di css/centro-rinnovi.css),
 *          nessun comportamento cambiato. La pagina resta BIANCA e luminosa:
 *          niente tema scuro, niente sfondi colorati pieni.
 * DEPENDENCIES: gettoni --cr-* definiti su body.cr-app in css/
 *          centro-rinnovi.css (letti qui via var(), mai ridefiniti); i
 *          selettori di css/centro-rinnovi.css (cr-*), css/centro-rinnovi-
 *          plancia.css (crp-*), css/centro-rinnovi-scadenze.css (crs2-*).
 *          Caricato per ULTIMO (vedi public/centro-rinnovi.html) cosi' le
 *          sue regole, a parita' di specificita', vincono sulle regole di
 *          base gia' esistenti. js/centro-rinnovi-vetro.js aggiorna qui le
 *          variabili --mx/--my sugli elementi "di vetro" sotto il puntatore.
 * EXPOSES: classe generica riusabile .cr-vetro (usata anche da css/
 *          centro-rinnovi-squadra.css, operaio parallelo, sulla radice
 *          .crq-root) e i gettoni --crv-* su body.cr-app (fra cui
 *          --crv-margin-x/--crv-gap-y, letti anche da fuori §0 per tenere
 *          lo stesso margine/spaziatura su ogni zona galleggiante).
 * LAST REVIEWED: 2026-10-03
 * WARNINGS: #cr-dettaglio e i suoi antenati (.cr-work, .cr-contenuto,
 *          .cr-corpo, .cr-shell, body.cr-app) NON ricevono mai qui, su se
 *          stessi, transform / filter / backdrop-filter / perspective /
 *          contain / will-change:transform (vedi WARNING gia' in css/
 *          centro-rinnovi.css: .crs-root--mobile, position:fixed, monta
 *          DENTRO #cr-dettaglio e deve poter coprire tutto il viewport — una
 *          qualunque di quelle proprieta' su un antenato reale lo
 *          intrappolerebbe). Il vetro del pannello dettaglio e l'atmosfera
 *          di sfondo usano percio' SOLO pseudo-elementi ::before/::after:
 *          sono un box generato separato, non cambiano la proprieta'
 *          calcolata dell'elemento reale a cui appartengono, quindi non
 *          creano un nuovo containing block. .cr-col e' condivisa dalle 3
 *          colonne (comprese quella del dettaglio): ogni regola generica su
 *          .cr-col usa sempre :not(.cr-col--dettaglio). Mai impostata la
 *          proprieta' `display` su elementi che possono avere l'attributo
 *          [hidden] (la regola .cr-app [hidden]{display:none!important} di
 *          centro-rinnovi.css deve restare quella che vince sempre). Niente
 *          filtri SVG dentro backdrop-filter (solo Chromium). Per i bottoni:
 *          mai `.qualcosa button{font:inherit}` (ha gia' rotto i caratteri
 *          altrove) — qui non serve, si colpiscono sempre classi dirette.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-02 [AI] Added: prima stesura (operaio C) — strato di sola
 *          apparenza sopra il Centro Rinnovi gia' esistente (B2/C2/C3/K1/K2).
 * 2026-10-03 [AI] Modified (seconda passata, su richiesta del regista):
 *          margini laterali e spazio verticale ora uniformi su TUTTE le zone
 *          galleggianti tramite i nuovi gettoni --crv-margin-x/--crv-gap-y
 *          (16px, 24px da 1280px in su, 10px sotto i 480px) — prima plancia
 *          e squadra partivano a x=0 con gli angoli arrotondati tagliati dal
 *          bordo. Le 3 colonne di .cr-work diventano 3 carte separate (gap,
 *          niente piu' border-right condiviso). Vetro molto piu' marcato:
 *          atmosfera concentrata in alto (giallo/azzurro/pesca piu' intensi,
 *          40-55% al centro delle macchie) che sfuma verso il bianco scendendo
 *          (niente piu' macchia forte in basso); bordo "a lente" piu' spesso
 *          e direzionale (bianco in alto-sx -> trasparente -> grigio-azzurro
 *          in basso-dx) con una sfumatura iridescente tenue sotto; ombra
 *          interna morbida in basso + ombra esterna leggermente colorata;
 *          ellisse di luce speculare statica sul primo terzo di ogni carta;
 *          riflesso-puntatore piu' grande/visibile. "Prossima chiamata" e la
 *          riga squadra dell'utente (.crq-gestore--io) diventano gocce di
 *          vetro giallo piu' lucide; pulsanti primari con velatura speculare
 *          in alto. Nessuna struttura/colore semantico/comportamento toccato
 *          — solo CSS, js/centro-rinnovi-vetro.js non ha richiesto modifiche
 *          (il riflesso piu' grande e' solo una dimensione nel gradiente CSS,
 *          non nella logica di --mx/--my).
 * 2026-10-03 [AI] Fixed (regista): aggiunto `.cr-vetro>*` alla regola
 *          position:relative+z-index:1 dei contenuti — sulla radice della
 *          squadra (.crq-root.cr-vetro) il riflesso ::before (z-index:0)
 *          copriva il titolo «Centro Rinnovi · N contratti», che sembrava
 *          sbiadito.
 * 2026-10-03 [AI] Fixed (operaio G): niente arancione — tre ombre/riflessi
 *          scritti a mano in rgba(199,119-140,0-20,...) (tonalita' ~32°,
 *          arancione vero, eredita' del vecchio --cr-amber) su .crp-
 *          prossima e .crq-gestore--io. Portati a rgba(204,171,8,...), la
 *          stessa tonalita' (~50°) del giallo marchio #FFD60A, solo piu'
 *          scura per restare leggibile come ombra/bordo.
 */

/* =============================================== 0 · GETTONI --crv-* ===== */
/* Letti da tutte le regole sotto via var(--crv-x, fallback): se questo
   foglio non fosse ancora caricato (impossibile in produzione, ma utile in
   un banco di prova isolato) ogni superficie ha comunque un fallback. */
body.cr-app{
  --crv-blur: 22px;
  --crv-blur-sm: 13px;
  --crv-saturate: 190%;
  --crv-radius: 22px;
  --crv-radius-lg: 28px;
  --crv-radius-pill: 999px;
  --crv-ease: cubic-bezier(.22,1,.36,1);

  --crv-bg-1: linear-gradient(170deg, rgba(255,255,255,.66), rgba(255,255,255,.3));
  --crv-bg-2: linear-gradient(170deg, rgba(255,255,255,.5), rgba(255,255,255,.2));
  --crv-border: rgba(255,255,255,.85);
  --crv-border-soft: rgba(255,255,255,.6);
  --crv-highlight: rgba(255,255,255,.95);
  /* Ombra esterna: 2 strati base (bordo netto + diffusione) piu' un terzo
     strato, leggermente blu/viola, che da' profondita' "colorata" al vetro
     invece di una semplice ombra grigia (2a passata, su richiesta). */
  --crv-shadow-1: 0 1px 1px rgba(18,18,18,.04), 0 28px 64px -22px rgba(18,18,18,.30), 0 24px 48px -20px rgba(40,60,120,.18);
  --crv-shadow-2: 0 1px 1px rgba(18,18,18,.03), 0 14px 36px -16px rgba(18,18,18,.20), 0 16px 32px -18px rgba(40,60,120,.14);
  --crv-shadow-hover: 0 1px 1px rgba(18,18,18,.04), 0 34px 72px -20px rgba(18,18,18,.34), 0 28px 54px -18px rgba(40,60,120,.22);
  /* Ombra interna morbida in basso: da' corpo/spessore al vetro (si somma,
     non sostituisce, all'hairline speculare in alto gia' presente ovunque). */
  --crv-inset-base: inset 0 -8px 24px rgba(255,255,255,.45);

  /* Riflesso che segue il puntatore (js/centro-rinnovi-vetro.js le aggiorna
     sull'elemento di vetro sotto il cursore) — default: centro-alto. */
  --mx: 50%;
  --my: 0%;

  /* Margine laterale e spazio verticale UNIFORMI su ogni zona galleggiante
     (topbar, plancia, squadra, scadenze, tabs, le 3 colonne di .cr-work):
     un solo gettone invece di un valore scritto a mano per superficie, cosi'
     restano sempre allineate fra loro (2a passata: prima plancia/squadra
     partivano a x=0, angoli arrotondati tagliati dal bordo). */
  --crv-margin-x: 16px;
  --crv-gap-y: 14px;
}
/* >=1280px (stesso punto di rottura di css/centro-rinnovi.css per le 3
   colonne fisse): margine laterale piu' ampio, pagina piu' "respirata". */
@media (min-width:1280px){
  body.cr-app{ --crv-margin-x: 24px; }
}

/* =============================================== 1 · ATMOSFERA ===== */
/* Aurora tenue e fissa dietro a tutta la pagina: 4 macchie sfocate (giallo
   marchio molto chiaro, azzurro cielo pallido, lilla e pesca pallidissimi),
   bassa saturazione percepita, opacita' complessiva nel range 25-35% voluto.
   position:fixed su uno PSEUDO-elemento di body.cr-app: non e' l'elemento
   body stesso a ricevere transform/filter (vedi WARNINGS sopra), quindi non
   crea un containing block per i discendenti position:fixed della pagina
   (.crs-root--mobile della scheda, C2). z-index:-1 + pointer-events:none:
   resta un fondale, mai sopra al contenuto ne' cliccabile. */
body.cr-app::before,
body.cr-app::after{
  content:'';
  position:fixed;
  inset:-15%;
  z-index:-1;
  pointer-events:none;
  filter:blur(58px);
}
/* 2a passata: la luce ora e' chiaramente concentrata nel quarto superiore
   del viewport (dove vivono topbar/plancia/squadra) e sfuma nel bianco
   quasi puro scendendo verso scadenze/liste/dettaglio — come chiesto. Le
   macchie in alto sono piu' larghe/alte e piu' sature (fino a ~55% al
   centro); resta una sola macchia bassissima opacita' in fondo, giusto un
   soffio, per non avere un taglio netto. */
body.cr-app::before{
  background:
    radial-gradient(58% 48% at 16% -4%, rgba(255,214,10,.55), transparent 68%),
    radial-gradient(50% 42% at 86% -2%, rgba(120,185,255,.46), transparent 70%),
    radial-gradient(46% 36% at 50% 100%, rgba(255,205,170,.10), transparent 75%);
  animation: crv-deriva-1 48s var(--crv-ease) infinite;
}
body.cr-app::after{
  background:
    radial-gradient(44% 36% at 92% 6%, rgba(255,214,10,.28), transparent 72%),
    radial-gradient(40% 34% at 6% 2%, rgba(214,180,255,.30), transparent 72%),
    radial-gradient(34% 28% at 50% 102%, rgba(190,225,255,.08), transparent 76%);
  animation: crv-deriva-2 60s var(--crv-ease) infinite;
}
@keyframes crv-deriva-1{
  0%,100%{ transform:translate3d(-3%,-4%,0) scale(1); }
  50%{ transform:translate3d(3%,3%,0) scale(1.06); }
}
@keyframes crv-deriva-2{
  0%,100%{ transform:translate3d(2%,3%,0) scale(1.04); }
  50%{ transform:translate3d(-3%,-2%,0) scale(1); }
}
/* Sotto i 768px l'aurora resta ma piu' leggera (meno blur, costa meno su
   mobile): vedi anche §9 per --crv-blur delle superfici. */
@media (max-width:767px){
  body.cr-app::before,body.cr-app::after{ filter:blur(40px); }
}

/* =============================================== 2 · .cr-vetro ===== */
/* Classe generica e riusabile (anche da css/centro-rinnovi-squadra.css,
   radice .crq-root). Chi la applica a un elemento ottiene: sfondo a
   gradiente bianco semitrasparente, blur+saturazione dietro (backdrop-
   filter), bordo 1px bianco luminoso, riflesso speculare in alto, ombra
   morbida, raggio ampio, riflesso "a lente" sul contorno (::after, mask
   composite) e riflesso che segue il puntatore (::before, legge --mx/--my
   aggiornate da js/centro-rinnovi-vetro.js). MAI applicata direttamente a
   #cr-dettaglio o ai suoi antenati (vedi WARNINGS in testa file) — per quel
   pannello vedi §7, che replica lo stesso disegno su uno pseudo-elemento. */
.cr-vetro,
.cr-top,
.crp-plancia,
.crs2-root,
.cr-col:not(.cr-col--dettaglio),
.cr-gate-card,
.cr-stato-errore,
.cr-stato-vuoto,
.cr-tabs{
  position:relative;
  /* Sfondo a 2 strati: ellisse di luce speculare STATICA larga sul primo
     terzo della carta (quella che "cade dall'alto", sempre li', a
     differenza del riflesso-puntatore che si sposta) sopra al gradiente di
     vetro gia' esistente. 2a passata, su richiesta esplicita. */
  background:
    radial-gradient(130% 65% at 50% -15%, rgba(255,255,255,.75), transparent 56%),
    var(--crv-bg-1);
  -webkit-backdrop-filter:blur(var(--crv-blur)) saturate(var(--crv-saturate));
  backdrop-filter:blur(var(--crv-blur)) saturate(var(--crv-saturate));
  border:1px solid var(--crv-border);
  border-radius:var(--crv-radius);
  /* Hairline speculare in alto + bagliore morbido interno in basso (da'
     spessore al vetro) + ombra esterna (gettone, ora con tinta blu/viola). */
  box-shadow:inset 0 1px 0 var(--crv-highlight), var(--crv-inset-base), var(--crv-shadow-1);
}
/* Il riflesso puntatore e l'anello a lente sono due pseudo-elementi separati
   (::before/::after): nessuno dei due e' gia' usato da queste classi nei
   fogli esistenti (verificato leggendoli). inherit sul border-radius cosi'
   seguono sempre la forma della superficie che li ospita. */
.cr-vetro::before,
.cr-top::before,
.crp-plancia::before,
.crs2-root::before,
.cr-col:not(.cr-col--dettaglio)::before,
.cr-gate-card::before,
.cr-stato-errore::before,
.cr-stato-vuoto::before,
.cr-tabs::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  /* 2a passata: riflesso-puntatore piu' grande e piu' presente ("piu'
     visibile ma morbido" — resta un gradiente ampio a caduta dolce, non un
     cerchio duro). */
  background:radial-gradient(620px 360px at var(--mx) var(--my), rgba(255,255,255,.75), transparent 64%);
  opacity:.95;
  pointer-events:none;
  transition:opacity .3s ease;
  z-index:0;
}
.cr-vetro::after,
.cr-top::after,
.crp-plancia::after,
.crs2-root::after,
.cr-col:not(.cr-col--dettaglio)::after,
.cr-gate-card::after,
.cr-stato-errore::after,
.cr-stato-vuoto::after,
.cr-tabs::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  /* 2a passata: anello "a lente" piu' spesso (1.6px) e DIREZIONALE — bianco
     pieno in alto-sinistra, si svuota al centro, un leggero grigio-azzurro
     (non bianco) in basso-destra: legge come un bordo di vetro vero, non
     come un contorno piatto. Sotto, un conic-gradient a bassissima opacita'
     (6 tinte, ciascuna ~8% alpha) aggiunge l'iridescenza "a prisma" tenue
     richiesta: essendo mascherato insieme al resto, si vede SOLO nell'anello
     sottile, mai come sfondo colorato pieno. */
  padding:1.6px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 66%, rgba(120,150,200,.55) 100%),
    conic-gradient(from 180deg at 50% 50%, rgba(255,140,140,.10), rgba(255,210,120,.10), rgba(160,255,180,.10), rgba(130,190,255,.10), rgba(200,160,255,.10), rgba(255,140,180,.10), rgba(255,140,140,.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:0;
}
/* Il contenuto reale di ciascuna superficie deve stare SOPRA ai due pseudo
   (altrimenti il riflesso puntatore li coprirebbe): un solo livello di
   stacking-context basta perche' i figli diretti sono senza z-index
   esplicito (stack naturalmente sopra gli pseudo z-index:0 in base
   all'ordine? NO: servirebbe z-index positivo. Diamo quindi position:
   relative + z-index:1 ai contenitori di contenuto immediati di ciascuna
   superficie, elencati qui una volta sola). */
.cr-vetro>*,
.cr-top>*,
.crp-plancia>*,
.crs2-root>*,
.cr-col:not(.cr-col--dettaglio)>*,
.cr-gate-card>*,
.cr-stato-errore>*,
.cr-stato-vuoto>*,
.cr-tabs>*{
  position:relative;
  z-index:1;
}

/* =============================================== 3 · TOPBAR ===== */
/* Capsula di vetro staccata dai bordi. Resta "sticky" senza bisogno di
   position:sticky: .cr-top e' gia' un flex-item flex:0 0 64px di .cr-shell
   (css/centro-rinnovi.css §4) FUORI da .cr-corpo, che e' l'unico a scorrere
   — quindi e' gia' sempre visibile cosi' com'e' strutturato. Qui solo
   l'aspetto: margine tutt'intorno (galleggia), bordo inferiore tolto (lo
   sostituisce il bordo intero della capsula + l'ombra). */
.cr-top{
  flex-basis:auto;
  height:auto;
  min-height:64px;
  /* Margine dai gettoni condivisi (§0): stesso margine laterale di tutte le
     altre zone galleggianti, stesso spazio verticale sopra e sotto. */
  margin:var(--crv-gap-y) var(--crv-margin-x);
  padding:12px 22px;
  border-bottom:none;
  border-radius:var(--crv-radius-lg);
}
.cr-search-wrap{
  background:linear-gradient(170deg, rgba(255,255,255,.75), rgba(255,255,255,.4));
  border-color:var(--crv-border-soft);
  -webkit-backdrop-filter:blur(var(--crv-blur-sm));
  backdrop-filter:blur(var(--crv-blur-sm));
}
.cr-chip-settimana{
  background:linear-gradient(170deg, rgba(255,238,158,.85), rgba(255,246,204,.55));
  border:1px solid rgba(255,214,10,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}

/* =============================================== 4 · PLANCIA ===== */
/* Margine dai gettoni condivisi (§0): prima #cr-plancia/.crp-plancia
   partiva a x=0 (nessun margine proprio in css/centro-rinnovi-plancia.css,
   che si occupa solo di cio' che sta DENTRO) — gli angoli arrotondati del
   vetro restavano tagliati dal bordo della finestra. 2a passata. */
.crp-plancia{
  margin:0 var(--crv-margin-x) var(--crv-gap-y);
}
/* Il pannello .crp-plancia prende il vetro "pieno" da §2. Le tessere
   interne (foglio, giorni agenda, kpi) ricevono un vetro piu' leggero senza
   i due pseudo-elementi di §2 (per non moltiplicare costo e rumore visivo
   su tante celle piccole): solo sfondo translucido + bordo + piccolo blur. */
.crp-foglio,
.crp-giorno,
.crp-kpi{
  background:var(--crv-bg-2);
  border-color:var(--crv-border-soft);
  -webkit-backdrop-filter:blur(var(--crv-blur-sm)) saturate(var(--crv-saturate));
  backdrop-filter:blur(var(--crv-blur-sm)) saturate(var(--crv-saturate));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), var(--crv-shadow-2);
  /* border-radius NON toccato: resta var(--cr-radius-sm) gia' impostato da
     css/centro-rinnovi-plancia.css — su tessere cosi' piccole un raggio
     grande (--crv-radius) le farebbe sembrare pillole, non card. */
}
.crp-giorno.is-attiva{
  background:linear-gradient(170deg, rgba(255,238,158,.85), rgba(255,246,204,.5));
  border-color:rgba(255,214,10,.6);
}
/* Prossima chiamata: resta la cella PIU' evidente della plancia — vetro
   tinto giallo marchio, non bianco come le altre, con lo stesso trattamento
   pieno (pseudo-elementi) di §2 per farla risaltare di piu'. */
/* 2a passata: deve restare "la cosa piu' viva della pagina" — goccia di
   vetro giallo lucido. Ellisse speculare in alto (come il vetro bianco di
   §2, ma piu' calda), bagliore interno in basso caldo, ombra esterna
   ambrata piu' profonda, riflesso-puntatore piu' grande. */
.crp-prossima{
  position:relative;
  background:
    radial-gradient(130% 70% at 50% -18%, rgba(255,255,255,.8), transparent 55%),
    linear-gradient(165deg, rgba(255,226,110,.75), rgba(255,246,204,.42));
  border:1px solid rgba(255,214,10,.65);
  -webkit-backdrop-filter:blur(var(--crv-blur-sm)) saturate(var(--crv-saturate));
  backdrop-filter:blur(var(--crv-blur-sm)) saturate(var(--crv-saturate));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -8px 22px rgba(255,255,255,.4),
    0 20px 44px -16px rgba(204,171,8,.38);
  overflow:hidden;
}
.crp-prossima::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(420px 260px at var(--mx) var(--my), rgba(255,255,255,.75), transparent 64%);
  pointer-events:none;
  z-index:0;
}
/* Anello piu' spesso, dorato invece che bianco-grigio: stessa tecnica mask
   composite del vetro bianco (§2), qui tinto per restare "oro liquido". */
.crp-prossima::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1.6px;
  background:linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 64%, rgba(204,171,8,.55) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  z-index:0;
}
.crp-prossima>*{ position:relative; z-index:1; }

/* =============================================== 5 · SCADENZE ===== */
/* .crs2-root ha gia' il vetro "pieno" da §2 (bordo intero, non piu' solo
   border-bottom). Qui solo un margine per farla respirare come le altre
   superfici galleggianti, e le colonne del grafico restano come sono
   (niente backdrop-filter sulle singole barre: sono tante e animate). */
.crs2-root{ margin:0 var(--crv-margin-x) var(--crv-gap-y); border-bottom:1px solid var(--crv-border); }
.crs2-col--attiva{
  background:linear-gradient(170deg, rgba(255,238,158,.8), rgba(255,246,204,.45));
}

/* =============================================== 6 · TABS ===== */
/* Striscia di linguette <1280px: vetro piu' discreto (raggio minore, ombra
   piu' leggera) perche' e' una barra stretta, non una card. */
.cr-tabs{
  margin:0 var(--crv-margin-x) var(--crv-gap-y);
  padding:8px 10px 0;
  border-radius:var(--crv-radius-lg) var(--crv-radius-lg) 0 0;
  box-shadow:inset 0 1px 0 var(--crv-highlight), var(--crv-shadow-2);
}

/* =============================================== 6b · SQUADRA ===== */
/* .crq-root e' gia' .cr-vetro (classe applicata direttamente dal markup di
   js/centro-rinnovi-squadra.js — vedi WARNINGS li' dentro): prende quindi
   gia' tutto il trattamento "pieno" di §2. Qui solo il margine uniforme
   (mancava, §0) e la riga "sei tu" (.crq-gestore--io), che diventa una
   goccia di vetro giallo lucido come "prossima chiamata" invece del giallo
   piatto di css/centro-rinnovi-squadra.css (quel foglio non conosce il
   vetro: e' caricato PRIMA, vedi il suo WARNING). */
#cr-squadra .crq-root{
  margin:0 var(--crv-margin-x) var(--crv-gap-y);
}
.crq-gestore--io{
  position:relative;
  background:linear-gradient(170deg, rgba(255,226,110,.7), rgba(255,246,204,.4));
  border-color:rgba(255,214,10,.65);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -6px 16px rgba(255,255,255,.35),
    0 10px 24px -14px rgba(204,171,8,.3);
  overflow:hidden;
}
.crq-gestore--io::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 48%, transparent 66%);
  transform:translateX(-130%);
  transition:transform .6s ease;
  pointer-events:none;
}
.crq-gestore--io:hover::before{ transform:translateX(130%); }
.crq-gestore--io>*{ position:relative; z-index:1; }

/* =============================================== 6c · COLONNE .cr-work === */
/* Le 3 colonne (due liste + dettaglio) diventano 3 carte separate: margine
   uniforme sul contenitore grid + gap fra le tracce al posto del vecchio
   confine .cr-col{border-right} (ora tolto, §8) che le teneva incollate.
   SOLO gap/margin/padding qui: .cr-work resta senza transform/filter/
   contain/backdrop-filter su se stesso (e' un antenato di #cr-dettaglio,
   vedi WARNINGS in testa file) — grid-template-columns resta quella di
   css/centro-rinnovi.css, non la tocchiamo. */
.cr-work{
  margin:0 var(--crv-margin-x) var(--crv-gap-y);
  gap:14px;
}
/* Il confine fra colonne era un 1px grigio fisso: con le carte separate dal
   gap diventerebbe una doppia linea ridondante (il bordo intero del vetro,
   §2, + questa). Tolto su tutte e 3 (su .cr-col--dettaglio era gia' none). */
.cr-col{ border-right:none; }

/* =============================================== 7 · DETTAGLIO ===== */
/* #cr-dettaglio (= .cr-col--dettaglio) e' nella lista dei NON toccati da §2
   (:not(.cr-col--dettaglio)) e non riceve mai, su se stesso, transform /
   filter / backdrop-filter (vedi WARNINGS in testa file): il suo vetro vive
   tutto su uno pseudo-elemento ::before, posizionato dietro al contenuto
   reale. position:relative su #cr-dettaglio e' sicura (NON crea containing
   block per i discendenti position:fixed — solo transform/filter/
   perspective/contain/will-change lo fanno), e serve perche' ::before sia
   absolute rispetto a lui invece che al prossimo antenato posizionato. */
#cr-dettaglio{ position:relative; }
#cr-dettaglio::before{
  content:'';
  position:absolute; inset:8px;
  z-index:0;
  border-radius:var(--crv-radius-lg);
  /* Stesso trattamento "pieno" di §2 (ellisse speculare + bagliore interno +
     ombra colorata): e' una carta principale anche lei, 2a passata. */
  background:
    radial-gradient(130% 65% at 50% -15%, rgba(255,255,255,.75), transparent 56%),
    var(--crv-bg-1);
  -webkit-backdrop-filter:blur(var(--crv-blur)) saturate(var(--crv-saturate));
  backdrop-filter:blur(var(--crv-blur)) saturate(var(--crv-saturate));
  border:1px solid var(--crv-border);
  box-shadow:inset 0 1px 0 var(--crv-highlight), var(--crv-inset-base), var(--crv-shadow-1);
  pointer-events:none;
}
/* Anello a lente + iridescenza tenue, stessa tecnica di §2 — un secondo
   pseudo-elemento indipendente (::after, mai usato finora su #cr-dettaglio):
   NON e' ::before (quello resta il vetro di sfondo) e non e' sull'elemento
   reale, quindi non cambia nulla per .crs-root--mobile (vedi sopra). */
#cr-dettaglio::after{
  content:'';
  position:absolute; inset:8px;
  z-index:0;
  border-radius:var(--crv-radius-lg);
  padding:1.6px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 66%, rgba(120,150,200,.55) 100%),
    conic-gradient(from 180deg at 50% 50%, rgba(255,140,140,.10), rgba(255,210,120,.10), rgba(160,255,180,.10), rgba(130,190,255,.10), rgba(200,160,255,.10), rgba(255,140,180,.10), rgba(255,140,140,.10));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
/* Il contenuto reale (placeholder vuoto o scheda inline C2) va sopra al
   vetro di sfondo. :not(.crs-root--mobile) e' OBBLIGATORIO qui: quel foglio
   e' un figlio diretto di #cr-dettaglio (vedi js/centro-rinnovi-scheda.js)
   con position:fixed proprio — un `#cr-dettaglio>*{position:relative}`
   senza l'esclusione vincerebbe su quella regola (ID+classe piu' specifico,
   file caricato dopo) e gli toglierebbe il fixed, rompendo il foglio a
   tutto schermo su mobile. Resta invece SOPRA a tutto per z-index naturale
   (2000, nel suo stesso foglio) senza bisogno di toccarlo qui. */
#cr-dettaglio>*:not(.crs-root--mobile){ position:relative; z-index:1; }

/* =============================================== 8 · RIGHE ===== */
/* Niente backdrop-filter per riga (sono tante, costerebbe): solo sfondo
   semitrasparente (lascia intravedere il vetro della colonna sotto, che a
   sua volta sfoca l'aurora) + riflesso che attraversa la riga al passaggio
   del mouse (::before, pulito via overflow:hidden sulla riga stessa). */
.cr-riga{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.4));
  border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  overflow:hidden;
  transition:background .14s, border-color .14s, transform .18s var(--crv-ease), box-shadow .18s var(--crv-ease);
}
.cr-riga::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 48%, transparent 66%);
  transform:translateX(-130%);
  transition:transform .55s ease;
  pointer-events:none;
}
.cr-riga:hover::before{ transform:translateX(130%); }
.cr-riga:hover{ transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 10px 22px -14px rgba(18,18,18,.18); }
.cr-riga.selezionata{
  background:linear-gradient(180deg, rgba(255,251,234,.92), rgba(255,246,204,.55));
}
.cr-riga-chiusa:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.4));
}

/* .cr-stato-errore/.cr-stato-vuoto ereditano da .cr-stato un flex:1 1 auto
   (riempiono tutto lo spazio verticale restante di .cr-corpo): senza un
   limite di larghezza il vetro di §2 diventerebbe una lastra enorme invece
   di una card. max-width + margin:auto la ricentra (il contenitore e' in
   column-flex, quindi i margini auto centrano sull'asse orizzontale). */
.cr-stato-errore,.cr-stato-vuoto{
  max-width:560px;
  margin:24px auto;
  padding:40px 32px;
}

/* =============================================== 9 · PULSANTI ===== */
/* Pillole lucide: nero lucido per il primario, vetro bianco per il
   secondario/"prendo in carico", vetro giallo dove era gia' giallo. Niente
   backdrop-filter (sono piccoli, il costo non vale il risultato): solo
   gradienti + riflesso interno in alto, come il vetro delle superfici. */
.cr-btn{
  background:linear-gradient(170deg, rgba(255,255,255,.9), rgba(250,250,247,.75));
  border-color:rgba(255,255,255,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(18,18,18,.04);
}
/* 2a passata: velatura speculare in alto (ellisse bianca molto soft, come le
   carte) sopra il nero lucido — "lo stesso trattamento lucido" chiesto per i
   primari. Ombra esterna anche qui con un filo di tinta blu/viola. */
.cr-btn-primario{
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(170deg, #2a2a2a 0%, #0c0c0c 60%, #000 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px -12px rgba(0,0,0,.55), 0 10px 20px -16px rgba(40,60,120,.28);
}
.cr-btn-primario:hover{ background:radial-gradient(120% 90% at 50% -30%, rgba(255,255,255,.26), transparent 60%), linear-gradient(170deg, #343434 0%, #111 60%, #000 100%); }
.cr-btn-prendi{
  background:linear-gradient(170deg, rgba(255,255,255,.92), rgba(255,255,255,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.crp-btn-primario{
  background:
    radial-gradient(120% 90% at 50% -30%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(170deg, #2a2a2a 0%, #0c0c0c 60%, #000 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 12px 26px -12px rgba(0,0,0,.55), 0 10px 20px -16px rgba(40,60,120,.28);
}
.crp-btn-primario:hover{ background:radial-gradient(120% 90% at 50% -30%, rgba(255,255,255,.26), transparent 60%), linear-gradient(170deg, #343434 0%, #111 60%, #000 100%); }
:where(.cr-btn,.cr-btn-primario,.cr-btn-prendi,.crp-btn-primario){
  transition:transform .15s var(--crv-ease), background .15s ease, box-shadow .15s ease;
}
:where(.cr-btn,.cr-btn-primario,.cr-btn-prendi,.crp-btn-primario):active{ transform:scale(.96); }

/* =============================================== 10 · MOVIMENTO ===== */
/* Ingresso a cascata al caricamento: SOLO su zone che non sono #cr-dettaglio
   ne' uno dei suoi antenati vietati (.cr-work/.cr-contenuto/.cr-corpo/
   .cr-shell/body.cr-app) — vedi WARNINGS. #cr-dettaglio stesso riceve solo
   un'animazione di OPACITA' (mai transform: l'opacita' da sola non crea un
   containing block per .crs-root--mobile). animation-fill-mode:backwards
   (mai forwards) ovunque: a fine animazione l'elemento torna al proprio
   stile base, senza lasciarsi dietro un transform permanente. */
@keyframes crv-entra{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes crv-dissolvi{ from{ opacity:0; } to{ opacity:1; } }

.cr-top{ animation:crv-entra .55s var(--crv-ease) backwards; animation-delay:0ms; }
#cr-plancia .crp-plancia,
.cr-oggi{ animation:crv-entra .55s var(--crv-ease) backwards; animation-delay:70ms; }
#cr-squadra .crq-root{ animation:crv-entra .55s var(--crv-ease) backwards; animation-delay:140ms; }
#cr-scadenze .crs2-root,
.cr-strip-sezione{ animation:crv-entra .55s var(--crv-ease) backwards; animation-delay:150ms; }
.cr-tabs{ animation:crv-entra .5s var(--crv-ease) backwards; animation-delay:210ms; }
#cr-lista-da-gestire{ animation:crv-entra .5s var(--crv-ease) backwards; animation-delay:220ms; }
#cr-lista-sto-gestendo{ animation:crv-entra .5s var(--crv-ease) backwards; animation-delay:290ms; }
#cr-dettaglio{ animation:crv-dissolvi .5s ease backwards; animation-delay:300ms; }

/* Sollevamento morbido al passaggio sulle superfici "di vetro" principali
   (non sulle righe, gia' gestite al §8, ne' su #cr-dettaglio: li' il
   sollevamento e' sulla scheda interna C2, non sul contenitore). */
:where(.cr-vetro,.cr-top,.crp-plancia,.crs2-root,.cr-col:not(.cr-col--dettaglio),.cr-gate-card){
  transition:transform .25s var(--crv-ease), box-shadow .25s var(--crv-ease);
}
:where(.cr-vetro,.crp-plancia,.crs2-root):hover{
  box-shadow:inset 0 1px 0 var(--crv-highlight), var(--crv-shadow-hover);
}

@media (prefers-reduced-motion:reduce){
  body.cr-app::before,body.cr-app::after{ animation:none; }
  .cr-top,#cr-plancia .crp-plancia,.cr-oggi,#cr-squadra .crq-root,
  #cr-scadenze .crs2-root,.cr-strip-sezione,.cr-tabs,
  #cr-lista-da-gestire,#cr-lista-sto-gestendo,#cr-dettaglio{
    animation:none;
  }
  .cr-riga::before{ transition:none; }
}

/* =============================================== 11 · RIPIEGHI ===== */
/* Browser senza backdrop-filter: superfici quasi opache, niente sfocatura
   (il contenuto resta perfettamente leggibile, solo meno "di vetro"). */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cr-vetro,.cr-top,.crp-plancia,.crs2-root,.cr-col:not(.cr-col--dettaglio),
  .cr-gate-card,.cr-stato-errore,.cr-stato-vuoto,.cr-tabs,
  .crp-foglio,.crp-giorno,.crp-kpi,.crp-prossima,.crq-gestore--io,
  .cr-search-wrap,.cr-chip-settimana{
    background:rgba(255,255,255,.96);
  }
  #cr-dettaglio::before{ background:rgba(255,255,255,.97); }
}
@media (prefers-reduced-transparency:reduce){
  .cr-vetro,.cr-top,.crp-plancia,.crs2-root,.cr-col:not(.cr-col--dettaglio),
  .cr-gate-card,.cr-stato-errore,.cr-stato-vuoto,.cr-tabs,
  .crp-foglio,.crp-giorno,.crp-kpi,.crp-prossima,.crq-gestore--io,
  .cr-search-wrap,.cr-chip-settimana,.cr-riga{
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  #cr-dettaglio::before{
    background:rgba(255,255,255,.97);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}
/* Sotto i 768px: blur piu' leggero (performance) e margine/spazio piu'
   stretti — bastano i gettoni (§0), li legge gia' tutto il resto del
   foglio: cosi' restano uniformi anche qui (2a passata — prima erano valori
   scritti a mano solo per 3 selettori su 6+, da cui l'incoerenza segnalata). */
@media (max-width:767px){
  body.cr-app{ --crv-blur:12px; --crv-blur-sm:8px; --crv-margin-x:10px; --crv-gap-y:10px; }
  .cr-top{ padding:10px 14px; }
}