/* ==========================================================================
   RC-3 · Portale VTS Advisor · advisor.viptravelscout.com
   Marcatore VIVO, da cercare DENTRO il corpo servito: RC22b-20260822
   (i precedenti restano scritti qui apposta: RC19A-20260821, RC13F-20260815,
   RC3F-20260808.
   ⛔ E QUELLI NON SONO IL CONTROLLO NEGATIVO, anche se la riga qui sopra lo
   diceva. Sono scritti IN QUESTO COMMENTO, quindi una sonda che cercasse
   RC19A-20260821 nel corpo servito lo troverebbe SEMPRE, anche sul file
   nuovo, e concluderebbe che il deploy non e' passato per la ragione
   sbagliata. Servono a leggere la storia, non a provare niente.
   Il controllo negativo vero e' una stringa che il file NON contiene, per
   esempio un marcatore mai usato. Corretto il 22-08 con RC-22, dopo aver
   trovato la stessa affermazione falsa in portal.js.)
   Foglio PROPRIO del portale. Non importa niente dal sito pubblico ne dal
   gestionale: il confine fra le tre applicazioni non e' un controllo, e' che
   questo dominio non ha i file degli altri da servire.
   ========================================================================== */
:root{
  --sfondo:#04101c; --pannello:#0b1f33; --pannello2:#0d2742;
  --bordo:rgba(255,255,255,.10); --bordo2:rgba(255,255,255,.18);
  --testo:#eaf0ff; --tenue:#9db0c8; --fioco:rgba(234,240,255,.55);
  --oro:#FFCC00; --oro-scuro:#1a1300;
  --ok:#3ddc97; --attesa:#8aa2be;
  --r:14px; --r2:999px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--sfondo); color:var(--testo);
  font-family:'Urbanist',-apple-system,'Segoe UI',system-ui,sans-serif;
  /* 17px: la regola di casa e' che l'occhio umano deve poter leggere. */
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.vp-wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ── Intestazione ─────────────────────────────────────────────────────── */
/* -webkit- PRIMA dello standard: senza, su Safari e su iOS la barra resta
   trasparente e il testo si legge sopra il contenuto che scorre. Il portale si
   apre soprattutto da telefono, e meta' dei telefoni e' Safari. */
.vp-top{position:sticky;top:0;z-index:20;background:rgba(4,16,28,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--bordo)}
.vp-top-in{display:flex;align-items:center;gap:18px;min-height:64px}
.vp-marchio{font-weight:800;letter-spacing:.02em;font-size:15px;white-space:nowrap}
.vp-marchio b{color:var(--oro)}
.vp-dom{color:var(--fioco);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.vp-nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.vp-nav a{display:inline-block;padding:8px 13px;border-radius:var(--r2);font-size:15px;font-weight:600;color:var(--tenue);text-decoration:none}
.vp-nav a:hover{color:var(--testo);background:rgba(255,255,255,.06)}
.vp-nav a[aria-current="page"]{color:var(--oro-scuro);background:var(--oro)}
.vp-esci{border:1px solid var(--bordo2);background:none;color:var(--tenue);border-radius:var(--r2);padding:7px 14px;font:inherit;font-size:14px;cursor:pointer}
.vp-esci:hover{color:var(--testo);border-color:var(--testo)}

/* ── Blocchi ──────────────────────────────────────────────────────────── */
.vp-sez{margin:28px 0}
.vp-h{font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:var(--fioco);margin:0 0 12px}
.vp-card{background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--r);padding:20px}
.vp-griglia{display:grid;gap:14px}
.vp-g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.vp-g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.vp-g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}

/* ── Metrica, con stato di attesa ─────────────────────────────────────── */
.vp-m{background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--r);padding:16px 18px}
.vp-m .et{font-size:12px;letter-spacing:.10em;text-transform:uppercase;color:var(--fioco)}
.vp-m .val{font-size:28px;font-weight:800;margin-top:6px;letter-spacing:-.01em}
.vp-m .sub{font-size:13px;color:var(--tenue);margin-top:4px}
/* Stato di attesa DICHIARATO. Mai un numero inventato: se il motore non calcola,
   si scrive che non calcola ancora. Stessa regola di Cortex e delle guide. */
.vp-attesa .val{font-size:19px;font-weight:700;color:var(--attesa)}
.vp-attesa .val::before{content:"◷ ";opacity:.8}

/* ── Percorso a gradini ───────────────────────────────────────────────── */
.vp-scala{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.vp-grad{border:1px solid var(--bordo);border-radius:var(--r);padding:14px;background:var(--pannello2)}
.vp-grad.qui{border-color:var(--oro);box-shadow:0 0 0 1px var(--oro) inset}
.vp-grad .n{font-weight:800;font-size:16px}
.vp-grad .p{color:var(--oro);font-weight:800;margin-top:6px;font-size:15px}
.vp-grad .r{color:var(--tenue);font-size:13px;margin-top:6px}
.vp-grad .p.att{color:var(--attesa);font-size:14px;font-weight:600}

/* ── Etichette ────────────────────────────────────────────────────────── */
.vp-tag{display:inline-block;padding:3px 11px;border-radius:var(--r2);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.vp-tag.oro{background:var(--oro);color:var(--oro-scuro)}
.vp-tag.vetro{background:rgba(255,255,255,.10);color:var(--testo)}
.vp-tag.ok{background:rgba(61,220,151,.16);color:var(--ok)}

/* ── Tabelle ──────────────────────────────────────────────────────────── */
.vp-tab-scroll{overflow-x:auto}
table.vp-t{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
table.vp-t th{text-align:left;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--fioco);font-weight:700;padding:9px 12px;border-bottom:1px solid var(--bordo)}
table.vp-t td{padding:12px;border-bottom:1px solid rgba(255,255,255,.06)}
table.vp-t tr:last-child td{border-bottom:none}

/* ── Moduli ───────────────────────────────────────────────────────────── */
.vp-campo{display:block;margin:0 0 14px}
.vp-campo span{display:block;font-size:13px;color:var(--tenue);margin-bottom:6px}
.vp-campo input{width:100%;padding:13px 14px;font:inherit;font-size:16px;color:var(--testo);
  background:rgba(255,255,255,.05);border:1px solid var(--bordo2);border-radius:10px}
.vp-campo input:focus{outline:none;border-color:var(--oro)}
.vp-btn{display:inline-block;width:100%;padding:14px 18px;font:inherit;font-size:16px;font-weight:800;
  color:var(--oro-scuro);background:var(--oro);border:none;border-radius:var(--r2);cursor:pointer}
.vp-btn[disabled]{opacity:.55;cursor:default}
.vp-msg{margin:14px 0 0;padding:13px 15px;border-radius:10px;font-size:15px;line-height:1.55}
.vp-msg.err{background:rgba(255,90,90,.10);border:1px solid rgba(255,90,90,.35)}
.vp-msg.ok{background:rgba(61,220,151,.10);border:1px solid rgba(61,220,151,.35)}
.vp-nota{color:var(--tenue);font-size:14px;line-height:1.6}
.vp-copia{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vp-copia code{background:rgba(255,255,255,.06);border:1px solid var(--bordo);border-radius:8px;padding:9px 12px;font-family:ui-monospace,'JetBrains Mono',monospace;font-size:14px;word-break:break-all}
.vp-copia button{border:1px solid var(--bordo2);background:none;color:var(--testo);border-radius:var(--r2);padding:9px 16px;font:inherit;font-size:14px;cursor:pointer}

/* ── Muro cortese ─────────────────────────────────────────────────────── */
.vp-centro{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.vp-box{width:100%;max-width:420px}
.vp-box h1{font-size:26px;margin:0 0 8px;letter-spacing:-.01em}
.vp-box p.intro{color:var(--tenue);margin:0 0 22px;font-size:15px}

/* ── Telefono: pari al desktop, non una versione ridotta ──────────────── */
@media (max-width:760px){
  body{font-size:16px}
  .vp-top-in{flex-wrap:wrap;gap:10px;padding:10px 0}
  .vp-nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .vp-nav a{white-space:nowrap}
  .vp-m .val{font-size:24px}
  .vp-card{padding:16px}
}

/* ==========================================================================
   RC-10 · DASHBOARD ADVISOR · 14-08-2026
   Modulo AGGIUNTO IN CODA. Non ridefinisce nessuna regola di sopra: le classi
   nascono tutte nuove, e le due che sarebbe stato comodo riusare — .vp-m e
   .vp-attesa — sono lasciate intatte apposta, perche' le produce metrica() in
   portal.js e le rendono anche Academy e Listino, che questo ticket non
   ridisegna. Anche .vp-wrap resta com'e': la larghezza maggiore arriva da un
   modificatore, non da una riscrittura.
   Tutto quello che segue vale solo dentro body.vp-dash o sotto un nome nuovo.
   ========================================================================== */
body.vp-dash{
  background:#06102a;
  background-image:
    radial-gradient(1500px 680px at 6% -12%,rgba(26,60,143,.44),transparent 58%),
    radial-gradient(1200px 560px at 98% 0%,rgba(198,161,91,.11),transparent 60%),
    radial-gradient(1000px 760px at 50% 110%,rgba(13,34,96,.58),transparent 62%);
  background-attachment:fixed;
  --oro2:#C6A15B; --oro3:#E7C983; --mut:#8FA0C9; --mut2:#5E6F99; --warn:#FFB020;
  /* RC-14: il blu di NEXUS. E' l'unico colore del riferimento che non era
     ancora in casa, e vive solo qui: il viola del riferimento NON si aggiunge,
     perche' li' serve a una cosa sola, il seme dei team, che questo ticket non
     costruisce. Un token senza il suo uso e' una dichiarazione, non una regola. */
  --blu:#5B8CFF;
  --vetro:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 62%);
  --vetro2:linear-gradient(158deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 60%);
  --orlo:rgba(255,255,255,.10); --orlo2:rgba(198,161,91,.34);
  --sfoca:blur(26px) saturate(150%);
  --ombra:0 22px 54px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.10);
  --ombra2:0 30px 70px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.16);
  --rr:24px;
}
.vp-wrap.vp-largo{max-width:1680px;padding:0 clamp(16px,3vw,44px) 90px}

/* La barra e' QUASI OPACA, non traslucida: traslucida, il titolo che le scorre
   sotto si legge attraverso. */
body.vp-dash .vp-top{background:rgba(8,18,44,.94);-webkit-backdrop-filter:blur(30px) saturate(160%);backdrop-filter:blur(30px) saturate(160%)}

/* -- Intestazione della persona -------------------------------------- */
.vp-io{background:var(--vetro2);border:1px solid var(--orlo2);border-radius:var(--rr);
  -webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);box-shadow:var(--ombra2);
  padding:clamp(22px,3vw,34px);margin:16px 0 22px;position:relative;overflow:hidden}
