/* ============================================================================
   Digital Workplace 4Care — sistema di stile
   Ricavato dalla home pubblica di Zurich Italia (zurich.it): colori,
   caratteri, forma dei bottoni, ritmo delle fasce.
   ========================================================================= */

/* --- I colori, presi dal sito Zurich ------------------------------------ */
:root{
  /* il blu profondo che Zurich usa per testo e titoli: 2.609 occorrenze */
  --navy:        #23366F;
  --navy-scuro:  #1A2851;
  /* l'azzurro Zurich, quello dei bottoni e dei link */
  --blu:         #2167AE;
  --blu-caldo:   #2C7AC8;
  --blu-medio:   #5495CF;
  --blu-chiaro:  #91BFE3;
  --blu-velo:    #E7EDF9;
  --blu-nebbia:  #F3F6FC;

  --grigio-velo: #F5F6F7;
  --grigio:      #ECEEEF;
  --grigio-orlo: #DDE1E3;
  --testo-tenue: #5A6472;
  --testo-debole:#8A93A0;
  --bianco:      #FFFFFF;

  /* il semaforo della dashboard */
  --ok:      #1E8E5A;  --ok-velo:   #E8F5EE;
  --parz:    #C77700;  --parz-velo: #FDF3E3;
  /* I COLORI DELLE AREE, dalla tavolozza di zurich.it: uno per area, col testo che ci si legge sopra
     (bianco solo dove il contrasto regge). Decorano e separano, non dicono nessuno stato: per gli
     stati ci sono i colori del semaforo. Chi usa quale lo dice `moduli/colori-aree.mjs` */
  --area-campagne: #127DCE;     --area-campagne-testo: #FFFFFF;
  --area-canali: #19BAB6;       --area-canali-testo: #23366F;
  --area-marketing: #591CB5;    --area-marketing-testo: #FFFFFF;
  --area-portafoglio: #6E9B86;  --area-portafoglio-testo: #23366F;
  --area-laboratorio: #B5C1E6;  --area-laboratorio-testo: #23366F;
  --area-provvigioni: #8EB74D;  --area-provvigioni-testo: #23366F;
  --area-regole: #D3C19C;       --area-regole-testo: #23366F;
  --area-report: #A6ADAF;       --area-report-testo: #23366F;
  --area-assistenza: #40BCC9;   --area-assistenza-testo: #23366F;
  --area-studi: #1FB1E6;        --area-studi-testo: #23366F;
  --area-sistemi: #69BCD1;      --area-sistemi-testo: #23366F;
  /* l'accento del cruscotto di chi sta fuori: la sabbia di zurich.it, sotto la testata azzurra */
  --accento: #D3C19C;
  --no:      #C4314B;  --no-velo:   #FBEBEE;
  --attenzione: #8A5A00; --attenzione-velo: #FFF3D6;   /* il giallo del semaforo */

  /* l'allarme: un rosso piu' acceso del semaforo, per le poche cose che vanno viste subito.
     Il semaforo dice lo stato di un numero; questo dice «guarda adesso», e in una colonna di
     schede si deve riconoscere scorrendo, senza fermarsi a leggere. Si usa solo li'. */
  --allarme: #D0021B;  --allarme-scuro: #9B0014;
  --allarme-ombra: 0 2px 10px rgba(208, 2, 27, .12);

  /* i tre flussi della raccolta: erano scritti a mano dentro tre file JS
     (flash.js, flash-vivo.js, flash-dettaglio.js). Ora stanno qui, e i JS li
     leggono da qui: cambiarne uno e' una modifica sola. */
  --flusso-nuovo:    #91BFE3;
  --flusso-sesto:    #5495CF;
  --flusso-ordinari: #2167AE;

  /* la sfera di «Chiedi ai numeri»: un colore per stato, dietro e davanti. Il verde
     acqua del pensiero e il chiaro della risposta vengono dalla guida di stile 4Care. */
  /* il carattere degli strumenti del Laboratorio: quello di sistema, niente da scaricare */
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --sfera-dorme:         #8FA9C8;
  --sfera-dorme-luce:    #5495CF;
  --sfera-quiete:        #5495CF;
  --sfera-luce:          #91BFE3;
  --sfera-scrive:        #CFE4F7;
  --sfera-pensa:         #19BAB6;
  --sfera-pensa-luce:    #8FE3E0;
  --sfera-risponde:      #8FD9B6;
  --sfera-risponde-luce: #FFFFFF;

  /* le misure dei comandi, perche' nemmeno queste si scrivano a mano */
  --raggio:      12px;
  /* IL RIQUADRO, UNO SOLO: una misura di mezzo fra le tre che c'erano prima —
     57px nelle aree, 224 in Home, 201 nella plancia del flash. */
  --carta-raggio: 14px;
  --carta-alta:  104px;
  --raggio-poco:  9px;
  --raggio-tondo: 22px;
  --orlo:  1px solid var(--grigio-orlo);

  --ombra:    0 1px 2px rgba(35,54,111,.06), 0 8px 24px rgba(35,54,111,.07);
  --ombra-su: 0 2px 6px rgba(35,54,111,.10), 0 18px 44px rgba(35,54,111,.14);
  --misura:   1240px;
  --stacco:   cubic-bezier(.22,.68,.32,1);
}

/* --- Il carattere -------------------------------------------------------
   ZurichSans e' il font proprietario del gruppo: se e' installato sulla
   macchina del collega viene usato, altrimenti si scende su Source Sans 3,
   che ha la stessa impronta umanista. Quando avremo la licenza del font
   ufficiale basta ospitarlo e questa riga non cambia.                     */
/* il carattere arriva da un <link> nelle pagine (un viaggio in meno rispetto a un @import qui) */

*,*::before,*::after{box-sizing:border-box}
/* `display:grid/flex` su una classe batte la regola del browser per [hidden]:
   senza questa riga i pulsanti nascosti restano visibili. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:'ZurichSans-Regular','ZurichSans','Source Sans 3','Segoe UI',
              system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.6; color:var(--navy);
  background:var(--bianco);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'ZurichSans-Light','ZurichSans','Source Sans 3',system-ui,Arial,sans-serif;
  font-weight:300; color:var(--navy); margin:0; line-height:1.15;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.3rem,4.6vw,3.5rem)}
h2{font-size:clamp(1.85rem,3.2vw,2.6rem)}
h3{font-size:1.28rem;font-weight:600;letter-spacing:-.005em}
p{margin:0 0 1rem}
a{color:var(--blu);text-decoration:none}
img{max-width:100%;display:block}

.misura{max-width:var(--misura);margin:0 auto;padding:0 clamp(20px,4vw,44px)}

/* --- Le fasce: bianco e grigio, come su zurich.it ---------------------- */
.fascia{padding:clamp(52px,7vw,92px) 0}
.fascia.grigia{background:var(--grigio-velo)}
.fascia.stretta{padding:clamp(34px,4vw,54px) 0}

/* --- Il titolo di sezione con la lineetta sotto -------------------------
   La lineetta sta sotto il TITOLO, non sotto tutto il blocco: e' cosi' che la
   usa Zurich, e serve a staccare il titolo dal testo che segue. */
.titolo-sez{margin-bottom:clamp(28px,3.4vw,44px)}
.titolo-sez h2{margin-bottom:16px}
.titolo-sez h2::after{
  content:"";display:block;width:76px;height:4px;background:var(--blu);
  border-radius:2px;margin-top:18px;
}
.titolo-sez .occhiello{
  display:block;font-size:.78rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blu);margin-bottom:10px;
}
.titolo-sez p{color:var(--testo-tenue);max-width:66ch;margin:16px 0 0}

/* ========================================================================
   TESTATA
   ===================================================================== */
.testata{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:.3s var(--stacco);
}
.testata.staccata{border-bottom-color:var(--grigio-orlo);box-shadow:0 4px 20px rgba(35,54,111,.06)}
/* ⛔ L'ALTEZZA NON E' FISSA: con l'altezza bloccata a 76 px il menu andava a
   capo e le righe in più finivano tagliate — si vedeva mezza parola e nessun
   errore da nessuna parte. Le aree crescono, la testata cresce con loro. */
.testata .misura{display:flex;align-items:center;gap:20px;min-height:76px;
  padding-top:8px;padding-bottom:8px;transition:min-height .3s var(--stacco)}
.testata.staccata .misura{min-height:64px}

.marchio{display:flex;align-items:center;gap:13px;flex-shrink:0}
.marchio .logo{height:44px;width:auto;display:block;flex-shrink:0}
/* nel piede, blu su blu non si legge: il marchio sta su una tessera bianca */
.piede .tessera{background:#fff;border-radius:10px;padding:8px 14px;display:inline-block}
.marchio .nome{line-height:1.12}
.marchio .nome b{display:block;font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.marchio .nome span{display:block;font-size:.72rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blu);font-weight:600}

.menu{display:flex;align-items:center;gap:2px;margin-left:auto;flex-wrap:wrap}
.menu a{
  padding:8px 12px;border-radius:999px;font-size:.9rem;color:var(--navy);
  font-weight:500;white-space:nowrap;transition:.18s var(--stacco);position:relative;
}
.menu a:hover{background:var(--blu-velo);color:var(--blu)}
.menu a.qui{color:var(--blu);font-weight:600}
.menu a.qui::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--blu);border-radius:2px;
}
.menu a.fuori::after{content:"↗";font-size:.72em;margin-left:5px;opacity:.6;position:static;
  background:none;display:inline}
/* le aree riservate nel menu (solo a chi ha il ruolo): un lucchetto piccolo davanti */
/* «Come si usa»: la riga che apre ogni pagina, per chi non l'ha mai usata */
.comeusa{color:var(--testo-debole);font-size:.9rem;max-width:90ch;margin:4px 0 14px;line-height:1.5}
.comeusa b{color:var(--navy)}
.flash-cima .comeusa,.cappello .comeusa{color:inherit;opacity:.85}
.cerca-scorciatoia{
  display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;
  border:1px solid var(--grigio-orlo);background:var(--bianco);cursor:pointer;
  font:inherit;font-size:.88rem;color:var(--testo-debole);transition:.18s var(--stacco);
}
.cerca-scorciatoia:hover{border-color:var(--blu-chiaro);color:var(--blu);box-shadow:var(--ombra)}
.cerca-scorciatoia kbd{
  font:inherit;font-size:.76rem;padding:1px 6px;border-radius:5px;
  background:var(--grigio-velo);border:1px solid var(--grigio-orlo);color:var(--testo-debole);
}
.apri-menu{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto;
  color:var(--navy)}