.vp-io::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 220px at 92% -12%,rgba(255,204,0,.11),transparent 70%)}
.vp-io .chi{display:flex;align-items:center;gap:13px;flex-wrap:wrap;position:relative}
.vp-io h1{margin:0;font-size:clamp(26px,3.4vw,36px);font-weight:900;letter-spacing:-.025em;line-height:1.05}
.vp-io .sotto{margin:14px 0 0;font-size:15px;font-weight:400;color:var(--mut);line-height:1.65;max-width:80ch;position:relative}
.vp-io .sotto b{color:var(--testo);font-weight:700}

/* -- Tooltip docente-alunno ------------------------------------------ */
/* Il bordo resta su --mut2: un bordo non e' testo, e a 3,34:1 un contorno si vede.
   Il segno dentro no: e' l'unica cosa da LEGGERE, e da RC-13 e' oro su oro tenue.
   Un cerchio grigio vuoto non si capisce che e' cliccabile, e chi non sa che c'e'
   una spiegazione non la cerca. */
.vp-tip{position:relative;display:inline-flex;width:19px;height:19px;border-radius:50%;
  border:1px solid var(--orlo2);color:var(--oro3);background:rgba(255,204,0,.09);
  font-size:12px;font-weight:900;
  align-items:center;justify-content:center;cursor:help;flex:none;transition:.2s}
.vp-tip:hover,.vp-tip:focus-visible{border-color:var(--oro);color:#123089;background:var(--oro);outline:none}
.vp-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(6px);background:rgba(8,18,44,.97);border:1px solid var(--orlo2);
  color:var(--testo);font-size:13px;font-weight:500;line-height:1.6;padding:14px 16px;border-radius:16px;
  width:min(340px,78vw);opacity:0;pointer-events:none;transition:.2s;z-index:80;text-align:left;
  box-shadow:0 22px 56px rgba(0,0,0,.65);white-space:pre-line;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.vp-tip:hover::after,.vp-tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}

/* -- I SEI RIQUADRI - quattro colonne, due larghi, uno per riga -------
   Griglia FISSA a quattro colonne e non auto-fit: con auto-fit il numero di
   colonne cambia con la larghezza e su certi schermi resta una card orfana in
   fondo. Sei card in due file da tre, sempre. */
.vp-quadri{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.vp-k{background:var(--vetro);border:1px solid var(--orlo);border-radius:var(--rr);
  -webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);box-shadow:var(--ombra);
  padding:22px 24px 21px;transition:.25s;position:relative;overflow:hidden;
  display:flex;flex-direction:column;min-height:186px}
.vp-k::before{content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent)}
.vp-k:hover{transform:translateY(-3px);box-shadow:var(--ombra2);border-color:var(--orlo2)}
.vp-k.larga{grid-column:span 2}
.vp-k .et{font-size:12px;letter-spacing:.15em;font-weight:700;color:var(--mut);
  text-transform:uppercase;display:flex;align-items:center;gap:8px;line-height:1.4}
.vp-k .val{font-size:clamp(32px,3.8vw,42px);font-weight:900;line-height:1;margin:14px 0 6px;letter-spacing:-.03em}
.vp-k .foot{font-size:14px;font-weight:400;color:var(--mut);line-height:1.5;margin-top:auto;padding-top:10px}
.vp-k .foot b{color:var(--mut);font-weight:700}

/* I QUATTRO VUOTI SONO QUATTRO COSE DIVERSE, e restano quattro classi.
   Non e' un riquadro solo con testo diverso: chi legge deve poter capire di
   che genere di vuoto si tratta senza leggere la frase. */

/* 1 - ATTESA: la cosa attesa non c'e' ancora, e nessuno la sta scrivendo. */
.vp-k.attesa{background:rgba(255,255,255,.022);border-style:dashed;border-color:rgba(143,160,201,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.vp-k.attesa::before{display:none}
.vp-k.attesa .et{color:var(--mut)}
.vp-k.attesa .val{font-size:0;margin:18px 0 10px;height:15px;border-radius:999px;width:64%;
  background:linear-gradient(90deg,rgba(143,160,201,.14) 25%,rgba(143,160,201,.32) 37%,rgba(143,160,201,.14) 63%);
  background-size:340% 100%;animation:vpOnda 2.2s ease-in-out infinite}
@keyframes vpOnda{0%{background-position:100% 0}100%{background-position:0 0}}

/* 2 - ZERO: cambia SOLO il colore, di proposito. Uno zero e' un dato, e deve
   avere la faccia di un dato. */
.vp-k.zero .val{color:var(--testo)}
.vp-k.zero .foot{color:var(--mut)}

/* 3 - FRASE: qui un numero non esiste, e uno zero direbbe un'altra cosa. */
.vp-k.frase{background:linear-gradient(158deg,rgba(61,220,151,.11),rgba(255,255,255,.015) 62%);
  border-color:rgba(61,220,151,.30)}
.vp-k.frase .val{font-size:clamp(21px,2.3vw,26px);font-weight:800;color:var(--ok);
  letter-spacing:-.015em;margin:16px 0 7px;line-height:1.25}
.vp-k.frase .foot{color:var(--mut)}
.vp-k.frase::after{content:"";position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,rgba(61,220,151,.16),transparent 70%);pointer-events:none}

/* 4 - NON LETTO: la fonte non ha risposto. NON e' attesa, perche' la cosa
   attesa c'e' ed e' in tabella, e non e' zero, perche' nessuno ha misurato
   zero. E' il caso in cui la scheda deve poter dire "non lo so" invece di
   "non e' successo". */
.vp-k.nonletto{background:linear-gradient(158deg,rgba(255,176,32,.13),rgba(255,176,32,.03) 62%);
  border-color:rgba(255,176,32,.34)}
.vp-k.nonletto .val{font-size:clamp(19px,2.1vw,23px);font-weight:800;color:var(--warn);
  letter-spacing:-.01em;margin:16px 0 7px;line-height:1.3}
.vp-k.nonletto .foot{color:var(--mut)}

/* PIENO */
.vp-k.pieno .val{color:var(--oro);text-shadow:0 0 34px rgba(255,204,0,.24)}

/* -- Anello: a che punto sei sui sette gradini, leggibile senza numeri - */
.vp-duecol{display:flex;gap:22px;align-items:center;margin-top:16px;flex:1}
.vp-duecol .testo{flex:1;min-width:0}
.vp-duecol .val{margin:0 0 4px}
.vp-anello{position:relative;width:112px;height:112px;flex:none}
.vp-anello svg{transform:rotate(-90deg);display:block}
.vp-anello .cen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.vp-anello .cen .n{font-size:22px;font-weight:900;color:var(--oro);line-height:1;letter-spacing:-.02em}
.vp-anello .cen .s{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--mut);text-transform:uppercase;margin-top:3px}

/* -- Barra verso il gradino dopo --------------------------------------
   TRATTEGGIATA e non vuota: una barra vuota direbbe "sei a zero", che e'
   un'altra cosa da "il passo esiste ma non e' misurabile". */
.vp-avanz{margin-top:14px}
.vp-avanz .cap{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;
  color:var(--mut);letter-spacing:.06em;text-transform:uppercase;margin-bottom:7px}
.vp-avanz .bin{height:9px;border-radius:999px;background:rgba(0,0,0,.34);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.vp-avanz .fil{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--oro2),var(--oro));box-shadow:0 0 18px rgba(255,204,0,.4)}
.vp-avanz .fil.tratteg{width:100%;background:repeating-linear-gradient(115deg,rgba(143,160,201,.16) 0 9px,rgba(143,160,201,.06) 9px 18px);box-shadow:none}

/* -- Istogramma a dodici colonne: la forma che AVRA' il dato ----------- */
.vp-mesi{display:flex;align-items:flex-end;gap:5px;height:56px;margin-top:16px}
.vp-mesi i{flex:1;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,rgba(143,160,201,.20),rgba(143,160,201,.05));
  animation:vpResp 2.6s ease-in-out infinite}
.vp-mesi i:nth-child(2n){animation-delay:.18s}
.vp-mesi i:nth-child(3n){animation-delay:.36s}
@keyframes vpResp{0%,100%{opacity:.5}50%{opacity:.9}}

/* -- Semiarco della rete ---------------------------------------------- */
.vp-semi{display:flex;justify-content:center;margin-bottom:6px}

/* -- Requisiti: un requisito raggiunto e uno mancante non hanno la stessa
   faccia, e "non lo so" ha la terza. ---------------------------------- */
.vp-req{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.vp-req li{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;line-height:1.5;color:var(--mut)}
.vp-req li .seg{flex:none;width:18px;height:18px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:900;margin-top:1px}
.vp-req li.fatto .seg{background:rgba(61,220,151,.18);color:var(--ok);border:1px solid rgba(61,220,151,.42)}
.vp-req li.fatto{color:var(--testo);font-weight:600}
.vp-req li.manca .seg{background:rgba(255,255,255,.06);color:var(--mut);border:1px solid var(--orlo)}
.vp-req li.ignoto .seg{background:rgba(255,176,32,.14);color:var(--warn);border:1px dashed rgba(255,176,32,.44)}
.vp-req li b{color:var(--testo);font-weight:700}

/* -- Sezioni e riquadri larghi ---------------------------------------- */
.vp-titolo{font-size:12px;letter-spacing:.18em;font-weight:800;color:var(--mut);
  text-transform:uppercase;margin:0 0 13px;display:flex;align-items:center;gap:9px}
.vp-box{background:var(--vetro);border:1px solid var(--orlo);border-radius:var(--rr);
  -webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);box-shadow:var(--ombra);
  padding:clamp(18px,2.2vw,24px);margin-bottom:34px}
.vp-due{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px}
.vp-due .vp-box{margin:0;height:100%}

/* -- Link personale ---------------------------------------------------
   RC-13: IL VUOTO NON ERA DELLA CARD, ERA DEL SUO CONTENUTO. La card e' a
   piena larghezza e lo e' sempre stata; dentro, due elementi che si
   dimensionano sul proprio contenuto lasciavano scoperti quattro quinti della
   riga. Il campo ora CRESCE e il bottone resta della sua misura: un indirizzo
   da copiare che occupa la riga si legge come un campo, uno che finisce dopo
   un terzo si legge come una card rimasta a meta'.
   Il `flex-basis` a 320px non e' una larghezza: e' la soglia sotto la quale il
   bottone va a capo invece di stringere il campo fino a spezzare l'indirizzo. */
.vp-riga-link{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.vp-link-val{flex:1 1 320px;min-width:0;
  font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:600;
  background:rgba(0,0,0,.30);border:1px solid var(--orlo);border-radius:13px;padding:13px 17px;
  color:var(--mut);min-height:44px;display:inline-flex;align-items:center;word-break:break-all}
.vp-btn2{background:var(--oro);color:#06102a;border:0;border-radius:13px;padding:0 24px;height:44px;
  font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;transition:.2s}
.vp-btn2:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(255,204,0,.26)}
.vp-btn2:disabled{background:rgba(255,255,255,.07);color:var(--mut);cursor:not-allowed;transform:none;box-shadow:none}
.vp-avviso{margin-top:18px;padding:16px 18px;border-radius:16px;
  background:linear-gradient(158deg,rgba(255,176,32,.13),rgba(255,176,32,.03));
  border:1px solid rgba(255,176,32,.28);font-size:14px;font-weight:400;color:var(--mut);line-height:1.65}
.vp-avviso b{color:var(--warn);font-weight:800}

/* -- LA TRACCIA DELLA SCALA - griglia SEPARATA dalle card -------------
   I nodi non stanno dentro le card: con altezze diverse finirebbero a quote
   diverse e la linea sembrerebbe rotta. Il nodo non deve stare dentro cio'
   che puo' cambiare altezza. Sette colonne, non sei. */
.vp-g7{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.vp-traccia{position:relative;height:30px;margin-bottom:2px}
.vp-traccia::before{content:"";position:absolute;left:7%;right:7%;top:14px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--oro) 0%,var(--oro2) 15%,rgba(143,160,201,.22) 32%,rgba(143,160,201,.10) 100%)}
.vp-traccia .vp-g7{position:relative;height:30px;align-items:center}
.vp-nodo{width:12px;height:12px;border-radius:50%;justify-self:center;background:#06102a;
  border:2px solid rgba(143,160,201,.36);z-index:2}
.vp-nodo.qui{width:20px;height:20px;background:var(--oro);border:3px solid #06102a;
  box-shadow:0 0 0 5px rgba(255,204,0,.20),0 0 26px rgba(255,204,0,.45)}
.vp-passo{background:var(--vetro);border:1px solid var(--orlo);border-radius:20px;
  -webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);box-shadow:var(--ombra);
  padding:17px 16px 18px;transition:.25s;display:flex;flex-direction:column}
.vp-passo:hover{transform:translateY(-3px);border-color:var(--orlo2);box-shadow:var(--ombra2)}
.vp-passo .nome{font-size:15px;font-weight:800;display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1.3}
/* ⚠️ QUESTA E' L'UNICA RIGA CHE PUO' TENERE --mut2 COME TESTO, E NON E' UNA SVISTA.
   RC-13 ha tolto quel grigio da dieci regole su undici perche' su fondo card sta a
   3,34:1, sotto il minimo di 4,5:1. Qui no: 27px in peso 900 e' TESTO GRANDE, la cui
   soglia e' 3,00, e 3,34 la supera. Cambiarlo sarebbe una correzione senza un difetto
   sotto. Se un giorno questa misura scende sotto i 18,66px in grassetto o sotto i 24px
   normali, la soglia torna 4,5:1 e allora il colore va cambiato davvero: la condizione
   non e' il selettore, e' la dimensione. */