/* ========================================================================
   BOTTONI — la pillola Zurich, con il chevron
   ===================================================================== */
.bottone{
  display:inline-flex;align-items:center;gap:11px;padding:13px 26px;
  border-radius:999px;background:var(--blu);color:#fff;font-weight:600;
  font-size:1rem;border:1.5px solid var(--blu);cursor:pointer;
  transition:.22s var(--stacco);text-decoration:none;
}
.bottone::after{content:"›";font-size:1.32em;line-height:0;transition:transform .22s var(--stacco);
  margin-top:-2px}
.bottone:hover{background:var(--navy);border-color:var(--navy);
  box-shadow:0 8px 22px rgba(35,54,111,.26);transform:translateY(-1px)}
.bottone:hover::after{transform:translateX(4px)}
.bottone.chiaro{background:transparent;color:var(--blu)}
.bottone.chiaro:hover{background:var(--blu);color:#fff}
.bottone.bianco{background:#fff;color:var(--blu);border-color:#fff}
.bottone.bianco:hover{background:var(--blu-velo);border-color:var(--blu-velo);color:var(--navy)}
.bottone.piccolo{padding:9px 18px;font-size:.9rem}

/* ========================================================================
   HOME — la copertina
   ===================================================================== */
.copertina{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  padding:clamp(48px,6vw,84px) 0 clamp(48px,6vw,80px)}
.copertina::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(940px 620px at 78% 8%,rgba(84,149,207,.44),transparent 62%),
             radial-gradient(680px 520px at 8% 96%,rgba(33,103,174,.42),transparent 60%);
}
.copertina .cerchio{
  position:absolute;border-radius:50%;border:1px solid rgba(145,191,227,.20);
  pointer-events:none;
}
.copertina .cerchio.a{width:560px;height:560px;top:-190px;right:-120px}
.copertina .cerchio.b{width:820px;height:820px;top:-320px;right:-260px}
.copertina .cerchio.c{width:300px;height:300px;bottom:-150px;left:-90px;
  border-color:rgba(145,191,227,.14)}
.copertina .misura{position:relative;z-index:1}
.copertina h1{color:#fff;max-width:17ch}
.copertina h1 em{font-style:normal;color:var(--blu-chiaro)}
.copertina .sotto{font-size:clamp(1.02rem,1.55vw,1.22rem);color:#C7D6EC;max-width:56ch;
  margin:22px 0 34px;font-weight:300}
.copertina .occhiello{
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  background:rgba(145,191,227,.16);border:1px solid rgba(145,191,227,.3);
  font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--blu-chiaro);margin-bottom:26px;
}
.copertina .occhiello .puntino{width:7px;height:7px;border-radius:50%;background:#5FD09A;
  box-shadow:0 0 0 0 rgba(95,208,154,.65);animation:pulsa 2.4s infinite}
@keyframes pulsa{
  70%{box-shadow:0 0 0 9px rgba(95,208,154,0)} 100%{box-shadow:0 0 0 0 rgba(95,208,154,0)}
}

/* la copertina su due colonne: il discorso a sinistra, il pannello vivo a
   destra. Sotto i 980px tornano una sotto l'altra. */
.copertina-griglia{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4vw,56px);
  align-items:center}
@media (max-width:980px){ .copertina-griglia{grid-template-columns:1fr} }

/* --- il pannello vivo sull'archivio ------------------------------------ */
.pannello{
  display:block;padding:26px 26px 22px;border-radius:20px;color:#fff;
  background:rgba(255,255,255,.085);border:1px solid rgba(145,191,227,.26);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 22px 60px rgba(10,20,50,.28);transition:.28s var(--stacco);
}
.pannello:hover{background:rgba(255,255,255,.14);border-color:var(--blu-chiaro);
  transform:translateY(-4px);box-shadow:0 30px 74px rgba(10,20,50,.36)}