.vp-passo .pc{font-size:27px;font-weight:900;color:var(--mut2);margin:11px 0 3px;letter-spacing:-.03em;line-height:1}
.vp-passo .rq{font-size:13px;font-weight:400;color:var(--mut);line-height:1.5;margin-top:auto;padding-top:8px}
.vp-passo.qui{background:linear-gradient(158deg,rgba(255,204,0,.16),rgba(255,255,255,.03) 64%);
  border:1.5px solid var(--oro);
  box-shadow:0 0 0 5px rgba(255,204,0,.08),0 26px 60px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.18)}
.vp-passo.qui .nome{font-size:16px;color:var(--oro)}
.vp-passo.qui .pc{font-size:34px;color:var(--oro);text-shadow:0 0 30px rgba(255,204,0,.30)}
.vp-passo.qui .rq{color:var(--mut)}
.vp-quitag{display:inline-block;background:var(--oro);color:#06102a;font-size:12px;font-weight:900;
  letter-spacing:.14em;padding:4px 11px;border-radius:999px;margin-bottom:9px;align-self:flex-start}
.vp-scala-nota{font-size:14px;font-weight:400;color:var(--mut);line-height:1.7;margin-top:22px;max-width:88ch}
.vp-scala-nota b{color:var(--testo);font-weight:700}
.vp-scala2{margin-bottom:34px}

/* -- Righe delle regole di pagamento ---------------------------------- */
.vp-rig{display:flex;gap:12px;align-items:flex-start;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.06);font-size:14px;font-weight:400;color:var(--mut);line-height:1.6}
.vp-rig:last-child{border:0;padding-bottom:0}
.vp-rig .pin{width:7px;height:7px;border-radius:50%;background:var(--oro2);margin-top:9px;flex:none;
  box-shadow:0 0 12px rgba(198,161,91,.5)}
.vp-rig b{color:var(--testo);font-weight:700}
.vp-rig.forte{color:var(--testo);font-weight:600}
.vp-rig.forte .pin{background:var(--ok);box-shadow:0 0 14px rgba(61,220,151,.6)}

/* -- Il percorso di uno stato, con le sole etichette dell'Advisor ------ */
.vp-flusso{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.06)}
.vp-flusso .tappa{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--orlo);color:var(--mut)}
.vp-flusso .tappa.ultima{background:rgba(61,220,151,.14);border-color:rgba(61,220,151,.34);color:var(--ok)}
.vp-flusso .verso{color:var(--mut);font-size:14px;font-weight:700;flex:none}

/* -- Vuoto della rete ------------------------------------------------- */
.vp-vuoto{text-align:center;padding:26px 20px}
.vp-vuoto .n{font-size:40px;font-weight:900;letter-spacing:-.03em;line-height:1}
.vp-vuoto .t{font-size:14px;font-weight:400;color:var(--mut);margin-top:10px;line-height:1.6}