.pannello-testa{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px}
.pannello-testa .etichetta{font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--blu-chiaro)}
.pannello-testa .vivo{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;
  color:#9FE3C0;font-weight:600}
.pannello-testa .vivo .puntino{width:6px;height:6px;border-radius:50%;background:#5FD09A;
  box-shadow:0 0 0 0 rgba(95,208,154,.6);animation:pulsa 2.4s infinite}
.pannello-cifra{font-size:3.3rem;font-weight:300;line-height:1;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:11px}
.pannello-cifra small{font-size:.86rem;color:#B6C7E2;font-weight:400;letter-spacing:0}
.pannello-righe{margin:20px 0 18px;display:grid;gap:11px}
.p-riga{display:grid;grid-template-columns:1fr 72px 38px;align-items:center;gap:11px;
  font-size:.82rem;color:#C7D6EC}
.p-riga b{text-align:right;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.p-barra{height:5px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.p-barra i{display:block;height:100%;background:var(--blu-chiaro);border-radius:99px}
.pannello-piede{display:flex;flex-wrap:wrap;gap:7px;padding-top:16px;
  border-top:1px solid rgba(145,191,227,.20)}
.bollino{font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.12);color:#DCE6F5}
.bollino.verde{background:rgba(95,208,154,.16);color:#9FE3C0}
.bollino.giallo{background:rgba(240,200,136,.16);color:#F2D39A}
.bollino.rosso{background:rgba(230,130,150,.16);color:#F2AEBC}
.pannello-coda{display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  font-size:.86rem;font-weight:600;color:var(--blu-chiaro)}
.pannello-coda::after{content:"›";font-size:1.25em;line-height:0;
  transition:transform .22s var(--stacco)}
.pannello:hover .pannello-coda::after{transform:translateX(4px)}

/* --- le tessere della copertina ----------------------------------------
   Sei strumenti: su schermo largo stanno in una riga sola, e una riga sola
   e' quello che serve a una barra di scorciatoie. */
.scorciatoie{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;
  margin-top:clamp(30px,3.6vw,44px)}
.scorciatoia{
  display:flex;align-items:center;gap:14px;padding:17px 19px;border-radius:14px;
  background:rgba(255,255,255,.075);border:1px solid rgba(145,191,227,.20);
  color:#fff;transition:.22s var(--stacco);backdrop-filter:blur(6px);
}
.scorciatoia:hover{background:rgba(255,255,255,.15);border-color:var(--blu-chiaro);
  transform:translateY(-3px)}
.scorciatoia{padding:14px 16px;gap:12px}
.scorciatoia .ico{width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:rgba(145,191,227,.20);display:grid;place-items:center;font-size:1.05rem}
.scorciatoia b{font-size:.9rem}
.scorciatoia span{font-size:.74rem}
.scorciatoia b{display:block;font-weight:600;font-size:.98rem;line-height:1.25}
.scorciatoia span{display:block;font-size:.8rem;color:#B6C7E2;margin-top:2px}

/* ========================================================================
   RIQUADRI E CARTE
   ===================================================================== */
.griglia{display:grid;gap:clamp(16px,2vw,24px)}
.griglia.q4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.griglia.q3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.griglia.q2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

/* la tessera con l'icona nel cerchio, come i riquadri di zurich.it */
/* ⭐ «APRI» STA IN ALTO, ACCANTO ALL'ICONA: così i riquadri restano compatti
   senza perdere informazione. Il markup non cambia — icona, titolo, testo,
   coda: li mette al loro posto la griglia, che sposta senza riscrivere
   niente. */
.tessera{
  display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);
  column-gap:12px;padding:18px 18px 18px;background:var(--bianco);
  border:1px solid var(--grigio-orlo);border-radius:var(--carta-raggio);color:var(--navy);
  transition:.24s var(--stacco);position:relative;overflow:hidden;height:100%;
}
.tessera .cerchio-ico{grid-column:1;grid-row:1}
.tessera .coda{grid-column:2;grid-row:1;justify-self:end;align-self:center}
.tessera h3{grid-column:1/3;grid-row:2}
.tessera p{grid-column:1/3;grid-row:3}
.tessera::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blu),var(--blu-chiaro));
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--stacco);
}
.tessera:hover{border-color:var(--blu-chiaro);box-shadow:var(--ombra-su);transform:translateY(-4px)}
.tessera:hover::before{transform:scaleX(1)}
.tessera .cerchio-ico{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--blu-velo);font-size:1.6rem;margin-bottom:13px;
  transition:.24s var(--stacco);
}
.tessera:hover .cerchio-ico{background:var(--blu);transform:scale(1.06)}
.tessera h3{margin-bottom:8px}
.tessera p{font-size:.93rem;color:var(--testo-tenue);margin:0;flex:1}
.tessera .coda{display:flex;align-items:center;gap:7px;color:var(--blu);
  font-weight:600;font-size:.9rem}
/* la variante compatta: quattro tessere per riga, tutto un filo piu' minuto */
.snella .tessera{padding:20px 18px 18px}
.snella .tessera .cerchio-ico{width:46px;height:46px;font-size:1.25rem;margin-bottom:13px}
.snella .tessera h3{font-size:1rem;margin-bottom:6px}
.snella .tessera p{font-size:.86rem}
.snella .tessera .coda{font-size:.85rem}
.tessera .coda::after{content:"›";font-size:1.25em;line-height:0;transition:transform .22s var(--stacco)}
.tessera:hover .coda::after{transform:translateX(4px)}
.tessera .conta{position:absolute;top:20px;right:22px;font-size:.76rem;font-weight:700;
  color:var(--testo-debole);letter-spacing:.05em}

/* --- elenco di link, per le pagine di raccolta -------------------------- */
.gruppo{margin-bottom:clamp(30px,3.6vw,46px)}
.gruppo > h3{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:1.12rem;
  font-weight:600;color:var(--navy);
}
.gruppo > h3::before{content:"";width:4px;height:19px;background:var(--blu);border-radius:2px}
.gruppo > h3 .quanti{font-size:.78rem;font-weight:600;color:var(--testo-debole);
  background:var(--grigio-velo);padding:2px 9px;border-radius:999px;letter-spacing:.03em}
.gruppo.riservato > h3::before{background:var(--no)}
.gruppo.riservato > h3 .bollo{
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--no);background:var(--no-velo);padding:3px 10px;border-radius:999px;
}

.voci{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:10px}
.voce{
  display:flex;align-items:flex-start;gap:14px;padding:16px 18px;
  border-radius:var(--carta-raggio);min-height:var(--carta-alta);
  background:var(--bianco);border:1px solid var(--grigio-orlo);color:var(--navy);
  transition:.18s var(--stacco);
}
.voce:hover{border-color:var(--blu-chiaro);background:var(--blu-nebbia);transform:translateX(3px)}
.voce .tipo-ico{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  font-size:.95rem;background:var(--blu-velo);color:var(--blu);
}
.voce .tipo-ico.drive{background:#FFF4E5;color:#B26A00}
.voce .tipo-ico.app{background:#E9F6EE;color:#1E8E5A}
.voce .tipo-ico.esterno{background:var(--grigio);color:var(--testo-tenue)}
.voce .testo{flex:1;min-width:0}
.voce .testo b{display:block;font-weight:600;font-size:.98rem;line-height:1.3}
.voce .testo span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  font-size:.83rem;line-height:1.45;color:var(--testo-tenue);margin-top:4px}
.voce .freccia{color:var(--testo-debole);transition:.18s var(--stacco);font-size:1.1rem;line-height:1;margin-top:9px}
.voce:hover .freccia{color:var(--blu);transform:translateX(3px)}

/* --- LO STILE COMUNE DELLE AREE -----------------------------------------
   Uno stile unico, con l'insieme delle funzionalità disponibili a vista nel
   riquadro classico di un desktop, senza dover sempre scorrere.
   Prima ogni area era: copertina scura alta 277px + indice a sinistra che
   ripeteva i nomi + una colonna di schede larga meta' schermo. Su «Regole»
   voleva dire 3,4 schermate per 24 voci, e la prima voce di «Campagne»
   cominciava a 1.527 pixel dall'alto — sotto la piega.
   Adesso: intestazione alta un quinto, niente indice, e le sezioni AFFIANCATE
   a colonne (`columns`), che e' il modo di impacchettare riquadri di altezza
   diversa senza buchi. Le stesse classi valgono per tutte e cinque le aree. */
.area-testa{background:var(--navy);color:#fff;position:relative;overflow:hidden;
  padding:clamp(20px,2.2vw,28px) 0 clamp(18px,2vw,24px)}
.area-testa::before{content:"";position:absolute;inset:0;
  background:radial-gradient(1200px 300px at 12% -40%,rgba(84,149,207,.35),transparent 70%)}
.area-testa .misura{position:relative;display:flex;flex-wrap:wrap;gap:10px 26px;
  align-items:baseline;justify-content:space-between}
.area-testa .occhiello{color:var(--blu-chiaro)}
/* ⛔ IL BIANCO VA SCRITTO. `h1` porta `color:var(--navy)` dalla regola di base,
   e su fondo blu il titolo si leggeva a fatica: era cosi' anche nella vecchia
   copertina, e nessuno se n'era accorto perche' il titolo lo si indovinava. */
.area-testa h1{color:#fff;font-size:clamp(1.35rem,2.1vw,1.85rem);margin:4px 0 0;letter-spacing:-.015em;line-height:1.15}
.area-testa .sotto{color:#B6C7E2;margin:5px 0 0;font-size:.92rem;max-width:70ch}
.area-testa .conta{margin:0;font-size:.82rem;color:var(--blu-chiaro);white-space:nowrap}
.area-testa .conta b{color:#fff;font-weight:600}

.area-corpo{padding:clamp(20px,2.4vw,30px) 0 clamp(34px,4vw,54px)}
.area-filtro{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}
.area-filtro .cerca-voci{min-width:min(320px,100%)}
.area-filtro .quante{font-size:.84rem;color:var(--testo-debole)}

/* le sezioni affiancate: quante ce ne stanno in larghezza.
   ⛔ NON `columns`: quello bilancia le ALTEZZE, e con quattro sezioni corte
   riempiva due colonne lasciando mezzo schermo bianco. La griglia invece
   riempie sempre tutta la larghezza, che e' quello che serve qui. */
.area-griglia{display:grid;gap:20px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
/* ⛔ `min-width:0` OVUNQUE lungo la catena. Senza, una riga di spiegazione con
   `white-space:nowrap` allarga la colonna alla sua misura naturale — la pagina
   diventava larga 2.035 pixel su uno schermo da 1.280 e le schede si
   sovrapponevano. Un elemento di griglia non si stringe sotto il proprio
   contenuto finche' non glielo si dice. */
.area-griglia > .gruppo{margin:0;min-width:0}
.area-griglia > .gruppo > h3{margin-bottom:10px;font-size:1rem}
/* ⛔ QUANDO LE SEZIONI SONO POCHE, LE VOCI SI SPARGONO IN LARGHEZZA: sezioni
   messe in verticale fanno perdere l'informazione che sotto ci sono altre
   sezioni — appena si entra in una pagina serve la cognizione dell'insieme
   delle cose disponibili. Con una sezione sola la colonna restava stretta a
   sinistra, due terzi di schermo vuoti, e «I portali aperti» e «In partenza»
   finivano sotto la piega senza che niente lo dicesse. La griglia delle
   sezioni serve a impacchettare TANTE sezioni corte (Regole ne ha dodici):
   quando sono una o due, il posto va dato alle voci. */
.area-griglia:has(> .gruppo:only-child){grid-template-columns:1fr}
.area-griglia:has(> .gruppo:only-child) .voci{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.area-griglia:has(> .gruppo:nth-child(2):last-child){grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.area-griglia:has(> .gruppo:nth-child(2):last-child) .voci{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* ⭐ IL RIQUADRO, UNO SOLO. Prima qui la voce era una riga di 57 pixel, per
   tenere tutto sopra la piega; ma cosi' le aree non somigliavano ne' alla Home
   ne' alla plancia del flash, e la spiegazione si leggeva mezza. Adesso e' il
   riquadro standard, con la spiegazione su tre righe: un po' di scorrimento va
   bene, se necessario. */
.area-griglia .voci{grid-template-columns:minmax(0,1fr);gap:12px}
.area-griglia .voce{padding:16px 18px;gap:14px;border-radius:var(--carta-raggio);min-width:0}
.area-griglia .voce:hover{transform:none;border-color:var(--blu-chiaro)}
.area-griglia .voce .tipo-ico{width:38px;height:38px;border-radius:10px;font-size:.95rem}
.area-griglia .voce .testo b{font-size:.98rem;line-height:1.3}
/* due righe di spiegazione: chi legge capisce che cos'e' senza aprirla, e su un'area da 24
   documenti la pagina non torna alle tre schermate e mezzo di prima */
.area-griglia .voce .testo span{font-size:.83rem;line-height:1.45;margin-top:4px;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.area-griglia .voce .freccia{font-size:1.05rem;margin-top:9px}
/* ⛔ QUI NIENTE COMPARSE ALLO SCORRIMENTO: il contenuto dev'esserci subito */
.area-griglia .compare{opacity:1;transform:none;transition:none}
@media (max-width:700px){
  .area-testa .misura{display:block}
  .area-testa .conta{margin-top:8px}
  .area-griglia{columns:1}
}

/* --- barra strumenti --------------------------------------------------- */
.strumenti{display:flex;flex-wrap:wrap;gap:10px}
.strumento{
  display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:999px;
  background:var(--bianco);border:1px solid var(--grigio-orlo);color:var(--navy);
  font-size:.9rem;font-weight:500;transition:.18s var(--stacco);
}
.strumento:hover{border-color:var(--blu);color:var(--blu);box-shadow:var(--ombra);
  transform:translateY(-2px)}

/* ========================================================================
   COMMERCIALE — i generatori
   ===================================================================== */
.generatori{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px}
.gen{
  display:flex;flex-direction:column;padding:26px 24px;border-radius:16px;
  background:var(--bianco);border:1px solid var(--grigio-orlo);transition:.24s var(--stacco);
  height:100%;
}
.gen:hover{border-color:var(--blu-chiaro);box-shadow:var(--ombra-su);transform:translateY(-4px)}
.gen .lettera{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--blu-velo);color:var(--blu);font-size:1.3rem;font-weight:700;
  margin-bottom:17px;
}
.gen .categoria{font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--testo-debole);margin-bottom:7px}
.gen h3{font-size:1.06rem;margin-bottom:9px}
.gen p{font-size:.875rem;color:var(--testo-tenue);flex:1;margin-bottom:19px}

/* le due fasi: predisporre / concludere */
.fasi{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;
  margin-top:26px}
.fase{
  padding:24px 24px 22px;border-radius:16px;border:1px solid var(--grigio-orlo);
  background:var(--bianco);position:relative;
}
.fase .numero{
  position:absolute;top:-13px;left:24px;width:28px;height:28px;border-radius:50%;
  background:var(--blu);color:#fff;display:grid;place-items:center;font-size:.84rem;
  font-weight:700;box-shadow:0 3px 10px rgba(33,103,174,.3);
}
.fase.conclusa .numero{background:var(--ok);box-shadow:0 3px 10px rgba(30,142,90,.3)}
.fase h3{margin:8px 0 8px;font-size:1.08rem}
.fase p{font-size:.9rem;color:var(--testo-tenue);margin-bottom:16px}
.fase .puntualizza{
  font-size:.82rem;color:var(--testo-debole);border-left:3px solid var(--grigio-orlo);
  padding-left:12px;margin:0 0 17px;
}

/* ========================================================================
   AVVISI
   ===================================================================== */
.avviso{
  display:flex;gap:15px;padding:17px 20px;border-radius:13px;background:var(--blu-nebbia);
  border:1px solid var(--blu-chiaro);font-size:.9rem;color:var(--navy);align-items:flex-start;
}
.avviso .segno{font-size:1.16rem;line-height:1.25;flex-shrink:0}
.avviso b{font-weight:600}
.avviso.giallo{background:var(--parz-velo);border-color:#F0C888}
.avviso p:last-child{margin-bottom:0}

/* ========================================================================
   PIEDE
   ===================================================================== */
.piede{background:var(--navy);color:#B6C7E2;padding:48px 0 34px;margin-top:auto}
.piede .misura{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;
  align-items:flex-start}
.piede .marchio .nome b{color:#fff}
.piede .marchio .nome span{color:var(--blu-chiaro)}
.piede .legale{font-size:.83rem;line-height:1.75;max-width:42ch}
.piede .legale b{color:#fff;font-weight:600}
.piede .rimandi{display:flex;flex-direction:column;gap:7px}
.piede .rimandi a{color:#B6C7E2;font-size:.88rem;transition:.16s}
.piede .rimandi a:hover{color:#fff}

/* ========================================================================
   RICERCA RAPIDA (⌘K)
   ===================================================================== */
.velo{position:fixed;inset:0;z-index:200;background:rgba(26,40,81,.42);
  backdrop-filter:blur(5px);display:none;align-items:flex-start;justify-content:center;
  padding:12vh 20px 20px}
.velo.aperto{display:flex;animation:entra .18s var(--stacco)}
@keyframes entra{from{opacity:0}to{opacity:1}}
.cercatore{
  width:100%;max-width:660px;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(26,40,81,.36);animation:sale .22s var(--stacco);
}
@keyframes sale{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.cercatore .riga-input{display:flex;align-items:center;gap:13px;padding:18px 22px;
  border-bottom:1px solid var(--grigio-orlo)}
.cercatore input{flex:1;border:0;outline:0;font:inherit;font-size:1.08rem;color:var(--navy);
  background:transparent}
.cercatore input::placeholder{color:var(--testo-debole)}
.cercatore .esiti{max-height:52vh;overflow-y:auto;padding:8px}
.cercatore .esito{
  display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:11px;
  color:var(--navy);cursor:pointer;
}
.cercatore .esito.su{background:var(--blu-velo)}
.cercatore .esito .tipo-ico{width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:grid;place-items:center;font-size:.86rem;background:var(--grigio-velo)}
.cercatore .esito b{font-weight:500;font-size:.94rem;display:block}
.cercatore .esito span{font-size:.76rem;color:var(--testo-debole)}
.cercatore .vuoto{padding:34px;text-align:center;color:var(--testo-debole);font-size:.92rem}
.cercatore .zoccolo{padding:10px 22px;background:var(--grigio-velo);font-size:.76rem;
  color:var(--testo-debole);display:flex;gap:18px;border-top:1px solid var(--grigio-orlo)}
.cercatore .zoccolo kbd{font:inherit;font-size:.72rem;padding:1px 6px;border-radius:4px;
  background:#fff;border:1px solid var(--grigio-orlo)}

/* ========================================================================
   COMPARSA GRADUALE — leggera, senza librerie
   ===================================================================== */
.compare{opacity:0;transform:translateY(16px);transition:opacity .6s var(--stacco),
  transform .6s var(--stacco)}
.compare.vista{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .compare{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ========================================================================
   SCHERMI PICCOLI
   ===================================================================== */
@media (max-width:1080px){
  .menu{display:none;position:fixed;top:76px;left:0;right:0;background:#fff;
    flex-direction:column;align-items:stretch;padding:14px;gap:3px;
    border-bottom:1px solid var(--grigio-orlo);box-shadow:0 18px 40px rgba(35,54,111,.12);
    max-height:calc(100vh - 76px);overflow-y:auto}
  .menu.aperto{display:flex}
  .menu a{padding:13px 16px;border-radius:11px;font-size:1rem}
  .menu a.qui::after{display:none}
  .apri-menu{display:block}
  .cerca-scorciatoia{margin-left:auto}
  .cerca-scorciatoia span,.cerca-scorciatoia kbd{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .testata .misura{gap:12px}
  .marchio .nome span{display:none}
  .voci{grid-template-columns:1fr}
  .piede .misura{flex-direction:column;gap:24px}
}

/* ============================================================================
   IL LIVELLO NUOVO — copertine scure, apertura animata, icone, indice.
   Tutto dentro la palette Zurich gia' dichiarata in cima: nessun colore nuovo.
   ========================================================================= */

/* --- le icone: ereditano colore e si allineano al testo ------------------ */
.ico-svg{display:block;flex-shrink:0}
.tipo-ico .ico-svg,.cerchio-ico .ico-svg,.ico-piccola .ico-svg{color:currentColor}

/* --- L'APERTURA -----------------------------------------------------------
   Lo stato di partenza vale solo se il contenitore dichiara `data-scena`:
   cosi' se il JavaScript non parte, si vede tutto lo stesso.               */
[data-scena] .entra{opacity:0;transform:translateY(14px)}
[data-scena].in-scena .entra{opacity:1;transform:none;
  transition:opacity .5s var(--stacco),transform .5s var(--stacco)}
[data-scena].in-scena .r1{transition-delay:.04s}
[data-scena].in-scena .r2{transition-delay:.12s}
[data-scena].in-scena .r3{transition-delay:.20s}
[data-scena].in-scena .r4{transition-delay:.28s}
[data-scena] .cresce{transform:scaleX(0);transform-origin:left}
[data-scena].in-scena .cresce{transform:scaleX(1);transition:transform .7s var(--stacco) .25s}
[data-sale]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  [data-scena] .entra,[data-scena].in-scena .entra{opacity:1;transform:none;transition:none}
  [data-scena] .cresce,[data-scena].in-scena .cresce{transform:scaleX(1);transition:none}
}

/* --- LA TESTATA DELLE PAGINE — scura, la stessa in tutto il Digital Workplace ---------
   Una forma sola: la disegna `moduli/cappello.mjs`, e le pagine che la scrivono nel guscio usano lo
   stesso markup. Quello che ci sta dentro — istruzioni, comandi, stato — si legge sul fondo scuro;
   ciò che la pagina scrive in elenchi e schede sta nel contenuto, non qui.
   ⛔ Fuori restano la copertina della Home, la testata compatta delle aree, il Laboratorio e CARE. */
.cappello{background:var(--navy);color:#fff;position:relative;
  padding:clamp(28px,4vw,44px) 0 clamp(22px,3vw,30px)}
.cappello::before{content:"";position:absolute;inset:0;
  background:radial-gradient(760px 460px at 84% 0%,rgba(84,149,207,.34),transparent 62%);
  pointer-events:none}
.cappello > .misura{position:relative}
.cappello .occhiello,.cappello .occhiello-blu{color:var(--blu-chiaro)}
.cappello h1{color:#fff;font-size:clamp(1.8rem,3.2vw,2.5rem);margin:8px 0 10px;letter-spacing:-.02em}
.cappello .sotto{color:#B6C7E2;max-width:66ch;margin:0 0 16px;font-size:1.02rem}
.cappello .comeusa{color:#B6C7E2;opacity:.9}
.cappello .sotto b,.cappello .comeusa b{color:#fff}
.cappello .sotto a,.cappello .comeusa a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.cappello .conta{margin:16px 0 0;font-size:.86rem;color:var(--blu-chiaro)}
.cappello .conta b{color:#fff;font-weight:600}
.cappello .stato,.cappello .mini{color:#B6C7E2}
.cappello .stato b{color:#fff}
.cappello .ambiente.vero{background:#fff;color:var(--navy)}
.cappello .ambiente.prova{background:rgba(255,255,255,.1);color:#B6C7E2;border-color:rgba(255,255,255,.3)}
.cappello .bottone.chiaro{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);color:#fff}
.cappello .bottone.chiaro:hover{background:rgba(255,255,255,.18)}
.cappello .azzera{color:var(--blu-chiaro);background:none;border:0;font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;padding:6px 4px}
.cappello .azzera:hover{color:#fff}

/* la tessera che merita di essere vista per prima */
.tessera.spicca{border-color:var(--blu);background:var(--blu-nebbia)}
.tessera.spicca .cerchio-ico{background:var(--blu);color:#fff}

/* --- L'INDICE delle pagine-elenco ---------------------------------------- */
.con-indice{display:grid;grid-template-columns:214px minmax(0,1fr);
  gap:clamp(20px,3vw,38px);align-items:start}
.indice-dentro{position:sticky;top:92px;display:grid;gap:2px}
.indice-titolo{font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--testo-debole);margin:14px 0 6px}
.indice a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;border-radius:9px;font-size:.88rem;color:var(--testo-tenue);
  transition:.16s var(--stacco);min-height:36px}
.indice a span{font-size:.76rem;color:var(--testo-debole);font-variant-numeric:tabular-nums}
.indice a:hover{background:var(--blu-nebbia);color:var(--blu)}
.indice a.qui{background:var(--blu-velo);color:var(--blu);font-weight:600}
.indice a.qui span{color:var(--blu-medio)}

.cerca-voci{display:flex;align-items:center;gap:9px;border:1px solid var(--grigio-orlo);
  border-radius:10px;padding:9px 12px;background:#fff;color:var(--testo-debole);
  transition:.16s var(--stacco)}
.cerca-voci:focus-within{border-color:var(--blu);box-shadow:0 0 0 3px rgba(33,103,174,.12)}
.cerca-voci input{border:0;outline:0;font:inherit;font-size:.88rem;width:100%;
  background:transparent;color:var(--navy);min-height:24px}
.gruppo.nascosto,.voce.nascosta{display:none}
.gruppo{scroll-margin-top:96px}

@media (max-width:900px){
  .con-indice{grid-template-columns:1fr}
  .indice-dentro{position:static}
  .indice-titolo{display:none}
  .indice a{display:none}
  .indice a.mostra-sempre{display:flex}
}

/* --- ACCESSIBILITA' ------------------------------------------------------ */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.salta{position:absolute;left:12px;top:-60px;z-index:400;background:var(--navy);color:#fff;
  padding:11px 20px;border-radius:0 0 10px 10px;font-size:.9rem;font-weight:600;
  transition:top .18s var(--stacco)}
.salta:focus{top:0}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--blu-chiaro);outline-offset:2px;border-radius:6px}
.cappello :where(a,button):focus-visible,.copertina :where(a,button):focus-visible{
  outline-color:#fff}

@media (max-width:760px){
  .apri-menu,.cerca-scorciatoia,.indice a,.menu a{min-height:44px}
  .apri-menu{min-width:44px}
}

/* ==========================================================================
   IL LINGUAGGIO DEI COMANDI — l'unico posto che dice come si veste ciò che
   si clicca: non c'è un altro punto che dica come si disegnano i comandi e
   che si applichi a tutto.

   Prima erano 27 comandi definiti ognuno per conto suo, con la stessa ricetta
   riscritta a mano 35 volte (il bordo), 61 (la transizione), 25 (il raggio).
   Da lì venivano i difetti trovati a occhio: un riquadro che sembrava un dato,
   una barra che non sembrava cliccabile.

   ⛔ REGOLA: chi costruisce una pagina NON inventa un comando nuovo — sceglie
   una di queste forme. Se serve una forma che qui non c'è, si aggiunge QUI,
   non nella pagina. Vale anche per i colori e le misure: si usano i token,
   non valori scritti a mano.
   ======================================================================= */

/* --- .cmd — la base di tutto ciò che si clicca -------------------------- */
/* il semaforo dei dati: una riga in cima al contenuto */
.semaforo{padding:10px 0;font-size:.9rem;border-bottom:1px solid var(--grigio)}
.semaforo.sem-verde{background:var(--ok-velo);color:var(--testo-debole)}
.semaforo.sem-quieto{background:transparent;color:var(--testo-debole);font-size:.82rem;padding:6px 0;border-bottom:0}
.semaforo.sem-giallo{background:var(--attenzione-velo);color:var(--attenzione)}
.semaforo.sem-rosso{background:var(--no-velo);color:var(--no)}
.cmd{font:inherit;color:inherit;cursor:pointer;border:0;background:none;
  text-align:left;transition:background .18s var(--stacco),
  border-color .18s var(--stacco), box-shadow .18s var(--stacco),
  transform .18s var(--stacco), color .18s var(--stacco)}
.cmd:focus-visible{outline:3px solid var(--blu);outline-offset:2px;border-radius:4px}
.cmd[disabled],.cmd[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
@media (prefers-reduced-motion:reduce){ .cmd{transition:none} }

/* --- .cmd-tessera — il riquadro che apre un'area ------------------------ */
.cmd-tessera{display:flex;flex-direction:column;background:#fff;border:var(--orlo);
  border-radius:var(--raggio);padding:16px 18px}
.cmd-tessera:hover{border-color:var(--blu-chiaro);box-shadow:var(--ombra-su);
  transform:translateY(-2px)}
.cmd-tessera.acceso{border-color:var(--blu);background:var(--blu-nebbia);
  box-shadow:0 0 0 1px var(--blu)}
/* l'invito in fondo: è QUESTO che dice «si apre» */
.cmd-invito{margin-top:12px;padding-top:10px;border-top:1px solid var(--grigio);
  display:flex;align-items:center;justify-content:space-between;
  font-size:.8rem;font-weight:700;color:var(--blu)}
.cmd-freccia{width:22px;height:22px;border-radius:50%;background:var(--blu-velo);
  display:grid;place-items:center;color:var(--blu);font-size:.9rem;line-height:1;
  flex-shrink:0;transition:transform .18s var(--stacco),background .18s,color .18s}
.cmd:hover .cmd-freccia{background:var(--blu);color:#fff;transform:translateX(3px)}

/* --- .cmd-pillola — il filtro che si accende e si spegne ---------------- */
.cmd-pillola{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  border:var(--orlo);border-radius:var(--raggio-tondo);background:#fff;
  font-size:.85rem;font-weight:600;color:var(--testo-tenue)}
.cmd-pillola:hover{border-color:var(--blu-chiaro);color:var(--navy)}
.cmd-pillola.acceso{background:var(--blu);border-color:var(--blu);color:#fff}
.cmd-pillola.acceso.scura{background:var(--navy);border-color:var(--navy)}

/* --- .cmd-riga — la riga di elenco che si apre -------------------------- */
.cmd-riga{display:block;width:100%;padding:13px 16px}
.cmd-riga:hover{background:var(--blu-nebbia)}
.cmd-riga.acceso{background:var(--blu-velo)}

/* --- .cmd-barra — la fascia che apre un pannello ------------------------ */
.cmd-barra{display:flex;align-items:center;gap:11px;width:100%;padding:13px 18px;
  background:var(--blu-nebbia);border:1px solid var(--blu-velo);
  border-radius:var(--raggio);color:var(--navy);font-size:.92rem}
.cmd-barra:hover{border-color:var(--blu-chiaro);box-shadow:var(--ombra)}

/* --- .dato — il suo opposto: NON si clicca ------------------------------ */
.dato{background:var(--grigio-velo);border:0;border-radius:var(--raggio-poco);
  padding:14px 16px;cursor:auto}
.dato .dato-val{display:block;font-size:1.35rem;font-weight:800;color:var(--navy);
  font-variant-numeric:tabular-nums;line-height:1.1}
.dato .dato-eti{display:block;font-size:.78rem;color:var(--testo-debole);margin-top:3px}

/* ================================================== LA TABELLA DEI DATI
   `.in-tabella` e' la forma condivisa delle tabelle di dati: la usano le
   iniziative, la scheda dell'intermediario e il flash, ed e' quella che
   `assets/moduli/scarica.mjs` riconosce per metterci accanto «Scarica in Excel».
   Stava in `iniziative.css`, cioe' nel foglio di UNA pagina: portata qui
   senza cambiare una riga di stile. */
.in-tabella{width:100%;border-collapse:collapse;font-size:.92rem;margin-top:8px}
.in-tabella th,.in-tabella td{padding:7px 8px;border-bottom:1px solid var(--grigio);text-align:right}
.in-tabella th:first-child,.in-tabella td:first-child{text-align:left}
.in-tabella th{font-weight:600;color:var(--testo-debole);font-size:.82rem}
.in-tabella tr.tot td{font-weight:700;color:var(--navy);border-bottom:0}

/* ================================================ L'ANTEPRIMA — «entra come…»
   Una fascia fissa in testa, sempre visibile, che dice di chi è l'ambiente che
   si sta guardando. Deve STONARE: due pagine che si assomigliano e una sola
   delle due è la tua è il modo migliore per fare un danno. Il corpo scende di
   quel tanto, così la fascia non copre la testata. */
.anteprima-fascia{position:fixed;top:0;left:0;right:0;z-index:900;
  background:var(--navy);color:#fff;font-size:.86rem;line-height:1.4;
  padding:9px 0;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.anteprima-fascia .misura{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.anteprima-fascia .an-eti{font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:.72rem;background:rgba(255,255,255,.18);padding:3px 9px;border-radius:999px}
.anteprima-fascia .an-chi{flex:1;min-width:200px}
.anteprima-fascia .an-chi b{font-weight:700}
.anteprima-fascia .an-nota{opacity:.75;font-size:.8rem}
.anteprima-fascia .an-esci{border:1px solid rgba(255,255,255,.55);background:transparent;
  color:#fff;font:inherit;font-size:.82rem;padding:5px 13px;border-radius:999px;cursor:pointer}
.anteprima-fascia .an-esci:hover{background:#fff;color:var(--navy)}
body.in-anteprima{padding-top:46px}
@media (max-width:640px){body.in-anteprima{padding-top:76px}}

/* il riscontro quando si prova a scrivere e l'anteprima lo ferma */
.anteprima-avviso{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  z-index:901;background:var(--navy);color:#fff;padding:11px 18px;border-radius:var(--raggio);
  font-size:.88rem;box-shadow:0 6px 20px rgba(0,0,0,.22);opacity:0;pointer-events:none;
  transition:opacity .18s var(--stacco),transform .18s var(--stacco);max-width:min(90vw,540px)}
.anteprima-avviso.visibile{opacity:1;transform:translateX(-50%) translateY(0)}
/* nel modello la fascia è ambrata: dice che è una finta, non l'ambiente vero */
.anteprima-fascia.finta{background:var(--parz,#C77B21)}

/* --- l'area Campagne: i portali aperti (prefisso `cp-`) ------------------- */
.cp-portali{margin-bottom:8px}
.cp-scorre{overflow-x:auto}
.cp-tab{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:6px}
.cp-tab th,.cp-tab td{padding:8px 10px;border-bottom:1px solid var(--grigio);text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
.cp-tab thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--testo-debole);font-weight:600;border-bottom:2px solid var(--grigio-orlo)}
.cp-tab tbody th,.cp-tab thead th:first-child{text-align:left;white-space:normal}
.cp-tab tbody th small{display:block;font-weight:400;font-size:.76rem;color:var(--testo-debole)}
.cp-manca{color:var(--testo-tenue)}
.cp-manca.cp-poco{color:var(--parz,#C77B21);font-weight:700}
.cp-senza{color:var(--testo-debole);font-style:italic}
.cp-conto{margin:10px 0 0;font-size:.84rem;color:var(--testo-debole)}
.cp-poi{margin-top:26px}

/* una casella che si accende: la forma sta QUI, una volta sola, e le pagine la
   usano — se no ogni pagina se ne disegna una sua e non si somigliano più. */
.spunta input{width:17px;height:17px;cursor:pointer}
.spunta input:disabled{cursor:not-allowed;opacity:.35}
.rd-nota-inline{font-size:.78rem;color:var(--testo-debole);margin-left:10px}

/* ── Entra come utenza di prova: la scorciatoia che vede il solo
   amministratore, in fondo alla home. Discreta di proposito: e' temporanea
   quanto gli account che elenca, e non deve sembrare una funzione del portale. */
.prove-accesso{padding:clamp(28px,3vw,40px) 0;background:var(--grigio-velo);border-top:1px dashed var(--bordo)}
.prove-t{font-size:1.02rem;margin:0 0 6px}
.prove-p{margin:0 0 12px;font-size:.83rem;color:var(--testo-debole);max-width:74ch}
.prove-p code{font-size:.95em;background:#fff;padding:1px 5px;border-radius:4px;border:1px solid var(--bordo)}
.prove-righe{display:flex;flex-wrap:wrap;gap:10px}
.prove-uno{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:9px 14px;line-height:1.35}
.prove-uno b{font-size:.9rem}
.prove-uno small{font-size:.76rem;color:var(--testo-debole)}
.prove-uno .prove-nodi{font-size:.72rem;opacity:.75}
.prove-nota{margin-top:14px;margin-bottom:0;font-size:.78rem}

/* IL BRINDISI: il riscontro breve dopo un comando (#brindisi), in ogni pagina che ce l'ha; si
   accende con `.vivo` (brinda della base) o `.su` (l'amministrazione) */
.brindisi{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:300;
  background:var(--navy);color:#fff;padding:12px 22px;border-radius:999px;font-size:.9rem;
  font-weight:500;box-shadow:0 16px 40px rgba(26,40,81,.34);opacity:0;pointer-events:none;
  transition:.26s var(--stacco);max-width:90vw;text-align:center;
}
.brindisi.su,.brindisi.vivo{opacity:1;transform:translate(-50%,0)}

/* --- LA BARRA DELLE PAGINE DI UN'AREA -----------------------------------
   Un'area fatta di più pagine le mostra tutte, e segna quella in cui si è.
   Forma condivisa: la usa l'assistenza, e ci passeranno le altre aree. */
/* LA SCENA DEL LABORATORIO: blu notte, una griglia sottile da carta millimetrata, etichette
   a spaziatura fissa. La usano l'area, il laboratorio attuariale e A.I. CARE, così si somigliano. */
.scena-lab{position:relative;isolation:isolate;color:var(--bianco);
  background:radial-gradient(ellipse at 30% 40%,var(--navy) 0%,var(--navy-scuro) 75%)}
.scena-lab::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(rgba(145,191,227,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(145,191,227,.10) 1px,transparent 1px),
    linear-gradient(rgba(145,191,227,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(145,191,227,.05) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px}
/* le formule e l'alambicco, sulla destra e in trasparenza: il disegno sta in un file suo */
.scena-lab::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url('laboratorio-sfondo.svg') right center/cover no-repeat}
.scena-lab h1,.scena-lab h2{color:var(--bianco)}
.etichetta-lab{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sfera-pensa)}

/* --- LO STRUMENTO: la plancia scura e i suoi comandi (moduli/strumenti.mjs) ----------------------------
   Si manovrano come un apparecchio e restano comandi veri: tastiera, telefono, lettori di schermo. */
.strumento-plancia{position:relative;isolation:isolate;color:var(--bianco);border-radius:var(--raggio);padding:18px 20px;
  background:radial-gradient(ellipse at 25% 15%,var(--navy) 0%,var(--navy-scuro) 78%);
  border:1px solid rgba(145,191,227,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--ombra)}
.strumento-plancia::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:.5;
  background-image:linear-gradient(rgba(145,191,227,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(145,191,227,.07) 1px,transparent 1px);
  background-size:16px 16px}
.strumento-eti{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sfera-pensa);margin:0}
.strumento-cifra{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--bianco)}
.strumento-tenue{color:var(--blu-chiaro)}

/* l'interruttore: una posizione accesa fra due o più; sta nelle scene scure */
.cmd-interruttore{display:inline-flex;flex-wrap:wrap;gap:4px;padding:5px;border-radius:calc(var(--raggio) + 6px);
  background:rgba(255,255,255,.06);border:1px solid rgba(145,191,227,.3)}
.cmd-interruttore>.cmd{display:flex;flex-direction:column;gap:2px;padding:10px 20px;border-radius:var(--raggio);
  color:var(--blu-velo);font-size:1.02rem;font-weight:600;min-width:12rem}
.cmd-interruttore>.cmd small{font-size:.74rem;font-weight:400;color:var(--blu-chiaro)}
.cmd-interruttore>.cmd:hover{background:rgba(255,255,255,.08);color:var(--bianco)}
.cmd-interruttore>.cmd.acceso{background:var(--bianco);color:var(--navy);box-shadow:0 3px 12px rgba(0,0,0,.28)}
.cmd-interruttore>.cmd.acceso small{color:var(--testo-tenue)}
.cmd-interruttore>.cmd:focus-visible{outline:3px solid var(--sfera-pensa)}
/* stretto: dentro una barra, dove serve solo il nome */
.cmd-interruttore.stretto{padding:3px;gap:2px;border-radius:var(--raggio)}
.cmd-interruttore.stretto>.cmd{min-width:0;padding:5px 12px;font-size:.84rem;border-radius:var(--raggio-poco)}

/* il tasto della plancia: un pulsante da apparecchio, per le azioni rapide sullo strumento */
.cmd-tasto{padding:6px 11px;border-radius:7px;font-size:.78rem;font-weight:600;color:var(--blu-velo);
  background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(145,191,227,.3);box-shadow:0 2px 0 rgba(0,0,0,.4)}
.cmd-tasto:hover{color:var(--bianco);border-color:var(--sfera-pensa)}
.cmd-tasto:active{transform:translateY(2px);box-shadow:none}
.cmd-tasto-riposo{color:var(--blu-chiaro);border-style:dashed}

/* il cursore verticale del mixer: il binario, la parte piena, il tappo che si trascina */
.strumento-cursore{--pos:0;position:relative;display:block;width:36px;height:150px;cursor:ns-resize;touch-action:none;outline:none}
.strumento-cursore::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:6px;margin-left:-3px;border-radius:3px;
  background:rgba(0,0,0,.35);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 0 0 1px rgba(145,191,227,.16)}
.strumento-cursore::after{content:"";position:absolute;left:4px;right:4px;top:8px;bottom:8px;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(to top,rgba(145,191,227,.45) 0 1px,transparent 1px 13.4px);
  -webkit-mask:linear-gradient(90deg,var(--bianco) 0 6px,transparent 6px calc(100% - 6px),var(--bianco) calc(100% - 6px));
  mask:linear-gradient(90deg,var(--bianco) 0 6px,transparent 6px calc(100% - 6px),var(--bianco) calc(100% - 6px))}
.strumento-cursore-pieno{position:absolute;left:50%;bottom:8px;width:6px;margin-left:-3px;border-radius:3px;
  height:calc(var(--pos) * (100% - 16px));background:var(--sfera-luce);box-shadow:0 0 8px rgba(145,191,227,.5)}
.strumento-cursore-tappo{position:absolute;left:50%;bottom:calc(var(--pos) * (100% - 16px));width:34px;height:16px;margin-left:-17px;
  border-radius:4px;background:linear-gradient(var(--bianco),var(--blu-velo) 55%,var(--blu-chiaro));
  box-shadow:0 3px 7px rgba(0,0,0,.5),inset 0 -1px 0 rgba(0,0,0,.2)}
.strumento-cursore-tappo::after{content:"";position:absolute;left:5px;right:5px;top:7px;height:2px;border-radius:1px;background:var(--navy)}
.strumento-cursore.caldo .strumento-cursore-pieno{background:var(--sfera-pensa);box-shadow:0 0 10px var(--sfera-pensa)}
.strumento-cursore.spento .strumento-cursore-pieno{background:var(--testo-debole);box-shadow:none}
.strumento-cursore:focus-visible .strumento-cursore-tappo{box-shadow:0 0 0 3px var(--sfera-pensa),0 3px 7px rgba(0,0,0,.5)}

/* la barra mobile orizzontale: la tacca segna il valore approvato */
.strumento-barra{--pos:0;--tacca:0;position:relative;display:block;height:26px;cursor:ew-resize;touch-action:none;outline:none}
.strumento-barra::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:5px;margin-top:-2.5px;border-radius:3px;background:var(--grigio-orlo)}
.strumento-barra-pieno{position:absolute;left:8px;top:50%;height:5px;margin-top:-2.5px;border-radius:3px;width:calc(var(--pos) * (100% - 16px));background:var(--blu-chiaro)}
.strumento-barra-tacca{position:absolute;top:3px;bottom:3px;width:2px;margin-left:-1px;left:calc(8px + var(--tacca) * (100% - 16px));background:var(--navy);opacity:.55;border-radius:1px}
.strumento-barra-tappo{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;left:calc(8px + var(--pos) * (100% - 16px));
  border-radius:50%;background:var(--bianco);border:2px solid var(--blu);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.strumento-barra.mossa .strumento-barra-pieno{background:var(--blu)}
.strumento-barra.mossa .strumento-barra-tappo{background:var(--blu);border-color:var(--navy)}
.strumento-barra:focus-visible .strumento-barra-tappo{box-shadow:0 0 0 3px var(--blu-chiaro)}

/* la manopola: la scala a tacche, l'arco del valore, il corpo che gira */
.strumento-manopola{--pos:.5;position:relative;display:grid;place-items:center;width:84px;height:84px;cursor:grab;touch-action:none;outline:none}
.strumento-manopola:active{cursor:grabbing}
.strumento-scala{position:absolute;inset:0;width:100%;height:100%}
.strumento-scala .strumento-tacca{stroke:var(--blu-chiaro);stroke-width:1.2;opacity:.6}
.strumento-scala .strumento-tacca.strumento-grande{stroke-width:2;opacity:.95}
.strumento-anello{position:absolute;inset:9px;border-radius:50%;
  background:conic-gradient(from -135deg,var(--sfera-pensa) 0 calc(var(--pos) * 270deg),rgba(255,255,255,.1) 0 270deg,transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 29px,var(--bianco) 30px 33px,transparent 34px);
  mask:radial-gradient(circle,transparent 29px,var(--bianco) 30px 33px,transparent 34px)}
.strumento-corpo{position:relative;width:52px;height:52px;border-radius:50%;transform:rotate(calc(-135deg + var(--pos) * 270deg));
  background:radial-gradient(circle at 34% 28%,var(--blu) 0%,var(--navy) 42%,var(--navy-scuro) 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.25),0 0 0 1px rgba(145,191,227,.3)}
.strumento-corpo::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:13px;margin-left:-1.5px;border-radius:2px;
  background:var(--sfera-pensa);box-shadow:0 0 6px var(--sfera-pensa)}
.strumento-manopola:focus-visible .strumento-corpo{box-shadow:0 0 0 3px var(--sfera-pensa),0 6px 14px rgba(0,0,0,.5)}

/* il quadrante: la scala, le zone, l'ombra del valore di confronto e la lancetta viva */
.strumento-quadrante{display:block;width:100%;height:auto;overflow:visible}
.strumento-quadrante .strumento-arco{fill:none;stroke:rgba(255,255,255,.1);stroke-width:12}
.strumento-quadrante .strumento-zona{fill:none;stroke:var(--parz);stroke-width:12;opacity:.6}
.strumento-quadrante .strumento-tacca{stroke:var(--blu-chiaro);stroke-width:1;opacity:.55}
.strumento-quadrante .strumento-tacca.strumento-grande{stroke-width:2.2;opacity:.95}
.strumento-quadrante .strumento-numero{fill:var(--blu-chiaro);font-family:var(--mono);font-size:10px;text-anchor:middle}
.strumento-quadrante .strumento-ombra,.strumento-quadrante .strumento-lancetta{transform-box:view-box;transform-origin:150px 150px}
.strumento-quadrante .strumento-ombra line{stroke:var(--blu-chiaro);stroke-width:4;stroke-linecap:round;opacity:.4}
.strumento-quadrante .strumento-lancetta{transition:transform .22s var(--stacco)}
.strumento-quadrante .strumento-lancetta line{stroke:var(--sfera-pensa);stroke-width:4;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(25,186,182,.8))}
.strumento-quadrante .strumento-perno{fill:var(--navy-scuro);stroke:var(--sfera-pensa);stroke-width:3}
@media (prefers-reduced-motion:reduce){ .strumento-quadrante .strumento-lancetta{transition:none} }

/* l'occhiello, e la testata chiara che resta al cruscotto di chi sta fuori (le librerie comuni delle
   richieste) e sotto la scena del Laboratorio. Le pagine del Digital Workplace usano `.cappello` */
.cappello-admin{background:var(--blu-velo);padding:clamp(28px,4vw,44px) 0 clamp(22px,3vw,30px)}
.cappello-admin h1{font-size:clamp(1.8rem,3.2vw,2.5rem);margin:8px 0 10px}
.cappello-admin .sotto{color:var(--testo-tenue);max-width:64ch;margin:0 0 22px}
.occhiello-blu{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blu)}

/* il ritorno delle pagine dentro un ramo: una riga sola, sopra il cappello della pagina */
.indietro{background:var(--bianco);border-bottom:var(--orlo);padding:8px 0}
.indietro .cmd-pillola{padding:5px 14px;font-size:.88rem}
@media print{.indietro{display:none}}
.area-barra{background:var(--grigio-velo);border-bottom:var(--orlo);padding:12px 0}
.area-barra .misura{display:grid;gap:8px;align-items:stretch;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.area-carta{display:flex;flex-direction:column;justify-content:center;background:#fff;
  border:var(--orlo);border-radius:var(--raggio-poco);padding:10px 14px;text-decoration:none;
  transition:.18s var(--stacco)}
.area-carta:hover{border-color:var(--blu-chiaro);box-shadow:var(--ombra)}
.area-carta b{display:block;color:var(--navy);font-size:.95rem}
.area-carta small{display:block;color:var(--testo-debole);font-size:.78rem;margin-top:1px}
.area-tipo{display:block;color:var(--testo-debole);font-size:.66rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;margin-bottom:2px}
.area-carta.area-qui{background:var(--blu-velo);border-color:var(--blu-chiaro);cursor:default}
/* il pallino: quante cose aspettano. Se è zero non c'è — un pallino con «0»
   insegna a non guardarlo. */
.area-quante{display:inline-block;margin-left:7px;min-width:19px;height:19px;line-height:19px;
  padding:0 5px;border-radius:10px;background:var(--no);color:var(--bianco);
  font-size:.74rem;font-weight:700;text-align:center;vertical-align:2px}

/* --- QUELLO CHE HAI GIÀ APERTO -------------------------------------------
   Non c'era nessuno stato «già visto»: in un elenco di venti voci non si
   sapeva dove si era già stati. `:visited` lo sa il browser, e non costa
   niente.
   ⛔ Il browser permette di cambiare SOLO i colori su `:visited`, e solo
      sull'elemento stesso: niente ombre, niente icone, niente sui figli.
   ⛔ E il segno dev'essere diverso da quello del passaggio del mouse, se no
      un elemento sotto il cursore sembra già aperto. */
.voce:visited{border-color:var(--blu-chiaro);background-color:var(--grigio-velo)}
.voce:visited:hover{background-color:var(--blu-nebbia)}
.tessera:visited{border-color:var(--blu-chiaro);background-color:var(--grigio-velo)}
.tessera:visited:hover{background-color:var(--bianco)}
.area-carta:visited{border-color:var(--blu-chiaro);background-color:var(--grigio-velo)}

/* --- I GRAFICI (moduli/grafici.mjs): SVG a mano, colori dai token. Stanno qui perché li usano più pagine: nel
   foglio di una pagina sola, chi li disegnava altrove li riceveva neri. */
.gr{margin:10px 0 0}
.gr svg{width:100%;height:auto;display:block}
.gr-griglia{stroke:var(--grigio);stroke-width:1}
.gr-asse{fill:var(--testo-debole);font-size:12px}
.gr-valore{fill:var(--navy);font-size:12px;font-weight:600}
.gr-barra.gr-s1,.gr-punto.gr-s1,.gr-chip.gr-s1{fill:var(--blu);background:var(--blu)}
.gr-barra.gr-s2,.gr-punto.gr-s2,.gr-chip.gr-s2{fill:var(--flusso-sesto);background:var(--flusso-sesto)}
.gr-barra.gr-s3,.gr-punto.gr-s3,.gr-chip.gr-s3{fill:var(--grigio);background:var(--grigio)}
.gr-linea{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.gr-linea.gr-s1{stroke:var(--blu)}.gr-linea.gr-s2{stroke:var(--flusso-sesto)}.gr-linea.gr-s3{stroke:var(--testo-debole)}
.gr-area{opacity:.14}
.gr-linea.gr-tratto{stroke-dasharray:7 6}
.gr-punto.gr-tratto{fill:var(--bianco);stroke-width:2}
.gr-punto.gr-tratto.gr-s2{stroke:var(--flusso-sesto)}
.gr-punto.gr-tratto.gr-s1{stroke:var(--blu)}
.gr-area.gr-s1{fill:var(--blu)}.gr-area.gr-s2{fill:var(--flusso-sesto)}.gr-area.gr-s3{fill:var(--grigio)}
.gr-testata{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;min-height:1.5em;margin:0 0 6px}
.gr-titolo{font-size:.9rem;font-weight:600;color:var(--navy)}
.gr-legenda{display:flex;flex-wrap:wrap;gap:14px;font-size:.84rem;color:var(--testo-debole)}
.gr-valore-p{font-size:10px;font-weight:600}
/* la STIMA in un colore che stacca dalla storia, dentro la tavolozza (il «parziale» ambrato) */
.gr-barra.gr-stima,.gr-punto.gr-stima,.gr-chip.gr-stima{fill:var(--parz);background:var(--parz)}
.gr-linea.gr-stima{stroke:var(--parz)}.gr-area.gr-stima{fill:var(--parz)}
.gr-chip{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
/* le forme nuove: tre colori in piu' dalla tavolozza, le celle della mappa di calore,
   le pendenze, le fette della ciambella */
.gr-barra.gr-s4,.gr-punto.gr-s4,.gr-chip.gr-s4,.gr-fetta.gr-s4,.gr-area.gr-s4{fill:var(--navy);background:var(--navy)}
.gr-barra.gr-s5,.gr-punto.gr-s5,.gr-chip.gr-s5,.gr-fetta.gr-s5,.gr-area.gr-s5{fill:var(--parz);background:var(--parz)}
.gr-barra.gr-s6,.gr-punto.gr-s6,.gr-chip.gr-s6,.gr-fetta.gr-s6,.gr-area.gr-s6{fill:var(--blu-chiaro);background:var(--blu-chiaro)}
.gr-fetta.gr-s1{fill:var(--blu)}.gr-fetta.gr-s2{fill:var(--flusso-sesto)}.gr-fetta.gr-s3{fill:var(--grigio)}
.gr-fetta{stroke:var(--bianco);stroke-width:2}
.gr-area-piena{opacity:.55}
.gr-cella.gr-s1{fill:var(--blu)}
.gr-cella-testo{fill:var(--navy);font-size:11px;font-weight:600}
.gr-asse-2{font-size:10.5px;fill:var(--navy)}
.gr-cella-chiaro{fill:var(--bianco)}
.gr-pend{stroke-width:2;opacity:.75}.gr-pend.gr-s1{stroke:var(--blu)}.gr-pend.gr-s2{stroke:var(--parz)}
.gr-linea.gr-s4{stroke:var(--navy)}.gr-linea.gr-s5{stroke:var(--parz)}.gr-linea.gr-s6{stroke:var(--blu-chiaro)}
/* due grafici affiancati: la riga della testata e' condivisa (subgrid), cosi' se un
   titolo va a capo l'altro grafico non sale: le linee di base restano allineate */
.gr-due{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px 24px}
.gr-due>div{display:contents}
.gr-due>div>figure.gr{display:grid;grid-template-rows:subgrid;grid-row:span 2;margin:0}
.gr-due>div>figure.gr .gr-testata{margin:0}
/* i cursori della stima */
.gr-cursori{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 24px;margin:10px 0 14px}
.gr-cursore label{display:flex;justify-content:space-between;font-size:.9rem;color:var(--testo)}
.gr-cursore label b{color:var(--navy)}
.gr-cursore input[type=range]{width:100%;accent-color:var(--blu);margin:6px 0 0}
.gr-cursore small{color:var(--testo-debole);font-size:.8rem}

/* ========================================================================
   I DOCUMENTI CHE ESCONO — la forma condivisa: testata con marchio e
   destinatario, piede con riservatezza e dati legali su ogni foglio, numero di pagina nel
   margine. In pagina la testata e il piede non si vedono: il portale intorno dice già dove
   si è. Si vedono solo in stampa, ed è lì che il documento diventa quello che si manda.
   ===================================================================== */
.doc-lettera, .doc-piede { display: none }
@media print {
  @page { size: A4; margin: 14mm 10mm 24mm;
    @bottom-right { content: counter(page) " / " counter(pages); font-size: 8pt; color: #777 } }
  .doc-lettera { display: block; margin: 0 0 18px; padding: 0 0 14px; border-bottom: 2px solid var(--blu) }
  .doc-logo { height: 56px; width: auto; display: block; margin-bottom: 14px }
  .doc-titolo { margin: 0 0 6px; font-size: 1.25rem; color: var(--navy) }
  .doc-oggetto { margin: 0 0 12px; display: grid; grid-template-columns: auto 1fr;
    gap: 2px 12px; font-size: .86rem; align-items: baseline }
  .doc-oggetto dt { color: var(--testo-tenue); text-transform: uppercase; letter-spacing: .04em; font-size: .68rem }
  .doc-oggetto dd { margin: 0; font-weight: 600; color: var(--navy) }
  .doc-a { margin: 0 0 12px; font-size: .9rem; line-height: 1.45 }
  .doc-spett { display: block; color: var(--testo-tenue); font-size: .8rem }
  .doc-codice { color: var(--testo-debole); font-size: .78rem }
  .doc-che { margin: 0 0 8px; font-size: .84rem; line-height: 1.45 }
  .doc-rif { margin: 0 0 10px; font-size: .84rem }
  .doc-firma { margin: 0; font-size: .74rem; color: var(--testo-debole) }
  .doc-piede { display: block; position: fixed; left: 0; right: 0; bottom: 0;
    padding-top: 4px; border-top: 1px solid var(--grigio-orlo); text-align: center; background: #fff }
  .doc-piede-ris { margin: 0 0 3px; font-size: .62rem; line-height: 1.35; color: var(--navy) }
  .doc-piede-legale { margin: 0; font-size: .55rem; line-height: 1.3; color: var(--testo-debole) }
}

/* --- LE VIDEOGUIDE — la fascia nelle testate, il lettore, la Home ----------
   Stanno qui perché compaiono in ogni pagina. Il colore del quartiere arriva col dato (--vg-colore). */
.vg-fascia{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.vg-fascia.vg-da-vedere{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
  border-left:4px solid var(--blu-chiaro);border-radius:var(--raggio);padding:14px 18px}
.vg-fascia-ico{width:42px;height:42px;border-radius:50%;background:var(--blu-chiaro);color:var(--navy);
  display:grid;place-items:center;flex-shrink:0}
.vg-fascia-testo{flex:1 1 320px;display:grid;gap:3px;color:#B6C7E2;font-size:.92rem}
.vg-fascia-testo b{color:#fff;font-size:1.05rem;font-weight:600}
.vg-fascia-cmd{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vg-fascia .cmd-pillola{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);color:#fff}
.vg-fascia .cmd-pillola:hover{background:rgba(255,255,255,.18);color:#fff}
.vg-fascia .vg-tutte{color:#B6C7E2;font-size:.86rem;text-decoration:underline;text-underline-offset:2px}
.vg-fascia .vg-tutte:hover{color:#fff}

.vg-lettore,.vg-benvenuto{border:0;border-radius:var(--raggio);padding:0;box-shadow:var(--ombra-su);
  background:var(--navy-scuro);color:#fff}
.vg-lettore::backdrop,.vg-benvenuto::backdrop{background:rgba(26,40,81,.72)}
.vg-lettore{width:min(1100px,94vw);max-height:94vh}
.vg-lettore-testa{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:16px 20px 12px;
  border-bottom:3px solid var(--vg-colore,var(--blu-chiaro))}
.vg-lettore-testa h2{margin:0;color:#fff;font-size:1.3rem;font-weight:600;flex:1 1 auto}
.vg-quartiere{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vg-colore,var(--blu-chiaro));width:100%}
.vg-lettore-conto{color:#B6C7E2;font-size:.9rem}
.vg-lettore .cmd-pillola{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);color:#fff}
.vg-lettore .cmd-pillola:hover{background:rgba(255,255,255,.18)}
.vg-schermo{background:#000;aspect-ratio:16/9;max-height:72vh;display:grid;place-items:center}
.vg-schermo video{width:100%;height:100%;display:block}
.vg-attesa,.vg-guasto{color:#B6C7E2;padding:24px;text-align:center}
.vg-modello{display:grid;justify-items:center;gap:12px;padding:24px;color:#B6C7E2;text-align:center}
.vg-lettore-piede{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 20px}
.vg-lettore-piede .vg-invito{box-shadow:0 0 0 4px rgba(145,191,227,.45)}
.vg-fine{color:#B6C7E2;font-size:.9rem}

.vg-benvenuto{width:min(560px,92vw);padding:30px 32px 26px;text-align:left}
.vg-benvenuto h2{color:#fff;margin:14px 0 10px;font-size:1.6rem;font-weight:300}
.vg-benvenuto p{color:#B6C7E2;margin:0 0 18px;line-height:1.5}
.vg-benvenuto-cmd{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.vg-benvenuto .cmd-pillola{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);color:#fff}
.vg-play{width:52px;height:52px;border-radius:50%;background:var(--blu-chiaro);color:var(--navy);
  display:grid;place-items:center;flex-shrink:0}

.vg-home{background:var(--blu-nebbia);border-bottom:var(--orlo);padding:18px 0}
.vg-home-dentro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px 32px;align-items:center}
.vg-home-video{flex-direction:row;align-items:center;gap:16px}
.vg-home-titolo{display:grid;gap:3px;flex:1}
.vg-home-titolo b{color:var(--navy);font-size:1.12rem}
.vg-home-titolo span{color:var(--testo-tenue);font-size:.9rem}
.vg-spunta{font-size:.78rem;font-weight:700;color:var(--ok);background:var(--ok-velo);border-radius:var(--raggio-tondo);padding:3px 10px}
.vg-home-strada p{margin:0 0 8px;color:var(--navy)}
.vg-home-cmd{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px !important}
.vg-home-cmd .cmd-riga{width:auto;padding:8px 10px;color:var(--blu);font-weight:600}
.vg-barra{height:8px;border-radius:var(--raggio-tondo);background:var(--grigio-velo);overflow:hidden}
.vg-barra span{display:block;height:100%;background:var(--blu);border-radius:inherit}
@media (max-width:760px){ .vg-home-dentro{grid-template-columns:1fr} }
/* la fascia sulle testate chiare, e in cima al contenuto delle pagine che una testata non l'hanno */
.vg-fascia.vg-chiara.vg-da-vedere{background:var(--blu-nebbia);border:var(--orlo);border-left:4px solid var(--blu)}
.vg-chiara .vg-fascia-testo{color:var(--testo-tenue)}
.vg-chiara .vg-fascia-testo b{color:var(--navy)}
.vg-chiara .vg-fascia-ico{background:var(--blu);color:#fff}
.vg-fascia.vg-chiara .cmd-pillola,.vg-fascia.vg-chiara .cmd-pillola:hover{background:#fff;border:var(--orlo);color:var(--testo-tenue)}
.vg-fascia.vg-chiara .cmd-pillola:hover{border-color:var(--blu-chiaro);color:var(--navy)}
.vg-fascia.vg-chiara .vg-tutte{color:var(--blu)}
/* l'area riservata: la barra in cima, con la videoguida e la guida scritta, sempre; finché i video non sono
   visti si fa vedere. Sta qui perché compare anche nelle pagine dell'area che non caricano i fogli dei
   contenuti (le richieste, il report). La parte dei video la mette il modulo dei video, in fila con la guida */
.cc-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.cc-barra-video{display:contents}
.cc-barra.cc-barra-viva{padding:12px 14px;background:var(--blu-velo);border:var(--orlo);border-left:4px solid var(--blu);
  border-radius:var(--raggio)}
.cc-barra-ico{display:inline-flex;color:var(--blu);flex:0 0 auto}
.cc-barra-testo{flex:1 1 260px;display:grid;gap:2px;font-size:.95rem;line-height:1.4}
.cc-barra-testo b{color:var(--navy)}
.cc-barra-testo span{font-size:.88rem;color:var(--testo-debole)}
.cc-barra .bottone svg{vertical-align:-.2em}
/* sopra una pagina senza testata (il report): lo spazio prima del titolo */
body > .misura > .cc-barra{margin:14px 0 22px}
#vg-in-cima .vg-fascia{margin:16px 0}
/* nelle testate delle aree il contenuto va in riga: la fascia da vedere prende tutta la larghezza */
.area-testa .vg-fascia.vg-da-vedere{flex-basis:100%}
.area-testa .vg-fascia{margin-top:6px}
/* da telefono «Come si usa» si chiude in una riga (moduli/cappello.mjs, compatta) */
.cu-apri{display:none}
@media (max-width:760px){
  .cappello .cu-apri{display:inline-flex;margin:0 0 10px;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);color:#fff}
  .cappello .comeusa.cu-chiuso{display:none}
}
/* la testata di una scheda (un'iniziativa, un intermediario): il nome è un h2, e le etichette restano chiare */
.cappello h2{color:#fff}
.cappello .in-vuoto{color:#B6C7E2}

/* --- LE PROVVIGIONI DI PARTENZA (moduli/provvigioni-partenza.mjs): un interruttore per gruppo o per canale */
.pp-pannello{background:#fff;border:var(--orlo);border-radius:var(--raggio);padding:16px 18px;margin:18px 0}
.pp-pannello h3{margin:0 0 6px;font-size:1.02rem;color:var(--navy)}
.pp-spiega{margin:0 0 12px;color:var(--testo-tenue);font-size:.88rem;max-width:90ch}
.pp-voci{display:flex;flex-wrap:wrap;gap:8px 18px}
.pp-voce{display:inline-flex;align-items:center;gap:7px;font-size:.92rem;color:var(--navy);cursor:pointer}
.pp-voce input[disabled]+span{color:var(--testo-tenue)}

/* --- I COLORI DELLE AREE (moduli/colori-aree.mjs mette `data-area` sul body e `--area` sulle tessere) ---
   L'area a tutto colore nella sua testata, come i riquadri di zurich.it; le pagine interne tengono la
   testata scura con la banda del colore dell'area; in Home ogni tessera porta il suo */
body[data-area] .area-testa{background:var(--area)}
body[data-area] .area-testa::before{display:none}
body[data-area] .area-testa h1,body[data-area] .area-testa .sotto,body[data-area] .area-testa .occhiello,
body[data-area] .area-testa .conta,body[data-area] .area-testa .conta b{color:var(--area-testo)}
body[data-area] .cappello{border-bottom:6px solid var(--area)}
body[data-area] .testata .menu a.qui::after{background:var(--area)}
a.tessera[data-area]{border-top:6px solid var(--area)}
a.tessera[data-area] .cerchio-ico{background:var(--area);color:var(--area-testo)}