/* -- Telefono --------------------------------------------------------- */
@media (max-width:1240px){
  .vp-quadri{grid-template-columns:repeat(2,1fr)}
  .vp-k.larga{grid-column:span 2}
  .vp-g7{grid-template-columns:repeat(4,1fr)}
  .vp-traccia{display:none}
}
@media (max-width:760px){
  body.vp-dash .vp-top{position:static}
  .vp-quadri{grid-template-columns:1fr;gap:13px}
  .vp-k,.vp-k.larga{grid-column:span 1;min-height:0;padding:19px 20px}
  .vp-duecol{flex-direction:column;align-items:flex-start;gap:16px}
  .vp-anello{align-self:center}
  .vp-g7{grid-template-columns:1fr;gap:11px}
  .vp-passo .pc,.vp-passo.qui .pc{font-size:29px}
  .vp-link-val,.vp-btn2{width:100%;justify-content:center}
  .vp-tip::after{left:0;transform:translateX(0) translateY(6px);width:min(300px,86vw)}
  .vp-tip:hover::after,.vp-tip:focus-visible::after{transform:translateX(0) translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .vp-k.attesa .val,.vp-mesi i{animation:none}
  .vp-k:hover,.vp-passo:hover{transform:none}
}

/* ==========================================================================
   RC-14 · IL PAVIMENTO TIPOGRAFICO · 16-08-2026
   ⚠️ NESSUN TESTO SOTTO 12px IN QUESTO FOGLIO, pastiglie comprese.
   Non e' un'opinione sul gusto: e' l'unica soglia che soddisfa entrambe le
   regole scritte che avevamo. Erano tre e non lo sapeva nessuno:
     11,5px  il pavimento del portale dopo RC-13
     12px    il README del riferimento v3, "testi mai sotto 12px"
     10,5px  come il riferimento e' scritto DAVVERO, che viola il proprio
             README otto volte: quelle otto sono difetti, non scelte.
   12px non viola niente. 11,5px avrebbe violato il README, e sarebbe tornato
   in discussione al primo che lo rilegge, quando non ci sara' piu' nessuno a
   ricordare perche' era stato scelto.
   ⚠️ E NON SI FANNO ECCEZIONI PER LE PASTIGLIE. L'argomento "e' in grassetto
   su fondo oro, si legge lo stesso" e' vero e NON E' VERIFICABILE: un
   pavimento vale perche' chiunque puo' misurarlo senza discutere, e
   un'eccezione fondata su quanto una cosa SEMBRA leggibile, la volta dopo si
   allarga perche' non ha un bordo che qualcuno possa indicare.
   Se a 12px una pastiglia sta stretta, CRESCE LA PASTIGLIA, non cala il testo.
   ========================================================================== */

/* ==========================================================================
   RC-13 · FONDAMENTI · 15-08-2026
   Modulo AGGIUNTO IN CODA. Non ridefinisce nessuna regola di sopra: le tre
   cose qui dentro non esistevano affatto, e la loro assenza si vedeva.
   ========================================================================== */

/* -- 1 · IL LIVELLO DI TESTO CHE MANCAVA ------------------------------------
   La scala dei colori di testo ha TRE livelli, e il portale ne aveva due:
   #EAF0FF primario e #8FA0C9 terziario. In mezzo non c'era niente, e il testo
   di lettura finiva sul terziario, che e' il piu' fioco dei tre.
   Contrasto MISURATO su fondo card (vetro .055 su #06102a), non stimato:
     #EAF0FF 14,62   #B4C2E4 9,36   #8FA0C9 6,39   #5E6F99 3,34 BOCCIATO
   Il quarto resta, ma solo per bordi, nodi e separatori. */
body.vp-dash{ --mut15:#B4C2E4 }

/* Il paragrafo che spiega la pagina e' testo da LEGGERE, non una didascalia:
   sale al livello di mezzo. E' l'unico uso del token, ed e' voluto: un token
   che nessuno usa e' una dichiarazione, non una regola. */
.vp-io .sotto{color:var(--mut15)}

/* -- 2 · I CONTROLLI DI MODULO NON EREDITANO IL COLORE -----------------------
   Un <button> o un <select> senza `color` dichiarato non prende il colore del
   testo intorno: prende il NERO DI SISTEMA. Non e' un caso limite, e' il
   comportamento predefinito del browser, e si vede solo quando qualcuno guarda
   quel controllo su fondo scuro. Va dichiarato una volta per tutte e non
   controllo per controllo, altrimenti il prossimo controllo nuovo ricomincia
   dal nero.

   ⛔ MA COSI' COM'ERA SPEGNEVA I COLORI GIA' DICHIARATI. `body.vp-dash button`
   pesa (0,1,2) e `.vp-btn2` pesa (0,1,0): la difesa vinceva sulla regola che
   il colore lo aveva gia' messo bene. Effetto misurato il 21-08 su resa vera:
   il pulsante oro rendeva #EAF0FF su #FFCC00, cioe' 1,33:1 - quasi bianco su
   giallo - in TUTTE le pagine del portale, non in una.
   ⚠️ Le due regole erano ENTRAMBE GIUSTE. Una difende dal nero di sistema,
   l'altra sceglie il colore sull'oro; il difetto non stava in nessuna delle
   due ma nel loro incrocio, ed e' per questo che nessuno lo ha visto
   rileggendo l'una o l'altra.

   LA CORREZIONE E' STRUTTURALE E NON PUNTUALE: `:where()` vale ZERO, quindi
   questa regola batte ancora il predefinito del browser - che e' l'unica cosa
   da cui doveva difendere - ma perde contro QUALUNQUE classe che dichiari un
   colore. Aggiungere `color` a .vp-btn2 con piu' peso avrebbe riparato un
   pulsante e lasciato gli altri due; questo ripara la regola.
   📌 Il prossimo controllo che dichiara un colore funzionera' senza sapere
   che questa riga esiste. */
:where(body.vp-dash) :where(button, input, select, textarea, optgroup){font-family:inherit;color:var(--testo)}

/* -- 3 · IL MENU A TENDINA DI SISTEMA ---------------------------------------
   Un <select> non stilizzato disegna la freccia e il fondo con i colori del
   sistema operativo: su questa pagina diventa una scheggia chiara in mezzo al
   navy, e su Windows in tema scuro diventa illeggibile. La freccia qui e'
   disegnata in CSS, quindi e' oro come tutto il resto e non dipende da come
   e' configurato il computer di chi guarda. */
body.vp-dash select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-color:rgba(0,0,0,.30);
  background-image:linear-gradient(45deg,transparent 50%,var(--oro) 50%),
                   linear-gradient(135deg,var(--oro) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  border:1px solid var(--orlo);border-radius:13px;
  padding:13px 42px 13px 17px;min-height:44px;
  font-size:15px;font-weight:600;cursor:pointer}
body.vp-dash select:focus-visible{outline:none;border-color:var(--oro2)}
/* Le voci aperte le disegna il sistema e non si possono stilizzare del tutto:
   il fondo esplicito e' il massimo che regge su tutti i browser. */
body.vp-dash select option{background:#0a1836;color:var(--testo)}

/* ==========================================================================
   RC-14 · A6 · NESSUNA RIGA SEPARATRICE LUNGA · 16-08-2026
   Il riferimento v3 lo dice per tutto il portale: al posto delle hairline si
   usano FONDI e SPAZIATURA. Una riga da un bordo all'altro divide lo spazio
   anche dove non c'e' niente da dividere, e a schermo stretto diventa il
   segno piu' marcato della pagina.

   ⚠️ SCAVALCATO DENTRO body.vp-dash, NON RISCRITTO NEL FOGLIO BASE.
   Tre dei quattro separatori vivono in `table.vp-t`, che rendono anche
   Academy, Listino e la vista amministratore: pagine che questo ticket non
   ridisegna. Riscrivere la regola condivisa le cambierebbe tutte per un
   ticket che non le ha nemmeno guardate.
   📌 A6 sulle altre pagine resta APERTA, per il ticket che le ridisegna.

   ⚠️ IL BORDO DI .vp-top NON E' UN SEPARATORE E RESTA. Divide cio' che sta
   fermo da cio' che scorre sotto: senza, il contenuto passa dietro la barra
   senza che si veda dove finisce l'una e comincia l'altro. */

/* Righe di tabella: il fondo al posto della riga. */
body.vp-dash table.vp-t th{border-bottom:0;padding-bottom:6px}
body.vp-dash table.vp-t td{border-bottom:0;padding:13px 12px;background:rgba(6,16,42,.35)}
body.vp-dash table.vp-t tr td:first-child{border-radius:12px 0 0 12px}
body.vp-dash table.vp-t tr td:last-child{border-radius:0 12px 12px 0}
/* La separazione fra righe e' lo SPAZIO fra i fondi, non una linea. */
body.vp-dash table.vp-t{border-collapse:separate;border-spacing:0 5px}

/* Regole di pagamento: spazio al posto della riga. */
body.vp-dash .vp-rig{border-bottom:0;padding:11px 14px;border-radius:12px;
  background:rgba(6,16,42,.35);margin-bottom:5px}
body.vp-dash .vp-rig:last-child{margin-bottom:0}

/* Il percorso di uno stato: il distacco lo fa il margine. */
body.vp-dash .vp-flusso{border-top:0;margin-top:20px;padding-top:0}

/* ==========================================================================
   RC-14 · A1 · L'INTESTAZIONE, CON OCCHIELLO E ANELLO
   Nel riferimento la percentuale NON e' una delle card dei numeri: sta
   nell'intestazione, grande, accanto all'anello. E' una scelta di gerarchia e
   non di spazio: quella cifra e' l'unica che la persona ha in testa quando
   apre la pagina, e cercarla fra sei riquadri uguali la mette alla pari di
   quante pratiche ha aperto. */
.vp-occhiello{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--oro3);margin-bottom:11px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.vp-io-due{display:flex;gap:clamp(20px,4vw,44px);align-items:center;justify-content:space-between;flex-wrap:wrap}
.vp-io-sx{flex:1 1 340px;min-width:0}
.vp-io-dx{flex:0 0 auto;display:flex;align-items:center;gap:18px}
.vp-pctgrande{font-size:clamp(40px,5.4vw,56px);font-weight:900;letter-spacing:-.035em;
  line-height:1;color:var(--oro);text-shadow:0 0 40px rgba(255,204,0,.22)}
.vp-pctsotto{font-size:14px;font-weight:600;color:var(--mut);margin-top:7px;line-height:1.5}
.vp-pctdopo{font-size:13px;font-weight:600;color:var(--mut15);margin-top:9px;line-height:1.5}
.vp-pctdopo b{color:var(--oro3);font-weight:800}

/* ==========================================================================
   RC-14 · A2 · NEXUS
   ⚠️ LA FONTE SOTTO OGNI CONSIGLIO NON E' UN ORNAMENTO. E' la differenza fra
   un suggerimento e un'affermazione: chi legge deve poter risalire alla
   tabella da cui viene, e un consiglio senza fonte calcolabile NON SI MOSTRA.
   Il posto per la fonte esiste nel disegno proprio perche' un consiglio senza
   non ci sta dentro. */
.vp-nexus{background:linear-gradient(150deg,rgba(91,140,255,.15),rgba(13,34,96,.60));
  border:1px solid rgba(91,140,255,.32);border-radius:var(--rr);
  -webkit-backdrop-filter:var(--sfoca);backdrop-filter:var(--sfoca);
  box-shadow:var(--ombra);padding:clamp(20px,2.4vw,26px);margin-bottom:22px}
.vp-nx-capo{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.vp-nx-bollo{width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:rgba(91,140,255,.18);border:1px solid rgba(91,140,255,.42)}
.vp-nx-bollo svg{width:20px;height:20px;stroke:var(--blu);stroke-width:2.1;fill:none}
.vp-nx-nome{font-size:17px;font-weight:900;letter-spacing:.06em}
.vp-nx-sotto{font-size:13.5px;font-weight:600;color:var(--mut15);margin-top:2px}
.vp-nx-elenco{display:flex;flex-direction:column;gap:12px}
.vp-nx-voce{background:rgba(6,16,42,.52);border:1px solid var(--orlo);border-radius:18px;
  padding:16px 18px;display:flex;gap:14px;align-items:flex-start;transition:.24s}
.vp-nx-voce:hover{border-color:rgba(91,140,255,.40);background:rgba(6,16,42,.74)}
.vp-nx-pallino{width:10px;height:10px;border-radius:50%;margin-top:7px;flex:none}
.vp-nx-pallino.alta{background:var(--warn);box-shadow:0 0 0 5px rgba(255,176,32,.14)}
.vp-nx-pallino.media{background:var(--blu);box-shadow:0 0 0 5px rgba(91,140,255,.14)}
.vp-nx-pallino.bassa{background:var(--mut2);box-shadow:0 0 0 5px rgba(94,111,153,.16)}
.vp-nx-testo{flex:1;min-width:0}
.vp-nx-frase{font-size:15.5px;font-weight:600;line-height:1.5;color:var(--testo)}
.vp-nx-frase b{font-weight:900;color:var(--oro3)}
.vp-nx-fonte{font-size:12.5px;font-weight:600;color:var(--mut);margin-top:9px;
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;line-height:1.5}
.vp-nx-fonte code{font-family:ui-monospace,'JetBrains Mono',monospace;font-weight:700;
  color:var(--mut15);background:rgba(6,16,42,.7);border:1px solid var(--orlo);
  padding:2px 7px;border-radius:7px;font-size:12px}
.vp-nx-piede{margin-top:16px;padding-top:14px;font-size:13px;font-weight:600;
  color:var(--mut);line-height:1.6}
@media (max-width:640px){
  .vp-nx-voce{flex-direction:column;gap:9px}
  .vp-io-dx{width:100%}
}

/* ==========================================================================
   RC-14 · PARTE B · PROFILO E SICUREZZA · 16-08-2026
   ========================================================================== */

/* -- La foto, e il suo ripiego ----------------------------------------------
   ⚠️ LE INIZIALI NON SONO UN SEGNAPOSTO PROVVISORIO. Una URL firmata scade, e
   una foto che non arriva deve ricadere su qualcosa che e' SEMPRE VERO, non
   su un quadratino rotto. Le iniziali sono il "non lo so" delle immagini:
   hanno la stessa forma, la stessa misura e non mentono. */
.vp-fotorow{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;margin-bottom:26px}
.vp-foto{width:96px;height:96px;border-radius:28px;flex:none;object-fit:cover;
  border:1px solid var(--orlo2);background:rgba(6,16,42,.5)}
.vp-foto-ini{display:grid;place-items:center;font-size:34px;font-weight:900;
  letter-spacing:-.02em;color:var(--oro3);
  background:linear-gradient(150deg,rgba(198,161,91,.28),rgba(26,60,143,.5))}
.vp-foto-testo{flex:1 1 300px;min-width:0}
.vp-campo-et{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* -- I campi ---------------------------------------------------------------- */
.vp-campi{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.vp-campo2{display:block}
.vp-campo2 > span{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.vp-campo2 input,.vp-campo2 select{width:100%;background:rgba(6,16,42,.6);
  border:1px solid var(--orlo);border-radius:13px;padding:13px 16px;
  color:var(--testo);font-family:inherit;font-size:15px;font-weight:600;min-height:44px}
.vp-campo2 input:focus-visible,.vp-campo2 select:focus-visible{outline:none;border-color:var(--oro2)}
.vp-campo2 em{display:block;font-style:normal;margin-top:8px}

/* -- Il bottone secondario --------------------------------------------------
   Contorno e non pieno: in una scheda dove ogni riga ha un'azione, cinque
   bottoni pieni griderebbero tutti allo stesso modo e nessuno direbbe quale
   conta. Il pieno resta a "Salva", che e' l'unico che chiude un lavoro. */
.vp-btn3{background:transparent;border:1px solid var(--orlo2);color:var(--oro3);
  border-radius:999px;padding:0 18px;min-height:44px;font-family:inherit;
  font-size:14px;font-weight:800;cursor:pointer;transition:.2s;white-space:nowrap}
.vp-btn3:hover{background:var(--oro);color:#123089;border-color:var(--oro)}

/* -- Le righe di Sicurezza --------------------------------------------------
   Fondo e spazio al posto della riga separatrice, come A6 chiede ovunque. */
.vp-sec2{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;background:rgba(6,16,42,.35);border-radius:16px;
  padding:16px 18px;margin-bottom:10px}
.vp-sec2:last-child{margin-bottom:0}
.vp-sec2-t{flex:1 1 320px;min-width:0}
.vp-sec2-t b{display:block;font-size:15.5px;font-weight:800;margin-bottom:5px}
.vp-sec2-a{flex:none;display:flex;align-items:center;gap:10px}

/* ==========================================================================
   RC-14 · PARTE C · ASSISTENZA · 16-08-2026
   ========================================================================== */
.vp-tk{background:rgba(6,16,42,.35);border-radius:18px;padding:18px 20px;margin-bottom:12px}
.vp-tk:last-child{margin-bottom:0}
.vp-tk-capo{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.vp-tk-capo b{font-size:16px;font-weight:800}
.vp-tk-msg{display:flex;flex-direction:column;gap:9px;margin-top:14px}

/* Le bolle: le mie a destra, le loro a sinistra. Non e' decorazione, e' la
   cosa che rende leggibile una conversazione senza doverne leggere i nomi. */
.vp-bolla{max-width:78%;align-self:flex-start;background:var(--vetro2);
  border:1px solid var(--orlo);border-radius:16px 16px 16px 5px;padding:11px 15px}
.vp-bolla.mia{align-self:flex-end;border-radius:16px 16px 5px 16px;
  background:linear-gradient(150deg,rgba(255,204,0,.15),rgba(13,34,96,.6));border-color:var(--orlo2)}
.vp-bolla .chi{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--mut);margin-bottom:4px}
.vp-bolla .testo{font-size:15px;font-weight:600;line-height:1.55;color:var(--testo);white-space:pre-line}

.vp-risp{flex:1 1 240px;min-width:0;background:rgba(6,16,42,.6);border:1px solid var(--orlo);
  border-radius:13px;padding:12px 15px;color:var(--testo);font-family:inherit;
  font-size:15px;font-weight:600;min-height:44px}
.vp-risp:focus-visible{outline:none;border-color:var(--oro2)}

/* Il testo lungo del modulo: stessa forma degli altri campi. */
.vp-campo2 textarea{width:100%;background:rgba(6,16,42,.6);border:1px solid var(--orlo);
  border-radius:13px;padding:13px 16px;color:var(--testo);font-family:inherit;
  font-size:15px;font-weight:600;line-height:1.6;resize:vertical}
.vp-campo2 textarea:focus-visible{outline:none;border-color:var(--oro2)}

/* I toni delle pastiglie di stato. `warn` dice CHI DEVE MUOVERSI, e non e' un
   allarme: "attende te" e' un'informazione, non un rimprovero. */
.vp-tag.warn{background:rgba(255,176,32,.16);color:var(--warn)}
.vp-tag.blu{background:rgba(91,140,255,.16);color:var(--blu)}

/* -- C3 · il menu sotto il nome --------------------------------------------
   In alto a destra e non in barra: nove voci in fila diventerebbero
   illeggibili proprio mentre si cerca di semplificare. */
.vp-menu-io{position:relative;flex:none}
.vp-menu-b{width:38px;height:38px;border-radius:12px;cursor:pointer;
  background:linear-gradient(150deg,rgba(198,161,91,.28),rgba(26,60,143,.5));
  border:1px solid var(--orlo2);color:var(--oro3);
  font-family:inherit;font-size:13px;font-weight:900;letter-spacing:.02em}
.vp-menu-b:hover{border-color:var(--oro)}
.vp-menu{position:absolute;top:46px;right:0;z-index:70;min-width:238px;
  background:#0a1836;border:1px solid var(--orlo2);border-radius:16px;padding:8px;
  box-shadow:0 20px 50px rgba(0,0,0,.6)}
.vp-menu[hidden]{display:none}
.vp-menu a,.vp-menu button{display:block;width:100%;text-align:left;
  font-family:inherit;font-size:14.5px;font-weight:700;color:var(--mut15);
  background:transparent;border:0;padding:11px 13px;border-radius:11px;
  cursor:pointer;text-decoration:none}
.vp-menu a:hover,.vp-menu button:hover{background:rgba(143,160,201,.12);color:var(--testo)}
.vp-menu hr{border:0;border-top:1px solid var(--orlo);margin:6px 4px}
/* Il bottone Esci resta anche in barra su schermo largo: il menu lo raddoppia
   di proposito, perche' su telefono la barra si comprime e quello sparisce. */
@media (max-width:760px){ .vp-esci{display:none} }

/* ══════════════════════════════════════════════════════════════════════
   LARGHEZZA · l'advisor segue il portale pubblico, non il mockup
   misurato il 21-08-2026 · decisione L0
   ══════════════════════════════════════════════════════════════════════
   ⛔ DUE DIFETTI DIVERSI, e uno era anche nella prima stesura di questa
   patch.

   1 · LE CARD VOLANTI.  .vp-box { max-width:420px }  in portal.css
       Quattro blocchi a 420px in un contenitore da 1592, con 1.216
       pixel di vuoto a destra contro i 44 di tutti gli altri sei.
       Non sono card mal disegnate: sono card BLOCCATE A UNA LARGHEZZA
       DA TELEFONO su uno schermo da 2133px. Il tetto sta sulla card
       invece che sulla pagina, e su un telefono i due modi coincidono:
       il difetto esiste solo dove nessuno guardava.

   2 · IL CONTENITORE E' PIU' STRETTO DEL PORTALE PUBBLICO.
       Misurato sul pubblico:  header senza max-width, interno 1479 su
       finestra 1543, padding 40px, logo 266x80, header alto 100.
       Misurato sull'advisor:  contenitore fermo a 1680, che su 2133
       lascia due margini da 226px.

   ⚠️ E LA PRIMA STESURA DI QUESTA PATCH SBAGLIAVA VERSO: metteva
   max-width:1360px seguendo il mockup, cioe' restringeva ancora. Il
   mockup e' il riferimento per forma e ordine; per la LARGHEZZA il
   riferimento e' il portale pubblico, e sono due fonti diverse per due
   domande diverse.
   ══════════════════════════════════════════════════════════════════════ */

/* 1 · nessun tetto sul contenitore, come il pubblico.
   Il padding lo tiene staccato dai bordi, e vale 40px per lato. */
.vp-wrap, .vp-wrap.vp-largo { max-width: none; padding-left: 40px; padding-right: 40px }

/* 2 · la card riempie lo spazio che le tocca e non si limita da sola.
   ⚠️ Da sola questa riga non basta: e' il punto 3 che le impedisce di
   diventare fasce a piena larghezza dove non devono esserlo. */
.vp-box { width: 100%; max-width: none }

/* ⛔ RC-22 · IL MURO NON E' LA DASHBOARD, E IL TETTO QUI TORNA.
   La riga qui sopra e' di RC-19 (3d5f856d, 21-08 18:13) e serviva a
   liberare le card della Dashboard, che erano BLOCCATE A UNA LARGHEZZA
   DA TELEFONO su uno schermo da 2133px. Era giusta per quel caso.
   ⚠️ Ma .vp-box e' condivisa, e la stessa riga ha tolto il tetto anche
   alla PAGINA DI ACCESSO, che al contrario deve raccogliersi: misurato
   il 22-08, riquadro 1808px su finestra 1920 e 1168 su 1280, cioe' che
   cresce con la finestra. Non e' un difetto vecchio: e' una regressione
   di ieri sera, e l'ha introdotta la correzione di un'altra.
   📌 E' il caso che RC-22 aveva previsto: «la stessa regola applicata
   due volte nello stesso verso avrebbe sbagliato una delle due».
   Sulla Dashboard il contenuto deve RIEMPIRE, sul muro deve
   RACCOGLIERSI, e chi guarda solo una delle due sceglie male per l'altra.
   Il tetto torna qui, e SOLO qui: scoped a .vp-centro, che e' il
   contenitore del solo muro. Toccare .vp-box in generale rifarebbe il
   danno nell'altro verso. */
.vp-centro .vp-box { max-width: 440px }

/* A2 · il marchio si centra INSIEME all'immagine.
   ⚠️ .vp-marchio e .vp-dom non hanno text-align, quindi restano a sinistra:
   con l'immagine centrata da margin:0 auto i due si disallineerebbero, e si
   vedrebbe solo su questa pagina. Lo scopo e' .vp-centro e non le classi in
   generale, perche' le stesse due vivono nella BARRA del portale, dove
   devono restare a sinistra accanto al logo. */
.vp-centro .vp-marchio,
.vp-centro .vp-dom { text-align: center }

/* A3 · sotto i 480 si toglie il MARGINE, non il tetto: il riquadro
   occupa la finestra meno il respiro, e i campi restano toccabili. */
@media (max-width: 480px) {
  .vp-centro { padding: 14px }
  .vp-centro .vp-box { max-width: 100% }
  .vp-centro .vp-campo input { padding: 14px; font-size: 16px }
  .vp-centro .vp-btn { padding: 14px; font-size: 16px }
}

/* 3 · le due coppie che il mockup affianca, e nessun'altra.
   Misurato in v0: le due colonne compaiono in DUE punti soli, e sono
   coppie che si leggono a confronto.
       VERSO ELITE  accanto a  LA TUA RETE      due misure di avanzamento
       MATURATO     accanto a  ACCANTONATO      due importi da confrontare
   Il link personale e la scala restano a piena larghezza APPOSTA. */
.vp-due { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start }

/* 4 · sotto 900px una colonna sola, e li' la larghezza la detta lo
   schermo. Il mockup collassa a 820; qui 900 perche' .vp-box porta piu'
   testo per riga. */
@media (max-width: 900px) {
  .vp-wrap, .vp-wrap.vp-largo { padding-left: 18px; padding-right: 18px }
  .vp-due { grid-template-columns: 1fr }
}

/* ══════════════════════════════════════════════════════════════════════
   L'INTESTAZIONE · allineata al portale pubblico
   misurata il 21-08-2026 su entrambi, a resa vera
   ══════════════════════════════════════════════════════════════════════
                        advisor prima      pubblico
       altezza              65 px            100 px
       padding interno      20 px             40 px
       marchio         116x24, TESTO     266x80, IMMAGINE

   ⛔ E UN TERZO SCARTO CHE NESSUNO CERCAVA, trovato misurando:
   l'intestazione usa <div class="vp-wrap vp-top-in">, SENZA vp-largo.
   Quindi prendeva .vp-wrap a 1120px mentre il contenuto sotto prendeva
   .vp-wrap.vp-largo a 1680: l'header era piu' stretto del contenuto di
   280px per lato. Sotto i 1120 i due coincidono, ed e' per questo che
   non si vedeva: lo stesso difetto delle card a 420px, visibile solo
   dove nessuno guardava.

   ⚠️ La regola del punto 1 lo corregge gia', perche' nomina .vp-wrap e
   non solo .vp-wrap.vp-largo. E' scritto QUI perche' quella correzione
   e' arrivata per caso mentre si sistemava altro: un comportamento
   giusto e non documentato e' quello che il prossimo toglie mentre
   riordina, non vedendo a cosa serve.
   ══════════════════════════════════════════════════════════════════════ */

/* 5 · l'altezza passa da 65 a 100, come il pubblico.
   ⚠️ I 65 non erano scritti: venivano da min-height:64px piu' il bordo.
   Si alza il minimo, non si impone un'altezza fissa: un'altezza fissa
   taglierebbe il contenuto se un giorno la barra portasse una riga in
   piu'. */
.vp-top-in { min-height: 100px }

/* 6 · IL MARCHIO NON E' UNA RIGA DI CSS, ed e' l'unica cosa che questa
   patch non puo' fare da sola.
   L'advisor NON HA UN LOGO: il marchio e' testo, Vip<b>Travel</b>Scout
   a font-size 15px, reso 116x24. Il pubblico ha un'IMMAGINE 266x80.
   Non si puo' "portarlo a 266x80": ingrandire il testo produrrebbe un
   marchio DIVERSO della stessa dimensione, non lo stesso marchio.

   ⛔ DECISIONE L0 del 21-08: si usa l'immagine del portale pubblico.
   ⚠️ E si COPIA il markup <img> dall'header pubblico con lo stesso src,
   lo stesso alt e le stesse dimensioni. NON si ricostruisce il percorso
   a mano: e' il modo di scoprire fra un mese che punta a un file
   diverso, o a nessun file.

   ⚠️ CORRETTO IL 21-08 DOPO LA MISURA: l'immagine va ACCANTO al testo,
   non al suo posto. Nel pubblico l'<img> e il testo Vip<span>Travel</span>Scout
   stanno INSIEME, e l'advisor il testo ce l'ha gia': sostituirlo avrebbe
   tolto una cosa che il pubblico ha, cioe' allontanato l'advisor dal
   riferimento credendo di avvicinarcelo.

   ⚠️ E LO STILE VERO E' INLINE. Nel pubblico l'immagine porta
   style="height:80px;width:auto;display:block" nell'attributo, quindi
   vince su queste due righe. Restano perche' coprono il giorno in cui
   quello inline sparisse - ma chi cambiasse i valori QUI non vedrebbe
   alcun effetto, e cercherebbe il difetto nel posto sbagliato. */
.vp-top-in .vp-marchio img,
.vp-top-in .logo img { height: 80px; width: auto; display: block }

/* ══════════════════════════════════════════════════════════════════════
   7 · LA BARRA CHE GALLEGGIA · le grandezze del portale pubblico
   misurate a resa vera il 21-08-2026 su public/css/vts-nav.css
   ══════════════════════════════════════════════════════════════════════
       position   fixed, top 8px        raggio        24px
       altezza    101 (100 + 1 bordo)   margine lato  24px
       padding    40 / 40               logo          80x80

   ⛔ NON SI ALLINEA AL CONTENUTO, E NON E' UN DIFETTO.
   Il contenuto NON prende i 24px: una barra che galleggia non deve
   allinearsi, deve STACCARSI. Se il contenuto rientrasse di 24 i due
   bordi coinciderebbero e la barra smetterebbe di sembrare staccata:
   diventerebbe un'intestazione larga con gli angoli tondi.
   ⚠️ Quindi il logo sta a 64px dal bordo (24 di margine + 40 di padding)
   e il contenuto a 40. Il disallineamento NON lo introduciamo noi: lo
   eredita dal portale pubblico, dove la barra rientra e il contenuto
   arriva quasi al bordo. Copiare il portale vuol dire copiare anche
   questo, e va scritto perche' a chi guarda senza sapere sembra uno
   sbaglio.

   ⛔ E LA POSIZIONE CAMBIA NATURA: da sticky a FIXED.
   Uno sticky occupa spazio nel flusso e spinge il contenuto da se'; un
   fixed esce dal flusso e il contenuto gli finisce SOTTO. Misurato sul
   pubblico: si sovrappongono, e infatti compensa altrove.
   📌 Il commento di stamattina diceva «il giorno che qualcuno passasse
   l'header a fixed, questa riga gli dice cosa si rompe». Quel giorno e'
   lo stesso giorno.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --vp-top-y: 8px;      /* quanto la barra scende dall'alto  */
  --vp-top-h: 100px;    /* la sua altezza                    */
  --vp-top-b: 1px;      /* il bordo inferiore                */
  --vp-top-x: 24px;     /* quanto rientra dai lati           */
}

body.vp-dash .vp-top {
  position: fixed; top: var(--vp-top-y); left: 0; right: 0;
  margin: 0 var(--vp-top-x); width: calc(100% - var(--vp-top-x) * 2);
  border-radius: 24px; border-bottom: var(--vp-top-b) solid rgba(255,204,0,.12);
}
body.vp-dash .vp-top .vp-top-in { padding-left: 40px; padding-right: 40px }

/* ⚠️ L'OFFSET E' LEGATO AI DUE NUMERI, NON SCRITTO COME COSTANTE.
   Oggi vale 109px, ma 109 non compare da nessuna parte: se domani --vp-top-y
   diventa 12, l'offset segue. Un 109 cablato resterebbe li' e nessuno lo
   collegherebbe alla riga che l'ha prodotto. */
body.vp-dash main.vp-wrap { padding-top: calc(var(--vp-top-y) + var(--vp-top-h) + var(--vp-top-b)) }

/* Sotto i 760 la barra torna STATIC - lo era gia' - e li' l'offset non
   serve piu': un fixed che non e' piu' fixed non ha niente da compensare,
   e lasciare il padding lascerebbe un vuoto in cima senza ragione. */
@media (max-width: 760px) {
  body.vp-dash .vp-top { position: static; margin: 0; width: auto; border-radius: 0 }
  body.vp-dash main.vp-wrap { padding-top: 0 }
  /* I 40px tornano ai 18 del contenuto: sul telefono la barra e' larga
     quanto lo schermo e 40 per lato le toglierebbero spazio senza darle
     forma, visto che qui non galleggia piu'.
     ⚠️ E UNA DIAGNOSI SBAGLIATA VA RACCONTATA, perche' il numero che l'ha
     prodotta resta vero: a 700px l'intestazione misura 203, e la prima
     lettura ha attribuito a questo blocco un +37 che non e' suo. Misurate
     le quattro combinazioni - prima/dopo per senza-logo/con-logo - il
     confronto onesto e': 166 senza immagine e 203 con, IDENTICI prima e
     dopo. I 37 pixel sono l'IMMAGINE alta 80 in una barra che va a capo,
     ed erano gia' in produzione col commit del marchio.
     📌 Il primo confronto metteva un 'prima' misurato senza logo accanto a
     un 'dopo' misurato con: due misure prese in condizioni diverse, che si
     leggono come una differenza. */
  body.vp-dash .vp-top .vp-top-in { padding-left: 18px; padding-right: 18px }
}

/* ══ LA PILLOLA DELLA LINGUA · RC-22 ══════════════════════════════════════
   I numeri vengono dal portale PUBBLICO, misurati il 21-08 su vts-nav.css:
   pillola h44 raggio 50 bordo 1.5 rgba(255,255,255,.28), bottone gap 6 e
   padding 0 14, bandiera 20x15 raggio 3, sigla 13/700, caret 9 opacita' .7,
   tendina raggio 16 min-width 175 bordo 1.5 rgba(255,255,255,.15), voce
   padding 11/16 gap 10, attiva fondo rgba(255,204,0,.12) e testo #FFCC00.

   ⚠️ RISCRITTI, NON IMPORTATI. L'advisor non prende niente dal sito
   pubblico: e' la regola del confine, e vale anche per una pillola. Le
   classi si chiamano vp-lang-* e non vts-lang-*, cosi' nessuno crede che
   siano le stesse e nessuno cambia una delle due aspettandosi che l'altra
   segua.

   ⛔ E LA TENDINA E' DISEGNATA, non un <select>: la regola di casa vieta
   quello del sistema operativo, che su Windows non si puo' vestire e
   cambia forma fra un browser e l'altro. */
.vp-lang{position:relative;display:inline-flex;align-items:center;height:44px;
  background:transparent;border:1.5px solid rgba(255,255,255,.28);border-radius:50px}
.vp-lang-b{display:flex;align-items:center;gap:6px;height:100%;padding:0 14px;
  background:transparent;border:none;outline:none;box-shadow:none;cursor:pointer;
  font:inherit;color:var(--testo)}
.vp-lang-b img{border-radius:3px;display:block}
.vp-lang-c{font-size:13px;font-weight:700}
.vp-lang-v{font-size:9px;opacity:.7}
.vp-lang-d{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:99999;
  min-width:175px;overflow:hidden;background:var(--pannello2,#0a1a4e);
  border:1.5px solid rgba(255,255,255,.15);border-radius:16px;
  box-shadow:0 20px 50px rgba(0,0,0,.35)}
.vp-lang-o{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;
  border:none;background:transparent;cursor:pointer;font:inherit;font-size:14px;
  color:rgba(255,255,255,.78);text-align:left}
.vp-lang-o:hover{background:rgba(255,255,255,.06)}
.vp-lang-o.on{background:rgba(255,204,0,.12);color:var(--oro,#FFCC00);font-weight:700}
.vp-lang-o img{border-radius:3px;display:block;flex:none}

/* L'avviso del TERZO STATO. ⚠️ Non e' un errore di sistema: e' una frase
   che dice che la lingua NON e' cambiata, ed e' l'unica cosa che impedisce
   alla persona di credere a una scelta che al ricarico sparirebbe. */
.vp-lang-ko{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100000;
  max-width:min(92vw,420px);padding:12px 16px;border-radius:12px;font-size:14px;
  font-weight:600;line-height:1.5;color:var(--testo);
  background:rgba(255,90,90,.14);border:1px solid rgba(255,90,90,.42)}

/* ⛔ SUL MURO LA PILLOLA SI STRINGE SUL PROPRIO CONTENUTO, e qui c'era il
   difetto: questa regola dichiarava `display:flex`, che e' di LIVELLO
   BLOCCO, e sostituiva l'inline-flex della pillola. Risultato misurato:
   392px di pillola per 392px di riquadro — la stessa larghezza esatta,
   per una bandiera, due lettere e un caret.

   ⚠️ Ed e' il difetto del riquadro un livello piu' dentro: non un valore
   sbagliato, un VALORE ASSENTE dove serve. Tolto il tetto al contenitore,
   tutto cio' che non ha una larghezza propria prende quella che trova.

   ⛔ E NESSUNA LARGHEZZA IN PIXEL. La sigla oggi e' IT o EN, ma il giorno
   che una lingua ne avesse tre lettere o un nome piu' lungo, un numero
   fisso taglierebbe il testo invece di adattarsi. Il portale pubblico non
   ce l'ha, e per questo funziona con qualunque sigla.

   Centra il CONTENITORE, si stringe la pillola: sono due cose diverse e
   vanno su due elementi diversi. */
.vp-lang-posto{text-align:center;margin:0 0 18px}
.vp-centro .vp-lang{margin:0}